@lanaco/lnc-react-ui 4.0.225 → 4.0.227

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-B2fsQ6PS.js";
-import j from "./Icon.js";
-import { s as $ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { d as u } from "./breakpoints-ff0SIcV3.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-BwQ4djFC.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-BtEseadx.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),b=require("./index-Cav6G7wx.cjs"),l=require("./style-BAcV7F53.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;