@lanaco/lnc-react-ui 4.0.82 → 4.0.84

package/dist/BlogsSectionWithFilters.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),c=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-CtNoHdBj.cjs"),C=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),N=require("./style-C571ywKV.cjs"),q=require("./Button.cjs"),$=require("./Link.cjs"),T=require("./index-CAqPGuiA.cjs"),B=require("./index-ryadTWiS.cjs"),M=h.styled.div`
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-CtNoHdBj.cjs"),N=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),q=require("./style-C571ywKV.cjs"),$=require("./Button.cjs"),T=require("./Link.cjs"),B=require("./index-CAqPGuiA.cjs"),M=require("./index-ryadTWiS.cjs"),R=h.styled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
@@ -73,4 +73,4 @@
     color: var(--gray-700, #4e555f);
     ${a.truncateTextInRows(3)}
   }
-`,R=c.forwardRef((i,o)=>{const{title:n,imageUrl:l,text:r,buttonText:m,onCardClick:s}=i;return e.jsxs(w,{ref:o,className:"blog-card",onClick:s,children:[e.jsxs(k,{children:[e.jsx("div",{className:"text-wr-title",children:n}),e.jsx("div",{className:"text-wr",children:r}),e.jsx($,{color:"gray",onClick:s,children:m})]}),e.jsx(T.ProductImageWrapper,{src:l})]})}),W=c.forwardRef(({},i)=>e.jsxs(w,{className:"blog-card",children:[e.jsxs(k,{children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"text-wr"}),e.jsx("div",{className:"skeleton-action"})]}),e.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(l,r)=>e.jsx(W,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:l,keyPrefix:r})=>e.jsx(c.Suspense,{fallbackComponent:o,children:n===!0?e.jsx(P,{isLoading:n,limit:l,keyPrefix:r}):i}),b=c.memo(R),z=c.forwardRef((i,o)=>{const{icon:n,title:l,items:r,buttonText:m,limit:s=3,options:d,onButtonAction:y=()=>{},buttonLink:p,onSelectOption:x=()=>{},isLoading:v=!1,onSelectCard:u=()=>{}}=i,j=C.useDetectMobile(),S=c.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g)):r==null?void 0:r.slice(0,s).map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g))}),[r,j,s,u]);return e.jsxs(N.TitleWithOptionsSectionWrapper,{ref:o,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:l})]}),a.isDefinedNotEmptyString(p)&&e.jsx(q,{type:"button",btnType:"tinted",color:"gray",onClick:()=>y(p),borderRadius:"curved",children:m})]}),(d==null?void 0:d.length)>0&&e.jsx(B.SelectBar,{items:d,onRemove:t=>{x(t)},onSelect:t=>{x(t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(M,{limit:s,children:e.jsx(_,{isLoading:v,limit:s,keyPrefix:"explore-landing",children:S})})]})});module.exports=z;
+`,W=d.forwardRef((i,o)=>{const{title:n,imageUrl:l,text:r,buttonText:m,onCardClick:s}=i;return e.jsxs(w,{ref:o,className:"blog-card",onClick:s,children:[e.jsxs(k,{children:[e.jsx("div",{className:"text-wr-title",children:n}),e.jsx("div",{className:"text-wr",children:r}),e.jsx(T,{color:"gray",onClick:s,children:m})]}),e.jsx(B.ProductImageWrapper,{src:l})]})}),I=d.forwardRef(({},i)=>e.jsxs(w,{className:"blog-card",children:[e.jsxs(k,{children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"text-wr"}),e.jsx("div",{className:"skeleton-action"})]}),e.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(l,r)=>e.jsx(I,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:l,keyPrefix:r})=>e.jsx(d.Suspense,{fallbackComponent:o,children:n===!0?e.jsx(P,{isLoading:n,limit:l,keyPrefix:r}):i}),b=d.memo(W),z=d.forwardRef((i,o)=>{const{icon:n,title:l,items:r,buttonText:m,limit:s=3,options:c,selectedOption:y=[],onButtonAction:v=()=>{},buttonLink:p,onSelectOption:x=()=>{},isLoading:S=!1,onSelectCard:u=()=>{}}=i,j=N.useDetectMobile(),C=d.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g)):r==null?void 0:r.slice(0,s).map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g))}),[r,j,s,u]);return e.jsxs(q.TitleWithOptionsSectionWrapper,{ref:o,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:l})]}),a.isDefinedNotEmptyString(p)&&e.jsx($,{type:"button",btnType:"tinted",color:"gray",onClick:()=>v(p),borderRadius:"curved",children:m})]}),(c==null?void 0:c.length)>0&&e.jsx(M.SelectBar,{items:c,selectedIds:y,onRemove:t=>{x(t)},onSelect:t=>{x(t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(R,{limit:s,children:e.jsx(_,{isLoading:S,limit:s,keyPrefix:"explore-landing",children:C})})]})});module.exports=z;

package/dist/BlogsSectionWithFilters.js

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as t, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as u, Suspense as W, memo as x, useMemo as M } from "react";
+import { jsxs as n, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as x, memo as M, useMemo as P } from "react";
 import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as S } from "./consts-C1uHV4xc.js";
-import { u as P } from "./useDetectMobile-BC6EGaBc.js";
-import { m as g, t as z, k as v } from "./utils-DCs-SbIv.js";
-import { T as I } from "./style-CsMpu4iC.js";
+import { u as z } from "./useDetectMobile-BC6EGaBc.js";
+import { m as g, t as I, k as v } from "./utils-DCs-SbIv.js";
+import { T as O } from "./style-CsMpu4iC.js";
 import R from "./Button.js";
 import j from "./Link.js";
 import { P as A } from "./index-BLxkXrqU.js";
@@ -82,61 +82,62 @@ const F = f.div`
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${z(3)}
+    ${I(3)}
   }
 `, L = u((i, a) => {
-  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: n } = i;
-  return /* @__PURE__ */ l(C, { ref: a, className: "blog-card", onClick: n, children: [
-    /* @__PURE__ */ l(N, { children: [
+  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: l } = i;
+  return /* @__PURE__ */ n(C, { ref: a, className: "blog-card", onClick: l, children: [
+    /* @__PURE__ */ n(N, { children: [
       /* @__PURE__ */ t("div", { className: "text-wr-title", children: o }),
       /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
-      /* @__PURE__ */ t(j, { color: "gray", onClick: n, children: c })
+      /* @__PURE__ */ t(j, { color: "gray", onClick: l, children: c })
     ] }),
     /* @__PURE__ */ t(A, { src: m })
   ] });
-}), O = u(({}, i) => /* @__PURE__ */ l(C, { className: "blog-card", children: [
-  /* @__PURE__ */ l(N, { children: [
+}), U = u(({}, i) => /* @__PURE__ */ n(C, { className: "blog-card", children: [
+  /* @__PURE__ */ n(N, { children: [
     /* @__PURE__ */ t("div", { className: "skeleton-title" }),
     /* @__PURE__ */ t("div", { className: "text-wr" }),
     /* @__PURE__ */ t("div", { className: "skeleton-action" })
   ] }),
   /* @__PURE__ */ t("div", { className: "skeleton-img" })
-] })), U = ({ limit: i = 3, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
-  O,
+] })), _ = ({ limit: i = 3, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
+  U,
   {
     isLoading: a
   },
   `${o}-skeleton-product-card-${r}`
-)) }), _ = ({
+)) }), D = ({
   children: i,
   fallbackComponent: a = /* @__PURE__ */ t(h, {}),
   isLoading: o = !1,
   limit: m,
   keyPrefix: r
-}) => /* @__PURE__ */ t(W, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(
-  U,
+}) => /* @__PURE__ */ t(x, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(
+  _,
   {
     isLoading: o,
     limit: m,
     keyPrefix: r
   }
-) : i }), y = x(L), ee = u((i, a) => {
+) : i }), y = M(L), te = u((i, a) => {
   const {
     icon: o,
     title: m,
     items: r,
     buttonText: c,
-    limit: n = 3,
+    limit: l = 3,
     options: d,
-    onButtonAction: T = () => {
+    selectedOption: T = [],
+    onButtonAction: $ = () => {
     },
     buttonLink: b,
     onSelectOption: k = () => {
     },
-    isLoading: $ = !1,
+    isLoading: B = !1,
     onSelectCard: s = () => {
     }
-  } = i, w = P(), B = M(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, p) => /* @__PURE__ */ t(
+  } = i, w = z(), W = P(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
@@ -146,7 +147,7 @@ const F = f.div`
       onCardClick: () => s(e)
     },
     p
-  )) : r == null ? void 0 : r.slice(0, n).map((e, p) => /* @__PURE__ */ t(
+  )) : r == null ? void 0 : r.slice(0, l).map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
@@ -156,10 +157,10 @@ const F = f.div`
       onCardClick: () => s(e)
     },
     p
-  )) }), [r, w, n, s]);
-  return /* @__PURE__ */ l(I, { ref: a, children: [
-    /* @__PURE__ */ l("div", { className: "regular-title", children: [
-      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
+  )) }), [r, w, l, s]);
+  return /* @__PURE__ */ n(O, { ref: a, children: [
+    /* @__PURE__ */ n("div", { className: "regular-title", children: [
+      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
         v(o) && /* @__PURE__ */ t("i", { className: o }),
         /* @__PURE__ */ t("span", { children: m })
       ] }),
@@ -169,7 +170,7 @@ const F = f.div`
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => T(b),
+          onClick: () => $(b),
           borderRadius: "curved",
           children: c
         }
@@ -179,6 +180,7 @@ const F = f.div`
       E,
       {
         items: d,
+        selectedIds: T,
         onRemove: (e) => {
           k(e);
         },
@@ -190,17 +192,17 @@ const F = f.div`
         noMargin: !0
       }
     ),
-    /* @__PURE__ */ t(F, { limit: n, children: /* @__PURE__ */ t(
-      _,
+    /* @__PURE__ */ t(F, { limit: l, children: /* @__PURE__ */ t(
+      D,
       {
-        isLoading: $,
-        limit: n,
+        isLoading: B,
+        limit: l,
         keyPrefix: "explore-landing",
-        children: B
+        children: W
       }
     ) })
   ] });
 });
 export {
-  ee as default
+  te as default
 };

package/dist/BrandHitsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("react"),c=require("./utils-BXPz9bck.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./consts-CtNoHdBj.cjs"),h=d.styled.div`
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),c=require("./utils-BXPz9bck.cjs"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),d=require("./consts-CtNoHdBj.cjs"),h=o.styled.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
@@ -12,7 +12,7 @@
     height: auto;
   }
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -22,16 +22,16 @@
       height: auto;
     }
   }
-`,_=d.styled.div`
+`,_=o.styled.div`
   width: 7.5rem;
   height: 7.5rem;
   background: ${c.linearGradientAnimation("-90deg")};
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: 4.5rem;
   }
-`,m=p.forwardRef(({imageComponent:t,image:i,onSelectCard:r},n)=>e.jsx(h,{children:c.isDefined(t)?t:e.jsx("img",{src:i,className:"wrapper__image",onSelectCard:r})})),g=p.forwardRef(({},t)=>e.jsx(_,{})),w=d.styled.div`
+`,m=p.forwardRef(({imageComponent:t,image:i,onSelectCard:r},n)=>e.jsx(h,{children:c.isDefined(t)?t:e.jsx("img",{src:i,className:"wrapper__image",onClick:r})})),g=p.forwardRef(({},t)=>e.jsx(_,{})),w=o.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -80,7 +80,7 @@
     }
   }
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;

package/dist/BrandHitsSection.js

@@ -37,14 +37,7 @@ const g = d.div`
     height: 4.5rem;
   }
 `, w = o(
-  ({ imageComponent: t, image: i, onSelectCard: r }, n) => /* @__PURE__ */ e(g, { children: s(t) ? t : /* @__PURE__ */ e(
-    "img",
-    {
-      src: i,
-      className: "wrapper__image",
-      onSelectCard: r
-    }
-  ) })
+  ({ imageComponent: t, image: i, onSelectCard: r }, n) => /* @__PURE__ */ e(g, { children: s(t) ? t : /* @__PURE__ */ e("img", { src: i, className: "wrapper__image", onClick: r }) })
 ), f = o(({}, t) => /* @__PURE__ */ e(_, {})), x = d.div`
   display: flex;
   flex-direction: column;

package/dist/CustomLoanMapSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-opywxmcY.cjs"),q=require("./index-Dy-o153l.cjs"),L=C.styled.div`
+"use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-ZbylnHR8.cjs"),q=require("./index-Dy-o153l.cjs"),L=C.styled.div`
   display: flex;
   gap: 2rem;
 

package/dist/CustomLoanMapSection.js

@@ -2,7 +2,7 @@ import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import { forwardRef as h } from "react";
 import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as L } from "./consts-C1uHV4xc.js";
-import { L as T } from "./index-5F6QsgOG.js";
+import { L as T } from "./index-baEuidT3.js";
 import { L as F } from "./index-D0Cl3mpJ.js";
 const M = C.div`
   display: flex;

package/dist/FieldOfInterestsMasonrySection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),o=require("./utils-BXPz9bck.cjs"),N=require("./Icon.cjs"),k=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),I=require("./useEffectOnce-DFrzfNzT.cjs"),E=d.styled.div`
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),o=require("./utils-BXPz9bck.cjs"),k=require("./Icon.cjs"),I=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),E=require("./useEffectOnce-DFrzfNzT.cjs"),M=d.styled.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -46,12 +46,12 @@
       ${o.truncateTextInRows(2)}
     }
   }
-`,M=d.styled.div`
+`,R=d.styled.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
   background: ${o.linearGradientAnimation("-90deg")};
-`,R=d.styled.div`
+`,q=d.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -117,7 +117,7 @@
       white-space: nowrap;
     }
   }
-`,q=d.styled.div`
+`,z=d.styled.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
@@ -127,7 +127,7 @@
     width: 7.5rem;
     height: 2.5rem;
   }
-`,z=l.forwardRef(({},i)=>r.jsx(q,{})),O=l.forwardRef(({text:i,isActive:s,icon:t,onSelectCard:n=()=>{}},p)=>r.jsxs(R,{className:s?"active":"",onClick:n,children:[r.jsx(N,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),C=l.forwardRef(({image:i,imageComponent:s,title:t,description:n,className:p,onSelectCard:c=()=>{}},x)=>{const{theme:m}=k.useTheme();return r.jsxs(E,{theme:m,className:p,onClick:c,children:[o.isDefined(s)?s:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),F=l.forwardRef(({},i)=>r.jsxs(M,{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"})]})]})),L=d.styled.div`
+`,O=l.forwardRef(({},i)=>r.jsx(z,{})),C=l.forwardRef(({text:i,isActive:a,icon:t,onSelectCard:n=()=>{}},p)=>r.jsxs(q,{className:a?"active":"",onClick:n,children:[r.jsx(k,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),F=l.forwardRef(({image:i,imageComponent:a,title:t,description:n,className:p,onSelectCard:m=()=>{}},u)=>{const{theme:c}=I.useTheme();return r.jsxs(M,{theme:c,className:p,onClick:m,children:[o.isDefined(a)?a:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),A=l.forwardRef(({},i)=>r.jsxs(R,{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"})]})]})),L=d.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -191,4 +191,4 @@
       grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`,W=l.forwardRef(({title:i,subtitle:s,tags:t=[],items:n=[],limitTags:p=5,limitTagsForMobile:c=5,limit:x=3,limitForMobile:m=2,onSelectTag:_=()=>{},onSelectCard:f=()=>{}},j)=>{var u,y;const w=e=>{_==null||_(e)},h=e=>{f==null||f(e)};return I.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(v=>{const b=v.getBoundingClientRect().height,$=Math.ceil((b+10)/20);v.style.gridRowEnd=`span ${$}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(L,{ref:j,limitTags:p,limitTagsForMobile:c,limitCards:x,limitCardsForMobile:m,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,a)=>r.jsx(O,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-masonry-tag__${a+1}`)):(u=Array.from("12345"))==null?void 0:u.map((e,a)=>r.jsx(z,{},`field-of-interests-masonry-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,a)=>r.jsx(C,{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:()=>h==null?void 0:h(e==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${a+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,a)=>r.jsx(F,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=W;
+`,W=l.forwardRef(({title:i,subtitle:a,tags:t=[],items:n=[],limitTags:p=5,limitTagsForMobile:m=5,limit:u=3,limitForMobile:c=2,selectedTag:_,onSelectTag:f=()=>{},onSelectCard:w=()=>{}},b)=>{var y,v;const h=e=>{f==null||f(e)},x=e=>{w==null||w(e)};return E.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(j=>{const $=j.getBoundingClientRect().height,N=Math.ceil(($+10)/20);j.style.gridRowEnd=`span ${N}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(L,{ref:b,limitTags:p,limitTagsForMobile:m,limitCards:u,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,s)=>r.jsx(C,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,isActive:(e==null?void 0:e.uuid)===(_==null?void 0:_.uuid),onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-masonry-tag__${s+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,s)=>r.jsx(O,{},`field-of-interests-masonry-tag-skeleton__${s+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,s)=>r.jsx(F,{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==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${s+1}`)):(v=Array.from("12345"))==null?void 0:v.map((e,s)=>r.jsx(A,{},`field-of-interests-with-tags-card-skeleton__${s+1}`))})]})});module.exports=W;

package/dist/FieldOfInterestsMasonrySection.js

@@ -1,12 +1,12 @@
 import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as w } from "./consts-C1uHV4xc.js";
-import { t as b, m as $, l as M } from "./utils-DCs-SbIv.js";
-import I from "./Icon.js";
-import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { u as E } from "./useEffectOnce-guOKBPuL.js";
-const F = p.div`
+import { M as u } from "./consts-C1uHV4xc.js";
+import { t as $, m as N, l as I } from "./utils-DCs-SbIv.js";
+import C from "./Icon.js";
+import { u as E } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as F } from "./useEffectOnce-guOKBPuL.js";
+const O = p.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -41,7 +41,7 @@ const F = p.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${b(2)}
+      ${$(2)}
     }
 
     & .wrapper__description {
@@ -51,15 +51,15 @@ const F = p.div`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${b(2)}
+      ${$(2)}
     }
   }
-`, O = p.div`
+`, W = p.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
-  background: ${$("-90deg")};
-`, W = p.div`
+  background: ${N("-90deg")};
+`, A = p.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -98,7 +98,7 @@ const F = p.div`
     }
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     flex-direction: row;
     align-items: center;
     gap: 0.25rem;
@@ -129,44 +129,44 @@ const F = p.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
-  background: ${$("-90deg")};
+  background: ${N("-90deg")};
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     width: 7.5rem;
     height: 2.5rem;
   }
-`, A = l(({}, r) => /* @__PURE__ */ i(j, {})), L = l(
+`, L = l(({}, r) => /* @__PURE__ */ i(j, {})), R = l(
   ({ text: r, isActive: o, icon: t, onSelectCard: a = () => {
-  } }, d) => /* @__PURE__ */ s(W, { className: o ? "active" : "", onClick: a, children: [
-    /* @__PURE__ */ i(I, { icon: t, className: "wrapper__icon" }),
+  } }, m) => /* @__PURE__ */ s(A, { className: o ? "active" : "", onClick: a, children: [
+    /* @__PURE__ */ i(C, { icon: t, className: "wrapper__icon" }),
     /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
   ] })
-), R = l(
+), q = l(
   ({
     image: r,
     imageComponent: o,
     title: t,
     description: a,
-    className: d,
-    onSelectCard: m = () => {
+    className: m,
+    onSelectCard: d = () => {
     }
   }, x) => {
-    const { theme: c } = C();
-    return /* @__PURE__ */ s(F, { theme: c, className: d, onClick: m, children: [
-      M(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+    const { theme: c } = E();
+    return /* @__PURE__ */ s(O, { theme: c, className: m, onClick: d, children: [
+      I(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 })
       ] })
     ] });
   }
-), T = l(({}, r) => /* @__PURE__ */ s(O, { children: [
+), B = l(({}, r) => /* @__PURE__ */ s(W, { children: [
   /* @__PURE__ */ i("div", { className: "wrapper__image" }),
   /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
     /* @__PURE__ */ i("div", { className: "wrapper__title" }),
     /* @__PURE__ */ i("div", { className: "wrapper__description" })
   ] })
-] })), q = p.div`
+] })), G = p.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -218,7 +218,7 @@ const F = p.div`
     }
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     & .wrapper__tags {
       display: flex;
       overflow-x: scroll;
@@ -230,43 +230,44 @@ const F = p.div`
       grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, K = l(
+`, U = l(
   ({
     title: r,
     subtitle: o,
     tags: t = [],
     items: a = [],
-    limitTags: d = 5,
-    limitTagsForMobile: m = 5,
+    limitTags: m = 5,
+    limitTagsForMobile: d = 5,
     limit: x = 3,
     limitForMobile: c = 2,
-    onSelectTag: f = () => {
+    selectedTag: f,
+    onSelectTag: _ = () => {
     },
-    onSelectCard: _ = () => {
+    onSelectCard: h = () => {
     }
-  }, N) => {
-    var u, y;
-    const h = (e) => {
-      f == null || f(e);
-    }, g = (e) => {
+  }, k) => {
+    var y, v;
+    const w = (e) => {
       _ == null || _(e);
+    }, g = (e) => {
+      h == null || h(e);
     };
-    return E(() => {
+    return F(() => {
       const e = () => {
-        document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((v) => {
-          const k = v.getBoundingClientRect().height, z = Math.ceil((k + 10) / 20);
-          v.style.gridRowEnd = `span ${z}`;
+        document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((b) => {
+          const z = b.getBoundingClientRect().height, M = Math.ceil((z + 10) / 20);
+          b.style.gridRowEnd = `span ${M}`;
         });
       };
       return e(), window.addEventListener("resize", e), () => {
         window.removeEventListener("resize", e);
       };
     }), /* @__PURE__ */ s(
-      q,
+      G,
       {
-        ref: N,
-        limitTags: d,
-        limitTagsForMobile: m,
+        ref: k,
+        limitTags: m,
+        limitTagsForMobile: d,
         limitCards: x,
         limitCardsForMobile: c,
         children: [
@@ -275,20 +276,21 @@ const F = p.div`
             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(
-            L,
+            R,
             {
               icon: e == null ? void 0 : e.icon,
               text: e == null ? void 0 : e.text,
-              onSelectCard: () => h == null ? void 0 : h(e)
+              isActive: (e == null ? void 0 : e.uuid) === (f == null ? void 0 : f.uuid),
+              onSelectCard: () => w == null ? void 0 : w(e)
             },
             `field-of-interests-masonry-tag__${n + 1}`
-          )) : (u = Array.from("12345")) == null ? void 0 : u.map((e, n) => /* @__PURE__ */ i(
-            A,
+          )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, n) => /* @__PURE__ */ i(
+            L,
             {},
             `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(
-            R,
+            q,
             {
               image: e == null ? void 0 : e.image,
               imageComponent: e == null ? void 0 : e.imageComponent,
@@ -298,8 +300,8 @@ const F = p.div`
               className: "wrapper__card"
             },
             `field-of-interests-with-tags-card__${n + 1}`
-          )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, n) => /* @__PURE__ */ i(
-            T,
+          )) : (v = Array.from("12345")) == null ? void 0 : v.map((e, n) => /* @__PURE__ */ i(
+            B,
             {},
             `field-of-interests-with-tags-card-skeleton__${n + 1}`
           )) })
@@ -309,5 +311,5 @@ const F = p.div`
   }
 );
 export {
-  K as default
+  U as default
 };

package/dist/FieldOfInterestsWithTagsCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),p=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-BXPz9bck.cjs"),y=require("./Icon.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=require("./consts-CtNoHdBj.cjs"),k=m.styled.div`
+"use strict";const r=require("react/jsx-runtime"),p=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-BXPz9bck.cjs"),b=require("./Icon.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=require("./consts-CtNoHdBj.cjs"),$=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -58,12 +58,12 @@
       }
     }
   }
-`,$=m.styled.div`
+`,N=m.styled.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
   background: ${l.linearGradientAnimation("-90deg")};
-`,N=m.styled.div`
+`,I=m.styled.div`
   display: flex;
   padding: 0 0.5rem 0 0;
   align-items: center;
@@ -107,12 +107,12 @@
       color: var(--white, #fff);
     }
   }
-`,I=m.styled.div`
+`,C=m.styled.div`
   width: 7rem;
   height: 3rem;
   border-radius: 999px;
   background: ${l.linearGradientAnimation("-90deg")};
-`,C=p.forwardRef(({},t)=>r.jsx(I,{})),W=p.forwardRef(({name:t,isActive:n,icon:i,onSelectCard:o=()=>{}},d)=>r.jsxs(N,{className:n?"active":"",onClick:o,children:[r.jsx(y,{icon:i,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),F=p.forwardRef(({image:t,imageComponent:n,name:i,description:o,onSelectCard:d=()=>{}},x)=>{const{theme:c}=b.useTheme();return r.jsxs(k,{theme:c,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),o&&r.jsx("div",{className:"wrapper__description",children:o})]})]})}),R=p.forwardRef(({},t)=>r.jsx($,{})),q=m.styled.div`
+`,W=p.forwardRef(({},i)=>r.jsx(C,{})),F=p.forwardRef(({name:i,isActive:n,icon:t,onSelectCard:a=()=>{}},d)=>r.jsxs(I,{className:n?"active":"",onClick:a,children:[r.jsx(b,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),R=p.forwardRef(({image:i,imageComponent:n,name:t,description:a,onSelectCard:d=()=>{}},u)=>{const{theme:c}=j.useTheme();return r.jsxs($,{theme:c,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),a&&r.jsx("div",{className:"wrapper__description",children:a})]})]})}),q=p.forwardRef(({},i)=>r.jsx(N,{})),z=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -153,14 +153,14 @@
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
+    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
     justify-content: center;
     align-items: center;
     gap: 1.5rem;
     width: 100%;
   }
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__tags {
       overflow-x: scroll;
       justify-content: flex-start;
@@ -182,8 +182,8 @@
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
     }
   }
-`,T=p.forwardRef(({title:t,subtitle:n,tags:i=[],limitTags:o=7,limitTagsForMobile:d=7,limit:x=3,limitForMobile:c=2,items:s=[],onSelectTag:f=()=>{},onSelectCard:_=()=>{},getImage:v=()=>{}},z)=>{var g,u;const h=e=>{f==null||f(e)},w=e=>{_==null||_(e)};return r.jsxs(q,{limitTags:o,limitTagsForMobile:d,limitCards:x,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,a)=>r.jsx(W,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.name,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${a+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,a)=>r.jsx(C,{},`field-of-interests-with-tags-card-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,a)=>r.jsx(F,{image:v(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid),imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.name,description:(e==null?void 0:e.shortDescription)||(e==null?void 0:e.description),onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-with-tags-card__${a+1}`)):(u=Array.from("123"))==null?void 0:u.map((e,a)=>r.jsx(R,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=T;
+`,O=p.forwardRef(({title:i,subtitle:n,tags:t=[],limitTags:a=7,limitTagsForMobile:d=7,limit:u=3,limitForMobile:c=2,items:s=[],selectedTag:f,onSelectTag:_=()=>{},onSelectCard:h=()=>{},getImage:y=()=>{}},A)=>{var g,v;const w=e=>{_==null||_(e)},x=e=>{h==null||h(e)};return r.jsxs(z,{limitTags:a,limitTagsForMobile:d,limitCards:u,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,o)=>r.jsx(F,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.name,isActive:(e==null?void 0:e.uuid)===(f==null?void 0:f.uuid),onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-with-tags-card-tag__${o+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,o)=>r.jsx(W,{},`field-of-interests-with-tags-card-tag-skeleton__${o+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,o)=>r.jsx(R,{image:y(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid),imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.name,description:(e==null?void 0:e.shortDescription)||(e==null?void 0:e.description),onSelectCard:()=>x==null?void 0:x(e)},`field-of-interests-with-tags-card__${o+1}`)):(v=Array.from("123"))==null?void 0:v.map((e,o)=>r.jsx(q,{},`field-of-interests-with-tags-card-skeleton__${o+1}`))})]})});module.exports=O;