@caspeco/casper-ui-library 9.13.0 → 10.0.0

package/dist/components/combobox/combobox-item.js

@@ -1,17 +1,24 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { c as h } from "../../_virtual/compiler-runtime.js";
 import { Flex as f } from "@chakra-ui/react";
-import { Box as o } from "../box/box.js";
-import { Highlight as n } from "../highlight/highlight.js";
-import { Tag as t } from "../tag/tag.js";
-import { ThemeSpaceVariable as h } from "../../theme/theme-types.js";
-function u({ item: r, asPlainText: a, isDeleting: l, highlightQuery: p }) {
-  const d = l ? "primary" : r.variant ?? "neutral", i = l || (r.solid ?? !1);
-  return a ? /* @__PURE__ */ c(f, { gap: h.XSmall, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: [
+import { Box as a } from "../box/box.js";
+import { Highlight as m } from "../highlight/highlight.js";
+import { Tag as x } from "../tag/tag.js";
+import { ThemeSpaceVariable as w } from "../../theme/theme-types.js";
+function j(s) {
+  const e = h.c(8), {
+    item: r,
+    asPlainText: o,
+    isDeleting: d,
+    highlightQuery: l
+  } = s, n = d ? "primary" : r.variant ?? "neutral", t = d || (r.solid ?? !1);
+  let p;
+  return e[0] !== o || e[1] !== l || e[2] !== r.append || e[3] !== r.label || e[4] !== r.prepend || e[5] !== t || e[6] !== n ? (p = o ? /* @__PURE__ */ c(f, { gap: w.XSmall, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: [
     r.prepend,
-    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n, { query: p ?? "", children: r.label }) }),
+    /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(m, { query: l ?? "", children: r.label }) }),
     r.append
-  ] }) : /* @__PURE__ */ e(o, { overflow: "hidden", children: /* @__PURE__ */ e(t, { variant: d, solid: i, prepend: r.prepend, append: r.append, children: /* @__PURE__ */ e(o, { display: "block", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: /* @__PURE__ */ e(n, { query: p ?? "", children: r.label }) }) }) });
+  ] }) : /* @__PURE__ */ i(a, { overflow: "hidden", children: /* @__PURE__ */ i(x, { variant: n, solid: t, prepend: r.prepend, append: r.append, children: /* @__PURE__ */ i(a, { display: "block", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: /* @__PURE__ */ i(m, { query: l ?? "", children: r.label }) }) }) }), e[0] = o, e[1] = l, e[2] = r.append, e[3] = r.label, e[4] = r.prepend, e[5] = t, e[6] = n, e[7] = p) : p = e[7], p;
 }
 export {
-  u as ComboboxItem
+  j as ComboboxItem
 };

package/dist/components/combobox/combobox-menu.d.ts

@@ -3,7 +3,7 @@ type CheckboxOrRadioButtonProps = {
     isSingleSelect: boolean;
     isChecked: boolean;
 };
-export declare function CheckboxOrRadioButton({ isSingleSelect, isChecked }: CheckboxOrRadioButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function ComboboxMenu(props: ComboboxInnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxOrRadioButton({ isSingleSelect, isChecked }: CheckboxOrRadioButtonProps): import("react").JSX.Element;
+export declare function ComboboxMenu(props: ComboboxInnerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=combobox-menu.d.ts.map

package/dist/components/combobox/combobox-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AAyCjB,KAAK,0BAA0B,GAAG;IAAE,cAAc,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAElF,wBAAgB,qBAAqB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAQ9F;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,2CAoGrD"}
+{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AAyCjB,KAAK,0BAA0B,GAAG;IAAE,cAAc,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAElF,wBAAgB,qBAAqB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,0BAA0B,+BAQ9F;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,+BAoGrD"}

package/dist/components/combobox/combobox-menu.js

@@ -1,294 +1,195 @@
-import { jsxs as g, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { Box as v, Flex as y } from "@chakra-ui/react";
-import { autoUpdate as L, computePosition as G, flip as _ } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { useState as Q, useEffect as U, Fragment as T } from "react";
-import { ComboboxItem as z } from "./combobox-item.js";
-import { interpolate as Y } from "./translations.js";
-import { ThemeColorVariable as d, ThemeShadowVariable as q, ThemeRadiusVariable as J, ThemeSpaceVariable as c, ThemeFontSizeVariable as K, ThemeBorderVariable as Z, ThemeIconSizeVariable as F } from "../../theme/theme-types.js";
-import { Text as V } from "../text/text.js";
-import { BackIcon as R } from "../icon/icons/back-icon.js";
-import { ForwardIcon as N } from "../icon/icons/forward-icon.js";
-import { Checkbox as D } from "../checkbox/checkbox.js";
-import { RadioGroup as ee } from "../radio/radio-group.js";
-import { Radio as re } from "../radio/radio.js";
-const ne = (n, t, s, h, a) => {
-  const [b, x] = Q({
+import { jsx as s, jsxs as w, Fragment as W } from "react/jsx-runtime";
+import { c as z } from "../../_virtual/compiler-runtime.js";
+import { Flex as V, Box as T } from "@chakra-ui/react";
+import { autoUpdate as G, computePosition as Q, flip as U } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { useState as Y, useEffect as q, Fragment as A } from "react";
+import { ComboboxItem as _ } from "./combobox-item.js";
+import { interpolate as J } from "./translations.js";
+import { Text as D } from "../text/text.js";
+import { ThemeColorVariable as x, ThemeSpaceVariable as m, ThemeFontSizeVariable as K, ThemeBorderVariable as Z, ThemeShadowVariable as N, ThemeRadiusVariable as R, ThemeIconSizeVariable as X } from "../../theme/theme-types.js";
+import { BackIcon as ee } from "../icon/icons/back-icon.js";
+import { ForwardIcon as te } from "../icon/icons/forward-icon.js";
+import { Checkbox as E } from "../checkbox/checkbox.js";
+import { RadioGroup as ne } from "../radio/radio-group.js";
+import { Radio as oe } from "../radio/radio.js";
+const re = (i, e, c, o, a) => {
+  const t = z.c(8);
+  let h;
+  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = {
     transform: "translate(0, 0)",
     minWidth: 0
-  });
-  return U(() => {
-    if (!n.current || !t.current || !s) return () => {
-    };
-    const k = async () => {
-      if (n.current && t.current && s) {
-        const { width: p } = n.current.getBoundingClientRect(), { x: P, y: u } = await G(n.current, t.current, {
+  }, t[0] = h) : h = t[0];
+  const [g, f] = Y(h);
+  let p, k;
+  return t[1] !== c || t[2] !== i || t[3] !== a || t[4] !== o || t[5] !== e ? (p = () => {
+    if (!i.current || !e.current || !c)
+      return ce;
+    const $ = async () => {
+      if (i.current && e.current && c) {
+        const {
+          width: n
+        } = i.current.getBoundingClientRect(), {
+          x: r,
+          y: l
+        } = await Q(i.current, e.current, {
           placement: a || "bottom-start",
-          middleware: [_()]
+          middleware: [U()]
         });
-        x({
-          transform: `translate(${P}px, ${u}px)`,
-          minWidth: h || p
+        f({
+          transform: `translate(${r}px, ${l}px)`,
+          minWidth: o || n
         });
       }
-    }, w = () => {
-      k().catch(console.error);
+    }, d = () => {
+      $().catch(console.error);
     };
-    return L(n.current, t.current, w);
-  }, [n, t, s, a, h]), b;
+    return G(i.current, e.current, d);
+  }, k = [i, e, c, a, o], t[1] = c, t[2] = i, t[3] = a, t[4] = o, t[5] = e, t[6] = p, t[7] = k) : (p = t[6], k = t[7]), q(p, k), g;
 };
-function H({ isSingleSelect: n, isChecked: t }) {
-  return n ? /* @__PURE__ */ r(ee, { value: t ? "true" : "false", children: /* @__PURE__ */ r(re, { value: "true" }) }) : /* @__PURE__ */ r(D, { isChecked: t });
+function j(i) {
+  const e = z.c(3), {
+    isSingleSelect: c,
+    isChecked: o
+  } = i;
+  let a;
+  return e[0] !== o || e[1] !== c ? (a = c ? /* @__PURE__ */ s(ne, { value: o ? "true" : "false", children: /* @__PURE__ */ s(oe, { value: "true" }) }) : /* @__PURE__ */ s(E, { isChecked: o }), e[0] = o, e[1] = c, e[2] = a) : a = e[2], a;
 }
-function be(n) {
-  const {
-    inputValue: t,
-    displayItems: s,
-    highlightState: h,
-    openState: a,
-    isSingleSelect: b,
-    isSearching: x,
-    isHidingItems: k,
-    popoverWidth: w,
-    popoverPlacement: p,
-    parentRef: P,
-    popupRef: u,
-    footerContent: l,
-    translation: e,
-    folderStyle: i
-  } = n, o = ne(
-    P,
-    u,
-    a.isOpen,
-    w,
-    p
-  ), C = (m) => {
-    h.set(m);
-  };
-  return /* @__PURE__ */ g(
+function we(i) {
+  const e = z.c(32), {
+    inputValue: c,
+    displayItems: o,
+    highlightState: a,
+    openState: t,
+    isSingleSelect: h,
+    isSearching: g,
+    isHidingItems: f,
+    popoverWidth: p,
+    popoverPlacement: k,
+    parentRef: $,
+    popupRef: d,
+    footerContent: n,
+    translation: r,
+    folderStyle: l
+  } = i, O = re($, d, t.isOpen, p, k);
+  let C;
+  e[0] !== a ? (C = (H) => {
+    a.set(H);
+  }, e[0] = a, e[1] = C) : C = e[1];
+  const y = C, I = t.isOpen ? "block" : "none";
+  let S;
+  e[2] !== h || e[3] !== t ? (S = (H) => {
+    H.preventDefault(), H.stopPropagation(), h && t.close();
+  }, e[2] = h, e[3] = t, e[4] = S) : S = e[4];
+  const b = !h;
+  let v;
+  e[5] !== o || e[6] !== c || e[7] !== g || e[8] !== r ? (v = g && o.length === 0 && c.length > 0 && /* @__PURE__ */ s(D, { px: m.Small, color: x.OnSurfaceSubdued, children: `${r.noMatchFor} "${c}"` }), e[5] = o, e[6] = c, e[7] = g, e[8] = r, e[9] = v) : v = e[9];
+  let P;
+  e[10] !== l || e[11] !== y || e[12] !== i ? (P = l === "stacked" ? /* @__PURE__ */ s(ie, { ...i, onHover: y }) : /* @__PURE__ */ s(le, { ...i, onHover: y }), e[10] = l, e[11] = y, e[12] = i, e[13] = P) : P = e[13];
+  let u;
+  e[14] !== o || e[15] !== f || e[16] !== r ? (u = f && /* @__PURE__ */ s(D, { px: m.Small, py: m.Small, color: x.OnSurfaceSubdued, fontSize: K.Small, children: J(r.showMaxItems, {
+    count: o.length
+  }) }), e[14] = o, e[15] = f, e[16] = r, e[17] = u) : u = e[17];
+  let B;
+  e[18] !== b || e[19] !== v || e[20] !== P || e[21] !== u ? (B = /* @__PURE__ */ w(V, { as: "ul", flexDirection: "column", maxHeight: "300px", overflowY: "auto", overflowX: "hidden", role: "listbox", "aria-multiselectable": b, padding: `${m.Small} 0`, children: [
     v,
-    {
-      display: a.isOpen ? "block" : "none",
-      inset: "0 auto auto 0",
-      position: "fixed",
-      zIndex: "50",
-      visibility: "visible",
-      backgroundColor: d.Surface,
-      borderRadius: J.Medium,
-      boxShadow: q.Medium,
-      color: d.OnSurface,
-      overflow: "hidden",
-      style: o,
-      ref: u,
-      maxW: "90%",
-      onClick: (m) => {
-        m.preventDefault(), m.stopPropagation(), b && a.close();
-      },
-      children: [
-        /* @__PURE__ */ g(
-          y,
-          {
-            as: "ul",
-            flexDirection: "column",
-            maxHeight: "300px",
-            overflowY: "auto",
-            overflowX: "hidden",
-            role: "listbox",
-            "aria-multiselectable": !b,
-            padding: `${c.Small} 0`,
-            children: [
-              x && s.length === 0 && t.length > 0 && /* @__PURE__ */ r(
-                V,
-                {
-                  px: c.Small,
-                  color: d.OnSurfaceSubdued,
-                  children: `${e.noMatchFor} "${t}"`
-                }
-              ),
-              i === "stacked" ? /* @__PURE__ */ r(oe, { ...n, onHover: C }) : /* @__PURE__ */ r(te, { ...n, onHover: C }),
-              k && /* @__PURE__ */ r(
-                V,
-                {
-                  px: c.Small,
-                  py: c.Small,
-                  color: d.OnSurfaceSubdued,
-                  fontSize: K.Small,
-                  children: Y(e.showMaxItems, {
-                    count: s.length
-                  })
-                }
-              )
-            ]
-          }
-        ),
-        l && /* @__PURE__ */ r(
-          v,
-          {
-            position: "sticky",
-            bottom: "0",
-            backgroundColor: d.Surface,
-            padding: `${c.Small} ${c.Medium}`,
-            borderTop: `${Z.XSmall} ${d.OnSurfaceBorder}`,
-            tabIndex: -1,
-            children: l
-          }
-        )
-      ]
-    }
-  );
+    P,
+    u
+  ] }), e[18] = b, e[19] = v, e[20] = P, e[21] = u, e[22] = B) : B = e[22];
+  let M;
+  e[23] !== n ? (M = n && /* @__PURE__ */ s(T, { position: "sticky", bottom: "0", backgroundColor: x.Surface, padding: `${m.Small} ${m.Medium}`, borderTop: `${Z.XSmall} ${x.OnSurfaceBorder}`, tabIndex: -1, children: n }), e[23] = n, e[24] = M) : M = e[24];
+  let F;
+  return e[25] !== O || e[26] !== d || e[27] !== I || e[28] !== S || e[29] !== B || e[30] !== M ? (F = /* @__PURE__ */ w(T, { display: I, inset: "0 auto auto 0", position: "fixed", zIndex: "50", visibility: "visible", backgroundColor: x.Surface, borderRadius: R.Medium, boxShadow: N.Medium, color: x.OnSurface, overflow: "hidden", style: O, ref: d, maxW: "90%", onClick: S, children: [
+    B,
+    M
+  ] }), e[25] = O, e[26] = d, e[27] = I, e[28] = S, e[29] = B, e[30] = M, e[31] = F) : F = e[31], F;
 }
-const W = ({
-  children: n,
-  isChecked: t,
-  onClick: s,
-  isActive: h,
-  onHover: a
-}) => /* @__PURE__ */ r(
-  y,
-  {
-    as: "li",
-    role: "option",
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    padding: `${c.Small} ${c.Medium}`,
-    gap: c.Medium,
-    textDecoration: "none",
-    backgroundColor: h ? d.AccentHoverAlpha : "",
-    onClick: s,
-    tabIndex: -1,
-    onMouseEnter: a,
-    "data-is-active-index": h,
-    "aria-selected": t,
-    children: n
-  }
-), oe = ({
-  displayItems: n,
-  selectedItems: t,
-  toggleItem: s,
-  onHover: h,
+const L = (i) => {
+  const e = z.c(7), {
+    children: c,
+    isChecked: o,
+    onClick: a,
+    isActive: t,
+    onHover: h
+  } = i, g = t ? x.AccentHoverAlpha : "";
+  let f;
+  return e[0] !== c || e[1] !== t || e[2] !== o || e[3] !== a || e[4] !== h || e[5] !== g ? (f = /* @__PURE__ */ s(V, { as: "li", role: "option", width: "100%", flexDirection: "row", justifyContent: "space-between", padding: `${m.Small} ${m.Medium}`, gap: m.Medium, textDecoration: "none", backgroundColor: g, onClick: a, tabIndex: -1, onMouseEnter: h, "data-is-active-index": t, "aria-selected": o, children: c }), e[0] = c, e[1] = t, e[2] = o, e[3] = a, e[4] = h, e[5] = g, e[6] = f) : f = e[6], f;
+}, ie = ({
+  displayItems: i,
+  selectedItems: e,
+  toggleItem: c,
+  onHover: o,
   parentSelectsChildren: a,
-  highlightState: b,
-  inputValue: x,
-  isSingleSelect: k
+  highlightState: t,
+  inputValue: h,
+  isSingleSelect: g
 }) => {
-  const w = (l, e) => l.children && l.children.length > 0 ? l.children.every((i) => w(i, e)) : e.some((i) => i.id === l.id), p = (l) => l.children && l.children.length > 0 ? l.children.some((e) => p(e)) : t.some((e) => e.id === l.id);
-  let P = 0;
-  const u = (l, e, i = []) => l.map((o) => {
-    const C = (S) => {
-      S.stopPropagation(), S.preventDefault(), s(o);
+  const f = (d, n) => d.children && d.children.length > 0 ? d.children.every((r) => f(r, n)) : n.some((r) => r.id === d.id), p = (d) => d.children && d.children.length > 0 ? d.children.some((n) => p(n)) : e.some((n) => n.id === d.id);
+  let k = 0;
+  const $ = (d, n, r = []) => d.map((l) => {
+    const O = (b) => {
+      b.stopPropagation(), b.preventDefault(), c(l);
     };
-    i.length > 0 && (i[i.length - 1] -= 1);
-    const m = P++, I = o.children && o.children.length > 0, B = !I || o.isSelectableParent;
-    let $ = e.some((S) => S.id === o.id);
-    return a && I && !o.isSelectableParent && w(o, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
-      /* @__PURE__ */ g(
-        W,
-        {
-          isActive: b.index === m,
-          isChecked: $,
-          onClick: C,
-          onHover: () => h(m),
-          children: [
-            /* @__PURE__ */ g(y, { alignItems: "center", whiteSpace: "nowrap", minW: 0, children: [
-              i.map((S, O, M) => {
-                const f = M.length === O + 1, X = S > 0, A = S === 0, j = X || f;
-                return /* @__PURE__ */ g(
-                  y,
-                  {
-                    w: c.Medium,
-                    minW: c.Medium,
-                    alignItems: "center",
-                    my: "-0.5rem",
-                    h: "2.5rem",
-                    children: [
-                      j && /* @__PURE__ */ r(
-                        v,
-                        {
-                          w: "1px",
-                          h: A ? "52%" : "100%",
-                          backgroundColor: d.OnSurface,
-                          mb: "auto"
-                        }
-                      ),
-                      f && /* @__PURE__ */ r(
-                        v,
-                        {
-                          w: "inherit",
-                          height: "1px",
-                          backgroundColor: d.OnSurface,
-                          mr: c.XSmall
-                        }
-                      )
-                    ]
-                  },
-                  `${o.id}_${O}`
-                );
-              }),
-              /* @__PURE__ */ r(z, { item: o, asPlainText: !0, highlightQuery: x })
-            ] }),
-            B ? /* @__PURE__ */ r(H, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ r(D, { isIndeterminate: p(o), isChecked: $ })
-          ]
-        }
-      ),
-      o.children && u(o.children, e, [...i, o.children.length])
-    ] }, o.id);
+    r.length > 0 && (r[r.length - 1] -= 1);
+    const C = k++, y = l.children && l.children.length > 0, I = !y || l.isSelectableParent;
+    let S = n.some((b) => b.id === l.id);
+    return a && y && !l.isSelectableParent && f(l, n) && (S = !0), /* @__PURE__ */ w(A, { children: [
+      /* @__PURE__ */ w(L, { isActive: t.index === C, isChecked: S, onClick: O, onHover: () => o(C), children: [
+        /* @__PURE__ */ w(V, { alignItems: "center", whiteSpace: "nowrap", minW: 0, children: [
+          r.map((b, v, P) => {
+            const u = P.length === v + 1, B = b > 0, M = b === 0, F = B || u;
+            return /* @__PURE__ */ w(V, { w: m.Medium, minW: m.Medium, alignItems: "center", my: "-0.5rem", h: "2.5rem", children: [
+              F && /* @__PURE__ */ s(T, { w: "1px", h: M ? "52%" : "100%", backgroundColor: x.OnSurface, mb: "auto" }),
+              u && /* @__PURE__ */ s(T, { w: "inherit", height: "1px", backgroundColor: x.OnSurface, mr: m.XSmall })
+            ] }, `${l.id}_${v}`);
+          }),
+          /* @__PURE__ */ s(_, { item: l, asPlainText: !0, highlightQuery: h })
+        ] }),
+        I ? /* @__PURE__ */ s(j, { isSingleSelect: g, isChecked: S }) : a && !g && /* @__PURE__ */ s(E, { isIndeterminate: p(l), isChecked: S })
+      ] }),
+      l.children && $(l.children, n, [...r, l.children.length])
+    ] }, l.id);
   });
-  return u(n, t);
-}, te = ({
-  displayItems: n,
-  selectedItems: t,
-  toggleItem: s,
-  onHover: h,
+  return $(i, e);
+}, le = ({
+  displayItems: i,
+  selectedItems: e,
+  toggleItem: c,
+  onHover: o,
   highlightState: a,
-  isSingleSelect: b,
-  subMenuState: x,
-  parentStrings: k,
-  asPlainText: w,
+  isSingleSelect: t,
+  subMenuState: h,
+  parentStrings: g,
+  asPlainText: f,
   isSearching: p,
-  isReadOnly: P,
-  previousSelectedItems: u
+  isReadOnly: k,
+  previousSelectedItems: $
 }) => {
-  const l = (e, i) => {
-    e.stopPropagation(), e.preventDefault(), s(i);
+  const d = (n, r) => {
+    n.stopPropagation(), n.preventDefault(), c(r);
   };
-  return n.map((e, i) => {
-    const o = t.some((f) => f.id === e.id), C = e.children?.length, m = e.id === "_back", I = x.opened[x.opened.length - 1], B = e.id === I?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
-      /* @__PURE__ */ r(R, { size: F.Small }),
-      e.label
-    ] }) : /* @__PURE__ */ g(E, { children: [
-      /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
-        k[e.id]?.map((f) => /* @__PURE__ */ g(T, { children: [
-          /* @__PURE__ */ r(v, { color: d.OnSurfaceSubdued, children: f }),
-          /* @__PURE__ */ r(v, { color: d.OnSurfaceSubdued, children: "/" })
-        ] }, f)),
-        /* @__PURE__ */ r(z, { item: e, asPlainText: w })
+  return i.map((n, r) => {
+    const l = e.some((u) => u.id === n.id), O = n.children?.length, C = n.id === "_back", y = h.opened[h.opened.length - 1], I = n.id === y?.id, S = C ? /* @__PURE__ */ w(V, { gap: m.XSmall, alignItems: "center", children: [
+      /* @__PURE__ */ s(ee, { size: X.Small }),
+      n.label
+    ] }) : /* @__PURE__ */ w(W, { children: [
+      /* @__PURE__ */ w(V, { gap: m.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
+        g[n.id]?.map((u) => /* @__PURE__ */ w(A, { children: [
+          /* @__PURE__ */ s(T, { color: x.OnSurfaceSubdued, children: u }),
+          /* @__PURE__ */ s(T, { color: x.OnSurfaceSubdued, children: "/" })
+        ] }, u)),
+        /* @__PURE__ */ s(_, { item: n, asPlainText: f })
       ] }),
-      P ? void 0 : C && !B && !p ? /* @__PURE__ */ r(N, { size: F.Small, color: d.OnBackgroundSubdued }) : /* @__PURE__ */ r(H, { isSingleSelect: b, isChecked: o })
-    ] }), S = u.length > 0 && u.length - 1 === i && u.length < n.length, M = !P && !p && (S || (m || B));
-    return /* @__PURE__ */ g(T, { children: [
-      /* @__PURE__ */ r(
-        W,
-        {
-          isActive: a.index === i,
-          isChecked: o,
-          onClick: (f) => l(f, e),
-          onHover: () => h(i),
-          children: $
-        }
-      ),
-      M && /* @__PURE__ */ r(
-        v,
-        {
-          margin: `${c.Small} ${m ? 0 : c.Medium}`,
-          height: "1px",
-          flexShrink: 0,
-          backgroundColor: d.OnBackgroundBorder
-        }
-      )
-    ] }, e.id);
+      k ? void 0 : O && !I && !p ? /* @__PURE__ */ s(te, { size: X.Small, color: x.OnBackgroundSubdued }) : /* @__PURE__ */ s(j, { isSingleSelect: t, isChecked: l })
+    ] }), b = $.length > 0 && $.length - 1 === r && $.length < i.length, P = !k && !p && (b || (C || I));
+    return /* @__PURE__ */ w(A, { children: [
+      /* @__PURE__ */ s(L, { isActive: a.index === r, isChecked: l, onClick: (u) => d(u, n), onHover: () => o(r), children: S }),
+      P && /* @__PURE__ */ s(T, { margin: `${m.Small} ${C ? 0 : m.Medium}`, height: "1px", flexShrink: 0, backgroundColor: x.OnBackgroundBorder })
+    ] }, n.id);
   });
 };
+function ce() {
+}
 export {
-  H as CheckboxOrRadioButton,
-  be as ComboboxMenu
+  j as CheckboxOrRadioButton,
+  we as ComboboxMenu
 };

package/dist/components/combobox/combobox.composition.d.ts

@@ -1,10 +1,10 @@
-export declare const SingleSelect: () => import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
-export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
-export declare const Invalid: () => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const GhostVariant: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithItemsAsPlainText: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithFooterContent: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithFolderStyleStacked: () => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelect: () => import("react").JSX.Element;
+export declare const MultiSelect: () => import("react").JSX.Element;
+export declare const Disabled: () => import("react").JSX.Element;
+export declare const Invalid: () => import("react").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const GhostVariant: () => import("react").JSX.Element;
+export declare const WithItemsAsPlainText: () => import("react").JSX.Element;
+export declare const WithFooterContent: () => import("react").JSX.Element;
+export declare const WithFolderStyleStacked: () => import("react").JSX.Element;
 //# sourceMappingURL=combobox.composition.d.ts.map

package/dist/components/combobox/combobox.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAsOA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAmDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAqBnB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAyEjB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAyB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CA8BlC,CAAC"}
+{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAsOA,eAAO,MAAM,YAAY,mCAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAmDpB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAqBnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAyEjB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAoBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,mCAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAyB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mCA8BlC,CAAC"}

package/dist/components/combobox/combobox.d.ts

@@ -6,5 +6,5 @@ import { ComboboxProps } from './types.js';
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/combobox
  */
-export declare function Combobox({ id, label, isSingleSelect, selectedItems, locale, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, parentSelectsChildren, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox({ id, label, isSingleSelect, selectedItems, locale, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, parentSelectsChildren, ...props }: ComboboxProps): import("react").JSX.Element;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIX,aAAa,EAGb,MAAM,SAAS,CAAC;AAsGjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,MAAgB,EAChB,IAAW,EACX,OAAmB,EACnB,WAAmB,EACnB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,WAAuB,EACvB,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,2CAyTf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIX,aAAa,EAGb,MAAM,SAAS,CAAC;AAgGjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,MAAgB,EAChB,IAAW,EACX,OAAmB,EACnB,WAAmB,EACnB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,WAAuB,EACvB,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,+BA2Tf"}