@lanaco/lnc-react-ui 4.0.170 → 4.0.171

package/dist/BlogsSectionLarge.js

@@ -1,63 +1,99 @@
-import { jsx as r, Fragment as S } from "react/jsx-runtime";
-import { memo as C, forwardRef as b, useMemo as B } from "react";
-import { s as M } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as L } from "./consts-BuFChS64.js";
-import { u as h } from "./useDetectMobile-Bkvj0VMa.js";
-import { B as T } from "./index-1Dm1i6WK.js";
-import { S as U } from "./suspense-large-BMO7JH52.js";
-const k = M.div`
+import { jsxs as k, jsx as t, Fragment as p } from "react/jsx-runtime";
+import { Suspense as B, memo as L, forwardRef as M, useMemo as $ } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as S } from "./consts-BuFChS64.js";
+import { u as w } from "./useDetectMobile-Bkvj0VMa.js";
+import { B as R } from "./index-DFdPWO4O.js";
+import { a as T, b as u } from "./style-CXMUA6cI.js";
+const U = f.div`
   display: grid;
   grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${L + "px"}) {
+  @media (max-width: ${S + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, c = C(T), _ = b((o, u) => {
+`, I = f(T)`
+  @media (max-width: ${S + "px"}) {
+    flex-direction: column;
+
+    & > div {
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        #f4f6fb 40%,
+        #f4f6fb 100%
+      );
+
+      box-shadow: none;
+    }
+  }
+`, P = ({ keyPrefix: o }) => /* @__PURE__ */ k(I, { children: [
+  /* @__PURE__ */ t(
+    u,
+    {
+      height: "11.25rem",
+      borderRadius: "0.75rem"
+    },
+    `${o}-1`
+  ),
+  /* @__PURE__ */ t(
+    u,
+    {
+      height: "11.25rem",
+      borderRadius: "0.75rem"
+    },
+    `${o}-2`
+  )
+] }), j = ({
+  keyPrefix: o,
+  isLoading: a = !1,
+  fallbackComponent: r = /* @__PURE__ */ t(p, {}),
+  children: i
+}) => /* @__PURE__ */ t(B, { fallbackComponent: r, children: a === !0 ? /* @__PURE__ */ t(P, { keyPrefix: o }) : i }), g = L(R), F = M((o, a) => {
   const {
-    items: t,
-    onSelectCard: a = () => {
+    items: r,
+    onSelectCard: i = () => {
     },
-    limit: i = 2,
-    isLoading: g = !1,
-    getImage: n = () => {
+    limit: l = 2,
+    isLoading: b = !1,
+    getImage: m = () => {
     },
-    componentName: s
-  } = o, d = h(), p = B(() => /* @__PURE__ */ r(S, { children: d === !0 ? t == null ? void 0 : t.map((e, l) => /* @__PURE__ */ r(
-    c,
+    componentName: d
+  } = o, c = w(), h = $(() => /* @__PURE__ */ t(p, { children: c === !0 ? r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ t(
+    g,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: n(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: m(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
       buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: (f, m) => a(e == null ? void 0 : e.titleSlug, m),
-      metadata: { name: s, accessor: e == null ? void 0 : e.accessor }
+      onCardClick: (C, s) => i(e == null ? void 0 : e.titleSlug, s),
+      metadata: { name: d, accessor: e == null ? void 0 : e.accessor }
     },
-    l
-  )) : t == null ? void 0 : t.slice(0, i).map((e, l) => /* @__PURE__ */ r(
-    c,
+    n
+  )) : r == null ? void 0 : r.slice(0, l).map((e, n) => /* @__PURE__ */ t(
+    g,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: n(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: m(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
       buttonText: e == null ? void 0 : e.buttonText,
-      onCardClick: (f, m) => a(e == null ? void 0 : e.titleSlug, m),
-      metadata: { name: s, accessor: e == null ? void 0 : e.accessor }
+      onCardClick: (C, s) => i(e == null ? void 0 : e.titleSlug, s),
+      metadata: { name: d, accessor: e == null ? void 0 : e.accessor }
     },
-    l
-  )) }), [t, d, i, a]);
-  return /* @__PURE__ */ r(k, { ref: u, limit: i, children: /* @__PURE__ */ r(
-    U,
+    n
+  )) }), [r, c, l, i]);
+  return /* @__PURE__ */ t(
+    j,
     {
-      isLoading: g,
-      limit: i,
-      keyPrefix: "explore-landing",
-      children: p
+      isLoading: b,
+      keyPrefix: "blogs-large-skeleton",
+      children: /* @__PURE__ */ t(U, { ref: a, limit: l, children: h })
     }
-  ) });
+  );
 });
 export {
-  _ as default
+  F as default
 };

package/dist/BlogsSectionSimple.cjs

@@ -1,12 +1,12 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),w=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),f=require("./utils-Dl9xPH4c.cjs"),k=require("./style-Db3VFbfP.cjs"),T=require("./Button.cjs"),$=require("./Link.cjs"),I=require("./index-BueKsXT8.cjs"),P=w.styled.div`
+"use strict";const r=require("react/jsx-runtime"),m=require("react"),w=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./consts-goSZX3xP.cjs"),R=require("./useDetectMobile-zkbzoOGV.cjs"),d=require("./utils-Dl9xPH4c.cjs"),k=require("./style-Db3VFbfP.cjs"),M=require("./Button.cjs"),B=require("./Link.cjs"),T=require("./index-BueKsXT8.cjs"),E=require("./index-D-3I_Ppj.cjs"),I=w.styled.div`
   display: grid;
-  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${l=>`repeat(${l.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,N=w.styled.div`
+`,$=w.styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -30,7 +30,7 @@
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${f.linearGradientAnimation("-90deg")};
+    background-color: ${d.linearGradientAnimation("-90deg")};
   }
 
   & .action {
@@ -56,9 +56,9 @@
     padding: 1rem;
   }
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
   }
-`,C=w.styled.div`
+`,D=w.styled.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -76,6 +76,6 @@
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${f.truncateTextInRows(3)}
+    ${d.truncateTextInRows(3)}
   }
-`,_=c.forwardRef((t,d)=>{const{title:o,imageUrl:m,text:l,options:a,onCardClick:p,readMoreText:s="Read more",metadata:n}=t,g=c.useRef();return r.jsxs(N,{ref:g,name:n==null?void 0:n.name,"data-accessor":n==null?void 0:n.name,className:"blog-card",onClick:i=>p(i,g),children:[r.jsx(I.ProductImageWrapper,{src:m}),r.jsxs(C,{children:[r.jsx("div",{className:"text-wr-title",children:o}),r.jsx("div",{className:"text-wr",children:l})]}),a&&r.jsx("div",{className:"tags-wr",children:a==null?void 0:a.map((i,h)=>r.jsx(k.BlogTag,{color:i==null?void 0:i.color,children:i==null?void 0:i.name},h))}),r.jsx($,{className:"action",color:"gray",onClick:p,children:s})]})}),E=c.forwardRef(({},t)=>r.jsxs(N,{className:"product-card",children:[r.jsx("div",{className:"skeleton-img"}),r.jsx("div",{className:"card-title"}),r.jsx(C,{})]})),z=({limit:t=3,isLoading:d=!1,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:t},(m,l)=>r.jsx(E,{isLoading:d},`${o}-skeleton-product-card-${l}`))}),U=({children:t,fallbackComponent:d=r.jsx(r.Fragment,{}),isLoading:o=!1,limit:m,keyPrefix:l})=>r.jsx(c.Suspense,{fallbackComponent:d,children:o===!0?r.jsx(z,{isLoading:o,limit:m,keyPrefix:l}):t}),b=c.memo(_),W=c.forwardRef((t,d)=>{const{icon:o,title:m,onButtonAction:l=()=>{},onSelectCard:a=()=>{},buttonLink:p,items:s,buttonText:n,limit:g=3,isLoading:i=!1,getImage:h=()=>{},readMoreText:y="Read more",componentName:S}=t,R=M.useDetectMobile(),q=c.useMemo(()=>r.jsx(r.Fragment,{children:R===!0?s==null?void 0:s.map((e,u)=>r.jsx(b,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:y,options:e==null?void 0:e.options,onCardClick:(B,j)=>a(e==null?void 0:e.titleSlug,j),metadata:{name:S,accessor:e==null?void 0:e.accessor}},u)):s==null?void 0:s.slice(0,g).map((e,u)=>r.jsx(b,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:y,options:e==null?void 0:e.options,onCardClick:(B,j)=>a(e==null?void 0:e.titleSlug,j),metadata:{name:S,accessor:e==null?void 0:e.accessor}},u))}),[s]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:d,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[f.isDefinedNotEmptyString(o)&&r.jsx("i",{className:o}),r.jsx("span",{children:m})]}),f.isDefinedNotEmptyString(p)&&r.jsx(T,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var u;(u=e==null?void 0:e.target)==null||u.blur(),l(p)},borderRadius:"curved",className:"button-link",children:n})]}),r.jsx(P,{limit:g,children:r.jsx(U,{isLoading:i,limit:g,keyPrefix:"explore-landing",children:q})})]})});module.exports=W;
+`,P=m.forwardRef((l,y)=>{const{title:g,imageUrl:u,text:h,options:n,onCardClick:a,readMoreText:i="Read more",metadata:o}=l,c=m.useRef();return r.jsxs($,{ref:c,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.name,className:"blog-card",onClick:t=>a(t,c),children:[r.jsx(T.ProductImageWrapper,{src:u}),r.jsxs(D,{children:[r.jsx("div",{className:"text-wr-title",children:g}),r.jsx("div",{className:"text-wr",children:h})]}),n&&r.jsx("div",{className:"tags-wr",children:n==null?void 0:n.map((t,p)=>r.jsx(k.BlogTag,{color:t==null?void 0:t.color,children:t==null?void 0:t.name},p))}),r.jsx(B,{className:"action",color:"gray",onClick:a,children:i})]})}),v=m.memo(P),_=m.forwardRef((l,y)=>{const{icon:g,title:u,onButtonAction:h=()=>{},onSelectCard:n=()=>{},buttonLink:a,items:i,buttonText:o,limit:c=3,isLoading:t=!1,getImage:p=()=>{},readMoreText:b="Read more",componentName:j}=l,N=R.useDetectMobile(),C=m.useMemo(()=>r.jsx(r.Fragment,{children:N===!0?i==null?void 0:i.map((e,s)=>r.jsx(v,{title:e==null?void 0:e.title,imageUrl:p(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:b,options:e==null?void 0:e.options,onCardClick:(q,f)=>n(e==null?void 0:e.titleSlug,f),metadata:{name:j,accessor:e==null?void 0:e.accessor}},s)):i==null?void 0:i.slice(0,c).map((e,s)=>r.jsx(v,{title:e==null?void 0:e.title,imageUrl:p(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:b,options:e==null?void 0:e.options,onCardClick:(q,f)=>n(e==null?void 0:e.titleSlug,f),metadata:{name:j,accessor:e==null?void 0:e.accessor}},s))}),[i]);return r.jsxs(k.RegulatTitleSectionWrapper,{ref:y,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(g)&&r.jsx("i",{className:g}),r.jsx("span",{children:u})]}),d.isDefinedNotEmptyString(o)&&d.isDefinedNotEmptyString(a)&&!t&&r.jsx(M,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var s;(s=e==null?void 0:e.target)==null||s.blur(),h(a)},borderRadius:"curved",className:"button-link",children:o})]}),r.jsx(E.SuspenseBlogsSectionDetailed,{isLoading:t,keyPrefix:"blogs-simple-skeleton",children:r.jsx(I,{limit:c,children:C})})]})});module.exports=_;

package/dist/BlogsSectionSimple.js

@@ -1,22 +1,23 @@
-import { jsxs as g, jsx as r, Fragment as v } from "react/jsx-runtime";
-import { forwardRef as w, useRef as P, Suspense as z, memo as I, useMemo as U } from "react";
-import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { jsxs as c, jsx as r, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as k, useRef as T, memo as P, useMemo as $ } from "react";
+import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as C } from "./consts-BuFChS64.js";
-import { u as W } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as j, p as A, k as y } from "./utils-BdsZgOUE.js";
-import { B as E, R as L } from "./style-DKAOBWn3.js";
-import _ from "./Button.js";
+import { u as z } from "./useDetectMobile-Bkvj0VMa.js";
+import { w as I, o as U, k as h } from "./utils-DHfRApMf.js";
+import { B as W, R as L } from "./style-D3pIrH3v.js";
+import j from "./Button.js";
 import D from "./Link.js";
-import { P as G } from "./index-CF3HhgvN.js";
-const F = b.div`
+import { P as E } from "./index-BbltNcou.js";
+import { S as A } from "./index-BovNbKxB.js";
+const G = w.div`
   display: grid;
-  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(n) => `repeat(${n.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
   @media (max-width: ${C + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, B = b.div`
+`, _ = w.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -40,7 +41,7 @@ const F = b.div`
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${j("-90deg")};
+    background-color: ${I("-90deg")};
   }
 
   & .action {
@@ -68,7 +69,7 @@ const F = b.div`
 
   @media (max-width: ${C + "px"}) {
   }
-`, R = b.div`
+`, F = w.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -86,140 +87,113 @@ const F = b.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${A(3)}
+    ${U(3)}
   }
-`, O = w((t, m) => {
+`, O = k((n, b) => {
   const {
-    title: o,
-    imageUrl: s,
-    text: n,
-    options: c,
-    onCardClick: u,
-    readMoreText: a = "Read more",
-    metadata: l
-  } = t, d = P();
-  return /* @__PURE__ */ g(
-    B,
+    title: d,
+    imageUrl: g,
+    text: u,
+    options: a,
+    onCardClick: m,
+    readMoreText: i = "Read more",
+    metadata: o
+  } = n, s = T();
+  return /* @__PURE__ */ c(
+    _,
     {
-      ref: d,
-      name: l == null ? void 0 : l.name,
-      "data-accessor": l == null ? void 0 : l.name,
+      ref: s,
+      name: o == null ? void 0 : o.name,
+      "data-accessor": o == null ? void 0 : o.name,
       className: "blog-card",
-      onClick: (i) => u(i, d),
+      onClick: (t) => m(t, s),
       children: [
-        /* @__PURE__ */ r(G, { src: s }),
-        /* @__PURE__ */ g(R, { children: [
-          /* @__PURE__ */ r("div", { className: "text-wr-title", children: o }),
-          /* @__PURE__ */ r("div", { className: "text-wr", children: n })
+        /* @__PURE__ */ r(E, { src: g }),
+        /* @__PURE__ */ c(F, { children: [
+          /* @__PURE__ */ r("div", { className: "text-wr-title", children: d }),
+          /* @__PURE__ */ r("div", { className: "text-wr", children: u })
         ] }),
-        c && /* @__PURE__ */ r("div", { className: "tags-wr", children: c == null ? void 0 : c.map((i, f) => /* @__PURE__ */ r(E, { color: i == null ? void 0 : i.color, children: i == null ? void 0 : i.name }, f)) }),
-        /* @__PURE__ */ r(D, { className: "action", color: "gray", onClick: u, children: a })
+        a && /* @__PURE__ */ r("div", { className: "tags-wr", children: a == null ? void 0 : a.map((t, p) => /* @__PURE__ */ r(W, { color: t == null ? void 0 : t.color, children: t == null ? void 0 : t.name }, p)) }),
+        /* @__PURE__ */ r(D, { className: "action", color: "gray", onClick: m, children: i })
       ]
     }
   );
-}), X = w(({}, t) => (
-  // <LandingPageClearProductCardSkeleton />
-  /* @__PURE__ */ g(B, { className: "product-card", children: [
-    /* @__PURE__ */ r("div", { className: "skeleton-img" }),
-    /* @__PURE__ */ r("div", { className: "card-title" }),
-    /* @__PURE__ */ r(R, {})
-  ] })
-)), Z = ({ limit: t = 3, isLoading: m = !1, keyPrefix: o }) => /* @__PURE__ */ r(v, { children: Array.from({ length: t }, (s, n) => /* @__PURE__ */ r(
-  X,
-  {
-    isLoading: m
-  },
-  `${o}-skeleton-product-card-${n}`
-)) }), q = ({
-  children: t,
-  fallbackComponent: m = /* @__PURE__ */ r(v, {}),
-  isLoading: o = !1,
-  limit: s,
-  keyPrefix: n
-}) => /* @__PURE__ */ r(z, { fallbackComponent: m, children: o === !0 ? /* @__PURE__ */ r(
-  Z,
-  {
-    isLoading: o,
-    limit: s,
-    keyPrefix: n
-  }
-) : t }), N = I(O), ie = w((t, m) => {
+}), S = P(O), re = k((n, b) => {
   const {
-    icon: o,
-    title: s,
-    onButtonAction: n = () => {
+    icon: d,
+    title: g,
+    onButtonAction: u = () => {
     },
-    onSelectCard: c = () => {
+    onSelectCard: a = () => {
     },
-    buttonLink: u,
-    items: a,
-    buttonText: l,
-    limit: d = 3,
-    isLoading: i = !1,
-    getImage: f = () => {
+    buttonLink: m,
+    items: i,
+    buttonText: o,
+    limit: s = 3,
+    isLoading: t = !1,
+    getImage: p = () => {
     },
-    readMoreText: S = "Read more",
-    componentName: k
-  } = t, M = W(), T = U(() => /* @__PURE__ */ r(v, { children: M === !0 ? a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
-    N,
+    readMoreText: v = "Read more",
+    componentName: y
+  } = n, N = z(), R = $(() => /* @__PURE__ */ r(M, { children: N === !0 ? i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
+    S,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: p(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: S,
+      readMoreText: v,
       options: e == null ? void 0 : e.options,
-      onCardClick: ($, h) => c(e == null ? void 0 : e.titleSlug, h),
-      metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
+      onCardClick: (B, f) => a(e == null ? void 0 : e.titleSlug, f),
+      metadata: { name: y, accessor: e == null ? void 0 : e.accessor }
     },
-    p
-  )) : a == null ? void 0 : a.slice(0, d).map((e, p) => /* @__PURE__ */ r(
-    N,
+    l
+  )) : i == null ? void 0 : i.slice(0, s).map((e, l) => /* @__PURE__ */ r(
+    S,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: p(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: S,
+      readMoreText: v,
       options: e == null ? void 0 : e.options,
-      onCardClick: ($, h) => c(e == null ? void 0 : e.titleSlug, h),
-      metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
+      onCardClick: (B, f) => a(e == null ? void 0 : e.titleSlug, f),
+      metadata: { name: y, accessor: e == null ? void 0 : e.accessor }
     },
-    p
-  )) }), [a]);
-  return /* @__PURE__ */ g(L, { ref: m, children: [
-    /* @__PURE__ */ g("div", { className: "regular-title", children: [
-      /* @__PURE__ */ g("div", { className: "regular-title-text", children: [
-        y(o) && /* @__PURE__ */ r("i", { className: o }),
-        /* @__PURE__ */ r("span", { children: s })
+    l
+  )) }), [i]);
+  return /* @__PURE__ */ c(L, { ref: b, children: [
+    /* @__PURE__ */ c("div", { className: "regular-title", children: [
+      /* @__PURE__ */ c("div", { className: "regular-title-text", children: [
+        h(d) && /* @__PURE__ */ r("i", { className: d }),
+        /* @__PURE__ */ r("span", { children: g })
       ] }),
-      y(u) && /* @__PURE__ */ r(
-        _,
+      h(o) && h(m) && !t && /* @__PURE__ */ r(
+        j,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
-            var p;
-            (p = e == null ? void 0 : e.target) == null || p.blur(), n(u);
+            var l;
+            (l = e == null ? void 0 : e.target) == null || l.blur(), u(m);
           },
           borderRadius: "curved",
           className: "button-link",
-          children: l
+          children: o
         }
       )
     ] }),
-    /* @__PURE__ */ r(F, { limit: d, children: /* @__PURE__ */ r(
-      q,
+    /* @__PURE__ */ r(
+      A,
       {
-        isLoading: i,
-        limit: d,
-        keyPrefix: "explore-landing",
-        children: T
+        isLoading: t,
+        keyPrefix: "blogs-simple-skeleton",
+        children: /* @__PURE__ */ r(G, { limit: s, children: R })
       }
-    ) })
+    )
   ] });
 });
 export {
-  ie as default
+  re as default
 };

package/dist/BlogsSectionSimpleCentered.cjs

@@ -1,13 +1,13 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./consts-goSZX3xP.cjs"),C=require("./useDetectMobile-zkbzoOGV.cjs"),h=require("./utils-Dl9xPH4c.cjs"),k=require("./Button.cjs"),x=require("./index-BueKsXT8.cjs"),y=p.styled.div`
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),w=require("./useDetectMobile-zkbzoOGV.cjs"),j=require("./utils-Dl9xPH4c.cjs"),S=require("./Button.cjs"),y=require("./index-BueKsXT8.cjs"),d=require("./style-BAcV7F53.cjs"),C=u.styled.div`
   display: grid;
-  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,b=p.styled.div`
+`,x=u.styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -43,19 +43,10 @@
     object-fit: cover;
   }
 
-  & .skeleton-img {
-    max-width: 6rem;
-    min-width: 6rem;
-    min-height: 6rem;
-    max-height: 6rem;
-    border-radius: 0.75rem;
-    background-color: ${h.linearGradientAnimation("-90deg")};
-  }
-
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
     max-width: unset;
   }
-`,j=p.styled.div`
+`,v=u.styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -70,18 +61,29 @@
     line-height: 1.75rem;
   }
 
-  & .skeleton-title {
-    height: 1.75rem;
-    width: 80%;
-    background-color: ${h.linearGradientAnimation("-90deg")};
-  }
-
   & .text-wr {
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
     letter-spacing: 0.0156rem;
-    ${h.truncateTextInRows(3)}
+    ${j.truncateTextInRows(3)}
+  }
+`,b=m.forwardRef((r,a)=>{const{title:i,image:o,text:l,buttonText:h,onCardClick:c,metadata:n}=r,e=m.useRef(),s=g=>{c(g,e)};return t.jsxs(x,{ref:e,name:n==null?void 0:n.name,"data-accessor":n==null?void 0:n.accessor,className:"blog-card",onClick:s,children:[t.jsx(y.ProductImageWrapper,{src:o}),t.jsxs(v,{children:[t.jsx("div",{className:"text-wr-title",children:i}),t.jsx("div",{className:"text-wr",children:l})]}),t.jsx(S,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:s,size:"medium",children:h})]})}),k=u.styled(d.SkeletonRowWrapper)`
+  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        #f4f6fb 40%,
+        #f4f6fb 100%
+      );
+
+      box-shadow: none;
+    }
   }
-`,f=c.forwardRef((i,a)=>{const{title:r,image:n,text:o,buttonText:m,onCardClick:d,metadata:s}=i,e=c.useRef(),l=g=>{d(g,e)};return t.jsxs(b,{ref:e,name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,className:"blog-card",onClick:l,children:[t.jsx(x.ProductImageWrapper,{src:n}),t.jsxs(j,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(k,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:l,size:"medium",children:m})]})}),v=c.forwardRef((i,a)=>{const{onCardClick:r}=i;return t.jsxs(b,{className:"product-card",onClick:r,children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(j,{children:t.jsx("div",{className:"skeleton-title"})})]})}),S=({limit:i=3,isLoading:a=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(v,{isLoading:a},`${r}-skeleton-product-card-${o}`))}),R=({children:i,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(c.Suspense,{fallbackComponent:a,children:r===!0?t.jsx(S,{isLoading:r,limit:n,keyPrefix:o}):i}),$=c.forwardRef((i,a)=>{const{items:r,limit:n=3,onSelectCard:o=()=>{},isLoading:m=!1,componentName:d}=i,s=C.useDetectMobile();return t.jsx(y,{ref:a,limit:n,children:t.jsx(R,{isLoading:m,limit:n,keyPrefix:"explore-landing",children:t.jsx(t.Fragment,{children:s===!0?r==null?void 0:r.map((e,l)=>t.jsx(f,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,u)=>o(e,u),metadata:{name:d,accessor:e==null?void 0:e.accessor}},l)):r==null?void 0:r.slice(0,n).map((e,l)=>t.jsx(f,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,u)=>o(e,u),metadata:{name:d,accessor:e==null?void 0:e.accessor}},l))})})})});module.exports=$;
+`,R=({keyPrefix:r})=>t.jsxs(k,{justifyContent:"center",alignItems:"center",children:[t.jsx(d.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-1`),t.jsx(d.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-2`),t.jsx(d.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-3`)]}),$=({keyPrefix:r,isLoading:a=!1,fallbackComponent:i=t.jsx(t.Fragment,{}),children:o})=>t.jsx(m.Suspense,{fallbackComponent:i,children:a===!0?t.jsx(R,{keyPrefix:r}):o}),q=m.forwardRef((r,a)=>{const{items:i,limit:o=3,onSelectCard:l=()=>{},isLoading:h=!1,componentName:c}=r,n=w.useDetectMobile();return t.jsx($,{isLoading:h,keyPrefix:"blogs-simple-centered-skeleton",children:t.jsx(C,{ref:a,limit:o,children:t.jsx(t.Fragment,{children:n===!0?i==null?void 0:i.map((e,s)=>t.jsx(b,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,p)=>l(e,p),metadata:{name:c,accessor:e==null?void 0:e.accessor}},s)):i==null?void 0:i.slice(0,o).map((e,s)=>t.jsx(b,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,p)=>l(e,p),metadata:{name:c,accessor:e==null?void 0:e.accessor}},s))})})})});module.exports=q;