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

React component library

import { jsxs as r, jsx as i } from "react/jsx-runtime";
import { forwardRef as a } from "react";
import { s as c } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as m } from "./breakpoints-BubDitvo.js";
import { n } from "./utils-BUdHa0nB.js";
const _ = c.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;

  & .section__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    max-width: 50rem;

    & .section__title {
      color: var(--gray-900, #0c1520);
      font-size: 2rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2.5rem;
      ${n(2)}
    }

    & .section__description {
      color: var(--gray-700, #424b56);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.0156rem;
      ${n(2)}
    }
  }

  & .section__items {
    display: flex;

    & .section__item {
      border-left: 4px solid #ffa36a;
      height: 3rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 0;
      min-width: 12.5rem;
      padding-left: 0.75rem;

      & .item__title {
        color: var(--gray-900, #0c1520);
        font-size: 1.375rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.75rem;
      }

      & .item__description {
        color: var(--gray-600, #5a6573);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.25rem;
      }
    }
  }

  @media ${m("S")} {
    gap: 1.25rem;

    & .section__text {
      & .section__title {
        font-size: 1.375rem;
        line-height: 1.75rem;
      }

      & .section__description {
        ${n(5)}
      }
    }

    & .section__items {
      & .section__item {
        height: 3.5rem;
        min-width: auto;

        & .item__title {
          font-size: 1rem;
          line-height: 1.5rem;
          letter-spacing: 0.0063rem;
        }

        & .item__description {
          font-size: 12px;
          line-height: 1rem;
          letter-spacing: 0.0313rem;
        }
      }
    }
  }
`, y = a(({ title: s, description: o, items: e }, d) => /* @__PURE__ */ r(_, { className: "lp-section lp-partner-stats-section", children: [
  /* @__PURE__ */ r("div", { className: "section__text", children: [
    s && /* @__PURE__ */ i("div", { className: "section__title", children: s }),
    o && /* @__PURE__ */ i("div", { className: "section__description", children: o })
  ] }),
  e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ i("div", { className: "section__items", children: e == null ? void 0 : e.map((t, l) => /* @__PURE__ */ r(
    "div",
    {
      className: "section__item",
      children: [
        /* @__PURE__ */ i("div", { className: "item__title", children: t == null ? void 0 : t.title }),
        /* @__PURE__ */ i("div", { className: "item__description", children: t == null ? void 0 : t.description })
      ]
    },
    `partner-stats-section-item__${l + 1}`
  )) })
] }));
export {
  y as default
};