unifyedx-storybook-new 0.2.15 → 0.2.16

package/dist/unifyedx-storybook-new.es.js

@@ -1,22 +1,22 @@
 import { jsxs as l, jsx as e, Fragment as ee } from "react/jsx-runtime";
-import ae, { useState as B, useMemo as ce, useId as ea, Fragment as J, useEffect as Q, useCallback as K, useRef as ue } from "react";
-import { a as Y, U as ut, X as ye, P as G, L as mt, C as je, b as Ge, f as Ue, d as va, D as Na, F as ht, e as pt, h as gt, T as Ve, u as yt, i as ft, I as bt, j as vt, k as Nt, l as xt, m as kt, n as wt, S as xa, o as ka, M as Ct, p as St, q as wa, r as Dt, A as $t, E as Ft, s as Tt, t as At, v as Et, w as Rt, x as Ca, y as It, z as Sa, B as Da, G as zt, H as Pt, J as Bt, K as qe, N as aa, O as ta, Q as Lt, R as Ot, V as $a, W as Mt, Y as sa, Z as Ut, _ as Vt, $ as Fa, a0 as qt, a1 as jt, a2 as Gt, a3 as _t, a4 as Wt, a5 as Yt, a6 as Jt, a7 as Qt, a8 as Xt, a9 as Zt, aa as Ht, ab as Kt, ac as er, ad as ar, ae as tr } from "./vendor-zgKTz69B.js";
-import { Popover as rr, PopoverButton as nr, PopoverPanel as sr, Transition as oe, Dialog as me, TransitionChild as ge, DialogPanel as Se, DialogTitle as _e, TabGroup as lr, TabList as or, Tab as re, TabPanels as ir, RadioGroup as ze, Listbox as X, ListboxButton as cr, ListboxOptions as dr, ListboxOption as ur, SwitchGroup as mr, Switch as Ze, Menu as hr, MenuButton as pr, Portal as gr, MenuItems as yr, MenuItem as fr, DialogBackdrop as br } from "@headlessui/react";
+import ae, { useState as B, useMemo as ce, useId as ea, Fragment as Q, useEffect as X, useCallback as K, useRef as ue } from "react";
+import { a as J, U as ut, X as ye, P as _, L as mt, C as je, b as Ge, f as Ue, d as va, D as Na, F as ht, e as pt, h as gt, T as Ve, u as yt, i as ft, I as bt, j as vt, k as Nt, l as xt, m as kt, n as wt, S as xa, o as ka, M as Ct, p as St, q as wa, r as Dt, A as Ft, E as $t, s as Tt, t as At, v as Et, w as Rt, x as Ca, y as It, z as Sa, B as Da, G as zt, H as Pt, J as Bt, K as qe, N as aa, O as ta, Q as Lt, R as Ot, V as Fa, W as Mt, Y as sa, Z as Ut, _ as Vt, $ as $a, a0 as qt, a1 as jt, a2 as Gt, a3 as _t, a4 as Wt, a5 as Yt, a6 as Jt, a7 as Qt, a8 as Xt, a9 as Zt, aa as Ht, ab as Kt, ac as er, ad as ar, ae as tr } from "./vendor-zgKTz69B.js";
+import { Popover as rr, PopoverButton as nr, PopoverPanel as sr, Transition as oe, Dialog as me, TransitionChild as ge, DialogPanel as Se, DialogTitle as _e, TabGroup as lr, TabList as or, Tab as re, TabPanels as ir, RadioGroup as ze, Listbox as Z, ListboxButton as cr, ListboxOptions as dr, ListboxOption as ur, SwitchGroup as mr, Switch as Ze, Menu as hr, MenuButton as pr, Portal as gr, MenuItems as yr, MenuItem as fr, DialogBackdrop as br } from "@headlessui/react";
 import { motion as ne, AnimatePresence as be } from "framer-motion";
 import { d as vr } from "./vendor-lodash-BD0xlZyL.js";
 import { useFloating as Ta, offset as Aa, flip as Ea, shift as Ra, autoUpdate as Ia, useClick as Nr, useDismiss as xr, useInteractions as kr, FloatingPortal as wr } from "@floating-ui/react";
 import He, { debounce as Cr } from "lodash";
 import { toast as le, ToastContainer as Sr, Slide as Dr } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { P as $r, S as Fr, F as Tr, G as Ar, a as Er, E as Rr, b as Ir, C as zr, R as Pr, c as Br, d as Lr, e as Or, f as Mr, I as Ur, g as ia } from "./vendor-syncfusion-DGcZfoFG.js";
+import { P as Fr, S as $r, F as Tr, G as Ar, a as Er, E as Rr, b as Ir, C as zr, R as Pr, c as Br, d as Lr, e as Or, f as Mr, I as Ur, g as ia } from "./vendor-syncfusion-DGcZfoFG.js";
 const Vr = (t) => {
   let r = 2166136261;
   for (let s = 0; s < t.length; s++)
     r ^= t.charCodeAt(s), r += (r << 1) + (r << 4) + (r << 7) + (r << 8) + (r << 24);
   return r >>> 0;
 }, qr = (t) => {
-  const r = (t ?? "").trim().toLowerCase(), s = parseInt((r.match(/\d+$/) ?? [0])[0], 10) || 0, o = Vr(r), n = (o % 360 + 37 * s) % 360, u = 55 + (o >>> 8) % 20, i = 30 + (o >>> 16) % 10, c = 86 + (o >>> 24) % 8, y = `hsl(${n}, ${u}%, ${c}%)`, b = `hsl(${n}, ${u}%, ${i}%)`;
-  return { bg: y, text: b };
+  const r = (t ?? "").trim().toLowerCase(), s = parseInt((r.match(/\d+$/) ?? [0])[0], 10) || 0, o = Vr(r), n = (o % 360 + 37 * s) % 360, u = 55 + (o >>> 8) % 20, i = 30 + (o >>> 16) % 10, c = 86 + (o >>> 24) % 8, y = `hsl(${n}, ${u}%, ${c}%)`, v = `hsl(${n}, ${u}%, ${i}%)`;
+  return { bg: y, text: v };
 }, jr = (t = "") => t.split(" ").map((r) => r[0]).slice(0, 2).join("").toUpperCase(), za = ({
   src: t,
   name: r,
@@ -29,16 +29,16 @@ const Vr = (t) => {
   className: u,
   ...i
 }) => {
-  const [c, y] = B(!1), b = ce(() => qr(r), []), N = t && !c, a = !N && r, k = !N && !r, m = Y(
+  const [c, y] = B(!1), v = ce(() => qr(r), []), x = t && !c, a = !x && r, k = !x && !r, h = J(
     "avatar-container",
     `avatar--size-${s}`,
     u
-  ), g = N ? "transparent" : o || b.bg, $ = n || b.text;
-  return /* @__PURE__ */ l("div", { className: m, style: {
+  ), g = x ? "transparent" : o || v.bg, $ = n || v.text;
+  return /* @__PURE__ */ l("div", { className: h, style: {
     backgroundColor: g,
     color: $
   }, ...i, children: [
-    N && /* @__PURE__ */ e(
+    x && /* @__PURE__ */ e(
       "img",
       {
         src: t,
@@ -74,14 +74,14 @@ const Vr = (t) => {
   className: c,
   ...y
 }) => {
-  const b = Y(
+  const v = J(
     "badge",
     `badge--variant-${r}`,
     `badge--size-${s}`,
     { "badge--with-remove": !!n },
     c
   );
-  return /* @__PURE__ */ l("span", { className: b, style: u && i ? {
+  return /* @__PURE__ */ l("span", { className: v, style: u && i ? {
     backgroundColor: u,
     color: i,
     borderColor: "#ff0000"
@@ -120,15 +120,15 @@ const Vr = (t) => {
 };
 Gr.propTypes = {
   /** Is this the principal call to action on the page? */
-  primary: G.bool,
+  primary: _.bool,
   /** What background color to use */
-  backgroundColor: G.string,
+  backgroundColor: _.string,
   /** How large should the button be? */
-  size: G.oneOf(["small", "medium", "large"]),
+  size: _.oneOf(["small", "medium", "large"]),
   /** Button contents */
-  label: G.string.isRequired,
+  label: _.string.isRequired,
   /** Optional click handler */
-  onClick: G.func
+  onClick: _.func
 };
 const _r = {
   small: "btn-sm",
@@ -137,7 +137,7 @@ const _r = {
 }, Wr = {
   primary: "btn-primary",
   secondary: "btn-secondary"
-}, Z = ({
+}, H = ({
   dataTestId: t,
   title: r,
   type: s = "button",
@@ -149,16 +149,16 @@ const _r = {
   icon: c,
   // Renamed for clarity, expecting a component type e.g., CheckCircle
   disabled: y = !1,
-  size: b = "medium",
-  label: N,
+  size: v = "medium",
+  label: x,
   children: a,
   // ✅ Add children to the props list
   onClick: k,
-  ...m
+  ...h
 }) => {
-  const g = y || u, $ = c && !N, L = Y(
+  const g = y || u, $ = c && !x, L = J(
     "btn-base",
-    _r[b],
+    _r[v],
     Wr[i],
     {
       "is-loading": u,
@@ -174,12 +174,12 @@ const _r = {
       className: L,
       disabled: g,
       onClick: k,
-      title: r || $ && o || (typeof N == "string" ? N : void 0),
-      "aria-label": o || $ && r || (typeof N == "string" ? N : void 0),
-      ...m,
+      title: r || $ && o || (typeof x == "string" ? x : void 0),
+      "aria-label": o || $ && r || (typeof x == "string" ? x : void 0),
+      ...h,
       children: u ? /* @__PURE__ */ e(mt, { className: "loader-spin", "data-testid": "button-loader" }) : /* @__PURE__ */ l(ee, { children: [
-        c && /* @__PURE__ */ e(c, { size: b === "large" ? 20 : 16 }),
-        N,
+        c && /* @__PURE__ */ e(c, { size: v === "large" ? 20 : 16 }),
+        x,
         a,
         " "
       ] })
@@ -218,13 +218,13 @@ const _r = {
   onChange: i,
   ...c
 }) => {
-  const y = ea(), b = r || y;
+  const y = ea(), v = r || y;
   return /* @__PURE__ */ l("div", { className: `checkbox-container ${o || ""}`, children: [
-    /* @__PURE__ */ l("label", { htmlFor: b, className: "checkbox-wrapper", children: [
+    /* @__PURE__ */ l("label", { htmlFor: v, className: "checkbox-wrapper", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          id: b,
+          id: v,
           type: "checkbox",
           ref: n,
           className: "checkbox-input",
@@ -236,7 +236,7 @@ const _r = {
       /* @__PURE__ */ e(
         "div",
         {
-          className: Y("checkbox-box", {
+          className: J("checkbox-box", {
             "checkbox-box--checked": u,
             "checkbox-box--error": !!s
           }),
@@ -259,10 +259,10 @@ const _r = {
   className: c,
   ...y
 }) => {
-  const b = (N) => {
-    N.stopPropagation(), N.preventDefault(), s?.();
+  const v = (x) => {
+    x.stopPropagation(), x.preventDefault(), s?.();
   };
-  return /* @__PURE__ */ l("div", { className: Y("datepicker-wrapper", c), children: [
+  return /* @__PURE__ */ l("div", { className: J("datepicker-wrapper", c), children: [
     n && /* @__PURE__ */ e("label", { className: "datepicker-label", htmlFor: "datepicker-input", children: n }),
     /* @__PURE__ */ l(Ba, { children: [
       /* @__PURE__ */ e(La, { asChild: !0, children: /* @__PURE__ */ l("div", { className: "datepicker-input-container", children: [
@@ -271,7 +271,7 @@ const _r = {
           {
             id: "datepicker-input",
             type: "button",
-            className: Y("datepicker-trigger", {
+            className: J("datepicker-trigger", {
               "datepicker-trigger--error": !!u,
               "datepicker-trigger--disabled": i
             }),
@@ -287,7 +287,7 @@ const _r = {
           "button",
           {
             type: "button",
-            onClick: b,
+            onClick: v,
             className: "datepicker-clear-button",
             "aria-label": "Clear selected date",
             children: /* @__PURE__ */ e(ye, { size: 16 })
@@ -319,14 +319,14 @@ const _r = {
   className: c,
   ...y
 }) => {
-  const b = t?.from, N = t?.to, a = (m) => {
-    m.stopPropagation(), m.preventDefault(), s?.();
-  }, k = b && N ? /* @__PURE__ */ l(ee, { children: [
-    Ue(b, "MMM d, y"),
+  const v = t?.from, x = t?.to, a = (h) => {
+    h.stopPropagation(), h.preventDefault(), s?.();
+  }, k = v && x ? /* @__PURE__ */ l(ee, { children: [
+    Ue(v, "MMM d, y"),
     " - ",
-    Ue(N, "MMM d, y")
+    Ue(x, "MMM d, y")
   ] }) : /* @__PURE__ */ e("span", { className: "datepicker-placeholder", children: o });
-  return /* @__PURE__ */ l("div", { className: Y("datepicker-wrapper", c), children: [
+  return /* @__PURE__ */ l("div", { className: J("datepicker-wrapper", c), children: [
     n && /* @__PURE__ */ e("label", { className: "datepicker-label", htmlFor: "daterangepicker-input", children: n }),
     /* @__PURE__ */ l(Ba, { children: [
       /* @__PURE__ */ e(La, { asChild: !0, children: /* @__PURE__ */ l("div", { className: "datepicker-input-container", children: [
@@ -335,19 +335,19 @@ const _r = {
           {
             id: "daterangepicker-input",
             type: "button",
-            className: Y("datepicker-trigger", {
+            className: J("datepicker-trigger", {
               "datepicker-trigger--error": !!u,
               "datepicker-trigger--disabled": i
             }),
             disabled: i,
-            "aria-label": b && N ? `Selected range is ${k}` : o,
+            "aria-label": v && x ? `Selected range is ${k}` : o,
             children: [
               /* @__PURE__ */ e(va, { className: "datepicker-icon" }),
               /* @__PURE__ */ e("span", { className: "datepicker-value", children: k })
             ]
           }
         ),
-        b && s && !i && /* @__PURE__ */ e(
+        v && s && !i && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -627,16 +627,16 @@ const _r = {
   validFiles: i = [],
   rejectedFiles: c = [],
   handleRemoveValidFile: y,
-  handleRemoveRejectedFile: b,
-  handleSubmit: N,
+  handleRemoveRejectedFile: v,
+  handleSubmit: x,
   isSubmitting: a,
   formErrors: k,
   // --- UI Text ---
-  title: m = "Upload Files",
+  title: h = "Upload Files",
   subHeading: g = "Supports PNG, JPG, PDF. Max size: 50MB."
 }) => {
   const $ = i.length > 0 || c.length > 0;
-  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: J, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: Q, children: /* @__PURE__ */ l(
     me,
     {
       as: "div",
@@ -647,7 +647,7 @@ const _r = {
         /* @__PURE__ */ e(
           ge,
           {
-            as: J,
+            as: Q,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
             enterTo: "opacity-100",
@@ -660,7 +660,7 @@ const _r = {
         /* @__PURE__ */ e("div", { className: "dialog-positioner", children: /* @__PURE__ */ e(
           ge,
           {
-            as: J,
+            as: Q,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0 scale-95",
             enterTo: "opacity-100 scale-100",
@@ -674,9 +674,9 @@ const _r = {
                 onClick: (L) => L.stopPropagation(),
                 children: [
                   /* @__PURE__ */ e("input", { ...o() }),
-                  /* @__PURE__ */ l("form", { onSubmit: N, className: "form-wrapper", children: [
+                  /* @__PURE__ */ l("form", { onSubmit: x, className: "form-wrapper", children: [
                     /* @__PURE__ */ l("div", { className: "dialog-header", children: [
-                      /* @__PURE__ */ e(_e, { as: "h3", className: "dialog-title-text", children: m }),
+                      /* @__PURE__ */ e(_e, { as: "h3", className: "dialog-title-text", children: h }),
                       /* @__PURE__ */ e(
                         "button",
                         {
@@ -714,7 +714,7 @@ const _r = {
                       $ && /* @__PURE__ */ l("div", { className: "file-list-container", children: [
                         /* @__PURE__ */ e("h3", { children: "Upload Queue" }),
                         /* @__PURE__ */ l("ul", { className: "file-list", children: [
-                          i.map((L, M) => /* @__PURE__ */ l(
+                          i.map((L, O) => /* @__PURE__ */ l(
                             "li",
                             {
                               className: "file-item",
@@ -735,16 +735,16 @@ const _r = {
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => y(M),
+                                    onClick: () => y(O),
                                     className: "remove-file-button",
                                     children: /* @__PURE__ */ e(Ve, { size: 16 })
                                   }
                                 )
                               ]
                             },
-                            `${L.name}-${M}`
+                            `${L.name}-${O}`
                           )),
-                          c.map(({ file: L, message: M }, C) => /* @__PURE__ */ l(
+                          c.map(({ file: L, message: O }, C) => /* @__PURE__ */ l(
                             "li",
                             {
                               className: "file-item file-item--rejected",
@@ -759,14 +759,14 @@ const _r = {
                                   /* @__PURE__ */ l("div", { children: [
                                     /* @__PURE__ */ e("p", { className: "file-item-name", children: L.name }),
                                     /* @__PURE__ */ e("p", { className: "file-item-size", children: ua(L.size) }),
-                                    /* @__PURE__ */ e("p", { className: "rejection-reason", children: M })
+                                    /* @__PURE__ */ e("p", { className: "rejection-reason", children: O })
                                   ] })
                                 ] }),
                                 /* @__PURE__ */ e(
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => b(C),
+                                    onClick: () => v(C),
                                     className: "remove-file-button",
                                     children: /* @__PURE__ */ e(Ve, { size: 16 })
                                   }
@@ -780,7 +780,7 @@ const _r = {
                     ] }),
                     /* @__PURE__ */ l("div", { className: "dialog-footer", children: [
                       /* @__PURE__ */ e(
-                        Z,
+                        H,
                         {
                           type: "button",
                           category: "secondary",
@@ -789,7 +789,7 @@ const _r = {
                         }
                       ),
                       /* @__PURE__ */ e(
-                        Z,
+                        H,
                         {
                           type: "submit",
                           label: a ? "Uploading..." : "Upload Files",
@@ -820,7 +820,7 @@ const _r = {
   const [c, y] = B({
     createdBy: [],
     updatedBy: []
-  }), [b, N] = B({
+  }), [v, x] = B({
     createdBy: !1,
     updatedBy: !1
   }), a = yt({
@@ -828,51 +828,51 @@ const _r = {
     // Deep copy
     onSubmit: (C) => {
       const T = {};
-      Object.keys(C).forEach((E) => {
-        T[E] = {
-          operator: C[E].operator || "in",
-          values: Array.isArray(C[E].values) ? C[E].values : [],
-          range: C[E].range || null
+      Object.keys(C).forEach((I) => {
+        T[I] = {
+          operator: C[I].operator || "in",
+          values: Array.isArray(C[I].values) ? C[I].values : [],
+          range: C[I].range || null
         };
       }), console.log("[storybook filter] Applied Filters:", T), typeof s == "function" && s({
         filters: T,
-        activeCount: m
+        activeCount: h
       }), r();
     },
     enableReinitialize: !0
   }), k = ce(() => n.reduce((C, T) => {
-    const E = T.key, R = a.values[E];
-    let U = !1;
-    if (R)
+    const I = T.key, E = a.values[I];
+    let V = !1;
+    if (E)
       switch (T.type) {
         case "multiselect":
         case "multiselect-users":
-          U = Array.isArray(R.values) && R.values.length > 0;
+          V = Array.isArray(E.values) && E.values.length > 0;
           break;
         case "date":
-          (R.range && R.range !== "" || Array.isArray(R.values) && R.values.length > 0) && (U = !0);
+          (E.range && E.range !== "" || Array.isArray(E.values) && E.values.length > 0) && (V = !0);
           break;
       }
-    return C[E] = U, C;
-  }, {}), [n, a.values]), m = Object.values(k).filter(Boolean).length, g = async (C, T) => {
+    return C[I] = V, C;
+  }, {}), [n, a.values]), h = Object.values(k).filter(Boolean).length, g = async (C, T) => {
     try {
-      N((R) => ({ ...R, [C]: !0 }));
-      const E = await i(C, T);
-      y((R) => ({ ...R, [C]: E }));
-    } catch (E) {
-      console.error(`Error fetching ${C} users:`, E);
+      x((E) => ({ ...E, [C]: !0 }));
+      const I = await i(C, T);
+      y((E) => ({ ...E, [C]: I }));
+    } catch (I) {
+      console.error(`Error fetching ${C} users:`, I);
     } finally {
-      N((E) => ({ ...E, [C]: !1 }));
+      x((I) => ({ ...I, [C]: !1 }));
     }
   }, $ = (C) => {
-    const T = n[C].key, E = n[C].url;
-    n[C].type === "multiselect-users" && c[T].length === 0 && !b[T] && g(T, E);
+    const T = n[C].key, I = n[C].url;
+    n[C].type === "multiselect-users" && c[T].length === 0 && !v[T] && g(T, I);
   }, L = () => {
     a.resetForm(), y({ createdBy: [], updatedBy: [] }), o();
-  }, M = (C) => {
-    const T = n.find((U) => U.key === C);
+  }, O = (C) => {
+    const T = n.find((V) => V.key === C);
     if (!T) return null;
-    const E = a.values[C] || u[C], R = Array.isArray(E.values) ? E.values : [];
+    const I = a.values[C] || u[C], E = Array.isArray(I.values) ? I.values : [];
     switch (T.type) {
       case "multiselect":
         return /* @__PURE__ */ l("div", { className: "filter-panel-content", children: [
@@ -881,7 +881,7 @@ const _r = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: E.operator || "in",
+                value: I.operator || "in",
                 onChange: (d) => a.setFieldValue(`${C}.operator`, d.target.value),
                 className: "filter-select",
                 children: T.operators.map((d) => /* @__PURE__ */ e("option", { value: d, children: d === "in" ? "Includes" : "Excludes" }, d))
@@ -896,10 +896,10 @@ const _r = {
                   type: "checkbox",
                   id: `select-all-${C}`,
                   className: "filter-checkbox-input",
-                  checked: T.options.length > 0 && R.length === T.options.length,
+                  checked: T.options.length > 0 && E.length === T.options.length,
                   onChange: (d) => {
-                    const h = d.target.checked ? T.options.map((x) => x.value) : [];
-                    a.setFieldValue(`${C}.values`, h);
+                    const m = d.target.checked ? T.options.map((b) => b.value) : [];
+                    a.setFieldValue(`${C}.values`, m);
                   }
                 }
               ),
@@ -919,10 +919,10 @@ const _r = {
                   type: "checkbox",
                   id: `${C}-${d.value}`,
                   className: "filter-checkbox-input",
-                  checked: R.includes(d.value),
-                  onChange: (h) => {
-                    const x = h.target.checked ? [...R, d.value] : R.filter((F) => F !== d.value);
-                    a.setFieldValue(`${C}.values`, x);
+                  checked: E.includes(d.value),
+                  onChange: (m) => {
+                    const b = m.target.checked ? [...E, d.value] : E.filter((D) => D !== d.value);
+                    a.setFieldValue(`${C}.values`, b);
                   }
                 }
               ),
@@ -938,21 +938,21 @@ const _r = {
           ] })
         ] });
       case "multiselect-users":
-        const U = c[C] || [], V = b[C];
+        const V = c[C] || [], q = v[C];
         return /* @__PURE__ */ l("div", { className: "filter-panel-content", children: [
           /* @__PURE__ */ l("div", { className: "filter-operator-group", children: [
             /* @__PURE__ */ e("label", { className: "filter-label", children: "Operator:" }),
             /* @__PURE__ */ e(
               "select",
               {
-                value: E.operator || "in",
+                value: I.operator || "in",
                 onChange: (d) => a.setFieldValue(`${C}.operator`, d.target.value),
                 className: "filter-select",
                 children: T.operators.map((d) => /* @__PURE__ */ e("option", { value: d, children: d === "in" ? "Includes" : "Excludes" }, d))
               }
             )
           ] }),
-          V ? /* @__PURE__ */ e("div", { className: "loading-spinner", children: /* @__PURE__ */ e("div", {}) }) : /* @__PURE__ */ e("div", { className: "filter-checkbox-list", children: U.length > 0 ? /* @__PURE__ */ l(ee, { children: [
+          q ? /* @__PURE__ */ e("div", { className: "loading-spinner", children: /* @__PURE__ */ e("div", {}) }) : /* @__PURE__ */ e("div", { className: "filter-checkbox-list", children: V.length > 0 ? /* @__PURE__ */ l(ee, { children: [
             /* @__PURE__ */ l("div", { className: "filter-checkbox-item", children: [
               /* @__PURE__ */ e(
                 "input",
@@ -960,12 +960,12 @@ const _r = {
                   type: "checkbox",
                   id: `select-all-users-${C}`,
                   className: "filter-checkbox-input",
-                  checked: U.length > 0 && R.length === U.length,
+                  checked: V.length > 0 && E.length === V.length,
                   onChange: (d) => {
-                    const h = d.target.checked ? U.map((x) => x.email) : [];
+                    const m = d.target.checked ? V.map((b) => b.email) : [];
                     a.setFieldValue(
                       `${C}.values`,
-                      h
+                      m
                     );
                   }
                 }
@@ -979,19 +979,19 @@ const _r = {
                 }
               )
             ] }),
-            U.map((d) => /* @__PURE__ */ l("div", { className: "filter-checkbox-item createdby", children: [
+            V.map((d) => /* @__PURE__ */ l("div", { className: "filter-checkbox-item createdby", children: [
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "checkbox",
                   id: `${C}-${d.email}`,
                   className: "filter-checkbox-input",
-                  checked: R.includes(d.email),
-                  onChange: (h) => {
-                    const x = h.target.checked ? [...R, d.email] : R.filter((F) => F !== d.email);
+                  checked: E.includes(d.email),
+                  onChange: (m) => {
+                    const b = m.target.checked ? [...E, d.email] : E.filter((D) => D !== d.email);
                     a.setFieldValue(
                       `${C}.values`,
-                      x
+                      b
                     );
                   }
                 }
@@ -1011,8 +1011,8 @@ const _r = {
           ] }) : /* @__PURE__ */ e("div", { className: "text-center py-4 text-gray-500 text-sm", children: "No users loaded." }) })
         ] });
       case "date":
-        const j = E.values || [], [v, p] = j, f = v && p, w = {
-          startDate: v instanceof Date ? v : /* @__PURE__ */ new Date(),
+        const G = I.values || [], [N, p] = G, f = N && p, w = {
+          startDate: N instanceof Date ? N : /* @__PURE__ */ new Date(),
           // Fallback to today
           endDate: p instanceof Date ? p : /* @__PURE__ */ new Date(),
           // Fallback to today
@@ -1024,7 +1024,7 @@ const _r = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: E.operator,
+                value: I.operator,
                 onChange: (d) => a.setFieldValue(`${C}.operator`, d.target.value),
                 className: "filter-select",
                 children: T.operators.map((d) => /* @__PURE__ */ e("option", { value: d, children: d === "in" ? "Is" : "Is not" }, d))
@@ -1050,10 +1050,10 @@ const _r = {
             {
               ranges: [w],
               onChange: (d) => {
-                const { startDate: h, endDate: x } = d.selection;
+                const { startDate: m, endDate: b } = d.selection;
                 a.setFieldValue(`${C}.values`, [
-                  h,
-                  x
+                  m,
+                  b
                 ]);
               },
               showSelectionPreview: !0,
@@ -1068,11 +1068,11 @@ const _r = {
         return null;
     }
   };
-  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: J, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: r, children: [
+  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: Q, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: r, children: [
     /* @__PURE__ */ e(
       ge,
       {
-        as: J,
+        as: Q,
         enter: "ease-out duration-300",
         enterFrom: "opacity-0",
         enterTo: "opacity-100",
@@ -1085,7 +1085,7 @@ const _r = {
     /* @__PURE__ */ e("div", { className: "filter-modal-container", children: /* @__PURE__ */ e("div", { className: "filter-modal-positioner", children: /* @__PURE__ */ e(
       ge,
       {
-        as: J,
+        as: Q,
         enter: "ease-out duration-300",
         enterFrom: "opacity-0 translate-x-full",
         enterTo: "opacity-100 translate-x-0",
@@ -1140,7 +1140,7 @@ const _r = {
                           animate: { opacity: 1, x: 0 },
                           transition: { duration: 0.3 },
                           className: "h-full",
-                          children: M(C.key)
+                          children: O(C.key)
                         },
                         C.key
                       )
@@ -1169,7 +1169,7 @@ const _r = {
                   children: [
                     "Apply Filters",
                     " ",
-                    m > 0 ? `(${m})` : ""
+                    h > 0 ? `(${h})` : ""
                   ]
                 }
               )
@@ -1179,7 +1179,7 @@ const _r = {
       }
     ) }) })
   ] }) });
-}, W = ({
+}, Y = ({
   label: t,
   id: r,
   type: s = "text",
@@ -1201,7 +1201,7 @@ const _r = {
           id: y,
           type: s,
           ref: i,
-          className: Y("input-field", {
+          className: J("input-field", {
             "input-field--error": !!n,
             "input-field--with-icon": !!o
           }),
@@ -1243,19 +1243,19 @@ const _r = {
   // 'info', 'warning', 'delete'
   loading: c = !1,
   buttonProps: y = {},
-  size: b
+  size: v
   // Add size prop
 }) => {
-  const N = ma[i] || ma.info, a = N.icon, k = () => {
+  const x = ma[i] || ma.info, a = x.icon, k = () => {
     r({ primary: !0, secondary: !1 });
-  }, m = () => {
+  }, h = () => {
     r({ primary: !1, secondary: !0 });
   };
-  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: J, children: /* @__PURE__ */ l(me, { as: "div", className: "modal-dialog", onClose: () => r({}), children: [
+  return /* @__PURE__ */ e(oe, { appear: !0, show: t, as: Q, children: /* @__PURE__ */ l(me, { as: "div", className: "modal-dialog", onClose: () => r({}), children: [
     /* @__PURE__ */ e(
       ge,
       {
-        as: J,
+        as: Q,
         enter: "ease-out duration-300",
         enterFrom: "opacity-0",
         enterTo: "opacity-100",
@@ -1268,16 +1268,16 @@ const _r = {
     /* @__PURE__ */ e("div", { className: "modal-positioner", children: /* @__PURE__ */ e(
       ge,
       {
-        as: J,
+        as: Q,
         enter: "ease-out duration-300",
         enterFrom: "opacity-0 scale-95",
         enterTo: "opacity-100 scale-100",
         leave: "ease-in duration-200",
         leaveFrom: "opacity-100 scale-100",
         leaveTo: "opacity-0 scale-95",
-        children: /* @__PURE__ */ l(Se, { className: b === "large" ? "modal-panel modal-panel--large" : "modal-panel", children: [
+        children: /* @__PURE__ */ l(Se, { className: v === "large" ? "modal-panel modal-panel--large" : "modal-panel", children: [
           /* @__PURE__ */ l("div", { className: "modal-content-wrapper", children: [
-            /* @__PURE__ */ e("div", { className: `modal-icon-container ${N.iconClass}`, children: /* @__PURE__ */ e(a, { size: 24, "aria-hidden": "true" }) }),
+            /* @__PURE__ */ e("div", { className: `modal-icon-container ${x.iconClass}`, children: /* @__PURE__ */ e(a, { size: 24, "aria-hidden": "true" }) }),
             /* @__PURE__ */ l("div", { className: "modal-text-content", children: [
               /* @__PURE__ */ e(_e, { as: "h3", className: "modal-title", children: s }),
               /* @__PURE__ */ e("div", { className: "modal-description", children: o })
@@ -1285,15 +1285,15 @@ const _r = {
           ] }),
           (n || u) && /* @__PURE__ */ l("div", { className: "modal-footer", children: [
             u && /* @__PURE__ */ e(
-              Z,
+              H,
               {
-                onClick: m,
+                onClick: h,
                 label: u,
                 category: "secondary"
               }
             ),
             n && /* @__PURE__ */ e(
-              Z,
+              H,
               {
                 onClick: k,
                 label: n,
@@ -1314,13 +1314,13 @@ const _r = {
   itemsPerPageOptions: u = [10, 15, 20]
 }) => {
   const i = Math.ceil(r / s), [c, y] = B(t);
-  Q(() => {
+  X(() => {
     y(t);
   }, [t]);
-  const b = Math.min((t - 1) * s + 1, r), N = Math.min(t * s, r), a = (k) => {
+  const v = Math.min((t - 1) * s + 1, r), x = Math.min(t * s, r), a = (k) => {
     k.preventDefault();
-    let m = parseInt(c, 10);
-    isNaN(m) || m < 1 ? m = 1 : m > i && (m = i), y(m), m !== t && o(m);
+    let h = parseInt(c, 10);
+    isNaN(h) || h < 1 ? h = 1 : h > i && (h = i), y(h), h !== t && o(h);
   };
   return /* @__PURE__ */ l("div", { className: "pagination-container", children: [
     /* @__PURE__ */ l("div", { className: "pagination-left", children: [
@@ -1336,9 +1336,9 @@ const _r = {
         }
       ),
       /* @__PURE__ */ l("span", { className: "pagination-info", children: [
-        b,
+        v,
         "-",
-        N,
+        x,
         " of ",
         r,
         " items"
@@ -1422,7 +1422,7 @@ const _r = {
         ze.Option,
         {
           value: i.value,
-          className: ({ active: c, checked: y }) => Y("radiogroup-option", {
+          className: ({ active: c, checked: y }) => J("radiogroup-option", {
             "radiogroup-option--active": c,
             "radiogroup-option--checked": y,
             "radiogroup-option--error": !!n
@@ -1458,19 +1458,19 @@ const _r = {
   ...i
 }) => {
   const [c, y] = B(t);
-  Q(() => {
+  X(() => {
     y(t);
   }, [t]);
-  const b = K(
+  const v = K(
     vr((a) => {
       r?.(a);
     }, s),
     [s, r]
   );
-  Q(() => (c !== t && b(c), () => {
-    b.cancel();
-  }), [c, b, t]);
-  const N = (a) => {
+  X(() => (c !== t && v(c), () => {
+    v.cancel();
+  }), [c, v, t]);
+  const x = (a) => {
     y(a.target.value);
   };
   return /* @__PURE__ */ l("div", { className: `search-bar-wrapper ${u}`, children: [
@@ -1485,7 +1485,7 @@ const _r = {
         type: "search",
         name: "search",
         value: c,
-        onChange: N,
+        onChange: x,
         ...i
       }
     )
@@ -1504,16 +1504,16 @@ const _r = {
   // From RHF's <Controller>
   showSearch: y = !0
 }) => {
-  const [b, N] = B(""), a = b === "" ? o : o.filter(
-    (m) => m.label.toLowerCase().includes(b.toLowerCase())
-  ), k = o.find((m) => r?.id ? m.id === r.id : m.id === r || m.value === r);
-  return /* @__PURE__ */ e(X, { value: r, onChange: s, disabled: u, children: /* @__PURE__ */ l("div", { className: "select-wrapper", ref: c, children: [
+  const [v, x] = B(""), a = v === "" ? o : o.filter(
+    (h) => h.label.toLowerCase().includes(v.toLowerCase())
+  ), k = o.find((h) => r?.id ? h.id === r.id : h.id === r || h.value === r);
+  return /* @__PURE__ */ e(Z, { value: r, onChange: s, disabled: u, children: /* @__PURE__ */ l("div", { className: "select-wrapper", ref: c, children: [
     t && /* @__PURE__ */ e("label", { className: "select-label", children: t }),
     /* @__PURE__ */ l("div", { className: "select-button-container", children: [
       /* @__PURE__ */ l(
         cr,
         {
-          className: Y("select-button", {
+          className: J("select-button", {
             "select-button--error": !!i
           }),
           children: [
@@ -1532,24 +1532,24 @@ const _r = {
             y && /* @__PURE__ */ e("div", { className: "search-input-wrapper", children: /* @__PURE__ */ e(
               he,
               {
-                value: b,
-                onDebouncedChange: N,
+                value: v,
+                onDebouncedChange: x,
                 placeholder: "Search..."
               }
             ) }),
-            /* @__PURE__ */ e("div", { className: "select-options-list", children: a.length === 0 && b !== "" ? /* @__PURE__ */ e("div", { className: "no-results", children: "No results found." }) : a.map((m) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "select-options-list", children: a.length === 0 && v !== "" ? /* @__PURE__ */ e("div", { className: "no-results", children: "No results found." }) : a.map((h) => /* @__PURE__ */ e(
               ur,
               {
                 className: ({ active: g }) => `select-option ${g ? "active" : ""}`,
-                value: m,
+                value: h,
                 children: ({ selected: g }) => /* @__PURE__ */ l(ee, { children: [
                   /* @__PURE__ */ l("div", { className: "option-content", children: [
-                    m.icon && /* @__PURE__ */ e(m.icon, { className: "option-icon" }),
+                    h.icon && /* @__PURE__ */ e(h.icon, { className: "option-icon" }),
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: `option-label ${g ? "selected" : ""}`,
-                        children: m.label
+                        children: h.label
                       }
                     )
                   ] }),
@@ -1562,7 +1562,7 @@ const _r = {
                   ) : null
                 ] })
               },
-              m.id || m.value || m.label
+              h.id || h.value || h.label
             )) })
           ] })
         }
@@ -1572,7 +1572,7 @@ const _r = {
   ] }) });
 }, Hr = () => {
   const [t, r] = B(window.location.pathname);
-  return Q(() => {
+  return X(() => {
     const s = () => {
       r(window.location.pathname);
     };
@@ -1587,17 +1587,17 @@ const _r = {
   return null;
 }, Va = ({ item: t, isCollapsed: r, level: s = 0 }) => {
   const { pathname: o } = Hr(), n = t.href || t.url || t.path, [u, i] = B(!1), c = t.icon;
-  Q(() => {
+  X(() => {
     na([t], o) && i(!0);
   }, [t, o]);
-  const y = o === n, b = !y && !!na([t], o), N = (a) => {
+  const y = o === n, v = !y && !!na([t], o), x = (a) => {
     a.preventDefault(), i(!u);
   };
   return /* @__PURE__ */ l(
     "div",
     {
-      className: Y("nav-item-container", {
-        "nav-item-container--parent-active": b,
+      className: J("nav-item-container", {
+        "nav-item-container--parent-active": v,
         [`nav-item-container--level-${s}`]: s > 0
       }),
       children: [
@@ -1607,7 +1607,7 @@ const _r = {
             href: n,
             target: t.target,
             rel: t.target === "_blank" ? "noopener noreferrer" : void 0,
-            className: Y("nav-item", {
+            className: J("nav-item", {
               "nav-item--active": y,
               "nav-item--collapsed": r
             }),
@@ -1619,13 +1619,13 @@ const _r = {
                 "button",
                 {
                   className: "nav-chevron-button",
-                  onClick: N,
+                  onClick: x,
                   "aria-expanded": u,
                   "aria-label": u ? "Collapse menu" : "Expand menu",
                   children: /* @__PURE__ */ e(
                     wa,
                     {
-                      className: Y("nav-chevron", {
+                      className: J("nav-chevron", {
                         "nav-chevron--open": u
                       })
                     }
@@ -1638,7 +1638,7 @@ const _r = {
         t.children && /* @__PURE__ */ e(
           "div",
           {
-            className: Y("sub-menu", {
+            className: J("sub-menu", {
               "sub-menu--open": u,
               "sub-menu--collapsed": r
             }),
@@ -1678,7 +1678,7 @@ const _r = {
   /* @__PURE__ */ l(
     "aside",
     {
-      className: Y("sidebar", {
+      className: J("sidebar", {
         "sidebar--collapsed": r,
         "sidebar--mobile-open": o
       }),
@@ -1736,7 +1736,7 @@ const _r = {
   className: s,
   ...o
 }) => {
-  const n = Y(
+  const n = J(
     "spinner",
     `spinner--size-${t}`,
     `spinner--color-${r}`,
@@ -1776,11 +1776,11 @@ const _r = {
   // ✅ New prop to control visibility
   ...c
 }) => {
-  const y = r || c.name, [b, N] = B(
+  const y = r || c.name, [v, x] = B(
     c.value?.length || c.defaultValue?.length || 0
-  ), a = (m) => {
-    N(m.target.value.length), c.onChange && c.onChange(m);
-  }, k = u - b;
+  ), a = (h) => {
+    x(h.target.value.length), c.onChange && c.onChange(h);
+  }, k = u - v;
   return /* @__PURE__ */ l("div", { className: `textarea-wrapper ${o || ""}`, children: [
     /* @__PURE__ */ l("div", { className: "textarea-header", children: [
       t && /* @__PURE__ */ e("label", { htmlFor: y, className: "textarea-label", children: t }),
@@ -1794,7 +1794,7 @@ const _r = {
       {
         id: y,
         ref: n,
-        className: Y("textarea-field", {
+        className: J("textarea-field", {
           "textarea-field--error": !!s
         }),
         maxLength: u,
@@ -1819,7 +1819,7 @@ const _r = {
       {
         checked: r,
         onChange: s,
-        className: Y("switch-element", {
+        className: J("switch-element", {
           // Renamed from switch-wrapper
           "switch-element--error": !!n
         }),
@@ -1881,21 +1881,21 @@ const _r = {
   title: i,
   description: c,
   showProgress: y = !0,
-  closeOnOverlayClick: b = !0
+  closeOnOverlayClick: v = !0
 }) => {
-  const N = s[o], a = Object.keys(s), k = a.indexOf(o), m = (k + 1) / a.length * 100, g = k > 0 && u.onBack;
-  return /* @__PURE__ */ e(oe, { show: t, as: J, children: /* @__PURE__ */ l(
+  const x = s[o], a = Object.keys(s), k = a.indexOf(o), h = (k + 1) / a.length * 100, g = k > 0 && u.onBack;
+  return /* @__PURE__ */ e(oe, { show: t, as: Q, children: /* @__PURE__ */ l(
     me,
     {
       as: "div",
       className: "wizard-dialog",
-      onClose: b ? r : () => {
+      onClose: v ? r : () => {
       },
       children: [
         /* @__PURE__ */ e(
           ge,
           {
-            as: J,
+            as: Q,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
             enterTo: "opacity-100",
@@ -1908,7 +1908,7 @@ const _r = {
         /* @__PURE__ */ e("div", { className: "wizard-container", children: /* @__PURE__ */ e("div", { className: "wizard-positioner", children: /* @__PURE__ */ e(
           ge,
           {
-            as: J,
+            as: Q,
             enter: "transform transition ease-in-out duration-500",
             enterFrom: "translate-x-full",
             enterTo: "translate-x-0",
@@ -1924,7 +1924,7 @@ const _r = {
                       onClick: u.onBack,
                       className: "wizard-back-button",
                       "aria-label": "Go back to previous step",
-                      children: /* @__PURE__ */ e($t, { size: 20 })
+                      children: /* @__PURE__ */ e(Ft, { size: 20 })
                     }
                   ),
                   /* @__PURE__ */ l("div", { className: "wizard-header-text", children: [
@@ -1946,7 +1946,7 @@ const _r = {
                 "div",
                 {
                   className: "wizard-progress-bar",
-                  style: { width: `${m}%` }
+                  style: { width: `${h}%` }
                 }
               ) }),
               /* @__PURE__ */ e("div", { className: "wizard-body", children: /* @__PURE__ */ e(
@@ -1970,7 +1970,7 @@ const _r = {
                       },
                       className: "wizard-step-motion-wrapper",
                       style: { overflowX: "hidden" },
-                      children: N && /* @__PURE__ */ e(N, { ...u })
+                      children: x && /* @__PURE__ */ e(x, { ...u })
                     },
                     o
                   )
@@ -1993,7 +1993,7 @@ const _r = {
   // A clearer prop name
   ...c
 }) => {
-  const y = Y(
+  const y = J(
     "page-layout",
     {
       "page-layout--with-footer": r,
@@ -2005,7 +2005,7 @@ const _r = {
     /* @__PURE__ */ e("div", { className: "page-layout-content", children: t }),
     r && /* @__PURE__ */ e("footer", { className: "page-layout-footer", children: s || /* @__PURE__ */ l("div", { className: "footer-actions", children: [
       u?.show && /* @__PURE__ */ e(
-        Z,
+        H,
         {
           category: "secondary",
           label: u.label || "Tertiary",
@@ -2013,7 +2013,7 @@ const _r = {
         }
       ),
       n?.show && /* @__PURE__ */ e(
-        Z,
+        H,
         {
           category: "secondary",
           label: n.label || "Cancel",
@@ -2021,7 +2021,7 @@ const _r = {
         }
       ),
       o?.show && /* @__PURE__ */ e(
-        Z,
+        H,
         {
           category: "primary",
           label: o.label || "Save",
@@ -2056,7 +2056,7 @@ const _r = {
 ] }), an = ({
   options: t = [],
   onSelect: r,
-  triggerIcon: s = Ft
+  triggerIcon: s = $t
 }) => {
   const { refs: o, floatingStyles: n } = Ta({
     whileElementsMounted: Ia,
@@ -2067,7 +2067,7 @@ const _r = {
     /* @__PURE__ */ e(gr, { children: /* @__PURE__ */ e(
       oe,
       {
-        as: J,
+        as: Q,
         enter: "transition ease-out duration-100",
         enterFrom: "transform opacity-0 scale-95",
         enterTo: "transform opacity-100 scale-100",
@@ -2293,41 +2293,41 @@ function dn({
     // timeout: 20000,
   });
   s.interceptors.response.use(
-    (b) => b?.data ?? {
-      message: b?.statusText || "Request succeeded"
+    (v) => v?.data ?? {
+      message: v?.statusText || "Request succeeded"
     },
-    (b) => {
-      const N = cn(b), a = N.status;
-      return t && (a === 401 || a === 403) && (window.location.href.includes("/login") || (window.historyPath = window.location.pathname, localStorage.clear(), sessionStorage.clear(), window.location.href = "/login")), Promise.reject(N);
+    (v) => {
+      const x = cn(v), a = x.status;
+      return t && (a === 401 || a === 403) && (window.location.href.includes("/login") || (window.historyPath = window.location.pathname, localStorage.clear(), sessionStorage.clear(), window.location.href = "/login")), Promise.reject(x);
     }
   );
-  function o({ open: b = !1, customHeader: N = {} } = {}) {
-    if (b) {
+  function o({ open: v = !1, customHeader: x = {} } = {}) {
+    if (v) {
       const { Authorization: a, ...k } = ha();
       return {
-        headers: { ...k, ...r, ...N }
+        headers: { ...k, ...r, ...x }
       };
     }
-    return { headers: { ...ha(), ...N } };
+    return { headers: { ...ha(), ...x } };
   }
-  async function n(b, N, a = !1, k = {}) {
-    return s.get(b, {
-      params: N,
+  async function n(v, x, a = !1, k = {}) {
+    return s.get(v, {
+      params: x,
       ...o({ open: a, customHeader: k })
     });
   }
-  async function u(b, N, a = !1, k = {}) {
-    const m = { ...o({ open: a, customHeader: k }) };
-    return N !== void 0 && (m.data = N), s.delete(b, m);
+  async function u(v, x, a = !1, k = {}) {
+    const h = { ...o({ open: a, customHeader: k }) };
+    return x !== void 0 && (h.data = x), s.delete(v, h);
   }
-  async function i(b, N = {}, a = !1, k = {}) {
-    return s.post(b, N, o({ open: a, customHeader: k }));
+  async function i(v, x = {}, a = !1, k = {}) {
+    return s.post(v, x, o({ open: a, customHeader: k }));
   }
-  async function c(b, N = {}, a = !1, k = {}) {
-    return s.put(b, N, o({ open: a, customHeader: k }));
+  async function c(v, x = {}, a = !1, k = {}) {
+    return s.put(v, x, o({ open: a, customHeader: k }));
   }
-  async function y(b, N = {}, a = !1, k = {}) {
-    return s.patch(b, N, o({ open: a, customHeader: k }));
+  async function y(v, x = {}, a = !1, k = {}) {
+    return s.patch(v, x, o({ open: a, customHeader: k }));
   }
   return {
     instance: s,
@@ -2426,7 +2426,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   }
 }, oa = (t, r) => {
   const [s, o] = B(t);
-  return Q(
+  return X(
     () => {
       const n = Cr(() => {
         o(t);
@@ -2461,15 +2461,15 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       className: "flex items-center justify-between p-3 border border-gray-300 rounded-lg hover:bg-gray-50 hover:cursor-pointer transition-colors duration-150",
       children: [
         /* @__PURE__ */ l("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center", children: n.map((b, N) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex items-center", children: n.map((v, x) => /* @__PURE__ */ e(
             "img",
             {
-              src: b.avatarUrl || `https://avatar.vercel.sh/${b.name}.svg?text=${b?.name?.charAt(0) || "U"}`,
-              alt: b.name,
-              className: `w-10 h-10 rounded-full border-2 border-white ${N > 0 ? "-ml-4" : ""}`,
-              style: { zIndex: N }
+              src: v.avatarUrl || `https://avatar.vercel.sh/${v.name}.svg?text=${v?.name?.charAt(0) || "U"}`,
+              alt: v.name,
+              className: `w-10 h-10 rounded-full border-2 border-white ${x > 0 ? "-ml-4" : ""}`,
+              style: { zIndex: x }
             },
-            b.id || N
+            v.id || x
           )) }),
           /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-800 truncate", children: y })
         ] }),
@@ -2497,80 +2497,80 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   },
   isChanged: c = !1
 }) => {
-  const [y, b] = B(ga[0]), [N, a] = B(""), k = oa(N, 400), [m, g] = B([]), [$, L] = B(/* @__PURE__ */ new Set()), [M, C] = B(!1), [T, E] = B(ya[0]), {
-    control: R,
-    handleSubmit: U,
-    watch: V,
-    formState: { errors: j, isSubmitting: v }
+  const [y, v] = B(ga[0]), [x, a] = B(""), k = oa(x, 400), [h, g] = B([]), [$, L] = B(/* @__PURE__ */ new Set()), [O, C] = B(!1), [T, I] = B(ya[0]), {
+    control: E,
+    handleSubmit: V,
+    watch: q,
+    formState: { errors: G, isSubmitting: N }
   } = zt({
     defaultValues: { pendingInvites: [] },
     resolver: Lt(yn)
   }), { fields: p, append: f, remove: w, update: d } = Pt({
-    control: R,
+    control: E,
     name: "pendingInvites"
-  }), h = V("pendingInvites");
-  Q(() => {
-    k.length > 1 ? (C(!0), hn(y.name, k).then((S) => {
-      g(S);
-    }).catch((S) => console.error("Search failed:", S)).finally(() => C(!1))) : (g([]), L(/* @__PURE__ */ new Set()));
+  }), m = q("pendingInvites");
+  X(() => {
+    k.length > 1 ? (C(!0), hn(y.name, k).then((F) => {
+      g(F);
+    }).catch((F) => console.error("Search failed:", F)).finally(() => C(!1))) : (g([]), L(/* @__PURE__ */ new Set()));
   }, [k, y]);
-  const x = (S) => {
-    L((I) => {
-      const O = new Set(I);
-      return O.has(S) ? O.delete(S) : O.add(S), O;
+  const b = (F) => {
+    L((z) => {
+      const U = new Set(z);
+      return U.has(F) ? U.delete(F) : U.add(F), U;
     });
-  }, F = () => {
-    m.filter((S) => $.has(S.id)).forEach((S) => {
-      p.find((I) => I.id === S.id) || f({ ...S, permission: T.name });
+  }, D = () => {
+    h.filter((F) => $.has(F.id)).forEach((F) => {
+      p.find((z) => z.id === F.id) || f({ ...F, permission: T.name });
     }), L(/* @__PURE__ */ new Set()), a("");
-  }, z = (S) => {
-    E(S), p.forEach(
-      (I, O) => d(O, { ...p[O], permission: S.name })
+  }, R = (F) => {
+    I(F), p.forEach(
+      (z, U) => d(U, { ...p[U], permission: F.name })
     );
-  }, q = async (S) => {
+  }, j = async (F) => {
     try {
       if (n === se.DRIVE) {
-        const I = {
+        const z = {
           entity: t,
-          userGroupRolesObj: S.pendingInvites.map((O) => ({
-            id: O.id,
-            permission: O.permission,
-            type: O.type.toLowerCase()
+          userGroupRolesObj: F.pendingInvites.map((U) => ({
+            id: U.id,
+            permission: U.permission,
+            type: U.type.toLowerCase()
           }))
         };
-        i(I, o);
+        i(z, o);
       } else if (n === se.INTEREST) {
-        const I = S.pendingInvites.map((O) => ({
-          identity: O.id,
-          type: O.type.toLowerCase(),
+        const z = F.pendingInvites.map((U) => ({
+          identity: U.id,
+          type: U.type.toLowerCase(),
           opt: !0,
           lock: !1,
           moderator: !1,
-          userName: O.name,
+          userName: U.name,
           interestId: t?.data?.id
         }));
-        i(I, o);
+        i(z, o);
       } else if (n === se.ARTICLE) {
-        const I = {
+        const z = {
           entity: t,
-          userGroupRolesObj: S.pendingInvites.map((O) => ({
-            id: O.id,
-            permission: O.permission,
-            type: O.type.toLowerCase()
+          userGroupRolesObj: F.pendingInvites.map((U) => ({
+            id: U.id,
+            permission: U.permission,
+            type: U.type.toLowerCase()
           }))
         };
-        i(I, o);
+        i(z, o);
       } else
-        i(S, o);
+        i(F, o);
       setTimeout(() => {
         s();
       }, 1e3);
-    } catch (I) {
-      throw console.error("Failed to submit invites:", I), I;
+    } catch (z) {
+      throw console.error("Failed to submit invites:", z), z;
     }
-  }, D = (S) => {
-    const I = o[y.code].find((O) => O.name === S.name && O.permission !== "remove") || h.find((O) => O.name === S.name);
-    return I ? `${I.permission}` : "";
+  }, S = (F) => {
+    const z = o[y.code].find((U) => U.name === F.name && U.permission !== "remove") || m.find((U) => U.name === F.name);
+    return z ? `${z.permission}` : "";
   }, A = () => {
     switch (n) {
       case se.DRIVE:
@@ -2582,8 +2582,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       default:
         return "Add User, Groups or Roles test";
     }
-  };
-  return ce(() => $.size === 0 && !c, [$, c]), /* @__PURE__ */ l("div", { className: "flex flex-col h-full bg-white", children: [
+  }, M = ce(() => (console.log("InviteFlow - isChanged:", c, "pendingInvites.length:", m.length), m.length === 0 && !c), [m.length, c]);
+  return /* @__PURE__ */ l("div", { className: "flex flex-col h-full bg-white", children: [
     /* @__PURE__ */ l("header", { className: "flex items-center justify-between p-4 border-b border-gray-300 flex-shrink-0", children: [
       /* @__PURE__ */ e(me.Title, { className: " text-gray-900 !mb-0 text-lg font-semibold", children: A() }),
       /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
@@ -2605,15 +2605,15 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       (n === se.DRIVE || u) && /* @__PURE__ */ e(
         gn,
         {
-          users: o.users.filter((S) => S.permission !== "remove"),
-          groups: o.groups.filter((S) => S.permission !== "remove"),
-          roles: o.roles.filter((S) => S.permission !== "remove"),
+          users: o.users.filter((F) => F.permission !== "remove"),
+          groups: o.groups.filter((F) => F.permission !== "remove"),
+          roles: o.roles.filter((F) => F.permission !== "remove"),
           onClick: r
         }
       ),
       /* @__PURE__ */ l("div", { className: "relative grid grid-cols-3 gap-2 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "col-span-1", children: /* @__PURE__ */ e(X, { value: y, onChange: b, children: /* @__PURE__ */ l("div", { className: "relative", children: [
-          /* @__PURE__ */ l(X.Button, { className: "relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
+        /* @__PURE__ */ e("div", { className: "col-span-1", children: /* @__PURE__ */ e(Z, { value: y, onChange: v, children: /* @__PURE__ */ l("div", { className: "relative", children: [
+          /* @__PURE__ */ l(Z.Button, { className: "relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
             /* @__PURE__ */ l("span", { className: "flex items-center", children: [
               /* @__PURE__ */ e(y.icon, { className: "h-5 w-5 text-gray-400 mr-2" }),
               /* @__PURE__ */ e("span", { className: "truncate", children: y.name })
@@ -2623,35 +2623,35 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
           /* @__PURE__ */ e(
             oe,
             {
-              as: J,
+              as: Q,
               leave: "transition ease-in duration-100",
               leaveFrom: "opacity-100",
               leaveTo: "opacity-0",
-              children: /* @__PURE__ */ e(X.Options, { className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: ga.map((S) => /* @__PURE__ */ e(
-                X.Option,
+              children: /* @__PURE__ */ e(Z.Options, { className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: ga.map((F) => /* @__PURE__ */ e(
+                Z.Option,
                 {
-                  value: S,
-                  className: ({ active: I }) => `${I ? "text-white bg-blue-600" : "text-gray-900"} hover:cursor-pointer select-none relative py-2 pl-10`,
-                  children: ({ selected: I }) => /* @__PURE__ */ l(ee, { children: [
+                  value: F,
+                  className: ({ active: z }) => `${z ? "text-white bg-blue-600" : "text-gray-900"} hover:cursor-pointer select-none relative py-2 pl-10`,
+                  children: ({ selected: z }) => /* @__PURE__ */ l(ee, { children: [
                     /* @__PURE__ */ l(
                       "span",
                       {
-                        className: `${I ? "font-medium" : "font-normal"} flex items-center`,
+                        className: `${z ? "font-medium" : "font-normal"} flex items-center`,
                         children: [
                           /* @__PURE__ */ e(
-                            S.icon,
+                            F.icon,
                             {
-                              className: `h-5 w-5 mr-2 ${I ? "text-white" : "text-gray-400"}`
+                              className: `h-5 w-5 mr-2 ${z ? "text-white" : "text-gray-400"}`
                             }
                           ),
-                          S.name
+                          F.name
                         ]
                       }
                     ),
-                    I && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-white", children: /* @__PURE__ */ e(ta, { className: "h-5 w-5" }) })
+                    z && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-white", children: /* @__PURE__ */ e(ta, { className: "h-5 w-5" }) })
                   ] })
                 },
-                S.id
+                F.id
               )) })
             }
           )
@@ -2660,11 +2660,11 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
           he,
           {
             placeholder: `Search by ${y.name.toLowerCase()}...`,
-            onDebouncedChange: (S) => a(S),
-            value: N
+            onDebouncedChange: (F) => a(F),
+            value: x
           }
         ) }),
-        /* @__PURE__ */ e(be, { children: (m?.length > 0 || M) && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(be, { children: (h?.length > 0 || O) && /* @__PURE__ */ e(
           ne.div,
           {
             initial: { opacity: 0, y: -10 },
@@ -2672,41 +2672,41 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
             exit: { opacity: 0, y: -10 },
             transition: { duration: 0.2 },
             className: "absolute top-full mt-2 w-full col-span-3 bg-white border border-gray-300 rounded-lg shadow-lg z-10",
-            children: M ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500", children: "Loading..." }) : /* @__PURE__ */ l(ee, { children: [
-              /* @__PURE__ */ e("div", { className: "max-h-60 overflow-y-auto p-2 space-y-1", children: m.map((S) => {
-                const I = D(S);
+            children: O ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500", children: "Loading..." }) : /* @__PURE__ */ l(ee, { children: [
+              /* @__PURE__ */ e("div", { className: "max-h-60 overflow-y-auto p-2 space-y-1", children: h.map((F) => {
+                const z = S(F);
                 return /* @__PURE__ */ l(
                   "div",
                   {
-                    onClick: () => I ? null : x(S.id),
-                    className: `flex items-center gap-3 p-2 rounded-md hover:bg-blue-50 ${I ? " hover:cursor-not-allowed" : "hover:cursor-pointer"}`,
+                    onClick: () => z ? null : b(F.id),
+                    className: `flex items-center gap-3 p-2 rounded-md hover:bg-blue-50 ${z ? " hover:cursor-not-allowed" : "hover:cursor-pointer"}`,
                     children: [
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "checkbox",
-                          checked: $.has(S.id),
+                          checked: $.has(F.id),
                           readOnly: !0,
                           className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
-                          disabled: !!I
+                          disabled: !!z
                         }
                       ),
                       /* @__PURE__ */ e(
                         "img",
                         {
-                          src: S.avatarUrl || `https://avatar.vercel.sh/${S.name}.svg?text=${S.name.charAt(0)}`,
-                          alt: S.name,
+                          src: F.avatarUrl || `https://avatar.vercel.sh/${F.name}.svg?text=${F.name.charAt(0)}`,
+                          alt: F.name,
                           className: "w-8 h-8 rounded-full"
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: "text-md font-medium text-gray-800 truncate", children: S.name }),
-                      I ? /* @__PURE__ */ l(ee, { children: [
-                        /* @__PURE__ */ e("span", { className: "text-sm px-[12px] py-[2px] border border-dashed rounded-xl bg-teal-100 text-teal-700", children: I }),
+                      /* @__PURE__ */ e("span", { className: "text-md font-medium text-gray-800 truncate", children: F.name }),
+                      z ? /* @__PURE__ */ l(ee, { children: [
+                        /* @__PURE__ */ e("span", { className: "text-sm px-[12px] py-[2px] border border-dashed rounded-xl bg-teal-100 text-teal-700", children: z }),
                         /* @__PURE__ */ e("span", { className: "text-sm text-gray-400", children: "Already added" })
                       ] }) : ""
                     ]
                   },
-                  S.id
+                  F.id
                 );
               }) }),
               /* @__PURE__ */ l("div", { className: "flex justify-end gap-2 p-2 border-t border-gray-300", children: [
@@ -2721,7 +2721,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: F,
+                    onClick: D,
                     disabled: $.size === 0,
                     className: "px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed hover:cursor-pointer",
                     children: "Add"
@@ -2746,12 +2746,12 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 ")"
               ] }),
               n === se.DRIVE && /* @__PURE__ */ e(
-                X,
+                Z,
                 {
                   value: T,
-                  onChange: z,
+                  onChange: R,
                   children: /* @__PURE__ */ l("div", { className: "relative", children: [
-                    /* @__PURE__ */ l(X.Button, { className: "relative w-full border border-gray-300 bg-white rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
+                    /* @__PURE__ */ l(Z.Button, { className: "relative w-full border border-gray-300 bg-white rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
                       /* @__PURE__ */ l("span", { className: "flex items-center", children: [
                         /* @__PURE__ */ e(T.icon, { className: "h-5 w-5 text-gray-400 mr-2" }),
                         /* @__PURE__ */ l("span", { className: "truncate", children: [
@@ -2764,33 +2764,33 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                     /* @__PURE__ */ e(
                       oe,
                       {
-                        as: J,
+                        as: Q,
                         leave: "transition ease-in duration-100",
                         leaveFrom: "opacity-100",
                         leaveTo: "opacity-0",
-                        children: /* @__PURE__ */ e(X.Options, { className: "absolute z-10 mt-1 w-auto min-w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: ya.map((S) => /* @__PURE__ */ e(
-                          X.Option,
+                        children: /* @__PURE__ */ e(Z.Options, { className: "absolute z-10 mt-1 w-auto min-w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: ya.map((F) => /* @__PURE__ */ e(
+                          Z.Option,
                           {
-                            value: S,
-                            className: ({ active: I }) => `${I ? "text-white bg-blue-600" : "text-gray-900"} hover:cursor-pointer select-none relative py-2 pl-10`,
-                            children: ({ selected: I, active: O }) => /* @__PURE__ */ l(ee, { children: [
+                            value: F,
+                            className: ({ active: z }) => `${z ? "text-white bg-blue-600" : "text-gray-900"} hover:cursor-pointer select-none relative py-2 pl-10`,
+                            children: ({ selected: z, active: U }) => /* @__PURE__ */ l(ee, { children: [
                               /* @__PURE__ */ l(
                                 "span",
                                 {
-                                  className: `${I ? "font-medium" : "font-normal"} flex items-center`,
+                                  className: `${z ? "font-medium" : "font-normal"} flex items-center`,
                                   children: [
                                     /* @__PURE__ */ e(
-                                      S.icon,
+                                      F.icon,
                                       {
-                                        className: `h-5 w-5 mr-2 ${O ? "text-white" : "text-gray-400"}`
+                                        className: `h-5 w-5 mr-2 ${U ? "text-white" : "text-gray-400"}`
                                       }
                                     ),
                                     "Can ",
-                                    S.name
+                                    F.name
                                   ]
                                 }
                               ),
-                              I && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600", children: /* @__PURE__ */ e(
+                              z && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600", children: /* @__PURE__ */ e(
                                 ta,
                                 {
                                   className: "h-5 w-5",
@@ -2799,7 +2799,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                               ) })
                             ] })
                           },
-                          S.id
+                          F.id
                         )) })
                       }
                     )
@@ -2807,7 +2807,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(be, { children: p.map((S, I) => /* @__PURE__ */ l(
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(be, { children: p.map((F, z) => /* @__PURE__ */ l(
               ne.div,
               {
                 layout: !0,
@@ -2821,21 +2821,21 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                     /* @__PURE__ */ e(
                       "img",
                       {
-                        src: S.avatarUrl || `https://avatar.vercel.sh/${S.name}.svg?text=${S.name.charAt(0)}`,
+                        src: F.avatarUrl || `https://avatar.vercel.sh/${F.name}.svg?text=${F.name.charAt(0)}`,
                         className: "w-8 h-8 rounded-full flex-shrink-0"
                       }
                     ),
-                    /* @__PURE__ */ e("span", { className: "font-medium text-sm text-gray-800 truncate", children: S.name })
+                    /* @__PURE__ */ e("span", { className: "font-medium text-sm text-gray-800 truncate", children: F.name })
                   ] }),
                   /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
                     n === se.DRIVE && /* @__PURE__ */ l("span", { className: "text-sm text-gray-500", children: [
                       "can ",
-                      S.permission
+                      F.permission
                     ] }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: () => w(I),
+                        onClick: () => w(z),
                         className: "text-gray-400 hover:text-red-500 hover:cursor-pointer",
                         children: /* @__PURE__ */ e(qe, { className: "h-5 w-5" })
                       }
@@ -2843,7 +2843,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                   ] })
                 ]
               },
-              S.id
+              F.id
             )) }) })
           ]
         }
@@ -2851,9 +2851,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     ] }),
     /* @__PURE__ */ e("footer", { className: "p-4 border-t border-gray-300 flex-shrink-0", children: /* @__PURE__ */ l("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ l("p", { className: "text-sm text-gray-600", children: [
-        h.length,
+        m.length,
         " invitation",
-        h.length !== 1 ? "s" : "",
+        m.length !== 1 ? "s" : "",
         " selected"
       ] }),
       /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
@@ -2868,10 +2868,10 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => U(q)(),
-            disabled: v || h.length === 0 && !c,
+            onClick: () => V(j)(),
+            disabled: N || M,
             className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300 disabled:cursor-not-allowed",
-            children: v ? "Inviting..." : n === se.DRIVE ? "Send Invites" : "Add"
+            children: N ? "Inviting..." : n === se.DRIVE ? "Send Invites" : "Add"
           }
         )
       ] })
@@ -2888,21 +2888,21 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     middleware: [Aa(8), Ea(), Ra({ padding: 8 })],
     whileElementsMounted: Ia,
     placement: "bottom-end"
-  }), y = Nr(c), b = xr(c), { getReferenceProps: N, getFloatingProps: a } = kr([
+  }), y = Nr(c), v = xr(c), { getReferenceProps: x, getFloatingProps: a } = kr([
     y,
-    b
+    v
   ]), k = Ke.find((g) => g.name === t.permission || g.value === t.permission) || Ke[0];
   return (
     // FIX: The <Listbox> component now wraps both the button and the portal.
     // This provides the necessary context for both children.
-    /* @__PURE__ */ l(X, { value: k, onChange: (g) => {
+    /* @__PURE__ */ l(Z, { value: k, onChange: (g) => {
       s(g), n(!1);
     }, children: [
       /* @__PURE__ */ l(
-        X.Button,
+        Z.Button,
         {
           ref: u.setReference,
-          ...N(),
+          ...x(),
           className: "relative min-w-[120px] text-left text-sm p-2 border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-opacity-75 hover:cursor-pointer",
           children: [
             /* @__PURE__ */ e("span", { className: "block truncate", children: t.permission }),
@@ -2913,7 +2913,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       /* @__PURE__ */ e(wr, { children: /* @__PURE__ */ e(
         oe,
         {
-          as: J,
+          as: Q,
           show: o,
           enter: "transition ease-out duration-100",
           enterFrom: "transform opacity-0 scale-95",
@@ -2922,7 +2922,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
           leaveFrom: "transform opacity-100 scale-100",
           leaveTo: "transform opacity-0 scale-95",
           children: /* @__PURE__ */ e(
-            X.Options,
+            Z.Options,
             {
               ref: u.setFloating,
               style: i,
@@ -2930,7 +2930,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
               static: !0,
               className: "z-50 w-48 bg-white shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm",
               children: Ke.filter((g) => r.includes(g.value)).map((g) => /* @__PURE__ */ e(
-                X.Option,
+                Z.Option,
                 {
                   className: ({
                     active: $
@@ -2970,7 +2970,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   existingShares: n,
   allowedPermissions: u
 }) => {
-  const [i, c] = B(n), [y, b] = B(0), [N, a] = B(""), k = oa(N, 300), m = {
+  const [i, c] = B(n), [y, v] = B(0), [x, a] = B(""), k = oa(x, 300), h = {
     users: i.users.filter(
       (C) => C.name.toLowerCase().includes(k.toLowerCase())
     ),
@@ -2980,24 +2980,22 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     roles: i.roles.filter(
       (C) => C.name.toLowerCase().includes(k.toLowerCase())
     )
-  }, g = async (C, T, E, R) => {
-    const U = T.value;
-    c((V) => ({
-      ...V,
-      [E]: V[E].map(
-        (j) => j.id === C.id ? { ...j, permission: U } : j
+  }, g = async (C, T, I, E) => {
+    const V = T.value;
+    c((q) => ({
+      ...q,
+      [I]: q[I].map(
+        (G) => G.id === C.id ? { ...G, permission: V } : G
       )
     }));
   }, $ = () => {
-    c((C) => {
-      const T = {
-        users: C.users.filter((E) => E.permission !== "remove"),
-        groups: C.groups.filter((E) => E.permission !== "remove"),
-        roles: C.roles.filter((E) => E.permission !== "remove")
-      };
-      return r(T), T;
-    });
-  }, L = ["users", "groups", "roles"], M = ["Users", "Groups", "Roles"];
+    const C = {
+      users: i.users.filter((T) => T.permission !== "remove"),
+      groups: i.groups.filter((T) => T.permission !== "remove"),
+      roles: i.roles.filter((T) => T.permission !== "remove")
+    };
+    r(C);
+  }, L = ["users", "groups", "roles"], O = ["Users", "Groups", "Roles"];
   return (
     // The main structure remains the same...
     /* @__PURE__ */ l("div", { className: "flex flex-col h-full bg-gray-50", children: [
@@ -3008,7 +3006,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
             onClick: () => r(i),
             className: "flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 hover:cursor-pointer p-2 rounded-md hover:bg-gray-100",
             children: [
-              /* @__PURE__ */ e($a, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e(Fa, { className: "h-5 w-5" }),
               " Back"
             ]
           }
@@ -3024,9 +3022,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
         )
       ] }),
       /* @__PURE__ */ l("div", { className: "flex flex-col flex-grow", children: [
-        /* @__PURE__ */ l(re.Group, { selectedIndex: y, onChange: b, children: [
+        /* @__PURE__ */ l(re.Group, { selectedIndex: y, onChange: v, children: [
           /* @__PURE__ */ l("div", { className: "p-4 bg-white border-b border-gray-300", children: [
-            /* @__PURE__ */ e(re.List, { className: "flex space-x-1 bg-gray-100 p-1 rounded-lg", children: M.map((C) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(re.List, { className: "flex space-x-1 bg-gray-100 p-1 rounded-lg", children: O.map((C) => /* @__PURE__ */ e(
               re,
               {
                 className: ({
@@ -3042,8 +3040,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
               he,
               {
                 onDebouncedChange: a,
-                value: N,
-                placeholder: `Search in ${M[y]}...`
+                value: x,
+                placeholder: `Search in ${O[y]}...`
               }
             ) })
           ] }),
@@ -3054,11 +3052,11 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
               animate: { y: 0, opacity: 1 },
               exit: { y: -10, opacity: 0 },
               transition: { duration: 0.2 },
-              children: /* @__PURE__ */ e(re.Panels, { as: J, children: L.map((C) => /* @__PURE__ */ e(
+              children: /* @__PURE__ */ e(re.Panels, { as: Q, children: L.map((C) => /* @__PURE__ */ e(
                 re.Panel,
                 {
                   className: "space-y-3 focus:outline-none",
-                  children: /* @__PURE__ */ e(be, { children: m[C].length > 0 ? m[C].map((T) => /* @__PURE__ */ l(
+                  children: /* @__PURE__ */ e(be, { children: h[C].length > 0 ? h[C].map((T) => /* @__PURE__ */ l(
                     ne.div,
                     {
                       layout: !0,
@@ -3101,9 +3099,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                           {
                             item: T,
                             allowedPermissions: u,
-                            onPermissionChange: (E) => g(
+                            onPermissionChange: (I) => g(
                               T,
-                              E,
+                              I,
                               C
                             )
                           }
@@ -3123,10 +3121,10 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                           /* @__PURE__ */ e(Ca, { className: "h-12 w-12 text-gray-400" }),
                           /* @__PURE__ */ l("h3", { className: "mt-2 text-sm font-medium text-gray-900", children: [
                             "No ",
-                            M[y],
+                            O[y],
                             " Found"
                           ] }),
-                          /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-gray-500", children: N ? `No results for "${N}"` : `There are no ${M[y].toLowerCase()} with access.` })
+                          /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-gray-500", children: x ? `No results for "${x}"` : `There are no ${O[y].toLowerCase()} with access.` })
                         ]
                       }
                     )
@@ -3162,9 +3160,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   onClose: s,
   members: o
 }) => {
-  const [n, u] = B(!0), [i, c] = B(""), y = oa(i, 300), b = o.filter(
-    (m) => m.name.toLowerCase().includes(y.toLowerCase())
-  ), N = {
+  const [n, u] = B(!0), [i, c] = B(""), y = oa(i, 300), v = o.filter(
+    (h) => h.name.toLowerCase().includes(y.toLowerCase())
+  ), x = {
     hidden: { opacity: 0 },
     visible: {
       opacity: 1,
@@ -3178,8 +3176,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     exit: { opacity: 0, x: -20 }
   }, k = () => n ? (
     // Show 5 skeleton items while loading
-    /* @__PURE__ */ e("div", { children: Array.from({ length: 5 }).map((m, g) => /* @__PURE__ */ e(Nn, {}, g)) })
-  ) : b.length === 0 ? /* @__PURE__ */ l(
+    /* @__PURE__ */ e("div", { children: Array.from({ length: 5 }).map((h, g) => /* @__PURE__ */ e(Nn, {}, g)) })
+  ) : v.length === 0 ? /* @__PURE__ */ l(
     ne.div,
     {
       initial: { opacity: 0, scale: 0.95 },
@@ -3194,11 +3192,11 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   ) : /* @__PURE__ */ e(
     ne.ul,
     {
-      variants: N,
+      variants: x,
       initial: "hidden",
       animate: "visible",
       className: "divide-y divide-gray-200",
-      children: /* @__PURE__ */ e(be, { children: b.map((m) => /* @__PURE__ */ l(
+      children: /* @__PURE__ */ e(be, { children: v.map((h) => /* @__PURE__ */ l(
         ne.li,
         {
           layout: !0,
@@ -3209,20 +3207,20 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
             /* @__PURE__ */ e(
               "img",
               {
-                src: m.avatarUrl || `https://avatar.vercel.sh/${m.name}.svg?text=${m.name.charAt(
+                src: h.avatarUrl || `https://avatar.vercel.sh/${h.name}.svg?text=${h.name.charAt(
                   0
                 )}`,
-                alt: m.name,
+                alt: h.name,
                 className: "w-10 h-10 rounded-full flex-shrink-0"
               }
             ),
             /* @__PURE__ */ l("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ e("p", { className: "font-medium text-gray-900 truncate", children: m.name }),
-              m.email && /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 truncate", children: m.email })
+              /* @__PURE__ */ e("p", { className: "font-medium text-gray-900 truncate", children: h.name }),
+              h.email && /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 truncate", children: h.email })
             ] })
           ]
         },
-        m._id
+        h._id
       )) })
     }
   );
@@ -3234,7 +3232,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
           onClick: r,
           className: "flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 p-2 rounded-md hover:bg-gray-100 hover:cursor-pointer",
           children: [
-            /* @__PURE__ */ e($a, { className: "h-5 w-5" }),
+            /* @__PURE__ */ e(Fa, { className: "h-5 w-5" }),
             " Back"
           ]
         }
@@ -3283,11 +3281,11 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   allowedPermissions: c = [],
   ...y
 }) => {
-  const [b, N] = B(de.INVITE), [a, k] = B(t), [m, g] = B(null), [$, L] = B(!1), [M, C] = B([]), [T, E] = B(de.MANAGE), R = () => {
-    N(de.INVITE), g(null), u();
-  }, U = () => {
-    N(de.MANAGE);
-  }, V = async ({ id: p, name: f, type: w }) => {
+  const [v, x] = B(de.INVITE), [a, k] = B(t), [h, g] = B(null), [$, L] = B(!1), [O, C] = B([]), [T, I] = B(de.MANAGE), E = () => {
+    x(de.INVITE), g(null), u();
+  }, V = () => {
+    x(de.MANAGE);
+  }, q = async ({ id: p, name: f, type: w }) => {
     if (w === "groups") {
       try {
         const d = await Ee(`${Oe.getMembersForGroup(f)}`);
@@ -3296,19 +3294,18 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       }
       C(resp);
     }
-    g({ id: p, type: w, name: f }), E(b), N(de.MEMBERS);
-  }, j = (p) => {
-    k(p);
-    const f = !He.isEqual(
-      He.mapValues(t, (w) => w.map((d) => ({ id: d.id, permission: d.permission }))),
-      He.mapValues(p, (w) => w.map((d) => ({ id: d.id, permission: d.permission })))
-    );
-    L(f), N(b === de.MEMBERS ? T : de.INVITE);
+    g({ id: p, type: w, name: f }), I(v), x(de.MEMBERS);
+  }, G = (p) => {
+    console.log("changedExistingShares", p), k(p);
+    const f = He.mapValues(t, (m) => m.map((b) => ({ id: b.id, permission: b.permission })).sort((b, D) => b.id - D.id)), w = He.mapValues(p, (m) => m.map((b) => ({ id: b.id, permission: b.permission })).sort((b, D) => b.id - D.id));
+    console.log("Existing data:", f), console.log("Changed data:", w);
+    const d = !He.isEqual(f, w);
+    console.log("hasPermissionChanged:", d), L(d), x(v === de.MEMBERS ? T : de.INVITE);
   };
-  return /* @__PURE__ */ e(oe, { appear: !0, show: r, as: J, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: R, children: [
+  return /* @__PURE__ */ e(oe, { appear: !0, show: r, as: Q, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: E, children: [
     /* @__PURE__ */ e("div", { className: "filter-modal-overlay", "aria-hidden": "true" }),
     /* @__PURE__ */ e("div", { className: "filter-modal-container", children: /* @__PURE__ */ e("div", { className: "filter-modal-positioner", children: /* @__PURE__ */ e(Se, { className: "filter-modal-panel", style: { background: "white" }, children: (() => {
-      switch (b) {
+      switch (v) {
         case de.MANAGE:
           return /* @__PURE__ */ e(
             ne.div,
@@ -3322,9 +3319,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 vn,
                 {
                   entity: o,
-                  onBack: j,
-                  onClose: R,
-                  onOpenMembers: V,
+                  onBack: G,
+                  onClose: E,
+                  onOpenMembers: q,
                   existingShares: a,
                   calledBy: n,
                   allowedPermissions: c
@@ -3345,12 +3342,12 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
               children: /* @__PURE__ */ e(
                 xn,
                 {
-                  entity: m,
-                  onBack: j,
-                  onClose: R,
+                  entity: h,
+                  onBack: G,
+                  onClose: E,
                   calledBy: n,
                   existingShares: a,
-                  members: M
+                  members: O
                 }
               )
             },
@@ -3369,8 +3366,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 fn,
                 {
                   entity: o,
-                  onManage: U,
-                  onClose: R,
+                  onManage: V,
+                  onClose: E,
                   existingShares: a,
                   calledBy: n,
                   showExistingShares: i,
@@ -3403,32 +3400,32 @@ function Ye({
   displayLimit: c = 3,
   selectionLimit: y = -1,
   // NEW: search behavior
-  searchMode: b = "client",
+  searchMode: v = "client",
   // "client" | "server"
-  onSearch: N,
+  onSearch: x,
   // (query: string) => void (required if searchMode==="server")
   serverLoading: a = !1,
   minSearchChars: k = 2,
   // NEW: mappers (id/label keys)
-  getOptionId: m = ($) => String($.id),
+  getOptionId: h = ($) => String($.id),
   getOptionLabel: g = ($) => $.name
 }) {
-  const $ = ea(), L = ea(), [M, C] = B(""), T = ue(""), E = ce(() => {
+  const $ = ea(), L = ea(), [O, C] = B(""), T = ue(""), I = ce(() => {
     const p = /* @__PURE__ */ new Map();
-    for (const f of r) p.set(m(f), f);
+    for (const f of r) p.set(h(f), f);
     return p;
-  }, [r, m]), R = ce(() => Array.isArray(s) ? s.map((p) => p && typeof p == "object" ? E.get(m(p)) || null : E.get(String(p))).filter(Boolean) : [], [s, E, m]), U = ce(() => {
-    if (!M) return r;
-    const p = M.toLowerCase();
+  }, [r, h]), E = ce(() => Array.isArray(s) ? s.map((p) => p && typeof p == "object" ? I.get(h(p)) || null : I.get(String(p))).filter(Boolean) : [], [s, I, h]), V = ce(() => {
+    if (!O) return r;
+    const p = O.toLowerCase();
     return r.filter((f) => g(f).toLowerCase().includes(p));
-  }, [r, M, g]);
-  Q(() => {
-    b === "server" && M.length >= k && M !== T.current && (T.current = M, N && N(M));
-  }, [M, b, k, N]);
-  const V = b === "client" ? U : r, j = () => {
-    if (!R.length)
+  }, [r, O, g]);
+  X(() => {
+    v === "server" && O.length >= k && O !== T.current && (T.current = O, x && x(O));
+  }, [O, v, k, x]);
+  const q = v === "client" ? V : r, G = () => {
+    if (!E.length)
       return /* @__PURE__ */ e("span", { className: "text-gray-500", children: u });
-    const p = R.slice(0, c), f = R.length - c;
+    const p = E.slice(0, c), f = E.length - c;
     return /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-2", children: [
       p.map((w) => /* @__PURE__ */ e(
         "span",
@@ -3436,7 +3433,7 @@ function Ye({
           className: "px-2 py-1 text-xs font-medium text-white bg-gray-800 rounded-full",
           children: g(w)
         },
-        m(w)
+        h(w)
       )),
       f > 0 && /* @__PURE__ */ l("span", { className: "px-2 py-1 text-xs font-medium text-gray-600 bg-gray-200 rounded-full", children: [
         "+",
@@ -3445,12 +3442,12 @@ function Ye({
       ] })
     ] });
   };
-  return /* @__PURE__ */ e(X, { value: R, onChange: (p) => {
-    const f = Array.from(new Set(p.map((w) => m(w))));
+  return /* @__PURE__ */ e(Z, { value: E, onChange: (p) => {
+    const f = Array.from(new Set(p.map((w) => h(w))));
     y !== -1 && f.length > y || o(f);
   }, multiple: !0, by: "id", children: ({ open: p }) => /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ e(
-      X.Label,
+      Z.Label,
       {
         id: $,
         className: "block text-sm font-medium leading-6 text-gray-900",
@@ -3459,7 +3456,7 @@ function Ye({
     ),
     /* @__PURE__ */ l("div", { className: "relative mt-2", children: [
       /* @__PURE__ */ l(
-        X.Button,
+        Z.Button,
         {
           "aria-labelledby": $,
           "aria-invalid": !!i,
@@ -3470,7 +3467,7 @@ function Ye({
             i ? "ring-red-500" : "ring-gray-300"
           ),
           children: [
-            /* @__PURE__ */ e("span", { className: "block truncate", children: j() }),
+            /* @__PURE__ */ e("span", { className: "block truncate", children: G() }),
             /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none", children: /* @__PURE__ */ e(ka, { className: "w-5 h-5 text-gray-400", "aria-hidden": "true" }) })
           ]
         }
@@ -3478,48 +3475,48 @@ function Ye({
       /* @__PURE__ */ e(
         oe,
         {
-          as: J,
+          as: Q,
           show: p,
           leave: "transition ease-in duration-100",
           leaveFrom: "opacity-100",
           leaveTo: "opacity-0",
-          children: /* @__PURE__ */ l(X.Options, { className: "absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: [
+          children: /* @__PURE__ */ l(Z.Options, { className: "absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: [
             /* @__PURE__ */ e("div", { className: "p-2 sticky top-0 bg-white z-20 shadow-sm", children: /* @__PURE__ */ e(
               he,
               {
-                value: M,
+                value: O,
                 onDebouncedChange: C,
-                placeholder: b === "server" ? `Search (min ${k})…` : "Search options…"
+                placeholder: v === "server" ? `Search (min ${k})…` : "Search options…"
               }
             ) }),
-            b === "server" && a && /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
-            V.length === 0 && !a ? /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: b === "server" ? M.length < k ? `Type at least ${k} characters to search.` : "No results." : "No options found." }) : V.map((f) => {
-              const w = m(f), d = g(f), h = R.some((F) => m(F) === w), x = y !== -1 && R.length >= y && !h;
+            v === "server" && a && /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
+            q.length === 0 && !a ? /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: v === "server" ? O.length < k ? `Type at least ${k} characters to search.` : "No results." : "No options found." }) : q.map((f) => {
+              const w = h(f), d = g(f), m = E.some((D) => h(D) === w), b = y !== -1 && E.length >= y && !m;
               return /* @__PURE__ */ e(
-                X.Option,
+                Z.Option,
                 {
                   value: f,
-                  disabled: x,
-                  className: ({ active: F }) => Pe(
-                    x ? " text-gray-400  bg-white  cursor-not-allowed" : F ? " bg-gray-200  text-gray-900" : " text-gray-900",
+                  disabled: b,
+                  className: ({ active: D }) => Pe(
+                    b ? " text-gray-400  bg-white  cursor-not-allowed" : D ? " bg-gray-200  text-gray-900" : " text-gray-900",
                     " relative  cursor-default  select-none  py-2  pl-3  pr-9"
                   ),
-                  children: ({ selected: F, active: z }) => /* @__PURE__ */ l(ee, { children: [
+                  children: ({ selected: D, active: R }) => /* @__PURE__ */ l(ee, { children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: Pe(
-                          F ? "font-semibold" : "font-normal",
+                          D ? "font-semibold" : "font-normal",
                           "block truncate"
                         ),
                         children: d
                       }
                     ),
-                    F && /* @__PURE__ */ e(
+                    D && /* @__PURE__ */ e(
                       "span",
                       {
                         className: Pe(
-                          z ? " text-gray-900" : " text-gray-600",
+                          R ? " text-gray-900" : " text-gray-600",
                           " absolute  inset-y-0  right-0  flex  items-center  pr-4"
                         ),
                         children: /* @__PURE__ */ e(Ge, { className: "w-5 h-5", "aria-hidden": "true" })
@@ -3538,28 +3535,28 @@ function Ye({
   ] }) });
 }
 Ye.propTypes = {
-  label: G.string.isRequired,
-  options: G.arrayOf(
-    G.shape({
-      id: G.oneOfType([G.string, G.number]),
-      name: G.string
+  label: _.string.isRequired,
+  options: _.arrayOf(
+    _.shape({
+      id: _.oneOfType([_.string, _.number]),
+      name: _.string
     })
   ),
-  selected: G.array,
-  onChange: G.func,
-  onBlur: G.func,
-  placeholder: G.string,
-  error: G.string,
-  displayLimit: G.number,
-  selectionLimit: G.number,
+  selected: _.array,
+  onChange: _.func,
+  onBlur: _.func,
+  placeholder: _.string,
+  error: _.string,
+  displayLimit: _.number,
+  selectionLimit: _.number,
   // NEW
-  searchMode: G.oneOf(["client", "server"]),
-  onSearch: G.func,
+  searchMode: _.oneOf(["client", "server"]),
+  onSearch: _.func,
   // required when searchMode="server"
-  serverLoading: G.bool,
-  minSearchChars: G.number,
-  getOptionId: G.func,
-  getOptionLabel: G.func
+  serverLoading: _.bool,
+  minSearchChars: _.number,
+  getOptionId: _.func,
+  getOptionLabel: _.func
 };
 Ye.defaultProps = {
   options: [],
@@ -3589,10 +3586,10 @@ const hs = ({
   secondaryAction: i = { onCancel: null, label: "Cancel" },
   dialogPanelClass: c = ""
 }) => {
-  const y = (N) => {
-    N.target === N.currentTarget && r(!1);
-  }, b = (N) => {
-    N.stopPropagation();
+  const y = (x) => {
+    x.target === x.currentTarget && r(!1);
+  }, v = (x) => {
+    x.stopPropagation();
   };
   return /* @__PURE__ */ l(
     me,
@@ -3612,7 +3609,7 @@ const hs = ({
           Se,
           {
             className: `${c} relative bg-white align-middle w-full lg:w-[36rem] mx-5 lg:mx-0 transform overflow-hidden rounded-2xl text-left shadow-xl lg:min-w-[36rem] md:min-w-96 transition-all`,
-            onClick: b,
+            onClick: v,
             children: [
               /* @__PURE__ */ l("div", { className: "flex justify-between items-center border-b border-gray-200 p-6 flex-shrink-0", children: [
                 o?.customHeader && o.customHeader,
@@ -3623,13 +3620,13 @@ const hs = ({
                 "div",
                 {
                   className: "px-5 mb-5",
-                  onClick: b,
+                  onClick: v,
                   children: s
                 }
               ),
               n?.show && !n?.customFooter && /* @__PURE__ */ l("div", { className: "border-t flex justify-end border-gray-200 p-6 flex-shrink-0", children: [
                 i?.onCancel && /* @__PURE__ */ e(
-                  Z,
+                  H,
                   {
                     "data-testid": "cancel-button",
                     label: i?.label,
@@ -3641,7 +3638,7 @@ const hs = ({
                   }
                 ),
                 u?.onSubmit && /* @__PURE__ */ e(
-                  Z,
+                  H,
                   {
                     label: u?.label,
                     loader: u?.loader,
@@ -3687,14 +3684,14 @@ function Cn({
   onDelete: c,
   renderActions: y,
   // optional override
-  dragId: b,
-  dropId: N,
+  dragId: v,
+  dropId: x,
   indent: a = 24
 }) {
-  const { setNodeRef: k, isOver: m } = Ut({ id: N }), { attributes: g, listeners: $, setNodeRef: L, transform: M, isDragging: C } = Vt({ id: b }), T = M ? { transform: `translate3d(${Math.round(M.x)}px, ${Math.round(M.y)}px, 0)` } : void 0, [E, R] = B(!1), [U, V] = B(t.name), j = () => {
-    const p = U.trim();
-    R(!1), p && p !== t.name ? i?.(t, p) : V(t.name);
-  }, v = ce(() => /* @__PURE__ */ e(
+  const { setNodeRef: k, isOver: h } = Ut({ id: x }), { attributes: g, listeners: $, setNodeRef: L, transform: O, isDragging: C } = Vt({ id: v }), T = O ? { transform: `translate3d(${Math.round(O.x)}px, ${Math.round(O.y)}px, 0)` } : void 0, [I, E] = B(!1), [V, q] = B(t.name), G = () => {
+    const p = V.trim();
+    E(!1), p && p !== t.name ? i?.(t, p) : q(t.name);
+  }, N = ce(() => /* @__PURE__ */ e(
     an,
     {
       options: [
@@ -3703,7 +3700,7 @@ function Cn({
         { action: "delete", label: "Delete" }
       ],
       onSelect: (f) => {
-        f.action === "create" ? u?.(t) : f.action === "rename" ? R(!0) : f.action === "delete" && c?.(t);
+        f.action === "create" ? u?.(t) : f.action === "rename" ? E(!0) : f.action === "delete" && c?.(t);
       }
     }
   ), [t, u, c]);
@@ -3711,38 +3708,38 @@ function Cn({
     "div",
     {
       ref: k,
-      className: `tv-row ${m ? "tv-drop-over" : ""} ${C ? "dragging" : ""}`,
+      className: `tv-row ${h ? "tv-drop-over" : ""} ${C ? "dragging" : ""}`,
       style: { ...T, paddingLeft: 8 + r * a },
       onClick: (p) => {
         p.target.closest(".tv-toggle") || p.target.tagName === "INPUT" || n?.(t);
       },
       children: [
         /* @__PURE__ */ e("button", { className: "tv-toggle", onClick: o, "aria-label": "toggle", children: t.children?.length ? s ? /* @__PURE__ */ e(wa, { size: 16 }) : /* @__PURE__ */ e(je, { size: 16 }) : /* @__PURE__ */ e("span", { className: "tv-spacer" }) }),
-        /* @__PURE__ */ e(Fa, { size: 16, className: "tv-folder-ic" }),
-        /* @__PURE__ */ e("div", { className: "tv-name", ref: L, children: E ? /* @__PURE__ */ e(
+        /* @__PURE__ */ e($a, { size: 16, className: "tv-folder-ic" }),
+        /* @__PURE__ */ e("div", { className: "tv-name", ref: L, children: I ? /* @__PURE__ */ e(
           "input",
           {
             className: "tv-input",
-            value: U,
-            onChange: (p) => V(p.target.value),
-            onBlur: j,
+            value: V,
+            onChange: (p) => q(p.target.value),
+            onBlur: G,
             onKeyDown: (p) => {
-              p.key === "Enter" && j(), p.key === "Escape" && (R(!1), V(t.name));
+              p.key === "Enter" && G(), p.key === "Escape" && (E(!1), q(t.name));
             },
             autoFocus: !0
           }
-        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => R(!0), children: t.name }) }),
+        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => E(!0), children: t.name }) }),
         /* @__PURE__ */ e(wn, { listeners: $, attributes: g }),
         /* @__PURE__ */ e("div", { className: "tv-actions", children: y ? y(t, {
           onCreateChild: () => u?.(t),
-          onRename: () => R(!0),
+          onRename: () => E(!0),
           onDelete: () => c?.(t)
-        }) : v })
+        }) : N })
       ]
     }
   );
 }
-const Sn = (t) => String(t.id ?? t._id), Dn = (t) => t.parent !== void 0 ? String(t.parent) : t.parentId != null ? String(t.parentId) : "root", $n = (t) => t.name ?? t.label ?? "", Fn = (t) => Array.isArray(t) && t.some((r) => Array.isArray(r.children));
+const Sn = (t) => String(t.id ?? t._id), Dn = (t) => t.parent !== void 0 ? String(t.parent) : t.parentId != null ? String(t.parentId) : "root", Fn = (t) => t.name ?? t.label ?? "", $n = (t) => Array.isArray(t) && t.some((r) => Array.isArray(r.children));
 function Tn(t, { rootId: r, getId: s, getParent: o, getName: n }) {
   const u = /* @__PURE__ */ new Map();
   t.forEach((c) => {
@@ -3764,14 +3761,14 @@ function Tn(t, { rootId: r, getId: s, getParent: o, getName: n }) {
 function An(t, { rootId: r, getId: s, getName: o }) {
   const n = /* @__PURE__ */ new Map();
   function u(c, y) {
-    const b = s(c), N = {
+    const v = s(c), x = {
       ...c,
-      id: b,
+      id: v,
       name: o(c),
       parentId: y || r,
-      children: (c.children || []).map((a) => u(a, b))
+      children: (c.children || []).map((a) => u(a, v))
     };
-    return n.set(b, N), N;
+    return n.set(v, x), x;
   }
   return { roots: t.map((c) => u(c, null)), byId: n };
 }
@@ -3821,54 +3818,54 @@ function ps({
   title: s = "Folders",
   getId: o = Sn,
   getParent: n = Dn,
-  getName: u = $n,
+  getName: u = Fn,
   onSelect: i,
   onCreateRoot: c,
   onCreateChild: y,
-  onRename: b,
-  onDelete: N,
+  onRename: v,
+  onDelete: x,
   onMove: a,
   renderActions: k,
-  disableMoveToRoot: m = !1,
+  disableMoveToRoot: h = !1,
   // ← allow root moves by default now
   indentUnit: g = 24
 }) {
-  const { roots: $ } = ce(() => Fn(t) ? An(t, { rootId: r, getId: o, getName: u }) : Tn(
-    t.map((x) => ({ ...x })),
+  const { roots: $ } = ce(() => $n(t) ? An(t, { rootId: r, getId: o, getName: u }) : Tn(
+    t.map((b) => ({ ...b })),
     { rootId: r, getId: o, getParent: n, getName: u }
-  ), [t, r, o, n, u]), [L, M] = B({}), C = K((x) => {
-    const F = {};
-    return (function z(q) {
-      q.forEach((D) => {
-        F[D.id] = !0, D.children?.length && z(D.children);
+  ), [t, r, o, n, u]), [L, O] = B({}), C = K((b) => {
+    const D = {};
+    return (function R(j) {
+      j.forEach((S) => {
+        D[S.id] = !0, S.children?.length && R(S.children);
       });
-    })(x), F;
+    })(b), D;
   }, []);
   ae.useEffect(() => {
-    M(C($));
+    O(C($));
   }, [$, C]);
   const T = K(
-    (x) => M((F) => ({ ...F, [x]: !F[x] })),
+    (b) => O((D) => ({ ...D, [b]: !D[b] })),
     []
-  ), [E, R] = B(() => Ae($));
-  ae.useEffect(() => R(Ae($)), [$]);
-  const U = qt(
+  ), [I, E] = B(() => Ae($));
+  ae.useEffect(() => E(Ae($)), [$]);
+  const V = qt(
     jt(Yt, { activationConstraint: { delay: 250, tolerance: 5 } })
-  ), V = ue(null), [j, v] = B(null), p = ue(0), f = () => {
-  }, w = ({ delta: x }) => {
-    p.current = x?.x ?? 0;
+  ), q = ue(null), [G, N] = B(null), p = ue(0), f = () => {
+  }, w = ({ delta: b }) => {
+    p.current = b?.x ?? 0;
   }, d = K(
-    ({ active: x, over: F }) => {
-      const z = p.current;
-      if (p.current = 0, v(null), !x || !F) return;
-      const q = String(x.id).replace(/^drag-/, ""), D = String(F.id).replace(/^drop-/, "");
-      if (!q || !D || q === D) return;
-      let A = D;
-      const S = Math.max(0, Math.floor(-z / g));
-      if (S > 0) {
-        let ie = D;
-        for (let xe = 0; xe < S; xe++) {
-          const P = Ka(E, ie, null);
+    ({ active: b, over: D }) => {
+      const R = p.current;
+      if (p.current = 0, N(null), !b || !D) return;
+      const j = String(b.id).replace(/^drag-/, ""), S = String(D.id).replace(/^drop-/, "");
+      if (!j || !S || j === S) return;
+      let A = S;
+      const M = Math.max(0, Math.floor(-R / g));
+      if (M > 0) {
+        let ie = S;
+        for (let xe = 0; xe < M; xe++) {
+          const P = Ka(I, ie, null);
           if (!P) break;
           if (!P.parentId) {
             A = r;
@@ -3877,58 +3874,58 @@ function ps({
           A = P.parentId, ie = P.parentId;
         }
       }
-      if (m && A === r) {
-        R(Ae($));
+      if (h && A === r) {
+        E(Ae($));
         return;
       }
-      const I = Ae(E), { newRoots: O, removed: H } = En(I, q);
-      if (!H) return;
-      const Ne = Rn(O, A, H);
-      R(Ne), a?.({ sourceId: q, destParentId: A, newTree: Ne });
+      const F = Ae(I), { newRoots: z, removed: U } = En(F, j);
+      if (!U) return;
+      const Ne = Rn(z, A, U);
+      E(Ne), a?.({ sourceId: j, destParentId: A, newTree: Ne });
     },
-    [E, $, r, m, g, a]
-  ), h = K(
-    (x, F = 0) => x.map((z) => /* @__PURE__ */ l(ae.Fragment, { children: [
+    [I, $, r, h, g, a]
+  ), m = K(
+    (b, D = 0) => b.map((R) => /* @__PURE__ */ l(ae.Fragment, { children: [
       /* @__PURE__ */ e(
         Cn,
         {
-          node: z,
-          depth: F,
-          expanded: !!L[z.id],
-          onToggle: () => T(z.id),
+          node: R,
+          depth: D,
+          expanded: !!L[R.id],
+          onToggle: () => T(R.id),
           onSelect: i,
           onCreateChild: y,
-          onRename: b,
-          onDelete: N,
+          onRename: v,
+          onDelete: x,
           renderActions: k,
-          dragId: `drag-${z.id}`,
-          dropId: `drop-${z.id}`,
+          dragId: `drag-${R.id}`,
+          dropId: `drop-${R.id}`,
           indent: g
         }
       ),
-      L[z.id] && z.children?.length > 0 ? h(z.children, F + 1) : null
-    ] }, z.id)),
-    [L, g, y, N, b, i, k, T]
+      L[R.id] && R.children?.length > 0 ? m(R.children, D + 1) : null
+    ] }, R.id)),
+    [L, g, y, x, v, i, k, T]
   );
   return ae.useMemo(() => {
-    if (!j) return null;
-    const x = String(j).replace(/^drag-/, "");
-    function F(z) {
-      for (const q of z) {
-        if (q.id === x) return q;
-        const D = q.children?.length ? F(q.children) : null;
-        if (D) return D;
+    if (!G) return null;
+    const b = String(G).replace(/^drag-/, "");
+    function D(R) {
+      for (const j of R) {
+        if (j.id === b) return j;
+        const S = j.children?.length ? D(j.children) : null;
+        if (S) return S;
       }
       return null;
     }
-    return F(E);
-  }, [j, E]), /* @__PURE__ */ l("div", { className: "tv", children: [
+    return D(I);
+  }, [G, I]), /* @__PURE__ */ l("div", { className: "tv", children: [
     s !== !1 && /* @__PURE__ */ l("div", { className: "tv-header", children: [
       /* @__PURE__ */ e("div", { className: "tv-title", children: s }),
       /* @__PURE__ */ e("button", { className: "tv-btn", onClick: c, children: "+ New folder" })
     ] }),
     /* @__PURE__ */ l("div", { className: "tv-root-row", children: [
-      /* @__PURE__ */ e(Fa, { size: 16, className: "tv-folder-ic" }),
+      /* @__PURE__ */ e($a, { size: 16, className: "tv-folder-ic" }),
       /* @__PURE__ */ e("strong", { children: "ROOT" }),
       /* @__PURE__ */ e("button", { className: "tv-icon", title: "Create top-level", onClick: c, children: "+" })
     ] }),
@@ -3936,12 +3933,12 @@ function ps({
       Gt,
       {
         collisionDetection: Wt,
-        sensors: U,
+        sensors: V,
         onDragStart: f,
         onDragMove: w,
         onDragEnd: d,
         modifiers: [_t],
-        children: /* @__PURE__ */ e("div", { ref: V, className: "tv-list", children: h(E, 0) })
+        children: /* @__PURE__ */ e("div", { ref: q, className: "tv-list", children: m(I, 0) })
       }
     )
   ] });
@@ -3960,13 +3957,13 @@ const gs = ({
   ...c
   // Pass remaining props to Tab.Group
 }) => {
-  const y = s === "vertical", b = (k) => fe(
+  const y = s === "vertical", v = (k) => fe(
     "text-left text-sm rounded-md px-2 py-1.5 focus:outline-none",
     k ? "bg-indigo-50 text-indigo-700" : "text-slate-600 hover:bg-slate-50 hover:text-indigo-700"
-  ), N = (k) => fe(
+  ), x = (k) => fe(
     "py-2 -mb-px text-sm font-medium focus:outline-none border-b-2",
     k ? "border-indigo-600 text-indigo-700" : "border-transparent text-slate-600 hover:text-indigo-700"
-  ), a = ({ selected: k }) => i ? typeof i == "function" ? i(k) : i : y ? b(k) : N(k);
+  ), a = ({ selected: k }) => i ? typeof i == "function" ? i(k) : i : y ? v(k) : x(k);
   return /* @__PURE__ */ e(re.Group, { vertical: y, ...c, children: y ? /* @__PURE__ */ l("div", { className: fe("flex gap-4", o), children: [
     /* @__PURE__ */ e(re.List, { className: fe("w-[150px] flex flex-col gap-1 border-r border-gray-300 pr-2", n), children: t.map((k) => /* @__PURE__ */ e(re, { className: a, children: k.label }, k.key)) }),
     /* @__PURE__ */ e(re.Panels, { unmount: !r, className: fe("flex-1", u), children: t.map((k) => /* @__PURE__ */ e(re.Panel, { className: "focus:outline-none", children: /* @__PURE__ */ e("div", { className: "[overflow-anchor:none]", children: k.content }) }, k.key)) })
@@ -3981,33 +3978,33 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
     const a = r && r[t.key] || {};
     return console.log("Initial Section data for", t.key, a), a;
   }), y = ue(r);
-  Q(() => {
+  X(() => {
     if (y.current !== r) {
       y.current = r;
       const a = r && r[t.key] || {};
       console.log("Updated Section data for", t.key, a), c(a);
     }
   }, [r, t.key]), console.log("Section data", i);
-  const b = ue(i);
-  Q(() => {
-    b.current !== i && s && typeof s == "function" && (b.current = i, s(n.key, i));
+  const v = ue(i);
+  X(() => {
+    v.current !== i && s && typeof s == "function" && (v.current = i, s(n.key, i));
   }, [n.key, i, s]);
-  const N = (a) => {
+  const x = (a) => {
     if (!a.dependsOn) return !0;
-    const { field: k, value: m, operator: g = "equals" } = a.dependsOn, $ = i[k];
+    const { field: k, value: h, operator: g = "equals" } = a.dependsOn, $ = i[k];
     switch (g) {
       case "equals":
-        return $ === m;
+        return $ === h;
       case "notEquals":
-        return $ !== m;
+        return $ !== h;
       case "contains":
-        return Array.isArray($) && $.includes(m);
+        return Array.isArray($) && $.includes(h);
       case "notContains":
-        return !Array.isArray($) || !$.includes(m);
+        return !Array.isArray($) || !$.includes(h);
       case "greaterThan":
-        return Number($) > Number(m);
+        return Number($) > Number(h);
       case "lessThan":
-        return Number($) < Number(m);
+        return Number($) < Number(h);
       case "isEmpty":
         return !$ || Array.isArray($) && $.length === 0;
       case "isNotEmpty":
@@ -4029,7 +4026,7 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       }
     ),
     /* @__PURE__ */ e("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: n.description }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: n.fields.map((a, k) => N(a) && /* @__PURE__ */ l("div", { style: { marginBottom: "10px" }, children: [
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: n.fields.map((a, k) => x(a) && /* @__PURE__ */ l("div", { style: { marginBottom: "10px" }, children: [
       /* @__PURE__ */ l(
         "label",
         {
@@ -4047,15 +4044,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ),
       a.fieldtype === "text" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "text",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder,
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4073,8 +4070,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
             defaultValue: a.default,
             placeholder: a.placeholder,
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             rows: 3,
@@ -4087,15 +4084,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "number" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "number",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder,
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4111,8 +4108,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
           {
             name: a.key,
             checked: !!(i[a.key] || a.default),
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             label: a.placeholder || a.label,
@@ -4129,8 +4126,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
             name: a.key,
             defaultValue: a.default,
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g);
             },
             options: a.options || [],
@@ -4144,15 +4141,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "email" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "email",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder || "Enter email address",
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4164,15 +4161,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "url" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "url",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder || "Enter URL",
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4184,15 +4181,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "password" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "password",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder || "Enter password",
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4207,8 +4204,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
           Ye,
           {
             selectedItems: i[a.key] || [],
-            onSelectionChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onSelectionChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             options: a.options || [],
@@ -4224,9 +4221,9 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
           Ga,
           {
             checked: typeof i[a.key] == "boolean" ? i[a.key] : a.default,
-            onChange: (m) => {
-              console.log("Toggle changed:", a.key, m);
-              const g = { ...i, [a.key]: m };
+            onChange: (h) => {
+              console.log("Toggle changed:", a.key, h);
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             label: a.placeholder || a.label,
@@ -4240,8 +4237,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
         {
           label: a.label,
           value: i[a.key] ? new Date(i[a.key]) : null,
-          onChange: (m) => {
-            const g = { ...i, [a.key]: m ? m.toISOString().split("T")[0] : "" };
+          onChange: (h) => {
+            const g = { ...i, [a.key]: h ? h.toISOString().split("T")[0] : "" };
             c(g), s && s(n.key, g);
           },
           placeholder: a.placeholder || "Select date",
@@ -4255,8 +4252,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
         {
           label: a.label,
           value: i[a.key] || { from: null, to: null },
-          onChange: (m) => {
-            const g = { ...i, [a.key]: m };
+          onChange: (h) => {
+            const g = { ...i, [a.key]: h };
             c(g), s && s(n.key, g);
           },
           placeholder: a.placeholder || "Select date range",
@@ -4270,8 +4267,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
           Ua,
           {
             selectedValue: typeof i[a.key] < "u" ? i[a.key] : a.default || "",
-            onValueChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onValueChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             options: a.options || [],
@@ -4282,15 +4279,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
         o[n.key]?.[a.key] && /* @__PURE__ */ e("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: o[n.key][a.key] })
       ] }),
       a.fieldtype === "native-radio" && /* @__PURE__ */ l("div", { className: "native-radiogroup-container", children: [
-        (a.options || []).map((m) => /* @__PURE__ */ l("div", { className: "native-radio-option", children: [
+        (a.options || []).map((h) => /* @__PURE__ */ l("div", { className: "native-radio-option", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "radio",
-              id: `${a.key}-${m.value}`,
+              id: `${a.key}-${h.value}`,
               name: a.key,
-              value: m.value,
-              checked: i[a.key] === m.value,
+              value: h.value,
+              checked: i[a.key] === h.value,
               onChange: (g) => {
                 const $ = { ...i, [a.key]: g.target.value };
                 c($), s && s(n.key, $);
@@ -4298,11 +4295,11 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
               disabled: a.disabled
             }
           ),
-          /* @__PURE__ */ l("label", { htmlFor: `${a.key}-${m.value}`, children: [
-            /* @__PURE__ */ e("span", { className: "native-radio-label", children: m.label }),
-            m.description && /* @__PURE__ */ e("span", { className: "native-radio-description", children: m.description })
+          /* @__PURE__ */ l("label", { htmlFor: `${a.key}-${h.value}`, children: [
+            /* @__PURE__ */ e("span", { className: "native-radio-label", children: h.label }),
+            h.description && /* @__PURE__ */ e("span", { className: "native-radio-description", children: h.description })
           ] })
-        ] }, m.value)),
+        ] }, h.value)),
         o[n.key]?.[a.key] && /* @__PURE__ */ e("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: o[n.key][a.key] })
       ] }),
       a.fieldtype === "search" && /* @__PURE__ */ l("div", { children: [
@@ -4310,8 +4307,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
           he,
           {
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             placeholder: a.placeholder || `Search ${a.label}`,
@@ -4322,15 +4319,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       (a.fieldtype === "datetime" || a.fieldtype === "datetime-local") && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "datetime-local",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder || "Select date and time",
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4341,15 +4338,15 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "time" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "time",
             name: a.key,
             defaultValue: a.default,
             placeholder: a.placeholder || "Select time",
             value: i[a.key] || "",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             required: a.required,
@@ -4360,14 +4357,14 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "color" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "color",
             name: a.key,
             defaultValue: a.default || "#000000",
             value: i[a.key] || "#000000",
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             className: `w-full h-10 ${o[n.key]?.[a.key] ? "border-red-500" : ""}`
@@ -4377,14 +4374,14 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "range" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "range",
             name: a.key,
             defaultValue: a.default || a.min || 0,
             value: i[a.key] || a.min || 0,
-            onChange: (m) => {
-              const g = { ...i, [a.key]: m.target.value };
+            onChange: (h) => {
+              const g = { ...i, [a.key]: h.target.value };
               c(g), s && s(n.key, g);
             },
             min: a.min || 0,
@@ -4405,12 +4402,12 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       ] }),
       a.fieldtype === "file" && /* @__PURE__ */ l("div", { children: [
         /* @__PURE__ */ e(
-          W,
+          Y,
           {
             type: "file",
             name: a.key,
-            onChange: (m) => {
-              const g = m.target.files[0], $ = { ...i, [a.key]: g ? g.name : "" };
+            onChange: (h) => {
+              const g = h.target.files[0], $ = { ...i, [a.key]: g ? g.name : "" };
               c($), s && s(n.key, $);
             },
             accept: a.accept,
@@ -4426,8 +4423,8 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
             endpoints: a.endpoints || {},
             initialData: i[a.key] || a.initialData || [],
             className: a.className || "",
-            onCollectionChange: (m) => {
-              const g = { ...i, [a.key]: m };
+            onCollectionChange: (h) => {
+              const g = { ...i, [a.key]: h };
               c(g), s && s(n.key, g);
             },
             showSearch: a.showSearch !== !1,
@@ -4456,401 +4453,401 @@ function In({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
 const zn = ({ children: t }) => /* @__PURE__ */ e("div", { className: "flex -space-x-2", children: t });
 function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
   console.log(`[DynamicConfig/DataTableRenderer] Component loaded for section: ${t.key}`);
-  const [n, u] = B(t), [i, c] = B(null), [y, b] = B(null);
+  const [n, u] = B(t), [i, c] = B(null), [y, v] = B(null);
   console.log(`[DataTableRenderer] ${n.key} - Received props:`, { item: t, initialData: r });
-  const [N, a] = B(() => {
-    const v = r && r[n.key] || [], p = v.length > 0 ? v : [{ id: 0 }];
+  const [x, a] = B(() => {
+    const N = r && r[n.key] || [], p = N.length > 0 ? N : [{ id: 0 }];
     return console.log(`[DataTableRenderer] ${n.key} - Initial data:`, p), p;
   }), k = ue(r);
-  Q(() => {
+  X(() => {
     if (console.log(`[DataTableRenderer] ${n.key} - Checking for initialData changes`), console.log(`[DataTableRenderer] ${n.key} - Previous:`, k.current), console.log(`[DataTableRenderer] ${n.key} - Current:`, r), k.current !== r) {
       k.current = r;
-      const v = r && r[n.key] || [], p = v.length > 0 ? v : [{ id: 0 }];
+      const N = r && r[n.key] || [], p = N.length > 0 ? N : [{ id: 0 }];
       console.log(`[DataTableRenderer] ${n.key} - Setting new data:`, p), a(p);
     }
   }, [r, n.key]);
-  const m = ue(N), g = ue(null);
-  Q(() => {
-    m.current !== N && s && typeof s == "function" && (m.current = N, g.current && clearTimeout(g.current), g.current = setTimeout(() => {
-      s(n.key, N);
+  const h = ue(x), g = ue(null);
+  X(() => {
+    h.current !== x && s && typeof s == "function" && (h.current = x, g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+      s(n.key, x);
     }, 300));
-  }, [n.key, N, s]), Q(() => () => {
+  }, [n.key, x, s]), X(() => () => {
     g.current && clearTimeout(g.current);
   }, []);
-  const $ = (v) => {
-    const p = (d, h) => {
-      console.log("[DataTableRenderer] updateFieldValue called with:", { rowIndex: d, value: h, type: typeof h }), a((x) => {
-        const F = [...x];
-        return F[d][v.key] = h, F;
+  const $ = (N) => {
+    const p = (d, m) => {
+      console.log("[DataTableRenderer] updateFieldValue called with:", { rowIndex: d, value: m, type: typeof m }), a((b) => {
+        const D = [...b];
+        return D[d][N.key] = m, D;
       });
-    }, f = (d) => o[n.key]?.[d]?.[v.key], w = (d) => {
-      const h = f(d);
-      return h ? /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-1", children: h }) : null;
+    }, f = (d) => o[n.key]?.[d]?.[N.key], w = (d) => {
+      const m = f(d);
+      return m ? /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-1", children: m }) : null;
     };
-    switch (v.fieldtype) {
+    switch (N.fieldtype) {
       case "text":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || `Enter ${N.label}`,
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "textarea":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
             ja,
             {
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`,
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || `Enter ${N.label}`,
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`,
               rows: 3
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "number":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
               type: "number",
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || `Enter ${N.label}`,
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "email":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
               type: "email",
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || "Enter email address",
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || "Enter email address",
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "url":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
               type: "url",
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || "Enter URL",
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || "Enter URL",
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "password":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
               type: "password",
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || "Enter password",
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || "Enter password",
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "select":
       case "dropdown":
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
             ra,
             {
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x),
-              options: v.options || [],
-              placeholder: v.placeholder || `Select ${v.label}`,
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b),
+              options: N.options || [],
+              placeholder: N.placeholder || `Select ${N.label}`,
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
       case "selectDynamic":
-        return (d, h) => {
-          const x = () => {
-            if (v.optionsFrom && r) {
-              const { config: F, valueField: z, labelField: q } = v.optionsFrom, D = r[F] || [];
-              if (Array.isArray(D))
-                return D.map((A) => ({
-                  id: A[z] || "",
-                  value: A[z] || "",
-                  label: A[q] || ""
+        return (d, m) => {
+          const b = () => {
+            if (N.optionsFrom && r) {
+              const { config: D, valueField: R, labelField: j } = N.optionsFrom, S = r[D] || [];
+              if (Array.isArray(S))
+                return S.map((A) => ({
+                  id: A[R] || "",
+                  value: A[R] || "",
+                  label: A[j] || ""
                 }));
             }
-            return v.options || [];
+            return N.options || [];
           };
           return /* @__PURE__ */ l("div", { children: [
             /* @__PURE__ */ e(
               ra,
               {
-                index: h,
-                value: d[v.key] || "",
-                onChange: (F) => p(h, F),
-                options: x(),
-                placeholder: v.placeholder || `Select ${v.label}`,
-                required: v.required,
-                className: `w-full ${f(h) ? "border-red-500" : ""}`
+                index: m,
+                value: d[N.key] || "",
+                onChange: (D) => p(m, D),
+                options: b(),
+                placeholder: N.placeholder || `Select ${N.label}`,
+                required: N.required,
+                className: `w-full ${f(m) ? "border-red-500" : ""}`
               },
               Math.random()
             ),
-            w(h)
+            w(m)
           ] });
         };
       case "multiselect":
-        return (d, h) => {
-          const x = d[v.key] || [];
+        return (d, m) => {
+          const b = d[N.key] || [];
           return /* @__PURE__ */ e(
             Ye,
             {
-              selectedItems: x,
-              onSelectionChange: (F) => p(h, F),
-              options: v.options || [],
-              placeholder: v.placeholder || `Select ${v.label}`,
+              selectedItems: b,
+              onSelectionChange: (D) => p(m, D),
+              options: N.options || [],
+              placeholder: N.placeholder || `Select ${N.label}`,
               className: "w-full"
             }
           );
         };
       case "checkbox":
       case "boolean":
-        return (d, h) => /* @__PURE__ */ e(
+        return (d, m) => /* @__PURE__ */ e(
           Pa,
           {
-            checked: !!d[v.key],
-            onChange: (x) => p(h, x),
-            label: v.placeholder || v.label,
+            checked: !!d[N.key],
+            onChange: (b) => p(m, b),
+            label: N.placeholder || N.label,
             className: "w-full"
           }
         );
       case "toggle":
       case "switch":
-        return (d, h) => /* @__PURE__ */ e(
+        return (d, m) => /* @__PURE__ */ e(
           Ga,
           {
-            isOn: !!d[v.key],
-            onToggle: (x) => p(h, x),
-            label: v.placeholder || v.label,
+            isOn: !!d[N.key],
+            onToggle: (b) => p(m, b),
+            label: N.placeholder || N.label,
             className: "w-full"
           }
         );
       case "date":
-        return (d, h) => /* @__PURE__ */ e(
+        return (d, m) => /* @__PURE__ */ e(
           Ma,
           {
-            selectedDate: d[v.key] ? new Date(d[v.key]) : null,
-            onDateChange: (x) => p(h, x ? x.toISOString().split("T")[0] : ""),
-            placeholder: v.placeholder || "Select date",
+            selectedDate: d[N.key] ? new Date(d[N.key]) : null,
+            onDateChange: (b) => p(m, b ? b.toISOString().split("T")[0] : ""),
+            placeholder: N.placeholder || "Select date",
             className: "w-full"
           }
         );
       case "datetime":
-        return (d, h) => /* @__PURE__ */ e(
-          W,
+        return (d, m) => /* @__PURE__ */ e(
+          Y,
           {
             type: "datetime-local",
-            value: d[v.key] || "",
-            onChange: (x) => p(h, x.target.value),
-            placeholder: v.placeholder || "Select date and time",
-            required: v.required,
+            value: d[N.key] || "",
+            onChange: (b) => p(m, b.target.value),
+            placeholder: N.placeholder || "Select date and time",
+            required: N.required,
             className: "w-full"
           }
         );
       case "time":
-        return (d, h) => /* @__PURE__ */ e(
-          W,
+        return (d, m) => /* @__PURE__ */ e(
+          Y,
           {
             type: "time",
-            value: d[v.key] || "",
-            onChange: (x) => p(h, x.target.value),
-            placeholder: v.placeholder || "Select time",
-            required: v.required,
+            value: d[N.key] || "",
+            onChange: (b) => p(m, b.target.value),
+            placeholder: N.placeholder || "Select time",
+            required: N.required,
             className: "w-full"
           }
         );
       case "radio":
-        return (d, h) => /* @__PURE__ */ e(
+        return (d, m) => /* @__PURE__ */ e(
           Ua,
           {
-            selectedValue: d[v.key] || "",
-            onValueChange: (x) => p(h, x),
-            options: v.options || [],
+            selectedValue: d[N.key] || "",
+            onValueChange: (b) => p(m, b),
+            options: N.options || [],
             className: "w-full"
           }
         );
       case "search":
-        return (d, h) => /* @__PURE__ */ e(
+        return (d, m) => /* @__PURE__ */ e(
           he,
           {
-            value: d[v.key] || "",
-            onChange: (x) => p(h, x),
-            placeholder: v.placeholder || `Search ${v.label}`,
+            value: d[N.key] || "",
+            onChange: (b) => p(m, b),
+            placeholder: N.placeholder || `Search ${N.label}`,
             className: "w-full"
           }
         );
       case "audience":
-        return (d, h) => {
-          const x = d[v.key] || { users: [], groups: [], roles: [] }, F = [
-            ...x.users || [],
-            ...x.groups || [],
-            ...x.roles || []
+        return (d, m) => {
+          const b = d[N.key] || { users: [], groups: [], roles: [] }, D = [
+            ...b.users || [],
+            ...b.groups || [],
+            ...b.roles || []
           ];
           return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(zn, { children: F.length > 0 ? F.slice(0, 3).map((z, q) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(zn, { children: D.length > 0 ? D.slice(0, 3).map((R, j) => /* @__PURE__ */ e(
               za,
               {
                 size: "small",
-                name: z.name || z.displayName || z.id,
-                src: z.avatarUrl
+                name: R.name || R.displayName || R.id,
+                src: R.avatarUrl
               },
-              q
+              j
             )) : null }),
             /* @__PURE__ */ e(
               "button",
               {
                 className: "text-blue-600 font-semibold hover:text-blue-800",
                 onClick: () => {
-                  b(v.key), c(h);
+                  v(N.key), c(m);
                 },
-                children: F.length > 0 ? "Edit" : "Assign"
+                children: D.length > 0 ? "Edit" : "Assign"
               }
             )
           ] });
         };
       case "color":
-        return (d, h) => /* @__PURE__ */ e(
-          W,
+        return (d, m) => /* @__PURE__ */ e(
+          Y,
           {
             type: "color",
-            value: d[v.key] || "#000000",
-            onChange: (x) => p(h, x.target.value),
+            value: d[N.key] || "#000000",
+            onChange: (b) => p(m, b.target.value),
             className: "w-full h-10"
           }
         );
       case "range":
-        return (d, h) => /* @__PURE__ */ l("div", { className: "w-full", children: [
+        return (d, m) => /* @__PURE__ */ l("div", { className: "w-full", children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
               type: "range",
-              value: d[v.key] || v.min || 0,
-              onChange: (x) => p(h, x.target.value),
-              min: v.min || 0,
-              max: v.max || 100,
-              step: v.step || 1,
+              value: d[N.key] || N.min || 0,
+              onChange: (b) => p(m, b.target.value),
+              min: N.min || 0,
+              max: N.max || 100,
+              step: N.step || 1,
               className: "w-full"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "text-sm text-gray-500", children: d[v.key] || v.min || 0 })
+          /* @__PURE__ */ e("span", { className: "text-sm text-gray-500", children: d[N.key] || N.min || 0 })
         ] });
       case "file":
-        return (d, h) => /* @__PURE__ */ e(
-          W,
+        return (d, m) => /* @__PURE__ */ e(
+          Y,
           {
             type: "file",
-            onChange: (x) => {
-              const F = x.target.files[0];
-              p(h, F ? F.name : "");
+            onChange: (b) => {
+              const D = b.target.files[0];
+              p(m, D ? D.name : "");
             },
-            accept: v.accept,
+            accept: N.accept,
             className: "w-full"
           }
         );
       case "hidden":
-        return (d, h) => /* @__PURE__ */ e(
-          W,
+        return (d, m) => /* @__PURE__ */ e(
+          Y,
           {
             type: "hidden",
-            value: d[v.key] || "",
-            onChange: (x) => p(h, x.target.value)
+            value: d[N.key] || "",
+            onChange: (b) => p(m, b.target.value)
           }
         );
       // Default fallback for unknown field types
       default:
-        return (d, h) => /* @__PURE__ */ l("div", { children: [
+        return (d, m) => /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            W,
+            Y,
             {
-              value: d[v.key] || "",
-              onChange: (x) => p(h, x.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${f(h) ? "border-red-500" : ""}`
+              value: d[N.key] || "",
+              onChange: (b) => p(m, b.target.value),
+              placeholder: N.placeholder || `Enter ${N.label}`,
+              required: N.required,
+              className: `w-full ${f(m) ? "border-red-500" : ""}`
             }
           ),
-          w(h)
+          w(m)
         ] });
     }
   }, L = K(() => {
-    console.log("[DataTableRenderer] Adding blank row"), a((v) => {
-      console.log("[DataTableRenderer] Current data before add:", v);
+    console.log("[DataTableRenderer] Adding blank row"), a((N) => {
+      console.log("[DataTableRenderer] Current data before add:", N);
       const p = {
-        id: v.length
+        id: N.length
         // Assign next available ID
       };
       n.fields.forEach((w) => {
         w.fieldtype === "audience" ? p[w.key] = { users: [], groups: [], roles: [] } : p[w.key] = w.default || "";
       }), console.log("[DataTableRenderer] New blank row:", p);
-      const f = [...v, p];
+      const f = [...N, p];
       return console.log("[DataTableRenderer] Updated data:", f), f;
     });
-  }, [n.fields]), M = K((v) => {
+  }, [n.fields]), O = K((N) => {
     a((p) => {
       if (p.length <= 1)
         return p;
       const f = [...p];
-      return f.splice(v, 1), f;
+      return f.splice(N, 1), f;
     });
-  }, []), [C, T] = B(null), E = K((v, p) => {
-    T(p), v.dataTransfer.effectAllowed = "move", v.dataTransfer.setData("text/html", "");
-  }, []), R = K((v) => {
-    v.preventDefault(), v.dataTransfer.dropEffect = "move";
-  }, []), U = K((v, p) => {
-    v.preventDefault(), !(C === null || C === p) && (a((f) => {
+  }, []), [C, T] = B(null), I = K((N, p) => {
+    T(p), N.dataTransfer.effectAllowed = "move", N.dataTransfer.setData("text/html", "");
+  }, []), E = K((N) => {
+    N.preventDefault(), N.dataTransfer.dropEffect = "move";
+  }, []), V = K((N, p) => {
+    N.preventDefault(), !(C === null || C === p) && (a((f) => {
       const w = [...f], d = w[C];
       return w.splice(C, 1), w.splice(p, 0, d), w;
     }), T(null));
-  }, [C]), V = K(() => {
+  }, [C]), q = K(() => {
     T(null);
-  }, []), j = K((v) => {
-    console.log("[DataTableRenderer] handleAddAudience called with:", v), a((p) => {
+  }, []), G = K((N) => {
+    console.log("[DataTableRenderer] handleAddAudience called with:", N), a((p) => {
       const f = [...p];
       if (i !== null && y && f[i]) {
-        const w = v.pendingInvites || [], d = w.filter((F) => F.type === "User"), h = w.filter((F) => F.type === "Group"), x = w.filter((F) => F.type === "Role");
+        const w = N.pendingInvites || [], d = w.filter((D) => D.type === "User"), m = w.filter((D) => D.type === "Group"), b = w.filter((D) => D.type === "Role");
         f[i][y] = {
           users: [...f[i][y]?.users || [], ...d],
-          groups: [...f[i][y]?.groups || [], ...h],
-          roles: [...f[i][y]?.roles || [], ...x]
+          groups: [...f[i][y]?.groups || [], ...m],
+          roles: [...f[i][y]?.roles || [], ...b]
         }, console.log("[DataTableRenderer] Updated audience data:", f[i][y]);
       }
       return f;
-    }), c(null), b(null);
+    }), c(null), v(null);
   }, [i, y]);
   return /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ l("div", { style: { marginBottom: "20px" }, children: [
@@ -4870,32 +4867,32 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
     /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ l("table", { className: "min-w-full bg-white border border-gray-300", style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ l("tr", { className: "bg-gray-50", children: [
         /* @__PURE__ */ e("th", { className: "px-4 py-2 w-10" }),
-        n.fields.map((v, p) => /* @__PURE__ */ e(
+        n.fields.map((N, p) => /* @__PURE__ */ e(
           "th",
           {
             className: "px-4 py-2 text-left text-sm font-medium text-gray-700",
-            children: v.label || v.key
+            children: N.label || N.key
           },
           p
         )),
         /* @__PURE__ */ e("th", { className: "px-4 py-2 w-16" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: N.map((v, p) => /* @__PURE__ */ l(
+      /* @__PURE__ */ e("tbody", { children: x.map((N, p) => /* @__PURE__ */ l(
         "tr",
         {
           className: `hover:bg-gray-50 ${C === p ? "opacity-50" : ""}`,
           draggable: !0,
-          onDragStart: (f) => E(f, p),
-          onDragOver: R,
-          onDrop: (f) => U(f, p),
-          onDragEnd: V,
+          onDragStart: (f) => I(f, p),
+          onDragOver: E,
+          onDrop: (f) => V(f, p),
+          onDragEnd: q,
           children: [
             /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ e("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ e(sa, { size: 16 }) }) }),
-            n.fields.map((f, w) => /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: $(f)(v, p) }, w)),
+            n.fields.map((f, w) => /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: $(f)(N, p) }, w)),
             /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => M(p),
+                onClick: () => O(p),
                 className: "text-red-500 hover:text-red-700",
                 title: "Delete row",
                 children: /* @__PURE__ */ e(Jt, { size: 16 })
@@ -4907,20 +4904,20 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       )) })
     ] }) }),
     i !== null && (() => {
-      const v = N[i] && N[i][y] ? {
-        users: N[i][y].users || [],
-        groups: N[i][y].groups || [],
-        roles: N[i][y].roles || []
+      const N = x[i] && x[i][y] ? {
+        users: x[i][y].users || [],
+        groups: x[i][y].groups || [],
+        roles: x[i][y].roles || []
       } : { users: [], groups: [], roles: [] };
-      return console.log("[DataTableRenderer] Opening modal with existing data:", v), console.log("[DataTableRenderer] Row data:", N[i]), console.log("[DataTableRenderer] Field name:", y), /* @__PURE__ */ e(
+      return console.log("[DataTableRenderer] Opening modal with existing data:", N), console.log("[DataTableRenderer] Row data:", x[i]), console.log("[DataTableRenderer] Field name:", y), /* @__PURE__ */ e(
         kn,
         {
           isOpen: !0,
           onClose: () => {
-            c(null), b(null);
+            c(null), v(null);
           },
-          onFinalSubmit: j,
-          existingShares: v,
+          onFinalSubmit: G,
+          existingShares: N,
           allowedPermissions: ["view", "remove"]
         }
       );
@@ -4994,114 +4991,114 @@ const fa = () => {
   initialData: y = null
   // Add prop for initial demo data
 }) => {
-  const [b, N] = B(null), [a, k] = B(""), [m, g] = B(() => Array.isArray(y) ? y : []), [$, L] = B(null), [M, C] = B(null), [T, E] = B(""), R = async () => {
+  const [v, x] = B(null), [a, k] = B(""), [h, g] = B(() => Array.isArray(y) ? y : []), [$, L] = B(null), [O, C] = B(null), [T, I] = B(""), E = async () => {
     try {
-      const D = await Ee(t.collectionList);
-      if (D) {
-        const A = D.map((S, I) => ({
-          ...S,
-          order: typeof S.order == "number" ? S.order : I + 1
+      const S = await Ee(t.collectionList);
+      if (S) {
+        const A = S.map((M, F) => ({
+          ...M,
+          order: typeof M.order == "number" ? M.order : F + 1
         }));
-        A.sort((S, I) => (S.order ?? 0) - (I.order ?? 0)), g(A), s?.(A);
+        A.sort((M, F) => (M.order ?? 0) - (F.order ?? 0)), g(A), s?.(A);
       }
-    } catch (D) {
-      console.log("Error loading collections:", D), typeof window < "u" && !window.location.pathname.includes("iframe.html") && le.error("Failed to load collections");
+    } catch (S) {
+      console.log("Error loading collections:", S), typeof window < "u" && !window.location.pathname.includes("iframe.html") && le.error("Failed to load collections");
     }
   };
-  Q(() => {
-    (!y || y.length === 0) && R();
-  }, [y]), Q(() => {
+  X(() => {
+    (!y || y.length === 0) && E();
+  }, [y]), X(() => {
     Array.isArray(y) && g(y);
   }, [y]);
-  const U = (D) => {
-    u && (N(D.id), k(D.categoryName || ""));
-  }, V = () => {
-    if (!n || b !== null) return;
-    const D = `temp-${Date.now()}`;
+  const V = (S) => {
+    u && (x(S.id), k(S.categoryName || ""));
+  }, q = () => {
+    if (!n || v !== null) return;
+    const S = `temp-${Date.now()}`;
     g((A) => [
       ...A,
       {
-        id: D,
+        id: S,
         categoryName: "",
         links: [],
         order: (A.at(-1)?.order ?? 0) + 1,
         _temp: !0
       }
-    ]), N(D), k("");
-  }, j = () => {
-    b != null && (g((D) => {
-      const A = D.find((I) => I.id === b), S = A && A._temp ? D.filter((I) => I.id !== b) : D;
-      return s?.(S), S;
-    }), N(null), k(""));
-  }, v = async () => {
-    if (b == null || !a.trim()) return;
-    const D = typeof b == "string" && b.startsWith("temp-");
+    ]), x(S), k("");
+  }, G = () => {
+    v != null && (g((S) => {
+      const A = S.find((F) => F.id === v), M = A && A._temp ? S.filter((F) => F.id !== v) : S;
+      return s?.(M), M;
+    }), x(null), k(""));
+  }, N = async () => {
+    if (v == null || !a.trim()) return;
+    const S = typeof v == "string" && v.startsWith("temp-");
     try {
-      if (D) {
+      if (S) {
         const A = await Re(t.collectionCreate, {
           categoryName: a.trim(),
-          order: (Array.isArray(m) && m.length > 0 ? m.at(-1)?.order ?? 0 : 0) + 1
+          order: (Array.isArray(h) && h.length > 0 ? h.at(-1)?.order ?? 0 : 0) + 1
         });
-        A && (g((S) => {
-          const I = S.map((O) => O.id === b ? A : O);
-          return s?.(I), I;
+        A && (g((M) => {
+          const F = M.map((z) => z.id === v ? A : z);
+          return s?.(F), F;
         }), ke.success("Collection created successfully"));
       } else {
         const A = await mn(
-          `${t.collectionUpdate}/${b}?newName=${a.trim()}`
+          `${t.collectionUpdate}/${v}?newName=${a.trim()}`
         );
-        g((S) => {
-          const I = S.map(
-            (O) => O.id === b ? A && A.id ? { ...O, ...A } : { ...O, categoryName: a.trim() } : O
+        g((M) => {
+          const F = M.map(
+            (z) => z.id === v ? A && A.id ? { ...z, ...A } : { ...z, categoryName: a.trim() } : z
           );
-          return s?.(I), I;
+          return s?.(F), F;
         }), le.success("Collection updated successfully");
       }
-      N(null), k("");
+      x(null), k("");
     } catch (A) {
       console.log(A), le.error("Failed to save collection");
     }
-  }, p = async (D) => {
+  }, p = async (S) => {
     if (i)
       try {
-        await un(`${t.collectionUpdate}/${D.id}`) && (le.success("Deleted successfully", { autoClose: 3e3 }), R());
+        await un(`${t.collectionUpdate}/${S.id}`) && (le.success("Deleted successfully", { autoClose: 3e3 }), E());
       } catch (A) {
         console.log(A), le.error("Failed to delete collection");
       }
-  }, f = (D, A, S) => {
-    if (!c || !A || !S || A === S) return D;
-    const I = D.findIndex((ie) => ie.id === A), O = D.findIndex((ie) => ie.id === S);
-    if (I === -1 || O === -1) return D;
-    const H = [...D], [Ne] = H.splice(I, 1);
-    return H.splice(O, 0, Ne), H.map((ie, xe) => ({ ...ie, order: xe + 1 }));
-  }, w = async (D) => {
-    const A = D.map((S) => ({
-      id: S.id,
-      order: S.order,
-      categoryName: S.categoryName
+  }, f = (S, A, M) => {
+    if (!c || !A || !M || A === M) return S;
+    const F = S.findIndex((ie) => ie.id === A), z = S.findIndex((ie) => ie.id === M);
+    if (F === -1 || z === -1) return S;
+    const U = [...S], [Ne] = U.splice(F, 1);
+    return U.splice(z, 0, Ne), U.map((ie, xe) => ({ ...ie, order: xe + 1 }));
+  }, w = async (S) => {
+    const A = S.map((M) => ({
+      id: M.id,
+      order: M.order,
+      categoryName: M.categoryName
     }));
     try {
       await Re(t.updateCollection, A);
-    } catch (S) {
-      console.log(S), le.error("Failed to save order", { autoClose: 2500 });
+    } catch (M) {
+      console.log(M), le.error("Failed to save order", { autoClose: 2500 });
     }
-  }, d = (D, A) => {
-    c && (D.dataTransfer.effectAllowed = "move", D.dataTransfer.setData("text/plain", String(A)), L(A));
-  }, h = (D) => {
-    $ && D !== M && C(D);
-  }, x = (D) => {
-    D.preventDefault();
-  }, F = async (D, A) => {
-    D.preventDefault();
-    const S = D.dataTransfer.getData("text/plain");
-    S && (g((I) => {
-      const O = f(I, S, A);
-      return console.log("Reordered", O), w(O), s?.(O), O;
+  }, d = (S, A) => {
+    c && (S.dataTransfer.effectAllowed = "move", S.dataTransfer.setData("text/plain", String(A)), L(A));
+  }, m = (S) => {
+    $ && S !== O && C(S);
+  }, b = (S) => {
+    S.preventDefault();
+  }, D = async (S, A) => {
+    S.preventDefault();
+    const M = S.dataTransfer.getData("text/plain");
+    M && (g((F) => {
+      const z = f(F, M, A);
+      return console.log("Reordered", z), w(z), s?.(z), z;
     }), L(null), C(null));
-  }, z = () => {
+  }, R = () => {
     L(null), C(null);
-  }, q = Array.isArray(m) ? m.filter(
-    (D) => D.categoryName?.toLowerCase().includes(T.toLowerCase())
+  }, j = Array.isArray(h) ? h.filter(
+    (S) => S.categoryName?.toLowerCase().includes(T.toLowerCase())
   ) : [];
   return /* @__PURE__ */ l("div", { className: `manage-collection-list ${r}`, children: [
     /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ l("div", { className: "w-1/2 flex justify-end", children: [
@@ -5109,7 +5106,7 @@ const fa = () => {
         he,
         {
           value: T,
-          onDebouncedChange: E,
+          onDebouncedChange: I,
           placeholder: "Search Collection",
           customClass: "mr-4 searchmanagecollection"
         }
@@ -5119,28 +5116,28 @@ const fa = () => {
         {
           className: [
             "px-4 py-3 bg-black text-white rounded-2xl ml-4",
-            b !== null ? "opacity-60 cursor-not-allowed" : "cursor-pointer"
+            v !== null ? "opacity-60 cursor-not-allowed" : "cursor-pointer"
           ].join(" "),
-          onClick: V,
-          disabled: b !== null,
+          onClick: q,
+          disabled: v !== null,
           children: "Add a Collection"
         }
       )
     ] }) }),
-    /* @__PURE__ */ e("div", { className: "mt-5 flex flex-col", children: q.map((D) => {
-      const A = b === D.id, S = D?.links?.length ?? 0, I = $ === D.id, O = M === D.id && $ !== D.id;
+    /* @__PURE__ */ e("div", { className: "mt-5 flex flex-col", children: j.map((S) => {
+      const A = v === S.id, M = S?.links?.length ?? 0, F = $ === S.id, z = O === S.id && $ !== S.id;
       return /* @__PURE__ */ e(
         "div",
         {
-          onDragEnter: () => h(D.id),
-          onDragOver: x,
-          onDrop: (H) => F(H, D.id),
-          onDragEnd: z,
+          onDragEnter: () => m(S.id),
+          onDragOver: b,
+          onDrop: (U) => D(U, S.id),
+          onDragEnd: R,
           className: [
             "flex items-center justify-between p-3 border rounded-2xl mb-3",
             "border-gray-300",
-            O ? "ring-2 ring-gray-800/20" : "",
-            I ? "opacity-60" : ""
+            z ? "ring-2 ring-gray-800/20" : "",
+            F ? "opacity-60" : ""
           ].join(" "),
           children: A ? /* @__PURE__ */ l(ee, { children: [
             /* @__PURE__ */ e("div", { className: "flex items-center gap-2 flex-1", children: /* @__PURE__ */ e(
@@ -5149,10 +5146,10 @@ const fa = () => {
                 type: "text",
                 className: "flex-1 h-10 px-3 max-w-[200px] border border-gray-300 rounded-2xl outline-none focus:ring-2 focus:ring-gray-800/20",
                 value: a,
-                placeholder: D._temp ? "New collection name" : "Edit collection name",
-                onChange: (H) => k(H.target.value),
-                onKeyDown: (H) => {
-                  H.key === "Enter" && v(), H.key === "Escape" && j();
+                placeholder: S._temp ? "New collection name" : "Edit collection name",
+                onChange: (U) => k(U.target.value),
+                onKeyDown: (U) => {
+                  U.key === "Enter" && N(), U.key === "Escape" && G();
                 },
                 autoFocus: !0
               }
@@ -5162,7 +5159,7 @@ const fa = () => {
                 "button",
                 {
                   className: "cursor-pointer border border-gray-300 p-2 rounded-2xl",
-                  onClick: j,
+                  onClick: G,
                   "aria-label": "Cancel edit",
                   children: /* @__PURE__ */ e(ye, { color: "#767676" })
                 }
@@ -5174,7 +5171,7 @@ const fa = () => {
                     "border p-2 rounded-2xl",
                     a.trim() ? "cursor-pointer border-gray-300" : "cursor-not-allowed border-gray-200"
                   ].join(" "),
-                  onClick: v,
+                  onClick: N,
                   "aria-label": "Save",
                   disabled: !a.trim(),
                   title: a.trim() ? "Save" : "Name required",
@@ -5191,36 +5188,36 @@ const fa = () => {
                   "aria-label": "Drag to reorder",
                   className: "cursor-grab active:cursor-grabbing p-1 -m-1 rounded-md hover:bg-gray-50",
                   draggable: !0,
-                  onDragStart: (H) => d(H, D.id),
+                  onDragStart: (U) => d(U, S.id),
                   children: /* @__PURE__ */ e(sa, {})
                 }
               ),
-              /* @__PURE__ */ e("span", { children: D.categoryName })
+              /* @__PURE__ */ e("span", { children: S.categoryName })
             ] }),
             /* @__PURE__ */ l("div", { className: "flex gap-2 items-center", children: [
-              D.protected ? /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 cursor-default", children: D.qlAppName }) : /* @__PURE__ */ e("span", { className: "text-sm text-blue-600 cursor-default", children: `${S} ${S === 1 ? "link" : "links"}` }),
+              S.protected ? /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 cursor-default", children: S.qlAppName }) : /* @__PURE__ */ e("span", { className: "text-sm text-blue-600 cursor-default", children: `${M} ${M === 1 ? "link" : "links"}` }),
               u && /* @__PURE__ */ e(
                 "button",
                 {
                   className: "cursor-pointer",
-                  onClick: () => U(D),
-                  "aria-label": `Edit ${D.categoryName}`,
+                  onClick: () => V(S),
+                  "aria-label": `Edit ${S.categoryName}`,
                   children: /* @__PURE__ */ e(Qt, { color: "#767676" })
                 }
               ),
               i && /* @__PURE__ */ e(
                 "span",
                 {
-                  className: S === 0 && !D.protected ? "cursor-pointer" : "cursor-not-allowed",
-                  title: S === 0 && !D.protected ? "Delete" : "Cannot delete this collection",
-                  onClick: S === 0 ? () => p(D) : null,
-                  children: /* @__PURE__ */ e(Ve, { color: S === 0 ? "#767676" : "#C2C2C2" })
+                  className: M === 0 && !S.protected ? "cursor-pointer" : "cursor-not-allowed",
+                  title: M === 0 && !S.protected ? "Delete" : "Cannot delete this collection",
+                  onClick: M === 0 ? () => p(S) : null,
+                  children: /* @__PURE__ */ e(Ve, { color: M === 0 ? "#767676" : "#C2C2C2" })
                 }
               )
             ] })
           ] })
         },
-        D.id
+        S.id
       );
     }) })
   ] });
@@ -5232,11 +5229,11 @@ const fa = () => {
     initialData: i = null,
     showSearch: c = !0,
     allowAdd: y = !0,
-    allowEdit: b = !0,
-    allowDelete: N = !0,
+    allowEdit: v = !0,
+    allowDelete: x = !0,
     allowReorder: a = !0,
     className: k = ""
-  } = t, m = r?.[t.key] || i || [], g = Array.isArray(m) ? m : [];
+  } = t, h = r?.[t.key] || i || [], g = Array.isArray(h) ? h : [];
   return /* @__PURE__ */ l("div", { className: "dynamic-config-manage-collection-list", children: [
     (o || n) && /* @__PURE__ */ l("div", { className: "mb-4", children: [
       o && /* @__PURE__ */ e("h3", { className: "text-lg font-medium text-gray-900 mb-1", children: o }),
@@ -5253,8 +5250,8 @@ const fa = () => {
         },
         showSearch: c,
         allowAdd: y,
-        allowEdit: b,
-        allowDelete: N,
+        allowEdit: v,
+        allowDelete: x,
         allowReorder: a
       }
     )
@@ -5282,122 +5279,122 @@ function Un({
   onCancel: o,
   onSave: n
 }) {
-  const [u, i] = ae.useState(r), [c, y] = ae.useState(null), [b, N] = B(!1), [a, k] = B(!1), [m, g] = B({}), $ = `${ve()}/unifyedxappmodulemanagement/api/v1/appmanager/${t}/configuration`, L = $, [M, C] = B(1), T = (f) => {
+  const [u, i] = ae.useState(r), [c, y] = ae.useState(null), [v, x] = B(!1), [a, k] = B(!1), [h, g] = B({}), $ = `${ve()}/unifyedxappmodulemanagement/api/v1/appmanager/${t}/configuration`, L = $, [O, C] = B(1), T = (f) => {
     if (!r || !r.configuration)
       return f;
     const w = {}, d = f?.configuration || {};
-    return r.configuration.forEach((h) => {
-      if (h.key && h.type === "datatable") {
-        const F = (d[h.key] || []).map((z, q) => {
-          const D = { id: z.id || 0 };
-          return h.fields && h.fields.forEach((A) => {
+    return r.configuration.forEach((m) => {
+      if (m.key && m.type === "datatable") {
+        const D = (d[m.key] || []).map((R, j) => {
+          const S = { id: R.id || 0 };
+          return m.fields && m.fields.forEach((A) => {
             if (A.fieldtype === "audience") {
-              let S = { users: [], groups: [], roles: [] };
-              z[A.key] && (Array.isArray(z[A.key]) ? S = { users: [], groups: [], roles: [] } : typeof z[A.key] == "object" && (S = {
-                users: z[A.key].users || [],
-                groups: z[A.key].groups || [],
-                roles: z[A.key].roles || []
-              })), D[A.key] = S;
+              let M = { users: [], groups: [], roles: [] };
+              R[A.key] && (Array.isArray(R[A.key]) ? M = { users: [], groups: [], roles: [] } : typeof R[A.key] == "object" && (M = {
+                users: R[A.key].users || [],
+                groups: R[A.key].groups || [],
+                roles: R[A.key].roles || []
+              })), S[A.key] = M;
             } else
-              D[A.key] = z[A.key] || A.default || "";
-          }), D;
+              S[A.key] = R[A.key] || A.default || "";
+          }), S;
         });
-        if (F.length === 0) {
-          const z = { id: 0 };
-          h.fields && h.fields.forEach((q) => {
-            q.fieldtype === "audience" ? z[q.key] = { users: [], groups: [], roles: [] } : z[q.key] = q.default || "";
-          }), F.push(z);
+        if (D.length === 0) {
+          const R = { id: 0 };
+          m.fields && m.fields.forEach((j) => {
+            j.fieldtype === "audience" ? R[j.key] = { users: [], groups: [], roles: [] } : R[j.key] = j.default || "";
+          }), D.push(R);
         }
-        w[h.key] = F;
-      } else h.key && (w[h.key] = d[h.key] || {});
+        w[m.key] = D;
+      } else m.key && (w[m.key] = d[m.key] || {});
     }), w;
-  }, E = () => {
+  }, I = () => {
     if (r && r.configuration) {
       const f = {};
       r.configuration.forEach((w) => {
         if (w.key)
           if (w.type === "datatable") {
             const d = { id: 0 };
-            w.fields && w.fields.forEach((h) => {
-              h.fieldtype === "audience" ? d[h.key] = { users: [], groups: [], roles: [] } : d[h.key] = h.default || "";
+            w.fields && w.fields.forEach((m) => {
+              m.fieldtype === "audience" ? d[m.key] = { users: [], groups: [], roles: [] } : d[m.key] = m.default || "";
             }), f[w.key] = [d];
           } else if (w.type === "section") {
             const d = {};
-            w.fields && Array.isArray(w.fields) && w.fields.forEach((h) => {
-              h.key && (d[h.key] = h.default || "");
+            w.fields && Array.isArray(w.fields) && w.fields.forEach((m) => {
+              m.key && (d[m.key] = m.default || "");
             }), f[w.key] = d;
           } else
             f[w.key] = {};
       }), y(f);
     }
   };
-  Q(() => {
+  X(() => {
     if (s) {
-      N(!1);
+      x(!1);
       return;
     }
     const f = async () => {
       try {
-        N(!0);
+        x(!0);
         let w = await Ee($);
         if (w) {
           const d = T(w);
           y(d);
         } else
-          E();
+          I();
       } catch (w) {
         console.error("Error fetching configuration:", w);
         let d = "Failed to load configuration";
         if (w.response) {
-          const h = w.response.status, x = w.response.data?.message || w.response.data?.error;
-          h === 400 ? d = x || "Invalid request. Please check the application ID." : h === 401 ? d = "You are not authorized to access this configuration." : h === 403 ? d = "Access denied. You don't have permission to view this configuration." : h === 404 ? d = "Configuration not found. It may not exist yet or the application ID is incorrect." : h >= 500 ? d = x || "Server error. Please try again later." : d = x || `Failed to load configuration (Error ${h})`;
+          const m = w.response.status, b = w.response.data?.message || w.response.data?.error;
+          m === 400 ? d = b || "Invalid request. Please check the application ID." : m === 401 ? d = "You are not authorized to access this configuration." : m === 403 ? d = "Access denied. You don't have permission to view this configuration." : m === 404 ? d = "Configuration not found. It may not exist yet or the application ID is incorrect." : m >= 500 ? d = b || "Server error. Please try again later." : d = b || `Failed to load configuration (Error ${m})`;
         } else w.request ? d = "Network error. Please check your connection and try again." : d = w.message || "An unexpected error occurred while loading configuration.";
-        ke.error(d), E();
+        ke.error(d), I();
       } finally {
-        N(!1);
+        x(!1);
       }
     };
-    r && (i(r), t ? f() : E());
-  }, [r, M, t, s]);
-  const R = (f, w) => {
+    r && (i(r), t ? f() : I());
+  }, [r, O, t, s]);
+  const E = (f, w) => {
     y((d) => ({
       ...d,
       [f]: w
     })), g((d) => {
-      const h = { ...d };
-      return h[f] && delete h[f], h;
+      const m = { ...d };
+      return m[f] && delete m[f], m;
     });
-  }, U = () => {
+  }, V = () => {
     const f = {};
     return !u || !c || u.configuration.forEach((w) => {
       if (w.type === "section")
         w.fields.forEach((d) => {
           if (d.required) {
-            const h = c[w.key]?.[d.key];
-            (!h || typeof h == "string" && h.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][d.key] = `${d.label} is required`);
+            const m = c[w.key]?.[d.key];
+            (!m || typeof m == "string" && m.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][d.key] = `${d.label} is required`);
           }
         });
       else if (w.type === "datatable") {
         const d = c[w.key];
-        Array.isArray(d) && d.forEach((h, x) => {
-          w.fields.forEach((F) => {
-            if (F.required) {
-              const z = h[F.key];
-              (!z || typeof z == "string" && z.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][x] || (f[w.key][x] = {}), f[w.key][x][F.key] = `${F.label} is required`);
+        Array.isArray(d) && d.forEach((m, b) => {
+          w.fields.forEach((D) => {
+            if (D.required) {
+              const R = m[D.key];
+              (!R || typeof R == "string" && R.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][b] || (f[w.key][b] = {}), f[w.key][b][D.key] = `${D.label} is required`);
             }
           });
         });
       }
     }), f;
-  }, V = (f) => Object.keys(f).length > 0, j = () => {
-    const f = U();
-    if (g(f), V(f)) {
+  }, q = (f) => Object.keys(f).length > 0, G = () => {
+    const f = V();
+    if (g(f), q(f)) {
       let d = [];
-      Object.keys(f).forEach((h) => {
-        typeof f[h] == "object" && Object.keys(f[h]).forEach((x) => {
-          typeof f[h][x] == "object" ? Object.keys(f[h][x]).forEach((F) => {
-            d.push(`${h} row ${parseInt(x) + 1}: ${f[h][x][F]}`);
-          }) : d.push(`${h}: ${f[h][x]}`);
+      Object.keys(f).forEach((m) => {
+        typeof f[m] == "object" && Object.keys(f[m]).forEach((b) => {
+          typeof f[m][b] == "object" ? Object.keys(f[m][b]).forEach((D) => {
+            d.push(`${m} row ${parseInt(b) + 1}: ${f[m][b][D]}`);
+          }) : d.push(`${m}: ${f[m][b]}`);
         });
       });
       return;
@@ -5406,52 +5403,52 @@ function Un({
       try {
         k(!0);
         const d = {};
-        c && Object.keys(c).forEach((x) => {
-          const F = r?.configuration?.find(
-            (z) => z.key === x && z.type === "datatable"
+        c && Object.keys(c).forEach((b) => {
+          const D = r?.configuration?.find(
+            (R) => R.key === b && R.type === "datatable"
           );
-          F && Array.isArray(c[x]) ? d[x] = c[x].map((z) => {
-            const q = { id: z.id || 0 };
-            return F.fields && F.fields.forEach((D) => {
-              if (D.fieldtype === "audience") {
+          D && Array.isArray(c[b]) ? d[b] = c[b].map((R) => {
+            const j = { id: R.id || 0 };
+            return D.fields && D.fields.forEach((S) => {
+              if (S.fieldtype === "audience") {
                 let A = { users: [], groups: [], roles: [] };
-                z[D.key] && typeof z[D.key] == "object" && !Array.isArray(z[D.key]) && (A = {
-                  users: z[D.key].users || [],
-                  groups: z[D.key].groups || [],
-                  roles: z[D.key].roles || []
-                }), q[D.key] = A;
+                R[S.key] && typeof R[S.key] == "object" && !Array.isArray(R[S.key]) && (A = {
+                  users: R[S.key].users || [],
+                  groups: R[S.key].groups || [],
+                  roles: R[S.key].roles || []
+                }), j[S.key] = A;
               } else
-                q[D.key] = z[D.key] || "";
-            }), q;
-          }) : d[x] = c[x];
+                j[S.key] = R[S.key] || "";
+            }), j;
+          }) : d[b] = c[b];
         });
-        let h = await Re(L, d);
-        if (console.log(), h && h.status != "fail") {
+        let m = await Re(L, d);
+        if (console.log(), m && m.status != "fail") {
           g({});
-          const x = h.message || "Configuration has been saved successfully";
-          ke.success(x), n && typeof n == "function" && n(c);
+          const b = m.message || "Configuration has been saved successfully";
+          ke.success(b), n && typeof n == "function" && n(c);
         } else
-          throw ke.error(h?.message || "Failed to save configuration"), new Error("No response received from server");
+          throw ke.error(m?.message || "Failed to save configuration"), new Error("No response received from server");
       } catch (d) {
         console.error("Error saving configuration:", d), ke.error(d?.message || "Failed to save configuration");
       } finally {
         k(!1);
       }
     })();
-  }, v = () => {
+  }, N = () => {
     if (o) {
       o();
       return;
     }
-    m && Object.keys(m).length > 0 && !window.confirm(
+    h && Object.keys(h).length > 0 && !window.confirm(
       "You have validation errors that will be lost. Are you sure you want to cancel?"
     ) || (g({}), y(null), C((w) => w + 1), ke.info("Configuration changes cancelled"));
   };
   if (!u?.configuration && !r?.configuration)
     return /* @__PURE__ */ e("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "text-gray-500", children: "No configuration available" }) });
   const p = r?.configuration || u?.configuration;
-  return Q(() => {
-    s && r ? (!c || Object.keys(c).length === 0) && E() : s && !r && E();
+  return X(() => {
+    s && r ? (!c || Object.keys(c).length === 0) && I() : s && !r && I();
   }, [s, r]), /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ l(
       "div",
@@ -5459,8 +5456,8 @@ function Un({
         className: "dynamic-config bg-white w-full h-[calc(100vh-350px)] overflow-y-auto",
         style: { padding: "0px 20px 0px 0px" },
         children: [
-          b && /* @__PURE__ */ e("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ e(qa, { size: "large" }) }),
-          !b && p?.map((f, w) => {
+          v && /* @__PURE__ */ e("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ e(qa, { size: "large" }) }),
+          !v && p?.map((f, w) => {
             const d = Mn(f.type);
             if (d && d !== "UnknownType")
               return /* @__PURE__ */ e(
@@ -5468,8 +5465,8 @@ function Un({
                 {
                   item: f,
                   data: c,
-                  updateHandler: R,
-                  validationErrors: m
+                  updateHandler: E,
+                  validationErrors: h
                 },
                 w
               );
@@ -5479,19 +5476,19 @@ function Un({
     ),
     /* @__PURE__ */ l("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", style: { boxShadow: "0 -2px 10px 0 rgba(0, 0, 0, 0.20)", marginTop: "20px" }, children: [
       /* @__PURE__ */ e(
-        Z,
+        H,
         {
           category: "secondary",
-          onClick: v,
+          onClick: N,
           label: "Cancel",
           disabled: a
         }
       ),
       /* @__PURE__ */ e(
-        Z,
+        H,
         {
           category: "primary",
-          onClick: j,
+          onClick: G,
           disabled: a,
           label: a ? "Saving..." : "Apply",
           type: "submit"
@@ -5506,12 +5503,12 @@ const ys = ({
   disableApi: s = !1
 }) => {
   const [o, n] = B(0), [u, i] = B(!1), [c, y] = B(r), {
-    pageHeader: b = {},
-    appletHeader: N = {},
+    pageHeader: v = {},
+    appletHeader: x = {},
     breadcrumb: a = [],
     overview: k = {},
-    configuration: m = []
-  } = t, g = m.map((p) => {
+    configuration: h = []
+  } = t, g = h.map((p) => {
     if (p.type === "section" && p.fields) {
       const f = [...p.fields], w = f.findIndex((d) => d.key === "appkey");
       if (w !== -1) {
@@ -5522,15 +5519,15 @@ const ys = ({
           value: r,
           disabled: !0,
           placeholder: r
-        }, f.some((x) => x.key === "displayname")) {
-          const x = f.findIndex((F) => F.key === "displayname");
-          f[x] = {
-            ...f[x],
+        }, f.some((b) => b.key === "displayname")) {
+          const b = f.findIndex((D) => D.key === "displayname");
+          f[b] = {
+            ...f[b],
             default: r,
             value: r
           };
         } else {
-          const x = {
+          const b = {
             key: "displayname",
             label: "Display Name",
             fieldtype: "text",
@@ -5539,7 +5536,7 @@ const ys = ({
             placeholder: "Enter display name",
             required: !1
           };
-          f.splice(w + 1, 0, x);
+          f.splice(w + 1, 0, b);
         }
       }
       return {
@@ -5553,11 +5550,11 @@ const ys = ({
     subHeading: "View app details and customize configurations to align with institutional requirements.",
     isLeftArrow: !0,
     onBackClick: () => window.history.back(),
-    ...b
+    ...v
   }, L = a.map((p) => ({
     label: p.text,
     href: p.href || "#"
-  })), M = K(() => {
+  })), O = K(() => {
     console.log("handleCancelRequest called - showing modal"), i(!0);
   }, []), C = K((p) => {
     i(!1), p.primary ? (console.log("User confirmed cancel - navigating back"), window.history.back()) : console.log("User cancelled the cancel action - modal closed, data preserved");
@@ -5573,18 +5570,18 @@ const ys = ({
   ae.useEffect(() => {
     y(T());
   }, [g]);
-  const E = K((p) => {
+  const I = K((p) => {
     console.log("Config saved with data:", p), Object.keys(p).forEach((f) => {
       const w = p[f];
       console.log(`Checking section ${f}:`, w), w && w.displayname && (console.log("Found displayname:", w.displayname), y(w.displayname));
     });
-  }, []), R = {
+  }, []), E = {
     subHeading: "Application configuration and details",
     tags: [],
-    ...N,
+    ...x,
     heading: c
     // Ensure displayname always overrides config heading
-  }, U = {
+  }, V = {
     about: "This application provides comprehensive functionality for your organization.",
     images: {
       desktop: "https://via.placeholder.com/600x400?text=Desktop+View",
@@ -5602,14 +5599,14 @@ const ys = ({
       }
     ],
     ...k
-  }, V = [
-    { label: "Overview", content: v(U) },
-    { label: "Configuration", content: /* @__PURE__ */ e(Un, { appid: r, configdata: { configuration: g }, disableApi: s, onCancel: M, onSave: E }) }
+  }, q = [
+    { label: "Overview", content: N(V) },
+    { label: "Configuration", content: /* @__PURE__ */ e(Un, { appid: r, configdata: { configuration: g }, disableApi: s, onCancel: O, onSave: I }) }
   ];
-  function j(p) {
+  function G(p) {
     return p ? p.includes("<svg") ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: p } }) : p : "📱";
   }
-  function v(p) {
+  function N(p) {
     return /* @__PURE__ */ l("div", { className: "bg-white rounded-2xl p-1", children: [
       /* @__PURE__ */ l("section", { className: "mb-8", children: [
         /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-2", children: "About" }),
@@ -5663,11 +5660,11 @@ const ys = ({
       }
     ),
     /* @__PURE__ */ l("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
-      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: j(R.icon) }),
+      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: G(E.icon) }),
       /* @__PURE__ */ l("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: R.heading }),
-        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: R.subHeading }),
-        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: R.tags && R.tags.map((p, f) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: E.heading }),
+        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: E.subHeading }),
+        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: E.tags && E.tags.map((p, f) => /* @__PURE__ */ e(
           "span",
           {
             className: "pill inline-block px-[10px] py-[6px] rounded-[14px] text-[11px] border border-[#e6e9ee] text-[#767676] font-semibold mt-1",
@@ -5678,7 +5675,7 @@ const ys = ({
       ] })
     ] }),
     /* @__PURE__ */ l("div", { className: "bg-white border border-gray-300 rounded-2xl w-full mt-5 ", children: [
-      /* @__PURE__ */ e("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ e("nav", { className: "flex space-x-8", "aria-label": "Tabs", children: V.map((p, f) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ e("nav", { className: "flex space-x-8", "aria-label": "Tabs", children: q.map((p, f) => /* @__PURE__ */ e(
         "button",
         {
           onClick: () => n(f),
@@ -5687,7 +5684,7 @@ const ys = ({
         },
         f
       )) }) }),
-      /* @__PURE__ */ e("div", { className: "p-8 h-full overflow-y-auto", children: V[o].content })
+      /* @__PURE__ */ e("div", { className: "p-8 h-full overflow-y-auto", children: q[o].content })
     ] }),
     /* @__PURE__ */ e(
       Zr,
@@ -5742,66 +5739,66 @@ const bs = ({
   addBtnText: c = "Add",
   // Feature toggles
   showSearch: y = !0,
-  showColumnChooser: b = !0,
-  showFilter: N = !1,
+  showColumnChooser: v = !0,
+  showFilter: x = !1,
   showPrint: a = !1,
   showExcel: k = !1,
-  showPdf: m = !1,
+  showPdf: h = !1,
   showRefresh: g = !1,
   showAdd: $ = !1,
   // Additional props
   searchPlaceholder: L = "Search...",
-  handleRefreshClick: M = () => {
+  handleRefreshClick: O = () => {
   },
   handleSearchChange: C = () => {
   },
   // Optional: override export file names
   excelFileName: T,
-  pdfFileName: E
+  pdfFileName: I
 }) => {
-  const R = () => n?.current || o?.current, [U, V] = ae.useState(""), j = (t || "export").toString().trim() || "export", v = `${T || j}.xlsx`, p = `${E || j}.pdf`, f = (h, x, F) => Math.max(x, Math.min(h, F)), w = K(
-    (h) => {
-      const x = R();
-      if (console.log("openColumnChooserNear", x), !!x?.openColumnChooser) {
-        if (typeof window > "u" || !h?.currentTarget) {
-          x.openColumnChooser();
+  const E = () => n?.current || o?.current, [V, q] = ae.useState(""), G = (t || "export").toString().trim() || "export", N = `${T || G}.xlsx`, p = `${I || G}.pdf`, f = (m, b, D) => Math.max(b, Math.min(m, D)), w = K(
+    (m) => {
+      const b = E();
+      if (console.log("openColumnChooserNear", b), !!b?.openColumnChooser) {
+        if (typeof window > "u" || !m?.currentTarget) {
+          b.openColumnChooser();
           return;
         }
         try {
-          const F = h.currentTarget.getBoundingClientRect(), z = F.left + window.scrollX, q = F.bottom + window.scrollY;
-          let D = z - 120, A = q - 120;
-          const S = window.innerWidth, I = window.innerHeight;
-          D = f(D, window.scrollX + 8, window.scrollX + S - 340), A = f(A, window.scrollY, window.scrollY + I - 120), console.log("openColumnChooserNear", D, A), x.openColumnChooser(D, A);
-        } catch (F) {
-          console.log("coloumn choose error", F);
+          const D = m.currentTarget.getBoundingClientRect(), R = D.left + window.scrollX, j = D.bottom + window.scrollY;
+          let S = R - 120, A = j - 120;
+          const M = window.innerWidth, F = window.innerHeight;
+          S = f(S, window.scrollX + 8, window.scrollX + M - 340), A = f(A, window.scrollY, window.scrollY + F - 120), console.log("openColumnChooserNear", S, A), b.openColumnChooser(S, A);
+        } catch (D) {
+          console.log("coloumn choose error", D);
         }
       }
     },
     []
     // no external deps; reads ref at call time
   ), d = K(
-    (h, x) => {
-      const F = R();
-      if (F)
-        switch (h) {
+    (m, b) => {
+      const D = E();
+      if (D)
+        switch (m) {
           case "ColumnChooser":
-            b && (console.log("openColumnChooser", x), x ? w(x) : F.openColumnChooser?.()), console.log("openColumnChooser out", x);
+            v && (console.log("openColumnChooser", b), b ? w(b) : D.openColumnChooser?.()), console.log("openColumnChooser out", b);
             break;
           case "Print":
-            a && F.print?.();
+            a && D.print?.();
             break;
           case "Excel":
-            k && F.excelExport?.({ fileName: v });
+            k && D.excelExport?.({ fileName: N });
             break;
           case "Pdf":
-            m && F.pdfExport?.({ fileName: p });
+            h && D.pdfExport?.({ fileName: p });
             break;
           case "Refresh":
-            g && M();
+            g && O();
             break;
         }
     },
-    [b, a, k, m, g, v, p, M, w]
+    [v, a, k, h, g, N, p, O, w]
   );
   return /* @__PURE__ */ l("div", { className: "flex items-center flex-wrap justify-between w-full px-4 py-2 bg-white border border-gray-200 rounded-t-2xl mb-0", children: [
     /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
@@ -5817,27 +5814,27 @@ const bs = ({
         he,
         {
           placeholder: L,
-          value: U,
-          onDebouncedChange: (h) => {
-            V(h), C(h);
+          value: V,
+          onDebouncedChange: (m) => {
+            q(m), C(m);
           }
         }
       ) }),
       /* @__PURE__ */ l("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5", children: [
-          b && /* @__PURE__ */ e(
-            Z,
+          v && /* @__PURE__ */ e(
+            H,
             {
               icon: Xt,
-              onClick: (h) => d("ColumnChooser", h),
+              onClick: (m) => d("ColumnChooser", m),
               size: "small",
               ariaLabel: "Column Chooser",
               category: "secondary",
               title: "Choose Columns"
             }
           ),
-          N && /* @__PURE__ */ e(
-            Z,
+          x && /* @__PURE__ */ e(
+            H,
             {
               icon: Zt,
               onClick: i,
@@ -5848,7 +5845,7 @@ const bs = ({
             }
           ),
           a && /* @__PURE__ */ e(
-            Z,
+            H,
             {
               icon: Ht,
               onClick: () => d("Print"),
@@ -5859,18 +5856,18 @@ const bs = ({
             }
           ),
           k && /* @__PURE__ */ e(
-            Z,
+            H,
             {
               icon: Kt,
               onClick: () => d("Excel"),
               ariaLabel: "Excel Download",
               size: "small",
               category: "secondary",
-              title: `Export Excel (${v})`
+              title: `Export Excel (${N})`
             }
           ),
-          m && /* @__PURE__ */ e(
-            Z,
+          h && /* @__PURE__ */ e(
+            H,
             {
               icon: er,
               onClick: () => d("Pdf"),
@@ -5881,7 +5878,7 @@ const bs = ({
             }
           ),
           g && /* @__PURE__ */ e(
-            Z,
+            H,
             {
               icon: ar,
               onClick: () => d("Refresh"),
@@ -5893,7 +5890,7 @@ const bs = ({
           )
         ] }),
         $ && u && /* @__PURE__ */ e(
-          Z,
+          H,
           {
             label: c,
             icon: tr,
@@ -5919,71 +5916,71 @@ function vs(t) {
     allowSorting: i = !0,
     allowFiltering: c = !1,
     allowGrouping: y = !1,
-    allowReordering: b = !0,
-    allowResizing: N = !0,
+    allowReordering: v = !0,
+    allowResizing: x = !0,
     allowExcelExport: a = !1,
     allowPdfExport: k = !1,
-    showColumnChooser: m = !1,
+    showColumnChooser: h = !1,
     enableSearchApi: g = !1,
     height: $ = "600",
     selectionSettings: L = { type: "Multiple", mode: "Row" },
-    enableCheckbox: M = !1,
+    enableCheckbox: O = !1,
     columns: C = [],
     onGridStateChange: T,
-    onRowSelected: E,
-    onRowDeselected: R,
-    onRowDoubleClick: U,
-    apiRef: V,
-    gridProps: j = {}
-  } = t, v = ue(null), {
+    onRowSelected: I,
+    onRowDeselected: E,
+    onRowDoubleClick: V,
+    apiRef: q,
+    gridProps: G = {}
+  } = t, N = ue(null), {
     pageSettings: p,
     sortSettings: f,
     ...w
-  } = j || {}, [d, h] = ae.useState(p?.page || 1), [x, F] = ae.useState(f?.pageSize || 20), [z, q] = ae.useState(f?.sortKey || "updatedDate"), [D, A] = ae.useState(f?.direction || "Descending"), S = ce(() => {
-    const P = [$r];
-    return i && P.push(Fr), c && P.push(Tr), y && P.push(Ar), g && P.push(Er), a && P.push(Rr), k && P.push(Ir), m && P.push(zr), N && P.push(Pr), b && P.push(Br), P.push(Lr), P;
-  }, [i, c, y, g, a, k, m, N, b]), I = ce(() => {
-    const P = () => v.current, te = (_, pe) => {
-      !pe && process.env.NODE_ENV !== "production" && console.warn(`[CustomDataGrid] ${_} requested but related service/feature is disabled.`);
+  } = G || {}, [d, m] = ae.useState(p?.page || 1), [b, D] = ae.useState(f?.pageSize || 20), [R, j] = ae.useState(f?.sortKey || "updatedDate"), [S, A] = ae.useState(f?.direction || "Descending"), M = ce(() => {
+    const P = [Fr];
+    return i && P.push($r), c && P.push(Tr), y && P.push(Ar), g && P.push(Er), a && P.push(Rr), k && P.push(Ir), h && P.push(zr), x && P.push(Pr), v && P.push(Br), P.push(Lr), P;
+  }, [i, c, y, g, a, k, h, x, v]), F = ce(() => {
+    const P = () => N.current, te = (W, pe) => {
+      !pe && process.env.NODE_ENV !== "production" && console.warn(`[CustomDataGrid] ${W} requested but related service/feature is disabled.`);
     };
     return {
       getInstance: () => P(),
       refresh: () => P()?.refresh?.(),
       getSelectedRecords: () => P()?.getSelectedRecords?.() ?? [],
       clearSelection: () => P()?.clearSelection?.(),
-      selectRow: (_) => P()?.selectRow?.(_),
-      selectRows: (_) => P()?.selectRows?.(_),
-      search: (_) => {
-        te("search()", g), P()?.search?.(_);
+      selectRow: (W) => P()?.selectRow?.(W),
+      selectRows: (W) => P()?.selectRows?.(W),
+      search: (W) => {
+        te("search()", g), P()?.search?.(W);
       },
       print: () => P()?.print?.(),
-      excelExport: (_) => {
-        te("excelExport()", a), P()?.excelExport?.(_);
+      excelExport: (W) => {
+        te("excelExport()", a), P()?.excelExport?.(W);
       },
-      pdfExport: (_) => {
-        te("pdfExport()", k), P()?.pdfExport?.(_);
+      pdfExport: (W) => {
+        te("pdfExport()", k), P()?.pdfExport?.(W);
       },
-      openColumnChooser: (_, pe) => {
-        te("openColumnChooser()", m), P()?.columnChooserModule?.openColumnChooser?.(_, pe);
+      openColumnChooser: (W, pe) => {
+        te("openColumnChooser()", h), P()?.columnChooserModule?.openColumnChooser?.(W, pe);
       }
     };
   }, []);
-  Q(() => {
-    V && (V.current = I);
-  }, [V, I]), Q(() => () => {
-    V && (V.current = null);
+  X(() => {
+    q && (q.current = F);
+  }, [q, F]), X(() => () => {
+    q && (q.current = null);
   }, []);
-  const O = (P) => {
+  const z = (P) => {
     const te = String(P || "");
     return te === "Ascending" || te === "Descending" ? te : te.toLowerCase() === "ascending" ? "Ascending" : "Descending";
-  }, H = (P) => {
-    const te = v.current, _ = P?.requestType, pe = _ === "paging" ? "paging" : _ === "sorting" ? "sorting" : _ === "searching" ? "searching" : _ === "filtering" ? "filtering" : _ === "grouping" ? "grouping" : _ === "reorder" ? "reorder" : _ === "columnstate" ? "columnstate" : "other", $e = P?.pageSize ?? te?.pageSettings?.pageSize ?? x, Ie = P?.currentPage ?? te?.pageSettings?.currentPage ?? n, Je = P?.columnName && P?.direction ? [{ field: P.columnName, dir: O(P.direction) }] : (te?.sortSettings?.columns || []).map((Fe) => ({
-      field: Fe.field,
-      dir: O(Fe.direction ?? Fe.dir)
+  }, U = (P) => {
+    const te = N.current, W = P?.requestType, pe = W === "paging" ? "paging" : W === "sorting" ? "sorting" : W === "searching" ? "searching" : W === "filtering" ? "filtering" : W === "grouping" ? "grouping" : W === "reorder" ? "reorder" : W === "columnstate" ? "columnstate" : "other", Fe = P?.pageSize ?? te?.pageSettings?.pageSize ?? b, Ie = P?.currentPage ?? te?.pageSettings?.currentPage ?? n, Je = P?.columnName && P?.direction ? [{ field: P.columnName, dir: z(P.direction) }] : (te?.sortSettings?.columns || []).map(($e) => ({
+      field: $e.field,
+      dir: z($e.direction ?? $e.dir)
     })), Qe = P?.searchString ?? "", Xe = P?.columns ?? te?.filterSettings?.columns ?? [];
     return {
       reason: pe,
-      page: { index: Ie, size: $e, skip: (Ie - 1) * $e, take: $e },
+      page: { index: Ie, size: Fe, skip: (Ie - 1) * Fe, take: Fe },
       sort: Je,
       // [{ field, dir: 'Ascending'|'Descending' }]
       search: Qe,
@@ -5992,21 +5989,21 @@ function vs(t) {
     };
   }, Ne = (P) => {
     setTimeout(() => {
-      v?.current?.hideSpinner();
-    }, 1e3), P.requestType === "paging" && (h(P.currentPage), F(P.pageSize)), P.requestType === "sorting" && (q(P.columnName || "updatedDate"), A(P.direction === "Ascending" ? "ASC" : "DESC")), T && T(H(P), P);
+      N?.current?.hideSpinner();
+    }, 1e3), P.requestType === "paging" && (m(P.currentPage), D(P.pageSize)), P.requestType === "sorting" && (j(P.columnName || "updatedDate"), A(P.direction === "Ascending" ? "ASC" : "DESC")), T && T(U(P), P);
   }, ie = (P) => {
-    typeof U == "function" && U(P?.rowData, P);
+    typeof V == "function" && V(P?.rowData, P);
   }, xe = () => {
     const P = [];
-    return M && P.push(/* @__PURE__ */ e(ia, { type: "checkbox", width: "50" }, "__checkbox__")), C.forEach((te, _) => {
+    return O && P.push(/* @__PURE__ */ e(ia, { type: "checkbox", width: "50" }, "__checkbox__")), C.forEach((te, W) => {
       const {
         field: pe,
-        headerText: $e,
+        headerText: Fe,
         width: Ie,
         textAlign: Je = "Left",
         template: Qe,
         isPrimaryKey: Xe,
-        showInColumnChooser: Fe = !0,
+        showInColumnChooser: $e = !0,
         allowFiltering: tt = !0,
         allowSorting: rt = !0,
         type: nt,
@@ -6022,12 +6019,12 @@ function vs(t) {
           ia,
           {
             field: pe,
-            headerText: $e,
+            headerText: Fe,
             width: Ie,
             textAlign: Je,
             template: Qe,
             isPrimaryKey: Xe,
-            showInColumnChooser: Fe,
+            showInColumnChooser: $e,
             allowFiltering: tt,
             allowSorting: rt,
             type: nt,
@@ -6038,7 +6035,7 @@ function vs(t) {
             customAttributes: ct,
             ...dt
           },
-          pe || `col-${_}`
+          pe || `col-${W}`
         )
       );
     }), P;
@@ -6047,7 +6044,7 @@ function vs(t) {
     Or,
     {
       id: o,
-      ref: v,
+      ref: N,
       dataSource: {
         result: r,
         count: s
@@ -6057,23 +6054,23 @@ function vs(t) {
       allowSorting: i,
       allowFiltering: c,
       allowGrouping: y,
-      allowReordering: b,
-      allowResizing: N,
-      showColumnChooser: m,
+      allowReordering: v,
+      allowResizing: x,
+      showColumnChooser: h,
       selectionSettings: L,
       pageSettings: { pageSize: 10, pageSizes: p?.pageSizes ?? [20, 40, 60, 80, 100] },
       sortSettings: f ?? {
-        columns: [{ field: z, direction: O(D) }],
+        columns: [{ field: R, direction: z(S) }],
         allowUnsort: !1
       },
       actionBegin: Ne,
-      rowSelected: E,
-      rowDeselected: R,
+      rowSelected: I,
+      rowDeselected: E,
       recordDoubleClick: ie,
       ...w,
       children: [
         /* @__PURE__ */ e(Mr, { children: xe() }),
-        /* @__PURE__ */ e(Ur, { services: S })
+        /* @__PURE__ */ e(Ur, { services: M })
       ]
     }
   );
@@ -6097,7 +6094,7 @@ export {
   ys as FullConfigPage,
   ns as FullScreenLoader,
   as as GenericFilter,
-  W as Input,
+  Y as Input,
   et as ManageCollectionList,
   Zr as Modal,
   Ye as MultiSelect,
@@ -6115,7 +6112,7 @@ export {
   Ga as ToggleSwitch,
   ss as Tooltip,
   ps as TreeView,
-  Z as UnifyedCoreButton,
+  H as UnifyedCoreButton,
   ls as WizardModal,
   Qa as adGroupsListSearchApi,
   un as axiosDelete,