@lanaco/lnc-react-ui 4.0.38 → 4.0.40

package/dist/OverlayGeneralCardsSection.js

@@ -1,183 +1,174 @@
-import { jsx as r, Fragment as _, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import f from "./Button.js";
-import { useTheme as x } from "./ThemeProvider.js";
-import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { m as i, t as s } from "./utils-DtRLzzTZ.js";
+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 u } from "./style-6tSw9aqK.js";
-const v = m.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 0.75rem;
+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: ${h + "px"}) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`, 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: ${i("-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;
-      ${s(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;
-      ${s(2)}
-    }
-
-    & .text__title--skeleton {
-      background-color: ${i("-90deg")};
-      height: 1rem;
-      width: 9rem;
-    }
-
-    & .text__description--skeleton {
-      background-color: ${i("-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: ${i("-90deg")};
-    height: 2rem;
-    width: 9rem;
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
+  & .img-skeleton {
+    background-color: ${k("-90deg")};
+    min-height: 28.75rem;
   }
 
-  @media (max-width: ${h + "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;
     }
   }
-`, w = p(
-  ({
-    title: t,
-    image: a,
-    overlay: l,
-    description: n,
-    actionText: c,
-    actionLink: e,
-    handleClick: o = () => {
-    }
-  }, y) => {
-    const { theme: g } = x();
-    return /* @__PURE__ */ r(_, { children: /* @__PURE__ */ d(v, { theme: g, overlay: l, onClick: o, children: [
-      /* @__PURE__ */ r("div", { className: "wrapper__overlay", children: /* @__PURE__ */ r("img", { src: a, className: "wrapper__image" }) }),
-      /* @__PURE__ */ d("div", { className: "wrapper__text", children: [
-        /* @__PURE__ */ r("div", { className: "text__title", children: t }),
-        /* @__PURE__ */ r("div", { className: "text__description", children: n })
-      ] }),
-      /* @__PURE__ */ r(
-        f,
-        {
-          text: c,
-          onClick: o,
-          className: "text__action"
-        }
-      )
-    ] }) });
+`, 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: n
+  },
+  `${o}-skeleton-product-card-${l}`
+)) }), _ = ({
+  children: t,
+  fallbackComponent: n = /* @__PURE__ */ r(d, {}),
+  isLoading: o = !1,
+  limit: a,
+  keyPrefix: l
+}) => /* @__PURE__ */ r(f, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(
+  S,
+  {
+    isLoading: o,
+    limit: a,
+    keyPrefix: l
   }
-), b = m.div`
-  display: grid;
-  grid-template-columns: ${(t) => `repeat(${t.limit}, 1fr)`};
-  gap: 1.25rem;
-  justify-items: center;
-
-  @media (max-width: ${h + "px"}) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+) : 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"
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
   }
-`, j = p(
-  ({ title: t, items: a, limit: l = 2, onSelectCard: n = () => {
-  } }, c) => /* @__PURE__ */ d(u, { children: [
-    /* @__PURE__ */ r("div", { className: "regular-title center", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: t }) }) }),
-    /* @__PURE__ */ r(b, { limit: l, children: a && (a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ r(
-      w,
+), 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: 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: () => n(e == null ? void 0 : e.uuid)
+        handleClick: () => a(e == null ? void 0 : e.uuid)
       },
-      `landing-page-overlay-general-card__${o + 1}`
-    ))) })
-  ] })
+      `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,
+          keyPrefix: "explore-landing",
+          children: s
+        }
+      ) })
+    ] });
+  }
 );
 export {
-  j as default
+  A as default
 };

package/dist/ProductsWithBannerSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),g=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),f=require("./style-BR3tIhP1.cjs"),a=require("./utils-NZLCh-J5.cjs"),j=c.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),k=require("./style-DN1qT8BE.cjs"),d=require("./utils-NZLCh-J5.cjs"),y=u.newStyled.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -15,12 +15,12 @@
     height: 100%;
     object-fit: cover;
   }
-`,v=c.newStyled.div`
+`,S=u.newStyled.div`
   display: grid;
-  grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -39,7 +39,7 @@
       /* Safari and Chrome */
     }
   }
-`,y=c.newStyled.div`
+`,f=u.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -55,7 +55,7 @@
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${a.truncateTextInRows(2)}
+     ${d.truncateTextInRows(2)}
   }
 
   &:hover {
@@ -65,18 +65,18 @@
   }
 
   & .skeleton-img {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -87,4 +87,4 @@
       object-fit: cover;
     }
   }
-`,h=p.forwardRef((o,m)=>{const{uuid:d,title:r,image:n,sellerUuid:u,onSelectCard:t=()=>{},imageComponent:s}=o;return i.jsxs(y,{className:"product-card",onClick:t,children:[a.isDefined(s)?s:i.jsx("img",{src:n}),i.jsx("div",{className:"card-title",children:r})]})}),S=p.forwardRef((o,m)=>{const{icon:d,items:r,limit:n=4,bannerImage:u,onSelectCard:t=()=>{},title:s="Season inspiration"}=o,w=b.useDetectMobile();return i.jsxs(f.RegulatTitleSectionWrapper,{ref:m,children:[i.jsx("div",{className:"regular-title",children:i.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&i.jsx("i",{className:d}),i.jsx("span",{children:s})]})}),i.jsx(j,{className:"products-banner",children:i.jsx("img",{src:u})}),i.jsx(v,{limit:n,children:w===!0?r==null?void 0:r.map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l)):r==null?void 0:r.slice(0,n).map((e,l)=>i.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>t==null?void 0:t(e==null?void 0:e.uuid)},l))})]})});module.exports=S;
+`,P=l.forwardRef((t,a)=>{const{uuid:o,title:i,image:s,sellerUuid:g,onSelectCard:n=()=>{},imageComponent:c}=t;return r.jsxs(f,{className:"product-card",onClick:n,children:[d.isDefined(c)?c:r.jsx("img",{src:s}),r.jsx("div",{className:"card-title",children:i})]})}),C=l.forwardRef(({},t)=>r.jsxs(f,{className:"product-card",children:[r.jsx("img",{className:"skeleton-img"}),r.jsx("div",{className:"skeleton-title"})]})),N=({limit:t=4,isLoading:a=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,s)=>r.jsx(C,{isLoading:a},`${o}-skeleton-product-card-${s}`))}),$=({children:t,fallbackComponent:a=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:i,keyPrefix:s})=>r.jsx(l.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(N,{isLoading:o,limit:i,keyPrefix:s}):t}),h=l.memo(P),q=l.forwardRef((t,a)=>{const{icon:o,items:i,limit:s=4,imageUrl:g,onSelectCard:n=()=>{},title:c="Season inspiration",isLoading:w=!1}=t,j=v.useDetectMobile(),b=l.useMemo(()=>r.jsx(r.Fragment,{children:j===!0?i==null?void 0:i.map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m)):i==null?void 0:i.slice(0,s).map((e,m)=>r.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>n==null?void 0:n(e==null?void 0:e.uuid)},m))}),[i]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[r.jsx("div",{className:"regular-title",children:r.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(o)&&r.jsx("i",{className:o}),r.jsx("span",{children:c})]})}),r.jsx(y,{className:"products-banner",children:r.jsx("img",{src:g})}),r.jsx(S,{limit:s,children:r.jsx($,{isLoading:w,limit:s,keyPrefix:"explore-landing",children:b})})]})});module.exports=q;

package/dist/ProductsWithBannerSection.js

@@ -1,11 +1,11 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { n as s } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as f } from "./consts-C1uHV4xc.js";
-import { u as w } from "./useDetectMobile-BC6EGaBc.js";
-import { R as v } from "./style-6tSw9aqK.js";
-import { t as k, m as h, l as y, k as N } from "./utils-DtRLzzTZ.js";
-const S = s.div`
+import { jsxs as s, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as S, memo as C, useMemo as N } from "react";
+import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as b } from "./consts-C1uHV4xc.js";
+import { u as P } from "./useDetectMobile-BC6EGaBc.js";
+import { R as $ } from "./style-CiePxaJ_.js";
+import { t as M, m as g, l as U, k as j } from "./utils-DtRLzzTZ.js";
+const E = p.div`
   width: 100%;
   height: 22.5rem;
   min-height: 22.5rem;
@@ -22,12 +22,12 @@ const S = s.div`
     height: 100%;
     object-fit: cover;
   }
-`, $ = s.div`
+`, W = p.div`
   display: grid;
-  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -46,7 +46,7 @@ const S = s.div`
       /* Safari and Chrome */
     }
   }
-`, j = s.div`
+`, w = p.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -62,7 +62,7 @@ const S = s.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-     ${k(2)}
+     ${M(2)}
   }
 
   &:hover {
@@ -72,18 +72,18 @@ const S = s.div`
   }
 
   & .skeleton-img {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
   }
 
   & .skeleton-title {
-    background-color: ${h("-90deg")};
+    background-color: ${g("-90deg")};
     width: 100%;
     height: 1.25rem;
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -94,59 +94,90 @@ const S = s.div`
       object-fit: cover;
     }
   }
-`, u = g((a, c) => {
+`, B = u((t, n) => {
   const {
-    uuid: l,
+    uuid: a,
     title: i,
     image: o,
-    sellerUuid: p,
-    onSelectCard: t = () => {
+    sellerUuid: h,
+    onSelectCard: l = () => {
     },
     imageComponent: d
-  } = a;
-  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
-    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
+  } = t;
+  return /* @__PURE__ */ s(w, { className: "product-card", onClick: l, children: [
+    U(d) ? d : /* @__PURE__ */ r("img", { src: o }),
     /* @__PURE__ */ r("div", { className: "card-title", children: i })
   ] });
-}), P = g((a, c) => {
+}), I = u(({}, t) => /* @__PURE__ */ s(w, { className: "product-card", children: [
+  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ r("div", { className: "skeleton-title" })
+] })), R = ({ limit: t = 4, isLoading: n = !1, keyPrefix: a }) => /* @__PURE__ */ r(c, { children: Array.from({ length: t }, (i, o) => /* @__PURE__ */ r(
+  I,
+  {
+    isLoading: n
+  },
+  `${a}-skeleton-product-card-${o}`
+)) }), z = ({
+  children: t,
+  fallbackComponent: n = /* @__PURE__ */ r(c, {}),
+  isLoading: a = !1,
+  limit: i,
+  keyPrefix: o
+}) => /* @__PURE__ */ r(S, { fallbackComponent: n, children: a === !0 ? /* @__PURE__ */ r(
+  R,
+  {
+    isLoading: a,
+    limit: i,
+    keyPrefix: o
+  }
+) : t }), f = C(B), O = u((t, n) => {
   const {
-    icon: l,
+    icon: a,
     items: i,
     limit: o = 4,
-    bannerImage: p,
-    onSelectCard: t = () => {
+    imageUrl: h,
+    onSelectCard: l = () => {
+    },
+    title: d = "Season inspiration",
+    isLoading: k = !1
+  } = t, v = P(), y = N(() => /* @__PURE__ */ r(c, { children: v === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => l == null ? void 0 : l(e == null ? void 0 : e.uuid)
     },
-    title: d = "Season inspiration"
-  } = a, b = w();
-  return /* @__PURE__ */ m(v, { ref: c, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
-      N(l) && /* @__PURE__ */ r("i", { className: l }),
+    m
+  )) : i == null ? void 0 : i.slice(0, o).map((e, m) => /* @__PURE__ */ r(
+    f,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      sellerUuid: e == null ? void 0 : e.sellerUuid,
+      uuid: e == null ? void 0 : e.uuid,
+      onSelectCard: () => l == null ? void 0 : l(e == null ? void 0 : e.uuid)
+    },
+    m
+  )) }), [i]);
+  return /* @__PURE__ */ s($, { ref: n, children: [
+    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
+      j(a) && /* @__PURE__ */ r("i", { className: a }),
       /* @__PURE__ */ r("span", { children: d })
     ] }) }),
-    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
-    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-      u,
+    /* @__PURE__ */ r(E, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: h }) }),
+    /* @__PURE__ */ r(W, { limit: o, children: /* @__PURE__ */ r(
+      z,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) })
+        isLoading: k,
+        limit: o,
+        keyPrefix: "explore-landing",
+        children: y
+      }
+    ) })
   ] });
 });
 export {
-  P as default
+  O as default
 };