@lanaco/lnc-react-ui 4.0.39 → 4.0.40

package/dist/BlogsSectionDetailed.js

@@ -4,7 +4,7 @@ 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 { B as L, R as z } from "./style-CiePxaJ_.js";
 import M from "./Button.js";
 const R = k.div`
   display: grid;
@@ -20,9 +20,9 @@ const R = k.div`
   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;
@@ -63,7 +63,7 @@ const R = k.div`
   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;
@@ -101,7 +101,7 @@ const R = k.div`
 
     & .mng {
       font-size: 0.875rem;
-      color: var(--gray-300);
+      color: var(--gray-300, #c4c8cf);
     }
   }
 
@@ -116,27 +116,27 @@ const R = k.div`
     align-items: center;
     gap: 1rem;
   }
-`, j = v((i, d) => {
+`, j = v((i, s) => {
   const {
     title: a,
-    image: s,
+    image: d,
     text: l,
     numberOfLikes: n,
     numberOfComments: u,
     readDuration: m,
-    datePublished: g,
-    tags: c,
+    datePublished: c,
+    tags: g,
     onCardClick: f,
     timeToReadText: p = "read"
   } = i;
   return (
     // <BlogCardDetailedSkeleton />
-    /* @__PURE__ */ t(S, { className: "blog-card", onClick: f, children: [
-      /* @__PURE__ */ r("img", { src: s }),
+    /* @__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: g }),
+            /* @__PURE__ */ r("span", { children: c }),
             /* @__PURE__ */ r("span", { className: "small-dot", children: "●" }),
             m && p ? `${m} ${p}` : "N/A"
           ] }),
@@ -154,7 +154,7 @@ const R = k.div`
         /* @__PURE__ */ r("div", { className: "text-wr-title", children: a }),
         /* @__PURE__ */ r("div", { className: "text-wr", children: l })
       ] }),
-      /* @__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)) })
+      /* @__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)) })
     ] })
   );
 }), A = v(({}, i) => /* @__PURE__ */ t(S, { className: "blog-card", children: [
@@ -164,38 +164,37 @@ const R = k.div`
     /* @__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(
+] })), W = ({ limit: i = 3, isLoading: s = !1, keyPrefix: a }) => /* @__PURE__ */ r(w, { children: Array.from({ length: i }, (d, l) => /* @__PURE__ */ r(
   A,
   {
-    isLoading: d
+    isLoading: s
   },
   `${a}-skeleton-product-card-${l}`
 )) }), E = ({
   children: i,
-  fallbackComponent: d = /* @__PURE__ */ r(w, {}),
+  fallbackComponent: s = /* @__PURE__ */ r(w, {}),
   isLoading: a = !1,
-  limit: s,
+  limit: d,
   keyPrefix: l
-}) => /* @__PURE__ */ r(D, { fallbackComponent: d, children: a === !0 ? /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r(D, { fallbackComponent: s, children: a === !0 ? /* @__PURE__ */ r(
   W,
   {
     isLoading: a,
-    limit: s,
+    limit: d,
     keyPrefix: l
   }
-) : i }), N = O(j), J = v((i, d) => {
+) : i }), N = O(j), J = v((i, s) => {
   const {
     icon: a,
-    title: s,
+    title: d,
     onButtonAction: l,
     items: n,
     buttonText: u,
     limit: m = 3,
-    onSelectCard: g = () => {
+    onSelectCard: c = () => {
     },
-    isLoading: c = !1,
-    onSectionClick: f = () => {
-    }
+    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,
     {
@@ -208,7 +207,7 @@ const R = k.div`
       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)
+      onCardClick: () => c(e == null ? void 0 : e.uuid)
     },
     h
   )) : n == null ? void 0 : n.slice(0, m).map((e, h) => /* @__PURE__ */ r(
@@ -223,23 +222,23 @@ const R = k.div`
       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)
+      onCardClick: () => c(e == null ? void 0 : e.uuid)
     },
     h
-  )) }), [n]);
-  return /* @__PURE__ */ t(z, { children: [
+  )) }), [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: [
         y(a) && /* @__PURE__ */ r("i", { className: a }),
-        /* @__PURE__ */ r("span", { children: s })
+        /* @__PURE__ */ r("span", { children: d })
       ] }),
-      y(f) && /* @__PURE__ */ r(
+      y(l) && /* @__PURE__ */ r(
         M,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => l(buttonLink),
+          onClick: () => l(f),
           borderRadius: "curved",
           children: u
         }
@@ -248,7 +247,7 @@ const R = k.div`
     /* @__PURE__ */ r(R, { limit: m, children: /* @__PURE__ */ r(
       E,
       {
-        isLoading: c,
+        isLoading: g,
         limit: m,
         keyPrefix: "explore-landing",
         children: o

package/dist/BlogsSectionLarge.cjs

@@ -1,4 +1,4 @@
-"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`
+"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;
@@ -98,4 +98,4 @@
   @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     padding: 0;
   }
-`,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;
+`,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

@@ -188,8 +188,8 @@ const M = p.div`
       onCardClick: () => a(e)
     },
     c
-  )) }), [r]);
-  return /* @__PURE__ */ t(M, { limit: o, children: /* @__PURE__ */ t(
+  )) }), [r, l, o, a]);
+  return /* @__PURE__ */ t(M, { ref: m, limit: o, children: /* @__PURE__ */ t(
     L,
     {
       isLoading: n,

package/dist/BlogsSectionSimple.cjs

@@ -1,4 +1,4 @@
-"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`
+"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;
@@ -68,4 +68,4 @@
     color: var(--gray-700, #4e555f);
     ${m.truncateTextInRows(3)}
   }
-`,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=_;
+`,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=_;

package/dist/BlogsSectionSimple.js

@@ -1,10 +1,10 @@
-import { jsxs as n, jsx as r, Fragment as g } from "react/jsx-runtime";
+import { jsxs as m, 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 { R as z } from "./style-CiePxaJ_.js";
 import W from "./Button.js";
 import j from "./Link.js";
 const A = h.div`
@@ -79,47 +79,47 @@ const A = h.div`
   }
 `, E = u(({}, t) => (
   // <LandingPageClearProductCardSkeleton />
-  /* @__PURE__ */ n(w, { className: "product-card", children: [
+  /* @__PURE__ */ m(w, { className: "product-card", children: [
     /* @__PURE__ */ r("div", { className: "skeleton-img" }),
     /* @__PURE__ */ r("div", { className: "card-title" }),
     /* @__PURE__ */ r(S, {})
   ] })
-)), I = u((t, m) => {
-  const { title: i, image: l, text: o, onCardClick: d, readMoreText: c = "Read more" } = t;
+)), I = u((t, l) => {
+  const { title: i, image: n, text: o, onCardClick: d, readMoreText: c = "Read more" } = t;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ n(w, { className: "blog-card", onClick: d, children: [
-      /* @__PURE__ */ r("img", { src: l }),
-      /* @__PURE__ */ n(S, { children: [
+    /* @__PURE__ */ m(w, { className: "blog-card", onClick: d, children: [
+      /* @__PURE__ */ r("img", { src: n }),
+      /* @__PURE__ */ m(S, { children: [
         /* @__PURE__ */ r("div", { className: "text-wr-title", children: i }),
         /* @__PURE__ */ r("div", { className: "text-wr", children: o })
       ] }),
       /* @__PURE__ */ r(j, { className: "action", color: "gray", onClick: d, children: c })
     ] })
   );
-}), L = ({ limit: t = 3, isLoading: m = !1, keyPrefix: i }) => /* @__PURE__ */ r(g, { children: Array.from({ length: t }, (l, o) => /* @__PURE__ */ r(
+}), L = ({ limit: t = 3, isLoading: l = !1, keyPrefix: i }) => /* @__PURE__ */ r(g, { children: Array.from({ length: t }, (n, o) => /* @__PURE__ */ r(
   E,
   {
-    isLoading: m
+    isLoading: l
   },
   `${i}-skeleton-product-card-${o}`
 )) }), _ = ({
   children: t,
-  fallbackComponent: m = /* @__PURE__ */ r(g, {}),
+  fallbackComponent: l = /* @__PURE__ */ r(g, {}),
   isLoading: i = !1,
-  limit: l,
+  limit: n,
   keyPrefix: o
-}) => /* @__PURE__ */ r($, { fallbackComponent: m, children: i === !0 ? /* @__PURE__ */ r(
+}) => /* @__PURE__ */ r($, { fallbackComponent: l, children: i === !0 ? /* @__PURE__ */ r(
   L,
   {
     isLoading: i,
-    limit: l,
+    limit: n,
     keyPrefix: o
   }
-) : t }), v = B(I), K = u((t, m) => {
+) : t }), v = B(I), K = u((t, l) => {
   const {
     icon: i,
-    title: l,
+    title: n,
     onButtonAction: o = () => {
     },
     onSelectCard: d = () => {
@@ -150,11 +150,11 @@ const A = h.div`
     },
     p
   )) }), [a]);
-  return /* @__PURE__ */ n(z, { children: [
-    /* @__PURE__ */ n("div", { className: "regular-title", children: [
-      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
+  return /* @__PURE__ */ m(z, { ref: l, children: [
+    /* @__PURE__ */ m("div", { className: "regular-title", children: [
+      /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
         f(i) && /* @__PURE__ */ r("i", { className: i }),
-        /* @__PURE__ */ r("span", { children: l })
+        /* @__PURE__ */ r("span", { children: n })
       ] }),
       f(c) && /* @__PURE__ */ r(
         W,

package/dist/BlogsSectionSimpleCentered.cjs

@@ -1,9 +1,9 @@
-"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`
+"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"),m=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;
-
+  width: fit-content;
   @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
@@ -44,7 +44,7 @@
     min-height: 6rem;
     max-height: 6rem;
     border-radius: 0.75rem;
-    background-color: ${c.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
@@ -65,7 +65,7 @@
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${c.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   & .text-wr {
@@ -73,6 +73,6 @@
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${c.truncateTextInRows(3)}
+    ${m.truncateTextInRows(3)}
   }
-`,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;
+`,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:s,onCardClick:d}=i;return t.jsxs(p,{className:"blog-card",onClick:d,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:d,size:"medium",children:s})]})}),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:s=!1}=i,d=b.useDetectMobile(),w=a.useMemo(()=>t.jsx(t.Fragment,{children:d===!0?r==null?void 0:r.map((e,c)=>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)},c)):r==null?void 0:r.slice(0,n).map((e,c)=>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)},c))}),[r,d,n,o]);return t.jsx(S,{ref:l,limit:n,children:t.jsx(v,{isLoading:s,limit:n,keyPrefix:"explore-landing",children:w})})});module.exports=x;

package/dist/BlogsSectionSimpleCentered.js

@@ -10,11 +10,11 @@ const B = g.div`
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
-
+  width: fit-content;
   @media (max-width: ${h + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, b = g.div`
+`, w = g.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -57,7 +57,7 @@ const B = g.div`
   @media (max-width: ${h + "px"}) {
     max-width: unset;
   }
-`, w = g.div`
+`, b = g.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -86,18 +86,18 @@ const B = g.div`
   const { onCardClick: r } = i;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ c(b, { className: "product-card", onClick: r, children: [
+    /* @__PURE__ */ c(w, { className: "product-card", onClick: r, children: [
       /* @__PURE__ */ t("div", { "skeleton-img": !0 }),
-      /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
+      /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
     ] })
   );
 }), z = u((i, a) => {
   const { title: r, image: o, text: n, buttonText: m, onCardClick: l } = i;
   return (
     // <SimpleBlogCardCenteredSkeleton />
-    /* @__PURE__ */ c(b, { className: "blog-card", onClick: l, children: [
+    /* @__PURE__ */ c(w, { className: "blog-card", onClick: l, children: [
       /* @__PURE__ */ t("img", { src: o }),
-      /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ c(b, { children: [
         /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
         /* @__PURE__ */ t("div", { className: "text-wr", children: n })
       ] }),
@@ -163,8 +163,8 @@ const B = g.div`
       onCardClick: () => n(e == null ? void 0 : e.uuid)
     },
     d
-  )) }), [r]);
-  return /* @__PURE__ */ t(B, { limit: o, children: /* @__PURE__ */ t(
+  )) }), [r, l, o, n]);
+  return /* @__PURE__ */ t(B, { ref: a, limit: o, children: /* @__PURE__ */ t(
     P,
     {
       isLoading: m,

package/dist/BlogsSectionWithFilters.cjs

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