@lanaco/lnc-react-ui 4.0.169 → 4.0.171

package/dist/BlogsSectionWithFilters.js

@@ -1,23 +1,24 @@
-import { jsxs as n, jsx as t, Fragment as v } from "react/jsx-runtime";
-import { forwardRef as w, useRef as j, Suspense as E, memo as F, useMemo as L } from "react";
-import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as $ } from "./consts-BuFChS64.js";
-import { u as U } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as k, p as _, k as T } from "./utils-BdsZgOUE.js";
-import { T as D } from "./style-DKAOBWn3.js";
-import G from "./Button.js";
-import H from "./Link.js";
-import { P as K } from "./index-CF3HhgvN.js";
-import { S as X } from "./index-dXWRbvgi.js";
-const Z = S.div`
+import { jsxs as n, jsx as t, Fragment as B } from "react/jsx-runtime";
+import { forwardRef as _, useRef as F, Suspense as O, memo as j, useMemo as A } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as k } from "./consts-BuFChS64.js";
+import { u as E } from "./useDetectMobile-Bkvj0VMa.js";
+import { o as U, k as v } from "./utils-DHfRApMf.js";
+import { T as D } from "./style-D3pIrH3v.js";
+import K from "./Button.js";
+import G from "./Link.js";
+import { P as H } from "./index-BbltNcou.js";
+import { S as P } from "./index-BMOLVn8O.js";
+import { S as X, a as N, b as s } from "./style-CXMUA6cI.js";
+const Z = f.div`
   display: grid;
-  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${$ + "px"}) {
+  @media (max-width: ${k + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, W = S.div`
+`, q = f.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -44,22 +45,13 @@ const Z = S.div`
     object-fit: cover;
   }
 
-  & .skeleton-img {
-    max-width: 3.3125rem;
-    min-width: 3.3125rem;
-    min-height: 3.3125rem;
-    max-height: 3.3125rem;
-    border-radius: 0.75rem;
-    background-color: ${k("-90deg")};
-  }
-
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${$ + "px"}) {
+  @media (max-width: ${k + "px"}) {
   }
-`, M = S.div`
+`, J = f.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -70,171 +62,218 @@ const Z = S.div`
     font-size: 1rem;
   }
 
-  & .skeleton-title {
-    height: 1.5rem;
-    width: 80%;
-    background-color: ${k("-90deg")};
-  }
-
-  & .skeleton-action {
-    height: 1.25rem;
-    width: 20%;
-    background-color: ${k("-90deg")};
-  }
-
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${_(3)}
+    ${U(3)}
   }
-`, q = w((i, c) => {
-  const { title: l, imageUrl: s, text: r, buttonText: h, onCardClick: m, metadata: o } = i, d = j(), p = (g) => {
-    m(g, d);
+`, Q = _((r, c) => {
+  const { title: l, imageUrl: d, text: a, buttonText: p, onCardClick: m, metadata: o } = r, h = F(), u = (g) => {
+    m(g, h);
   };
   return /* @__PURE__ */ n(
-    W,
+    q,
     {
-      ref: d,
+      ref: h,
       name: o == null ? void 0 : o.name,
       "data-accessor": o == null ? void 0 : o.accessor,
       className: "blog-card",
-      onClick: p,
+      onClick: u,
       children: [
-        /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ n(J, { children: [
           /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
-          /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
-          /* @__PURE__ */ t(H, { color: "gray", onClick: p, children: h })
+          /* @__PURE__ */ t("div", { className: "text-wr", children: a }),
+          /* @__PURE__ */ t(G, { color: "gray", onClick: u, children: p })
         ] }),
-        /* @__PURE__ */ t(K, { src: s })
+        /* @__PURE__ */ t(H, { src: d })
       ]
     }
   );
-}), J = w(({}, i) => /* @__PURE__ */ n(W, { className: "blog-card", children: [
-  /* @__PURE__ */ n(M, { 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" })
-] })), Q = ({ limit: i = 3, isLoading: c = !1, keyPrefix: l }) => /* @__PURE__ */ t(v, { children: Array.from({ length: i }, (s, r) => /* @__PURE__ */ t(
-  J,
-  {
-    isLoading: c
-  },
-  `${l}-skeleton-product-card-${r}`
-)) }), V = ({
-  children: i,
-  fallbackComponent: c = /* @__PURE__ */ t(v, {}),
-  isLoading: l = !1,
-  limit: s,
-  keyPrefix: r
-}) => /* @__PURE__ */ t(E, { fallbackComponent: c, children: l === !0 ? /* @__PURE__ */ t(
-  Q,
-  {
-    isLoading: l,
-    limit: s,
-    keyPrefix: r
+}), V = f(X)`
+  @media (max-width: ${k + "px"}) {
+    & .skeleton__tags {
+      & > div {
+        width: 100%;
+      }
+    }
+
+    & .skeleton__cards {
+      flex-direction: column;
+
+      & > div {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          #f4f6fb 40%,
+          #f4f6fb 100%
+        );
+
+        box-shadow: none;
+      }
+    }
   }
-) : i }), B = F(q), se = w((i, c) => {
+`, Y = ({ keyPrefix: r }) => /* @__PURE__ */ n(V, { children: [
+  /* @__PURE__ */ n(N, { className: "skeleton__tags", children: [
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "2.25rem",
+        width: "128px",
+        borderRadius: "1rem"
+      },
+      `${r}-1`
+    ),
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "2.25rem",
+        width: "128px",
+        borderRadius: "1rem"
+      },
+      `${r}-2`
+    ),
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "2.25rem",
+        width: "128px",
+        borderRadius: "1rem"
+      },
+      `${r}-3`
+    )
+  ] }),
+  /* @__PURE__ */ n(N, { className: "skeleton__cards", children: [
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "10.375rem",
+        borderRadius: "0.75rem"
+      },
+      `${r}-4`
+    ),
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "10.375rem",
+        borderRadius: "0.75rem"
+      },
+      `${r}-5`
+    ),
+    /* @__PURE__ */ t(
+      s,
+      {
+        height: "10.375rem",
+        borderRadius: "0.75rem"
+      },
+      `${r}-6`
+    )
+  ] })
+] }), x = ({
+  keyPrefix: r,
+  isLoading: c = !1,
+  fallbackComponent: l = /* @__PURE__ */ t(B, {}),
+  children: d
+}) => /* @__PURE__ */ t(O, { fallbackComponent: l, children: c === !0 ? /* @__PURE__ */ t(Y, { keyPrefix: r }) : d }), W = j(Q), pe = _((r, c) => {
   const {
     icon: l,
-    title: s,
-    items: r,
-    buttonText: h,
+    title: d,
+    items: a,
+    buttonText: p,
     limit: m = 3,
     options: o,
-    selectedOption: d = [],
-    onButtonAction: p = () => {
+    selectedOption: h = [],
+    onButtonAction: u = () => {
     },
     buttonLink: g,
-    onSelectOption: y = () => {
+    onSelectOption: C = () => {
     },
-    onSelectAll: z = () => {
+    onSelectAll: y = () => {
     },
-    isLoading: P = !1,
-    onSelectCard: u = () => {
+    isLoading: R = !1,
+    onSelectCard: b = () => {
     },
-    productsToolbarName: R = "All",
-    allButton: A = !1,
-    componentName: C
-  } = i, N = U(), I = L(() => {
-    var a;
-    return /* @__PURE__ */ t(v, { children: N === !0 ? r == null ? void 0 : r.map((e, f) => /* @__PURE__ */ t(
-      B,
+    productsToolbarName: M = "All",
+    allButton: z = !1,
+    componentName: T
+  } = r, $ = E(), I = A(() => {
+    var i;
+    return /* @__PURE__ */ t(B, { children: $ === !0 ? a == null ? void 0 : a.map((e, w) => /* @__PURE__ */ t(
+      W,
       {
         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: (O, b) => u(e, b),
-        metadata: { name: C, accessor: e == null ? void 0 : e.accessor }
+        onCardClick: (L, S) => b(e, S),
+        metadata: { name: T, accessor: e == null ? void 0 : e.accessor }
       },
-      f
-    )) : (a = r == null ? void 0 : r.slice(0, m)) == null ? void 0 : a.map((e, f) => /* @__PURE__ */ t(
-      B,
+      w
+    )) : (i = a == null ? void 0 : a.slice(0, m)) == null ? void 0 : i.map((e, w) => /* @__PURE__ */ t(
+      W,
       {
         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: (O, b) => u(e, b),
-        metadata: { name: C, accessor: e == null ? void 0 : e.accessor }
+        onCardClick: (L, S) => b(e, S),
+        metadata: { name: T, accessor: e == null ? void 0 : e.accessor }
       },
-      f
+      w
     )) });
-  }, [r, N, m, u]);
+  }, [a, $, m, b]);
   return /* @__PURE__ */ n(D, { ref: c, children: [
     /* @__PURE__ */ n("div", { className: "regular-title", children: [
       /* @__PURE__ */ n("div", { className: "regular-title-text", children: [
-        T(l) && /* @__PURE__ */ t("i", { className: l }),
-        /* @__PURE__ */ t("span", { children: s })
+        v(l) && /* @__PURE__ */ t("i", { className: l }),
+        /* @__PURE__ */ t("span", { children: d })
       ] }),
-      T(g) && /* @__PURE__ */ t(
-        G,
+      v(p) && v(g) && !R && /* @__PURE__ */ t(
+        K,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
-          onClick: (a) => {
+          onClick: (i) => {
             var e;
-            (e = a == null ? void 0 : a.target) == null || e.blur(), p(g);
+            (e = i == null ? void 0 : i.target) == null || e.blur(), u(g);
           },
           borderRadius: "curved",
-          children: h
+          children: p
         }
       )
     ] }),
-    (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(
-      X,
-      {
-        items: o,
-        selectedIds: d,
-        onRemove: (a) => {
-          y(a);
-        },
-        onSelect: (a) => {
-          y(a);
-        },
-        onSelectAll: z,
-        labelKey: "name",
-        valueKey: "code",
-        noMargin: !0,
-        productsToolbarName: R,
-        allButton: A
-      }
-    ),
-    /* @__PURE__ */ t(Z, { limit: m, children: /* @__PURE__ */ t(
-      V,
+    /* @__PURE__ */ n(
+      x,
       {
-        isLoading: P,
-        limit: m,
-        keyPrefix: "explore-landing",
-        children: I
+        isLoading: R,
+        keyPrefix: "blogs-with-filters-skeleton",
+        children: [
+          (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(
+            P,
+            {
+              items: o,
+              selectedIds: h,
+              onRemove: (i) => {
+                C(i);
+              },
+              onSelect: (i) => {
+                C(i);
+              },
+              onSelectAll: y,
+              labelKey: "name",
+              valueKey: "code",
+              noMargin: !0,
+              productsToolbarName: M,
+              allButton: z
+            }
+          ),
+          /* @__PURE__ */ t(Z, { limit: m, children: I })
+        ]
       }
-    ) })
+    )
   ] });
 });
 export {
-  se as default
+  pe as default
 };

package/dist/BrandHitsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("react"),m=require("./utils-Dl9xPH4c.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./consts-goSZX3xP.cjs"),_=d.styled.div`
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),m=require("./utils-Dl9xPH4c.cjs"),d=require("./emotion-styled.browser.esm-BtEseadx.cjs"),h=require("./consts-goSZX3xP.cjs"),n=require("./style-BAcV7F53.cjs"),g=d.styled.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
@@ -12,7 +12,7 @@
     height: auto;
   }
 
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -22,16 +22,7 @@
       height: auto;
     }
   }
-`,g=d.styled.div`
-  width: 7.5rem;
-  height: 3.5rem;
-  background: ${m.linearGradientAnimation("-90deg")};
-
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-`,w=o.forwardRef(({imageComponent:t,image:i,onSelectCard:a},n)=>e.jsx(_,{ref:n,children:m.isDefined(t)?t:e.jsx("img",{src:i,className:"wrapper__image",onClick:a})})),x=o.forwardRef(({},t)=>e.jsx(g,{})),f=d.styled.div`
+`,w=o.forwardRef(({imageComponent:r,image:i,onSelectCard:t},s)=>e.jsx(g,{ref:s,children:m.isDefined(r)?r:e.jsx("img",{src:i,className:"wrapper__image",onClick:t})})),_=d.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -80,7 +71,7 @@
     }
   }
 
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;
@@ -91,4 +82,9 @@
       }
     }
   }
-`,u=o.forwardRef(({title:t,subtitle:i,items:a=[],isLoading:n=!1,onSelectCard:s=()=>{}},h)=>{var c;return e.jsxs(f,{ref:h,children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),i&&e.jsx("div",{className:"wrapper__subtitle",children:i})]}),e.jsx("div",{className:"wrapper__content",children:n?(c=Array.from("12345"))==null?void 0:c.map((r,p)=>e.jsx(x,{},`brand-hit-card-skeleton__${p+1}`)):a==null?void 0:a.map((r,p)=>e.jsx(w,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,onSelectCard:()=>s==null?void 0:s(r),className:"wrapper__item"},`brand-hit-card__${p+1}`))})]})});module.exports=u;
+`,x=d.styled(n.SkeletonRowWrapper)`
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+`,u=({keyPrefix:r})=>e.jsxs(x,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[e.jsx(n.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-1`),e.jsx(n.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-2`),e.jsx(n.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-3`),e.jsx(n.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-4`),e.jsx(n.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-5`)]}),f=({keyPrefix:r,isLoading:i=!1,fallbackComponent:t=e.jsx(e.Fragment,{}),children:s})=>e.jsx(o.Suspense,{fallbackComponent:t,children:i===!0?e.jsx(u,{keyPrefix:r}):s}),j=o.forwardRef(({title:r,subtitle:i,items:t=[],isLoading:s=!1,onSelectCard:l=()=>{}},p)=>e.jsxs(_,{ref:p,children:[e.jsxs("div",{className:"wrapper__heading",children:[r&&e.jsx("div",{className:"wrapper__title",children:r}),i&&e.jsx("div",{className:"wrapper__subtitle",children:i})]}),e.jsx(f,{isLoading:s,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:t==null?void 0:t.map((a,c)=>e.jsx(w,{image:a==null?void 0:a.image,imageComponent:a==null?void 0:a.imageComponent,onSelectCard:()=>l==null?void 0:l(a),className:"wrapper__item"},`brand-hit-card__${c+1}`))})})]}));module.exports=j;

package/dist/BrandHitsSection.js

@@ -1,9 +1,10 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { o as _, l as g } from "./utils-BdsZgOUE.js";
-import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as l } from "./consts-BuFChS64.js";
-const w = d.div`
+import { jsx as e, jsxs as o, Fragment as g } from "react/jsx-runtime";
+import { forwardRef as h, Suspense as w } from "react";
+import { l as _ } from "./utils-DHfRApMf.js";
+import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as d } from "./consts-BuFChS64.js";
+import { a as f, b as m } from "./style-CXMUA6cI.js";
+const u = s.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
@@ -17,7 +18,7 @@ const w = d.div`
     height: auto;
   }
 
-  @media (max-width: ${l + "px"}) {
+  @media (max-width: ${d + "px"}) {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -27,18 +28,9 @@ const w = d.div`
       height: auto;
     }
   }
-`, f = d.div`
-  width: 7.5rem;
-  height: 3.5rem;
-  background: ${_("-90deg")};
-
-  @media (max-width: ${l + "px"}) {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-`, x = o(
-  ({ imageComponent: a, image: i, onSelectCard: t }, n) => /* @__PURE__ */ r(w, { ref: n, children: g(a) ? a : /* @__PURE__ */ r("img", { src: i, className: "wrapper__image", onClick: t }) })
-), u = o(({}, a) => /* @__PURE__ */ r(f, {})), v = d.div`
+`, x = h(
+  ({ imageComponent: r, image: i, onSelectCard: a }, n) => /* @__PURE__ */ e(u, { ref: n, children: _(r) ? r : /* @__PURE__ */ e("img", { src: i, className: "wrapper__image", onClick: a }) })
+), v = s.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -87,7 +79,7 @@ const w = d.div`
     }
   }
 
-  @media (max-width: ${l + "px"}) {
+  @media (max-width: ${d + "px"}) {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;
@@ -98,32 +90,88 @@ const w = d.div`
       }
     }
   }
-`, B = o(
-  ({ title: a, subtitle: i, items: t = [], isLoading: n = !1, onSelectCard: p = () => {
-  } }, c) => {
-    var s;
-    return /* @__PURE__ */ h(v, { ref: c, children: [
-      /* @__PURE__ */ h("div", { className: "wrapper__heading", children: [
-        a && /* @__PURE__ */ r("div", { className: "wrapper__title", children: a }),
-        i && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: i })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "wrapper__content", children: n ? (s = Array.from("12345")) == null ? void 0 : s.map((e, m) => /* @__PURE__ */ r(
-        u,
-        {},
-        `brand-hit-card-skeleton__${m + 1}`
-      )) : t == null ? void 0 : t.map((e, m) => /* @__PURE__ */ r(
-        x,
-        {
-          image: e == null ? void 0 : e.image,
-          imageComponent: e == null ? void 0 : e.imageComponent,
-          onSelectCard: () => p == null ? void 0 : p(e),
-          className: "wrapper__item"
-        },
-        `brand-hit-card__${m + 1}`
-      )) })
-    ] });
+`, b = s(f)`
+  @media (max-width: ${d + "px"}) {
+    gap: 1rem;
+    flex-wrap: wrap;
   }
+`, $ = ({ keyPrefix: r }) => /* @__PURE__ */ o(b, { justifyContent: "center", alignItems: "center", gap: "3rem", children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      height: "4rem",
+      width: "7.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-1`
+  ),
+  /* @__PURE__ */ e(
+    m,
+    {
+      height: "4rem",
+      width: "7.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-2`
+  ),
+  /* @__PURE__ */ e(
+    m,
+    {
+      height: "4rem",
+      width: "7.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-3`
+  ),
+  /* @__PURE__ */ e(
+    m,
+    {
+      height: "4rem",
+      width: "7.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-4`
+  ),
+  /* @__PURE__ */ e(
+    m,
+    {
+      height: "4rem",
+      width: "7.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-5`
+  )
+] }), y = ({
+  keyPrefix: r,
+  isLoading: i = !1,
+  fallbackComponent: a = /* @__PURE__ */ e(g, {}),
+  children: n
+}) => /* @__PURE__ */ e(w, { fallbackComponent: a, children: i === !0 ? /* @__PURE__ */ e($, { keyPrefix: r }) : n }), I = h(
+  ({ title: r, subtitle: i, items: a = [], isLoading: n = !1, onSelectCard: p = () => {
+  } }, l) => /* @__PURE__ */ o(v, { ref: l, children: [
+    /* @__PURE__ */ o("div", { className: "wrapper__heading", children: [
+      r && /* @__PURE__ */ e("div", { className: "wrapper__title", children: r }),
+      i && /* @__PURE__ */ e("div", { className: "wrapper__subtitle", children: i })
+    ] }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        isLoading: n,
+        keyPrefix: "brand-hits-skeleton",
+        children: /* @__PURE__ */ e("div", { className: "wrapper__content", children: a == null ? void 0 : a.map((t, c) => /* @__PURE__ */ e(
+          x,
+          {
+            image: t == null ? void 0 : t.image,
+            imageComponent: t == null ? void 0 : t.imageComponent,
+            onSelectCard: () => p == null ? void 0 : p(t),
+            className: "wrapper__item"
+          },
+          `brand-hit-card__${c + 1}`
+        )) })
+      }
+    )
+  ] })
 );
 export {
-  B as default
+  I as default
 };

package/dist/Breadcrumbs.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as u, Fragment as A } from "react/jsx-runtime";
 import { forwardRef as N, useState as O } from "react";
 import { P as t } from "./index-CblbdqjE.js";
 import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as P, b as S } from "./utils-BdsZgOUE.js";
+import { c as P, b as S } from "./utils-DHfRApMf.js";
 import v from "./Icon.js";
 import { u as R } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const $ = c.div`

package/dist/Button.js

@@ -3,7 +3,7 @@ import { forwardRef as q } from "react";
 import { P as n } from "./index-CblbdqjE.js";
 import { i as T } from "./index-6RFrSPs_.js";
 import { s as u } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { c as O, b as t, d as r, h as z, e as I, a as A } from "./utils-BdsZgOUE.js";
+import { c as O, b as t, d as r, h as z, e as I, a as A } from "./utils-DHfRApMf.js";
 import w from "./Icon.js";
 import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const x = {

package/dist/ButtonGroup.js

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
 import { s as i } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { P as t } from "./index-CblbdqjE.js";
-import { b as o, a as b } from "./utils-BdsZgOUE.js";
+import { b as o, a as b } from "./utils-DHfRApMf.js";
 import { u as l } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const s = i.div`
   display: inline-flex;

package/dist/CalorieCalculatorSection.js

@@ -9,7 +9,7 @@ import _ from "./DropdownItem.js";
 import K from "./DropdownMenu.js";
 import X from "./IconButton.js";
 import Z from "./BannerSectionWithList.js";
-import { y as q } from "./utils-BdsZgOUE.js";
+import { y as q } from "./utils-DHfRApMf.js";
 const J = y.div`
   display: flex;
   flex-direction: column;