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

React component library

import { jsx as t, jsxs as o } from "react/jsx-runtime";
import { forwardRef as a } from "react";
import { s } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as c } from "./breakpoints-BubDitvo.js";
import { n as l } from "./utils-BUdHa0nB.js";
const d = s.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;

  & .section__card {
    display: flex;
    padding: 2rem 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200, #e4e9f0);
    background: var(--white, #fff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    max-width: 14.625rem;
    width: 100%;

    & .section__image {
      max-width: 3.5rem;
      max-height: 3.5rem;
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }

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

    & .section__description {
      color: var(--gray-600, #5a6573);
      text-align: center;
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1rem;
      letter-spacing: 0.025rem;
      ${l(2)}
    }
  }

  @media ${c("S")} {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;

    & .section__card {
      padding: 1rem;

      & .section__image {
        max-width: 2.5rem;
        max-height: 2.5rem;
      }

      & .section__title {
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.5rem;
      }
    }
  }
`, m = a(({ items: i = [] }, n) => /* @__PURE__ */ t(d, { ref: n, children: i == null ? void 0 : i.map((e, r) => /* @__PURE__ */ o("div", { className: "section__card", children: [
  /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
    "img",
    {
      src: e == null ? void 0 : e.image,
      alt: `Stats Card ${r + 1}`,
      className: "section__image"
    }
  ) }),
  /* @__PURE__ */ o("div", { children: [
    /* @__PURE__ */ t("div", { className: "section__title", children: e == null ? void 0 : e.title }),
    /* @__PURE__ */ t("div", { className: "section__description", children: e == null ? void 0 : e.description })
  ] })
] }, `stats-section-item__${r + 1}`)) })), g = s.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;

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

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

    & .section__description {
      color: var(--gray-500, #7a8594);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
    }
  }

  @media ${c("S")} {
    text-align: center;

    & .section__heading {
      & .section__title {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
      }

      & .section__description {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.25rem;
      }
    }
  }
`, y = a(({ title: i, description: n, items: e = [] }, r) => /* @__PURE__ */ o(g, { ref: r, children: [
  /* @__PURE__ */ o("div", { className: "section__heading", children: [
    i && /* @__PURE__ */ t("div", { className: "section__title", children: i }),
    n && /* @__PURE__ */ t("div", { className: "section__description", children: n })
  ] }),
  /* @__PURE__ */ t(m, { items: e })
] }));
export {
  y as default
};