@lanaco/lnc-react-ui 4.0.82 → 4.0.83

package/dist/BlogsSectionWithFilters.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),c=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-CtNoHdBj.cjs"),C=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),N=require("./style-C571ywKV.cjs"),q=require("./Button.cjs"),$=require("./Link.cjs"),T=require("./index-CAqPGuiA.cjs"),B=require("./index-ryadTWiS.cjs"),M=h.styled.div`
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-CtNoHdBj.cjs"),N=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./utils-BXPz9bck.cjs"),q=require("./style-C571ywKV.cjs"),$=require("./Button.cjs"),T=require("./Link.cjs"),B=require("./index-CAqPGuiA.cjs"),M=require("./index-ryadTWiS.cjs"),R=h.styled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
@@ -73,4 +73,4 @@
     color: var(--gray-700, #4e555f);
     ${a.truncateTextInRows(3)}
   }
-`,R=c.forwardRef((i,o)=>{const{title:n,imageUrl:l,text:r,buttonText:m,onCardClick:s}=i;return e.jsxs(w,{ref:o,className:"blog-card",onClick:s,children:[e.jsxs(k,{children:[e.jsx("div",{className:"text-wr-title",children:n}),e.jsx("div",{className:"text-wr",children:r}),e.jsx($,{color:"gray",onClick:s,children:m})]}),e.jsx(T.ProductImageWrapper,{src:l})]})}),W=c.forwardRef(({},i)=>e.jsxs(w,{className:"blog-card",children:[e.jsxs(k,{children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"text-wr"}),e.jsx("div",{className:"skeleton-action"})]}),e.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(l,r)=>e.jsx(W,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:l,keyPrefix:r})=>e.jsx(c.Suspense,{fallbackComponent:o,children:n===!0?e.jsx(P,{isLoading:n,limit:l,keyPrefix:r}):i}),b=c.memo(R),z=c.forwardRef((i,o)=>{const{icon:n,title:l,items:r,buttonText:m,limit:s=3,options:d,onButtonAction:y=()=>{},buttonLink:p,onSelectOption:x=()=>{},isLoading:v=!1,onSelectCard:u=()=>{}}=i,j=C.useDetectMobile(),S=c.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g)):r==null?void 0:r.slice(0,s).map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g))}),[r,j,s,u]);return e.jsxs(N.TitleWithOptionsSectionWrapper,{ref:o,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:l})]}),a.isDefinedNotEmptyString(p)&&e.jsx(q,{type:"button",btnType:"tinted",color:"gray",onClick:()=>y(p),borderRadius:"curved",children:m})]}),(d==null?void 0:d.length)>0&&e.jsx(B.SelectBar,{items:d,onRemove:t=>{x(t)},onSelect:t=>{x(t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(M,{limit:s,children:e.jsx(_,{isLoading:v,limit:s,keyPrefix:"explore-landing",children:S})})]})});module.exports=z;
+`,W=d.forwardRef((i,o)=>{const{title:n,imageUrl:l,text:r,buttonText:m,onCardClick:s}=i;return e.jsxs(w,{ref:o,className:"blog-card",onClick:s,children:[e.jsxs(k,{children:[e.jsx("div",{className:"text-wr-title",children:n}),e.jsx("div",{className:"text-wr",children:r}),e.jsx(T,{color:"gray",onClick:s,children:m})]}),e.jsx(B.ProductImageWrapper,{src:l})]})}),I=d.forwardRef(({},i)=>e.jsxs(w,{className:"blog-card",children:[e.jsxs(k,{children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"text-wr"}),e.jsx("div",{className:"skeleton-action"})]}),e.jsx("div",{className:"skeleton-img"})]})),P=({limit:i=3,isLoading:o=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(l,r)=>e.jsx(I,{isLoading:o},`${n}-skeleton-product-card-${r}`))}),_=({children:i,fallbackComponent:o=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:l,keyPrefix:r})=>e.jsx(d.Suspense,{fallbackComponent:o,children:n===!0?e.jsx(P,{isLoading:n,limit:l,keyPrefix:r}):i}),b=d.memo(W),z=d.forwardRef((i,o)=>{const{icon:n,title:l,items:r,buttonText:m,limit:s=3,options:c,selectedOption:y=[],onButtonAction:v=()=>{},buttonLink:p,onSelectOption:x=()=>{},isLoading:S=!1,onSelectCard:u=()=>{}}=i,j=N.useDetectMobile(),C=d.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g)):r==null?void 0:r.slice(0,s).map((t,g)=>e.jsx(b,{title:t==null?void 0:t.title,imageUrl:(t==null?void 0:t.image)||null,text:t==null?void 0:t.text,buttonText:t==null?void 0:t.buttonText,onCardClick:()=>u(t)},g))}),[r,j,s,u]);return e.jsxs(q.TitleWithOptionsSectionWrapper,{ref:o,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:l})]}),a.isDefinedNotEmptyString(p)&&e.jsx($,{type:"button",btnType:"tinted",color:"gray",onClick:()=>v(p),borderRadius:"curved",children:m})]}),(c==null?void 0:c.length)>0&&e.jsx(M.SelectBar,{items:c,selectedIds:y,onRemove:t=>{x(t)},onSelect:t=>{x(t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(R,{limit:s,children:e.jsx(_,{isLoading:S,limit:s,keyPrefix:"explore-landing",children:C})})]})});module.exports=z;

package/dist/BlogsSectionWithFilters.js

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as t, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as u, Suspense as W, memo as x, useMemo as M } from "react";
+import { jsxs as n, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as u, Suspense as x, memo as M, useMemo as P } from "react";
 import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as S } from "./consts-C1uHV4xc.js";
-import { u as P } from "./useDetectMobile-BC6EGaBc.js";
-import { m as g, t as z, k as v } from "./utils-DCs-SbIv.js";
-import { T as I } from "./style-CsMpu4iC.js";
+import { u as z } from "./useDetectMobile-BC6EGaBc.js";
+import { m as g, t as I, k as v } from "./utils-DCs-SbIv.js";
+import { T as O } from "./style-CsMpu4iC.js";
 import R from "./Button.js";
 import j from "./Link.js";
 import { P as A } from "./index-BLxkXrqU.js";
@@ -82,61 +82,62 @@ const F = f.div`
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${z(3)}
+    ${I(3)}
   }
 `, L = u((i, a) => {
-  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: n } = i;
-  return /* @__PURE__ */ l(C, { ref: a, className: "blog-card", onClick: n, children: [
-    /* @__PURE__ */ l(N, { children: [
+  const { title: o, imageUrl: m, text: r, buttonText: c, onCardClick: l } = i;
+  return /* @__PURE__ */ n(C, { ref: a, className: "blog-card", onClick: l, children: [
+    /* @__PURE__ */ n(N, { children: [
       /* @__PURE__ */ t("div", { className: "text-wr-title", children: o }),
       /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
-      /* @__PURE__ */ t(j, { color: "gray", onClick: n, children: c })
+      /* @__PURE__ */ t(j, { color: "gray", onClick: l, children: c })
     ] }),
     /* @__PURE__ */ t(A, { src: m })
   ] });
-}), O = u(({}, i) => /* @__PURE__ */ l(C, { className: "blog-card", children: [
-  /* @__PURE__ */ l(N, { children: [
+}), U = u(({}, i) => /* @__PURE__ */ n(C, { className: "blog-card", children: [
+  /* @__PURE__ */ n(N, { children: [
     /* @__PURE__ */ t("div", { className: "skeleton-title" }),
     /* @__PURE__ */ t("div", { className: "text-wr" }),
     /* @__PURE__ */ t("div", { className: "skeleton-action" })
   ] }),
   /* @__PURE__ */ t("div", { className: "skeleton-img" })
-] })), U = ({ limit: i = 3, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
-  O,
+] })), _ = ({ limit: i = 3, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (m, r) => /* @__PURE__ */ t(
+  U,
   {
     isLoading: a
   },
   `${o}-skeleton-product-card-${r}`
-)) }), _ = ({
+)) }), D = ({
   children: i,
   fallbackComponent: a = /* @__PURE__ */ t(h, {}),
   isLoading: o = !1,
   limit: m,
   keyPrefix: r
-}) => /* @__PURE__ */ t(W, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(
-  U,
+}) => /* @__PURE__ */ t(x, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ t(
+  _,
   {
     isLoading: o,
     limit: m,
     keyPrefix: r
   }
-) : i }), y = x(L), ee = u((i, a) => {
+) : i }), y = M(L), te = u((i, a) => {
   const {
     icon: o,
     title: m,
     items: r,
     buttonText: c,
-    limit: n = 3,
+    limit: l = 3,
     options: d,
-    onButtonAction: T = () => {
+    selectedOption: T = [],
+    onButtonAction: $ = () => {
     },
     buttonLink: b,
     onSelectOption: k = () => {
     },
-    isLoading: $ = !1,
+    isLoading: B = !1,
     onSelectCard: s = () => {
     }
-  } = i, w = P(), B = M(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, p) => /* @__PURE__ */ t(
+  } = i, w = z(), W = P(() => /* @__PURE__ */ t(h, { children: w === !0 ? r == null ? void 0 : r.map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
@@ -146,7 +147,7 @@ const F = f.div`
       onCardClick: () => s(e)
     },
     p
-  )) : r == null ? void 0 : r.slice(0, n).map((e, p) => /* @__PURE__ */ t(
+  )) : r == null ? void 0 : r.slice(0, l).map((e, p) => /* @__PURE__ */ t(
     y,
     {
       title: e == null ? void 0 : e.title,
@@ -156,10 +157,10 @@ const F = f.div`
       onCardClick: () => s(e)
     },
     p
-  )) }), [r, w, n, s]);
-  return /* @__PURE__ */ l(I, { ref: a, children: [
-    /* @__PURE__ */ l("div", { className: "regular-title", children: [
-      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
+  )) }), [r, w, l, s]);
+  return /* @__PURE__ */ n(O, { ref: a, children: [
+    /* @__PURE__ */ n("div", { className: "regular-title", children: [
+      /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
         v(o) && /* @__PURE__ */ t("i", { className: o }),
         /* @__PURE__ */ t("span", { children: m })
       ] }),
@@ -169,7 +170,7 @@ const F = f.div`
           type: "button",
           btnType: "tinted",
           color: "gray",
-          onClick: () => T(b),
+          onClick: () => $(b),
           borderRadius: "curved",
           children: c
         }
@@ -179,6 +180,7 @@ const F = f.div`
       E,
       {
         items: d,
+        selectedIds: T,
         onRemove: (e) => {
           k(e);
         },
@@ -190,17 +192,17 @@ const F = f.div`
         noMargin: !0
       }
     ),
-    /* @__PURE__ */ t(F, { limit: n, children: /* @__PURE__ */ t(
-      _,
+    /* @__PURE__ */ t(F, { limit: l, children: /* @__PURE__ */ t(
+      D,
       {
-        isLoading: $,
-        limit: n,
+        isLoading: B,
+        limit: l,
         keyPrefix: "explore-landing",
-        children: B
+        children: W
       }
     ) })
   ] });
 });
 export {
-  ee as default
+  te as default
 };

package/dist/BrandHitsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("react"),c=require("./utils-BXPz9bck.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./consts-CtNoHdBj.cjs"),h=d.styled.div`
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),c=require("./utils-BXPz9bck.cjs"),o=require("./emotion-styled.browser.esm-BtEseadx.cjs"),d=require("./consts-CtNoHdBj.cjs"),h=o.styled.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
@@ -12,7 +12,7 @@
     height: auto;
   }
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -22,16 +22,16 @@
       height: auto;
     }
   }
-`,_=d.styled.div`
+`,_=o.styled.div`
   width: 7.5rem;
   height: 7.5rem;
   background: ${c.linearGradientAnimation("-90deg")};
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: 4.5rem;
   }
-`,m=p.forwardRef(({imageComponent:t,image:i,onSelectCard:r},n)=>e.jsx(h,{children:c.isDefined(t)?t:e.jsx("img",{src:i,className:"wrapper__image",onSelectCard:r})})),g=p.forwardRef(({},t)=>e.jsx(_,{})),w=d.styled.div`
+`,m=p.forwardRef(({imageComponent:t,image:i,onSelectCard:r},n)=>e.jsx(h,{children:c.isDefined(t)?t:e.jsx("img",{src:i,className:"wrapper__image",onClick:r})})),g=p.forwardRef(({},t)=>e.jsx(_,{})),w=o.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -80,7 +80,7 @@
     }
   }
 
-  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;

package/dist/BrandHitsSection.js

@@ -37,14 +37,7 @@ const g = d.div`
     height: 4.5rem;
   }
 `, w = o(
-  ({ imageComponent: t, image: i, onSelectCard: r }, n) => /* @__PURE__ */ e(g, { children: s(t) ? t : /* @__PURE__ */ e(
-    "img",
-    {
-      src: i,
-      className: "wrapper__image",
-      onSelectCard: r
-    }
-  ) })
+  ({ imageComponent: t, image: i, onSelectCard: r }, n) => /* @__PURE__ */ e(g, { children: s(t) ? t : /* @__PURE__ */ e("img", { src: i, className: "wrapper__image", onClick: r }) })
 ), f = o(({}, t) => /* @__PURE__ */ e(_, {})), x = d.div`
   display: flex;
   flex-direction: column;

package/dist/FieldOfInterestsMasonrySection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),o=require("./utils-BXPz9bck.cjs"),N=require("./Icon.cjs"),k=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),I=require("./useEffectOnce-DFrzfNzT.cjs"),E=d.styled.div`
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-CtNoHdBj.cjs"),o=require("./utils-BXPz9bck.cjs"),k=require("./Icon.cjs"),I=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),E=require("./useEffectOnce-DFrzfNzT.cjs"),M=d.styled.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -46,12 +46,12 @@
       ${o.truncateTextInRows(2)}
     }
   }
-`,M=d.styled.div`
+`,R=d.styled.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
   background: ${o.linearGradientAnimation("-90deg")};
-`,R=d.styled.div`
+`,q=d.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -117,7 +117,7 @@
       white-space: nowrap;
     }
   }
-`,q=d.styled.div`
+`,z=d.styled.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
@@ -127,7 +127,7 @@
     width: 7.5rem;
     height: 2.5rem;
   }
-`,z=l.forwardRef(({},i)=>r.jsx(q,{})),O=l.forwardRef(({text:i,isActive:s,icon:t,onSelectCard:n=()=>{}},p)=>r.jsxs(R,{className:s?"active":"",onClick:n,children:[r.jsx(N,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),C=l.forwardRef(({image:i,imageComponent:s,title:t,description:n,className:p,onSelectCard:c=()=>{}},x)=>{const{theme:m}=k.useTheme();return r.jsxs(E,{theme:m,className:p,onClick:c,children:[o.isDefined(s)?s:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),F=l.forwardRef(({},i)=>r.jsxs(M,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),L=d.styled.div`
+`,O=l.forwardRef(({},i)=>r.jsx(z,{})),C=l.forwardRef(({text:i,isActive:a,icon:t,onSelectCard:n=()=>{}},p)=>r.jsxs(q,{className:a?"active":"",onClick:n,children:[r.jsx(k,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),F=l.forwardRef(({image:i,imageComponent:a,title:t,description:n,className:p,onSelectCard:m=()=>{}},u)=>{const{theme:c}=I.useTheme();return r.jsxs(M,{theme:c,className:p,onClick:m,children:[o.isDefined(a)?a:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),A=l.forwardRef(({},i)=>r.jsxs(R,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),L=d.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -191,4 +191,4 @@
       grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`,W=l.forwardRef(({title:i,subtitle:s,tags:t=[],items:n=[],limitTags:p=5,limitTagsForMobile:c=5,limit:x=3,limitForMobile:m=2,onSelectTag:_=()=>{},onSelectCard:f=()=>{}},j)=>{var u,y;const w=e=>{_==null||_(e)},h=e=>{f==null||f(e)};return I.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(v=>{const b=v.getBoundingClientRect().height,$=Math.ceil((b+10)/20);v.style.gridRowEnd=`span ${$}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(L,{ref:j,limitTags:p,limitTagsForMobile:c,limitCards:x,limitCardsForMobile:m,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,a)=>r.jsx(O,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-masonry-tag__${a+1}`)):(u=Array.from("12345"))==null?void 0:u.map((e,a)=>r.jsx(z,{},`field-of-interests-masonry-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,a)=>r.jsx(C,{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==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${a+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,a)=>r.jsx(F,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=W;
+`,W=l.forwardRef(({title:i,subtitle:a,tags:t=[],items:n=[],limitTags:p=5,limitTagsForMobile:m=5,limit:u=3,limitForMobile:c=2,selectedTag:_,onSelectTag:f=()=>{},onSelectCard:w=()=>{}},b)=>{var y,v;const h=e=>{f==null||f(e)},x=e=>{w==null||w(e)};return E.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(j=>{const $=j.getBoundingClientRect().height,N=Math.ceil(($+10)/20);j.style.gridRowEnd=`span ${N}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(L,{ref:b,limitTags:p,limitTagsForMobile:m,limitCards:u,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,s)=>r.jsx(C,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,isActive:(e==null?void 0:e.uuid)===(_==null?void 0:_.uuid),onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-masonry-tag__${s+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,s)=>r.jsx(O,{},`field-of-interests-masonry-tag-skeleton__${s+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,s)=>r.jsx(F,{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:()=>x==null?void 0:x(e==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${s+1}`)):(v=Array.from("12345"))==null?void 0:v.map((e,s)=>r.jsx(A,{},`field-of-interests-with-tags-card-skeleton__${s+1}`))})]})});module.exports=W;

package/dist/FieldOfInterestsMasonrySection.js

@@ -1,12 +1,12 @@
 import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { s as p } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as w } from "./consts-C1uHV4xc.js";
-import { t as b, m as $, l as M } from "./utils-DCs-SbIv.js";
-import I from "./Icon.js";
-import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { u as E } from "./useEffectOnce-guOKBPuL.js";
-const F = p.div`
+import { M as u } from "./consts-C1uHV4xc.js";
+import { t as $, m as N, l as I } from "./utils-DCs-SbIv.js";
+import C from "./Icon.js";
+import { u as E } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as F } from "./useEffectOnce-guOKBPuL.js";
+const O = p.div`
   display: flex;
   width: 100%;
   height: fit-content;
@@ -41,7 +41,7 @@ const F = p.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${b(2)}
+      ${$(2)}
     }
 
     & .wrapper__description {
@@ -51,15 +51,15 @@ const F = p.div`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${b(2)}
+      ${$(2)}
     }
   }
-`, O = p.div`
+`, W = p.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
-  background: ${$("-90deg")};
-`, W = p.div`
+  background: ${N("-90deg")};
+`, A = p.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -98,7 +98,7 @@ const F = p.div`
     }
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     flex-direction: row;
     align-items: center;
     gap: 0.25rem;
@@ -129,44 +129,44 @@ const F = p.div`
   width: 7.5rem;
   width: 7.5rem;
   border-radius: 999px;
-  background: ${$("-90deg")};
+  background: ${N("-90deg")};
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     width: 7.5rem;
     height: 2.5rem;
   }
-`, A = l(({}, r) => /* @__PURE__ */ i(j, {})), L = l(
+`, L = l(({}, r) => /* @__PURE__ */ i(j, {})), R = l(
   ({ text: r, isActive: o, icon: t, onSelectCard: a = () => {
-  } }, d) => /* @__PURE__ */ s(W, { className: o ? "active" : "", onClick: a, children: [
-    /* @__PURE__ */ i(I, { icon: t, className: "wrapper__icon" }),
+  } }, m) => /* @__PURE__ */ s(A, { className: o ? "active" : "", onClick: a, children: [
+    /* @__PURE__ */ i(C, { icon: t, className: "wrapper__icon" }),
     /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
   ] })
-), R = l(
+), q = l(
   ({
     image: r,
     imageComponent: o,
     title: t,
     description: a,
-    className: d,
-    onSelectCard: m = () => {
+    className: m,
+    onSelectCard: d = () => {
     }
   }, x) => {
-    const { theme: c } = C();
-    return /* @__PURE__ */ s(F, { theme: c, className: d, onClick: m, children: [
-      M(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+    const { theme: c } = E();
+    return /* @__PURE__ */ s(O, { theme: c, className: m, onClick: d, children: [
+      I(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
       /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
         t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
         a && /* @__PURE__ */ i("div", { className: "wrapper__description", children: a })
       ] })
     ] });
   }
-), T = l(({}, r) => /* @__PURE__ */ s(O, { children: [
+), B = l(({}, r) => /* @__PURE__ */ s(W, { children: [
   /* @__PURE__ */ i("div", { className: "wrapper__image" }),
   /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
     /* @__PURE__ */ i("div", { className: "wrapper__title" }),
     /* @__PURE__ */ i("div", { className: "wrapper__description" })
   ] })
-] })), q = p.div`
+] })), G = p.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -218,7 +218,7 @@ const F = p.div`
     }
   }
 
-  @media (max-width: ${w + "px"}) {
+  @media (max-width: ${u + "px"}) {
     & .wrapper__tags {
       display: flex;
       overflow-x: scroll;
@@ -230,43 +230,44 @@ const F = p.div`
       grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
     }
   }
-`, K = l(
+`, U = l(
   ({
     title: r,
     subtitle: o,
     tags: t = [],
     items: a = [],
-    limitTags: d = 5,
-    limitTagsForMobile: m = 5,
+    limitTags: m = 5,
+    limitTagsForMobile: d = 5,
     limit: x = 3,
     limitForMobile: c = 2,
-    onSelectTag: f = () => {
+    selectedTag: f,
+    onSelectTag: _ = () => {
     },
-    onSelectCard: _ = () => {
+    onSelectCard: h = () => {
     }
-  }, N) => {
-    var u, y;
-    const h = (e) => {
-      f == null || f(e);
-    }, g = (e) => {
+  }, k) => {
+    var y, v;
+    const w = (e) => {
       _ == null || _(e);
+    }, g = (e) => {
+      h == null || h(e);
     };
-    return E(() => {
+    return F(() => {
       const e = () => {
-        document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((v) => {
-          const k = v.getBoundingClientRect().height, z = Math.ceil((k + 10) / 20);
-          v.style.gridRowEnd = `span ${z}`;
+        document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((b) => {
+          const z = b.getBoundingClientRect().height, M = Math.ceil((z + 10) / 20);
+          b.style.gridRowEnd = `span ${M}`;
         });
       };
       return e(), window.addEventListener("resize", e), () => {
         window.removeEventListener("resize", e);
       };
     }), /* @__PURE__ */ s(
-      q,
+      G,
       {
-        ref: N,
-        limitTags: d,
-        limitTagsForMobile: m,
+        ref: k,
+        limitTags: m,
+        limitTagsForMobile: d,
         limitCards: x,
         limitCardsForMobile: c,
         children: [
@@ -275,20 +276,21 @@ const F = p.div`
             o && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: o })
           ] }),
           /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, n) => /* @__PURE__ */ i(
-            L,
+            R,
             {
               icon: e == null ? void 0 : e.icon,
               text: e == null ? void 0 : e.text,
-              onSelectCard: () => h == null ? void 0 : h(e)
+              isActive: (e == null ? void 0 : e.uuid) === (f == null ? void 0 : f.uuid),
+              onSelectCard: () => w == null ? void 0 : w(e)
             },
             `field-of-interests-masonry-tag__${n + 1}`
-          )) : (u = Array.from("12345")) == null ? void 0 : u.map((e, n) => /* @__PURE__ */ i(
-            A,
+          )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, n) => /* @__PURE__ */ i(
+            L,
             {},
             `field-of-interests-masonry-tag-skeleton__${n + 1}`
           )) }),
           /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ i(
-            R,
+            q,
             {
               image: e == null ? void 0 : e.image,
               imageComponent: e == null ? void 0 : e.imageComponent,
@@ -298,8 +300,8 @@ const F = p.div`
               className: "wrapper__card"
             },
             `field-of-interests-with-tags-card__${n + 1}`
-          )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, n) => /* @__PURE__ */ i(
-            T,
+          )) : (v = Array.from("12345")) == null ? void 0 : v.map((e, n) => /* @__PURE__ */ i(
+            B,
             {},
             `field-of-interests-with-tags-card-skeleton__${n + 1}`
           )) })
@@ -309,5 +311,5 @@ const F = p.div`
   }
 );
 export {
-  K as default
+  U as default
 };

package/dist/FieldOfInterestsWithTagsCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),p=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-BXPz9bck.cjs"),y=require("./Icon.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=require("./consts-CtNoHdBj.cjs"),k=m.styled.div`
+"use strict";const r=require("react/jsx-runtime"),p=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-BXPz9bck.cjs"),b=require("./Icon.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=require("./consts-CtNoHdBj.cjs"),$=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -58,12 +58,12 @@
       }
     }
   }
-`,$=m.styled.div`
+`,N=m.styled.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
   background: ${l.linearGradientAnimation("-90deg")};
-`,N=m.styled.div`
+`,I=m.styled.div`
   display: flex;
   padding: 0 0.5rem 0 0;
   align-items: center;
@@ -107,12 +107,12 @@
       color: var(--white, #fff);
     }
   }
-`,I=m.styled.div`
+`,C=m.styled.div`
   width: 7rem;
   height: 3rem;
   border-radius: 999px;
   background: ${l.linearGradientAnimation("-90deg")};
-`,C=p.forwardRef(({},t)=>r.jsx(I,{})),W=p.forwardRef(({name:t,isActive:n,icon:i,onSelectCard:o=()=>{}},d)=>r.jsxs(N,{className:n?"active":"",onClick:o,children:[r.jsx(y,{icon:i,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),F=p.forwardRef(({image:t,imageComponent:n,name:i,description:o,onSelectCard:d=()=>{}},x)=>{const{theme:c}=b.useTheme();return r.jsxs(k,{theme:c,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),o&&r.jsx("div",{className:"wrapper__description",children:o})]})]})}),R=p.forwardRef(({},t)=>r.jsx($,{})),q=m.styled.div`
+`,W=p.forwardRef(({},i)=>r.jsx(C,{})),F=p.forwardRef(({name:i,isActive:n,icon:t,onSelectCard:a=()=>{}},d)=>r.jsxs(I,{className:n?"active":"",onClick:a,children:[r.jsx(b,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),R=p.forwardRef(({image:i,imageComponent:n,name:t,description:a,onSelectCard:d=()=>{}},u)=>{const{theme:c}=j.useTheme();return r.jsxs($,{theme:c,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),a&&r.jsx("div",{className:"wrapper__description",children:a})]})]})}),q=p.forwardRef(({},i)=>r.jsx(N,{})),z=m.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -153,14 +153,14 @@
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
+    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
     justify-content: center;
     align-items: center;
     gap: 1.5rem;
     width: 100%;
   }
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__tags {
       overflow-x: scroll;
       justify-content: flex-start;
@@ -182,8 +182,8 @@
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
     }
   }
-`,T=p.forwardRef(({title:t,subtitle:n,tags:i=[],limitTags:o=7,limitTagsForMobile:d=7,limit:x=3,limitForMobile:c=2,items:s=[],onSelectTag:f=()=>{},onSelectCard:_=()=>{},getImage:v=()=>{}},z)=>{var g,u;const h=e=>{f==null||f(e)},w=e=>{_==null||_(e)};return r.jsxs(q,{limitTags:o,limitTagsForMobile:d,limitCards:x,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,a)=>r.jsx(W,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.name,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${a+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,a)=>r.jsx(C,{},`field-of-interests-with-tags-card-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,a)=>r.jsx(F,{image:v(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid),imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.name,description:(e==null?void 0:e.shortDescription)||(e==null?void 0:e.description),onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-with-tags-card__${a+1}`)):(u=Array.from("123"))==null?void 0:u.map((e,a)=>r.jsx(R,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=T;
+`,O=p.forwardRef(({title:i,subtitle:n,tags:t=[],limitTags:a=7,limitTagsForMobile:d=7,limit:u=3,limitForMobile:c=2,items:s=[],selectedTag:f,onSelectTag:_=()=>{},onSelectCard:h=()=>{},getImage:y=()=>{}},A)=>{var g,v;const w=e=>{_==null||_(e)},x=e=>{h==null||h(e)};return r.jsxs(z,{limitTags:a,limitTagsForMobile:d,limitCards:u,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,o)=>r.jsx(F,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.name,isActive:(e==null?void 0:e.uuid)===(f==null?void 0:f.uuid),onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-with-tags-card-tag__${o+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,o)=>r.jsx(W,{},`field-of-interests-with-tags-card-tag-skeleton__${o+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,o)=>r.jsx(R,{image:y(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid),imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.name,description:(e==null?void 0:e.shortDescription)||(e==null?void 0:e.description),onSelectCard:()=>x==null?void 0:x(e)},`field-of-interests-with-tags-card__${o+1}`)):(v=Array.from("123"))==null?void 0:v.map((e,o)=>r.jsx(q,{},`field-of-interests-with-tags-card-skeleton__${o+1}`))})]})});module.exports=O;

package/dist/FieldOfInterestsWithTagsCardsSection.js

@@ -1,11 +1,11 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
 import { s as m } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { t as v, m as y, l as k } from "./utils-DCs-SbIv.js";
-import $ from "./Icon.js";
-import { u as N } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-import { M as C } from "./consts-C1uHV4xc.js";
-const I = m.div`
+import { t as y, m as b, l as $ } from "./utils-DCs-SbIv.js";
+import N from "./Icon.js";
+import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { M as I } from "./consts-C1uHV4xc.js";
+const W = m.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -42,7 +42,7 @@ const I = m.div`
       font-style: normal;
       font-weight: 500;
       line-height: 1.5rem;
-      ${v(2)}
+      ${y(2)}
     }
 
     & .wrapper__description {
@@ -52,7 +52,7 @@ const I = m.div`
       font-weight: 400;
       line-height: 1rem;
       letter-spacing: 0.025rem;
-      ${v(2)}
+      ${y(2)}
     }
   }
 
@@ -65,12 +65,12 @@ const I = m.div`
       }
     }
   }
-`, W = m.div`
+`, F = m.div`
   width: 100%;
   height: 11.625rem;
   border-radius: 0.75rem;
-  background: ${y("-90deg")};
-`, F = m.div`
+  background: ${b("-90deg")};
+`, j = m.div`
   display: flex;
   padding: 0 0.5rem 0 0;
   align-items: center;
@@ -114,30 +114,30 @@ const I = m.div`
       color: var(--white, #fff);
     }
   }
-`, j = m.div`
+`, z = m.div`
   width: 7rem;
   height: 3rem;
   border-radius: 999px;
-  background: ${y("-90deg")};
-`, z = p(({}, r) => /* @__PURE__ */ i(j, {})), O = p(
+  background: ${b("-90deg")};
+`, O = p(({}, r) => /* @__PURE__ */ i(z, {})), A = p(
   ({ name: r, isActive: n, icon: t, onSelectCard: s = () => {
-  } }, f) => /* @__PURE__ */ l(F, { className: n ? "active" : "", onClick: s, children: [
-    /* @__PURE__ */ i($, { icon: t, className: "wrapper__icon" }),
+  } }, f) => /* @__PURE__ */ l(j, { className: n ? "active" : "", onClick: s, children: [
+    /* @__PURE__ */ i(N, { icon: t, className: "wrapper__icon" }),
     /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
   ] })
-), T = p(
+), M = p(
   ({ image: r, imageComponent: n, name: t, description: s, onSelectCard: f = () => {
-  } }, g) => {
-    const { theme: d } = N();
-    return /* @__PURE__ */ l(I, { theme: d, onClick: f, children: [
-      k(n) ? n : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+  } }, u) => {
+    const { theme: d } = C();
+    return /* @__PURE__ */ l(W, { theme: d, onClick: f, children: [
+      $(n) ? n : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
       /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
         t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
         s && /* @__PURE__ */ i("div", { className: "wrapper__description", children: s })
       ] })
     ] });
   }
-), M = p(({}, r) => /* @__PURE__ */ i(W, {})), A = m.div`
+), E = p(({}, r) => /* @__PURE__ */ i(F, {})), D = m.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -185,7 +185,7 @@ const I = m.div`
     width: 100%;
   }
 
-  @media (max-width: ${C + "px"}) {
+  @media (max-width: ${I + "px"}) {
     & .wrapper__tags {
       overflow-x: scroll;
       justify-content: flex-start;
@@ -211,68 +211,70 @@ const I = m.div`
       gap: 1rem;
     }
   }
-`, X = p(
+`, Z = p(
   ({
     title: r,
     subtitle: n,
     tags: t = [],
     limitTags: s = 7,
     limitTagsForMobile: f = 7,
-    limit: g = 3,
+    limit: u = 3,
     limitForMobile: d = 2,
-    items: a = [],
-    onSelectTag: c = () => {
+    items: o = [],
+    selectedTag: c,
+    onSelectTag: h = () => {
     },
-    onSelectCard: h = () => {
+    onSelectCard: _ = () => {
     },
-    getImage: b = () => {
+    getImage: k = () => {
     }
-  }, E) => {
-    var x, u;
-    const _ = (e) => {
-      c == null || c(e);
-    }, w = (e) => {
+  }, G) => {
+    var x, v;
+    const w = (e) => {
       h == null || h(e);
+    }, g = (e) => {
+      _ == null || _(e);
     };
     return /* @__PURE__ */ l(
-      A,
+      D,
       {
         limitTags: s,
         limitTagsForMobile: f,
-        limitCards: g,
+        limitCards: u,
         limitCardsForMobile: d,
         children: [
           /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
             r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
             n && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: n })
           ] }),
-          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ i(
-            O,
+          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, a) => /* @__PURE__ */ i(
+            A,
             {
               icon: e == null ? void 0 : e.icon,
               name: e == null ? void 0 : e.name,
-              onSelectCard: () => _ == null ? void 0 : _(e)
+              isActive: (e == null ? void 0 : e.uuid) === (c == null ? void 0 : c.uuid),
+              onSelectCard: () => w == null ? void 0 : w(e)
             },
-            `field-of-interests-with-tags-card-tag__${o + 1}`
-          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, o) => /* @__PURE__ */ i(
-            z,
+            `field-of-interests-with-tags-card-tag__${a + 1}`
+          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, a) => /* @__PURE__ */ i(
+            O,
             {},
-            `field-of-interests-with-tags-card-tag-skeleton__${o + 1}`
+            `field-of-interests-with-tags-card-tag-skeleton__${a + 1}`
           )) }),
-          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ i(
-            T,
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: o && (o == null ? void 0 : o.length) > 0 ? o == null ? void 0 : o.map((e, a) => /* @__PURE__ */ i(
+            M,
             {
-              image: b(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid),
+              image: k(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid),
               imageComponent: e == null ? void 0 : e.imageComponent,
               name: e == null ? void 0 : e.name,
               description: (e == null ? void 0 : e.shortDescription) || (e == null ? void 0 : e.description),
-              onSelectCard: () => w == null ? void 0 : w(e)
+              onSelectCard: () => g == null ? void 0 : g(e)
             },
-            `field-of-interests-with-tags-card__${o + 1}`
-          )) : (u = Array.from("123")) == null ? void 0 : u.map((e, o) => /* @__PURE__ */ i(
-            M,
+            `field-of-interests-with-tags-card__${a + 1}`
+          )) : (v = Array.from("123")) == null ? void 0 : v.map((e, a) => /* @__PURE__ */ i(
+            E,
             {},
-            `field-of-interests-with-tags-card-skeleton__${o + 1}`
+            `field-of-interests-with-tags-card-skeleton__${a + 1}`
           )) })
         ]
       }
@@ -280,5 +282,5 @@ const I = m.div`
   }
 );
 export {
-  X as default
+  Z as default
 };

package/dist/LocationSearchSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),d=require("react"),a=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./consts-CtNoHdBj.cjs"),f=require("./index-ryadTWiS.cjs"),v=a.styled.div`
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),s=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./consts-CtNoHdBj.cjs"),v=require("./index-ryadTWiS.cjs"),b=s.styled.div`
   display: flex;
   flex-direction: column;
   padding: 1.25rem;
@@ -19,7 +19,7 @@
     box-shadow: none;
     border: none;
   }
-`,b=a.styled.div`
+`,j=s.styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
@@ -28,7 +28,7 @@
     grid-template-columns: repeat(2, 1fr);
     gap: 0.5rem;
   }
-`,j=a.styled.div`
+`,w=s.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -57,4 +57,4 @@
       color: var(--primary-500, #f59e0b);
     }
   }
-`,w=d.forwardRef((c,p)=>{const{title:m,items:t,options:o,onSelectRegion:g=()=>{},onSelectCity:x=()=>{},onSelectOption:u=()=>{}}=c;return e.jsxs(v,{ref:p,children:[e.jsx("div",{className:"wrapper-title",children:m}),(o==null?void 0:o.length)>0&&e.jsx(f.SelectBar,{items:o,onRemove:r=>{},onSelect:(r,i)=>{u(r,i)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(b,{children:t==null?void 0:t.map((r,i)=>{var s;return e.jsxs(j,{children:[e.jsx("div",{className:"region",onClick:()=>g(r),children:r==null?void 0:r.name}),e.jsx("div",{className:"group-items",children:(s=r==null?void 0:r.cities)==null?void 0:s.map((n,h)=>e.jsx(d.Fragment,{children:e.jsxs("div",{className:"city",onClick:()=>x(n),children:[e.jsx("span",{children:n==null?void 0:n.name}),e.jsxs("span",{className:"count-txt",children:["(",n==null?void 0:n.count,")"]})]})},i+h))})]},i)})})]})});module.exports=w;
+`,S=d.forwardRef((c,p)=>{const{title:m,items:i,options:o,selectedOption:g=[],onSelectRegion:x=()=>{},onSelectCity:u=()=>{},onSelectOption:h=()=>{}}=c;return e.jsxs(b,{ref:p,children:[e.jsx("div",{className:"wrapper-title",children:m}),(o==null?void 0:o.length)>0&&e.jsx(v.SelectBar,{items:o,selectedIds:g,onSelect:(r,t)=>{h(r,t)},labelKey:"name",valueKey:"code",noMargin:!0}),e.jsx(j,{children:i==null?void 0:i.map((r,t)=>{var a;return e.jsxs(w,{children:[e.jsx("div",{className:"region",onClick:()=>x(r),children:r==null?void 0:r.name}),e.jsx("div",{className:"group-items",children:(a=r==null?void 0:r.cities)==null?void 0:a.map((n,f)=>e.jsx(d.Fragment,{children:e.jsxs("div",{className:"city",onClick:()=>u(n),children:[e.jsx("span",{children:n==null?void 0:n.name}),e.jsxs("span",{className:"count-txt",children:["(",n==null?void 0:n.count,")"]})]})},t+f))})]},t)})})]})});module.exports=S;

package/dist/LocationSearchSection.js

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { forwardRef as v, Fragment as x } from "react";
+import { forwardRef as v, Fragment as b } from "react";
 import { s as l } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as p } from "./consts-C1uHV4xc.js";
-import { S as b } from "./index-DXmajb7F.js";
-const w = l.div`
+import { S as w } from "./index-DXmajb7F.js";
+const S = l.div`
   display: flex;
   flex-direction: column;
   padding: 1.25rem;
@@ -24,7 +24,7 @@ const w = l.div`
     box-shadow: none;
     border: none;
   }
-`, S = l.div`
+`, N = l.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
@@ -33,7 +33,7 @@ const w = l.div`
     grid-template-columns: repeat(2, 1fr);
     gap: 0.5rem;
   }
-`, N = l.div`
+`, C = l.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -62,50 +62,50 @@ const w = l.div`
       color: var(--primary-500, #f59e0b);
     }
   }
-`, R = v((m, s) => {
+`, O = v((s, m) => {
   const {
     title: c,
     items: t,
     options: a,
-    onSelectRegion: g = () => {
+    selectedOption: g = [],
+    onSelectRegion: f = () => {
     },
-    onSelectCity: f = () => {
+    onSelectCity: h = () => {
     },
-    onSelectOption: h = () => {
+    onSelectOption: u = () => {
     }
-  } = m;
-  return /* @__PURE__ */ i(w, { ref: s, children: [
+  } = s;
+  return /* @__PURE__ */ i(S, { ref: m, children: [
     /* @__PURE__ */ o("div", { className: "wrapper-title", children: c }),
     (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ o(
-      b,
+      w,
       {
         items: a,
-        onRemove: (e) => {
-        },
+        selectedIds: g,
         onSelect: (e, n) => {
-          h(e, n);
+          u(e, n);
         },
         labelKey: "name",
         valueKey: "code",
         noMargin: !0
       }
     ),
-    /* @__PURE__ */ o(S, { children: t == null ? void 0 : t.map((e, n) => {
+    /* @__PURE__ */ o(N, { children: t == null ? void 0 : t.map((e, n) => {
       var d;
-      return /* @__PURE__ */ i(N, { children: [
-        /* @__PURE__ */ o("div", { className: "region", onClick: () => g(e), children: e == null ? void 0 : e.name }),
-        /* @__PURE__ */ o("div", { className: "group-items", children: (d = e == null ? void 0 : e.cities) == null ? void 0 : d.map((r, u) => /* @__PURE__ */ o(x, { children: /* @__PURE__ */ i("div", { className: "city", onClick: () => f(r), children: [
+      return /* @__PURE__ */ i(C, { children: [
+        /* @__PURE__ */ o("div", { className: "region", onClick: () => f(e), children: e == null ? void 0 : e.name }),
+        /* @__PURE__ */ o("div", { className: "group-items", children: (d = e == null ? void 0 : e.cities) == null ? void 0 : d.map((r, x) => /* @__PURE__ */ o(b, { children: /* @__PURE__ */ i("div", { className: "city", onClick: () => h(r), children: [
           /* @__PURE__ */ o("span", { children: r == null ? void 0 : r.name }),
           /* @__PURE__ */ i("span", { className: "count-txt", children: [
             "(",
             r == null ? void 0 : r.count,
             ")"
           ] })
-        ] }) }, n + u)) })
+        ] }) }, n + x)) })
       ] }, n);
     }) })
   ] });
 });
 export {
-  R as default
+  O as default
 };

package/dist/ShopCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),v=require("react"),j=require("./Button.cjs"),u=require("./skeleton-CtJG0_SN.cjs"),b=require("./utils-BXPz9bck.cjs"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),N=require("./consts-CtNoHdBj.cjs"),c=C.styled.div`
+"use strict";const t=require("react/jsx-runtime"),y=require("react"),v=require("./Button.cjs"),p=require("./skeleton-CtJG0_SN.cjs"),c=require("./utils-BXPz9bck.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),b=require("./consts-CtNoHdBj.cjs"),C=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -66,7 +66,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${N.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
@@ -87,4 +87,4 @@
       gap: 1rem;
     }
   }
-`,q=v.forwardRef(({title:i,subtitle:o,items:n,limit:_=4,limitForMobile:g=2,buttonText:x="Show More",onSelectCard:s=()=>{},onButtonAction:p=()=>{},icon:a,getImage:h=()=>{},getProductImage:f=()=>{},hideProducts:w=!1},y)=>{var m;const r=e=>{s==null||s(e==null?void 0:e.uuid)};return t.jsxs(c,{ref:y,limitCards:_,limitCardsForMobile:g,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[i&&t.jsxs("div",{className:"title__text",children:[b.isDefinedNotEmptyString(a)&&t.jsx("i",{className:a}),t.jsx("span",{children:i})]}),p&&t.jsx(j,{text:x,borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:p})]}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,l)=>t.jsx(u.ShopCard,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>r==null?void 0:r(e==null?void 0:e.uuid),image:h(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:f,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:w},`shop-card__${l+1}`)):(m=Array.from("1234"))==null?void 0:m.map((e,l)=>t.jsx(u.ShopCardSkeleton,{},`shop-card-skeleton__${l+1}`))})]})});module.exports=q;
+`,d=y.forwardRef(({title:i,subtitle:s,items:n,limit:m=4,limitForMobile:_=2,buttonText:u="Show More",onSelectCard:g=()=>{},onButtonAction:l=()=>{},icon:o,getImage:x=()=>{},getProductImage:h=()=>{},hideProducts:f=!1},w)=>{var a;return t.jsxs(C,{ref:w,limitCards:m,limitCardsForMobile:_,children:[t.jsxs("div",{className:"wrapper__heading",children:[t.jsxs("div",{className:"wrapper__title",children:[i&&t.jsxs("div",{className:"title__text",children:[c.isDefinedNotEmptyString(o)&&t.jsx("i",{className:o}),t.jsx("span",{children:i})]}),l&&t.jsx(v,{text:u,borderRadius:"curved",btnType:"tinted",className:"title__action",onClick:l})]}),s&&t.jsx("div",{className:"wrapper__subtitle",children:s})]}),t.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,r)=>t.jsx(p.ShopCard,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.ratingArithmeticMean,reviewCount:e==null?void 0:e.reviewCount,products:e==null?void 0:e.products,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g(e==null?void 0:e.uuid),image:x(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,getProductImage:h,canAcceptPayments:e==null?void 0:e.canAcceptPayments,hideProducts:f},`shop-card__${r+1}`)):(a=Array.from("1234"))==null?void 0:a.map((e,r)=>t.jsx(p.ShopCardSkeleton,{},`shop-card-skeleton__${r+1}`))})]})});module.exports=d;

package/dist/ShopCardsSection.js

@@ -1,11 +1,11 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import b from "./Button.js";
-import { S as C, a as N } from "./skeleton-iQWpOw9K.js";
-import { k as $ } from "./utils-DCs-SbIv.js";
-import { s as k } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M } from "./consts-C1uHV4xc.js";
-const S = k.div`
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import v from "./Button.js";
+import { S as C, a as b } from "./skeleton-iQWpOw9K.js";
+import { k as d } from "./utils-DCs-SbIv.js";
+import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as N } from "./consts-C1uHV4xc.js";
+const $ = S.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -73,7 +73,7 @@ const S = k.div`
     width: 100%;
   }
 
-  @media (max-width: ${M + "px"}) {
+  @media (max-width: ${N + "px"}) {
     & .wrapper__heading {
       & .wrapper__title {
         & .title__action {
@@ -94,56 +94,53 @@ const S = k.div`
       gap: 1rem;
     }
   }
-`, F = v(
+`, I = y(
   ({
     title: t,
-    subtitle: s,
+    subtitle: o,
     items: i,
-    limit: g = 4,
-    limitForMobile: f = 2,
-    buttonText: u = "Show More",
-    onSelectCard: r = () => {
+    limit: m = 4,
+    limitForMobile: _ = 2,
+    buttonText: g = "Show More",
+    onSelectCard: f = () => {
     },
-    onButtonAction: m = () => {
+    onButtonAction: a = () => {
     },
-    icon: a,
-    getImage: h = () => {
+    icon: p,
+    getImage: u = () => {
     },
-    getProductImage: w = () => {
+    getProductImage: h = () => {
     },
-    hideProducts: x = !1
-  }, y) => {
-    var _;
-    const l = (e) => {
-      r == null || r(e == null ? void 0 : e.uuid);
-    };
-    return /* @__PURE__ */ o(
-      S,
+    hideProducts: w = !1
+  }, x) => {
+    var s;
+    return /* @__PURE__ */ n(
+      $,
       {
-        ref: y,
-        limitCards: g,
-        limitCardsForMobile: f,
+        ref: x,
+        limitCards: m,
+        limitCardsForMobile: _,
         children: [
-          /* @__PURE__ */ o("div", { className: "wrapper__heading", children: [
-            /* @__PURE__ */ o("div", { className: "wrapper__title", children: [
-              t && /* @__PURE__ */ o("div", { className: "title__text", children: [
-                $(a) && /* @__PURE__ */ n("i", { className: a }),
-                /* @__PURE__ */ n("span", { children: t })
+          /* @__PURE__ */ n("div", { className: "wrapper__heading", children: [
+            /* @__PURE__ */ n("div", { className: "wrapper__title", children: [
+              t && /* @__PURE__ */ n("div", { className: "title__text", children: [
+                d(p) && /* @__PURE__ */ r("i", { className: p }),
+                /* @__PURE__ */ r("span", { children: t })
               ] }),
-              m && /* @__PURE__ */ n(
-                b,
+              a && /* @__PURE__ */ r(
+                v,
                 {
-                  text: u,
+                  text: g,
                   borderRadius: "curved",
                   btnType: "tinted",
                   className: "title__action",
-                  onClick: m
+                  onClick: a
                 }
               )
             ] }),
-            s && /* @__PURE__ */ n("div", { className: "wrapper__subtitle", children: s })
+            o && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: o })
           ] }),
-          /* @__PURE__ */ n("div", { className: "wrapper__cards", children: i && (i == null ? void 0 : i.length) > 0 ? i == null ? void 0 : i.map((e, p) => /* @__PURE__ */ n(
+          /* @__PURE__ */ r("div", { className: "wrapper__cards", children: i && (i == null ? void 0 : i.length) > 0 ? i == null ? void 0 : i.map((e, l) => /* @__PURE__ */ r(
             C,
             {
               uuid: e == null ? void 0 : e.uuid,
@@ -153,19 +150,19 @@ const S = k.div`
               reviewCount: e == null ? void 0 : e.reviewCount,
               products: e == null ? void 0 : e.products,
               imageComponent: e == null ? void 0 : e.imageComponent,
-              onSelectCard: () => l == null ? void 0 : l(e == null ? void 0 : e.uuid),
-              image: h(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
-              getProductImage: w,
+              onSelectCard: () => f(e == null ? void 0 : e.uuid),
+              image: u(e == null ? void 0 : e.profileImage, e == null ? void 0 : e.uuid) || null,
+              getProductImage: h,
               canAcceptPayments: e == null ? void 0 : e.canAcceptPayments,
-              hideProducts: x
+              hideProducts: w
             },
-            `shop-card__${p + 1}`
-          )) : (_ = Array.from("1234")) == null ? void 0 : _.map((e, p) => /* @__PURE__ */ n(N, {}, `shop-card-skeleton__${p + 1}`)) })
+            `shop-card__${l + 1}`
+          )) : (s = Array.from("1234")) == null ? void 0 : s.map((e, l) => /* @__PURE__ */ r(b, {}, `shop-card-skeleton__${l + 1}`)) })
         ]
       }
     );
   }
 );
 export {
-  F as default
+  I as default
 };

package/package.json

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