@lanaco/lnc-react-ui 4.0.38 → 4.0.39

package/dist/OverlayGeneralCardsSection.js

@@ -1,12 +1,23 @@
-import { jsx as r, Fragment as _, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import f from "./Button.js";
-import { useTheme as x } from "./ThemeProvider.js";
-import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { m as i, t as s } from "./utils-DtRLzzTZ.js";
-import { M as h } from "./consts-C1uHV4xc.js";
-import { R as u } from "./style-6tSw9aqK.js";
-const v = m.div`
+import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as m, Suspense as v, memo as w, useMemo as k } from "react";
+import { n as _ } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as g } from "./consts-C1uHV4xc.js";
+import { R as y } from "./style-6tSw9aqK.js";
+import { useTheme as f } from "./ThemeProvider.js";
+import { m as d, t as h } from "./utils-DtRLzzTZ.js";
+import b from "./Button.js";
+const $ = _.div`
+  display: grid;
+  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
+  gap: 1.25rem;
+  justify-items: center;
+
+  @media (max-width: ${g + "px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`, u = _.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -37,7 +48,7 @@ const v = m.div`
   & .wrapper__image--skeleton {
     width: 100%;
     border-radius: 0.75rem;
-    background-color: ${i("-90deg")};
+    background-color: ${d("-90deg")};
   }
 
   & .wrapper__text {
@@ -55,7 +66,7 @@ const v = m.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${s(2)}
+      ${h(2)}
     }
 
     & .text__description {
@@ -64,17 +75,17 @@ const v = m.div`
       font-style: normal;
       font-weight: 600;
       line-height: 1.75rem;
-      ${s(2)}
+      ${h(2)}
     }
 
     & .text__title--skeleton {
-      background-color: ${i("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 9rem;
     }
 
     & .text__description--skeleton {
-      background-color: ${i("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 12rem;
     }
@@ -94,7 +105,7 @@ const v = m.div`
   }
 
   & .text__action--skeleton {
-    background-color: ${i("-90deg")};
+    background-color: ${d("-90deg")};
     height: 2rem;
     width: 9rem;
     position: absolute;
@@ -102,7 +113,7 @@ const v = m.div`
     left: 1rem;
   }
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${g + "px"}) {
     max-height: 100%;
 
     & .wrapper__overlay {
@@ -121,63 +132,92 @@ const v = m.div`
       left: 2rem;
     }
   }
-`, w = p(
+`, N = m(({}, t) => {
+  const { theme: a } = f();
+  return /* @__PURE__ */ i(u, { theme: a, children: [
+    /* @__PURE__ */ e("div", { className: "wrapper__image--skeleton" }),
+    /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
+      /* @__PURE__ */ e("div", { className: "text__title--skeleton" }),
+      /* @__PURE__ */ e("div", { className: "text__description--skeleton" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "text__action--skeleton" })
+  ] });
+}), S = ({ limit: t = 2, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(c, { children: Array.from({ length: t }, (n, l) => /* @__PURE__ */ e(
+  N,
+  {
+    isLoading: a
+  },
+  `${o}-skeleton-product-card-${l}`
+)) }), C = ({
+  children: t,
+  fallbackComponent: a = /* @__PURE__ */ e(c, {}),
+  isLoading: o = !1,
+  limit: n,
+  keyPrefix: l
+}) => /* @__PURE__ */ e(v, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
+  S,
+  {
+    isLoading: o,
+    limit: n,
+    keyPrefix: l
+  }
+) : t }), P = m(
   ({
     title: t,
     image: a,
-    overlay: l,
+    overlay: o,
     description: n,
-    actionText: c,
-    actionLink: e,
-    handleClick: o = () => {
+    actionText: l,
+    actionLink: x,
+    handleClick: s = () => {
     }
-  }, y) => {
-    const { theme: g } = x();
-    return /* @__PURE__ */ r(_, { children: /* @__PURE__ */ d(v, { theme: g, overlay: l, onClick: o, children: [
-      /* @__PURE__ */ r("div", { className: "wrapper__overlay", children: /* @__PURE__ */ r("img", { src: a, className: "wrapper__image" }) }),
-      /* @__PURE__ */ d("div", { className: "wrapper__text", children: [
-        /* @__PURE__ */ r("div", { className: "text__title", children: t }),
-        /* @__PURE__ */ r("div", { className: "text__description", children: n })
+  }, r) => {
+    const { theme: p } = f();
+    return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(u, { theme: p, overlay: o, onClick: s, children: [
+      /* @__PURE__ */ e("div", { className: "wrapper__overlay", children: /* @__PURE__ */ e("img", { src: a, className: "wrapper__image" }) }),
+      /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
+        /* @__PURE__ */ e("div", { className: "text__title", children: t }),
+        /* @__PURE__ */ e("div", { className: "text__description", children: n })
       ] }),
-      /* @__PURE__ */ r(
-        f,
+      /* @__PURE__ */ e(
+        b,
         {
-          text: c,
-          onClick: o,
+          text: l,
+          onClick: s,
           className: "text__action"
         }
       )
     ] }) });
   }
-), b = m.div`
-  display: grid;
-  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
-  gap: 1.25rem;
-  justify-items: center;
-
-  @media (max-width: ${h + "px"}) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-`, j = p(
-  ({ title: t, items: a, limit: l = 2, onSelectCard: n = () => {
-  } }, c) => /* @__PURE__ */ d(u, { children: [
-    /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: t }) }) }),
-    /* @__PURE__ */ r(b, { limit: l, children: a && (a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ r(
-      w,
+), G = w(P), W = m(
+  ({ title: t, items: a, limit: o = 2, onSelectCard: n = () => {
+  }, isLoading: l = !1 }, x) => {
+    const s = k(() => /* @__PURE__ */ e(c, { children: a && (a == null ? void 0 : a.map((r, p) => /* @__PURE__ */ e(
+      G,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        description: e == null ? void 0 : e.description,
-        actionText: e == null ? void 0 : e.actionText,
-        overlay: e == null ? void 0 : e.overlay,
-        handleClick: () => n(e == null ? void 0 : e.uuid)
+        title: r == null ? void 0 : r.title,
+        image: r == null ? void 0 : r.image,
+        description: r == null ? void 0 : r.description,
+        actionText: r == null ? void 0 : r.actionText,
+        overlay: r == null ? void 0 : r.overlay,
+        handleClick: () => n(r == null ? void 0 : r.uuid)
       },
-      `landing-page-overlay-general-card__${o + 1}`
-    ))) })
-  ] })
+      `landing-page-overlay-general-card__${p + 1}`
+    ))) }), [a]);
+    return /* @__PURE__ */ i(y, { children: [
+      /* @__PURE__ */ e("div", { className: "regular-title center", children: /* @__PURE__ */ e("div", { className: "regular-title-text", children: /* @__PURE__ */ e("span", { children: t }) }) }),
+      /* @__PURE__ */ e($, { limit: o, children: /* @__PURE__ */ e(
+        C,
+        {
+          isLoading: l,
+          limit: o,
+          keyPrefix: "explore-landing",
+          children: s
+        }
+      ) })
+    ] });
+  }
 );
 export {
-  j as default
+  W as default
 };

package/dist/ProductsWithBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),g=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),f=require("./style-BR3tIhP1.cjs"),a=require("./utils-NZLCh-J5.cjs"),j=c.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),k=require("./style-BR3tIhP1.cjs"),l=require("./utils-NZLCh-J5.cjs"),y=u.newStyled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -15,12 +15,12 @@
     height: 100%;
     object-fit: cover;
   }
-`,v=c.newStyled.div`
+`,S=u.newStyled.div`
   display: grid;
-  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -39,7 +39,7 @@
       /* Safari and Chrome */
     }
   }
-`,y=c.newStyled.div`
+`,f=u.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -55,7 +55,7 @@
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${a.truncateTextInRows(2)}
+     ${l.truncateTextInRows(2)}
   }
 
   &:hover {
@@ -65,18 +65,18 @@
   }
 
   & .skeleton-img {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${l.linearGradientAnimation("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${l.linearGradientAnimation("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -87,4 +87,4 @@
       object-fit: cover;
     }
   }
-`,h=p.forwardRef((o,m)=>{const{uuid:d,title:r,image:n,sellerUuid:u,onSelectCard:t=()=>{},imageComponent:s}=o;return i.jsxs(y,{className:"product-card",onClick:t,children:[a.isDefined(s)?s:i.jsx("img",{src:n}),i.jsx("div",{className:"card-title",children:r})]})}),S=p.forwardRef((o,m)=>{const{icon:d,items:r,limit:n=4,bannerImage:u,onSelectCard:t=()=>{},title:s="Season inspiration"}=o,w=b.useDetectMobile();return i.jsxs(f.RegulatTitleSectionWrapper,{ref:m,children:[i.jsx("div",{className:"regular-title",children:i.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&i.jsx("i",{className:d}),i.jsx("span",{children:s})]})}),i.jsx(j,{className:"products-banner",children:i.jsx("img",{src:u})}),i.jsx(v,{limit:n,children:w===!0?r==null?void 0:r.map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l))})]})});module.exports=S;
+`,P=d.forwardRef((t,a)=>{const{uuid:o,title:i,image:s,sellerUuid:g,onSelectCard:n=()=>{},imageComponent:c}=t;return r.jsxs(f,{className:"product-card",onClick:n,children:[l.isDefined(c)?c:r.jsx("img",{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),C=d.forwardRef(({},t)=>r.jsxs(f,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),N=({limit:t=4,isLoading:a=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(C,{isLoading:a},`${o}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:a=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:i,keyPrefix:s})=>r.jsx(d.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(N,{isLoading:o,limit:i,keyPrefix:s}):t}),h=d.memo(P),q=d.forwardRef((t,a)=>{const{icon:o,items:i,limit:s=4,bannerImage:g,onSelectCard:n=()=>{},title:c="Season inspiration",isLoading:w=!1}=t,b=v.useDetectMobile(),j=d.useMemo(()=>r.jsx(r.Fragment,{children:b===!0?i==null?void 0:i.map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m)):i==null?void 0:i.slice(0,s).map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m))}),[i]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[l.isDefinedNotEmptyString(o)&&r.jsx("i",{className:o}),r.jsx("span",{children:c})]})}),r.jsx(y,{className:"products-banner",children:r.jsx("img",{src:g})}),r.jsx(S,{limit:s,children:r.jsx($,{isLoading:w,limit:s,keyPrefix:"explore-landing",children:j})})]})});module.exports=q;

package/dist/ProductsWithBannerSection.js

@@ -1,11 +1,11 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { n as s } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as f } from "./consts-C1uHV4xc.js";
-import { u as w } from "./useDetectMobile-BC6EGaBc.js";
-import { R as v } from "./style-6tSw9aqK.js";
-import { t as k, m as h, l as y, k as N } from "./utils-DtRLzzTZ.js";
-const S = s.div`
+import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as S, memo as C, useMemo as N } from "react";
+import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as b } from "./consts-C1uHV4xc.js";
+import { u as P } from "./useDetectMobile-BC6EGaBc.js";
+import { R as $ } from "./style-6tSw9aqK.js";
+import { t as M, m as g, l as j, k as E } from "./utils-DtRLzzTZ.js";
+const I = p.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -22,12 +22,12 @@ const S = s.div`
     height: 100%;
     object-fit: cover;
   }
-`, $ = s.div`
+`, U = p.div`
   display: grid;
-  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -46,7 +46,7 @@ const S = s.div`
       /* Safari and Chrome */
     }
   }
-`, j = s.div`
+`, w = p.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -62,7 +62,7 @@ const S = s.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${k(2)}
+     ${M(2)}
   }
 
   &:hover {
@@ -72,18 +72,18 @@ const S = s.div`
   }
 
   & .skeleton-img {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -94,59 +94,90 @@ const S = s.div`
       object-fit: cover;
     }
   }
-`, u = g((a, c) => {
+`, W = u((t, d) => {
   const {
-    uuid: l,
+    uuid: a,
     title: i,
     image: o,
-    sellerUuid: p,
-    onSelectCard: t = () => {
+    sellerUuid: h,
+    onSelectCard: n = () => {
     },
-    imageComponent: d
-  } = a;
-  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
-    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
+    imageComponent: l
+  } = t;
+  return /* @__PURE__ */ s(w, { className: "product-card", onClick: n, children: [
+    j(l) ? l : /* @__PURE__ */ r("img", { src: o }),
     /* @__PURE__ */ r("div", { className: "card-title", children: i })
   ] });
-}), P = g((a, c) => {
+}), B = u(({}, t) => /* @__PURE__ */ s(w, { className: "product-card", children: [
+  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ r("div", { className: "skeleton-title" })
+] })), R = ({ limit: t = 4, isLoading: d = !1, keyPrefix: a }) => /* @__PURE__ */ r(c, { children: Array.from({ length: t }, (i, o) => /* @__PURE__ */ r(
+  B,
+  {
+    isLoading: d
+  },
+  `${a}-skeleton-product-card-${o}`
+)) }), z = ({
+  children: t,
+  fallbackComponent: d = /* @__PURE__ */ r(c, {}),
+  isLoading: a = !1,
+  limit: i,
+  keyPrefix: o
+}) => /* @__PURE__ */ r(S, { fallbackComponent: d, children: a === !0 ? /* @__PURE__ */ r(
+  R,
+  {
+    isLoading: a,
+    limit: i,
+    keyPrefix: o
+  }
+) : t }), f = C(W), O = u((t, d) => {
   const {
-    icon: l,
+    icon: a,
     items: i,
     limit: o = 4,
-    bannerImage: p,
-    onSelectCard: t = () => {
+    bannerImage: h,
+    onSelectCard: n = () => {
+    },
+    title: l = "Season inspiration",
+    isLoading: k = !1
+  } = t, v = P(), y = N(() => /* @__PURE__ */ r(c, { children: v === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
     },
-    title: d = "Season inspiration"
-  } = a, b = w();
-  return /* @__PURE__ */ m(v, { ref: c, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
-      N(l) && /* @__PURE__ */ r("i", { className: l }),
-      /* @__PURE__ */ r("span", { children: d })
+    m
+  )) : i == null ? void 0 : i.slice(0, o).map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid)
+    },
+    m
+  )) }), [i]);
+  return /* @__PURE__ */ s($, { ref: d, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
+      E(a) && /* @__PURE__ */ r("i", { className: a }),
+      /* @__PURE__ */ r("span", { children: l })
     ] }) }),
-    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
-    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-      u,
+    /* @__PURE__ */ r(I, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
+    /* @__PURE__ */ r(U, { limit: o, children: /* @__PURE__ */ r(
+      z,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) })
+        isLoading: k,
+        limit: o,
+        keyPrefix: "explore-landing",
+        children: y
+      }
+    ) })
   ] });
 });
 export {
-  P as default
+  O as default
 };

package/dist/SimpleCategoriesSection.cjs

@@ -1,9 +1,9 @@
-"use strict";const r=require("react/jsx-runtime"),h=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),w=require("./consts-CtNoHdBj.cjs"),y=require("./useDetectMobile-D6d5LpdL.cjs"),n=require("./utils-NZLCh-J5.cjs"),v=require("./style-BR3tIhP1.cjs"),j=require("./Button.cjs"),S=p.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),f=require("./consts-CtNoHdBj.cjs"),S=require("./useDetectMobile-D6d5LpdL.cjs"),d=require("./utils-NZLCh-J5.cjs"),k=require("./style-BR3tIhP1.cjs"),x=require("./Button.cjs"),C=p.newStyled.div`
   display: grid;
-  grid-template-columns: ${o=>"repeat(6,  minmax(0, 1fr))"};
+  grid-template-columns: ${i=>"repeat(6,  minmax(0, 1fr))"};
   gap: 2rem;
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -22,7 +22,7 @@
       /* Safari and Chrome */
     }
   }
-`,k=p.newStyled.div`
+`,w=p.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -47,11 +47,11 @@
 
   & .card-content {
     padding: 0.75rem;
-    ${n.truncateTextInRows(2)}
+    ${d.truncateTextInRows(2)}
   }
 
   & .card-content-2 {
-    ${n.truncateTextInRows(2)}
+    ${d.truncateTextInRows(2)}
   }
 
   & img {
@@ -65,10 +65,10 @@
     width: 100%;
     min-height: 8.25rem;
     max-height: 8.25rem;
-    ${n.linearGradientAnimation("-90deg")}
+    ${d.linearGradientAnimation("-90deg")}
   }
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     min-width: 8.75rem;
     max-width: 8.75rem;
 
@@ -78,4 +78,4 @@
       max-height: 5.375rem;
     }
   }
-`,g=h.forwardRef((o,l)=>{const{uuid:a,image:s,name:i,onSelectCard:c=()=>{}}=o;return r.jsxs(k,{className:"simple-category-card",onClick:()=>c(a),children:[r.jsx("img",{src:s}),r.jsx("div",{className:"card-content",children:r.jsx("div",{className:"card-content-2",children:i})})]})}),R=h.forwardRef((o,l)=>{const{icon:a,title:s="Shop by category",items:i,buttonText:c,buttonLink:m,limit:u=12,onButtonAction:b=()=>{},onSelectCard:t=()=>{}}=o,f=y.useDetectMobile();return r.jsxs(v.RegulatTitleSectionWrapper,{ref:l,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[n.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:s})]}),n.isDefinedNotEmptyString(m)&&r.jsx(j,{type:"button",btnType:"tinted",color:"gray",onClick:()=>b(m),borderRadius:"curved",children:c})]}),r.jsx(S,{limit:u,children:f===!0?i==null?void 0:i.map((e,d)=>r.jsx(g,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},d)):i==null?void 0:i.slice(0,u).map((e,d)=>r.jsx(g,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},d))})]})});module.exports=R;
+`,N=c.forwardRef((i,a)=>{const{uuid:n,image:o,name:t,onSelectCard:l=()=>{}}=i;return e.jsxs(w,{className:"simple-category-card",onClick:()=>l(n),children:[e.jsx("img",{src:o}),e.jsx("div",{className:"card-content",children:e.jsx("div",{className:"card-content-2",children:t})})]})}),R=c.forwardRef(({},i)=>e.jsxs(w,{className:"simple-category-card",children:[e.jsx("div",{className:"skeleton-img"}),e.jsx("div",{className:"card-content"})]})),q=({limit:i=12,isLoading:a=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(o,t)=>e.jsx(R,{isLoading:a},`${n}-skeleton-category-card-${t}`))}),$=({children:i,fallbackComponent:a=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:o,keyPrefix:t})=>e.jsx(c.Suspense,{fallbackComponent:a,children:n===!0?e.jsx(q,{isLoading:n,limit:o,keyPrefix:t}):i}),h=c.memo(N),E=c.forwardRef((i,a)=>{const{icon:n,title:o="Shop by category",items:t,buttonText:l,buttonLink:g,limit:m=12,onButtonAction:y=()=>{},onSelectCard:s=()=>{},isLoading:b=!1}=i,j=S.useDetectMobile(),v=c.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?t==null?void 0:t.map((r,u)=>e.jsx(h,{uuid:r==null?void 0:r.uuid,image:r==null?void 0:r.image,name:r==null?void 0:r.name,onSelectCard:()=>s==null?void 0:s(r==null?void 0:r.uuid)},u)):t==null?void 0:t.slice(0,m).map((r,u)=>e.jsx(h,{uuid:r==null?void 0:r.uuid,image:r==null?void 0:r.image,name:r==null?void 0:r.name,onSelectCard:()=>s==null?void 0:s(r==null?void 0:r.uuid)},u))}),[t]);return e.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:o})]}),d.isDefinedNotEmptyString(g)&&e.jsx(x,{type:"button",btnType:"tinted",color:"gray",onClick:()=>y(g),borderRadius:"curved",children:l})]}),e.jsx(C,{limit:m,children:e.jsx($,{isLoading:b,limit:m,keyPrefix:"explore-landing",children:v})})]})});module.exports=E;