@lanaco/lnc-react-ui 4.0.170 → 4.0.171

package/dist/ProductsWithBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),o=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),j=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),y=require("./style-Db3VFbfP.cjs"),c=require("./utils-Dl9xPH4c.cjs"),N=require("./index-BueKsXT8.cjs"),$=f.styled.div`
+"use strict";const r=require("react/jsx-runtime"),o=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./consts-goSZX3xP.cjs"),f=require("./useDetectMobile-zkbzoOGV.cjs"),W=require("./style-Db3VFbfP.cjs"),b=require("./utils-Dl9xPH4c.cjs"),C=require("./index-BueKsXT8.cjs"),i=require("./style-BAcV7F53.cjs"),_=g.styled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -16,7 +16,7 @@
     object-fit: cover;
   }
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
@@ -31,15 +31,15 @@
       }
     }
   }
-`,I=f.styled.div`
+`,q=g.styled.div`
   display: grid;
   grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`,C=f.styled.div`
+`,$=g.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -55,22 +55,10 @@
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${c.truncateTextInRows(2)}
+    ${b.truncateTextInRows(2)}
   }
 
-  & .skeleton-img {
-    background-color: ${c.linearGradientAnimation("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${c.linearGradientAnimation("-90deg")};
-    width: 100%;
-    height: 1.25rem;
-  }
-
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -81,4 +69,11 @@
       object-fit: cover;
     }
   }
-`,R=o.forwardRef((t,d)=>{const{uuid:a,title:i,image:s,sellerUuid:w,onSelectCard:l=()=>{},imageComponent:m,metadata:n}=t,u=o.useRef(null);return r.jsxs(C,{ref:u,className:"product-card",name:n==null?void 0:n.name,"data-accessor":n==null?void 0:n.accessor,onClick:g=>l(g,d),children:[c.isDefined(m)?m:r.jsx(N.ProductImageWrapper,{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),_=o.forwardRef(({},t)=>r.jsxs(C,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),q=({limit:t=4,isLoading:d=!1,keyPrefix:a})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(_,{isLoading:d},`${a}-skeleton-product-card-${s}`))}),M=({children:t,fallbackComponent:d=r.jsx(r.Fragment,{}),isLoading:a=!1,limit:i,keyPrefix:s})=>r.jsx(o.Suspense,{fallbackComponent:d,children:a===!0?r.jsx(q,{isLoading:a,limit:i,keyPrefix:s}):t}),b=o.memo(R),U=o.forwardRef((t,d)=>{const{icon:a,items:i,limit:s=4,imageUrl:w,onSelectCard:l=()=>{},title:m="Season inspiration",isLoading:n=!1,getImage:u=()=>{},componentName:g}=t,S=v.useDetectMobile(),P=o.useMemo(()=>r.jsx(r.Fragment,{children:S===!0?i==null?void 0:i.map((e,h)=>r.jsx(b,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(k,p)=>l({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h)):i==null?void 0:i.slice(0,s).map((e,h)=>r.jsx(b,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(k,p)=>l({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:p}),image:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:g,accessor:e==null?void 0:e.accessor}},h))}),[i,S,s]);return r.jsxs(y.RegulatTitleSectionWrapper,{ref:d,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[c.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:m})]})}),r.jsx($,{className:"products-banner",children:r.jsx("img",{src:w})}),r.jsx(I,{limit:s,children:r.jsx(M,{isLoading:n,limit:s,keyPrefix:"explore-landing",children:P})})]})});module.exports=U;
+`,v=o.forwardRef((t,a)=>{const{uuid:d,title:n,image:l,sellerUuid:k,onSelectCard:m=()=>{},imageComponent:h,metadata:s}=t,c=o.useRef(null);return r.jsxs($,{ref:c,className:"product-card",name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,onClick:u=>m(u,a),children:[b.isDefined(h)?h:r.jsx(C.ProductImageWrapper,{src:l}),r.jsx("div",{className:"card-title",children:n})]})}),I=g.styled(i.SkeletonColumnWrapper)`
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
+    & .skeleton__banner {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+`,y=({keyPrefix:t})=>r.jsxs(I,{children:[r.jsx(i.SkeletonLinePlaceholder,{height:"22.5rem",className:"skeleton__banner"}),r.jsxs(i.SkeletonRowWrapper,{children:[r.jsxs(i.SkeletonColumnWrapper,{gap:"0.5rem",children:[r.jsx(i.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),r.jsx(i.SkeletonColumnWrapper,{height:"1rem",children:r.jsx(i.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"})}),r.jsxs(i.SkeletonRowWrapper,{gap:"0.5rem",children:[r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),r.jsx(i.SkeletonColumnWrapper,{height:"2rem",children:r.jsx(i.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})})]},`${t}-1`),r.jsxs(i.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),r.jsxs(i.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),r.jsx(i.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${t}-2`),r.jsxs(i.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),r.jsxs(i.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),r.jsx(i.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${t}-3`),r.jsxs(i.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),r.jsxs(i.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),r.jsx(i.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),r.jsx(i.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${t}-4`)]})]}),E=({keyPrefix:t,isLoading:a=!1,fallbackComponent:d=r.jsx(r.Fragment,{}),children:n})=>r.jsx(o.Suspense,{fallbackComponent:d,children:a===!0?r.jsx(y,{keyPrefix:t}):n}),P=o.memo(v),M=o.forwardRef((t,a)=>{const{icon:d,items:n,limit:l=4,imageUrl:k,onSelectCard:m=()=>{},title:h="Season inspiration",isLoading:s=!1,getImage:c=()=>{},componentName:u}=t,R=f.useDetectMobile(),w=o.useMemo(()=>r.jsx(r.Fragment,{children:R===!0?n==null?void 0:n.map((e,S)=>r.jsx(P,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(L,j)=>m({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:j}),image:c(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:u,accessor:e==null?void 0:e.accessor}},S)):n==null?void 0:n.slice(0,l).map((e,S)=>r.jsx(P,{title:e==null?void 0:e.name,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(L,j)=>m({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:j}),image:c(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:u,accessor:e==null?void 0:e.accessor}},S))}),[n,R,l]);return r.jsxs(W.RegulatTitleSectionWrapper,{ref:a,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[b.isDefinedNotEmptyString(d)&&r.jsx("i",{className:d}),r.jsx("span",{children:h})]})}),r.jsxs(E,{isLoading:s,keyPrefix:"products-with-banner-skeleton",children:[r.jsx(_,{className:"products-banner",children:r.jsx("img",{src:k})}),r.jsx(q,{limit:l,children:w})]})]})});module.exports=M;

package/dist/ProductsWithBannerSection.js

@@ -1,12 +1,13 @@
-import { jsxs as u, jsx as r, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as f, useRef as U, Suspense as y, memo as M, useMemo as R } from "react";
-import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as b } from "./consts-BuFChS64.js";
-import { u as W } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as j } from "./style-DKAOBWn3.js";
-import { p as I, o as k, l as z, k as B } from "./utils-BdsZgOUE.js";
-import { P as D } from "./index-CF3HhgvN.js";
-const E = w.div`
+import { jsxs as t, jsx as r, Fragment as P } from "react/jsx-runtime";
+import { forwardRef as W, useRef as U, Suspense as G, memo as M, useMemo as _ } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as R } from "./consts-BuFChS64.js";
+import { u as j } from "./useDetectMobile-Bkvj0VMa.js";
+import { R as B } from "./style-D3pIrH3v.js";
+import { o as I, l as y, k as z } from "./utils-DHfRApMf.js";
+import { P as D } from "./index-BbltNcou.js";
+import { S as o, b as i, a as l, c as b } from "./style-CXMUA6cI.js";
+const E = f.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -24,7 +25,7 @@ const E = w.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${b + "px"}) {
+  @media (max-width: ${R + "px"}) {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
@@ -39,15 +40,15 @@ const E = w.div`
       }
     }
   }
-`, _ = w.div`
+`, L = f.div`
   display: grid;
-  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${b + "px"}) {
+  @media (max-width: ${R + "px"}) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`, P = w.div`
+`, T = f.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -63,22 +64,10 @@ const E = w.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${I(2)}
+    ${I(2)}
   }
 
-  & .skeleton-img {
-    background-color: ${k("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${k("-90deg")};
-    width: 100%;
-    height: 1.25rem;
-  }
-
-  @media (max-width: ${b + "px"}) {
+  @media (max-width: ${R + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -89,114 +78,197 @@ const E = w.div`
       object-fit: cover;
     }
   }
-`, A = f((t, n) => {
+`, q = W((a, n) => {
   const {
-    uuid: o,
-    title: i,
-    image: a,
-    sellerUuid: S,
-    onSelectCard: m = () => {
+    uuid: s,
+    title: d,
+    image: h,
+    sellerUuid: C,
+    onSelectCard: c = () => {
     },
-    imageComponent: s,
-    metadata: d
-  } = t, l = U(null);
-  return /* @__PURE__ */ u(
-    P,
+    imageComponent: u,
+    metadata: m
+  } = a, g = U(null);
+  return /* @__PURE__ */ t(
+    T,
     {
-      ref: l,
+      ref: g,
       className: "product-card",
-      name: d == null ? void 0 : d.name,
-      "data-accessor": d == null ? void 0 : d.accessor,
-      onClick: (c) => m(c, n),
+      name: m == null ? void 0 : m.name,
+      "data-accessor": m == null ? void 0 : m.accessor,
+      onClick: (p) => c(p, n),
       children: [
-        z(s) ? s : /* @__PURE__ */ r(D, { src: a }),
-        /* @__PURE__ */ r("div", { className: "card-title", children: i })
+        y(u) ? u : /* @__PURE__ */ r(D, { src: h }),
+        /* @__PURE__ */ r("div", { className: "card-title", children: d })
       ]
     }
   );
-}), G = f(({}, t) => /* @__PURE__ */ u(P, { className: "product-card", children: [
-  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
-  /* @__PURE__ */ r("div", { className: "skeleton-title" })
-] })), T = ({ limit: t = 4, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ r(h, { children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ r(
-  G,
-  {
-    isLoading: n
-  },
-  `${o}-skeleton-product-card-${a}`
-)) }), F = ({
-  children: t,
-  fallbackComponent: n = /* @__PURE__ */ r(h, {}),
-  isLoading: o = !1,
-  limit: i,
-  keyPrefix: a
-}) => /* @__PURE__ */ r(y, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
-  T,
-  {
-    isLoading: o,
-    limit: i,
-    keyPrefix: a
+}), F = f(o)`
+  @media (max-width: ${R + "px"}) {
+    & .skeleton__banner {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
   }
-) : t }), v = M(A), Q = f((t, n) => {
+`, O = ({ keyPrefix: a }) => /* @__PURE__ */ t(F, { children: [
+  /* @__PURE__ */ r(i, { height: "22.5rem", className: "skeleton__banner" }),
+  /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ t(o, { gap: "0.5rem", children: [
+      /* @__PURE__ */ r(
+        b,
+        {
+          height: "100%",
+          width: "100%",
+          borderRadius: "0.75rem"
+        }
+      ),
+      /* @__PURE__ */ r(o, { height: "1rem", children: /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }) }),
+      /* @__PURE__ */ t(l, { gap: "0.5rem", children: [
+        /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
+        /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
+      ] }),
+      /* @__PURE__ */ r(o, { height: "2rem", children: /* @__PURE__ */ r(i, { height: "2rem", borderRadius: "0.75rem" }) })
+    ] }, `${a}-1`),
+    /* @__PURE__ */ t(
+      o,
+      {
+        gap: "0.5rem",
+        noGradient: !0,
+        children: [
+          /* @__PURE__ */ r(
+            b,
+            {
+              height: "100%",
+              width: "100%",
+              borderRadius: "0.75rem"
+            }
+          ),
+          /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
+          /* @__PURE__ */ t(l, { gap: "0.5rem", noGradient: !0, children: [
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
+          ] }),
+          /* @__PURE__ */ r(i, { height: "2rem", borderRadius: "0.75rem" })
+        ]
+      },
+      `${a}-2`
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        gap: "0.5rem",
+        noGradient: !0,
+        children: [
+          /* @__PURE__ */ r(
+            b,
+            {
+              height: "100%",
+              width: "100%",
+              borderRadius: "0.75rem"
+            }
+          ),
+          /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
+          /* @__PURE__ */ t(l, { gap: "0.5rem", noGradient: !0, children: [
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
+          ] }),
+          /* @__PURE__ */ r(i, { height: "2rem", borderRadius: "0.75rem" })
+        ]
+      },
+      `${a}-3`
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        gap: "0.5rem",
+        noGradient: !0,
+        children: [
+          /* @__PURE__ */ r(
+            b,
+            {
+              height: "100%",
+              width: "100%",
+              borderRadius: "0.75rem"
+            }
+          ),
+          /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
+          /* @__PURE__ */ t(l, { gap: "0.5rem", noGradient: !0, children: [
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
+            /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
+          ] }),
+          /* @__PURE__ */ r(i, { height: "2rem", borderRadius: "0.75rem" })
+        ]
+      },
+      `${a}-4`
+    )
+  ] })
+] }), X = ({
+  keyPrefix: a,
+  isLoading: n = !1,
+  fallbackComponent: s = /* @__PURE__ */ r(P, {}),
+  children: d
+}) => /* @__PURE__ */ r(G, { fallbackComponent: s, children: n === !0 ? /* @__PURE__ */ r(O, { keyPrefix: a }) : d }), $ = M(q), ee = W((a, n) => {
   const {
-    icon: o,
-    items: i,
-    limit: a = 4,
-    imageUrl: S,
-    onSelectCard: m = () => {
+    icon: s,
+    items: d,
+    limit: h = 4,
+    imageUrl: C,
+    onSelectCard: c = () => {
     },
-    title: s = "Season inspiration",
-    isLoading: d = !1,
-    getImage: l = () => {
+    title: u = "Season inspiration",
+    isLoading: m = !1,
+    getImage: g = () => {
     },
-    componentName: c
-  } = t, C = W(), N = R(() => /* @__PURE__ */ r(h, { children: C === !0 ? i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ r(
-    v,
+    componentName: p
+  } = a, v = j(), k = _(() => /* @__PURE__ */ r(P, { children: v === !0 ? d == null ? void 0 : d.map((e, w) => /* @__PURE__ */ r(
+    $,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: ($, g) => m({
+      onSelectCard: (N, S) => c({
         uuid: e == null ? void 0 : e.uuid,
         nameSlug: e == null ? void 0 : e.nameSlug,
-        cardRef: g
+        cardRef: S
       }),
-      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
-      metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
+      image: g(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      metadata: { name: p, accessor: e == null ? void 0 : e.accessor }
     },
-    p
-  )) : i == null ? void 0 : i.slice(0, a).map((e, p) => /* @__PURE__ */ r(
-    v,
+    w
+  )) : d == null ? void 0 : d.slice(0, h).map((e, w) => /* @__PURE__ */ r(
+    $,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      onSelectCard: ($, g) => m({
+      onSelectCard: (N, S) => c({
         uuid: e == null ? void 0 : e.uuid,
         nameSlug: e == null ? void 0 : e.nameSlug,
-        cardRef: g
+        cardRef: S
       }),
-      image: l(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
-      metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
+      image: g(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      metadata: { name: p, accessor: e == null ? void 0 : e.accessor }
     },
-    p
-  )) }), [i, C, a]);
-  return /* @__PURE__ */ u(j, { ref: n, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ u("div", { className: "regular-title-text", children: [
-      B(o) && /* @__PURE__ */ r("i", { className: o }),
-      /* @__PURE__ */ r("span", { children: s })
+    w
+  )) }), [d, v, h]);
+  return /* @__PURE__ */ t(B, { ref: n, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
+      z(s) && /* @__PURE__ */ r("i", { className: s }),
+      /* @__PURE__ */ r("span", { children: u })
     ] }) }),
-    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: S }) }),
-    /* @__PURE__ */ r(_, { limit: a, children: /* @__PURE__ */ r(
-      F,
+    /* @__PURE__ */ t(
+      X,
       {
-        isLoading: d,
-        limit: a,
-        keyPrefix: "explore-landing",
-        children: N
+        isLoading: m,
+        keyPrefix: "products-with-banner-skeleton",
+        children: [
+          /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: C }) }),
+          /* @__PURE__ */ r(L, { limit: h, children: k })
+        ]
       }
-    ) })
+    )
   ] });
 });
 export {
-  Q as default
+  ee as default
 };

package/dist/ProgressBar.js

@@ -2,7 +2,7 @@ import { jsxs as m, jsx as h } from "react/jsx-runtime";
 import { forwardRef as f, isValidElement as P, cloneElement as y } from "react";
 import { P as r } from "./index-CblbdqjE.js";
 import { s as t } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as n, c as x } from "./utils-BdsZgOUE.js";
+import { b as n, c as x } from "./utils-DHfRApMf.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const w = t.div`
   width: 100%;

package/dist/QuattroCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("react"),l=require("./utils-Dl9xPH4c.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./consts-goSZX3xP.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),u=require("./styled-components.browser.esm-CvykQBGY.cjs"),_=c.styled.div`
+"use strict";const e=require("react/jsx-runtime"),n=require("react"),l=require("./utils-Dl9xPH4c.cjs"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./consts-goSZX3xP.cjs"),u=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./styled-components.browser.esm-CvykQBGY.cjs"),f=require("./index-D0IYt1s3.cjs"),h=m.styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -41,7 +41,7 @@
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`,f=c.styled.div`
+`,b=m.styled.div`
   cursor: pointer;
   position: relative;
   border-radius: 0.75rem;
@@ -91,7 +91,7 @@
     }
   }
 
-  @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
 
     img {
@@ -108,7 +108,7 @@
       display: block;
     }
   }
-`,h=n.forwardRef(({title:o,description:r,imageUrl:i,onSelectCard:s=()=>{}},d)=>{const{theme:a}=g.useTheme();return e.jsxs(f,{ref:d,theme:a,onClick:s,children:[e.jsx("img",{loading:"lazy",src:i}),e.jsx(_,{theme:a,className:"quattro-card__gradient",children:e.jsxs("div",{className:"quattro-card__text",children:[e.jsx("div",{className:"quattro-card__title",children:o}),e.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),b=u.qe.div`
+`,w=n.forwardRef(({title:a,description:r,imageUrl:s,onSelectCard:i=()=>{}},d)=>{const{theme:o}=u.useTheme();return e.jsxs(b,{ref:d,theme:o,onClick:i,children:[e.jsx("img",{loading:"lazy",src:s}),e.jsx(h,{theme:o,className:"quattro-card__gradient",children:e.jsxs("div",{className:"quattro-card__text",children:[e.jsx("div",{className:"quattro-card__title",children:a}),e.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),x=_.qe.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -154,7 +154,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${m.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     gap: 1.25rem;
 
     & .wrapper__cards {
@@ -162,4 +162,4 @@
       gap: 1rem;
     }
   }
-`,w=n.memo(h),x=n.forwardRef(({title:o,items:r,onSelectCard:i=()=>{}},s)=>{const d=n.useMemo(()=>{var a;return(a=r==null?void 0:r.slice(0,4))==null?void 0:a.map((t,p)=>e.jsx(w,{title:t==null?void 0:t.title,description:t==null?void 0:t.description,imageUrl:t==null?void 0:t.imageUrl,onSelectCard:()=>i==null?void 0:i(t)},`quattro-card__${p+1}`))},[r]);return e.jsxs(b,{ref:s,children:[e.jsx("div",{className:"wrapper__heading",children:e.jsx("div",{className:"wrapper__title",children:l.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"title__text",children:e.jsx("span",{children:o})})})}),e.jsx("div",{className:"wrapper__cards",children:d})]})});module.exports=x;
+`,y=n.memo(w),q=n.forwardRef(({title:a,items:r,isLoading:s=!1,onSelectCard:i=()=>{}},d)=>{const o=n.useMemo(()=>{var c;return(c=r==null?void 0:r.slice(0,4))==null?void 0:c.map((t,g)=>e.jsx(y,{title:t==null?void 0:t.title,description:t==null?void 0:t.description,imageUrl:t==null?void 0:t.imageUrl,onSelectCard:()=>i==null?void 0:i(t)},`quattro-card__${g+1}`))},[r]);return e.jsxs(x,{ref:d,children:[e.jsx("div",{className:"wrapper__heading",children:e.jsx("div",{className:"wrapper__title",children:l.isDefinedNotEmptyString(a)&&e.jsx("div",{className:"title__text",children:e.jsx("span",{children:a})})})}),e.jsx(f.SuspenseBlogCardsSponsored,{isLoading:s,keyPrefix:"quattro-cards-skeleton",children:e.jsx("div",{className:"wrapper__cards",children:o})})]})});module.exports=q;

package/dist/QuattroCardsSection.js

@@ -1,11 +1,12 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { forwardRef as l, memo as g, useMemo as f } from "react";
-import { t as h, p as u, k as _ } from "./utils-BdsZgOUE.js";
-import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as m } from "./consts-BuFChS64.js";
-import { u as b } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { q as w } from "./styled-components.browser.esm-D-n22PJk.js";
-const y = c.div`
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { forwardRef as c, memo as f, useMemo as u } from "react";
+import { t as h, o as _, k as b } from "./utils-DHfRApMf.js";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as p } from "./consts-BuFChS64.js";
+import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { q as y } from "./styled-components.browser.esm-D-n22PJk.js";
+import { S as v } from "./index-BSpdEGFd.js";
+const x = m.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -48,7 +49,7 @@ const y = c.div`
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`, v = c.div`
+`, q = m.div`
   cursor: pointer;
   position: relative;
   border-radius: 0.75rem;
@@ -94,11 +95,11 @@ const y = c.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.25rem;
-      ${u(2)}
+      ${_(2)}
     }
   }
 
-  @media (max-width: ${m + "px"}) {
+  @media (max-width: ${p + "px"}) {
     width: 100%;
 
     img {
@@ -115,19 +116,19 @@ const y = c.div`
       display: block;
     }
   }
-`, x = l(
-  ({ title: o, description: e, imageUrl: i, onSelectCard: n = () => {
-  } }, d) => {
-    const { theme: a } = b();
-    return /* @__PURE__ */ s(v, { ref: d, theme: a, onClick: n, children: [
-      /* @__PURE__ */ r("img", { loading: "lazy", src: i }),
-      /* @__PURE__ */ r(y, { theme: a, className: "quattro-card__gradient", children: /* @__PURE__ */ s("div", { className: "quattro-card__text", children: [
-        /* @__PURE__ */ r("div", { className: "quattro-card__title", children: o }),
+`, k = c(
+  ({ title: i, description: e, imageUrl: n, onSelectCard: a = () => {
+  } }, s) => {
+    const { theme: o } = w();
+    return /* @__PURE__ */ d(q, { ref: s, theme: o, onClick: a, children: [
+      /* @__PURE__ */ r("img", { loading: "lazy", src: n }),
+      /* @__PURE__ */ r(x, { theme: o, className: "quattro-card__gradient", children: /* @__PURE__ */ d("div", { className: "quattro-card__text", children: [
+        /* @__PURE__ */ r("div", { className: "quattro-card__title", children: i }),
         /* @__PURE__ */ r("div", { className: "quattro-card__description", children: e })
       ] }) })
     ] });
   }
-), q = w.div`
+), z = y.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -173,7 +174,7 @@ const y = c.div`
     width: 100%;
   }
 
-  @media (max-width: ${m + "px"}) {
+  @media (max-width: ${p + "px"}) {
     gap: 1.25rem;
 
     & .wrapper__cards {
@@ -181,28 +182,35 @@ const y = c.div`
       gap: 1rem;
     }
   }
-`, k = g(x), I = l(
-  ({ title: o, items: e, onSelectCard: i = () => {
-  } }, n) => {
-    const d = f(() => {
-      var a;
-      return (a = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : a.map((t, p) => /* @__PURE__ */ r(
-        k,
+`, N = f(k), S = c(
+  ({ title: i, items: e, isLoading: n = !1, onSelectCard: a = () => {
+  } }, s) => {
+    const o = u(() => {
+      var l;
+      return (l = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : l.map((t, g) => /* @__PURE__ */ r(
+        N,
         {
           title: t == null ? void 0 : t.title,
           description: t == null ? void 0 : t.description,
           imageUrl: t == null ? void 0 : t.imageUrl,
-          onSelectCard: () => i == null ? void 0 : i(t)
+          onSelectCard: () => a == null ? void 0 : a(t)
         },
-        `quattro-card__${p + 1}`
+        `quattro-card__${g + 1}`
       ));
     }, [e]);
-    return /* @__PURE__ */ s(q, { ref: n, children: [
-      /* @__PURE__ */ r("div", { className: "wrapper__heading", children: /* @__PURE__ */ r("div", { className: "wrapper__title", children: _(o) && /* @__PURE__ */ r("div", { className: "title__text", children: /* @__PURE__ */ r("span", { children: o }) }) }) }),
-      /* @__PURE__ */ r("div", { className: "wrapper__cards", children: d })
+    return /* @__PURE__ */ d(z, { ref: s, children: [
+      /* @__PURE__ */ r("div", { className: "wrapper__heading", children: /* @__PURE__ */ r("div", { className: "wrapper__title", children: b(i) && /* @__PURE__ */ r("div", { className: "title__text", children: /* @__PURE__ */ r("span", { children: i }) }) }) }),
+      /* @__PURE__ */ r(
+        v,
+        {
+          isLoading: n,
+          keyPrefix: "quattro-cards-skeleton",
+          children: /* @__PURE__ */ r("div", { className: "wrapper__cards", children: o })
+        }
+      )
     ] });
   }
 );
 export {
-  I as default
+  S as default
 };

package/dist/QuizSection.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as I, useState as w, useRef as B, useEffect as re } from "react";
-import { x as ae, k as te, l as G, v as ie } from "./utils-BdsZgOUE.js";
+import { x as ae, k as te, l as G, s as ie } from "./utils-DHfRApMf.js";
 import z from "./Button.js";
 import { s as E } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as U, C as H, a as P } from "./consts-BuFChS64.js";

package/dist/RadioInput.js

@@ -2,7 +2,7 @@ import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import { forwardRef as P, useState as j } from "react";
 import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { P as i } from "./index-CblbdqjE.js";
-import { d as f, c as N, e as T, b as t } from "./utils-BdsZgOUE.js";
+import { d as f, c as N, e as T, b as t } from "./utils-DHfRApMf.js";
 import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
   min-height: ${(e) => f(e.theme, e.size)};