@lanaco/lnc-react-ui 4.0.37 → 4.0.39

package/dist/BlogsSectionDetailed.cjs

@@ -1,12 +1,12 @@
-"use strict";const t=require("react/jsx-runtime"),f=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),b=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-NZLCh-J5.cjs"),w=require("./style-BR3tIhP1.cjs"),k=require("./Button.cjs"),N=p.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),c=require("react"),w=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),v=require("./consts-CtNoHdBj.cjs"),S=require("./useDetectMobile-D6d5LpdL.cjs"),d=require("./utils-NZLCh-J5.cjs"),y=require("./style-BR3tIhP1.cjs"),C=require("./Button.cjs"),D=w.newStyled.div`
   display: grid;
-  grid-template-columns: ${s=>`repeat(${s.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,C=p.newStyled.div`
+`,k=w.newStyled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -37,7 +37,7 @@
     width: 100%;
     max-height: 11.0625rem;
     min-height: 11.0625rem;
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
   }
 
   & .tags-wr {
@@ -47,9 +47,9 @@
     padding: 0 1rem 1rem 1rem;
   }
 
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
   }
-`,S=p.newStyled.div`
+`,N=w.newStyled.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -63,13 +63,13 @@
   }
 
   & .info-wr-skeleton {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
     height: 1rem;
     width: 100%;
   }
 
   & .skeleton-title {
-    background-color: ${a.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
     height: 1.5rem;
     width: 70%;
   }
@@ -79,7 +79,7 @@
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${a.truncateTextInRows(2)}
+    ${d.truncateTextInRows(2)}
   }
 
   & .info-wr {
@@ -108,4 +108,4 @@
     align-items: center;
     gap: 1rem;
   }
-`,h=f.forwardRef((s,j)=>{const{title:d,image:c,text:g,numberOfLikes:r,numberOfComments:u,readDuration:l,datePublished:m,tags:o,onCardClick:e,timeToReadText:i="read"}=s;return t.jsxs(C,{className:"blog-card",onClick:e,children:[t.jsx("img",{src:c}),t.jsxs(S,{children:[t.jsxs("div",{className:"info-wr",children:[t.jsxs("div",{className:"info-wr-1",children:[t.jsx("span",{children:m}),t.jsx("span",{className:"small-dot",children:"●"}),l&&i?`${l} ${i}`:"N/A"]}),t.jsxs("div",{className:"info-wr-2",children:[t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-thumbs-up--filled"}),t.jsx("span",{children:r})]}),t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-messages-filled"}),t.jsx("span",{children:u})]})]})]}),t.jsx("div",{className:"text-wr-title",children:d}),t.jsx("div",{className:"text-wr",children:g})]}),t.jsx("div",{className:"tags-wr",children:o==null?void 0:o.map((n,y)=>t.jsx(w.BlogTag,{color:n==null?void 0:n.color,children:n==null?void 0:n.name},y))})]})}),O=f.forwardRef((s,j)=>{const{icon:d,title:c,onButtonAction:g,items:r,buttonText:u,limit:l=3,onSelectCard:m=()=>{}}=s,o=v.useDetectMobile();return t.jsxs(w.RegulatTitleSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&t.jsx("i",{className:d}),t.jsx("span",{children:c})]}),a.isDefinedNotEmptyString(onSectionClick)&&t.jsx(k,{type:"button",btnType:"tinted",color:"gray",onClick:()=>g(buttonLink),borderRadius:"curved",children:u})]}),t.jsx(N,{limit:l,children:o===!0?r==null?void 0:r.map((e,i)=>t.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,datePublished:e==null?void 0:e.date,readDuration:e==null?void 0:e.readDuration,tags:e==null?void 0:e.tags,onCardClick:()=>m(e==null?void 0:e.uuid)},i)):r==null?void 0:r.slice(0,l).map((e,i)=>t.jsx(h,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,tags:e==null?void 0:e.tags,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,datePublished:e==null?void 0:e.date,readDuration:e==null?void 0:e.readDuration,onCardClick:()=>m(e==null?void 0:e.uuid)},i))})]})});module.exports=O;
+`,O=c.forwardRef((t,m)=>{const{title:i,image:l,text:a,numberOfLikes:s,numberOfComments:f,readDuration:o,datePublished:u,tags:g,onCardClick:h,timeToReadText:p="read"}=t;return r.jsxs(k,{className:"blog-card",onClick:h,children:[r.jsx("img",{src:l}),r.jsxs(N,{children:[r.jsxs("div",{className:"info-wr",children:[r.jsxs("div",{className:"info-wr-1",children:[r.jsx("span",{children:u}),r.jsx("span",{className:"small-dot",children:"●"}),o&&p?`${o} ${p}`:"N/A"]}),r.jsxs("div",{className:"info-wr-2",children:[r.jsxs("span",{className:"info-wr-1",children:[r.jsx("i",{className:"mng mng-lnc-thumbs-up--filled"}),r.jsx("span",{children:s})]}),r.jsxs("span",{className:"info-wr-1",children:[r.jsx("i",{className:"mng mng-lnc-messages-filled"}),r.jsx("span",{children:f})]})]})]}),r.jsx("div",{className:"text-wr-title",children:i}),r.jsx("div",{className:"text-wr",children:a})]}),r.jsx("div",{className:"tags-wr",children:g==null?void 0:g.map((n,e)=>r.jsx(y.BlogTag,{color:n==null?void 0:n.color,children:n==null?void 0:n.name},e))})]})}),$=c.forwardRef(({},t)=>r.jsxs(k,{className:"blog-card",children:[r.jsx("div",{className:"skeleton-img"}),r.jsxs(N,{children:[r.jsx("div",{className:"info-wr"}),r.jsx("div",{className:"skeleton-title"}),r.jsx("div",{className:"info-wr-skeleton"})]})]})),B=({limit:t=3,isLoading:m=!1,keyPrefix:i})=>r.jsx(r.Fragment,{children:Array.from({length:t},(l,a)=>r.jsx($,{isLoading:m},`${i}-skeleton-product-card-${a}`))}),P=({children:t,fallbackComponent:m=r.jsx(r.Fragment,{}),isLoading:i=!1,limit:l,keyPrefix:a})=>r.jsx(c.Suspense,{fallbackComponent:m,children:i===!0?r.jsx(B,{isLoading:i,limit:l,keyPrefix:a}):t}),b=c.memo(O),R=c.forwardRef((t,m)=>{const{icon:i,title:l,onButtonAction:a,items:s,buttonText:f,limit:o=3,onSelectCard:u=()=>{},isLoading:g=!1,onSectionClick:h=()=>{}}=t,p=S.useDetectMobile(),n=c.useMemo(()=>r.jsx(r.Fragment,{children:p===!0?s==null?void 0:s.map((e,j)=>r.jsx(b,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,datePublished:e==null?void 0:e.date,readDuration:e==null?void 0:e.readDuration,tags:e==null?void 0:e.tags,onCardClick:()=>u(e==null?void 0:e.uuid)},j)):s==null?void 0:s.slice(0,o).map((e,j)=>r.jsx(b,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,tags:e==null?void 0:e.tags,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,datePublished:e==null?void 0:e.date,readDuration:e==null?void 0:e.readDuration,onCardClick:()=>u(e==null?void 0:e.uuid)},j))}),[s]);return r.jsxs(y.RegulatTitleSectionWrapper,{children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:l})]}),d.isDefinedNotEmptyString(h)&&r.jsx(C,{type:"button",btnType:"tinted",color:"gray",onClick:()=>a(buttonLink),borderRadius:"curved",children:f})]}),r.jsx(D,{limit:o,children:r.jsx(P,{isLoading:g,limit:o,keyPrefix:"explore-landing",children:n})})]})});module.exports=R;

package/dist/BlogsSectionDetailed.js

@@ -1,20 +1,20 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { n as u } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as v } from "./consts-C1uHV4xc.js";
-import { u as N } from "./useDetectMobile-BC6EGaBc.js";
-import { m as f, t as C, k as h } from "./utils-DtRLzzTZ.js";
-import { B as O, R as S } from "./style-6tSw9aqK.js";
-import $ from "./Button.js";
-const D = u.div`
+import { jsxs as t, jsx as r, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as v, Suspense as D, memo as O, useMemo as B } from "react";
+import { n as k } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as C } from "./consts-C1uHV4xc.js";
+import { u as P } from "./useDetectMobile-BC6EGaBc.js";
+import { m as b, t as T, k as y } from "./utils-DtRLzzTZ.js";
+import { B as L, R as z } from "./style-6tSw9aqK.js";
+import M from "./Button.js";
+const R = k.div`
   display: grid;
-  grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${v + "px"}) {
+  @media (max-width: ${C + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, T = u.div`
+`, S = k.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -45,7 +45,7 @@ const D = u.div`
     width: 100%;
     max-height: 11.0625rem;
     min-height: 11.0625rem;
-    background-color: ${f("-90deg")};
+    background-color: ${b("-90deg")};
   }
 
   & .tags-wr {
@@ -55,9 +55,9 @@ const D = u.div`
     padding: 0 1rem 1rem 1rem;
   }
 
-  @media (max-width: ${v + "px"}) {
+  @media (max-width: ${C + "px"}) {
   }
-`, B = u.div`
+`, $ = k.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -71,13 +71,13 @@ const D = u.div`
   }
 
   & .info-wr-skeleton {
-    background-color: ${f("-90deg")};
+    background-color: ${b("-90deg")};
     height: 1rem;
     width: 100%;
   }
 
   & .skeleton-title {
-    background-color: ${f("-90deg")};
+    background-color: ${b("-90deg")};
     height: 1.5rem;
     width: 70%;
   }
@@ -87,7 +87,7 @@ const D = u.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${C(2)}
+    ${T(2)}
   }
 
   & .info-wr {
@@ -116,109 +116,146 @@ const D = u.div`
     align-items: center;
     gap: 1rem;
   }
-`, b = w((o, k) => {
+`, j = v((i, d) => {
   const {
-    title: s,
-    image: c,
-    text: g,
-    numberOfLikes: i,
-    numberOfComments: p,
-    readDuration: l,
-    datePublished: d,
-    tags: m,
-    onCardClick: e,
-    timeToReadText: a = "read"
-  } = o;
+    title: a,
+    image: s,
+    text: l,
+    numberOfLikes: n,
+    numberOfComments: u,
+    readDuration: m,
+    datePublished: g,
+    tags: c,
+    onCardClick: f,
+    timeToReadText: p = "read"
+  } = i;
   return (
     // <BlogCardDetailedSkeleton />
-    /* @__PURE__ */ t(T, { className: "blog-card", onClick: e, children: [
-      /* @__PURE__ */ r("img", { src: c }),
-      /* @__PURE__ */ t(B, { children: [
+    /* @__PURE__ */ t(S, { className: "blog-card", onClick: f, children: [
+      /* @__PURE__ */ r("img", { src: s }),
+      /* @__PURE__ */ t($, { children: [
         /* @__PURE__ */ t("div", { className: "info-wr", children: [
           /* @__PURE__ */ t("div", { className: "info-wr-1", children: [
-            /* @__PURE__ */ r("span", { children: d }),
+            /* @__PURE__ */ r("span", { children: g }),
             /* @__PURE__ */ r("span", { className: "small-dot", children: "●" }),
-            l && a ? `${l} ${a}` : "N/A"
+            m && p ? `${m} ${p}` : "N/A"
           ] }),
           /* @__PURE__ */ t("div", { className: "info-wr-2", children: [
             /* @__PURE__ */ t("span", { className: "info-wr-1", children: [
               /* @__PURE__ */ r("i", { className: "mng mng-lnc-thumbs-up--filled" }),
-              /* @__PURE__ */ r("span", { children: i })
+              /* @__PURE__ */ r("span", { children: n })
             ] }),
             /* @__PURE__ */ t("span", { className: "info-wr-1", children: [
               /* @__PURE__ */ r("i", { className: "mng mng-lnc-messages-filled" }),
-              /* @__PURE__ */ r("span", { children: p })
+              /* @__PURE__ */ r("span", { children: u })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ r("div", { className: "text-wr-title", children: s }),
-        /* @__PURE__ */ r("div", { className: "text-wr", children: g })
+        /* @__PURE__ */ r("div", { className: "text-wr-title", children: a }),
+        /* @__PURE__ */ r("div", { className: "text-wr", children: l })
       ] }),
-      /* @__PURE__ */ r("div", { className: "tags-wr", children: m == null ? void 0 : m.map((n, y) => /* @__PURE__ */ r(O, { color: n == null ? void 0 : n.color, children: n == null ? void 0 : n.name }, y)) })
+      /* @__PURE__ */ r("div", { className: "tags-wr", children: c == null ? void 0 : c.map((o, e) => /* @__PURE__ */ r(L, { color: o == null ? void 0 : o.color, children: o == null ? void 0 : o.name }, e)) })
     ] })
   );
-}), E = w((o, k) => {
+}), A = v(({}, i) => /* @__PURE__ */ t(S, { className: "blog-card", children: [
+  /* @__PURE__ */ r("div", { className: "skeleton-img" }),
+  /* @__PURE__ */ t($, { children: [
+    /* @__PURE__ */ r("div", { className: "info-wr" }),
+    /* @__PURE__ */ r("div", { className: "skeleton-title" }),
+    /* @__PURE__ */ r("div", { className: "info-wr-skeleton" })
+  ] })
+] })), W = ({ limit: i = 3, isLoading: d = !1, keyPrefix: a }) => /* @__PURE__ */ r(w, { children: Array.from({ length: i }, (s, l) => /* @__PURE__ */ r(
+  A,
+  {
+    isLoading: d
+  },
+  `${a}-skeleton-product-card-${l}`
+)) }), E = ({
+  children: i,
+  fallbackComponent: d = /* @__PURE__ */ r(w, {}),
+  isLoading: a = !1,
+  limit: s,
+  keyPrefix: l
+}) => /* @__PURE__ */ r(D, { fallbackComponent: d, children: a === !0 ? /* @__PURE__ */ r(
+  W,
+  {
+    isLoading: a,
+    limit: s,
+    keyPrefix: l
+  }
+) : i }), N = O(j), J = v((i, d) => {
   const {
-    icon: s,
-    title: c,
-    onButtonAction: g,
-    items: i,
-    buttonText: p,
-    limit: l = 3,
-    onSelectCard: d = () => {
+    icon: a,
+    title: s,
+    onButtonAction: l,
+    items: n,
+    buttonText: u,
+    limit: m = 3,
+    onSelectCard: g = () => {
+    },
+    isLoading: c = !1,
+    onSectionClick: f = () => {
     }
-  } = o, m = N();
-  return /* @__PURE__ */ t(S, { children: [
+  } = i, p = P(), o = B(() => /* @__PURE__ */ r(w, { children: p === !0 ? n == null ? void 0 : n.map((e, h) => /* @__PURE__ */ r(
+    N,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      numberOfLikes: e == null ? void 0 : e.numberOfLikes,
+      numberOfComments: e == null ? void 0 : e.numberOfComments,
+      datePublished: e == null ? void 0 : e.date,
+      readDuration: e == null ? void 0 : e.readDuration,
+      tags: e == null ? void 0 : e.tags,
+      onCardClick: () => g(e == null ? void 0 : e.uuid)
+    },
+    h
+  )) : n == null ? void 0 : n.slice(0, m).map((e, h) => /* @__PURE__ */ r(
+    N,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      tags: e == null ? void 0 : e.tags,
+      numberOfLikes: e == null ? void 0 : e.numberOfLikes,
+      numberOfComments: e == null ? void 0 : e.numberOfComments,
+      datePublished: e == null ? void 0 : e.date,
+      readDuration: e == null ? void 0 : e.readDuration,
+      onCardClick: () => g(e == null ? void 0 : e.uuid)
+    },
+    h
+  )) }), [n]);
+  return /* @__PURE__ */ t(z, { children: [
     /* @__PURE__ */ t("div", { className: "regular-title", children: [
       /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
-        h(s) && /* @__PURE__ */ r("i", { className: s }),
-        /* @__PURE__ */ r("span", { children: c })
+        y(a) && /* @__PURE__ */ r("i", { className: a }),
+        /* @__PURE__ */ r("span", { children: s })
       ] }),
-      h(onSectionClick) && /* @__PURE__ */ r(
-        $,
+      y(f) && /* @__PURE__ */ r(
+        M,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => g(buttonLink),
+          onClick: () => l(buttonLink),
           borderRadius: "curved",
-          children: p
+          children: u
         }
       )
     ] }),
-    /* @__PURE__ */ r(D, { limit: l, children: m === !0 ? i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ r(
-      b,
-      {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        text: e == null ? void 0 : e.text,
-        titleSlug: e == null ? void 0 : e.titleSlug,
-        numberOfLikes: e == null ? void 0 : e.numberOfLikes,
-        numberOfComments: e == null ? void 0 : e.numberOfComments,
-        datePublished: e == null ? void 0 : e.date,
-        readDuration: e == null ? void 0 : e.readDuration,
-        tags: e == null ? void 0 : e.tags,
-        onCardClick: () => d(e == null ? void 0 : e.uuid)
-      },
-      a
-    )) : i == null ? void 0 : i.slice(0, l).map((e, a) => /* @__PURE__ */ r(
-      b,
+    /* @__PURE__ */ r(R, { limit: m, children: /* @__PURE__ */ r(
+      E,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        text: e == null ? void 0 : e.text,
-        titleSlug: e == null ? void 0 : e.titleSlug,
-        tags: e == null ? void 0 : e.tags,
-        numberOfLikes: e == null ? void 0 : e.numberOfLikes,
-        numberOfComments: e == null ? void 0 : e.numberOfComments,
-        datePublished: e == null ? void 0 : e.date,
-        readDuration: e == null ? void 0 : e.readDuration,
-        onCardClick: () => d(e == null ? void 0 : e.uuid)
-      },
-      a
-    )) })
+        isLoading: c,
+        limit: m,
+        keyPrefix: "explore-landing",
+        children: o
+      }
+    ) })
   ] });
 });
 export {
-  E as default
+  J as default
 };

package/dist/BlogsSectionLarge.cjs

@@ -1,12 +1,12 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),s=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),c=require("./consts-CtNoHdBj.cjs"),h=require("./useDetectMobile-D6d5LpdL.cjs"),l=require("./utils-NZLCh-J5.cjs"),g=require("./Button.cjs"),f=s.newStyled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),h=require("./consts-CtNoHdBj.cjs"),b=require("./useDetectMobile-D6d5LpdL.cjs"),g=require("./utils-NZLCh-J5.cjs"),p=require("./Button.cjs"),x=u.newStyled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,p=s.newStyled.div`
+`,f=u.newStyled.div`
   display: flex;
   width: 100%;
   gap: 1.25rem;
@@ -35,11 +35,11 @@
     min-height: 12.25rem;
     min-width: 11.25rem;
     max-width: 11.25rem;
-    background-color: ${l.linearGradientAnimation("-90deg")};
+    background-color: ${g.linearGradientAnimation("-90deg")};
     border-radius: 0.75rem 0 0 0.75rem;
   }
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     padding: 1rem;
     column-gap: 1.5rem;
     row-gap: 1rem;
@@ -65,7 +65,7 @@
       margin-top: auto;
     }
   }
-`,w=s.newStyled.div`
+`,j=u.newStyled.div`
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -81,7 +81,7 @@
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${l.truncateTextInRows(3)}
+    ${g.truncateTextInRows(3)}
   }
 
   & button {
@@ -92,10 +92,10 @@
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${l.linearGradientAnimation("-90deg")};
+    background-color: ${g.linearGradientAnimation("-90deg")};
   }
 
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     padding: 0;
   }
-`;d.forwardRef(({},i)=>t.jsxs(p,{className:"blog-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(w,{children:t.jsx("div",{className:"skeleton-title"})})]}));const u=d.forwardRef((i,b)=>{const{title:r,image:n,text:m,onCardClick:a,buttonText:e}=i,o=h.useDetectMobile();return t.jsxs(p,{className:"blog-card",onClick:a,children:[t.jsx("img",{src:n}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:m}),o!==!0&&t.jsx(g,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:a,children:e})]}),o===!0&&t.jsx(g,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:a,children:e})]})}),y=d.forwardRef((i,b)=>{const{items:r,onSelectCard:n=()=>{},limit:m=2}=i,a=h.useDetectMobile();return t.jsx(f,{limit:m,children:a===!0?r==null?void 0:r.map((e,o)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},o)):r==null?void 0:r.slice(0,m).map((e,o)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},o))})});module.exports=y;
+`,y=a.forwardRef((i,s)=>{const{title:r,image:n,text:o,onCardClick:l,buttonText:m}=i,d=b.useDetectMobile();return t.jsxs(f,{className:"blog-card",onClick:l,children:[t.jsx("img",{src:n}),t.jsxs(j,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o}),d!==!0&&t.jsx(p,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:l,children:m})]}),d===!0&&t.jsx(p,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:l,children:m})]})}),k=a.forwardRef(({},i)=>t.jsxs(f,{className:"blog-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(j,{children:t.jsx("div",{className:"skeleton-title"})})]})),S=({limit:i=2,isLoading:s=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(k,{isLoading:s},`${r}-skeleton-product-card-${o}`))}),v=({children:i,fallbackComponent:s=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(a.Suspense,{fallbackComponent:s,children:r===!0?t.jsx(S,{isLoading:r,limit:n,keyPrefix:o}):i}),w=a.memo(y),C=a.forwardRef((i,s)=>{const{items:r,onSelectCard:n=()=>{},limit:o=2,isLoading:l=!1}=i,m=b.useDetectMobile(),d=a.useMemo(()=>t.jsx(t.Fragment,{children:m===!0?r==null?void 0:r.map((e,c)=>t.jsx(w,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},c)):r==null?void 0:r.slice(0,o).map((e,c)=>t.jsx(w,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},c))}),[r]);return t.jsx(x,{limit:o,children:t.jsx(v,{isLoading:l,limit:o,keyPrefix:"explore-landing",children:d})})});module.exports=C;

package/dist/BlogsSectionLarge.js

@@ -1,19 +1,19 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { n as g } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as c } from "./consts-C1uHV4xc.js";
-import { u as h } from "./useDetectMobile-BC6EGaBc.js";
-import { m as u, t as k } from "./utils-DtRLzzTZ.js";
-import s from "./Button.js";
-const y = g.div`
+import { jsxs as s, jsx as t, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as h, Suspense as C, memo as S, useMemo as $ } from "react";
+import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as u } from "./consts-C1uHV4xc.js";
+import { u as w } from "./useDetectMobile-BC6EGaBc.js";
+import { m as k, t as T } from "./utils-DtRLzzTZ.js";
+import f from "./Button.js";
+const M = p.div`
   display: grid;
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${c + "px"}) {
+  @media (max-width: ${u + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, b = g.div`
+`, y = p.div`
   display: flex;
   width: 100%;
   gap: 1.25rem;
@@ -42,11 +42,11 @@ const y = g.div`
     min-height: 12.25rem;
     min-width: 11.25rem;
     max-width: 11.25rem;
-    background-color: ${u("-90deg")};
+    background-color: ${k("-90deg")};
     border-radius: 0.75rem 0 0 0.75rem;
   }
 
-  @media (max-width: ${c + "px"}) {
+  @media (max-width: ${u + "px"}) {
     padding: 1rem;
     column-gap: 1.5rem;
     row-gap: 1rem;
@@ -72,7 +72,7 @@ const y = g.div`
       margin-top: auto;
     }
   }
-`, w = g.div`
+`, v = p.div`
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -88,7 +88,7 @@ const y = g.div`
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${k(3)}
+    ${T(3)}
   }
 
   & button {
@@ -99,57 +99,75 @@ const y = g.div`
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${u("-90deg")};
+    background-color: ${k("-90deg")};
   }
 
-  @media (max-width: ${c + "px"}) {
+  @media (max-width: ${u + "px"}) {
     padding: 0;
   }
-`;
-d(({}, i) => /* @__PURE__ */ l(b, { className: "blog-card", children: [
-  /* @__PURE__ */ t("div", { className: "skeleton-img" }),
-  /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
-] }));
-const p = d((i, f) => {
-  const { title: r, image: a, text: n, onCardClick: m, buttonText: e } = i, o = h();
-  return (
-    // <BlogCardLargeSkeleton />
-    /* @__PURE__ */ l(b, { className: "blog-card", onClick: m, children: [
-      /* @__PURE__ */ t("img", { src: a }),
-      /* @__PURE__ */ l(w, { children: [
-        /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
-        /* @__PURE__ */ t("div", { className: "text-wr", children: n }),
-        o !== !0 && /* @__PURE__ */ t(
-          s,
-          {
-            type: "button",
-            btnType: "outline",
-            size: "medium",
-            color: "gray",
-            onClick: m,
-            children: e
-          }
-        )
-      ] }),
-      o === !0 && /* @__PURE__ */ t(
-        s,
+`, N = h((i, m) => {
+  const { title: r, image: a, text: o, onCardClick: n, buttonText: l } = i, d = w();
+  return /* @__PURE__ */ s(y, { className: "blog-card", onClick: n, children: [
+    /* @__PURE__ */ t("img", { src: a }),
+    /* @__PURE__ */ s(v, { children: [
+      /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
+      /* @__PURE__ */ t("div", { className: "text-wr", children: o }),
+      d !== !0 && /* @__PURE__ */ t(
+        f,
         {
-          className: "action",
           type: "button",
           btnType: "outline",
           size: "medium",
           color: "gray",
-          onClick: m,
-          children: e
+          onClick: n,
+          children: l
         }
       )
-    ] })
-  );
-}), z = d((i, f) => {
-  const { items: r, onSelectCard: a = () => {
-  }, limit: n = 2 } = i, m = h();
-  return /* @__PURE__ */ t(y, { limit: n, children: m === !0 ? r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ t(
-    p,
+    ] }),
+    d === !0 && /* @__PURE__ */ t(
+      f,
+      {
+        className: "action",
+        type: "button",
+        btnType: "outline",
+        size: "medium",
+        color: "gray",
+        onClick: n,
+        children: l
+      }
+    )
+  ] });
+}), z = h(({}, i) => /* @__PURE__ */ s(y, { className: "blog-card", children: [
+  /* @__PURE__ */ t("div", { className: "skeleton-img" }),
+  /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
+] })), B = ({ limit: i = 2, isLoading: m = !1, keyPrefix: r }) => /* @__PURE__ */ t(g, { children: Array.from({ length: i }, (a, o) => /* @__PURE__ */ t(
+  z,
+  {
+    isLoading: m
+  },
+  `${r}-skeleton-product-card-${o}`
+)) }), L = ({
+  children: i,
+  fallbackComponent: m = /* @__PURE__ */ t(g, {}),
+  isLoading: r = !1,
+  limit: a,
+  keyPrefix: o
+}) => /* @__PURE__ */ t(C, { fallbackComponent: m, children: r === !0 ? /* @__PURE__ */ t(
+  B,
+  {
+    isLoading: r,
+    limit: a,
+    keyPrefix: o
+  }
+) : i }), b = S(N), G = h((i, m) => {
+  const {
+    items: r,
+    onSelectCard: a = () => {
+    },
+    limit: o = 2,
+    isLoading: n = !1
+  } = i, l = w(), d = $(() => /* @__PURE__ */ t(g, { children: l === !0 ? r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ t(
+    b,
     {
       title: e == null ? void 0 : e.title,
       image: e == null ? void 0 : e.image,
@@ -158,9 +176,9 @@ const p = d((i, f) => {
       buttonText: e == null ? void 0 : e.buttonText,
       onCardClick: () => a(e)
     },
-    o
-  )) : r == null ? void 0 : r.slice(0, n).map((e, o) => /* @__PURE__ */ t(
-    p,
+    c
+  )) : r == null ? void 0 : r.slice(0, o).map((e, c) => /* @__PURE__ */ t(
+    b,
     {
       title: e == null ? void 0 : e.title,
       image: e == null ? void 0 : e.image,
@@ -169,9 +187,18 @@ const p = d((i, f) => {
       buttonText: e == null ? void 0 : e.buttonText,
       onCardClick: () => a(e)
     },
-    o
-  )) });
+    c
+  )) }), [r]);
+  return /* @__PURE__ */ t(M, { limit: o, children: /* @__PURE__ */ t(
+    L,
+    {
+      isLoading: n,
+      limit: o,
+      keyPrefix: "explore-landing",
+      children: d
+    }
+  ) });
 });
 export {
-  z as default
+  G as default
 };