@lanaco/lnc-react-ui 4.0.205 → 4.0.207

package/dist/FieldOfInterestsMasonrySection.js

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

package/dist/FieldOfInterestsWithAvatarsCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),p=require("react"),y=require("./utils-RnrgDDZP.cjs"),$=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./consts-goSZX3xP.cjs"),F=require("./index-BFc3nxYZ.cjs"),l=require("./style-BAcV7F53.cjs"),S=$.styled.div`
+"use strict";const i=require("react/jsx-runtime"),p=require("react"),y=require("./utils-CITgSxXe.cjs"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),b=require("./index-of6WydGq.cjs"),l=require("./style-BAcV7F53.cjs"),F=C.styled.div`
   width: 100%;
   height: auto;
   border-radius: 999px;
@@ -19,12 +19,12 @@
     border: var(--yellow-600, #d97706);
   }
 
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+  @media ${d.down("S")} {
     & .wrapper__image {
       height: auto;
     }
   }
-`,b=p.forwardRef(({isActive:t,image:r,imageComponent:s,onSelectCard:n=()=>{}},o)=>i.jsx(S,{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:x,image:u,sellerUuid:m,onSelectCard:a=()=>{},imageComponent:h,negotiableText:_="Negotiable",freeText:d="Free",nameSlug:f,LinkComponent:w},g)=>i.jsx(F.SimpleProductCard,{ref:g,uuid:t,title:r,price:s,currency:n,isNegotiable:o,isFree:x,image:u,imageComponent:h,sellerUuid:m,onSelectCard:a,negotiableText:_,freeText:d,nameSlug:f,LinkComponent:w})),I=$.styled.div`
+`,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`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -73,7 +73,13 @@
     width: 100%;
   }
 
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+  @media ${d.down("M")} {
+    & .wrapper__cards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media ${d.down("S")} {
     & .wrapper__avatars {
       grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitAvatarsForMobile}, minmax(0, 1fr))`};
       gap: auto;
@@ -84,12 +90,12 @@
       gap: 1rem;
     }
   }
-`,v=$.styled(l.SkeletonRowWrapper)`
+`,v=C.styled(l.SkeletonRowWrapper)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
+  @media ${d.down("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
 
@@ -108,4 +114,4 @@
       }
     }
   }
-`,N=({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`)]}),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(N,{keyPrefix:t}):n}),W=({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`)]}),L=({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}),P=p.forwardRef(({title:t,subtitle:r,avatars:s=[],limitAvatars:n=4,limit:o=6,limitAvatarsForMobile:x=4,limitForMobile:u=2,items:m=[],onSelectAvatar:a=()=>{},onSelectCard:h=()=>{},isLoadingTags:_=!1,isLoadingCards:d=!1,LinkComponent:f},w)=>{const g=e=>{a==null||a(e)},j=e=>{h==null||h(e)};return i.jsxs(I,{ref:w,limitAvatars:n,limitAvatarsForMobile:x,limitCards:o,limitCardsForMobile:u,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(O,{isLoading:_,keyPrefix:"field-of-interests-with-avatars-tag",children:i.jsx("div",{className:"wrapper__avatars",children:s==null?void 0:s.map((e,c)=>i.jsx(b,{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__${c+1}`))})}),i.jsx(L,{isLoading:d,keyPrefix:"field-of-interests-with-avatars-card",children:i.jsx("div",{className:"wrapper__cards",children:m==null?void 0:m.map((e,c)=>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:f},`field-of-interests-with-avatars-card__${c+1}`))})})]})});module.exports=P;
+`,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;