@lanaco/lnc-react-ui 4.0.207 → 4.0.209

package/dist/BannerSectionCarousel.cjs

@@ -1,4 +1,11 @@
-"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`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),x=require("./index-DeS-oqJB.cjs"),u=require("./style-BAcV7F53.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./breakpoints-CcVm-gVm.cjs"),v=require("./Button.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),w=require("./utils-CITgSxXe.cjs"),j=h.styled(u.SkeletonColumnWrapper)`
+  @media ${t.down("S")} {
+    & > div {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+`,k=({keyPrefix:i})=>r.jsx(j,{noGradient:!0,children:r.jsx(u.SkeletonLinePlaceholder,{keyPrefix:`${i}-1`,height:"22.5rem"})}),S=({keyPrefix:i,isLoading:o=!1,fallbackComponent:n=r.jsx(r.Fragment,{}),children:a})=>r.jsx(d.Suspense,{fallbackComponent:n,children:o===!0?r.jsx(k,{keyPrefix:i}):a}),C=h.styled.div`
   &:hover {
     cursor: pointer;
 
@@ -119,8 +126,9 @@
   @media ${t.down("M")} {
     & .carousel-item .section__card,
     & .carousel-item:not(.react-multi-carousel-item--active) .section__card {
-      height: 26rem;
+      height: 100%;
     }
+
     & .carousel-item .section__card .section__image {
       object-fit: cover;
       object-position: center;
@@ -188,11 +196,4 @@
       }
     }
   }
-`,j=u.styled(m.SkeletonColumnWrapper)`
-  @media ${t.down("S")} {
-    & > div {
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-`,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;
+`,q=d.forwardRef(({items:i=[],isLoading:o=!1,deviceType:n,partialVisible:a=!0,fallbackComponent:m=r.jsx(r.Fragment,{}),onSelectItem:_=()=>{},onButtonAction:g=()=>{},carouselProps:p},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=y.useDetectMobile();return r.jsx(C,{ref:f,children:r.jsx(S,{fallbackComponent:m,keyPrefix:"banner-carousel-skeleton",isLoading:o,children:r.jsx(x.Carousel,{responsive:b,deviceType:n,removeArrowOnDeviceType:["tablet","mobile"],infinite:!c,keyBoardControl:!0,autoPlay:!0,partialVisible:a,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...p,children:i==null?void 0:i.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>_(e),children:[w.isDefined(e==null?void 0:e.imageComponent)?e==null?void 0:e.imageComponent:r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,loading:"lazy",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(),g(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${c}`)});module.exports=q;

package/dist/BannerSectionCarousel.js

@@ -1,12 +1,25 @@
 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 { b as k, a as C } from "./style-BwQ4djFC.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`
+import { d as o, s as i } from "./breakpoints-ff0SIcV3.js";
+import S from "./Button.js";
+import { u as j } from "./useDetectMobile-CcVo3PNi.js";
+import { m as $ } from "./utils-B2fsQ6PS.js";
+const N = h(k)`
+  @media ${o("S")} {
+    & > div {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { noGradient: !0, children: /* @__PURE__ */ r(C, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), B = ({
+  keyPrefix: t,
+  isLoading: a = !1,
+  fallbackComponent: n = /* @__PURE__ */ r(u, {}),
+  children: s
+}) => /* @__PURE__ */ r(v, { fallbackComponent: n, children: a === !0 ? /* @__PURE__ */ r(z, { keyPrefix: t }) : s }), M = h.div`
   &:hover {
     cursor: pointer;
 
@@ -124,25 +137,26 @@ const $ = h.div`
     right: 1rem;
   }
 
-  @media ${a("M")} {
+  @media ${o("M")} {
     & .carousel-item .section__card,
     & .carousel-item:not(.react-multi-carousel-item--active) .section__card {
-      height: 26rem;
+      height: 100%;
     }
+
     & .carousel-item .section__card .section__image {
       object-fit: cover;
       object-position: center;
     }
   }
 
-  @media ${a("S")} {
+  @media ${o("S")} {
     & .carousel-item .section__card .section__image {
       object-fit: cover;
       object-position: center;
     }
   }
 
-  @media ${a("XS")} {
+  @media ${o("XS")} {
     & .carousel-container {
       min-height: 23.4375rem;
     }
@@ -196,28 +210,16 @@ const $ = h.div`
       }
     }
   }
-`, N = h(S)`
-  @media ${a("S")} {
-    & > div {
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { noGradient: !0, children: /* @__PURE__ */ r(j, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), B = ({
-  keyPrefix: t,
-  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(
+`, F = y(
   ({
     items: t = [],
-    isLoading: o = !1,
+    isLoading: a = !1,
     deviceType: n,
-    partialVisible: c = !0,
+    partialVisible: s = !0,
     fallbackComponent: p = /* @__PURE__ */ r(u, {}),
-    onSelectItem: _ = () => {
+    onSelectItem: f = () => {
     },
-    onButtonAction: f = () => {
+    onButtonAction: _ = () => {
     },
     carouselProps: g
   }, b) => {
@@ -237,13 +239,13 @@ const $ = h.div`
         items: 1,
         partialVisibilityGutter: 64
       }
-    }, d = C();
-    return /* @__PURE__ */ r($, { ref: b, children: /* @__PURE__ */ r(
+    }, d = j();
+    return /* @__PURE__ */ r(M, { ref: b, children: /* @__PURE__ */ r(
       B,
       {
         fallbackComponent: p,
         keyPrefix: "banner-carousel-skeleton",
-        isLoading: o,
+        isLoading: a,
         children: /* @__PURE__ */ r(
           w,
           {
@@ -253,7 +255,7 @@ const $ = h.div`
             infinite: !d,
             keyBoardControl: !0,
             autoPlay: !0,
-            partialVisible: c,
+            partialVisible: s,
             customTransition: "transform 500ms ease-in-out",
             sliderClass: "carousel-slider",
             itemClass: "carousel-item",
@@ -265,13 +267,14 @@ const $ = h.div`
               "div",
               {
                 className: "section__card",
-                onClick: () => _(e),
+                onClick: () => f(e),
                 children: [
-                  /* @__PURE__ */ r(
+                  $(e == null ? void 0 : e.imageComponent) ? e == null ? void 0 : e.imageComponent : /* @__PURE__ */ r(
                     "img",
                     {
                       src: e == null ? void 0 : e.imageUrl,
                       alt: `Slide ${m + 1}`,
+                      loading: "lazy",
                       className: "section__image"
                     }
                   ),
@@ -281,13 +284,13 @@ const $ = h.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(
-                      k,
+                      S,
                       {
                         text: e == null ? void 0 : e.buttonText,
                         className: "card__action",
                         size: "medium",
-                        onClick: (s) => {
-                          s == null || s.stopPropagation(), f(e);
+                        onClick: (c) => {
+                          c == null || c.stopPropagation(), _(e);
                         }
                       }
                     )
@@ -303,5 +306,5 @@ const $ = h.div`
   }
 );
 export {
-  W as default
+  F as default
 };

package/dist/DetailedProductsSection.cjs

@@ -17,7 +17,7 @@
   }
 
   @media ${j.down("M")} {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   @media ${j.down("S")} {

package/dist/DetailedProductsSection.js

@@ -28,7 +28,7 @@ const ee = G.div`
   }
 
   @media ${w("M")} {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   @media ${w("S")} {

package/dist/MasonryGeneralCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("react"),j=require("./Button.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-CITgSxXe.cjs"),s=require("./breakpoints-CcVm-gVm.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),y=d.styled.a`
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),j=require("./Button.cjs"),s=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-CITgSxXe.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),y=s.styled.a`
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -108,13 +108,13 @@
   }
   cursor: pointer;
 
-  @media ${s.down("S")} {
+  @media ${d.down("S")} {
     & .wrapper__image {
       height: 100%;
       max-height: 14.5rem;
     }
   }
-`,k=p.forwardRef(({title:r,imageUrl:t,description:o,buttonText:a,onSelectCard:c=()=>{},className:m,position:g,tag:l,backgroundColor:h,buttonLink:x,LinkComponent:u},f)=>{const w=u||"a",_=b.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(y,{ref:f,theme:_,className:m,position:g,backgroundColor:h,onClick:c,as:w,...u?{to:`/${x}`}:{href:`/${x}`},children:[e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__text",children:[l&&e.jsx("div",{className:"text__tag",children:l}),e.jsx("div",{className:"text__title",children:r}),i.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"text__description",children:o}),i.isDefinedNotEmptyString(a)&&e.jsx(j,{text:a,className:"text__action"})]})]})})}),S=d.styled.div`
+`,k=p.forwardRef(({title:r,imageUrl:t,description:o,buttonText:a,onSelectCard:c=()=>{},className:m,position:g,tag:l,backgroundColor:h,buttonLink:x,LinkComponent:u},f)=>{const w=u||"a",_=b.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(y,{ref:f,theme:_,className:m,position:g,backgroundColor:h,onClick:c,as:w,...u?{to:`/${x}`}:{href:`/${x}`},children:[e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__text",children:[l&&e.jsx("div",{className:"text__tag",children:l}),e.jsx("div",{className:"text__title",children:r}),i.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"text__description",children:o}),i.isDefinedNotEmptyString(a)&&e.jsx(j,{text:a,className:"text__action"})]})]})})}),S=s.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -138,7 +138,7 @@
     }
   }
 
-  @media ${s.down("S")} {
+  @media ${d.down("S")} {
     & .regular-title {
       font-size: 1.375rem;
 
@@ -147,7 +147,7 @@
       }
     }
   }
-`,$=d.styled.div`
+`,$=s.styled.div`
   display: grid;
   grid-template-columns: ${()=>"repeat(12,  minmax(0, 1fr))"};
 
@@ -157,11 +157,7 @@
   height: 30rem;
   max-height: 30rem;
 
-  @media ${s.down("M")} {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  @media ${s.down("S")} {
+  @media ${d.down("S")} {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
@@ -169,8 +165,8 @@
     height: 100%;
     max-height: 100%;
   }
-`,v=d.styled(n.SkeletonRowWrapper)`
-  @media ${s.down("S")} {
+`,v=s.styled(n.SkeletonRowWrapper)`
+  @media ${d.down("S")} {
     flex-direction: column;
 
     & .skeleton__big {

package/dist/MasonryGeneralCardsSection.js

@@ -1,12 +1,12 @@
 import { jsx as r, Fragment as $, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as v, Suspense as N } from "react";
 import C from "./Button.js";
-import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { w as s, n as _, l as w } from "./utils-B2fsQ6PS.js";
-import { d } from "./breakpoints-ff0SIcV3.js";
+import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { w as d, n as _, l as w } from "./utils-B2fsQ6PS.js";
+import { d as m } from "./breakpoints-ff0SIcV3.js";
 import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { S as f, b, a as l } from "./style-BwQ4djFC.js";
-const z = m.a`
+const z = s.a`
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -53,7 +53,7 @@ const z = m.a`
     width: 24.5rem;
     height: 30rem;
     border-radius: 0.75rem;
-    background-color: ${s("-90deg")};
+    background-color: ${d("-90deg")};
   }
 
   & .wrapper__text {
@@ -109,26 +109,26 @@ const z = m.a`
     }
 
     & .text__title--skeleton {
-      background-color: ${s("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 9rem;
     }
 
     & .text__description--skeleton {
-      background-color: ${s("-90deg")};
+      background-color: ${d("-90deg")};
       height: 1rem;
       width: 12rem;
     }
 
     & .text__action--skeleton {
-      background-color: ${s("-90deg")};
+      background-color: ${d("-90deg")};
       height: 2rem;
       width: 9rem;
     }
   }
   cursor: pointer;
 
-  @media ${d("S")} {
+  @media ${m("S")} {
     & .wrapper__image {
       height: 100%;
       max-height: 14.5rem;
@@ -183,7 +183,7 @@ const z = m.a`
       }
     ) });
   }
-), M = m.div`
+), W = s.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -207,7 +207,7 @@ const z = m.a`
     }
   }
 
-  @media ${d("S")} {
+  @media ${m("S")} {
     & .regular-title {
       font-size: 1.375rem;
 
@@ -216,7 +216,7 @@ const z = m.a`
       }
     }
   }
-`, W = m.div`
+`, M = s.div`
   display: grid;
   grid-template-columns: ${() => "repeat(12,  minmax(0, 1fr))"};
 
@@ -226,11 +226,7 @@ const z = m.a`
   height: 30rem;
   max-height: 30rem;
 
-  @media ${d("M")} {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  @media ${d("S")} {
+  @media ${m("S")} {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
@@ -238,8 +234,8 @@ const z = m.a`
     height: 100%;
     max-height: 100%;
   }
-`, R = m(f)`
-  @media ${d("S")} {
+`, R = s(f)`
+  @media ${m("S")} {
     flex-direction: column;
 
     & .skeleton__big {
@@ -285,14 +281,14 @@ const z = m.a`
     onSelectCard: c = () => {
     },
     LinkComponent: g
-  }, h) => /* @__PURE__ */ i(M, { ref: h, children: [
+  }, h) => /* @__PURE__ */ i(W, { ref: h, children: [
     /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: e }) }) }),
     /* @__PURE__ */ r(
       T,
       {
         isLoading: a,
         keyPrefix: "masonry-general-cards-skeleton",
-        children: /* @__PURE__ */ r(W, { limit: n, children: t && (t == null ? void 0 : t.map((o, p) => /* @__PURE__ */ r(
+        children: /* @__PURE__ */ r(M, { limit: n, children: t && (t == null ? void 0 : t.map((o, p) => /* @__PURE__ */ r(
           j,
           {
             ...o,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.207",
+  "version": "4.0.209",
   "description": "React component library",
   "type": "module",
   "keywords": [