@opencxh/ui-kit 3.96.0 → 3.98.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { clsx as Ae } from "clsx";
+import { clsx as je } from "clsx";
 import { jsxs as d, jsx as e, Fragment as we } from "react/jsx-runtime";
-import { VideoOff as je, User as _e, MicOff as Pe, Mic as Be, ChevronDown as Oe, FileText as xe, HardDrive as Ce, X as We, ArrowLeft as ke, Search as $e, FolderPlus as Fe, Upload as Ve, Folder as Se, Pencil as Re, ChevronDownIcon as He, ChevronRight as qe } from "lucide-react";
-import se, { useRef as Z, useEffect as U, forwardRef as ce, useState as B, useMemo as de, useCallback as ae, createContext as Ue, Component as Ge } from "react";
+import { VideoOff as _e, User as Pe, MicOff as Be, Mic as Oe, ChevronDown as We, ChevronDownIcon as $e, FileText as xe, HardDrive as Ce, X as Fe, ArrowLeft as ke, Search as Te, FolderPlus as Ve, Upload as Re, Folder as Se, Pencil as He, ChevronRight as qe } from "lucide-react";
+import se, { useRef as Z, useEffect as G, forwardRef as ce, useState as B, useMemo as de, useCallback as ae, createContext as Ue, Component as Ge } from "react";
 function p(...t) {
-  return Ae(t);
+  return je(t);
 }
 function er(t) {
   return (a, r) => t[a]?.[r] || "";
@@ -40,9 +40,9 @@ function nr({
         u
       ),
       children: [
-        s && o ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: o }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: a ? /* @__PURE__ */ e("img", { src: a, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: s ? /* @__PURE__ */ e(je, { className: "w-8 h-8" }) : /* @__PURE__ */ e(_e, { className: "w-8 h-8" }) }) }),
+        s && o ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: o }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: a ? /* @__PURE__ */ e("img", { src: a, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: s ? /* @__PURE__ */ e(_e, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Pe, { className: "w-8 h-8" }) }) }),
         /* @__PURE__ */ d("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-black/50 text-white text-xs", children: [
-          r ? /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Be, { className: "w-3 h-3" }),
+          r ? /* @__PURE__ */ e(Be, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Oe, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: t })
         ] })
       ]
@@ -51,7 +51,7 @@ function nr({
 }
 function ar({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
   const s = Z(null);
-  return U(() => {
+  return G(() => {
     if (!a || !s.current) return;
     const o = t(s.current);
     return () => {
@@ -302,7 +302,7 @@ const lr = ({
   triggerLabel: o
 }) => {
   const [u, x] = B(!1), [b, g] = B({}), f = Z(null), l = Z(null);
-  U(() => {
+  G(() => {
     if (!u) return;
     const k = (y) => {
       f.current && !f.current.contains(y.target) && x(!1);
@@ -356,7 +356,7 @@ const lr = ({
   secondary: "btn o__secondary",
   outline: "btn o__secondary"
 };
-function Te({
+function De({
   label: t,
   onClick: a,
   variant: r = "primary",
@@ -400,7 +400,7 @@ function Te({
               n === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
               "!rounded-l-none"
             ),
-            children: /* @__PURE__ */ e(Oe, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
           }
         ),
         children: (m) => /* @__PURE__ */ e(we, { children: o.map((h) => /* @__PURE__ */ d(
@@ -511,7 +511,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   format: g = "MM/dd/yyyy"
 }, f) => {
   const [l, m] = B(!1), [h, k] = B(() => t || /* @__PURE__ */ new Date()), w = Z(null);
-  U(() => {
+  G(() => {
     const D = (W) => {
       w.current && !w.current.contains(W.target) && m(!1);
     };
@@ -544,7 +544,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     k(new Date(h.getFullYear(), h.getMonth() - 1, 1));
   }, P = () => {
     k(new Date(h.getFullYear(), h.getMonth() + 1, 1));
-  }, G = () => {
+  }, U = () => {
     a?.(null), m(!1);
   }, F = p(
     "w-full border border-neutral rounded-md transition-colors duration-200",
@@ -650,7 +650,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: G,
+            onClick: U,
             className: "text-sm text-muted hover:text-default",
             children: "Clear"
           }
@@ -734,8 +734,8 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     onChange: A,
     ...N
   }, q) => {
-    const P = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!r, F = Z(null), z = Z(null), [H, D] = B(y || ""), [W, V] = B(!1), [i, v] = B(!1), [E, S] = B(!1);
-    U(() => {
+    const P = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!r, F = Z(null), z = Z(null), [H, D] = B(y || ""), [W, V] = B(!1), [i, v] = B(!1), [E, S] = B(!1);
+    G(() => {
       y !== void 0 && D(y);
     }, [y]);
     const M = de(() => {
@@ -745,7 +745,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         (I) => String(I.label).toLowerCase().includes(T)
       );
     }, [H, l, w, E]);
-    U(() => {
+    G(() => {
       if (!m || !H) {
         v(!1);
         return;
@@ -763,7 +763,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       return () => {
         clearTimeout(T), v(!1);
       };
-    }, [H, k, m]), U(() => {
+    }, [H, k, m]), G(() => {
       const T = (I) => {
         F.current && !F.current.contains(I.target) && V(!1);
       };
@@ -794,7 +794,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               htmlFor: P,
               className: ie(
                 "block text-sm font-medium mb-1",
-                G ? "text-error" : "text-default",
+                U ? "text-error" : "text-default",
                 b || ""
               ),
               children: t
@@ -822,7 +822,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  G ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
+                  U ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
                   g || ""
                 ),
                 ...N
@@ -900,7 +900,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             {
               className: ie(
                 "mt-1 text-xs",
-                G ? "text-error" : "text-muted"
+                U ? "text-error" : "text-muted"
               ),
               children: r || a
             }
@@ -941,7 +941,7 @@ const ct = {
     onCreateOption: y,
     ...A
   }, N) => {
-    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, P = !!r, [G, F] = se.useState(!1), [z, H] = se.useState(""), D = se.useRef(null), [W, V] = se.useState(o);
+    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, P = !!r, [U, F] = se.useState(!1), [z, H] = se.useState(""), D = se.useRef(null), [W, V] = se.useState(o);
     se.useImperativeHandle(N, () => D.current), se.useEffect(() => {
       const $ = (j) => {
         D.current && !D.current.contains(j.target) && F(!1);
@@ -1009,7 +1009,7 @@ const ct = {
             "label",
             {
               htmlFor: q,
-              onClick: () => F(!G),
+              onClick: () => F(!U),
               className: p(
                 "block text-sm font-medium mb-1",
                 P ? "text-error" : "text-default",
@@ -1019,14 +1019,14 @@ const ct = {
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ d(
               "button",
               {
                 type: "button",
                 id: q,
-                onClick: () => F(!G),
+                onClick: () => F(!U),
                 className: p(
-                  "block w-full rounded-lg border transition-colors duration-200 text-left",
+                  "flex w-full items-center justify-between gap-2 rounded-lg border transition-colors duration-200 text-left",
                   "focus:outline-none focus:ring-0 focus:ring-offset-0",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
                   "bg-module",
@@ -1034,10 +1034,22 @@ const ct = {
                   P ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
                   g
                 ),
-                children: /* @__PURE__ */ e("span", { className: "block truncate", children: X() })
+                children: [
+                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: X() }),
+                  /* @__PURE__ */ e(
+                    $e,
+                    {
+                      size: 16,
+                      className: p(
+                        "shrink-0 opacity-60 transition-transform duration-200",
+                        U && "rotate-180"
+                      )
+                    }
+                  )
+                ]
               }
             ),
-            G && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
+            U && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
               l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
@@ -1439,21 +1451,21 @@ const ft = ({
   header: b
 }) => {
   const [g, f] = B(!1), [l, m] = B(null), [h, k] = B({ top: 0, left: 0 }), [w, y] = B({}), A = Z(null), N = Z(null), q = Z(null), P = Z(null);
-  U(() => {
+  G(() => {
     const i = (v) => {
       A.current && (!A.current.contains(v.target) || q.current && !q.current.contains(v.target)) && (f(!1), m(null), P.current && (clearTimeout(P.current), P.current = null));
     };
     return g && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [g]), U(() => {
+  }, [g]), G(() => {
     const i = (v) => {
       v.key === "Escape" && (f(!1), m(null), P.current && (clearTimeout(P.current), P.current = null));
     };
     return g && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
-  }, [g]), U(() => {
+  }, [g]), G(() => {
     if (l && A.current) {
       const i = A.current.querySelector(
         `[data-option-value="${l}"]`
@@ -1466,10 +1478,10 @@ const ft = ({
         });
       }
     }
-  }, [l]), U(() => () => {
+  }, [l]), G(() => () => {
     P.current && clearTimeout(P.current);
   }, []);
-  const G = (i) => {
+  const U = (i) => {
     if (i.stopPropagation(), !o) {
       if (!g) {
         const v = N.current?.getBoundingClientRect();
@@ -1510,7 +1522,7 @@ const ft = ({
           "button",
           {
             ref: N,
-            onClick: G,
+            onClick: U,
             disabled: o,
             className: p("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": o
@@ -1763,7 +1775,7 @@ const ft = ({
       }
     )
   }
-), De = () => /* @__PURE__ */ e(
+), Ie = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1799,7 +1811,7 @@ const ft = ({
       /* @__PURE__ */ e("span", { className: "text-default", children: t.multiSelect && Array.isArray(t.value) ? t.value?.map(
         (n) => t.options?.find((s) => s.value === n)?.label
       ).join(", ") : t.options?.find((n) => n.value === t.value)?.label }),
-      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(De, {}) })
+      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(Ie, {}) })
     ] }),
     /* @__PURE__ */ d("div", { className: "absolute z-10 left-0 mt-1 bg-module border border-neutral rounded-lg shadow-lvl-0 p-2 w-48", children: [
       t.options?.map((n) => /* @__PURE__ */ e(
@@ -1842,7 +1854,7 @@ const ft = ({
   selectable: l = !1,
   selectedRows: m = [],
   onSelectionChange: h,
-  getRowKey: k = (G, F) => F,
+  getRowKey: k = (U, F) => F,
   emptyContent: w,
   hoverable: y = !0,
   bordered: A = !1,
@@ -1850,7 +1862,7 @@ const ft = ({
   className: q,
   rowClassName: P
 }) => {
-  const [G, F] = B(""), [z, H] = B({
+  const [U, F] = B(""), [z, H] = B({
     column: null,
     direction: null
   }), [D, W] = B({
@@ -1858,10 +1870,10 @@ const ft = ({
     pageSize: b
   }), V = Z(null), i = de(() => {
     let c = t;
-    if (n && G.trim()) {
+    if (n && U.trim()) {
       const C = a.filter(
         (R) => R.searchable !== !1
-      ), O = G.toLowerCase();
+      ), O = U.toLowerCase();
       c = c.filter((R) => C.some((_) => {
         const J = typeof _.accessor == "function" ? _.accessor(R) : R[_.accessor];
         return String(J || "").toLowerCase().includes(O);
@@ -1875,7 +1887,7 @@ const ft = ({
         return String(_ || "") === C.value;
       }));
     }), c;
-  }, [t, G, a, n, o]), v = de(() => {
+  }, [t, U, a, n, o]), v = de(() => {
     if (!z.column || !z.direction) return i;
     const c = a.find((C) => C.id === z.column);
     return c ? [...i].sort((C, O) => {
@@ -1911,9 +1923,9 @@ const ft = ({
     },
     [E, h]
   );
-  U(() => {
+  G(() => {
     W((c) => ({ ...c, page: 0 }));
-  }, [G, z]), U(() => {
+  }, [U, z]), G(() => {
     W((c) => ({ ...c, page: 0 }));
   }, [o.map((c) => c.value).join(",")]);
   const X = v.length, $ = Math.ceil(X / D.pageSize), j = D.page * D.pageSize + 1, T = Math.min(j + D.pageSize - 1, X), I = E.length > 0 && E.every((c) => {
@@ -1942,7 +1954,7 @@ const ft = ({
         ue,
         {
           placeholder: s,
-          value: G,
+          value: U,
           onChange: (c) => F(c.target.value),
           startIcon: /* @__PURE__ */ e(ht, {}),
           className: "max-w-sm"
@@ -2080,7 +2092,7 @@ const ft = ({
                   {
                     trigger: /* @__PURE__ */ d("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-muted hover:text-default", children: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
-                      /* @__PURE__ */ e(De, {})
+                      /* @__PURE__ */ e(Ie, {})
                     ] }),
                     options: g.map((_) => ({
                       value: _.id,
@@ -2254,7 +2266,7 @@ const ft = ({
     }, P = {
       "opacity-50 cursor-not-allowed": w.disabled,
       "cursor-pointer": !w.disabled
-    }, G = y ? {
+    }, U = y ? {
       "border-primary text-primary": s === "default" || s === "underline",
       "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": s === "pills"
     } : {}, F = !y && !w.disabled ? {
@@ -2262,7 +2274,7 @@ const ft = ({
       "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "pills",
       "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": s === "underline"
     } : {};
-    return p(A, N, q, P, G, F);
+    return p(A, N, q, P, U, F);
   };
   return /* @__PURE__ */ e(wt.Provider, { value: l, children: /* @__PURE__ */ d("div", { children: [
     /* @__PURE__ */ e("div", { className: h, role: "tablist", children: t.map((w) => /* @__PURE__ */ e(
@@ -2314,13 +2326,13 @@ function St({
   showCloseButton: f = !0
 }) {
   const l = Z(null), m = Z(null);
-  U(() => {
+  G(() => {
     if (!t || !o) return;
     const k = (w) => {
       w.key === "Escape" && a();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [t, o, a]), U(() => (t ? (m.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (m.current && m.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, o, a]), G(() => (t ? (m.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (m.current && m.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const h = (k) => {
@@ -2481,12 +2493,12 @@ const Et = ({
   onDownloadFile: f,
   onRegisterFile: l
 }) => {
-  const [m, h] = B(!1), [k, w] = B([]), [y, A] = B(null), [N, q] = B("/"), [P, G] = B([]), [F, z] = B(!1), [H, D] = B(""), [W, V] = B(
+  const [m, h] = B(!1), [k, w] = B([]), [y, A] = B(null), [N, q] = B("/"), [P, U] = B([]), [F, z] = B(!1), [H, D] = B(""), [W, V] = B(
     typeof t == "object" ? t : null
   ), [i, v] = B(!1), [E, S] = B(""), M = Z(null);
-  U(() => {
+  G(() => {
     m && L();
-  }, [m]), U(() => {
+  }, [m]), G(() => {
     m && y && Q();
   }, [m, y, N, H]);
   const L = async () => {
@@ -2504,7 +2516,7 @@ const Et = ({
       z(!0);
       try {
         const c = await x?.({ mountId: y.id, name: H, path: N });
-        c?.data && G(c.data);
+        c?.data && U(c.data);
       } catch (c) {
         console.error("Failed to load files", c);
       } finally {
@@ -2702,7 +2714,7 @@ const Et = ({
             {
               onClick: T,
               className: "p-1 hover:bg-neutral-container rounded",
-              children: /* @__PURE__ */ e(oe, { icon: We, size: "xs" })
+              children: /* @__PURE__ */ e(oe, { icon: Fe, size: "xs" })
             }
           )
         ]
@@ -2747,7 +2759,7 @@ const Et = ({
                         placeholder: "Search...",
                         value: H,
                         onChange: (c) => D(c.target.value),
-                        startIcon: /* @__PURE__ */ e($e, { size: 14 }),
+                        startIcon: /* @__PURE__ */ e(Te, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
@@ -2759,7 +2771,7 @@ const Et = ({
                           variant: "outline",
                           size: "sm",
                           onClick: () => v(!0),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: Fe, size: "xs" }),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
                           children: "New Folder"
                         }
                       ),
@@ -2769,7 +2781,7 @@ const Et = ({
                           variant: "primary",
                           size: "sm",
                           onClick: () => M.current?.click(),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: Re, size: "xs" }),
                           loading: F,
                           children: "Upload"
                         }
@@ -2875,7 +2887,7 @@ function Mt({
   showTemplate: x = !0
 }) {
   const [b, g] = B([]);
-  U(() => {
+  G(() => {
     let l = !0;
     return Promise.resolve(r?.()).then((m) => {
       l && m && g(m.data ?? []);
@@ -2952,8 +2964,8 @@ const cr = ({
   ref: k,
   sdk: w
 }) => {
-  const [y, A] = B(a || {}), [N, q] = B({}), [P, G] = B({});
-  U(() => {
+  const [y, A] = B(a || {}), [N, q] = B({}), [P, U] = B({});
+  G(() => {
     a && A({ ...a });
   }, [a]);
   const F = ae(
@@ -2996,7 +3008,7 @@ const cr = ({
         i,
         v
       );
-      t.flatMap((L) => L.items).find((L) => L.name === i)?.removeIfEmpty && (v == null || v === "") && (E = Tt(E, i)), A(E), G((L) => ({ ...L, [i]: !0 }));
+      t.flatMap((L) => L.items).find((L) => L.name === i)?.removeIfEmpty && (v == null || v === "") && (E = Tt(E, i)), A(E), U((L) => ({ ...L, [i]: !0 }));
       const M = F(i, v, E);
       q((L) => ({
         ...L,
@@ -3775,7 +3787,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
 }) => {
   const [k, w] = B(!0), [y, A] = B(!1), [N, q] = B(t), P = (V) => {
     w(!1), A(!1), l?.(V);
-  }, G = (V) => {
+  }, U = (V) => {
     if (w(!1), A(!0), x && N !== x) {
       q(x), A(!1), w(!0);
       return;
@@ -3848,7 +3860,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
         alt: a,
         className: z,
         onLoad: P,
-        onError: G
+        onError: U
       }
     ),
     k && o && /* @__PURE__ */ e("div", { className: H, children: b || D }),
@@ -3867,9 +3879,9 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   onTitleChange: g
 }) => {
   const [f, l] = B(!1), [m, h] = B(t), k = Z(null);
-  U(() => {
+  G(() => {
     h(t);
-  }, [t]), U(() => {
+  }, [t]), G(() => {
     f && k.current && (k.current.focus(), k.current.select());
   }, [f]);
   const w = () => {
@@ -3926,7 +3938,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
                 }
               ),
               b && /* @__PURE__ */ e(
-                Re,
+                He,
                 {
                   size: 15,
                   onClick: w,
@@ -3937,7 +3949,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
           ] }) }),
           r.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: r.map(
             (N) => N.splitOptions && N.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              Te,
+              De,
               {
                 label: N.label,
                 onClick: N.onClick,
@@ -3996,7 +4008,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   s && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: s }),
   t.length > 0 && /* @__PURE__ */ e("div", { className: p("flex flex-wrap gap-2", !s && "ml-auto"), children: t.map(
     (o) => o.splitOptions && o.splitOptions.length > 0 ? /* @__PURE__ */ e(
-      Te,
+      De,
       {
         label: o.label,
         onClick: o.onClick,
@@ -4284,7 +4296,7 @@ const pr = ({
     n
   );
   return /* @__PURE__ */ e("div", { className: g, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(b) }) });
-}, Ie = ({ item: t, isSelectedHandler: a, onClick: r, depth: n = 0 }) => {
+}, ze = ({ item: t, isSelectedHandler: a, onClick: r, depth: n = 0 }) => {
   const [s, o] = B(t.defaultCollapsed ?? !1), u = t.children && t.children.length > 0, x = u && n === 0, b = () => {
     u && o(!s);
   }, g = a ? a(t.path) : !1;
@@ -4307,12 +4319,12 @@ const pr = ({
           t.icon && /* @__PURE__ */ e("span", { className: "mr-2 shrink-0", children: t.icon }),
           /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 truncate", children: t.label }),
           t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: t.count }),
-          u && /* @__PURE__ */ e("span", { className: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e(He, { className: "w-4 h-4 text-muted" }) })
+          u && /* @__PURE__ */ e("span", { className: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e($e, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
     u && !s && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((f, l) => /* @__PURE__ */ e(
-      Ie,
+      ze,
       {
         item: f,
         isSelectedHandler: a,
@@ -4337,7 +4349,7 @@ const pr = ({
   o && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: o }),
   /* @__PURE__ */ e("ul", { children: r.map(
     (u, x) => !u.path && !u.label && !u.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, x) : /* @__PURE__ */ e(
-      Ie,
+      ze,
       {
         item: u,
         isSelectedHandler: n,
@@ -4513,9 +4525,9 @@ const gr = ({
   const [u, x] = B(""), [b, g] = B(s || []), [f, l] = B(o || 0), m = Z(null), h = Z(null), w = (b.length ? t.find((y) => y.id === b[0])?.subCommands || [] : t).filter(
     (y) => y.label.toLowerCase().includes(u.toLowerCase())
   );
-  return U(() => {
+  return G(() => {
     a || (x(""), g(s || []), l(o || 0));
-  }, [a]), U(() => {
+  }, [a]), G(() => {
     const y = (A) => {
       if (a) {
         if (A.key === "Escape")
@@ -4535,12 +4547,12 @@ const gr = ({
       }
     };
     return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
-  }, [a, r, w, f, b]), U(() => {
+  }, [a, r, w, f, b]), G(() => {
     const y = (A) => {
       m.current && !m.current.contains(A.target) && r();
     };
     return a && document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
-  }, [a, r]), U(() => {
+  }, [a, r]), G(() => {
     if (!a) return;
     h.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
   }, [f, a]), a ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ d(
@@ -4550,7 +4562,7 @@ const gr = ({
       ref: m,
       children: [
         /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
-          /* @__PURE__ */ e($e, { className: "w-4 h-4 text-muted shrink-0" }),
+          /* @__PURE__ */ e(Te, { className: "w-4 h-4 text-muted shrink-0" }),
           /* @__PURE__ */ e(
             "input",
             {
@@ -4668,7 +4680,7 @@ const gr = ({
   info: "border-info",
   neutral: "border-neutral",
   white: "border-white"
-}, ze = ce(
+}, Ae = ce(
   ({
     padding: t,
     margin: a,
@@ -4699,8 +4711,8 @@ const gr = ({
     }
   )
 );
-ze.displayName = "Box";
-const yr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ d(ze, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
+Ae.displayName = "Box";
+const yr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ d(Ae, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
   a && /* @__PURE__ */ e("span", { className: "text-base font-medium text-default mb-2", children: a }),
   t
 ] });
@@ -4713,7 +4725,7 @@ function Nr({
   className: o
 }) {
   const u = Z(null), [x, b] = B(!0), [g, f] = B(null), l = Z(null);
-  return Z(null), U(() => {
+  return Z(null), G(() => {
     let m = !0;
     return (async () => {
       b(!0);
@@ -4730,7 +4742,7 @@ function Nr({
     })(), () => {
       m = !1;
     };
-  }, [t, a]), U(() => {
+  }, [t, a]), G(() => {
     if (x || !g || r === "react") return;
     const m = u.current;
     if (m) {
@@ -4745,7 +4757,7 @@ function Nr({
         };
       }
     }
-  }, [g, r, x]), U(() => {
+  }, [g, r, x]), G(() => {
     r === "svelte" && l.current && l.current.$set?.(s);
   }, [s, r]), /* @__PURE__ */ d("div", { ref: u, className: o, style: { display: "contents" }, children: [
     x && n,
@@ -4784,7 +4796,7 @@ export {
   Ot as Avatar,
   ur as AvatarStack,
   ir as Badge,
-  ze as Box,
+  Ae as Box,
   te as Button,
   lr as ButtonGroup,
   yr as Card,
@@ -4812,7 +4824,7 @@ export {
   fe as Select,
   xr as SidebarMenu,
   dr as Spinner,
-  Te as SplitButton,
+  De as SplitButton,
   Et as StorageInput,
   or as TabBar,
   Le as Table,