@lanaco/lnc-react-ui 4.0.54 → 4.0.55

package/dist/BannerSectionSimple.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),y=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./consts-CtNoHdBj.cjs"),j=require("./Button.cjs"),M=require("./useDetectMobile-D6d5LpdL.cjs"),v=i.styled.div`
+"use strict";const t=require("react/jsx-runtime"),j=require("react"),i=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./consts-CtNoHdBj.cjs"),y=require("./Button.cjs"),M=require("./useDetectMobile-D6d5LpdL.cjs"),v=i.styled.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${e=>e.bgcolor||"transparent"};
@@ -11,11 +11,6 @@
     width: fit-content;
   }
 
-  ${e=>e.hasBorder===!0&&`border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-
-`}
-
   & img {
     object-fit: cover;
     max-width: ${e=>e.imgW||"22.5rem"};
@@ -34,6 +29,7 @@
     flex-direction: column;
     min-height: unset;
     max-height: unset;
+    border: none;
 
     & button {
       width: fit-content;
@@ -46,7 +42,7 @@
       min-height: ${e=>e.imgHMob||"12.1rem"};
     }
   }
-`,B=i.styled.div`
+`,H=i.styled.div`
   padding: ${e=>e.smallPadding===!0?"2rem":"4rem 5rem"};
   display: flex;
   gap: 2rem;
@@ -59,7 +55,7 @@
     padding: 0;
     flex-direction: column;
   }
-`,H=i.styled.div`
+`,B=i.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -78,4 +74,4 @@
   @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
   }
-`,_=y.forwardRef((e,d)=>{const{title:l,subtitle:m,buttonText:h,buttonLink:c,onButtonAction:g=()=>{},imageUrl:o,imagePosition:n="right",hideImageForMobile:a=!1,sectionHeight:x="12.65625rem",imageWidth:u,imageHeightMobile:p,smallPadding:b=!1,isHorizontalContent:f=!1,backgroundColor:w,hasBorder:$=!1}=e,s=M.useDetectMobile();return t.jsxs(v,{ref:d,bgcolor:w,height:x,imgW:u,imgHMob:p,hasBorder:$,children:[n!=="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o}),t.jsxs(B,{isHorizontalContent:f,smallPadding:b,children:[t.jsxs(H,{children:[t.jsx("div",{className:"header-title",children:l}),t.jsx("div",{className:"header-subitle",children:m})]}),t.jsx(j,{size:"medium",color:"neutral",type:"button",onClick:()=>g(c),children:h})]}),n==="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o})]})});module.exports=_;
+`,_=j.forwardRef((e,m)=>{const{title:d,subtitle:l,buttonText:h,buttonLink:c,onButtonAction:g=()=>{},imageUrl:o,imagePosition:n="right",hideImageForMobile:s=!1,sectionHeight:u="12.65625rem",imageWidth:x,imageHeightMobile:b,smallPadding:p=!1,isHorizontalContent:f=!1,backgroundColor:w,hasBorder:$=!1}=e,a=M.useDetectMobile();return t.jsxs(v,{ref:m,bgcolor:w,height:u,imgW:x,imgHMob:b,hasBorder:$,children:[n!=="right"&&!(s===!0&&a===!0)&&t.jsx("img",{src:o}),t.jsxs(H,{isHorizontalContent:f,smallPadding:p,children:[t.jsxs(B,{children:[t.jsx("div",{className:"header-title",children:d}),t.jsx("div",{className:"header-subitle",children:l})]}),t.jsx(y,{size:"medium",color:"neutral",type:"button",onClick:()=>g(c),children:h})]}),n==="right"&&!(s===!0&&a===!0)&&t.jsx("img",{src:o})]})});module.exports=_;

package/dist/BannerSectionSimple.js

@@ -1,10 +1,10 @@
 import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
+import { forwardRef as H } from "react";
 import { s as r } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as o } from "./consts-C1uHV4xc.js";
-import H from "./Button.js";
-import { u as M } from "./useDetectMobile-BC6EGaBc.js";
-const B = r.div`
+import M from "./Button.js";
+import { u as y } from "./useDetectMobile-BC6EGaBc.js";
+const C = r.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${(e) => e.bgcolor || "transparent"};
@@ -17,11 +17,6 @@ const B = r.div`
     width: fit-content;
   }
 
-  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-
-`}
-
   & img {
     object-fit: cover;
     max-width: ${(e) => e.imgW || "22.5rem"};
@@ -40,6 +35,7 @@ const B = r.div`
     flex-direction: column;
     min-height: unset;
     max-height: unset;
+    border: none;
 
     & button {
       width: fit-content;
@@ -52,7 +48,7 @@ const B = r.div`
       min-height: ${(e) => e.imgHMob || "12.1rem"};
     }
   }
-`, C = r.div`
+`, z = r.div`
   padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
   display: flex;
   gap: 2rem;
@@ -65,7 +61,7 @@ const B = r.div`
     padding: 0;
     flex-direction: column;
   }
-`, z = r.div`
+`, B = r.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -84,54 +80,54 @@ const B = r.div`
   @media (max-width: ${o + "px"}) {
     flex-direction: column;
   }
-`, E = y((e, l) => {
+`, E = H((e, l) => {
   const {
     title: h,
-    subtitle: g,
-    buttonText: s,
+    subtitle: s,
+    buttonText: g,
     buttonLink: c,
-    onButtonAction: x = () => {
+    onButtonAction: u = () => {
     },
     imageUrl: n,
     imagePosition: a = "right",
     hideImageForMobile: m = !1,
-    sectionHeight: p = "12.65625rem",
-    imageWidth: u,
-    imageHeightMobile: b,
-    smallPadding: f = !1,
+    sectionHeight: x = "12.65625rem",
+    imageWidth: p,
+    imageHeightMobile: f,
+    smallPadding: b = !1,
     isHorizontalContent: $ = !1,
     backgroundColor: w,
     hasBorder: v = !1
-  } = e, d = M();
+  } = e, d = y();
   return /* @__PURE__ */ t(
-    B,
+    C,
     {
       ref: l,
       bgcolor: w,
-      height: p,
-      imgW: u,
-      imgHMob: b,
+      height: x,
+      imgW: p,
+      imgHMob: f,
       hasBorder: v,
       children: [
         a !== "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: n }),
         /* @__PURE__ */ t(
-          C,
+          z,
           {
             isHorizontalContent: $,
-            smallPadding: f,
+            smallPadding: b,
             children: [
-              /* @__PURE__ */ t(z, { children: [
+              /* @__PURE__ */ t(B, { children: [
                 /* @__PURE__ */ i("div", { className: "header-title", children: h }),
-                /* @__PURE__ */ i("div", { className: "header-subitle", children: g })
+                /* @__PURE__ */ i("div", { className: "header-subitle", children: s })
               ] }),
               /* @__PURE__ */ i(
-                H,
+                M,
                 {
                   size: "medium",
                   color: "neutral",
                   type: "button",
-                  onClick: () => x(c),
-                  children: s
+                  onClick: () => u(c),
+                  children: g
                 }
               )
             ]

package/dist/GiftCardsSection.cjs

@@ -61,7 +61,7 @@
     font-weight: 600;
     font-size: 0.875rem;
     position: absolute;
-    left: -5.5rem;
+    left: -4.5rem;
     top: 1rem;
 
     -moz-transform: rotate(315deg);

package/dist/GiftCardsSection.js

@@ -69,7 +69,7 @@ const T = d.div`
     font-weight: 600;
     font-size: 0.875rem;
     position: absolute;
-    left: -5.5rem;
+    left: -4.5rem;
     top: 1rem;
 
     -moz-transform: rotate(315deg);

package/dist/MasonryGeneralCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),m=require("react"),x=require("./Button.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-NZLCh-J5.cjs"),h=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),g=require("./consts-CtNoHdBj.cjs"),f=d.styled.div`
+"use strict";const r=require("react/jsx-runtime"),g=require("react"),h=require("./Button.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-NZLCh-J5.cjs"),f=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),p=require("./consts-CtNoHdBj.cjs"),u=c.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -114,7 +114,7 @@
       }
     }
   }
-`,u=m.forwardRef(({title:t,image:e,description:a,actionText:o,onSelectCard:l=()=>{},className:n,position:s,tag:c},v)=>{const p=h.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(f,{theme:p,className:n,onClick:l,position:s,children:[r.jsx("img",{src:e,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__text",children:[c&&r.jsx("div",{className:"text__tag",children:c}),r.jsx("div",{className:"text__title",children:t}),i.isDefinedNotEmptyString(a)&&r.jsx("div",{className:"text__description",children:a}),i.isDefinedNotEmptyString(o)&&r.jsx(x,{text:o,onClick:l,className:"text__action"})]})]})})}),_=d.styled.div`
+`,_=g.forwardRef(({title:t,image:e,description:n,buttonText:a,onSelectCard:l=()=>{},className:o,position:s,selectAction:d,tag:m},y)=>{const x=f.useTheme();return r.jsx(r.Fragment,{children:r.jsxs(u,{theme:x,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(h,{text:a,onClick:()=>l(d),className:"text__action"})]})]})})}),w=c.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -138,7 +138,7 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     gap: 1.25rem;
 
     & .regular-title {
@@ -149,16 +149,17 @@
       }
     }
   }
-`,w=d.styled.div`
+`,b=c.styled.div`
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: ${t=>"repeat(12,  minmax(0, 1fr))"};
+
   grid-template-rows: 15rem 15rem;
   grid-column-gap: 1.25rem;
   grid-row-gap: 1.25rem;
   height: 30rem;
   max-height: 30rem;
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -167,4 +168,4 @@
     max-height: 100%;
     padding: 0 1rem;
   }
-`,b=m.forwardRef(({title:t,items:e,limit:a=3,onSelectCard:o=()=>{}},l)=>r.jsxs(_,{children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(w,{limit:a,children:e&&(e==null?void 0:e.map((n,s)=>r.jsx(u,{...n,onSelectCard:()=>o(n==null?void 0:n.uuid)},`landing-page-masonry-general-card__${s+1}`)))})]}));module.exports=b;
+`,v=g.forwardRef(({title:t,items:e,limit:n=3,onSelectCard:a=()=>{}},l)=>r.jsxs(w,{children:[r.jsx("div",{className:"regular-title",children:r.jsx("div",{className:"regular-title-text",children:r.jsx("span",{children:t})})}),r.jsx(b,{limit:n,children:e&&(e==null?void 0:e.map((o,s)=>r.jsx(_,{...o,onSelectCard:d=>a(d,o)},`landing-page-masonry-general-card__${s+1}`)))})]}));module.exports=v;

package/dist/MasonryGeneralCardsSection.js

@@ -1,11 +1,11 @@
-import { jsx as t, Fragment as u, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import _ from "./Button.js";
-import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { m as n, t as g, k as p } from "./utils-DtRLzzTZ.js";
-import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { M as h } from "./consts-C1uHV4xc.js";
-const b = s.div`
+import { jsx as t, Fragment as _, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import w from "./Button.js";
+import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { m as n, t as p, k as f } from "./utils-DtRLzzTZ.js";
+import { u as b } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { M as x } from "./consts-C1uHV4xc.js";
+const v = c.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -70,7 +70,7 @@ const b = s.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${g(2)}
+      ${p(2)}
     }
 
     & .text__tag {
@@ -92,7 +92,7 @@ const b = s.div`
       font-style: normal;
       font-weight: 400;
       line-height: 1.25rem;
-      ${g(2)}
+      ${p(2)}
     }
 
     & .text__action {
@@ -133,37 +133,38 @@ const b = s.div`
       }
     }
   }
-`, v = f(
+`, y = h(
   ({
     title: r,
     image: e,
-    description: a,
-    actionText: o,
+    description: i,
+    buttonText: a,
     onSelectCard: l = () => {
     },
-    className: i,
-    position: d,
-    tag: c
-  }, $) => {
-    const x = w();
-    return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ m(
-      b,
+    className: o,
+    position: m,
+    selectAction: d,
+    tag: g
+  }, N) => {
+    const u = b();
+    return /* @__PURE__ */ t(_, { children: /* @__PURE__ */ s(
+      v,
       {
-        theme: x,
-        className: i,
+        theme: u,
+        className: o,
         onClick: l,
-        position: d,
+        position: m,
         children: [
           /* @__PURE__ */ t("img", { src: e, className: "wrapper__image" }),
-          /* @__PURE__ */ m("div", { className: "wrapper__text", children: [
-            c && /* @__PURE__ */ t("div", { className: "text__tag", children: c }),
+          /* @__PURE__ */ s("div", { className: "wrapper__text", children: [
+            g && /* @__PURE__ */ t("div", { className: "text__tag", children: g }),
             /* @__PURE__ */ t("div", { className: "text__title", children: r }),
-            p(a) && /* @__PURE__ */ t("div", { className: "text__description", children: a }),
-            p(o) && /* @__PURE__ */ t(
-              _,
+            f(i) && /* @__PURE__ */ t("div", { className: "text__description", children: i }),
+            f(a) && /* @__PURE__ */ t(
+              w,
               {
-                text: o,
-                onClick: l,
+                text: a,
+                onClick: () => l(d),
                 className: "text__action"
               }
             )
@@ -172,7 +173,7 @@ const b = s.div`
       }
     ) });
   }
-), y = s.div`
+), k = c.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -196,7 +197,7 @@ const b = s.div`
     }
   }
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${x + "px"}) {
     gap: 1.25rem;
 
     & .regular-title {
@@ -207,16 +208,17 @@ const b = s.div`
       }
     }
   }
-`, k = s.div`
+`, $ = c.div`
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: ${(r) => "repeat(12,  minmax(0, 1fr))"};
+
   grid-template-rows: 15rem 15rem;
   grid-column-gap: 1.25rem;
   grid-row-gap: 1.25rem;
   height: 30rem;
   max-height: 30rem;
 
-  @media (max-width: ${h + "px"}) {
+  @media (max-width: ${x + "px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -225,20 +227,20 @@ const b = s.div`
     max-height: 100%;
     padding: 0 1rem;
   }
-`, M = f(
-  ({ title: r, items: e, limit: a = 3, onSelectCard: o = () => {
-  } }, l) => /* @__PURE__ */ m(y, { children: [
+`, I = h(
+  ({ title: r, items: e, limit: i = 3, onSelectCard: a = () => {
+  } }, l) => /* @__PURE__ */ s(k, { children: [
     /* @__PURE__ */ t("div", { className: "regular-title", children: /* @__PURE__ */ t("div", { className: "regular-title-text", children: /* @__PURE__ */ t("span", { children: r }) }) }),
-    /* @__PURE__ */ t(k, { limit: a, children: e && (e == null ? void 0 : e.map((i, d) => /* @__PURE__ */ t(
-      v,
+    /* @__PURE__ */ t($, { limit: i, children: e && (e == null ? void 0 : e.map((o, m) => /* @__PURE__ */ t(
+      y,
       {
-        ...i,
-        onSelectCard: () => o(i == null ? void 0 : i.uuid)
+        ...o,
+        onSelectCard: (d) => a(d, o)
       },
-      `landing-page-masonry-general-card__${d + 1}`
+      `landing-page-masonry-general-card__${m + 1}`
     ))) })
   ] })
 );
 export {
-  M as default
+  I as default
 };

package/dist/OverlayGeneralCardsSection.cjs

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

package/dist/OverlayGeneralCardsSection.js

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

package/package.json

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