@lanaco/lnc-react-ui 4.0.185 → 4.0.188

package/dist/OverlayGeneralCardsSection.js

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import m from "./Button.js";
-import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as h } from "./consts-BuFChS64.js";
-import { S as u } from "./index-BovNbKxB.js";
-const x = g.a`
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import u from "./Button.js";
+import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as _ } from "./consts-BuFChS64.js";
+import { S as x } from "./index-BovNbKxB.js";
+const p = h.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -68,7 +68,7 @@ const x = g.a`
     }
   }
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     padding: 2rem;
     min-height: 17.5rem;
     width: 100%;
@@ -91,37 +91,43 @@ const x = g.a`
       }
     }
   }
-`, p = f(
+`, v = g(
   ({
     title: r,
-    description: o,
-    buttonText: i,
-    imageUrl: a,
-    backgroundColor: l = "none",
-    handleSelectCard: s = () => {
+    description: n,
+    buttonText: a,
+    imageUrl: l,
+    backgroundColor: s = "none",
+    handleSelectCard: c = () => {
     },
-    handleButtonAction: e = () => {
+    handleButtonAction: d = () => {
     },
-    selectAction: c
-  }, _) => /* @__PURE__ */ d(
-    x,
+    selectAction: e,
+    LinkComponent: i
+  }, m) => /* @__PURE__ */ f(
+    p,
     {
-      ref: _,
-      backgroundImage: a,
-      backgroundColor: l,
-      onClick: s,
-      href: `/${c}`,
+      ref: m,
+      backgroundImage: l,
+      backgroundColor: s,
+      onClick: c,
+      as: i || "a",
+      ...i ? {
+        to: `/${e}`
+      } : {
+        href: `/${e}`
+      },
       children: [
-        /* @__PURE__ */ d("div", { className: "section__text", children: [
-          r && /* @__PURE__ */ n("div", { className: "section__title", children: r }),
-          o && /* @__PURE__ */ n("div", { className: "section__description", children: o })
+        /* @__PURE__ */ f("div", { className: "section__text", children: [
+          r && /* @__PURE__ */ o("div", { className: "section__title", children: r }),
+          n && /* @__PURE__ */ o("div", { className: "section__description", children: n })
         ] }),
-        /* @__PURE__ */ n(
-          m,
+        /* @__PURE__ */ o(
+          u,
           {
-            text: i,
+            text: a,
             onClick: (t) => {
-              t == null || t.preventDefault(), t == null || t.stopPropagation(), e();
+              t == null || t.preventDefault(), t == null || t.stopPropagation(), d();
             },
             borderRadius: "regular",
             color: "gray",
@@ -131,7 +137,7 @@ const x = g.a`
       ]
     }
   )
-), v = g.div`
+), y = h.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -170,7 +176,7 @@ const x = g.a`
     }
   }
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${_ + "px"}) {
     & .section__title {
       font-size: 1.375rem;
       line-height: 1.75rem;
@@ -180,40 +186,42 @@ const x = g.a`
       flex-direction: column;
     }
   }
-`, $ = f(
+`, S = g(
   ({
     title: r,
-    items: o,
-    isLoading: i = !1,
-    onSelectCard: a = () => {
+    items: n,
+    isLoading: a = !1,
+    onSelectCard: l = () => {
     },
-    onButtonAction: l = () => {
-    }
-  }, s) => /* @__PURE__ */ d(v, { ref: s, children: [
-    /* @__PURE__ */ n("div", { className: "section__title", children: r }),
-    /* @__PURE__ */ n(
-      u,
+    onButtonAction: s = () => {
+    },
+    LinkComponent: c
+  }, d) => /* @__PURE__ */ f(y, { ref: d, children: [
+    /* @__PURE__ */ o("div", { className: "section__title", children: r }),
+    /* @__PURE__ */ o(
+      x,
       {
-        isLoading: i,
+        isLoading: a,
         keyPrefix: "overlay-general-cards-skeleton",
-        children: /* @__PURE__ */ n("div", { className: "section__items", children: o == null ? void 0 : o.map((e, c) => /* @__PURE__ */ n(
-          p,
+        children: /* @__PURE__ */ o("div", { className: "section__items", children: n == null ? void 0 : n.map((e, i) => /* @__PURE__ */ o(
+          v,
           {
             title: e == null ? void 0 : e.title,
             description: e == null ? void 0 : e.description,
             imageUrl: e == null ? void 0 : e.imageUrl,
             buttonText: e == null ? void 0 : e.buttonText,
             backgroundColor: e == null ? void 0 : e.backgroundColor,
-            handleSelectCard: () => a(e),
-            handleButtonAction: () => l(e),
-            selectAction: e == null ? void 0 : e.selectAction
+            handleSelectCard: () => l(e),
+            handleButtonAction: () => s(e),
+            selectAction: e == null ? void 0 : e.selectAction,
+            LinkComponent: c
           },
-          `overlay-general-card__${c + 1}`
+          `overlay-general-card__${i + 1}`
         )) })
       }
     )
   ] })
 );
 export {
-  $ as default
+  S as default
 };

package/dist/ProductsWithBannerSection.cjs

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

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 C, Suspense as N, memo as U, useMemo as G } from "react";
-import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as f } from "./consts-BuFChS64.js";
-import { u as M } from "./useDetectMobile-Bkvj0VMa.js";
-import { R as _ } from "./style-C7FUSHmS.js";
-import { o as j, l as B, k } from "./utils-Dc5zIpaz.js";
-import { P as I } from "./index-C_NnINik.js";
-import { S as o, b as i, a as c, c as p } from "./style-CXMUA6cI.js";
-const y = b.div`
+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-C7FUSHmS.js";
+import { o as B, l as I, k as C } from "./utils-Dc5zIpaz.js";
+import { P as L } from "./index-C_NnINik.js";
+import { S as s, b as i, a as u, c as b } from "./style-CXMUA6cI.js";
+const y = f.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -25,7 +25,7 @@ const y = b.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${R + "px"}) {
     height: 100%;
     min-height: 100%;
     max-height: 100%;
@@ -40,15 +40,15 @@ const y = b.div`
       }
     }
   }
-`, z = b.div`
+`, z = f.div`
   display: grid;
   grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${R + "px"}) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-`, D = b.a`
+`, D = f.a`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -66,10 +66,10 @@ const y = b.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-    ${j(2)}
+    ${B(2)}
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${R + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -80,67 +80,73 @@ const y = b.div`
       object-fit: cover;
     }
   }
-`, E = W((a, s) => {
+`, E = W((a, h) => {
   const {
-    uuid: n,
+    uuid: o,
     title: d,
-    image: h,
-    sellerUuid: $,
-    onSelectCard: R = () => {
+    image: c,
+    sellerUuid: k,
+    onSelectCard: w = () => {
     },
-    imageComponent: u,
+    imageComponent: g,
     metadata: m,
-    nameSlug: l
-  } = a, g = C(null);
+    nameSlug: n,
+    LinkComponent: l
+  } = a, p = l || "a", S = N(null);
   return /* @__PURE__ */ t(
     D,
     {
-      ref: g,
+      ref: S,
       className: "product-card",
       name: m == null ? void 0 : m.name,
       "data-accessor": m == null ? void 0 : m.accessor,
-      onClick: (w) => R(w, s),
-      href: `/product/${k(l) ? `${l}-` : ""}${n}`,
+      onClick: (e) => w(e, h),
+      as: p,
+      ...l ? {
+        to: `/product/${C(n) ? `${n}-` : ""}${o}`
+      } : {
+        href: `/product/${C(n) ? `${n}-` : ""}${o}`
+      },
       children: [
-        B(u) ? u : /* @__PURE__ */ r(I, { src: h }),
+        I(g) ? g : /* @__PURE__ */ r(L, { src: c }),
         /* @__PURE__ */ r("div", { className: "card-title", children: d })
       ]
     }
   );
-}), L = b(o)`
-  @media (max-width: ${f + "px"}) {
+}), T = f(s)`
+  @media (max-width: ${R + "px"}) {
     & .skeleton__banner {
       height: 100%;
       aspect-ratio: 1 / 1;
     }
   }
-`, T = ({ keyPrefix: a }) => /* @__PURE__ */ t(L, { children: [
+`, q = ({ keyPrefix: a }) => /* @__PURE__ */ t(T, { children: [
   /* @__PURE__ */ r(i, { height: "22.5rem", className: "skeleton__banner" }),
-  /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ t(o, { gap: "0.5rem", children: [
+  /* @__PURE__ */ t(u, { children: [
+    /* @__PURE__ */ t(s, { gap: "0.5rem", children: [
       /* @__PURE__ */ r(
-        p,
+        b,
         {
           height: "100%",
           width: "100%",
           borderRadius: "0.75rem"
         }
       ),
-      /* @__PURE__ */ r(o, { height: "1rem", children: /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }) }),
-      /* @__PURE__ */ t(c, { gap: "0.5rem", children: [
+      /* @__PURE__ */ r(s, { height: "1rem", children: /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }) }),
+      /* @__PURE__ */ t(u, { 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" }) })
+      /* @__PURE__ */ r(s, { height: "2rem", children: /* @__PURE__ */ r(i, { height: "2rem", borderRadius: "0.75rem" }) })
     ] }, `${a}-1`),
     /* @__PURE__ */ t(
-      o,
+      s,
       {
         gap: "0.5rem",
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            p,
+            b,
             {
               height: "100%",
               width: "100%",
@@ -148,7 +154,7 @@ const y = b.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(c, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -158,13 +164,13 @@ const y = b.div`
       `${a}-2`
     ),
     /* @__PURE__ */ t(
-      o,
+      s,
       {
         gap: "0.5rem",
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            p,
+            b,
             {
               height: "100%",
               width: "100%",
@@ -172,7 +178,7 @@ const y = b.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(c, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -182,13 +188,13 @@ const y = b.div`
       `${a}-3`
     ),
     /* @__PURE__ */ t(
-      o,
+      s,
       {
         gap: "0.5rem",
         noGradient: !0,
         children: [
           /* @__PURE__ */ r(
-            p,
+            b,
             {
               height: "100%",
               width: "100%",
@@ -196,7 +202,7 @@ const y = b.div`
             }
           ),
           /* @__PURE__ */ r(i, { height: "1rem", borderRadius: "0.75rem" }),
-          /* @__PURE__ */ t(c, { gap: "0.5rem", noGradient: !0, children: [
+          /* @__PURE__ */ t(u, { gap: "0.5rem", noGradient: !0, children: [
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" }),
             /* @__PURE__ */ r(i, { height: "1.5rem", borderRadius: "0.75rem" })
           ] }),
@@ -206,23 +212,24 @@ const y = b.div`
       `${a}-4`
     )
   ] })
-] }), q = ({
+] }), F = ({
   keyPrefix: a,
-  isLoading: s = !1,
-  fallbackComponent: n = /* @__PURE__ */ r(P, {}),
+  isLoading: h = !1,
+  fallbackComponent: o = /* @__PURE__ */ r(P, {}),
   children: d
-}) => /* @__PURE__ */ r(N, { fallbackComponent: n, children: s === !0 ? /* @__PURE__ */ r(T, { keyPrefix: a }) : d }), v = U(E), V = W((a, s) => {
+}) => /* @__PURE__ */ r(U, { fallbackComponent: o, children: h === !0 ? /* @__PURE__ */ r(q, { keyPrefix: a }) : d }), v = G(E), Y = W((a, h) => {
   const {
-    icon: n,
+    icon: o,
     items: d,
-    limit: h = 4,
-    imageUrl: $,
-    title: R = "Season inspiration",
-    isLoading: u = !1,
+    limit: c = 4,
+    imageUrl: k,
+    title: w = "Season inspiration",
+    isLoading: g = !1,
     getImage: m = () => {
     },
-    componentName: l
-  } = a, g = M(), w = G(() => /* @__PURE__ */ r(P, { children: g === !0 ? d == null ? void 0 : d.map((e, S) => /* @__PURE__ */ r(
+    componentName: n,
+    LinkComponent: l
+  } = a, p = _(), S = M(() => /* @__PURE__ */ r(P, { children: p === !0 ? d == null ? void 0 : d.map((e, $) => /* @__PURE__ */ r(
     v,
     {
       title: e == null ? void 0 : e.name,
@@ -230,10 +237,11 @@ const y = b.div`
       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,
-      metadata: { name: l, accessor: e == null ? void 0 : e.accessor }
+      metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
+      LinkComponent: l
     },
-    S
-  )) : d == null ? void 0 : d.slice(0, h).map((e, S) => /* @__PURE__ */ r(
+    $
+  )) : d == null ? void 0 : d.slice(0, c).map((e, $) => /* @__PURE__ */ r(
     v,
     {
       title: e == null ? void 0 : e.name,
@@ -241,28 +249,29 @@ const y = b.div`
       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,
-      metadata: { name: l, accessor: e == null ? void 0 : e.accessor }
+      metadata: { name: n, accessor: e == null ? void 0 : e.accessor },
+      LinkComponent: l
     },
-    S
-  )) }), [d, g, h]);
-  return /* @__PURE__ */ t(_, { ref: s, children: [
+    $
+  )) }), [d, p, c]);
+  return /* @__PURE__ */ t(j, { ref: h, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
-      k(n) && /* @__PURE__ */ r("i", { className: n }),
-      /* @__PURE__ */ r("span", { children: R })
+      C(o) && /* @__PURE__ */ r("i", { className: o }),
+      /* @__PURE__ */ r("span", { children: w })
     ] }) }),
     /* @__PURE__ */ t(
-      q,
+      F,
       {
-        isLoading: u,
+        isLoading: g,
         keyPrefix: "products-with-banner-skeleton",
         children: [
-          /* @__PURE__ */ r(y, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: $ }) }),
-          /* @__PURE__ */ r(z, { limit: h, children: w })
+          /* @__PURE__ */ r(y, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: k }) }),
+          /* @__PURE__ */ r(z, { limit: c, children: S })
         ]
       }
     )
   ] });
 });
 export {
-  V as default
+  Y as default
 };

package/dist/QuattroCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("react"),c=require("./utils-RnrgDDZP.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`
+"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`
   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;
-`,b=m.styled.a`
+`,w=p.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   cursor: pointer;
@@ -81,7 +81,7 @@
       font-style: normal;
       font-weight: 600;
       line-height: 1.75rem;
-      ${c.truncateText()}
+      ${m.truncateText()}
     }
 
     & .quattro-card__description {
@@ -89,11 +89,11 @@
       font-style: normal;
       font-weight: 500;
       line-height: 1.25rem;
-      ${c.truncateTextInRows(2)}
+      ${m.truncateTextInRows(2)}
     }
   }
 
-  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
 
     img {
@@ -110,7 +110,7 @@
       display: block;
     }
   }
-`,w=n.forwardRef(({title:o,description:t,imageUrl:s,onSelectCard:i=()=>{},link:d},l)=>{const{theme:a}=u.useTheme();return e.jsxs(b,{ref:l,theme:a,onClick:i,href:`/${d}`,children:[e.jsx("img",{loading:"lazy",src:s}),e.jsx(h,{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:t})]})})]})}),y=_.qe.div`
+`,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`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -156,7 +156,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
     gap: 1.25rem;
 
     & .wrapper__cards {
@@ -164,4 +164,4 @@
       gap: 1rem;
     }
   }
-`,x=n.memo(w),q=n.forwardRef(({title:o,items:t,isLoading:s=!1,onSelectCard:i=()=>{}},d)=>{const l=n.useMemo(()=>{var a;return(a=t==null?void 0:t.slice(0,4))==null?void 0:a.map((r,g)=>e.jsx(x,{title:r==null?void 0:r.title,description:r==null?void 0:r.description,imageUrl:r==null?void 0:r.imageUrl,onSelectCard:()=>i==null?void 0:i(r),link:r==null?void 0:r.link},`quattro-card__${g+1}`))},[t]);return e.jsxs(y,{ref:d,children:[e.jsx("div",{className:"wrapper__heading",children:e.jsx("div",{className:"wrapper__title",children:c.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"title__text",children:e.jsx("span",{children:o})})})}),e.jsx(f.SuspenseBlogCardsSponsored,{isLoading:s,keyPrefix:"quattro-cards-skeleton",children:e.jsx("div",{className:"wrapper__cards",children:l})})]})});module.exports=q;
+`,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;