@starasia/admin 1.2.8 → 1.2.10

package/dist/index.es.js

@@ -3,12 +3,12 @@ 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 L } from "@starasia/button";
+import { Button as b } 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 dA, DialogBody as hA, DialogTitle as BA, DialogFooter as xA } from "@starasia/dialog";
+import { Dialog as QA, DialogBody as hA, DialogTitle as BA, DialogFooter as xA } from "@starasia/dialog";
 export * from "@starasia/dialog";
 import { Drawer as ae } from "@starasia/drawer";
 export * from "@starasia/drawer";
@@ -20,12 +20,12 @@ import { searchParamsToObject as DA } from "@starasia/http";
 export * from "@starasia/http";
 import { Input as IA } from "@starasia/input";
 export * from "@starasia/input";
-import { Menu as Ce, MenuButton as Be, MenuLists as we, MenuBody as Qe } from "@starasia/menu";
+import { Menu as Ce, MenuButton as Be, MenuLists as we, MenuBody as de } from "@starasia/menu";
 export * from "@starasia/menu";
-import { Pagination as de } from "@starasia/pagination";
+import { Pagination as Qe } from "@starasia/pagination";
 export * from "@starasia/pagination";
 export * from "@starasia/storage";
-import { Tr as QA, Td as sA, Table as Ae, Thead as he, Th as TA, Tbody as De } from "@starasia/table";
+import { Tr as dA, Td as sA, 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";
@@ -41,7 +41,7 @@ import { Checkbox as FA } from "@starasia/checkbox";
 export * from "@starasia/checkbox";
 import { Radio as Me } from "@starasia/radio";
 export * from "@starasia/radio";
-import { Text as d } from "@starasia/text";
+import { Text as Q } from "@starasia/text";
 export * from "@starasia/text";
 import { Icon as m } from "@starasia/icon";
 export * from "@starasia/icon";
@@ -54,7 +54,7 @@ export * from "@starasia/story-record";
 import { Skeleton as lA } 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 b, 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 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 "@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 Se from "react-easy-crop";
@@ -67,7 +67,7 @@ const Le = {
   setUserData: () => {
   }
 }, oe = Ee(Le), be = () => me(oe), Ge = (e) => {
-  const [i, r] = b(
+  const [i, r] = G(
     (e == null ? void 0 : e.initialUserData) || null
   );
   return {
@@ -142,7 +142,7 @@ function pe({
     t(l), i();
   };
   return /* @__PURE__ */ A(
-    dA,
+    QA,
     {
       isShow: e,
       onHide: i,
@@ -186,8 +186,8 @@ function pe({
                         width: "64px",
                         height: "64px",
                         borderRadius: "12px",
-                        border: o === null ? "2px solid var(--hsd-ui-brand-primary-default, #3b82f6)" : "1px solid #e5e7eb",
-                        backgroundColor: o === null ? "var(--hsd-ui-brand-primary-light, #eff6ff)" : "rgba(255,255,255,0.85)",
+                        border: o === null ? "2px solid var(--starasia-ui-brand-primary-default, #3b82f6)" : "1px solid #e5e7eb",
+                        backgroundColor: o === null ? "var(--starasia-ui-brand-primary-light, #eff6ff)" : "rgba(255,255,255,0.85)",
                         transition: "all 0.15s",
                         backdropFilter: "blur(4px)"
                       },
@@ -241,8 +241,8 @@ function pe({
                           width: "64px",
                           height: "64px",
                           borderRadius: "12px",
-                          border: c ? "2px solid var(--hsd-ui-brand-primary-default, #3b82f6)" : "1px solid #e5e7eb",
-                          backgroundColor: c ? "var(--hsd-ui-brand-primary-light, #eff6ff)" : "rgba(255,255,255,0.85)",
+                          border: c ? "2px solid var(--starasia-ui-brand-primary-default, #3b82f6)" : "1px solid #e5e7eb",
+                          backgroundColor: c ? "var(--starasia-ui-brand-primary-light, #eff6ff)" : "rgba(255,255,255,0.85)",
                           transition: "all 0.15s",
                           backdropFilter: "blur(4px)"
                         },
@@ -288,9 +288,9 @@ function Zt({
   sidebarHeaderContent: c,
   showModuleSwitcher: s = !0
 }) {
-  const [C] = uA(), Q = C.get("embed") === "true", w = be(), B = te(), u = SA(), D = !V("md"), [O, Y] = b(!1), [F, U] = b(!1), [p, k] = b(!1), [Z, H] = b(/* @__PURE__ */ new Set()), [P, X] = b(!1), [q, E] = b(!1), [f, M] = b(null), h = AA(null), N = AA(null);
+  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 = h.current;
+    const I = D.current;
     if (!I) return;
     const y = () => {
       gA || (EA = I.scrollTop);
@@ -298,7 +298,7 @@ function Zt({
     return I.addEventListener("scroll", y), () => I.removeEventListener("scroll", y);
   }, []);
   const x = () => {
-    const I = h.current;
+    const I = D.current;
     I && EA > 0 && (gA = !0, I.scrollTop = EA, requestAnimationFrame(() => {
       gA = !1;
     }));
@@ -312,7 +312,7 @@ function Zt({
   }, []), zA(() => {
     w.menus.length > 0 && (EA > 0 ? x() : requestAnimationFrame(() => {
       var y;
-      const I = (y = h.current) == null ? void 0 : y.querySelector(
+      const I = (y = D.current) == null ? void 0 : y.querySelector(
         "[data-menu-active='true']"
       );
       I && I.scrollIntoView({ block: "center", behavior: "instant" });
@@ -326,18 +326,18 @@ function Zt({
       clearTimeout(I), clearTimeout(y), clearTimeout(S), clearTimeout(v), clearTimeout(eA);
     };
   }, [u.pathname]), R(() => {
-    N.current && (N.current.scrollTop = 0);
+    F.current && (F.current.scrollTop = 0);
   }, [u.pathname]), R(() => {
-    D && k(!1);
-  }, [u.pathname, D]), R(() => {
-    D && U(!0);
-  }, [D]);
+    h && k(!1);
+  }, [u.pathname, h]), R(() => {
+    h && U(!0);
+  }, [h]);
   const T = () => {
-    Y(!0);
+    p(!0);
   }, tA = () => {
-    Y(!1);
+    p(!1);
   }, wA = () => {
-    Y(!1), t();
+    p(!1), t();
   }, MA = w.menus.flatMap(
     (I) => I.items.flatMap((y) => {
       const S = [y.to];
@@ -400,18 +400,20 @@ function Zt({
     X(!1);
   }, [u.pathname]), R(() => {
     s || E(!1);
-  }, [s]), Q ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A(WA, {}) }) : /* @__PURE__ */ g(W, { children: [
+  }, [s]), d ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A(WA, {}) }) : /* @__PURE__ */ g(W, { children: [
     /* @__PURE__ */ g(
       "div",
       {
         style: {
           display: "flex",
           height: "100vh",
-          backgroundColor: "#f9fafb",
-          position: "relative"
+          // backgroundColor: "#f9fafb",
+          position: "relative",
+          "--app-sidebar-width": h ? "0px" : N ? "4rem" : "16rem",
+          "--app-footer-zindex": h && L ? "40" : "999"
         },
         children: [
-          D && /* @__PURE__ */ A(
+          h && /* @__PURE__ */ A(
             "div",
             {
               style: {
@@ -419,8 +421,8 @@ function Zt({
                 inset: 0,
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
                 zIndex: 40,
-                opacity: p ? 0.5 : 0,
-                pointerEvents: p ? "auto" : "none",
+                opacity: L ? 0.5 : 0,
+                pointerEvents: L ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
               onClick: () => k(!1)
@@ -430,19 +432,19 @@ function Zt({
             "aside",
             {
               style: {
-                width: D ? "16rem" : F ? "4rem" : "16rem",
-                position: D ? "fixed" : "relative",
-                ...D && {
+                width: h ? "16rem" : N ? "4rem" : "16rem",
+                position: h ? "fixed" : "relative",
+                ...h && {
                   inset: 0,
                   zIndex: 50,
-                  transform: p ? "translateX(0)" : "translateX(-100%)"
+                  transform: L ? "translateX(0)" : "translateX(-100%)"
                 },
                 backgroundColor: "white",
                 borderRight: "1px solid #e5e7eb",
                 display: "flex",
                 flexDirection: "column",
                 transition: "all 0.3s ease-in-out",
-                flexShrink: D ? void 0 : 0
+                flexShrink: h ? void 0 : 0
               },
               children: [
                 /* @__PURE__ */ g(
@@ -479,7 +481,7 @@ function Zt({
                                 }
                               }
                             ),
-                            (!F || p) && /* @__PURE__ */ A(
+                            (!N || L) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
@@ -494,7 +496,7 @@ function Zt({
                           ]
                         }
                       ),
-                      D && /* @__PURE__ */ A(
+                      h && /* @__PURE__ */ A(
                         "button",
                         {
                           onClick: () => k(!1),
@@ -530,10 +532,10 @@ function Zt({
                     ]
                   }
                 ),
-                !D && /* @__PURE__ */ A(
+                !h && /* @__PURE__ */ A(
                   "button",
                   {
-                    onClick: () => U(!F),
+                    onClick: () => U(!N),
                     style: {
                       position: "absolute",
                       top: "1.5rem",
@@ -544,7 +546,7 @@ function Zt({
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      borderRadius: "0.5rem",
+                      borderRadius: "var(--starasia-ui-radii-md)",
                       backgroundColor: "white",
                       border: "1px solid #d1d5db",
                       boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
@@ -563,7 +565,7 @@ function Zt({
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
                         strokeWidth: "2",
-                        children: F ? (
+                        children: N ? (
                           // Icon when collapsed (closed) - sidebar with arrow right
                           /* @__PURE__ */ g(W, { children: [
                             /* @__PURE__ */ A(
@@ -611,14 +613,14 @@ function Zt({
                 c && /* @__PURE__ */ A(
                   Ye,
                   {
-                    collapsed: D ? !1 : F,
+                    collapsed: h ? !1 : N,
                     children: c
                   }
                 ),
                 /* @__PURE__ */ A(
                   "div",
                   {
-                    ref: h,
+                    ref: D,
                     style: {
                       flex: 1,
                       overflowY: "auto",
@@ -626,7 +628,7 @@ function Zt({
                       paddingBottom: "0.5rem"
                     },
                     children: bA.map((I) => /* @__PURE__ */ g("div", { style: { marginBottom: "1rem" }, children: [
-                      (!F || D) && /* @__PURE__ */ A(
+                      (!N || h) && /* @__PURE__ */ A(
                         "div",
                         {
                           style: {
@@ -644,7 +646,7 @@ function Zt({
                           children: I.name
                         }
                       ),
-                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem" }, children: I.items.map((y) => {
+                      /* @__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(
@@ -657,20 +659,21 @@ function Zt({
                                 width: "100%",
                                 display: "flex",
                                 alignItems: "center",
+                                justifyContent: N && !h ? "center" : void 0,
                                 gap: "0.75rem",
-                                paddingLeft: "0.75rem",
-                                paddingRight: "0.75rem",
+                                paddingLeft: N && !h ? "0" : "0.75rem",
+                                paddingRight: N && !h ? "0" : "0.75rem",
                                 paddingTop: "0.5rem",
                                 paddingBottom: "0.5rem",
-                                borderRadius: "0.5rem",
+                                borderRadius: "var(--starasia-ui-radii-md)",
                                 textAlign: "left",
                                 border: "none",
-                                backgroundColor: eA ? "#dbeafe" : "transparent",
-                                color: eA ? "#1e40af" : "#374151",
+                                backgroundColor: eA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                color: eA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
                                 transition: "all 0.2s",
                                 cursor: "pointer"
                               },
-                              title: F && !D ? y.title : void 0,
+                              title: N && !h ? y.title : void 0,
                               onMouseEnter: ($) => {
                                 eA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
@@ -679,7 +682,7 @@ function Zt({
                               },
                               children: [
                                 /* @__PURE__ */ A(m, { name: y.icon, size: "sm", style: { flexShrink: 0 } }),
-                                (!F || D) && /* @__PURE__ */ g(W, { children: [
+                                (!N || h) && /* @__PURE__ */ g(W, { children: [
                                   /* @__PURE__ */ A(
                                     "span",
                                     {
@@ -721,7 +724,7 @@ function Zt({
                               ]
                             }
                           ),
-                          S && (!F || D) && /* @__PURE__ */ A(
+                          S && (!N || h) && /* @__PURE__ */ A(
                             "div",
                             {
                               style: {
@@ -747,11 +750,11 @@ function Zt({
                                     paddingRight: "0.75rem",
                                     paddingTop: "0.5rem",
                                     paddingBottom: "0.5rem",
-                                    borderRadius: "0.5rem",
+                                    borderRadius: "var(--starasia-ui-radii-md)",
                                     textAlign: "left",
                                     border: "none",
-                                    backgroundColor: CA($.to) ? "#dbeafe" : "transparent",
-                                    color: CA($.to) ? "#1e40af" : "#4b5563",
+                                    backgroundColor: CA($.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                    color: CA($.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
                                     transition: "all 0.2s",
                                     cursor: "pointer"
                                   },
@@ -812,7 +815,7 @@ function Zt({
                 },
                 children: [
                   /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
-                    D && /* @__PURE__ */ A(
+                    h && /* @__PURE__ */ A(
                       "button",
                       {
                         onClick: () => k(!0),
@@ -858,7 +861,7 @@ function Zt({
                             justifyContent: "center",
                             width: "2.25rem",
                             height: "2.25rem",
-                            borderRadius: "0.5rem",
+                            borderRadius: "var(--starasia-ui-radii-md)",
                             border: "1px solid #e5e7eb",
                             color: "#374151",
                             backgroundColor: "transparent",
@@ -901,7 +904,7 @@ function Zt({
                             justifyContent: "center",
                             width: "2.25rem",
                             height: "2.25rem",
-                            borderRadius: "0.5rem",
+                            borderRadius: "var(--starasia-ui-radii-md)",
                             border: "1px solid #e5e7eb",
                             color: "#374151",
                             backgroundColor: "transparent",
@@ -1037,7 +1040,7 @@ function Zt({
                                 fontSize: "0.875rem",
                                 boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
                                 flexShrink: 0,
-                                backgroundColor: "var(--hsd-ui-brand-primary-default, #3b82f6)"
+                                backgroundColor: "var(--starasia-ui-brand-primary-default)"
                               },
                               children: ((r == null ? void 0 : r.name) || "U")[0].toUpperCase()
                             }
@@ -1052,7 +1055,7 @@ function Zt({
             /* @__PURE__ */ A(
               "main",
               {
-                ref: N,
+                ref: F,
                 style: {
                   flex: 1,
                   overflowY: "auto"
@@ -1089,12 +1092,12 @@ function Zt({
         onSelect: se
       }
     ),
-    /* @__PURE__ */ g(dA, { isShow: O, onHide: tA, children: [
+    /* @__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(L, { secondary: !0, onClick: tA, children: "Cancel" }) }),
-        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(L, { primary: !0, onClick: wA, children: "Yes, Sure" }) })
+        /* @__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" }) })
       ] }) }) })
     ] })
   ] });
@@ -1221,10 +1224,10 @@ const Ht = _(
         verticalAlign: n
       }),
       [t]
-    ), s = () => typeof i == "string" ? /* @__PURE__ */ A(d, { fontWeight: "medium", color: "gray-500", children: i }) : i, C = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(d, { color: "text", fontWeight: "medium", children: e }) : e;
-    return /* @__PURE__ */ g(QA, { children: [
+    ), 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(d, { fontWeight: "medium", color: "gray-500", children: ":" }) }) : null,
+      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() })
     ] });
   }
@@ -1317,20 +1320,20 @@ const Ht = _(
   }, s = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(L, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
       case "danger":
-        return /* @__PURE__ */ A(L, { danger: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { danger: !0, onClick: o, children: n });
       case "success":
-        return /* @__PURE__ */ A(L, { success: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { success: !0, onClick: o, children: n });
       default:
-        return /* @__PURE__ */ A(L, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
     }
   };
-  return /* @__PURE__ */ g(dA, { isShow: t, onHide: r, children: [
+  return /* @__PURE__ */ g(QA, { isShow: t, onHide: r, children: [
     c(),
-    /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(d, { children: i }) }),
+    /* @__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(L, { secondary: !0, onClick: r, children: "Cancel" }),
+      /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: "Cancel" }),
       s()
     ] }) })
   ] });
@@ -1356,21 +1359,21 @@ const Ht = _(
   containerProps: c,
   headerProps: s
 }) => {
-  const C = V("lg"), Q = te(), w = e == null ? void 0 : e.show, B = () => {
+  const C = V("lg"), d = te(), w = e == null ? void 0 : e.show, B = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
-    Q(-1, { replace: !0 });
+    d(-1, { replace: !0 });
   }, u = () => n ? ie(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
-    ({ title: Y, icon: F, buttonProps: U, onClick: p }, k) => !Y && !F ? null : /* @__PURE__ */ A(
-      L,
+    ({ title: p, icon: N, buttonProps: U, onClick: L }, k) => !p && !N ? null : /* @__PURE__ */ A(
+      b,
       {
         fullWidth: !C,
-        iconLeft: F ? /* @__PURE__ */ A(m, { name: F, size: "md" }) : void 0,
-        onClick: p,
+        iconLeft: N ? /* @__PURE__ */ A(m, { name: N, size: "md" }) : void 0,
+        onClick: L,
         ...U,
-        children: Y
+        children: p
       },
       `action-${k}`
     )
@@ -1392,7 +1395,7 @@ const Ht = _(
           }
         ),
         /* @__PURE__ */ A(
-          d,
+          Q,
           {
             color: "gray-500",
             fontWeight: "normal",
@@ -1417,7 +1420,7 @@ const Ht = _(
       }
     ),
     /* @__PURE__ */ A(
-      d,
+      Q,
       {
         color: "gray-500",
         fontWeight: "normal",
@@ -1428,28 +1431,37 @@ const Ht = _(
         children: (e == null ? void 0 : e.title) || "Back"
       }
     )
-  ] }) }) }), D = () => /* @__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(d, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
-            r && /* @__PURE__ */ A(XA, { border: !0, size: "lg", text: r, ...l })
-          ] }) : i,
-          u()
-        ]
-      }
-    )
-  ] }), O = () => o;
+  ] }) }) }), h = () => /* @__PURE__ */ g(
+    a,
+    {
+      gap: "sm",
+      paddingTop: (s == null ? void 0 : s.paddingTop) || "lg",
+      paddingInline: (s == null ? void 0 : s.paddingInline) || "xl",
+      ...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: [
-    t && D(),
-    O()
+    t && h(),
+    Y()
   ] });
 }, Tt = _(Ke), Ze = {
   icon: "Cross",
@@ -1502,7 +1514,7 @@ const Ht = _(
                 }
               ),
               /* @__PURE__ */ A(
-                d,
+                Q,
                 {
                   fontFamily: "Poppins",
                   fontSize: "md",
@@ -1560,31 +1572,31 @@ const Ht = _(
     onSearchChange: c,
     searchKey: s = "q",
     searchPlaceholder: C = "CTRL + K to search query",
-    searchHighlightPlaceholder: Q = "CTRL + K",
+    searchHighlightPlaceholder: d = "CTRL + K",
     filterContainer: w,
     actionContainer: B,
     headerProps: u = { borderBottom: !0 },
     variantTag: j = "info"
   }) => {
-    const D = V("lg"), [O, Y] = uA(), F = O.get(s), U = DA(O.toString()), p = JA(
+    const h = V("lg"), [Y, p] = uA(), N = Y.get(s), U = DA(Y.toString()), L = JA(
       ({ target: { value: P } }) => {
-        c && c(P), s && Y({ ...U, [s]: P });
+        c && c(P), s && p({ ...U, [s]: P });
       },
-      [s, c, Y, U]
+      [s, c, p, U]
     ), k = () => /* @__PURE__ */ A(
       IA,
       {
         placeholder: C,
-        highlightPlaceholder: Q,
+        highlightPlaceholder: d,
         leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-        onChange: p,
+        onChange: L,
         style: { width: "100%" },
-        value: F || ""
+        value: N || ""
       }
     ), Z = () => r ? /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
-      /* @__PURE__ */ A(d, { fontWeight: "medium", children: i }),
+      /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i }),
       /* @__PURE__ */ A(XA, { border: !0, text: r, variant: j })
-    ] }) : /* @__PURE__ */ A(d, { fontWeight: "medium", children: i });
+    ] }) : /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i });
     return /* @__PURE__ */ g(
       a,
       {
@@ -1604,7 +1616,7 @@ const Ht = _(
                 /* @__PURE__ */ A(
                   a,
                   {
-                    style: D ? { width: "100%", maxWidth: "19.313rem" } : { flex: 1 },
+                    style: h ? { width: "100%", maxWidth: "19.313rem" } : { flex: 1 },
                     ...B,
                     children: o || (n ? k() : null)
                   }
@@ -1618,7 +1630,7 @@ const Ht = _(
     );
   }
 ), qe = "#E6E9FB", Te = ({ children: e, onClick: i }) => {
-  const [r, o] = b("");
+  const [r, o] = G("");
   return /* @__PURE__ */ A(
     aA,
     {
@@ -1659,31 +1671,31 @@ const Ht = _(
     [t]
   );
   return /* @__PURE__ */ g(Ce, { position: n, style: r, children: [
-    /* @__PURE__ */ A(Be, { style: o, children: /* @__PURE__ */ A(L, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(m, { name: e, ...c }) }) }),
-    /* @__PURE__ */ A(we, { style: C, children: i.map((Q, w) => s === "outline-button" ? /* @__PURE__ */ A(Qe, { children: /* @__PURE__ */ g(
-      L,
+    /* @__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,
       {
         size: "sm",
         secondary: !0,
         fullWidth: !0,
-        onClick: Q.onClick,
-        ...Q.buttonProps,
+        onClick: d.onClick,
+        ...d.buttonProps,
         children: [
-          /* @__PURE__ */ A(m, { name: Q.icon, size: "md", ...Q.iconProps }),
-          /* @__PURE__ */ A(d, { fontSize: "sm", color: "text", ...Q.textProps, children: Q.label })
+          /* @__PURE__ */ A(m, { name: d.icon, size: "md", ...d.iconProps }),
+          /* @__PURE__ */ A(Q, { fontSize: "sm", color: "text", ...d.textProps, children: d.label })
         ]
       }
-    ) }, Q.id || w) : /* @__PURE__ */ g(
+    ) }, d.id || w) : /* @__PURE__ */ g(
       Ue,
       {
-        onClick: Q.onClick,
-        ...Q.buttonProps,
+        onClick: d.onClick,
+        ...d.buttonProps,
         children: [
-          /* @__PURE__ */ A(m, { name: Q.icon, size: "md", ...Q.iconProps }),
-          /* @__PURE__ */ A(d, { fontSize: "sm", color: "text", ...Q.textProps, children: Q.label })
+          /* @__PURE__ */ A(m, { name: d.icon, size: "md", ...d.iconProps }),
+          /* @__PURE__ */ A(Q, { fontSize: "sm", color: "text", ...d.textProps, children: d.label })
         ]
       },
-      Q.id || w
+      d.id || w
     )) })
   ] });
 }, Wt = _(We), ne = cA.memo(({ text: e, onClose: i }) => {
@@ -1705,7 +1717,7 @@ const Ht = _(
       align: "center",
       display: "flex",
       children: [
-        /* @__PURE__ */ A(a, { paddingLeft: "sm", flex: "1", children: /* @__PURE__ */ A(d, { children: e }) }),
+        /* @__PURE__ */ A(a, { paddingLeft: "sm", flex: "1", children: /* @__PURE__ */ A(Q, { children: e }) }),
         /* @__PURE__ */ A(
           aA,
           {
@@ -1758,17 +1770,17 @@ 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: [
-  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(d, { fontWeight: "bold", children: e }) }),
-  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(aA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(d, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
+  /* @__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(
   ({ 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];
       let C = [];
-      o ? C = t.includes(c.value) ? s.filter((Q) => Q.value !== c.value) : [...s, c] : C = [c], r == null || r(C);
+      o ? C = t.includes(c.value) ? s.filter((d) => d.value !== c.value) : [...s, 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(
-      L,
+      b,
       {
         ...t.includes(c.value) ? { primary: !0 } : { secondary: !0 },
         onClick: () => l(c),
@@ -1790,18 +1802,18 @@ const Ht = _(
       name: c,
       multiple: s,
       searchable: C,
-      onSearch: Q,
+      onSearch: d,
       value: w,
       dateFilter: B,
       enableInputDate: u,
       withSearchParam: j,
       // disabled,
-      rangedDate: D,
-      disabled: O,
-      inputTextType: Y = "text",
-      min: F,
+      rangedDate: h,
+      disabled: Y,
+      inputTextType: p = "text",
+      min: N,
       max: U
-    }, p) => {
+    }, L) => {
       const k = t == null ? void 0 : t.length;
       let Z;
       const H = () => {
@@ -1810,7 +1822,7 @@ const Ht = _(
             return /* @__PURE__ */ A(
               fA,
               {
-                onSearch: Q,
+                onSearch: d,
                 multiSelect: s,
                 searchAble: C,
                 placeholder: n,
@@ -1825,10 +1837,10 @@ const Ht = _(
               {
                 input: u,
                 filter: B,
-                value: Pe(w || Z, D),
+                value: Pe(w || Z, h),
                 onChange: (q) => o == null ? void 0 : o({ value: q, name: c, type: i }),
-                rangedDate: D,
-                ref: p
+                rangedDate: h,
+                ref: L
               }
             );
           case "select-button":
@@ -1848,12 +1860,12 @@ const Ht = _(
                 onChange: ({ target: { value: q } }) => o == null ? void 0 : o({ value: q, name: c, type: i }),
                 value: w || Z,
                 placeholder: n,
-                disabled: O,
-                type: Y,
+                disabled: Y,
+                type: p,
                 name: c,
-                ...Y === "number" && { min: F, max: U },
-                ...(!Y || Y === "text") && {
-                  minLength: F,
+                ...p === "number" && { min: N, max: U },
+                ...(!p || p === "text") && {
+                  minLength: N,
                   maxLength: U
                 }
               }
@@ -1865,15 +1877,15 @@ const Ht = _(
       return k ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((q, E) => /* @__PURE__ */ A(
         le,
         {
-          ref: p,
+          ref: L,
           onChange: o,
           ...q,
           withSearchParam: j
         },
         E
       )) }) : /* @__PURE__ */ g(a, { marginBottom: "sm", children: [
-        l ? /* @__PURE__ */ A(d, { color: "text-muted", marginBottom: "sm", fontWeight: "medium", children: l }) : null,
-        e ? /* @__PURE__ */ A(d, { marginBottom: "sm", fontWeight: "medium", children: e }) : null,
+        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() })
       ] });
     }
@@ -1888,7 +1900,7 @@ const Ht = _(
     onHide: n,
     resetting: l
   }) => {
-    const [c, s] = b(!1), C = AA(null), Q = ({ value: B, name: u, type: j }) => {
+    const [c, s] = G(!1), C = AA(null), d = ({ value: B, name: u, type: j }) => {
       if (o)
         switch (j) {
           case "date":
@@ -1921,7 +1933,7 @@ const Ht = _(
             le,
             {
               borderBottom: u !== r.length - 1,
-              onChange: Q,
+              onChange: d,
               withSearchParam: o,
               ...B,
               ref: C
@@ -2143,74 +2155,74 @@ const gr = (e) => {
   }), r;
 }, ar = (e) => {
   var U;
-  const i = oA(() => ({ ...ri, ...e }), [e]), [r, o] = b(!1), [t, n] = b(!1), [l] = b(void 0), c = () => n(!0), s = () => n(!1), C = t ? s : c, Q = () => {
+  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 = () => {
     o(!0);
-  }, w = (p) => {
-    o(p);
-  }, B = l ? oi(l) : void 0, u = !!(B && ((U = Object.values(B)) == null ? void 0 : U.length) > 0), j = () => B ? Object.keys(B).map((p) => {
+  }, 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(p, i.fields), Z = [];
+    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) => {
-      const h = KA(M, i.fields);
-      h && Z.push({
-        name: h == null ? void 0 : h.name,
-        label: h == null ? void 0 : h.label,
-        value: B[h == null ? void 0 : h.name]
+      const D = KA(M, i.fields);
+      D && Z.push({
+        name: D == null ? void 0 : D.name,
+        label: D == null ? void 0 : D.label,
+        value: B[D == null ? void 0 : D.name]
       });
     })), k == null ? void 0 : k.type) {
       case "dropdown":
       case "select-button":
-        const M = B[p] && typeof B[p] != "string" ? B[p] : [], h = (M == null ? void 0 : M.length) > 0 ? (f = M.map((x) => x.label)) == null ? void 0 : f.join(",") : B[p];
-        H = `${k == null ? void 0 : k.label}: ${h}`;
+        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}`;
         break;
       case "date":
         if (k.rangedDate) {
-          const x = B[p], 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;
+          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 || ""}`;
           break;
         }
-        const N = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[p])) : B[p];
-        H = `${k == null ? void 0 : k.label}: ${N || ""}`;
+        const F = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[L])) : B[L];
+        H = `${k == null ? void 0 : k.label}: ${F || ""}`;
         break;
       default:
-        H = `${k == null ? void 0 : k.label}: ${B[p]}`;
+        H = `${k == null ? void 0 : k.label}: ${B[L]}`;
         break;
     }
     if (P && Z.length > 0) {
-      let M = Z.map((h) => {
-        var N, x;
-        return h != null && h.value && typeof h.value != "string" ? (x = (N = h == null ? void 0 : h.value) == null ? void 0 : N.map((T) => T == null ? void 0 : T.label)) == null ? void 0 : x.join(",") : h.value;
+      let M = Z.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;
       });
       M = M.filter(
-        (h) => typeof h < "u" && h !== "" && h !== null
+        (D) => typeof D < "u" && D !== "" && D !== null
       ), M && M.length > 0 && (H = `${H} ${k.relationLabelChip || "by"} ${M}`);
     }
     return X && (H = ""), {
       name: k == null ? void 0 : k.name,
       label: k == null ? void 0 : k.label,
-      value: B[p],
+      value: B[L],
       valueText: H,
       children: Z
     };
-  }) : [], D = (p) => {
-    p != null && p.name && o(!0);
-  }, O = j();
+  }) : [], h = (L) => {
+    L != null && L.name && o(!0);
+  }, Y = j();
   return {
     value: B,
     open: c,
     close: s,
     toggle: C,
-    reset: Q,
-    chips: O,
+    reset: d,
+    chips: Y,
     toggleConfig: {
       active: u,
       onClick: C
     },
     chipsConfig: {
-      items: O,
-      onClose: D
+      items: Y,
+      onClose: h
     },
     config: {
       ...i,
@@ -2225,7 +2237,7 @@ const gr = (e) => {
   Toggle: _e,
   Chips: Re,
   Chip: ne
-}, ni = (e) => /* @__PURE__ */ A(d, { variant: "h1", children: e.children, ...e.props }), li = (e) => /* @__PURE__ */ A(d, { variant: "h2", children: e.children, ...e.props }), ci = (e) => /* @__PURE__ */ A(d, { variant: "h3", children: e.children, ...e.props }), gi = (e) => /* @__PURE__ */ A(d, { variant: "h4", children: e.children, ...e.props }), si = (e) => /* @__PURE__ */ A(d, { variant: "h5", children: e.children, ...e.props }), ai = (e) => /* @__PURE__ */ A(d, { variant: "h6", children: e.children, ...e.props }), Ci = (e) => /* @__PURE__ */ A(d, { variant: "sub-h1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(d, { variant: "sub-h2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(d, { variant: "sub-h3", children: e.children, ...e.props }), Qi = (e) => /* @__PURE__ */ A(d, { variant: "body-1", children: e.children, ...e.props }), di = (e) => /* @__PURE__ */ A(d, { variant: "body-2", children: e.children, ...e.props }), hi = (e) => /* @__PURE__ */ A(d, { 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 }), K = {
   H1: ni,
   H2: li,
   H3: ci,
@@ -2235,8 +2247,8 @@ const gr = (e) => {
   SubH1: Ci,
   SubH2: Bi,
   SubH3: wi,
-  Body1: Qi,
-  Body2: di,
+  Body1: di,
+  Body2: Qi,
   Body3: hi
 }, qA = () => {
   const [e, i] = uA(), r = DA(e.toString()), o = re(), t = SA(), n = o.id;
@@ -2245,10 +2257,10 @@ const gr = (e) => {
     setSearchParams: i,
     searchParams: e,
     searchQueries: r,
-    isHasQuery: (Q, w) => e.has(Q) && e.get(Q) === w,
-    getQueryParam: (Q) => e.get(Q),
+    isHasQuery: (d, w) => e.has(d) && e.get(d) === w,
+    getQueryParam: (d) => e.get(d),
     // route params
-    getRouteParam: (Q) => o[Q],
+    getRouteParam: (d) => o[d],
     params: o,
     // location info
     location: t,
@@ -2333,7 +2345,7 @@ const gr = (e) => {
 }, mi = (e, i, r) => {
   const o = i.get(r || "filter") || void 0, t = o && typeof o == "string" ? JSON.parse(o) : void 0;
   return t ? t[e] : void 0;
-}, Qr = ({
+}, dr = ({
   name: e,
   filterKey: i = "filter",
   searchParams: r
@@ -2343,7 +2355,7 @@ const gr = (e) => {
     start: n ? JSON.parse(n).from : void 0,
     end: n ? JSON.parse(n).to : void 0
   };
-}, dr = ({
+}, Qr = ({
   name: e,
   filterKey: i = "filter",
   searchParams: r
@@ -2364,7 +2376,7 @@ const gr = (e) => {
   pageKey: o,
   filters: t
 }) => {
-  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [s, C] = b({}), Q = () => {
+  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [s, C] = G({}), d = () => {
     n.delete(r || "filter"), l(n);
   }, w = (B, u) => {
     switch (B.type) {
@@ -2395,7 +2407,7 @@ const gr = (e) => {
         a,
         {
           style: { cursor: "pointer" },
-          onClick: Q,
+          onClick: d,
           children: "Reset"
         }
       )
@@ -2413,22 +2425,22 @@ const gr = (e) => {
   filterKey: c = "filter",
   pageKey: s = "page",
   customWidthSearch: C,
-  handleOnReset: Q,
+  handleOnReset: d,
   filterConfigs: w,
   buttonToggleProps: B,
   position: u = "right",
   titleSearchLabel: j = "Work Order",
-  withTitleLabels: D = !1
+  withTitleLabels: h = !1
 }) => {
-  const O = (B == null ? void 0 : B.isShowLabel) ?? !0, [Y, F] = b(!1), [U, p] = b(0), k = () => {
-    p(U + 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)
       try {
-        const h = JSON.parse(q);
-        return Object.keys(h).length === 1 && h[e] === "";
-      } catch (h) {
-        console.error("Filter parameter is not a valid JSON:", h);
+        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);
       }
     return !1;
   })()), M = V("md");
@@ -2442,17 +2454,17 @@ const gr = (e) => {
       align: "flex-end",
       children: [
         f && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
-          L,
+          b,
           {
             onClick: () => {
-              Z.delete(c), H(Z), k(), Q && Q();
+              Z.delete(c), H(Z), k(), d && d();
             },
             secondary: !0,
-            children: /* @__PURE__ */ A(d, { color: "error", fontWeight: "semibold", children: "Reset" })
+            children: /* @__PURE__ */ A(Q, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
         !!(w != null && w.length) && /* @__PURE__ */ A(
-          L,
+          b,
           {
             primary: f,
             secondary: !f,
@@ -2467,8 +2479,8 @@ const gr = (e) => {
               }
             ),
             fullWidth: !M,
-            onClick: () => F(!0),
-            children: O ? "Filter" : void 0
+            onClick: () => N(!0),
+            children: Y ? "Filter" : void 0
           }
         ),
         l && /* @__PURE__ */ g(
@@ -2479,7 +2491,7 @@ const gr = (e) => {
               minWidth: "126px"
             },
             children: [
-              D && /* @__PURE__ */ A(K.SubH3, { children: "Status" }),
+              h && /* @__PURE__ */ A(K.SubH3, { children: "Status" }),
               /* @__PURE__ */ A(
                 fA,
                 {
@@ -2514,15 +2526,15 @@ const gr = (e) => {
                       })
                     }
                   ] : [],
-                  onChange: (h) => PA({
-                    value: h,
+                  onChange: (D) => PA({
+                    value: D,
                     name: i,
                     type: "dropdown",
                     searchQueries: X,
                     setSearchParams: H,
                     filterKey: c
                   }),
-                  placeholder: D ? "All" : "All Status"
+                  placeholder: h ? "All" : "All Status"
                 },
                 U
               )
@@ -2537,7 +2549,7 @@ const gr = (e) => {
               width: C && M ? C : M ? "310px" : ""
             },
             children: [
-              D && /* @__PURE__ */ g(K.SubH3, { children: [
+              h && /* @__PURE__ */ g(K.SubH3, { children: [
                 "Search for ",
                 j
               ] }),
@@ -2546,8 +2558,8 @@ const gr = (e) => {
                 {
                   placeholder: r,
                   leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-                  onChange: (h) => PA({
-                    value: h.target.value,
+                  onChange: (D) => PA({
+                    value: D.target.value,
                     name: e,
                     type: "search",
                     searchQueries: X,
@@ -2563,17 +2575,17 @@ const gr = (e) => {
             ]
           }
         ),
-        t == null ? void 0 : t.map(({ minWidth: h, content: N, title: x, onClickContainer: T }) => /* @__PURE__ */ g(
+        t == null ? void 0 : t.map(({ minWidth: D, content: F, title: x, onClickContainer: T }) => /* @__PURE__ */ g(
           a,
           {
             gap: "sm",
             onClick: T,
             style: {
-              minWidth: h
+              minWidth: D
             },
             children: [
               /* @__PURE__ */ A(K.SubH3, { children: x }),
-              N
+              F
             ]
           },
           x + U
@@ -2581,8 +2593,8 @@ const gr = (e) => {
         /* @__PURE__ */ A(
           yi,
           {
-            isOpen: Y,
-            onClose: () => F(!1),
+            isOpen: p,
+            onClose: () => N(!1),
             filterKey: c,
             filters: w,
             pageKey: s
@@ -2592,7 +2604,7 @@ const gr = (e) => {
     }
   );
 }, fi = ({ children: e, borderRadius: i }) => {
-  const r = AA(null), [o, t] = b("100vh");
+  const r = AA(null), [o, t] = G("100vh");
   return R(() => {
     const n = () => {
       if (r.current) {
@@ -2635,7 +2647,7 @@ const gr = (e) => {
       },
       children: e.map(
         ({ title: n, icon: l, buttonProps: c, onClick: s }, C) => !n && !l ? null : /* @__PURE__ */ A(
-          L,
+          b,
           {
             fullWidth: !o,
             iconLeft: l ? /* @__PURE__ */ A(m, { name: l, size: "md" }) : void 0,
@@ -2712,7 +2724,7 @@ const gr = (e) => {
   showPagination: t = !0,
   totalData: n
 }) => {
-  const { searchQueries: l, setSearchParams: c, searchParams: s } = qA(), C = s.get(r), Q = (j) => {
+  const { searchQueries: l, setSearchParams: c, searchParams: s } = qA(), C = s.get(r), d = (j) => {
     c({ ...l, [i]: String(j) });
   }, w = (j) => {
     c({
@@ -2739,7 +2751,7 @@ const gr = (e) => {
       },
       children: t ? /* @__PURE__ */ g(W, { children: [
         /* @__PURE__ */ g(a, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
-          /* @__PURE__ */ A(d, { children: "Rows Per Page: " }),
+          /* @__PURE__ */ A(Q, { children: "Rows Per Page: " }),
           /* @__PURE__ */ A(
             fA,
             {
@@ -2756,14 +2768,14 @@ const gr = (e) => {
               defaultValue: C ? [{ label: `${C} per row`, value: C }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(d, { children: `${B}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(Q, { children: `${B}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
-          de,
+          Qe,
           {
             currentPage: e != null && e.currentPage ? Number(e == null ? void 0 : e.currentPage) : 1,
             totalCount: e != null && e.totalPage ? Number(e == null ? void 0 : e.totalPage) : 1,
-            onPageChange: Q
+            onPageChange: d
           }
         )
       ] }) : /* @__PURE__ */ A(
@@ -2777,30 +2789,30 @@ const gr = (e) => {
     }
   );
 }, Gi = ({ filter: e, columnTitle: i }) => {
-  const [r, o] = b(!1), t = AA(null), n = AA(null), l = AA(null), [c, s] = b(""), [C, Q] = b({ top: 0, left: 0 }), w = e.selectedValues, B = oA(() => c ? e.options.filter(
-    (D) => D.label.toLowerCase().includes(c.toLowerCase())
+  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(
+    (h) => h.label.toLowerCase().includes(c.toLowerCase())
   ) : e.options, [e.options, c]);
   R(() => {
     if (r && n.current) {
-      const D = n.current.getBoundingClientRect(), O = 280, Y = {
-        top: D.bottom + 8
+      const h = n.current.getBoundingClientRect(), Y = 280, p = {
+        top: h.bottom + 8
       };
-      e.position === "left" || D.left + O > window.innerWidth ? Y.right = window.innerWidth - D.right : Y.left = D.left, Q(Y);
+      e.position === "left" || h.left + Y > window.innerWidth ? p.right = window.innerWidth - h.right : p.left = h.left, d(p);
     }
   }, [r, e.position]), R(() => {
     r && l.current ? setTimeout(() => {
-      var D;
-      return (D = l.current) == null ? void 0 : D.focus();
+      var h;
+      return (h = l.current) == null ? void 0 : h.focus();
     }, 50) : s("");
   }, [r]), R(() => {
-    const D = (O) => {
-      t.current && !t.current.contains(O.target) && n.current && !n.current.contains(O.target) && o(!1);
+    const h = (Y) => {
+      t.current && !t.current.contains(Y.target) && n.current && !n.current.contains(Y.target) && o(!1);
     };
-    return r && document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
+    return r && document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
   }, [r]);
-  const u = (D) => {
-    const O = w.includes(D) ? w.filter((Y) => Y !== D) : [...w, D];
-    e.onFilterChange(O);
+  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: [
     /* @__PURE__ */ A(
@@ -2813,9 +2825,9 @@ const gr = (e) => {
           alignItems: "center",
           cursor: "pointer"
         },
-        onClick: (D) => {
-          var O;
-          D.stopPropagation(), r || (O = e.onOpen) == null || O.call(e), o((Y) => !Y);
+        onClick: (h) => {
+          var Y;
+          h.stopPropagation(), r || (Y = e.onOpen) == null || Y.call(e), o((p) => !p);
         },
         children: /* @__PURE__ */ A(
           m,
@@ -2863,18 +2875,18 @@ const gr = (e) => {
                 borderBottom: "1px solid rgb(var(--starasia-ui-raw-color-gray-100))"
               },
               children: [
-                /* @__PURE__ */ g(d, { fontSize: "sm", fontWeight: "semibold", color: "gray-700", children: [
+                /* @__PURE__ */ g(Q, { fontSize: "sm", fontWeight: "semibold", color: "gray-700", children: [
                   "Filter ",
                   i
                 ] }),
                 w.length > 0 && /* @__PURE__ */ A(a, { style: { cursor: "pointer" }, children: /* @__PURE__ */ A(
-                  d,
+                  Q,
                   {
                     fontSize: "xs",
                     color: "primary",
                     fontWeight: "semibold",
-                    onClick: (D) => {
-                      D.stopPropagation(), j();
+                    onClick: (h) => {
+                      h.stopPropagation(), j();
                     },
                     children: "CLEAR"
                   }
@@ -2898,7 +2910,7 @@ const gr = (e) => {
                   placeholder: `Search ${i.toLowerCase()}...`,
                   leftIcon: /* @__PURE__ */ A(m, { name: "Search", size: "sm" }),
                   value: c,
-                  onChange: (D) => s(D.target.value),
+                  onChange: (h) => s(h.target.value),
                   style: { fontSize: "14px" }
                 }
               )
@@ -2938,7 +2950,7 @@ const gr = (e) => {
                       }
                     ),
                     /* @__PURE__ */ A(
-                      d,
+                      Q,
                       {
                         fontSize: "sm",
                         color: "gray-500",
@@ -2948,7 +2960,7 @@ const gr = (e) => {
                     )
                   ]
                 }
-              ) : B.length > 0 ? /* @__PURE__ */ A(a, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((D) => /* @__PURE__ */ g(
+              ) : B.length > 0 ? /* @__PURE__ */ A(a, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((h) => /* @__PURE__ */ g(
                 a,
                 {
                   style: {
@@ -2963,38 +2975,38 @@ const gr = (e) => {
                     cursor: "pointer",
                     borderRadius: "8px",
                     transition: "all 0.2s ease",
-                    backgroundColor: w.includes(D.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
+                    backgroundColor: w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
                   },
-                  onClick: (O) => {
-                    O.stopPropagation(), u(D.value);
+                  onClick: (Y) => {
+                    Y.stopPropagation(), u(h.value);
                   },
-                  onMouseEnter: (O) => {
-                    w.includes(D.value) || (O.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), O.currentTarget.style.transform = "translateX(2px)";
+                  onMouseEnter: (Y) => {
+                    w.includes(h.value) || (Y.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), Y.currentTarget.style.transform = "translateX(2px)";
                   },
-                  onMouseLeave: (O) => {
-                    O.currentTarget.style.backgroundColor = w.includes(D.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", O.currentTarget.style.transform = "translateX(0)";
+                  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)";
                   },
                   children: [
                     /* @__PURE__ */ A(
                       FA,
                       {
-                        checked: w.includes(D.value),
+                        checked: w.includes(h.value),
                         onChange: () => {
                         }
                       }
                     ),
                     /* @__PURE__ */ A(
-                      d,
+                      Q,
                       {
                         fontSize: "sm",
-                        fontWeight: w.includes(D.value) ? "medium" : "normal",
-                        color: w.includes(D.value) ? "primary" : "gray-700",
-                        children: D.label
+                        fontWeight: w.includes(h.value) ? "medium" : "normal",
+                        color: w.includes(h.value) ? "primary" : "gray-700",
+                        children: h.label
                       }
                     )
                   ]
                 },
-                D.value
+                h.value
               )) }) : /* @__PURE__ */ g(
                 a,
                 {
@@ -3016,7 +3028,7 @@ const gr = (e) => {
                       }
                     ),
                     /* @__PURE__ */ A(
-                      d,
+                      Q,
                       {
                         fontSize: "sm",
                         color: "gray-500",
@@ -3056,7 +3068,7 @@ const gr = (e) => {
                     children: w.length
                   }
                 ),
-                /* @__PURE__ */ g(d, { fontSize: "xs", color: "primary", fontWeight: "medium", children: [
+                /* @__PURE__ */ g(Q, { fontSize: "xs", color: "primary", fontWeight: "medium", children: [
                   "item",
                   w.length > 1 ? "s" : "",
                   " selected"
@@ -3095,24 +3107,24 @@ const gr = (e) => {
   visibleHandleUpdate: c,
   visibleHandleDetail: s,
   showHeadBorder: C = !0,
-  scrollParentRef: Q,
+  scrollParentRef: d,
   frozenCount: w = 0,
   onFrozenCountChange: B,
   customActions: u,
   actionsOrder: j = ["detail", "update", "delete", "custom"],
-  customEmptyState: D
+  customEmptyState: h
 }) => {
-  const Y = [r, o, t].filter((E) => E !== void 0).length, F = !!u, U = Y === 3 ? F ? "178px" : "140px" : Y === 2 ? F ? "140px" : "102px" : Y === 1 ? F ? "112px" : "74px" : F ? "74px" : "", p = (E, f) => {
+  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] = b(!1);
+  }, [k, Z] = G(!1);
   R(() => {
-    if (!(Q != null && Q.current)) return;
-    const E = Q.current;
+    if (!(d != null && d.current)) return;
+    const E = d.current;
     Z(E.scrollHeight > E.clientHeight);
-  }, [i, Q]);
-  const H = AA(null), [P, X] = b([]);
+  }, [i, d]);
+  const H = AA(null), [P, X] = G([]);
   zA(() => {
     if (!w || !H.current) {
       X([]);
@@ -3122,8 +3134,8 @@ const gr = (e) => {
       H.current.querySelectorAll("thead tr th")
     ), f = [];
     let M = 0;
-    E.forEach((h, N) => {
-      f[N] = M, N < w && (M += h.offsetWidth);
+    E.forEach((D, F) => {
+      f[F] = M, F < w && (M += D.offsetWidth);
     }), X(f);
   }, [w, e, i]);
   const q = (E) => {
@@ -3137,17 +3149,17 @@ const gr = (e) => {
           height: "40px",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ g(QA, { children: [
+        children: /* @__PURE__ */ g(dA, { children: [
           e.map((E, f) => {
-            var N;
-            const M = w > 0 && f < w, h = P[f] ?? 0;
+            var F;
+            const M = w > 0 && f < w, D = P[f] ?? 0;
             return /* @__PURE__ */ A(
               TA,
               {
                 style: {
                   position: "sticky",
                   top: 0,
-                  left: M ? h : void 0,
+                  left: M ? D : void 0,
                   zIndex: M ? 4 : 2,
                   paddingLeft: f === 0 ? "12px" : "",
                   borderRight: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
@@ -3167,7 +3179,7 @@ const gr = (e) => {
                       minWidth: 0
                     },
                     children: [
-                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: E.title || ((N = E.accessor) == null ? void 0 : N.toString()) }),
+                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: E.title || ((F = E.accessor) == null ? void 0 : F.toString()) }),
                       E.filter && /* @__PURE__ */ A(
                         Gi,
                         {
@@ -3218,14 +3230,14 @@ const gr = (e) => {
         ] })
       }
     ),
-    /* @__PURE__ */ A(De, { children: n ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(sA, { colSpan: e.length + 1, children: /* @__PURE__ */ g(a, { style: { gap: "16px" }, children: [
+    /* @__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) && D ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(sA, { colSpan: e.length + 1, children: D }) }) : i == null ? void 0 : i.map((E, f) => /* @__PURE__ */ g(
-      QA,
+    ] }) }) }) : !(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,
       {
         style: {
           transition: "background-color 0.3s ease",
@@ -3233,24 +3245,24 @@ const gr = (e) => {
           borderBottom: f === i.length - 1 && k ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
         },
         onMouseOver: (M) => {
-          const h = M.currentTarget;
-          h.style.backgroundColor = pA, h.style.position = "relative", h.style.zIndex = "2", w > 0 && Array.from(h.querySelectorAll("td")).slice(0, w).forEach((x) => {
+          const D = M.currentTarget;
+          D.style.backgroundColor = pA, D.style.position = "relative", D.style.zIndex = "2", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((x) => {
             x.style.backgroundColor = pA;
           });
-          const N = Array.from(h.querySelectorAll("td")).at(-1);
-          N && N.style.position === "sticky" && (N.style.backgroundColor = pA);
+          const F = Array.from(D.querySelectorAll("td")).at(-1);
+          F && F.style.position === "sticky" && (F.style.backgroundColor = pA);
         },
         onMouseOut: (M) => {
-          const h = M.currentTarget;
-          h.style.backgroundColor = "", h.style.position = "", h.style.zIndex = "", w > 0 && Array.from(h.querySelectorAll("td")).slice(0, w).forEach((x) => {
+          const D = M.currentTarget;
+          D.style.backgroundColor = "", D.style.position = "", D.style.zIndex = "", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((x) => {
             x.style.backgroundColor = mA;
           });
-          const N = Array.from(h.querySelectorAll("td")).at(-1);
-          N && N.style.position === "sticky" && (N.style.backgroundColor = mA);
+          const F = Array.from(D.querySelectorAll("td")).at(-1);
+          F && F.style.position === "sticky" && (F.style.backgroundColor = mA);
         },
         children: [
-          e.map((M, h) => {
-            const N = M.render ? M.render(E, f, i) : p(E, M.accessor), x = w > 0 && h < w, T = P[h] ?? 0;
+          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;
             return /* @__PURE__ */ A(
               sA,
               {
@@ -3259,14 +3271,14 @@ const gr = (e) => {
                   left: x ? T : void 0,
                   zIndex: x ? 1 : void 0,
                   backgroundColor: x ? mA : void 0,
-                  paddingLeft: h === 0 ? "12px" : "",
+                  paddingLeft: D === 0 ? "12px" : "",
                   whiteSpace: "nowrap",
                   borderLeft: M.showBorderLeft ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   borderRight: M.showBorderRight ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   textAlign: M.textAlign === "text-right" ? "right" : M.textAlign === "text-center" ? "center" : "left"
                 },
-                children: typeof N == "string" ? /* @__PURE__ */ A(
-                  d,
+                children: typeof F == "string" ? /* @__PURE__ */ A(
+                  Q,
                   {
                     style: {
                       whiteSpace: "nowrap",
@@ -3274,11 +3286,11 @@ const gr = (e) => {
                       textOverflow: "ellipsis",
                       textAlign: M.textAlign === "text-right" ? "right" : M.textAlign === "text-center" ? "center" : "left"
                     },
-                    children: N
+                    children: F
                   }
-                ) : N
+                ) : F
               },
-              `row-${f}-col-${h}`
+              `row-${f}-col-${D}`
             );
           }),
           r || o || t || u ? /* @__PURE__ */ A(sA, { style: {
@@ -3288,25 +3300,25 @@ const gr = (e) => {
             zIndex: 1,
             backgroundColor: mA
           }, children: /* @__PURE__ */ A(J, { direction: "row", align: "center", justify: "center", gap: "sm", children: j.map((M) => {
-            const h = f === i.length - 1 ? "top" : "bottom";
-            return M === "detail" && r && (s == null ? void 0 : s(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Detail", position: h, children: /* @__PURE__ */ A(
-              L,
+            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,
               {
                 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: h, children: /* @__PURE__ */ A(
-              L,
+            ) }, "detail") : M === "update" && o && (c == null ? void 0 : c(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Update", position: D, children: /* @__PURE__ */ A(
+              b,
               {
                 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: h, children: /* @__PURE__ */ A(
-              L,
+            ) }, "update") : M === "delete" && t && (l == null ? void 0 : l(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Delete", position: D, children: /* @__PURE__ */ A(
+              b,
               {
                 size: "xs",
                 secondary: !0,
@@ -3327,11 +3339,11 @@ const gr = (e) => {
   footerProps: o
 }) => {
   var w;
-  const t = AA(null), [n, l] = b(
+  const t = AA(null), [n, l] = G(
     (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 Q = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? s.current !== 0 : C !== 0);
+  const d = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? s.current !== 0 : C !== 0);
   return /* @__PURE__ */ g(fi, { ...e, children: [
     c && /* @__PURE__ */ A(Si, { ...r }),
     /* @__PURE__ */ A(
@@ -3354,7 +3366,7 @@ const gr = (e) => {
         ) : null
       }
     ),
-    Q && /* @__PURE__ */ A(
+    d && /* @__PURE__ */ A(
       bi,
       {
         pagination: i == null ? void 0 : i.pagination,
@@ -3375,7 +3387,7 @@ function ji(e) {
 const Dr = ji(pi), kA = ({
   of: e,
   render: i
-}) => ye.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), G = ({
+}) => ye.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), O = ({
   condition: e,
   fallback: i,
   children: r,
@@ -3427,7 +3439,7 @@ const Dr = ji(pi), kA = ({
       ),
       children: [
         /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!e.role && !e.isTenant || t,
             fallback: /* @__PURE__ */ A(K.Body1, { children: e.name }),
@@ -3445,7 +3457,7 @@ const Dr = ji(pi), kA = ({
             ] })
           }
         ),
-        /* @__PURE__ */ A(G, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
+        /* @__PURE__ */ A(O, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
       ]
     }
   );
@@ -3490,7 +3502,7 @@ const Dr = ji(pi), kA = ({
   isLoadingOrgList: c,
   setSelectedApp: s
 }) => {
-  var Q;
+  var d;
   const C = _A();
   return /* @__PURE__ */ g(LA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ g(
@@ -3515,7 +3527,7 @@ const Dr = ji(pi), kA = ({
       }
     ),
     C.show ? /* @__PURE__ */ g(W, { children: [
-      /* @__PURE__ */ A(K.H4, { children: (Q = C.data) == null ? void 0 : Q.name }),
+      /* @__PURE__ */ A(K.H4, { children: (d = C.data) == null ? void 0 : d.name }),
       /* @__PURE__ */ A(
         K.SubH3,
         {
@@ -3526,7 +3538,7 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        G,
+        O,
         {
           condition: !!(o != null && o.length),
           isLoading: c,
@@ -3635,7 +3647,7 @@ const Dr = ji(pi), kA = ({
   totalData: t,
   setSelectedApp: n
 }) => {
-  var c, s, C, Q, w;
+  var c, s, C, d, w;
   const l = _A();
   return /* @__PURE__ */ g(LA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ g(
@@ -3671,13 +3683,13 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        G,
+        O,
         {
           condition: !!((C = (s = l.data) == null ? void 0 : s.organizations) != null && C.length),
           children: /* @__PURE__ */ A(
             NA,
             {
-              dataApps: (w = (Q = l.data) == null ? void 0 : Q.organizations) == null ? void 0 : w.map((B) => {
+              dataApps: (w = (d = l.data) == null ? void 0 : d.organizations) == null ? void 0 : w.map((B) => {
                 var u;
                 return {
                   ...B,
@@ -3746,7 +3758,7 @@ const Dr = ji(pi), kA = ({
   variant: l = "single-api",
   isLoading: c
 }) => {
-  const [s, C] = b(!1), [Q, w] = b("");
+  const [s, C] = G(!1), [d, w] = G("");
   return /* @__PURE__ */ g(W, { children: [
     /* @__PURE__ */ g(
       a,
@@ -3796,7 +3808,7 @@ const Dr = ji(pi), kA = ({
       }
     ),
     /* @__PURE__ */ A(
-      G,
+      O,
       {
         condition: l === "single-api",
         fallback: /* @__PURE__ */ A(
@@ -3852,7 +3864,7 @@ const Dr = ji(pi), kA = ({
             children: [
               /* @__PURE__ */ A("img", { style: { width: "180px" }, src: zi }),
               /* @__PURE__ */ g(
-                d,
+                Q,
                 {
                   fontWeight: "black",
                   fontSize: "2xl",
@@ -3865,7 +3877,7 @@ const Dr = ji(pi), kA = ({
                     "Get ready to switch to",
                     /* @__PURE__ */ A("br", {}),
                     " the ",
-                    Q || "another",
+                    d || "another",
                     " app!"
                   ]
                 }
@@ -3877,7 +3889,7 @@ const Dr = ji(pi), kA = ({
     )
   ] });
 }, z = (e) => /* @__PURE__ */ A(
-  d,
+  Q,
   {
     ...e,
     fontFamily: "Poppins",
@@ -3886,7 +3898,7 @@ const Dr = ji(pi), kA = ({
     color: e.color || "gray-700",
     children: e.children
   }
-), nA = (e) => /* @__PURE__ */ A(d, { color: "red-600", fontSize: "sm", children: e.message }), Ki = ({
+), nA = (e) => /* @__PURE__ */ A(Q, { color: "red-600", fontSize: "sm", children: e.message }), Ki = ({
   size: e = "md",
   direction: i = "vertical",
   requiredTitle: r = "(Required)",
@@ -3903,7 +3915,7 @@ const Dr = ji(pi), kA = ({
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -3914,7 +3926,7 @@ const Dr = ji(pi), kA = ({
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -3928,7 +3940,7 @@ const Dr = ji(pi), kA = ({
                   /* @__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(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
@@ -3948,7 +3960,7 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -3988,7 +4000,7 @@ const Dr = ji(pi), kA = ({
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -3999,7 +4011,7 @@ const Dr = ji(pi), kA = ({
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -4013,7 +4025,7 @@ const Dr = ji(pi), kA = ({
                   /* @__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(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
@@ -4033,7 +4045,7 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4064,7 +4076,7 @@ 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] = b(!1), o = (s) => {
+  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));
@@ -4106,7 +4118,7 @@ const Dr = ji(pi), kA = ({
         /* @__PURE__ */ g(J, { gap: "xs", children: [
           /* @__PURE__ */ g(J, { direction: "row", gap: "xs", children: [
             /* @__PURE__ */ A(
-              d,
+              Q,
               {
                 fontWeight: "medium",
                 color: "gray-500",
@@ -4116,7 +4128,7 @@ const Dr = ji(pi), kA = ({
               }
             ),
             /* @__PURE__ */ A(
-              d,
+              Q,
               {
                 fontWeight: "medium",
                 style: { textWrap: "nowrap" },
@@ -4125,7 +4137,7 @@ const Dr = ji(pi), kA = ({
               }
             )
           ] }),
-          /* @__PURE__ */ A(d, { 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((s) => s.toLocaleUpperCase()).join(", ") })
         ] })
       ]
     }
@@ -4180,7 +4192,7 @@ const Ui = (e) => {
           ),
           /* @__PURE__ */ g(J, { children: [
             /* @__PURE__ */ A(
-              d,
+              Q,
               {
                 fontWeight: "bold",
                 style: {
@@ -4193,12 +4205,12 @@ const Ui = (e) => {
               }
             ),
             !e.defaultUrl && /* @__PURE__ */ g(J, { direction: "row", gap: "xs", align: "center", children: [
-              /* @__PURE__ */ A(d, { fontSize: "sm", fontWeight: "medium", children: `${qi(
+              /* @__PURE__ */ A(Q, { fontSize: "sm", fontWeight: "medium", children: `${qi(
                 ((r = e.fileSelected) == null ? void 0 : r.size.toString()) || "100000"
               )}` }),
               /* @__PURE__ */ A(m, { name: "Dot", size: "xs" }),
               /* @__PURE__ */ A(
-                d,
+                Q,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -4212,7 +4224,7 @@ const Ui = (e) => {
           ] })
         ] }),
         /* @__PURE__ */ A(
-          L,
+          b,
           {
             size: "xs",
             secondary: !0,
@@ -4294,7 +4306,7 @@ const Ui = (e) => {
         ]
       }
     ),
-    typeof i.errorMessage == "string" && i.errorMessage && /* @__PURE__ */ A(d, { color: "error", fontSize: "xs", children: i.errorMessage })
+    typeof i.errorMessage == "string" && i.errorMessage && /* @__PURE__ */ A(Q, { color: "error", fontSize: "xs", children: i.errorMessage })
   ] });
 }, Ri = ({
   size: e = "md",
@@ -4313,7 +4325,7 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4324,7 +4336,7 @@ const Ui = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -4338,7 +4350,7 @@ const Ui = (e) => {
                   /* @__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(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
@@ -4358,7 +4370,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4385,7 +4397,7 @@ const Ui = (e) => {
   required: t = !1,
   ...n
 }) => {
-  var s, C, Q, w;
+  var s, C, d, w;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
     a,
@@ -4395,7 +4407,7 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t,
             fallback: /* @__PURE__ */ g(
@@ -4420,11 +4432,11 @@ const Ui = (e) => {
                   /* @__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(G, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
-                        arrowPosition: (Q = n.tooltip) == null ? void 0 : Q.arrowPosition,
+                        arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -4440,7 +4452,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
@@ -4514,7 +4526,7 @@ const Ui = (e) => {
       gap: e === "horizontal-inline" || e === "horizontal-block" ? "spacing-96" : "sm",
       direction: e === "horizontal-inline" || e === "horizontal-block" ? "row" : "column",
       children: [
-        /* @__PURE__ */ A(G, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
+        /* @__PURE__ */ A(O, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
           a,
           {
             direction: "column",
@@ -4522,7 +4534,7 @@ const Ui = (e) => {
             fullWidth: r,
             children: [
               o.title && /* @__PURE__ */ A(z, { children: o.title }),
-              /* @__PURE__ */ A(G, { condition: !!o.description, children: /* @__PURE__ */ A(d, { color: "gray-500", children: o.description }) })
+              /* @__PURE__ */ A(O, { condition: !!o.description, children: /* @__PURE__ */ A(Q, { color: "gray-500", children: o.description }) })
             ]
           }
         ) }),
@@ -4540,13 +4552,13 @@ const Ui = (e) => {
                   ...l,
                   isChecked: o.radioIsChecked === l.id
                 })),
-                render: ({ value: l, id: c, isChecked: s, subInput: C, label: Q, description: w }) => /* @__PURE__ */ g(a, { gap: "xs", customMaxWidth: t, children: [
+                render: ({ value: l, id: c, isChecked: s, subInput: C, label: d, description: w }) => /* @__PURE__ */ g(a, { gap: "xs", customMaxWidth: t, children: [
                   /* @__PURE__ */ A(
                     Me,
                     {
                       id: `${c.toString()}-${l}`,
-                      name: o.groupName || Q,
-                      label: Q,
+                      name: o.groupName || d,
+                      label: d,
                       value: l,
                       checked: s,
                       onChange: (B) => o.onChecked({
@@ -4559,7 +4571,7 @@ const Ui = (e) => {
                     c
                   ),
                   w && /* @__PURE__ */ A(
-                    d,
+                    Q,
                     {
                       color: "gray-500",
                       style: {
@@ -4595,7 +4607,7 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4606,7 +4618,7 @@ const Ui = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -4620,7 +4632,7 @@ const Ui = (e) => {
                   /* @__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(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
@@ -4640,7 +4652,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4679,7 +4691,7 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: o,
             fallback: /* @__PURE__ */ g(
@@ -4690,7 +4702,7 @@ const Ui = (e) => {
                 fullWidth: t,
                 children: [
                   /* @__PURE__ */ A(z, { children: n.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.titleDescription })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription })
                 ]
               }
             ),
@@ -4704,7 +4716,7 @@ const Ui = (e) => {
                   /* @__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(G, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = n.tooltip) == null ? void 0 : s.label,
@@ -4724,7 +4736,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
+                  /* @__PURE__ */ A(O, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
                 ]
               }
             )
@@ -4749,16 +4761,16 @@ const Ui = (e) => {
   ...r
 }) => {
   const o = ZA(), t = (l) => {
-    var s, C, Q, w, B, u;
+    var s, C, d, w, B, u;
     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 = (Q = o == null ? void 0 : o.computed) == null ? void 0 : Q.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 = (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];
     return /* @__PURE__ */ A(m, { name: l, size: i, style: { color: c } });
   }, n = () => {
-    var c, s, C, Q;
+    var c, s, 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] : (Q = (C = o == null ? void 0 : o.computed) == null ? void 0 : C.blue) == null ? void 0 : Q[700]
+      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]
     };
     switch (i) {
       case "xs":
@@ -4773,7 +4785,7 @@ const Ui = (e) => {
     }
   };
   return /* @__PURE__ */ A(
-    L,
+    b,
     {
       fullWidth: !0,
       disabled: r.disabled,
@@ -4813,7 +4825,7 @@ const Ui = (e) => {
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4824,7 +4836,7 @@ const Ui = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -4838,7 +4850,7 @@ const Ui = (e) => {
                   /* @__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(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
@@ -4858,7 +4870,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4935,8 +4947,8 @@ const VA = {
     containerProps: c,
     maxFileSize: s = 2,
     onError: C
-  }, Q) => {
-    const w = V("md"), [B, u] = b(!1), [j, D] = b(null), [O, Y] = b(!1), [F, U] = b({ x: 0, y: 0 }), [p, k] = b(1), [Z, H] = b(null);
+  }, 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(() => {
       i === null && t(null);
     }, [i]);
@@ -4951,7 +4963,7 @@ const VA = {
       if (!tA) return;
       const wA = new FileReader();
       wA.onload = () => {
-        D(wA.result), Y(!0);
+        h(wA.result), p(!0);
       }, wA.readAsDataURL(tA);
     }, q = async () => {
       if (!(!j || !Z))
@@ -4963,22 +4975,22 @@ const VA = {
           }
           e == null || e(T);
           const tA = URL.createObjectURL(T);
-          t(tA, T), Y(!1);
+          t(tA, T), p(!1);
         } catch {
           C == null || C("Gagal memproses gambar");
         }
     }, E = AA(null), f = () => {
       E.current && E.current.click();
     };
-    xe(Q, () => ({
+    xe(d, () => ({
       openFileDialog: () => {
         var T;
         (T = E.current) == null || T.click();
       }
     }));
-    const M = parseInt(n, 10), h = VA[l];
-    let N, x;
-    return h >= 1 ? (x = M, N = M * h) : (N = M, x = M / h), /* @__PURE__ */ g(
+    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(
       a,
       {
         display: "flex",
@@ -4992,9 +5004,9 @@ const VA = {
         align: "center",
         justify: "center",
         style: {
-          width: c != null && c.fullWidth ? "100%" : `${N}px`,
+          width: c != null && c.fullWidth ? "100%" : `${F}px`,
           height: c != null && c.fullWidth ? "auto" : `${x}px`,
-          aspectRatio: h,
+          aspectRatio: D,
           flexShrink: 0
         },
         onMouseEnter: () => u(!0),
@@ -5067,8 +5079,8 @@ const VA = {
                       style: { color: "var(--starasia-ui-color-gray-50)" }
                     }
                   ),
-                  /* @__PURE__ */ A(G, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
-                    d,
+                  /* @__PURE__ */ A(O, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
+                    Q,
                     {
                       color: "gray-50",
                       fontSize: n.toNumber() > 80 ? "sm" : "md",
@@ -5108,12 +5120,12 @@ const VA = {
             }
           ),
           /* @__PURE__ */ g(
-            dA,
+            QA,
             {
-              isShow: O,
-              onHide: () => Y(!1),
+              isShow: Y,
+              onHide: () => p(!1),
               style: {
-                minWidth: w ? l === "1:1" ? "20rem" : N * 2 : "100%"
+                minWidth: w ? l === "1:1" ? "20rem" : F * 2 : "100%"
               },
               children: [
                 /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(
@@ -5129,8 +5141,8 @@ const VA = {
                       Se,
                       {
                         image: j,
-                        crop: F,
-                        zoom: p,
+                        crop: N,
+                        zoom: L,
                         aspect: l ? VA[l] : void 0,
                         onCropChange: U,
                         onZoomChange: k,
@@ -5143,8 +5155,8 @@ const VA = {
                   }
                 ) }),
                 /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
-                  /* @__PURE__ */ A(L, { size: "xs", secondary: !0, onClick: () => Y(!1), children: "Cancel" }),
-                  /* @__PURE__ */ A(L, { size: "xs", primary: !0, onClick: q, children: "Crop" })
+                  /* @__PURE__ */ A(b, { size: "xs", secondary: !0, onClick: () => p(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(b, { size: "xs", primary: !0, onClick: q, children: "Crop" })
                 ] }) })
               ]
             }
@@ -5161,7 +5173,7 @@ const VA = {
   required: t = !1,
   ...n
 }) => {
-  var s, C, Q;
+  var s, C, d;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
     a,
@@ -5171,7 +5183,7 @@ const VA = {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t,
             fallback: /* @__PURE__ */ g(
@@ -5182,7 +5194,7 @@ const VA = {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: n.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description })
                 ]
               }
             ),
@@ -5196,11 +5208,11 @@ const VA = {
                   /* @__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(G, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
-                        arrowPosition: (Q = n.tooltip) == null ? void 0 : Q.arrowPosition,
+                        arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -5216,7 +5228,7 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!n.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
@@ -5246,7 +5258,7 @@ const VA = {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          G,
+          O,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -5257,7 +5269,7 @@ const VA = {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ A(z, { children: t.title }),
-                  /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
+                  /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
             ),
@@ -5271,7 +5283,7 @@ const VA = {
                   /* @__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(G, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
+                    /* @__PURE__ */ A(O, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
                       iA,
                       {
                         label: (c = t.tooltip) == null ? void 0 : c.label,
@@ -5291,7 +5303,7 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(O, { condition: !!t.description, children: /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -5309,12 +5321,12 @@ const VA = {
   toggleShow: t = !0,
   disabled: n = !1
 }) => {
-  var Q;
-  const [l, c] = b([]);
+  var d;
+  const [l, c] = G([]);
   R(() => {
     e && c([...e.map((w) => ({ id: w.id, isActive: w.isActive }))]);
   }, [e]);
-  const s = (Q = l.find((w) => w.id === i)) == null ? void 0 : Q.isActive, C = JA(() => {
+  const s = (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);
@@ -5352,7 +5364,7 @@ const VA = {
   InputImgFile: tt,
   Custom: rt
 }, ot = ({ customBottom: e }) => {
-  const [i, r] = b(!1), o = () => {
+  const [i, r] = G(!1), o = () => {
     window.scrollY > window.screenY ? r(!0) : r(!1);
   }, t = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -5378,7 +5390,7 @@ const VA = {
             transition: "transform 0.2s ease-in-out"
           },
           children: /* @__PURE__ */ A(
-            L,
+            b,
             {
               secondary: !0,
               size: "xs",
@@ -5445,7 +5457,7 @@ const VA = {
   withScrollToTopButton: i = !1,
   scrollToTopButtonProps: r,
   containerProps: o
-}) => /* @__PURE__ */ A(a, { position: "absolute", width: "width-full", style: { zIndex: "999" }, children: /* @__PURE__ */ g(
+}) => /* @__PURE__ */ A(a, { position: "absolute", width: "width-full", style: { zIndex: "var(--app-footer-zindex, 999)" }, children: /* @__PURE__ */ g(
   a,
   {
     position: "fixed",
@@ -5458,8 +5470,8 @@ const VA = {
     align: "center",
     display: "flex",
     style: {
-      width: "100%",
-      transition: "width 0.3s ease-in-out",
+      left: "var(--app-sidebar-width, 0px)",
+      transition: "left 0.3s ease-in-out",
       borderColor: "var(--starasia-ui-border-color-secondary)"
     },
     justify: (o == null ? void 0 : o.justify) || "flex-end",
@@ -5485,9 +5497,9 @@ const VA = {
 ) }), 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: [
     /* @__PURE__ */ A(m, { name: r, color: "var(--starasia-ui-color-gray-300)" }),
-    /* @__PURE__ */ A(d, { color: "gray-500", variant: "sub-h3", children: e })
-  ] }) : /* @__PURE__ */ A(d, { color: "gray-500", variant: "sub-h3", children: e }),
-  typeof i == "string" ? /* @__PURE__ */ A(d, { variant: "sub-h3", children: i }) : i
+    /* @__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(
@@ -5644,13 +5656,13 @@ const yr = ({
   childrenButton: s,
   customIcon: C
 }) => {
-  const Q = () => {
+  const d = () => {
     switch (o) {
       case "primary":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(L, { primary: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(L, { primary: !0, onClick: r, children: s || e }) });
+        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 }) });
       case "secondary":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(L, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
-          d,
+        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(b, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
+          Q,
           {
             fontFamily: "Poppins",
             fontSize: "md",
@@ -5658,11 +5670,11 @@ const yr = ({
             style: { color: "var(--starasia-ui-utility-success-default)" },
             children: s || e
           }
-        ) : e }) : /* @__PURE__ */ A(L, { secondary: !0, onClick: r, children: s || e }) });
+        ) : e }) : /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: s || e }) });
       case "success":
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(L, { success: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(L, { success: !0, onClick: r, children: s || e }) });
+        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 }) });
       default:
-        return /* @__PURE__ */ A(W, { children: n ? /* @__PURE__ */ A(L, { primary: !0, iconLeft: n, onClick: r, children: s || e }) : /* @__PURE__ */ A(L, { primary: !0, onClick: r, children: s || e }) });
+        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__ */ g(
@@ -5689,7 +5701,7 @@ const yr = ({
           },
           B
         )) }),
-        l ? Q() : null
+        l ? d() : null
       ]
     }
   );
@@ -5911,7 +5923,7 @@ function xr({ onClick: e }) {
       children: [
         /* @__PURE__ */ A(ct, { width: i ? 600 : 300 }),
         /* @__PURE__ */ A(
-          d,
+          Q,
           {
             fontWeight: "bold",
             fontSize: i ? "3xl" : "2xl",
@@ -5920,7 +5932,7 @@ function xr({ onClick: e }) {
           }
         ),
         /* @__PURE__ */ A(
-          d,
+          Q,
           {
             fontWeight: "semibold",
             fontSize: i ? "lg" : "md",
@@ -5928,7 +5940,7 @@ function xr({ onClick: e }) {
             children: "Sorry, we couldn't find the page you are looking for"
           }
         ),
-        e && /* @__PURE__ */ A(L, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -6161,8 +6173,8 @@ function fr({ onClick: e }) {
       gap: "md",
       children: [
         /* @__PURE__ */ A(gt, { width: i ? 600 : 300 }),
-        /* @__PURE__ */ A(d, { fontWeight: "bold", fontSize: i ? "3xl" : "2xl", children: "We Are Sorry ..." }),
-        e && /* @__PURE__ */ A(L, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        /* @__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" })
       ]
     }
   );
@@ -6854,7 +6866,7 @@ function Sr({ onClick: e }) {
       children: [
         /* @__PURE__ */ A(st, { width: i ? 600 : 300 }),
         /* @__PURE__ */ A(
-          d,
+          Q,
           {
             fontWeight: "bold",
             fontSize: i ? "3xl" : "2xl",
@@ -6863,7 +6875,7 @@ function Sr({ onClick: e }) {
           }
         ),
         /* @__PURE__ */ A(
-          d,
+          Q,
           {
             fontWeight: "semibold",
             fontSize: i ? "lg" : "md",
@@ -6871,7 +6883,7 @@ function Sr({ onClick: e }) {
             children: "we are trying to fix the problem"
           }
         ),
-        e && /* @__PURE__ */ A(L, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -6880,7 +6892,7 @@ const Lr = (e) => {
   var r, o, t, n, l;
   const i = V("md");
   return /* @__PURE__ */ g(
-    dA,
+    QA,
     {
       isShow: e.isShow,
       onHide: e.onHide,
@@ -6892,8 +6904,8 @@ const Lr = (e) => {
         }
       },
       children: [
-        /* @__PURE__ */ A(BA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(d, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
-        /* @__PURE__ */ A(hA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(d, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
+        /* @__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(xA, { children: /* @__PURE__ */ A(
           a,
           {
@@ -6910,7 +6922,7 @@ const Lr = (e) => {
                 gap: ((l = e.wrapperConfirmBtnProps) == null ? void 0 : l.gap) || "sm",
                 ...e.wrapperConfirmBtnProps,
                 children: [
-                  e.onCancel && /* @__PURE__ */ A(L, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
+                  e.onCancel && /* @__PURE__ */ A(b, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
                   /* @__PURE__ */ A(
                     a,
                     {
@@ -6919,7 +6931,7 @@ const Lr = (e) => {
                         textWrap: "nowrap"
                       },
                       children: /* @__PURE__ */ A(
-                        L,
+                        b,
                         {
                           ...e.buttonConfirmProps,
                           onClick: e.onConfirm,
@@ -6947,12 +6959,12 @@ const Lr = (e) => {
     customHeight: o,
     paddingInline: t = "spacing-24"
   }) => {
-    const n = AA(null), [l, c] = b("100vh");
+    const n = AA(null), [l, c] = G("100vh");
     return R(() => {
       const s = () => {
         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);
@@ -6965,9 +6977,9 @@ const Lr = (e) => {
         customHeight: o,
         paddingBlock: "xl",
         paddingInline: t,
+        bg: "gray-50",
         style: {
-          backgroundColor: "var(--hsd-ui-color-gray-50)",
-          height: l
+          minHeight: l
         },
         children: e
       }
@@ -6995,7 +7007,7 @@ function Or({
   R(() => {
     let t = null, n = null;
     for (const s of i) {
-      const C = s.items.find((Q) => Q.to ? Q.to === "/" ? o.pathname === "/" : !!(Q.to === o.pathname || o.pathname.startsWith(Q.to + "/")) : !1);
+      const C = s.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;
         break;
@@ -7014,10 +7026,10 @@ const Yr = () => {
     setSearchParams: i,
     searchParams: e,
     searchQueries: r,
-    isHasQuery: (Q, w) => e.has(Q) && e.get(Q) === w,
-    getQueryParam: (Q) => e.get(Q),
+    isHasQuery: (d, w) => e.has(d) && e.get(d) === w,
+    getQueryParam: (d) => e.get(d),
     // route params
-    getRouteParam: (Q) => o[Q],
+    getRouteParam: (d) => o[d],
     params: o,
     // location info
     location: t,
@@ -7032,21 +7044,21 @@ function pr(e) {
   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(
-      (Q, w) => {
+      (d, w) => {
         const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
-        return { ...Q, [B]: !1 };
+        return { ...d, [B]: !1 };
       },
       {}
     );
     return {
-      ...Object.keys(e.role).reduce((Q, w) => {
+      ...Object.keys(e.role).reduce((d, w) => {
         const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
         return {
-          ...Q,
+          ...d,
           [B]: n === e.role[w]
         };
       }, l),
-      hasRole: (Q) => n === e.role[Q],
+      hasRole: (d) => n === e.role[d],
       getRoleKey: () => n
     };
   }, [(t = (o = i == null ? void 0 : i.access) == null ? void 0 : o.role) == null ? void 0 : t.code, e]);
@@ -7064,7 +7076,7 @@ export {
   Gi as ColumnFilterDropdown,
   Lr as ConfirmationDialog,
   Yi as DataTable,
-  G as DecisionWrapper,
+  O as DecisionWrapper,
   kA as EachUtils,
   yr as EmptyStatePage,
   yi as FilterDrawer,
@@ -7099,8 +7111,8 @@ export {
   Xt as formatDate,
   yA as formatDateToIndonesian,
   Pt as formatRupiah,
-  dr as getDateFilterValue,
-  Qr as getDateRangeFilterValue,
+  Qr as getDateFilterValue,
+  dr as getDateRangeFilterValue,
   Vt as getInitials,
   Br as getValueDropdownMultipleFilter,
   wr as getValueRadioFilter,