@lanaco/lnc-react-ui/dist/FeedbackSection.js

React component library

import { jsxs as o, jsx as e } from "react/jsx-runtime";
import { forwardRef as d } from "react";
import { l as t } from "./utils-BUdHa0nB.js";
import f from "./Button.js";
import { q as m } from "./styled-components.browser.esm-Cfeh8eHg.js";
import { d as g } from "./breakpoints-BubDitvo.js";
const p = m.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;

  & .feedback__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    & .feedback__title {
      color: var(--gray-950, #14161a);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
    }

    & .feedback__description {
      color: var(--gray-600, #676e79);
      text-align: center;
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
    }
  }

  & .feedback__action {
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
    background: var(--neutral-95004, rgba(20, 22, 26, 0.04));

    &:hover {
      color: var(--gray-950, #14161a);
      background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
    }
  }

  @media ${g("S")} {
    text-align: center;
  }
`, x = d(
  ({ title: i, description: n, buttonText: l, onButtonAction: r = () => {
  } }, s) => /* @__PURE__ */ o(p, { ref: s, className: "lp-section lp-general-section lp-feedback-section", children: [
    /* @__PURE__ */ o("div", { className: "feedback__content", children: [
      t(i) && /* @__PURE__ */ e("div", { className: "feedback__title", children: /* @__PURE__ */ e("span", { children: i }) }),
      t(n) && /* @__PURE__ */ e("div", { className: "feedback__description", children: /* @__PURE__ */ e("span", { children: n }) })
    ] }),
    t(l) && /* @__PURE__ */ e(
      f,
      {
        text: l,
        borderRadius: "curved",
        btnType: "tinted",
        color: "neutral",
        className: "feedback__action",
        onClick: (a) => {
          var c;
          (c = a == null ? void 0 : a.target) == null || c.blur(), r == null || r();
        }
      }
    )
  ] })
);
export {
  x as default
};