@lanaco/lnc-react-ui 4.0.32 → 4.0.33

package/dist/BlogsSectionWithFilters.js

@@ -0,0 +1,559 @@
+import { jsxs as c, jsx as t, Fragment as _ } from "react/jsx-runtime";
+import ee, { forwardRef as C, useState as $, useMemo as re, useEffect as j, useRef as x, useImperativeHandle as te } from "react";
+import { n as I } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as R } from "./consts-DNVz1x1I.js";
+import { u as P } from "./useDetectMobile-BookNOsk.js";
+import { m as z, t as le, l as oe, k as G } from "./utils-xpQsPsCa.js";
+import { T as ie } from "./style-D6sNCRwG.js";
+import H from "./Button.js";
+import ne from "./Link.js";
+import { P as o } from "./index-S5Cd7WrG.js";
+import ae from "./FlexBox.js";
+import L from "./IconButton.js";
+import { useTheme as se } from "./ThemeProvider.js";
+import { u as ce } from "./useUpdateEffect-CuYWz7EA.js";
+import de from "./Icon.js";
+const me = I.div`
+  display: grid;
+  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${R + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`, U = I.div`
+  display: flex;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 10.375rem;
+  max-height: 10.375rem;
+
+  & img {
+    max-width: 3.3125rem;
+    min-width: 3.3125rem;
+    min-height: 3.3125rem;
+    max-height: 3.3125rem;
+    border-radius: 0.75rem;
+    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: ${z("-90deg")};
+  }
+
+  & a {
+    margin-top: auto;
+  }
+
+  @media (max-width: ${R + "px"}) {
+  }
+`, X = I.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .skeleton-title {
+    height: 1.5rem;
+    width: 80%;
+    background-color: ${z("-90deg")};
+  }
+
+  & .skeleton-action {
+    height: 1.25rem;
+    width: 20%;
+    background-color: ${z("-90deg")};
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--gray-700, #4e555f);
+    ${le(3)}
+  }
+`;
+C(({}, r) => /* @__PURE__ */ c(U, { className: "blog-card", children: [
+  /* @__PURE__ */ c(X, { 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" })
+] }));
+const F = C((r, b) => {
+  const { title: a, image: n, text: i, buttonText: u, onCardClick: s } = r;
+  return (
+    // <SimpleBlogCardHorizontalSkeleton />
+    /* @__PURE__ */ c(U, { className: "blog-card", onClick: s, children: [
+      /* @__PURE__ */ c(X, { children: [
+        /* @__PURE__ */ t("div", { className: "text-wr-title", children: a }),
+        /* @__PURE__ */ t("div", { className: "text-wr", children: i }),
+        /* @__PURE__ */ t(ne, { color: "gray", onClick: s, children: u })
+      ] }),
+      /* @__PURE__ */ t("img", { src: n })
+    ] })
+  );
+}), ue = I.div`
+  position: relative;
+  padding: ${(r) => r.padding};
+
+  & button {
+    white-space: nowrap;
+  }
+
+  & .badge-button {
+    ${(r) => r.showTimesBtn === !0 && "padding-left: 0.5rem; padding-right: 0.5rem;"}
+  }
+
+  & .gradient {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 4;
+    transition: ${"0.3s"};
+    right: ${(r) => r.noArrows !== !0 ? "6rem" : "0"};
+    width: 2rem;
+    background: #fff;
+    height: 100%;
+    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
+    mask-image: linear-gradient(to left, black 10%, transparent 50%);
+  }
+
+  & .scrollable-container {
+    max-width: -webkit-fill-available;
+    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
+    max-width: fill-available;
+
+    ${(r) => r.rightAlignArrows === !0 && r.noArrows !== !0 && "margin-right: 6rem"};
+    scroll-behavior: smooth;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+
+    @media (max-width: ${R + "px"}) {
+      margin-right: 0;
+    }
+  }
+  & .scroll-arrow-right,
+  & .scroll-arrow-left {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    visibility: ${(r) => r.arrowsVisibleOnHover === !1 && r.hasOverflow ? "visible" : "hidden"};
+    z-index: 4;
+    transition: ${"0.3s"};
+  }
+  & .scroll-arrow-right {
+    ${(r) => r.rightAlignArrows === !0 ? "right: 0" : "right: 0.7rem"};
+  }
+  & .scroll-arrow-left {
+    ${(r) => r.rightAlignArrows === !0 ? "right: 2.625rem" : "left: 0.7rem"};
+  }
+  & .scrollable-container:hover > .scroll-arrow-left,
+  & .scrollable-container:hover > .scroll-arrow-right {
+    visibility: ${(r) => r.hasOverflow ? "visible" : "hidden"};
+  }
+
+  @media (max-width: ${R + "px"}) {
+    & .scrollable-container {
+      overflow: auto;
+    }
+    & .scroll-arrow-left,
+    & .scroll-arrow-right {
+      display: none;
+    }
+
+    & .gradient {
+      right: 0;
+    }
+
+    & .scrollable-container button:nth-of-type(3) {
+      ${(r) => r.noMargin !== !0 && "margin-left: 1rem"};
+    }
+  }
+`, ge = (r) => {
+  const [b, a] = $(!1), n = re(
+    () => new IntersectionObserver(
+      ([i]) => a(i.isIntersecting)
+    ),
+    []
+  );
+  return j(() => (n.observe(r.current), () => {
+    n.disconnect();
+  }), [r, n]), b;
+}, he = I.div`
+  min-height: 1px;
+  ${(r) => r.isHorizontal === !0 ? "min-width: 1px; width: 1px;" : "width: 100%;"}
+`, K = C((r, b) => {
+  const {
+    onIsVisible: a = () => {
+    },
+    onIsNotVisible: n,
+    isHorizontal: i = !1,
+    className: u = ""
+  } = r, s = x(null), d = ge(s);
+  return ce(() => {
+    d ? a() : n == null || n();
+  }, [d]), /* @__PURE__ */ t(
+    he,
+    {
+      ref: s,
+      className: `scroller-element ${u}`,
+      isHorizontal: i
+    }
+  );
+});
+K.propTypes = {
+  onIsVisible: o.func,
+  /**
+   * For horizontal scroll InfiniteScrollEndElement has to have some widh otherwise it won't ever be visible and trigger onIsVisible callback
+   */
+  isHorizontal: o.bool
+};
+const Z = ee.forwardRef(
+  ({
+    columnGap: r = "2rem",
+    rowGap: b = "1.25rem",
+    scrollBySize: a = 300,
+    wrapForMobile: n = !1,
+    wrap: i = !1,
+    children: u,
+    methodsRef: s,
+    arrowsVisibleOnHover: d = !0,
+    rightAlignArrows: S = !1,
+    padding: p = "0",
+    showTimesBtn: w,
+    noArrows: e,
+    noGradient: h = !1,
+    hideDisabledArrows: v = !1,
+    noMargin: k = !1,
+    ...A
+  }, B) => {
+    const W = P(), { theme: l } = se(), [g, N] = $(!1), [y, T] = $(!1), [J, O] = $(!0), m = x(), E = () => {
+      var f;
+      (f = m.current) == null || f.scrollBy(a, 0);
+    }, V = () => {
+      var f;
+      (f = m.current) == null || f.scrollBy(-a, 0);
+    }, [M, Q] = $(!1);
+    j(() => {
+      var f, D;
+      Q(
+        ((f = m == null ? void 0 : m.current) == null ? void 0 : f.scrollWidth) > ((D = m == null ? void 0 : m.current) == null ? void 0 : D.clientWidth)
+      );
+    }, [u]), te(s, () => ({
+      scrollToEnd() {
+        Y();
+      },
+      scrollLeft() {
+        V();
+      },
+      scrollRight() {
+        E();
+      }
+    }));
+    const Y = () => {
+      m.current.scrollLeft = m.current.scrollWidth;
+    };
+    return /* @__PURE__ */ t(
+      ue,
+      {
+        ref: B,
+        arrowsVisibleOnHover: d,
+        hasOverflow: M,
+        noArrows: e,
+        padding: p,
+        rightAlignArrows: S,
+        showTimesBtn: w,
+        theme: l,
+        noMargin: k,
+        ...A,
+        children: /* @__PURE__ */ c(
+          ae,
+          {
+            ref: m,
+            className: "scrollable-container",
+            columnGap: r,
+            rowGap: b,
+            wrap: i || n && W ? "Wrap" : "NoWrap",
+            children: [
+              e !== !0 && /* @__PURE__ */ c(_, { children: [
+                !(v === !0 && y === !0) && /* @__PURE__ */ t(
+                  L,
+                  {
+                    borderRadius: "curved",
+                    btnType: "tinted",
+                    className: "scroll-arrow-left",
+                    color: "neutral",
+                    disabled: y,
+                    icon: "angle-left",
+                    onClick: V
+                  }
+                ),
+                !(v === !0 && g === !0) && /* @__PURE__ */ t(
+                  L,
+                  {
+                    borderRadius: "curved",
+                    btnType: "tinted",
+                    className: "scroll-arrow-right",
+                    color: "neutral",
+                    disabled: g,
+                    icon: "angle-right",
+                    onClick: E
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t(
+                K,
+                {
+                  isHorizontal: !0,
+                  onIsNotVisible: () => {
+                    y === !0 && T(!1);
+                  },
+                  onIsVisible: () => {
+                    y === !1 && T(!0);
+                  }
+                }
+              ),
+              u,
+              /* @__PURE__ */ t(
+                K,
+                {
+                  className: "right-scroller",
+                  isHorizontal: !0,
+                  onIsNotVisible: () => {
+                    g === !0 && N(!1), O(!0);
+                  },
+                  onIsVisible: () => {
+                    g === !1 && N(!0), O(!1);
+                  }
+                }
+              ),
+              J && M && h !== !0 && /* @__PURE__ */ t("div", { className: "gradient" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Z.propTypes = {
+  title: o.string,
+  rowGap: o.string,
+  columnGap: o.string,
+  scrollBySize: o.number,
+  wrapForMobile: o.bool,
+  wrap: o.bool,
+  methodsRef: o.any,
+  arrowsVisibleOnHover: o.bool,
+  rightAlignArrows: o.bool,
+  padding: o.string
+};
+const q = C((r, b) => {
+  const {
+    allButton: a = !0,
+    items: n = [],
+    selectedIds: i = [],
+    onSelect: u = () => {
+    },
+    onRemove: s = () => {
+    },
+    onSelectAll: d = () => {
+    },
+    className: S,
+    showTimesBtn: p = !1,
+    labelKey: w = "label",
+    valueKey: e = "value",
+    codeKey: h = "code",
+    uniqueKey: v,
+    typeKey: k,
+    productsToolbarName: A = "All",
+    ...B
+  } = r, W = (l, g, N, y, T) => {
+    i != null && i.includes(l) ? s(l, g, N, y, T) : u(l, g, N, y, T);
+  };
+  return /* @__PURE__ */ c(
+    Z,
+    {
+      arrowsVisibleOnHover: !1,
+      className: S,
+      columnGap: "0.75rem",
+      padding: "0.25rem 0",
+      rightAlignArrows: !0,
+      showTimesBtn: p,
+      ...B,
+      children: [
+        a && /* @__PURE__ */ t(
+          H,
+          {
+            borderRadius: "curved",
+            btnType: i.length === 0 ? "filled" : "tinted",
+            className: "badge-button",
+            color: "neutral",
+            onClick: d,
+            children: A
+          }
+        ),
+        n.map((l, g) => /* @__PURE__ */ c(
+          H,
+          {
+            borderRadius: "curved",
+            btnType: i.includes(l.uuid) ? "filled" : "tinted",
+            className: "badge-button",
+            color: "neutral",
+            onClick: () => W(
+              l[e],
+              l[w],
+              l[h],
+              v ? l[v] : null,
+              k ? l[k] : null
+            ),
+            children: [
+              oe(l == null ? void 0 : l.icon) && /* @__PURE__ */ c(_, { children: [
+                /* @__PURE__ */ t("i", { className: l == null ? void 0 : l.icon }),
+                " "
+              ] }),
+              l[w],
+              p === !0 && /* @__PURE__ */ t(
+                de,
+                {
+                  className: "times-btn",
+                  icon: "times",
+                  sizeInUnits: "0.75rem",
+                  onClick: () => s(
+                    l[e],
+                    l[w],
+                    l[h],
+                    v ? l[v] : null,
+                    k ? l[k] : null
+                  )
+                }
+              )
+            ]
+          },
+          g
+        ))
+      ]
+    }
+  );
+});
+q.propTypes = {
+  allButton: o.bool,
+  items: o.array,
+  selectedIds: o.array,
+  onSelect: o.func,
+  onRemove: o.func,
+  onSelectAll: o.func,
+  className: o.string,
+  showTimesBtn: o.bool,
+  valuKey: o.string,
+  labelKey: o.string,
+  codeKey: o.string
+};
+const Be = C((r, b) => {
+  const {
+    icon: a,
+    title: n,
+    items: i,
+    buttonText: u,
+    limit: s = 3,
+    options: d,
+    onActionClick: S = () => {
+    },
+    onSelectOption: p = () => {
+    }
+  } = r, w = P();
+  return /* @__PURE__ */ c(ie, { children: [
+    /* @__PURE__ */ c("div", { className: "regular-title", children: [
+      /* @__PURE__ */ c("div", { className: "regular-title-text", children: [
+        G(a) && /* @__PURE__ */ t("i", { className: a }),
+        /* @__PURE__ */ t("span", { children: n })
+      ] }),
+      G(onSectionClick) && /* @__PURE__ */ t(
+        H,
+        {
+          type: "button",
+          btnType: "tinted",
+          color: "gray",
+          onClick: S,
+          borderRadius: "curved",
+          children: u
+        }
+      )
+    ] }),
+    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
+      q,
+      {
+        items: d,
+        onRemove: (e) => {
+          p(e);
+        },
+        onSelect: (e) => {
+          p(e);
+        },
+        labelKey: "name",
+        valueKey: "code",
+        noMargin: !0
+      }
+    ),
+    /* @__PURE__ */ t(me, { limit: s, children: w === !0 ? i == null ? void 0 : i.map((e, h) => /* @__PURE__ */ t(
+      F,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        buttonText: e == null ? void 0 : e.buttonText,
+        onCardClick: () => onSelectCard(e == null ? void 0 : e.uuid)
+      },
+      h
+    )) : i == null ? void 0 : i.slice(0, s).map((e, h) => /* @__PURE__ */ t(
+      F,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        buttonText: e == null ? void 0 : e.buttonText,
+        onCardClick: () => onSelectCard(e == null ? void 0 : e.uuid)
+      },
+      h
+    )) })
+  ] });
+});
+export {
+  Be as default
+};

package/dist/BrandHitsSection.cjs

@@ -1,14 +1,18 @@
-"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-CE6bljYe.cjs"),d=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./consts-dNz9tpt4.cjs"),h=d.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-UJt-R-G3.cjs"),o=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),d=require("./consts-dNz9tpt4.cjs"),h=o.newStyled.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   & .wrapper__image {
     width: 7.5rem;
     height: auto;
   }
 
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: auto;
     max-height: 4.5rem;
@@ -18,16 +22,16 @@
       height: auto;
     }
   }
-`,_=d.newStyled.div`
+`,_=o.newStyled.div`
   width: 7.5rem;
   height: 7.5rem;
   background: ${c.linearGradientAnimation("-90deg")};
 
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     width: 4.5rem;
     height: 4.5rem;
   }
-`,g=s.forwardRef(({imageComponent:t,image:n,onSelectCard:a},i)=>r.jsx(h,{children:c.isDefined(t)?t:r.jsx("img",{src:n,className:"wrapper__image",onSelectCard:a})})),w=s.forwardRef(({},t)=>r.jsx(_,{})),m=d.newStyled.div`
+`,g=s.forwardRef(({imageComponent:t,image:n,onSelectCard:a},i)=>r.jsx(h,{children:c.isDefined(t)?t:r.jsx("img",{src:n,className:"wrapper__image",onSelectCard:a})})),w=s.forwardRef(({},t)=>r.jsx(_,{})),m=o.newStyled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -71,7 +75,7 @@
     }
   }
 
-  @media (max-width: ${l.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__content {
       align-content: center;
       gap: 1rem;
@@ -82,4 +86,4 @@
       }
     }
   }
-`,x=s.forwardRef(({title:t,subtitle:n,items:a=[],onSelectCard:i=()=>{}},f)=>{var o;return r.jsx(m,{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__content",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,p)=>r.jsx(g,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),className:"wrapper__item"},`brand-hit-card__${p+1}`)):(o=Array.from("12345"))==null?void 0:o.map((e,p)=>r.jsx(w,{},`brand-hit-card-skeleton__${p+1}`))})]})})});module.exports=x;
+`,x=s.forwardRef(({title:t,subtitle:n,items:a=[],onSelectCard:i=()=>{}},f)=>{var l;return r.jsx(m,{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__content",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,p)=>r.jsx(g,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),className:"wrapper__item"},`brand-hit-card__${p+1}`)):(l=Array.from("12345"))==null?void 0:l.map((e,p)=>r.jsx(w,{},`brand-hit-card-skeleton__${p+1}`))})]})})});module.exports=x;

package/dist/BrandHitsSection.js

@@ -1,13 +1,17 @@
 import { jsx as a, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
-import { m as c, l as g } from "./utils-DtEdJZWa.js";
+import { m as c, l as g } from "./utils-xpQsPsCa.js";
 import { n as d } from "./emotion-styled.browser.esm-BiK8DcgW.js";
 import { M as l } from "./consts-DNVz1x1I.js";
-const _ = d.div`
+const s = d.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   & .wrapper__image {
     width: 7.5rem;
     height: auto;
@@ -23,7 +27,7 @@ const _ = d.div`
       height: auto;
     }
   }
-`, s = d.div`
+`, _ = d.div`
   width: 7.5rem;
   height: 7.5rem;
   background: ${c("-90deg")};
@@ -33,7 +37,7 @@ const _ = d.div`
     height: 4.5rem;
   }
 `, w = o(
-  ({ imageComponent: t, image: n, onSelectCard: e }, i) => /* @__PURE__ */ a(_, { children: g(t) ? t : /* @__PURE__ */ a(
+  ({ imageComponent: t, image: n, onSelectCard: e }, i) => /* @__PURE__ */ a(s, { children: g(t) ? t : /* @__PURE__ */ a(
     "img",
     {
       src: n,
@@ -41,7 +45,7 @@ const _ = d.div`
       onSelectCard: e
     }
   ) })
-), f = o(({}, t) => /* @__PURE__ */ a(s, {})), x = d.div`
+), f = o(({}, t) => /* @__PURE__ */ a(_, {})), x = d.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;

package/dist/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";const s=require("react/jsx-runtime"),i=require("react"),t=require("./index-BPVoEhTF.cjs"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./utils-CE6bljYe.cjs"),R=require("./Icon.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),z=c.newStyled.div`
+"use strict";const s=require("react/jsx-runtime"),i=require("react"),t=require("./index-BPVoEhTF.cjs"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./utils-UJt-R-G3.cjs"),R=require("./Icon.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),z=c.newStyled.div`
   display: inline-flex;
   flex-wrap: wrap;
   ${o=>g.getComponentTypographyCss(o.theme,"Breadcrumbs",o.size,"enabled")};

package/dist/Breadcrumbs.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as u, Fragment as z } from "react/jsx-runtime";
 import { forwardRef as A, useState as N } from "react";
 import { P as t } from "./index-S5Cd7WrG.js";
 import { n as c } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { g as O, a as P } from "./utils-DtEdJZWa.js";
+import { g as O, a as P } from "./utils-xpQsPsCa.js";
 import v from "./Icon.js";
 import { u as R } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const $ = c.div`

package/dist/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),q=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./index-DAOBjHnD.cjs"),r=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./utils-CE6bljYe.cjs"),V=require("./Icon.cjs"),W=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),B={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},f=e=>`
+"use strict";const n=require("react/jsx-runtime"),q=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./index-DAOBjHnD.cjs"),r=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./utils-UJt-R-G3.cjs"),V=require("./Icon.cjs"),W=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),B={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},f=e=>`
         outline: none;
         display: inline-flex;
         flex-direction: row;

package/dist/Button.js

@@ -3,7 +3,7 @@ import { forwardRef as E } from "react";
 import { P as o } from "./index-S5Cd7WrG.js";
 import { i as y } from "./index-CvebWhtp.js";
 import { n as r } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { g as x, a as t, d as c, h as T, e as z, b as q } from "./utils-DtEdJZWa.js";
+import { g as x, a as t, d as c, h as T, e as z, b as q } from "./utils-xpQsPsCa.js";
 import j from "./Icon.js";
 import { u as A } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const k = {