@lanaco/lnc-react-ui 4.0.206 → 4.0.208

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 M, Suspense as G, useLayoutEffect as R } from "react";
-import { m as z, l as W, k as q } from "./utils-DtEfC-TX.js";
+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 b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as $ } from "./consts-BuFChS64.js";
+import { s as $ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+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 f, d as _, a as g } from "./style-BwQ4djFC.js";
-const B = b.a`
+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;
@@ -47,7 +47,7 @@ const B = b.a`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${z(2)}
+      ${N(2)}
     }
 
     & .wrapper__description {
@@ -57,11 +57,11 @@ const B = b.a`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${z(2)}
+      ${N(2)}
     }
   }
 
-  @media (max-width: ${$ + "px"}) {
+  @media ${u("S")} {
     & .wrapper__content {
       & .wrapper__title {
         font-size: 0.875rem;
@@ -73,7 +73,7 @@ const B = b.a`
       }
     }
   }
-`, D = b.div`
+`, H = $.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -114,7 +114,7 @@ const B = b.a`
     font-weight: 400;
     line-height: 1.5rem;
     max-width: 8rem;
-    ${z(2)}
+    ${N(2)}
   }
 
   &.active {
@@ -124,7 +124,7 @@ const B = b.a`
     }
   }
 
-  @media (max-width: ${$ + "px"}) {
+  @media ${u("S")} {
     max-width: unset;
     min-width: unset;
     flex-direction: row;
@@ -164,10 +164,10 @@ const B = b.a`
       max-width: unset;
     }
   }
-`, H = M(
+`, B = z(
   ({ text: t, isActive: l = !1, icon: i, onSelectCard: a = () => {
   } }, d) => /* @__PURE__ */ o(
-    D,
+    H,
     {
       ref: d,
       className: l ? "active" : "",
@@ -178,7 +178,7 @@ const B = b.a`
       ]
     }
   )
-), X = M(
+), J = z(
   ({
     image: t,
     imageComponent: l,
@@ -187,19 +187,19 @@ const B = b.a`
     className: d,
     onSelectCard: k = () => {
     },
-    link: u,
-    LinkComponent: x
+    link: x,
+    LinkComponent: v
   }, I) => {
-    const h = x || "a", { theme: c } = j();
+    const c = v || "a", { theme: h } = j();
     return /* @__PURE__ */ o(
-      B,
+      D,
       {
         ref: I,
-        theme: c,
+        theme: h,
         className: d,
         onClick: k,
-        as: h,
-        ...x ? { to: `/${u}` } : { href: `/${u}` },
+        as: c,
+        ...v ? { to: `/${x}` } : { href: `/${x}` },
         children: [
           W(l) ? l : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
           /* @__PURE__ */ o("div", { className: "wrapper__content", children: [
@@ -210,7 +210,7 @@ const B = b.a`
       }
     );
   }
-), Z = b.div`
+), K = $.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -266,26 +266,32 @@ const B = b.a`
     }
   }
 
-  @media (max-width: ${$ + "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))`};
     }
   }
-`, J = b(A)`
+`, Q = $(A)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media (max-width: ${$ + "px"}) {
+  @media ${u("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
     }
   }
-`, K = ({ keyPrefix: t }) => /* @__PURE__ */ o(J, { className: "skeleton__tags", children: [
+`, U = ({ keyPrefix: t }) => /* @__PURE__ */ o(Q, { className: "skeleton__tags", children: [
   /* @__PURE__ */ o(
-    f,
+    w,
     {
       alignItems: "center",
       gap: "0.5rem",
@@ -297,7 +303,7 @@ const B = b.a`
     `${t}-1`
   ),
   /* @__PURE__ */ o(
-    f,
+    w,
     {
       alignItems: "center",
       gap: "0.5rem",
@@ -310,7 +316,7 @@ const B = b.a`
     `${t}-2`
   ),
   /* @__PURE__ */ o(
-    f,
+    w,
     {
       alignItems: "center",
       gap: "0.5rem",
@@ -323,7 +329,7 @@ const B = b.a`
     `${t}-3`
   ),
   /* @__PURE__ */ o(
-    f,
+    w,
     {
       alignItems: "center",
       gap: "0.5rem",
@@ -336,7 +342,7 @@ const B = b.a`
     `${t}-4`
   ),
   /* @__PURE__ */ o(
-    f,
+    w,
     {
       alignItems: "center",
       gap: "0.5rem",
@@ -348,12 +354,12 @@ const B = b.a`
     },
     `${t}-5`
   )
-] }), P = ({
+] }), V = ({
   keyPrefix: t,
   isLoading: l = !1,
   fallbackComponent: i = /* @__PURE__ */ r(O, {}),
   children: a
-}) => /* @__PURE__ */ r(G, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ r(K, { keyPrefix: t }) : a }), ne = M(
+}) => /* @__PURE__ */ r(G, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ r(U, { keyPrefix: t }) : a }), ne = z(
   ({
     title: t,
     subtitle: l,
@@ -361,49 +367,49 @@ const B = b.a`
     items: a = [],
     limitTags: d = 5,
     limitTagsForMobile: k = 5,
-    limit: u = 3,
-    limitForMobile: x = 2,
+    limit: x = 3,
+    limitForMobile: v = 2,
     selectedTag: I,
-    onSelectTag: h = () => {
+    onSelectTag: c = () => {
     },
-    onSelectCard: c = () => {
+    onSelectCard: h = () => {
     },
-    className: w,
+    className: f,
     isLoadingTags: C = !1,
     // isLoadingCards = false,
-    LinkComponent: E
-  }, S) => (R(() => {
-    if (!q(w))
+    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((y) => {
-        const F = y.getBoundingClientRect().height, L = Math.ceil((F + 10) / 20);
-        y.style.gridRowEnd = `span ${L}`;
+      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 N = s == null ? void 0 : s[(s == null ? void 0 : s.length) - 1];
-      if (N) {
-        const y = N.offsetTop + N.offsetHeight;
-        m.style.height = `${y}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`;
       }
-    }, p = document == null ? void 0 : document.querySelector(`.${w} .wrapper__cards`), n = p == null ? void 0 : p.querySelectorAll(".wrapper__image");
-    let v = 0;
+    }, p = document == null ? void 0 : document.querySelector(`.${f} .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 ? v++ : m.addEventListener("load", () => {
-        v++, v === (n == null ? void 0 : n.length) && e();
+      m.complete ? y++ : m.addEventListener("load", () => {
+        y++, y === (n == null ? void 0 : n.length) && e();
       });
-    }), v === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
+    }), y === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [w, a]), /* @__PURE__ */ o(
-    Z,
+  }, [f, a]), /* @__PURE__ */ o(
+    K,
     {
-      ref: S,
+      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: [
@@ -411,33 +417,33 @@ const B = b.a`
           l && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: l })
         ] }),
         /* @__PURE__ */ r(
-          P,
+          V,
           {
             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, p) => /* @__PURE__ */ r(
-              H,
+              B,
               {
                 icon: e == null ? void 0 : e.icon,
                 text: e == null ? void 0 : e.title,
                 isActive: (e == null ? void 0 : e.code) === I,
-                onSelectCard: () => h == null ? void 0 : h(e)
+                onSelectCard: () => c == null ? void 0 : c(e)
               },
               `field-of-interests-masonry-tag__${p + 1}`
             )) }) })
           }
         ),
         /* @__PURE__ */ r("div", { className: "wrapper__cards", children: a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
-          X,
+          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: () => c == null ? void 0 : c(e),
+            onSelectCard: () => h == null ? void 0 : h(e),
             className: "wrapper__card",
             link: e == null ? void 0 : e.link,
-            LinkComponent: E
+            LinkComponent: M
           },
           `field-of-interests-with-tags-card__${p + 1}`
         )) })

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;

package/dist/FieldOfInterestsWithAvatarsCardsSection.js

@@ -1,11 +1,11 @@
 import { jsx as i, jsxs as f, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as C, Suspense as N } from "react";
-import { l as I } from "./utils-DtEfC-TX.js";
-import { s as F } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as b } from "./consts-BuFChS64.js";
-import { S as O } from "./index-u_XFwsvc.js";
-import { S as j, d as p, a as g } from "./style-BwQ4djFC.js";
-const k = F.div`
+import { forwardRef as F, Suspense as N } from "react";
+import { m as S } from "./utils-B2fsQ6PS.js";
+import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as _ } from "./breakpoints-ff0SIcV3.js";
+import { S as j } from "./index-9KyU46J0.js";
+import { S as k, d as g, a as h } from "./style-BwQ4djFC.js";
+const I = b.div`
   width: 100%;
   height: auto;
   border-radius: 999px;
@@ -26,60 +26,60 @@ const k = F.div`
     border: var(--yellow-600, #d97706);
   }
 
-  @media (max-width: ${b + "px"}) {
+  @media ${_("S")} {
     & .wrapper__image {
       height: auto;
     }
   }
-`, S = C(
+`, O = F(
   ({ isActive: t, image: s, imageComponent: r, onSelectCard: n = () => {
   } }, l) => /* @__PURE__ */ i(
-    k,
+    I,
     {
       ref: l,
       className: t ? "active" : "",
       onClick: n,
-      children: I(r) ? r : /* @__PURE__ */ i("img", { src: s, className: "wrapper__image" })
+      children: S(r) ? r : /* @__PURE__ */ i("img", { src: s, className: "wrapper__image" })
     }
   )
-), A = C(
+), A = F(
   ({
     uuid: t,
     title: s,
     price: r,
     currency: n,
     isNegotiable: l,
-    isFree: _,
-    image: u,
+    isFree: u,
+    image: d,
     sellerUuid: m,
     onSelectCard: o = () => {
     },
     imageComponent: a,
-    negotiableText: d = "Negotiable",
-    freeText: w = "Free",
+    negotiableText: w = "Negotiable",
+    freeText: $ = "Free",
     nameSlug: x,
-    LinkComponent: $
-  }, h) => /* @__PURE__ */ i(
-    O,
+    LinkComponent: c
+  }, p) => /* @__PURE__ */ i(
+    j,
     {
-      ref: h,
+      ref: p,
       uuid: t,
       title: s,
       price: r,
       currency: n,
       isNegotiable: l,
-      isFree: _,
-      image: u,
+      isFree: u,
+      image: d,
       imageComponent: a,
       sellerUuid: m,
       onSelectCard: o,
-      negotiableText: d,
-      freeText: w,
+      negotiableText: w,
+      freeText: $,
       nameSlug: x,
-      LinkComponent: $
+      LinkComponent: c
     }
   )
-), T = F.div`
+), T = b.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -128,7 +128,13 @@ const k = F.div`
     width: 100%;
   }
 
-  @media (max-width: ${b + "px"}) {
+  @media ${_("M")} {
+    & .wrapper__cards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media ${_("S")} {
     & .wrapper__avatars {
       grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitAvatarsForMobile}, minmax(0, 1fr))`};
       gap: auto;
@@ -139,12 +145,12 @@ const k = F.div`
       gap: 1rem;
     }
   }
-`, W = F(j)`
+`, W = b(k)`
   &.skeleton__tags {
     max-width: 50rem;
   }
 
-  @media (max-width: ${b + "px"}) {
+  @media ${_("S")} {
     &.skeleton__tags {
       overflow-x: hidden;
 
@@ -165,7 +171,7 @@ const k = F.div`
   }
 `, M = ({ keyPrefix: t }) => /* @__PURE__ */ f(W, { className: "skeleton__tags", justifyContent: "center", children: [
   /* @__PURE__ */ i(
-    p,
+    g,
     {
       width: "9.875rem",
       height: "9.875rem"
@@ -173,7 +179,7 @@ const k = F.div`
     `${t}-1`
   ),
   /* @__PURE__ */ i(
-    p,
+    g,
     {
       width: "9.875rem",
       height: "9.875rem"
@@ -181,7 +187,7 @@ const k = F.div`
     `${t}-2`
   ),
   /* @__PURE__ */ i(
-    p,
+    g,
     {
       width: "9.875rem",
       height: "9.875rem"
@@ -189,7 +195,7 @@ const k = F.div`
     `${t}-3`
   ),
   /* @__PURE__ */ i(
-    p,
+    g,
     {
       width: "9.875rem",
       height: "9.875rem"
@@ -202,34 +208,34 @@ const k = F.div`
   fallbackComponent: r = /* @__PURE__ */ i(y, {}),
   children: n
 }) => /* @__PURE__ */ i(N, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ i(M, { keyPrefix: t }) : n }), z = ({ keyPrefix: t }) => /* @__PURE__ */ f(W, { className: "skeleton__cards", justifyContent: "center", children: [
-  /* @__PURE__ */ i(g, { height: "13.75rem" }, `${t}-1`),
-  /* @__PURE__ */ i(g, { height: "13.75rem" }, `${t}-2`),
-  /* @__PURE__ */ i(g, { height: "13.75rem" }, `${t}-3`),
-  /* @__PURE__ */ i(g, { height: "13.75rem" }, `${t}-3`)
-] }), E = ({
+  /* @__PURE__ */ i(h, { height: "13.75rem" }, `${t}-1`),
+  /* @__PURE__ */ i(h, { height: "13.75rem" }, `${t}-2`),
+  /* @__PURE__ */ i(h, { height: "13.75rem" }, `${t}-3`),
+  /* @__PURE__ */ i(h, { height: "13.75rem" }, `${t}-3`)
+] }), R = ({
   keyPrefix: t,
   isLoading: s = !1,
   fallbackComponent: r = /* @__PURE__ */ i(y, {}),
   children: n
-}) => /* @__PURE__ */ i(N, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ i(z, { keyPrefix: t }) : n }), G = C(
+}) => /* @__PURE__ */ i(N, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ i(z, { keyPrefix: t }) : n }), J = F(
   ({
     title: t,
     subtitle: s,
     avatars: r = [],
     limitAvatars: n = 4,
     limit: l = 6,
-    limitAvatarsForMobile: _ = 4,
-    limitForMobile: u = 2,
+    limitAvatarsForMobile: u = 4,
+    limitForMobile: d = 2,
     items: m = [],
     onSelectAvatar: o = () => {
     },
     onSelectCard: a = () => {
     },
-    isLoadingTags: d = !1,
-    isLoadingCards: w = !1,
+    isLoadingTags: w = !1,
+    isLoadingCards: $ = !1,
     LinkComponent: x
-  }, $) => {
-    const h = (e) => {
+  }, c) => {
+    const p = (e) => {
       o == null || o(e);
     }, v = (e) => {
       a == null || a(e);
@@ -237,11 +243,11 @@ const k = F.div`
     return /* @__PURE__ */ f(
       T,
       {
-        ref: $,
+        ref: c,
         limitAvatars: n,
-        limitAvatarsForMobile: _,
+        limitAvatarsForMobile: u,
         limitCards: l,
-        limitCardsForMobile: u,
+        limitCardsForMobile: d,
         children: [
           /* @__PURE__ */ f("div", { className: "wrapper__heading", children: [
             t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
@@ -250,25 +256,25 @@ const k = F.div`
           /* @__PURE__ */ i(
             L,
             {
-              isLoading: d,
+              isLoading: w,
               keyPrefix: "field-of-interests-with-avatars-tag",
-              children: /* @__PURE__ */ i("div", { className: "wrapper__avatars", children: r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ i(
-                S,
+              children: /* @__PURE__ */ i("div", { className: "wrapper__avatars", children: r == null ? void 0 : r.map((e, C) => /* @__PURE__ */ i(
+                O,
                 {
                   image: e == null ? void 0 : e.image,
                   imageComponent: e == null ? void 0 : e.imageComponent,
-                  onSelectCard: () => h == null ? void 0 : h(e)
+                  onSelectCard: () => p == null ? void 0 : p(e)
                 },
-                `field-of-interests-with-avatars-card-avatar__${c + 1}`
+                `field-of-interests-with-avatars-card-avatar__${C + 1}`
               )) })
             }
           ),
           /* @__PURE__ */ i(
-            E,
+            R,
             {
-              isLoading: w,
+              isLoading: $,
               keyPrefix: "field-of-interests-with-avatars-card",
-              children: /* @__PURE__ */ i("div", { className: "wrapper__cards", children: m == null ? void 0 : m.map((e, c) => /* @__PURE__ */ i(
+              children: /* @__PURE__ */ i("div", { className: "wrapper__cards", children: m == null ? void 0 : m.map((e, C) => /* @__PURE__ */ i(
                 A,
                 {
                   uuid: e == null ? void 0 : e.uuid,
@@ -286,7 +292,7 @@ const k = F.div`
                   nameSlug: e == null ? void 0 : e.nameSlug,
                   LinkComponent: x
                 },
-                `field-of-interests-with-avatars-card__${c + 1}`
+                `field-of-interests-with-avatars-card__${C + 1}`
               )) })
             }
           )
@@ -296,5 +302,5 @@ const k = F.div`
   }
 );
 export {
-  G as default
+  J as default
 };