@starasia/admin 1.2.9 → 1.2.11

package/dist/index.es.js

@@ -3,29 +3,29 @@ import { Badges as XA } from "@starasia/badges";
 export * from "@starasia/badges";
 import { Box as a } from "@starasia/box";
 export * from "@starasia/box";
-import { Button as b } from "@starasia/button";
+import { Button as O } from "@starasia/button";
 export * from "@starasia/button";
 export * from "@starasia/card";
 import { StarasiaDate as $A } from "@starasia/date";
 export * from "@starasia/date";
-import { Dialog as QA, DialogBody as hA, DialogTitle as BA, DialogFooter as xA } from "@starasia/dialog";
+import { Dialog as hA, DialogBody as DA, DialogTitle as dA, DialogFooter as xA } from "@starasia/dialog";
 export * from "@starasia/dialog";
 import { Drawer as ae } from "@starasia/drawer";
 export * from "@starasia/drawer";
 import { Dropdown as fA } from "@starasia/dropdown";
 export * from "@starasia/dropdown";
-import { useMediaQuery as V, useConfirmation as _A } from "@starasia/hooks";
+import { useMediaQuery as X, useConfirmation as _A } from "@starasia/hooks";
 export * from "@starasia/hooks";
-import { searchParamsToObject as DA } from "@starasia/http";
+import { searchParamsToObject as IA } from "@starasia/http";
 export * from "@starasia/http";
-import { Input as IA } from "@starasia/input";
+import { Input as uA } from "@starasia/input";
 export * from "@starasia/input";
 import { Menu as Ce, MenuButton as Be, MenuLists as we, MenuBody as de } from "@starasia/menu";
 export * from "@starasia/menu";
 import { Pagination as Qe } from "@starasia/pagination";
 export * from "@starasia/pagination";
 export * from "@starasia/storage";
-import { Tr as dA, Td as sA, Table as Ae, Thead as he, Th as TA, Tbody as De } from "@starasia/table";
+import { Tr as QA, Td as BA, Table as Ae, Thead as he, Th as TA, Tbody as De } from "@starasia/table";
 export * from "@starasia/table";
 export * from "@starasia/tabs";
 import { Textarea as Ie } from "@starasia/textarea";
@@ -35,28 +35,28 @@ export * from "@starasia/theme";
 export * from "@starasia/toast";
 import { Toggle as ee } from "@starasia/toggle";
 export * from "@starasia/toggle";
-import { Tooltip as iA } from "@starasia/tooltip";
+import { Tooltip as tA } from "@starasia/tooltip";
 export * from "@starasia/tooltip";
 import { Checkbox as FA } from "@starasia/checkbox";
 export * from "@starasia/checkbox";
-import { Radio as Me } from "@starasia/radio";
+import { Radio as Ee } from "@starasia/radio";
 export * from "@starasia/radio";
 import { Text as Q } from "@starasia/text";
 export * from "@starasia/text";
 import { Icon as m } from "@starasia/icon";
 export * from "@starasia/icon";
-import { Flex as J } from "@starasia/flex";
+import { Flex as q } from "@starasia/flex";
 export * from "@starasia/flex";
 export * from "@starasia/progress";
 export * from "@starasia/stepper";
 export * from "@starasia/accordion";
 export * from "@starasia/story-record";
-import { Skeleton as lA } from "@starasia/skeleton";
+import { Skeleton as cA } from "@starasia/skeleton";
 export * from "@starasia/skeleton";
-import { jsx as A, jsxs as g, Fragment as W } from "react/jsx-runtime";
-import cA, { createContext as Ee, useState as G, useContext as me, memo as _, useRef as AA, useEffect as R, useLayoutEffect as zA, useMemo as oA, isValidElement as ie, forwardRef as HA, useCallback as JA, Children as ye, useImperativeHandle as xe } from "react";
+import { jsx as A, jsxs as s, Fragment as W } from "react/jsx-runtime";
+import gA, { createContext as Me, useState as b, useContext as me, memo as _, useRef as eA, useEffect as U, useLayoutEffect as zA, useMemo as oA, isValidElement as ie, forwardRef as HA, useCallback as JA, Children as ye, useImperativeHandle as xe } from "react";
 import "@starasia/css/dist/style.css";
-import { useSearchParams as uA, useNavigate as te, useLocation as SA, Outlet as WA, Link as fe, useParams as re } from "react-router";
+import { useSearchParams as kA, useNavigate as te, useLocation as SA, Outlet as WA, Link as fe, useParams as re } from "react-router";
 import Se from "react-easy-crop";
 const Le = {
   menus: [],
@@ -66,8 +66,8 @@ const Le = {
   userData: null,
   setUserData: () => {
   }
-}, oe = Ee(Le), be = () => me(oe), Ge = (e) => {
-  const [i, r] = G(
+}, oe = Me(Le), be = () => me(oe), Ge = (e) => {
+  const [i, r] = b(
     (e == null ? void 0 : e.initialUserData) || null
   );
   return {
@@ -83,7 +83,7 @@ const Le = {
   initialUserData: n,
   theme: l
 }) => {
-  const c = Ge({ initialUserData: n }), { theme: s } = ue();
+  const c = Ge({ initialUserData: n }), { theme: g } = ue();
   return /* @__PURE__ */ A(
     oe.Provider,
     {
@@ -95,7 +95,7 @@ const Le = {
         setUserData: c.setUserData,
         menuBottom: r
       },
-      children: l ? /* @__PURE__ */ A(UA, { value: l, children: e }) : s ? /* @__PURE__ */ A(UA, { value: s, children: e }) : e
+      children: l ? /* @__PURE__ */ A(UA, { value: l, children: e }) : g ? /* @__PURE__ */ A(UA, { value: g, children: e }) : e
     }
   );
 }, Kt = _(Oe);
@@ -142,7 +142,7 @@ function pe({
     t(l), i();
   };
   return /* @__PURE__ */ A(
-    QA,
+    hA,
     {
       isShow: e,
       onHide: i,
@@ -152,7 +152,7 @@ function pe({
         boxShadow: "none",
         border: "none"
       },
-      children: /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ g(
+      children: /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ s(
         "div",
         {
           style: {
@@ -161,7 +161,7 @@ function pe({
             gap: "16px"
           },
           children: [
-            /* @__PURE__ */ g(
+            /* @__PURE__ */ s(
               "button",
               {
                 onClick: () => n(null),
@@ -215,8 +215,8 @@ function pe({
             ),
             r.map((l) => {
               var C;
-              const c = o === l.id, s = ((C = l.items[0]) == null ? void 0 : C.icon) ?? "Grid";
-              return /* @__PURE__ */ g(
+              const c = o === l.id, g = ((C = l.items[0]) == null ? void 0 : C.icon) ?? "Grid";
+              return /* @__PURE__ */ s(
                 "button",
                 {
                   onClick: () => n(l.id),
@@ -246,7 +246,7 @@ function pe({
                           transition: "all 0.15s",
                           backdropFilter: "blur(4px)"
                         },
-                        children: /* @__PURE__ */ A(m, { name: s, size: "md" })
+                        children: /* @__PURE__ */ A(m, { name: g, size: "md" })
                       }
                     ),
                     /* @__PURE__ */ A(
@@ -276,7 +276,7 @@ function pe({
     }
   );
 }
-let EA = 0, gA = !1;
+let MA = 0, CA = !1;
 function Zt({
   children: e,
   headerRight: i,
@@ -286,122 +286,122 @@ function Zt({
   isLoggingOut: n,
   loadingComponent: l,
   sidebarHeaderContent: c,
-  showModuleSwitcher: s = !0
+  showModuleSwitcher: g = !0
 }) {
-  const [C] = uA(), d = C.get("embed") === "true", w = be(), B = te(), u = SA(), h = !V("md"), [Y, p] = G(!1), [N, U] = G(!1), [L, k] = G(!1), [Z, H] = G(/* @__PURE__ */ new Set()), [P, X] = G(!1), [q, E] = G(!1), [f, M] = G(null), D = AA(null), F = AA(null);
-  R(() => {
-    const I = D.current;
-    if (!I) return;
+  const [C] = kA(), d = C.get("embed") === "true", w = be(), B = te(), I = SA(), h = !X("md"), [j, p] = b(!1), [N, R] = b(!1), [f, k] = b(!1), [P, Z] = b(/* @__PURE__ */ new Set()), [V, AA] = b(!1), [T, E] = b(!1), [S, M] = b(null), D = eA(null), F = eA(null);
+  U(() => {
+    const u = D.current;
+    if (!u) return;
     const y = () => {
-      gA || (EA = I.scrollTop);
+      CA || (MA = u.scrollTop);
     };
-    return I.addEventListener("scroll", y), () => I.removeEventListener("scroll", y);
+    return u.addEventListener("scroll", y), () => u.removeEventListener("scroll", y);
   }, []);
   const x = () => {
-    const I = D.current;
-    I && EA > 0 && (gA = !0, I.scrollTop = EA, requestAnimationFrame(() => {
-      gA = !1;
+    const u = D.current;
+    u && MA > 0 && (CA = !0, u.scrollTop = MA, requestAnimationFrame(() => {
+      CA = !1;
     }));
   };
   zA(() => {
-    gA = !0, x();
-    const I = setTimeout(() => {
-      gA = !1;
+    CA = !0, x();
+    const u = setTimeout(() => {
+      CA = !1;
     }, 300);
-    return () => clearTimeout(I);
+    return () => clearTimeout(u);
   }, []), zA(() => {
-    w.menus.length > 0 && (EA > 0 ? x() : requestAnimationFrame(() => {
+    w.menus.length > 0 && (MA > 0 ? x() : requestAnimationFrame(() => {
       var y;
-      const I = (y = D.current) == null ? void 0 : y.querySelector(
+      const u = (y = D.current) == null ? void 0 : y.querySelector(
         "[data-menu-active='true']"
       );
-      I && I.scrollIntoView({ block: "center", behavior: "instant" });
+      u && u.scrollIntoView({ block: "center", behavior: "instant" });
     }));
-  }, [w.menus]), R(() => {
-    gA = !0, x();
-    const I = setTimeout(x, 0), y = setTimeout(x, 50), S = setTimeout(x, 100), v = setTimeout(x, 200), eA = setTimeout(() => {
-      gA = !1;
+  }, [w.menus]), U(() => {
+    CA = !0, x();
+    const u = setTimeout(x, 0), y = setTimeout(x, 50), L = setTimeout(x, 100), v = setTimeout(x, 200), iA = setTimeout(() => {
+      CA = !1;
     }, 300);
     return () => {
-      clearTimeout(I), clearTimeout(y), clearTimeout(S), clearTimeout(v), clearTimeout(eA);
+      clearTimeout(u), clearTimeout(y), clearTimeout(L), clearTimeout(v), clearTimeout(iA);
     };
-  }, [u.pathname]), R(() => {
+  }, [I.pathname]), U(() => {
     F.current && (F.current.scrollTop = 0);
-  }, [u.pathname]), R(() => {
+  }, [I.pathname]), U(() => {
     h && k(!1);
-  }, [u.pathname, h]), R(() => {
-    h && U(!0);
+  }, [I.pathname, h]), U(() => {
+    h && R(!0);
   }, [h]);
-  const T = () => {
+  const H = () => {
     p(!0);
-  }, tA = () => {
+  }, z = () => {
     p(!1);
-  }, wA = () => {
+  }, sA = () => {
     p(!1), t();
-  }, MA = w.menus.flatMap(
-    (I) => I.items.flatMap((y) => {
-      const S = [y.to];
-      return y.children && S.push(...y.children.map((v) => v.to)), S;
+  }, aA = w.menus.flatMap(
+    (u) => u.items.flatMap((y) => {
+      const L = [y.to];
+      return y.children && L.push(...y.children.map((v) => v.to)), L;
     })
-  ), CA = (I) => {
-    if (!u.pathname.startsWith(I)) return !1;
-    const y = MA.filter((S) => u.pathname.startsWith(S)).sort((S, v) => v.length - S.length)[0];
-    return I === y;
+  ), lA = (u) => {
+    if (!I.pathname.startsWith(u)) return !1;
+    const y = aA.filter((L) => I.pathname.startsWith(L)).sort((L, v) => v.length - L.length)[0];
+    return u === y;
   };
-  R(() => {
-    w.menus.forEach((I) => {
-      I.items.forEach((y) => {
-        var S;
-        (S = y.children) != null && S.some((v) => u.pathname.startsWith(v.to)) && H((v) => {
-          const eA = new Set(v);
-          return eA.add(y.id), eA;
+  U(() => {
+    w.menus.forEach((u) => {
+      u.items.forEach((y) => {
+        var L;
+        (L = y.children) != null && L.some((v) => I.pathname.startsWith(v.to)) && Z((v) => {
+          const iA = new Set(v);
+          return iA.add(y.id), iA;
         });
       });
     });
-  }, [u.pathname, w.menus]);
-  const ge = (I) => {
-    H((y) => {
-      const S = new Set(y);
-      return S.has(I) ? S.delete(I) : S.add(I), S;
+  }, [I.pathname, w.menus]);
+  const ge = (u) => {
+    Z((y) => {
+      const L = new Set(y);
+      return L.has(u) ? L.delete(u) : L.add(u), L;
     });
   };
-  R(() => {
+  U(() => {
     if (w.menus.length === 0) return;
-    const I = localStorage.getItem("moduleSwitcherGroupId");
-    if (I !== null) {
-      const y = Number(I), S = w.menus.some((v) => v.id === y);
-      M(S ? y : null);
+    const u = localStorage.getItem("moduleSwitcherGroupId");
+    if (u !== null) {
+      const y = Number(u), L = w.menus.some((v) => v.id === y);
+      M(L ? y : null);
     }
   }, [w.menus]);
-  const se = (I) => {
+  const se = (u) => {
     var y;
-    if (M(I), I === null)
+    if (M(u), u === null)
       localStorage.removeItem("moduleSwitcherGroupId");
     else {
-      localStorage.setItem("moduleSwitcherGroupId", String(I));
-      const S = w.menus.find((eA) => eA.id === I), v = (y = S == null ? void 0 : S.items[0]) == null ? void 0 : y.to;
+      localStorage.setItem("moduleSwitcherGroupId", String(u));
+      const L = w.menus.find((iA) => iA.id === u), v = (y = L == null ? void 0 : L.items[0]) == null ? void 0 : y.to;
       v && B(v);
     }
   }, bA = oA(() => {
-    if (f !== null)
+    if (S !== null)
       return w.menus.filter(
-        (S) => S.id === f || S.parentGroupId === f
+        (L) => L.id === S || L.parentGroupId === S
       );
-    const I = w.menus.filter((S) => S.parentGroupId === void 0), y = w.menus.filter((S) => S.parentGroupId !== void 0).flatMap((S) => S.items);
-    return y.length === 0 ? I : [
-      ...I,
+    const u = w.menus.filter((L) => L.parentGroupId === void 0), y = w.menus.filter((L) => L.parentGroupId !== void 0).flatMap((L) => L.items);
+    return y.length === 0 ? u : [
+      ...u,
       { id: 18, name: "Pengaturan", items: y, parentGroupId: void 0 }
     ];
-  }, [w.menus, f]), GA = oA(
-    () => bA.filter((I) => I.parentGroupId !== void 0 || I.id === 18).flatMap((I) => I.items),
+  }, [w.menus, S]), GA = oA(
+    () => bA.filter((u) => u.parentGroupId !== void 0 || u.id === 18).flatMap((u) => u.items),
     [bA]
   );
-  return R(() => {
-    X(!1);
-  }, [u.pathname]), R(() => {
-    s || E(!1);
-  }, [s]), d ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A(WA, {}) }) : /* @__PURE__ */ g(W, { children: [
-    /* @__PURE__ */ g(
+  return U(() => {
+    AA(!1);
+  }, [I.pathname]), U(() => {
+    g || E(!1);
+  }, [g]), d ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A(WA, {}) }) : /* @__PURE__ */ s(W, { children: [
+    /* @__PURE__ */ s(
       "div",
       {
         style: {
@@ -410,7 +410,7 @@ function Zt({
           // backgroundColor: "#f9fafb",
           position: "relative",
           "--app-sidebar-width": h ? "0px" : N ? "4rem" : "16rem",
-          "--app-footer-zindex": h && L ? "40" : "999"
+          "--app-footer-zindex": h && f ? "40" : "999"
         },
         children: [
           h && /* @__PURE__ */ A(
@@ -421,14 +421,14 @@ function Zt({
                 inset: 0,
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
                 zIndex: 40,
-                opacity: L ? 0.5 : 0,
-                pointerEvents: L ? "auto" : "none",
+                opacity: f ? 0.5 : 0,
+                pointerEvents: f ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
               onClick: () => k(!1)
             }
           ),
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ s(
             "aside",
             {
               style: {
@@ -437,7 +437,7 @@ function Zt({
                 ...h && {
                   inset: 0,
                   zIndex: 50,
-                  transform: L ? "translateX(0)" : "translateX(-100%)"
+                  transform: f ? "translateX(0)" : "translateX(-100%)"
                 },
                 backgroundColor: "white",
                 borderRight: "1px solid #e5e7eb",
@@ -447,7 +447,7 @@ function Zt({
                 flexShrink: h ? void 0 : 0
               },
               children: [
-                /* @__PURE__ */ g(
+                /* @__PURE__ */ s(
                   "div",
                   {
                     style: {
@@ -459,7 +459,7 @@ function Zt({
                       borderBottom: "1px solid #e5e7eb"
                     },
                     children: [
-                      /* @__PURE__ */ g(
+                      /* @__PURE__ */ s(
                         "div",
                         {
                           style: {
@@ -481,7 +481,7 @@ function Zt({
                                 }
                               }
                             ),
-                            (!N || L) && /* @__PURE__ */ A(
+                            (!N || f) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
@@ -535,7 +535,7 @@ function Zt({
                 !h && /* @__PURE__ */ A(
                   "button",
                   {
-                    onClick: () => U(!N),
+                    onClick: () => R(!N),
                     style: {
                       position: "absolute",
                       top: "1.5rem",
@@ -567,7 +567,7 @@ function Zt({
                         strokeWidth: "2",
                         children: N ? (
                           // Icon when collapsed (closed) - sidebar with arrow right
-                          /* @__PURE__ */ g(W, { children: [
+                          /* @__PURE__ */ s(W, { children: [
                             /* @__PURE__ */ A(
                               "path",
                               {
@@ -587,7 +587,7 @@ function Zt({
                           ] })
                         ) : (
                           // Icon when expanded (open) - sidebar with arrow left
-                          /* @__PURE__ */ g(W, { children: [
+                          /* @__PURE__ */ s(W, { children: [
                             /* @__PURE__ */ A(
                               "path",
                               {
@@ -627,7 +627,7 @@ function Zt({
                       paddingTop: "0.5rem",
                       paddingBottom: "0.5rem"
                     },
-                    children: bA.map((I) => /* @__PURE__ */ g("div", { style: { marginBottom: "1rem" }, children: [
+                    children: bA.map((u) => /* @__PURE__ */ s("div", { style: { marginBottom: "1rem" }, children: [
                       (!N || h) && /* @__PURE__ */ A(
                         "div",
                         {
@@ -643,17 +643,17 @@ function Zt({
                             letterSpacing: "0.05em",
                             transition: "opacity 0.3s"
                           },
-                          children: I.name
+                          children: u.name
                         }
                       ),
-                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: I.items.map((y) => {
-                        const S = y.children && y.children.length > 0, v = Z.has(y.id), eA = S ? y.children.some(($) => CA($.to)) : CA(y.to);
-                        return /* @__PURE__ */ g("div", { "data-menu-active": eA || void 0, children: [
-                          /* @__PURE__ */ g(
+                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: u.items.map((y) => {
+                        const L = y.children && y.children.length > 0, v = P.has(y.id), iA = L ? y.children.some(($) => lA($.to)) : lA(y.to);
+                        return /* @__PURE__ */ s("div", { "data-menu-active": iA || void 0, children: [
+                          /* @__PURE__ */ s(
                             "button",
                             {
                               onClick: () => {
-                                S ? ge(y.id) : B(y.to);
+                                L ? ge(y.id) : B(y.to);
                               },
                               style: {
                                 width: "100%",
@@ -668,21 +668,21 @@ function Zt({
                                 borderRadius: "var(--starasia-ui-radii-md)",
                                 textAlign: "left",
                                 border: "none",
-                                backgroundColor: eA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                color: eA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
+                                backgroundColor: iA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                color: iA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
                                 transition: "all 0.2s",
                                 cursor: "pointer"
                               },
                               title: N && !h ? y.title : void 0,
                               onMouseEnter: ($) => {
-                                eA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
+                                iA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
                               onMouseLeave: ($) => {
-                                eA || ($.currentTarget.style.backgroundColor = "transparent");
+                                iA || ($.currentTarget.style.backgroundColor = "transparent");
                               },
                               children: [
                                 /* @__PURE__ */ A(m, { name: y.icon, size: "sm", style: { flexShrink: 0 } }),
-                                (!N || h) && /* @__PURE__ */ g(W, { children: [
+                                (!N || h) && /* @__PURE__ */ s(W, { children: [
                                   /* @__PURE__ */ A(
                                     "span",
                                     {
@@ -696,7 +696,7 @@ function Zt({
                                       children: y.title
                                     }
                                   ),
-                                  S && /* @__PURE__ */ A(
+                                  L && /* @__PURE__ */ A(
                                     "svg",
                                     {
                                       style: {
@@ -724,7 +724,7 @@ function Zt({
                               ]
                             }
                           ),
-                          S && (!N || h) && /* @__PURE__ */ A(
+                          L && (!N || h) && /* @__PURE__ */ A(
                             "div",
                             {
                               style: {
@@ -737,7 +737,7 @@ function Zt({
                                 opacity: v ? 1 : 0,
                                 marginTop: v ? "0.25rem" : "0px"
                               },
-                              children: y.children.map(($) => /* @__PURE__ */ g(
+                              children: y.children.map(($) => /* @__PURE__ */ s(
                                 "button",
                                 {
                                   onClick: () => B($.to),
@@ -753,16 +753,16 @@ function Zt({
                                     borderRadius: "var(--starasia-ui-radii-md)",
                                     textAlign: "left",
                                     border: "none",
-                                    backgroundColor: CA($.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                    color: CA($.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
+                                    backgroundColor: lA($.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                    color: lA($.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
                                     transition: "all 0.2s",
                                     cursor: "pointer"
                                   },
                                   onMouseEnter: (OA) => {
-                                    CA($.to) || (OA.currentTarget.style.backgroundColor = "#f3f4f6");
+                                    lA($.to) || (OA.currentTarget.style.backgroundColor = "#f3f4f6");
                                   },
                                   onMouseLeave: (OA) => {
-                                    CA($.to) || (OA.currentTarget.style.backgroundColor = "transparent");
+                                    lA($.to) || (OA.currentTarget.style.backgroundColor = "transparent");
                                   },
                                   children: [
                                     /* @__PURE__ */ A(
@@ -792,14 +792,14 @@ function Zt({
                           )
                         ] }, y.id);
                       }) })
-                    ] }, I.id))
+                    ] }, u.id))
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ g("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-            /* @__PURE__ */ g(
+          /* @__PURE__ */ s("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+            /* @__PURE__ */ s(
               "header",
               {
                 style: {
@@ -814,7 +814,7 @@ function Zt({
                   flexShrink: 0
                 },
                 children: [
-                  /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
+                  /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
                     h && /* @__PURE__ */ A(
                       "button",
                       {
@@ -849,8 +849,8 @@ function Zt({
                     ),
                     i
                   ] }),
-                  /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
-                    s && /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+                    g && /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
                       /* @__PURE__ */ A(
                         "button",
                         {
@@ -868,16 +868,16 @@ function Zt({
                             cursor: "pointer"
                           },
                           "aria-label": "Pilih module",
-                          onMouseEnter: (I) => {
-                            I.currentTarget.style.backgroundColor = "#f9fafb";
+                          onMouseEnter: (u) => {
+                            u.currentTarget.style.backgroundColor = "#f9fafb";
                           },
-                          onMouseLeave: (I) => {
-                            I.currentTarget.style.backgroundColor = "transparent";
+                          onMouseLeave: (u) => {
+                            u.currentTarget.style.backgroundColor = "transparent";
                           },
                           children: /* @__PURE__ */ A(m, { name: "GridApplication", size: "sm" })
                         }
                       ),
-                      f !== null && /* @__PURE__ */ A(
+                      S !== null && /* @__PURE__ */ A(
                         "span",
                         {
                           style: {
@@ -893,11 +893,11 @@ function Zt({
                         }
                       )
                     ] }),
-                    GA.length > 0 && /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
+                    GA.length > 0 && /* @__PURE__ */ s("div", { style: { position: "relative" }, children: [
                       /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => X((I) => !I),
+                          onClick: () => AA((u) => !u),
                           style: {
                             display: "inline-flex",
                             alignItems: "center",
@@ -911,16 +911,16 @@ function Zt({
                             cursor: "pointer"
                           },
                           "aria-label": "Shortcut pengaturan",
-                          onMouseEnter: (I) => {
-                            I.currentTarget.style.backgroundColor = "#f9fafb";
+                          onMouseEnter: (u) => {
+                            u.currentTarget.style.backgroundColor = "#f9fafb";
                           },
-                          onMouseLeave: (I) => {
-                            I.currentTarget.style.backgroundColor = "transparent";
+                          onMouseLeave: (u) => {
+                            u.currentTarget.style.backgroundColor = "transparent";
                           },
                           children: /* @__PURE__ */ A(m, { name: "Settings", size: "sm" })
                         }
                       ),
-                      P && /* @__PURE__ */ A(
+                      V && /* @__PURE__ */ A(
                         "div",
                         {
                           style: {
@@ -936,11 +936,11 @@ function Zt({
                             paddingTop: "0.25rem",
                             paddingBottom: "0.25rem"
                           },
-                          children: GA.map((I) => /* @__PURE__ */ g(
+                          children: GA.map((u) => /* @__PURE__ */ s(
                             "button",
                             {
                               onClick: () => {
-                                B(I.to), X(!1);
+                                B(u.to), AA(!1);
                               },
                               style: {
                                 width: "100%",
@@ -965,11 +965,11 @@ function Zt({
                                 y.currentTarget.style.backgroundColor = "transparent";
                               },
                               children: [
-                                /* @__PURE__ */ A(m, { name: I.icon, size: "sm" }),
-                                /* @__PURE__ */ A("span", { children: I.title })
+                                /* @__PURE__ */ A(m, { name: u.icon, size: "sm" }),
+                                /* @__PURE__ */ A("span", { children: u.title })
                               ]
                             },
-                            I.id
+                            u.id
                           ))
                         }
                       )
@@ -985,7 +985,7 @@ function Zt({
                         "aria-hidden": "true"
                       }
                     ),
-                    /* @__PURE__ */ g(
+                    /* @__PURE__ */ s(
                       "div",
                       {
                         style: {
@@ -994,9 +994,9 @@ function Zt({
                           gap: "0.75rem",
                           cursor: "pointer"
                         },
-                        onClick: T,
+                        onClick: H,
                         children: [
-                          /* @__PURE__ */ g("div", { style: { textAlign: "right", maxWidth: "12.5rem" }, children: [
+                          /* @__PURE__ */ s("div", { style: { textAlign: "right", maxWidth: "12.5rem" }, children: [
                             /* @__PURE__ */ A(
                               "p",
                               {
@@ -1082,30 +1082,30 @@ function Zt({
         children: l
       }
     ),
-    s && /* @__PURE__ */ A(
+    g && /* @__PURE__ */ A(
       pe,
       {
-        isShow: q,
+        isShow: T,
         onHide: () => E(!1),
-        menus: w.menus.filter((I) => I.parentGroupId === void 0),
-        selectedGroupId: f,
+        menus: w.menus.filter((u) => u.parentGroupId === void 0),
+        selectedGroupId: S,
         onSelect: se
       }
     ),
-    /* @__PURE__ */ g(QA, { isShow: Y, onHide: tA, children: [
-      /* @__PURE__ */ A(BA, { children: "Confirmation Logout" }),
-      /* @__PURE__ */ A(hA, { children: "Are you sure you want to end the session and exit the page?" }),
-      /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ A(a, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ g(J, { direction: "row", gap: "sm", align: "center", children: [
-        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(b, { secondary: !0, onClick: tA, children: "Cancel" }) }),
-        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(b, { primary: !0, onClick: wA, children: "Yes, Sure" }) })
+    /* @__PURE__ */ s(hA, { isShow: j, onHide: z, children: [
+      /* @__PURE__ */ A(dA, { children: "Confirmation Logout" }),
+      /* @__PURE__ */ A(DA, { children: "Are you sure you want to end the session and exit the page?" }),
+      /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ A(a, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ s(q, { direction: "row", gap: "sm", align: "center", children: [
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { secondary: !0, onClick: z, children: "Cancel" }) }),
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { primary: !0, onClick: sA, children: "Yes, Sure" }) })
       ] }) }) })
     ] })
   ] });
 }
 const Ht = _(
   ({ children: e, coverImage: i, logo: r }) => {
-    const o = V("md"), t = ke();
-    return /* @__PURE__ */ g(
+    const o = X("md"), t = ke();
+    return /* @__PURE__ */ s(
       a,
       {
         direction: o ? "row" : "column",
@@ -1133,7 +1133,7 @@ const Ht = _(
                   minHeight: "100vh"
                 }
               },
-              children: /* @__PURE__ */ g(
+              children: /* @__PURE__ */ s(
                 a,
                 {
                   style: { backgroundColor: "#fff" },
@@ -1224,11 +1224,11 @@ const Ht = _(
         verticalAlign: n
       }),
       [t]
-    ), s = () => typeof i == "string" ? /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: i }) : i, C = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(Q, { color: "text", fontWeight: "medium", children: e }) : e;
-    return /* @__PURE__ */ g(dA, { children: [
-      /* @__PURE__ */ A(sA, { style: l, width: o, children: s() }),
-      r ? /* @__PURE__ */ A(sA, { style: c, width: 24, children: /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: ":" }) }) : null,
-      /* @__PURE__ */ A(sA, { style: l, children: C() })
+    ), g = () => typeof i == "string" ? /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: i }) : i, C = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(Q, { color: "text", fontWeight: "medium", children: e }) : e;
+    return /* @__PURE__ */ s(QA, { children: [
+      /* @__PURE__ */ A(BA, { style: l, width: o, children: g() }),
+      r ? /* @__PURE__ */ A(BA, { style: c, width: 24, children: /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: ":" }) }) : null,
+      /* @__PURE__ */ A(BA, { style: l, children: C() })
     ] });
   }
 ), Fe = _(({ fields: e, separator: i, labelWidth: r }) => /* @__PURE__ */ A(Ae, { children: e.map((o, t) => /* @__PURE__ */ A(
@@ -1277,7 +1277,7 @@ const Ht = _(
         paddingRight: "xl",
         paddingBottom: l ? "xs" : "lg",
         bg: "accent-dark-tertiary",
-        children: n.map((s, C) => /* @__PURE__ */ A(
+        children: n.map((g, C) => /* @__PURE__ */ A(
           a,
           {
             flex: l ? void 0 : "1",
@@ -1287,7 +1287,7 @@ const Ht = _(
               Fe,
               {
                 labelWidth: t,
-                fields: s,
+                fields: g,
                 separator: r
               }
             )
@@ -1309,32 +1309,32 @@ const Ht = _(
   const c = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(BA, { info: !0, children: e });
+        return /* @__PURE__ */ A(dA, { info: !0, children: e });
       case "danger":
-        return /* @__PURE__ */ A(BA, { danger: !0, children: e });
+        return /* @__PURE__ */ A(dA, { danger: !0, children: e });
       case "success":
-        return /* @__PURE__ */ A(BA, { success: !0, children: e });
+        return /* @__PURE__ */ A(dA, { success: !0, children: e });
       default:
-        return /* @__PURE__ */ A(BA, { success: !0, children: e });
+        return /* @__PURE__ */ A(dA, { success: !0, children: e });
     }
-  }, s = () => {
+  }, g = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(O, { primary: !0, onClick: o, children: n });
       case "danger":
-        return /* @__PURE__ */ A(b, { danger: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(O, { danger: !0, onClick: o, children: n });
       case "success":
-        return /* @__PURE__ */ A(b, { success: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(O, { success: !0, onClick: o, children: n });
       default:
-        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(O, { primary: !0, onClick: o, children: n });
     }
   };
-  return /* @__PURE__ */ g(QA, { isShow: t, onHide: r, children: [
+  return /* @__PURE__ */ s(hA, { isShow: t, onHide: r, children: [
     c(),
-    /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(Q, { children: i }) }),
-    /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
-      /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: "Cancel" }),
-      s()
+    /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ A(Q, { children: i }) }),
+    /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
+      /* @__PURE__ */ A(O, { secondary: !0, onClick: r, children: "Cancel" }),
+      g()
     ] }) })
   ] });
 }, ze = ({ children: e, ...i }) => /* @__PURE__ */ A(
@@ -1348,7 +1348,7 @@ const Ht = _(
     ...i,
     children: e
   }
-), aA = _(ze), Ke = ({
+), wA = _(ze), Ke = ({
   backButton: e,
   title: i,
   titleTag: r,
@@ -1357,33 +1357,33 @@ const Ht = _(
   action: n,
   titleTagProps: l,
   containerProps: c,
-  headerProps: s
+  headerProps: g
 }) => {
-  const C = V("lg"), d = te(), w = e == null ? void 0 : e.show, B = () => {
+  const C = X("lg"), d = te(), w = e == null ? void 0 : e.show, B = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
     d(-1, { replace: !0 });
-  }, u = () => n ? ie(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
-    ({ title: p, icon: N, buttonProps: U, onClick: L }, k) => !p && !N ? null : /* @__PURE__ */ A(
-      b,
+  }, I = () => n ? ie(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
+    ({ title: p, icon: N, buttonProps: R, onClick: f }, k) => !p && !N ? null : /* @__PURE__ */ A(
+      O,
       {
         fullWidth: !C,
         iconLeft: N ? /* @__PURE__ */ A(m, { name: N, size: "md" }) : void 0,
-        onClick: L,
-        ...U,
+        onClick: f,
+        ...R,
         children: p
       },
       `action-${k}`
     )
-  ) }) : null, j = () => e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
+  ) }) : null, G = () => e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
     fe,
     {
       to: e.navigateTo,
       replace: !0,
       style: { textDecoration: "none" },
-      children: /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
+      children: /* @__PURE__ */ s(a, { direction: "row", gap: "sm", align: "center", children: [
         /* @__PURE__ */ A(
           m,
           {
@@ -1408,7 +1408,7 @@ const Ht = _(
         )
       ] })
     }
-  ) }) : /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(aA, { onClick: B, children: /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
+  ) }) : /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(wA, { onClick: B, children: /* @__PURE__ */ s(a, { direction: "row", gap: "sm", align: "center", children: [
     /* @__PURE__ */ A(
       m,
       {
@@ -1431,28 +1431,37 @@ const Ht = _(
         children: (e == null ? void 0 : e.title) || "Back"
       }
     )
-  ] }) }) }), h = () => /* @__PURE__ */ g(a, { gap: "sm", ...s, children: [
-    w && j(),
-    /* @__PURE__ */ g(
-      a,
-      {
-        direction: C ? "row" : "column",
-        gap: "lg",
-        justify: "space-between",
-        align: "center",
-        children: [
-          typeof i == "string" ? /* @__PURE__ */ g(a, { direction: "row", gap: "lg", align: "center", children: [
-            /* @__PURE__ */ A(Q, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
-            r && /* @__PURE__ */ A(XA, { border: !0, size: "lg", text: r, ...l })
-          ] }) : i,
-          u()
-        ]
-      }
-    )
-  ] }), Y = () => o;
-  return /* @__PURE__ */ g(a, { gap: "lg", variant: "main", ...c, children: [
+  ] }) }) }), h = () => /* @__PURE__ */ s(
+    a,
+    {
+      gap: "sm",
+      paddingTop: (g == null ? void 0 : g.paddingTop) || "lg",
+      paddingInline: (g == null ? void 0 : g.paddingInline) || "xl",
+      ...g,
+      children: [
+        w && G(),
+        /* @__PURE__ */ s(
+          a,
+          {
+            direction: C ? "row" : "column",
+            gap: "lg",
+            justify: "space-between",
+            align: "center",
+            children: [
+              typeof i == "string" ? /* @__PURE__ */ s(a, { direction: "row", gap: "lg", align: "center", children: [
+                /* @__PURE__ */ A(Q, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
+                r && /* @__PURE__ */ A(XA, { border: !0, size: "lg", text: r, ...l })
+              ] }) : i,
+              I()
+            ]
+          }
+        )
+      ]
+    }
+  ), j = () => o;
+  return /* @__PURE__ */ s(a, { gap: "lg", variant: "main", ...c, children: [
     t && h(),
-    Y()
+    j()
   ] });
 }, Tt = _(Ke), Ze = {
   icon: "Cross",
@@ -1485,8 +1494,8 @@ const Ht = _(
         // new style
         ...o
       },
-      children: /* @__PURE__ */ g(a, { padding: "lg", children: [
-        l ? /* @__PURE__ */ g(
+      children: /* @__PURE__ */ s(a, { padding: "lg", children: [
+        l ? /* @__PURE__ */ s(
           a,
           {
             direction: "row",
@@ -1525,7 +1534,7 @@ const Ht = _(
   ) })
 ), He = _(
   ({ children: e, borderBottom: i = !0, padding: r = !0 }) => {
-    const o = V("lg");
+    const o = X("lg");
     return /* @__PURE__ */ A(
       a,
       {
@@ -1541,7 +1550,7 @@ const Ht = _(
     );
   }
 ), Je = _(({ children: e }) => {
-  const i = V("lg");
+  const i = X("lg");
   return /* @__PURE__ */ A(
     a,
     {
@@ -1561,41 +1570,41 @@ const Ht = _(
     searchField: n,
     header: l,
     onSearchChange: c,
-    searchKey: s = "q",
+    searchKey: g = "q",
     searchPlaceholder: C = "CTRL + K to search query",
     searchHighlightPlaceholder: d = "CTRL + K",
     filterContainer: w,
     actionContainer: B,
-    headerProps: u = { borderBottom: !0 },
-    variantTag: j = "info"
+    headerProps: I = { borderBottom: !0 },
+    variantTag: G = "info"
   }) => {
-    const h = V("lg"), [Y, p] = uA(), N = Y.get(s), U = DA(Y.toString()), L = JA(
-      ({ target: { value: P } }) => {
-        c && c(P), s && p({ ...U, [s]: P });
+    const h = X("lg"), [j, p] = kA(), N = j.get(g), R = IA(j.toString()), f = JA(
+      ({ target: { value: V } }) => {
+        c && c(V), g && p({ ...R, [g]: V });
       },
-      [s, c, p, U]
+      [g, c, p, R]
     ), k = () => /* @__PURE__ */ A(
-      IA,
+      uA,
       {
         placeholder: C,
         highlightPlaceholder: d,
         leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-        onChange: L,
+        onChange: f,
         style: { width: "100%" },
         value: N || ""
       }
-    ), Z = () => r ? /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
+    ), P = () => r ? /* @__PURE__ */ s(a, { direction: "row", gap: "sm", align: "center", children: [
       /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i }),
-      /* @__PURE__ */ A(XA, { border: !0, text: r, variant: j })
+      /* @__PURE__ */ A(XA, { border: !0, text: r, variant: G })
     ] }) : /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i });
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ s(
       a,
       {
         bg: "accent-dark-tertiary",
         borderRadius: "rounded-md",
         variant: "section",
         children: [
-          l !== null ? /* @__PURE__ */ A(He, { ...u, children: l || /* @__PURE__ */ g(
+          l !== null ? /* @__PURE__ */ A(He, { ...I, children: l || /* @__PURE__ */ s(
             a,
             {
               direction: "row",
@@ -1603,7 +1612,7 @@ const Ht = _(
               align: "flex-start",
               gap: "lg",
               children: [
-                /* @__PURE__ */ A(a, { ...w, children: t || (i ? Z() : null) }),
+                /* @__PURE__ */ A(a, { ...w, children: t || (i ? P() : null) }),
                 /* @__PURE__ */ A(
                   a,
                   {
@@ -1621,9 +1630,9 @@ const Ht = _(
     );
   }
 ), qe = "#E6E9FB", Te = ({ children: e, onClick: i }) => {
-  const [r, o] = G("");
+  const [r, o] = b("");
   return /* @__PURE__ */ A(
-    aA,
+    wA,
     {
       fullWidth: !0,
       height: "height-8",
@@ -1651,7 +1660,7 @@ const Ht = _(
   position: n = "bottom-right",
   buttonProps: l,
   iconProps: c,
-  variant: s = "default"
+  variant: g = "default"
 }) => {
   const C = oA(
     () => ({
@@ -1661,10 +1670,10 @@ const Ht = _(
     }),
     [t]
   );
-  return /* @__PURE__ */ g(Ce, { position: n, style: r, children: [
-    /* @__PURE__ */ A(Be, { style: o, children: /* @__PURE__ */ A(b, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(m, { name: e, ...c }) }) }),
-    /* @__PURE__ */ A(we, { style: C, children: i.map((d, w) => s === "outline-button" ? /* @__PURE__ */ A(de, { children: /* @__PURE__ */ g(
-      b,
+  return /* @__PURE__ */ s(Ce, { position: n, style: r, children: [
+    /* @__PURE__ */ A(Be, { style: o, children: /* @__PURE__ */ A(O, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(m, { name: e, ...c }) }) }),
+    /* @__PURE__ */ A(we, { style: C, children: i.map((d, w) => g === "outline-button" ? /* @__PURE__ */ A(de, { children: /* @__PURE__ */ s(
+      O,
       {
         size: "sm",
         secondary: !0,
@@ -1676,7 +1685,7 @@ const Ht = _(
           /* @__PURE__ */ A(Q, { fontSize: "sm", color: "text", ...d.textProps, children: d.label })
         ]
       }
-    ) }, d.id || w) : /* @__PURE__ */ g(
+    ) }, d.id || w) : /* @__PURE__ */ s(
       Ue,
       {
         onClick: d.onClick,
@@ -1689,10 +1698,10 @@ const Ht = _(
       d.id || w
     )) })
   ] });
-}, Wt = _(We), ne = cA.memo(({ text: e, onClose: i }) => {
+}, Wt = _(We), ne = gA.memo(({ text: e, onClose: i }) => {
   var o, t;
   const r = ZA();
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       direction: "row",
@@ -1710,7 +1719,7 @@ const Ht = _(
       children: [
         /* @__PURE__ */ A(a, { paddingLeft: "sm", flex: "1", children: /* @__PURE__ */ A(Q, { children: e }) }),
         /* @__PURE__ */ A(
-          aA,
+          wA,
           {
             justify: "center",
             align: "center",
@@ -1730,7 +1739,7 @@ const Ht = _(
       ]
     }
   );
-}), Re = cA.memo(({ items: e = [], onClose: i }) => /* @__PURE__ */ A(
+}), Re = gA.memo(({ items: e = [], onClose: i }) => /* @__PURE__ */ A(
   a,
   {
     direction: "row",
@@ -1760,27 +1769,27 @@ const Ht = _(
     }
   let r = new Date(e);
   return r = typeof e != "object" ? void 0 : r, r;
-}, Ve = cA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ g(a, { direction: "row", justify: "space-between", marginBottom: "md", children: [
+}, Ve = gA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ s(a, { direction: "row", justify: "space-between", marginBottom: "md", children: [
   /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(Q, { fontWeight: "bold", children: e }) }),
-  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(aA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(Q, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
-] })), Xe = cA.memo(
+  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(wA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(Q, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
+] })), Xe = gA.memo(
   ({ value: e, options: i = [], onChange: r, multiple: o }) => {
     const t = (e == null ? void 0 : e.map((c) => c.value)) || [], n = (i == null ? void 0 : i.filter((c) => t.includes(c.value))) || [], l = (c) => {
-      const s = [...n];
+      const g = [...n];
       let C = [];
-      o ? C = t.includes(c.value) ? s.filter((d) => d.value !== c.value) : [...s, c] : C = [c], r == null || r(C);
+      o ? C = t.includes(c.value) ? g.filter((d) => d.value !== c.value) : [...g, c] : C = [c], r == null || r(C);
     };
-    return /* @__PURE__ */ A(a, { direction: "row", gap: "sm", flexWrap: "wrap", children: i == null ? void 0 : i.map((c, s) => /* @__PURE__ */ A(
-      b,
+    return /* @__PURE__ */ A(a, { direction: "row", gap: "sm", flexWrap: "wrap", children: i == null ? void 0 : i.map((c, g) => /* @__PURE__ */ A(
+      O,
       {
         ...t.includes(c.value) ? { primary: !0 } : { secondary: !0 },
         onClick: () => l(c),
         children: c.label
       },
-      s
+      g
     )) });
   }
-), le = cA.memo(
+), le = gA.memo(
   HA(
     ({
       label: e,
@@ -1791,33 +1800,33 @@ const Ht = _(
       placeholder: n,
       relationLabel: l,
       name: c,
-      multiple: s,
+      multiple: g,
       searchable: C,
       onSearch: d,
       value: w,
       dateFilter: B,
-      enableInputDate: u,
-      withSearchParam: j,
+      enableInputDate: I,
+      withSearchParam: G,
       // disabled,
       rangedDate: h,
-      disabled: Y,
+      disabled: j,
       inputTextType: p = "text",
       min: N,
-      max: U
-    }, L) => {
+      max: R
+    }, f) => {
       const k = t == null ? void 0 : t.length;
-      let Z;
-      const H = () => {
+      let P;
+      const Z = () => {
         switch (i) {
           case "dropdown":
             return /* @__PURE__ */ A(
               fA,
               {
                 onSearch: d,
-                multiSelect: s,
+                multiSelect: g,
                 searchAble: C,
                 placeholder: n,
-                onChange: (q) => o == null ? void 0 : o({ value: q, name: c, type: i }),
+                onChange: (T) => o == null ? void 0 : o({ value: T, name: c, type: i }),
                 dropdownLists: r || [],
                 defaultValue: w || vA()
               }
@@ -1826,38 +1835,38 @@ const Ht = _(
             return /* @__PURE__ */ A(
               $A,
               {
-                input: u,
+                input: I,
                 filter: B,
-                value: Pe(w || Z, h),
-                onChange: (q) => o == null ? void 0 : o({ value: q, name: c, type: i }),
+                value: Pe(w || P, h),
+                onChange: (T) => o == null ? void 0 : o({ value: T, name: c, type: i }),
                 rangedDate: h,
-                ref: L
+                ref: f
               }
             );
           case "select-button":
             return /* @__PURE__ */ A(
               Xe,
               {
-                multiple: s,
+                multiple: g,
                 value: w || vA(),
-                onChange: (q) => o == null ? void 0 : o({ value: q, name: c, type: i }),
+                onChange: (T) => o == null ? void 0 : o({ value: T, name: c, type: i }),
                 options: r
               }
             );
           case "text":
             return /* @__PURE__ */ A(
-              IA,
+              uA,
               {
-                onChange: ({ target: { value: q } }) => o == null ? void 0 : o({ value: q, name: c, type: i }),
-                value: w || Z,
+                onChange: ({ target: { value: T } }) => o == null ? void 0 : o({ value: T, name: c, type: i }),
+                value: w || P,
                 placeholder: n,
-                disabled: Y,
+                disabled: j,
                 type: p,
                 name: c,
-                ...p === "number" && { min: N, max: U },
+                ...p === "number" && { min: N, max: R },
                 ...(!p || p === "text") && {
                   minLength: N,
-                  maxLength: U
+                  maxLength: R
                 }
               }
             );
@@ -1865,23 +1874,23 @@ const Ht = _(
             return null;
         }
       };
-      return k ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((q, E) => /* @__PURE__ */ A(
+      return k ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((T, E) => /* @__PURE__ */ A(
         le,
         {
-          ref: L,
+          ref: f,
           onChange: o,
-          ...q,
-          withSearchParam: j
+          ...T,
+          withSearchParam: G
         },
         E
-      )) }) : /* @__PURE__ */ g(a, { marginBottom: "sm", children: [
+      )) }) : /* @__PURE__ */ s(a, { marginBottom: "sm", children: [
         l ? /* @__PURE__ */ A(Q, { color: "text-muted", marginBottom: "sm", fontWeight: "medium", children: l }) : null,
         e ? /* @__PURE__ */ A(Q, { marginBottom: "sm", fontWeight: "medium", children: e }) : null,
-        /* @__PURE__ */ A(a, { children: H() })
+        /* @__PURE__ */ A(a, { children: Z() })
       ] });
     }
   )
-), $e = cA.memo(
+), $e = gA.memo(
   ({
     show: e,
     title: i,
@@ -1891,9 +1900,9 @@ const Ht = _(
     onHide: n,
     resetting: l
   }) => {
-    const [c, s] = G(!1), C = AA(null), d = ({ value: B, name: u, type: j }) => {
+    const [c, g] = b(!1), C = eA(null), d = ({ value: B, name: I, type: G }) => {
       if (o)
-        switch (j) {
+        switch (G) {
           case "date":
             ve(B);
             break;
@@ -1905,11 +1914,11 @@ const Ht = _(
             break;
         }
     }, w = () => {
-      s(!0), t == null || t(!0);
+      g(!0), t == null || t(!0);
     };
-    return R(() => {
-      (c || l) && (s(!1), t == null || t(!1));
-    }, [c, l]), /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
+    return U(() => {
+      (c || l) && (g(!1), t == null || t(!1));
+    }, [c, l]), /* @__PURE__ */ A(W, { children: /* @__PURE__ */ s(
       LA,
       {
         withBlur: !1,
@@ -1920,26 +1929,26 @@ const Ht = _(
         ref: C,
         children: [
           /* @__PURE__ */ A(Ve, { title: i, resetButton: { onClick: w } }),
-          c || l ? null : /* @__PURE__ */ A(a, { children: r == null ? void 0 : r.map((B, u) => /* @__PURE__ */ A(
+          c || l ? null : /* @__PURE__ */ A(a, { children: r == null ? void 0 : r.map((B, I) => /* @__PURE__ */ A(
             le,
             {
-              borderBottom: u !== r.length - 1,
+              borderBottom: I !== r.length - 1,
               onChange: d,
               withSearchParam: o,
               ...B,
               ref: C
             },
-            u
+            I
           )) })
         ]
       }
     ) });
   }
-), _e = cA.memo(({ active: e, onClick: i }) => {
+), _e = gA.memo(({ active: e, onClick: i }) => {
   var o, t;
   const r = ZA();
   return /* @__PURE__ */ A(
-    aA,
+    wA,
     {
       onClick: i,
       bg: e ? "blue-50" : void 0,
@@ -2145,19 +2154,19 @@ const gr = (e) => {
     } else (o == null ? void 0 : o.name) === e && (r = o);
   }), r;
 }, ar = (e) => {
-  var U;
-  const i = oA(() => ({ ...ri, ...e }), [e]), [r, o] = G(!1), [t, n] = G(!1), [l] = G(void 0), c = () => n(!0), s = () => n(!1), C = t ? s : c, d = () => {
+  var R;
+  const i = oA(() => ({ ...ri, ...e }), [e]), [r, o] = b(!1), [t, n] = b(!1), [l] = b(void 0), c = () => n(!0), g = () => n(!1), C = t ? g : c, d = () => {
     o(!0);
-  }, w = (L) => {
-    o(L);
-  }, B = l ? oi(l) : void 0, u = !!(B && ((U = Object.values(B)) == null ? void 0 : U.length) > 0), j = () => B ? Object.keys(B).map((L) => {
-    var q, E, f;
-    const k = KA(L, i.fields), Z = [];
-    let H = "";
-    const P = (q = k == null ? void 0 : k.childrenKey) == null ? void 0 : q.length, X = k == null ? void 0 : k.parentKey;
-    switch (P && ((E = k == null ? void 0 : k.childrenKey) == null || E.forEach((M) => {
+  }, w = (f) => {
+    o(f);
+  }, B = l ? oi(l) : void 0, I = !!(B && ((R = Object.values(B)) == null ? void 0 : R.length) > 0), G = () => B ? Object.keys(B).map((f) => {
+    var T, E, S;
+    const k = KA(f, i.fields), P = [];
+    let Z = "";
+    const V = (T = k == null ? void 0 : k.childrenKey) == null ? void 0 : T.length, AA = k == null ? void 0 : k.parentKey;
+    switch (V && ((E = k == null ? void 0 : k.childrenKey) == null || E.forEach((M) => {
       const D = KA(M, i.fields);
-      D && Z.push({
+      D && P.push({
         name: D == null ? void 0 : D.name,
         label: D == null ? void 0 : D.label,
         value: B[D == null ? void 0 : D.name]
@@ -2165,60 +2174,60 @@ const gr = (e) => {
     })), k == null ? void 0 : k.type) {
       case "dropdown":
       case "select-button":
-        const M = B[L] && typeof B[L] != "string" ? B[L] : [], D = (M == null ? void 0 : M.length) > 0 ? (f = M.map((x) => x.label)) == null ? void 0 : f.join(",") : B[L];
-        H = `${k == null ? void 0 : k.label}: ${D}`;
+        const M = B[f] && typeof B[f] != "string" ? B[f] : [], D = (M == null ? void 0 : M.length) > 0 ? (S = M.map((x) => x.label)) == null ? void 0 : S.join(",") : B[f];
+        Z = `${k == null ? void 0 : k.label}: ${D}`;
         break;
       case "date":
         if (k.rangedDate) {
-          const x = B[L], T = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(x == null ? void 0 : x.from)) : x == null ? void 0 : x.from, tA = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(x == null ? void 0 : x.to)) : x == null ? void 0 : x.to;
-          H = `${k == null ? void 0 : k.label}: ${T || ""} ~ ${tA || ""}`;
+          const x = B[f], H = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(x == null ? void 0 : x.from)) : x == null ? void 0 : x.from, z = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(x == null ? void 0 : x.to)) : x == null ? void 0 : x.to;
+          Z = `${k == null ? void 0 : k.label}: ${H || ""} ~ ${z || ""}`;
           break;
         }
-        const F = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[L])) : B[L];
-        H = `${k == null ? void 0 : k.label}: ${F || ""}`;
+        const F = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[f])) : B[f];
+        Z = `${k == null ? void 0 : k.label}: ${F || ""}`;
         break;
       default:
-        H = `${k == null ? void 0 : k.label}: ${B[L]}`;
+        Z = `${k == null ? void 0 : k.label}: ${B[f]}`;
         break;
     }
-    if (P && Z.length > 0) {
-      let M = Z.map((D) => {
+    if (V && P.length > 0) {
+      let M = P.map((D) => {
         var F, x;
-        return D != null && D.value && typeof D.value != "string" ? (x = (F = D == null ? void 0 : D.value) == null ? void 0 : F.map((T) => T == null ? void 0 : T.label)) == null ? void 0 : x.join(",") : D.value;
+        return D != null && D.value && typeof D.value != "string" ? (x = (F = D == null ? void 0 : D.value) == null ? void 0 : F.map((H) => H == null ? void 0 : H.label)) == null ? void 0 : x.join(",") : D.value;
       });
       M = M.filter(
         (D) => typeof D < "u" && D !== "" && D !== null
-      ), M && M.length > 0 && (H = `${H} ${k.relationLabelChip || "by"} ${M}`);
+      ), M && M.length > 0 && (Z = `${Z} ${k.relationLabelChip || "by"} ${M}`);
     }
-    return X && (H = ""), {
+    return AA && (Z = ""), {
       name: k == null ? void 0 : k.name,
       label: k == null ? void 0 : k.label,
-      value: B[L],
-      valueText: H,
-      children: Z
+      value: B[f],
+      valueText: Z,
+      children: P
     };
-  }) : [], h = (L) => {
-    L != null && L.name && o(!0);
-  }, Y = j();
+  }) : [], h = (f) => {
+    f != null && f.name && o(!0);
+  }, j = G();
   return {
     value: B,
     open: c,
-    close: s,
+    close: g,
     toggle: C,
     reset: d,
-    chips: Y,
+    chips: j,
     toggleConfig: {
-      active: u,
+      active: I,
       onClick: C
     },
     chipsConfig: {
-      items: Y,
+      items: j,
       onClose: h
     },
     config: {
       ...i,
       show: t,
-      onHide: s,
+      onHide: g,
       resetting: r,
       onReset: w
     }
@@ -2228,7 +2237,7 @@ const gr = (e) => {
   Toggle: _e,
   Chips: Re,
   Chip: ne
-}, ni = (e) => /* @__PURE__ */ A(Q, { variant: "h1", children: e.children, ...e.props }), li = (e) => /* @__PURE__ */ A(Q, { variant: "h2", children: e.children, ...e.props }), ci = (e) => /* @__PURE__ */ A(Q, { variant: "h3", children: e.children, ...e.props }), gi = (e) => /* @__PURE__ */ A(Q, { variant: "h4", children: e.children, ...e.props }), si = (e) => /* @__PURE__ */ A(Q, { variant: "h5", children: e.children, ...e.props }), ai = (e) => /* @__PURE__ */ A(Q, { variant: "h6", children: e.children, ...e.props }), Ci = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h3", children: e.children, ...e.props }), di = (e) => /* @__PURE__ */ A(Q, { variant: "body-1", children: e.children, ...e.props }), Qi = (e) => /* @__PURE__ */ A(Q, { variant: "body-2", children: e.children, ...e.props }), hi = (e) => /* @__PURE__ */ A(Q, { variant: "body-3", children: e.children, ...e.props }), K = {
+}, ni = (e) => /* @__PURE__ */ A(Q, { variant: "h1", children: e.children, ...e.props }), li = (e) => /* @__PURE__ */ A(Q, { variant: "h2", children: e.children, ...e.props }), ci = (e) => /* @__PURE__ */ A(Q, { variant: "h3", children: e.children, ...e.props }), gi = (e) => /* @__PURE__ */ A(Q, { variant: "h4", children: e.children, ...e.props }), si = (e) => /* @__PURE__ */ A(Q, { variant: "h5", children: e.children, ...e.props }), ai = (e) => /* @__PURE__ */ A(Q, { variant: "h6", children: e.children, ...e.props }), Ci = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h3", children: e.children, ...e.props }), di = (e) => /* @__PURE__ */ A(Q, { variant: "body-1", children: e.children, ...e.props }), Qi = (e) => /* @__PURE__ */ A(Q, { variant: "body-2", children: e.children, ...e.props }), hi = (e) => /* @__PURE__ */ A(Q, { variant: "body-3", children: e.children, ...e.props }), J = {
   H1: ni,
   H2: li,
   H3: ci,
@@ -2242,7 +2251,7 @@ const gr = (e) => {
   Body2: Qi,
   Body3: hi
 }, qA = () => {
-  const [e, i] = uA(), r = DA(e.toString()), o = re(), t = SA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = re(), t = SA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -2259,7 +2268,7 @@ const gr = (e) => {
     id: n,
     hasId: !!n
   };
-}, Di = (e) => JSON.stringify(e), Ii = (e) => JSON.stringify(e), ui = (e) => JSON.stringify(e), ki = (e) => JSON.stringify(e), Mi = (e) => e, Ei = (e) => JSON.stringify(e), PA = ({
+}, Di = (e) => JSON.stringify(e), Ii = (e) => JSON.stringify(e), ui = (e) => JSON.stringify(e), ki = (e) => JSON.stringify(e), Ei = (e) => e, Mi = (e) => JSON.stringify(e), PA = ({
   value: e,
   name: i,
   type: r,
@@ -2268,13 +2277,13 @@ const gr = (e) => {
   searchQueries: n,
   dropdownSearchKey: l,
   filterKey: c = "filter",
-  pageKey: s = "page"
+  pageKey: g = "page"
 }) => {
   if (o) {
     let C;
     switch (r) {
       case "search":
-        C = Mi(e);
+        C = Ei(e);
         break;
       case "dropdown":
       case "dropdown-multiple":
@@ -2287,7 +2296,7 @@ const gr = (e) => {
         C = ui(e);
         break;
       case "advanced-date-range":
-        C = Ei(e);
+        C = Mi(e);
         break;
       case "date":
         C = ki(e);
@@ -2301,12 +2310,16 @@ const gr = (e) => {
         ...n[c] && typeof n[c] == "string" ? JSON.parse(n[c]) : void 0,
         [i]: C
       }, B = { ...n };
-      l && typeof l == "string" && delete B[l], delete B[s];
-      const u = {
+      l && typeof l == "string" && delete B[l], delete B[g];
+      const I = {
         ...B,
         [c]: JSON.stringify(w)
-      };
-      t(u);
+      }, G = new URLSearchParams(n).toString(), h = new URLSearchParams(
+        I
+      ).toString();
+      if (G === h)
+        return;
+      t(I);
     }
   }
 }, YA = ({
@@ -2367,32 +2380,32 @@ const gr = (e) => {
   pageKey: o,
   filters: t
 }) => {
-  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [s, C] = G({}), d = () => {
+  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [g, C] = b({}), d = () => {
     n.delete(r || "filter"), l(n);
-  }, w = (B, u) => {
+  }, w = (B, I) => {
     switch (B.type) {
       case "radio": {
-        const { show: j = !0 } = B;
-        return j && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
       }
       case "dropdown": {
-        const { show: j = !0 } = B;
-        return j && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
       }
       case "date-range":
-        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
       case "date":
-        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
       case "dropdown-multiple": {
-        const { show: j = !0 } = B;
-        return j && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
       }
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ A(LA, { onHide: i, show: e || !1, children: /* @__PURE__ */ g(a, { direction: "column", gap: "md", children: [
-    /* @__PURE__ */ g(J, { direction: "row", justify: "space-between", align: "center", children: [
+  return /* @__PURE__ */ A(LA, { onHide: i, show: e || !1, children: /* @__PURE__ */ s(a, { direction: "column", gap: "md", children: [
+    /* @__PURE__ */ s(q, { direction: "row", justify: "space-between", align: "center", children: [
       /* @__PURE__ */ A(a, { children: "Filter" }),
       /* @__PURE__ */ A(
         a,
@@ -2403,7 +2416,7 @@ const gr = (e) => {
         }
       )
     ] }),
-    t == null ? void 0 : t.map((B, u) => w(B, u))
+    t == null ? void 0 : t.map((B, I) => w(B, I))
   ] }) });
 }, xi = ({
   searchKey: e = "q",
@@ -2414,67 +2427,95 @@ const gr = (e) => {
   showSearchFilter: n = !0,
   showStatusFilter: l = !0,
   filterKey: c = "filter",
-  pageKey: s = "page",
+  pageKey: g = "page",
   customWidthSearch: C,
   handleOnReset: d,
   filterConfigs: w,
   buttonToggleProps: B,
-  position: u = "right",
-  titleSearchLabel: j = "Work Order",
+  position: I = "right",
+  titleSearchLabel: G = "Work Order",
   withTitleLabels: h = !1
 }) => {
-  const Y = (B == null ? void 0 : B.isShowLabel) ?? !0, [p, N] = G(!1), [U, L] = G(0), k = () => {
-    L(U + 1);
-  }, { searchParams: Z, setSearchParams: H, getQueryParam: P } = qA(), X = DA(Z.toString()), q = P(c), f = !!(q && !(() => {
-    if (q)
+  const p = (B == null ? void 0 : B.isShowLabel) ?? !0, [N, R] = b(!1), [f, k] = b(0), P = () => {
+    k((z) => z + 1);
+  }, { searchParams: Z, setSearchParams: V, getQueryParam: AA } = qA(), T = IA(Z.toString()), E = mi(e, Z, c) || "", [S, M] = b(E), D = AA(c), x = !!(D && !(() => {
+    if (D)
       try {
-        const D = JSON.parse(q);
-        return Object.keys(D).length === 1 && D[e] === "";
-      } catch (D) {
-        console.error("Filter parameter is not a valid JSON:", D);
+        const z = JSON.parse(D);
+        return Object.keys(z).length === 1 && z[e] === "";
+      } catch (z) {
+        console.error("Filter parameter is not a valid JSON:", z);
       }
     return !1;
-  })()), M = V("md");
-  return /* @__PURE__ */ g(
-    J,
+  })()), H = X("md");
+  return U(() => {
+    M(E);
+  }, [E]), U(() => {
+    if (S === E)
+      return;
+    const z = window.setTimeout(() => {
+      PA({
+        value: S,
+        name: e,
+        type: "search",
+        searchQueries: T,
+        setSearchParams: V,
+        filterKey: c,
+        pageKey: g
+      });
+    }, 350);
+    return () => {
+      window.clearTimeout(z);
+    };
+  }, [
+    S,
+    E,
+    e,
+    T,
+    V,
+    c,
+    g
+  ]), /* @__PURE__ */ s(
+    q,
     {
       gap: "md",
       style: {
-        flexDirection: M && u === "left" ? "row" : M && u === "right" ? "row-reverse" : "column"
+        flexDirection: H && I === "left" ? "row" : H && I === "right" ? "row-reverse" : "column"
       },
       align: "flex-end",
       children: [
-        f && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
-          b,
+        x && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
+          O,
           {
             onClick: () => {
-              Z.delete(c), H(Z), k(), d && d();
+              const z = new URLSearchParams(Z);
+              z.delete(c), V(z), M(""), P(), d && d();
             },
             secondary: !0,
             children: /* @__PURE__ */ A(Q, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
         !!(w != null && w.length) && /* @__PURE__ */ A(
-          b,
+          O,
           {
-            primary: f,
-            secondary: !f,
+            primary: x,
+            secondary: !x,
             iconLeft: /* @__PURE__ */ A(
               m,
               {
                 size: "sm",
                 name: (B == null ? void 0 : B.icon) || "FilterHorizontal",
                 style: {
-                  color: q ? "var(--starasia-ui-color-primary)" : "var(--starasia-ui-color-text)"
+                  color: D ? "var(--starasia-ui-color-primary)" : "var(--starasia-ui-color-text)"
                 }
               }
             ),
-            fullWidth: !M,
-            onClick: () => N(!0),
-            children: Y ? "Filter" : void 0
+            fullWidth: !H,
+            onClick: () => R(!0),
+            children: p ? "Filter" : void 0
           }
         ),
-        l && /* @__PURE__ */ g(
+        l && /* @__PURE__ */ s(
           a,
           {
             gap: "sm",
@@ -2482,7 +2523,7 @@ const gr = (e) => {
               minWidth: "126px"
             },
             children: [
-              h && /* @__PURE__ */ A(K.SubH3, { children: "Status" }),
+              h && /* @__PURE__ */ A(J.SubH3, { children: "Status" }),
               /* @__PURE__ */ A(
                 fA,
                 {
@@ -2517,86 +2558,78 @@ const gr = (e) => {
                       })
                     }
                   ] : [],
-                  onChange: (D) => PA({
-                    value: D,
+                  onChange: (z) => PA({
+                    value: z,
                     name: i,
                     type: "dropdown",
-                    searchQueries: X,
-                    setSearchParams: H,
+                    searchQueries: T,
+                    setSearchParams: V,
                     filterKey: c
                   }),
                   placeholder: h ? "All" : "All Status"
                 },
-                U
+                f
               )
             ]
           }
         ),
-        n && /* @__PURE__ */ g(
+        n && /* @__PURE__ */ s(
           a,
           {
             gap: "sm",
             style: {
-              width: C && M ? C : M ? "310px" : ""
+              width: C && H ? C : H ? "310px" : ""
             },
             children: [
-              h && /* @__PURE__ */ g(K.SubH3, { children: [
+              h && /* @__PURE__ */ s(J.SubH3, { children: [
                 "Search for ",
-                j
+                G
               ] }),
               /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   placeholder: r,
                   leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-                  onChange: (D) => PA({
-                    value: D.target.value,
-                    name: e,
-                    type: "search",
-                    searchQueries: X,
-                    setSearchParams: H,
-                    filterKey: c,
-                    pageKey: s
-                  }),
-                  value: mi(e, Z, c) || "",
+                  onChange: (z) => M(z.target.value),
+                  value: S,
                   fullWidth: !0
                 },
-                U + 1 + c
+                f + 1 + c
               )
             ]
           }
         ),
-        t == null ? void 0 : t.map(({ minWidth: D, content: F, title: x, onClickContainer: T }) => /* @__PURE__ */ g(
+        t == null ? void 0 : t.map(({ minWidth: z, content: sA, title: aA, onClickContainer: lA }) => /* @__PURE__ */ s(
           a,
           {
             gap: "sm",
-            onClick: T,
+            onClick: lA,
             style: {
-              minWidth: D
+              minWidth: z
             },
             children: [
-              /* @__PURE__ */ A(K.SubH3, { children: x }),
-              F
+              /* @__PURE__ */ A(J.SubH3, { children: aA }),
+              sA
             ]
           },
-          x + U
+          aA + f
         )),
         /* @__PURE__ */ A(
           yi,
           {
-            isOpen: p,
-            onClose: () => N(!1),
+            isOpen: N,
+            onClose: () => R(!1),
             filterKey: c,
             filters: w,
-            pageKey: s
+            pageKey: g
           }
         )
       ]
     }
   );
 }, fi = ({ children: e, borderRadius: i }) => {
-  const r = AA(null), [o, t] = G("100vh");
-  return R(() => {
+  const r = eA(null), [o, t] = b("100vh");
+  return U(() => {
     const n = () => {
       if (r.current) {
         const l = r.current.getBoundingClientRect().top;
@@ -2626,7 +2659,7 @@ const gr = (e) => {
   advanceFilter: i,
   showFilter: r = !0
 }) => {
-  const o = V("md"), t = () => e ? ie(e) ? e : /* @__PURE__ */ A(
+  const o = X("md"), t = () => e ? ie(e) ? e : /* @__PURE__ */ A(
     a,
     {
       style: {
@@ -2637,12 +2670,12 @@ const gr = (e) => {
         textWrap: "nowrap"
       },
       children: e.map(
-        ({ title: n, icon: l, buttonProps: c, onClick: s }, C) => !n && !l ? null : /* @__PURE__ */ A(
-          b,
+        ({ title: n, icon: l, buttonProps: c, onClick: g }, C) => !n && !l ? null : /* @__PURE__ */ A(
+          O,
           {
             fullWidth: !o,
             iconLeft: l ? /* @__PURE__ */ A(m, { name: l, size: "md" }) : void 0,
-            onClick: s,
+            onClick: g,
             ...c,
             children: n
           },
@@ -2651,7 +2684,7 @@ const gr = (e) => {
       )
     }
   ) : null;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       style: {
@@ -2680,7 +2713,7 @@ const gr = (e) => {
   totalData: e,
   withMarginBottom: i = !0,
   withMarginTop: r = !0
-}) => /* @__PURE__ */ g(
+}) => /* @__PURE__ */ s(
   a,
   {
     style: {
@@ -2692,8 +2725,8 @@ const gr = (e) => {
       marginTop: r ? "16px" : void 0
     },
     children: [
-      /* @__PURE__ */ g(
-        K.Body1,
+      /* @__PURE__ */ s(
+        J.Body1,
         {
           props: {
             color: "gray-500"
@@ -2704,7 +2737,7 @@ const gr = (e) => {
           ]
         }
       ),
-      /* @__PURE__ */ A(K.Body1, { children: e || 0 })
+      /* @__PURE__ */ A(J.Body1, { children: e || 0 })
     ]
   }
 ), bi = ({
@@ -2715,15 +2748,15 @@ const gr = (e) => {
   showPagination: t = !0,
   totalData: n
 }) => {
-  const { searchQueries: l, setSearchParams: c, searchParams: s } = qA(), C = s.get(r), d = (j) => {
-    c({ ...l, [i]: String(j) });
-  }, w = (j) => {
+  const { searchQueries: l, setSearchParams: c, searchParams: g } = qA(), C = g.get(r), d = (G) => {
+    c({ ...l, [i]: String(G) });
+  }, w = (G) => {
     c({
       ...l,
-      [r]: j,
+      [r]: G,
       [i]: "1"
     });
-  }, B = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), u = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
+  }, B = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), I = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
   return /* @__PURE__ */ A(
     a,
     {
@@ -2740,8 +2773,8 @@ const gr = (e) => {
         borderTop: "1px solid var(--starasia-ui-utility-fill-default)",
         flexShrink: 0
       },
-      children: t ? /* @__PURE__ */ g(W, { children: [
-        /* @__PURE__ */ g(a, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
+      children: t ? /* @__PURE__ */ s(W, { children: [
+        /* @__PURE__ */ s(a, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
           /* @__PURE__ */ A(Q, { children: "Rows Per Page: " }),
           /* @__PURE__ */ A(
             fA,
@@ -2753,13 +2786,13 @@ const gr = (e) => {
                 { label: "50", value: "50" },
                 { label: "100", value: "100" }
               ],
-              onChange: (j) => {
-                w(j[0].value);
+              onChange: (G) => {
+                w(G[0].value);
               },
               defaultValue: C ? [{ label: `${C} per row`, value: C }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(Q, { children: `${B}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(Q, { children: `${B}-${I} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
           Qe,
@@ -2780,32 +2813,32 @@ const gr = (e) => {
     }
   );
 }, Gi = ({ filter: e, columnTitle: i }) => {
-  const [r, o] = G(!1), t = AA(null), n = AA(null), l = AA(null), [c, s] = G(""), [C, d] = G({ top: 0, left: 0 }), w = e.selectedValues, B = oA(() => c ? e.options.filter(
+  const [r, o] = b(!1), t = eA(null), n = eA(null), l = eA(null), [c, g] = b(""), [C, d] = b({ top: 0, left: 0 }), w = e.selectedValues, B = oA(() => c ? e.options.filter(
     (h) => h.label.toLowerCase().includes(c.toLowerCase())
   ) : e.options, [e.options, c]);
-  R(() => {
+  U(() => {
     if (r && n.current) {
-      const h = n.current.getBoundingClientRect(), Y = 280, p = {
+      const h = n.current.getBoundingClientRect(), j = 280, p = {
         top: h.bottom + 8
       };
-      e.position === "left" || h.left + Y > window.innerWidth ? p.right = window.innerWidth - h.right : p.left = h.left, d(p);
+      e.position === "left" || h.left + j > window.innerWidth ? p.right = window.innerWidth - h.right : p.left = h.left, d(p);
     }
-  }, [r, e.position]), R(() => {
+  }, [r, e.position]), U(() => {
     r && l.current ? setTimeout(() => {
       var h;
       return (h = l.current) == null ? void 0 : h.focus();
-    }, 50) : s("");
-  }, [r]), R(() => {
-    const h = (Y) => {
-      t.current && !t.current.contains(Y.target) && n.current && !n.current.contains(Y.target) && o(!1);
+    }, 50) : g("");
+  }, [r]), U(() => {
+    const h = (j) => {
+      t.current && !t.current.contains(j.target) && n.current && !n.current.contains(j.target) && o(!1);
     };
     return r && document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
   }, [r]);
-  const u = (h) => {
-    const Y = w.includes(h) ? w.filter((p) => p !== h) : [...w, h];
-    e.onFilterChange(Y);
-  }, j = () => e.onFilterChange([]);
-  return /* @__PURE__ */ g(a, { style: { position: "relative" }, children: [
+  const I = (h) => {
+    const j = w.includes(h) ? w.filter((p) => p !== h) : [...w, h];
+    e.onFilterChange(j);
+  }, G = () => e.onFilterChange([]);
+  return /* @__PURE__ */ s(a, { style: { position: "relative" }, children: [
     /* @__PURE__ */ A(
       a,
       {
@@ -2817,8 +2850,8 @@ const gr = (e) => {
           cursor: "pointer"
         },
         onClick: (h) => {
-          var Y;
-          h.stopPropagation(), r || (Y = e.onOpen) == null || Y.call(e), o((p) => !p);
+          var j;
+          h.stopPropagation(), r || (j = e.onOpen) == null || j.call(e), o((p) => !p);
         },
         children: /* @__PURE__ */ A(
           m,
@@ -2832,7 +2865,7 @@ const gr = (e) => {
         )
       }
     ),
-    r && /* @__PURE__ */ g(
+    r && /* @__PURE__ */ s(
       a,
       {
         ref: t,
@@ -2851,7 +2884,7 @@ const gr = (e) => {
           border: "1px solid var(--starasia-ui-utility-fill-default)"
         },
         children: [
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ s(
             a,
             {
               style: {
@@ -2866,7 +2899,7 @@ const gr = (e) => {
                 borderBottom: "1px solid rgb(var(--starasia-ui-raw-color-gray-100))"
               },
               children: [
-                /* @__PURE__ */ g(Q, { fontSize: "sm", fontWeight: "semibold", color: "gray-700", children: [
+                /* @__PURE__ */ s(Q, { fontSize: "sm", fontWeight: "semibold", color: "gray-700", children: [
                   "Filter ",
                   i
                 ] }),
@@ -2877,7 +2910,7 @@ const gr = (e) => {
                     color: "primary",
                     fontWeight: "semibold",
                     onClick: (h) => {
-                      h.stopPropagation(), j();
+                      h.stopPropagation(), G();
                     },
                     children: "CLEAR"
                   }
@@ -2895,13 +2928,13 @@ const gr = (e) => {
                 paddingBottom: "8px"
               },
               children: /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   ref: l,
                   placeholder: `Search ${i.toLowerCase()}...`,
                   leftIcon: /* @__PURE__ */ A(m, { name: "Search", size: "sm" }),
                   value: c,
-                  onChange: (h) => s(h.target.value),
+                  onChange: (h) => g(h.target.value),
                   style: { fontSize: "14px" }
                 }
               )
@@ -2917,7 +2950,7 @@ const gr = (e) => {
                 paddingLeft: "8px",
                 paddingRight: "8px"
               },
-              children: e.isLoadingOptions ? /* @__PURE__ */ g(
+              children: e.isLoadingOptions ? /* @__PURE__ */ s(
                 a,
                 {
                   style: {
@@ -2951,7 +2984,7 @@ const gr = (e) => {
                     )
                   ]
                 }
-              ) : B.length > 0 ? /* @__PURE__ */ A(a, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((h) => /* @__PURE__ */ g(
+              ) : B.length > 0 ? /* @__PURE__ */ A(a, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((h) => /* @__PURE__ */ s(
                 a,
                 {
                   style: {
@@ -2968,14 +3001,14 @@ const gr = (e) => {
                     transition: "all 0.2s ease",
                     backgroundColor: w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
                   },
-                  onClick: (Y) => {
-                    Y.stopPropagation(), u(h.value);
+                  onClick: (j) => {
+                    j.stopPropagation(), I(h.value);
                   },
-                  onMouseEnter: (Y) => {
-                    w.includes(h.value) || (Y.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), Y.currentTarget.style.transform = "translateX(2px)";
+                  onMouseEnter: (j) => {
+                    w.includes(h.value) || (j.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), j.currentTarget.style.transform = "translateX(2px)";
                   },
-                  onMouseLeave: (Y) => {
-                    Y.currentTarget.style.backgroundColor = w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", Y.currentTarget.style.transform = "translateX(0)";
+                  onMouseLeave: (j) => {
+                    j.currentTarget.style.backgroundColor = w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", j.currentTarget.style.transform = "translateX(0)";
                   },
                   children: [
                     /* @__PURE__ */ A(
@@ -2998,7 +3031,7 @@ const gr = (e) => {
                   ]
                 },
                 h.value
-              )) }) : /* @__PURE__ */ g(
+              )) }) : /* @__PURE__ */ s(
                 a,
                 {
                   style: {
@@ -3044,7 +3077,7 @@ const gr = (e) => {
                 backgroundColor: "rgb(var(--starasia-ui-raw-color-blue-50))",
                 marginTop: "auto"
               },
-              children: /* @__PURE__ */ g(a, { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "4px" }, children: [
+              children: /* @__PURE__ */ s(a, { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "4px" }, children: [
                 /* @__PURE__ */ A(
                   a,
                   {
@@ -3059,7 +3092,7 @@ const gr = (e) => {
                     children: w.length
                   }
                 ),
-                /* @__PURE__ */ g(Q, { fontSize: "xs", color: "primary", fontWeight: "medium", children: [
+                /* @__PURE__ */ s(Q, { fontSize: "xs", color: "primary", fontWeight: "medium", children: [
                   "item",
                   w.length > 1 ? "s" : "",
                   " selected"
@@ -3071,7 +3104,7 @@ const gr = (e) => {
       }
     )
   ] });
-}, Oi = ({ frozen: e }) => /* @__PURE__ */ g(
+}, Oi = ({ frozen: e }) => /* @__PURE__ */ s(
   "svg",
   {
     width: "11",
@@ -3096,43 +3129,43 @@ const gr = (e) => {
   isLoading: n,
   visibleHandleDelete: l,
   visibleHandleUpdate: c,
-  visibleHandleDetail: s,
+  visibleHandleDetail: g,
   showHeadBorder: C = !0,
   scrollParentRef: d,
   frozenCount: w = 0,
   onFrozenCountChange: B,
-  customActions: u,
-  actionsOrder: j = ["detail", "update", "delete", "custom"],
+  customActions: I,
+  actionsOrder: G = ["detail", "update", "delete", "custom"],
   customEmptyState: h
 }) => {
-  const p = [r, o, t].filter((E) => E !== void 0).length, N = !!u, U = p === 3 ? N ? "178px" : "140px" : p === 2 ? N ? "140px" : "102px" : p === 1 ? N ? "112px" : "74px" : N ? "74px" : "", L = (E, f) => {
-    if (!f) return E;
-    if (typeof f == "function") return f(E);
-    if (typeof f == "string") return E[f];
-  }, [k, Z] = G(!1);
-  R(() => {
+  const p = [r, o, t].filter((E) => E !== void 0).length, N = !!I, R = p === 3 ? N ? "178px" : "140px" : p === 2 ? N ? "140px" : "102px" : p === 1 ? N ? "112px" : "74px" : N ? "74px" : "", f = (E, S) => {
+    if (!S) return E;
+    if (typeof S == "function") return S(E);
+    if (typeof S == "string") return E[S];
+  }, [k, P] = b(!1);
+  U(() => {
     if (!(d != null && d.current)) return;
     const E = d.current;
-    Z(E.scrollHeight > E.clientHeight);
+    P(E.scrollHeight > E.clientHeight);
   }, [i, d]);
-  const H = AA(null), [P, X] = G([]);
+  const Z = eA(null), [V, AA] = b([]);
   zA(() => {
-    if (!w || !H.current) {
-      X([]);
+    if (!w || !Z.current) {
+      AA([]);
       return;
     }
     const E = Array.from(
-      H.current.querySelectorAll("thead tr th")
-    ), f = [];
+      Z.current.querySelectorAll("thead tr th")
+    ), S = [];
     let M = 0;
     E.forEach((D, F) => {
-      f[F] = M, F < w && (M += D.offsetWidth);
-    }), X(f);
+      S[F] = M, F < w && (M += D.offsetWidth);
+    }), AA(S);
   }, [w, e, i]);
-  const q = (E) => {
+  const T = (E) => {
     B && B(E < w ? E : E + 1);
   };
-  return /* @__PURE__ */ A("div", { ref: H, children: /* @__PURE__ */ g(Ae, { fullWidth: !0, children: [
+  return /* @__PURE__ */ A("div", { ref: Z, children: /* @__PURE__ */ s(Ae, { fullWidth: !0, children: [
     /* @__PURE__ */ A(
       he,
       {
@@ -3140,10 +3173,10 @@ const gr = (e) => {
           height: "40px",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ g(dA, { children: [
-          e.map((E, f) => {
+        children: /* @__PURE__ */ s(QA, { children: [
+          e.map((E, S) => {
             var F;
-            const M = w > 0 && f < w, D = P[f] ?? 0;
+            const M = w > 0 && S < w, D = V[S] ?? 0;
             return /* @__PURE__ */ A(
               TA,
               {
@@ -3152,14 +3185,14 @@ const gr = (e) => {
                   top: 0,
                   left: M ? D : void 0,
                   zIndex: M ? 4 : 2,
-                  paddingLeft: f === 0 ? "12px" : "",
+                  paddingLeft: S === 0 ? "12px" : "",
                   borderRight: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   borderBottom: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   width: E.width,
                   backgroundColor: "var(--starasia-ui-table-bg-header)",
                   textAlign: E.textAlign === "text-right" ? "right" : E.textAlign === "text-center" ? "center" : "left"
                 },
-                children: /* @__PURE__ */ g(
+                children: /* @__PURE__ */ s(
                   "div",
                   {
                     style: {
@@ -3181,7 +3214,7 @@ const gr = (e) => {
                       B && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => q(f),
+                          onClick: () => T(S),
                           title: M ? "Unfreeze column" : "Freeze column",
                           style: {
                             background: "none",
@@ -3202,10 +3235,10 @@ const gr = (e) => {
                   }
                 )
               },
-              `table-head-${f}`
+              `table-head-${S}`
             );
           }),
-          r || o || t || u ? /* @__PURE__ */ A(
+          r || o || t || I ? /* @__PURE__ */ A(
             TA,
             {
               style: {
@@ -3221,19 +3254,19 @@ const gr = (e) => {
         ] })
       }
     ),
-    /* @__PURE__ */ A(De, { children: n ? /* @__PURE__ */ A(dA, { children: /* @__PURE__ */ A(sA, { colSpan: e.length + 1, children: /* @__PURE__ */ g(a, { style: { gap: "16px" }, children: [
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" })
-    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(dA, { children: /* @__PURE__ */ A(sA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((E, f) => /* @__PURE__ */ g(
-      dA,
+    /* @__PURE__ */ A(De, { children: n ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: /* @__PURE__ */ s(a, { style: { gap: "16px" }, children: [
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" })
+    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((E, S) => /* @__PURE__ */ s(
+      QA,
       {
         style: {
           transition: "background-color 0.3s ease",
           padding: 0,
-          borderBottom: f === i.length - 1 && k ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
+          borderBottom: S === i.length - 1 && k ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
         },
         onMouseOver: (M) => {
           const D = M.currentTarget;
@@ -3253,13 +3286,13 @@ const gr = (e) => {
         },
         children: [
           e.map((M, D) => {
-            const F = M.render ? M.render(E, f, i) : L(E, M.accessor), x = w > 0 && D < w, T = P[D] ?? 0;
+            const F = M.render ? M.render(E, S, i) : f(E, M.accessor), x = w > 0 && D < w, H = V[D] ?? 0;
             return /* @__PURE__ */ A(
-              sA,
+              BA,
               {
                 style: {
                   position: x ? "sticky" : void 0,
-                  left: x ? T : void 0,
+                  left: x ? H : void 0,
                   zIndex: x ? 1 : void 0,
                   backgroundColor: x ? mA : void 0,
                   paddingLeft: D === 0 ? "12px" : "",
@@ -3281,46 +3314,46 @@ const gr = (e) => {
                   }
                 ) : F
               },
-              `row-${f}-col-${D}`
+              `row-${S}-col-${D}`
             );
           }),
-          r || o || t || u ? /* @__PURE__ */ A(sA, { style: {
-            width: U,
+          r || o || t || I ? /* @__PURE__ */ A(BA, { style: {
+            width: R,
             position: "sticky",
             right: 0,
             zIndex: 1,
             backgroundColor: mA
-          }, children: /* @__PURE__ */ A(J, { direction: "row", align: "center", justify: "center", gap: "sm", children: j.map((M) => {
-            const D = f === i.length - 1 ? "top" : "bottom";
-            return M === "detail" && r && (s == null ? void 0 : s(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Detail", position: D, children: /* @__PURE__ */ A(
-              b,
+          }, children: /* @__PURE__ */ A(q, { direction: "row", align: "center", justify: "center", gap: "sm", children: G.map((M) => {
+            const D = S === i.length - 1 ? "top" : "bottom";
+            return M === "detail" && r && (g == null ? void 0 : g(E)) !== !1 ? /* @__PURE__ */ A(tA, { label: "Detail", position: D, children: /* @__PURE__ */ A(
+              O,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => r(E.id, E),
                 iconLeft: /* @__PURE__ */ A(m, { name: "DocumentClean", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "detail") : M === "update" && o && (c == null ? void 0 : c(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Update", position: D, children: /* @__PURE__ */ A(
-              b,
+            ) }, "detail") : M === "update" && o && (c == null ? void 0 : c(E)) !== !1 ? /* @__PURE__ */ A(tA, { label: "Update", position: D, children: /* @__PURE__ */ A(
+              O,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => o(E),
                 iconLeft: /* @__PURE__ */ A(m, { name: "Edit1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "update") : M === "delete" && t && (l == null ? void 0 : l(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Delete", position: D, children: /* @__PURE__ */ A(
-              b,
+            ) }, "update") : M === "delete" && t && (l == null ? void 0 : l(E)) !== !1 ? /* @__PURE__ */ A(tA, { label: "Delete", position: D, children: /* @__PURE__ */ A(
+              O,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => t(E.id, E),
                 iconLeft: /* @__PURE__ */ A(m, { name: "Trash1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-red-600))" } })
               }
-            ) }, "delete") : M === "custom" ? /* @__PURE__ */ A(cA.Fragment, { children: u == null ? void 0 : u(E) }, "custom") : null;
+            ) }, "delete") : M === "custom" ? /* @__PURE__ */ A(gA.Fragment, { children: I == null ? void 0 : I(E) }, "custom") : null;
           }) }) }) : null
         ]
       },
-      `${E}${f}`
+      `${E}${S}`
     )) })
   ] }) });
 }, pi = ({
@@ -3330,12 +3363,12 @@ const gr = (e) => {
   footerProps: o
 }) => {
   var w;
-  const t = AA(null), [n, l] = G(
+  const t = eA(null), [n, l] = b(
     (i == null ? void 0 : i.defaultFrozenCount) ?? 0
-  ), c = (r == null ? void 0 : r.show) ?? !0, s = AA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
-  typeof C == "number" && (s.current = C);
-  const d = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? s.current !== 0 : C !== 0);
-  return /* @__PURE__ */ g(fi, { ...e, children: [
+  ), c = (r == null ? void 0 : r.show) ?? !0, g = eA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
+  typeof C == "number" && (g.current = C);
+  const d = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? g.current !== 0 : C !== 0);
+  return /* @__PURE__ */ s(fi, { ...e, children: [
     c && /* @__PURE__ */ A(Si, { ...r }),
     /* @__PURE__ */ A(
       a,
@@ -3375,10 +3408,10 @@ function ji(e) {
     e
   );
 }
-const Dr = ji(pi), kA = ({
+const Dr = ji(pi), EA = ({
   of: e,
   render: i
-}) => ye.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), O = ({
+}) => ye.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), Y = ({
   condition: e,
   fallback: i,
   children: r,
@@ -3394,7 +3427,7 @@ const Dr = ji(pi), kA = ({
   setSelectedApp: l
 }) => {
   var c;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       borderWidth: "border-b",
@@ -3405,13 +3438,13 @@ const Dr = ji(pi), kA = ({
       justify: "space-between",
       cursor: "pointer",
       onClick: () => {
-        var s;
+        var g;
         if (e.isTenant && r && !n) {
           r(e);
           return;
         }
         if (i && n) {
-          i(e.applicationKey, (s = e.id) == null ? void 0 : s.toString());
+          i(e.applicationKey, (g = e.id) == null ? void 0 : g.toString());
           return;
         }
         if (i) {
@@ -3423,21 +3456,21 @@ const Dr = ji(pi), kA = ({
         borderColor: "var(--starasia-ui-utility-fill-default)",
         transition: "border-color 0.3s ease"
       },
-      onMouseEnter: (s) => s.currentTarget.style.setProperty("border-color", "#5C9EDD"),
-      onMouseLeave: (s) => s.currentTarget.style.setProperty(
+      onMouseEnter: (g) => g.currentTarget.style.setProperty("border-color", "#5C9EDD"),
+      onMouseLeave: (g) => g.currentTarget.style.setProperty(
         "border-color",
         "var(--starasia-ui-utility-fill-default)"
       ),
       children: [
         /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!e.role && !e.isTenant || t,
-            fallback: /* @__PURE__ */ A(K.Body1, { children: e.name }),
-            children: /* @__PURE__ */ g(a, { direction: "column", gap: "sm", children: [
-              /* @__PURE__ */ A(K.Body1, { children: e.name }),
+            fallback: /* @__PURE__ */ A(J.Body1, { children: e.name }),
+            children: /* @__PURE__ */ s(a, { direction: "column", gap: "sm", children: [
+              /* @__PURE__ */ A(J.Body1, { children: e.name }),
               /* @__PURE__ */ A(
-                K.Body3,
+                J.Body3,
                 {
                   props: {
                     color: "tertiary"
@@ -3448,7 +3481,7 @@ const Dr = ji(pi), kA = ({
             ] })
           }
         ),
-        /* @__PURE__ */ A(O, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
+        /* @__PURE__ */ A(Y, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
       ]
     }
   );
@@ -3461,11 +3494,11 @@ const Dr = ji(pi), kA = ({
   showIcon: n,
   showRole: l,
   isOnOrgSelect: c,
-  setSelectedApp: s
-}) => t && e && e.length > 0 && /* @__PURE__ */ g(a, { marginTop: "lg", children: [
-  r && /* @__PURE__ */ A(K.H5, { children: r }),
+  setSelectedApp: g
+}) => t && e && e.length > 0 && /* @__PURE__ */ s(a, { marginTop: "lg", children: [
+  r && /* @__PURE__ */ A(J.H5, { children: r }),
   /* @__PURE__ */ A(
-    kA,
+    EA,
     {
       of: e,
       render: (C) => /* @__PURE__ */ A(
@@ -3477,7 +3510,7 @@ const Dr = ji(pi), kA = ({
           handleToSelectOrg: o,
           showRole: l,
           isOnOrgSelect: c,
-          setSelectedApp: s
+          setSelectedApp: g
         }
       )
     }
@@ -3491,13 +3524,13 @@ const Dr = ji(pi), kA = ({
   totalData: n,
   handleToSelectOrg: l,
   isLoadingOrgList: c,
-  setSelectedApp: s
+  setSelectedApp: g
 }) => {
   var d;
   const C = _A();
-  return /* @__PURE__ */ g(LA, { onHide: e, show: i, closeButton: !1, children: [
-    /* @__PURE__ */ g(
-      aA,
+  return /* @__PURE__ */ s(LA, { onHide: e, show: i, closeButton: !1, children: [
+    /* @__PURE__ */ s(
+      wA,
       {
         paddingBlock: "lg",
         onClick: C.show ? C.close : e,
@@ -3506,7 +3539,7 @@ const Dr = ji(pi), kA = ({
         children: [
           C.show ? /* @__PURE__ */ A(m, { name: "ChevronLeft" }) : /* @__PURE__ */ A(m, { name: "Cross" }),
           /* @__PURE__ */ A(
-            K.SubH3,
+            J.SubH3,
             {
               props: {
                 color: "gray-500"
@@ -3517,10 +3550,10 @@ const Dr = ji(pi), kA = ({
         ]
       }
     ),
-    C.show ? /* @__PURE__ */ g(W, { children: [
-      /* @__PURE__ */ A(K.H4, { children: (d = C.data) == null ? void 0 : d.name }),
+    C.show ? /* @__PURE__ */ s(W, { children: [
+      /* @__PURE__ */ A(J.H4, { children: (d = C.data) == null ? void 0 : d.name }),
       /* @__PURE__ */ A(
-        K.SubH3,
+        J.SubH3,
         {
           props: {
             color: "gray-500"
@@ -3529,14 +3562,14 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        O,
+        Y,
         {
           condition: !!(o != null && o.length),
           isLoading: c,
-          loading: /* @__PURE__ */ g(a, { marginTop: "sm", gap: "md", children: [
-            /* @__PURE__ */ A(lA, { variant: "list" }),
-            /* @__PURE__ */ A(lA, { variant: "list" }),
-            /* @__PURE__ */ A(lA, { variant: "list" })
+          loading: /* @__PURE__ */ s(a, { marginTop: "sm", gap: "md", children: [
+            /* @__PURE__ */ A(cA, { variant: "list" }),
+            /* @__PURE__ */ A(cA, { variant: "list" }),
+            /* @__PURE__ */ A(cA, { variant: "list" })
           ] }),
           children: /* @__PURE__ */ A(
             jA,
@@ -3554,16 +3587,16 @@ const Dr = ji(pi), kA = ({
               showIcon: !1,
               showRole: !0,
               isOnOrgSelect: C.show,
-              setSelectedApp: s
+              setSelectedApp: g
             }
           )
         }
       )
-    ] }) : /* @__PURE__ */ g(W, { children: [
-      /* @__PURE__ */ g(J, { direction: "row", align: "center", gap: "sm", children: [
-        /* @__PURE__ */ A(K.H4, { children: "Switch Apps" }),
-        /* @__PURE__ */ g(
-          K.SubH3,
+    ] }) : /* @__PURE__ */ s(W, { children: [
+      /* @__PURE__ */ s(q, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ A(J.H4, { children: "Switch Apps" }),
+        /* @__PURE__ */ s(
+          J.SubH3,
           {
             props: {
               color: "gray-500"
@@ -3583,9 +3616,9 @@ const Dr = ji(pi), kA = ({
           dataApps: r == null ? void 0 : r.filter((w) => w.isTenant),
           handleSwitch: t,
           handleToSelectOrg: (w) => {
-            C.open(w), s(w.name), l && l(w);
+            C.open(w), g(w.name), l && l(w);
           },
-          setSelectedApp: s
+          setSelectedApp: g
         }
       ),
       /* @__PURE__ */ A(
@@ -3595,7 +3628,7 @@ const Dr = ji(pi), kA = ({
           show: r == null ? void 0 : r.some((w) => !w.isTenant),
           dataApps: r == null ? void 0 : r.filter((w) => !w.isTenant),
           handleSwitch: t,
-          setSelectedApp: s
+          setSelectedApp: g
         }
       )
     ] })
@@ -3609,11 +3642,11 @@ const Dr = ji(pi), kA = ({
   showIcon: n,
   showRole: l,
   isOnOrgSelect: c,
-  setSelectedApp: s
-}) => t && e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ g(a, { marginTop: "lg", children: [
-  r && /* @__PURE__ */ A(K.H5, { children: r }),
+  setSelectedApp: g
+}) => t && e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ s(a, { marginTop: "lg", children: [
+  r && /* @__PURE__ */ A(J.H5, { children: r }),
   /* @__PURE__ */ A(
-    kA,
+    EA,
     {
       of: e,
       render: (C) => /* @__PURE__ */ A(
@@ -3625,7 +3658,7 @@ const Dr = ji(pi), kA = ({
           handleToSelectOrg: o,
           showRole: l,
           isOnOrgSelect: c,
-          setSelectedApp: s
+          setSelectedApp: g
         }
       )
     }
@@ -3638,11 +3671,11 @@ const Dr = ji(pi), kA = ({
   totalData: t,
   setSelectedApp: n
 }) => {
-  var c, s, C, d, w;
+  var c, g, C, d, w;
   const l = _A();
-  return /* @__PURE__ */ g(LA, { onHide: e, show: i, closeButton: !1, children: [
-    /* @__PURE__ */ g(
-      aA,
+  return /* @__PURE__ */ s(LA, { onHide: e, show: i, closeButton: !1, children: [
+    /* @__PURE__ */ s(
+      wA,
       {
         paddingBlock: "lg",
         onClick: l.show ? l.close : e,
@@ -3651,7 +3684,7 @@ const Dr = ji(pi), kA = ({
         children: [
           l.show ? /* @__PURE__ */ A(m, { name: "ChevronLeft" }) : /* @__PURE__ */ A(m, { name: "Cross" }),
           /* @__PURE__ */ A(
-            K.SubH3,
+            J.SubH3,
             {
               props: {
                 color: "gray-500"
@@ -3662,10 +3695,10 @@ const Dr = ji(pi), kA = ({
         ]
       }
     ),
-    l.show ? /* @__PURE__ */ g(W, { children: [
-      /* @__PURE__ */ A(K.H4, { children: (c = l.data) == null ? void 0 : c.name }),
+    l.show ? /* @__PURE__ */ s(W, { children: [
+      /* @__PURE__ */ A(J.H4, { children: (c = l.data) == null ? void 0 : c.name }),
       /* @__PURE__ */ A(
-        K.SubH3,
+        J.SubH3,
         {
           props: {
             color: "tertiary"
@@ -3674,19 +3707,19 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        O,
+        Y,
         {
-          condition: !!((C = (s = l.data) == null ? void 0 : s.organizations) != null && C.length),
+          condition: !!((C = (g = l.data) == null ? void 0 : g.organizations) != null && C.length),
           children: /* @__PURE__ */ A(
             NA,
             {
               dataApps: (w = (d = l.data) == null ? void 0 : d.organizations) == null ? void 0 : w.map((B) => {
-                var u;
+                var I;
                 return {
                   ...B,
                   id: B.id,
                   isTenant: !0,
-                  applicationKey: ((u = l.data) == null ? void 0 : u.applicationKey) || ""
+                  applicationKey: ((I = l.data) == null ? void 0 : I.applicationKey) || ""
                 };
               }),
               handleSwitch: o,
@@ -3698,11 +3731,11 @@ const Dr = ji(pi), kA = ({
           )
         }
       )
-    ] }) : /* @__PURE__ */ g(W, { children: [
-      /* @__PURE__ */ g(J, { direction: "row", align: "center", gap: "sm", children: [
-        /* @__PURE__ */ A(K.H4, { children: "Switch Apps" }),
-        /* @__PURE__ */ g(
-          K.SubH3,
+    ] }) : /* @__PURE__ */ s(W, { children: [
+      /* @__PURE__ */ s(q, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ A(J.H4, { children: "Switch Apps" }),
+        /* @__PURE__ */ s(
+          J.SubH3,
           {
             props: {
               color: "gray-500"
@@ -3749,9 +3782,9 @@ const Dr = ji(pi), kA = ({
   variant: l = "single-api",
   isLoading: c
 }) => {
-  const [s, C] = G(!1), [d, w] = G("");
-  return /* @__PURE__ */ g(W, { children: [
-    /* @__PURE__ */ g(
+  const [g, C] = b(!1), [d, w] = b("");
+  return /* @__PURE__ */ s(W, { children: [
+    /* @__PURE__ */ s(
       a,
       {
         cursor: "pointer",
@@ -3799,13 +3832,13 @@ const Dr = ji(pi), kA = ({
       }
     ),
     /* @__PURE__ */ A(
-      O,
+      Y,
       {
         condition: l === "single-api",
         fallback: /* @__PURE__ */ A(
           Ni,
           {
-            show: s,
+            show: g,
             onHide: () => C((B) => !B),
             dataApps: i,
             totalData: e,
@@ -3819,7 +3852,7 @@ const Dr = ji(pi), kA = ({
         children: /* @__PURE__ */ A(
           Fi,
           {
-            show: s,
+            show: g,
             onHide: () => C((B) => !B),
             dataApps: i,
             totalData: e,
@@ -3844,7 +3877,7 @@ const Dr = ji(pi), kA = ({
           justifyContent: "center",
           alignItems: "center"
         },
-        children: /* @__PURE__ */ g(
+        children: /* @__PURE__ */ s(
           a,
           {
             style: {
@@ -3854,7 +3887,7 @@ const Dr = ji(pi), kA = ({
             align: "center",
             children: [
               /* @__PURE__ */ A("img", { style: { width: "180px" }, src: zi }),
-              /* @__PURE__ */ g(
+              /* @__PURE__ */ s(
                 Q,
                 {
                   fontWeight: "black",
@@ -3879,7 +3912,7 @@ const Dr = ji(pi), kA = ({
       }
     )
   ] });
-}, z = (e) => /* @__PURE__ */ A(
+}, K = (e) => /* @__PURE__ */ A(
   Q,
   {
     ...e,
@@ -3896,9 +3929,9 @@ const Dr = ji(pi), kA = ({
   fullWidth: o = !1,
   ...t
 }) => {
-  var c, s, C;
+  var c, g, C;
   const n = t.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -3906,35 +3939,35 @@ const Dr = ji(pi), kA = ({
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = t.tooltip) == null ? void 0 : s.label,
+                        label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
@@ -3951,15 +3984,15 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
+        /* @__PURE__ */ s(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
-            IA,
+            uA,
             {
               ref: t.inputRef,
               size: e,
@@ -3981,9 +4014,9 @@ const Dr = ji(pi), kA = ({
   fullWidth: o = !1,
   ...t
 }) => {
-  var c, s, C;
+  var c, g, C;
   const n = t.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -3991,35 +4024,35 @@ const Dr = ji(pi), kA = ({
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = t.tooltip) == null ? void 0 : s.label,
+                        label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4036,13 +4069,13 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
+        /* @__PURE__ */ s(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
             a,
             {
@@ -4067,16 +4100,16 @@ const Dr = ji(pi), kA = ({
   );
 }, Hi = (e, i) => typeof e == "string" && e || i === "error" ? "var(--starasia-ui-color-error)" : "var(--starasia-ui-text-disable)", Ji = (e) => {
   var c;
-  const [i, r] = G(!1), o = (s) => {
-    s.preventDefault(), s.stopPropagation();
-  }, t = (s) => {
-    s.preventDefault(), s.stopPropagation(), s.dataTransfer && e.handleOnFileChange(s.dataTransfer.files.item(0));
-  }, n = (s) => {
-    s.preventDefault(), r(!0);
-  }, l = (s) => {
-    s.preventDefault(), r(!1);
+  const [i, r] = b(!1), o = (g) => {
+    g.preventDefault(), g.stopPropagation();
+  }, t = (g) => {
+    g.preventDefault(), g.stopPropagation(), g.dataTransfer && e.handleOnFileChange(g.dataTransfer.files.item(0));
+  }, n = (g) => {
+    g.preventDefault(), r(!0);
+  }, l = (g) => {
+    g.preventDefault(), r(!1);
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       width: "width-full",
@@ -4106,8 +4139,8 @@ const Dr = ji(pi), kA = ({
             }
           }
         ),
-        /* @__PURE__ */ g(J, { gap: "xs", children: [
-          /* @__PURE__ */ g(J, { direction: "row", gap: "xs", children: [
+        /* @__PURE__ */ s(q, { gap: "xs", children: [
+          /* @__PURE__ */ s(q, { direction: "row", gap: "xs", children: [
             /* @__PURE__ */ A(
               Q,
               {
@@ -4128,7 +4161,7 @@ const Dr = ji(pi), kA = ({
               }
             )
           ] }),
-          /* @__PURE__ */ A(Q, { fontSize: "sm", color: "gray-500", children: (c = e.fileSupports) == null ? void 0 : c.map((s) => s.toLocaleUpperCase()).join(", ") })
+          /* @__PURE__ */ A(Q, { fontSize: "sm", color: "gray-500", children: (c = e.fileSupports) == null ? void 0 : c.map((g) => g.toLocaleUpperCase()).join(", ") })
         ] })
       ]
     }
@@ -4149,7 +4182,7 @@ function Ti(e) {
 }
 const Ui = (e) => {
   var i, r;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       width: "width-full",
@@ -4168,7 +4201,7 @@ const Ui = (e) => {
         cursor: "pointer"
       },
       children: [
-        /* @__PURE__ */ g(J, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ s(q, { direction: "row", align: "center", gap: "sm", children: [
           /* @__PURE__ */ A(
             m,
             {
@@ -4181,7 +4214,7 @@ const Ui = (e) => {
               }
             }
           ),
-          /* @__PURE__ */ g(J, { children: [
+          /* @__PURE__ */ s(q, { children: [
             /* @__PURE__ */ A(
               Q,
               {
@@ -4195,7 +4228,7 @@ const Ui = (e) => {
                 children: Ti(e.defaultUrl || "") || ((i = e.fileSelected) == null ? void 0 : i.name)
               }
             ),
-            !e.defaultUrl && /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
+            !e.defaultUrl && /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
               /* @__PURE__ */ A(Q, { fontSize: "sm", fontWeight: "medium", children: `${qi(
                 ((r = e.fileSelected) == null ? void 0 : r.size.toString()) || "100000"
               )}` }),
@@ -4215,7 +4248,7 @@ const Ui = (e) => {
           ] })
         ] }),
         /* @__PURE__ */ A(
-          b,
+          O,
           {
             size: "xs",
             secondary: !0,
@@ -4239,14 +4272,14 @@ const Ui = (e) => {
   );
 }, Wi = ({ status: e = "default", ...i }) => {
   var n;
-  const r = AA(null), o = () => {
+  const r = eA(null), o = () => {
     if (i.defaultUrl) {
       window.open(i.defaultUrl);
       return;
     }
     r.current && r.current.click();
-  }, t = V("md");
-  return /* @__PURE__ */ g(W, { children: [
+  }, t = X("md");
+  return /* @__PURE__ */ s(W, { children: [
     /* @__PURE__ */ A(
       "input",
       {
@@ -4260,7 +4293,7 @@ const Ui = (e) => {
         accept: (n = i.fileSupportOption) == null ? void 0 : n.map((l) => "." + (l == null ? void 0 : l.toLowerCase())).join(", ")
       }
     ),
-    /* @__PURE__ */ g(
+    /* @__PURE__ */ s(
       a,
       {
         fullWidth: !0,
@@ -4306,9 +4339,9 @@ const Ui = (e) => {
   fullWidth: o = !1,
   ...t
 }) => {
-  var c, s, C;
+  var c, g, C;
   const n = t.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -4316,35 +4349,35 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = t.tooltip) == null ? void 0 : s.label,
+                        label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4361,13 +4394,13 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(J, { gap: "xs", children: [
+        /* @__PURE__ */ s(q, { gap: "xs", children: [
           /* @__PURE__ */ A(
             Wi,
             {
@@ -4388,9 +4421,9 @@ const Ui = (e) => {
   required: t = !1,
   ...n
 }) => {
-  var s, C, d, w;
+  var g, C, d, w;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" || i === "horizontal-inline" ? "spacing-96" : "sm",
@@ -4398,33 +4431,33 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: n.title }),
-                  /* @__PURE__ */ A(K.Body3, { props: { color: "gray-500" }, children: n.description })
+                  /* @__PURE__ */ A(K, { children: n.title }),
+                  /* @__PURE__ */ A(J.Body3, { props: { color: "gray-500" }, children: n.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((g = n.tooltip) != null && g.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
@@ -4443,7 +4476,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
@@ -4456,13 +4489,13 @@ const Ui = (e) => {
             direction: i === "horizontal-inline" ? "row" : "column",
             align: "flex-start",
             children: /* @__PURE__ */ A(
-              kA,
+              EA,
               {
                 of: (w = n.checkBoxesList) == null ? void 0 : w.map((B) => ({
                   ...B,
                   isChecked: n.checkBoxesAreChecked.includes(B.id)
                 })),
-                render: (B) => B.renderBadge ? /* @__PURE__ */ g(
+                render: (B) => B.renderBadge ? /* @__PURE__ */ s(
                   a,
                   {
                     direction: "row",
@@ -4476,7 +4509,7 @@ const Ui = (e) => {
                           name: B.name,
                           value: B.id,
                           checked: B.isChecked,
-                          onChange: (u) => n.onChecked(u.target.value, B),
+                          onChange: (I) => n.onChecked(I.target.value, B),
                           label: B.name,
                           description: B.description
                         }
@@ -4490,7 +4523,7 @@ const Ui = (e) => {
                     name: B.name,
                     value: B.id,
                     checked: B.isChecked,
-                    onChange: (u) => n.onChecked(u.target.value, B),
+                    onChange: (I) => n.onChecked(I.target.value, B),
                     label: B.name,
                     description: B.description
                   }
@@ -4511,21 +4544,21 @@ const Ui = (e) => {
 }) => {
   var n;
   const t = e === "horizontal-inline" || e === "horizontal-block" ? i === "sm" ? 342 : i === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: e === "horizontal-inline" || e === "horizontal-block" ? "spacing-96" : "sm",
       direction: e === "horizontal-inline" || e === "horizontal-block" ? "row" : "column",
       children: [
-        /* @__PURE__ */ A(O, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
+        /* @__PURE__ */ A(Y, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ s(
           a,
           {
             direction: "column",
             customMaxWidth: t,
             fullWidth: r,
             children: [
-              o.title && /* @__PURE__ */ A(z, { children: o.title }),
-              /* @__PURE__ */ A(O, { condition: !!o.description, children: /* @__PURE__ */ A(Q, { color: "gray-500", children: o.description }) })
+              o.title && /* @__PURE__ */ A(K, { children: o.title }),
+              /* @__PURE__ */ A(Y, { condition: !!o.description, children: /* @__PURE__ */ A(Q, { color: "gray-500", children: o.description }) })
             ]
           }
         ) }),
@@ -4537,21 +4570,21 @@ const Ui = (e) => {
             align: "flex-start",
             flexWrap: "wrap",
             children: /* @__PURE__ */ A(
-              kA,
+              EA,
               {
                 of: (n = o.radioList) == null ? void 0 : n.map((l) => ({
                   ...l,
                   isChecked: o.radioIsChecked === l.id
                 })),
-                render: ({ value: l, id: c, isChecked: s, subInput: C, label: d, description: w }) => /* @__PURE__ */ g(a, { gap: "xs", customMaxWidth: t, children: [
+                render: ({ value: l, id: c, isChecked: g, subInput: C, label: d, description: w }) => /* @__PURE__ */ s(a, { gap: "xs", customMaxWidth: t, children: [
                   /* @__PURE__ */ A(
-                    Me,
+                    Ee,
                     {
                       id: `${c.toString()}-${l}`,
                       name: o.groupName || d,
                       label: d,
                       value: l,
-                      checked: s,
+                      checked: g,
                       onChange: (B) => o.onChecked({
                         id: c,
                         label: B.target.name,
@@ -4588,9 +4621,9 @@ const Ui = (e) => {
   fullWidth: o = !1,
   ...t
 }) => {
-  var c, s, C;
+  var c, g, C;
   const n = t.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -4598,35 +4631,35 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = t.tooltip) == null ? void 0 : s.label,
+                        label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4643,13 +4676,13 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(J, { gap: "xs", children: [
+        /* @__PURE__ */ s(q, { gap: "xs", children: [
           /* @__PURE__ */ A(
             Ie,
             {
@@ -4672,9 +4705,9 @@ const Ui = (e) => {
   fullWidth: t = !1,
   ...n
 }) => {
-  var c, s, C;
+  var c, g, C;
   const l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -4682,35 +4715,35 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: o,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: t,
                 children: [
-                  /* @__PURE__ */ A(z, { children: n.title }),
+                  /* @__PURE__ */ A(K, { children: n.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: t,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = n.tooltip) == null ? void 0 : s.label,
+                        label: (g = n.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = n.tooltip) == null ? void 0 : C.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4727,7 +4760,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
+                  /* @__PURE__ */ A(Y, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
                 ]
               }
             )
@@ -4752,31 +4785,31 @@ const Ui = (e) => {
   ...r
 }) => {
   const o = ZA(), t = (l) => {
-    var s, C, d, w, B, u;
+    var g, C, d, w, B, I;
     if (!l) return;
-    const c = r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (C = (s = o == null ? void 0 : o.computed) == null ? void 0 : s.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (u = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : u[50];
+    const c = r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (C = (g = o == null ? void 0 : o.computed) == null ? void 0 : g.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (I = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : I[50];
     return /* @__PURE__ */ A(m, { name: l, size: i, style: { color: c } });
   }, n = () => {
-    var c, s, C, d;
+    var c, g, C, d;
     if (e !== "secondary-danger" && e !== "secondary-primary")
       return r.title;
     const l = {
-      color: r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary-danger" ? (s = (c = o == null ? void 0 : o.computed) == null ? void 0 : c.red) == null ? void 0 : s[600] : (d = (C = o == null ? void 0 : o.computed) == null ? void 0 : C.blue) == null ? void 0 : d[700]
+      color: r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary-danger" ? (g = (c = o == null ? void 0 : o.computed) == null ? void 0 : c.red) == null ? void 0 : g[600] : (d = (C = o == null ? void 0 : o.computed) == null ? void 0 : C.blue) == null ? void 0 : d[700]
     };
     switch (i) {
       case "xs":
-        return /* @__PURE__ */ A(K.Body2, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.Body2, { props: { style: l }, children: r.title });
       case "sm":
       case "md":
-        return /* @__PURE__ */ A(K.SubH3, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.SubH3, { props: { style: l }, children: r.title });
       case "lg":
-        return /* @__PURE__ */ A(K.SubH2, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.SubH2, { props: { style: l }, children: r.title });
       default:
         return r.title;
     }
   };
   return /* @__PURE__ */ A(
-    b,
+    O,
     {
       fullWidth: !0,
       disabled: r.disabled,
@@ -4792,7 +4825,7 @@ const Ui = (e) => {
     }
   );
 }, _i = (e) => /* @__PURE__ */ A(
-  K.H5,
+  J.H5,
   {
     props: {
       ...e
@@ -4806,9 +4839,9 @@ const Ui = (e) => {
   fullWidth: o = !1,
   ...t
 }) => {
-  var c, s, C;
+  var c, g, C;
   const n = t.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -4816,35 +4849,35 @@ const Ui = (e) => {
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
-                        label: (s = t.tooltip) == null ? void 0 : s.label,
+                        label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4861,13 +4894,13 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(J, { gap: "xs", children: [
+        /* @__PURE__ */ s(q, { gap: "xs", children: [
           /* @__PURE__ */ A(
             a,
             {
@@ -4912,8 +4945,8 @@ async function et(e, i) {
   ), new Promise((n, l) => {
     o.toBlob((c) => {
       if (!c) return l("Canvas is empty");
-      const s = new File([c], "cropped.png", { type: "image/png" });
-      n(s);
+      const g = new File([c], "cropped.png", { type: "image/png" });
+      n(g);
     }, "image/png");
   });
 }
@@ -4936,52 +4969,52 @@ const VA = {
     size: n = "96",
     aspect: l = "1:1",
     containerProps: c,
-    maxFileSize: s = 2,
+    maxFileSize: g = 2,
     onError: C
   }, d) => {
-    const w = V("md"), [B, u] = G(!1), [j, h] = G(null), [Y, p] = G(!1), [N, U] = G({ x: 0, y: 0 }), [L, k] = G(1), [Z, H] = G(null);
-    R(() => {
+    const w = X("md"), [B, I] = b(!1), [G, h] = b(null), [j, p] = b(!1), [N, R] = b({ x: 0, y: 0 }), [f, k] = b(1), [P, Z] = b(null);
+    U(() => {
       i === null && t(null);
     }, [i]);
-    const P = JA(
-      (T, tA) => {
-        H(tA);
+    const V = JA(
+      (H, z) => {
+        Z(z);
       },
       []
-    ), X = (T) => {
-      var MA;
-      const tA = (MA = T.target.files) == null ? void 0 : MA[0];
-      if (!tA) return;
-      const wA = new FileReader();
-      wA.onload = () => {
-        h(wA.result), p(!0);
-      }, wA.readAsDataURL(tA);
-    }, q = async () => {
-      if (!(!j || !Z))
+    ), AA = (H) => {
+      var aA;
+      const z = (aA = H.target.files) == null ? void 0 : aA[0];
+      if (!z) return;
+      const sA = new FileReader();
+      sA.onload = () => {
+        h(sA.result), p(!0);
+      }, sA.readAsDataURL(z);
+    }, T = async () => {
+      if (!(!G || !P))
         try {
-          const T = await et(j, Z);
-          if (s && T.size > s * 1024 * 1024) {
-            C == null || C(`Ukuran file maksimal ${s}MB`);
+          const H = await et(G, P);
+          if (g && H.size > g * 1024 * 1024) {
+            C == null || C(`Ukuran file maksimal ${g}MB`);
             return;
           }
-          e == null || e(T);
-          const tA = URL.createObjectURL(T);
-          t(tA, T), p(!1);
+          e == null || e(H);
+          const z = URL.createObjectURL(H);
+          t(z, H), p(!1);
         } catch {
           C == null || C("Gagal memproses gambar");
         }
-    }, E = AA(null), f = () => {
+    }, E = eA(null), S = () => {
       E.current && E.current.click();
     };
     xe(d, () => ({
       openFileDialog: () => {
-        var T;
-        (T = E.current) == null || T.click();
+        var H;
+        (H = E.current) == null || H.click();
       }
     }));
     const M = parseInt(n, 10), D = VA[l];
     let F, x;
-    return D >= 1 ? (x = M, F = M * D) : (F = M, x = M / D), /* @__PURE__ */ g(
+    return D >= 1 ? (x = M, F = M * D) : (F = M, x = M / D), /* @__PURE__ */ s(
       a,
       {
         display: "flex",
@@ -5000,8 +5033,8 @@ const VA = {
           aspectRatio: D,
           flexShrink: 0
         },
-        onMouseEnter: () => u(!0),
-        onMouseLeave: () => u(!1),
+        onMouseEnter: () => I(!0),
+        onMouseLeave: () => I(!1),
         children: [
           o || i ? /* @__PURE__ */ A(
             "img",
@@ -5035,7 +5068,7 @@ const VA = {
               )
             }
           ),
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ s(
             a,
             {
               position: "absolute",
@@ -5049,7 +5082,7 @@ const VA = {
                 opacity: B ? 1 : 0,
                 transition: "opacity 0.3s ease-in-out"
               },
-              onClick: f,
+              onClick: S,
               children: [
                 /* @__PURE__ */ A(
                   "input",
@@ -5057,12 +5090,12 @@ const VA = {
                     ref: E,
                     type: "file",
                     accept: "image/*",
-                    onChange: X,
+                    onChange: AA,
                     disabled: r,
                     style: { display: "none" }
                   }
                 ),
-                /* @__PURE__ */ g(a, { display: "flex", align: "center", gap: "spacing-2", direction: "row", children: [
+                /* @__PURE__ */ s(a, { display: "flex", align: "center", gap: "spacing-2", direction: "row", children: [
                   /* @__PURE__ */ A(
                     m,
                     {
@@ -5070,7 +5103,7 @@ const VA = {
                       style: { color: "var(--starasia-ui-color-gray-50)" }
                     }
                   ),
-                  /* @__PURE__ */ A(O, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
+                  /* @__PURE__ */ A(Y, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
                     Q,
                     {
                       color: "gray-50",
@@ -5110,16 +5143,16 @@ const VA = {
               )
             }
           ),
-          /* @__PURE__ */ g(
-            QA,
+          /* @__PURE__ */ s(
+            hA,
             {
-              isShow: Y,
+              isShow: j,
               onHide: () => p(!1),
               style: {
                 minWidth: w ? l === "1:1" ? "20rem" : F * 2 : "100%"
               },
               children: [
-                /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(
+                /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ A(
                   a,
                   {
                     position: "relative",
@@ -5128,16 +5161,16 @@ const VA = {
                       height: "20rem",
                       backgroundColor: "gray-100"
                     },
-                    children: j && /* @__PURE__ */ A(
+                    children: G && /* @__PURE__ */ A(
                       Se,
                       {
-                        image: j,
+                        image: G,
                         crop: N,
-                        zoom: L,
+                        zoom: f,
                         aspect: l ? VA[l] : void 0,
-                        onCropChange: U,
+                        onCropChange: R,
                         onZoomChange: k,
-                        onCropComplete: P,
+                        onCropComplete: V,
                         objectFit: "contain",
                         minZoom: 0.5,
                         restrictPosition: !1
@@ -5145,9 +5178,9 @@ const VA = {
                     )
                   }
                 ) }),
-                /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
-                  /* @__PURE__ */ A(b, { size: "xs", secondary: !0, onClick: () => p(!1), children: "Cancel" }),
-                  /* @__PURE__ */ A(b, { size: "xs", primary: !0, onClick: q, children: "Crop" })
+                /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
+                  /* @__PURE__ */ A(O, { size: "xs", secondary: !0, onClick: () => p(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(O, { size: "xs", primary: !0, onClick: T, children: "Crop" })
                 ] }) })
               ]
             }
@@ -5164,9 +5197,9 @@ const VA = {
   required: t = !1,
   ...n
 }) => {
-  var s, C, d;
+  var g, C, d;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -5174,33 +5207,33 @@ const VA = {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: n.title }),
+                  /* @__PURE__ */ A(K, { children: n.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((g = n.tooltip) != null && g.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
@@ -5219,13 +5252,13 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ g(J, { gap: "xs", children: [
+        /* @__PURE__ */ s(q, { gap: "xs", children: [
           /* @__PURE__ */ A(it, { ...n.inputProps }),
           !l && n.errorMessage && /* @__PURE__ */ A(nA, { message: n.errorMessage })
         ] })
@@ -5239,9 +5272,9 @@ const VA = {
   fullWidth: o = !1,
   ...t
 }) => {
-  var l, c, s;
+  var l, c, g;
   const n = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
@@ -5249,36 +5282,36 @@ const VA = {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          O,
+          Y,
           {
             condition: !!t.inputProps.required,
-            fallback: /* @__PURE__ */ g(
+            fallback: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: n,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(z, { children: t.title }),
+                  /* @__PURE__ */ A(K, { children: t.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 direction: "column",
                 customMaxWidth: n,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(z, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(z, { color: "error", fontSize: e, children: r }),
-                    /* @__PURE__ */ A(O, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
-                      iA,
+                  /* @__PURE__ */ s(q, { direction: "row", gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Y, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
+                      tA,
                       {
                         label: (c = t.tooltip) == null ? void 0 : c.label,
-                        arrowPosition: (s = t.tooltip) == null ? void 0 : s.arrowPosition,
+                        arrowPosition: (g = t.tooltip) == null ? void 0 : g.arrowPosition,
                         ...t.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -5294,7 +5327,7 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(Y, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -5313,15 +5346,15 @@ const VA = {
   disabled: n = !1
 }) => {
   var d;
-  const [l, c] = G([]);
-  R(() => {
+  const [l, c] = b([]);
+  U(() => {
     e && c([...e.map((w) => ({ id: w.id, isActive: w.isActive }))]);
   }, [e]);
-  const s = (d = l.find((w) => w.id === i)) == null ? void 0 : d.isActive, C = JA(() => {
+  const g = (d = l.find((w) => w.id === i)) == null ? void 0 : d.isActive, C = JA(() => {
     c(
       (w) => w.map((B) => B.id === i ? { ...B, isActive: !B.isActive } : B)
-    ), r && r(!s);
-  }, [i, r, s]);
+    ), r && r(!g);
+  }, [i, r, g]);
   return /* @__PURE__ */ A(
     a,
     {
@@ -5334,9 +5367,9 @@ const VA = {
         ee,
         {
           disabled: n,
-          checked: s,
+          checked: g,
           onChange: C,
-          label: s ? "Active" : "Inactive"
+          label: g ? "Active" : "Inactive"
         }
       )
     }
@@ -5355,12 +5388,12 @@ const VA = {
   InputImgFile: tt,
   Custom: rt
 }, ot = ({ customBottom: e }) => {
-  const [i, r] = G(!1), o = () => {
+  const [i, r] = b(!1), o = () => {
     window.scrollY > window.screenY ? r(!0) : r(!1);
   }, t = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
-  return R(() => (window.addEventListener("scroll", o), () => {
+  return U(() => (window.addEventListener("scroll", o), () => {
     window.removeEventListener("scroll", o);
   }), []), /* @__PURE__ */ A(
     a,
@@ -5381,7 +5414,7 @@ const VA = {
             transition: "transform 0.2s ease-in-out"
           },
           children: /* @__PURE__ */ A(
-            b,
+            O,
             {
               secondary: !0,
               size: "xs",
@@ -5404,9 +5437,9 @@ const VA = {
       )
     }
   );
-}, Mr = ({ pageLayout: e, children: i }) => {
-  const r = V("lg");
-  return /* @__PURE__ */ g(
+}, Er = ({ pageLayout: e, children: i }) => {
+  const r = X("lg");
+  return /* @__PURE__ */ s(
     a,
     {
       display: "block",
@@ -5443,12 +5476,12 @@ const VA = {
       ]
     }
   );
-}, Er = ({
+}, Mr = ({
   children: e,
   withScrollToTopButton: i = !1,
   scrollToTopButtonProps: r,
   containerProps: o
-}) => /* @__PURE__ */ A(a, { position: "absolute", width: "width-full", style: { zIndex: "var(--app-footer-zindex, 999)" }, children: /* @__PURE__ */ g(
+}) => /* @__PURE__ */ A(a, { position: "absolute", width: "width-full", style: { zIndex: "var(--app-footer-zindex, 999)" }, children: /* @__PURE__ */ s(
   a,
   {
     position: "fixed",
@@ -5480,20 +5513,20 @@ const VA = {
     ]
   }
 ) }), mr = ({ fields: e }) => /* @__PURE__ */ A(a, { display: "flex", direction: "column", gap: "lg", children: /* @__PURE__ */ A(
-  kA,
+  EA,
   {
     of: e,
     render: (i, r) => /* @__PURE__ */ A(nt, { ...i }, r)
   }
-) }), nt = ({ title: e, value: i, icon: r }) => /* @__PURE__ */ g(a, { display: "flex", direction: "column", gap: "sm", children: [
-  r ? /* @__PURE__ */ g(a, { display: "flex", direction: "row", align: "center", gap: "xs", children: [
+) }), nt = ({ title: e, value: i, icon: r }) => /* @__PURE__ */ s(a, { display: "flex", direction: "column", gap: "sm", children: [
+  r ? /* @__PURE__ */ s(a, { display: "flex", direction: "row", align: "center", gap: "xs", children: [
     /* @__PURE__ */ A(m, { name: r, color: "var(--starasia-ui-color-gray-300)" }),
     /* @__PURE__ */ A(Q, { color: "gray-500", variant: "sub-h3", children: e })
   ] }) : /* @__PURE__ */ A(Q, { color: "gray-500", variant: "sub-h3", children: e }),
   typeof i == "string" ? /* @__PURE__ */ A(Q, { variant: "sub-h3", children: i }) : i
 ] });
 function lt({ width: e, height: i }) {
-  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ s(
     "svg",
     {
       width: e || "100",
@@ -5644,31 +5677,31 @@ const yr = ({
   leftIcon: n,
   showButton: l = !0,
   customHeight: c,
-  childrenButton: s,
+  childrenButton: g,
   customIcon: C
 }) => {
   const d = () => {
     switch (o) {
       case "primary":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(b, { primary: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(b, { primary: !0, onClick: r, children: s || e }) });
+        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(O, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { primary: !0, onClick: r, children: g || e }) });
       case "secondary":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(b, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
+        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(O, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
           Q,
           {
             fontFamily: "Poppins",
             fontSize: "md",
             fontWeight: "medium",
             style: { color: "var(--starasia-ui-utility-success-default)" },
-            children: s || e
+            children: g || e
           }
-        ) : e }) : /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: s || e }) });
+        ) : e }) : /* @__PURE__ */ A(O, { secondary: !0, onClick: r, children: g || e }) });
       case "success":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(b, { success: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(b, { success: !0, onClick: r, children: s || e }) });
+        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(O, { success: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { success: !0, onClick: r, children: g || e }) });
       default:
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(b, { primary: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(b, { primary: !0, onClick: r, children: s || e }) });
+        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(O, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { primary: !0, onClick: r, children: g || e }) });
     }
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ s(
     a,
     {
       height: "height-full",
@@ -5682,7 +5715,7 @@ const yr = ({
       children: [
         C || /* @__PURE__ */ A(lt, {}),
         /* @__PURE__ */ A(a, { children: i.map((w, B) => /* @__PURE__ */ A(
-          K.Body1,
+          J.Body1,
           {
             props: {
               align: "center",
@@ -5698,7 +5731,7 @@ const yr = ({
   );
 };
 function ct({ width: e, height: i }) {
-  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ s(
     "svg",
     {
       width: e,
@@ -5901,8 +5934,8 @@ function ct({ width: e, height: i }) {
   ) });
 }
 function xr({ onClick: e }) {
-  const i = V("md");
-  return /* @__PURE__ */ g(
+  const i = X("md");
+  return /* @__PURE__ */ s(
     a,
     {
       height: "height-screen",
@@ -5931,13 +5964,13 @@ function xr({ onClick: e }) {
             children: "Sorry, we couldn't find the page you are looking for"
           }
         ),
-        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
 }
 function gt({ width: e, height: i }) {
-  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ s(
     "svg",
     {
       width: e,
@@ -5957,7 +5990,7 @@ function gt({ width: e, height: i }) {
             fillOpacity: "0.6"
           }
         ),
-        /* @__PURE__ */ g("g", { clipPath: "url(#clip0_2949_9690)", children: [
+        /* @__PURE__ */ s("g", { clipPath: "url(#clip0_2949_9690)", children: [
           /* @__PURE__ */ A(
             "path",
             {
@@ -6054,7 +6087,7 @@ function gt({ width: e, height: i }) {
               )
             }
           ),
-          /* @__PURE__ */ g("g", { mask: "url(#mask0_2949_9690)", children: [
+          /* @__PURE__ */ s("g", { mask: "url(#mask0_2949_9690)", children: [
             /* @__PURE__ */ A(
               "path",
               {
@@ -6152,8 +6185,8 @@ function gt({ width: e, height: i }) {
   ) });
 }
 function fr({ onClick: e }) {
-  const i = V("md");
-  return /* @__PURE__ */ g(
+  const i = X("md");
+  return /* @__PURE__ */ s(
     a,
     {
       height: "height-screen",
@@ -6165,13 +6198,13 @@ function fr({ onClick: e }) {
       children: [
         /* @__PURE__ */ A(gt, { width: i ? 600 : 300 }),
         /* @__PURE__ */ A(Q, { fontWeight: "bold", fontSize: i ? "3xl" : "2xl", children: "We Are Sorry ..." }),
-        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
 }
 function st({ width: e, height: i }) {
-  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ A(W, { children: /* @__PURE__ */ s(
     "svg",
     {
       width: e,
@@ -6843,8 +6876,8 @@ function st({ width: e, height: i }) {
   ) });
 }
 function Sr({ onClick: e }) {
-  const i = V("md");
-  return /* @__PURE__ */ g(
+  const i = X("md");
+  return /* @__PURE__ */ s(
     a,
     {
       height: "height-screen",
@@ -6874,16 +6907,16 @@ function Sr({ onClick: e }) {
             children: "we are trying to fix the problem"
           }
         ),
-        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
 }
 const Lr = (e) => {
   var r, o, t, n, l;
-  const i = V("md");
-  return /* @__PURE__ */ g(
-    QA,
+  const i = X("md");
+  return /* @__PURE__ */ s(
+    hA,
     {
       isShow: e.isShow,
       onHide: e.onHide,
@@ -6895,8 +6928,8 @@ const Lr = (e) => {
         }
       },
       children: [
-        /* @__PURE__ */ A(BA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(Q, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
-        /* @__PURE__ */ A(hA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(Q, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
+        /* @__PURE__ */ A(dA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(Q, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
+        /* @__PURE__ */ A(DA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(Q, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
         /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ A(
           a,
           {
@@ -6904,7 +6937,7 @@ const Lr = (e) => {
             direction: ((r = e.containerConfirmBtnProps) == null ? void 0 : r.direction) || "row",
             justify: ((o = e.containerConfirmBtnProps) == null ? void 0 : o.justify) || "flex-end",
             ...e.containerConfirmBtnProps,
-            children: /* @__PURE__ */ g(
+            children: /* @__PURE__ */ s(
               a,
               {
                 display: "flex",
@@ -6913,7 +6946,7 @@ const Lr = (e) => {
                 gap: ((l = e.wrapperConfirmBtnProps) == null ? void 0 : l.gap) || "sm",
                 ...e.wrapperConfirmBtnProps,
                 children: [
-                  e.onCancel && /* @__PURE__ */ A(b, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
+                  e.onCancel && /* @__PURE__ */ A(O, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
                   /* @__PURE__ */ A(
                     a,
                     {
@@ -6922,7 +6955,7 @@ const Lr = (e) => {
                         textWrap: "nowrap"
                       },
                       children: /* @__PURE__ */ A(
-                        b,
+                        O,
                         {
                           ...e.buttonConfirmProps,
                           onClick: e.onConfirm,
@@ -6950,15 +6983,15 @@ const Lr = (e) => {
     customHeight: o,
     paddingInline: t = "spacing-24"
   }) => {
-    const n = AA(null), [l, c] = G("100vh");
-    return R(() => {
-      const s = () => {
+    const n = eA(null), [l, c] = b("100vh");
+    return U(() => {
+      const g = () => {
         if (n.current) {
           const C = n.current.getBoundingClientRect().top;
-          c(`calc(100vh - ${C + 16}px)`);
+          c(`calc(100vh - ${C}px)`);
         }
       };
-      return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+      return g(), window.addEventListener("resize", g), () => window.removeEventListener("resize", g);
     }, []), /* @__PURE__ */ A(
       a,
       {
@@ -6970,20 +7003,20 @@ const Lr = (e) => {
         paddingInline: t,
         bg: "gray-50",
         style: {
-          height: l
+          minHeight: l
         },
         children: e
       }
     );
   }
 ), Gr = (e) => {
-  const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = uA(), n = DA(o.toString());
+  const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = kA(), n = IA(o.toString());
   return {
     activeTab: n[r] ? parseInt(n[r]) : i,
-    handleTabChange: (s) => {
+    handleTabChange: (g) => {
       t({
         ...n,
-        [r]: s.toString()
+        [r]: g.toString()
       });
     },
     searchQueries: n
@@ -6995,23 +7028,23 @@ function Or({
   formatTitle: r
 }) {
   const o = SA();
-  R(() => {
+  U(() => {
     let t = null, n = null;
-    for (const s of i) {
-      const C = s.items.find((d) => d.to ? d.to === "/" ? o.pathname === "/" : !!(d.to === o.pathname || o.pathname.startsWith(d.to + "/")) : !1);
+    for (const g of i) {
+      const C = g.items.find((d) => d.to ? d.to === "/" ? o.pathname === "/" : !!(d.to === o.pathname || o.pathname.startsWith(d.to + "/")) : !1);
       if (C) {
-        t = C, n = s;
+        t = C, n = g;
         break;
       }
     }
     const l = [];
     t != null && t.title && l.push(t.title), n != null && n.name && l.push(n.name.toTitleCase());
-    const c = (s, C) => s.length > 0 ? `${s.join(" - ")} | ${C}` : C;
+    const c = (g, C) => g.length > 0 ? `${g.join(" - ")} | ${C}` : C;
     document.title = (r || c)(l, e);
   }, [o.pathname]);
 }
 const Yr = () => {
-  const [e, i] = uA(), r = DA(e.toString()), o = re(), t = SA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = re(), t = SA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -7033,17 +7066,17 @@ function pr(e) {
   var o, t;
   const i = e.decodedAccessToken;
   return oA(() => {
-    var s, C;
-    const n = ((C = (s = i == null ? void 0 : i.access) == null ? void 0 : s.role) == null ? void 0 : C.code) ?? "", l = Object.keys(e.role).reduce(
+    var g, C;
+    const n = ((C = (g = i == null ? void 0 : i.access) == null ? void 0 : g.role) == null ? void 0 : C.code) ?? "", l = Object.keys(e.role).reduce(
       (d, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
         return { ...d, [B]: !1 };
       },
       {}
     );
     return {
       ...Object.keys(e.role).reduce((d, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
         return {
           ...d,
           [B]: n === e.role[w]
@@ -7062,16 +7095,16 @@ export {
   Oe as AppComponent,
   oe as AppContext,
   Zt as AppLayout,
-  Mr as AsideBar,
+  Er as AsideBar,
   Ht as AuthLayout,
   Gi as ColumnFilterDropdown,
   Lr as ConfirmationDialog,
   Yi as DataTable,
-  O as DecisionWrapper,
-  kA as EachUtils,
+  Y as DecisionWrapper,
+  EA as EachUtils,
   yr as EmptyStatePage,
   yi as FilterDrawer,
-  Er as FloatingFooter,
+  Mr as FloatingFooter,
   fr as ForbiddenPage,
   kr as Form,
   br as FullSection,
@@ -7082,7 +7115,7 @@ export {
   pe as ModuleSwitcherModal,
   xr as NotFoundPage,
   Tt as PageLayout,
-  aA as Pressable,
+  wA as Pressable,
   LA as RightDrawer,
   ot as ScrollToTopButton,
   Ut as Section,
@@ -7094,7 +7127,7 @@ export {
   Dr as TableSection,
   fi as TableWrapper,
   ur as ToggleStatus,
-  K as Typography,
+  J as Typography,
   mr as VerticalField,
   Rt as createInitialFromUserName,
   $t as cssVars,