@lanaco/lnc-react-ui 4.0.206 → 4.0.208

package/dist/BlogsSectionSimpleCentered.cjs

@@ -1,13 +1,22 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./consts-goSZX3xP.cjs"),C=require("./useDetectMobile-zkbzoOGV.cjs"),k=require("./utils-RnrgDDZP.cjs"),y=require("./Button.cjs"),S=require("./index-uwl7BjRF.cjs"),p=require("./style-BAcV7F53.cjs"),v=g.styled.div`
+"use strict";const t=require("react/jsx-runtime"),h=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./breakpoints-CcVm-gVm.cjs"),C=require("./useDetectMobile-DYV6V1yw.cjs"),k=require("./utils-CITgSxXe.cjs"),S=require("./Button.cjs"),y=require("./index-DsINTjQk.cjs"),g=require("./style-BAcV7F53.cjs"),$=f.styled.div`
   display: grid;
   grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+
+  @media ${l.down("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${l.down("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${l.down("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`,R=g.styled.a`
+`,v=f.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -45,10 +54,10 @@
     object-fit: cover;
   }
 
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+  @media ${l.down("S")} {
     max-width: unset;
   }
-`,$=g.styled.div`
+`,R=f.styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -71,8 +80,8 @@
     letter-spacing: 0.0156rem;
     ${k.truncateTextInRows(3)}
   }
-`,w=u.forwardRef((r,l)=>{const{title:n,image:o,text:c,buttonText:f,onCardClick:d,metadata:i,link:m,LinkComponent:e}=r,a=e||"a",h=u.useRef(),s=j=>{d(j,h)};return t.jsxs(R,{ref:h,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:s,as:a,...e?{to:`/${m}`}:{href:`/${m}`},children:[t.jsx(S.ProductImageWrapper,{src:o}),t.jsxs($,{children:[t.jsx("div",{className:"text-wr-title",children:n}),t.jsx("div",{className:"text-wr",children:c})]}),t.jsx(y,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:s,size:"medium",children:f})]})}),q=g.styled(p.SkeletonRowWrapper)`
-  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+`,b=h.forwardRef((r,c)=>{const{title:n,image:o,text:d,buttonText:w,onCardClick:m,metadata:i,link:p,LinkComponent:e}=r,a=e||"a",u=h.useRef(),s=j=>{m(j,u)};return t.jsxs(v,{ref:u,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:s,as:a,...e?{to:`/${p}`}:{href:`/${p}`},children:[t.jsx(y.ProductImageWrapper,{src:o}),t.jsxs(R,{children:[t.jsx("div",{className:"text-wr-title",children:n}),t.jsx("div",{className:"text-wr",children:d})]}),t.jsx(S,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:s,size:"medium",children:w})]})}),q=f.styled(g.SkeletonRowWrapper)`
+  @media ${l.down("S")} {
     flex-direction: column;
 
     & > div {
@@ -88,4 +97,4 @@
       box-shadow: none;
     }
   }
-`,I=({keyPrefix:r})=>t.jsxs(q,{justifyContent:"center",alignItems:"center",children:[t.jsx(p.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-1`),t.jsx(p.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-2`),t.jsx(p.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-3`)]}),L=({keyPrefix:r,isLoading:l=!1,fallbackComponent:n=t.jsx(t.Fragment,{}),children:o})=>t.jsx(u.Suspense,{fallbackComponent:n,children:l===!0?t.jsx(I,{keyPrefix:r}):o}),B=u.forwardRef((r,l)=>{const{items:n,limit:o=3,onSelectCard:c=()=>{},isLoading:f=!1,componentName:d,LinkComponent:i}=r,m=C.useDetectMobile();return t.jsx(L,{isLoading:f,keyPrefix:"blogs-simple-centered-skeleton",children:t.jsx(v,{ref:l,limit:o,children:t.jsx(t.Fragment,{children:m===!0?n==null?void 0:n.map((e,a)=>t.jsx(w,{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:(h,s)=>c(e,s),metadata:{name:d,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},a)):n==null?void 0:n.slice(0,o).map((e,a)=>t.jsx(w,{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:(h,s)=>c(e,s),metadata:{name:d,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},a))})})})});module.exports=B;
+`,T=({keyPrefix:r})=>t.jsxs(q,{justifyContent:"center",alignItems:"center",children:[t.jsx(g.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-1`),t.jsx(g.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-2`),t.jsx(g.SkeletonLinePlaceholder,{height:"24.75rem",width:"18.5rem",borderRadius:"0.75rem"},`${r}-3`)]}),L=({keyPrefix:r,isLoading:c=!1,fallbackComponent:n=t.jsx(t.Fragment,{}),children:o})=>t.jsx(h.Suspense,{fallbackComponent:n,children:c===!0?t.jsx(T,{keyPrefix:r}):o}),B=h.forwardRef((r,c)=>{const{items:n,limit:o=3,onSelectCard:d=()=>{},isLoading:w=!1,componentName:m,LinkComponent:i}=r,p=C.useDetectMobile();return t.jsx(L,{isLoading:w,keyPrefix:"blogs-simple-centered-skeleton",children:t.jsx($,{ref:c,limit:o,children:t.jsx(t.Fragment,{children:p===!0?n==null?void 0:n.map((e,a)=>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:(u,s)=>d(e,s),metadata:{name:m,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},a)):n==null?void 0:n.slice(0,o).map((e,a)=>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:(u,s)=>d(e,s),metadata:{name:m,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:i},a))})})})});module.exports=B;

package/dist/BlogsSectionSimpleCentered.js

@@ -1,22 +1,31 @@
-import { jsxs as u, jsx as t, Fragment as C } from "react/jsx-runtime";
-import { forwardRef as k, useRef as y, Suspense as v } from "react";
-import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as b } from "./consts-BuFChS64.js";
-import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
-import { m as R } from "./utils-DtEfC-TX.js";
+import { jsxs as b, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as S, useRef as y, Suspense as $ } from "react";
+import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as l } from "./breakpoints-ff0SIcV3.js";
+import { u as v } from "./useDetectMobile-CcVo3PNi.js";
+import { n as R } from "./utils-B2fsQ6PS.js";
 import T from "./Button.js";
-import { P as B } from "./index-B22BZVBG.js";
-import { S as I, a as f } from "./style-BwQ4djFC.js";
-const L = g.div`
+import { P as B } from "./index-BvMY2TbK.js";
+import { S as W, a as u } from "./style-BwQ4djFC.js";
+const j = h.div`
   display: grid;
   grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${b + "px"}) {
+
+  @media ${l("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${l("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${l("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`, W = g.a`
+`, z = h.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -54,10 +63,10 @@ const L = g.div`
     object-fit: cover;
   }
 
-  @media (max-width: ${b + "px"}) {
+  @media ${l("S")} {
     max-width: unset;
   }
-`, j = g.div`
+`, L = h.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -80,34 +89,34 @@ const L = g.div`
     letter-spacing: 0.0156rem;
     ${R(3)}
   }
-`, w = k((r, l) => {
+`, w = S((r, s) => {
   const {
-    title: i,
+    title: n,
     image: o,
-    text: s,
-    buttonText: h,
-    onCardClick: d,
-    metadata: n,
-    link: c,
+    text: d,
+    buttonText: f,
+    onCardClick: c,
+    metadata: i,
+    link: p,
     LinkComponent: e
-  } = r, m = e || "a", p = y(), a = (S) => {
-    d(S, p);
+  } = r, m = e || "a", g = y(), a = (k) => {
+    c(k, g);
   };
-  return /* @__PURE__ */ u(
-    W,
+  return /* @__PURE__ */ b(
+    z,
     {
-      ref: p,
-      name: n == null ? void 0 : n.name,
-      "data-accessor": n == null ? void 0 : n.accessor,
+      ref: g,
+      name: i == null ? void 0 : i.name,
+      "data-accessor": i == null ? void 0 : i.accessor,
       className: "blog-card",
       onClick: a,
       as: m,
-      ...e ? { to: `/${c}` } : { href: `/${c}` },
+      ...e ? { to: `/${p}` } : { href: `/${p}` },
       children: [
         /* @__PURE__ */ t(B, { src: o }),
-        /* @__PURE__ */ u(j, { children: [
-          /* @__PURE__ */ t("div", { className: "text-wr-title", children: i }),
-          /* @__PURE__ */ t("div", { className: "text-wr", children: s })
+        /* @__PURE__ */ b(L, { children: [
+          /* @__PURE__ */ t("div", { className: "text-wr-title", children: n }),
+          /* @__PURE__ */ t("div", { className: "text-wr", children: d })
         ] }),
         /* @__PURE__ */ t(
           T,
@@ -118,14 +127,14 @@ const L = g.div`
             btnType: "outline",
             onClick: a,
             size: "medium",
-            children: h
+            children: f
           }
         )
       ]
     }
   );
-}), z = g(I)`
-  @media (max-width: ${b + "px"}) {
+}), N = h(W)`
+  @media ${l("S")} {
     flex-direction: column;
 
     & > div {
@@ -141,9 +150,9 @@ const L = g.div`
       box-shadow: none;
     }
   }
-`, M = ({ keyPrefix: r }) => /* @__PURE__ */ u(z, { justifyContent: "center", alignItems: "center", children: [
+`, I = ({ keyPrefix: r }) => /* @__PURE__ */ b(N, { justifyContent: "center", alignItems: "center", children: [
   /* @__PURE__ */ t(
-    f,
+    u,
     {
       height: "24.75rem",
       width: "18.5rem",
@@ -152,7 +161,7 @@ const L = g.div`
     `${r}-1`
   ),
   /* @__PURE__ */ t(
-    f,
+    u,
     {
       height: "24.75rem",
       width: "18.5rem",
@@ -161,7 +170,7 @@ const L = g.div`
     `${r}-2`
   ),
   /* @__PURE__ */ t(
-    f,
+    u,
     {
       height: "24.75rem",
       width: "18.5rem",
@@ -169,50 +178,50 @@ const L = g.div`
     },
     `${r}-3`
   )
-] }), N = ({
+] }), M = ({
   keyPrefix: r,
-  isLoading: l = !1,
-  fallbackComponent: i = /* @__PURE__ */ t(C, {}),
+  isLoading: s = !1,
+  fallbackComponent: n = /* @__PURE__ */ t(C, {}),
   children: o
-}) => /* @__PURE__ */ t(v, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ t(M, { keyPrefix: r }) : o }), q = k((r, l) => {
+}) => /* @__PURE__ */ t($, { fallbackComponent: n, children: s === !0 ? /* @__PURE__ */ t(I, { keyPrefix: r }) : o }), J = S((r, s) => {
   const {
-    items: i,
+    items: n,
     limit: o = 3,
-    onSelectCard: s = () => {
+    onSelectCard: d = () => {
     },
-    isLoading: h = !1,
-    componentName: d,
-    LinkComponent: n
-  } = r, c = $();
+    isLoading: f = !1,
+    componentName: c,
+    LinkComponent: i
+  } = r, p = v();
   return /* @__PURE__ */ t(
-    N,
+    M,
     {
-      isLoading: h,
+      isLoading: f,
       keyPrefix: "blogs-simple-centered-skeleton",
-      children: /* @__PURE__ */ t(L, { ref: l, limit: o, children: /* @__PURE__ */ t(C, { children: c === !0 ? i == null ? void 0 : i.map((e, m) => /* @__PURE__ */ t(
+      children: /* @__PURE__ */ t(j, { ref: s, limit: o, children: /* @__PURE__ */ t(C, { children: p === !0 ? n == null ? void 0 : n.map((e, m) => /* @__PURE__ */ t(
         w,
         {
           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: (p, a) => s(e, a),
-          metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
+          onCardClick: (g, a) => d(e, a),
+          metadata: { name: c, accessor: e == null ? void 0 : e.accessor },
           link: e == null ? void 0 : e.link,
-          LinkComponent: n
+          LinkComponent: i
         },
         m
-      )) : i == null ? void 0 : i.slice(0, o).map((e, m) => /* @__PURE__ */ t(
+      )) : n == null ? void 0 : n.slice(0, o).map((e, m) => /* @__PURE__ */ t(
         w,
         {
           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: (p, a) => s(e, a),
-          metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
+          onCardClick: (g, a) => d(e, a),
+          metadata: { name: c, accessor: e == null ? void 0 : e.accessor },
           link: e == null ? void 0 : e.link,
-          LinkComponent: n
+          LinkComponent: i
         },
         m
       )) }) })
@@ -220,5 +229,5 @@ const L = g.div`
   );
 });
 export {
-  q as default
+  J as default
 };

package/dist/BlogsSectionWithFilters.cjs

@@ -1,12 +1,20 @@
-"use strict";const t=require("react/jsx-runtime"),a=require("react"),S=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./consts-goSZX3xP.cjs"),W=require("./useDetectMobile-zkbzoOGV.cjs"),k=require("./utils-RnrgDDZP.cjs"),T=require("./style-B4kAj6YU.cjs"),E=require("./Button.cjs"),I=require("./Link.cjs"),M=require("./index-uwl7BjRF.cjs"),P=require("./index-CRk3vcd4.cjs"),s=require("./style-BAcV7F53.cjs"),O=S.styled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),w=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./breakpoints-CcVm-gVm.cjs"),_=require("./useDetectMobile-DYV6V1yw.cjs"),S=require("./utils-CITgSxXe.cjs"),B=require("./style-DC05rdyx.cjs"),M=require("./Button.cjs"),z=require("./Link.cjs"),D=require("./index-DsINTjQk.cjs"),F=require("./index-vQOR22Py.cjs"),s=require("./style-BAcV7F53.cjs"),P=w.styled.div`
   display: grid;
   grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+  @media ${k.down("M")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${k.down("S")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${k.down("XS")} {
     grid-template-columns: repeat(1, 1fr);
   }
-`,z=S.styled.a`
+`,A=w.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -38,10 +46,7 @@
   & a {
     margin-top: auto;
   }
-
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
-  }
-`,D=S.styled.div`
+`,E=w.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -56,10 +61,10 @@
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${k.truncateTextInRows(3)}
+    ${S.truncateTextInRows(3)}
   }
-`,F=a.forwardRef((r,h)=>{const{title:l,imageUrl:c,text:i,buttonText:p,onCardClick:d,metadata:o,link:m,LinkComponent:g}=r,b=g||"a",u=a.useRef(),j=f=>{d(f,u)};return t.jsxs(z,{ref:u,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.accessor,className:"blog-card",onClick:j,to:`/${m}`,as:b,...g?{to:`/${m}`}:{href:`/${m}`},children:[t.jsxs(D,{children:[t.jsx("div",{className:"text-wr-title",children:l}),t.jsx("div",{className:"text-wr",children:i}),t.jsx(I,{color:"gray",onClick:j,children:p})]}),t.jsx(M.ProductImageWrapper,{src:c})]})}),A=S.styled(s.SkeletonColumnWrapper)`
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+`,I=a.forwardRef((r,h)=>{const{title:l,imageUrl:c,text:i,buttonText:p,onCardClick:d,metadata:o,link:m,LinkComponent:g}=r,b=g||"a",u=a.useRef(),f=j=>{d(j,u)};return t.jsxs(A,{ref:u,name:o==null?void 0:o.name,"data-accessor":o==null?void 0:o.accessor,className:"blog-card",onClick:f,to:`/${m}`,as:b,...g?{to:`/${m}`}:{href:`/${m}`},children:[t.jsxs(E,{children:[t.jsx("div",{className:"text-wr-title",children:l}),t.jsx("div",{className:"text-wr",children:i}),t.jsx(z,{color:"gray",onClick:f,children:p})]}),t.jsx(D.ProductImageWrapper,{src:c})]})}),O=w.styled(s.SkeletonColumnWrapper)`
+  @media ${k.down("S")} {
     & .skeleton__tags {
       & > div {
         width: 100%;
@@ -81,4 +86,4 @@
       }
     }
   }
-`,U=({keyPrefix:r})=>t.jsxs(A,{children:[t.jsxs(s.SkeletonRowWrapper,{className:"skeleton__tags",children:[t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-1`),t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-2`),t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-3`)]}),t.jsxs(s.SkeletonRowWrapper,{className:"skeleton__cards",children:[t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-4`),t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-5`),t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-6`)]})]}),X=({keyPrefix:r,isLoading:h=!1,fallbackComponent:l=t.jsx(t.Fragment,{}),children:c})=>t.jsx(a.Suspense,{fallbackComponent:l,children:h===!0?t.jsx(U,{keyPrefix:r}):c}),_=a.memo(F),Z=a.forwardRef((r,h)=>{const{icon:l,title:c,items:i,buttonText:p,limit:d=3,options:o,selectedOption:m=[],onButtonAction:g=()=>{},buttonLink:b,onSelectOption:u=()=>{},onSelectAll:j=()=>{},isLoading:f=!1,onSelectCard:y=()=>{},productsToolbarName:L="All",allButton:N=!1,componentName:x,LinkComponent:R}=r,$=W.useDetectMobile(),q=a.useMemo(()=>{var n;return t.jsx(t.Fragment,{children:$===!0?i==null?void 0:i.map((e,w)=>t.jsx(_,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(B,v)=>y(e,v),metadata:{name:x,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:R},w)):(n=i==null?void 0:i.slice(0,d))==null?void 0:n.map((e,w)=>t.jsx(_,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(B,v)=>y(e,v),metadata:{name:x,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:R},w))})},[i,$,d]);return t.jsxs(T.TitleWithOptionsSectionWrapper,{ref:h,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[k.isDefinedNotEmptyString(l)&&t.jsx("i",{className:l}),t.jsx("span",{children:c})]}),k.isDefinedNotEmptyString(p)&&k.isDefinedNotEmptyString(b)&&!f&&t.jsx(E,{type:"button",btnType:"tinted",color:"neutral",onClick:n=>{var e;(e=n==null?void 0:n.target)==null||e.blur(),g(b)},borderRadius:"curved",children:p})]}),t.jsxs(X,{isLoading:f,keyPrefix:"blogs-with-filters-skeleton",children:[(o==null?void 0:o.length)>0&&t.jsx(P.SelectBar,{items:o,selectedIds:m,onRemove:n=>{u(n)},onSelect:n=>{u(n)},onSelectAll:j,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:L,allButton:N}),t.jsx(O,{limit:d,children:q})]})]})});module.exports=Z;
+`,U=({keyPrefix:r})=>t.jsxs(O,{children:[t.jsxs(s.SkeletonRowWrapper,{className:"skeleton__tags",children:[t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-1`),t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-2`),t.jsx(s.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-3`)]}),t.jsxs(s.SkeletonRowWrapper,{className:"skeleton__cards",children:[t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-4`),t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-5`),t.jsx(s.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-6`)]})]}),K=({keyPrefix:r,isLoading:h=!1,fallbackComponent:l=t.jsx(t.Fragment,{}),children:c})=>t.jsx(a.Suspense,{fallbackComponent:l,children:h===!0?t.jsx(U,{keyPrefix:r}):c}),q=a.memo(I),G=a.forwardRef((r,h)=>{const{icon:l,title:c,items:i,buttonText:p,limit:d=3,options:o,selectedOption:m=[],onButtonAction:g=()=>{},buttonLink:b,onSelectOption:u=()=>{},onSelectAll:f=()=>{},isLoading:j=!1,onSelectCard:y=()=>{},productsToolbarName:W="All",allButton:x=!1,componentName:$,LinkComponent:R}=r,N=_.useDetectMobile(),L=a.useMemo(()=>{var n;return t.jsx(t.Fragment,{children:N===!0?i==null?void 0:i.map((e,v)=>t.jsx(q,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(T,C)=>y(e,C),metadata:{name:$,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:R},v)):(n=i==null?void 0:i.slice(0,d))==null?void 0:n.map((e,v)=>t.jsx(q,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(T,C)=>y(e,C),metadata:{name:$,accessor:e==null?void 0:e.accessor},link:e==null?void 0:e.link,LinkComponent:R},v))})},[i,N,d]);return t.jsxs(B.TitleWithOptionsSectionWrapper,{ref:h,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[S.isDefinedNotEmptyString(l)&&t.jsx("i",{className:l}),t.jsx("span",{children:c})]}),S.isDefinedNotEmptyString(p)&&S.isDefinedNotEmptyString(b)&&!j&&t.jsx(M,{type:"button",btnType:"tinted",color:"neutral",onClick:n=>{var e;(e=n==null?void 0:n.target)==null||e.blur(),g(b)},borderRadius:"curved",children:p})]}),t.jsxs(K,{isLoading:j,keyPrefix:"blogs-with-filters-skeleton",children:[(o==null?void 0:o.length)>0&&t.jsx(F.SelectBar,{items:o,selectedIds:m,onRemove:n=>{u(n)},onSelect:n=>{u(n)},onSelectAll:f,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:W,allButton:x}),t.jsx(P,{limit:d,children:L})]})]})});module.exports=G;

package/dist/BlogsSectionWithFilters.js

@@ -1,24 +1,32 @@
 import { jsxs as a, jsx as t, Fragment as _ } from "react/jsx-runtime";
-import { forwardRef as L, useRef as O, Suspense as j, memo as A, useMemo as E } from "react";
-import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as $ } from "./consts-BuFChS64.js";
-import { u as U } from "./useDetectMobile-Bkvj0VMa.js";
-import { m as D, k as C } from "./utils-DtEfC-TX.js";
-import { T as K } from "./style-neMbLWE6.js";
+import { forwardRef as L, useRef as A, Suspense as I, memo as O, useMemo as U } 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 K, l as $ } from "./utils-B2fsQ6PS.js";
+import { T as E } from "./style-BUyFad_y.js";
 import G from "./Button.js";
 import H from "./Link.js";
-import { P } from "./index-B22BZVBG.js";
-import { S as X } from "./index-CwMCk9wV.js";
-import { b as Z, S as y, a as s } from "./style-BwQ4djFC.js";
-const q = w.div`
+import { P as X } from "./index-BvMY2TbK.js";
+import { S as q } from "./index-BzSWu-7v.js";
+import { b as J, S as y, a as s } from "./style-BwQ4djFC.js";
+const P = S.div`
   display: grid;
   grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${$ + "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);
   }
-`, J = w.a`
+`, Q = S.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -50,10 +58,7 @@ const q = w.div`
   & a {
     margin-top: auto;
   }
-
-  @media (max-width: ${$ + "px"}) {
-  }
-`, Q = w.div`
+`, V = S.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -68,9 +73,9 @@ const q = w.div`
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${D(3)}
+    ${K(3)}
   }
-`, V = L((r, h) => {
+`, Y = L((r, h) => {
   const {
     title: l,
     imageUrl: m,
@@ -80,11 +85,11 @@ const q = w.div`
     metadata: o,
     link: d,
     LinkComponent: g
-  } = r, f = g || "a", p = O(), b = (k) => {
+  } = r, f = g || "a", p = A(), b = (k) => {
     c(k, p);
   };
   return /* @__PURE__ */ a(
-    J,
+    Q,
     {
       ref: p,
       name: o == null ? void 0 : o.name,
@@ -95,17 +100,17 @@ const q = w.div`
       as: f,
       ...g ? { to: `/${d}` } : { href: `/${d}` },
       children: [
-        /* @__PURE__ */ a(Q, { children: [
+        /* @__PURE__ */ a(V, { children: [
           /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
           /* @__PURE__ */ t("div", { className: "text-wr", children: n }),
           /* @__PURE__ */ t(H, { color: "gray", onClick: b, children: u })
         ] }),
-        /* @__PURE__ */ t(P, { src: m })
+        /* @__PURE__ */ t(X, { src: m })
       ]
     }
   );
-}), Y = w(Z)`
-  @media (max-width: ${$ + "px"}) {
+}), Z = S(J)`
+  @media ${w("S")} {
     & .skeleton__tags {
       & > div {
         width: 100%;
@@ -127,7 +132,7 @@ const q = w.div`
       }
     }
   }
-`, x = ({ keyPrefix: r }) => /* @__PURE__ */ a(Y, { children: [
+`, x = ({ keyPrefix: r }) => /* @__PURE__ */ a(Z, { children: [
   /* @__PURE__ */ a(y, { className: "skeleton__tags", children: [
     /* @__PURE__ */ t(
       s,
@@ -188,7 +193,7 @@ const q = w.div`
   isLoading: h = !1,
   fallbackComponent: l = /* @__PURE__ */ t(_, {}),
   children: m
-}) => /* @__PURE__ */ t(j, { fallbackComponent: l, children: h === !0 ? /* @__PURE__ */ t(x, { keyPrefix: r }) : m }), B = A(V), he = L((r, h) => {
+}) => /* @__PURE__ */ t(I, { fallbackComponent: l, children: h === !0 ? /* @__PURE__ */ t(x, { keyPrefix: r }) : m }), B = O(Y), he = L((r, h) => {
   const {
     icon: l,
     title: m,
@@ -211,43 +216,43 @@ const q = w.div`
     allButton: z = !1,
     componentName: T,
     LinkComponent: N
-  } = r, W = U(), I = E(() => {
+  } = r, W = D(), F = U(() => {
     var i;
-    return /* @__PURE__ */ t(_, { children: W === !0 ? n == null ? void 0 : n.map((e, S) => /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(_, { children: W === !0 ? n == null ? void 0 : n.map((e, v) => /* @__PURE__ */ t(
       B,
       {
         title: e == null ? void 0 : e.title,
         imageUrl: (e == null ? void 0 : e.image) || null,
         text: e == null ? void 0 : e.text,
         buttonText: e == null ? void 0 : e.buttonText,
-        onCardClick: (F, v) => R(e, v),
+        onCardClick: (j, C) => R(e, C),
         metadata: { name: T, accessor: e == null ? void 0 : e.accessor },
         link: e == null ? void 0 : e.link,
         LinkComponent: N
       },
-      S
-    )) : (i = n == null ? void 0 : n.slice(0, c)) == null ? void 0 : i.map((e, S) => /* @__PURE__ */ t(
+      v
+    )) : (i = n == null ? void 0 : n.slice(0, c)) == null ? void 0 : i.map((e, v) => /* @__PURE__ */ t(
       B,
       {
         title: e == null ? void 0 : e.title,
         imageUrl: (e == null ? void 0 : e.image) || null,
         text: e == null ? void 0 : e.text,
         buttonText: e == null ? void 0 : e.buttonText,
-        onCardClick: (F, v) => R(e, v),
+        onCardClick: (j, C) => R(e, C),
         metadata: { name: T, accessor: e == null ? void 0 : e.accessor },
         link: e == null ? void 0 : e.link,
         LinkComponent: N
       },
-      S
+      v
     )) });
   }, [n, W, c]);
-  return /* @__PURE__ */ a(K, { ref: h, children: [
+  return /* @__PURE__ */ a(E, { ref: h, children: [
     /* @__PURE__ */ a("div", { className: "regular-title", children: [
       /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
-        C(l) && /* @__PURE__ */ t("i", { className: l }),
+        $(l) && /* @__PURE__ */ t("i", { className: l }),
         /* @__PURE__ */ t("span", { children: m })
       ] }),
-      C(u) && C(f) && !k && /* @__PURE__ */ t(
+      $(u) && $(f) && !k && /* @__PURE__ */ t(
         G,
         {
           type: "button",
@@ -269,7 +274,7 @@ const q = w.div`
         keyPrefix: "blogs-with-filters-skeleton",
         children: [
           (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(
-            X,
+            q,
             {
               items: o,
               selectedIds: d,
@@ -287,7 +292,7 @@ const q = w.div`
               allButton: z
             }
           ),
-          /* @__PURE__ */ t(q, { limit: c, children: I })
+          /* @__PURE__ */ t(P, { limit: c, children: F })
         ]
       }
     )

package/dist/BrandHitsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("react"),_=require("./utils-RnrgDDZP.cjs"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-goSZX3xP.cjs"),o=require("./style-BAcV7F53.cjs"),x=m.styled.a`
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),_=require("./utils-CITgSxXe.cjs"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./breakpoints-CcVm-gVm.cjs"),o=require("./style-BAcV7F53.cjs"),x=m.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   width: 7.5rem;
@@ -14,7 +14,7 @@
     height: auto;
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${g.down("S")} {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -24,7 +24,7 @@
       height: auto;
     }
   }
-`,u=p.forwardRef(({imageComponent:r,image:n,onSelectCard:a,urlPrefix:i,urlSufix:s,code:l,LinkComponent:d},c)=>{const h=d||"a";return e.jsx(x,{ref:c,onClick:a,as:h,...d?{to:`${i}${l}${s}`}:{href:`${i}${l}${s}`},children:_.isDefined(r)?r:e.jsx("img",{src:n,className:"wrapper__image"})})}),j=m.styled.div`
+`,u=p.forwardRef(({imageComponent:r,image:n,onSelectCard:a,urlPrefix:s,urlSufix:i,code:l,LinkComponent:d},c)=>{const h=d||"a";return e.jsx(x,{ref:c,onClick:a,as:h,...d?{to:`${s}${l}${i}`}:{href:`${s}${l}${i}`},children:_.isDefined(r)?r:e.jsx("img",{src:n,className:"wrapper__image"})})}),j=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -73,20 +73,20 @@
     }
   }
 
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${g.down("S")} {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;
       flex-wrap: wrap;
 
       & .wrapper__item {
-        max-width: 4 0.5rem;
+        max-width: 4.5rem;
       }
     }
   }
 `,f=m.styled(o.SkeletonRowWrapper)`
-  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
+  @media ${g.down("S")} {
     gap: 1rem;
     flex-wrap: wrap;
   }
-`,$=({keyPrefix:r})=>e.jsxs(f,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-1`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-2`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-3`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-4`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-5`)]}),y=({keyPrefix:r,isLoading:n=!1,fallbackComponent:a=e.jsx(e.Fragment,{}),children:i})=>e.jsx(p.Suspense,{fallbackComponent:a,children:n===!0?e.jsx($,{keyPrefix:r}):i}),v=p.forwardRef(({title:r,subtitle:n,items:a=[],isLoading:i=!1,onSelectCard:s=()=>{},urlPrefix:l,urlSufix:d,LinkComponent:c},h)=>e.jsxs(j,{ref:h,children:[e.jsxs("div",{className:"wrapper__heading",children:[r&&e.jsx("div",{className:"wrapper__title",children:r}),n&&e.jsx("div",{className:"wrapper__subtitle",children:n})]}),e.jsx(y,{isLoading:i,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:a==null?void 0:a.map((t,w)=>e.jsx(u,{image:t==null?void 0:t.image,imageComponent:t==null?void 0:t.imageComponent,onSelectCard:()=>s==null?void 0:s(t),className:"wrapper__item",urlPrefix:l,urlSufix:d,code:t==null?void 0:t.card,LinkComponent:c},`brand-hit-card__${w+1}`))})})]}));module.exports=v;
+`,$=({keyPrefix:r})=>e.jsxs(f,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-1`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-2`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-3`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-4`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-5`)]}),y=({keyPrefix:r,isLoading:n=!1,fallbackComponent:a=e.jsx(e.Fragment,{}),children:s})=>e.jsx(p.Suspense,{fallbackComponent:a,children:n===!0?e.jsx($,{keyPrefix:r}):s}),b=p.forwardRef(({title:r,subtitle:n,items:a=[],isLoading:s=!1,onSelectCard:i=()=>{},urlPrefix:l,urlSufix:d,LinkComponent:c},h)=>e.jsxs(j,{ref:h,children:[e.jsxs("div",{className:"wrapper__heading",children:[r&&e.jsx("div",{className:"wrapper__title",children:r}),n&&e.jsx("div",{className:"wrapper__subtitle",children:n})]}),e.jsx(y,{isLoading:s,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:a==null?void 0:a.map((t,w)=>e.jsx(u,{image:t==null?void 0:t.image,imageComponent:t==null?void 0:t.imageComponent,onSelectCard:()=>i==null?void 0:i(t),className:"wrapper__item",urlPrefix:l,urlSufix:d,code:t==null?void 0:t.card,LinkComponent:c},`brand-hit-card__${w+1}`))})})]}));module.exports=b;