@lanaco/lnc-react-ui 4.0.226 → 4.0.227

package/dist/FieldOfInterestsMasonrySection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),_=require("react"),g=require("./utils-CITgSxXe.cjs"),z=require("./Icon.cjs"),j=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),L=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-Ito6YFqi.cjs"),M=j.styled.a`
+"use strict";const r=require("react/jsx-runtime"),h=require("react"),f=require("./utils-CITgSxXe.cjs"),I=require("./Icon.cjs"),b=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),w=require("./breakpoints-CcVm-gVm.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),v=require("./style-CQdEALKR.cjs"),R=b.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -39,7 +39,7 @@
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${g.truncateTextInRows(2)}
+      ${f.truncateTextInRows(2)}
     }
 
     & .wrapper__description {
@@ -49,11 +49,11 @@
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${g.truncateTextInRows(2)}
+      ${f.truncateTextInRows(2)}
     }
   }
 
-  @media ${f.down("S")} {
+  @media ${w.down("S")} {
     & .wrapper__content {
       & .wrapper__title {
         font-size: 0.875rem;
@@ -65,7 +65,7 @@
       }
     }
   }
-`,R=j.styled.div`
+`,E=b.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -105,7 +105,7 @@
     font-weight: 400;
     line-height: 1.5rem;
     max-width: 16rem;
-    ${g.truncateText()}
+    ${f.truncateText()}
   }
 
   &.active {
@@ -115,7 +115,7 @@
     }
   }
 
-  @media ${f.down("S")} {
+  @media ${w.down("S")} {
     max-width: unset;
     min-width: unset;
     flex-direction: row;
@@ -155,7 +155,7 @@
       max-width: unset;
     }
   }
-`,E=_.forwardRef(({text:t,isActive:s=!1,icon:i,onSelectCard:o=()=>{}},c)=>e.jsxs(R,{ref:c,className:s?"active":"",onClick:o,children:[e.jsx(z,{icon:i,className:"wrapper__icon"}),e.jsx("div",{className:"wrapper__text",children:t})]})),F=_.forwardRef(({image:t,imageComponent:s,title:i,description:o,className:c,onSelectCard:k=()=>{},link:x,LinkComponent:u},b)=>{const m=u||"a",{theme:h}=L.useTheme();return e.jsxs(M,{ref:b,theme:h,className:c,onClick:k,as:m,...u?{to:`/${x}`}:{href:`/${x}`},children:[g.isDefined(s)?s:e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__content",children:[i&&e.jsx("div",{className:"wrapper__title",children:i}),o&&e.jsx("div",{className:"wrapper__description",children:o})]})]})}),W=j.styled.div`
+`,F=h.forwardRef(({text:t,isActive:a=!1,icon:n,onSelectCard:s=()=>{}},d)=>r.jsxs(E,{ref:d,className:a?"active":"",onClick:s,children:[r.jsx(I,{icon:n,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),O=h.forwardRef(({image:t,imageComponent:a,title:n,description:s,className:d,onSelectCard:j=()=>{},link:g,LinkComponent:x},$)=>{const c=x||"a",{theme:m}=M.useTheme();return r.jsxs(R,{ref:$,theme:m,className:d,onClick:j,as:c,...x?{to:`/${g}`}:{href:`/${g}`},children:[f.isDefined(a)?a:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[n&&r.jsx("div",{className:"wrapper__title",children:n}),s&&r.jsx("div",{className:"wrapper__description",children:s})]})]})}),T=b.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -213,7 +213,7 @@
     }
   }
 
-  @media ${f.down("M")} {
+  @media ${w.down("M")} {
     & .wrapper__tags {
       gap: 0.75rem;
     }
@@ -223,21 +223,21 @@
     }
   }
 
-  @media ${f.down("S")} {
+  @media ${w.down("S")} {
     gap: 1rem;
 
     & .wrapper__cards {
       grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`,P=j.styled(n.SkeletonRowWrapper)`
+`,L=b.styled(v.SkeletonAnimationContainer)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media ${f.down("S")} {
+  @media ${w.down("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
     }
   }
-`,O=({keyPrefix:t})=>e.jsxs(P,{className:"skeleton__tags",children:[e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-1`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-2`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-3`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-4`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-5`)]}),T=({keyPrefix:t,isLoading:s=!1,fallbackComponent:i=e.jsx(e.Fragment,{}),children:o})=>e.jsx(_.Suspense,{fallbackComponent:i,children:s===!0?e.jsx(O,{keyPrefix:t}):o}),G=_.forwardRef(({title:t,subtitle:s,tags:i=[],items:o=[],limitTags:c=5,limitTagsForMobile:k=5,limit:x=3,limitForMobile:u=2,selectedTag:b,onSelectTag:m=()=>{},onSelectCard:h=()=>{},className:w,isLoadingTags:S=!1,LinkComponent:C},I)=>(_.useLayoutEffect(()=>{if(!g.isDefinedNotEmptyString(w))return;const r=()=>{const d=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),l=d==null?void 0:d.querySelectorAll(".wrapper__card");l==null||l.forEach(v=>{const q=v.getBoundingClientRect().height,N=Math.ceil((q+10)/20);v.style.gridRowEnd=`span ${N}`});const $=l==null?void 0:l[(l==null?void 0:l.length)-1];if($){const v=$.offsetTop+$.offsetHeight;d.style.height=`${v}px`}},p=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),a=p==null?void 0:p.querySelectorAll(".wrapper__image");let y=0;return(a==null?void 0:a.length)===0?r():(a==null||a.forEach(d=>{d.complete?y++:d.addEventListener("load",()=>{y++,y===(a==null?void 0:a.length)&&r()})}),y===(a==null?void 0:a.length)&&r()),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[w,o]),e.jsxs(W,{ref:I,limitTags:c,limitTagsForMobile:k,limitCards:x,limitCardsForMobile:u,className:w,numberOfTags:i==null?void 0:i.length,children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),s&&e.jsx("div",{className:"wrapper__subtitle",children:s})]}),e.jsx(T,{isLoading:S,keyPrefix:"field-of-interests-masonry-tag",children:e.jsx("div",{className:"wrapper__tags__external",children:e.jsx("div",{className:"wrapper__tags",children:i==null?void 0:i.map((r,p)=>e.jsx(E,{icon:r==null?void 0:r.icon,text:r==null?void 0:r.title,isActive:(r==null?void 0:r.code)===b,onSelectCard:()=>m==null?void 0:m(r)},`field-of-interests-masonry-tag__${p+1}`))})})}),e.jsx("div",{className:"wrapper__cards",children:o==null?void 0:o.map((r,p)=>e.jsx(F,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,title:r==null?void 0:r.title,description:r==null?void 0:r.description,onSelectCard:()=>h==null?void 0:h(r),className:"wrapper__card",link:r==null?void 0:r.link,LinkComponent:C},`field-of-interests-with-tags-card__${p+1}`))})]})));module.exports=G;
+`,A=({keyPrefix:t})=>r.jsx(L,{className:"skeleton__tags",children:[1,2,3,4,5].map(a=>r.jsxs(v.SkeletonColumnContainer,{alignItems:"center",gap:"0.5rem",children:[r.jsx(v.SkeletonCircle,{size:"2.75rem"}),r.jsx(v.SkeletonRect,{height:"1.5rem",width:"8rem"})]},`${t}-tag-${a}`))}),W=({keyPrefix:t,isLoading:a=!1,fallbackComponent:n=r.jsx(r.Fragment,{}),children:s})=>r.jsx(h.Suspense,{fallbackComponent:n,children:a===!0?r.jsx(A,{keyPrefix:t}):s}),D=h.forwardRef(({title:t,subtitle:a,tags:n=[],items:s=[],limitTags:d=5,limitTagsForMobile:j=5,limit:g=3,limitForMobile:x=2,selectedTag:$,onSelectTag:c=()=>{},onSelectCard:m=()=>{},className:_,isLoadingTags:S=!1,LinkComponent:q},z)=>(h.useLayoutEffect(()=>{if(!f.isDefinedNotEmptyString(_))return;const e=()=>{const p=document==null?void 0:document.querySelector(`.${_} .wrapper__cards`),o=p==null?void 0:p.querySelectorAll(".wrapper__card");o==null||o.forEach(y=>{const C=y.getBoundingClientRect().height,N=Math.ceil((C+10)/20);y.style.gridRowEnd=`span ${N}`});const k=o==null?void 0:o[(o==null?void 0:o.length)-1];if(k){const y=k.offsetTop+k.offsetHeight;p.style.height=`${y}px`}},l=document==null?void 0:document.querySelector(`.${_} .wrapper__cards`),i=l==null?void 0:l.querySelectorAll(".wrapper__image");let u=0;return(i==null?void 0:i.length)===0?e():(i==null||i.forEach(p=>{p.complete?u++:p.addEventListener("load",()=>{u++,u===(i==null?void 0:i.length)&&e()})}),u===(i==null?void 0:i.length)&&e()),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[_,s]),r.jsxs(T,{ref:z,limitTags:d,limitTagsForMobile:j,limitCards:g,limitCardsForMobile:x,className:_,numberOfTags:n==null?void 0:n.length,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx(W,{isLoading:S,keyPrefix:"field-of-interests-masonry-tag",children:r.jsx("div",{className:"wrapper__tags__external",children:r.jsx("div",{className:"wrapper__tags",children:n==null?void 0:n.map((e,l)=>r.jsx(F,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===$,onSelectCard:()=>c==null?void 0:c(e)},`field-of-interests-masonry-tag__${l+1}`))})})}),r.jsx("div",{className:"wrapper__cards",children:s==null?void 0:s.map((e,l)=>r.jsx(O,{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:()=>m==null?void 0:m(e),className:"wrapper__card",link:e==null?void 0:e.link,LinkComponent:q},`field-of-interests-with-tags-card__${l+1}`))})]})));module.exports=D;

package/dist/FieldOfInterestsMasonrySection.js

@@ -1,12 +1,12 @@
-import { jsxs as o, jsx as r, Fragment as O } from "react/jsx-runtime";
-import { forwardRef as N, Suspense as R, useLayoutEffect as T } from "react";
-import { n as z, t as W, m as q, l as G } from "./utils-MoGhNMmj.js";
-import j from "./Icon.js";
-import { s as $ } from "./emotion-styled.browser.esm-DfbrHHed.js";
-import { d as u } from "./breakpoints-BubDitvo.js";
+import { jsxs as m, jsx as r, Fragment as E } from "react/jsx-runtime";
+import { forwardRef as k, Suspense as F, useLayoutEffect as O } from "react";
+import { n as S, t as L, m as R, l as T } from "./utils-MoGhNMmj.js";
+import q from "./Icon.js";
+import { s as y } from "./emotion-styled.browser.esm-DfbrHHed.js";
+import { d as _ } from "./breakpoints-BubDitvo.js";
 import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { S as D, b as f, d as _, a as w } from "./style-DvkivBNg.js";
-const H = $.a`
+import { S as j, e as W, f as D, a as H } from "./style-BFPpppS9.js";
+const B = y.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -47,7 +47,7 @@ const H = $.a`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${z(2)}
+      ${S(2)}
     }
 
     & .wrapper__description {
@@ -57,11 +57,11 @@ const H = $.a`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${z(2)}
+      ${S(2)}
     }
   }
 
-  @media ${u("S")} {
+  @media ${_("S")} {
     & .wrapper__content {
       & .wrapper__title {
         font-size: 0.875rem;
@@ -73,7 +73,7 @@ const H = $.a`
       }
     }
   }
-`, B = $.div`
+`, P = y.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -113,7 +113,7 @@ const H = $.a`
     font-weight: 400;
     line-height: 1.5rem;
     max-width: 16rem;
-    ${W()}
+    ${L()}
   }
 
   &.active {
@@ -123,7 +123,7 @@ const H = $.a`
     }
   }
 
-  @media ${u("S")} {
+  @media ${_("S")} {
     max-width: unset;
     min-width: unset;
     flex-direction: row;
@@ -163,53 +163,53 @@ const H = $.a`
       max-width: unset;
     }
   }
-`, J = N(
-  ({ text: t, isActive: l = !1, icon: i, onSelectCard: a = () => {
-  } }, d) => /* @__PURE__ */ o(
-    B,
+`, G = k(
+  ({ text: t, isActive: a = !1, icon: i, onSelectCard: o = () => {
+  } }, d) => /* @__PURE__ */ m(
+    P,
     {
       ref: d,
-      className: l ? "active" : "",
-      onClick: a,
+      className: a ? "active" : "",
+      onClick: o,
       children: [
-        /* @__PURE__ */ r(j, { icon: i, className: "wrapper__icon" }),
+        /* @__PURE__ */ r(q, { icon: i, className: "wrapper__icon" }),
         /* @__PURE__ */ r("div", { className: "wrapper__text", children: t })
       ]
     }
   )
-), K = N(
+), J = k(
   ({
     image: t,
-    imageComponent: l,
+    imageComponent: a,
     title: i,
-    description: a,
+    description: o,
     className: d,
-    onSelectCard: k = () => {
+    onSelectCard: v = () => {
     },
-    link: x,
-    LinkComponent: v
-  }, I) => {
-    const c = v || "a", { theme: h } = A();
-    return /* @__PURE__ */ o(
-      H,
+    link: w,
+    LinkComponent: g
+  }, b) => {
+    const c = g || "a", { theme: f } = A();
+    return /* @__PURE__ */ m(
+      B,
       {
-        ref: I,
-        theme: h,
+        ref: b,
+        theme: f,
         className: d,
-        onClick: k,
+        onClick: v,
         as: c,
-        ...v ? { to: `/${x}` } : { href: `/${x}` },
+        ...g ? { to: `/${w}` } : { href: `/${w}` },
         children: [
-          q(l) ? l : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
-          /* @__PURE__ */ o("div", { className: "wrapper__content", children: [
+          R(a) ? a : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
+          /* @__PURE__ */ m("div", { className: "wrapper__content", children: [
             i && /* @__PURE__ */ r("div", { className: "wrapper__title", children: i }),
-            a && /* @__PURE__ */ r("div", { className: "wrapper__description", children: a })
+            o && /* @__PURE__ */ r("div", { className: "wrapper__description", children: o })
           ] })
         ]
       }
     );
   }
-), Q = $.div`
+), K = y.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -267,7 +267,7 @@ const H = $.a`
     }
   }
 
-  @media ${u("M")} {
+  @media ${_("M")} {
     & .wrapper__tags {
       gap: 0.75rem;
     }
@@ -277,180 +277,126 @@ const H = $.a`
     }
   }
 
-  @media ${u("S")} {
+  @media ${_("S")} {
     gap: 1rem;
 
     & .wrapper__cards {
       grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, U = $(D)`
+`, Q = y(j)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media ${u("S")} {
+  @media ${_("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
     }
   }
-`, V = ({ keyPrefix: t }) => /* @__PURE__ */ o(U, { className: "skeleton__tags", children: [
-  /* @__PURE__ */ o(
-    f,
-    {
-      alignItems: "center",
-      gap: "0.5rem",
-      children: [
-        /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
-      ]
-    },
-    `${t}-1`
-  ),
-  /* @__PURE__ */ o(
-    f,
-    {
-      alignItems: "center",
-      gap: "0.5rem",
-      noGradient: !0,
-      children: [
-        /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
-      ]
-    },
-    `${t}-2`
-  ),
-  /* @__PURE__ */ o(
-    f,
-    {
-      alignItems: "center",
-      gap: "0.5rem",
-      noGradient: !0,
-      children: [
-        /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
-      ]
-    },
-    `${t}-3`
-  ),
-  /* @__PURE__ */ o(
-    f,
-    {
-      alignItems: "center",
-      gap: "0.5rem",
-      noGradient: !0,
-      children: [
-        /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
-      ]
-    },
-    `${t}-4`
-  ),
-  /* @__PURE__ */ o(
-    f,
-    {
-      alignItems: "center",
-      gap: "0.5rem",
-      noGradient: !0,
-      children: [
-        /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
-      ]
-    },
-    `${t}-5`
-  )
-] }), X = ({
+`, U = ({ keyPrefix: t }) => /* @__PURE__ */ r(Q, { className: "skeleton__tags", children: [1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ m(
+  W,
+  {
+    alignItems: "center",
+    gap: "0.5rem",
+    children: [
+      /* @__PURE__ */ r(D, { size: "2.75rem" }),
+      /* @__PURE__ */ r(H, { height: "1.5rem", width: "8rem" })
+    ]
+  },
+  `${t}-tag-${a}`
+)) }), V = ({
   keyPrefix: t,
-  isLoading: l = !1,
-  fallbackComponent: i = /* @__PURE__ */ r(O, {}),
-  children: a
-}) => /* @__PURE__ */ r(R, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ r(V, { keyPrefix: t }) : a }), ae = N(
+  isLoading: a = !1,
+  fallbackComponent: i = /* @__PURE__ */ r(E, {}),
+  children: o
+}) => /* @__PURE__ */ r(F, { fallbackComponent: i, children: a === !0 ? /* @__PURE__ */ r(U, { keyPrefix: t }) : o }), ae = k(
   ({
     title: t,
-    subtitle: l,
+    subtitle: a,
     tags: i = [],
-    items: a = [],
+    items: o = [],
     limitTags: d = 5,
-    limitTagsForMobile: k = 5,
-    limit: x = 3,
-    limitForMobile: v = 2,
-    selectedTag: I,
+    limitTagsForMobile: v = 5,
+    limit: w = 3,
+    limitForMobile: g = 2,
+    selectedTag: b,
     onSelectTag: c = () => {
     },
-    onSelectCard: h = () => {
+    onSelectCard: f = () => {
     },
-    className: g,
-    isLoadingTags: C = !1,
+    className: h,
+    isLoadingTags: z = !1,
     // isLoadingCards = false,
-    LinkComponent: M
-  }, E) => (T(() => {
-    if (!G(g))
+    LinkComponent: C
+  }, N) => (O(() => {
+    if (!T(h))
       return;
     const e = () => {
-      const m = document == null ? void 0 : document.querySelector(`.${g} .wrapper__cards`), s = m == null ? void 0 : m.querySelectorAll(".wrapper__card");
-      s == null || s.forEach((b) => {
-        const F = b.getBoundingClientRect().height, L = Math.ceil((F + 10) / 20);
-        b.style.gridRowEnd = `span ${L}`;
+      const p = document == null ? void 0 : document.querySelector(`.${h} .wrapper__cards`), s = p == null ? void 0 : p.querySelectorAll(".wrapper__card");
+      s == null || s.forEach((x) => {
+        const M = x.getBoundingClientRect().height, I = Math.ceil((M + 10) / 20);
+        x.style.gridRowEnd = `span ${I}`;
       });
-      const S = s == null ? void 0 : s[(s == null ? void 0 : s.length) - 1];
-      if (S) {
-        const b = S.offsetTop + S.offsetHeight;
-        m.style.height = `${b}px`;
+      const $ = s == null ? void 0 : s[(s == null ? void 0 : s.length) - 1];
+      if ($) {
+        const x = $.offsetTop + $.offsetHeight;
+        p.style.height = `${x}px`;
       }
-    }, p = document == null ? void 0 : document.querySelector(`.${g} .wrapper__cards`), n = p == null ? void 0 : p.querySelectorAll(".wrapper__image");
-    let y = 0;
-    return (n == null ? void 0 : n.length) === 0 ? e() : (n == null || n.forEach((m) => {
-      m.complete ? y++ : m.addEventListener("load", () => {
-        y++, y === (n == null ? void 0 : n.length) && e();
+    }, l = document == null ? void 0 : document.querySelector(`.${h} .wrapper__cards`), n = l == null ? void 0 : l.querySelectorAll(".wrapper__image");
+    let u = 0;
+    return (n == null ? void 0 : n.length) === 0 ? e() : (n == null || n.forEach((p) => {
+      p.complete ? u++ : p.addEventListener("load", () => {
+        u++, u === (n == null ? void 0 : n.length) && e();
       });
-    }), y === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
+    }), u === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [g, a]), /* @__PURE__ */ o(
-    Q,
+  }, [h, o]), /* @__PURE__ */ m(
+    K,
     {
-      ref: E,
+      ref: N,
       limitTags: d,
-      limitTagsForMobile: k,
-      limitCards: x,
-      limitCardsForMobile: v,
-      className: g,
+      limitTagsForMobile: v,
+      limitCards: w,
+      limitCardsForMobile: g,
+      className: h,
       numberOfTags: i == null ? void 0 : i.length,
       children: [
-        /* @__PURE__ */ o("div", { className: "wrapper__heading", children: [
+        /* @__PURE__ */ m("div", { className: "wrapper__heading", children: [
           t && /* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
-          l && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: l })
+          a && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: a })
         ] }),
         /* @__PURE__ */ r(
-          X,
+          V,
           {
-            isLoading: C,
+            isLoading: z,
             keyPrefix: "field-of-interests-masonry-tag",
-            children: /* @__PURE__ */ r("div", { className: "wrapper__tags__external", children: /* @__PURE__ */ r("div", { className: "wrapper__tags", children: i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ r(
-              J,
+            children: /* @__PURE__ */ r("div", { className: "wrapper__tags__external", children: /* @__PURE__ */ r("div", { className: "wrapper__tags", children: i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
+              G,
               {
                 icon: e == null ? void 0 : e.icon,
                 text: e == null ? void 0 : e.title,
-                isActive: (e == null ? void 0 : e.code) === I,
+                isActive: (e == null ? void 0 : e.code) === b,
                 onSelectCard: () => c == null ? void 0 : c(e)
               },
-              `field-of-interests-masonry-tag__${p + 1}`
+              `field-of-interests-masonry-tag__${l + 1}`
             )) }) })
           }
         ),
-        /* @__PURE__ */ r("div", { className: "wrapper__cards", children: a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
-          K,
+        /* @__PURE__ */ r("div", { className: "wrapper__cards", children: o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ r(
+          J,
           {
             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),
+            onSelectCard: () => f == null ? void 0 : f(e),
             className: "wrapper__card",
             link: e == null ? void 0 : e.link,
-            LinkComponent: M
+            LinkComponent: C
           },
-          `field-of-interests-with-tags-card__${p + 1}`
+          `field-of-interests-with-tags-card__${l + 1}`
         )) })
       ]
     }

package/dist/FieldOfInterestsWithAvatarsCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),p=require("react"),y=require("./utils-CITgSxXe.cjs"),C=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),b=require("./index-BkztbBWe.cjs"),l=require("./style-Ito6YFqi.cjs"),F=C.styled.div`
+"use strict";const i=require("react/jsx-runtime"),g=require("react"),C=require("./utils-CITgSxXe.cjs"),y=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),b=require("./index-BkztbBWe.cjs"),$=require("./style-CQdEALKR.cjs"),F=y.styled.div`
   width: 100%;
   height: auto;
   border-radius: 999px;
@@ -19,12 +19,12 @@
     border: var(--yellow-600, #d97706);
   }
 
-  @media ${d.down("S")} {
+  @media ${f.down("S")} {
     & .wrapper__image {
       height: auto;
     }
   }
-`,S=p.forwardRef(({isActive:t,image:r,imageComponent:s,onSelectCard:n=()=>{}},o)=>i.jsx(F,{ref:o,className:t?"active":"",onClick:n,children:y.isDefined(s)?s:i.jsx("img",{src:r,className:"wrapper__image"})})),k=p.forwardRef(({uuid:t,title:r,price:s,currency:n,isNegotiable:o,isFree:u,image:x,sellerUuid:m,onSelectCard:a=()=>{},imageComponent:h,negotiableText:_="Negotiable",freeText:f="Free",nameSlug:w,LinkComponent:c},g)=>i.jsx(b.SimpleProductCard,{ref:g,uuid:t,title:r,price:s,currency:n,isNegotiable:o,isFree:u,image:x,imageComponent:h,sellerUuid:m,onSelectCard:a,negotiableText:_,freeText:f,nameSlug:w,LinkComponent:c})),N=C.styled.div`
+`,k=g.forwardRef(({isActive:t,image:s,imageComponent:r,onSelectCard:n=()=>{}},l)=>i.jsx(F,{ref:l,className:t?"active":"",onClick:n,children:C.isDefined(r)?r:i.jsx("img",{src:s,className:"wrapper__image"})})),N=g.forwardRef(({uuid:t,title:s,price:r,currency:n,isNegotiable:l,isFree:u,image:h,sellerUuid:o,onSelectCard:m=()=>{},imageComponent:a,negotiableText:x="Negotiable",freeText:_="Free",nameSlug:d,LinkComponent:w},p)=>i.jsx(b.SimpleProductCard,{ref:p,uuid:t,title:s,price:r,currency:n,isNegotiable:l,isFree:u,image:h,imageComponent:a,sellerUuid:o,onSelectCard:m,negotiableText:x,freeText:_,nameSlug:d,LinkComponent:w})),S=y.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -73,13 +73,13 @@
     width: 100%;
   }
 
-  @media ${d.down("M")} {
+  @media ${f.down("M")} {
     & .wrapper__cards {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @media ${d.down("S")} {
+  @media ${f.down("S")} {
     & .wrapper__avatars {
       grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitAvatarsForMobile}, minmax(0, 1fr))`};
       gap: auto;
@@ -90,12 +90,12 @@
       gap: 1rem;
     }
   }
-`,v=C.styled(l.SkeletonRowWrapper)`
+`,v=y.styled($.SkeletonAnimationContainer)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media ${d.down("S")} {
+  @media ${f.down("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
 
@@ -114,4 +114,4 @@
       }
     }
   }
-`,W=({keyPrefix:t})=>i.jsxs(v,{className:"skeleton__tags",justifyContent:"center",children:[i.jsx(l.SkeletonCirclePlaceholder,{width:"9.875rem",height:"9.875rem"},`${t}-1`),i.jsx(l.SkeletonCirclePlaceholder,{width:"9.875rem",height:"9.875rem"},`${t}-2`),i.jsx(l.SkeletonCirclePlaceholder,{width:"9.875rem",height:"9.875rem"},`${t}-3`),i.jsx(l.SkeletonCirclePlaceholder,{width:"9.875rem",height:"9.875rem"},`${t}-4`)]}),q=({keyPrefix:t,isLoading:r=!1,fallbackComponent:s=i.jsx(i.Fragment,{}),children:n})=>i.jsx(p.Suspense,{fallbackComponent:s,children:r===!0?i.jsx(W,{keyPrefix:t}):n}),I=({keyPrefix:t})=>i.jsxs(v,{className:"skeleton__cards",justifyContent:"center",children:[i.jsx(l.SkeletonLinePlaceholder,{height:"13.75rem"},`${t}-1`),i.jsx(l.SkeletonLinePlaceholder,{height:"13.75rem"},`${t}-2`),i.jsx(l.SkeletonLinePlaceholder,{height:"13.75rem"},`${t}-3`),i.jsx(l.SkeletonLinePlaceholder,{height:"13.75rem"},`${t}-3`)]}),O=({keyPrefix:t,isLoading:r=!1,fallbackComponent:s=i.jsx(i.Fragment,{}),children:n})=>i.jsx(p.Suspense,{fallbackComponent:s,children:r===!0?i.jsx(I,{keyPrefix:t}):n}),A=p.forwardRef(({title:t,subtitle:r,avatars:s=[],limitAvatars:n=4,limit:o=6,limitAvatarsForMobile:u=4,limitForMobile:x=2,items:m=[],onSelectAvatar:a=()=>{},onSelectCard:h=()=>{},isLoadingTags:_=!1,isLoadingCards:f=!1,LinkComponent:w},c)=>{const g=e=>{a==null||a(e)},j=e=>{h==null||h(e)};return i.jsxs(N,{ref:c,limitAvatars:n,limitAvatarsForMobile:u,limitCards:o,limitCardsForMobile:x,children:[i.jsxs("div",{className:"wrapper__heading",children:[t&&i.jsx("div",{className:"wrapper__title",children:t}),r&&i.jsx("div",{className:"wrapper__subtitle",children:r})]}),i.jsx(q,{isLoading:_,keyPrefix:"field-of-interests-with-avatars-tag",children:i.jsx("div",{className:"wrapper__avatars",children:s==null?void 0:s.map((e,$)=>i.jsx(S,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g==null?void 0:g(e)},`field-of-interests-with-avatars-card-avatar__${$+1}`))})}),i.jsx(O,{isLoading:f,keyPrefix:"field-of-interests-with-avatars-card",children:i.jsx("div",{className:"wrapper__cards",children:m==null?void 0:m.map((e,$)=>i.jsx(k,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,isNegotiable:e==null?void 0:e.isNegotiable,isFree:e==null?void 0:e.isFree,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,sellerUuid:e==null?void 0:e.sellerUuid,negotiableText:e==null?void 0:e.negotiableText,freeText:e==null?void 0:e.freeText,onSelectCard:()=>j==null?void 0:j(e),nameSlug:e==null?void 0:e.nameSlug,LinkComponent:w},`field-of-interests-with-avatars-card__${$+1}`))})})]})});module.exports=A;
+`,W=({keyPrefix:t})=>i.jsx(v,{className:"skeleton__tags",justifyContent:"center",children:[1,2,3,4].map(s=>i.jsx($.SkeletonCircle,{size:"9.875rem"},`${t}-${s}`))}),q=({keyPrefix:t,isLoading:s=!1,fallbackComponent:r=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:r,children:s===!0?i.jsx(W,{keyPrefix:t}):n}),A=({keyPrefix:t})=>i.jsx(v,{className:"skeleton__cards",justifyContent:"center",children:[1,2,3,4].map(s=>i.jsx($.SkeletonRect,{width:"100%",height:"13.75rem"},`${t}-${s}`))}),I=({keyPrefix:t,isLoading:s=!1,fallbackComponent:r=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:r,children:s===!0?i.jsx(A,{keyPrefix:t}):n}),O=g.forwardRef(({title:t,subtitle:s,avatars:r=[],limitAvatars:n=4,limit:l=6,limitAvatarsForMobile:u=4,limitForMobile:h=2,items:o=[],onSelectAvatar:m=()=>{},onSelectCard:a=()=>{},isLoadingTags:x=!1,isLoadingCards:_=!1,LinkComponent:d},w)=>{const p=e=>{m==null||m(e)},j=e=>{a==null||a(e)};return i.jsxs(S,{ref:w,limitAvatars:n,limitAvatarsForMobile:u,limitCards:l,limitCardsForMobile:h,children:[i.jsxs("div",{className:"wrapper__heading",children:[t&&i.jsx("div",{className:"wrapper__title",children:t}),s&&i.jsx("div",{className:"wrapper__subtitle",children:s})]}),i.jsx(q,{isLoading:x,keyPrefix:"field-of-interests-with-avatars-tag",children:i.jsx("div",{className:"wrapper__avatars",children:r==null?void 0:r.map((e,c)=>i.jsx(k,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>p==null?void 0:p(e)},`field-of-interests-with-avatars-card-avatar__${c+1}`))})}),i.jsx(I,{isLoading:_,keyPrefix:"field-of-interests-with-avatars-card",children:i.jsx("div",{className:"wrapper__cards",children:o==null?void 0:o.map((e,c)=>i.jsx(N,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,isNegotiable:e==null?void 0:e.isNegotiable,isFree:e==null?void 0:e.isFree,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,sellerUuid:e==null?void 0:e.sellerUuid,negotiableText:e==null?void 0:e.negotiableText,freeText:e==null?void 0:e.freeText,onSelectCard:()=>j==null?void 0:j(e),nameSlug:e==null?void 0:e.nameSlug,LinkComponent:d},`field-of-interests-with-avatars-card__${c+1}`))})})]})});module.exports=O;