@lanaco/lnc-react-ui 4.0.38 → 4.0.40

package/dist/BlogsSectionDetailed.js

@@ -1,28 +1,28 @@
-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-CiePxaJ_.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%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
     0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-  background-color: var(--white);
+  background-color: var(--white, #fff);
   border-radius: 0.75rem;
-  border: 1px solid var(--gray-95008);
+  border: 1px solid var(--gray-95008, #14161a14);
   overflow: hidden;
   max-height: 21.5625rem;
   min-height: 21.5625rem;
@@ -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,15 +55,15 @@ 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;
   gap: 0;
   color: var(--gray-950, #14161a);
-  border-top: 1px solid var(--gray-95008);
+  border-top: 1px solid var(--gray-95008, #14161a14);
 
   & .text-wr-title {
     font-weight: 600;
@@ -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 {
@@ -101,7 +101,7 @@ const D = u.div`
 
     & .mng {
       font-size: 0.875rem;
-      color: var(--gray-300);
+      color: var(--gray-300, #c4c8cf);
     }
   }
 
@@ -116,109 +116,145 @@ const D = u.div`
     align-items: center;
     gap: 1rem;
   }
-`, b = w((o, k) => {
+`, j = v((i, s) => {
   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: d,
+    text: l,
+    numberOfLikes: n,
+    numberOfComments: u,
+    readDuration: m,
+    datePublished: c,
+    tags: g,
+    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, { ref: s, className: "blog-card", onClick: f, children: [
+      /* @__PURE__ */ r("img", { src: d }),
+      /* @__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: c }),
             /* @__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: g == null ? void 0 : g.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: s = !1, keyPrefix: a }) => /* @__PURE__ */ r(w, { children: Array.from({ length: i }, (d, l) => /* @__PURE__ */ r(
+  A,
+  {
+    isLoading: s
+  },
+  `${a}-skeleton-product-card-${l}`
+)) }), E = ({
+  children: i,
+  fallbackComponent: s = /* @__PURE__ */ r(w, {}),
+  isLoading: a = !1,
+  limit: d,
+  keyPrefix: l
+}) => /* @__PURE__ */ r(D, { fallbackComponent: s, children: a === !0 ? /* @__PURE__ */ r(
+  W,
+  {
+    isLoading: a,
+    limit: d,
+    keyPrefix: l
+  }
+) : i }), N = O(j), J = v((i, s) => {
   const {
-    icon: s,
-    title: c,
-    onButtonAction: g,
-    items: i,
-    buttonText: p,
-    limit: l = 3,
-    onSelectCard: d = () => {
-    }
-  } = o, m = N();
-  return /* @__PURE__ */ t(S, { children: [
+    icon: a,
+    title: d,
+    onButtonAction: l,
+    items: n,
+    buttonText: u,
+    limit: m = 3,
+    onSelectCard: c = () => {
+    },
+    isLoading: g = !1,
+    buttonLink: f
+  } = 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: () => c(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: () => c(e == null ? void 0 : e.uuid)
+    },
+    h
+  )) }), [n, p, m, c]);
+  return /* @__PURE__ */ t(z, { ref: s, 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: d })
       ] }),
-      h(onSectionClick) && /* @__PURE__ */ r(
-        $,
+      y(l) && /* @__PURE__ */ r(
+        M,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => g(buttonLink),
+          onClick: () => l(f),
           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: g,
+        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"),s=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=s.forwardRef((i,a)=>{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=s.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:a=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(k,{isLoading:a},`${r}-skeleton-product-card-${o}`))}),v=({children:i,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(s.Suspense,{fallbackComponent:a,children:r===!0?t.jsx(S,{isLoading:r,limit:n,keyPrefix:o}):i}),w=s.memo(y),C=s.forwardRef((i,a)=>{const{items:r,onSelectCard:n=()=>{},limit:o=2,isLoading:l=!1}=i,m=b.useDetectMobile(),d=s.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,m,o,n]);return t.jsx(x,{ref:a,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, l, o, a]);
+  return /* @__PURE__ */ t(M, { ref: m, limit: o, children: /* @__PURE__ */ t(
+    L,
+    {
+      isLoading: n,
+      limit: o,
+      keyPrefix: "explore-landing",
+      children: d
+    }
+  ) });
 });
 export {
-  z as default
+  G as default
 };

package/dist/BlogsSectionSimple.cjs

@@ -1,12 +1,12 @@
-"use strict";const t=require("react/jsx-runtime"),m=require("react"),g=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),h=require("./consts-CtNoHdBj.cjs"),y=require("./useDetectMobile-D6d5LpdL.cjs"),l=require("./utils-NZLCh-J5.cjs"),S=require("./style-BR3tIhP1.cjs"),k=require("./Button.cjs"),x=require("./Link.cjs"),N=g.newStyled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),f=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),m=require("./utils-NZLCh-J5.cjs"),k=require("./style-DN1qT8BE.cjs"),C=require("./Button.cjs"),N=require("./Link.cjs"),q=p.newStyled.div`
   display: grid;
   grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,f=g.newStyled.div`
+`,j=p.newStyled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -38,7 +38,7 @@
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${l.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   & .action {
@@ -46,9 +46,9 @@
     margin-top: auto;
   }
 
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
   }
-`,w=g.newStyled.div`
+`,w=p.newStyled.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -66,6 +66,6 @@
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${l.truncateTextInRows(3)}
+    ${m.truncateTextInRows(3)}
   }
-`;m.forwardRef(({},r)=>t.jsxs(f,{className:"product-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx("div",{className:"card-title"}),t.jsx(w,{})]}));const p=m.forwardRef((r,j)=>{const{title:a,image:s,text:c,onCardClick:o,readMoreText:n="Read more"}=r;return t.jsxs(f,{className:"blog-card",onClick:o,children:[t.jsx("img",{src:s}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:a}),t.jsx("div",{className:"text-wr",children:c})]}),t.jsx(x,{className:"action",color:"gray",onClick:o,children:n})]})}),C=m.forwardRef((r,j)=>{const{icon:a,title:s,onButtonAction:c=()=>{},onSelectCard:o=()=>{},buttonLink:n,items:i,buttonText:b,limit:u=3}=r,v=y.useDetectMobile();return t.jsxs(S.RegulatTitleSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[l.isDefinedNotEmptyString(a)&&t.jsx("i",{className:a}),t.jsx("span",{children:s})]}),l.isDefinedNotEmptyString(n)&&t.jsx(k,{type:"button",btnType:"tinted",color:"gray",onClick:()=>c(n),borderRadius:"curved",children:b})]}),t.jsx(N,{limit:u,children:v===!0?i==null?void 0:i.map((e,d)=>t.jsx(p,{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,onCardClick:()=>o(e==null?void 0:e.uuid)},d)):i==null?void 0:i.slice(0,u).map((e,d)=>t.jsx(p,{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,onCardClick:()=>o(e==null?void 0:e.uuid)},d))})]})});module.exports=C;
+`,R=a.forwardRef(({},r)=>t.jsxs(j,{className:"product-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx("div",{className:"card-title"}),t.jsx(w,{})]})),B=a.forwardRef((r,s)=>{const{title:i,image:l,text:o,onCardClick:c,readMoreText:d="Read more"}=r;return t.jsxs(j,{className:"blog-card",onClick:c,children:[t.jsx("img",{src:l}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:i}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(N,{className:"action",color:"gray",onClick:c,children:d})]})}),M=({limit:r=3,isLoading:s=!1,keyPrefix:i})=>t.jsx(t.Fragment,{children:Array.from({length:r},(l,o)=>t.jsx(R,{isLoading:s},`${i}-skeleton-product-card-${o}`))}),$=({children:r,fallbackComponent:s=t.jsx(t.Fragment,{}),isLoading:i=!1,limit:l,keyPrefix:o})=>t.jsx(a.Suspense,{fallbackComponent:s,children:i===!0?t.jsx(M,{isLoading:i,limit:l,keyPrefix:o}):r}),h=a.memo(B),_=a.forwardRef((r,s)=>{const{icon:i,title:l,onButtonAction:o=()=>{},onSelectCard:c=()=>{},buttonLink:d,items:n,buttonText:S,limit:u=3,isLoading:x=!1}=r,y=v.useDetectMobile(),b=a.useMemo(()=>t.jsx(t.Fragment,{children:y===!0?n==null?void 0:n.map((e,g)=>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,onCardClick:()=>c(e==null?void 0:e.uuid)},g)):n==null?void 0:n.slice(0,u).map((e,g)=>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,onCardClick:()=>c(e==null?void 0:e.uuid)},g))}),[n]);return t.jsxs(k.RegulatTitleSectionWrapper,{ref:s,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[m.isDefinedNotEmptyString(i)&&t.jsx("i",{className:i}),t.jsx("span",{children:l})]}),m.isDefinedNotEmptyString(d)&&t.jsx(C,{type:"button",btnType:"tinted",color:"gray",onClick:()=>o(d),borderRadius:"curved",children:S})]}),t.jsx(q,{limit:u,children:t.jsx($,{isLoading:x,limit:u,keyPrefix:"explore-landing",children:b})})]})});module.exports=_;