@lanaco/lnc-react-ui 4.0.205 → 4.0.207

package/dist/PasswordInput.js

@@ -2,15 +2,15 @@ import { jsxs as D, jsx as i } from "react/jsx-runtime";
 import { forwardRef as q, useRef as A, useState as x, useEffect as k, useCallback as G } from "react";
 import { d as H } from "./index-Dt62UGku.js";
 import J from "./Icon.js";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { d as g, b as o, a as K, e as M, h as O, c as Q } from "./utils-DtEfC-TX.js";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { e as f, c as o, b as K, f as M, i as O, d as Q } from "./utils-B2fsQ6PS.js";
 import { u as X } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const Y = h.div`
+const Y = m.div`
   display: flex;
   align-items: center;
 
-  min-height: ${(e) => g(e.theme, e.size)};
-  max-height: ${(e) => g(e.theme, e.size)};
+  min-height: ${(e) => f(e.theme, e.size)};
+  max-height: ${(e) => f(e.theme, e.size)};
   background-color: ${(e) => o(
   e.theme,
   "Input",
@@ -45,7 +45,7 @@ const Y = h.div`
   "disabled",
   "text"
 )};`}
-`, I = h.span`
+`, I = m.span`
   padding: 0 12px;
   color: ${(e) => o(
   e.theme,
@@ -54,9 +54,9 @@ const Y = h.div`
   "enabled",
   "prefix"
 )};
-`, Z = h(I)``, _ = h(I)`
+`, Z = m(I)``, _ = m(I)`
   cursor: pointer;
-`, ee = h.input`
+`, ee = m.input`
   background: none;
   border: none;
   outline: none;
@@ -65,8 +65,8 @@ const Y = h.div`
   width: 100%;
 
   ${(e) => Q(e.theme, "Input", e.size, "enabled")}
-  min-height: ${(e) => g(e.theme, e.size)};
-  max-height: ${(e) => g(e.theme, e.size)};
+  min-height: ${(e) => f(e.theme, e.size)};
+  max-height: ${(e) => f(e.theme, e.size)};
   color: ${(e) => o(
   e.theme,
   "Input",
@@ -118,7 +118,7 @@ const Y = h.div`
     readOnly: S,
     debounceTime: R = 0,
     placeholder: V,
-    prefix: f,
+    prefix: g,
     suffix: b,
     value: r,
     defaultValue: B,
@@ -136,12 +136,12 @@ const Y = h.div`
   k(() => {
     r != null && v(r);
   }, [r]);
-  const [m, W] = x(!0), [s, z] = x(!1);
+  const [h, W] = x(!0), [s, z] = x(!1);
   k(() => {
     var a;
     const t = ((a = l == null ? void 0 : l.current) == null ? void 0 : a.value) || "";
     l.current.selectionStart = t != null && t.length ? t.length : 0, l.current.selectionEnd = t != null && t.length ? t.length : 0;
-  }, [m]), k(() => {
+  }, [h]), k(() => {
     n != null && (n.current = l.current);
   }, [n, l]);
   const j = G(
@@ -152,7 +152,7 @@ const Y = h.div`
   }, P = (t) => {
     v(t.target.value), j(t, t.target.value);
   }, U = () => {
-    W(!m), l.current.focus();
+    W(!h), l.current.focus();
   };
   return /* @__PURE__ */ D(
     Y,
@@ -167,26 +167,26 @@ const Y = h.div`
       disabled: C,
       readOnly: S,
       children: [
-        f && /* @__PURE__ */ i(
+        g && /* @__PURE__ */ i(
           I,
           {
             theme: u,
             color: c,
             focused: s,
             className: "lnc-input-prefix",
-            children: f
+            children: g
           }
         ),
         /* @__PURE__ */ i(
           ee,
           {
             ref: l,
-            type: m ? "password" : "text",
+            type: h ? "password" : "text",
             theme: u,
             color: c,
             size: p,
             placeholder: V,
-            prefix: f,
+            prefix: g,
             suffix: b,
             disabled: C,
             readOnly: S,
@@ -209,7 +209,7 @@ const Y = h.div`
             color: c,
             focused: s,
             onClick: U,
-            children: /* @__PURE__ */ i(J, { icon: m ? "eye-slash" : "eye" })
+            children: /* @__PURE__ */ i(J, { icon: h ? "eye-slash" : "eye" })
           }
         ),
         b && /* @__PURE__ */ i(

package/dist/PopoverContent.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),l=require("react"),i=require("./floating-ui.react.esm-CiYofNnh.cjs"),g=require("./PopoverContext.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-RnrgDDZP.cjs"),x=require("./motion-B_VPZaJq.cjs"),h=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=p.styled(x.motion.div)`
+"use strict";const n=require("react/jsx-runtime"),l=require("react"),i=require("./floating-ui.react.esm-CiYofNnh.cjs"),g=require("./PopoverContext.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),s=require("./utils-CITgSxXe.cjs"),x=require("./motion-B_VPZaJq.cjs"),h=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=p.styled(x.motion.div)`
   font-family: ${e=>{var t,r;return(r=(t=e.theme)==null?void 0:t.typography)==null?void 0:r.fontFamily}};
   animation: fadeIn 0.4s;
   box-shadow: ${e=>s.getComponentPropValue(e.theme,"Popover",e.color,"enabled","boxShadow")};

package/dist/PopoverContent.js

@@ -3,7 +3,7 @@ import { forwardRef as c, useContext as p } from "react";
 import { a as f, F as u, b } from "./floating-ui.react.esm-CfpRzwmn.js";
 import g from "./PopoverContext.js";
 import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { g as x, a as v, b as y } from "./utils-DtEfC-TX.js";
+import { g as x, b as v, c as y } from "./utils-B2fsQ6PS.js";
 import { m as P } from "./motion-Ckekul_K.js";
 import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const C = h(P.div)`

package/dist/ProductsWithBannerSection.cjs

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

package/dist/ProductsWithBannerSection.js

@@ -1,13 +1,13 @@
-import { jsxs as t, jsx as r, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as W, useRef as N, Suspense as U, memo as G, useMemo as M } from "react";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as R } from "./consts-BuFChS64.js";
-import { u as _ } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as j } from "./style-neMbLWE6.js";
-import { m as B, l as I, k as C } from "./utils-DtEfC-TX.js";
-import { P as L } from "./index-B22BZVBG.js";
-import { b as s, a as i, S as u, c as b } from "./style-BwQ4djFC.js";
-const y = f.div`
+import { jsxs as t, jsx as r, Fragment as W } from "react/jsx-runtime";
+import { forwardRef as N, useRef as P, Suspense as U, memo as G, useMemo as j } from "react";
+import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as h } from "./breakpoints-ff0SIcV3.js";
+import { u as M } from "./useDetectMobile-CcVo3PNi.js";
+import { R as y } from "./style-BUyFad_y.js";
+import { n as B, m as L, l as C } from "./utils-B2fsQ6PS.js";
+import { P as _ } from "./index-BvMY2TbK.js";
+import { b as s, a as i, S as g, c as f } from "./style-BwQ4djFC.js";
+const z = R.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -25,7 +25,7 @@ const y = f.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("S")} {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
@@ -40,15 +40,25 @@ const y = f.div`
       }
     }
   }
-`, z = f.div`
+`, D = R.div`
   display: grid;
   grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("M")} {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media ${h("S")} {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  @media ${h("XS")} {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
   }
-`, D = f.a`
+`, I = R.a`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -69,7 +79,7 @@ const y = f.div`
     ${B(2)}
   }
 
-  @media (max-width: ${R + "px"}) {
+  @media ${h("S")} {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -80,52 +90,52 @@ const y = f.div`
       object-fit: cover;
     }
   }
-`, E = W((a, h) => {
+`, T = N((a, l) => {
   const {
     uuid: o,
-    title: d,
+    title: m,
     image: c,
-    sellerUuid: k,
-    onSelectCard: w = () => {
+    sellerUuid: v,
+    onSelectCard: S = () => {
     },
-    imageComponent: g,
-    metadata: m,
+    imageComponent: p,
+    metadata: d,
     nameSlug: n,
-    LinkComponent: l
-  } = a, p = l || "a", S = N(null);
+    LinkComponent: u
+  } = a, b = u || "a", w = P(null);
   return /* @__PURE__ */ t(
-    D,
+    I,
     {
-      ref: S,
+      ref: w,
       className: "product-card",
-      name: m == null ? void 0 : m.name,
-      "data-accessor": m == null ? void 0 : m.accessor,
-      onClick: (e) => w(e, h),
-      as: p,
-      ...l ? {
+      name: d == null ? void 0 : d.name,
+      "data-accessor": d == null ? void 0 : d.accessor,
+      onClick: (e) => S(e, l),
+      as: b,
+      ...u ? {
         to: `/product/${C(n) ? `${n}-` : ""}${o}`
       } : {
         href: `/product/${C(n) ? `${n}-` : ""}${o}`
       },
       children: [
-        I(g) ? g : /* @__PURE__ */ r(L, { src: c }),
-        /* @__PURE__ */ r("div", { className: "card-title", children: d })
+        L(p) ? p : /* @__PURE__ */ r(_, { src: c }),
+        /* @__PURE__ */ r("div", { className: "card-title", children: m })
       ]
     }
   );
-}), T = f(s)`
-  @media (max-width: ${R + "px"}) {
+}), q = R(s)`
+  @media ${h("S")} {
     & .skeleton__banner {
       height: 100%;
       aspect-ratio: 1 / 1;
     }
   }
-`, q = ({ keyPrefix: a }) => /* @__PURE__ */ t(T, { children: [
+`, E = ({ keyPrefix: a }) => /* @__PURE__ */ t(q, { children: [
   /* @__PURE__ */ r(i, { height: "22.5rem", className: "skeleton__banner" }),
-  /* @__PURE__ */ t(u, { children: [
+  /* @__PURE__ */ t(g, { children: [
     /* @__PURE__ */ t(s, { gap: "0.5rem", children: [
       /* @__PURE__ */ r(
-        b,
+        f,
         {
           height: "100%",
           width: "100%",
@@ -133,7 +143,7 @@ const y = f.div`
         }
       ),
       /* @__PURE__ */ r(s, { height: "1rem", children: /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }) }),
-      /* @__PURE__ */ t(u, { gap: "0.5rem", children: [
+      /* @__PURE__ */ t(g, { gap: "0.5rem", children: [
         /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
         /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
       ] }),
@@ -146,7 +156,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -154,7 +164,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -170,7 +180,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -178,7 +188,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -194,7 +204,7 @@ const y = f.div`
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            b,
+            f,
             {
               height: "100%",
               width: "100%",
@@ -202,7 +212,7 @@ const y = f.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(g, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -214,64 +224,64 @@ const y = f.div`
   ] })
 ] }), F = ({
   keyPrefix: a,
-  isLoading: h = !1,
-  fallbackComponent: o = /* @__PURE__ */ r(P, {}),
-  children: d
-}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: h === !0 ? /* @__PURE__ */ r(q, { keyPrefix: a }) : d }), v = G(E), Y = W((a, h) => {
+  isLoading: l = !1,
+  fallbackComponent: o = /* @__PURE__ */ r(W, {}),
+  children: m
+}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: l === !0 ? /* @__PURE__ */ r(E, { keyPrefix: a }) : m }), k = G(T), Z = N((a, l) => {
   const {
     icon: o,
-    items: d,
+    items: m,
     limit: c = 4,
-    imageUrl: k,
-    title: w = "Season inspiration",
-    isLoading: g = !1,
-    getImage: m = () => {
+    imageUrl: v,
+    title: S = "Season inspiration",
+    isLoading: p = !1,
+    getImage: d = () => {
     },
     componentName: n,
-    LinkComponent: l
-  } = a, p = _(), S = M(() => /* @__PURE__ */ r(P, { children: p === !0 ? d == null ? void 0 : d.map((e, $) => /* @__PURE__ */ r(
-    v,
+    LinkComponent: u
+  } = a, b = M(), w = j(() => /* @__PURE__ */ r(W, { children: b === !0 ? m == null ? void 0 : m.map((e, $) => /* @__PURE__ */ r(
+    k,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
       nameSlug: e == null ? void 0 : e.nameSlug,
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: l
+      LinkComponent: u
     },
     $
-  )) : d == null ? void 0 : d.slice(0, c).map((e, $) => /* @__PURE__ */ r(
-    v,
+  )) : m == null ? void 0 : m.slice(0, c).map((e, $) => /* @__PURE__ */ r(
+    k,
     {
       title: e == null ? void 0 : e.name,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
       nameSlug: e == null ? void 0 : e.nameSlug,
-      image: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: l
+      LinkComponent: u
     },
     $
-  )) }), [d, p, c]);
-  return /* @__PURE__ */ t(j, { ref: h, children: [
+  )) }), [m, b, c]);
+  return /* @__PURE__ */ t(y, { ref: l, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
       C(o) && /* @__PURE__ */ r("i", { className: o }),
-      /* @__PURE__ */ r("span", { children: w })
+      /* @__PURE__ */ r("span", { children: S })
     ] }) }),
     /* @__PURE__ */ t(
       F,
       {
-        isLoading: g,
+        isLoading: p,
         keyPrefix: "products-with-banner-skeleton",
         children: [
-          /* @__PURE__ */ r(y, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: k }) }),
-          /* @__PURE__ */ r(z, { limit: c, children: S })
+          /* @__PURE__ */ r(z, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: v }) }),
+          /* @__PURE__ */ r(D, { limit: c, children: w })
         ]
       }
     )
   ] });
 });
 export {
-  Y as default
+  Z as default
 };

package/dist/ProgressBar.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("react/jsx-runtime"),n=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-RnrgDDZP.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=i.styled.div`
+"use strict";const l=require("react/jsx-runtime"),n=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-CITgSxXe.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),x=i.styled.div`
   width: 100%;
   position: relative;
   background-color: ${e=>r.getColorRgbaValue(e.theme,"Progress",e.color,"enabled","unfilled")};

package/dist/ProgressBar.js

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as h } from "react/jsx-runtime";
+import { jsxs as c, jsx as b } from "react/jsx-runtime";
 import { forwardRef as u, isValidElement as f, cloneElement as P } from "react";
 import { s as t } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as a, c as x } from "./utils-DtEfC-TX.js";
+import { c as a, d as x } from "./utils-B2fsQ6PS.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const w = t.div`
   width: 100%;
@@ -54,7 +54,7 @@ const w = t.div`
     color: g = "primary",
     progressBarEndComponent: r,
     ...p
-  } = e, o = $(), b = () => {
+  } = e, o = $(), h = () => {
     var n;
     if (f(r))
       return P(r, {
@@ -72,13 +72,13 @@ const w = t.div`
       progressPercentage: s,
       ...p,
       children: [
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ b(
           y,
           {
             progressPercentage: s,
             theme: o,
             color: g,
-            children: r !== null && b()
+            children: r !== null && h()
           }
         ),
         i && /* @__PURE__ */ c(z, { theme: o, size: l, children: [

package/dist/QuattroCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),m=require("./utils-RnrgDDZP.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-goSZX3xP.cjs"),_=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=require("./styled-components.browser.esm-CvykQBGY.cjs"),h=require("./index-D0IYt1s3.cjs"),b=p.styled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),m=require("./utils-CITgSxXe.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./styled-components.browser.esm-CvykQBGY.cjs"),h=require("./index-uCWKRzoS.cjs"),b=g.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;
-`,w=p.styled.a`
+`,w=g.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -93,7 +93,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${p.down("S")} {
     width: 100%;
 
     img {
@@ -110,7 +110,7 @@
       display: block;
     }
   }
-`,y=d.forwardRef(({title:o,description:r,imageUrl:l,onSelectCard:i=()=>{},link:n,LinkComponent:s},c)=>{const{theme:a}=_.useTheme(),e=s||"a";return t.jsxs(w,{ref:c,theme:a,onClick:i,as:e,...s?{to:`/${n}`}:{href:`/${n}`},children:[t.jsx("img",{loading:"lazy",src:l}),t.jsx(b,{theme:a,className:"quattro-card__gradient",children:t.jsxs("div",{className:"quattro-card__text",children:[t.jsx("div",{className:"quattro-card__title",children:o}),t.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),x=f.qe.div`
+`,y=d.forwardRef(({title:o,description:t,imageUrl:l,onSelectCard:i=()=>{},link:n,LinkComponent:s},c)=>{const{theme:a}=f.useTheme(),e=s||"a";return r.jsxs(w,{ref:c,theme:a,onClick:i,as:e,...s?{to:`/${n}`}:{href:`/${n}`},children:[r.jsx("img",{loading:"lazy",src:l}),r.jsx(b,{theme:a,className:"quattro-card__gradient",children:r.jsxs("div",{className:"quattro-card__text",children:[r.jsx("div",{className:"quattro-card__title",children:o}),r.jsx("div",{className:"quattro-card__description",children:t})]})})]})}),q=_.qe.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -156,12 +156,14 @@
     width: 100%;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${p.down("S")} {
     gap: 1.25rem;
+  }
 
+  @media ${p.down("XS")} {
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1rem;
     }
   }
-`,q=d.memo(y),j=d.forwardRef(({title:o,items:r,isLoading:l=!1,onSelectCard:i=()=>{},LinkComponent:n},s)=>{const c=d.useMemo(()=>{var a;return(a=r==null?void 0:r.slice(0,4))==null?void 0:a.map((e,u)=>t.jsx(q,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>i==null?void 0:i(e),link:e==null?void 0:e.link,LinkComponent:n},`quattro-card__${u+1}`))},[r]);return t.jsxs(x,{ref:s,children:[t.jsx("div",{className:"wrapper__heading",children:t.jsx("div",{className:"wrapper__title",children:m.isDefinedNotEmptyString(o)&&t.jsx("div",{className:"title__text",children:t.jsx("span",{children:o})})})}),t.jsx(h.SuspenseBlogCardsSponsored,{isLoading:l,keyPrefix:"quattro-cards-skeleton",children:t.jsx("div",{className:"wrapper__cards",children:c})})]})});module.exports=j;
+`,x=d.memo(y),j=d.forwardRef(({title:o,items:t,isLoading:l=!1,onSelectCard:i=()=>{},LinkComponent:n},s)=>{const c=d.useMemo(()=>{var a;return(a=t==null?void 0:t.slice(0,4))==null?void 0:a.map((e,u)=>r.jsx(x,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>i==null?void 0:i(e),link:e==null?void 0:e.link,LinkComponent:n},`quattro-card__${u+1}`))},[t]);return r.jsxs(q,{ref:s,children:[r.jsx("div",{className:"wrapper__heading",children:r.jsx("div",{className:"wrapper__title",children:m.isDefinedNotEmptyString(o)&&r.jsx("div",{className:"title__text",children:r.jsx("span",{children:o})})})}),r.jsx(h.SuspenseBlogCardsSponsored,{isLoading:l,keyPrefix:"quattro-cards-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:c})})]})});module.exports=j;