@lanaco/lnc-react-ui 4.0.213 → 4.0.214

package/dist/BlogProductCardsSection.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),c=require("react"),j=require("./useDetectMobile-DYV6V1yw.cjs"),M=require("./index-of6WydGq.cjs"),N=require("./Button.cjs"),f=require("./style-AYc9hnFj.cjs"),y=c.memo(M.SimpleProductCard),P=c.forwardRef(({buttonText:t,buttonLink:u,items:r,onButtonAction:a=()=>{},onSelectCard:s=()=>{},isLoading:R=!1,limit:_=4,getImage:l=()=>{},isHighlight:n=!1,componentName:d,LinkComponent:m},p)=>{const g=j.useDetectMobile(),b=c.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,q)=>i.jsx(y,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(w,h)=>s==null?void 0:s(e==null?void 0:e.uuid,h),image:l(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:d,accessor:e==null?void 0:e.accessor},LinkComponent:m},q))},[r]);return i.jsxs(f.Wrapper,{ref:p,className:`blog-product-cards-section ${n?"highlight":""}`,children:[i.jsx("div",{className:"wrapper__grid",children:b}),i.jsx(N,{text:t,borderRadius:"curved",btnType:g?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>a(u)})]})});module.exports=P;
+"use strict";const i=require("react/jsx-runtime"),c=require("react"),j=require("./useDetectMobile-DYV6V1yw.cjs"),M=require("./index-Cav6G7wx.cjs"),N=require("./Button.cjs"),y=require("./style-AYc9hnFj.cjs"),P=c.memo(M.SimpleProductCard),R=c.forwardRef(({buttonText:o,buttonLink:t,items:r,onButtonAction:a=()=>{},onSelectCard:s=()=>{},getImage:l=()=>{},isHighlight:n=!1,componentName:d,LinkComponent:p},m)=>{const b=j.useDetectMobile(),g=c.useMemo(()=>{var u;return(u=r==null?void 0:r.slice(0,4))==null?void 0:u.map((e,q)=>i.jsx(P,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:(_,h)=>s==null?void 0:s(e==null?void 0:e.uuid,h),image:l(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,metadata:{name:d,accessor:e==null?void 0:e.accessor},LinkComponent:p},q))},[r]);return i.jsxs(y.Wrapper,{ref:m,className:`blog-product-cards-section ${n?"highlight":""}`,children:[i.jsx("div",{className:"wrapper__grid",children:g}),i.jsx(N,{text:o,borderRadius:"curved",btnType:b?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>a(t)})]})});module.exports=R;

package/dist/BlogProductCardsSection.js

@@ -1,20 +1,18 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
 import { memo as N, forwardRef as M, useMemo as P } from "react";
 import { u as _ } from "./useDetectMobile-CcVo3PNi.js";
-import { S as w } from "./index-9KyU46J0.js";
+import { S as w } from "./index-D9fI5BvI.js";
 import y from "./Button.js";
 import { W as U } from "./style-Bq3rMbnN.js";
-const j = N(w), L = M(
+const j = N(w), C = M(
   ({
     buttonText: a,
     buttonLink: c,
     items: r,
     onButtonAction: t = () => {
     },
-    onSelectCard: i = () => {
+    onSelectCard: o = () => {
     },
-    isLoading: v = !1,
-    limit: z = 4,
     getImage: u = () => {
     },
     isHighlight: l = !1,
@@ -23,7 +21,7 @@ const j = N(w), L = M(
   }, p) => {
     const n = _(), f = P(() => {
       var s;
-      return (s = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : s.map((e, g) => /* @__PURE__ */ o(
+      return (s = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : s.map((e, g) => /* @__PURE__ */ i(
         j,
         {
           title: e == null ? void 0 : e.name,
@@ -33,7 +31,7 @@ const j = N(w), L = M(
           currency: e == null ? void 0 : e.currency,
           sellerUuid: e == null ? void 0 : e.sellerUuid,
           uuid: e == null ? void 0 : e.uuid,
-          onSelectCard: (B, b) => i == null ? void 0 : i(e == null ? void 0 : e.uuid, b),
+          onSelectCard: (v, b) => o == null ? void 0 : o(e == null ? void 0 : e.uuid, b),
           image: u(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
           metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
           LinkComponent: m
@@ -47,8 +45,8 @@ const j = N(w), L = M(
         ref: p,
         className: `blog-product-cards-section ${l ? "highlight" : ""}`,
         children: [
-          /* @__PURE__ */ o("div", { className: "wrapper__grid", children: f }),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i("div", { className: "wrapper__grid", children: f }),
+          /* @__PURE__ */ i(
             y,
             {
               text: a,
@@ -65,5 +63,5 @@ const j = N(w), L = M(
   }
 );
 export {
-  L as default
+  C as default
 };

package/dist/FieldOfInterestsMasonrySection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),_=require("react"),g=require("./utils-CITgSxXe.cjs"),z=require("./Icon.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),L=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),R=j.styled.a`
+"use strict";const e=require("react/jsx-runtime"),_=require("react"),g=require("./utils-CITgSxXe.cjs"),z=require("./Icon.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),L=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),M=j.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -10,7 +10,7 @@
   align-self: stretch;
   border-radius: 0.75rem;
   border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
-  background: var(--Lanaco-Gray-white, #fff);
+  background: var(--white, #fff);
 
   &:hover {
     cursor: pointer;
@@ -65,13 +65,12 @@
       }
     }
   }
-`,M=j.styled.div`
+`,R=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   height: 100%;
-  max-width: 8rem;
   min-width: 8rem;
 
   &:hover {
@@ -105,8 +104,8 @@
     font-style: normal;
     font-weight: 400;
     line-height: 1.5rem;
-    max-width: 8rem;
-    ${g.truncateTextInRows(2)}
+    max-width: 16rem;
+    ${g.truncateText()}
   }
 
   &.active {
@@ -156,7 +155,7 @@
       max-width: unset;
     }
   }
-`,E=_.forwardRef(({text:t,isActive:s=!1,icon:i,onSelectCard:o=()=>{}},c)=>e.jsxs(M,{ref:c,className:s?"active":"",onClick:o,children:[e.jsx(z,{icon:i,className:"wrapper__icon"}),e.jsx("div",{className:"wrapper__text",children:t})]})),F=_.forwardRef(({image:t,imageComponent:s,title:i,description:o,className:c,onSelectCard:k=()=>{},link:x,LinkComponent:u},b)=>{const m=u||"a",{theme:h}=L.useTheme();return e.jsxs(R,{ref:b,theme:h,className:c,onClick:k,as:m,...u?{to:`/${x}`}:{href:`/${x}`},children:[g.isDefined(s)?s:e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__content",children:[i&&e.jsx("div",{className:"wrapper__title",children:i}),o&&e.jsx("div",{className:"wrapper__description",children:o})]})]})}),W=j.styled.div`
+`,E=_.forwardRef(({text:t,isActive:s=!1,icon:i,onSelectCard:o=()=>{}},c)=>e.jsxs(R,{ref:c,className:s?"active":"",onClick:o,children:[e.jsx(z,{icon:i,className:"wrapper__icon"}),e.jsx("div",{className:"wrapper__text",children:t})]})),F=_.forwardRef(({image:t,imageComponent:s,title:i,description:o,className:c,onSelectCard:k=()=>{},link:x,LinkComponent:u},b)=>{const m=u||"a",{theme:h}=L.useTheme();return e.jsxs(M,{ref:b,theme:h,className:c,onClick:k,as:m,...u?{to:`/${x}`}:{href:`/${x}`},children:[g.isDefined(s)?s:e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__content",children:[i&&e.jsx("div",{className:"wrapper__title",children:i}),o&&e.jsx("div",{className:"wrapper__description",children:o})]})]})}),W=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -196,7 +195,9 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 0.75rem;
+    align-items: center;
+    align-self: stretch;
+    gap: 2rem;
   }
 
   & .wrapper__cards {
@@ -213,6 +214,10 @@
   }
 
   @media ${f.down("M")} {
+    & .wrapper__tags {
+      gap: 0.75rem;
+    }
+
     & .wrapper__cards {
       grid-template-columns: repeat(2, minmax(12.5rem, 1fr));
     }
@@ -235,4 +240,4 @@
       overflow-x: hidden;
     }
   }
-`,O=({keyPrefix:t})=>e.jsxs(P,{className:"skeleton__tags",children:[e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-1`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-2`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-3`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-4`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-5`)]}),T=({keyPrefix:t,isLoading:s=!1,fallbackComponent:i=e.jsx(e.Fragment,{}),children:o})=>e.jsx(_.Suspense,{fallbackComponent:i,children:s===!0?e.jsx(O,{keyPrefix:t}):o}),G=_.forwardRef(({title:t,subtitle:s,tags:i=[],items:o=[],limitTags:c=5,limitTagsForMobile:k=5,limit:x=3,limitForMobile:u=2,selectedTag:b,onSelectTag:m=()=>{},onSelectCard:h=()=>{},className:w,isLoadingTags:S=!1,LinkComponent:C},I)=>(_.useLayoutEffect(()=>{if(!g.isDefinedNotEmptyString(w))return;const r=()=>{const p=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),l=p==null?void 0:p.querySelectorAll(".wrapper__card");l==null||l.forEach(v=>{const q=v.getBoundingClientRect().height,N=Math.ceil((q+10)/20);v.style.gridRowEnd=`span ${N}`});const $=l==null?void 0:l[(l==null?void 0:l.length)-1];if($){const v=$.offsetTop+$.offsetHeight;p.style.height=`${v}px`}},d=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),a=d==null?void 0:d.querySelectorAll(".wrapper__image");let y=0;return(a==null?void 0:a.length)===0?r():(a==null||a.forEach(p=>{p.complete?y++:p.addEventListener("load",()=>{y++,y===(a==null?void 0:a.length)&&r()})}),y===(a==null?void 0:a.length)&&r()),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[w,o]),e.jsxs(W,{ref:I,limitTags:c,limitTagsForMobile:k,limitCards:x,limitCardsForMobile:u,className:w,numberOfTags:i==null?void 0:i.length,children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),s&&e.jsx("div",{className:"wrapper__subtitle",children:s})]}),e.jsx(T,{isLoading:S,keyPrefix:"field-of-interests-masonry-tag",children:e.jsx("div",{className:"wrapper__tags__external",children:e.jsx("div",{className:"wrapper__tags",children:i==null?void 0:i.map((r,d)=>e.jsx(E,{icon:r==null?void 0:r.icon,text:r==null?void 0:r.title,isActive:(r==null?void 0:r.code)===b,onSelectCard:()=>m==null?void 0:m(r)},`field-of-interests-masonry-tag__${d+1}`))})})}),e.jsx("div",{className:"wrapper__cards",children:o==null?void 0:o.map((r,d)=>e.jsx(F,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,title:r==null?void 0:r.title,description:r==null?void 0:r.description,onSelectCard:()=>h==null?void 0:h(r),className:"wrapper__card",link:r==null?void 0:r.link,LinkComponent:C},`field-of-interests-with-tags-card__${d+1}`))})]})));module.exports=G;
+`,O=({keyPrefix:t})=>e.jsxs(P,{className:"skeleton__tags",children:[e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-1`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-2`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-3`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-4`),e.jsxs(n.SkeletonColumnWrapper,{alignItems:"center",gap:"0.5rem",noGradient:!0,children:[e.jsx(n.SkeletonCirclePlaceholder,{width:"2.75rem",height:"2.75rem"}),e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem",width:"8rem"})]},`${t}-5`)]}),T=({keyPrefix:t,isLoading:s=!1,fallbackComponent:i=e.jsx(e.Fragment,{}),children:o})=>e.jsx(_.Suspense,{fallbackComponent:i,children:s===!0?e.jsx(O,{keyPrefix:t}):o}),G=_.forwardRef(({title:t,subtitle:s,tags:i=[],items:o=[],limitTags:c=5,limitTagsForMobile:k=5,limit:x=3,limitForMobile:u=2,selectedTag:b,onSelectTag:m=()=>{},onSelectCard:h=()=>{},className:w,isLoadingTags:S=!1,LinkComponent:C},I)=>(_.useLayoutEffect(()=>{if(!g.isDefinedNotEmptyString(w))return;const r=()=>{const d=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),l=d==null?void 0:d.querySelectorAll(".wrapper__card");l==null||l.forEach(v=>{const q=v.getBoundingClientRect().height,N=Math.ceil((q+10)/20);v.style.gridRowEnd=`span ${N}`});const $=l==null?void 0:l[(l==null?void 0:l.length)-1];if($){const v=$.offsetTop+$.offsetHeight;d.style.height=`${v}px`}},p=document==null?void 0:document.querySelector(`.${w} .wrapper__cards`),a=p==null?void 0:p.querySelectorAll(".wrapper__image");let y=0;return(a==null?void 0:a.length)===0?r():(a==null||a.forEach(d=>{d.complete?y++:d.addEventListener("load",()=>{y++,y===(a==null?void 0:a.length)&&r()})}),y===(a==null?void 0:a.length)&&r()),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[w,o]),e.jsxs(W,{ref:I,limitTags:c,limitTagsForMobile:k,limitCards:x,limitCardsForMobile:u,className:w,numberOfTags:i==null?void 0:i.length,children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),s&&e.jsx("div",{className:"wrapper__subtitle",children:s})]}),e.jsx(T,{isLoading:S,keyPrefix:"field-of-interests-masonry-tag",children:e.jsx("div",{className:"wrapper__tags__external",children:e.jsx("div",{className:"wrapper__tags",children:i==null?void 0:i.map((r,p)=>e.jsx(E,{icon:r==null?void 0:r.icon,text:r==null?void 0:r.title,isActive:(r==null?void 0:r.code)===b,onSelectCard:()=>m==null?void 0:m(r)},`field-of-interests-masonry-tag__${p+1}`))})})}),e.jsx("div",{className:"wrapper__cards",children:o==null?void 0:o.map((r,p)=>e.jsx(F,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,title:r==null?void 0:r.title,description:r==null?void 0:r.description,onSelectCard:()=>h==null?void 0:h(r),className:"wrapper__card",link:r==null?void 0:r.link,LinkComponent:C},`field-of-interests-with-tags-card__${p+1}`))})]})));module.exports=G;

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 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 { 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 { 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`
+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`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -18,7 +18,7 @@ const D = $.a`
   align-self: stretch;
   border-radius: 0.75rem;
   border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
-  background: var(--Lanaco-Gray-white, #fff);
+  background: var(--white, #fff);
 
   &:hover {
     cursor: pointer;
@@ -47,7 +47,7 @@ const D = $.a`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${N(2)}
+      ${z(2)}
     }
 
     & .wrapper__description {
@@ -57,7 +57,7 @@ const D = $.a`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${N(2)}
+      ${z(2)}
     }
   }
 
@@ -73,13 +73,12 @@ const D = $.a`
       }
     }
   }
-`, H = $.div`
+`, B = $.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   height: 100%;
-  max-width: 8rem;
   min-width: 8rem;
 
   &:hover {
@@ -113,8 +112,8 @@ const D = $.a`
     font-style: normal;
     font-weight: 400;
     line-height: 1.5rem;
-    max-width: 8rem;
-    ${N(2)}
+    max-width: 16rem;
+    ${W()}
   }
 
   &.active {
@@ -164,21 +163,21 @@ const D = $.a`
       max-width: unset;
     }
   }
-`, B = z(
+`, J = N(
   ({ text: t, isActive: l = !1, icon: i, onSelectCard: a = () => {
   } }, d) => /* @__PURE__ */ o(
-    H,
+    B,
     {
       ref: d,
       className: l ? "active" : "",
       onClick: a,
       children: [
-        /* @__PURE__ */ r(T, { icon: i, className: "wrapper__icon" }),
+        /* @__PURE__ */ r(j, { icon: i, className: "wrapper__icon" }),
         /* @__PURE__ */ r("div", { className: "wrapper__text", children: t })
       ]
     }
   )
-), J = z(
+), K = N(
   ({
     image: t,
     imageComponent: l,
@@ -190,9 +189,9 @@ const D = $.a`
     link: x,
     LinkComponent: v
   }, I) => {
-    const c = v || "a", { theme: h } = j();
+    const c = v || "a", { theme: h } = A();
     return /* @__PURE__ */ o(
-      D,
+      H,
       {
         ref: I,
         theme: h,
@@ -201,7 +200,7 @@ const D = $.a`
         as: c,
         ...v ? { to: `/${x}` } : { href: `/${x}` },
         children: [
-          W(l) ? l : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
+          q(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 }),
             a && /* @__PURE__ */ r("div", { className: "wrapper__description", children: a })
@@ -210,7 +209,7 @@ const D = $.a`
       }
     );
   }
-), K = $.div`
+), Q = $.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -250,7 +249,9 @@ const D = $.a`
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 0.75rem;
+    align-items: center;
+    align-self: stretch;
+    gap: 2rem;
   }
 
   & .wrapper__cards {
@@ -267,6 +268,10 @@ const D = $.a`
   }
 
   @media ${u("M")} {
+    & .wrapper__tags {
+      gap: 0.75rem;
+    }
+
     & .wrapper__cards {
       grid-template-columns: repeat(2, minmax(12.5rem, 1fr));
     }
@@ -279,7 +284,7 @@ const D = $.a`
       grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, Q = $(A)`
+`, U = $(D)`
   &.skeleton__tags {
     max-width: 50rem;
   }
@@ -289,77 +294,77 @@ const D = $.a`
       overflow-x: hidden;
     }
   }
-`, U = ({ keyPrefix: t }) => /* @__PURE__ */ o(Q, { className: "skeleton__tags", children: [
+`, V = ({ keyPrefix: t }) => /* @__PURE__ */ o(U, { className: "skeleton__tags", children: [
   /* @__PURE__ */ o(
-    w,
+    f,
     {
       alignItems: "center",
       gap: "0.5rem",
       children: [
         /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(g, { height: "1.5rem", width: "8rem" })
+        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
       ]
     },
     `${t}-1`
   ),
   /* @__PURE__ */ o(
-    w,
+    f,
     {
       alignItems: "center",
       gap: "0.5rem",
       noGradient: !0,
       children: [
         /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(g, { height: "1.5rem", width: "8rem" })
+        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
       ]
     },
     `${t}-2`
   ),
   /* @__PURE__ */ o(
-    w,
+    f,
     {
       alignItems: "center",
       gap: "0.5rem",
       noGradient: !0,
       children: [
         /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(g, { height: "1.5rem", width: "8rem" })
+        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
       ]
     },
     `${t}-3`
   ),
   /* @__PURE__ */ o(
-    w,
+    f,
     {
       alignItems: "center",
       gap: "0.5rem",
       noGradient: !0,
       children: [
         /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(g, { height: "1.5rem", width: "8rem" })
+        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
       ]
     },
     `${t}-4`
   ),
   /* @__PURE__ */ o(
-    w,
+    f,
     {
       alignItems: "center",
       gap: "0.5rem",
       noGradient: !0,
       children: [
         /* @__PURE__ */ r(_, { width: "2.75rem", height: "2.75rem" }),
-        /* @__PURE__ */ r(g, { height: "1.5rem", width: "8rem" })
+        /* @__PURE__ */ r(w, { height: "1.5rem", width: "8rem" })
       ]
     },
     `${t}-5`
   )
-] }), V = ({
+] }), X = ({
   keyPrefix: t,
   isLoading: l = !1,
   fallbackComponent: i = /* @__PURE__ */ r(O, {}),
   children: a
-}) => /* @__PURE__ */ r(G, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ r(U, { keyPrefix: t }) : a }), ne = z(
+}) => /* @__PURE__ */ r(R, { fallbackComponent: i, children: l === !0 ? /* @__PURE__ */ r(V, { keyPrefix: t }) : a }), ae = N(
   ({
     title: t,
     subtitle: l,
@@ -374,15 +379,15 @@ const D = $.a`
     },
     onSelectCard: h = () => {
     },
-    className: f,
+    className: g,
     isLoadingTags: C = !1,
     // isLoadingCards = false,
     LinkComponent: M
-  }, E) => (R(() => {
-    if (!q(f))
+  }, E) => (T(() => {
+    if (!G(g))
       return;
     const e = () => {
-      const m = document == null ? void 0 : document.querySelector(`.${f} .wrapper__cards`), s = m == null ? void 0 : m.querySelectorAll(".wrapper__card");
+      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}`;
@@ -392,7 +397,7 @@ const D = $.a`
         const b = S.offsetTop + S.offsetHeight;
         m.style.height = `${b}px`;
       }
-    }, p = document == null ? void 0 : document.querySelector(`.${f} .wrapper__cards`), n = p == null ? void 0 : p.querySelectorAll(".wrapper__image");
+    }, 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", () => {
@@ -401,15 +406,15 @@ const D = $.a`
     }), y === (n == null ? void 0 : n.length) && e()), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [f, a]), /* @__PURE__ */ o(
-    K,
+  }, [g, a]), /* @__PURE__ */ o(
+    Q,
     {
       ref: E,
       limitTags: d,
       limitTagsForMobile: k,
       limitCards: x,
       limitCardsForMobile: v,
-      className: f,
+      className: g,
       numberOfTags: i == null ? void 0 : i.length,
       children: [
         /* @__PURE__ */ o("div", { className: "wrapper__heading", children: [
@@ -417,12 +422,12 @@ const D = $.a`
           l && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: l })
         ] }),
         /* @__PURE__ */ r(
-          V,
+          X,
           {
             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(
-              B,
+              J,
               {
                 icon: e == null ? void 0 : e.icon,
                 text: e == null ? void 0 : e.title,
@@ -434,7 +439,7 @@ const D = $.a`
           }
         ),
         /* @__PURE__ */ r("div", { className: "wrapper__cards", children: a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
-          J,
+          K,
           {
             image: e == null ? void 0 : e.image,
             imageComponent: e == null ? void 0 : e.imageComponent,
@@ -452,5 +457,5 @@ const D = $.a`
   ))
 );
 export {
-  ne as default
+  ae as default
 };

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-of6WydGq.cjs"),l=require("./style-BAcV7F53.cjs"),F=C.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-Cav6G7wx.cjs"),l=require("./style-BAcV7F53.cjs"),F=C.styled.div`
   width: 100%;
   height: auto;
   border-radius: 999px;

package/dist/FieldOfInterestsWithAvatarsCardsSection.js

@@ -3,7 +3,7 @@ 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 j } from "./index-D9fI5BvI.js";
 import { S as k, d as g, a as h } from "./style-BwQ4djFC.js";
 const I = b.div`
   width: 100%;

package/dist/SimpleProductsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),s=require("react"),q=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./breakpoints-CcVm-gVm.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),M=require("./index-of6WydGq.cjs"),F=require("./index-B9c6y2J5.cjs"),i=require("./style-BAcV7F53.cjs"),U=q.styled.div`
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),q=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./breakpoints-CcVm-gVm.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),M=require("./index-Cav6G7wx.cjs"),F=require("./index-B9c6y2J5.cjs"),i=require("./style-BAcV7F53.cjs"),U=q.styled.div`
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1.25rem;

package/dist/SimpleProductsSection.js

@@ -3,7 +3,7 @@ import { Suspense as y, memo as L, forwardRef as W, useMemo as j } from "react";
 import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { d as a } from "./breakpoints-ff0SIcV3.js";
 import { u as q } from "./useDetectMobile-CcVo3PNi.js";
-import { S as z } from "./index-9KyU46J0.js";
+import { S as z } from "./index-D9fI5BvI.js";
 import { T as B } from "./index-CoQ9APCD.js";
 import { b as R, S as $, a as A, c as i } from "./style-BwQ4djFC.js";
 const D = N.div`

package/dist/{index-of6WydGq.cjs → index-Cav6G7wx.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),p=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-CITgSxXe.cjs"),j=require("./index-DsINTjQk.cjs"),k=v.styled.a`
+"use strict";const i=require("react/jsx-runtime"),p=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./utils-CITgSxXe.cjs"),j=require("./index-DsINTjQk.cjs"),k=v.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
@@ -9,10 +9,10 @@
   overflow: hidden;
   cursor: pointer;
   background: linear-gradient(
-    178deg,
+    178.16deg,
     rgba(0, 0, 0, 0) 1.5%,
-    rgba(0, 0, 0, 0.16) 8.95%,
-    #000 98.39%
+    rgba(0, 0, 0, 0) 37.37%,
+    #000000 98.39%
   );
 
   & .text-block {
@@ -44,6 +44,7 @@
     object-fit: cover; /* making sure the image isn't distorted */
     border-radius: 0.75rem;
     mix-blend-mode: multiply;
+    border: 1px solid var(--gray-95008, #14161a14);
   }
 
   & .fallback-image {
@@ -81,4 +82,4 @@
       z-index: 1;
     }
   }
-`,C=p.forwardRef((u,$)=>{const{uuid:o,title:f,price:n=0,currency:a,isNegotiable:c,isFree:s,image:g,sellerUuid:N,nameSlug:i,onSelectCard:x=()=>{},imageComponent:d,negotiableText:b="Negotiable",freeText:h="Free",metadata:e,LinkComponent:l}=u,y=l||"a",m=p.useRef();return t.jsxs(k,{ref:m,className:"simple-product-card","data-accessor":e==null?void 0:e.accessor,name:e==null?void 0:e.name,onClick:w=>x(w,m),as:y,...l?{to:`/product/${r.isDefinedNotEmptyString(i)?`${i}-`:""}${o}`}:{href:`/product/${r.isDefinedNotEmptyString(i)?`${i}-`:""}${o}`},children:[r.isDefined(d)?d:t.jsx(j.ProductImageWrapper,{src:g}),t.jsxs("div",{className:"text-block",children:[t.jsx("div",{className:"title-simple-product-card",children:f}),t.jsxs("div",{className:"price-chip",children:[n>0&&a&&c!==!0&&s!==!0&&`${r.formatPrice(n)} ${r.GetCurrencySymbol(a)}`,c&&b,s&&h]})]})]})});exports.SimpleProductCard=C;
+`,C=p.forwardRef((u,$)=>{const{uuid:o,title:f,price:n=0,currency:a,isNegotiable:c,isFree:s,image:g,sellerUuid:N,nameSlug:t,onSelectCard:x=()=>{},imageComponent:d,negotiableText:b="Negotiable",freeText:h="Free",metadata:e,LinkComponent:l}=u,y=l||"a",m=p.useRef();return i.jsxs(k,{ref:m,className:"simple-product-card","data-accessor":e==null?void 0:e.accessor,name:e==null?void 0:e.name,onClick:w=>x(w,m),as:y,...l?{to:`/product/${r.isDefinedNotEmptyString(t)?`${t}-`:""}${o}`}:{href:`/product/${r.isDefinedNotEmptyString(t)?`${t}-`:""}${o}`},children:[r.isDefined(d)?d:i.jsx(j.ProductImageWrapper,{src:g}),i.jsxs("div",{className:"text-block",children:[i.jsx("div",{className:"title-simple-product-card",children:f}),i.jsxs("div",{className:"price-chip",children:[n>0&&a&&c!==!0&&s!==!0&&`${r.formatPrice(n)} ${r.GetCurrencySymbol(a)}`,c&&b,s&&h]})]})]})});exports.SimpleProductCard=C;

package/dist/{index-9KyU46J0.js → index-D9fI5BvI.js}

@@ -14,10 +14,10 @@ const P = $.a`
   overflow: hidden;
   cursor: pointer;
   background: linear-gradient(
-    178deg,
+    178.16deg,
     rgba(0, 0, 0, 0) 1.5%,
-    rgba(0, 0, 0, 0.16) 8.95%,
-    #000 98.39%
+    rgba(0, 0, 0, 0) 37.37%,
+    #000000 98.39%
   );
 
   & .text-block {
@@ -49,6 +49,7 @@ const P = $.a`
     object-fit: cover; /* making sure the image isn't distorted */
     border-radius: 0.75rem;
     mix-blend-mode: multiply;
+    border: 1px solid var(--gray-95008, #14161a14);
   }
 
   & .fallback-image {
@@ -97,14 +98,14 @@ const P = $.a`
     image: u,
     sellerUuid: T,
     nameSlug: r,
-    onSelectCard: h = () => {
+    onSelectCard: b = () => {
     },
-    imageComponent: s,
-    negotiableText: b = "Negotiable",
+    imageComponent: d,
+    negotiableText: h = "Negotiable",
     freeText: x = "Free",
     metadata: e,
-    LinkComponent: d
-  } = f, y = d || "a", l = k();
+    LinkComponent: s
+  } = f, y = s || "a", l = k();
   return /* @__PURE__ */ i(
     P,
     {
@@ -112,20 +113,20 @@ const P = $.a`
       className: "simple-product-card",
       "data-accessor": e == null ? void 0 : e.accessor,
       name: e == null ? void 0 : e.name,
-      onClick: (w) => h(w, l),
+      onClick: (w) => b(w, l),
       as: y,
-      ...d ? {
+      ...s ? {
         to: `/product/${p(r) ? `${r}-` : ""}${t}`
       } : {
         href: `/product/${p(r) ? `${r}-` : ""}${t}`
       },
       children: [
-        z(s) ? s : /* @__PURE__ */ m(j, { src: u }),
+        z(d) ? d : /* @__PURE__ */ m(j, { src: u }),
         /* @__PURE__ */ i("div", { className: "text-block", children: [
           /* @__PURE__ */ m("div", { className: "title-simple-product-card", children: g }),
           /* @__PURE__ */ i("div", { className: "price-chip", children: [
             o > 0 && a && n !== !0 && c !== !0 && `${N(o)} ${S(a)}`,
-            n && b,
+            n && h,
             c && x
           ] })
         ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.213",
+  "version": "4.0.214",
   "description": "React component library",
   "type": "module",
   "keywords": [