@caspeco/casper-ui-library 8.0.3 → 8.2.0

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

@@ -3,7 +3,8 @@ type ComboboxItemProps = {
     item: ComboboxItemType;
     asPlainText?: boolean;
     isDeleting?: boolean;
+    highlightQuery?: string;
 };
-export declare function ComboboxItem({ item, asPlainText, isDeleting }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxItem({ item, asPlainText, isDeleting, highlightQuery }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=combobox-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-item.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAahE,KAAK,iBAAiB,GAAG;IACxB,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,iBAAiB,2CAkBhF"}
+{"version":3,"file":"combobox-item.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAchE,KAAK,iBAAiB,GAAG;IACxB,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,iBAAiB,2CAoBhG"}

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

@@ -1,9 +1,10 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Flex as t } from "@chakra-ui/react";
-import { Box as a } from "../box/box.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Flex as s } from "@chakra-ui/react";
+import { Box as n } from "../box/box.js";
+import { Highlight as l } from "../highlight/highlight.js";
 import { Tag as o } from "../tag/tag.js";
-import { ThemeSpaceVariable as c } from "../../theme/theme-types.js";
-const s = {
+import { ThemeSpaceVariable as m } from "../../theme/theme-types.js";
+const f = {
   info: o.Info,
   success: o.Success,
   warning: o.Warning,
@@ -13,14 +14,14 @@ const s = {
   neutral: o,
   undefined: o.ComboboxItem
 };
-function b({ item: r, asPlainText: p, isDeleting: n }) {
-  const l = n ? "primary" : r.variant || "neutral", d = s[l];
-  return p ? /* @__PURE__ */ i(t, { gap: c.XSmall, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: [
+function y({ item: r, asPlainText: d, isDeleting: p, highlightQuery: a }) {
+  const i = p ? "primary" : r.variant || "neutral", c = f[i];
+  return d ? /* @__PURE__ */ t(s, { gap: m.XSmall, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: [
     r.prepend,
-    r.label,
+    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(l, { query: a ?? "", children: r.label }) }),
     r.append
-  ] }) : /* @__PURE__ */ e(a, { overflow: "hidden", children: /* @__PURE__ */ e(d, { prepend: r.prepend, append: r.append, dot: r.dot, solid: n, children: /* @__PURE__ */ e(a, { display: "block", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: r.label }) }) });
+  ] }) : /* @__PURE__ */ e(n, { overflow: "hidden", children: /* @__PURE__ */ e(c, { prepend: r.prepend, append: r.append, dot: r.dot, solid: p, children: /* @__PURE__ */ e(n, { display: "block", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: /* @__PURE__ */ e(l, { query: a ?? "", children: r.label }) }) }) });
 }
 export {
-  b as ComboboxItem
+  y as ComboboxItem
 };

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

@@ -3,5 +3,5 @@ export declare function CheckboxOrRadioButton({ isSingleSelect, isChecked, }: {
     isSingleSelect: boolean;
     isChecked: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ComboboxMenu({ asPlainText, inputValue, selectedItems, displayItems, toggleItem, highlightState, openState, parentStrings, isSingleSelect, isSearching, isReadOnly, isHidingItems, popoverWidth, popoverPlacement, previousSelectedItems, parentRef, popupRef, footerContent, subMenuState, translation, }: ComboboxInnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxMenu(props: ComboboxInnerProps): import("react/jsx-runtime").JSX.Element;
 //# 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":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyClD,wBAAgB,qBAAqB,CAAC,EACrC,cAAc,EACd,SAAS,GACT,EAAE;IACF,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;CACnB,2CAwBA;AAED,wBAAgB,YAAY,CAAC,EAC5B,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,SAAS,EACT,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,WAAW,GACX,EAAE,kBAAkB,2CAwJpB"}
+{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AA2CjB,wBAAgB,qBAAqB,CAAC,EACrC,cAAc,EACd,SAAS,GACT,EAAE;IACF,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;CACnB,2CAEA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,2CAiGrD"}

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

@@ -1,117 +1,93 @@
-import { jsxs as l, jsx as i, Fragment as G } from "react/jsx-runtime";
-import { Box as d, Flex as g } from "@chakra-ui/react";
-import { autoUpdate as J, computePosition as K, flip as L } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { Fragment as z, useState as N, useEffect as Q } from "react";
-import { ComboboxItem as Z } from "./combobox-item.js";
-import { interpolate as R } from "./translations.js";
-import { ThemeColorVariable as o, ThemeShadowVariable as oo, ThemeRadiusVariable as D, ThemeSpaceVariable as t, ThemeIconSizeVariable as $, ThemeFontSizeVariable as ro, ThemeBorderVariable as no } from "../../theme/theme-types.js";
+import { jsxs as g, jsx as n, Fragment as _ } from "react/jsx-runtime";
+import { Box as C, Flex as y } 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 T } from "react";
+import { ComboboxItem as H } from "./combobox-item.js";
+import { interpolate as J } from "./translations.js";
+import { ThemeColorVariable as d, ThemeShadowVariable as K, ThemeRadiusVariable as Z, ThemeSpaceVariable as c, ThemeFontSizeVariable as R, ThemeBorderVariable as N, ThemeIconSizeVariable as F } from "../../theme/theme-types.js";
 import { Text as V } from "../text/text.js";
-import { Icon as B } from "../icon/icon.js";
-import { Icons as C } from "../icon/types.js";
-const eo = (n, e, u, a, p) => {
-  const [s, m] = N({
+import { Icon as z } from "../icon/icon.js";
+import { Icons as D } from "../icon/types.js";
+import { Checkbox as W } from "../checkbox/checkbox.js";
+import { Radio as ee } from "../radio/radio.js";
+const ne = (o, t, s, h, a) => {
+  const [b, x] = Y({
     transform: "translate(0, 0)",
     minWidth: 0
   });
-  return Q(() => {
-    if (!n.current || !e.current || !u) return () => {
+  return q(() => {
+    if (!o.current || !t.current || !s) return () => {
     };
-    const S = async () => {
-      if (n.current && e.current && u) {
-        const { width: b } = n.current.getBoundingClientRect(), { x, y: k } = await K(n.current, e.current, {
-          placement: p || "bottom-start",
-          middleware: [L()]
+    const k = async () => {
+      if (o.current && t.current && s) {
+        const { width: S } = o.current.getBoundingClientRect(), { x: P, y: u } = await Q(o.current, t.current, {
+          placement: a || "bottom-start",
+          middleware: [U()]
         });
-        m({
-          transform: `translate(${x}px, ${k}px)`,
-          minWidth: a || b
+        x({
+          transform: `translate(${P}px, ${u}px)`,
+          minWidth: h || S
         });
       }
-    }, h = () => {
-      S().catch(console.error);
+    }, w = () => {
+      k().catch(console.error);
     };
-    return J(n.current, e.current, h);
-  }, [n, e, u, p, a]), s;
+    return G(o.current, t.current, w);
+  }, [o, t, s, a, h]), b;
 };
-function to({
-  isSingleSelect: n,
-  isChecked: e
+function X({
+  isSingleSelect: o,
+  isChecked: t
 }) {
-  return /* @__PURE__ */ i(
-    d,
-    {
-      position: "relative",
-      width: "24px",
-      height: "24px",
-      flexShrink: "0",
-      border: `${n && e ? 8 : 2}px solid ${e ? o.Primary : o.OnBackground}`,
-      backgroundColor: e && !n ? o.Primary : "auto",
-      borderRadius: n ? "50%" : D.Small,
-      children: !n && e && /* @__PURE__ */ i(
-        B,
-        {
-          top: "-2px",
-          position: "absolute",
-          width: $.Small,
-          color: o.Surface,
-          icon: C.Checkbox
-        }
-      )
-    }
-  );
+  return o ? /* @__PURE__ */ n(ee, { isChecked: t }) : /* @__PURE__ */ n(W, { isChecked: t });
 }
-function fo({
-  asPlainText: n,
-  inputValue: e,
-  selectedItems: u,
-  displayItems: a,
-  toggleItem: p,
-  highlightState: s,
-  openState: m,
-  parentStrings: S,
-  isSingleSelect: h,
-  isSearching: b,
-  isReadOnly: x,
-  isHidingItems: k,
-  popoverWidth: I,
-  popoverPlacement: X,
-  previousSelectedItems: w,
-  parentRef: j,
-  popupRef: O,
-  footerContent: v,
-  subMenuState: M,
-  translation: T
-}) {
-  const H = eo(
-    j,
-    O,
-    m.isOpen,
-    I,
-    X
-  ), A = (r) => {
-    s.set(r);
+function pe(o) {
+  const {
+    inputValue: t,
+    displayItems: s,
+    highlightState: h,
+    openState: a,
+    isSingleSelect: b,
+    isSearching: x,
+    isHidingItems: k,
+    popoverWidth: w,
+    popoverPlacement: S,
+    parentRef: P,
+    popupRef: u,
+    footerContent: l,
+    translation: e,
+    folderStyle: i
+  } = o, r = ne(
+    P,
+    u,
+    a.isOpen,
+    w,
+    S
+  ), v = (m) => {
+    h.set(m);
   };
-  return /* @__PURE__ */ l(
-    d,
+  return /* @__PURE__ */ g(
+    C,
     {
-      display: m.isOpen ? "block" : "none",
+      display: a.isOpen ? "block" : "none",
       inset: "0 auto auto 0",
       position: "fixed",
       zIndex: "50",
       visibility: "visible",
-      backgroundColor: o.Surface,
-      borderRadius: D.Medium,
-      boxShadow: oo.Medium,
-      color: o.OnSurface,
+      backgroundColor: d.Surface,
+      borderRadius: Z.Medium,
+      boxShadow: K.Medium,
+      color: d.OnSurface,
       overflow: "hidden",
-      style: H,
-      ref: O,
-      onClick: (r) => {
-        r.preventDefault(), r.stopPropagation(), h && m.close();
+      style: r,
+      ref: u,
+      maxW: "90%",
+      onClick: (m) => {
+        m.preventDefault(), m.stopPropagation(), b && a.close();
       },
       children: [
-        /* @__PURE__ */ l(
-          g,
+        /* @__PURE__ */ g(
+          y,
           {
             as: "ul",
             flexDirection: "column",
@@ -119,103 +95,208 @@ function fo({
             overflowY: "auto",
             overflowX: "hidden",
             role: "listbox",
-            "aria-multiselectable": !h,
-            padding: `${t.Small} 0`,
+            "aria-multiselectable": !b,
+            padding: `${c.Small} 0`,
             children: [
-              b && a.length === 0 && e.length > 0 && /* @__PURE__ */ i(
+              x && s.length === 0 && t.length > 0 && /* @__PURE__ */ n(
                 V,
                 {
-                  px: t.Small,
-                  color: o.OnSurfaceSubdued,
-                  children: `${T.noMatchFor} "${e}"`
+                  px: c.Small,
+                  color: d.OnSurfaceSubdued,
+                  children: `${e.noMatchFor} "${t}"`
                 }
               ),
-              a.map((r, f) => {
-                const y = u.some((c) => c.id === r.id), E = (c) => {
-                  c.stopPropagation(), c.preventDefault(), p(r);
-                }, U = r.children?.length, P = r.id === "_back", W = M.opened[M.opened.length - 1], F = r.id === W?.id, Y = P ? /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", children: [
-                  /* @__PURE__ */ i(B, { icon: C.Back, size: $.Small }),
-                  r.label
-                ] }) : /* @__PURE__ */ l(G, { children: [
-                  /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
-                    S[r.id]?.map((c) => /* @__PURE__ */ l(z, { children: [
-                      /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: c }),
-                      /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: "/" })
-                    ] }, c)),
-                    /* @__PURE__ */ i(Z, { item: r, asPlainText: n })
-                  ] }),
-                  x ? void 0 : U && !F && !b ? /* @__PURE__ */ i(
-                    B,
-                    {
-                      icon: C.Forward,
-                      size: $.Small,
-                      color: o.OnBackgroundSubdued
-                    }
-                  ) : /* @__PURE__ */ i(to, { isSingleSelect: h, isChecked: y })
-                ] }), _ = w.length > 0 && w.length - 1 === f && w.length < a.length, q = !x && !b && (_ || (P || F));
-                return /* @__PURE__ */ l(z, { children: [
-                  /* @__PURE__ */ i(
-                    g,
-                    {
-                      as: "li",
-                      role: "option",
-                      width: "100%",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      padding: `${t.Small} ${t.Medium}`,
-                      gap: t.Medium,
-                      textDecoration: "none",
-                      backgroundColor: s.index === f ? o.AccentHoverAlpha : "",
-                      onClick: E,
-                      tabIndex: -1,
-                      onMouseEnter: () => A(f),
-                      "data-is-active-index": s.index === f,
-                      "aria-selected": y,
-                      children: Y
-                    }
-                  ),
-                  q && /* @__PURE__ */ i(
-                    d,
-                    {
-                      margin: `${t.Small} ${P ? 0 : t.Medium}`,
-                      height: "1px",
-                      flexShrink: 0,
-                      backgroundColor: o.OnBackgroundBorder
-                    }
-                  )
-                ] }, r.id);
-              }),
-              k && /* @__PURE__ */ i(
+              i === "stacked" ? /* @__PURE__ */ n(oe, { ...o, onHover: v }) : /* @__PURE__ */ n(re, { ...o, onHover: v }),
+              k && /* @__PURE__ */ n(
                 V,
                 {
-                  px: t.Small,
-                  py: t.Small,
-                  color: o.OnSurfaceSubdued,
-                  fontSize: ro.Small,
-                  children: R(T.showMaxItems, {
-                    count: a.length
+                  px: c.Small,
+                  py: c.Small,
+                  color: d.OnSurfaceSubdued,
+                  fontSize: R.Small,
+                  children: J(e.showMaxItems, {
+                    count: s.length
                   })
                 }
               )
             ]
           }
         ),
-        v && /* @__PURE__ */ i(
-          d,
+        l && /* @__PURE__ */ n(
+          C,
           {
             position: "sticky",
             bottom: "0",
-            backgroundColor: o.Surface,
-            padding: `${t.Small} ${t.Medium}`,
-            borderTop: `${no.XSmall} ${o.OnSurfaceBorder}`,
-            children: v
+            backgroundColor: d.Surface,
+            padding: `${c.Small} ${c.Medium}`,
+            borderTop: `${N.XSmall} ${d.OnSurfaceBorder}`,
+            children: l
           }
         )
       ]
     }
   );
 }
+const A = ({
+  children: o,
+  isChecked: t,
+  onClick: s,
+  isActive: h,
+  onHover: a
+}) => /* @__PURE__ */ n(
+  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: o
+  }
+), oe = ({
+  displayItems: o,
+  selectedItems: t,
+  toggleItem: s,
+  onHover: h,
+  parentSelectsChildren: a,
+  highlightState: b,
+  inputValue: x,
+  isSingleSelect: k
+}) => {
+  const w = (l, e) => l.children && l.children.length > 0 ? l.children.every((i) => w(i, e)) : e.some((i) => i.id === l.id), S = (l) => l.children && l.children.length > 0 ? l.children.some((e) => S(e)) : t.some((e) => e.id === l.id);
+  let P = 0;
+  const u = (l, e, i = []) => l.map((r) => {
+    const v = (p) => {
+      p.stopPropagation(), p.preventDefault(), s(r);
+    };
+    i.length > 0 && (i[i.length - 1] -= 1);
+    const m = P++, B = r.children && r.children.length > 0, I = !B || r.isSelectableParent;
+    let $ = e.some((p) => p.id === r.id);
+    return a && B && !r.isSelectableParent && w(r, e) && ($ = !0), /* @__PURE__ */ g(T, { children: [
+      /* @__PURE__ */ g(
+        A,
+        {
+          isActive: b.index === m,
+          isChecked: $,
+          onClick: v,
+          onHover: () => h(m),
+          children: [
+            /* @__PURE__ */ g(y, { alignItems: "center", whiteSpace: "nowrap", minW: 0, children: [
+              i.map((p, O, M) => {
+                const f = M.length === O + 1, j = p > 0, E = p === 0, L = j || f;
+                return /* @__PURE__ */ g(
+                  y,
+                  {
+                    w: c.Medium,
+                    minW: c.Medium,
+                    alignItems: "center",
+                    my: "-0.5rem",
+                    h: "2.5rem",
+                    children: [
+                      L && /* @__PURE__ */ n(
+                        C,
+                        {
+                          w: "1px",
+                          h: E ? "52%" : "100%",
+                          backgroundColor: d.OnSurface,
+                          mb: "auto"
+                        }
+                      ),
+                      f && /* @__PURE__ */ n(
+                        C,
+                        {
+                          w: "inherit",
+                          height: "1px",
+                          backgroundColor: d.OnSurface,
+                          mr: c.XSmall
+                        }
+                      )
+                    ]
+                  },
+                  `${r.id}_${O}`
+                );
+              }),
+              /* @__PURE__ */ n(H, { item: r, asPlainText: !0, highlightQuery: x })
+            ] }),
+            I ? /* @__PURE__ */ n(X, { isSingleSelect: k, isChecked: $ }) : a && !k && /* @__PURE__ */ n(W, { isIndeterminate: S(r), isChecked: $ })
+          ]
+        }
+      ),
+      r.children && u(r.children, e, [...i, r.children.length])
+    ] }, r.id);
+  });
+  return u(o, t);
+}, re = ({
+  displayItems: o,
+  selectedItems: t,
+  toggleItem: s,
+  onHover: h,
+  highlightState: a,
+  isSingleSelect: b,
+  subMenuState: x,
+  parentStrings: k,
+  asPlainText: w,
+  isSearching: S,
+  isReadOnly: P,
+  previousSelectedItems: u
+}) => {
+  const l = (e, i) => {
+    e.stopPropagation(), e.preventDefault(), s(i);
+  };
+  return o.map((e, i) => {
+    const r = t.some((f) => f.id === e.id), v = e.children?.length, m = e.id === "_back", B = x.opened[x.opened.length - 1], I = e.id === B?.id, $ = m ? /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", children: [
+      /* @__PURE__ */ n(z, { icon: D.Back, size: F.Small }),
+      e.label
+    ] }) : /* @__PURE__ */ g(_, { children: [
+      /* @__PURE__ */ g(y, { gap: c.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
+        k[e.id]?.map((f) => /* @__PURE__ */ g(T, { children: [
+          /* @__PURE__ */ n(C, { color: d.OnSurfaceSubdued, children: f }),
+          /* @__PURE__ */ n(C, { color: d.OnSurfaceSubdued, children: "/" })
+        ] }, f)),
+        /* @__PURE__ */ n(H, { item: e, asPlainText: w })
+      ] }),
+      P ? void 0 : v && !I && !S ? /* @__PURE__ */ n(
+        z,
+        {
+          icon: D.Forward,
+          size: F.Small,
+          color: d.OnBackgroundSubdued
+        }
+      ) : /* @__PURE__ */ n(X, { isSingleSelect: b, isChecked: r })
+    ] }), p = u.length > 0 && u.length - 1 === i && u.length < o.length, M = !P && !S && (p || (m || I));
+    return /* @__PURE__ */ g(T, { children: [
+      /* @__PURE__ */ n(
+        A,
+        {
+          isActive: a.index === i,
+          isChecked: r,
+          onClick: (f) => l(f, e),
+          onHover: () => h(i),
+          children: $
+        }
+      ),
+      M && /* @__PURE__ */ n(
+        C,
+        {
+          margin: `${c.Small} ${m ? 0 : c.Medium}`,
+          height: "1px",
+          flexShrink: 0,
+          backgroundColor: d.OnBackgroundBorder
+        }
+      )
+    ] }, e.id);
+  });
+};
 export {
-  to as CheckboxOrRadioButton,
-  fo as ComboboxMenu
+  X as CheckboxOrRadioButton,
+  pe as ComboboxMenu
 };

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

@@ -6,4 +6,5 @@ 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;
 //# 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":"AAgJA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAiDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAoBnB,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"}
+{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAqOA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAiDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAoBnB,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"}

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, isInvalid, footerContent, popoverWidth, popoverPlacement, collapsed, ...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, isInvalid, footerContent, popoverWidth, popoverPlacement, collapsed, folderStyle, parentSelectsChildren, ...props }: ComboboxProps): import("react/jsx-runtime").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,EAKb,MAAM,SAAS,CAAC;AAqGjB;;;;;;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,SAAS,EACT,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,aAAa,2CAgMf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIX,aAAa,EAKb,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,SAAS,EACT,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,WAAuB,EACvB,qBAAqB,EACrB,GAAG,KAAK,EACR,EAAE,aAAa,2CAgTf"}