@lanaco/lnc-react-ui 4.0.32 → 4.0.34

package/dist/BlogsSectionSimple.js

@@ -0,0 +1,158 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { n as p } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as f } from "./consts-C1uHV4xc.js";
+import { u as S } from "./useDetectMobile-BC6EGaBc.js";
+import { m as C, t as N, k as u } from "./utils-CqvISfv9.js";
+import { R } from "./style-BGQ1B_dp.js";
+import T from "./Button.js";
+import $ from "./Link.js";
+const B = p.div`
+  display: grid;
+  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${f + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`, v = p.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  max-height: 21.5625rem;
+  min-height: 21.5625rem;
+  cursor: pointer;
+
+  &:hover {
+    & .text-wr-title {
+      color: var(--primary-500, #f59e0b);
+      transition: var(--transition);
+    }
+  }
+
+  & img {
+    max-height: 12.5625rem;
+    min-height: 12.5625rem;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  & .skeleton-img {
+    width: 100%;
+    max-height: 12.5625rem;
+    min-height: 12.5625rem;
+    background-color: ${C("-90deg")};
+  }
+
+  & .action {
+    padding: 0 1rem 1rem 1rem;
+    margin-top: auto;
+  }
+
+  @media (max-width: ${f + "px"}) {
+  }
+`, b = p.div`
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: var(--gray-950, #14161a);
+  border-top: 1px solid var(--gray-95008);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${N(3)}
+  }
+`;
+s(({}, r) => (
+  // <LandingPageClearProductCardSkeleton />
+  /* @__PURE__ */ a(v, { className: "product-card", children: [
+    /* @__PURE__ */ t("div", { className: "skeleton-img" }),
+    /* @__PURE__ */ t("div", { className: "card-title" }),
+    /* @__PURE__ */ t(b, {})
+  ] })
+));
+const h = s((r, w) => {
+  const { title: l, image: m, text: d, onCardClick: o, readMoreText: n = "Read more" } = r;
+  return (
+    // <SimpleBlogCardSkeleton />
+    /* @__PURE__ */ a(v, { className: "blog-card", onClick: o, children: [
+      /* @__PURE__ */ t("img", { src: m }),
+      /* @__PURE__ */ a(b, { children: [
+        /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
+        /* @__PURE__ */ t("div", { className: "text-wr", children: d })
+      ] }),
+      /* @__PURE__ */ t($, { className: "action", color: "gray", onClick: o, children: n })
+    ] })
+  );
+}), G = s((r, w) => {
+  const {
+    icon: l,
+    title: m,
+    onButtonAction: d = () => {
+    },
+    onSelectCard: o = () => {
+    },
+    buttonLink: n,
+    items: i,
+    buttonText: y,
+    limit: g = 3
+  } = r, k = S();
+  return /* @__PURE__ */ a(R, { children: [
+    /* @__PURE__ */ a("div", { className: "regular-title", children: [
+      /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
+        u(l) && /* @__PURE__ */ t("i", { className: l }),
+        /* @__PURE__ */ t("span", { children: m })
+      ] }),
+      u(n) && /* @__PURE__ */ t(
+        T,
+        {
+          type: "button",
+          btnType: "tinted",
+          color: "gray",
+          onClick: () => d(n),
+          borderRadius: "curved",
+          children: y
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(B, { limit: g, children: k === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ t(
+      h,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        onCardClick: () => o(e == null ? void 0 : e.uuid)
+      },
+      c
+    )) : i == null ? void 0 : i.slice(0, g).map((e, c) => /* @__PURE__ */ t(
+      h,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        onCardClick: () => o(e == null ? void 0 : e.uuid)
+      },
+      c
+    )) })
+  ] });
+});
+export {
+  G as default
+};

package/dist/BlogsSectionSimpleCentered.cjs

@@ -0,0 +1,78 @@
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./consts-CtNoHdBj.cjs"),w=require("./useDetectMobile-D6d5LpdL.cjs"),d=require("./utils-C0YSTwcn.cjs"),b=require("./Button.cjs"),f=m.newStyled.div`
+  display: grid;
+  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+  margin: auto;
+
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,h=m.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 18.125rem;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  gap: 1.5rem;
+  padding: 2rem 1.25rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  align-items: center;
+
+  & button {
+    width: fit-content;
+    margin-top: auto;
+  }
+
+  & img {
+    max-width: 6rem;
+    min-width: 6rem;
+    min-height: 6rem;
+    max-height: 6rem;
+    border-radius: 0.75rem;
+    object-fit: cover;
+  }
+
+  & .skeleton-img {
+    max-width: 6rem;
+    min-width: 6rem;
+    min-height: 6rem;
+    max-height: 6rem;
+    border-radius: 0.75rem;
+    background-color: ${d.linearGradientAnimation("-90deg")};
+  }
+
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+    max-width: unset;
+  }
+`,p=m.newStyled.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1.375rem;
+  }
+
+  & .skeleton-title {
+    height: 1.75rem;
+    width: 80%;
+    background-color: ${d.linearGradientAnimation("-90deg")};
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${d.truncateTextInRows(3)}
+  }
+`;s.forwardRef((i,c)=>{const{onCardClick:r}=i;return t.jsxs(h,{className:"product-card",onClick:r,children:[t.jsx("div",{"skeleton-img":!0}),t.jsx(p,{children:t.jsx("div",{className:"skeleton-title"})})]})});const u=s.forwardRef((i,c)=>{const{title:r,image:n,text:o,buttonText:a,onCardClick:e}=i;return t.jsxs(h,{className:"blog-card",onClick:e,children:[t.jsx("img",{src:n}),t.jsxs(p,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(b,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:e,size:"medium",children:a})]})}),j=s.forwardRef((i,c)=>{const{items:r,limit:n=3,onSelectCard:o=()=>{}}=i,a=w.useDetectMobile();return t.jsx(f,{limit:n,children:a===!0?r==null?void 0:r.map((e,l)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},l))})});module.exports=j;

package/dist/BlogsSectionSimpleCentered.js

@@ -0,0 +1,149 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { n as c } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as p } from "./consts-C1uHV4xc.js";
+import { u as b } from "./useDetectMobile-BC6EGaBc.js";
+import { m as u, t as w } from "./utils-CqvISfv9.js";
+import C from "./Button.js";
+const k = c.div`
+  display: grid;
+  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+  margin: auto;
+
+  @media (max-width: ${p + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`, h = c.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 18.125rem;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  gap: 1.5rem;
+  padding: 2rem 1.25rem;
+  min-height: 22.5rem;
+  max-height: 22.5rem;
+  align-items: center;
+
+  & button {
+    width: fit-content;
+    margin-top: auto;
+  }
+
+  & img {
+    max-width: 6rem;
+    min-width: 6rem;
+    min-height: 6rem;
+    max-height: 6rem;
+    border-radius: 0.75rem;
+    object-fit: cover;
+  }
+
+  & .skeleton-img {
+    max-width: 6rem;
+    min-width: 6rem;
+    min-height: 6rem;
+    max-height: 6rem;
+    border-radius: 0.75rem;
+    background-color: ${u("-90deg")};
+  }
+
+  @media (max-width: ${p + "px"}) {
+    max-width: unset;
+  }
+`, f = c.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1.375rem;
+  }
+
+  & .skeleton-title {
+    height: 1.75rem;
+    width: 80%;
+    background-color: ${u("-90deg")};
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${w(3)}
+  }
+`;
+d((i, s) => {
+  const { onCardClick: t } = i;
+  return (
+    // <SimpleBlogCardSkeleton />
+    /* @__PURE__ */ l(h, { className: "product-card", onClick: t, children: [
+      /* @__PURE__ */ r("div", { "skeleton-img": !0 }),
+      /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("div", { className: "skeleton-title" }) })
+    ] })
+  );
+});
+const g = d((i, s) => {
+  const { title: t, image: o, text: a, buttonText: m, onCardClick: e } = i;
+  return (
+    // <SimpleBlogCardCenteredSkeleton />
+    /* @__PURE__ */ l(h, { className: "blog-card", onClick: e, children: [
+      /* @__PURE__ */ r("img", { src: o }),
+      /* @__PURE__ */ l(f, { children: [
+        /* @__PURE__ */ r("div", { className: "text-wr-title", children: t }),
+        /* @__PURE__ */ r("div", { className: "text-wr", children: a })
+      ] }),
+      /* @__PURE__ */ r(
+        C,
+        {
+          borderRadius: "curved",
+          color: "gray",
+          type: "button",
+          btnType: "outline",
+          onClick: e,
+          size: "medium",
+          children: m
+        }
+      )
+    ] })
+  );
+}), M = d((i, s) => {
+  const { items: t, limit: o = 3, onSelectCard: a = () => {
+  } } = i, m = b();
+  return /* @__PURE__ */ r(k, { limit: o, children: m === !0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(
+    g,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      buttonText: e == null ? void 0 : e.buttonText,
+      onCardClick: () => a(e == null ? void 0 : e.uuid)
+    },
+    n
+  )) : t == null ? void 0 : t.slice(0, o).map((e, n) => /* @__PURE__ */ r(
+    g,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      buttonText: e == null ? void 0 : e.buttonText,
+      onCardClick: () => a(e == null ? void 0 : e.uuid)
+    },
+    n
+  )) });
+});
+export {
+  M as default
+};

package/dist/BlogsSectionWithFilters.cjs

@@ -0,0 +1,173 @@
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),N=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),I=require("./consts-CtNoHdBj.cjs"),H=require("./useDetectMobile-D6d5LpdL.cjs"),T=require("./utils-C0YSTwcn.cjs"),X=require("./style-BEUISPP7.cjs"),C=require("./Button.cjs"),Z=require("./Link.cjs"),o=require("./index-BPVoEhTF.cjs"),U=require("./FlexBox.cjs"),M=require("./IconButton.cjs"),J=require("./ThemeProvider.cjs"),Q=require("./useUpdateEffect-BtMgpgIV.cjs"),Y=require("./Icon.cjs"),ee=N.newStyled.div`
+  display: grid;
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,K=N.newStyled.div`
+  display: flex;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 10.375rem;
+  max-height: 10.375rem;
+
+  & img {
+    max-width: 3.3125rem;
+    min-width: 3.3125rem;
+    min-height: 3.3125rem;
+    max-height: 3.3125rem;
+    border-radius: 0.75rem;
+    object-fit: cover;
+  }
+
+  & .skeleton-img {
+    max-width: 3.3125rem;
+    min-width: 3.3125rem;
+    min-height: 3.3125rem;
+    max-height: 3.3125rem;
+    border-radius: 0.75rem;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & a {
+    margin-top: auto;
+  }
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+  }
+`,_=N.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .skeleton-title {
+    height: 1.5rem;
+    width: 80%;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & .skeleton-action {
+    height: 1.25rem;
+    width: 20%;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--gray-700, #4e555f);
+    ${T.truncateTextInRows(3)}
+  }
+`;l.forwardRef(({},t)=>r.jsxs(K,{className:"blog-card",children:[r.jsxs(_,{children:[r.jsx("div",{className:"skeleton-title"}),r.jsx("div",{className:"text-wr"}),r.jsx("div",{className:"skeleton-action"})]}),r.jsx("div",{className:"skeleton-img"})]}));const z=l.forwardRef((t,f)=>{const{title:a,image:n,text:i,buttonText:p,onCardClick:c}=t;return r.jsxs(K,{className:"blog-card",onClick:c,children:[r.jsxs(_,{children:[r.jsx("div",{className:"text-wr-title",children:a}),r.jsx("div",{className:"text-wr",children:i}),r.jsx(Z,{color:"gray",onClick:c,children:p})]}),r.jsx("img",{src:n})]})}),re=N.newStyled.div`
+  position: relative;
+  padding: ${t=>t.padding};
+
+  & button {
+    white-space: nowrap;
+  }
+
+  & .badge-button {
+    ${t=>t.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
+  }
+
+  & .gradient {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 4;
+    transition: ${"0.3s"};
+    right: ${t=>t.noArrows!==!0?"6rem":"0"};
+    width: 2rem;
+    background: #fff;
+    height: 100%;
+    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
+    mask-image: linear-gradient(to left, black 10%, transparent 50%);
+  }
+
+  & .scrollable-container {
+    max-width: -webkit-fill-available;
+    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
+    max-width: fill-available;
+
+    ${t=>t.rightAlignArrows===!0&&t.noArrows!==!0&&"margin-right: 6rem"};
+    scroll-behavior: smooth;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+
+    @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+      margin-right: 0;
+    }
+  }
+  & .scroll-arrow-right,
+  & .scroll-arrow-left {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    visibility: ${t=>t.arrowsVisibleOnHover===!1&&t.hasOverflow?"visible":"hidden"};
+    z-index: 4;
+    transition: ${"0.3s"};
+  }
+  & .scroll-arrow-right {
+    ${t=>t.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
+  }
+  & .scroll-arrow-left {
+    ${t=>t.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
+  }
+  & .scrollable-container:hover > .scroll-arrow-left,
+  & .scrollable-container:hover > .scroll-arrow-right {
+    visibility: ${t=>t.hasOverflow?"visible":"hidden"};
+  }
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+    & .scrollable-container {
+      overflow: auto;
+    }
+    & .scroll-arrow-left,
+    & .scroll-arrow-right {
+      display: none;
+    }
+
+    & .gradient {
+      right: 0;
+    }
+
+    & .scrollable-container button:nth-of-type(3) {
+      ${t=>t.noMargin!==!0&&"margin-left: 1rem"};
+    }
+  }
+`,te=t=>{const[f,a]=l.useState(!1),n=l.useMemo(()=>new IntersectionObserver(([i])=>a(i.isIntersecting)),[]);return l.useEffect(()=>(n.observe(t.current),()=>{n.disconnect()}),[t,n]),f},se=N.newStyled.div`
+  min-height: 1px;
+  ${t=>t.isHorizontal===!0?"min-width: 1px; width: 1px;":"width: 100%;"}
+`,E=l.forwardRef((t,f)=>{const{onIsVisible:a=()=>{},onIsNotVisible:n,isHorizontal:i=!1,className:p=""}=t,c=l.useRef(null),d=te(c);return Q.useUpdateEffect(()=>{d?a():n==null||n()},[d]),r.jsx(se,{ref:c,className:`scroller-element ${p}`,isHorizontal:i})});E.propTypes={onIsVisible:o.PropTypes.func,isHorizontal:o.PropTypes.bool};const D=l.forwardRef(({columnGap:t="2rem",rowGap:f="1.25rem",scrollBySize:a=300,wrapForMobile:n=!1,wrap:i=!1,children:p,methodsRef:c,arrowsVisibleOnHover:d=!0,rightAlignArrows:x=!1,padding:b="0",showTimesBtn:w,noArrows:e,noGradient:g=!1,hideDisabledArrows:y=!1,noMargin:S=!1,...P},$)=>{const R=H.useDetectMobile(),{theme:s}=J.useTheme(),[m,j]=l.useState(!1),[v,k]=l.useState(!1),[V,A]=l.useState(!0),u=l.useRef(),B=()=>{var h;(h=u.current)==null||h.scrollBy(a,0)},q=()=>{var h;(h=u.current)==null||h.scrollBy(-a,0)},[O,G]=l.useState(!1);l.useEffect(()=>{var h,W;G(((h=u==null?void 0:u.current)==null?void 0:h.scrollWidth)>((W=u==null?void 0:u.current)==null?void 0:W.clientWidth))},[p]),l.useImperativeHandle(c,()=>({scrollToEnd(){F()},scrollLeft(){q()},scrollRight(){B()}}));const F=()=>{u.current.scrollLeft=u.current.scrollWidth};return r.jsx(re,{ref:$,arrowsVisibleOnHover:d,hasOverflow:O,noArrows:e,padding:b,rightAlignArrows:x,showTimesBtn:w,theme:s,noMargin:S,...P,children:r.jsxs(U,{ref:u,className:"scrollable-container",columnGap:t,rowGap:f,wrap:i||n&&R?"Wrap":"NoWrap",children:[e!==!0&&r.jsxs(r.Fragment,{children:[!(y===!0&&v===!0)&&r.jsx(M,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:v,icon:"angle-left",onClick:q}),!(y===!0&&m===!0)&&r.jsx(M,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:m,icon:"angle-right",onClick:B})]}),r.jsx(E,{isHorizontal:!0,onIsNotVisible:()=>{v===!0&&k(!1)},onIsVisible:()=>{v===!1&&k(!0)}}),p,r.jsx(E,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{m===!0&&j(!1),A(!0)},onIsVisible:()=>{m===!1&&j(!0),A(!1)}}),V&&O&&g!==!0&&r.jsx("div",{className:"gradient"})]})})});D.propTypes={title:o.PropTypes.string,rowGap:o.PropTypes.string,columnGap:o.PropTypes.string,scrollBySize:o.PropTypes.number,wrapForMobile:o.PropTypes.bool,wrap:o.PropTypes.bool,methodsRef:o.PropTypes.any,arrowsVisibleOnHover:o.PropTypes.bool,rightAlignArrows:o.PropTypes.bool,padding:o.PropTypes.string};const L=l.forwardRef((t,f)=>{const{allButton:a=!0,items:n=[],selectedIds:i=[],onSelect:p=()=>{},onRemove:c=()=>{},onSelectAll:d=()=>{},className:x,showTimesBtn:b=!1,labelKey:w="label",valueKey:e="value",codeKey:g="code",uniqueKey:y,typeKey:S,productsToolbarName:P="All",...$}=t,R=(s,m,j,v,k)=>{i!=null&&i.includes(s)?c(s,m,j,v,k):p(s,m,j,v,k)};return r.jsxs(D,{arrowsVisibleOnHover:!1,className:x,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:b,...$,children:[a&&r.jsx(C,{borderRadius:"curved",btnType:i.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:d,children:P}),n.map((s,m)=>r.jsxs(C,{borderRadius:"curved",btnType:i.includes(s.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>R(s[e],s[w],s[g],y?s[y]:null,S?s[S]:null),children:[T.isDefined(s==null?void 0:s.icon)&&r.jsxs(r.Fragment,{children:[r.jsx("i",{className:s==null?void 0:s.icon})," "]}),s[w],b===!0&&r.jsx(Y,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>c(s[e],s[w],s[g],y?s[y]:null,S?s[S]:null)})]},m))]})});L.propTypes={allButton:o.PropTypes.bool,items:o.PropTypes.array,selectedIds:o.PropTypes.array,onSelect:o.PropTypes.func,onRemove:o.PropTypes.func,onSelectAll:o.PropTypes.func,className:o.PropTypes.string,showTimesBtn:o.PropTypes.bool,valuKey:o.PropTypes.string,labelKey:o.PropTypes.string,codeKey:o.PropTypes.string};const oe=l.forwardRef((t,f)=>{const{icon:a,title:n,items:i,buttonText:p,limit:c=3,options:d,onActionClick:x=()=>{},onSelectOption:b=()=>{}}=t,w=H.useDetectMobile();return r.jsxs(X.TitleWithOptionsSectionWrapper,{children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[T.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:n})]}),T.isDefinedNotEmptyString(onSectionClick)&&r.jsx(C,{type:"button",btnType:"tinted",color:"gray",onClick:x,borderRadius:"curved",children:p})]}),(d==null?void 0:d.length)>0&&r.jsx(L,{items:d,onRemove:e=>{b(e)},onSelect:e=>{b(e)},labelKey:"name",valueKey:"code",noMargin:!0}),r.jsx(ee,{limit:c,children:w===!0?i==null?void 0:i.map((e,g)=>r.jsx(z,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},g)):i==null?void 0:i.slice(0,c).map((e,g)=>r.jsx(z,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},g))})]})});module.exports=oe;