@lanaco/lnc-react-ui 4.0.39 → 4.0.40

package/dist/MasonryGeneralCardsSection.cjs

@@ -5,17 +5,26 @@
   border-radius: 0.75rem;
   position: relative;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
 
   grid-column: ${t=>{var e;return((e=t.position)==null?void 0:e.columnStart)||"1"}} /
     ${t=>{var e;return((e=t.position)==null?void 0:e.columnEnd)||"6"}};
   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(
+    178deg,
+    rgba(0, 0, 0, 0) 1.5%,
+    rgba(0, 0, 0, 0.16) 8.95%,
+    #000 98.39%
+  );
+
   & .wrapper__image {
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: 0.75rem;
+    mix-blend-mode: multiply;
   }
 
   & .wrapper__image--skeleton {
@@ -36,6 +45,7 @@
     gap: 0.75rem;
 
     & .text__title {
+      transition: var(--transiton, all 0.2s ease);
       color: var(--white, #ffffff);
       font-size: 1rem;
       font-style: normal;
@@ -94,7 +104,17 @@
       width: 9rem;
     }
   }
-`,u=m.forwardRef(({title:t,image:e,description:a,actionText:o,onSelectCard:l=()=>{},className:n,position:s,tag:c},y)=>{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.newStyled.div`
+
+  &:hover {
+    cursor: pointer;
+
+    & .wrapper__text {
+      & .text__title {
+        color: var(--primary-500, #e87722);
+      }
+    }
+  }
+`,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.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

package/dist/MasonryGeneralCardsSection.js

@@ -12,6 +12,7 @@ const b = s.div`
   border-radius: 0.75rem;
   position: relative;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
 
   grid-column: ${(r) => {
   var e;
@@ -30,11 +31,19 @@ const b = s.div`
   return ((e = r.position) == null ? void 0 : e.rowEnd) || "1";
 }};
 
+  background: 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%;
     width: 100%;
     object-fit: cover;
     border-radius: 0.75rem;
+    mix-blend-mode: multiply;
   }
 
   & .wrapper__image--skeleton {
@@ -55,6 +64,7 @@ const b = s.div`
     gap: 0.75rem;
 
     & .text__title {
+      transition: var(--transiton, all 0.2s ease);
       color: var(--white, #ffffff);
       font-size: 1rem;
       font-style: normal;
@@ -113,6 +123,16 @@ const b = s.div`
       width: 9rem;
     }
   }
+
+  &:hover {
+    cursor: pointer;
+
+    & .wrapper__text {
+      & .text__title {
+        color: var(--primary-500, #e87722);
+      }
+    }
+  }
 `, v = f(
   ({
     title: r,

package/dist/OverlayGeneralCardsSection.cjs

@@ -1,127 +1,83 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("react"),x=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),u=require("./style-BR3tIhP1.cjs"),m=require("./ThemeProvider.cjs"),i=require("./utils-NZLCh-J5.cjs"),g=require("./Button.cjs"),f=x.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),u=require("./consts-CtNoHdBj.cjs"),p=require("./style-DN1qT8BE.cjs"),d=require("./utils-NZLCh-J5.cjs"),f=require("./Button.cjs"),m=require("./ThemeProvider.cjs"),j=x.newStyled.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: ${p.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
-`,h=x.newStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 0.75rem;
+`,g=x.newStyled.div`
+  width: 100%;
+  overflow: hidden;
   position: relative;
-  max-height: 28.75rem;
 
-  & .wrapper__overlay {
-    position: relative;
+  border-radius: 0.75rem;
+  background: ${n=>n==null?void 0:n.overlay};
+  cursor: pointer;
 
-    &::after {
-      content: "";
-      position: absolute;
-      border-radius: 0.75rem;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 99%;
-      max-height: 28.75rem;
-      background: ${t=>t==null?void 0:t.overlay};
-    }
+  & .content-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 2.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
   }
 
-  & .wrapper__image {
-    border-radius: 0.75rem;
-  }
+  & button {
+    width: fit-content;
+    color: var(--gray-950, #14161a);
 
-  & .wrapper__image--skeleton {
-    width: 100%;
-    border-radius: 0.75rem;
-    background-color: ${i.linearGradientAnimation("-90deg")};
+    &:hover {
+      color: var(--gray-700, #4e555f);
+    }
   }
 
-  & .wrapper__text {
+  & .content-text {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    & .text__title {
-      color: var(--white);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-      ${i.truncateTextInRows(2)}
-    }
+    gap: 1rem;
+    color: var(--white, #fff);
+    font-size: 1rem;
+    font-weight: 500;
 
-    & .text__description {
-      color: var(--white);
-      font-size: 1.375rem;
-      font-style: normal;
+    & .content-text-title {
       font-weight: 600;
-      line-height: 1.75rem;
-      ${i.truncateTextInRows(2)}
-    }
-
-    & .text__title--skeleton {
-      background-color: ${i.linearGradientAnimation("-90deg")};
-      height: 1rem;
-      width: 9rem;
-    }
-
-    & .text__description--skeleton {
-      background-color: ${i.linearGradientAnimation("-90deg")};
-      height: 1rem;
-      width: 12rem;
+      ${d.truncateTextInRows(2)}
     }
   }
 
-  & .text__action {
-    background: var(--white);
-    color: var(--black);
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-
-    &:hover {
-      background: var(--primary-500, #f59e0b);
-      color: var(--white);
-    }
+  & img {
+    aspect-ratio: 1 / 1;
+    mix-blend-mode: multiply;
+    width: 100%;
+    object-fit: cover;
   }
 
-  & .text__action--skeleton {
-    background-color: ${i.linearGradientAnimation("-90deg")};
-    height: 2rem;
-    width: 9rem;
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
+  & .img-skeleton {
+    background-color: ${d.linearGradientAnimation("-90deg")};
+    min-height: 28.75rem;
   }
 
-  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
-    max-height: 100%;
-
-    & .wrapper__overlay {
-      &::after {
-        max-height: 100%;
-      }
-    }
-
-    & .wrapper__text {
-      top: 1rem;
-      left: 1rem;
+  &:hover {
+    & .content-text {
+      color: var(--primary-500, #f59e0b);
     }
+  }
 
-    & .text__action {
-      bottom: 2rem;
-      left: 2rem;
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    & img,
+    .img.skeleton {
+      aspect-ratio: unset;
+      min-height: 28.75rem;
+      max-height: 28.75rem;
     }
   }
-`,v=l.forwardRef(({},t)=>{const{theme:a}=m.useTheme();return e.jsxs(h,{theme:a,children:[e.jsx("div",{className:"wrapper__image--skeleton"}),e.jsxs("div",{className:"wrapper__text",children:[e.jsx("div",{className:"text__title--skeleton"}),e.jsx("div",{className:"text__description--skeleton"})]}),e.jsx("div",{className:"text__action--skeleton"})]})}),w=({limit:t=2,isLoading:a=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:t},(s,o)=>e.jsx(v,{isLoading:a},`${n}-skeleton-product-card-${o}`))}),j=({children:t,fallbackComponent:a=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:s,keyPrefix:o})=>e.jsx(l.Suspense,{fallbackComponent:a,children:n===!0?e.jsx(w,{isLoading:n,limit:s,keyPrefix:o}):t}),y=l.forwardRef(({title:t,image:a,overlay:n,description:s,actionText:o,actionLink:_,handleClick:c=()=>{}},r)=>{const{theme:d}=m.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(h,{theme:d,overlay:n,onClick:c,children:[e.jsx("div",{className:"wrapper__overlay",children:e.jsx("img",{src:a,className:"wrapper__image"})}),e.jsxs("div",{className:"wrapper__text",children:[e.jsx("div",{className:"text__title",children:t}),e.jsx("div",{className:"text__description",children:s})]}),e.jsx(g,{text:o,onClick:c,className:"text__action"})]})})}),k=l.memo(y),b=l.forwardRef(({title:t,items:a,limit:n=2,onSelectCard:s=()=>{},isLoading:o=!1},_)=>{const c=l.useMemo(()=>e.jsx(e.Fragment,{children:a&&(a==null?void 0:a.map((r,d)=>e.jsx(k,{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}`)))}),[a]);return e.jsxs(u.RegulatTitleSectionWrapper,{children:[e.jsx("div",{className:"regular-title center",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:t})})}),e.jsx(f,{limit:n,children:e.jsx(j,{isLoading:o,limit:n,keyPrefix:"explore-landing",children:c})})]})});module.exports=b;
+`,v=c.forwardRef(({},n)=>e.jsx(g,{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},(a,s)=>e.jsx(v,{isLoading:t},`${o}-skeleton-product-card-${s}`))}),w=({children:n,fallbackComponent:t=e.jsx(e.Fragment,{}),isLoading:o=!1,limit:a,keyPrefix:s})=>e.jsx(c.Suspense,{fallbackComponent:t,children:o===!0?e.jsx(y,{isLoading:o,limit:a,keyPrefix:s}):n}),k=c.forwardRef(({title:n,image:t,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: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})]}),e.jsx(f,{text:s,onClick:i,className:"text__action",size:"medium",color:"gray"})]})]})})}),_=c.memo(k),b=c.forwardRef(({title:n,items:t,limit:o=2,onSelectCard:a=()=>{},isLoading:s=!1},i)=>{const l=c.useMemo(()=>e.jsx(e.Fragment,{children:t&&(t==null?void 0:t.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}`)))}),[t,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:n})})}),e.jsx(j,{limit:o,children:e.jsx(w,{isLoading:s,limit:o,keyPrefix:"explore-landing",children:l})})]})});module.exports=b;

package/dist/OverlayGeneralCardsSection.js

@@ -1,213 +1,164 @@
-import { jsxs as i, jsx as e, Fragment as c } from "react/jsx-runtime";
-import { forwardRef as m, Suspense as v, memo as w, useMemo as k } from "react";
-import { n as _ } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as g } from "./consts-C1uHV4xc.js";
-import { R as y } from "./style-6tSw9aqK.js";
-import { useTheme as f } from "./ThemeProvider.js";
-import { m as d, t as h } from "./utils-DtRLzzTZ.js";
-import b from "./Button.js";
-const $ = _.div`
+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 { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as h } from "./consts-C1uHV4xc.js";
+import { R as y } from "./style-CiePxaJ_.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`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
   gap: 1.25rem;
   justify-items: center;
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${h + "px"}) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
-`, u = _.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 0.75rem;
+`, m = g.div`
+  width: 100%;
+  overflow: hidden;
   position: relative;
-  max-height: 28.75rem;
 
-  & .wrapper__overlay {
-    position: relative;
+  border-radius: 0.75rem;
+  background: ${(t) => t == null ? void 0 : t.overlay};
+  cursor: pointer;
 
-    &::after {
-      content: "";
-      position: absolute;
-      border-radius: 0.75rem;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 99%;
-      max-height: 28.75rem;
-      background: ${(t) => t == null ? void 0 : t.overlay};
-    }
+  & .content-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 2.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
   }
 
-  & .wrapper__image {
-    border-radius: 0.75rem;
-  }
+  & button {
+    width: fit-content;
+    color: var(--gray-950, #14161a);
 
-  & .wrapper__image--skeleton {
-    width: 100%;
-    border-radius: 0.75rem;
-    background-color: ${d("-90deg")};
+    &:hover {
+      color: var(--gray-700, #4e555f);
+    }
   }
 
-  & .wrapper__text {
+  & .content-text {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    & .text__title {
-      color: var(--white);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-      ${h(2)}
-    }
+    gap: 1rem;
+    color: var(--white, #fff);
+    font-size: 1rem;
+    font-weight: 500;
 
-    & .text__description {
-      color: var(--white);
-      font-size: 1.375rem;
-      font-style: normal;
+    & .content-text-title {
       font-weight: 600;
-      line-height: 1.75rem;
-      ${h(2)}
-    }
-
-    & .text__title--skeleton {
-      background-color: ${d("-90deg")};
-      height: 1rem;
-      width: 9rem;
-    }
-
-    & .text__description--skeleton {
-      background-color: ${d("-90deg")};
-      height: 1rem;
-      width: 12rem;
+      ${w(2)}
     }
   }
 
-  & .text__action {
-    background: var(--white);
-    color: var(--black);
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-
-    &:hover {
-      background: var(--primary-500, #f59e0b);
-      color: var(--white);
-    }
+  & img {
+    aspect-ratio: 1 / 1;
+    mix-blend-mode: multiply;
+    width: 100%;
+    object-fit: cover;
   }
 
-  & .text__action--skeleton {
-    background-color: ${d("-90deg")};
-    height: 2rem;
-    width: 9rem;
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
+  & .img-skeleton {
+    background-color: ${k("-90deg")};
+    min-height: 28.75rem;
   }
 
-  @media (max-width: ${g + "px"}) {
-    max-height: 100%;
-
-    & .wrapper__overlay {
-      &::after {
-        max-height: 100%;
-      }
-    }
-
-    & .wrapper__text {
-      top: 1rem;
-      left: 1rem;
+  &:hover {
+    & .content-text {
+      color: var(--primary-500, #f59e0b);
     }
+  }
 
-    & .text__action {
-      bottom: 2rem;
-      left: 2rem;
+  @media (max-width: ${h + "px"}) {
+    & img,
+    .img.skeleton {
+      aspect-ratio: unset;
+      min-height: 28.75rem;
+      max-height: 28.75rem;
     }
   }
-`, N = m(({}, t) => {
-  const { theme: a } = f();
-  return /* @__PURE__ */ i(u, { theme: a, children: [
-    /* @__PURE__ */ e("div", { className: "wrapper__image--skeleton" }),
-    /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
-      /* @__PURE__ */ e("div", { className: "text__title--skeleton" }),
-      /* @__PURE__ */ e("div", { className: "text__description--skeleton" })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "text__action--skeleton" })
-  ] });
-}), S = ({ limit: t = 2, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(c, { children: Array.from({ length: t }, (n, l) => /* @__PURE__ */ e(
-  N,
+`, P = p(({}, t) => /* @__PURE__ */ r(m, { ref: t, children: /* @__PURE__ */ r("div", { className: "img-skeleton" }) })), S = ({ limit: t = 2, isLoading: n = !1, keyPrefix: o }) => /* @__PURE__ */ r(d, { children: Array.from({ length: t }, (a, l) => /* @__PURE__ */ r(
+  P,
   {
-    isLoading: a
+    isLoading: n
   },
   `${o}-skeleton-product-card-${l}`
-)) }), C = ({
+)) }), _ = ({
   children: t,
-  fallbackComponent: a = /* @__PURE__ */ e(c, {}),
+  fallbackComponent: n = /* @__PURE__ */ r(d, {}),
   isLoading: o = !1,
-  limit: n,
+  limit: a,
   keyPrefix: l
-}) => /* @__PURE__ */ e(v, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
+}) => /* @__PURE__ */ r(f, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
   S,
   {
     isLoading: o,
-    limit: n,
+    limit: a,
     keyPrefix: l
   }
-) : t }), P = m(
-  ({
-    title: t,
-    image: a,
-    overlay: o,
-    description: n,
-    actionText: l,
-    actionLink: x,
-    handleClick: s = () => {
-    }
-  }, r) => {
-    const { theme: p } = f();
-    return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(u, { theme: p, overlay: o, onClick: s, children: [
-      /* @__PURE__ */ e("div", { className: "wrapper__overlay", children: /* @__PURE__ */ e("img", { src: a, className: "wrapper__image" }) }),
-      /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
-        /* @__PURE__ */ e("div", { className: "text__title", children: t }),
-        /* @__PURE__ */ e("div", { className: "text__description", children: n })
-      ] }),
-      /* @__PURE__ */ e(
-        b,
-        {
-          text: l,
-          onClick: s,
-          className: "text__action"
-        }
-      )
-    ] }) });
+) : t }), C = 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,
+      {
+        ref: s,
+        theme: e,
+        overlay: o,
+        onClick: i,
+        children: [
+          /* @__PURE__ */ r("img", { src: n }),
+          /* @__PURE__ */ c("div", { className: "content-wrapper", children: [
+            /* @__PURE__ */ c("div", { className: "content-text", children: [
+              /* @__PURE__ */ r("div", { children: t }),
+              /* @__PURE__ */ r("div", { className: "content-text-title", children: a })
+            ] }),
+            /* @__PURE__ */ r(
+              $,
+              {
+                text: l,
+                onClick: i,
+                className: "text__action",
+                size: "medium",
+                color: "gray"
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
   }
-), G = w(P), W = m(
-  ({ title: t, items: a, limit: o = 2, onSelectCard: n = () => {
-  }, isLoading: l = !1 }, x) => {
-    const s = k(() => /* @__PURE__ */ e(c, { children: a && (a == null ? void 0 : a.map((r, p) => /* @__PURE__ */ e(
-      G,
+), j = x(C), 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,
       {
-        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: () => n(r == null ? void 0 : r.uuid)
+        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)
       },
-      `landing-page-overlay-general-card__${p + 1}`
-    ))) }), [a]);
-    return /* @__PURE__ */ i(y, { children: [
-      /* @__PURE__ */ e("div", { className: "regular-title center", children: /* @__PURE__ */ e("div", { className: "regular-title-text", children: /* @__PURE__ */ e("span", { children: t }) }) }),
-      /* @__PURE__ */ e($, { limit: o, children: /* @__PURE__ */ e(
-        C,
+      `landing-page-overlay-general-card__${u + 1}`
+    ))) }), [n, a]);
+    return /* @__PURE__ */ c(y, { ref: i, 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(
+        _,
         {
           isLoading: l,
           limit: o,
@@ -219,5 +170,5 @@ const $ = _.div`
   }
 );
 export {
-  W as default
+  A as default
 };