@lanaco/lnc-react-ui 4.0.170 → 4.0.171

package/dist/FieldOfInterestsMasonrySection.js

@@ -1,11 +1,12 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as c, useLayoutEffect as L } from "react";
-import { p as $, o as E, l as O, k as S } from "./utils-BdsZgOUE.js";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as g } from "./consts-BuFChS64.js";
-import A from "./Icon.js";
-import { u as W } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const T = h.div`
+import { jsxs as o, jsx as e, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as N, Suspense as z, useLayoutEffect as W } from "react";
+import { o as M, l as j, k as q } from "./utils-DHfRApMf.js";
+import T from "./Icon.js";
+import { s as u } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as x } from "./consts-BuFChS64.js";
+import { u as A } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { a as B, S as f, d as w, b as p } from "./style-CXMUA6cI.js";
+const D = u.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -44,7 +45,7 @@ const T = h.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${$(2)}
+      ${M(2)}
     }
 
     & .wrapper__description {
@@ -54,11 +55,11 @@ const T = h.div`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${$(2)}
+      ${M(2)}
     }
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${x + "px"}) {
     & .wrapper__content {
       & .wrapper__title {
         font-size: 0.875rem;
@@ -70,12 +71,7 @@ const T = h.div`
       }
     }
   }
-`, j = h.div`
-  width: 100%;
-  height: 11.625rem;
-  border-radius: 0.75rem;
-  background: ${E("-90deg")};
-`, q = h.div`
+`, H = u.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -116,7 +112,7 @@ const T = h.div`
     font-weight: 400;
     line-height: 1.5rem;
     max-width: 8rem;
-    ${$(2)}
+    ${M(2)}
   }
 
   &.active {
@@ -126,7 +122,7 @@ const T = h.div`
     }
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${x + "px"}) {
     max-width: unset;
     min-width: unset;
     flex-direction: row;
@@ -166,65 +162,49 @@ const T = h.div`
       max-width: unset;
     }
   }
-`, R = h.div`
-  width: 7.5rem;
-  width: 7.5rem;
-  border-radius: 999px;
-  background: ${E("-90deg")};
-
-  @media (max-width: ${g + "px"}) {
-    width: 7.5rem;
-    height: 2.5rem;
-  }
-`, B = c(({}, i) => /* @__PURE__ */ r(R, {})), D = c(
-  ({ text: i, isActive: o = !1, icon: t, onSelectCard: a = () => {
-  } }, s) => /* @__PURE__ */ l(
-    q,
+`, X = N(
+  ({ text: t, isActive: l = !1, icon: i, onSelectCard: n = () => {
+  } }, c) => /* @__PURE__ */ o(
+    H,
     {
-      ref: s,
-      className: o ? "active" : "",
-      onClick: a,
+      ref: c,
+      className: l ? "active" : "",
+      onClick: n,
       children: [
-        /* @__PURE__ */ r(A, { icon: t, className: "wrapper__icon" }),
-        /* @__PURE__ */ r("div", { className: "wrapper__text", children: i })
+        /* @__PURE__ */ e(T, { icon: i, className: "wrapper__icon" }),
+        /* @__PURE__ */ e("div", { className: "wrapper__text", children: t })
       ]
     }
   )
-), G = c(
+), Z = N(
   ({
-    image: i,
-    imageComponent: o,
-    title: t,
-    description: a,
-    className: s,
-    onSelectCard: u = () => {
+    image: t,
+    imageComponent: l,
+    title: i,
+    description: n,
+    className: c,
+    onSelectCard: v = () => {
     }
-  }, x) => {
-    const { theme: v } = W();
-    return /* @__PURE__ */ l(
-      T,
+  }, y) => {
+    const { theme: b } = A();
+    return /* @__PURE__ */ o(
+      D,
       {
-        ref: x,
-        theme: v,
-        className: s,
-        onClick: u,
+        ref: y,
+        theme: b,
+        className: c,
+        onClick: v,
         children: [
-          O(o) ? o : /* @__PURE__ */ r("img", { src: i, className: "wrapper__image" }),
-          /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
-            t && /* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
-            a && /* @__PURE__ */ r("div", { className: "wrapper__description", children: a })
+          j(l) ? l : /* @__PURE__ */ e("img", { src: t, className: "wrapper__image" }),
+          /* @__PURE__ */ o("div", { className: "wrapper__content", children: [
+            i && /* @__PURE__ */ e("div", { className: "wrapper__title", children: i }),
+            n && /* @__PURE__ */ e("div", { className: "wrapper__description", children: n })
           ] })
         ]
       }
     );
   }
-), H = c(({}, i) => /* @__PURE__ */ l(j, { children: [
-  /* @__PURE__ */ r("div", { className: "wrapper__image" }),
-  /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
-    /* @__PURE__ */ r("div", { className: "wrapper__title" }),
-    /* @__PURE__ */ r("div", { className: "wrapper__description" })
-  ] })
-] })), P = h.div`
+), J = u.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -268,7 +248,7 @@ const T = h.div`
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCards}, minmax(12.5rem, 1fr))`};
+    grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCards}, minmax(12.5rem, 1fr))`};
     grid-auto-rows: 0.625rem;
     gap: 0.625rem;
     width: 100%;
@@ -279,7 +259,7 @@ const T = h.div`
     }
   }
 
-  @media (max-width: ${g + "px"}) {
+  @media (max-width: ${x + "px"}) {
     gap: 1rem;
 
     & .wrapper__tags {
@@ -303,100 +283,194 @@ const T = h.div`
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCardsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, Y = c(
+`, E = u(B)`
+  &.skeleton__tags {
+    max-width: 50rem;
+  }
+
+  @media (max-width: ${x + "px"}) {
+    &.skeleton__tags {
+      overflow-x: hidden;
+    }
+  }
+`, K = ({ keyPrefix: t }) => /* @__PURE__ */ o(E, { className: "skeleton__tags", children: [
+  /* @__PURE__ */ o(
+    f,
+    {
+      alignItems: "center",
+      gap: "0.5rem",
+      children: [
+        /* @__PURE__ */ e(w, { width: "2.75rem", height: "2.75rem" }),
+        /* @__PURE__ */ e(p, { height: "1.5rem", width: "8rem" })
+      ]
+    },
+    `${t}-1`
+  ),
+  /* @__PURE__ */ o(
+    f,
+    {
+      alignItems: "center",
+      gap: "0.5rem",
+      noGradient: !0,
+      children: [
+        /* @__PURE__ */ e(w, { width: "2.75rem", height: "2.75rem" }),
+        /* @__PURE__ */ e(p, { height: "1.5rem", width: "8rem" })
+      ]
+    },
+    `${t}-2`
+  ),
+  /* @__PURE__ */ o(
+    f,
+    {
+      alignItems: "center",
+      gap: "0.5rem",
+      noGradient: !0,
+      children: [
+        /* @__PURE__ */ e(w, { width: "2.75rem", height: "2.75rem" }),
+        /* @__PURE__ */ e(p, { height: "1.5rem", width: "8rem" })
+      ]
+    },
+    `${t}-3`
+  ),
+  /* @__PURE__ */ o(
+    f,
+    {
+      alignItems: "center",
+      gap: "0.5rem",
+      noGradient: !0,
+      children: [
+        /* @__PURE__ */ e(w, { width: "2.75rem", height: "2.75rem" }),
+        /* @__PURE__ */ e(p, { height: "1.5rem", width: "8rem" })
+      ]
+    },
+    `${t}-4`
+  ),
+  /* @__PURE__ */ o(
+    f,
+    {
+      alignItems: "center",
+      gap: "0.5rem",
+      noGradient: !0,
+      children: [
+        /* @__PURE__ */ e(w, { width: "2.75rem", height: "2.75rem" }),
+        /* @__PURE__ */ e(p, { height: "1.5rem", width: "8rem" })
+      ]
+    },
+    `${t}-5`
+  )
+] }), Q = ({
+  keyPrefix: t,
+  isLoading: l = !1,
+  fallbackComponent: i = /* @__PURE__ */ e(C, {}),
+  children: n
+}) => /* @__PURE__ */ e(z, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ e(K, { keyPrefix: t }) : n }), U = ({ keyPrefix: t }) => /* @__PURE__ */ o(E, { className: "skeleton__cards", children: [
+  /* @__PURE__ */ e(p, { height: "13.75rem" }, `${t}-1`),
+  /* @__PURE__ */ e(p, { height: "13.75rem" }, `${t}-2`),
+  /* @__PURE__ */ e(p, { height: "13.75rem" }, `${t}-3`)
+] }), V = ({
+  keyPrefix: t,
+  isLoading: l = !1,
+  fallbackComponent: i = /* @__PURE__ */ e(C, {}),
+  children: n
+}) => /* @__PURE__ */ e(z, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ e(U, { keyPrefix: t }) : n }), oe = N(
   ({
-    title: i,
-    subtitle: o,
-    tags: t = [],
-    items: a = [],
-    limitTags: s = 5,
-    limitTagsForMobile: u = 5,
-    limit: x = 3,
-    limitForMobile: v = 2,
-    selectedTag: I,
-    onSelectTag: y = () => {
+    title: t,
+    subtitle: l,
+    tags: i = [],
+    items: n = [],
+    limitTags: c = 5,
+    limitTagsForMobile: v = 5,
+    limit: y = 3,
+    limitForMobile: b = 2,
+    selectedTag: F,
+    onSelectTag: $ = () => {
     },
-    onSelectCard: b = () => {
+    onSelectCard: k = () => {
     },
-    className: p
-  }, C) => {
-    var N, z;
-    return L(() => {
-      if (!S(p))
-        return;
-      const e = () => {
-        const d = document.querySelector(`.${p} .wrapper__cards`), m = d.querySelectorAll(".wrapper__card");
-        m.forEach((w) => {
-          const M = w.getBoundingClientRect().height, F = Math.ceil((M + 10) / 20);
-          w.style.gridRowEnd = `span ${F}`;
-        });
-        const k = m == null ? void 0 : m[m.length - 1];
-        if (k) {
-          const w = k.offsetTop + k.offsetHeight;
-          d.style.height = `${w}px`;
-        }
-      }, f = document.querySelector(`.${p} .wrapper__cards`).querySelectorAll(".wrapper__image");
-      let _ = 0;
-      return f.length === 0 ? e() : (f.forEach((d) => {
-        d.complete ? _++ : d.addEventListener("load", () => {
-          _++, _ === f.length && e();
-        });
-      }), _ === f.length && e()), window.addEventListener("resize", e), () => {
-        window.removeEventListener("resize", e);
-      };
-    }, [p, a]), /* @__PURE__ */ l(
-      P,
-      {
-        ref: C,
-        limitTags: s,
-        limitTagsForMobile: u,
-        limitCards: x,
-        limitCardsForMobile: v,
-        className: p,
-        numberOfTags: t == null ? void 0 : t.length,
-        children: [
-          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
-            i && /* @__PURE__ */ r("div", { className: "wrapper__title", children: i }),
-            o && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: o })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "wrapper__tags__external", children: /* @__PURE__ */ r("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ r(
-            D,
-            {
-              icon: e == null ? void 0 : e.icon,
-              text: e == null ? void 0 : e.title,
-              isActive: (e == null ? void 0 : e.code) === I,
-              onSelectCard: () => y == null ? void 0 : y(e)
-            },
-            `field-of-interests-masonry-tag__${n + 1}`
-          )) : (N = Array.from("12345")) == null ? void 0 : N.map((e, n) => /* @__PURE__ */ r(
-            B,
-            {},
-            `field-of-interests-masonry-tag-skeleton__${n + 1}`
-          )) }) }),
-          /* @__PURE__ */ r("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ r(
-            G,
-            {
-              image: e == null ? void 0 : e.image,
-              imageComponent: e == null ? void 0 : e.imageComponent,
-              title: e == null ? void 0 : e.title,
-              description: e == null ? void 0 : e.description,
-              onSelectCard: () => b == null ? void 0 : b(e),
-              className: "wrapper__card"
-            },
-            `field-of-interests-with-tags-card__${n + 1}`
-          )) : (z = Array.from("12345")) == null ? void 0 : z.map((e, n) => /* @__PURE__ */ r(
-            H,
-            {},
-            `field-of-interests-with-tags-card-skeleton__${n + 1}`
-          )) })
-        ]
+    className: h,
+    isLoadingTags: L = !1,
+    isLoadingCards: S = !1
+  }, O) => (W(() => {
+    if (!q(h))
+      return;
+    const r = () => {
+      const m = document == null ? void 0 : document.querySelector(`.${h} .wrapper__cards`), s = m == null ? void 0 : m.querySelectorAll(".wrapper__card");
+      s == null || s.forEach((g) => {
+        const G = g.getBoundingClientRect().height, R = Math.ceil((G + 10) / 20);
+        g.style.gridRowEnd = `span ${R}`;
+      });
+      const I = s == null ? void 0 : s[(s == null ? void 0 : s.length) - 1];
+      if (I) {
+        const g = I.offsetTop + I.offsetHeight;
+        m.style.height = `${g}px`;
       }
-    );
-  }
+    }, d = document == null ? void 0 : document.querySelector(`.${h} .wrapper__cards`), a = d == null ? void 0 : d.querySelectorAll(".wrapper__image");
+    let _ = 0;
+    return (a == null ? void 0 : a.length) === 0 ? r() : (a == null || a.forEach((m) => {
+      m.complete ? _++ : m.addEventListener("load", () => {
+        _++, _ === (a == null ? void 0 : a.length) && r();
+      });
+    }), _ === (a == null ? void 0 : a.length) && r()), window.addEventListener("resize", r), () => {
+      window.removeEventListener("resize", r);
+    };
+  }, [h, n, S]), /* @__PURE__ */ o(
+    J,
+    {
+      ref: O,
+      limitTags: c,
+      limitTagsForMobile: v,
+      limitCards: y,
+      limitCardsForMobile: b,
+      className: h,
+      numberOfTags: i == null ? void 0 : i.length,
+      children: [
+        /* @__PURE__ */ o("div", { className: "wrapper__heading", children: [
+          t && /* @__PURE__ */ e("div", { className: "wrapper__title", children: t }),
+          l && /* @__PURE__ */ e("div", { className: "wrapper__subtitle", children: l })
+        ] }),
+        /* @__PURE__ */ e(
+          Q,
+          {
+            isLoading: L,
+            keyPrefix: "field-of-interests-masonry-tag",
+            children: /* @__PURE__ */ e("div", { className: "wrapper__tags__external", children: /* @__PURE__ */ e("div", { className: "wrapper__tags", children: i == null ? void 0 : i.map((r, d) => /* @__PURE__ */ e(
+              X,
+              {
+                icon: r == null ? void 0 : r.icon,
+                text: r == null ? void 0 : r.title,
+                isActive: (r == null ? void 0 : r.code) === F,
+                onSelectCard: () => $ == null ? void 0 : $(r)
+              },
+              `field-of-interests-masonry-tag__${d + 1}`
+            )) }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          V,
+          {
+            isLoading: S,
+            keyPrefix: "field-of-interests-masonry-card",
+            children: /* @__PURE__ */ e("div", { className: "wrapper__cards", children: n == null ? void 0 : n.map((r, d) => /* @__PURE__ */ e(
+              Z,
+              {
+                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: () => k == null ? void 0 : k(r),
+                className: "wrapper__card"
+              },
+              `field-of-interests-with-tags-card__${d + 1}`
+            )) })
+          }
+        )
+      ]
+    }
+  ))
 );
 export {
-  Y as default
+  oe as default
 };

package/dist/FieldOfInterestsWithAvatarsCardsSection.cjs

@@ -1,9 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),f=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./consts-goSZX3xP.cjs"),y=require("./utils-Dl9xPH4c.cjs"),$=require("./index-DicTpiG0.cjs"),c=h.styled.div`
-  width: 100%;
-  height: 11.625rem;
-  border-radius: 0.75rem;
-  background: ${y.linearGradientAnimation("-90deg")};
-`,v=h.styled.div`
+"use strict";const i=require("react/jsx-runtime"),g=require("react"),v=require("./utils-Dl9xPH4c.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),$=require("./consts-goSZX3xP.cjs"),y=require("./index-CfT9e5O9.cjs"),l=require("./style-BAcV7F53.cjs"),F=j.styled.div`
   width: 100%;
   height: auto;
   border-radius: 999px;
@@ -24,22 +19,12 @@
     border: var(--yellow-600, #d97706);
   }
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__image {
       height: auto;
     }
   }
-`,C=h.styled.div`
-  width: 9.875rem;
-  height: 9.875rem;
-  border-radius: 999px;
-  background: ${y.linearGradientAnimation("-90deg")};
-
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-`,F=f.forwardRef(({},i)=>t.jsx(C,{})),I=f.forwardRef(({isActive:i,image:o,imageComponent:r,onSelectCard:l=()=>{}},m)=>t.jsx(v,{ref:m,className:i?"active":"",onClick:l,children:y.isDefined(r)?r:t.jsx("img",{src:o,className:"wrapper__image"})})),A=f.forwardRef(({uuid:i,title:o,price:r,currency:l,isNegotiable:m,isFree:x,image:u,sellerUuid:s,onSelectCard:p=()=>{},imageComponent:a,negotiableText:d="Negotiable",freeText:g="Free"},_)=>t.jsx($.SimpleProductCard,{ref:_,uuid:i,title:o,price:r,currency:l,isNegotiable:m,isFree:x,image:u,imageComponent:a,sellerUuid:s,onSelectCard:p,negotiableText:d,freeText:g})),N=f.forwardRef(({},i)=>t.jsx(c,{})),k=h.styled.div`
+`,b=g.forwardRef(({isActive:t,image:r,imageComponent:s,onSelectCard:n=()=>{}},o)=>i.jsx(F,{ref:o,className:t?"active":"",onClick:n,children:v.isDefined(s)?s:i.jsx("img",{src:r,className:"wrapper__image"})})),k=g.forwardRef(({uuid:t,title:r,price:s,currency:n,isNegotiable:o,isFree:p,image:d,sellerUuid:m,onSelectCard:a=()=>{},imageComponent:h,negotiableText:x="Negotiable",freeText:_="Free"},u)=>i.jsx(y.SimpleProductCard,{ref:u,uuid:t,title:r,price:s,currency:n,isNegotiable:o,isFree:p,image:d,imageComponent:h,sellerUuid:m,onSelectCard:a,negotiableText:x,freeText:_})),I=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -73,7 +58,7 @@
 
   & .wrapper__avatars {
     display: grid;
-    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatars}, minmax(0, 1fr))`};
+    grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitAvatars}, minmax(0, 1fr))`};
     gap: 2rem;
     justify-items: center;
     align-items: center;
@@ -81,22 +66,46 @@
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
+    grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
     gap: 1.25rem;
     justify-items: center;
     align-items: center;
     width: 100%;
   }
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__avatars {
-      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatarsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitAvatarsForMobile}, minmax(0, 1fr))`};
       gap: auto;
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
     }
   }
-`,W=f.forwardRef(({title:i,subtitle:o,avatars:r=[],limitAvatars:l=4,limit:m=6,limitAvatarsForMobile:x=4,limitForMobile:u=2,items:s=[],onSelectAvatar:p=()=>{},onSelectCard:a=()=>{}},d)=>{var j,b;const g=e=>{p==null||p(e)},_=e=>{a==null||a(e)};return t.jsxs(k,{ref:d,limitAvatars:l,limitAvatarsForMobile:x,limitCards:m,limitCardsForMobile:u,children:[t.jsxs("div",{className:"wrapper__heading",children:[i&&t.jsx("div",{className:"wrapper__title",children:i}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__avatars",children:r&&(r==null?void 0:r.length)>0?r==null?void 0:r.map((e,n)=>t.jsx(I,{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__${n+1}`)):(j=Array.from("1234"))==null?void 0:j.map((e,n)=>t.jsx(F,{},`field-of-interests-with-avatars-card-avatar-skeleton__${n+1}`))}),t.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,n)=>t.jsx(A,{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:()=>_==null?void 0:_(e)},`field-of-interests-with-avatars-card__${n+1}`)):(b=Array.from("123456"))==null?void 0:b.map((e,n)=>t.jsx(N,{},`field-of-interests-with-avatars-card-skeleton__${n+1}`))})]})});module.exports=W;
+`,C=j.styled(l.SkeletonRowWrapper)`
+  &.skeleton__tags {
+    max-width: 50rem;
+  }
+
+  @media (max-width: ${$.MOBILE_SIZE_PX+"px"}) {
+    &.skeleton__tags {
+      overflow-x: hidden;
+
+      & > div {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &.skeleton__cards {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+
+      & > div {
+        height: 7rem;
+      }
+    }
+  }
+`,S=({keyPrefix:t})=>i.jsxs(C,{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`)]}),N=({keyPrefix:t,isLoading:r=!1,fallbackComponent:s=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:s,children:r===!0?i.jsx(S,{keyPrefix:t}):n}),O=({keyPrefix:t})=>i.jsxs(C,{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`)]}),W=({keyPrefix:t,isLoading:r=!1,fallbackComponent:s=i.jsx(i.Fragment,{}),children:n})=>i.jsx(g.Suspense,{fallbackComponent:s,children:r===!0?i.jsx(O,{keyPrefix:t}):n}),L=g.forwardRef(({title:t,subtitle:r,avatars:s=[],limitAvatars:n=4,limit:o=6,limitAvatarsForMobile:p=4,limitForMobile:d=2,items:m=[],onSelectAvatar:a=()=>{},onSelectCard:h=()=>{},isLoadingTags:x=!1,isLoadingCards:_=!1},u)=>{const f=e=>{a==null||a(e)},w=e=>{h==null||h(e)};return i.jsxs(I,{ref:u,limitAvatars:n,limitAvatarsForMobile:p,limitCards:o,limitCardsForMobile:d,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(N,{isLoading:x,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:()=>f==null?void 0:f(e)},`field-of-interests-with-avatars-card-avatar__${c+1}`))})}),i.jsx(W,{isLoading:_,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:()=>w==null?void 0:w(e)},`field-of-interests-with-avatars-card__${c+1}`))})})]})});module.exports=L;