@lanaco/lnc-react-ui 4.0.90 → 4.0.92

package/dist/FieldOfInterestsMasonrySection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),o=require("react"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),p=require("./utils-BWzf4vLl.cjs"),q=require("./Icon.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),R=c.styled.div`
+"use strict";const r=require("react/jsx-runtime"),o=require("react"),l=require("./utils-BWzf4vLl.cjs"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./consts-goSZX3xP.cjs"),M=require("./Icon.cjs"),R=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),z=m.styled.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -37,7 +37,7 @@
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${p.truncateTextInRows(2)}
+      ${l.truncateTextInRows(2)}
     }
 
     & .wrapper__description {
@@ -47,15 +47,15 @@
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${p.truncateTextInRows(2)}
+      ${l.truncateTextInRows(2)}
     }
   }
-`,z=c.styled.div`
+`,C=m.styled.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
-  background: ${p.linearGradientAnimation("-90deg")};
-`,C=c.styled.div`
+  background: ${l.linearGradientAnimation("-90deg")};
+`,L=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -101,7 +101,7 @@
     }
   }
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
     flex-direction: row;
     align-items: center;
     gap: 0.25rem;
@@ -128,17 +128,17 @@
       white-space: nowrap;
     }
   }
-`,L=c.styled.div`
+`,S=m.styled.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
-  background: ${p.linearGradientAnimation("-90deg")};
+  background: ${l.linearGradientAnimation("-90deg")};
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
     width: 7.5rem;
     height: 2.5rem;
   }
-`,F=o.forwardRef(({},t)=>r.jsx(L,{})),O=o.forwardRef(({text:t,isActive:s=!1,icon:i,onSelectCard:a=()=>{}},m)=>r.jsxs(C,{className:s?"active":"",onClick:a,children:[r.jsx(q,{icon:i,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),S=o.forwardRef(({image:t,imageComponent:s,title:i,description:a,className:m,onSelectCard:w=()=>{}},b)=>{const{theme:g}=M.useTheme();return r.jsxs(R,{theme:g,className:m,onClick:w,children:[p.isDefined(s)?s:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__description",children:a})]})]})}),A=o.forwardRef(({},t)=>r.jsxs(z,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),T=c.styled.div`
+`,F=o.forwardRef(({},t)=>r.jsx(S,{})),O=o.forwardRef(({text:t,isActive:s=!1,icon:n,onSelectCard:i=()=>{}},f)=>r.jsxs(L,{className:s?"active":"",onClick:i,children:[r.jsx(M,{icon:n,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),A=o.forwardRef(({image:t,imageComponent:s,title:n,description:i,className:f,onSelectCard:g=()=>{}},j)=>{const{theme:x}=R.useTheme();return r.jsxs(z,{theme:x,className:f,onClick:g,children:[l.isDefined(s)?s:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[n&&r.jsx("div",{className:"wrapper__title",children:n}),i&&r.jsx("div",{className:"wrapper__description",children:i})]})]})}),T=o.forwardRef(({},t)=>r.jsxs(C,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),W=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -191,7 +191,7 @@
     }
   }
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__tags {
       display: flex;
       overflow-x: scroll;
@@ -203,4 +203,4 @@
       grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`,W=o.forwardRef(({title:t,subtitle:s,tags:i=[],items:a=[],limitTags:m=5,limitTagsForMobile:w=5,limit:b=3,limitForMobile:g=2,selectedTag:k,onSelectTag:x=()=>{},onSelectCard:u=()=>{}},N)=>{var j,$;return o.useLayoutEffect(()=>{const e=()=>{const l=document.querySelector(".wrapper__cards"),d=l.querySelectorAll(".wrapper__card");d.forEach(h=>{const I=h.getBoundingClientRect().height,E=Math.ceil((I+10)/20);h.style.gridRowEnd=`span ${E}`});const y=d==null?void 0:d[d.length-1];if(y){const h=y.offsetTop+y.offsetHeight;l.style.height=`${h}px`}},f=document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__image");let _=0;return f.length===0?e():(f.forEach(l=>{l.complete?_++:l.addEventListener("load",()=>{_++,_===f.length&&e()})}),_===f.length&&e()),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),r.jsxs(T,{ref:N,limitTags:m,limitTagsForMobile:w,limitCards:b,limitCardsForMobile:g,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,n)=>r.jsx(O,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===k,onSelectCard:()=>x==null?void 0:x(e)},`field-of-interests-masonry-tag__${n+1}`)):(j=Array.from("12345"))==null?void 0:j.map((e,n)=>r.jsx(F,{},`field-of-interests-masonry-tag-skeleton__${n+1}`))}),r.jsx("div",{className:"wrapper__cards",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,n)=>r.jsx(S,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>u==null?void 0:u(e),className:"wrapper__card"},`field-of-interests-with-tags-card__${n+1}`)):($=Array.from("12345"))==null?void 0:$.map((e,n)=>r.jsx(A,{},`field-of-interests-with-tags-card-skeleton__${n+1}`))})]})});module.exports=W;
+`,B=o.forwardRef(({title:t,subtitle:s,tags:n=[],items:i=[],limitTags:f=5,limitTagsForMobile:g=5,limit:j=3,limitForMobile:x=2,selectedTag:E,onSelectTag:u=()=>{},onSelectCard:y=()=>{},className:d},I)=>{var $,k;return o.useLayoutEffect(()=>{if(!l.isDefinedNotEmptyString(d))return;const e=()=>{const p=document.querySelector(`.${d} .wrapper__cards`),c=p.querySelectorAll(".wrapper__card");c.forEach(w=>{const N=w.getBoundingClientRect().height,q=Math.ceil((N+10)/20);w.style.gridRowEnd=`span ${q}`});const v=c==null?void 0:c[c.length-1];if(v){const w=v.offsetTop+v.offsetHeight;p.style.height=`${w}px`}},_=document.querySelector(`.${d} .wrapper__cards`).querySelectorAll(".wrapper__image");let h=0;return _.length===0?e():(_.forEach(p=>{p.complete?h++:p.addEventListener("load",()=>{h++,h===_.length&&e()})}),h===_.length&&e()),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[d,i]),r.jsxs(W,{ref:I,limitTags:f,limitTagsForMobile:g,limitCards:j,limitCardsForMobile:x,className:d,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx("div",{className:"wrapper__tags",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,a)=>r.jsx(O,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===E,onSelectCard:()=>u==null?void 0:u(e)},`field-of-interests-masonry-tag__${a+1}`)):($=Array.from("12345"))==null?void 0:$.map((e,a)=>r.jsx(F,{},`field-of-interests-masonry-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,a)=>r.jsx(A,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>y==null?void 0:y(e),className:"wrapper__card"},`field-of-interests-with-tags-card__${a+1}`)):(k=Array.from("12345"))==null?void 0:k.map((e,a)=>r.jsx(T,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=B;

package/dist/FieldOfInterestsMasonrySection.js

@@ -1,11 +1,11 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as d, useLayoutEffect as F } from "react";
-import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as y } from "./consts-BuFChS64.js";
-import { p as N, o as z, l as L } from "./utils-BXCGNjIy.js";
-import A from "./Icon.js";
-import { u as O } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const W = m.div`
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as m, useLayoutEffect as L } from "react";
+import { p as z, o as E, l as A, k as O } from "./utils-BXCGNjIy.js";
+import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as b } from "./consts-BuFChS64.js";
+import S from "./Icon.js";
+import { u as W } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+const T = c.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -44,7 +44,7 @@ const W = m.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${N(2)}
+      ${z(2)}
     }
 
     & .wrapper__description {
@@ -54,15 +54,15 @@ const W = m.div`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${N(2)}
+      ${z(2)}
     }
   }
-`, S = m.div`
+`, j = c.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
-  background: ${z("-90deg")};
-`, T = m.div`
+  background: ${E("-90deg")};
+`, q = c.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -108,7 +108,7 @@ const W = m.div`
     }
   }
 
-  @media (max-width: ${y + "px"}) {
+  @media (max-width: ${b + "px"}) {
     flex-direction: row;
     align-items: center;
     gap: 0.25rem;
@@ -135,48 +135,48 @@ const W = m.div`
       white-space: nowrap;
     }
   }
-`, j = m.div`
+`, R = c.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
-  background: ${z("-90deg")};
+  background: ${E("-90deg")};
 
-  @media (max-width: ${y + "px"}) {
+  @media (max-width: ${b + "px"}) {
     width: 7.5rem;
     height: 2.5rem;
   }
-`, q = d(({}, r) => /* @__PURE__ */ i(j, {})), R = d(
-  ({ text: r, isActive: o = !1, icon: t, onSelectCard: a = () => {
-  } }, c) => /* @__PURE__ */ s(T, { className: o ? "active" : "", onClick: a, children: [
-    /* @__PURE__ */ i(A, { icon: t, className: "wrapper__icon" }),
+`, B = m(({}, r) => /* @__PURE__ */ i(R, {})), D = m(
+  ({ text: r, isActive: o = !1, icon: a, onSelectCard: t = () => {
+  } }, f) => /* @__PURE__ */ l(q, { className: o ? "active" : "", onClick: t, children: [
+    /* @__PURE__ */ i(S, { icon: a, className: "wrapper__icon" }),
     /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
   ] })
-), B = d(
+), G = m(
   ({
     image: r,
     imageComponent: o,
-    title: t,
-    description: a,
-    className: c,
-    onSelectCard: g = () => {
+    title: a,
+    description: t,
+    className: f,
+    onSelectCard: w = () => {
     }
-  }, b) => {
-    const { theme: w } = O();
-    return /* @__PURE__ */ s(W, { theme: w, className: c, onClick: g, children: [
-      L(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
-      /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
-        t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
-        a && /* @__PURE__ */ i("div", { className: "wrapper__description", children: a })
+  }, $) => {
+    const { theme: u } = W();
+    return /* @__PURE__ */ l(T, { theme: u, className: f, onClick: w, children: [
+      A(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+      /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
+        a && /* @__PURE__ */ i("div", { className: "wrapper__title", children: a }),
+        t && /* @__PURE__ */ i("div", { className: "wrapper__description", children: t })
       ] })
     ] });
   }
-), G = d(({}, r) => /* @__PURE__ */ s(S, { children: [
+), H = m(({}, r) => /* @__PURE__ */ l(j, { children: [
   /* @__PURE__ */ i("div", { className: "wrapper__image" }),
-  /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
+  /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
     /* @__PURE__ */ i("div", { className: "wrapper__title" }),
     /* @__PURE__ */ i("div", { className: "wrapper__description" })
   ] })
-] })), H = m.div`
+] })), P = c.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -229,7 +229,7 @@ const W = m.div`
     }
   }
 
-  @media (max-width: ${y + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & .wrapper__tags {
       display: flex;
       overflow-x: scroll;
@@ -241,84 +241,88 @@ const W = m.div`
       grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, U = d(
+`, Y = m(
   ({
     title: r,
     subtitle: o,
-    tags: t = [],
-    items: a = [],
-    limitTags: c = 5,
-    limitTagsForMobile: g = 5,
-    limit: b = 3,
-    limitForMobile: w = 2,
+    tags: a = [],
+    items: t = [],
+    limitTags: f = 5,
+    limitTagsForMobile: w = 5,
+    limit: $ = 3,
+    limitForMobile: u = 2,
     selectedTag: I,
-    onSelectTag: u = () => {
+    onSelectTag: x = () => {
     },
-    onSelectCard: x = () => {
-    }
+    onSelectCard: v = () => {
+    },
+    className: s
   }, M) => {
-    var $, k;
-    return F(() => {
+    var k, N;
+    return L(() => {
+      if (!O(s))
+        return;
       const e = () => {
-        const l = document.querySelector(".wrapper__cards"), p = l.querySelectorAll(".wrapper__card");
-        p.forEach((_) => {
-          const C = _.getBoundingClientRect().height, E = Math.ceil((C + 10) / 20);
-          _.style.gridRowEnd = `span ${E}`;
+        const p = document.querySelector(`.${s} .wrapper__cards`), d = p.querySelectorAll(".wrapper__card");
+        d.forEach((g) => {
+          const C = g.getBoundingClientRect().height, F = Math.ceil((C + 10) / 20);
+          g.style.gridRowEnd = `span ${F}`;
         });
-        const v = p == null ? void 0 : p[p.length - 1];
-        if (v) {
-          const _ = v.offsetTop + v.offsetHeight;
-          l.style.height = `${_}px`;
+        const y = d == null ? void 0 : d[d.length - 1];
+        if (y) {
+          const g = y.offsetTop + y.offsetHeight;
+          p.style.height = `${g}px`;
         }
-      }, f = document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__image");
-      let h = 0;
-      return f.length === 0 ? e() : (f.forEach((l) => {
-        l.complete ? h++ : l.addEventListener("load", () => {
-          h++, h === f.length && e();
+      }, h = document.querySelector(`.${s} .wrapper__cards`).querySelectorAll(".wrapper__image");
+      let _ = 0;
+      return h.length === 0 ? e() : (h.forEach((p) => {
+        p.complete ? _++ : p.addEventListener("load", () => {
+          _++, _ === h.length && e();
         });
-      }), h === f.length && e()), window.addEventListener("resize", e), () => {
+      }), _ === h.length && e()), window.addEventListener("resize", e), () => {
         window.removeEventListener("resize", e);
       };
-    }, []), /* @__PURE__ */ s(
-      H,
+    }, [s, t]), /* @__PURE__ */ l(
+      P,
       {
         ref: M,
-        limitTags: c,
-        limitTagsForMobile: g,
-        limitCards: b,
-        limitCardsForMobile: w,
+        limitTags: f,
+        limitTagsForMobile: w,
+        limitCards: $,
+        limitCardsForMobile: u,
+        className: s,
         children: [
-          /* @__PURE__ */ s("div", { className: "wrapper__heading", children: [
+          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
             r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
             o && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: o })
           ] }),
-          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ i(
-            R,
+          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ i(
+            D,
             {
               icon: e == null ? void 0 : e.icon,
               text: e == null ? void 0 : e.title,
               isActive: (e == null ? void 0 : e.code) === I,
-              onSelectCard: () => u == null ? void 0 : u(e)
+              onSelectCard: () => x == null ? void 0 : x(e)
             },
             `field-of-interests-masonry-tag__${n + 1}`
-          )) : ($ = Array.from("12345")) == null ? void 0 : $.map((e, n) => /* @__PURE__ */ i(
-            q,
+          )) : (k = Array.from("12345")) == null ? void 0 : k.map((e, n) => /* @__PURE__ */ i(
+            B,
             {},
             `field-of-interests-masonry-tag-skeleton__${n + 1}`
           )) }),
-          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ i(
-            B,
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ i(
+            G,
             {
               image: e == null ? void 0 : e.image,
               imageComponent: e == null ? void 0 : e.imageComponent,
               title: e == null ? void 0 : e.title,
               description: e == null ? void 0 : e.description,
-              onSelectCard: () => x == null ? void 0 : x(e),
+              onSelectCard: () => v == null ? void 0 : v(e),
               className: "wrapper__card"
             },
             `field-of-interests-with-tags-card__${n + 1}`
-          )) : (k = Array.from("12345")) == null ? void 0 : k.map((e, n) => /* @__PURE__ */ i(
-            G,
+          )) : (N = Array.from("12345")) == null ? void 0 : N.map((e, n) => /* @__PURE__ */ i(
+            H,
             {},
             `field-of-interests-with-tags-card-skeleton__${n + 1}`
           )) })
@@ -328,5 +332,5 @@ const W = m.div`
   }
 );
 export {
-  U as default
+  Y as default
 };

package/dist/QuattroCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),a=require("react"),s=require("./utils-BWzf4vLl.cjs"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),d=require("./consts-goSZX3xP.cjs"),p=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),g=require("./styled-components.browser.esm-CMTEDJ_5.cjs"),_=c.styled.div`
+"use strict";const e=require("react/jsx-runtime"),n=require("react"),s=require("./utils-BWzf4vLl.cjs"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),d=require("./consts-goSZX3xP.cjs"),g=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./styled-components.browser.esm-CMTEDJ_5.cjs"),u=m.styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -41,7 +41,7 @@
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`,u=c.styled.div`
+`,f=m.styled.div`
   cursor: pointer;
   position: relative;
   border-radius: 0.75rem;
@@ -108,7 +108,7 @@
   @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 100%;
   }
-`,f=a.forwardRef(({title:i,description:r,imageUrl:l,onSelectCard:o=()=>{}},n)=>{const{theme:e}=p.useTheme();return t.jsxs(u,{theme:e,onClick:o,children:[t.jsx("img",{loading:"lazy",src:l}),t.jsx(_,{theme:e,className:"quattro-card__gradient",children:t.jsxs("div",{className:"quattro-card__text",children:[t.jsx("div",{className:"quattro-card__title",children:i}),t.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),h=g.qe.div`
+`,h=n.forwardRef(({title:o,description:r,imageUrl:i,onSelectCard:l=()=>{}},c)=>{const{theme:a}=g.useTheme();return e.jsxs(f,{theme:a,onClick:l,children:[e.jsx("img",{loading:"lazy",src:i}),e.jsx(u,{theme:a,className:"quattro-card__gradient",children:e.jsxs("div",{className:"quattro-card__text",children:[e.jsx("div",{className:"quattro-card__title",children:o}),e.jsx("div",{className:"quattro-card__description",children:r})]})})]})}),b=_.qe.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -160,4 +160,4 @@
       gap: 1rem;
     }
   }
-`,b=a.memo(f),w=a.forwardRef(({title:i,items:r},l)=>{const o=a.useMemo(()=>{var n;return(n=r==null?void 0:r.slice(0,4))==null?void 0:n.map((e,m)=>t.jsx(b,{title:e==null?void 0:e.title,description:e==null?void 0:e.description,imageUrl:e==null?void 0:e.imageUrl,onSelectCard:()=>onSelectCard==null?void 0:onSelectCard(e)},`quattro-card__${m+1}`))},[r]);return t.jsxs(h,{children:[t.jsx("div",{className:"wrapper__heading",children:t.jsx("div",{className:"wrapper__title",children:s.isDefinedNotEmptyString(i)&&t.jsx("div",{className:"title__text",children:t.jsx("span",{children:i})})})}),t.jsx("div",{className:"wrapper__cards",children:o})]})});module.exports=w;
+`,w=n.memo(h),x=n.forwardRef(({title:o,items:r,onSelectCard:i=()=>{}},l)=>{const c=n.useMemo(()=>{var a;return(a=r==null?void 0:r.slice(0,4))==null?void 0:a.map((t,p)=>e.jsx(w,{title:t==null?void 0:t.title,description:t==null?void 0:t.description,imageUrl:t==null?void 0:t.imageUrl,onSelectCard:()=>i==null?void 0:i(t)},`quattro-card__${p+1}`))},[r]);return e.jsxs(b,{children:[e.jsx("div",{className:"wrapper__heading",children:e.jsx("div",{className:"wrapper__title",children:s.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"title__text",children:e.jsx("span",{children:o})})})}),e.jsx("div",{className:"wrapper__cards",children:c})]})});module.exports=x;

package/dist/QuattroCardsSection.js

@@ -1,11 +1,11 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s, memo as p, useMemo as g } from "react";
-import { t as f, p as h, k as u } from "./utils-BXCGNjIy.js";
-import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as c, memo as g, useMemo as f } from "react";
+import { t as h, p as u, k as _ } from "./utils-BXCGNjIy.js";
+import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as d } from "./consts-BuFChS64.js";
-import { u as _ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { q as b } from "./styled-components.browser.esm-C9FYANiy.js";
-const w = c.div`
+import { u as b } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { q as w } from "./styled-components.browser.esm-C9FYANiy.js";
+const y = m.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -48,7 +48,7 @@ const w = c.div`
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
   border-radius: 0.75rem;
   z-index: 2;
-`, y = c.div`
+`, v = m.div`
   cursor: pointer;
   position: relative;
   border-radius: 0.75rem;
@@ -86,7 +86,7 @@ const w = c.div`
       font-style: normal;
       font-weight: 600;
       line-height: 1.75rem;
-      ${f()}
+      ${h()}
     }
 
     & .quattro-card__description {
@@ -94,7 +94,7 @@ const w = c.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.25rem;
-      ${h(2)}
+      ${u(2)}
     }
 
     @media (max-width: ${d + "px"}) {
@@ -115,19 +115,19 @@ const w = c.div`
   @media (max-width: ${d + "px"}) {
     width: 100%;
   }
-`, v = s(
-  ({ title: a, description: r, imageUrl: l, onSelectCard: i = () => {
-  } }, o) => {
-    const { theme: t } = _();
-    return /* @__PURE__ */ n(y, { theme: t, onClick: i, children: [
-      /* @__PURE__ */ e("img", { loading: "lazy", src: l }),
-      /* @__PURE__ */ e(w, { theme: t, className: "quattro-card__gradient", children: /* @__PURE__ */ n("div", { className: "quattro-card__text", children: [
-        /* @__PURE__ */ e("div", { className: "quattro-card__title", children: a }),
-        /* @__PURE__ */ e("div", { className: "quattro-card__description", children: r })
+`, x = c(
+  ({ title: o, description: e, imageUrl: a, onSelectCard: s = () => {
+  } }, l) => {
+    const { theme: i } = b();
+    return /* @__PURE__ */ n(v, { theme: i, onClick: s, children: [
+      /* @__PURE__ */ r("img", { loading: "lazy", src: a }),
+      /* @__PURE__ */ r(y, { theme: i, className: "quattro-card__gradient", children: /* @__PURE__ */ n("div", { className: "quattro-card__text", children: [
+        /* @__PURE__ */ r("div", { className: "quattro-card__title", children: o }),
+        /* @__PURE__ */ r("div", { className: "quattro-card__description", children: e })
       ] }) })
     ] });
   }
-), x = b.div`
+), q = w.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -179,25 +179,28 @@ const w = c.div`
       gap: 1rem;
     }
   }
-`, q = p(v), S = s(({ title: a, items: r }, l) => {
-  const i = g(() => {
-    var o;
-    return (o = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : o.map((t, m) => /* @__PURE__ */ e(
-      q,
-      {
-        title: t == null ? void 0 : t.title,
-        description: t == null ? void 0 : t.description,
-        imageUrl: t == null ? void 0 : t.imageUrl,
-        onSelectCard: () => onSelectCard == null ? void 0 : onSelectCard(t)
-      },
-      `quattro-card__${m + 1}`
-    ));
-  }, [r]);
-  return /* @__PURE__ */ n(x, { children: [
-    /* @__PURE__ */ e("div", { className: "wrapper__heading", children: /* @__PURE__ */ e("div", { className: "wrapper__title", children: u(a) && /* @__PURE__ */ e("div", { className: "title__text", children: /* @__PURE__ */ e("span", { children: a }) }) }) }),
-    /* @__PURE__ */ e("div", { className: "wrapper__cards", children: i })
-  ] });
-});
+`, k = g(x), I = c(
+  ({ title: o, items: e, onSelectCard: a = () => {
+  } }, s) => {
+    const l = f(() => {
+      var i;
+      return (i = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : i.map((t, p) => /* @__PURE__ */ r(
+        k,
+        {
+          title: t == null ? void 0 : t.title,
+          description: t == null ? void 0 : t.description,
+          imageUrl: t == null ? void 0 : t.imageUrl,
+          onSelectCard: () => a == null ? void 0 : a(t)
+        },
+        `quattro-card__${p + 1}`
+      ));
+    }, [e]);
+    return /* @__PURE__ */ n(q, { children: [
+      /* @__PURE__ */ r("div", { className: "wrapper__heading", children: /* @__PURE__ */ r("div", { className: "wrapper__title", children: _(o) && /* @__PURE__ */ r("div", { className: "title__text", children: /* @__PURE__ */ r("span", { children: o }) }) }) }),
+      /* @__PURE__ */ r("div", { className: "wrapper__cards", children: l })
+    ] });
+  }
+);
 export {
-  S as default
+  I as default
 };

package/package.json

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