@lanaco/lnc-react-ui 4.0.206 → 4.0.208

package/dist/BannerSectionSimple.cjs

@@ -1,10 +1,10 @@
-"use strict";const t=require("react/jsx-runtime"),H=require("react"),n=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./consts-goSZX3xP.cjs"),M=require("./Button.cjs"),z=require("./useDetectMobile-zkbzoOGV.cjs"),I=require("./utils-RnrgDDZP.cjs"),B=n.styled.div`
+"use strict";const t=require("react/jsx-runtime"),j=require("react"),n=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./breakpoints-CcVm-gVm.cjs"),z=require("./Button.cjs"),M=require("./useDetectMobile-DYV6V1yw.cjs"),k=require("./utils-CITgSxXe.cjs"),q=n.styled.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${e=>e.bgcolor||"transparent"};
   overflow: hidden;
-  max-height: ${e=>`${e.height}px`||"22.5rem"};
-  min-height: ${e=>`${e.height}px`||"22.5rem"};
+  max-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
+  min-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
   background-color: ${e=>e.bgcolor||"transparent"};
   position: relative;
 
@@ -14,10 +14,10 @@
 
   & img {
     object-fit: cover;
-    max-width: ${e=>`${e.imgW}px`||"22.5rem"};
-    min-width: ${e=>`${e.imgW}px`||"22.5rem"};
-    max-height: ${e=>`${e.height}px`||"22.5rem"};
-    min-height: ${e=>`${e.height}px`||"22.5rem"};
+    max-width: ${e=>e.imgW!=null?`${e.imgW}px`:"22.5rem"};
+    min-width: ${e=>e.imgW!=null?`${e.imgW}px`:"22.5rem"};
+    max-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
+    min-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
   }
 
   & .header-image {
@@ -33,7 +33,7 @@
 
 `}
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${o.down("S")} {
     gap: 1.5rem;
     flex-direction: column;
     min-height: unset;
@@ -48,8 +48,8 @@
     & img {
       max-width: 100%;
       min-width: 100%;
-      max-height: ${e=>`${e.imgHMob}px`||"12.1rem"};
-      min-height: ${e=>`${e.imgHMob}px`||"12.1rem"};
+      max-height: ${e=>e.imgHMob!=null?`${e.imgHMob}px`:"12.1rem"};
+      min-height: ${e=>e.imgHMob!=null?`${e.imgHMob}px`:"12.1rem"};
     }
 
     & .header-image {
@@ -59,7 +59,7 @@
       left: 0;
     }
   }
-`,_=n.styled.div`
+`,C=n.styled.div`
   padding: ${e=>e.smallPadding===!0?"2rem":"4rem 5rem"};
   display: flex;
   gap: 2rem;
@@ -84,13 +84,13 @@
     }
   }
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${o.down("S")} {
     padding: 0;
     flex-direction: column;
 
     ${e=>e!=null&&e.hasHeaderImage?"padding: 3.5rem 3.5rem 0 3.5rem;":""}
   }
-`,k=n.styled.div`
+`,W=n.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -113,7 +113,7 @@
     letter-spacing: -0.0112rem;
   }
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${o.down("S")} {
     flex-direction: column;
 
     & .header-title {
@@ -129,4 +129,4 @@
       letter-spacing: -0.0112rem;
     }
   }
-`,q=H.forwardRef((e,d)=>{const{title:g,subtitle:c,buttonText:x,buttonLink:u,onButtonAction:b=()=>{},imageUrl:o,imagePosition:m="right",hideImageForMobile:s=!1,sectionHeight:p="12.65625rem",imageWidth:f,imageHeightMobile:$,smallPadding:w=!1,isHorizontalContent:y=!1,backgroundColor:v,hasBorder:j=!1,headerImageUrl:i}=e,l=z.useDetectMobile();return t.jsxs(B,{ref:d,bgcolor:v,height:p,imgW:f,imgHMob:$,hasBorder:j,children:[i&&t.jsx("img",{src:i,className:"header-image",alt:"Header image"}),m!=="right"&&!(s===!0&&l===!0)&&t.jsx("img",{src:o,className:"banner-image"}),t.jsxs(_,{isHorizontalContent:y,smallPadding:w,hasHeaderImage:I.isDefined(i),children:[t.jsxs(k,{children:[t.jsx("div",{className:"header-title",children:g}),t.jsx("div",{className:"header-subitle",children:c})]}),t.jsx(M,{size:"medium",color:"neutral",type:"button",className:"header-button",onClick:r=>{var h;(h=r==null?void 0:r.target)==null||h.blur(),b(u)},children:x})]}),m==="right"&&!(s===!0&&l===!0)&&t.jsx("img",{src:o,className:"banner-image"})]})});module.exports=q;
+`,N=j.forwardRef((e,g)=>{const{title:d,subtitle:c,buttonText:u,buttonLink:x,onButtonAction:b=()=>{},imageUrl:a,imagePosition:l="right",hideImageForMobile:m=!1,sectionHeight:f="12.65625rem",imageWidth:p,imageHeightMobile:$,smallPadding:w=!1,isHorizontalContent:y=!1,backgroundColor:v,hasBorder:H=!1,headerImageUrl:i}=e,s=M.useDetectMobile();return t.jsxs(q,{ref:g,bgcolor:v,height:f,imgW:p,imgHMob:$,hasBorder:H,children:[i&&t.jsx("img",{src:i,className:"header-image",alt:"Header image"}),l!=="right"&&!(m===!0&&s===!0)&&t.jsx("img",{src:a,className:"banner-image"}),t.jsxs(C,{isHorizontalContent:y,smallPadding:w,hasHeaderImage:k.isDefined(i),children:[t.jsxs(W,{children:[t.jsx("div",{className:"header-title",children:d}),t.jsx("div",{className:"header-subitle",children:c})]}),t.jsx(z,{size:"medium",color:"neutral",type:"button",className:"header-button",onClick:r=>{var h;(h=r==null?void 0:r.target)==null||h.blur(),b(x)},children:u})]}),l==="right"&&!(m===!0&&s===!0)&&t.jsx("img",{src:a,className:"banner-image"})]})});module.exports=N;

package/dist/BannerSectionSimple.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { forwardRef as M } from "react";
-import { s as o } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as n } from "./consts-BuFChS64.js";
+import { s as a } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as n } from "./breakpoints-ff0SIcV3.js";
 import k from "./Button.js";
-import { u as C } from "./useDetectMobile-Bkvj0VMa.js";
-import { l as B } from "./utils-DtEfC-TX.js";
-const I = o.div`
+import { u as C } from "./useDetectMobile-CcVo3PNi.js";
+import { m as W } from "./utils-B2fsQ6PS.js";
+const N = a.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${(e) => e.bgcolor || "transparent"};
   overflow: hidden;
-  max-height: ${(e) => `${e.height}px` || "22.5rem"};
-  min-height: ${(e) => `${e.height}px` || "22.5rem"};
+  max-height: ${(e) => e.height != null ? `${e.height}px` : "22.5rem"};
+  min-height: ${(e) => e.height != null ? `${e.height}px` : "22.5rem"};
   background-color: ${(e) => e.bgcolor || "transparent"};
   position: relative;
 
@@ -21,10 +21,10 @@ const I = o.div`
 
   & img {
     object-fit: cover;
-    max-width: ${(e) => `${e.imgW}px` || "22.5rem"};
-    min-width: ${(e) => `${e.imgW}px` || "22.5rem"};
-    max-height: ${(e) => `${e.height}px` || "22.5rem"};
-    min-height: ${(e) => `${e.height}px` || "22.5rem"};
+    max-width: ${(e) => e.imgW != null ? `${e.imgW}px` : "22.5rem"};
+    min-width: ${(e) => e.imgW != null ? `${e.imgW}px` : "22.5rem"};
+    max-height: ${(e) => e.height != null ? `${e.height}px` : "22.5rem"};
+    min-height: ${(e) => e.height != null ? `${e.height}px` : "22.5rem"};
   }
 
   & .header-image {
@@ -40,7 +40,7 @@ const I = o.div`
 
 `}
 
-  @media (max-width: ${n + "px"}) {
+  @media ${n("S")} {
     gap: 1.5rem;
     flex-direction: column;
     min-height: unset;
@@ -55,8 +55,8 @@ const I = o.div`
     & img {
       max-width: 100%;
       min-width: 100%;
-      max-height: ${(e) => `${e.imgHMob}px` || "12.1rem"};
-      min-height: ${(e) => `${e.imgHMob}px` || "12.1rem"};
+      max-height: ${(e) => e.imgHMob != null ? `${e.imgHMob}px` : "12.1rem"};
+      min-height: ${(e) => e.imgHMob != null ? `${e.imgHMob}px` : "12.1rem"};
     }
 
     & .header-image {
@@ -66,7 +66,7 @@ const I = o.div`
       left: 0;
     }
   }
-`, N = o.div`
+`, B = a.div`
   padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
   display: flex;
   gap: 2rem;
@@ -91,13 +91,13 @@ const I = o.div`
     }
   }
 
-  @media (max-width: ${n + "px"}) {
+  @media ${n("S")} {
     padding: 0;
     flex-direction: column;
 
     ${(e) => e != null && e.hasHeaderImage ? "padding: 3.5rem 3.5rem 0 3.5rem;" : ""}
   }
-`, W = o.div`
+`, S = a.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -120,7 +120,7 @@ const I = o.div`
     letter-spacing: -0.0112rem;
   }
 
-  @media (max-width: ${n + "px"}) {
+  @media ${n("S")} {
     flex-direction: column;
 
     & .header-title {
@@ -136,18 +136,18 @@ const I = o.div`
       letter-spacing: -0.0112rem;
     }
   }
-`, _ = M((e, s) => {
+`, L = M((e, s) => {
   const {
     title: c,
-    subtitle: p,
-    buttonText: x,
-    buttonLink: f,
-    onButtonAction: u = () => {
+    subtitle: u,
+    buttonText: f,
+    buttonLink: b,
+    onButtonAction: x = () => {
     },
     imageUrl: m,
     imagePosition: l = "right",
     hideImageForMobile: h = !1,
-    sectionHeight: b = "12.65625rem",
+    sectionHeight: p = "12.65625rem",
     imageWidth: $,
     imageHeightMobile: w,
     smallPadding: v = !1,
@@ -155,29 +155,29 @@ const I = o.div`
     backgroundColor: H,
     hasBorder: z = !1,
     headerImageUrl: i
-  } = e, d = C();
-  return /* @__PURE__ */ a(
-    I,
+  } = e, g = C();
+  return /* @__PURE__ */ o(
+    N,
     {
       ref: s,
       bgcolor: H,
-      height: b,
+      height: p,
       imgW: $,
       imgHMob: w,
       hasBorder: z,
       children: [
         i && /* @__PURE__ */ t("img", { src: i, className: "header-image", alt: "Header image" }),
-        l !== "right" && !(h === !0 && d === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" }),
-        /* @__PURE__ */ a(
-          N,
+        l !== "right" && !(h === !0 && g === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" }),
+        /* @__PURE__ */ o(
+          B,
           {
             isHorizontalContent: y,
             smallPadding: v,
-            hasHeaderImage: B(i),
+            hasHeaderImage: W(i),
             children: [
-              /* @__PURE__ */ a(W, { children: [
+              /* @__PURE__ */ o(S, { children: [
                 /* @__PURE__ */ t("div", { className: "header-title", children: c }),
-                /* @__PURE__ */ t("div", { className: "header-subitle", children: p })
+                /* @__PURE__ */ t("div", { className: "header-subitle", children: u })
               ] }),
               /* @__PURE__ */ t(
                 k,
@@ -187,20 +187,20 @@ const I = o.div`
                   type: "button",
                   className: "header-button",
                   onClick: (r) => {
-                    var g;
-                    (g = r == null ? void 0 : r.target) == null || g.blur(), u(f);
+                    var d;
+                    (d = r == null ? void 0 : r.target) == null || d.blur(), x(b);
                   },
-                  children: x
+                  children: f
                 }
               )
             ]
           }
         ),
-        l === "right" && !(h === !0 && d === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" })
+        l === "right" && !(h === !0 && g === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" })
       ]
     }
   );
 });
 export {
-  _ as default
+  L as default
 };

package/dist/BannerSectionWithList.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),c=require("react"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./consts-goSZX3xP.cjs"),u=require("./Button.cjs"),i=require("./utils-RnrgDDZP.cjs"),x=o.styled.div`
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),l=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./breakpoints-CcVm-gVm.cjs"),u=require("./Button.cjs"),i=require("./utils-CITgSxXe.cjs"),x=l.styled.div`
   padding-bottom: 1.38rem;
   text-align: center;
   display: flex;
@@ -22,10 +22,10 @@
     }
   }
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     padding-bottom: 0;
   }
-`,p=o.styled.div`
+`,y=l.styled.div`
   text-align: center;
   display: flex;
   justify-content: center;
@@ -50,7 +50,7 @@
     line-height: 1.5rem;
   }
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     & .header-title {
       font-size: 1.375rem;
       line-height: 1.75rem;
@@ -62,7 +62,7 @@
       line-height: 1.25rem;
     }
   }
-`,y=o.styled.div`
+`,p=l.styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -88,7 +88,7 @@
     }
   }
 
-  @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     & .list-item {
       flex-direction: column;
       text-align: center;
@@ -96,4 +96,4 @@
       gap: 0;
     }
   }
-`,b=c.forwardRef((m,d)=>{const{title:r,subtitle:s,buttonText:h,list:l,buttonLink:g,onButtonAction:f=()=>{}}=m;return e.jsxs(x,{ref:d,children:[(i.isDefined(r)||i.isDefined(s))&&e.jsxs(p,{children:[i.isDefined(r)&&e.jsx("div",{className:"header-title",children:r}),i.isDefined(s)&&e.jsx("div",{className:"header-subitle",children:s})]}),e.jsx(y,{children:l==null?void 0:l.map((t,n)=>e.jsx(c.Fragment,{children:e.jsxs("div",{className:"list-item",children:[e.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),e.jsx("span",{children:t})]})},n))}),e.jsx(u,{size:"medium",color:"neutral",type:"button",className:"header-button",onClick:t=>{var n;(n=t==null?void 0:t.target)==null||n.blur(),f(g)},children:h})]})});module.exports=b;
+`,b=c.forwardRef((m,d)=>{const{title:r,subtitle:o,buttonText:g,list:s,buttonLink:f,onButtonAction:h=()=>{}}=m;return e.jsxs(x,{ref:d,children:[(i.isDefined(r)||i.isDefined(o))&&e.jsxs(y,{children:[i.isDefined(r)&&e.jsx("div",{className:"header-title",children:r}),i.isDefined(o)&&e.jsx("div",{className:"header-subitle",children:o})]}),e.jsx(p,{children:s==null?void 0:s.map((t,n)=>e.jsx(c.Fragment,{children:e.jsxs("div",{className:"list-item",children:[e.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),e.jsx("span",{children:t})]})},n))}),e.jsx(u,{size:"medium",color:"neutral",type:"button",className:"header-button",onClick:t=>{var n;(n=t==null?void 0:t.target)==null||n.blur(),h(f)},children:g})]})});module.exports=b;

package/dist/BannerSectionWithList.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { forwardRef as p, Fragment as u } from "react";
 import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as s } from "./consts-BuFChS64.js";
-import x from "./Button.js";
-import { l as n } from "./utils-DtEfC-TX.js";
-const y = m.div`
+import { d as s } from "./breakpoints-ff0SIcV3.js";
+import y from "./Button.js";
+import { m as i } from "./utils-B2fsQ6PS.js";
+const x = m.div`
   padding-bottom: 1.38rem;
   text-align: center;
   display: flex;
@@ -28,7 +28,7 @@ const y = m.div`
     }
   }
 
-  @media (max-width: ${s + "px"}) {
+  @media ${s("S")} {
     padding-bottom: 0;
   }
 `, b = m.div`
@@ -56,7 +56,7 @@ const y = m.div`
     line-height: 1.5rem;
   }
 
-  @media (max-width: ${s + "px"}) {
+  @media ${s("S")} {
     & .header-title {
       font-size: 1.375rem;
       line-height: 1.75rem;
@@ -94,7 +94,7 @@ const y = m.div`
     }
   }
 
-  @media (max-width: ${s + "px"}) {
+  @media ${s("S")} {
     & .list-item {
       flex-direction: column;
       text-align: center;
@@ -102,35 +102,35 @@ const y = m.div`
       gap: 0;
     }
   }
-`, L = p((c, d) => {
+`, B = p((c, d) => {
   const {
     title: r,
     subtitle: o,
     buttonText: f,
     list: a,
-    buttonLink: h,
-    onButtonAction: g = () => {
+    buttonLink: g,
+    onButtonAction: h = () => {
     }
   } = c;
-  return /* @__PURE__ */ l(y, { ref: d, children: [
-    (n(r) || n(o)) && /* @__PURE__ */ l(b, { children: [
-      n(r) && /* @__PURE__ */ e("div", { className: "header-title", children: r }),
-      n(o) && /* @__PURE__ */ e("div", { className: "header-subitle", children: o })
+  return /* @__PURE__ */ l(x, { ref: d, children: [
+    (i(r) || i(o)) && /* @__PURE__ */ l(b, { children: [
+      i(r) && /* @__PURE__ */ e("div", { className: "header-title", children: r }),
+      i(o) && /* @__PURE__ */ e("div", { className: "header-subitle", children: o })
     ] }),
-    /* @__PURE__ */ e(v, { children: a == null ? void 0 : a.map((t, i) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
+    /* @__PURE__ */ e(v, { children: a == null ? void 0 : a.map((t, n) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
       /* @__PURE__ */ e("i", { className: "mng mng-lnc-checkmark--filled" }),
       /* @__PURE__ */ e("span", { children: t })
-    ] }) }, i)) }),
+    ] }) }, n)) }),
     /* @__PURE__ */ e(
-      x,
+      y,
       {
         size: "medium",
         color: "neutral",
         type: "button",
         className: "header-button",
         onClick: (t) => {
-          var i;
-          (i = t == null ? void 0 : t.target) == null || i.blur(), g(h);
+          var n;
+          (n = t == null ? void 0 : t.target) == null || n.blur(), h(g);
         },
         children: f
       }
@@ -138,5 +138,5 @@ const y = m.div`
   ] });
 });
 export {
-  L as default
+  B as default
 };

package/dist/BannerSectionWithListImage.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),s=require("react"),n=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./consts-goSZX3xP.cjs"),w=require("./Button.cjs"),j=n.styled.div`
+"use strict";const i=require("react/jsx-runtime"),s=require("react"),n=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./breakpoints-CcVm-gVm.cjs"),w=require("./Button.cjs"),j=n.styled.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${e=>(e==null?void 0:e.bgColor)||"transparent"};
@@ -21,7 +21,7 @@
 
 `}
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     flex-direction: column;
     border-radius: 0;
     border: none;
@@ -42,7 +42,7 @@
   flex: 1;
   flex-direction: column;
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     padding: 0 0 1.25rem 0;
   }
 `,$=n.styled.div`
@@ -68,10 +68,10 @@
     letter-spacing: -0.0112rem;
   }
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media ${a.down("S")} {
     flex-direction: column;
   }
-`,_=n.styled.div`
+`,H=n.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -93,7 +93,4 @@
       color: var(--info-600, #6d28d9);
     }
   }
-
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
-  }
-`,B=s.forwardRef((e,m)=>{const{title:l,subtitle:d,buttonText:c,list:a,imageUrl:g,imageHeight:h,imageWidth:x,imageHeightMobile:p,hasBorder:u=!0,backgroundColor:f="transparent",onButtonAction:b=()=>{},buttonLink:y}=e;return i.jsxs(j,{ref:m,imgH:h,imgW:x,imgHMob:p,hasBorder:u,bgColor:f,children:[i.jsxs(v,{children:[i.jsxs($,{children:[i.jsx("div",{className:"header-title",children:l}),i.jsx("div",{className:"header-subitle",children:d})]}),i.jsx(_,{children:a==null?void 0:a.map((t,r)=>i.jsx(s.Fragment,{children:i.jsxs("div",{className:"list-item",children:[i.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),i.jsx("span",{children:t})]})},r))}),i.jsx(w,{size:"medium",color:"neutral",type:"button",btnType:"outline",onClick:t=>{var r;(r=t==null?void 0:t.target)==null||r.blur(),b(y)},children:c})]}),i.jsx("img",{src:g})]})});module.exports=B;
+`,k=s.forwardRef((e,l)=>{const{title:m,subtitle:d,buttonText:c,list:o,imageUrl:g,imageHeight:h,imageWidth:x,imageHeightMobile:u,hasBorder:p=!0,backgroundColor:f="transparent",onButtonAction:b=()=>{},buttonLink:y}=e;return i.jsxs(j,{ref:l,imgH:h,imgW:x,imgHMob:u,hasBorder:p,bgColor:f,children:[i.jsxs(v,{children:[i.jsxs($,{children:[i.jsx("div",{className:"header-title",children:m}),i.jsx("div",{className:"header-subitle",children:d})]}),i.jsx(H,{children:o==null?void 0:o.map((r,t)=>i.jsx(s.Fragment,{children:i.jsxs("div",{className:"list-item",children:[i.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),i.jsx("span",{children:r})]})},t))}),i.jsx(w,{size:"medium",color:"neutral",type:"button",btnType:"outline",onClick:r=>{var t;(t=r==null?void 0:r.target)==null||t.blur(),b(y)},children:c})]}),i.jsx("img",{src:g})]})});module.exports=k;

package/dist/BannerSectionWithListImage.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { forwardRef as y, Fragment as v } from "react";
+import { forwardRef as w, Fragment as v } from "react";
 import { s as n } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as a } from "./consts-BuFChS64.js";
+import { d as m } from "./breakpoints-ff0SIcV3.js";
 import $ from "./Button.js";
 const H = n.div`
   display: flex;
@@ -26,7 +26,7 @@ const H = n.div`
 
 `}
 
-  @media (max-width: ${a + "px"}) {
+  @media ${m("S")} {
     flex-direction: column;
     border-radius: 0;
     border: none;
@@ -47,7 +47,7 @@ const H = n.div`
   flex: 1;
   flex-direction: column;
 
-  @media (max-width: ${a + "px"}) {
+  @media ${m("S")} {
     padding: 0 0 1.25rem 0;
   }
 `, k = n.div`
@@ -73,7 +73,7 @@ const H = n.div`
     letter-spacing: -0.0112rem;
   }
 
-  @media (max-width: ${a + "px"}) {
+  @media ${m("S")} {
     flex-direction: column;
   }
 `, z = n.div`
@@ -98,33 +98,30 @@ const H = n.div`
       color: var(--info-600, #6d28d9);
     }
   }
-
-  @media (max-width: ${a + "px"}) {
-  }
-`, N = y((e, l) => {
+`, S = w((e, l) => {
   const {
     title: d,
     subtitle: s,
     buttonText: g,
-    list: m,
+    list: a,
     imageUrl: c,
     imageHeight: h,
-    imageWidth: p,
-    imageHeightMobile: x,
-    hasBorder: f = !0,
+    imageWidth: f,
+    imageHeightMobile: p,
+    hasBorder: x = !0,
     backgroundColor: b = "transparent",
     onButtonAction: u = () => {
     },
-    buttonLink: w
+    buttonLink: y
   } = e;
   return /* @__PURE__ */ o(
     H,
     {
       ref: l,
       imgH: h,
-      imgW: p,
-      imgHMob: x,
-      hasBorder: f,
+      imgW: f,
+      imgHMob: p,
+      hasBorder: x,
       bgColor: b,
       children: [
         /* @__PURE__ */ o(W, { children: [
@@ -132,7 +129,7 @@ const H = n.div`
             /* @__PURE__ */ i("div", { className: "header-title", children: d }),
             /* @__PURE__ */ i("div", { className: "header-subitle", children: s })
           ] }),
-          /* @__PURE__ */ i(z, { children: m == null ? void 0 : m.map((r, t) => /* @__PURE__ */ i(v, { children: /* @__PURE__ */ o("div", { className: "list-item", children: [
+          /* @__PURE__ */ i(z, { children: a == null ? void 0 : a.map((r, t) => /* @__PURE__ */ i(v, { children: /* @__PURE__ */ o("div", { className: "list-item", children: [
             /* @__PURE__ */ i("i", { className: "mng mng-lnc-checkmark--filled" }),
             /* @__PURE__ */ i("span", { children: r })
           ] }) }, t)) }),
@@ -145,7 +142,7 @@ const H = n.div`
               btnType: "outline",
               onClick: (r) => {
                 var t;
-                (t = r == null ? void 0 : r.target) == null || t.blur(), u(w);
+                (t = r == null ? void 0 : r.target) == null || t.blur(), u(y);
               },
               children: g
             }
@@ -157,5 +154,5 @@ const H = n.div`
   );
 });
 export {
-  N as default
+  S as default
 };

package/dist/BlogCardsSponsoredSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),d=require("react"),s=require("./utils-RnrgDDZP.cjs"),y=require("./Icon.cjs"),x=require("./style-B4kAj6YU.cjs"),R=require("./index-uwl7BjRF.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),N=require("./consts-goSZX3xP.cjs"),$=require("./Button.cjs"),z=require("./index-D0IYt1s3.cjs"),I=j.styled.a`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),s=require("./utils-CITgSxXe.cjs"),y=require("./Icon.cjs"),R=require("./style-DC05rdyx.cjs"),$=require("./index-DsINTjQk.cjs"),N=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./breakpoints-CcVm-gVm.cjs"),z=require("./Button.cjs"),q=require("./index-uCWKRzoS.cjs"),k=N.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -97,7 +97,7 @@
     }
   }
 
-  @media (max-width: ${N.MOBILE_SIZE_PX+"px"}) {
+  @media ${v.down("S")} {
     flex-direction: column;
     padding: 0;
 
@@ -123,7 +123,7 @@
       }
     }
   }
-`,q=d.forwardRef(({title:t,imageUrl:p,options:n,publishedAt:m,timeToReadText:g="{0} min read",timeToRead:h=0,numberOfLikes:o=0,numberOfComments:c=0,isSponsored:l=!1,onSelectCard:f=()=>{},metadata:a,titleSlug:_,LinkComponent:u},v)=>{const w=u||"a",i=d.useRef();return r.jsxs(I,{ref:i,isSponsored:l,"data-accessor":a==null?void 0:a.accessor,name:a==null?void 0:a.name,onClick:e=>f(e,i),as:w,...u?{to:`/blog/${_}`}:{href:`/blog/${_}`},children:[l&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(y,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx(R.ProductImageWrapper,{src:p,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:t}),r.jsx("div",{className:"wrapper__tags",children:n&&(n==null?void 0:n.map((e,b)=>r.jsx(x.BlogTag,{color:e==null?void 0:e.color,children:e==null?void 0:e.name},b)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${s.formatLocaleDateString(m)} • ${s.formatString(g,h)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),s.getRoundedNumber(o)]}),r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),s.getRoundedNumber(c)]})]})]})]})]})}),k=j.styled.div`
+`,x=d.forwardRef(({title:t,imageUrl:p,options:n,publishedAt:m,timeToReadText:g="{0} min read",timeToRead:h=0,numberOfLikes:o=0,numberOfComments:c=0,isSponsored:l=!1,onSelectCard:f=()=>{},metadata:a,titleSlug:_,LinkComponent:u},j)=>{const w=u||"a",i=d.useRef();return r.jsxs(k,{ref:i,isSponsored:l,"data-accessor":a==null?void 0:a.accessor,name:a==null?void 0:a.name,onClick:e=>f(e,i),as:w,...u?{to:`/blog/${_}`}:{href:`/blog/${_}`},children:[l&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(y,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx($.ProductImageWrapper,{src:p,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:t}),r.jsx("div",{className:"wrapper__tags",children:n&&(n==null?void 0:n.map((e,b)=>r.jsx(R.BlogTag,{color:e==null?void 0:e.color,children:e==null?void 0:e.name},b)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${s.formatLocaleDateString(m)} • ${s.formatString(g,h)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),s.getRoundedNumber(o)]}),r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),s.getRoundedNumber(c)]})]})]})]})]})}),I=N.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -193,7 +193,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${N.MOBILE_SIZE_PX+"px"}) {
+  @media ${v.down("S")} {
     gap: 1.25rem;
 
     & .wrapper__title {
@@ -201,10 +201,12 @@
         font-size: 1.375rem;
       }
     }
+  }
 
+  @media ${v.down("XS")} {
     & .wrapper__cards {
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: 1.5rem;
     }
   }
-`,E=d.memo(q),O=d.forwardRef(({title:t,subtitle:p,icon:n,buttonText:m,buttonLink:g,timeToReadText:h="{0} min read",items:o,onButtonAction:c=()=>{},onSelectCard:l=()=>{},isLoading:f=!1,getImage:a=()=>{},componentName:_,LinkComponent:u},v)=>{const w=d.useMemo(()=>{var i;return(i=o==null?void 0:o.slice(0,4))==null?void 0:i.map((e,b)=>r.jsx(E,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:h,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:(B,S)=>l==null?void 0:l(e,S),imageUrl:a(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,metadata:{name:_,accessor:e==null?void 0:e.accessor},LinkComponent:u},`blog-card-sponsored__${b+1}`))},[o]);return r.jsxs(k,{ref:v,children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[t&&r.jsxs("div",{className:"title__text",children:[s.isDefinedNotEmptyString(n)&&r.jsx("i",{className:n}),r.jsx("span",{children:t})]}),s.isDefinedNotEmptyString(m)&&s.isDefinedNotEmptyString(g)&&!f&&r.jsx($,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:i=>{var e;(e=i==null?void 0:i.target)==null||e.blur(),c==null||c(g)}})]}),p&&r.jsx("div",{className:"wrapper__subtitle",children:p})]}),r.jsx(z.SuspenseBlogCardsSponsored,{isLoading:f,keyPrefix:"blog-cards-sponsored-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:w})})]})});module.exports=O;
+`,C=d.memo(x),T=d.forwardRef(({title:t,subtitle:p,icon:n,buttonText:m,buttonLink:g,timeToReadText:h="{0} min read",items:o,onButtonAction:c=()=>{},onSelectCard:l=()=>{},isLoading:f=!1,getImage:a=()=>{},componentName:_,LinkComponent:u},j)=>{const w=d.useMemo(()=>{var i;return(i=o==null?void 0:o.slice(0,4))==null?void 0:i.map((e,b)=>r.jsx(C,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:h,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:(U,S)=>l==null?void 0:l(e,S),imageUrl:a(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,metadata:{name:_,accessor:e==null?void 0:e.accessor},LinkComponent:u},`blog-card-sponsored__${b+1}`))},[o]);return r.jsxs(I,{ref:j,children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[t&&r.jsxs("div",{className:"title__text",children:[s.isDefinedNotEmptyString(n)&&r.jsx("i",{className:n}),r.jsx("span",{children:t})]}),s.isDefinedNotEmptyString(m)&&s.isDefinedNotEmptyString(g)&&!f&&r.jsx(z,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:i=>{var e;(e=i==null?void 0:i.target)==null||e.blur(),c==null||c(g)}})]}),p&&r.jsx("div",{className:"wrapper__subtitle",children:p})]}),r.jsx(q.SuspenseBlogCardsSponsored,{isLoading:f,keyPrefix:"blog-cards-sponsored-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:w})})]})});module.exports=T;