@lanaco/lnc-react-ui 4.0.35 → 4.0.37

package/dist/BlogsSectionWithFilters.js

@@ -1,27 +1,22 @@
-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-C1uHV4xc.js";
-import { u as P } from "./useDetectMobile-BC6EGaBc.js";
-import { m as z, t as le, l as oe, k as G } from "./utils-jiuifwtJ.js";
-import { T as ie } from "./style-BGQ1B_dp.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`
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { n as p } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as b } from "./consts-C1uHV4xc.js";
+import { u as C } from "./useDetectMobile-BC6EGaBc.js";
+import { m as s, t as N, k as u } from "./utils-DtRLzzTZ.js";
+import { T } from "./style-6tSw9aqK.js";
+import $ from "./Button.js";
+import W from "./Link.js";
+import { S as B } from "./index-CT6_7UFb.js";
+const M = p.div`
   display: grid;
-  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${R + "px"}) {
+  @media (max-width: ${b + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, U = I.div`
+`, w = p.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -50,16 +45,16 @@ const me = I.div`
     min-height: 3.3125rem;
     max-height: 3.3125rem;
     border-radius: 0.75rem;
-    background-color: ${z("-90deg")};
+    background-color: ${s("-90deg")};
   }
 
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${R + "px"}) {
+  @media (max-width: ${b + "px"}) {
   }
-`, X = I.div`
+`, k = p.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -73,464 +68,91 @@ const me = I.div`
   & .skeleton-title {
     height: 1.5rem;
     width: 80%;
-    background-color: ${z("-90deg")};
+    background-color: ${s("-90deg")};
   }
 
   & .skeleton-action {
     height: 1.25rem;
     width: 20%;
-    background-color: ${z("-90deg")};
+    background-color: ${s("-90deg")};
   }
 
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${le(3)}
+    ${N(3)}
   }
 `;
-C(({}, r) => /* @__PURE__ */ c(U, { className: "blog-card", children: [
-  /* @__PURE__ */ c(X, { children: [
+g(({}, o) => /* @__PURE__ */ i(w, { className: "blog-card", children: [
+  /* @__PURE__ */ i(k, { 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;
+const f = g((o, v) => {
+  const { title: l, image: m, text: r, buttonText: d, onCardClick: a } = o;
   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__ */ i(w, { className: "blog-card", onClick: a, children: [
+      /* @__PURE__ */ i(k, { children: [
+        /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
+        /* @__PURE__ */ t("div", { className: "text-wr", children: r }),
+        /* @__PURE__ */ t(W, { color: "gray", onClick: a, children: d })
       ] }),
-      /* @__PURE__ */ t("img", { src: n })
+      /* @__PURE__ */ t("img", { src: m })
     ] })
   );
-}), 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) => {
+}), L = g((o, v) => {
   const {
-    icon: a,
-    title: n,
-    items: i,
-    buttonText: u,
-    limit: s = 3,
-    options: d,
+    icon: l,
+    title: m,
+    items: r,
+    buttonText: d,
+    limit: a = 3,
+    options: n,
     onActionClick: S = () => {
     },
-    onSelectOption: p = () => {
+    onSelectOption: h = () => {
     }
-  } = 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 })
+  } = o, y = C();
+  return /* @__PURE__ */ i(T, { children: [
+    /* @__PURE__ */ i("div", { className: "regular-title", children: [
+      /* @__PURE__ */ i("div", { className: "regular-title-text", children: [
+        u(l) && /* @__PURE__ */ t("i", { className: l }),
+        /* @__PURE__ */ t("span", { children: m })
       ] }),
-      G(onSectionClick) && /* @__PURE__ */ t(
-        H,
+      u(onSectionClick) && /* @__PURE__ */ t(
+        $,
         {
           type: "button",
           btnType: "tinted",
           color: "gray",
           onClick: S,
           borderRadius: "curved",
-          children: u
+          children: d
         }
       )
     ] }),
-    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t(
-      q,
+    (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ t(
+      B,
       {
-        items: d,
+        items: n,
         onRemove: (e) => {
-          p(e);
+          h(e);
         },
         onSelect: (e) => {
-          p(e);
+          h(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,
+    /* @__PURE__ */ t(M, { limit: a, children: y === !0 ? r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ t(
+      f,
       {
         title: e == null ? void 0 : e.title,
         image: e == null ? void 0 : e.image,
@@ -539,9 +161,9 @@ const Be = C((r, b) => {
         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,
+      c
+    )) : r == null ? void 0 : r.slice(0, a).map((e, c) => /* @__PURE__ */ t(
+      f,
       {
         title: e == null ? void 0 : e.title,
         image: e == null ? void 0 : e.image,
@@ -550,10 +172,10 @@ const Be = C((r, b) => {
         buttonText: e == null ? void 0 : e.buttonText,
         onCardClick: () => onSelectCard(e == null ? void 0 : e.uuid)
       },
-      h
+      c
     )) })
   ] });
 });
 export {
-  Be as default
+  L as default
 };

package/dist/BrandHitsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-scuIeOqU.cjs"),o=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),d=require("./consts-CtNoHdBj.cjs"),h=o.newStyled.div`
+"use strict";const r=require("react/jsx-runtime"),s=require("react"),c=require("./utils-NZLCh-J5.cjs"),o=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),d=require("./consts-CtNoHdBj.cjs"),h=o.newStyled.div`
   width: 7.5rem;
   height: auto;
   max-height: 7.5rem;

package/dist/BrandHitsSection.js

@@ -1,7 +1,7 @@
 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-jiuifwtJ.js";
-import { n as d } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { m as c, l as g } from "./utils-DtRLzzTZ.js";
+import { n as d } from "./emotion-styled.browser.esm-CjCaF13H.js";
 import { M as l } from "./consts-C1uHV4xc.js";
 const s = d.div`
   width: 7.5rem;

package/dist/Breadcrumbs.cjs

@@ -1,8 +1,8 @@
-"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-scuIeOqU.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"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),g=require("./utils-NZLCh-J5.cjs"),R=require("./Icon.cjs"),_=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),z=u.newStyled.div`
   display: inline-flex;
   flex-wrap: wrap;
   ${o=>g.getComponentTypographyCss(o.theme,"Breadcrumbs",o.size,"enabled")};
   color: ${o=>g.getColorRgbaValue(o.theme,"Breadcrumbs",o.color,"enabled","text")};
-`,A=c.newStyled.div`
+`,A=u.newStyled.div`
   cursor: pointer;
-`,N=c.newStyled.span``,b=i.forwardRef((o,f)=>{const{separator:a="/",maxItems:T=8,itemsAfterCollapse:x=1,itemsBeforeCollapse:j=1,className:C="",style:P={},color:w="neutral",size:d="small",children:q,...B}=o,I={theme:_.useTheme(),size:d,color:w,className:"lnc-ui-breadcrumbs "+C,style:P},[u,S]=i.useState(!0),h=({maxItems:m,itemsAfterCollapse:p,itemsBeforeCollapse:n,children:e})=>typeof(e==null?void 0:e.map)!="function"?s.jsx(l,{index:0,length:e.length,separator:a,child:e}):e==null?void 0:e.map((y,r)=>m<=e.length&&u==!0?n-1>=r||e.length-p<=r?s.jsx(l,{index:r,length:e.length,separator:a,child:y},r):n==r&&s.jsxs(A,{onClick:v=>S(!u),children:[s.jsx(R,{icon:"ellipsis"}),a," "]},r):s.jsx(l,{index:r,length:e.length,separator:a,child:y},r)),l=({index:m,length:p,separator:n,child:e})=>s.jsxs(N,{children:[e,m+1!==p&&s.jsxs(s.Fragment,{children:[" ",n," "]})]});return s.jsx(z,{ref:f,...I,...B,children:s.jsx(h,{maxItems:T,itemsAfterCollapse:x,itemsBeforeCollapse:j,children:q})})});b.propTypes={separator:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),maxItems:t.PropTypes.number,itemsAfterCollapse:t.PropTypes.number,itemsBeforeCollapse:t.PropTypes.number,className:t.PropTypes.string,style:t.PropTypes.object,color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:t.PropTypes.oneOf(["small","medium","large"])};module.exports=b;
+`,N=u.newStyled.span``,b=i.forwardRef((o,f)=>{const{separator:a="/",maxItems:T=8,itemsAfterCollapse:x=1,itemsBeforeCollapse:j=1,className:C="",style:P={},color:w="neutral",size:d="small",children:q,...B}=o,I={theme:_.useTheme(),size:d,color:w,className:"lnc-ui-breadcrumbs "+C,style:P},[c,S]=i.useState(!0),h=({maxItems:m,itemsAfterCollapse:p,itemsBeforeCollapse:n,children:e})=>typeof(e==null?void 0:e.map)!="function"?s.jsx(l,{index:0,length:e.length,separator:a,child:e}):e==null?void 0:e.map((y,r)=>m<=e.length&&c==!0?n-1>=r||e.length-p<=r?s.jsx(l,{index:r,length:e.length,separator:a,child:y},r):n==r&&s.jsxs(A,{onClick:v=>S(!c),children:[s.jsx(R,{icon:"ellipsis"}),a," "]},r):s.jsx(l,{index:r,length:e.length,separator:a,child:y},r)),l=({index:m,length:p,separator:n,child:e})=>s.jsxs(N,{children:[e,m+1!==p&&s.jsxs(s.Fragment,{children:[" ",n," "]})]});return s.jsx(z,{ref:f,...I,...B,children:s.jsx(h,{maxItems:T,itemsAfterCollapse:x,itemsBeforeCollapse:j,children:q})})});b.propTypes={separator:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),maxItems:t.PropTypes.number,itemsAfterCollapse:t.PropTypes.number,itemsBeforeCollapse:t.PropTypes.number,className:t.PropTypes.string,style:t.PropTypes.object,color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:t.PropTypes.oneOf(["small","medium","large"])};module.exports=b;

package/dist/Breadcrumbs.js

@@ -1,10 +1,10 @@
 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-jiuifwtJ.js";
+import { n as c } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { c as O, b as P } from "./utils-DtRLzzTZ.js";
 import v from "./Icon.js";
-import { u as R } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+import { u as R } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 const $ = c.div`
   display: inline-flex;
   flex-wrap: wrap;
@@ -23,11 +23,11 @@ const $ = c.div`
 )};
 `, k = c.div`
   cursor: pointer;
-`, F = c.span``, V = A((r, i) => {
+`, F = c.span``, V = A((r, g) => {
   const {
     separator: a = "/",
-    maxItems: y = 8,
-    itemsAfterCollapse: b = 1,
+    maxItems: b = 8,
+    itemsAfterCollapse: y = 1,
     itemsBeforeCollapse: C = 1,
     //----------------
     className: B = "",
@@ -56,13 +56,13 @@ const $ = c.div`
       child: e
     }
   ) : e == null ? void 0 : e.map(
-    (g, s) => n <= e.length && f == !0 ? m - 1 >= s || e.length - p <= s ? /* @__PURE__ */ o(
+    (i, s) => n <= e.length && f == !0 ? m - 1 >= s || e.length - p <= s ? /* @__PURE__ */ o(
       l,
       {
         index: s,
         length: e.length,
         separator: a,
-        child: g
+        child: i
       },
       s
     ) : m == s && /* @__PURE__ */ u(k, { onClick: (D) => j(!f), children: [
@@ -75,7 +75,7 @@ const $ = c.div`
         index: s,
         length: e.length,
         separator: a,
-        child: g
+        child: i
       },
       s
     )
@@ -87,11 +87,11 @@ const $ = c.div`
       " "
     ] })
   ] });
-  return /* @__PURE__ */ o($, { ref: i, ...S, ...d, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o($, { ref: g, ...S, ...d, children: /* @__PURE__ */ o(
     x,
     {
-      maxItems: y,
-      itemsAfterCollapse: b,
+      maxItems: b,
+      itemsAfterCollapse: y,
       itemsBeforeCollapse: C,
       children: T
     }