@lanaco/lnc-react-ui 4.0.70 → 4.0.71

package/dist/BlogsSectionSimpleCentered.cjs

@@ -1,13 +1,13 @@
-"use strict";const t=require("react/jsx-runtime"),s=require("react"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),h=require("./consts-CtNoHdBj.cjs"),j=require("./useDetectMobile-D6d5LpdL.cjs"),m=require("./utils-BXPz9bck.cjs"),C=require("./Button.cjs"),k=require("./index-CAqPGuiA.cjs"),S=u.styled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),p=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),m=require("./utils-BXPz9bck.cjs"),j=require("./Button.cjs"),k=require("./index-CAqPGuiA.cjs"),C=u.styled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,f=u.styled.div`
+`,h=u.styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -21,7 +21,6 @@
   gap: 1.5rem;
   padding: 2rem 1.25rem;
   min-height: 22.5rem;
-  max-height: 22.5rem;
   align-items: center;
 
   & button {
@@ -47,10 +46,10 @@
     background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     max-width: unset;
   }
-`,w=u.styled.div`
+`,f=u.styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -75,4 +74,4 @@
     color: var(--gray-700, #4e555f);
     ${m.truncateTextInRows(3)}
   }
-`,y=s.forwardRef((i,l)=>{const{title:r,imageUrl:n,text:o,buttonText:a,onCardClick:d}=i;return t.jsxs(f,{ref:l,className:"blog-card",onClick:d,children:[t.jsx(k.ProductImageWrapper,{src:n}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(C,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:d,size:"medium",children:a})]})}),v=s.forwardRef((i,l)=>{const{onCardClick:r}=i;return t.jsxs(f,{className:"product-card",onClick:r,children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(w,{children:t.jsx("div",{className:"skeleton-title"})})]})}),$=({limit:i=3,isLoading:l=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(v,{isLoading:l},`${r}-skeleton-product-card-${o}`))}),q=({children:i,fallbackComponent:l=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(s.Suspense,{fallbackComponent:l,children:r===!0?t.jsx($,{isLoading:r,limit:n,keyPrefix:o}):i}),p=s.memo(y),T=s.forwardRef((i,l)=>{const{items:r,limit:n=3,onSelectCard:o=()=>{},isLoading:a=!1,getImage:d=()=>{}}=i,g=j.useDetectMobile(),b=s.useMemo(()=>t.jsx(t.Fragment,{children:g===!0?r==null?void 0:r.map((e,c)=>t.jsx(p,{title:e==null?void 0:e.title,imageUrl:d(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},c)):r==null?void 0:r.slice(0,n).map((e,c)=>t.jsx(p,{title:e==null?void 0:e.title,imageUrl:d(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>o(e==null?void 0:e.uuid)},c))}),[r,g,n,o]);return t.jsx(S,{ref:l,limit:n,children:t.jsx(q,{isLoading:a,limit:n,keyPrefix:"explore-landing",children:b})})});module.exports=T;
+`,g=a.forwardRef((i,n)=>{const{title:r,imageUrl:o,text:l,buttonText:d,onCardClick:s}=i;return t.jsxs(h,{ref:n,className:"blog-card",onClick:s,children:[t.jsx(k.ProductImageWrapper,{src:o}),t.jsxs(f,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:l})]}),t.jsx(j,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:s,size:"medium",children:d})]})}),S=a.forwardRef((i,n)=>{const{onCardClick:r}=i;return t.jsxs(h,{className:"product-card",onClick:r,children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(f,{children:t.jsx("div",{className:"skeleton-title"})})]})}),y=({limit:i=3,isLoading:n=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(o,l)=>t.jsx(S,{isLoading:n},`${r}-skeleton-product-card-${l}`))}),v=({children:i,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:o,keyPrefix:l})=>t.jsx(a.Suspense,{fallbackComponent:n,children:r===!0?t.jsx(y,{isLoading:r,limit:o,keyPrefix:l}):i}),$=a.forwardRef((i,n)=>{const{items:r,limit:o=3,onSelectCard:l=()=>{},isLoading:d=!1,getImage:s=()=>{}}=i,w=b.useDetectMobile();return t.jsx(C,{ref:n,limit:o,children:t.jsx(v,{isLoading:d,limit:o,keyPrefix:"explore-landing",children:t.jsx(t.Fragment,{children:w===!0?r==null?void 0:r.map((e,c)=>t.jsx(g,{title:e==null?void 0:e.title,imageUrl:s(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>l(e==null?void 0:e.uuid)},c)):r==null?void 0:r.slice(0,o).map((e,c)=>t.jsx(g,{title:e==null?void 0:e.title,imageUrl:s(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>l(e==null?void 0:e.uuid)},c))})})})});module.exports=$;

package/dist/BlogsSectionSimpleCentered.js

@@ -1,21 +1,21 @@
 import { jsxs as c, jsx as t, Fragment as s } from "react/jsx-runtime";
-import { forwardRef as u, Suspense as S, memo as v, useMemo as y } from "react";
+import { forwardRef as u, Suspense as C } from "react";
 import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as f } from "./consts-C1uHV4xc.js";
-import { u as $ } from "./useDetectMobile-BC6EGaBc.js";
-import { m as b, t as T } from "./utils-DCs-SbIv.js";
-import P from "./Button.js";
-import { P as B } from "./index-BLxkXrqU.js";
-const M = p.div`
+import { M as h } from "./consts-C1uHV4xc.js";
+import { u as S } from "./useDetectMobile-BC6EGaBc.js";
+import { m as f, t as v } from "./utils-DCs-SbIv.js";
+import y from "./Button.js";
+import { P as $ } from "./index-BLxkXrqU.js";
+const T = p.div`
   display: grid;
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${h + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, w = p.div`
+`, b = p.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -29,7 +29,6 @@ const M = p.div`
   gap: 1.5rem;
   padding: 2rem 1.25rem;
   min-height: 22.5rem;
-  max-height: 22.5rem;
   align-items: center;
 
   & button {
@@ -52,13 +51,13 @@ const M = p.div`
     min-height: 6rem;
     max-height: 6rem;
     border-radius: 0.75rem;
-    background-color: ${b("-90deg")};
+    background-color: ${f("-90deg")};
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${h + "px"}) {
     max-width: unset;
   }
-`, C = p.div`
+`, w = p.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -73,7 +72,7 @@ const M = p.div`
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${b("-90deg")};
+    background-color: ${f("-90deg")};
   }
 
   & .text-wr {
@@ -81,18 +80,18 @@ const M = p.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${T(3)}
+    ${v(3)}
   }
-`, N = u((i, l) => {
-  const { title: r, imageUrl: o, text: n, buttonText: d, onCardClick: a } = i;
-  return /* @__PURE__ */ c(w, { ref: l, className: "blog-card", onClick: a, children: [
-    /* @__PURE__ */ t(B, { src: o }),
-    /* @__PURE__ */ c(C, { children: [
+`, g = u((i, o) => {
+  const { title: r, imageUrl: l, text: n, buttonText: d, onCardClick: a } = i;
+  return /* @__PURE__ */ c(b, { ref: o, className: "blog-card", onClick: a, children: [
+    /* @__PURE__ */ t($, { src: l }),
+    /* @__PURE__ */ c(w, { children: [
       /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
       /* @__PURE__ */ t("div", { className: "text-wr", children: n })
     ] }),
     /* @__PURE__ */ t(
-      P,
+      y,
       {
         borderRadius: "curved",
         color: "gray",
@@ -104,76 +103,76 @@ const M = p.div`
       }
     )
   ] });
-}), z = u((i, l) => {
+}), B = u((i, o) => {
   const { onCardClick: r } = i;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ c(w, { className: "product-card", onClick: r, children: [
+    /* @__PURE__ */ c(b, { className: "product-card", onClick: r, children: [
       /* @__PURE__ */ t("div", { className: "skeleton-img" }),
-      /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
+      /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
     ] })
   );
-}), I = ({ limit: i = 3, isLoading: l = !1, keyPrefix: r }) => /* @__PURE__ */ t(s, { children: Array.from({ length: i }, (o, n) => /* @__PURE__ */ t(
-  z,
+}), N = ({ limit: i = 3, isLoading: o = !1, keyPrefix: r }) => /* @__PURE__ */ t(s, { children: Array.from({ length: i }, (l, n) => /* @__PURE__ */ t(
+  B,
   {
-    isLoading: l
+    isLoading: o
   },
   `${r}-skeleton-product-card-${n}`
-)) }), U = ({
+)) }), I = ({
   children: i,
-  fallbackComponent: l = /* @__PURE__ */ t(s, {}),
+  fallbackComponent: o = /* @__PURE__ */ t(s, {}),
   isLoading: r = !1,
-  limit: o,
+  limit: l,
   keyPrefix: n
-}) => /* @__PURE__ */ t(S, { fallbackComponent: l, children: r === !0 ? /* @__PURE__ */ t(
-  I,
+}) => /* @__PURE__ */ t(C, { fallbackComponent: o, children: r === !0 ? /* @__PURE__ */ t(
+  N,
   {
     isLoading: r,
-    limit: o,
+    limit: l,
     keyPrefix: n
   }
-) : i }), h = v(N), F = u((i, l) => {
+) : i }), A = u((i, o) => {
   const {
     items: r,
-    limit: o = 3,
+    limit: l = 3,
     onSelectCard: n = () => {
     },
     isLoading: d = !1,
     getImage: a = () => {
     }
-  } = i, g = $(), k = y(() => /* @__PURE__ */ t(s, { children: g === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
-    h,
-    {
-      title: e == null ? void 0 : e.title,
-      imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
-      text: e == null ? void 0 : e.description,
-      titleSlug: e == null ? void 0 : e.titleSlug,
-      buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: () => n(e == null ? void 0 : e.uuid)
-    },
-    m
-  )) : r == null ? void 0 : r.slice(0, o).map((e, m) => /* @__PURE__ */ t(
-    h,
-    {
-      title: e == null ? void 0 : e.title,
-      imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
-      text: e == null ? void 0 : e.description,
-      titleSlug: e == null ? void 0 : e.titleSlug,
-      buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: () => n(e == null ? void 0 : e.uuid)
-    },
-    m
-  )) }), [r, g, o, n]);
-  return /* @__PURE__ */ t(M, { ref: l, limit: o, children: /* @__PURE__ */ t(
-    U,
+  } = i, k = S();
+  return /* @__PURE__ */ t(T, { ref: o, limit: l, children: /* @__PURE__ */ t(
+    I,
     {
       isLoading: d,
-      limit: o,
+      limit: l,
       keyPrefix: "explore-landing",
-      children: k
+      children: /* @__PURE__ */ t(s, { children: k === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
+        g,
+        {
+          title: e == null ? void 0 : e.title,
+          imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+          text: e == null ? void 0 : e.description,
+          titleSlug: e == null ? void 0 : e.titleSlug,
+          buttonText: e == null ? void 0 : e.buttonText,
+          onCardClick: () => n(e == null ? void 0 : e.uuid)
+        },
+        m
+      )) : r == null ? void 0 : r.slice(0, l).map((e, m) => /* @__PURE__ */ t(
+        g,
+        {
+          title: e == null ? void 0 : e.title,
+          imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+          text: e == null ? void 0 : e.description,
+          titleSlug: e == null ? void 0 : e.titleSlug,
+          buttonText: e == null ? void 0 : e.buttonText,
+          onCardClick: () => n(e == null ? void 0 : e.uuid)
+        },
+        m
+      )) })
     }
   ) });
 });
 export {
-  F as default
+  A as default
 };

package/dist/MasonryGeneralCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),g=require("react"),f=require("./Button.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-BXPz9bck.cjs"),u=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),p=require("./consts-CtNoHdBj.cjs"),_=c.styled.div`
+"use strict";const r=require("react/jsx-runtime"),g=require("react"),u=require("./Button.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-BXPz9bck.cjs"),_=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),p=require("./consts-CtNoHdBj.cjs"),w=c.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -12,12 +12,12 @@
   grid-row: ${t=>{var e;return((e=t.position)==null?void 0:e.rowStart)||"1"}} /
     ${t=>{var e;return((e=t.position)==null?void 0:e.rowEnd)||"1"}};
 
-  background: linear-gradient(
+  background: ${t=>t.backgroundColor||`linear-gradient(
     178deg,
     rgba(0, 0, 0, 0) 1.5%,
     rgba(0, 0, 0, 0.16) 8.95%,
     #000 98.39%
-  );
+  )`};
 
   & .wrapper__image {
     height: 100%;
@@ -114,7 +114,7 @@
       }
     }
   }
-`,w=g.forwardRef(({title:t,imageUrl:e,description:n,buttonText:a,onSelectCard:l=()=>{},className:o,position:s,selectAction:d,tag:m},x)=>{const h=u.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(_,{ref:x,theme:h,className:o,onClick:l,position:s,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[m&&r.jsx("div",{className:"text__tag",children:m}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(n)&&r.jsx("div",{className:"text__description",children:n}),i.isDefinedNotEmptyString(a)&&r.jsx(f,{text:a,onClick:()=>l(d),className:"text__action"})]})]})})}),b=c.styled.div`
+`,b=g.forwardRef(({title:t,imageUrl:e,description:n,buttonText:a,onSelectCard:o=()=>{},className:l,position:s,selectAction:d,tag:m,backgroundColor:x},h)=>{const f=_.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(w,{ref:h,theme:f,className:l,onClick:o,position:s,backgroundColor:x,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[m&&r.jsx("div",{className:"text__tag",children:m}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(n)&&r.jsx("div",{className:"text__description",children:n}),i.isDefinedNotEmptyString(a)&&r.jsx(u,{text:a,onClick:()=>o(d),className:"text__action"})]})]})})}),v=c.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -149,7 +149,7 @@
       }
     }
   }
-`,v=c.styled.div`
+`,y=c.styled.div`
   display: grid;
   grid-template-columns: ${t=>"repeat(12,  minmax(0, 1fr))"};
 
@@ -168,4 +168,4 @@
     max-height: 100%;
     padding: 0 1rem;
   }
-`,y=g.forwardRef(({title:t,items:e,limit:n=3,onSelectCard:a=()=>{}},l)=>r.jsxs(b,{children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(v,{limit:n,children:e&&(e==null?void 0:e.map((o,s)=>r.jsx(w,{...o,onSelectCard:d=>a(d,o)},`landing-page-masonry-general-card__${s+1}`)))})]}));module.exports=y;
+`,j=g.forwardRef(({title:t,items:e,limit:n=3,onSelectCard:a=()=>{}},o)=>r.jsxs(v,{ref:o,children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(y,{limit:n,children:e&&(e==null?void 0:e.map((l,s)=>r.jsx(b,{...l,onSelectCard:d=>a(d,l)},`landing-page-masonry-general-card__${s+1}`)))})]}));module.exports=j;

package/dist/MasonryGeneralCardsSection.js

@@ -1,11 +1,11 @@
-import { jsx as t, Fragment as w, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, Fragment as b, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import b from "./Button.js";
+import v from "./Button.js";
 import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { m as n, t as p, k as h } from "./utils-DCs-SbIv.js";
-import { u as v } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { m as l, t as p, k as h } from "./utils-DCs-SbIv.js";
+import { u as y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { M as x } from "./consts-C1uHV4xc.js";
-const y = c.div`
+const k = c.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -31,12 +31,12 @@ const y = c.div`
   return ((e = r.position) == null ? void 0 : e.rowEnd) || "1";
 }};
 
-  background: linear-gradient(
+  background: ${(r) => r.backgroundColor || `linear-gradient(
     178deg,
     rgba(0, 0, 0, 0) 1.5%,
     rgba(0, 0, 0, 0.16) 8.95%,
     #000 98.39%
-  );
+  )`};
 
   & .wrapper__image {
     height: 100%;
@@ -50,7 +50,7 @@ const y = c.div`
     width: 24.5rem;
     height: 30rem;
     border-radius: 0.75rem;
-    background-color: ${n("-90deg")};
+    background-color: ${l("-90deg")};
   }
 
   & .wrapper__text {
@@ -106,19 +106,19 @@ const y = c.div`
     }
 
     & .text__title--skeleton {
-      background-color: ${n("-90deg")};
+      background-color: ${l("-90deg")};
       height: 1rem;
       width: 9rem;
     }
 
     & .text__description--skeleton {
-      background-color: ${n("-90deg")};
+      background-color: ${l("-90deg")};
       height: 1rem;
       width: 12rem;
     }
 
     & .text__action--skeleton {
-      background-color: ${n("-90deg")};
+      background-color: ${l("-90deg")};
       height: 2rem;
       width: 9rem;
     }
@@ -133,28 +133,30 @@ const y = c.div`
       }
     }
   }
-`, k = f(
+`, $ = f(
   ({
     title: r,
     imageUrl: e,
     description: i,
     buttonText: a,
-    onSelectCard: l = () => {
+    onSelectCard: o = () => {
     },
-    className: o,
-    position: m,
-    selectAction: d,
-    tag: g
-  }, u) => {
-    const _ = v();
-    return /* @__PURE__ */ t(w, { children: /* @__PURE__ */ s(
-      y,
+    className: n,
+    position: d,
+    selectAction: m,
+    tag: g,
+    backgroundColor: u
+  }, _) => {
+    const w = y();
+    return /* @__PURE__ */ t(b, { children: /* @__PURE__ */ s(
+      k,
       {
-        ref: u,
-        theme: _,
-        className: o,
-        onClick: l,
-        position: m,
+        ref: _,
+        theme: w,
+        className: n,
+        onClick: o,
+        position: d,
+        backgroundColor: u,
         children: [
           /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
           /* @__PURE__ */ s("div", { className: "wrapper__text", children: [
@@ -162,10 +164,10 @@ const y = c.div`
             /* @__PURE__ */ t("div", { className: "text__title", children: r }),
             h(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
             h(a) && /* @__PURE__ */ t(
-              b,
+              v,
               {
                 text: a,
-                onClick: () => l(d),
+                onClick: () => o(m),
                 className: "text__action"
               }
             )
@@ -174,7 +176,7 @@ const y = c.div`
       }
     ) });
   }
-), $ = c.div`
+), N = c.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -209,7 +211,7 @@ const y = c.div`
       }
     }
   }
-`, N = c.div`
+`, z = c.div`
   display: grid;
   grid-template-columns: ${(r) => "repeat(12,  minmax(0, 1fr))"};
 
@@ -228,20 +230,20 @@ const y = c.div`
     max-height: 100%;
     padding: 0 1rem;
   }
-`, I = f(
+`, R = f(
   ({ title: r, items: e, limit: i = 3, onSelectCard: a = () => {
-  } }, l) => /* @__PURE__ */ s($, { children: [
+  } }, o) => /* @__PURE__ */ s(N, { ref: o, children: [
     /* @__PURE__ */ t("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: /* @__PURE__ */ t("span", { children: r }) }) }),
-    /* @__PURE__ */ t(N, { limit: i, children: e && (e == null ? void 0 : e.map((o, m) => /* @__PURE__ */ t(
-      k,
+    /* @__PURE__ */ t(z, { limit: i, children: e && (e == null ? void 0 : e.map((n, d) => /* @__PURE__ */ t(
+      $,
       {
-        ...o,
-        onSelectCard: (d) => a(d, o)
+        ...n,
+        onSelectCard: (m) => a(m, n)
       },
-      `landing-page-masonry-general-card__${m + 1}`
+      `landing-page-masonry-general-card__${d + 1}`
     ))) })
   ] })
 );
 export {
-  I as default
+  R as default
 };

package/dist/OverlayGeneralCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("react"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),f=require("./style-C571ywKV.cjs"),u=require("./utils-BXPz9bck.cjs"),j=require("./Button.cjs"),v=require("./ThemeProvider.cjs"),y=x.styled.div`
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),p=require("./style-C571ywKV.cjs"),x=require("./utils-BXPz9bck.cjs"),f=require("./Button.cjs"),j=require("./ThemeProvider.cjs"),v=u.styled.div`
   display: grid;
   grid-template-columns: ${n=>`repeat(${n.limit}, 1fr)`};
   gap: 1.25rem;
@@ -9,7 +9,7 @@
     flex-direction: column;
     gap: 1rem;
   }
-`,h=x.styled.div`
+`,h=u.styled.div`
   width: 100%;
   overflow: hidden;
   position: relative;
@@ -50,7 +50,7 @@
 
     & .content-text-title {
       font-weight: 600;
-      ${u.truncateTextInRows(2)}
+      ${x.truncateTextInRows(2)}
     }
   }
 
@@ -62,7 +62,7 @@
   }
 
   & .img-skeleton {
-    background-color: ${u.linearGradientAnimation("-90deg")};
+    background-color: ${x.linearGradientAnimation("-90deg")};
     min-height: 28.75rem;
   }
 
@@ -80,4 +80,4 @@
       max-height: 28.75rem;
     }
   }
-`,m=l.forwardRef(({},n)=>e.jsx(h,{ref:n,children:e.jsx("div",{className:"img-skeleton"})})),w=({limit:n=2,isLoading:t=!1,keyPrefix:o})=>e.jsx(e.Fragment,{children:Array.from({length:n},(a,s)=>e.jsx(m,{isLoading:t},`${o}-skeleton-product-card-${s}`))}),k=({children:n,fallbackComponent:t=e.jsx(e.Fragment,{}),isLoading:o=!1,limit:a,keyPrefix:s})=>e.jsx(l.Suspense,{fallbackComponent:t,children:o===!0?e.jsx(w,{isLoading:o,limit:a,keyPrefix:s}):n}),b=l.forwardRef(({title:n,image:t,backgroundColor:o,description:a,buttonText:s,handleClick:c=()=>{},onButtonAction:i=()=>{}},d)=>{const{theme:r}=v.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(h,{ref:d,theme:r,overlay:o,onClick:c,children:[e.jsx("img",{src:t}),e.jsxs("div",{className:"content-wrapper",children:[e.jsxs("div",{className:"content-text",children:[e.jsx("div",{children:n}),e.jsx("div",{className:"content-text-title",children:a})]}),u.isDefinedNotEmptyString(s)&&e.jsx(j,{text:s,onClick:i,className:"text__action",size:"medium",color:"gray"})]})]})})}),_=l.memo(b),$=l.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:a=()=>{},isLoading:s=!1,onButtonAction:c=()=>{}},i)=>{const d=l.useMemo(()=>e.jsx(e.Fragment,{children:t&&(t==null?void 0:t.map((r,p)=>e.jsx(_,{title:r==null?void 0:r.title,image:r==null?void 0:r.imageUrl,description:r==null?void 0:r.description,buttonText:r==null?void 0:r.buttonText,backgroundColor:r==null?void 0:r.backgroundColor,handleClick:()=>a(r==null?void 0:r.selectAction,r),onButtonAction:()=>c(r==null?void 0:r.buttonLink,r)},`landing-page-overlay-general-card__${p+1}`)))}),[t,a]);return e.jsxs(f.RegulatTitleSectionWrapper,{ref:i,children:[e.jsx("div",{className:"regular-title center",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:n})})}),e.jsx(y,{limit:o,children:e.jsx(k,{isLoading:s,limit:o,keyPrefix:"explore-landing",children:d})})]})});module.exports=$;
+`,y=l.forwardRef(({},n)=>r.jsx(h,{ref:n,children:r.jsx("div",{className:"img-skeleton"})})),w=({limit:n=2,isLoading:t=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:n},(s,a)=>r.jsx(y,{isLoading:t},`${o}-skeleton-product-card-${a}`))}),m=({children:n,fallbackComponent:t=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:s,keyPrefix:a})=>r.jsx(l.Suspense,{fallbackComponent:t,children:o===!0?r.jsx(w,{isLoading:o,limit:s,keyPrefix:a}):n}),k=l.forwardRef(({title:n,image:t,backgroundColor:o,description:s,buttonText:a,handleClick:c=()=>{},onButtonAction:i=()=>{}},e)=>{const{theme:d}=j.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(h,{ref:e,theme:d,overlay:o,onClick:c,children:[r.jsx("img",{src:t}),r.jsxs("div",{className:"content-wrapper",children:[r.jsxs("div",{className:"content-text",children:[r.jsx("div",{children:n}),r.jsx("div",{className:"content-text-title",children:s})]}),x.isDefinedNotEmptyString(a)&&r.jsx(f,{text:a,onClick:i,className:"text__action",size:"medium",color:"gray"})]})]})})}),b=l.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:s=()=>{},isLoading:a=!1,onButtonAction:c=()=>{}},i)=>r.jsxs(p.RegulatTitleSectionWrapper,{ref:i,children:[r.jsx("div",{className:"regular-title center",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:n})})}),r.jsx(v,{limit:o,children:r.jsx(m,{isLoading:a,limit:o,keyPrefix:"explore-landing",children:t==null?void 0:t.map((e,d)=>r.jsx(k,{title:e==null?void 0:e.title,image:e==null?void 0:e.imageUrl,description:e==null?void 0:e.description,buttonText:e==null?void 0:e.buttonText,backgroundColor:e==null?void 0:e.backgroundColor,handleClick:()=>s(e==null?void 0:e.selectAction,e),onButtonAction:()=>c(e==null?void 0:e.buttonLink,e)},`landing-page-overlay-general-card__${d+1}`))})})]}));module.exports=b;

package/dist/OverlayGeneralCardsSection.js

@@ -1,23 +1,23 @@
-import { jsx as r, Fragment as i, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as g, Suspense as x, memo as v, useMemo as y } from "react";
+import { jsx as r, Fragment as p, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as g, Suspense as m } from "react";
 import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as u } from "./consts-C1uHV4xc.js";
-import { R as k } from "./style-CsMpu4iC.js";
-import { t as w, m as b, k as $ } from "./utils-DCs-SbIv.js";
-import C from "./Button.js";
-import { useTheme as N } from "./ThemeProvider.js";
-const P = h.div`
+import { M as f } from "./consts-C1uHV4xc.js";
+import { R as x } from "./style-CsMpu4iC.js";
+import { t as v, m as y, k } from "./utils-DCs-SbIv.js";
+import w from "./Button.js";
+import { useTheme as b } from "./ThemeProvider.js";
+const $ = h.div`
   display: grid;
   grid-template-columns: ${(n) => `repeat(${n.limit}, 1fr)`};
   gap: 1.25rem;
   justify-items: center;
 
-  @media (max-width: ${u + "px"}) {
+  @media (max-width: ${f + "px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
-`, f = h.div`
+`, u = h.div`
   width: 100%;
   overflow: hidden;
   position: relative;
@@ -58,7 +58,7 @@ const P = h.div`
 
     & .content-text-title {
       font-weight: 600;
-      ${w(2)}
+      ${v(2)}
     }
   }
 
@@ -70,7 +70,7 @@ const P = h.div`
   }
 
   & .img-skeleton {
-    background-color: ${b("-90deg")};
+    background-color: ${y("-90deg")};
     min-height: 28.75rem;
   }
 
@@ -80,7 +80,7 @@ const P = h.div`
     }
   }
 
-  @media (max-width: ${u + "px"}) {
+  @media (max-width: ${f + "px"}) {
     & img,
     .img.skeleton {
       aspect-ratio: unset;
@@ -88,57 +88,57 @@ const P = h.div`
       max-height: 28.75rem;
     }
   }
-`, S = g(({}, n) => /* @__PURE__ */ r(f, { ref: n, children: /* @__PURE__ */ r("div", { className: "img-skeleton" }) })), _ = ({ limit: n = 2, isLoading: o = !1, keyPrefix: t }) => /* @__PURE__ */ r(i, { children: Array.from({ length: n }, (l, a) => /* @__PURE__ */ r(
-  S,
+`, C = g(({}, n) => /* @__PURE__ */ r(u, { ref: n, children: /* @__PURE__ */ r("div", { className: "img-skeleton" }) })), N = ({ limit: n = 2, isLoading: t = !1, keyPrefix: o }) => /* @__PURE__ */ r(p, { children: Array.from({ length: n }, (l, a) => /* @__PURE__ */ r(
+  C,
   {
-    isLoading: o
+    isLoading: t
   },
-  `${t}-skeleton-product-card-${a}`
-)) }), j = ({
+  `${o}-skeleton-product-card-${a}`
+)) }), S = ({
   children: n,
-  fallbackComponent: o = /* @__PURE__ */ r(i, {}),
-  isLoading: t = !1,
+  fallbackComponent: t = /* @__PURE__ */ r(p, {}),
+  isLoading: o = !1,
   limit: l,
   keyPrefix: a
-}) => /* @__PURE__ */ r(x, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ r(
-  _,
+}) => /* @__PURE__ */ r(m, { fallbackComponent: t, children: o === !0 ? /* @__PURE__ */ r(
+  N,
   {
-    isLoading: t,
+    isLoading: o,
     limit: l,
     keyPrefix: a
   }
-) : n }), G = g(
+) : n }), _ = g(
   ({
     title: n,
-    image: o,
-    backgroundColor: t,
+    image: t,
+    backgroundColor: o,
     description: l,
     buttonText: a,
-    handleClick: d = () => {
+    handleClick: c = () => {
     },
-    onButtonAction: s = () => {
+    onButtonAction: d = () => {
     }
-  }, p) => {
-    const { theme: e } = N();
-    return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ c(
-      f,
+  }, e) => {
+    const { theme: s } = b();
+    return /* @__PURE__ */ r(p, { children: /* @__PURE__ */ i(
+      u,
       {
-        ref: p,
-        theme: e,
-        overlay: t,
-        onClick: d,
+        ref: e,
+        theme: s,
+        overlay: o,
+        onClick: c,
         children: [
-          /* @__PURE__ */ r("img", { src: o }),
-          /* @__PURE__ */ c("div", { className: "content-wrapper", children: [
-            /* @__PURE__ */ c("div", { className: "content-text", children: [
+          /* @__PURE__ */ r("img", { src: t }),
+          /* @__PURE__ */ i("div", { className: "content-wrapper", children: [
+            /* @__PURE__ */ i("div", { className: "content-text", children: [
               /* @__PURE__ */ r("div", { children: n }),
               /* @__PURE__ */ r("div", { className: "content-text-title", children: l })
             ] }),
-            $(a) && /* @__PURE__ */ r(
-              C,
+            k(a) && /* @__PURE__ */ r(
+              w,
               {
                 text: a,
-                onClick: s,
+                onClick: d,
                 className: "text__action",
                 size: "medium",
                 color: "gray"
@@ -149,37 +149,41 @@ const P = h.div`
       }
     ) });
   }
-), O = v(G), L = g(
-  ({ title: n, items: o, limit: t = 2, onSelectCard: l = () => {
-  }, isLoading: a = !1, onButtonAction: d = () => {
-  } }, s) => {
-    const p = y(() => /* @__PURE__ */ r(i, { children: o && (o == null ? void 0 : o.map((e, m) => /* @__PURE__ */ r(
-      O,
+), E = g(
+  ({
+    title: n,
+    items: t,
+    limit: o = 2,
+    onSelectCard: l = () => {
+    },
+    isLoading: a = !1,
+    onButtonAction: c = () => {
+    }
+  }, d) => /* @__PURE__ */ i(x, { ref: d, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: n }) }) }),
+    /* @__PURE__ */ r($, { limit: o, children: /* @__PURE__ */ r(
+      S,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.imageUrl,
-        description: e == null ? void 0 : e.description,
-        buttonText: e == null ? void 0 : e.buttonText,
-        backgroundColor: e == null ? void 0 : e.backgroundColor,
-        handleClick: () => l(e == null ? void 0 : e.selectAction, e),
-        onButtonAction: () => d(e == null ? void 0 : e.buttonLink, e)
-      },
-      `landing-page-overlay-general-card__${m + 1}`
-    ))) }), [o, l]);
-    return /* @__PURE__ */ c(k, { ref: s, children: [
-      /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: n }) }) }),
-      /* @__PURE__ */ r(P, { limit: t, children: /* @__PURE__ */ r(
-        j,
-        {
-          isLoading: a,
-          limit: t,
-          keyPrefix: "explore-landing",
-          children: p
-        }
-      ) })
-    ] });
-  }
+        isLoading: a,
+        limit: o,
+        keyPrefix: "explore-landing",
+        children: t == null ? void 0 : t.map((e, s) => /* @__PURE__ */ r(
+          _,
+          {
+            title: e == null ? void 0 : e.title,
+            image: e == null ? void 0 : e.imageUrl,
+            description: e == null ? void 0 : e.description,
+            buttonText: e == null ? void 0 : e.buttonText,
+            backgroundColor: e == null ? void 0 : e.backgroundColor,
+            handleClick: () => l(e == null ? void 0 : e.selectAction, e),
+            onButtonAction: () => c(e == null ? void 0 : e.buttonLink, e)
+          },
+          `landing-page-overlay-general-card__${s + 1}`
+        ))
+      }
+    ) })
+  ] })
 );
 export {
-  L as default
+  E as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.70",
+  "version": "4.0.71",
   "description": "React component library",
   "type": "module",
   "keywords": [