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

React component library

import { jsx as r, jsxs as d, Fragment as w } from "react/jsx-runtime";
import { forwardRef as x, useState as u, useMemo as y } from "react";
import b from "./Chip.js";
import { s as f } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as h } from "./breakpoints-BubDitvo.js";
import { u as S } from "./useDetectMobile-B0Jog4jQ.js";
import v from "./Button.js";
const N = f.div`
  display: flex;

  border: 1px solid var(--gray-200, #e4e9f0);
  border-radius: 999px;

  & .options__item {
    display: flex;
    padding: 0.5rem 2rem;
    align-items: center;
    gap: 6px;

    color: var(--neutral-600, #0f2a46);
    background: var(--gray-100, #f3f6fb);
    border: 1px solid var(--gray-200, #e4e9f0);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;

    &:first-of-type {
      padding-right: 3rem;
    }

    &:last-of-type {
      padding-left: 3rem;
    }

    &.active {
      color: var(--white, #fff);
      background: var(--neutral-600, #0f2a46);
      font-weight: 500;

      &:hover {
        color: var(--white, #fff);
        background: var(--neutral-600, #0f2a46);
      }

      &:first-of-type {
        margin-right: -1.5rem;
        padding-right: 2rem;
        z-index: 1;
      }

      &:last-of-type {
        margin-left: -1.5rem;
        padding-left: 2rem;
        z-index: 1;
      }
    }

    &:hover {
      background: var(--gray-200, #e4e9f0);
    }

    &:focus {
      outline: none;
    }
  }

  @media ${h("S")} {
    width: 100%;

    & .options__item {
      width: 100%;
    }
  }
`, C = f.div`
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  width: 100%;

  & .section__show-more {
    color: var(--neutral-600, #0f2a46);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

    &:focus {
      outline: none;
    }
  }

  @media ${h("S")} {
    flex-direction: column;

    & .learn-more {
      display: none;
    }
  }
`, $ = f.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  padding: 2rem 1.25rem 1.25rem 1.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  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);
  width: 100%;
  max-width: 17.5rem;

  &:hover {
    cursor: pointer;
  }

  & .card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

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

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

      & .card__title {
        color: var(--gray-900, #0c1520);
        text-align: center;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.5rem;
      }

      & .card__divider {
        height: 1px;
        width: 100%;
        background: var(--gray-200, #e4e9f0);
      }

      & .card__description {
        color: var(--gray-600, #5a6573);
        text-align: center;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25rem;
        letter-spacing: 0.0156rem;
      }
    }
  }

  @media ${h("S")} {
    max-width: 100%;
    flex-direction: row;
    padding: 1rem;

    & .card__content {
      flex-direction: row;
      align-items: flex-start;

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

      & .card__text {
        align-items: flex-start;
        gap: 0.625rem;

        & .card__divider {
          display: none;
        }

        & .card__title {
          text-align: left;
          font-size: 1rem;
        }

        & .card__description {
          text-align: left;
        }
      }
    }
  }
`, k = x(
  ({ options: t = [], selectedOptionCode: o = null, onSelectOption: a = () => {
  } }, l) => /* @__PURE__ */ r(N, { ref: l, children: t == null ? void 0 : t.map((c, n) => /* @__PURE__ */ r(
    b,
    {
      label: c,
      borderRadius: "curved",
      color: "neutral",
      className: `options__item ${o === n ? "active" : ""}`,
      onClick: () => {
        a(n);
      }
    },
    `toggle-section-tag__${n + 1}`
  )) })
), z = ({
  title: t,
  description: o,
  image: a,
  learnMoreText: l,
  onSelectItem: c = () => {
  },
  LinkComponent: n,
  link: s
}) => /* @__PURE__ */ d(
  $,
  {
    onClick: c,
    as: n || "a",
    ...n ? { to: `/${s}` } : { href: `/${s}` },
    children: [
      /* @__PURE__ */ d("div", { className: "card__content", children: [
        /* @__PURE__ */ r("img", { src: a, alt: `Card ${t}`, className: "card__image" }),
        /* @__PURE__ */ d("div", { className: "card__text", children: [
          /* @__PURE__ */ r("div", { className: "card__title", children: t }),
          /* @__PURE__ */ r("div", { className: "card__divider" }),
          /* @__PURE__ */ r("div", { className: "card__description", children: o })
        ] })
      ] }),
      /* @__PURE__ */ r(
        v,
        {
          text: l,
          btnType: "basic",
          color: "neutral",
          className: "section__show-more learn-more"
        }
      )
    ]
  }
), O = x(
  ({
    items: t = [],
    showMoreText: o,
    learnMoreText: a,
    onSelectItem: l = () => {
    },
    LinkComponent: c
  }, n) => {
    const s = S(), [g, p] = u(!1), m = () => {
      p((e) => !e);
    }, i = y(() => t == null ? void 0 : t.map((e, _) => /* @__PURE__ */ r(
      z,
      {
        title: e == null ? void 0 : e.title,
        description: e == null ? void 0 : e.description,
        image: e == null ? void 0 : e.image,
        learnMoreText: a,
        onSelectItem: () => l(e),
        LinkComponent: c,
        link: e == null ? void 0 : e.link
      },
      `toggle-section-item__${_ + 1}`
    )), [t]);
    return /* @__PURE__ */ r(C, { ref: n, children: s ? g ? i : /* @__PURE__ */ d(w, { children: [
      i == null ? void 0 : i.slice(0, 4),
      (i == null ? void 0 : i.length) > 4 && /* @__PURE__ */ r(
        v,
        {
          text: o,
          btnType: "basic",
          color: "neutral",
          className: "section__show-more",
          onClick: m
        }
      )
    ] }) : i });
  }
), M = f.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  & .section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    width: 100%;
  }

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

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

  @media ${h("S")} {
    gap: 1.5rem;

    & .section__heading {
      gap: 0.5rem;
    }

    & .section__title {
      font-size: 1.375rem;
      font-weight: 600;
      line-height: 1.75rem;
      text-align: left;
    }

    & .section__description {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.25px;
      text-align: left;
    }
  }
`, q = x(
  ({
    title: t,
    description: o,
    showMoreText: a = "Show more",
    learnMoreText: l = "Learn more",
    options: c = [],
    items: n = [],
    onSelectItem: s = () => {
    },
    LinkComponent: g
  }, p) => {
    const [m, i] = u(0);
    return /* @__PURE__ */ d(M, { ref: p, children: [
      /* @__PURE__ */ d("div", { className: "section__heading", children: [
        t && /* @__PURE__ */ r("div", { className: "section__title", children: t }),
        o && /* @__PURE__ */ r("div", { className: "section__description", children: o })
      ] }),
      /* @__PURE__ */ r(
        k,
        {
          options: c,
          selectedOptionCode: m,
          onSelectOption: (_) => {
            i(_);
          },
          LinkComponent: g
        }
      ),
      /* @__PURE__ */ r(
        O,
        {
          items: n == null ? void 0 : n[m],
          showMoreText: a,
          learnMoreText: l,
          onSelectItem: s,
          LinkComponent: g
        },
        `toggle-section-items__${m}`
      )
    ] });
  }
);
export {
  q as default
};