@lanaco/lnc-react-ui 4.0.157 → 4.0.160

package/dist/BlogsSectionSimple.js

@@ -1,22 +1,22 @@
-import { jsxs as s, jsx as r, Fragment as u } from "react/jsx-runtime";
-import { forwardRef as h, Suspense as T, memo as $, useMemo as P } from "react";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as k } from "./consts-BuFChS64.js";
-import { u as R } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as z, p as I, k as b } from "./utils-BdsZgOUE.js";
-import { B as U, R as W } from "./style-BLuyU97E.js";
-import j from "./Button.js";
-import A from "./Link.js";
-import { P as E } from "./index-CF3HhgvN.js";
-const L = f.div`
+import { jsxs as g, jsx as r, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as w, useRef as P, Suspense as z, memo as I, useMemo as U } from "react";
+import { s as b } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as C } from "./consts-BuFChS64.js";
+import { u as W } from "./useDetectMobile-Bkvj0VMa.js";
+import { o as j, p as A, k as y } from "./utils-BdsZgOUE.js";
+import { B as E, R as L } from "./style-BLuyU97E.js";
+import _ from "./Button.js";
+import D from "./Link.js";
+import { P as G } from "./index-CF3HhgvN.js";
+const F = b.div`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${C + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, y = f.div`
+`, B = b.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -40,7 +40,7 @@ const L = f.div`
     width: 100%;
     max-height: 12.5625rem;
     min-height: 12.5625rem;
-    background-color: ${z("-90deg")};
+    background-color: ${j("-90deg")};
   }
 
   & .action {
@@ -66,9 +66,9 @@ const L = f.div`
     padding: 1rem;
   }
 
-  @media (max-width: ${k + "px"}) {
+  @media (max-width: ${C + "px"}) {
   }
-`, C = f.div`
+`, R = b.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -86,108 +86,122 @@ const L = f.div`
     font-size: 0.875rem;
     flex: 1;
     color: var(--gray-700, #4e555f);
-    ${I(3)}
+    ${A(3)}
   }
-`, _ = h((t, a) => {
+`, O = w((t, m) => {
   const {
-    title: i,
-    imageUrl: d,
+    title: o,
+    imageUrl: s,
     text: n,
-    options: m,
-    onCardClick: p,
-    readMoreText: o = "Read more"
-  } = t;
-  return /* @__PURE__ */ s(y, { ref: a, className: "blog-card", onClick: p, children: [
-    /* @__PURE__ */ r(E, { src: d }),
-    /* @__PURE__ */ s(C, { children: [
-      /* @__PURE__ */ r("div", { className: "text-wr-title", children: i }),
-      /* @__PURE__ */ r("div", { className: "text-wr", children: n })
-    ] }),
-    m && /* @__PURE__ */ r("div", { className: "tags-wr", children: m == null ? void 0 : m.map((l, g) => /* @__PURE__ */ r(U, { color: l == null ? void 0 : l.color, children: l == null ? void 0 : l.name }, g)) }),
-    /* @__PURE__ */ r(A, { className: "action", color: "gray", onClick: p, children: o })
-  ] });
-}), D = h(({}, t) => (
+    options: c,
+    onCardClick: u,
+    readMoreText: a = "Read more",
+    metadata: l
+  } = t, d = P();
+  return /* @__PURE__ */ g(
+    B,
+    {
+      ref: d,
+      name: l == null ? void 0 : l.name,
+      "data-accessor": l == null ? void 0 : l.name,
+      className: "blog-card",
+      onClick: (i) => u(i, d),
+      children: [
+        /* @__PURE__ */ r(G, { src: s }),
+        /* @__PURE__ */ g(R, { children: [
+          /* @__PURE__ */ r("div", { className: "text-wr-title", children: o }),
+          /* @__PURE__ */ r("div", { className: "text-wr", children: n })
+        ] }),
+        c && /* @__PURE__ */ r("div", { className: "tags-wr", children: c == null ? void 0 : c.map((i, f) => /* @__PURE__ */ r(E, { color: i == null ? void 0 : i.color, children: i == null ? void 0 : i.name }, f)) }),
+        /* @__PURE__ */ r(D, { className: "action", color: "gray", onClick: u, children: a })
+      ]
+    }
+  );
+}), X = w(({}, t) => (
   // <LandingPageClearProductCardSkeleton />
-  /* @__PURE__ */ s(y, { className: "product-card", children: [
+  /* @__PURE__ */ g(B, { className: "product-card", children: [
     /* @__PURE__ */ r("div", { className: "skeleton-img" }),
     /* @__PURE__ */ r("div", { className: "card-title" }),
-    /* @__PURE__ */ r(C, {})
+    /* @__PURE__ */ r(R, {})
   ] })
-)), G = ({ limit: t = 3, isLoading: a = !1, keyPrefix: i }) => /* @__PURE__ */ r(u, { children: Array.from({ length: t }, (d, n) => /* @__PURE__ */ r(
-  D,
+)), Z = ({ limit: t = 3, isLoading: m = !1, keyPrefix: o }) => /* @__PURE__ */ r(v, { children: Array.from({ length: t }, (s, n) => /* @__PURE__ */ r(
+  X,
   {
-    isLoading: a
+    isLoading: m
   },
-  `${i}-skeleton-product-card-${n}`
-)) }), F = ({
+  `${o}-skeleton-product-card-${n}`
+)) }), q = ({
   children: t,
-  fallbackComponent: a = /* @__PURE__ */ r(u, {}),
-  isLoading: i = !1,
-  limit: d,
+  fallbackComponent: m = /* @__PURE__ */ r(v, {}),
+  isLoading: o = !1,
+  limit: s,
   keyPrefix: n
-}) => /* @__PURE__ */ r(T, { fallbackComponent: a, children: i === !0 ? /* @__PURE__ */ r(
-  G,
+}) => /* @__PURE__ */ r(z, { fallbackComponent: m, children: o === !0 ? /* @__PURE__ */ r(
+  Z,
   {
-    isLoading: i,
-    limit: d,
+    isLoading: o,
+    limit: s,
     keyPrefix: n
   }
-) : t }), S = $(_), x = h((t, a) => {
+) : t }), N = I(O), ie = w((t, m) => {
   const {
-    icon: i,
-    title: d,
+    icon: o,
+    title: s,
     onButtonAction: n = () => {
     },
-    onSelectCard: m = () => {
+    onSelectCard: c = () => {
     },
-    buttonLink: p,
-    items: o,
+    buttonLink: u,
+    items: a,
     buttonText: l,
-    limit: g = 3,
-    isLoading: N = !1,
-    getImage: v = () => {
+    limit: d = 3,
+    isLoading: i = !1,
+    getImage: f = () => {
     },
-    readMoreText: w = "Read more"
-  } = t, B = R(), M = P(() => /* @__PURE__ */ r(u, { children: B === !0 ? o == null ? void 0 : o.map((e, c) => /* @__PURE__ */ r(
-    S,
+    readMoreText: S = "Read more",
+    componentName: k
+  } = t, M = W(), T = U(() => /* @__PURE__ */ r(v, { children: M === !0 ? a == null ? void 0 : a.map((e, p) => /* @__PURE__ */ r(
+    N,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: v(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: w,
+      readMoreText: S,
       options: e == null ? void 0 : e.options,
-      onCardClick: () => m(e == null ? void 0 : e.titleSlug)
+      onCardClick: ($, h) => c(e == null ? void 0 : e.titleSlug, h),
+      metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
     },
-    c
-  )) : o == null ? void 0 : o.slice(0, g).map((e, c) => /* @__PURE__ */ r(
-    S,
+    p
+  )) : a == null ? void 0 : a.slice(0, d).map((e, p) => /* @__PURE__ */ r(
+    N,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: v(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: w,
+      readMoreText: S,
       options: e == null ? void 0 : e.options,
-      onCardClick: () => m(e == null ? void 0 : e.titleSlug)
+      onCardClick: ($, h) => c(e == null ? void 0 : e.titleSlug, h),
+      metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
     },
-    c
-  )) }), [o]);
-  return /* @__PURE__ */ s(W, { ref: a, children: [
-    /* @__PURE__ */ s("div", { className: "regular-title", children: [
-      /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
-        b(i) && /* @__PURE__ */ r("i", { className: i }),
-        /* @__PURE__ */ r("span", { children: d })
+    p
+  )) }), [a]);
+  return /* @__PURE__ */ g(L, { ref: m, children: [
+    /* @__PURE__ */ g("div", { className: "regular-title", children: [
+      /* @__PURE__ */ g("div", { className: "regular-title-text", children: [
+        y(o) && /* @__PURE__ */ r("i", { className: o }),
+        /* @__PURE__ */ r("span", { children: s })
       ] }),
-      b(p) && /* @__PURE__ */ r(
-        j,
+      y(u) && /* @__PURE__ */ r(
+        _,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
-            var c;
-            (c = e == null ? void 0 : e.target) == null || c.blur(), n(p);
+            var p;
+            (p = e == null ? void 0 : e.target) == null || p.blur(), n(u);
           },
           borderRadius: "curved",
           className: "button-link",
@@ -195,17 +209,17 @@ const L = f.div`
         }
       )
     ] }),
-    /* @__PURE__ */ r(L, { limit: g, children: /* @__PURE__ */ r(
-      F,
+    /* @__PURE__ */ r(F, { limit: d, children: /* @__PURE__ */ r(
+      q,
       {
-        isLoading: N,
-        limit: g,
+        isLoading: i,
+        limit: d,
         keyPrefix: "explore-landing",
-        children: M
+        children: T
       }
     ) })
   ] });
 });
 export {
-  x as default
+  ie as default
 };

package/dist/BlogsSectionSimpleCentered.cjs

@@ -1,13 +1,13 @@
-"use strict";const t=require("react/jsx-runtime"),s=require("react"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),h=require("./consts-goSZX3xP.cjs"),x=require("./useDetectMobile-zkbzoOGV.cjs"),m=require("./utils-Dl9xPH4c.cjs"),w=require("./Button.cjs"),b=require("./index-BueKsXT8.cjs"),j=g.styled.div`
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./consts-goSZX3xP.cjs"),C=require("./useDetectMobile-zkbzoOGV.cjs"),h=require("./utils-Dl9xPH4c.cjs"),k=require("./Button.cjs"),x=require("./index-BueKsXT8.cjs"),y=p.styled.div`
   display: grid;
   grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,p=g.styled.div`
+`,b=p.styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -49,13 +49,13 @@
     min-height: 6rem;
     max-height: 6rem;
     border-radius: 0.75rem;
-    background-color: ${m.linearGradientAnimation("-90deg")};
+    background-color: ${h.linearGradientAnimation("-90deg")};
   }
 
-  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
     max-width: unset;
   }
-`,f=g.styled.div`
+`,j=p.styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -73,7 +73,7 @@
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${m.linearGradientAnimation("-90deg")};
+    background-color: ${h.linearGradientAnimation("-90deg")};
   }
 
   & .text-wr {
@@ -82,6 +82,6 @@
     font-weight: 400;
     line-height: 1.25rem;
     letter-spacing: 0.0156rem;
-    ${m.truncateTextInRows(3)}
+    ${h.truncateTextInRows(3)}
   }
-`,u=s.forwardRef((i,n)=>{const{title:r,image:o,text:l,buttonText:d,onCardClick:a}=i;return t.jsxs(p,{ref:n,className:"blog-card",onClick:a,children:[t.jsx(b.ProductImageWrapper,{src:o}),t.jsxs(f,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:l})]}),t.jsx(w,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:a,size:"medium",children:d})]})}),k=s.forwardRef((i,n)=>{const{onCardClick:r}=i;return t.jsxs(p,{className:"product-card",onClick:r,children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(f,{children:t.jsx("div",{className:"skeleton-title"})})]})}),y=({limit:i=3,isLoading:n=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(o,l)=>t.jsx(k,{isLoading:n},`${r}-skeleton-product-card-${l}`))}),C=({children:i,fallbackComponent:n=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:o,keyPrefix:l})=>t.jsx(s.Suspense,{fallbackComponent:n,children:r===!0?t.jsx(y,{isLoading:r,limit:o,keyPrefix:l}):i}),v=s.forwardRef((i,n)=>{const{items:r,limit:o=3,onSelectCard:l=()=>{},isLoading:d=!1}=i,a=x.useDetectMobile();return t.jsx(j,{ref:n,limit:o,children:t.jsx(C,{isLoading:d,limit:o,keyPrefix:"explore-landing",children:t.jsx(t.Fragment,{children:a===!0?r==null?void 0:r.map((e,c)=>t.jsx(u,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>l(e)},c)):r==null?void 0:r.slice(0,o).map((e,c)=>t.jsx(u,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>l(e)},c))})})})});module.exports=v;
+`,f=c.forwardRef((i,a)=>{const{title:r,image:n,text:o,buttonText:m,onCardClick:d,metadata:s}=i,e=c.useRef(),l=g=>{d(g,e)};return t.jsxs(b,{ref:e,name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,className:"blog-card",onClick:l,children:[t.jsx(x.ProductImageWrapper,{src:n}),t.jsxs(j,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:o})]}),t.jsx(k,{borderRadius:"curved",color:"gray",type:"button",btnType:"outline",onClick:l,size:"medium",children:m})]})}),v=c.forwardRef((i,a)=>{const{onCardClick:r}=i;return t.jsxs(b,{className:"product-card",onClick:r,children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(j,{children:t.jsx("div",{className:"skeleton-title"})})]})}),S=({limit:i=3,isLoading:a=!1,keyPrefix:r})=>t.jsx(t.Fragment,{children:Array.from({length:i},(n,o)=>t.jsx(v,{isLoading:a},`${r}-skeleton-product-card-${o}`))}),R=({children:i,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:r=!1,limit:n,keyPrefix:o})=>t.jsx(c.Suspense,{fallbackComponent:a,children:r===!0?t.jsx(S,{isLoading:r,limit:n,keyPrefix:o}):i}),$=c.forwardRef((i,a)=>{const{items:r,limit:n=3,onSelectCard:o=()=>{},isLoading:m=!1,componentName:d}=i,s=C.useDetectMobile();return t.jsx(y,{ref:a,limit:n,children:t.jsx(R,{isLoading:m,limit:n,keyPrefix:"explore-landing",children:t.jsx(t.Fragment,{children:s===!0?r==null?void 0:r.map((e,l)=>t.jsx(f,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,u)=>o(e,u),metadata:{name:d,accessor:e==null?void 0:e.accessor}},l)):r==null?void 0:r.slice(0,n).map((e,l)=>t.jsx(f,{title:e==null?void 0:e.title,image:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(g,u)=>o(e,u),metadata:{name:d,accessor:e==null?void 0:e.accessor}},l))})})})});module.exports=$;

package/dist/BlogsSectionSimpleCentered.js

@@ -1,21 +1,21 @@
-import { jsxs as c, jsx as t, Fragment as s } from "react/jsx-runtime";
-import { forwardRef as p, Suspense as k } from "react";
-import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as u } from "./consts-BuFChS64.js";
-import { u as C } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as f, p as y } from "./utils-BdsZgOUE.js";
-import v from "./Button.js";
-import { P as S } from "./index-CF3HhgvN.js";
-const x = g.div`
+import { jsxs as g, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as u, useRef as v, Suspense as S } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as b } from "./consts-BuFChS64.js";
+import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
+import { o as C, p as T } from "./utils-BdsZgOUE.js";
+import N from "./Button.js";
+import { P as B } from "./index-CF3HhgvN.js";
+const P = f.div`
   display: grid;
   grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${u + "px"}) {
+  @media (max-width: ${b + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, w = g.div`
+`, k = f.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -57,13 +57,13 @@ const x = g.div`
     min-height: 6rem;
     max-height: 6rem;
     border-radius: 0.75rem;
-    background-color: ${f("-90deg")};
+    background-color: ${C("-90deg")};
   }
 
-  @media (max-width: ${u + "px"}) {
+  @media (max-width: ${b + "px"}) {
     max-width: unset;
   }
-`, b = g.div`
+`, y = f.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -81,7 +81,7 @@ const x = g.div`
   & .skeleton-title {
     height: 1.75rem;
     width: 80%;
-    background-color: ${f("-90deg")};
+    background-color: ${C("-90deg")};
   }
 
   & .text-wr {
@@ -90,95 +90,110 @@ const x = g.div`
     font-weight: 400;
     line-height: 1.25rem;
     letter-spacing: 0.0156rem;
-    ${y(3)}
+    ${T(3)}
   }
-`, h = p((i, n) => {
-  const { title: r, image: o, text: a, buttonText: m, onCardClick: l } = i;
-  return /* @__PURE__ */ c(w, { ref: n, className: "blog-card", onClick: l, children: [
-    /* @__PURE__ */ t(S, { src: o }),
-    /* @__PURE__ */ c(b, { children: [
-      /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
-      /* @__PURE__ */ t("div", { className: "text-wr", children: a })
-    ] }),
-    /* @__PURE__ */ t(
-      v,
-      {
-        borderRadius: "curved",
-        color: "gray",
-        type: "button",
-        btnType: "outline",
-        onClick: l,
-        size: "medium",
-        children: m
-      }
-    )
-  ] });
-}), $ = p((i, n) => {
+`, w = u((i, l) => {
+  const { title: r, image: o, text: n, buttonText: d, onCardClick: c, metadata: a } = i, e = v(), m = (s) => {
+    c(s, e);
+  };
+  return /* @__PURE__ */ g(
+    k,
+    {
+      ref: e,
+      name: a == null ? void 0 : a.name,
+      "data-accessor": a == null ? void 0 : a.accessor,
+      className: "blog-card",
+      onClick: m,
+      children: [
+        /* @__PURE__ */ t(B, { src: o }),
+        /* @__PURE__ */ g(y, { children: [
+          /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
+          /* @__PURE__ */ t("div", { className: "text-wr", children: n })
+        ] }),
+        /* @__PURE__ */ t(
+          N,
+          {
+            borderRadius: "curved",
+            color: "gray",
+            type: "button",
+            btnType: "outline",
+            onClick: m,
+            size: "medium",
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}), R = u((i, l) => {
   const { onCardClick: r } = i;
   return (
     // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ c(w, { className: "product-card", onClick: r, children: [
+    /* @__PURE__ */ g(k, { className: "product-card", onClick: r, children: [
       /* @__PURE__ */ t("div", { className: "skeleton-img" }),
-      /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
+      /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
     ] })
   );
-}), T = ({ limit: i = 3, isLoading: n = !1, keyPrefix: r }) => /* @__PURE__ */ t(s, { children: Array.from({ length: i }, (o, a) => /* @__PURE__ */ t(
-  $,
+}), z = ({ limit: i = 3, isLoading: l = !1, keyPrefix: r }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (o, n) => /* @__PURE__ */ t(
+  R,
   {
-    isLoading: n
+    isLoading: l
   },
-  `${r}-skeleton-product-card-${a}`
-)) }), B = ({
+  `${r}-skeleton-product-card-${n}`
+)) }), I = ({
   children: i,
-  fallbackComponent: n = /* @__PURE__ */ t(s, {}),
+  fallbackComponent: l = /* @__PURE__ */ t(h, {}),
   isLoading: r = !1,
   limit: o,
-  keyPrefix: a
-}) => /* @__PURE__ */ t(k, { fallbackComponent: n, children: r === !0 ? /* @__PURE__ */ t(
-  T,
+  keyPrefix: n
+}) => /* @__PURE__ */ t(S, { fallbackComponent: l, children: r === !0 ? /* @__PURE__ */ t(
+  z,
   {
     isLoading: r,
     limit: o,
-    keyPrefix: a
+    keyPrefix: n
   }
-) : i }), _ = p((i, n) => {
+) : i }), F = u((i, l) => {
   const {
     items: r,
     limit: o = 3,
-    onSelectCard: a = () => {
+    onSelectCard: n = () => {
     },
-    isLoading: m = !1
-  } = i, l = C();
-  return /* @__PURE__ */ t(x, { ref: n, limit: o, children: /* @__PURE__ */ t(
-    B,
+    isLoading: d = !1,
+    componentName: c
+  } = i, a = $();
+  return /* @__PURE__ */ t(P, { ref: l, limit: o, children: /* @__PURE__ */ t(
+    I,
     {
-      isLoading: m,
+      isLoading: d,
       limit: o,
       keyPrefix: "explore-landing",
-      children: /* @__PURE__ */ t(s, { children: l === !0 ? r == null ? void 0 : r.map((e, d) => /* @__PURE__ */ t(
-        h,
+      children: /* @__PURE__ */ t(h, { children: a === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
+        w,
         {
           title: e == null ? void 0 : e.title,
           image: (e == null ? void 0 : e.image) || null,
           text: e == null ? void 0 : e.text,
           buttonText: e == null ? void 0 : e.buttonText,
-          onCardClick: () => a(e)
+          onCardClick: (s, p) => n(e, p),
+          metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
         },
-        d
-      )) : r == null ? void 0 : r.slice(0, o).map((e, d) => /* @__PURE__ */ t(
-        h,
+        m
+      )) : r == null ? void 0 : r.slice(0, o).map((e, m) => /* @__PURE__ */ t(
+        w,
         {
           title: e == null ? void 0 : e.title,
           image: (e == null ? void 0 : e.image) || null,
           text: e == null ? void 0 : e.text,
           buttonText: e == null ? void 0 : e.buttonText,
-          onCardClick: () => a(e)
+          onCardClick: (s, p) => n(e, p),
+          metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
         },
-        d
+        m
       )) })
     }
   ) });
 });
 export {
-  _ as default
+  F as default
 };

package/dist/BlogsSectionWithFilters.cjs

@@ -1,12 +1,12 @@
-"use strict";const e=require("react/jsx-runtime"),d=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),w=require("./consts-goSZX3xP.cjs"),B=require("./useDetectMobile-zkbzoOGV.cjs"),c=require("./utils-Dl9xPH4c.cjs"),M=require("./style-lSjkOR95.cjs"),R=require("./Button.cjs"),W=require("./Link.cjs"),A=require("./index-BueKsXT8.cjs"),I=require("./index-D0xXo7W6.cjs"),P=p.styled.div`
+"use strict";const t=require("react/jsx-runtime"),l=require("react"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./consts-goSZX3xP.cjs"),W=require("./useDetectMobile-zkbzoOGV.cjs"),m=require("./utils-Dl9xPH4c.cjs"),A=require("./style-lSjkOR95.cjs"),I=require("./Button.cjs"),_=require("./Link.cjs"),z=require("./index-BueKsXT8.cjs"),E=require("./index-D0xXo7W6.cjs"),P=x.styled.div`
   display: grid;
-  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${n=>`repeat(${n.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,k=p.styled.div`
+`,C=x.styled.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -39,16 +39,16 @@
     min-height: 3.3125rem;
     max-height: 3.3125rem;
     border-radius: 0.75rem;
-    background-color: ${c.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
   }
-`,v=p.styled.div`
+`,N=x.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -62,19 +62,19 @@
   & .skeleton-title {
     height: 1.5rem;
     width: 80%;
-    background-color: ${c.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   & .skeleton-action {
     height: 1.25rem;
     width: 20%;
-    background-color: ${c.linearGradientAnimation("-90deg")};
+    background-color: ${m.linearGradientAnimation("-90deg")};
   }
 
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${c.truncateTextInRows(3)}
+    ${m.truncateTextInRows(3)}
   }
-`,_=d.forwardRef((i,s)=>{const{title:o,imageUrl:a,text:r,buttonText:u,onCardClick:l}=i;return e.jsxs(k,{ref:s,className:"blog-card",onClick:l,children:[e.jsxs(v,{children:[e.jsx("div",{className:"text-wr-title",children:o}),e.jsx("div",{className:"text-wr",children:r}),e.jsx(W,{color:"gray",onClick:l,children:u})]}),e.jsx(A.ProductImageWrapper,{src:a})]})}),z=d.forwardRef(({},i)=>e.jsxs(k,{className:"blog-card",children:[e.jsxs(v,{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"})]})),E=({limit:i=3,isLoading:s=!1,keyPrefix:o})=>e.jsx(e.Fragment,{children:Array.from({length:i},(a,r)=>e.jsx(z,{isLoading:s},`${o}-skeleton-product-card-${r}`))}),F=({children:i,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:o=!1,limit:a,keyPrefix:r})=>e.jsx(d.Suspense,{fallbackComponent:s,children:o===!0?e.jsx(E,{isLoading:o,limit:a,keyPrefix:r}):i}),f=d.memo(_),O=d.forwardRef((i,s)=>{const{icon:o,title:a,items:r,buttonText:u,limit:l=3,options:m,selectedOption:y=[],onButtonAction:S=()=>{},buttonLink:x,onSelectOption:b=()=>{},onSelectAll:N=()=>{},isLoading:C=!1,onSelectCard:g=()=>{},productsToolbarName:q="All",allButton:T=!1}=i,j=B.useDetectMobile(),$=d.useMemo(()=>{var n;return e.jsx(e.Fragment,{children:j===!0?r==null?void 0:r.map((t,h)=>e.jsx(f,{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:()=>g(t)},h)):(n=r==null?void 0:r.slice(0,l))==null?void 0:n.map((t,h)=>e.jsx(f,{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:()=>g(t)},h))})},[r,j,l,g]);return e.jsxs(M.TitleWithOptionsSectionWrapper,{ref:s,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[c.isDefinedNotEmptyString(o)&&e.jsx("i",{className:o}),e.jsx("span",{children:a})]}),c.isDefinedNotEmptyString(x)&&e.jsx(R,{type:"button",btnType:"tinted",color:"neutral",onClick:n=>{var t;(t=n==null?void 0:n.target)==null||t.blur(),S(x)},borderRadius:"curved",children:u})]}),(m==null?void 0:m.length)>0&&e.jsx(I.SelectBar,{items:m,selectedIds:y,onRemove:n=>{b(n)},onSelect:n=>{b(n)},onSelectAll:N,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:q,allButton:T}),e.jsx(P,{limit:l,children:e.jsx(F,{isLoading:C,limit:l,keyPrefix:"explore-landing",children:$})})]})});module.exports=O;
+`,F=l.forwardRef((n,a)=>{const{title:s,imageUrl:c,text:r,buttonText:p,onCardClick:d,metadata:i}=n,u=l.useRef(),g=h=>{d(h,u)};return t.jsxs(C,{ref:u,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:g,children:[t.jsxs(N,{children:[t.jsx("div",{className:"text-wr-title",children:s}),t.jsx("div",{className:"text-wr",children:r}),t.jsx(_,{color:"gray",onClick:g,children:p})]}),t.jsx(z.ProductImageWrapper,{src:c})]})}),O=l.forwardRef(({},n)=>t.jsxs(C,{className:"blog-card",children:[t.jsxs(N,{children:[t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"text-wr"}),t.jsx("div",{className:"skeleton-action"})]}),t.jsx("div",{className:"skeleton-img"})]})),D=({limit:n=3,isLoading:a=!1,keyPrefix:s})=>t.jsx(t.Fragment,{children:Array.from({length:n},(c,r)=>t.jsx(O,{isLoading:a},`${s}-skeleton-product-card-${r}`))}),G=({children:n,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:s=!1,limit:c,keyPrefix:r})=>t.jsx(l.Suspense,{fallbackComponent:a,children:s===!0?t.jsx(D,{isLoading:s,limit:c,keyPrefix:r}):n}),y=l.memo(F),L=l.forwardRef((n,a)=>{const{icon:s,title:c,items:r,buttonText:p,limit:d=3,options:i,selectedOption:u=[],onButtonAction:g=()=>{},buttonLink:h,onSelectOption:w=()=>{},onSelectAll:q=()=>{},isLoading:B=!1,onSelectCard:b=()=>{},productsToolbarName:T="All",allButton:$=!1,componentName:k}=n,v=W.useDetectMobile(),R=l.useMemo(()=>{var o;return t.jsx(t.Fragment,{children:v===!0?r==null?void 0:r.map((e,f)=>t.jsx(y,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(M,j)=>b(e,j),metadata:{name:k,accessor:e==null?void 0:e.accessor}},f)):(o=r==null?void 0:r.slice(0,d))==null?void 0:o.map((e,f)=>t.jsx(y,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(M,j)=>b(e,j),metadata:{name:k,accessor:e==null?void 0:e.accessor}},f))})},[r,v,d,b]);return t.jsxs(A.TitleWithOptionsSectionWrapper,{ref:a,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[m.isDefinedNotEmptyString(s)&&t.jsx("i",{className:s}),t.jsx("span",{children:c})]}),m.isDefinedNotEmptyString(h)&&t.jsx(I,{type:"button",btnType:"tinted",color:"neutral",onClick:o=>{var e;(e=o==null?void 0:o.target)==null||e.blur(),g(h)},borderRadius:"curved",children:p})]}),(i==null?void 0:i.length)>0&&t.jsx(E.SelectBar,{items:i,selectedIds:u,onRemove:o=>{w(o)},onSelect:o=>{w(o)},onSelectAll:q,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:T,allButton:$}),t.jsx(P,{limit:d,children:t.jsx(G,{isLoading:B,limit:d,keyPrefix:"explore-landing",children:R})})]})});module.exports=L;