npm - @opencxh/ui-kit - Versions diffs - 3.81.0 → 3.82.0 - Mend

@opencxh/ui-kit 3.81.0 → 3.82.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.cjs +1 -1
package/dist/index.cjs.map +1 -1
package/dist/index.js +548 -547
package/dist/index.js.map +1 -1
package/dist/src/navigation/Sidebar.d.ts +2 -0
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -15,10 +15,10 @@ function Yt({ tiles: t, pinned: a, className: r }) {
   if (a)
     return /* @__PURE__ */ d("div", { className: x("flex flex-col md:flex-row gap-2 h-full", r), children: [
       /* @__PURE__ */ e("div", { className: "flex-1 min-h-[240px]", children: a }),
-      t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((s, c) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: s }, c)) })
+      t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((s, i) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: s }, i)) })
     ] });
   const n = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
-  return /* @__PURE__ */ e("div", { className: x("grid gap-2 h-full", n, r), children: t.map((s, c) => /* @__PURE__ */ e("div", { children: s }, c)) });
+  return /* @__PURE__ */ e("div", { className: x("grid gap-2 h-full", n, r), children: t.map((s, i) => /* @__PURE__ */ e("div", { children: s }, i)) });
 }
 function Zt({
   name: t,
@@ -26,8 +26,8 @@ function Zt({
   muted: r,
   speaking: n,
   hasVideo: s,
-  videoSlot: c,
-  className: f
+  videoSlot: i,
+  className: m
 }) {
   return /* @__PURE__ */ d(
     "div",
@@ -35,10 +35,10 @@ function Zt({
       className: x(
         "relative rounded-lg overflow-hidden bg-gray-800 aspect-video flex items-center justify-center",
         n && "ring-2 ring-emerald-400",
-        f
+        m
       ),
       children: [
-        s && c ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: c }) : /* @__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(Be, { className: "w-8 h-8" }) }) }),
+        s && i ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: i }) : /* @__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(Be, { 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(_e, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: t })
@@ -51,9 +51,9 @@ function Xt({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
   const s = Z(null);
   return K(() => {
     if (!a || !s.current) return;
-    const c = t(s.current);
+    const i = t(s.current);
     return () => {
-      typeof c == "function" && c(), s.current && (s.current.innerHTML = "");
+      typeof i == "function" && i(), s.current && (s.current.innerHTML = "");
     };
   }, [t, a]), /* @__PURE__ */ e(
     "div",
@@ -94,14 +94,14 @@ const Ke = {
     fullWidth: r = !1,
     loading: n = !1,
     leftIcon: s,
-    rightIcon: c,
-    iconOnly: f = !1,
-    className: b,
+    rightIcon: i,
+    iconOnly: m = !1,
+    className: g,
     children: p,
-    disabled: g,
-    ...m
+    disabled: b,
+    ...f
   }, l) => {
-    const u = g || n;
+    const u = b || n;
     return /* @__PURE__ */ d(
       "button",
       {
@@ -114,22 +114,22 @@ const Ke = {
           // Variant styles
           Ke[t],
           // Size styles
-          f ? Ye[a] : Je[a],
+          m ? Ye[a] : Je[a],
           // Full width
           r && "w-full",
           // Loading state
           n && "cursor-wait",
-          b
+          g
         ),
         disabled: u,
-        ...m,
+        ...f,
         children: [
           n && /* @__PURE__ */ d(
             "svg",
             {
               className: x(
                 "animate-spin",
-                f ? "h-4 w-4" : "h-4 w-4 mr-2"
+                m ? "h-4 w-4" : "h-4 w-4 mr-2"
               ),
               fill: "none",
               viewBox: "0 0 24 24",
@@ -156,10 +156,10 @@ const Ke = {
               ]
             }
           ),
-          !n && s && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !f && "mr-2"), children: s }),
-          !f && p,
-          !n && c && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !f && "ml-2"), children: c }),
-          f && !n && !s && !c && p
+          !n && s && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !m && "mr-2"), children: s }),
+          !m && p,
+          !n && i && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !m && "ml-2"), children: i }),
+          m && !n && !s && !i && p
         ]
       }
     );
@@ -173,7 +173,7 @@ const Qt = ({
   attached: n = !0,
   className: s
 }) => {
-  const c = x(
+  const i = x(
     "inline-flex",
     {
       // Orientation
@@ -195,21 +195,21 @@ const Qt = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: c, role: "group", children: t });
+  return /* @__PURE__ */ e("div", { className: i, role: "group", children: t });
 }, er = ({
   variant: t = "default",
   size: a = "md",
   color: r = "primary",
   disabled: n = !1,
   external: s = !1,
-  className: c,
-  children: f,
-  href: b,
+  className: i,
+  children: m,
+  href: g,
   target: p,
-  rel: g,
-  ...m
+  rel: b,
+  ...f
 }) => {
-  const l = s || b && (b.startsWith("http") || b.startsWith("mailto:")), u = x(
+  const l = s || g && (g.startsWith("http") || g.startsWith("mailto:")), u = x(
     // Base styles
     "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
     // Size variants
@@ -262,15 +262,15 @@ const Qt = ({
     {
       "opacity-50 cursor-not-allowed pointer-events-none": n
     },
-    c
+    i
   ), h = {
-    ...m,
-    href: n ? void 0 : b,
+    ...f,
+    href: n ? void 0 : g,
     target: l ? "_blank" : p,
-    rel: l ? "noopener noreferrer" : g
+    rel: l ? "noopener noreferrer" : b
   };
   return /* @__PURE__ */ d("a", { className: u, ...h, children: [
-    f,
+    m,
     l && /* @__PURE__ */ e(
       "svg",
       {
@@ -305,24 +305,24 @@ function ze({
   variant: r = "primary",
   size: n = "md",
   icon: s,
-  options: c,
-  disabled: f = !1
+  options: i,
+  disabled: m = !1
 }) {
-  const [b, p] = O(!1), g = Z(null), m = ae(() => {
+  const [g, p] = O(!1), b = Z(null), f = ae(() => {
     p((l) => !l);
   }, []);
   return K(() => {
     const l = (u) => {
-      g.current && !g.current.contains(u.target) && p(!1);
+      b.current && !b.current.contains(u.target) && p(!1);
     };
     return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
-  }, []), /* @__PURE__ */ d("div", { ref: g, className: "relative inline-flex items-center gap-px", children: [
+  }, []), /* @__PURE__ */ d("div", { ref: b, className: "relative inline-flex items-center gap-px", children: [
     /* @__PURE__ */ d(
       "button",
       {
         type: "button",
         onClick: a,
-        disabled: f,
+        disabled: m,
         className: x(
           "inline-flex items-center justify-center font-medium transition-colors duration-200",
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
@@ -341,8 +341,8 @@ function ze({
       "button",
       {
         type: "button",
-        onClick: m,
-        disabled: f,
+        onClick: f,
+        disabled: m,
         className: x(
           "inline-flex items-center justify-center font-medium transition-colors duration-200",
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
@@ -354,7 +354,7 @@ function ze({
         children: /* @__PURE__ */ e(Oe, { className: "h-4 w-4" })
       }
     ),
-    b && c.length > 0 && /* @__PURE__ */ e("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white shadow-lg py-1", children: c.map((l) => /* @__PURE__ */ e(
+    g && i.length > 0 && /* @__PURE__ */ e("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white shadow-lg py-1", children: i.map((l) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
@@ -388,21 +388,21 @@ const Xe = {
     error: r,
     size: n = "md",
     indeterminate: s = !1,
-    containerClassName: c,
-    labelClassName: f,
-    className: b,
+    containerClassName: i,
+    labelClassName: m,
+    className: g,
     id: p,
-    ...g
-  }, m) => {
+    ...b
+  }, f) => {
     const l = p || `checkbox-${Math.random().toString(36).substr(2, 9)}`, u = !!r;
     return se.useEffect(() => {
-      m && typeof m == "object" && m.current && (m.current.indeterminate = s);
-    }, [s, m]), /* @__PURE__ */ d("div", { className: x("flex flex-col", c), children: [
+      f && typeof f == "object" && f.current && (f.current.indeterminate = s);
+    }, [s, f]), /* @__PURE__ */ d("div", { className: x("flex flex-col", i), children: [
       /* @__PURE__ */ d("div", { className: "flex items-start", children: [
         /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
           "input",
           {
-            ref: m,
+            ref: f,
             id: l,
             type: "checkbox",
             className: x(
@@ -417,9 +417,9 @@ const Xe = {
               // check glyph is white, so the fill must stay dark in both modes
               // (accent-fill would invert to near-white in dark → invisible check).
               u ? "border-error [&:not(:checked)]:bg-[var(--base-input)] text-error focus:border-error focus:ring-error" : "border-neutral [&:not(:checked)]:bg-[var(--base-input)] text-[#1a1a1a] focus:border-primary focus:ring-primary",
-              b
+              g
             ),
-            ...g
+            ...b
           }
         ) }),
         t && /* @__PURE__ */ d("div", { className: "ml-3 flex-1", children: [
@@ -431,7 +431,7 @@ const Xe = {
                 "font-medium cursor-pointer",
                 u ? "text-error" : "text-default",
                 Qe[n],
-                f
+                m
               ),
               children: t
             }
@@ -450,12 +450,12 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   placeholder: r = "Select date",
   disabled: n = !1,
   required: s = !1,
-  size: c = "md",
-  className: f,
-  minDate: b,
+  size: i = "md",
+  className: m,
+  minDate: g,
   maxDate: p,
-  format: g = "MM/dd/yyyy"
-}, m) => {
+  format: b = "MM/dd/yyyy"
+}, f) => {
   const [l, u] = O(!1), [h, k] = O(() => t || /* @__PURE__ */ new Date()), C = Z(null);
   K(() => {
     const T = (V) => {
@@ -467,25 +467,25 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   }, [l]);
   const v = (T) => {
     if (!T) return "";
-    const V = T.getDate().toString().padStart(2, "0"), W = (T.getMonth() + 1).toString().padStart(2, "0"), i = T.getFullYear();
-    switch (g) {
+    const V = T.getDate().toString().padStart(2, "0"), W = (T.getMonth() + 1).toString().padStart(2, "0"), c = T.getFullYear();
+    switch (b) {
       case "dd/MM/yyyy":
-        return `${V}/${W}/${i}`;
+        return `${V}/${W}/${c}`;
       case "yyyy-MM-dd":
-        return `${i}-${W}-${V}`;
+        return `${c}-${W}-${V}`;
       case "MM/dd/yyyy":
       default:
-        return `${W}/${V}/${i}`;
+        return `${W}/${V}/${c}`;
     }
   }, j = () => {
-    const T = h.getFullYear(), V = h.getMonth(), W = new Date(T, V, 1), i = new Date(W);
-    i.setDate(i.getDate() - W.getDay());
-    const y = [], L = new Date(i);
+    const T = h.getFullYear(), V = h.getMonth(), W = new Date(T, V, 1), c = new Date(W);
+    c.setDate(c.getDate() - W.getDay());
+    const y = [], L = new Date(c);
     for (let S = 0; S < 42; S++)
       y.push(new Date(L)), L.setDate(L.getDate() + 1);
     return y;
   }, N = (T) => {
-    T.getMonth() === h.getMonth() && (b && T < b || p && T > p || (a?.(T), u(!1)));
+    T.getMonth() === h.getMonth() && (g && T < g || p && T > p || (a?.(T), u(!1)));
   }, q = () => {
     k(new Date(h.getFullYear(), h.getMonth() - 1, 1));
   }, P = () => {
@@ -499,12 +499,12 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     "focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
     "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-module-subtle",
     {
-      "px-3 py-2 text-sm": c === "sm",
-      "px-3 py-2 text-base": c === "md",
-      "px-4 py-3 text-lg": c === "lg",
-      "px-4 py-3 text-base": c === "full"
+      "px-3 py-2 text-sm": i === "sm",
+      "px-3 py-2 text-base": i === "md",
+      "px-4 py-3 text-lg": i === "lg",
+      "px-4 py-3 text-base": i === "full"
     },
-    f
+    m
   ), A = j(), H = [
     "January",
     "February",
@@ -524,7 +524,7 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       /* @__PURE__ */ e(
         "input",
         {
-          ref: m,
+          ref: f,
           type: "text",
           value: v(t ?? null),
           placeholder: r,
@@ -572,7 +572,7 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((T) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted text-center py-1", children: T }, T)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: A.map((T, V) => {
-        const W = T.getMonth() === h.getMonth(), i = t && T.toDateString() === t.toDateString(), y = T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !W || b && T < b || p && T > p;
+        const W = T.getMonth() === h.getMonth(), c = t && T.toDateString() === t.toDateString(), y = T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !W || g && T < g || p && T > p;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -581,9 +581,9 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             className: x(
               "w-8 h-8 text-sm rounded transition-colors duration-200",
               {
-                "text-default hover:bg-neutral-container": W && !i && !L,
-                "bg-primary text-white": i,
-                "bg-neutral-container text-default": y && !i,
+                "text-default hover:bg-neutral-container": W && !c && !L,
+                "bg-primary text-white": c,
+                "bg-neutral-container text-default": y && !c,
                 "text-muted cursor-not-allowed": L
               }
             ),
@@ -665,12 +665,12 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     error: r,
     size: n = "md",
     fullWidth: s = !1,
-    startIcon: c = /* @__PURE__ */ e(nt, {}),
-    loading: f = !1,
-    containerClassName: b,
+    startIcon: i = /* @__PURE__ */ e(nt, {}),
+    loading: m = !1,
+    containerClassName: g,
     labelClassName: p,
-    className: g,
-    id: m,
+    className: b,
+    id: f,
     options: l,
     onRemoteSearch: u,
     onSelect: h,
@@ -680,7 +680,7 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     onChange: j,
     ...N
   }, q) => {
-    const P = m || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!r, F = Z(null), A = Z(null), [H, T] = O(v || ""), [V, W] = O(!1), [i, y] = O(!1), [L, S] = O(!1);
+    const P = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!r, F = Z(null), A = Z(null), [H, T] = O(v || ""), [V, W] = O(!1), [c, y] = O(!1), [L, S] = O(!1);
     K(() => {
       v !== void 0 && T(v);
     }, [v]);
@@ -722,14 +722,14 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       T(z.label), W(!1), S(!1), h && h(z.value);
     }, re = () => {
       (l.length > 0 || u) && (W(!0), S(!1));
-    }, X = f || i, $ = V && (M.length > 0 || X), I = de(() => q || A, [q]);
+    }, X = m || c, $ = V && (M.length > 0 || X), I = de(() => q || A, [q]);
     return /* @__PURE__ */ d(
       "div",
       {
         className: ie(
           "flex flex-col",
           s ? "w-full" : "",
-          b || "",
+          g || "",
           "relative"
         ),
         ref: F,
@@ -747,7 +747,7 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
-            c && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ie("text-muted", xe[n]), children: c }) }),
+            i && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ie("text-muted", xe[n]), children: i }) }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -764,17 +764,17 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   // Size styles
                   lt[n],
                   // Icon padding
-                  c ? "pl-10" : "",
+                  i ? "pl-10" : "",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
                   U ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
-                  g || ""
+                  b || ""
                 ),
                 ...N
               }
             ),
-            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: X || f ? (
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: X || m ? (
               // Loading Spinner
               /* @__PURE__ */ d(
                 "svg",
@@ -838,7 +838,7 @@ const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   children: z.label
                 },
                 z.value
-              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-muted", children: X || f ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
+              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-muted", children: X || m ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
           (r || a) && /* @__PURE__ */ e(
@@ -873,12 +873,12 @@ const ot = {
     error: r,
     size: n = "md",
     fullWidth: s = !1,
-    options: c,
-    placeholder: f,
-    containerClassName: b,
+    options: i,
+    placeholder: m,
+    containerClassName: g,
     labelClassName: p,
-    className: g,
-    id: m,
+    className: b,
+    id: f,
     searchable: l,
     multiple: u,
     value: h,
@@ -887,14 +887,14 @@ const ot = {
     onCreateOption: v,
     ...j
   }, N) => {
-    const q = m || `select-${Math.random().toString(36).substr(2, 9)}`, P = !!r, [U, F] = se.useState(!1), [A, H] = se.useState(""), T = se.useRef(null), [V, W] = se.useState(c);
+    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, P = !!r, [U, F] = se.useState(!1), [A, H] = se.useState(""), T = se.useRef(null), [V, W] = se.useState(i);
     se.useImperativeHandle(N, () => T.current), se.useEffect(() => {
       const $ = (I) => {
         T.current && !T.current.contains(I.target) && F(!1);
       };
       return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
     }, []);
-    const i = se.useCallback(
+    const c = se.useCallback(
       ($, I) => $.some(
         (z) => me(z.value) === me(I) || me(z.label) === me(I)
       ),
@@ -903,20 +903,20 @@ const ot = {
       ($, I) => {
         const z = [...$], D = (ee) => {
           const ne = (ee ?? "").trim();
-          ne && (i(z, ne) || z.push({ value: ne, label: ne }));
+          ne && (c(z, ne) || z.push({ value: ne, label: ne }));
         };
         return Array.isArray(I) ? I.forEach(D) : D(I), z;
       },
-      [i]
+      [c]
     );
     se.useEffect(() => {
       W(($) => {
-        const I = [...c];
+        const I = [...i];
         return $.forEach((z) => {
-          !i(I, z.value) && !i(I, z.label) && I.push(z);
+          !c(I, z.value) && !c(I, z.label) && I.push(z);
         }), y(I, h);
       });
-    }, [c, h, y, i]);
+    }, [i, h, y, c]);
     const L = ($) => {
       if (u) {
         const I = Array.isArray(h) ? h : [], z = I.includes($) ? I.filter((D) => D !== $) : [...I, $];
@@ -927,19 +927,19 @@ const ot = {
       ($) => Array.isArray(h) && h.includes($.value)
     ) : [], E = l && A ? V.filter(
       ($) => $.label.toLowerCase().includes(A.toLowerCase())
-    ) : V, Q = !!C && !!l && !!A.trim() && !i(V, A), re = ($) => {
+    ) : V, Q = !!C && !!l && !!A.trim() && !c(V, A), re = ($) => {
       const I = $.trim();
       if (!I) return;
       const z = v?.(I) ?? {
         value: I,
         label: I
       };
-      if (i(V, z.value) || i(V, z.label)) {
+      if (c(V, z.value) || c(V, z.label)) {
         L(z.value), H(""), u || F(!1);
         return;
       }
       W((D) => [...D, z]), L(z.value), H(""), u || F(!1);
-    }, X = () => u ? M.length > 0 ? M.map(($) => $.label).join(", ") : f || "Select options" : S?.label || f || "Select an option";
+    }, X = () => u ? M.length > 0 ? M.map(($) => $.label).join(", ") : m || "Select options" : S?.label || m || "Select an option";
     return /* @__PURE__ */ d(
       "div",
       {
@@ -947,7 +947,7 @@ const ot = {
         className: x(
           "relative flex flex-col",
           s && "w-full",
-          b
+          g
         ),
         ...j,
         children: [
@@ -978,7 +978,7 @@ const ot = {
                   "bg-module",
                   ot[n],
                   P ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
-                  g
+                  b
                 ),
                 children: /* @__PURE__ */ e("span", { className: "block truncate", children: X() })
               }
@@ -1016,14 +1016,14 @@ const ot = {
                 }
               ),
               /* @__PURE__ */ d("ul", { className: "max-h-60 overflow-auto py-1", children: [
-                f && !u && /* @__PURE__ */ e(
+                m && !u && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "px-4 py-2 text-sm text-muted cursor-pointer hover:bg-neutral-container",
                     onClick: () => {
                       k?.(""), F(!1);
                     },
-                    children: f
+                    children: m
                   }
                 ),
                 E.map(($) => {
@@ -1085,16 +1085,16 @@ const ct = {
     error: r,
     size: n = "md",
     fullWidth: s = !1,
-    loading: c = !1,
-    containerClassName: f,
-    labelClassName: b,
+    loading: i = !1,
+    containerClassName: m,
+    labelClassName: g,
     className: p,
-    id: g,
-    rows: m = 4,
+    id: b,
+    rows: f = 4,
     ...l
   }, u) => {
-    const h = g || `textarea-${Math.random().toString(36).substr(2, 9)}`, k = !!r;
-    return /* @__PURE__ */ d("div", { className: x("flex flex-col", s && "w-full", f), children: [
+    const h = b || `textarea-${Math.random().toString(36).substr(2, 9)}`, k = !!r;
+    return /* @__PURE__ */ d("div", { className: x("flex flex-col", s && "w-full", m), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
@@ -1102,7 +1102,7 @@ const ct = {
           className: x(
             "block text-sm font-medium mb-1",
             k ? "text-error" : "text-default",
-            b
+            g
           ),
           children: t
         }
@@ -1113,7 +1113,7 @@ const ct = {
           {
             ref: u,
             id: h,
-            rows: m,
+            rows: f,
             className: x(
               // Base styles
               "block w-full rounded-lg border transition-colors duration-200 resize-vertical bg-input",
@@ -1128,7 +1128,7 @@ const ct = {
             ...l
           }
         ),
-        c && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ d(
+        i && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ d(
           "svg",
           {
             className: "animate-spin h-4 w-4 text-muted",
@@ -1189,12 +1189,12 @@ const it = {
     error: r,
     size: n = "md",
     fullWidth: s = !1,
-    startIcon: c,
-    endIcon: f,
-    loading: b = !1,
+    startIcon: i,
+    endIcon: m,
+    loading: g = !1,
     containerClassName: p,
-    labelClassName: g,
-    className: m,
+    labelClassName: b,
+    className: f,
     id: l,
     ...u
   }, h) => {
@@ -1207,14 +1207,14 @@ const it = {
           className: x(
             "block text-sm font-medium mb-1",
             C ? "text-error" : "text-default",
-            g
+            b
           ),
           children: t
         }
       ),
       /* @__PURE__ */ d("div", { className: "relative", children: [
-        c && // Todo fix inset not showing correctly on different sizes
-        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: x("text-muted", be[n]), children: c }) }),
+        i && // Todo fix inset not showing correctly on different sizes
+        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: x("text-muted", be[n]), children: i }) }),
         /* @__PURE__ */ e(
           "input",
           {
@@ -1228,16 +1228,16 @@ const it = {
               // Size styles
               it[n],
               // Icon padding
-              c && "pl-10",
-              f && "pr-10",
+              i && "pl-10",
+              m && "pr-10",
               // State styles
               C ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default focus:border-primary focus:ring-primary",
-              m
+              f
             ),
             ...u
           }
         ),
-        (f || b) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: b ? /* @__PURE__ */ d(
+        (m || g) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: g ? /* @__PURE__ */ d(
           "svg",
           {
             className: x("animate-spin text-muted", be[n]),
@@ -1265,7 +1265,7 @@ const it = {
               )
             ]
           }
-        ) : f && /* @__PURE__ */ e("span", { className: x("text-muted", be[n]), children: f }) })
+        ) : m && /* @__PURE__ */ e("span", { className: x("text-muted", be[n]), children: m }) })
       ] }),
       (r || a) && /* @__PURE__ */ e(
         "p",
@@ -1287,11 +1287,11 @@ const oe = ({
   color: r = "current",
   clickable: n = !1,
   onClick: s,
-  className: c,
-  "aria-label": f,
-  ...b
+  className: i,
+  "aria-label": m,
+  ...g
 }) => {
-  const p = typeof a == "number" ? a : dt(a), g = x(
+  const p = typeof a == "number" ? a : dt(a), b = x(
     "inline-block",
     // Color variants
     {
@@ -1310,20 +1310,20 @@ const oe = ({
       "cursor-pointer hover:opacity-80 transition-opacity duration-200": n,
       "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/20 rounded": n
     },
-    c
-  ), m = {
+    i
+  ), f = {
     size: p,
-    className: g,
+    className: b,
     onClick: n ? s : void 0,
-    "aria-label": f,
+    "aria-label": m,
     role: n ? "button" : void 0,
     tabIndex: n ? 0 : void 0,
     onKeyDown: n ? (l) => {
       (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s?.());
     } : void 0,
-    ...b
+    ...g
   };
-  return /* @__PURE__ */ e(t, { ...m });
+  return /* @__PURE__ */ e(t, { ...f });
 };
 function dt(t) {
   return {
@@ -1349,26 +1349,26 @@ function ut({
       ] })
     ] }),
     a && /* @__PURE__ */ d("div", { className: "rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ e("div", { className: `grid grid-cols-${r} gap-2 bg-neutral-container p-3`, children: Array.from({ length: r }).map((s, c) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: `grid grid-cols-${r} gap-2 bg-neutral-container p-3`, children: Array.from({ length: r }).map((s, i) => /* @__PURE__ */ e(
         "div",
         {
           className: "h-4 bg-neutral-border-emphasis rounded w-2/3"
         },
-        `header-${c}`
+        `header-${i}`
       )) }),
-      Array.from({ length: n }).map((s, c) => /* @__PURE__ */ e(
+      Array.from({ length: n }).map((s, i) => /* @__PURE__ */ e(
         "div",
         {
           className: `grid grid-cols-${r} gap-2 p-3 border-t border-neutral`,
-          children: Array.from({ length: r }).map((f, b) => /* @__PURE__ */ e(
+          children: Array.from({ length: r }).map((m, g) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 bg-neutral-container-emphasis rounded w-full"
             },
-            `cell-${c}-${b}`
+            `cell-${i}-${g}`
           ))
         },
-        `row-${c}`
+        `row-${i}`
       ))
     ] })
   ] }) });
@@ -1379,33 +1379,33 @@ const mt = ({
   value: r,
   onSelect: n,
   placement: s = "bottom-start",
-  disabled: c = !1,
-  className: f,
-  showCheck: b = !0,
+  disabled: i = !1,
+  className: m,
+  showCheck: g = !0,
   header: p
 }) => {
-  const [g, m] = O(!1), [l, u] = O(null), [h, k] = O({ top: 0, left: 0 }), [C, v] = O({}), j = Z(null), N = Z(null), q = Z(null), P = Z(null);
+  const [b, f] = O(!1), [l, u] = O(null), [h, k] = O({ top: 0, left: 0 }), [C, v] = O({}), j = Z(null), N = Z(null), q = Z(null), P = Z(null);
   K(() => {
-    const i = (y) => {
-      j.current && (!j.current.contains(y.target) || q.current && !q.current.contains(y.target)) && (m(!1), u(null), P.current && (clearTimeout(P.current), P.current = null));
+    const c = (y) => {
+      j.current && (!j.current.contains(y.target) || q.current && !q.current.contains(y.target)) && (f(!1), u(null), P.current && (clearTimeout(P.current), P.current = null));
     };
-    return g && document.addEventListener("mousedown", i), () => {
-      document.removeEventListener("mousedown", i);
+    return b && document.addEventListener("mousedown", c), () => {
+      document.removeEventListener("mousedown", c);
     };
-  }, [g]), K(() => {
-    const i = (y) => {
-      y.key === "Escape" && (m(!1), u(null), P.current && (clearTimeout(P.current), P.current = null));
+  }, [b]), K(() => {
+    const c = (y) => {
+      y.key === "Escape" && (f(!1), u(null), P.current && (clearTimeout(P.current), P.current = null));
     };
-    return g && document.addEventListener("keydown", i), () => {
-      document.removeEventListener("keydown", i);
+    return b && document.addEventListener("keydown", c), () => {
+      document.removeEventListener("keydown", c);
     };
-  }, [g]), K(() => {
+  }, [b]), K(() => {
     if (l && j.current) {
-      const i = j.current.querySelector(
+      const c = j.current.querySelector(
         `[data-option-value="${l}"]`
       );
-      if (i) {
-        const y = i.getBoundingClientRect();
+      if (c) {
+        const y = c.getBoundingClientRect();
         k({
           top: y.top,
           left: y.right + 8
@@ -1415,27 +1415,27 @@ const mt = ({
   }, [l]), K(() => () => {
     P.current && clearTimeout(P.current);
   }, []);
-  const U = (i) => {
-    if (i.stopPropagation(), !c) {
-      if (!g) {
+  const U = (c) => {
+    if (c.stopPropagation(), !i) {
+      if (!b) {
         const y = N.current?.getBoundingClientRect();
         if (y) {
           const S = {};
           s.startsWith("bottom") ? S.top = y.bottom + 6 : S.bottom = window.innerHeight - y.top + 6, s.endsWith("start") ? S.left = y.left : S.right = window.innerWidth - y.right, v(S);
         }
       }
-      m(!g), u(null), P.current && (clearTimeout(P.current), P.current = null);
+      f(!b), u(null), P.current && (clearTimeout(P.current), P.current = null);
     }
-  }, F = (i, y, L) => {
-    i.stopPropagation(), !y.disabled && !y.divider && (!y.children || y.children.length === 0) && (n?.(y.value, L), m(!1), u(null));
-  }, A = (i) => {
-    P.current && (clearTimeout(P.current), P.current = null), i.children && i.children.length > 0 ? u(i.value) : u(null);
-  }, H = (i) => {
-    i.children && i.children.length > 0 ? P.current = setTimeout(() => {
+  }, F = (c, y, L) => {
+    c.stopPropagation(), !y.disabled && !y.divider && (!y.children || y.children.length === 0) && (n?.(y.value, L), f(!1), u(null));
+  }, A = (c) => {
+    P.current && (clearTimeout(P.current), P.current = null), c.children && c.children.length > 0 ? u(c.value) : u(null);
+  }, H = (c) => {
+    c.children && c.children.length > 0 ? P.current = setTimeout(() => {
       u(null);
     }, 150) : u(null);
-  }, T = (i, y, L) => {
-    i.stopPropagation(), !y.disabled && !y.divider && (n?.(y.value, L), m(!1), u(null));
+  }, T = (c, y, L) => {
+    c.stopPropagation(), !y.disabled && !y.divider && (n?.(y.value, L), f(!1), u(null));
   }, V = x(
     "fixed z-[60] min-w-[200px] bg-module rounded-md shadow-lg border border-neutral",
     "max-h-60 overflow-auto"
@@ -1449,7 +1449,7 @@ const mt = ({
       ref: j,
       className: x(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-neutral-container",
-        f
+        m
       ),
       children: [
         /* @__PURE__ */ e(
@@ -1457,17 +1457,17 @@ const mt = ({
           {
             ref: N,
             onClick: U,
-            disabled: c,
+            disabled: i,
             className: x("inline-flex items-center justify-center", {
-              "opacity-50 cursor-not-allowed": c
+              "opacity-50 cursor-not-allowed": i
             }),
             children: t
           }
         ),
-        g && /* @__PURE__ */ e("div", { className: V, style: C, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
+        b && /* @__PURE__ */ e("div", { className: V, style: C, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
           p && (typeof p == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted uppercase tracking-wider px-3 py-2", children: p }) : p),
-          a.map((i, y) => {
-            if (i.divider)
+          a.map((c, y) => {
+            if (c.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
@@ -1475,33 +1475,33 @@ const mt = ({
                 },
                 `divider-${y}`
               );
-            const L = i.children && i.children.length > 0, S = l === i.value;
+            const L = c.children && c.children.length > 0, S = l === c.value;
             return /* @__PURE__ */ d("div", { className: "relative group", children: [
               /* @__PURE__ */ d(
                 "button",
                 {
-                  "data-option-value": i.value,
-                  onClick: (M) => F(M, i),
-                  onMouseEnter: () => A(i),
-                  onMouseLeave: () => H(i),
-                  disabled: i.disabled,
+                  "data-option-value": c.value,
+                  onClick: (M) => F(M, c),
+                  onMouseEnter: () => A(c),
+                  onMouseLeave: () => H(c),
+                  disabled: c.disabled,
                   className: x(
                     "w-full flex items-center justify-between px-3 py-2 text-sm text-default hover:bg-neutral-container rounded-md transition-colors",
                     {
-                      "opacity-50 cursor-not-allowed": i.disabled,
+                      "opacity-50 cursor-not-allowed": c.disabled,
                       "bg-neutral-container": S && L
                     }
                   ),
                   children: [
                     /* @__PURE__ */ d("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                      i.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: i.icon }),
+                      c.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: c.icon }),
                       /* @__PURE__ */ d("div", { className: "flex flex-col items-start min-w-0", children: [
-                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: i.label }),
-                        i.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: i.description })
+                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: c.label }),
+                        c.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: c.description })
                       ] })
                     ] }),
                     /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
-                      b && r === i.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" }),
+                      g && r === c.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" }),
                       L && /* @__PURE__ */ e("span", { className: "text-muted text-xs", children: "▶" })
                     ] })
                   ]
@@ -1517,14 +1517,14 @@ const mt = ({
                     left: `${h.left}px`
                   },
                   onMouseEnter: () => {
-                    P.current && (clearTimeout(P.current), P.current = null), u(i.value);
+                    P.current && (clearTimeout(P.current), P.current = null), u(c.value);
                   },
                   onMouseLeave: () => {
                     P.current = setTimeout(() => {
                       u(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((M, E) => {
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: c.children.map((M, E) => {
                     if (M.divider)
                       return /* @__PURE__ */ e(
                         "div",
@@ -1533,7 +1533,7 @@ const mt = ({
                         },
                         `divider-${E}`
                       );
-                    const Q = typeof r == "object" && r[i.value] && r[i.value].includes(
+                    const Q = typeof r == "object" && r[c.value] && r[c.value].includes(
                       M.value
                     ) || r === M.value;
                     return /* @__PURE__ */ d(
@@ -1542,7 +1542,7 @@ const mt = ({
                         onClick: (re) => T(
                           re,
                           M,
-                          i.value
+                          c.value
                         ),
                         disabled: M.disabled,
                         className: x(
@@ -1559,7 +1559,7 @@ const mt = ({
                               M.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: M.description })
                             ] })
                           ] }),
-                          b && Q && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" })
+                          g && Q && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
                       M.value
@@ -1567,16 +1567,16 @@ const mt = ({
                   }) })
                 }
               )
-            ] }, i.value);
+            ] }, c.value);
           }),
           (() => {
-            const i = a.reduce((y, L) => {
+            const c = a.reduce((y, L) => {
               if (L.divider) return y;
               const S = L.children ? L.children.filter((M) => !M.divider).length : 0;
               return y + 1 + S;
             }, 0);
-            return i > 1 && /* @__PURE__ */ e("div", { className: "border-t border-neutral mt-2 pt-2", children: /* @__PURE__ */ d("div", { className: "text-xs text-muted px-3 py-1", children: [
-              i,
+            return c > 1 && /* @__PURE__ */ e("div", { className: "border-t border-neutral mt-2 pt-2", children: /* @__PURE__ */ d("div", { className: "text-xs text-muted px-3 py-1", children: [
+              c,
               " options available"
             ] }) });
           })()
@@ -1779,12 +1779,12 @@ const mt = ({
   loading: r = !1,
   searchable: n = !1,
   searchPlaceholder: s = "Search...",
-  filters: c = [],
-  paginated: f = !1,
-  pageSizeOptions: b = [10, 25, 50, 100],
+  filters: i = [],
+  paginated: m = !1,
+  pageSizeOptions: g = [10, 25, 50, 100],
   defaultPageSize: p = 10,
-  actions: g = [],
-  onRowClick: m,
+  actions: b = [],
+  onRowClick: f,
   selectable: l = !1,
   selectedRows: u = [],
   onSelectionChange: h,
@@ -1802,7 +1802,7 @@ const mt = ({
   }), [T, V] = O({
     page: 0,
     pageSize: p
-  }), W = Z(null), i = de(() => {
+  }), W = Z(null), c = de(() => {
     let o = t;
     if (n && U.trim()) {
       const w = a.filter(
@@ -1813,7 +1813,7 @@ const mt = ({
         return String(J || "").toLowerCase().includes(_);
       }));
     }
-    return c.forEach((w) => {
+    return i.forEach((w) => {
       w.value && w.value !== "all" && (o = o.filter((_) => {
         const R = a.find((J) => J.id === w.id);
         if (!R) return !0;
@@ -1821,19 +1821,19 @@ const mt = ({
         return String(B || "") === w.value;
       }));
     }), o;
-  }, [t, U, a, n, c]), y = de(() => {
-    if (!A.column || !A.direction) return i;
+  }, [t, U, a, n, i]), y = de(() => {
+    if (!A.column || !A.direction) return c;
     const o = a.find((w) => w.id === A.column);
-    return o ? [...i].sort((w, _) => {
+    return o ? [...c].sort((w, _) => {
       const R = typeof o.accessor == "function" ? o.accessor(w) : w[o.accessor], B = typeof o.accessor == "function" ? o.accessor(_) : _[o.accessor];
       let J = 0;
       return R < B ? J = -1 : R > B && (J = 1), A.direction === "desc" ? -J : J;
-    }) : i;
-  }, [i, A, a]), L = de(() => {
-    if (!f) return y;
+    }) : c;
+  }, [c, A, a]), L = de(() => {
+    if (!m) return y;
     const o = T.page * T.pageSize, w = o + T.pageSize;
     return y.slice(o, w);
-  }, [y, T, f]), S = ae(
+  }, [y, T, m]), S = ae(
     (o) => {
       a.find((_) => _.id === o)?.sortable && H((_) => _.column !== o ? { column: o, direction: "asc" } : _.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
     },
@@ -1861,7 +1861,7 @@ const mt = ({
     V((o) => ({ ...o, page: 0 }));
   }, [U, A]), K(() => {
     V((o) => ({ ...o, page: 0 }));
-  }, [c.map((o) => o.value).join(",")]);
+  }, [i.map((o) => o.value).join(",")]);
   const X = y.length, $ = Math.ceil(X / T.pageSize), I = T.page * T.pageSize + 1, z = Math.min(I + T.pageSize - 1, X), D = L.length > 0 && L.every((o) => {
     const w = k(o, 0);
     return u.some(
@@ -1879,11 +1879,11 @@ const mt = ({
     "text-[var(--text-default)] p-3 border-b border-[var(--neutral-border)]"
   ), fe = x("h-12", {
     "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": v,
-    "cursor-pointer": m
+    "cursor-pointer": f
   });
   return /* @__PURE__ */ d("div", { className: "space-y-4", children: [
-    (n || c.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-4 items-start", children: [
-      c.map((o) => /* @__PURE__ */ e(vt, { ...o }, o.id)),
+    (n || i.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-4 items-start", children: [
+      i.map((o) => /* @__PURE__ */ e(vt, { ...o }, o.id)),
       /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-[200px]", children: /* @__PURE__ */ e(
         ue,
         {
@@ -1965,12 +1965,12 @@ const mt = ({
             },
             o.id
           )),
-          g.length > 0 && /* @__PURE__ */ e("th", { className: x(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          b.length > 0 && /* @__PURE__ */ e("th", { className: x(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
         /* @__PURE__ */ e("tbody", { children: L.length === 0 || r ? !r && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: a.length + (l ? 1 : 0) + (g.length > 0 ? 1 : 0),
+            colSpan: a.length + (l ? 1 : 0) + (b.length > 0 ? 1 : 0),
             className: x(
               le,
               "text-center py-8 text-muted"
@@ -1990,7 +1990,7 @@ const mt = ({
                 P?.(o, w)
               ),
               onClick: (B) => {
-                B.stopPropagation(), m?.(o, w);
+                B.stopPropagation(), f?.(o, w);
               },
               children: [
                 l && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
@@ -2021,21 +2021,21 @@ const mt = ({
                     B.id
                   );
                 }),
-                g.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
+                b.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
                   mt,
                   {
                     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(Te, {})
                     ] }),
-                    options: g.map((B) => ({
+                    options: b.map((B) => ({
                       value: B.id,
                       label: B.label,
                       icon: B.icon,
                       disabled: B.disabled?.(o)
                     })),
                     onSelect: (B) => {
-                      const J = g.find(
+                      const J = b.find(
                         (he) => he.id === B
                       );
                       J && J.onClick(o, w);
@@ -2050,7 +2050,7 @@ const mt = ({
         }) })
       ] })
     ] }),
-    f && X > 0 && /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-6", children: [
+    m && X > 0 && /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-6", children: [
       /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ d("span", { className: "text-sm text-muted", children: [
           "Showing ",
@@ -2069,7 +2069,7 @@ const mt = ({
               value: T.pageSize,
               onChange: (o) => E(Number(o.target.value)),
               className: "border border-[var(--neutral-border)] text-[var(--text-default)] rounded-md px-2 py-1 text-sm bg-[var(--base-input)] w-16",
-              children: b.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
+              children: g.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
             }
           )
         ] })
@@ -2134,19 +2134,19 @@ const mt = ({
   onTabChange: r,
   className: n
 }) => {
-  const [s, c] = O(t[0]?.id || ""), f = a || s, b = (p) => {
-    r ? r(p) : c(p);
+  const [s, i] = O(t[0]?.id || ""), m = a || s, g = (p) => {
+    r ? r(p) : i(p);
   };
   return /* @__PURE__ */ e("div", { className: x("border-b border-neutral-200 dark:border-neutral-700", n), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((p) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !p.disabled && b(p.id),
+      onClick: () => !p.disabled && g(p.id),
       disabled: p.disabled,
       className: x(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
         {
-          "border-primary text-primary": f === p.id,
-          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": f !== p.id && !p.disabled,
+          "border-primary text-primary": m === p.id,
+          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": m !== p.id && !p.disabled,
           "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": p.disabled
         }
       ),
@@ -2154,7 +2154,7 @@ const mt = ({
         p.label,
         p.badge && /* @__PURE__ */ e("span", { className: x(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          f === p.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+          m === p.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
         ), children: p.badge })
       ] })
     },
@@ -2166,17 +2166,17 @@ const mt = ({
   activeTab: r,
   onTabChange: n,
   variant: s = "default",
-  size: c = "md",
-  className: f
+  size: i = "md",
+  className: m
 }) => {
-  const [b, p] = O(
+  const [g, p] = O(
     a || r || t[0]?.id || ""
-  ), g = r || b, m = (C) => {
+  ), b = r || g, f = (C) => {
     n ? n(C) : p(C);
   }, l = {
-    activeTab: g,
-    setActiveTab: m
-  }, u = t.find((C) => C.id === g), h = x(
+    activeTab: b,
+    setActiveTab: f
+  }, u = t.find((C) => C.id === b), h = x(
     "flex",
     {
       "border-b border-neutral-200 dark:border-neutral-700 px-2": s === "default" || s === "underline",
@@ -2184,12 +2184,12 @@ const mt = ({
       "space-x-1": s === "pills",
       "space-x-8": s === "default" || s === "underline"
     },
-    f
+    m
   ), k = (C, v) => {
     const j = "transition-colors duration-200 font-medium", N = {
-      "text-xs px-2 py-1": c === "sm",
-      "text-sm px-3 py-2": c === "md",
-      "text-base px-4 py-3": c === "lg"
+      "text-xs px-2 py-1": i === "sm",
+      "text-sm px-3 py-2": i === "md",
+      "text-base px-4 py-3": i === "lg"
     }, q = {
       // Default variant
       "border-b-2 -mb-px": s === "default",
@@ -2216,11 +2216,11 @@ const mt = ({
       {
         type: "button",
         role: "tab",
-        "aria-selected": g === C.id,
+        "aria-selected": b === C.id,
         "aria-controls": `tabpanel-${C.id}`,
         disabled: C.disabled,
-        onClick: () => !C.disabled && m(C.id),
-        className: k(C, g === C.id),
+        onClick: () => !C.disabled && f(C.id),
+        className: k(C, b === C.id),
         children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
           C.label,
           C.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: C.badge })
@@ -2232,8 +2232,8 @@ const mt = ({
       "div",
       {
         role: "tabpanel",
-        id: `tabpanel-${g}`,
-        "aria-labelledby": `tab-${g}`,
+        id: `tabpanel-${b}`,
+        "aria-labelledby": `tab-${b}`,
         className: "mt-4",
         children: u.content
       }
@@ -2252,21 +2252,21 @@ function Ct({
   title: r,
   size: n = "md",
   closeOnBackdropClick: s = !0,
-  closeOnEscape: c = !0,
-  className: f,
-  backdropClassName: b,
+  closeOnEscape: i = !0,
+  className: m,
+  backdropClassName: g,
   children: p,
-  footer: g,
-  showCloseButton: m = !0
+  footer: b,
+  showCloseButton: f = !0
 }) {
   const l = Z(null), u = Z(null);
   K(() => {
-    if (!t || !c) return;
+    if (!t || !i) return;
     const k = (C) => {
       C.key === "Escape" && a();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [t, c, a]), K(() => (t ? (u.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (u.current && u.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, i, a]), K(() => (t ? (u.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (u.current && u.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const h = (k) => {
@@ -2279,7 +2279,7 @@ function Ct({
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         "bg-black/20",
         // 'animate-fade-in',
-        b
+        g
       ),
       onClick: h,
       children: /* @__PURE__ */ d(
@@ -2291,14 +2291,14 @@ function Ct({
             // 'animate-scale-in',
             "focus:outline-none",
             kt[n],
-            f
+            m
           ),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": r ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (r || m) && /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (r || f) && /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               r && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2307,7 +2307,7 @@ function Ct({
                   children: r
                 }
               ),
-              m && /* @__PURE__ */ e(
+              f && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: a,
@@ -2318,7 +2318,7 @@ function Ct({
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "p-6", children: p }),
-            g && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: g })
+            b && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: b })
           ]
         }
       )
@@ -2331,16 +2331,16 @@ const Y = ({
   weight: r = "normal",
   color: n = "current",
   align: s = "left",
-  truncate: c = !1,
-  italic: f = !1,
-  underline: b = !1,
+  truncate: i = !1,
+  italic: m = !1,
+  underline: g = !1,
   lineHeight: p = "normal",
-  as: g,
-  className: m,
+  as: b,
+  className: f,
   children: l,
   ...u
 }) => {
-  const h = g || St(t), k = x(
+  const h = b || St(t), k = x(
     // Base styles
     "font-primary",
     // Variant styles
@@ -2397,11 +2397,11 @@ const Y = ({
     },
     // Text decorations
     {
-      italic: f,
-      underline: b,
-      truncate: c
+      italic: m,
+      underline: g,
+      truncate: i
     },
-    m
+    f
   );
   return /* @__PURE__ */ e(h, { className: k, ...u, children: l });
 };
@@ -2419,17 +2419,17 @@ const Lt = ({
   label: r,
   placeholder: n = "Select or upload a file",
   error: s,
-  disabled: c,
-  accept: f,
-  onListFiles: b,
+  disabled: i,
+  accept: m,
+  onListFiles: g,
   onListMounts: p,
-  onUploadFile: g,
-  onDownloadFile: m,
+  onUploadFile: b,
+  onDownloadFile: f,
   onRegisterFile: l
 }) => {
   const [u, h] = O(!1), [k, C] = O([]), [v, j] = O(null), [N, q] = O("/"), [P, U] = O([]), [F, A] = O(!1), [H, T] = O(""), [V, W] = O(
     typeof t == "object" ? t : null
-  ), [i, y] = O(!1), [L, S] = O(""), M = Z(null);
+  ), [c, y] = O(!1), [L, S] = O(""), M = Z(null);
   K(() => {
     u && E();
   }, [u]), K(() => {
@@ -2449,7 +2449,7 @@ const Lt = ({
     if (v) {
       A(!0);
       try {
-        const o = await b?.({ mountId: v.id, name: H, path: N });
+        const o = await g?.({ mountId: v.id, name: H, path: N });
         o?.data && U(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
@@ -2485,7 +2485,7 @@ const Lt = ({
     if (!(!w || !v)) {
       A(!0);
       try {
-        const _ = await w.arrayBuffer(), R = await g?.({
+        const _ = await w.arrayBuffer(), R = await b?.({
           file: new Uint8Array(_),
           filename: w.name,
           mimeType: w.type || "application/octet-stream",
@@ -2526,7 +2526,7 @@ const Lt = ({
   }, I = async (o) => {
     A(!0);
     try {
-      const w = await m?.(o.id);
+      const w = await f?.(o.id);
       W(o), a(o, w), h(!1);
     } catch (w) {
       console.error("Failed to download file", w);
@@ -2633,17 +2633,17 @@ const Lt = ({
     /* @__PURE__ */ d(
       "div",
       {
-        onClick: () => !c && h(!0),
+        onClick: () => !i && h(!0),
         className: x(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-primary-400 bg-module",
           s ? "border-error" : "border-neutral",
-          c && "opacity-50 cursor-not-allowed bg-module-subtle"
+          i && "opacity-50 cursor-not-allowed bg-module-subtle"
         ),
         children: [
           /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: V ? pe : ke, color: V ? "primary" : "secondary" }) }),
           /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: V ? /* @__PURE__ */ e("span", { className: "text-sm text-default font-medium", children: V.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted", children: n }) }),
-          V && !c && /* @__PURE__ */ e(
+          V && !i && /* @__PURE__ */ e(
             "button",
             {
               onClick: z,
@@ -2727,12 +2727,12 @@ const Lt = ({
                           className: "hidden",
                           ref: M,
                           onChange: X,
-                          accept: f
+                          accept: m
                         }
                       )
                     ] })
                   ] }),
-                  i && /* @__PURE__ */ d("div", { className: "flex items-center gap-2 p-3 bg-module-subtle rounded-lg border border-neutral", children: [
+                  c && /* @__PURE__ */ d("div", { className: "flex items-center gap-2 p-3 bg-module-subtle rounded-lg border border-neutral", children: [
                     /* @__PURE__ */ e(oe, { icon: Ce, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
                       ue,
@@ -2796,7 +2796,7 @@ const Lt = ({
                         type: "file",
                         className: "hidden",
                         onChange: re,
-                        accept: f,
+                        accept: m,
                         disabled: F
                       }
                     )
@@ -2818,20 +2818,20 @@ function Me(t, a) {
 }
 function Mt(t, a, r) {
   const n = a.split("."), s = Array.isArray(t) ? [...t] : { ...t };
-  let c = s;
-  for (let f = 0; f < n.length - 1; f++) {
-    const b = n[f], p = c[b];
-    c[b] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, c = c[b];
+  let i = s;
+  for (let m = 0; m < n.length - 1; m++) {
+    const g = n[m], p = i[g];
+    i[g] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, i = i[g];
   }
-  return c[n[n.length - 1]] = r, s;
+  return i[n[n.length - 1]] = r, s;
 }
 function Et(t, a) {
   const r = a.split("."), n = Array.isArray(t) ? [...t] : { ...t };
   let s = n;
-  for (let c = 0; c < r.length - 1; c++) {
-    const f = r[c];
-    if (!s[f] || typeof s[f] != "object") return n;
-    s[f] = Array.isArray(s[f]) ? [...s[f]] : { ...s[f] }, s = s[f];
+  for (let i = 0; i < r.length - 1; i++) {
+    const m = r[i];
+    if (!s[m] || typeof s[m] != "object") return n;
+    s[m] = Array.isArray(s[m]) ? [...s[m]] : { ...s[m] }, s = s[m];
   }
   return delete s[r[r.length - 1]], n;
 }
@@ -2841,12 +2841,12 @@ const rr = ({
   onSubmit: r,
   onCancel: n,
   onChange: s,
-  transform: c,
-  validate: f,
-  submitButton: b = { label: "Submit", variant: "primary" },
+  transform: i,
+  validate: m,
+  submitButton: g = { label: "Submit", variant: "primary" },
   cancelButton: p = { label: "Cancel", variant: "outline" },
-  showButtons: g = !0,
-  layout: m = "vertical",
+  showButtons: b = !0,
+  layout: f = "vertical",
   size: l = "md",
   loading: u = !1,
   className: h,
@@ -2858,8 +2858,8 @@ const rr = ({
     a && j({ ...a });
   }, [a]);
   const F = ae(
-    (i, y, L) => {
-      const S = t.flatMap((M) => M.items).find((M) => M.name === i);
+    (c, y, L) => {
+      const S = t.flatMap((M) => M.items).find((M) => M.name === c);
       if (!S) return null;
       if (S.required && (y == null || y === ""))
         return `${S.label} is required`;
@@ -2891,23 +2891,23 @@ const rr = ({
     },
     [t]
   ), A = ae(
-    (i, y) => {
+    (c, y) => {
       let L = Mt(
         v,
-        i,
+        c,
         y
       );
-      t.flatMap((E) => E.items).find((E) => E.name === i)?.removeIfEmpty && (y == null || y === "") && (L = Et(L, i)), j(L), U((E) => ({ ...E, [i]: !0 }));
-      const M = F(i, y, L);
+      t.flatMap((E) => E.items).find((E) => E.name === c)?.removeIfEmpty && (y == null || y === "") && (L = Et(L, c)), j(L), U((E) => ({ ...E, [c]: !0 }));
+      const M = F(c, y, L);
       q((E) => ({
         ...E,
-        [i]: M || ""
-      })), s?.(L, i);
+        [c]: M || ""
+      })), s?.(L, c);
     },
     [v, t, F, s]
   ), H = ae(
-    async (i) => {
-      if (console.log("handleSubmit"), i.preventDefault(), u) return;
+    async (c) => {
+      if (console.log("handleSubmit"), c.preventDefault(), u) return;
       const y = {}, L = t.flatMap((M) => M.items);
       for (const M of L) {
         if (M.hidden || M.conditional && !M.conditional(v))
@@ -2919,26 +2919,26 @@ const rr = ({
         );
         E && (y[M.name] = E);
       }
-      if (f) {
-        const M = f(v);
+      if (m) {
+        const M = m(v);
         M && Object.assign(y, M);
       }
       if (q(y), console.log("newErrors", y), Object.keys(y).some((M) => y[M]))
         return;
-      const S = c ? c(v) : v;
+      const S = i ? i(v) : v;
       await r?.(v, S);
     },
-    [v, t, F, f, c, r, u]
+    [v, t, F, m, i, r, u]
   ), T = ae(
-    (i) => {
-      const y = Me(v, i.name), L = P[i.name] ? N[i.name] : void 0, S = i.disabled || u, M = {
+    (c) => {
+      const y = Me(v, c.name), L = P[c.name] ? N[c.name] : void 0, S = c.disabled || u, M = {
         value: y || "",
         disabled: S,
-        required: i.required,
-        placeholder: i.placeholder,
-        ...i.fieldProps
+        required: c.required,
+        placeholder: c.placeholder,
+        ...c.fieldProps
       };
-      switch (i.type) {
+      switch (c.type) {
         case "text":
         case "email":
         case "password":
@@ -2949,9 +2949,9 @@ const rr = ({
             ue,
             {
               ...M,
-              onChange: (E) => A(i.name, E.target.value),
-              type: i.textType || i.type,
-              autoComplete: i.autocomplete,
+              onChange: (E) => A(c.name, E.target.value),
+              type: c.textType || c.type,
+              autoComplete: c.autocomplete,
               error: L,
               size: l
             }
@@ -2961,7 +2961,7 @@ const rr = ({
             Ne,
             {
               ...M,
-              onChange: (E) => A(i.name, E.target.value),
+              onChange: (E) => A(c.name, E.target.value),
               rows: 4,
               error: L,
               size: l
@@ -2972,14 +2972,14 @@ const rr = ({
             ve,
             {
               ...M,
-              onChange: (E) => A(i.name, E),
-              options: (i.options || []).map((E) => ({
+              onChange: (E) => A(c.name, E),
+              options: (c.options || []).map((E) => ({
                 ...E,
                 value: String(E.value)
               })),
-              searchable: i.searchable,
-              multiple: i.multiple,
-              allowCreate: i.allowCreate,
+              searchable: c.searchable,
+              multiple: c.multiple,
+              allowCreate: c.allowCreate,
               error: L,
               size: l
             }
@@ -2990,20 +2990,20 @@ const rr = ({
             {
               ...M,
               checked: !!y,
-              onChange: (E) => A(i.name, E.target.checked),
+              onChange: (E) => A(c.name, E.target.checked),
               size: l
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "space-y-1", children: i.options?.map((E) => /* @__PURE__ */ d("label", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: c.options?.map((E) => /* @__PURE__ */ d("label", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "radio",
-                name: i.name,
+                name: c.name,
                 value: E.value,
                 checked: y === E.value,
-                onChange: () => A(i.name, E.value),
+                onChange: () => A(c.name, E.value),
                 disabled: S || E.disabled,
                 className: "rounded-full border-neutral-100 dark:border-neutral-600"
               }
@@ -3016,7 +3016,7 @@ const rr = ({
             {
               ...M,
               value: y ? new Date(y) : null,
-              onChange: (E) => A(i.name, E),
+              onChange: (E) => A(c.name, E),
               size: l
             }
           );
@@ -3026,7 +3026,7 @@ const rr = ({
             {
               ...M,
               value: y,
-              onChange: (E) => A(i.name, E),
+              onChange: (E) => A(c.name, E),
               error: L,
               onListFiles: (E) => C?.http.invoke({
                 method: "POST",
@@ -3054,9 +3054,9 @@ const rr = ({
             }
           );
         case "custom":
-          return i.customComponent?.({
+          return c.customComponent?.({
             value: y,
-            onChange: (E) => A(i.name, E),
+            onChange: (E) => A(c.name, E),
             error: L,
             disabled: S
           });
@@ -3069,10 +3069,10 @@ const rr = ({
             } catch {
             }
           const re = () => {
-            A(i.name, [...E, {}]);
+            A(c.name, [...E, {}]);
           }, X = (I) => {
             A(
-              i.name,
+              c.name,
               E.filter((z, D) => D !== I)
             );
           }, $ = (I, z, D) => {
@@ -3080,7 +3080,7 @@ const rr = ({
             ee[I] = {
               ...ee[I],
               [z]: D
-            }, A(i.name, ee);
+            }, A(c.name, ee);
           };
           return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
             E.map((I, z) => /* @__PURE__ */ d(
@@ -3099,7 +3099,7 @@ const rr = ({
                       children: "Remove"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: i.arrayFields?.map((D) => {
+                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: c.arrayFields?.map((D) => {
                     const ee = Q?.[z]?.[D.name];
                     return /* @__PURE__ */ d(
                       "div",
@@ -3210,7 +3210,7 @@ const rr = ({
                                         "input",
                                         {
                                           type: "radio",
-                                          name: `${i.name}.${z}.${D.name}`,
+                                          name: `${c.name}.${z}.${D.name}`,
                                           value: G.value,
                                           checked: I?.[D.name] === G.value,
                                           onChange: () => $(
@@ -3291,7 +3291,7 @@ const rr = ({
                 disabled: S,
                 children: [
                   "Add ",
-                  i.label
+                  c.label
                 ]
               }
             )
@@ -3303,24 +3303,24 @@ const rr = ({
     },
     [v, P, N, u, l, A]
   ), V = ae(
-    (i) => {
-      if (i.conditional && !i.conditional(v))
+    (c) => {
+      if (c.conditional && !c.conditional(v))
         return null;
-      const y = i.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(v)));
+      const y = c.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(v)));
       if (y.length === 0) return null;
       const L = x(
         "space-y-2",
         {
-          "grid gap-2": i.layout === "grid",
-          "flex flex-wrap gap-2": i.layout === "flex"
+          "grid gap-2": c.layout === "grid",
+          "flex flex-wrap gap-2": c.layout === "flex"
         },
-        i.layout === "grid" && {
-          "grid-cols-1": !i.columns || i.columns === 1,
-          "grid-cols-2": i.columns === 2,
-          "grid-cols-3": i.columns === 3,
-          "grid-cols-4": i.columns === 4
+        c.layout === "grid" && {
+          "grid-cols-1": !c.columns || c.columns === 1,
+          "grid-cols-2": c.columns === 2,
+          "grid-cols-3": c.columns === 3,
+          "grid-cols-4": c.columns === 4
         },
-        i.className
+        c.className
       );
       return /* @__PURE__ */ d(
         "div",
@@ -3335,16 +3335,16 @@ const rr = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-neutral-900 dark:text-neutral-100",
-                  children: i.title
+                  children: c.title
                 }
               ),
-              i.description && /* @__PURE__ */ e(
+              c.description && /* @__PURE__ */ e(
                 Y,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-neutral-600 dark:text-neutral-400 mt-1",
-                  children: i.description
+                  children: c.description
                 }
               )
             ] }),
@@ -3376,7 +3376,7 @@ const rr = ({
             ))) }) })
           ]
         },
-        i.id
+        c.id
       );
     },
     [v, P, N, T]
@@ -3392,7 +3392,7 @@ const rr = ({
   );
   return /* @__PURE__ */ d("form", { ref: k, onSubmit: H, className: W, children: [
     /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(V) }),
-    g && /* @__PURE__ */ d("div", { className: x("flex gap-3 justify-end pt-8"), children: [
+    b && /* @__PURE__ */ d("div", { className: x("flex gap-3 justify-end pt-8"), children: [
       n && /* @__PURE__ */ e(
         te,
         {
@@ -3409,12 +3409,12 @@ const rr = ({
         te,
         {
           type: "submit",
-          variant: b.variant,
-          size: b.size || l,
-          disabled: b.disabled || u,
+          variant: g.variant,
+          size: g.size || l,
+          disabled: g.disabled || u,
           loading: u,
-          className: b.className,
-          children: b.label
+          className: g.className,
+          children: g.label
         }
       )
     ] })
@@ -3446,9 +3446,9 @@ function nr({
   dot: r = !1,
   icon: n,
   dismissible: s = !1,
-  onDismiss: c,
-  className: f,
-  children: b,
+  onDismiss: i,
+  className: m,
+  children: g,
   ...p
 }) {
   return /* @__PURE__ */ d(
@@ -3461,7 +3461,7 @@ function nr({
         $t[t],
         // Size styles
         zt[a],
-        f
+        m
       ),
       ...p,
       children: [
@@ -3474,12 +3474,12 @@ function nr({
             )
           }
         ),
-        n && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", b && "mr-1"), children: n }),
-        b,
-        s && c && /* @__PURE__ */ e(
+        n && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", g && "mr-1"), children: n }),
+        g,
+        s && i && /* @__PURE__ */ e(
           "button",
           {
-            onClick: c,
+            onClick: i,
             className: "ml-1.5 flex-shrink-0 hover:opacity-70 transition-opacity",
             "aria-label": "Remove badge",
             children: /* @__PURE__ */ e("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
@@ -3520,7 +3520,7 @@ function ar({
   label: r = "Loading...",
   showLabel: n = !1,
   className: s,
-  ...c
+  ...i
 }) {
   return /* @__PURE__ */ d(
     "div",
@@ -3530,7 +3530,7 @@ function ar({
         n ? "flex-col space-y-2" : "",
         s
       ),
-      ...c,
+      ...i,
       children: [
         /* @__PURE__ */ d(
           "svg",
@@ -3588,12 +3588,12 @@ const lr = ({
   size: r = "md",
   aspectRatio: n = "auto",
   radius: s = "md",
-  showLoading: c = !0,
-  showError: f = !0,
-  fallback: b,
+  showLoading: i = !0,
+  showError: m = !0,
+  fallback: g,
   loadingContent: p,
-  errorContent: g,
-  className: m,
+  errorContent: b,
+  className: f,
   onLoad: l,
   onError: u,
   ...h
@@ -3601,8 +3601,8 @@ const lr = ({
   const [k, C] = O(!0), [v, j] = O(!1), [N, q] = O(t), P = (W) => {
     C(!1), j(!1), l?.(W);
   }, U = (W) => {
-    if (C(!1), j(!0), b && N !== b) {
-      q(b), j(!1), C(!0);
+    if (C(!1), j(!0), g && N !== g) {
+      q(g), j(!1), C(!0);
       return;
     }
     u?.(W);
@@ -3633,7 +3633,7 @@ const lr = ({
       "rounded-xl": s === "xl",
       "rounded-full": s === "full"
     },
-    m
+    f
   ), A = x(
     "w-full h-full object-cover transition-opacity duration-200",
     {
@@ -3676,8 +3676,8 @@ const lr = ({
         onError: U
       }
     ),
-    k && c && /* @__PURE__ */ e("div", { className: H, children: p || T }),
-    v && f && /* @__PURE__ */ e("div", { className: H, children: g || V })
+    k && i && /* @__PURE__ */ e("div", { className: H, children: p || T }),
+    v && m && /* @__PURE__ */ e("div", { className: H, children: b || V })
   ] });
 }, sr = ({
   title: t,
@@ -3685,22 +3685,22 @@ const lr = ({
   actions: r = [],
   children: n,
   className: s,
-  backLabel: c = "Back",
-  backClassName: f,
-  onBack: b,
+  backLabel: i = "Back",
+  backClassName: m,
+  onBack: g,
   editable: p = !1,
-  onTitleChange: g
+  onTitleChange: b
 }) => {
-  const [m, l] = O(!1), [u, h] = O(t), k = Z(null);
+  const [f, l] = O(!1), [u, h] = O(t), k = Z(null);
   K(() => {
     h(t);
   }, [t]), K(() => {
-    m && k.current && (k.current.focus(), k.current.select());
-  }, [m]);
+    f && k.current && (k.current.focus(), k.current.select());
+  }, [f]);
   const C = () => {
     p && l(!0);
   }, v = () => {
-    l(!1), u.trim() !== "" && u !== t && g ? g(u.trim()) : h(t);
+    l(!1), u.trim() !== "" && u !== t && b ? b(u.trim()) : h(t);
   }, j = (N) => {
     N.key === "Enter" ? k.current?.blur() : N.key === "Escape" && (h(t), l(!1));
   };
@@ -3714,19 +3714,19 @@ const lr = ({
       children: [
         /* @__PURE__ */ d("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-default", children: [
-            b && /* @__PURE__ */ e(
+            g && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: b,
+                onClick: g,
                 className: x(
                   "flex items-center text-sm cursor-pointer transition",
-                  f
+                  m
                 ),
                 children: /* @__PURE__ */ e(we, { size: 16, color: "currentColor" })
               }
             ),
-            m ? /* @__PURE__ */ e(
+            f ? /* @__PURE__ */ e(
               "input",
               {
                 ref: k,
@@ -3820,37 +3820,37 @@ const lr = ({
   ),
   s && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: s }),
   t.length > 0 && /* @__PURE__ */ e("div", { className: x("flex flex-wrap gap-2", !s && "ml-auto"), children: t.map(
-    (c) => c.splitOptions && c.splitOptions.length > 0 ? /* @__PURE__ */ e(
+    (i) => i.splitOptions && i.splitOptions.length > 0 ? /* @__PURE__ */ e(
       ze,
       {
-        label: c.label,
-        onClick: c.onClick,
-        icon: c.icon,
-        variant: c.variant === "primary" ? "primary" : "secondary",
-        options: c.splitOptions,
-        disabled: c.disabled
+        label: i.label,
+        onClick: i.onClick,
+        icon: i.icon,
+        variant: i.variant === "primary" ? "primary" : "secondary",
+        options: i.splitOptions,
+        disabled: i.disabled
       },
-      c.id
+      i.id
     ) : /* @__PURE__ */ d(
       "button",
       {
         type: "button",
-        onClick: (f) => {
-          f.stopPropagation(), f.target.blur(), c.onClick();
+        onClick: (m) => {
+          m.stopPropagation(), m.target.blur(), i.onClick();
         },
-        disabled: c.disabled,
+        disabled: i.disabled,
         className: x("btn", {
-          o__primary: c.variant === "primary",
-          o__secondary: c.variant === "secondary" || c.variant === "outline",
-          o__ghost: c.variant === "ghost",
-          o__destructive: c.variant === "destructive"
+          o__primary: i.variant === "primary",
+          o__secondary: i.variant === "secondary" || i.variant === "outline",
+          o__ghost: i.variant === "ghost",
+          o__destructive: i.variant === "destructive"
         }),
         children: [
-          c.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: c.icon }),
-          c.label
+          i.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: i.icon }),
+          i.label
         ]
       },
-      c.id
+      i.id
     )
   ) })
 ] });
@@ -3866,25 +3866,25 @@ const cr = ({
   size: r = "md",
   className: n
 }) => {
-  const s = (m) => {
-    if (!m) return "-";
+  const s = (f) => {
+    if (!f) return "-";
     try {
-      return new Date(m).toLocaleDateString("nl-NL", {
+      return new Date(f).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(m);
+      return String(f);
     }
-  }, c = (m) => m ? "Ja" : "Nee", f = (m, l) => {
-    if (!l) return String(m || "-");
-    const u = l.find((h) => h.value === m);
-    return u ? u.label : String(m || "-");
-  }, b = ae(
-    (m) => {
-      const l = jt(a, m.name);
-      if (m.type === "array") {
+  }, i = (f) => f ? "Ja" : "Nee", m = (f, l) => {
+    if (!l) return String(f || "-");
+    const u = l.find((h) => h.value === f);
+    return u ? u.label : String(f || "-");
+  }, g = ae(
+    (f) => {
+      const l = jt(a, f.name);
+      if (f.type === "array") {
         const h = l;
         return !h || h.length === 0 ? /* @__PURE__ */ e(
           Y,
@@ -3907,13 +3907,13 @@ const cr = ({
                   weight: "medium",
                   className: "text-neutral-700 dark:text-neutral-300",
                   children: [
-                    m.label,
+                    f.label,
                     " ",
                     C + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: m.arrayFields?.map((v) => {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((v) => {
                 const j = k?.[v.name];
                 let N = "-";
                 switch (v.type) {
@@ -3927,13 +3927,13 @@ const cr = ({
                     break;
                   case "select":
                   case "radio":
-                    N = f(
+                    N = m(
                       j,
                       v.options
                     );
                     break;
                   case "checkbox":
-                    N = c(j);
+                    N = i(j);
                     break;
                   case "date":
                     N = s(j);
@@ -3972,10 +3972,10 @@ const cr = ({
           C
         )) });
       }
-      if (m.type === "custom" && m.customComponent)
-        return m.customComponent({ value: l });
-      if (m.format) {
-        const h = m.format(l, a);
+      if (f.type === "custom" && f.customComponent)
+        return f.customComponent({ value: l });
+      if (f.format) {
+        const h = f.format(l, a);
         return /* @__PURE__ */ e(
           Y,
           {
@@ -3987,7 +3987,7 @@ const cr = ({
         );
       }
       let u = "-";
-      switch (m.type) {
+      switch (f.type) {
         case "text":
         case "email":
         case "password":
@@ -4001,10 +4001,10 @@ const cr = ({
           break;
         case "select":
         case "radio":
-          u = f(l, m.options);
+          u = m(l, f.options);
           break;
         case "checkbox":
-          u = c(l);
+          u = i(l);
           break;
         case "date":
           u = s(l);
@@ -4024,24 +4024,24 @@ const cr = ({
     },
     [a]
   ), p = ae(
-    (m) => {
-      if (m.conditional && !m.conditional(a))
+    (f) => {
+      if (f.conditional && !f.conditional(a))
         return null;
-      const l = m.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(a)));
+      const l = f.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(a)));
       if (l.length === 0) return null;
       const u = x(
         "space-y-4",
         {
-          "grid gap-4": m.layout === "grid",
-          "flex flex-wrap gap-4": m.layout === "flex"
+          "grid gap-4": f.layout === "grid",
+          "flex flex-wrap gap-4": f.layout === "flex"
         },
-        m.layout === "grid" && {
-          "grid-cols-1": !m.columns || m.columns === 1,
-          "grid-cols-2": m.columns === 2,
-          "grid-cols-3": m.columns === 3,
-          "grid-cols-4": m.columns === 4
+        f.layout === "grid" && {
+          "grid-cols-1": !f.columns || f.columns === 1,
+          "grid-cols-2": f.columns === 2,
+          "grid-cols-3": f.columns === 3,
+          "grid-cols-4": f.columns === 4
         },
-        m.className
+        f.className
       );
       return /* @__PURE__ */ d(
         "div",
@@ -4056,16 +4056,16 @@ const cr = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-neutral-900 dark:text-neutral-100",
-                  children: m.title
+                  children: f.title
                 }
               ),
-              m.description && /* @__PURE__ */ e(
+              f.description && /* @__PURE__ */ e(
                 Y,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-neutral-600 dark:text-neutral-400 mt-1",
-                  children: m.description
+                  children: f.description
                 }
               )
             ] }),
@@ -4087,18 +4087,18 @@ const cr = ({
                       children: h.label
                     }
                   ),
-                  b(h)
+                  g(h)
                 ]
               },
               h.name
             )) }) })
           ]
         },
-        m.id
+        f.id
       );
     },
-    [a, b]
-  ), g = x(
+    [a, g]
+  ), b = x(
     "space-y-6",
     {
       "max-w-md": r === "sm",
@@ -4108,10 +4108,10 @@ const cr = ({
     },
     n
   );
-  return /* @__PURE__ */ e("div", { className: g, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(p) }) });
-}, De = ({ item: t, isSelectedHandler: a, onClick: r }) => {
-  const [n, s] = O(!1), c = t.children && t.children.length > 0, f = () => {
-    c && s(!n);
+  return /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(p) }) });
+}, De = ({ item: t, isSelectedHandler: a, onClick: r, depth: n = 0 }) => {
+  const [s, i] = O(t.defaultCollapsed ?? !1), m = t.children && t.children.length > 0, g = m && n === 0, p = () => {
+    m && i(!s);
   }, b = a ? a(t.path) : !1;
   return /* @__PURE__ */ d("li", { children: [
     /* @__PURE__ */ d(
@@ -4120,30 +4120,31 @@ const cr = ({
         className: x(
           "flex flex-row w-full py-1 rounded-lg items-center h-8 transition-colors cursor-pointer px-3 pr-1 no-underline text-sm",
           {
-            "active-nav-item": b && !c,
-            "shadow-lvl-0": b && !c,
-            "font-semibold": b || c || t.children !== void 0
+            "active-nav-item": b && !m,
+            "shadow-lvl-0": b && !m,
+            "font-semibold": b || g
           }
         ),
         onClick: () => {
-          c ? f() : t.path && r?.(t.path);
+          m ? p() : t.path && r?.(t.path);
         },
         children: [
-          t.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: t.icon }),
-          /* @__PURE__ */ e("span", { className: "flex-1", children: t.label }),
+          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 }),
-          c && /* @__PURE__ */ e("span", { className: `${n ? "collapsed" : ""}`, children: /* @__PURE__ */ e(He, { className: "w-4 h-4 text-muted" }) })
+          m && /* @__PURE__ */ e("span", { className: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e(He, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
-    c && !n && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((p, g) => /* @__PURE__ */ e(
+    m && !s && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((f, l) => /* @__PURE__ */ e(
       De,
       {
-        item: p,
+        item: f,
         isSelectedHandler: a,
-        onClick: r
+        onClick: r,
+        depth: n + 1
       },
-      g
+      l
     )) })
   ] });
 }, ir = ({
@@ -4152,22 +4153,22 @@ const cr = ({
   items: r,
   isSelectedHandler: n,
   onClick: s,
-  preMenuItemsComponent: c
+  preMenuItemsComponent: i
 }) => /* @__PURE__ */ d("div", { className: "flex flex-col h-screen mb-6", children: [
   /* @__PURE__ */ d("div", { className: "sidebar-menu-header", children: [
     /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-default mb-2", children: t }),
-    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: a?.map((f, b) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: f }, b)) })
+    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: a?.map((m, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: m }, g)) })
   ] }),
-  c && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: c }),
+  i && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: i }),
   /* @__PURE__ */ e("ul", { children: r.map(
-    (f, b) => !f.path && !f.label && !f.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, b) : /* @__PURE__ */ e(
+    (m, g) => !m.path && !m.label && !m.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, g) : /* @__PURE__ */ e(
       De,
       {
-        item: f,
+        item: m,
         isSelectedHandler: n,
         onClick: s
       },
-      b
+      g
     )
   ) })
 ] }), dr = ({
@@ -4176,23 +4177,23 @@ const cr = ({
   weight: r = "bold",
   color: n = "current",
   align: s = "left",
-  truncate: c = !1,
-  className: f,
-  children: b,
+  truncate: i = !1,
+  className: m,
+  children: g,
   ...p
 }) => {
-  const g = a || Bt(t), m = x(
+  const b = a || Bt(t), f = x(
     "font-primary",
     // Size variants
     {
-      "text-xs": g === "xs",
-      "text-sm": g === "sm",
-      "text-base": g === "md",
-      "text-lg": g === "lg",
-      "text-xl": g === "xl",
-      "text-2xl": g === "2xl",
-      "text-3xl": g === "3xl",
-      "text-4xl": g === "4xl"
+      "text-xs": b === "xs",
+      "text-sm": b === "sm",
+      "text-base": b === "md",
+      "text-lg": b === "lg",
+      "text-xl": b === "xl",
+      "text-2xl": b === "2xl",
+      "text-3xl": b === "3xl",
+      "text-4xl": b === "4xl"
     },
     // Weight variants
     {
@@ -4222,11 +4223,11 @@ const cr = ({
     },
     // Truncation
     {
-      truncate: c
+      truncate: i
     },
-    f
+    m
   ), l = `h${t}`;
-  return /* @__PURE__ */ e(l, { className: m, ...p, children: b });
+  return /* @__PURE__ */ e(l, { className: f, ...p, children: g });
 };
 function Bt(t) {
   return {
@@ -4244,10 +4245,10 @@ const ur = ({
   variant: r = "default",
   size: n = "md",
   interactive: s = !1,
-  className: c,
-  itemClassName: f
+  className: i,
+  itemClassName: m
 }) => {
-  const b = x(
+  const g = x(
     // Base styles
     "space-y-1",
     // Variant styles
@@ -4267,7 +4268,7 @@ const ur = ({
       "text-base": n === "md",
       "text-lg": n === "lg"
     },
-    c
+    i
   ), p = (l, u) => x(
     // Base item styles
     "transition-colors duration-200",
@@ -4286,40 +4287,40 @@ const ur = ({
     l.disabled && {
       "opacity-50 cursor-not-allowed": !0
     },
-    f
-  ), g = (l) => {
+    m
+  ), b = (l) => {
     s && !l.disabled && l.onClick && l.onClick();
-  }, m = (l, u) => {
+  }, f = (l, u) => {
     s && !u.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), u.onClick?.());
   };
-  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: b, children: t.map((l, u) => /* @__PURE__ */ e(
+  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: t.map((l, u) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
-      onClick: () => g(l),
-      onKeyDown: (h) => m(h, l),
+      onClick: () => b(l),
+      onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
     },
     l.id || u
-  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: b, children: t.map((l, u) => /* @__PURE__ */ e(
+  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: g, children: t.map((l, u) => /* @__PURE__ */ e(
     "div",
     {
       className: p(l),
-      onClick: () => g(l),
-      onKeyDown: (h) => m(h, l),
+      onClick: () => b(l),
+      onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
     },
     l.id || u
-  )) }) : /* @__PURE__ */ e("ul", { className: b, children: t.map((l, u) => /* @__PURE__ */ e(
+  )) }) : /* @__PURE__ */ e("ul", { className: g, children: t.map((l, u) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
-      onClick: () => g(l),
-      onKeyDown: (h) => m(h, l),
+      onClick: () => b(l),
+      onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
@@ -4332,13 +4333,13 @@ const ur = ({
   onClose: r,
   labels: n,
   initialCommandPath: s,
-  initialActiveIndex: c
+  initialActiveIndex: i
 }) => {
-  const [f, b] = O(""), [p, g] = O(s || []), [m, l] = O(c || 0), u = Z(null), h = Z(null), C = (p.length ? t.find((v) => v.id === p[0])?.subCommands || [] : t).filter(
-    (v) => v.label.toLowerCase().includes(f.toLowerCase())
+  const [m, g] = O(""), [p, b] = O(s || []), [f, l] = O(i || 0), u = Z(null), h = Z(null), C = (p.length ? t.find((v) => v.id === p[0])?.subCommands || [] : t).filter(
+    (v) => v.label.toLowerCase().includes(m.toLowerCase())
   );
   return K(() => {
-    a || (b(""), g(s || []), l(c || 0));
+    a || (g(""), b(s || []), l(i || 0));
   }, [a]), K(() => {
     const v = (j) => {
       if (a) {
@@ -4353,21 +4354,21 @@ const ur = ({
             (N) => N < C.length - 1 ? N + 1 : 0
           );
         else if (j.key === "Enter") {
-          const N = C[m];
-          N && (N.subCommands ? (g([...p, N.id]), l(0)) : N.action && (N.action(), r()));
+          const N = C[f];
+          N && (N.subCommands ? (b([...p, N.id]), l(0)) : N.action && (N.action(), r()));
         }
       }
     };
     return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [a, r, C, m, p]), K(() => {
+  }, [a, r, C, f, p]), K(() => {
     const v = (j) => {
       u.current && !u.current.contains(j.target) && r();
     };
     return a && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
   }, [a, r]), K(() => {
     if (!a) return;
-    h.current?.querySelector(`[data-index="${m}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [m, a]), a ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ d(
+    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(
     "div",
     {
       className: "flex flex-col w-full max-w-lg max-h-[80vh] p-2 mx-auto rounded-xl border border-neutral shadow-lg bg-module",
@@ -4381,8 +4382,8 @@ const ur = ({
               type: "text",
               autoFocus: !0,
               placeholder: n?.searchPlaceholder || "Search commands...",
-              value: f,
-              onChange: (v) => b(v.target.value),
+              value: m,
+              onChange: (v) => g(v.target.value),
               className: "w-full py-2 text-default border-0 focus:outline-none focus:ring-0 focus:border-0 focus:shadow-none bg-transparent"
             }
           )
@@ -4398,9 +4399,9 @@ const ur = ({
                 "div",
                 {
                   "data-index": j,
-                  className: `flex items-center p-2 cursor-pointer rounded-md text-default ${j === m ? "bg-neutral-container" : ""}`,
+                  className: `flex items-center p-2 cursor-pointer rounded-md text-default ${j === f ? "bg-neutral-container" : ""}`,
                   onClick: () => {
-                    v.subCommands ? (g([...p, v.id]), l(0)) : v.action && (v.action(), r());
+                    v.subCommands ? (b([...p, v.id]), l(0)) : v.action && (v.action(), r());
                   },
                   onMouseEnter: () => l(j),
                   children: [
@@ -4499,26 +4500,26 @@ const ur = ({
     background: r,
     radius: n,
     shadow: s,
-    border: c,
-    borderColor: f,
-    className: b,
+    border: i,
+    borderColor: m,
+    className: g,
     children: p,
-    ...g
-  }, m) => /* @__PURE__ */ e(
+    ...b
+  }, f) => /* @__PURE__ */ e(
     "div",
     {
-      ref: m,
+      ref: f,
       className: x(
         t && Pt[t],
         a && _t[a],
         r && Ot[r],
         n && Vt[n],
         s && Ft[s],
-        c && Wt[c],
-        f && Rt[f],
-        b
+        i && Wt[i],
+        m && Rt[m],
+        g
       ),
-      ...g,
+      ...b,
       children: p
     }
   )
@@ -4534,9 +4535,9 @@ function hr({
   framework: r = "react",
   fallback: n,
   componentProps: s,
-  className: c
+  className: i
 }) {
-  const f = Z(null), [b, p] = O(!0), [g, m] = O(null), l = Z(null);
+  const m = Z(null), [g, p] = O(!0), [b, f] = O(null), l = Z(null);
   return Z(null), K(() => {
     let u = !0;
     return (async () => {
@@ -4545,7 +4546,7 @@ function hr({
         const k = await a();
         if (!u) return;
         const C = k.component || k.default || k;
-        m(r === "react" ? () => C : () => k);
+        f(r === "react" ? () => C : () => k);
       } catch (k) {
         console.error(`[FederatedResource] Load failed: ${t}`, k);
       } finally {
@@ -4555,25 +4556,25 @@ function hr({
       u = !1;
     };
   }, [t, a]), K(() => {
-    if (b || !g || r === "react") return;
-    const u = f.current;
+    if (g || !b || r === "react") return;
+    const u = m.current;
     if (u) {
       if (r === "svelte") {
-        const h = g.default || g, k = new h({ target: u, props: s || {} });
+        const h = b.default || b, k = new h({ target: u, props: s || {} });
         return l.current = k, () => k.$destroy();
       }
-      if (g.mount) {
-        const h = g.mount({ container: u, props: s || {} });
+      if (b.mount) {
+        const h = b.mount({ container: u, props: s || {} });
         return () => {
-          typeof h == "function" ? h() : g.unmount?.(u);
+          typeof h == "function" ? h() : b.unmount?.(u);
         };
       }
     }
-  }, [g, r, b]), K(() => {
+  }, [b, r, g]), K(() => {
     r === "svelte" && l.current && l.current.$set?.(s);
-  }, [s, r]), /* @__PURE__ */ d("div", { ref: f, className: c, style: { display: "contents" }, children: [
-    b && n,
-    r === "react" && g && /* @__PURE__ */ e(g, { ...s })
+  }, [s, r]), /* @__PURE__ */ d("div", { ref: m, className: i, style: { display: "contents" }, children: [
+    g && n,
+    r === "react" && b && /* @__PURE__ */ e(b, { ...s })
   ] });
 }
 class pr extends Ge {