@lanaco/lnc-react-ui 4.0.206 → 4.0.207

package/dist/Badge.js

@@ -1,7 +1,7 @@
 import { jsx as h } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as y, b as t, a as z } from "./utils-DtEfC-TX.js";
+import { d as y, c as t, b as z } from "./utils-B2fsQ6PS.js";
 import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const r = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B = b.div`
   ${(e) => y(e.theme, "Badge", e.size, "enabled")};
@@ -26,9 +26,9 @@ const r = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B
   & i {
     font-size: ${(e) => e.size == "small" ? "0.75rem" : e.size == "medium" ? "0.875rem" : "1rem"};
   }
-`, j = f((e, a) => {
+`, j = f((e, i) => {
   const {
-    borderRadius: i = "curved",
+    borderRadius: a = "curved",
     onClick: o = () => {
     },
     className: m = "",
@@ -38,14 +38,14 @@ const r = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B
     children: l,
     ...c
   } = e, u = $(), g = {
-    borderRadius: i,
+    borderRadius: a,
     theme: u,
     size: n,
     color: d,
     className: "lnc-ui-badge " + m,
     style: s
   };
-  return /* @__PURE__ */ h(B, { ref: a, ...g, onClick: o, ...c, children: l });
+  return /* @__PURE__ */ h(B, { ref: i, ...g, onClick: o, ...c, children: l });
 });
 export {
   j as default

package/dist/BannerNextSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),g=require("react"),h=require("./Button.cjs"),_=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./utils-RnrgDDZP.cjs"),x=require("./consts-goSZX3xP.cjs"),u=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=_.styled.div`
+"use strict";const e=require("react/jsx-runtime"),g=require("react"),h=require("./Button.cjs"),_=require("./emotion-styled.browser.esm-BtEseadx.cjs"),a=require("./utils-CITgSxXe.cjs"),x=require("./breakpoints-CcVm-gVm.cjs"),u=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),f=_.styled.div`
   display: flex;
   align-items: center;
 
@@ -82,7 +82,7 @@
     }
   }
 
-  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
+  @media ${x.down("S")} {
     flex-direction: column;
 
     & .section__left {

package/dist/BannerNextSection.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { forwardRef as h } from "react";
-import _ from "./Button.js";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { m } from "./utils-DtEfC-TX.js";
-import { M as p } from "./consts-BuFChS64.js";
+import f from "./Button.js";
+import { s as _ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { n as c } from "./utils-B2fsQ6PS.js";
+import { d as p } from "./breakpoints-ff0SIcV3.js";
 import { u as x } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const u = f.div`
+const u = _.div`
   display: flex;
   align-items: center;
 
@@ -46,7 +46,7 @@ const u = f.div`
       gap: 0.5rem;
 
       & .section__title {
-        ${m(3)}
+        ${c(3)}
         color: #000;
         font-weight: 600;
         font-size: 1.75rem;
@@ -57,7 +57,7 @@ const u = f.div`
       }
 
       & .section__description {
-        ${m(2)}
+        ${c(2)}
         color: var(--gray-600, #676e79);
         font-weight: 500;
         font-size: 0.875rem;
@@ -89,7 +89,7 @@ const u = f.div`
     }
   }
 
-  @media (max-width: ${p + "px"}) {
+  @media ${p("S")} {
     flex-direction: column;
 
     & .section__left {
@@ -108,19 +108,19 @@ const u = f.div`
       flex-direction: column;
     }
   }
-`, B = h(
+`, $ = h(
   ({
     title: e,
     description: o,
     imageUrl: n,
-    backgroundColor: c = "white",
+    backgroundColor: m = "white",
     buttonText: a,
     buttonLink: s,
     onButtonAction: d = () => {
     }
   }, l) => {
     const g = x();
-    return /* @__PURE__ */ r(u, { ref: l, theme: g, backgroundColor: c, children: [
+    return /* @__PURE__ */ r(u, { ref: l, theme: g, backgroundColor: m, children: [
       /* @__PURE__ */ i("div", { className: "section__left", children: n && /* @__PURE__ */ i("div", { className: "section__image", children: /* @__PURE__ */ i("img", { src: n, alt: "Banner next image", loading: "lazy" }) }) }),
       /* @__PURE__ */ r("div", { className: "section__right", children: [
         /* @__PURE__ */ r("div", { className: "section__text", children: [
@@ -128,7 +128,7 @@ const u = f.div`
           o && /* @__PURE__ */ i("div", { className: "section__description", children: o })
         ] }),
         a && s && /* @__PURE__ */ i(
-          _,
+          f,
           {
             text: a,
             borderRadius: "curved",
@@ -144,5 +144,5 @@ const u = f.div`
   }
 );
 export {
-  B as default
+  $ as default
 };

package/dist/BannerSectionBasic.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),x=require("react"),r=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./consts-goSZX3xP.cjs"),b=require("./Button.cjs"),p=r.styled.div`
+"use strict";const t=require("react/jsx-runtime"),x=require("react"),r=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./breakpoints-CcVm-gVm.cjs"),b=require("./Button.cjs"),p=r.styled.div`
   display: flex;
   border-radius: 0.75rem;
   background-color: ${e=>e.bgcolor||"transparent"};
@@ -12,7 +12,7 @@
     color: var(--gray-950, #14161a);
   }
 
-  @media (max-width: ${i.MOBILE_SIZE_PX+"px"}) {
+  @media ${i.down("S")} {
     gap: 1.5rem;
     flex-direction: column;
     min-height: unset;
@@ -32,7 +32,7 @@
 
   ${e=>e.isHorizontalContent===!0&&"justify-content: space-between;"}
 
-  @media (max-width: ${i.MOBILE_SIZE_PX+"px"}) {
+  @media ${i.down("S")} {
     padding: 0;
     flex-direction: column;
   }
@@ -53,4 +53,4 @@
     font-size: 1rem;
     font-weight: 500;
   }
-`,w=x.forwardRef((e,n)=>{const{title:o,subtitle:a,buttonText:s,onClick:l,height:d,imageWidth:c,imageHeightMob:m,smallPadding:h=!1,isHorizontalContent:u=!1,backgroundColor:g,hasBorder:f=!1}=e;return t.jsx(p,{ref:n,bgcolor:g,height:d,imgW:c,imgHMob:m,hasBorder:f,children:t.jsxs(y,{isHorizontalContent:u,smallPadding:h,children:[t.jsxs(v,{children:[t.jsx("div",{className:"header-title",children:o}),t.jsx("div",{className:"header-subitle",children:a})]}),t.jsx(b,{size:"medium",color:"neutral",type:"button",borderRadius:"curved",onClick:l,children:s})]})})});module.exports=w;
+`,w=x.forwardRef((e,n)=>{const{title:o,subtitle:a,buttonText:s,onClick:l,height:d,imageWidth:c,imageHeightMob:m,smallPadding:u=!1,isHorizontalContent:g=!1,backgroundColor:h,hasBorder:f=!1}=e;return t.jsx(p,{ref:n,bgcolor:h,height:d,imgW:c,imgHMob:m,hasBorder:f,children:t.jsxs(y,{isHorizontalContent:g,smallPadding:u,children:[t.jsxs(v,{children:[t.jsx("div",{className:"header-title",children:o}),t.jsx("div",{className:"header-subitle",children:a})]}),t.jsx(b,{size:"medium",color:"neutral",type:"button",borderRadius:"curved",onClick:l,children:s})]})})});module.exports=w;

package/dist/BannerSectionBasic.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
+import { forwardRef as b } from "react";
 import { s as r } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as o } from "./consts-BuFChS64.js";
-import b from "./Button.js";
+import { d as o } from "./breakpoints-ff0SIcV3.js";
+import x from "./Button.js";
 const v = r.div`
   display: flex;
   border-radius: 0.75rem;
@@ -17,7 +17,7 @@ const v = r.div`
     color: var(--gray-950, #14161a);
   }
 
-  @media (max-width: ${o + "px"}) {
+  @media ${o("S")} {
     gap: 1.5rem;
     flex-direction: column;
     min-height: unset;
@@ -27,7 +27,7 @@ const v = r.div`
       width: fit-content;
     }
   }
-`, w = r.div`
+`, y = r.div`
   padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
   display: flex;
   gap: 2rem;
@@ -37,11 +37,11 @@ const v = r.div`
 
   ${(e) => e.isHorizontalContent === !0 && "justify-content: space-between;"}
 
-  @media (max-width: ${o + "px"}) {
+  @media ${o("S")} {
     padding: 0;
     flex-direction: column;
   }
-`, y = r.div`
+`, w = r.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -58,16 +58,16 @@ const v = r.div`
     font-size: 1rem;
     font-weight: 500;
   }
-`, k = x((e, n) => {
+`, B = b((e, n) => {
   const {
     title: a,
     subtitle: l,
     buttonText: d,
-    onClick: m,
-    height: s,
-    imageWidth: c,
-    imageHeightMob: h,
-    smallPadding: g = !1,
+    onClick: s,
+    height: c,
+    imageWidth: m,
+    imageHeightMob: g,
+    smallPadding: h = !1,
     isHorizontalContent: f = !1,
     backgroundColor: u,
     hasBorder: p = !1
@@ -77,28 +77,28 @@ const v = r.div`
     {
       ref: n,
       bgcolor: u,
-      height: s,
-      imgW: c,
-      imgHMob: h,
+      height: c,
+      imgW: m,
+      imgHMob: g,
       hasBorder: p,
       children: /* @__PURE__ */ i(
-        w,
+        y,
         {
           isHorizontalContent: f,
-          smallPadding: g,
+          smallPadding: h,
           children: [
-            /* @__PURE__ */ i(y, { children: [
+            /* @__PURE__ */ i(w, { children: [
               /* @__PURE__ */ t("div", { className: "header-title", children: a }),
               /* @__PURE__ */ t("div", { className: "header-subitle", children: l })
             ] }),
             /* @__PURE__ */ t(
-              b,
+              x,
               {
                 size: "medium",
                 color: "neutral",
                 type: "button",
                 borderRadius: "curved",
-                onClick: m,
+                onClick: s,
                 children: d
               }
             )
@@ -109,5 +109,5 @@ const v = r.div`
   );
 });
 export {
-  k as default
+  B as default
 };

package/dist/BannerSectionCarousel.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),x=require("./index-DeS-oqJB.cjs"),b=require("./Button.cjs"),y=require("./useDetectMobile-zkbzoOGV.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),u=require("./style-BAcV7F53.cjs"),v=require("./consts-goSZX3xP.cjs"),w=d.styled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),x=require("./index-DeS-oqJB.cjs"),v=require("./Button.cjs"),w=require("./useDetectMobile-DYV6V1yw.cjs"),t=require("./breakpoints-CcVm-gVm.cjs"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./style-BAcV7F53.cjs"),y=u.styled.div`
   &:hover {
     cursor: pointer;
 
@@ -37,7 +37,9 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
+        object-position: center;
         display: block;
+        border-radius: inherit;
       }
 
       & .card__content {
@@ -114,7 +116,25 @@
     right: 1rem;
   }
 
-  @media (max-width: 464px) {
+  @media ${t.down("M")} {
+    & .carousel-item .section__card,
+    & .carousel-item:not(.react-multi-carousel-item--active) .section__card {
+      height: 26rem;
+    }
+    & .carousel-item .section__card .section__image {
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  @media ${t.down("S")} {
+    & .carousel-item .section__card .section__image {
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  @media ${t.down("XS")} {
     & .carousel-container {
       min-height: 23.4375rem;
     }
@@ -148,7 +168,8 @@
         border-radius: 0.5rem;
 
         & .section__image {
-          object-fit: fill;
+          object-fit: cover;
+          object-position: center;
         }
 
         & .card__content {
@@ -167,11 +188,11 @@
       }
     }
   }
-`,j=d.styled(u.SkeletonColumnWrapper)`
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+`,j=u.styled(m.SkeletonColumnWrapper)`
+  @media ${t.down("S")} {
     & > div {
       height: 100%;
       aspect-ratio: 1 / 1;
     }
   }
-`,k=({keyPrefix:t})=>r.jsx(j,{noGradient:!0,children:r.jsx(u.SkeletonLinePlaceholder,{keyPrefix:`${t}-1`,height:"22.5rem"})}),C=({keyPrefix:t,isLoading:i=!1,fallbackComponent:a=r.jsx(r.Fragment,{}),children:n})=>r.jsx(c.Suspense,{fallbackComponent:a,children:i===!0?r.jsx(k,{keyPrefix:t}):n}),S=c.forwardRef(({items:t=[],isLoading:i=!1,deviceType:a,partialVisible:n=!0,fallbackComponent:h=r.jsx(r.Fragment,{}),onSelectItem:m=()=>{},onButtonAction:_=()=>{},carouselProps:p},g)=>{const f={desktop:{breakpoint:{max:3e3,min:1024},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:1024,min:464},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:464,min:0},items:1,partialVisibilityGutter:64}},s=y.useDetectMobile();return r.jsx(w,{ref:g,children:r.jsx(C,{fallbackComponent:h,keyPrefix:"banner-carousel-skeleton",isLoading:i,children:r.jsx(x.Carousel,{responsive:f,deviceType:a,removeArrowOnDeviceType:["tablet","mobile"],infinite:!s,keyBoardControl:!0,autoPlay:!0,partialVisible:n,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...p,children:t==null?void 0:t.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>m(e),children:[r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,className:"section__image"}),r.jsxs("div",{className:"card__content",children:[r.jsxs("div",{className:"card__text",children:[(e==null?void 0:e.title)&&r.jsx("div",{className:"card__title",children:e==null?void 0:e.title}),(e==null?void 0:e.title)&&r.jsx("div",{className:"card__description",children:e==null?void 0:e.description})]}),(e==null?void 0:e.buttonText)&&r.jsx(b,{text:e==null?void 0:e.buttonText,className:"card__action",size:"medium",onClick:o=>{o==null||o.stopPropagation(),_(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${s}`)});module.exports=S;
+`,k=({keyPrefix:i})=>r.jsx(j,{noGradient:!0,children:r.jsx(m.SkeletonLinePlaceholder,{keyPrefix:`${i}-1`,height:"22.5rem"})}),S=({keyPrefix:i,isLoading:o=!1,fallbackComponent:a=r.jsx(r.Fragment,{}),children:n})=>r.jsx(d.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(k,{keyPrefix:i}):n}),C=d.forwardRef(({items:i=[],isLoading:o=!1,deviceType:a,partialVisible:n=!0,fallbackComponent:h=r.jsx(r.Fragment,{}),onSelectItem:_=()=>{},onButtonAction:p=()=>{},carouselProps:g},f)=>{const b={desktop:{breakpoint:{max:3e3,min:t.screenSizes.M.max},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:t.screenSizes.M.max,min:t.screenSizes.S.min},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:t.screenSizes.XS.max,min:0},items:1,partialVisibilityGutter:64}},c=w.useDetectMobile();return r.jsx(y,{ref:f,children:r.jsx(S,{fallbackComponent:h,keyPrefix:"banner-carousel-skeleton",isLoading:o,children:r.jsx(x.Carousel,{responsive:b,deviceType:a,removeArrowOnDeviceType:["tablet","mobile"],infinite:!c,keyBoardControl:!0,autoPlay:!0,partialVisible:n,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...g,children:i==null?void 0:i.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>_(e),children:[r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,className:"section__image"}),r.jsxs("div",{className:"card__content",children:[r.jsxs("div",{className:"card__text",children:[(e==null?void 0:e.title)&&r.jsx("div",{className:"card__title",children:e==null?void 0:e.title}),(e==null?void 0:e.title)&&r.jsx("div",{className:"card__description",children:e==null?void 0:e.description})]}),(e==null?void 0:e.buttonText)&&r.jsx(v,{text:e==null?void 0:e.buttonText,className:"card__action",size:"medium",onClick:s=>{s==null||s.stopPropagation(),p(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${c}`)});module.exports=C;

package/dist/BannerSectionCarousel.js

@@ -1,12 +1,12 @@
-import { jsx as r, Fragment as d, jsxs as l } from "react/jsx-runtime";
-import { Suspense as b, forwardRef as x } from "react";
-import { C as v } from "./index-BppfjY8h.js";
-import w from "./Button.js";
-import { u as y } from "./useDetectMobile-Bkvj0VMa.js";
-import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as k, a as C } from "./style-BwQ4djFC.js";
-import { M as S } from "./consts-BuFChS64.js";
-const N = m.div`
+import { jsx as r, Fragment as u, jsxs as l } from "react/jsx-runtime";
+import { Suspense as v, forwardRef as y } from "react";
+import { C as w } from "./index-BppfjY8h.js";
+import k from "./Button.js";
+import { u as C } from "./useDetectMobile-CcVo3PNi.js";
+import { d as a, s as i } from "./breakpoints-ff0SIcV3.js";
+import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { b as S, a as j } from "./style-BwQ4djFC.js";
+const $ = h.div`
   &:hover {
     cursor: pointer;
 
@@ -45,7 +45,9 @@ const N = m.div`
         width: 100%;
         height: 100%;
         object-fit: cover;
+        object-position: center;
         display: block;
+        border-radius: inherit;
       }
 
       & .card__content {
@@ -122,7 +124,25 @@ const N = m.div`
     right: 1rem;
   }
 
-  @media (max-width: 464px) {
+  @media ${a("M")} {
+    & .carousel-item .section__card,
+    & .carousel-item:not(.react-multi-carousel-item--active) .section__card {
+      height: 26rem;
+    }
+    & .carousel-item .section__card .section__image {
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  @media ${a("S")} {
+    & .carousel-item .section__card .section__image {
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  @media ${a("XS")} {
     & .carousel-container {
       min-height: 23.4375rem;
     }
@@ -156,7 +176,8 @@ const N = m.div`
         border-radius: 0.5rem;
 
         & .section__image {
-          object-fit: fill;
+          object-fit: cover;
+          object-position: center;
         }
 
         & .card__content {
@@ -175,82 +196,82 @@ const N = m.div`
       }
     }
   }
-`, j = m(k)`
-  @media (max-width: ${S + "px"}) {
+`, N = h(S)`
+  @media ${a("S")} {
     & > div {
       height: 100%;
       aspect-ratio: 1 / 1;
     }
   }
-`, B = ({ keyPrefix: t }) => /* @__PURE__ */ r(j, { noGradient: !0, children: /* @__PURE__ */ r(C, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), P = ({
+`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { noGradient: !0, children: /* @__PURE__ */ r(j, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), B = ({
   keyPrefix: t,
-  isLoading: i = !1,
-  fallbackComponent: a = /* @__PURE__ */ r(d, {}),
-  children: o
-}) => /* @__PURE__ */ r(b, { fallbackComponent: a, children: i === !0 ? /* @__PURE__ */ r(B, { keyPrefix: t }) : o }), D = x(
+  isLoading: o = !1,
+  fallbackComponent: n = /* @__PURE__ */ r(u, {}),
+  children: c
+}) => /* @__PURE__ */ r(v, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(z, { keyPrefix: t }) : c }), W = y(
   ({
     items: t = [],
-    isLoading: i = !1,
-    deviceType: a,
-    partialVisible: o = !0,
-    fallbackComponent: u = /* @__PURE__ */ r(d, {}),
-    onSelectItem: h = () => {
+    isLoading: o = !1,
+    deviceType: n,
+    partialVisible: c = !0,
+    fallbackComponent: p = /* @__PURE__ */ r(u, {}),
+    onSelectItem: _ = () => {
     },
-    onButtonAction: p = () => {
+    onButtonAction: f = () => {
     },
-    carouselProps: f
-  }, _) => {
-    const g = {
+    carouselProps: g
+  }, b) => {
+    const x = {
       desktop: {
-        breakpoint: { max: 3e3, min: 1024 },
+        breakpoint: { max: 3e3, min: i.M.max },
         items: 1,
         partialVisibilityGutter: 0
       },
       tablet: {
-        breakpoint: { max: 1024, min: 464 },
+        breakpoint: { max: i.M.max, min: i.S.min },
         items: 1,
         partialVisibilityGutter: 0
       },
       mobile: {
-        breakpoint: { max: 464, min: 0 },
+        breakpoint: { max: i.XS.max, min: 0 },
         items: 1,
         partialVisibilityGutter: 64
       }
-    }, s = y();
-    return /* @__PURE__ */ r(N, { ref: _, children: /* @__PURE__ */ r(
-      P,
+    }, d = C();
+    return /* @__PURE__ */ r($, { ref: b, children: /* @__PURE__ */ r(
+      B,
       {
-        fallbackComponent: u,
+        fallbackComponent: p,
         keyPrefix: "banner-carousel-skeleton",
-        isLoading: i,
+        isLoading: o,
         children: /* @__PURE__ */ r(
-          v,
+          w,
           {
-            responsive: g,
-            deviceType: a,
+            responsive: x,
+            deviceType: n,
             removeArrowOnDeviceType: ["tablet", "mobile"],
-            infinite: !s,
+            infinite: !d,
             keyBoardControl: !0,
             autoPlay: !0,
-            partialVisible: o,
+            partialVisible: c,
             customTransition: "transform 500ms ease-in-out",
             sliderClass: "carousel-slider",
             itemClass: "carousel-item",
             containerClass: "carousel-container",
             rewind: !0,
             rewindWithAnimation: !0,
-            ...f,
-            children: t == null ? void 0 : t.map((e, c) => /* @__PURE__ */ l(
+            ...g,
+            children: t == null ? void 0 : t.map((e, m) => /* @__PURE__ */ l(
               "div",
               {
                 className: "section__card",
-                onClick: () => h(e),
+                onClick: () => _(e),
                 children: [
                   /* @__PURE__ */ r(
                     "img",
                     {
                       src: e == null ? void 0 : e.imageUrl,
-                      alt: `Slide ${c + 1}`,
+                      alt: `Slide ${m + 1}`,
                       className: "section__image"
                     }
                   ),
@@ -260,27 +281,27 @@ const N = m.div`
                       (e == null ? void 0 : e.title) && /* @__PURE__ */ r("div", { className: "card__description", children: e == null ? void 0 : e.description })
                     ] }),
                     (e == null ? void 0 : e.buttonText) && /* @__PURE__ */ r(
-                      w,
+                      k,
                       {
                         text: e == null ? void 0 : e.buttonText,
                         className: "card__action",
                         size: "medium",
-                        onClick: (n) => {
-                          n == null || n.stopPropagation(), p(e);
+                        onClick: (s) => {
+                          s == null || s.stopPropagation(), f(e);
                         }
                       }
                     )
                   ] })
                 ]
               },
-              `banner-section-carousel-item__${c + 1}`
+              `banner-section-carousel-item__${m + 1}`
             ))
           }
         )
       }
-    ) }, `banner-section-carousel__${s}`);
+    ) }, `banner-section-carousel__${d}`);
   }
 );
 export {
-  D as default
+  W as default
 };

package/dist/BannerSectionGrid.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),w=require("react"),k=require("./emotion-styled.browser.esm-BtEseadx.cjs"),q=require("./consts-goSZX3xP.cjs"),T=require("./useDetectMobile-zkbzoOGV.cjs"),s=require("./index-CSgGox95.cjs"),f=k.styled.div`
+"use strict";const t=require("react/jsx-runtime"),k=require("react"),w=require("./emotion-styled.browser.esm-BtEseadx.cjs"),q=require("./breakpoints-CcVm-gVm.cjs"),T=require("./useDetectMobile-DYV6V1yw.cjs"),s=require("./index-B9c6y2J5.cjs"),f=w.styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
@@ -25,7 +25,7 @@
     border-radius: 0.75rem 0rem 0.75rem 0.75rem;
   }
 
-  @media (max-width: ${q.MOBILE_SIZE_PX+"px"}) {
+  @media ${q.down("S")} {
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
 
@@ -45,4 +45,4 @@
       max-height: unset;
     }
   }
-`,B=w.forwardRef((e,n)=>{const{image1Url:o,image2Url:i,title1:g,title2:a,text1:c,text2:u,subtitle1:h,subtitle2:l,buttonText1:x,buttonText2:d,buttonLink1:b,buttonLink2:p,rowHeight:j="12.65625rem",onButtonAction:r=()=>{}}=e,m=T.useDetectMobile();return t.jsxs(f,{ref:n,height:j,children:[t.jsx(s.TextBlockV1,{className:"text-item",title:g,subtitle:h,description:c,buttonText:x,buttonLink:b,onButtonAction:r}),t.jsx("img",{className:"img-item img-1",src:o}),m!==!0&&t.jsx("img",{className:"img-item img-2",src:i}),t.jsx(s.TextBlockV1,{className:"text-item",title:a,subtitle:l,description:u,buttonText:d,buttonLink:p,onButtonAction:r}),m===!0&&t.jsx("img",{className:"img-item img-2",src:i})]})});module.exports=B;
+`,N=k.forwardRef((e,n)=>{const{image1Url:o,image2Url:i,title1:g,title2:a,text1:u,text2:c,subtitle1:h,subtitle2:l,buttonText1:x,buttonText2:d,buttonLink1:b,buttonLink2:p,rowHeight:j="12.65625rem",onButtonAction:r=()=>{}}=e,m=T.useDetectMobile();return t.jsxs(f,{ref:n,height:j,children:[t.jsx(s.TextBlockV1,{className:"text-item",title:g,subtitle:h,description:u,buttonText:x,buttonLink:b,onButtonAction:r}),t.jsx("img",{className:"img-item img-1",src:o}),m!==!0&&t.jsx("img",{className:"img-item img-2",src:i}),t.jsx(s.TextBlockV1,{className:"text-item",title:a,subtitle:l,description:c,buttonText:d,buttonLink:p,onButtonAction:r}),m===!0&&t.jsx("img",{className:"img-item img-2",src:i})]})});module.exports=N;

package/dist/BannerSectionGrid.js

@@ -1,10 +1,10 @@
 import { jsxs as w, jsx as e } from "react/jsx-runtime";
 import { forwardRef as T } from "react";
 import { s as k } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as L } from "./consts-BuFChS64.js";
-import { u as N } from "./useDetectMobile-Bkvj0VMa.js";
-import { T as o } from "./index-DK8dqEUQ.js";
-const $ = k.div`
+import { d as N } from "./breakpoints-ff0SIcV3.js";
+import { u as $ } from "./useDetectMobile-CcVo3PNi.js";
+import { T as o } from "./index-CoQ9APCD.js";
+const L = k.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
@@ -31,7 +31,7 @@ const $ = k.div`
     border-radius: 0.75rem 0rem 0.75rem 0.75rem;
   }
 
-  @media (max-width: ${L + "px"}) {
+  @media ${N("S")} {
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
 
@@ -51,7 +51,7 @@ const $ = k.div`
       max-height: unset;
     }
   }
-`, G = T((t, s) => {
+`, S = T((t, s) => {
   const {
     image1Url: a,
     image2Url: i,
@@ -63,13 +63,13 @@ const $ = k.div`
     subtitle2: d,
     buttonText1: c,
     buttonText2: x,
-    buttonLink1: p,
-    buttonLink2: b,
+    buttonLink1: b,
+    buttonLink2: p,
     rowHeight: f = "12.65625rem",
     onButtonAction: m = () => {
     }
-  } = t, r = N();
-  return /* @__PURE__ */ w($, { ref: s, height: f, children: [
+  } = t, r = $();
+  return /* @__PURE__ */ w(L, { ref: s, height: f, children: [
     /* @__PURE__ */ e(
       o,
       {
@@ -78,7 +78,7 @@ const $ = k.div`
         subtitle: l,
         description: h,
         buttonText: c,
-        buttonLink: p,
+        buttonLink: b,
         onButtonAction: m
       }
     ),
@@ -92,7 +92,7 @@ const $ = k.div`
         subtitle: d,
         description: u,
         buttonText: x,
-        buttonLink: b,
+        buttonLink: p,
         onButtonAction: m
       }
     ),
@@ -100,5 +100,5 @@ const $ = k.div`
   ] });
 });
 export {
-  G as default
+  S as default
 };