@lanaco/lnc-react-ui 4.0.206 → 4.0.207

package/dist/SearchSection.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "./TextInput.js";
 import "./Icon.js";
-import { S as a } from "./SearchSection-DAaMecR4.js";
+import { S as a } from "./SearchSection-BEYnWPSr.js";
 export {
   a as default
 };

package/dist/Separator.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),c=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./utils-RnrgDDZP.cjs"),l=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),u=i.styled.div`
+"use strict";const n=require("react/jsx-runtime"),c=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./utils-CITgSxXe.cjs"),l=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),u=i.styled.div`
   height: 1px;
   background-color: ${e=>m.getColorRgbaValue(e.theme,"MenuItem","default","enabled","separator")};
   margin-left: -0.25rem;

package/dist/Separator.js

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { s as n } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as p } from "./utils-DtEfC-TX.js";
+import { c as p } from "./utils-B2fsQ6PS.js";
 import { u as i } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const d = n.div`
+const c = n.div`
   height: 1px;
   background-color: ${(r) => p(
   r.theme,
@@ -17,7 +17,7 @@ const d = n.div`
 `, b = l((r, e) => {
   const { className: t = "", style: o = {}, ...a } = r, m = i();
   return /* @__PURE__ */ s(
-    d,
+    c,
     {
       ref: e,
       theme: m,

package/dist/SeparatorSection.cjs

@@ -1,9 +1,9 @@
-"use strict";const r=require("react/jsx-runtime"),t=require("react"),s=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./consts-goSZX3xP.cjs"),a=s.styled.div`
+"use strict";const r=require("react/jsx-runtime"),t=require("react"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./breakpoints-CcVm-gVm.cjs"),a=o.styled.div`
   width: 100%;
   height: 0.125rem;
   background-color: var(--gray-95008, rgba(20, 22, 26, 0.08));
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media ${s.down("S")} {
     height: 0.5rem;
   }
-`,c=t.forwardRef(({},e)=>r.jsx(a,{ref:e,className:"separator-section-lnc"}));module.exports=c;
+`,i=t.forwardRef(({},e)=>r.jsx(a,{ref:e,className:"separator-section-lnc"}));module.exports=i;

package/dist/SeparatorSection.js

@@ -1,16 +1,16 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
 import { s as t } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as e } from "./consts-BuFChS64.js";
+import { d as e } from "./breakpoints-ff0SIcV3.js";
 const m = t.div`
   width: 100%;
   height: 0.125rem;
   background-color: var(--gray-95008, rgba(20, 22, 26, 0.08));
 
-  @media (max-width: ${e + "px"}) {
+  @media ${e("S")} {
     height: 0.5rem;
   }
-`, d = a(({}, r) => /* @__PURE__ */ o(m, { ref: r, className: "separator-section-lnc" }));
+`, c = a(({}, r) => /* @__PURE__ */ o(m, { ref: r, className: "separator-section-lnc" }));
 export {
-  d as default
+  c as default
 };

package/dist/ShopCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),h=require("react"),u=require("./Button.cjs"),$=require("./index-D_5jNP-o.cjs"),R=require("./utils-RnrgDDZP.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./consts-goSZX3xP.cjs"),s=require("./style-BAcV7F53.cjs"),N=g.styled.div`
+"use strict";const t=require("react/jsx-runtime"),g=require("react"),h=require("./Button.cjs"),$=require("./index-CUaeb_TU.cjs"),R=require("./utils-CITgSxXe.cjs"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),s=require("./style-BAcV7F53.cjs"),N=f.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -67,6 +67,12 @@
     width: 100%;
   }
 
+  @media ${p.down("M")} {
+    & .wrapper__cards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
   & .wrapper__view-all {
     align-self: center;
     color: var(--neutral-600, #0f2a46);
@@ -83,7 +89,7 @@
     display: none;
   }
 
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
+  @media ${p.down("S")} {
     gap: 1.25rem;
 
     & .wrapper__view-all {
@@ -128,8 +134,8 @@
             }`}
     }
   }
-`,q=g.styled(s.SkeletonRowWrapper)`
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
+`,q=f.styled(s.SkeletonRowWrapper)`
+  @media ${p.down("S")} {
     & > div {
       background: linear-gradient(
         to right,
@@ -141,4 +147,4 @@
       box-shadow: none;
     }
   }
-`,E=({keyPrefix:r})=>t.jsxs(q,{children:[t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-1`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-2`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-3`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-4`)]}),I=({keyPrefix:r,isLoading:l=!1,fallbackComponent:i=t.jsx(t.Fragment,{}),children:n})=>t.jsx(h.Suspense,{fallbackComponent:i,children:l===!0?t.jsx(E,{keyPrefix:r}):n}),P=h.forwardRef(({title:r,subtitle:l,items:i,isLoading:n=!1,limit:_=4,limitForMobile:f=2,buttonText:p="Show More",onSelectCard:w=()=>{},onButtonAction:o=()=>{},icon:m,getImage:c=()=>{},getProductImage:d=()=>{},hideProducts:b=!1,showRating:y=!0,gridView:a=!1,componentName:v,LinkComponent:j},S)=>t.jsxs(N,{ref:S,limitCards:_,limitCardsForMobile:f,gridView:a,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[r&&t.jsxs("div",{className:"title__text",children:[R.isDefinedNotEmptyString(m)&&t.jsx("i",{className:m}),t.jsx("span",{children:r})]}),o&&!n&&t.jsx(u,{text:p,color:"neutral",borderRadius:"curved",btnType:"tinted",className:`title__action ${a?"grid":""}`,onClick:o})]}),l&&t.jsx("div",{className:"wrapper__subtitle",children:l})]}),t.jsx(I,{isLoading:n,keyPrefix:"shop-cards-skeleton",children:t.jsx("div",{className:"wrapper__cards",children:i==null?void 0:i.map((e,C)=>t.jsx($.ShopCard,{showRating:y,uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:(M,k)=>w(e==null?void 0:e.uuid,k),image:c(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:d,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:b,metadata:{name:v,accessor:e==null?void 0:e.accessor},LinkComponent:j},`shop-card__${C+1}`))})}),a&&o&&!n&&t.jsx(u,{text:p,borderRadius:"curved",btnType:"basic",color:"neutral",className:"wrapper__view-all",onClick:o})]}));module.exports=P;
+`,z=({keyPrefix:r})=>t.jsxs(q,{children:[t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-1`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-2`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-3`),t.jsx(s.SkeletonLinePlaceholder,{height:"18rem",borderRadius:"0.75rem"},`${r}-4`)]}),M=({keyPrefix:r,isLoading:l=!1,fallbackComponent:i=t.jsx(t.Fragment,{}),children:n})=>t.jsx(g.Suspense,{fallbackComponent:i,children:l===!0?t.jsx(z,{keyPrefix:r}):n}),P=g.forwardRef(({title:r,subtitle:l,items:i,isLoading:n=!1,limit:w=4,limitForMobile:_=2,buttonText:m="Show More",onSelectCard:x=()=>{},onButtonAction:o=()=>{},icon:u,getImage:c=()=>{},getProductImage:d=()=>{},hideProducts:b=!1,showRating:y=!0,gridView:a=!1,componentName:v,LinkComponent:j},S)=>t.jsxs(N,{ref:S,limitCards:w,limitCardsForMobile:_,gridView:a,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[r&&t.jsxs("div",{className:"title__text",children:[R.isDefinedNotEmptyString(u)&&t.jsx("i",{className:u}),t.jsx("span",{children:r})]}),o&&!n&&t.jsx(h,{text:m,color:"neutral",borderRadius:"curved",btnType:"tinted",className:`title__action ${a?"grid":""}`,onClick:o})]}),l&&t.jsx("div",{className:"wrapper__subtitle",children:l})]}),t.jsx(M,{isLoading:n,keyPrefix:"shop-cards-skeleton",children:t.jsx("div",{className:"wrapper__cards",children:i==null?void 0:i.map((e,k)=>t.jsx($.ShopCard,{showRating:y,uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:(F,C)=>x(e==null?void 0:e.uuid,C),image:c(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:d,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:b,metadata:{name:v,accessor:e==null?void 0:e.accessor},LinkComponent:j},`shop-card__${k+1}`))})}),a&&o&&!n&&t.jsx(h,{text:m,borderRadius:"curved",btnType:"basic",color:"neutral",className:"wrapper__view-all",onClick:o})]}));module.exports=P;

package/dist/ShopCardsSection.js

@@ -1,12 +1,12 @@
 import { jsxs as l, jsx as r, Fragment as N } from "react/jsx-runtime";
-import { Suspense as R, forwardRef as M } from "react";
-import h from "./Button.js";
-import { S as j } from "./index-D-86mDtn.js";
-import { k as z } from "./utils-DtEfC-TX.js";
-import { s as u } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as g } from "./consts-BuFChS64.js";
-import { S as E, a as s } from "./style-BwQ4djFC.js";
-const I = u.div`
+import { Suspense as R, forwardRef as j } from "react";
+import u from "./Button.js";
+import { S as z } from "./index-yARaIaLj.js";
+import { l as M } from "./utils-B2fsQ6PS.js";
+import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as m } from "./breakpoints-ff0SIcV3.js";
+import { S as F, a as s } from "./style-BwQ4djFC.js";
+const D = g.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -75,6 +75,12 @@ const I = u.div`
     width: 100%;
   }
 
+  @media ${m("M")} {
+    & .wrapper__cards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
   & .wrapper__view-all {
     align-self: center;
     color: var(--neutral-600, #0f2a46);
@@ -91,7 +97,7 @@ const I = u.div`
     display: none;
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media ${m("S")} {
     gap: 1.25rem;
 
     & .wrapper__view-all {
@@ -136,8 +142,8 @@ const I = u.div`
             }`}
     }
   }
-`, F = u(E)`
-  @media (max-width: ${g + "px"}) {
+`, E = g(F)`
+  @media ${m("S")} {
     & > div {
       background: linear-gradient(
         to right,
@@ -149,7 +155,7 @@ const I = u.div`
       box-shadow: none;
     }
   }
-`, D = ({ keyPrefix: t }) => /* @__PURE__ */ l(F, { children: [
+`, I = ({ keyPrefix: t }) => /* @__PURE__ */ l(E, { children: [
   /* @__PURE__ */ r(
     s,
     {
@@ -182,12 +188,12 @@ const I = u.div`
     },
     `${t}-4`
   )
-] }), P = ({
+] }), W = ({
   keyPrefix: t,
   isLoading: o = !1,
   fallbackComponent: i = /* @__PURE__ */ r(N, {}),
   children: n
-}) => /* @__PURE__ */ r(R, { fallbackComponent: i, children: o === !0 ? /* @__PURE__ */ r(D, { keyPrefix: t }) : n }), J = M(
+}) => /* @__PURE__ */ r(R, { fallbackComponent: i, children: o === !0 ? /* @__PURE__ */ r(I, { keyPrefix: t }) : n }), Q = j(
   ({
     title: t,
     subtitle: o,
@@ -195,23 +201,23 @@ const I = u.div`
     isLoading: n = !1,
     limit: w = 4,
     limitForMobile: _ = 2,
-    buttonText: m = "Show More",
+    buttonText: f = "Show More",
     onSelectCard: d = () => {
     },
     onButtonAction: a = () => {
     },
-    icon: f,
+    icon: h,
     getImage: b = () => {
     },
-    getProductImage: v = () => {
+    getProductImage: c = () => {
     },
-    hideProducts: x = !1,
-    showRating: c = !0,
+    hideProducts: v = !1,
+    showRating: y = !0,
     gridView: p = !1,
-    componentName: y,
+    componentName: x,
     LinkComponent: S
   }, C) => /* @__PURE__ */ l(
-    I,
+    D,
     {
       ref: C,
       limitCards: w,
@@ -221,13 +227,13 @@ const I = u.div`
         /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
           /* @__PURE__ */ l("div", { className: "wrapper__title", children: [
             t && /* @__PURE__ */ l("div", { className: "title__text", children: [
-              z(f) && /* @__PURE__ */ r("i", { className: f }),
+              M(h) && /* @__PURE__ */ r("i", { className: h }),
               /* @__PURE__ */ r("span", { children: t })
             ] }),
             a && !n && /* @__PURE__ */ r(
-              h,
+              u,
               {
-                text: m,
+                text: f,
                 color: "neutral",
                 borderRadius: "curved",
                 btnType: "tinted",
@@ -239,14 +245,14 @@ const I = u.div`
           o && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: o })
         ] }),
         /* @__PURE__ */ r(
-          P,
+          W,
           {
             isLoading: n,
             keyPrefix: "shop-cards-skeleton",
             children: /* @__PURE__ */ r("div", { className: "wrapper__cards", children: i == null ? void 0 : i.map((e, k) => /* @__PURE__ */ r(
-              j,
+              z,
               {
-                showRating: c,
+                showRating: y,
                 uuid: e == null ? void 0 : e.uuid,
                 title: e == null ? void 0 : e.name,
                 subtitle: e == null ? void 0 : e.shortDescription,
@@ -254,12 +260,12 @@ const I = u.div`
                 reviewCount: e == null ? void 0 : e.reviewCount,
                 products: e == null ? void 0 : e.products,
                 imageComponent: e == null ? void 0 : e.imageComponent,
-                onSelectCard: (W, $) => d(e == null ? void 0 : e.uuid, $),
+                onSelectCard: (P, $) => d(e == null ? void 0 : e.uuid, $),
                 image: b(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
-                getProductImage: v,
+                getProductImage: c,
                 canAcceptPayments: e == null ? void 0 : e.canAcceptPayments,
-                hideProducts: x,
-                metadata: { name: y, accessor: e == null ? void 0 : e.accessor },
+                hideProducts: v,
+                metadata: { name: x, accessor: e == null ? void 0 : e.accessor },
                 LinkComponent: S
               },
               `shop-card__${k + 1}`
@@ -267,9 +273,9 @@ const I = u.div`
           }
         ),
         p && a && !n && /* @__PURE__ */ r(
-          h,
+          u,
           {
-            text: m,
+            text: f,
             borderRadius: "curved",
             btnType: "basic",
             color: "neutral",
@@ -282,5 +288,5 @@ const I = u.div`
   )
 );
 export {
-  J as default
+  Q as default
 };

package/dist/Sidebar.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),o=require("react"),a=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./Icon.cjs"),S=require("./utils-RnrgDDZP.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=a.styled.aside`
+"use strict";const t=require("react/jsx-runtime"),o=require("react"),a=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./Icon.cjs"),S=require("./utils-CITgSxXe.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=a.styled.aside`
   direction: ${e=>e.placement=="right"?"rtl":"ltr"};
   position: relative;
   && {

package/dist/Sidebar.js

@@ -2,7 +2,7 @@ import { jsxs as u, jsx as s } from "react/jsx-runtime";
 import { forwardRef as b, useState as g, useEffect as S } from "react";
 import { s as o } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import x from "./Icon.js";
-import { u as C } from "./utils-DtEfC-TX.js";
+import { u as C } from "./utils-B2fsQ6PS.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const v = o.aside`
   direction: ${(e) => e.placement == "right" ? "rtl" : "ltr"};

package/dist/SimpleCategoriesSection.cjs

@@ -1,9 +1,13 @@
-"use strict";const t=require("react/jsx-runtime"),a=require("react"),k=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./consts-goSZX3xP.cjs"),_=require("./useDetectMobile-zkbzoOGV.cjs"),u=require("./utils-RnrgDDZP.cjs"),y=require("./style-B4kAj6YU.cjs"),N=require("./Button.cjs"),v=require("./CategorySimpleCard-COGlTj06.cjs"),o=require("./style-BAcV7F53.cjs"),E=k.styled.div`
+"use strict";const r=require("react/jsx-runtime"),a=require("react"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./breakpoints-CcVm-gVm.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),u=require("./utils-CITgSxXe.cjs"),N=require("./style-DC05rdyx.cjs"),v=require("./Button.cjs"),R=require("./CategorySimpleCard-CIBvknos.cjs"),o=require("./style-BAcV7F53.cjs"),_=b.styled.div`
   display: grid;
   grid-template-columns: ${()=>"repeat(6,  minmax(0, 1fr))"};
   gap: 2rem;
 
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+  @media ${m.down("M")} {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media ${m.down("S")} {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -22,10 +26,10 @@
       /* Safari and Chrome */
     }
   }
-`,R=k.styled(o.SkeletonColumnWrapper)`
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+`,f=b.styled(o.SkeletonColumnWrapper)`
+  @media ${m.down("S")} {
     & .skeleton__cards {
       overflow-x: hidden;
     }
   }
-`,M=({keyPrefix:r})=>t.jsxs(R,{children:[t.jsxs(o.SkeletonRowWrapper,{className:"skeleton__cards",children:[t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-1`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-2`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-3`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-4`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-5`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-6`)]}),t.jsx(o.SkeletonRowWrapper,{children:t.jsxs(o.SkeletonRowWrapper,{className:"skeleton__cards",children:[t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-7`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-8`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-9`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-10`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-11`),t.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${r}-12`)]})})]}),I=({keyPrefix:r,isLoading:c=!1,fallbackComponent:i=t.jsx(t.Fragment,{}),children:d})=>t.jsx(a.Suspense,{fallbackComponent:i,children:c===!0?t.jsx(M,{keyPrefix:r}):d}),q=a.memo(v.CategorySimpleCard),W=a.forwardRef((r,c)=>{const{icon:i,title:d="Shop by category",items:l,buttonText:m="Shop now",buttonLink:h,limit:S=12,onButtonAction:w=()=>{},onSelectCard:n=()=>{},isLoading:p=!1,getImage:g=()=>{},LinkComponent:j}=r,$=_.useDetectMobile(),C=a.useMemo(()=>t.jsx(t.Fragment,{children:$===!0?l==null?void 0:l.map((e,s)=>t.jsx(q,{uuid:e==null?void 0:e.uuid,image:g(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid),LinkComponent:j,...e},s)):l==null?void 0:l.slice(0,S).map((e,s)=>t.jsx(q,{uuid:e==null?void 0:e.uuid,image:g(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid),LinkComponent:j,...e},s))}),[l]);return t.jsxs(y.RegulatTitleSectionWrapper,{ref:c,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[u.isDefinedNotEmptyString(i)&&t.jsx("i",{className:i}),t.jsx("span",{children:d})]}),u.isDefinedNotEmptyString(m)&&u.isDefinedNotEmptyString(h)&&!p&&t.jsx(N,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var s;(s=e==null?void 0:e.target)==null||s.blur(),w(h)},borderRadius:"curved",className:"button-link",children:m})]}),t.jsx(I,{isLoading:p,keyPrefix:"simple-categories-skeleton",children:t.jsx(E,{limit:S,children:C})})]})});module.exports=W;
+`,M=({keyPrefix:t})=>r.jsxs(f,{children:[r.jsxs(o.SkeletonRowWrapper,{className:"skeleton__cards",children:[r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-1`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-2`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-3`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-4`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-5`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-6`)]}),r.jsx(o.SkeletonRowWrapper,{children:r.jsxs(o.SkeletonRowWrapper,{className:"skeleton__cards",children:[r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-7`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-8`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-9`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-10`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-11`),r.jsx(o.SkeletonSquarePlaceholder,{height:"8.25rem"},`${t}-12`)]})})]}),W=({keyPrefix:t,isLoading:c=!1,fallbackComponent:i=r.jsx(r.Fragment,{}),children:d})=>r.jsx(a.Suspense,{fallbackComponent:i,children:c===!0?r.jsx(M,{keyPrefix:t}):d}),k=a.memo(R.CategorySimpleCard),D=a.forwardRef((t,c)=>{const{icon:i,title:d="Shop by category",items:n,buttonText:h="Shop now",buttonLink:S,limit:p=12,onButtonAction:w=()=>{},onSelectCard:l=()=>{},isLoading:g=!1,getImage:j=()=>{},LinkComponent:q}=t,$=y.useDetectMobile(),C=a.useMemo(()=>r.jsx(r.Fragment,{children:$===!0?n==null?void 0:n.map((e,s)=>r.jsx(k,{uuid:e==null?void 0:e.uuid,image:j(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>l==null?void 0:l(e==null?void 0:e.uuid),LinkComponent:q,...e},s)):n==null?void 0:n.slice(0,p).map((e,s)=>r.jsx(k,{uuid:e==null?void 0:e.uuid,image:j(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>l==null?void 0:l(e==null?void 0:e.uuid),LinkComponent:q,...e},s))}),[n]);return r.jsxs(N.RegulatTitleSectionWrapper,{ref:c,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[u.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:d})]}),u.isDefinedNotEmptyString(h)&&u.isDefinedNotEmptyString(S)&&!g&&r.jsx(v,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var s;(s=e==null?void 0:e.target)==null||s.blur(),w(S)},borderRadius:"curved",className:"button-link",children:h})]}),r.jsx(W,{isLoading:g,keyPrefix:"simple-categories-skeleton",children:r.jsx(_,{limit:p,children:C})})]})});module.exports=D;

package/dist/SimpleCategoriesSection.js

@@ -1,19 +1,23 @@
-import { jsxs as l, jsx as t, Fragment as w } from "react/jsx-runtime";
-import { Suspense as M, memo as R, forwardRef as E, useMemo as I } from "react";
-import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as k } from "./consts-BuFChS64.js";
-import { u as L } from "./useDetectMobile-Bkvj0VMa.js";
-import { k as c } from "./utils-DtEfC-TX.js";
-import { R as W } from "./style-neMbLWE6.js";
-import B from "./Button.js";
-import { C as T } from "./CategorySimpleCard-Em84kZzQ.js";
-import { b as j, S as p, c as o } from "./style-BwQ4djFC.js";
-const y = C.div`
+import { jsxs as l, jsx as r, Fragment as C } from "react/jsx-runtime";
+import { Suspense as M, memo as R, forwardRef as W, useMemo as L } from "react";
+import { s as v } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as u } from "./breakpoints-ff0SIcV3.js";
+import { u as T } from "./useDetectMobile-CcVo3PNi.js";
+import { l as c } from "./utils-B2fsQ6PS.js";
+import { R as j } from "./style-BUyFad_y.js";
+import y from "./Button.js";
+import { C as z } from "./CategorySimpleCard-CkSwvJRw.js";
+import { b as B, S as p, c as o } from "./style-BwQ4djFC.js";
+const D = v.div`
   display: grid;
   grid-template-columns: ${() => "repeat(6,  minmax(0, 1fr))"};
   gap: 2rem;
 
-  @media (max-width: ${k + "px"}) {
+  @media ${u("M")} {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media ${u("S")} {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -32,90 +36,90 @@ const y = C.div`
       /* Safari and Chrome */
     }
   }
-`, z = C(j)`
-  @media (max-width: ${k + "px"}) {
+`, E = v(B)`
+  @media ${u("S")} {
     & .skeleton__cards {
       overflow-x: hidden;
     }
   }
-`, D = ({ keyPrefix: r }) => /* @__PURE__ */ l(z, { children: [
+`, F = ({ keyPrefix: t }) => /* @__PURE__ */ l(E, { children: [
   /* @__PURE__ */ l(p, { className: "skeleton__cards", children: [
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-1`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-2`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-3`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-4`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-5`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-6`)
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-1`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-2`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-3`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-4`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-5`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-6`)
   ] }),
-  /* @__PURE__ */ t(p, { children: /* @__PURE__ */ l(p, { className: "skeleton__cards", children: [
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-7`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-8`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-9`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-10`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-11`),
-    /* @__PURE__ */ t(o, { height: "8.25rem" }, `${r}-12`)
+  /* @__PURE__ */ r(p, { children: /* @__PURE__ */ l(p, { className: "skeleton__cards", children: [
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-7`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-8`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-9`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-10`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-11`),
+    /* @__PURE__ */ r(o, { height: "8.25rem" }, `${t}-12`)
   ] }) })
-] }), F = ({
-  keyPrefix: r,
+] }), I = ({
+  keyPrefix: t,
   isLoading: s = !1,
-  fallbackComponent: m = /* @__PURE__ */ t(w, {}),
+  fallbackComponent: m = /* @__PURE__ */ r(C, {}),
   children: d
-}) => /* @__PURE__ */ t(M, { fallbackComponent: m, children: s === !0 ? /* @__PURE__ */ t(D, { keyPrefix: r }) : d }), f = R(T), U = E((r, s) => {
+}) => /* @__PURE__ */ r(M, { fallbackComponent: m, children: s === !0 ? /* @__PURE__ */ r(F, { keyPrefix: t }) : d }), w = R(z), X = W((t, s) => {
   const {
     icon: m,
     title: d = "Shop by category",
     items: i,
     buttonText: h = "Shop now",
-    buttonLink: u,
-    limit: g = 12,
-    onButtonAction: v = () => {
+    buttonLink: g,
+    limit: S = 12,
+    onButtonAction: k = () => {
     },
     onSelectCard: n = () => {
     },
-    isLoading: S = !1,
-    getImage: b = () => {
+    isLoading: b = !1,
+    getImage: $ = () => {
     },
-    LinkComponent: $
-  } = r, _ = L(), N = I(() => /* @__PURE__ */ t(w, { children: _ === !0 ? i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ t(
-    f,
+    LinkComponent: f
+  } = t, N = T(), _ = L(() => /* @__PURE__ */ r(C, { children: N === !0 ? i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ r(
+    w,
     {
       uuid: e == null ? void 0 : e.uuid,
-      image: b(e == null ? void 0 : e.image) || null,
+      image: $(e == null ? void 0 : e.image) || null,
       name: e == null ? void 0 : e.name,
       code: e == null ? void 0 : e.code,
       onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid),
-      LinkComponent: $,
+      LinkComponent: f,
       ...e
     },
     a
-  )) : i == null ? void 0 : i.slice(0, g).map((e, a) => /* @__PURE__ */ t(
-    f,
+  )) : i == null ? void 0 : i.slice(0, S).map((e, a) => /* @__PURE__ */ r(
+    w,
     {
       uuid: e == null ? void 0 : e.uuid,
-      image: b(e == null ? void 0 : e.image) || null,
+      image: $(e == null ? void 0 : e.image) || null,
       name: e == null ? void 0 : e.name,
       code: e == null ? void 0 : e.code,
       onSelectCard: () => n == null ? void 0 : n(e == null ? void 0 : e.uuid),
-      LinkComponent: $,
+      LinkComponent: f,
       ...e
     },
     a
   )) }), [i]);
-  return /* @__PURE__ */ l(W, { ref: s, children: [
+  return /* @__PURE__ */ l(j, { ref: s, children: [
     /* @__PURE__ */ l("div", { className: "regular-title", children: [
       /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
-        c(m) && /* @__PURE__ */ t("i", { className: m }),
-        /* @__PURE__ */ t("span", { children: d })
+        c(m) && /* @__PURE__ */ r("i", { className: m }),
+        /* @__PURE__ */ r("span", { children: d })
       ] }),
-      c(h) && c(u) && !S && /* @__PURE__ */ t(
-        B,
+      c(h) && c(g) && !b && /* @__PURE__ */ r(
+        y,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
             var a;
-            (a = e == null ? void 0 : e.target) == null || a.blur(), v(u);
+            (a = e == null ? void 0 : e.target) == null || a.blur(), k(g);
           },
           borderRadius: "curved",
           className: "button-link",
@@ -123,16 +127,16 @@ const y = C.div`
         }
       )
     ] }),
-    /* @__PURE__ */ t(
-      F,
+    /* @__PURE__ */ r(
+      I,
       {
-        isLoading: S,
+        isLoading: b,
         keyPrefix: "simple-categories-skeleton",
-        children: /* @__PURE__ */ t(y, { limit: g, children: N })
+        children: /* @__PURE__ */ r(D, { limit: S, children: _ })
       }
     )
   ] });
 });
 export {
-  U as default
+  X as default
 };