@lanaco/lnc-react-ui 4.0.206 → 4.0.208

package/dist/BlogsSectionDetailed.js

@@ -1,22 +1,30 @@
-import { jsxs as r, jsx as t, Fragment as B } from "react/jsx-runtime";
-import { forwardRef as T, useRef as $, memo as A, useMemo as z } from "react";
-import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as L } from "./consts-BuFChS64.js";
-import { u as D } from "./useDetectMobile-Bkvj0VMa.js";
-import { m as M, s as j, q as I, v as S, k as N } from "./utils-DtEfC-TX.js";
-import { B as P, R as U } from "./style-neMbLWE6.js";
-import W from "./Button.js";
-import { P as E } from "./index-B22BZVBG.js";
-import { S as _ } from "./index-CBMsUFkS.js";
-const q = C.div`
+import { jsxs as r, jsx as t, Fragment as $ } from "react/jsx-runtime";
+import { forwardRef as L, useRef as B, memo as A, useMemo as z } from "react";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as w } from "./breakpoints-ff0SIcV3.js";
+import { u as D } from "./useDetectMobile-CcVo3PNi.js";
+import { n as j, s as M, q as U, v as R, l as C } from "./utils-B2fsQ6PS.js";
+import { B as W, R as P } from "./style-BUyFad_y.js";
+import I from "./Button.js";
+import { P as q } from "./index-BvMY2TbK.js";
+import { S as E } from "./index-hC-E71GE.js";
+const F = S.div`
   display: grid;
   grid-template-columns: ${(l) => `repeat(${l.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${L + "px"}) {
+  @media ${w("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${w("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${w("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`, F = C.a`
+`, G = S.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -55,11 +63,11 @@ const q = C.div`
     gap: 0.5rem;
   }
 
-  @media (max-width: ${L + "px"}) {
+  @media ${w("S")} {
     max-height: 100%;
     min-height: 100%;
   }
-`, G = C.div`
+`, X = S.div`
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -75,7 +83,7 @@ const q = C.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${M(2)}
+    ${j(2)}
   }
 
   & .info-wr {
@@ -104,11 +112,11 @@ const q = C.div`
     align-items: center;
     gap: 1rem;
   }
-`, X = T((l, k) => {
+`, H = L((l, k) => {
   const {
     title: g,
-    imageUrl: w,
-    text: v,
+    imageUrl: v,
+    text: y,
     numberOfLikes: i,
     numberOfComments: f,
     timeToRead: s,
@@ -119,9 +127,9 @@ const q = C.div`
     metadata: a,
     titleSlug: d,
     LinkComponent: p
-  } = l, h = p || "a", b = $();
+  } = l, h = p || "a", b = B();
   return /* @__PURE__ */ r(
-    F,
+    G,
     {
       ref: b,
       className: "blog-card",
@@ -131,42 +139,42 @@ const q = C.div`
       as: h,
       ...p ? { to: `/blog/${d}` } : { href: `/blog/${d}` },
       children: [
-        /* @__PURE__ */ t(E, { src: w }),
+        /* @__PURE__ */ t(q, { src: v }),
         /* @__PURE__ */ r("div", { className: "blog-card-content", children: [
-          /* @__PURE__ */ r(G, { children: [
+          /* @__PURE__ */ r(X, { children: [
             /* @__PURE__ */ r("div", { className: "info-wr", children: [
               /* @__PURE__ */ r("div", { className: "info-wr-1", children: [
                 /* @__PURE__ */ r("span", { children: [
-                  I(m),
+                  U(m),
                   " "
                 ] }),
                 /* @__PURE__ */ t("span", { className: "small-dot", children: "●" }),
-                s && c ? `${j(c, s)}` : "N/A"
+                s && c ? `${M(c, s)}` : "N/A"
               ] }),
               /* @__PURE__ */ r("div", { className: "info-wr-2", children: [
                 /* @__PURE__ */ r("span", { className: "info-wr-1", children: [
                   /* @__PURE__ */ t("i", { className: "mng mng-lnc-thumbs-up--filled" }),
-                  /* @__PURE__ */ t("span", { children: S(i) })
+                  /* @__PURE__ */ t("span", { children: R(i) })
                 ] }),
                 /* @__PURE__ */ r("span", { className: "info-wr-1", children: [
                   /* @__PURE__ */ t("i", { className: "mng mng-lnc-messages-filled" }),
-                  /* @__PURE__ */ t("span", { children: S(f) })
+                  /* @__PURE__ */ t("span", { children: R(f) })
                 ] })
               ] })
             ] }),
             /* @__PURE__ */ t("div", { className: "text-wr-title", children: g }),
-            /* @__PURE__ */ t("div", { className: "text-wr", children: v })
+            /* @__PURE__ */ t("div", { className: "text-wr", children: y })
           ] }),
-          o && /* @__PURE__ */ t("div", { className: "tags-wr", children: o == null ? void 0 : o.map((e, n) => /* @__PURE__ */ t(P, { color: e == null ? void 0 : e.color, children: e == null ? void 0 : e.name }, n)) })
+          o && /* @__PURE__ */ t("div", { className: "tags-wr", children: o == null ? void 0 : o.map((e, n) => /* @__PURE__ */ t(W, { color: e == null ? void 0 : e.color, children: e == null ? void 0 : e.name }, n)) })
         ] })
       ]
     }
   );
-}), R = A(X), re = T((l, k) => {
+}), T = A(H), re = L((l, k) => {
   const {
     icon: g,
-    title: w,
-    onButtonAction: v,
+    title: v,
+    onButtonAction: y,
     items: i,
     buttonText: f,
     timeToReadText: s,
@@ -179,8 +187,8 @@ const q = C.div`
     },
     componentName: d,
     LinkComponent: p
-  } = l, h = D(), b = z(() => /* @__PURE__ */ t(B, { children: h === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ t(
-    R,
+  } = l, h = D(), b = z(() => /* @__PURE__ */ t($, { children: h === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ t(
+    T,
     {
       title: e == null ? void 0 : e.title,
       text: e == null ? void 0 : e.description,
@@ -191,14 +199,14 @@ const q = C.div`
       timeToRead: e == null ? void 0 : e.timeToRead,
       timeToReadText: s,
       tags: e == null ? void 0 : e.tags,
-      onCardClick: (O, y) => o(e == null ? void 0 : e.titleSlug, y),
+      onCardClick: (O, N) => o(e == null ? void 0 : e.titleSlug, N),
       imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
       LinkComponent: p
     },
     n
   )) : i == null ? void 0 : i.slice(0, m).map((e, n) => /* @__PURE__ */ t(
-    R,
+    T,
     {
       title: e == null ? void 0 : e.title,
       imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
@@ -210,27 +218,27 @@ const q = C.div`
       publishedAt: e == null ? void 0 : e.publishedAt,
       timeToRead: e == null ? void 0 : e.timeToRead,
       timeToReadText: s,
-      onCardClick: (O, y) => o(e == null ? void 0 : e.titleSlug, y),
+      onCardClick: (O, N) => o(e == null ? void 0 : e.titleSlug, N),
       metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
       LinkComponent: p
     },
     n
   )) }), [i, h, m, o]);
-  return /* @__PURE__ */ r(U, { ref: k, children: [
+  return /* @__PURE__ */ r(P, { ref: k, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: [
       /* @__PURE__ */ r("div", { className: "regular-title-text", children: [
-        N(g) && /* @__PURE__ */ t("i", { className: g }),
-        /* @__PURE__ */ t("span", { children: w })
+        C(g) && /* @__PURE__ */ t("i", { className: g }),
+        /* @__PURE__ */ t("span", { children: v })
       ] }),
-      N(f) && N(c) && !u && /* @__PURE__ */ t(
-        W,
+      C(f) && C(c) && !u && /* @__PURE__ */ t(
+        I,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
             var n;
-            (n = e == null ? void 0 : e.target) == null || n.blur(), v(c);
+            (n = e == null ? void 0 : e.target) == null || n.blur(), y(c);
           },
           borderRadius: "curved",
           className: "button-link",
@@ -239,11 +247,11 @@ const q = C.div`
       )
     ] }),
     /* @__PURE__ */ t(
-      _,
+      E,
       {
         isLoading: u,
         keyPrefix: "blogs-detailed-skeleton",
-        children: /* @__PURE__ */ t(q, { limit: m, children: b })
+        children: /* @__PURE__ */ t(F, { limit: m, children: b })
       }
     )
   ] });

package/dist/BlogsSectionLarge.cjs

@@ -1,13 +1,21 @@
-"use strict";const t=require("react/jsx-runtime"),n=require("react"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),h=require("./consts-goSZX3xP.cjs"),k=require("./useDetectMobile-zkbzoOGV.cjs"),C=require("./index-BWE-RCPy.cjs"),d=require("./style-BAcV7F53.cjs"),q=b.styled.div`
+"use strict";const t=require("react/jsx-runtime"),l=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./breakpoints-CcVm-gVm.cjs"),C=require("./useDetectMobile-DYV6V1yw.cjs"),w=require("./index-CBZ-jNah.cjs"),u=require("./style-BAcV7F53.cjs"),L=f.styled.div`
   display: grid;
   grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media ${i.down("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${i.down("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${i.down("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`,B=b.styled(d.SkeletonRowWrapper)`
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+`,$=f.styled(u.SkeletonRowWrapper)`
+  @media ${i.down("S")} {
     flex-direction: column;
 
     & > div {
@@ -21,4 +29,4 @@
       box-shadow: none;
     }
   }
-`,M=({keyPrefix:o})=>t.jsxs(B,{children:[t.jsx(d.SkeletonLinePlaceholder,{height:"11.25rem",borderRadius:"0.75rem"},`${o}-1`),t.jsx(d.SkeletonLinePlaceholder,{height:"11.25rem",borderRadius:"0.75rem"},`${o}-2`)]}),w=({keyPrefix:o,isLoading:s=!1,fallbackComponent:r=t.jsx(t.Fragment,{}),children:i})=>t.jsx(n.Suspense,{fallbackComponent:r,children:s===!0?t.jsx(M,{keyPrefix:o}):i}),S=n.memo(C.BlogCardLarge),R=n.forwardRef((o,s)=>{const{items:r,onSelectCard:i=()=>{},limit:l=2,isLoading:f=!1,getImage:u=()=>{},componentName:m,LinkComponent:g}=o,p=k.useDetectMobile(),j=n.useMemo(()=>t.jsx(t.Fragment,{children:p===!0?r==null?void 0:r.map((e,a)=>t.jsx(S,{title:e==null?void 0:e.title,imageUrl:u(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:(L,c)=>i(e==null?void 0:e.titleSlug,c),metadata:{name:m,accessor:e==null?void 0:e.accessor},LinkComponent:g},a)):r==null?void 0:r.slice(0,l).map((e,a)=>t.jsx(S,{title:e==null?void 0:e.title,imageUrl:u(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:(L,c)=>i(e==null?void 0:e.titleSlug,c),metadata:{name:m,accessor:e==null?void 0:e.accessor},LinkComponent:g},a))}),[r,p,l]);return t.jsx(w,{isLoading:f,keyPrefix:"blogs-large-skeleton",children:t.jsx(q,{ref:s,limit:l,children:j})})});module.exports=R;
+`,q=({keyPrefix:o})=>t.jsxs($,{children:[t.jsx(u.SkeletonLinePlaceholder,{height:"11.25rem",borderRadius:"0.75rem"},`${o}-1`),t.jsx(u.SkeletonLinePlaceholder,{height:"11.25rem",borderRadius:"0.75rem"},`${o}-2`)]}),M=({keyPrefix:o,isLoading:s=!1,fallbackComponent:r=t.jsx(t.Fragment,{}),children:n})=>t.jsx(l.Suspense,{fallbackComponent:r,children:s===!0?t.jsx(q,{keyPrefix:o}):n}),b=l.memo(w.BlogCardLarge),R=l.forwardRef((o,s)=>{const{items:r,onSelectCard:n=()=>{},limit:a=2,isLoading:h=!1,getImage:m=()=>{},componentName:g,LinkComponent:p}=o,S=C.useDetectMobile(),j=l.useMemo(()=>t.jsx(t.Fragment,{children:S===!0?r==null?void 0:r.map((e,c)=>t.jsx(b,{title:e==null?void 0:e.title,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:(k,d)=>n(e==null?void 0:e.titleSlug,d),metadata:{name:g,accessor:e==null?void 0:e.accessor},LinkComponent:p},c)):r==null?void 0:r.slice(0,a).map((e,c)=>t.jsx(b,{title:e==null?void 0:e.title,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:(k,d)=>n(e==null?void 0:e.titleSlug,d),metadata:{name:g,accessor:e==null?void 0:e.accessor},LinkComponent:p},c))}),[r,S,a]);return t.jsx(M,{isLoading:h,keyPrefix:"blogs-large-skeleton",children:t.jsx(L,{ref:s,limit:a,children:j})})});module.exports=R;

package/dist/BlogsSectionLarge.js

@@ -1,20 +1,28 @@
-import { jsxs as L, jsx as t, Fragment as f } from "react/jsx-runtime";
-import { Suspense as B, memo as M, forwardRef as $, useMemo as w } from "react";
-import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as h } from "./consts-BuFChS64.js";
-import { u as R } from "./useDetectMobile-Bkvj0VMa.js";
-import { B as T } from "./index-Cm414y95.js";
-import { S as U, a as g } from "./style-BwQ4djFC.js";
-const I = S.div`
+import { jsxs as $, jsx as t, Fragment as S } from "react/jsx-runtime";
+import { Suspense as L, memo as B, forwardRef as M, useMemo as w } from "react";
+import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as a } from "./breakpoints-ff0SIcV3.js";
+import { u as R } from "./useDetectMobile-CcVo3PNi.js";
+import { B as T } from "./index-L_Va5-wK.js";
+import { S as U, a as p } from "./style-BwQ4djFC.js";
+const j = b.div`
   display: grid;
   grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${h + "px"}) {
+  @media ${a("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${a("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${a("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`, P = S(U)`
-  @media (max-width: ${h + "px"}) {
+`, v = b(U)`
+  @media ${a("S")} {
     flex-direction: column;
 
     & > div {
@@ -28,9 +36,9 @@ const I = S.div`
       box-shadow: none;
     }
   }
-`, j = ({ keyPrefix: o }) => /* @__PURE__ */ L(P, { children: [
+`, y = ({ keyPrefix: o }) => /* @__PURE__ */ $(v, { children: [
   /* @__PURE__ */ t(
-    g,
+    p,
     {
       height: "11.25rem",
       borderRadius: "0.75rem"
@@ -38,65 +46,65 @@ const I = S.div`
     `${o}-1`
   ),
   /* @__PURE__ */ t(
-    g,
+    p,
     {
       height: "11.25rem",
       borderRadius: "0.75rem"
     },
     `${o}-2`
   )
-] }), v = ({
+] }), z = ({
   keyPrefix: o,
-  isLoading: a = !1,
-  fallbackComponent: r = /* @__PURE__ */ t(f, {}),
+  isLoading: l = !1,
+  fallbackComponent: r = /* @__PURE__ */ t(S, {}),
   children: i
-}) => /* @__PURE__ */ t(B, { fallbackComponent: r, children: a === !0 ? /* @__PURE__ */ t(j, { keyPrefix: o }) : i }), p = M(T), G = $((o, a) => {
+}) => /* @__PURE__ */ t(L, { fallbackComponent: r, children: l === !0 ? /* @__PURE__ */ t(y, { keyPrefix: o }) : i }), f = B(T), X = M((o, l) => {
   const {
     items: r,
     onSelectCard: i = () => {
     },
-    limit: l = 2,
-    isLoading: b = !1,
-    getImage: m = () => {
+    limit: n = 2,
+    isLoading: h = !1,
+    getImage: d = () => {
     },
-    componentName: d,
-    LinkComponent: c
-  } = o, u = R(), C = w(() => /* @__PURE__ */ t(f, { children: u === !0 ? r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ t(
-    p,
+    componentName: c,
+    LinkComponent: u
+  } = o, g = R(), C = w(() => /* @__PURE__ */ t(S, { children: g === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
+    f,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: m(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: d(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: (k, s) => i(e == null ? void 0 : e.titleSlug, s),
-      metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: c
+      metadata: { name: c, accessor: e == null ? void 0 : e.accessor },
+      LinkComponent: u
     },
-    n
-  )) : r == null ? void 0 : r.slice(0, l).map((e, n) => /* @__PURE__ */ t(
-    p,
+    m
+  )) : r == null ? void 0 : r.slice(0, n).map((e, m) => /* @__PURE__ */ t(
+    f,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: m(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: d(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: (k, s) => i(e == null ? void 0 : e.titleSlug, s),
-      metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
-      LinkComponent: c
+      metadata: { name: c, accessor: e == null ? void 0 : e.accessor },
+      LinkComponent: u
     },
-    n
-  )) }), [r, u, l]);
+    m
+  )) }), [r, g, n]);
   return /* @__PURE__ */ t(
-    v,
+    z,
     {
-      isLoading: b,
+      isLoading: h,
       keyPrefix: "blogs-large-skeleton",
-      children: /* @__PURE__ */ t(I, { ref: a, limit: l, children: C })
+      children: /* @__PURE__ */ t(j, { ref: l, limit: n, children: C })
     }
   );
 });
 export {
-  G as default
+  X as default
 };

package/dist/BlogsSectionSimple.cjs

@@ -1,12 +1,20 @@
-"use strict";const r=require("react/jsx-runtime"),p=require("react"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-goSZX3xP.cjs"),R=require("./useDetectMobile-zkbzoOGV.cjs"),g=require("./utils-RnrgDDZP.cjs"),C=require("./style-B4kAj6YU.cjs"),M=require("./Button.cjs"),$=require("./Link.cjs"),T=require("./index-uwl7BjRF.cjs"),E=require("./index-D-3I_Ppj.cjs"),I=j.styled.div`
+"use strict";const r=require("react/jsx-runtime"),p=require("react"),S=require("./emotion-styled.browser.esm-BtEseadx.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),$=require("./useDetectMobile-DYV6V1yw.cjs"),g=require("./utils-CITgSxXe.cjs"),C=require("./style-DC05rdyx.cjs"),B=require("./Button.cjs"),M=require("./Link.cjs"),T=require("./index-DsINTjQk.cjs"),D=require("./index-B_ilx3wM.cjs"),L=S.styled.div`
   display: grid;
-  grid-template-columns: ${s=>`repeat(${s.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${a=>`repeat(${a.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
+  @media ${j.down("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${j.down("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${j.down("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`,L=j.styled.a`
+`,U=S.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -57,10 +65,7 @@
     gap: 0.5rem;
     padding: 1rem;
   }
-
-  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
-  }
-`,D=j.styled.div`
+`,W=S.styled.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -80,4 +85,4 @@
     color: var(--gray-700, #4e555f);
     ${g.truncateTextInRows(3)}
   }
-`,_=p.forwardRef((s,S)=>{const{title:u,imageUrl:b,text:y,options:n,onCardClick:a,readMoreText:i="Read more",metadata:o,titleSlug:c,LinkComponent:d}=s,h=d||"a",m=p.useRef();return r.jsxs(L,{ref:m,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.name,className:"blog-card",onClick:t=>a(t,m),as:h,...d?{to:`/blog/${c}`}:{href:`/blog/${c}`},children:[r.jsx(T.ProductImageWrapper,{src:b}),r.jsxs(D,{children:[r.jsx("div",{className:"text-wr-title",children:u}),r.jsx("div",{className:"text-wr",children:y})]}),n&&r.jsx("div",{className:"tags-wr",children:n==null?void 0:n.map((t,f)=>r.jsx(C.BlogTag,{color:t==null?void 0:t.color,children:t==null?void 0:t.name},f))}),r.jsx($,{className:"action",color:"gray",onClick:a,children:i})]})}),v=p.memo(_),P=p.forwardRef((s,S)=>{const{icon:u,title:b,onButtonAction:y=()=>{},onSelectCard:n=()=>{},buttonLink:a,items:i,buttonText:o,limit:c=3,isLoading:d=!1,getImage:h=()=>{},readMoreText:m="Read more",componentName:t,LinkComponent:f}=s,N=R.useDetectMobile(),q=p.useMemo(()=>r.jsx(r.Fragment,{children:N===!0?i==null?void 0:i.map((e,l)=>r.jsx(v,{isBlog:!0,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:m,options:e==null?void 0:e.options,onCardClick:(B,w)=>n(e==null?void 0:e.titleSlug,w),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l)):i==null?void 0:i.slice(0,c).map((e,l)=>r.jsx(v,{isBlog:!0,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:m,options:e==null?void 0:e.options,onCardClick:(B,w)=>n(e==null?void 0:e.titleSlug,w),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l))}),[i]);return r.jsxs(C.RegulatTitleSectionWrapper,{ref:S,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[g.isDefinedNotEmptyString(u)&&r.jsx("i",{className:u}),r.jsx("span",{children:b})]}),g.isDefinedNotEmptyString(o)&&g.isDefinedNotEmptyString(a)&&!d&&r.jsx(M,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var l;(l=e==null?void 0:e.target)==null||l.blur(),y(a)},borderRadius:"curved",className:"button-link",children:o})]}),r.jsx(E.SuspenseBlogsSectionDetailed,{isLoading:d,keyPrefix:"blogs-simple-skeleton",children:r.jsx(I,{limit:c,children:q})})]})});module.exports=P;
+`,z=p.forwardRef((a,v)=>{const{title:u,imageUrl:b,text:w,options:n,onCardClick:s,readMoreText:i="Read more",metadata:o,titleSlug:c,LinkComponent:d}=a,h=d||"a",m=p.useRef();return r.jsxs(U,{ref:m,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.name,className:"blog-card",onClick:t=>s(t,m),as:h,...d?{to:`/blog/${c}`}:{href:`/blog/${c}`},children:[r.jsx(T.ProductImageWrapper,{src:b}),r.jsxs(W,{children:[r.jsx("div",{className:"text-wr-title",children:u}),r.jsx("div",{className:"text-wr",children:w})]}),n&&r.jsx("div",{className:"tags-wr",children:n==null?void 0:n.map((t,f)=>r.jsx(C.BlogTag,{color:t==null?void 0:t.color,children:t==null?void 0:t.name},f))}),r.jsx(M,{className:"action",color:"gray",onClick:s,children:i})]})}),k=p.memo(z),E=p.forwardRef((a,v)=>{const{icon:u,title:b,onButtonAction:w=()=>{},onSelectCard:n=()=>{},buttonLink:s,items:i,buttonText:o,limit:c=3,isLoading:d=!1,getImage:h=()=>{},readMoreText:m="Read more",componentName:t,LinkComponent:f}=a,N=$.useDetectMobile(),q=p.useMemo(()=>r.jsx(r.Fragment,{children:N===!0?i==null?void 0:i.map((e,l)=>r.jsx(k,{isBlog:!0,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:m,options:e==null?void 0:e.options,onCardClick:(R,y)=>n(e==null?void 0:e.titleSlug,y),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l)):i==null?void 0:i.slice(0,c).map((e,l)=>r.jsx(k,{isBlog:!0,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:m,options:e==null?void 0:e.options,onCardClick:(R,y)=>n(e==null?void 0:e.titleSlug,y),metadata:{name:t,accessor:e==null?void 0:e.accessor},LinkComponent:f},l))}),[i]);return r.jsxs(C.RegulatTitleSectionWrapper,{ref:v,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[g.isDefinedNotEmptyString(u)&&r.jsx("i",{className:u}),r.jsx("span",{children:b})]}),g.isDefinedNotEmptyString(o)&&g.isDefinedNotEmptyString(s)&&!d&&r.jsx(B,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var l;(l=e==null?void 0:e.target)==null||l.blur(),w(s)},borderRadius:"curved",className:"button-link",children:o})]}),r.jsx(D.SuspenseBlogsSectionDetailed,{isLoading:d,keyPrefix:"blogs-simple-skeleton",children:r.jsx(L,{limit:c,children:q})})]})});module.exports=E;

package/dist/BlogsSectionSimple.js

@@ -1,23 +1,31 @@
 import { jsxs as p, jsx as r, Fragment as T } from "react/jsx-runtime";
-import { forwardRef as C, useRef as $, memo as L, useMemo as I } from "react";
-import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as B } from "./consts-BuFChS64.js";
-import { u as P } from "./useDetectMobile-Bkvj0VMa.js";
-import { w as U, m as W, k as v } from "./utils-DtEfC-TX.js";
-import { B as z, R as j } from "./style-neMbLWE6.js";
-import D from "./Button.js";
-import E from "./Link.js";
-import { P as A } from "./index-B22BZVBG.js";
-import { S as G } from "./index-CBMsUFkS.js";
-const _ = y.div`
+import { forwardRef as N, useRef as M, memo as L, useMemo as U } from "react";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as v } from "./breakpoints-ff0SIcV3.js";
+import { u as W } from "./useDetectMobile-CcVo3PNi.js";
+import { w as z, n as P, l as y } from "./utils-B2fsQ6PS.js";
+import { B as j, R as D } from "./style-BUyFad_y.js";
+import I from "./Button.js";
+import A from "./Link.js";
+import { P as G } from "./index-BvMY2TbK.js";
+import { S as E } from "./index-hC-E71GE.js";
+const F = S.div`
   display: grid;
   grid-template-columns: ${(n) => `repeat(${n.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${B + "px"}) {
+  @media ${v("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${v("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${v("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`, F = y.a`
+`, X = S.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -43,7 +51,7 @@ const _ = y.div`
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${U("-90deg")};
+    background-color: ${z("-90deg")};
   }
 
   & .action {
@@ -68,10 +76,7 @@ const _ = y.div`
     gap: 0.5rem;
     padding: 1rem;
   }
-
-  @media (max-width: ${B + "px"}) {
-  }
-`, O = y.div`
+`, q = S.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -89,9 +94,9 @@ const _ = y.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${W(3)}
+    ${P(3)}
   }
-`, X = C((n, k) => {
+`, H = N((n, k) => {
   const {
     title: g,
     imageUrl: h,
@@ -102,9 +107,9 @@ const _ = y.div`
     metadata: i,
     titleSlug: s,
     LinkComponent: c
-  } = n, u = c || "a", d = $();
+  } = n, u = c || "a", d = M();
   return /* @__PURE__ */ p(
-    F,
+    X,
     {
       ref: d,
       name: i == null ? void 0 : i.name,
@@ -114,17 +119,17 @@ const _ = y.div`
       as: u,
       ...c ? { to: `/blog/${s}` } : { href: `/blog/${s}` },
       children: [
-        /* @__PURE__ */ r(A, { src: h }),
-        /* @__PURE__ */ p(O, { children: [
+        /* @__PURE__ */ r(G, { src: h }),
+        /* @__PURE__ */ p(q, { children: [
           /* @__PURE__ */ r("div", { className: "text-wr-title", children: g }),
           /* @__PURE__ */ r("div", { className: "text-wr", children: b })
         ] }),
-        a && /* @__PURE__ */ r("div", { className: "tags-wr", children: a == null ? void 0 : a.map((t, f) => /* @__PURE__ */ r(z, { color: t == null ? void 0 : t.color, children: t == null ? void 0 : t.name }, f)) }),
-        /* @__PURE__ */ r(E, { className: "action", color: "gray", onClick: m, children: o })
+        a && /* @__PURE__ */ r("div", { className: "tags-wr", children: a == null ? void 0 : a.map((t, f) => /* @__PURE__ */ r(j, { color: t == null ? void 0 : t.color, children: t == null ? void 0 : t.name }, f)) }),
+        /* @__PURE__ */ r(A, { className: "action", color: "gray", onClick: m, children: o })
       ]
     }
   );
-}), S = L(X), te = C((n, k) => {
+}), C = L(H), te = N((n, k) => {
   const {
     icon: g,
     title: h,
@@ -142,8 +147,8 @@ const _ = y.div`
     readMoreText: d = "Read more",
     componentName: t,
     LinkComponent: f
-  } = n, N = P(), R = I(() => /* @__PURE__ */ r(T, { children: N === !0 ? o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ r(
-    S,
+  } = n, B = W(), R = U(() => /* @__PURE__ */ r(T, { children: B === !0 ? o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ r(
+    C,
     {
       isBlog: !0,
       title: e == null ? void 0 : e.title,
@@ -152,13 +157,13 @@ const _ = y.div`
       titleSlug: e == null ? void 0 : e.titleSlug,
       readMoreText: d,
       options: e == null ? void 0 : e.options,
-      onCardClick: (M, w) => a(e == null ? void 0 : e.titleSlug, w),
+      onCardClick: ($, w) => a(e == null ? void 0 : e.titleSlug, w),
       metadata: { name: t, accessor: e == null ? void 0 : e.accessor },
       LinkComponent: f
     },
     l
   )) : o == null ? void 0 : o.slice(0, s).map((e, l) => /* @__PURE__ */ r(
-    S,
+    C,
     {
       isBlog: !0,
       title: e == null ? void 0 : e.title,
@@ -167,20 +172,20 @@ const _ = y.div`
       titleSlug: e == null ? void 0 : e.titleSlug,
       readMoreText: d,
       options: e == null ? void 0 : e.options,
-      onCardClick: (M, w) => a(e == null ? void 0 : e.titleSlug, w),
+      onCardClick: ($, w) => a(e == null ? void 0 : e.titleSlug, w),
       metadata: { name: t, accessor: e == null ? void 0 : e.accessor },
       LinkComponent: f
     },
     l
   )) }), [o]);
-  return /* @__PURE__ */ p(j, { ref: k, children: [
+  return /* @__PURE__ */ p(D, { ref: k, children: [
     /* @__PURE__ */ p("div", { className: "regular-title", children: [
       /* @__PURE__ */ p("div", { className: "regular-title-text", children: [
-        v(g) && /* @__PURE__ */ r("i", { className: g }),
+        y(g) && /* @__PURE__ */ r("i", { className: g }),
         /* @__PURE__ */ r("span", { children: h })
       ] }),
-      v(i) && v(m) && !c && /* @__PURE__ */ r(
-        D,
+      y(i) && y(m) && !c && /* @__PURE__ */ r(
+        I,
         {
           type: "button",
           btnType: "tinted",
@@ -196,11 +201,11 @@ const _ = y.div`
       )
     ] }),
     /* @__PURE__ */ r(
-      G,
+      E,
       {
         isLoading: c,
         keyPrefix: "blogs-simple-skeleton",
-        children: /* @__PURE__ */ r(_, { limit: s, children: R })
+        children: /* @__PURE__ */ r(F, { limit: s, children: R })
       }
     )
   ] });