@lanaco/lnc-react-ui 4.0.38 → 4.0.40

package/dist/ShopCardsSection.cjs

@@ -1,10 +1,11 @@
-"use strict";const r=require("react/jsx-runtime"),_=require("react"),w=require("./Button.cjs"),v=require("./Icon.cjs"),p=require("./utils-NZLCh-J5.cjs"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),u=require("./consts-CtNoHdBj.cjs"),b=d.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),g=require("react"),f=require("./Button.cjs"),v=require("./Icon.cjs"),l=require("./utils-NZLCh-J5.cjs"),h=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),y=require("./consts-CtNoHdBj.cjs"),j=h.newStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 1.25rem;
   border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
   background: var(--Lanaco-Gray-white, #fff);
+  width: 100%;
 
   /* drop-shadow-sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
@@ -42,7 +43,7 @@
       font-weight: 500;
       line-height: 1.5rem;
       letter-spacing: -0.0112rem;
-      ${p.truncateTextInRows(2)}
+      ${l.truncateTextInRows(2)}
     }
 
     & .wrapper__subtitle {
@@ -53,7 +54,7 @@
       font-weight: 400;
       line-height: 1.25rem;
       letter-spacing: -0.0056rem;
-      ${p.truncateTextInRows(2)}
+      ${l.truncateTextInRows(2)}
     }
 
     & .wrapper__badges {
@@ -108,7 +109,7 @@
       }
     }
   }
-`,j=d.newStyled.div`
+`,u=h.newStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -134,7 +135,7 @@
       width: 4rem;
       height: 4rem;
       border-radius: 999px;
-      background-color: ${p.linearGradientAnimation("-90deg")};
+      background-color: ${l.linearGradientAnimation("-90deg")};
     }
   }
 
@@ -146,12 +147,12 @@
     width: 100%;
 
     & .wrapper__info-item {
-      background-color: ${p.linearGradientAnimation("-90deg")};
+      background-color: ${l.linearGradientAnimation("-90deg")};
       height: 1rem;
       width: 100%;
     }
   }
-`,y=_.forwardRef(({image:a,imageComponent:m,title:t,subtitle:g,badges:c,rating:o,reviewCount:n,products:s,onSelectCard:h=()=>{}},f)=>r.jsxs(b,{onClick:h,children:[r.jsxs("div",{className:"wrapper__content",children:[p.isDefined(m)?m:r.jsx("img",{src:a,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"wrapper__title",children:t}),r.jsx("div",{className:"wrapper__subtitle",children:g}),c&&r.jsx("div",{className:"wrapper__badges"}),o&&n&&r.jsxs("div",{className:"wrapper__rating",children:[r.jsx("div",{className:"wrapper_stars",children:[...Array(5).keys()].map((i,l)=>r.jsx(v,{icon:i<o?" mng-lnc-star--filled":" mng-lnc-star",className:"wrapper__star"},`shop-card-rating-star__${l+1}`))}),r.jsxs("div",{className:"wrapper__review-count",children:["(",n==null?void 0:n.toLocaleString(),")"]})]})]})]}),r.jsx("div",{className:"wrapper__products",children:s&&(s==null?void 0:s.map((i,l)=>r.jsx(_.Fragment,{children:r.jsx("div",{className:"wrapper__product",onClick:()=>{var e;return(e=i==null?void 0:i.onSelectProduct)==null?void 0:e.call(i,i==null?void 0:i.uuid)},children:p.isDefined(i==null?void 0:i.imageComponent)?i==null?void 0:i.imageComponent:r.jsx("img",{src:i==null?void 0:i.image,className:"product__image"})})},l)))})]})),N=_.forwardRef(({},a)=>r.jsx(j,{children:r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"wrapper__info-item"}),r.jsx("div",{className:"wrapper__info-item"}),r.jsx("div",{className:"wrapper__info-item"}),r.jsx("div",{className:"wrapper__info-item"})]})]})})),k=d.newStyled.div`
+`,b=g.forwardRef(({image:a,imageComponent:p,title:s,subtitle:c,badges:x,rating:m,reviewCount:t,products:n,onSelectCard:_=()=>{}},w)=>e.jsxs(j,{onClick:_,children:[e.jsxs("div",{className:"wrapper__content",children:[l.isDefined(p)?p:e.jsx("img",{src:a,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__title",children:s}),e.jsx("div",{className:"wrapper__subtitle",children:c}),x&&e.jsx("div",{className:"wrapper__badges"}),m&&t&&e.jsxs("div",{className:"wrapper__rating",children:[e.jsx("div",{className:"wrapper_stars",children:[...Array(5).keys()].map((i,o)=>e.jsx(v,{icon:i<m?" mng-lnc-star--filled":" mng-lnc-star",className:"wrapper__star"},`shop-card-rating-star__${o+1}`))}),e.jsxs("div",{className:"wrapper__review-count",children:["(",t==null?void 0:t.toLocaleString(),")"]})]})]})]}),e.jsx("div",{className:"wrapper__products",children:n&&(n==null?void 0:n.map((i,o)=>e.jsx(g.Fragment,{children:e.jsx("div",{className:"wrapper__product",onClick:()=>{var r;return(r=i==null?void 0:i.onSelectProduct)==null?void 0:r.call(i,i==null?void 0:i.uuid)},children:l.isDefined(i==null?void 0:i.imageComponent)?i==null?void 0:i.imageComponent:e.jsx("img",{src:i==null?void 0:i.image,className:"product__image"})})},o)))})]})),N=g.forwardRef(({},a)=>e.jsx(u,{children:e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"}),e.jsx("div",{className:"wrapper__info-item"})]})]})})),k=h.newStyled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -175,6 +176,15 @@
         font-weight: 600;
         line-height: 2rem;
         letter-spacing: -0.47px;
+
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        & i {
+          font-size: 1.5rem;
+          color: var(--primary-500, #f59e0b);
+        }
       }
 
       & .title__action {
@@ -210,7 +220,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
@@ -231,4 +241,4 @@
       gap: 1rem;
     }
   }
-`,$=_.forwardRef(({title:a,subtitle:m,items:t,limit:g=4,limitForMobile:c=2,actionText:o,onSelectCard:n=()=>{},onShowMore:s},h)=>{var l;const f=()=>{s==null||s()},i=e=>{n==null||n(e==null?void 0:e.uuid)};return r.jsxs(k,{limitCards:g,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[a&&r.jsx("div",{className:"title__text",children:a}),o&&s&&r.jsx(w,{text:o,borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:f})]}),m&&r.jsx("div",{className:"wrapper__subtitle",children:m})]}),r.jsx("div",{className:"wrapper__cards",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,x)=>r.jsx(y,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,subtitle:e==null?void 0:e.subtitle,image:e==null?void 0:e.image,rating:e==null?void 0:e.rating,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e)},`shop-card__${x+1}`)):(l=Array.from("1234"))==null?void 0:l.map((e,x)=>r.jsx(N,{},`shop-card-skeleton__${x+1}`))})]})});module.exports=$;
+`,$=g.forwardRef(({title:a,subtitle:p,items:s,limit:c=4,limitForMobile:x=2,buttonText:m="Show More",onSelectCard:t=()=>{},onButtonAction:n=()=>{},icon:_},w)=>{var o;const i=r=>{t==null||t(r==null?void 0:r.uuid)};return e.jsxs(k,{ref:w,limitCards:c,limitCardsForMobile:x,children:[e.jsxs("div",{className:"wrapper__heading",children:[e.jsxs("div",{className:"wrapper__title",children:[a&&e.jsxs("div",{className:"title__text",children:[l.isDefinedNotEmptyString(_)&&e.jsx("i",{className:_}),e.jsx("span",{children:a})]}),n&&e.jsx(f,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:n})]}),p&&e.jsx("div",{className:"wrapper__subtitle",children:p})]}),e.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((r,d)=>e.jsx(b,{uuid:r==null?void 0:r.uuid,title:r==null?void 0:r.title,subtitle:r==null?void 0:r.subtitle,image:r==null?void 0:r.image,rating:r==null?void 0:r.rating,reviewCount:r==null?void 0:r.reviewCount,products:r==null?void 0:r.products,imageComponent:r==null?void 0:r.imageComponent,onSelectCard:()=>i==null?void 0:i(r)},`shop-card__${d+1}`)):(o=Array.from("1234"))==null?void 0:o.map((r,d)=>e.jsx(N,{},`shop-card-skeleton__${d+1}`))})]})});module.exports=$;

package/dist/ShopCardsSection.js

@@ -2,16 +2,17 @@ import { jsxs as t, jsx as i } from "react/jsx-runtime";
 import { forwardRef as c, Fragment as y } from "react";
 import u from "./Button.js";
 import N from "./Icon.js";
-import { t as x, m as v, l as b } from "./utils-DtRLzzTZ.js";
+import { t as x, m as v, l as b, k } from "./utils-DtRLzzTZ.js";
 import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as k } from "./consts-C1uHV4xc.js";
-const $ = f.div`
+import { M as $ } from "./consts-C1uHV4xc.js";
+const S = f.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 1.25rem;
   border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
   background: var(--Lanaco-Gray-white, #fff);
+  width: 100%;
 
   /* drop-shadow-sm */
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
@@ -158,26 +159,26 @@ const $ = f.div`
       width: 100%;
     }
   }
-`, C = c(
+`, z = c(
   ({
     image: a,
     imageComponent: m,
     title: l,
-    subtitle: _,
-    badges: g,
+    subtitle: g,
+    badges: d,
     rating: o,
-    reviewCount: s,
-    products: n,
-    onSelectCard: h = () => {
+    reviewCount: n,
+    products: s,
+    onSelectCard: _ = () => {
     }
-  }, w) => /* @__PURE__ */ t($, { onClick: h, children: [
+  }, w) => /* @__PURE__ */ t(S, { onClick: _, children: [
     /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
       b(m) ? m : /* @__PURE__ */ i("img", { src: a, className: "wrapper__image" }),
       /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
         /* @__PURE__ */ i("div", { className: "wrapper__title", children: l }),
-        /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: _ }),
-        g && /* @__PURE__ */ i("div", { className: "wrapper__badges" }),
-        o && s && /* @__PURE__ */ t("div", { className: "wrapper__rating", children: [
+        /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: g }),
+        d && /* @__PURE__ */ i("div", { className: "wrapper__badges" }),
+        o && n && /* @__PURE__ */ t("div", { className: "wrapper__rating", children: [
           /* @__PURE__ */ i("div", { className: "wrapper_stars", children: [...Array(5).keys()].map((r, p) => /* @__PURE__ */ i(
             N,
             {
@@ -188,13 +189,13 @@ const $ = f.div`
           )) }),
           /* @__PURE__ */ t("div", { className: "wrapper__review-count", children: [
             "(",
-            s == null ? void 0 : s.toLocaleString(),
+            n == null ? void 0 : n.toLocaleString(),
             ")"
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: "wrapper__products", children: n && (n == null ? void 0 : n.map((r, p) => /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { className: "wrapper__products", children: s && (s == null ? void 0 : s.map((r, p) => /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
       "div",
       {
         className: "wrapper__product",
@@ -206,7 +207,7 @@ const $ = f.div`
       }
     ) }, p))) })
   ] })
-), z = c(({}, a) => /* @__PURE__ */ i(j, { children: /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
+), C = c(({}, a) => /* @__PURE__ */ i(j, { children: /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
   /* @__PURE__ */ i("div", { className: "wrapper__image" }),
   /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
     /* @__PURE__ */ i("div", { className: "wrapper__info-item" }),
@@ -214,7 +215,7 @@ const $ = f.div`
     /* @__PURE__ */ i("div", { className: "wrapper__info-item" }),
     /* @__PURE__ */ i("div", { className: "wrapper__info-item" })
   ] })
-] }) })), I = f.div`
+] }) })), M = f.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -238,6 +239,15 @@ const $ = f.div`
         font-weight: 600;
         line-height: 2rem;
         letter-spacing: -0.47px;
+
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        & i {
+          font-size: 1.5rem;
+          color: var(--primary-500, #f59e0b);
+        }
       }
 
       & .title__action {
@@ -273,7 +283,7 @@ const $ = f.div`
     width: 100%;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${$ + "px"}) {
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
@@ -294,48 +304,52 @@ const $ = f.div`
       gap: 1rem;
     }
   }
-`, E = c(
+`, A = c(
   ({
     title: a,
     subtitle: m,
     items: l,
-    limit: _ = 4,
-    limitForMobile: g = 2,
-    actionText: o,
-    onSelectCard: s = () => {
+    limit: g = 4,
+    limitForMobile: d = 2,
+    buttonText: o = "Show More",
+    onSelectCard: n = () => {
+    },
+    onButtonAction: s = () => {
     },
-    onShowMore: n
-  }, h) => {
+    icon: _
+  }, w) => {
     var p;
-    const w = () => {
-      n == null || n();
-    }, r = (e) => {
-      s == null || s(e == null ? void 0 : e.uuid);
+    const r = (e) => {
+      n == null || n(e == null ? void 0 : e.uuid);
     };
     return /* @__PURE__ */ t(
-      I,
+      M,
       {
-        limitCards: _,
-        limitCardsForMobile: g,
+        ref: w,
+        limitCards: g,
+        limitCardsForMobile: d,
         children: [
           /* @__PURE__ */ t("div", { className: "wrapper__heading", children: [
             /* @__PURE__ */ t("div", { className: "wrapper__title", children: [
-              a && /* @__PURE__ */ i("div", { className: "title__text", children: a }),
-              o && n && /* @__PURE__ */ i(
+              a && /* @__PURE__ */ t("div", { className: "title__text", children: [
+                k(_) && /* @__PURE__ */ i("i", { className: _ }),
+                /* @__PURE__ */ i("span", { children: a })
+              ] }),
+              s && /* @__PURE__ */ i(
                 u,
                 {
                   text: o,
                   borderRadius: "curved",
                   btnType: "tinted",
                   className: "title__action",
-                  onClick: w
+                  onClick: s
                 }
               )
             ] }),
             m && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: m })
           ] }),
-          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: l && (l == null ? void 0 : l.length) > 0 ? l == null ? void 0 : l.map((e, d) => /* @__PURE__ */ i(
-            C,
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: l && (l == null ? void 0 : l.length) > 0 ? l == null ? void 0 : l.map((e, h) => /* @__PURE__ */ i(
+            z,
             {
               uuid: e == null ? void 0 : e.uuid,
               title: e == null ? void 0 : e.title,
@@ -347,13 +361,13 @@ const $ = f.div`
               imageComponent: e == null ? void 0 : e.imageComponent,
               onSelectCard: () => r == null ? void 0 : r(e)
             },
-            `shop-card__${d + 1}`
-          )) : (p = Array.from("1234")) == null ? void 0 : p.map((e, d) => /* @__PURE__ */ i(z, {}, `shop-card-skeleton__${d + 1}`)) })
+            `shop-card__${h + 1}`
+          )) : (p = Array.from("1234")) == null ? void 0 : p.map((e, h) => /* @__PURE__ */ i(C, {}, `shop-card-skeleton__${h + 1}`)) })
         ]
       }
     );
   }
 );
 export {
-  E as default
+  A 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-DN1qT8BE.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;

package/dist/SimpleCategoriesSection.js

@@ -1,17 +1,17 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { jsxs as d, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as g, Suspense as $, memo as R, useMemo as M } from "react";
 import { n as b } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as w } from "./consts-C1uHV4xc.js";
-import { u as k } from "./useDetectMobile-BC6EGaBc.js";
-import { t as h, m as S, k as g } from "./utils-DtRLzzTZ.js";
-import { R as N } from "./style-6tSw9aqK.js";
-import C from "./Button.js";
-const R = b.div`
+import { M as v } from "./consts-C1uHV4xc.js";
+import { u as E } from "./useDetectMobile-BC6EGaBc.js";
+import { t as h, m as I, k as f } from "./utils-DtRLzzTZ.js";
+import { R as P } from "./style-CiePxaJ_.js";
+import T from "./Button.js";
+const j = b.div`
   display: grid;
-  grid-template-columns: ${(a) => "repeat(6,  minmax(0, 1fr))"};
+  grid-template-columns: ${(t) => "repeat(6,  minmax(0, 1fr))"};
   gap: 2rem;
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${v + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -30,7 +30,7 @@ const R = b.div`
       /* Safari and Chrome */
     }
   }
-`, $ = b.div`
+`, y = b.div`
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -73,10 +73,10 @@ const R = b.div`
     width: 100%;
     min-height: 8.25rem;
     max-height: 8.25rem;
-    ${S("-90deg")}
+    ${I("-90deg")}
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${v + "px"}) {
     min-width: 8.75rem;
     max-width: 8.75rem;
 
@@ -86,72 +86,103 @@ const R = b.div`
       max-height: 5.375rem;
     }
   }
-`, u = f((a, c) => {
-  const { uuid: o, image: m, name: i, onSelectCard: d = () => {
-  } } = a;
-  return /* @__PURE__ */ n(
-    $,
+`, z = g((t, o) => {
+  const { uuid: a, image: n, name: i, onSelectCard: l = () => {
+  } } = t;
+  return /* @__PURE__ */ d(
+    y,
     {
       className: "simple-category-card",
-      onClick: () => d(o),
+      onClick: () => l(a),
       children: [
-        /* @__PURE__ */ r("img", { src: m }),
+        /* @__PURE__ */ r("img", { src: n }),
         /* @__PURE__ */ r("div", { className: "card-content", children: /* @__PURE__ */ r("div", { className: "card-content-2", children: i }) })
       ]
     }
   );
-}), D = f((a, c) => {
+}), A = g(({}, t) => /* @__PURE__ */ d(y, { className: "simple-category-card", children: [
+  /* @__PURE__ */ r("div", { className: "skeleton-img" }),
+  /* @__PURE__ */ r("div", { className: "card-content" })
+] })), B = ({ limit: t = 12, isLoading: o = !1, keyPrefix: a }) => /* @__PURE__ */ r(p, { children: Array.from({ length: t }, (n, i) => /* @__PURE__ */ r(
+  A,
+  {
+    isLoading: o
+  },
+  `${a}-skeleton-category-card-${i}`
+)) }), W = ({
+  children: t,
+  fallbackComponent: o = /* @__PURE__ */ r(p, {}),
+  isLoading: a = !1,
+  limit: n,
+  keyPrefix: i
+}) => /* @__PURE__ */ r($, { fallbackComponent: o, children: a === !0 ? /* @__PURE__ */ r(
+  B,
+  {
+    isLoading: a,
+    limit: n,
+    keyPrefix: i
+  }
+) : t }), w = R(z), q = g((t, o) => {
   const {
-    icon: o,
-    title: m = "Shop by category",
+    icon: a,
+    title: n = "Shop by category",
     items: i,
-    buttonText: d,
-    buttonLink: s,
-    limit: p = 12,
-    onButtonAction: v = () => {
+    buttonText: l,
+    buttonLink: u,
+    limit: s = 12,
+    onButtonAction: k = () => {
     },
-    onSelectCard: t = () => {
-    }
-  } = a, y = k();
-  return /* @__PURE__ */ n(N, { ref: c, children: [
-    /* @__PURE__ */ n("div", { className: "regular-title", children: [
-      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
-        g(o) && /* @__PURE__ */ r("i", { className: o }),
-        /* @__PURE__ */ r("span", { children: m })
+    onSelectCard: m = () => {
+    },
+    isLoading: S = !1
+  } = t, C = E(), N = M(() => /* @__PURE__ */ r(p, { children: C === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ r(
+    w,
+    {
+      uuid: e == null ? void 0 : e.uuid,
+      image: e == null ? void 0 : e.image,
+      name: e == null ? void 0 : e.name,
+      onSelectCard: () => m == null ? void 0 : m(e == null ? void 0 : e.uuid)
+    },
+    c
+  )) : i == null ? void 0 : i.slice(0, s).map((e, c) => /* @__PURE__ */ r(
+    w,
+    {
+      uuid: e == null ? void 0 : e.uuid,
+      image: e == null ? void 0 : e.image,
+      name: e == null ? void 0 : e.name,
+      onSelectCard: () => m == null ? void 0 : m(e == null ? void 0 : e.uuid)
+    },
+    c
+  )) }), [i]);
+  return /* @__PURE__ */ d(P, { ref: o, children: [
+    /* @__PURE__ */ d("div", { className: "regular-title", children: [
+      /* @__PURE__ */ d("div", { className: "regular-title-text", children: [
+        f(a) && /* @__PURE__ */ r("i", { className: a }),
+        /* @__PURE__ */ r("span", { children: n })
       ] }),
-      g(s) && /* @__PURE__ */ r(
-        C,
+      f(u) && /* @__PURE__ */ r(
+        T,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => v(s),
+          onClick: () => k(u),
           borderRadius: "curved",
-          children: d
+          children: l
         }
       )
     ] }),
-    /* @__PURE__ */ r(R, { limit: p, children: y === !0 ? i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
-      u,
-      {
-        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)
-      },
-      l
-    )) : i == null ? void 0 : i.slice(0, p).map((e, l) => /* @__PURE__ */ r(
-      u,
+    /* @__PURE__ */ r(j, { limit: s, children: /* @__PURE__ */ r(
+      W,
       {
-        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)
-      },
-      l
-    )) })
+        isLoading: S,
+        limit: s,
+        keyPrefix: "explore-landing",
+        children: N
+      }
+    ) })
   ] });
 });
 export {
-  D as default
+  q as default
 };

package/dist/SimpleProductsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),w=require("react"),h=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),q=require("./consts-CtNoHdBj.cjs"),y=require("./useDetectMobile-D6d5LpdL.cjs"),s=require("./index-Dj5wZCVs.cjs"),S=require("./index-Dit169OA.cjs"),j=h.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),o=require("react"),k=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),y=require("./consts-CtNoHdBj.cjs"),P=require("./useDetectMobile-D6d5LpdL.cjs"),g=require("./index-DHJmdMN8.cjs"),q=require("./index-Dit169OA.cjs"),M=k.newStyled.div`
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1.25rem;
@@ -9,7 +9,7 @@
     margin: auto;
   }
 
-  @media (max-width: ${q.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(2, 1fr);
 
     & .text-block-v1 {
@@ -28,4 +28,4 @@
 
     }
   }
-`,k=w.forwardRef((n,o)=>{var c;const{title:d,subtitle:l,description:m,buttonText:a,buttonLink:p,items:t,onButtonAction:g=()=>{},onSelectCard:i=()=>{}}=n,b=y.useDetectMobile();return r.jsxs(j,{ref:o,limit:6,children:[r.jsx(S.TextBlockV1,{subtitle:l,title:d,description:m,buttonText:a,buttonLink:p,onButtonAction:g,className:"text-block-v1"}),b===!0?(c=t==null?void 0:t.slice(0,4))==null?void 0:c.map((e,u)=>r.jsx(s.SimpleProductCard,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},u)):t==null?void 0:t.map((e,u)=>r.jsx(s.SimpleProductCard,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},u))]})});module.exports=k;
+`,_=o.forwardRef((i,s)=>r.jsx(g.SkeletonWrapper,{})),v=({limit:i=6,isLoading:s=!1,keyPrefix:n})=>r.jsx(r.Fragment,{children:Array.from({length:i},(d,c)=>r.jsx(_,{isLoading:s},`${n}-skeleton-product-card-${c}`))}),R=({children:i,fallbackComponent:s=r.jsx(r.Fragment,{}),isLoading:n=!1,limit:d,keyPrefix:c})=>r.jsx(o.Suspense,{fallbackComponent:s,children:n===!0?r.jsx(v,{isLoading:n,limit:d,keyPrefix:c}):i}),p=o.memo(g.SimpleProductCard),U=o.forwardRef((i,s)=>{const{title:n,subtitle:d,description:c,buttonText:j,buttonLink:f,items:t,onButtonAction:h=()=>{},onSelectCard:u=()=>{},isLoading:S=!1,limit:a=6}=i,w=P.useDetectMobile(),b=o.useMemo(()=>{var m;return r.jsx(r.Fragment,{children:w===!0?(m=t==null?void 0:t.slice(0,4))==null?void 0:m.map((e,l)=>r.jsx(p,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>u==null?void 0:u(e==null?void 0:e.uuid)},l)):t==null?void 0:t.map((e,l)=>r.jsx(p,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>u==null?void 0:u(e==null?void 0:e.uuid)},l))})},[t]);return r.jsxs(M,{ref:s,limit:a,children:[r.jsx(q.TextBlockV1,{subtitle:d,title:n,description:c,buttonText:j,buttonLink:f,onButtonAction:h,className:"text-block-v1"}),r.jsx(R,{isLoading:S,limit:a,keyPrefix:"explore-landing",children:b})]})});module.exports=U;