@lanaco/lnc-react-ui 4.0.38 → 4.0.39

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"),l=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-BR3tIhP1.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=l.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=l.forwardRef((r,a)=>{const{title:i,image:s,text:o,onCardClick:c,readMoreText:d="Read more"}=r;return t.jsxs(j,{className:"blog-card",onClick:c,children:[t.jsx("img",{src:s}),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:a=!1,keyPrefix:i})=>t.jsx(t.Fragment,{children:Array.from({length:r},(s,o)=>t.jsx(R,{isLoading:a},`${i}-skeleton-product-card-${o}`))}),$=({children:r,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:i=!1,limit:s,keyPrefix:o})=>t.jsx(l.Suspense,{fallbackComponent:a,children:i===!0?t.jsx(M,{isLoading:i,limit:s,keyPrefix:o}):r}),h=l.memo(B),_=l.forwardRef((r,a)=>{const{icon:i,title:s,onButtonAction:o=()=>{},onSelectCard:c=()=>{},buttonLink:d,items:n,buttonText:S,limit:u=3,isLoading:x=!1}=r,y=v.useDetectMobile(),b=l.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,{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:s})]}),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=_;

package/dist/BlogsSectionSimple.js

@@ -1,21 +1,21 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as f } from "./consts-C1uHV4xc.js";
-import { u as S } from "./useDetectMobile-BC6EGaBc.js";
-import { m as C, t as N, k as u } from "./utils-DtRLzzTZ.js";
-import { R } from "./style-6tSw9aqK.js";
-import T from "./Button.js";
-import $ from "./Link.js";
-const B = p.div`
+import { jsxs as n, jsx as r, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as $, memo as B, useMemo as M } from "react";
+import { n as h } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as b } from "./consts-C1uHV4xc.js";
+import { u as R } from "./useDetectMobile-BC6EGaBc.js";
+import { m as T, t as P, k as f } from "./utils-DtRLzzTZ.js";
+import { R as z } from "./style-6tSw9aqK.js";
+import W from "./Button.js";
+import j from "./Link.js";
+const A = h.div`
   display: grid;
-  grid-template-columns: ${(r) => `repeat(${r.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"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, v = p.div`
+`, w = h.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -47,7 +47,7 @@ const B = p.div`
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${C("-90deg")};
+    background-color: ${T("-90deg")};
   }
 
   & .action {
@@ -55,9 +55,9 @@ const B = p.div`
     margin-top: auto;
   }
 
-  @media (max-width: ${f + "px"}) {
+  @media (max-width: ${b + "px"}) {
   }
-`, b = p.div`
+`, S = h.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -75,84 +75,110 @@ const B = p.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${N(3)}
+    ${P(3)}
   }
-`;
-s(({}, r) => (
+`, E = u(({}, t) => (
   // <LandingPageClearProductCardSkeleton />
-  /* @__PURE__ */ a(v, { className: "product-card", children: [
-    /* @__PURE__ */ t("div", { className: "skeleton-img" }),
-    /* @__PURE__ */ t("div", { className: "card-title" }),
-    /* @__PURE__ */ t(b, {})
+  /* @__PURE__ */ n(w, { className: "product-card", children: [
+    /* @__PURE__ */ r("div", { className: "skeleton-img" }),
+    /* @__PURE__ */ r("div", { className: "card-title" }),
+    /* @__PURE__ */ r(S, {})
   ] })
-));
-const h = s((r, w) => {
-  const { title: l, image: m, text: d, onCardClick: o, readMoreText: n = "Read more" } = r;
+)), I = u((t, m) => {
+  const { title: i, image: l, text: o, onCardClick: d, readMoreText: c = "Read more" } = t;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ a(v, { className: "blog-card", onClick: o, children: [
-      /* @__PURE__ */ t("img", { src: m }),
-      /* @__PURE__ */ a(b, { children: [
-        /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
-        /* @__PURE__ */ t("div", { className: "text-wr", children: d })
+    /* @__PURE__ */ n(w, { className: "blog-card", onClick: d, children: [
+      /* @__PURE__ */ r("img", { src: l }),
+      /* @__PURE__ */ n(S, { children: [
+        /* @__PURE__ */ r("div", { className: "text-wr-title", children: i }),
+        /* @__PURE__ */ r("div", { className: "text-wr", children: o })
       ] }),
-      /* @__PURE__ */ t($, { className: "action", color: "gray", onClick: o, children: n })
+      /* @__PURE__ */ r(j, { className: "action", color: "gray", onClick: d, children: c })
     ] })
   );
-}), G = s((r, w) => {
+}), L = ({ limit: t = 3, isLoading: m = !1, keyPrefix: i }) => /* @__PURE__ */ r(g, { children: Array.from({ length: t }, (l, o) => /* @__PURE__ */ r(
+  E,
+  {
+    isLoading: m
+  },
+  `${i}-skeleton-product-card-${o}`
+)) }), _ = ({
+  children: t,
+  fallbackComponent: m = /* @__PURE__ */ r(g, {}),
+  isLoading: i = !1,
+  limit: l,
+  keyPrefix: o
+}) => /* @__PURE__ */ r($, { fallbackComponent: m, children: i === !0 ? /* @__PURE__ */ r(
+  L,
+  {
+    isLoading: i,
+    limit: l,
+    keyPrefix: o
+  }
+) : t }), v = B(I), K = u((t, m) => {
   const {
-    icon: l,
-    title: m,
-    onButtonAction: d = () => {
+    icon: i,
+    title: l,
+    onButtonAction: o = () => {
+    },
+    onSelectCard: d = () => {
     },
-    onSelectCard: o = () => {
+    buttonLink: c,
+    items: a,
+    buttonText: k,
+    limit: s = 3,
+    isLoading: y = !1
+  } = t, C = R(), N = M(() => /* @__PURE__ */ r(g, { children: C === !0 ? a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
+    v,
+    {
+      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: () => d(e == null ? void 0 : e.uuid)
     },
-    buttonLink: n,
-    items: i,
-    buttonText: y,
-    limit: g = 3
-  } = r, k = S();
-  return /* @__PURE__ */ a(R, { children: [
-    /* @__PURE__ */ a("div", { className: "regular-title", children: [
-      /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
-        u(l) && /* @__PURE__ */ t("i", { className: l }),
-        /* @__PURE__ */ t("span", { children: m })
+    p
+  )) : a == null ? void 0 : a.slice(0, s).map((e, p) => /* @__PURE__ */ r(
+    v,
+    {
+      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: () => d(e == null ? void 0 : e.uuid)
+    },
+    p
+  )) }), [a]);
+  return /* @__PURE__ */ n(z, { children: [
+    /* @__PURE__ */ n("div", { className: "regular-title", children: [
+      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
+        f(i) && /* @__PURE__ */ r("i", { className: i }),
+        /* @__PURE__ */ r("span", { children: l })
       ] }),
-      u(n) && /* @__PURE__ */ t(
-        T,
+      f(c) && /* @__PURE__ */ r(
+        W,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => d(n),
+          onClick: () => o(c),
           borderRadius: "curved",
-          children: y
+          children: k
         }
       )
     ] }),
-    /* @__PURE__ */ t(B, { limit: g, children: k === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ t(
-      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: () => o(e == null ? void 0 : e.uuid)
-      },
-      c
-    )) : i == null ? void 0 : i.slice(0, g).map((e, c) => /* @__PURE__ */ t(
-      h,
+    /* @__PURE__ */ r(A, { limit: s, children: /* @__PURE__ */ r(
+      _,
       {
-        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)
-      },
-      c
-    )) })
+        isLoading: y,
+        limit: s,
+        keyPrefix: "explore-landing",
+        children: N
+      }
+    ) })
   ] });
 });
 export {
-  G as default
+  K as default
 };

package/dist/BlogsSectionSimpleCentered.cjs

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

package/dist/BlogsSectionSimpleCentered.js

@@ -1,20 +1,20 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { n as c } from "./emotion-styled.browser.esm-CjCaF13H.js";
-import { M as p } from "./consts-C1uHV4xc.js";
-import { u as b } from "./useDetectMobile-BC6EGaBc.js";
-import { m as u, t as w } from "./utils-DtRLzzTZ.js";
-import C from "./Button.js";
-const k = c.div`
+import { jsxs as c, jsx as t, Fragment as s } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as k, memo as S, 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 { u as y } from "./useDetectMobile-BC6EGaBc.js";
+import { m as f, t as $ } from "./utils-DtRLzzTZ.js";
+import T from "./Button.js";
+const B = g.div`
   display: grid;
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
 
-  @media (max-width: ${p + "px"}) {
+  @media (max-width: ${h + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, h = c.div`
+`, b = g.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -51,13 +51,13 @@ const k = c.div`
     min-height: 6rem;
     max-height: 6rem;
     border-radius: 0.75rem;
-    background-color: ${u("-90deg")};
+    background-color: ${f("-90deg")};
   }
 
-  @media (max-width: ${p + "px"}) {
+  @media (max-width: ${h + "px"}) {
     max-width: unset;
   }
-`, f = c.div`
+`, w = g.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -72,7 +72,7 @@ const k = c.div`
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${u("-90deg")};
+    background-color: ${f("-90deg")};
   }
 
   & .text-wr {
@@ -80,70 +80,100 @@ const k = c.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${w(3)}
+    ${$(3)}
   }
-`;
-d((i, s) => {
-  const { onCardClick: t } = i;
+`, M = u((i, a) => {
+  const { onCardClick: r } = i;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ l(h, { className: "product-card", onClick: t, children: [
-      /* @__PURE__ */ r("div", { "skeleton-img": !0 }),
-      /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r("div", { className: "skeleton-title" }) })
+    /* @__PURE__ */ c(b, { className: "product-card", onClick: r, children: [
+      /* @__PURE__ */ t("div", { "skeleton-img": !0 }),
+      /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
     ] })
   );
-});
-const g = d((i, s) => {
-  const { title: t, image: o, text: a, buttonText: m, onCardClick: e } = i;
+}), z = u((i, a) => {
+  const { title: r, image: o, text: n, buttonText: m, onCardClick: l } = i;
   return (
     // <SimpleBlogCardCenteredSkeleton />
-    /* @__PURE__ */ l(h, { className: "blog-card", onClick: e, children: [
-      /* @__PURE__ */ r("img", { src: o }),
-      /* @__PURE__ */ l(f, { children: [
-        /* @__PURE__ */ r("div", { className: "text-wr-title", children: t }),
-        /* @__PURE__ */ r("div", { className: "text-wr", children: a })
+    /* @__PURE__ */ c(b, { className: "blog-card", onClick: l, children: [
+      /* @__PURE__ */ t("img", { src: o }),
+      /* @__PURE__ */ c(w, { children: [
+        /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
+        /* @__PURE__ */ t("div", { className: "text-wr", children: n })
       ] }),
-      /* @__PURE__ */ r(
-        C,
+      /* @__PURE__ */ t(
+        T,
         {
           borderRadius: "curved",
           color: "gray",
           type: "button",
           btnType: "outline",
-          onClick: e,
+          onClick: l,
           size: "medium",
           children: m
         }
       )
     ] })
   );
-}), M = d((i, s) => {
-  const { items: t, limit: o = 3, onSelectCard: a = () => {
-  } } = i, m = b();
-  return /* @__PURE__ */ r(k, { limit: o, children: m === !0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(
-    g,
+}), N = ({ limit: i = 3, isLoading: a = !1, keyPrefix: r }) => /* @__PURE__ */ t(s, { children: Array.from({ length: i }, (o, n) => /* @__PURE__ */ t(
+  M,
+  {
+    isLoading: a
+  },
+  `${r}-skeleton-product-card-${n}`
+)) }), P = ({
+  children: i,
+  fallbackComponent: a = /* @__PURE__ */ t(s, {}),
+  isLoading: r = !1,
+  limit: o,
+  keyPrefix: n
+}) => /* @__PURE__ */ t(k, { fallbackComponent: a, children: r === !0 ? /* @__PURE__ */ t(
+  N,
+  {
+    isLoading: r,
+    limit: o,
+    keyPrefix: n
+  }
+) : i }), p = S(z), G = u((i, a) => {
+  const {
+    items: r,
+    limit: o = 3,
+    onSelectCard: n = () => {
+    },
+    isLoading: m = !1
+  } = i, l = y(), C = v(() => /* @__PURE__ */ t(s, { children: l === !0 ? r == null ? void 0 : r.map((e, d) => /* @__PURE__ */ t(
+    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,
       buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: () => a(e == null ? void 0 : e.uuid)
+      onCardClick: () => n(e == null ? void 0 : e.uuid)
     },
-    n
-  )) : t == null ? void 0 : t.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-    g,
+    d
+  )) : r == null ? void 0 : r.slice(0, o).map((e, d) => /* @__PURE__ */ t(
+    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,
       buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: () => a(e == null ? void 0 : e.uuid)
+      onCardClick: () => n(e == null ? void 0 : e.uuid)
     },
-    n
-  )) });
+    d
+  )) }), [r]);
+  return /* @__PURE__ */ t(B, { limit: o, children: /* @__PURE__ */ t(
+    P,
+    {
+      isLoading: m,
+      limit: o,
+      keyPrefix: "explore-landing",
+      children: C
+    }
+  ) });
 });
 export {
-  M as default
+  G as default
 };

package/dist/BlogsSectionWithFilters.cjs

@@ -1,9 +1,9 @@
-"use strict";const t=require("react/jsx-runtime"),m=require("react"),g=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),v=require("./useDetectMobile-D6d5LpdL.cjs"),n=require("./utils-NZLCh-J5.cjs"),k=require("./style-BR3tIhP1.cjs"),y=require("./Button.cjs"),C=require("./Link.cjs"),N=require("./index-Q_i-aqsF.cjs"),q=g.newStyled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),g=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),j=require("./consts-CtNoHdBj.cjs"),x=require("./useDetectMobile-D6d5LpdL.cjs"),s=require("./utils-NZLCh-J5.cjs"),C=require("./style-BR3tIhP1.cjs"),N=require("./Button.cjs"),q=require("./Link.cjs"),T=require("./index-Q_i-aqsF.cjs"),$=g.newStyled.div`
   display: grid;
-  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
 `,b=g.newStyled.div`
@@ -35,16 +35,16 @@
     min-height: 3.3125rem;
     max-height: 3.3125rem;
     border-radius: 0.75rem;
-    background-color: ${n.linearGradientAnimation("-90deg")};
+    background-color: ${s.linearGradientAnimation("-90deg")};
   }
 
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
   }
-`,w=g.newStyled.div`
+`,f=g.newStyled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -58,19 +58,19 @@
   & .skeleton-title {
     height: 1.5rem;
     width: 80%;
-    background-color: ${n.linearGradientAnimation("-90deg")};
+    background-color: ${s.linearGradientAnimation("-90deg")};
   }
 
   & .skeleton-action {
     height: 1.25rem;
     width: 20%;
-    background-color: ${n.linearGradientAnimation("-90deg")};
+    background-color: ${s.linearGradientAnimation("-90deg")};
   }
 
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${n.truncateTextInRows(3)}
+    ${s.truncateTextInRows(3)}
   }
-`;m.forwardRef(({},r)=>t.jsxs(b,{className:"blog-card",children:[t.jsxs(w,{children:[t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"text-wr"}),t.jsx("div",{className:"skeleton-action"})]}),t.jsx("div",{className:"skeleton-img"})]}));const h=m.forwardRef((r,j)=>{const{title:l,image:s,text:i,buttonText:c,onCardClick:o}=r;return t.jsxs(b,{className:"blog-card",onClick:o,children:[t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:l}),t.jsx("div",{className:"text-wr",children:i}),t.jsx(C,{color:"gray",onClick:o,children:c})]}),t.jsx("img",{src:s})]})}),T=m.forwardRef((r,j)=>{const{icon:l,title:s,items:i,buttonText:c,limit:o=3,options:a,onActionClick:f=()=>{},onSelectOption:u=()=>{}}=r,S=v.useDetectMobile();return t.jsxs(k.TitleWithOptionsSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[n.isDefinedNotEmptyString(l)&&t.jsx("i",{className:l}),t.jsx("span",{children:s})]}),n.isDefinedNotEmptyString(onSectionClick)&&t.jsx(y,{type:"button",btnType:"tinted",color:"gray",onClick:f,borderRadius:"curved",children:c})]}),(a==null?void 0:a.length)>0&&t.jsx(N.SelectBar,{items:a,onRemove:e=>{u(e)},onSelect:e=>{u(e)},labelKey:"name",valueKey:"code",noMargin:!0}),t.jsx(q,{limit:o,children:S===!0?i==null?void 0:i.map((e,d)=>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,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},d)):i==null?void 0:i.slice(0,o).map((e,d)=>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,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},d))})]})});module.exports=T;
+`,B=a.forwardRef(({},i)=>t.jsxs(b,{className:"blog-card",children:[t.jsxs(f,{children:[t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"text-wr"}),t.jsx("div",{className:"skeleton-action"})]}),t.jsx("div",{className:"skeleton-img"})]})),M=a.forwardRef((i,c)=>{const{title:n,image:o,text:r,buttonText:m,onCardClick:l}=i;return t.jsxs(b,{className:"blog-card",onClick:l,children:[t.jsxs(f,{children:[t.jsx("div",{className:"text-wr-title",children:n}),t.jsx("div",{className:"text-wr",children:r}),t.jsx(q,{color:"gray",onClick:l,children:m})]}),t.jsx("img",{src:o})]})}),R=({limit:i=3,isLoading:c=!1,keyPrefix:n})=>t.jsx(t.Fragment,{children:Array.from({length:i},(o,r)=>t.jsx(B,{isLoading:c},`${n}-skeleton-product-card-${r}`))}),W=({children:i,fallbackComponent:c=t.jsx(t.Fragment,{}),isLoading:n=!1,limit:o,keyPrefix:r})=>t.jsx(a.Suspense,{fallbackComponent:c,children:n===!0?t.jsx(R,{isLoading:n,limit:o,keyPrefix:r}):i}),p=a.memo(M),_=a.forwardRef((i,c)=>{const{icon:n,title:o,items:r,buttonText:m,limit:l=3,options:d,onActionClick:w=()=>{},onSelectOption:h=()=>{},isLoading:S=!1,onSectionClick:k=()=>{}}=i,y=x.useDetectMobile(),v=a.useMemo(()=>t.jsx(t.Fragment,{children:y===!0?r==null?void 0:r.map((e,u)=>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,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},u)):r==null?void 0:r.slice(0,l).map((e,u)=>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,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},u))}),[r]);return t.jsxs(C.TitleWithOptionsSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[s.isDefinedNotEmptyString(n)&&t.jsx("i",{className:n}),t.jsx("span",{children:o})]}),s.isDefinedNotEmptyString(k)&&t.jsx(N,{type:"button",btnType:"tinted",color:"gray",onClick:w,borderRadius:"curved",children:m})]}),(d==null?void 0:d.length)>0&&t.jsx(T.SelectBar,{items:d,onRemove:e=>{h(e)},onSelect:e=>{h(e)},labelKey:"name",valueKey:"code",noMargin:!0}),t.jsx($,{limit:l,children:t.jsx(W,{isLoading:S,limit:l,keyPrefix:"explore-landing",children:v})})]})});module.exports=_;