@starasia/admin 2.0.2 → 2.0.4

package/dist/index.es.js

@@ -3,24 +3,24 @@ import { Badges as MA } from "@starasia/badges";
 export * from "@starasia/badges";
 import { Box as C } from "@starasia/box";
 export * from "@starasia/box";
-import { Button as p } from "@starasia/button";
+import { Button as Y } from "@starasia/button";
 export * from "@starasia/button";
 export * from "@starasia/card";
 import { StarasiaDate as se } from "@starasia/date";
 export * from "@starasia/date";
-import { Dialog as mA, DialogTitle as IA, DialogBody as yA, DialogFooter as pA } from "@starasia/dialog";
+import { Dialog as mA, DialogTitle as uA, DialogBody as yA, DialogFooter as YA } from "@starasia/dialog";
 export * from "@starasia/dialog";
-import { Drawer as Ye } from "@starasia/drawer";
+import { Drawer as pe } from "@starasia/drawer";
 export * from "@starasia/drawer";
 import { Dropdown as jA } from "@starasia/dropdown";
 export * from "@starasia/dropdown";
-import { useMediaQuery as eA, useConfirmation as ae } from "@starasia/hooks";
+import { useMediaQuery as tA, useConfirmation as ae } from "@starasia/hooks";
 export * from "@starasia/hooks";
 import { searchParamsToObject as NA } from "@starasia/http";
 export * from "@starasia/http";
 import { Input as zA } from "@starasia/input";
 export * from "@starasia/input";
-import { Menu as Ce, MenuButton as LA, MenuLists as Be, MenuHeading as pe, MenuBody as de, MenuFooter as je } from "@starasia/menu";
+import { Menu as Ce, MenuButton as LA, MenuLists as Be, MenuHeading as Ye, MenuBody as de, MenuFooter as je } from "@starasia/menu";
 export * from "@starasia/menu";
 import { Pagination as Ne } from "@starasia/pagination";
 export * from "@starasia/pagination";
@@ -54,9 +54,9 @@ export * from "@starasia/story-record";
 import { Skeleton as dA } from "@starasia/skeleton";
 export * from "@starasia/skeleton";
 import { jsx as A, jsxs as s, Fragment as R } from "react/jsx-runtime";
-import wA, { createContext as he, useState as G, useContext as De, useCallback as EA, useMemo as CA, memo as iA, useEffect as V, useRef as cA, useLayoutEffect as WA, isValidElement as Ie, forwardRef as XA, Children as Te, useImperativeHandle as Ue } from "react";
+import wA, { createContext as he, useState as G, useContext as De, useCallback as EA, useMemo as CA, memo as iA, useEffect as V, useRef as cA, useLayoutEffect as WA, isValidElement as ue, forwardRef as XA, Children as Te, useImperativeHandle as Ue } from "react";
 import "@starasia/css/dist/style.css";
-import { useSearchParams as KA, useNavigate as $A, useLocation as fA, Outlet as te, Link as ve, useParams as ue } from "react-router";
+import { useSearchParams as KA, useNavigate as $A, useLocation as fA, Outlet as te, Link as ve, useParams as Ie } from "react-router";
 import We from "react-easy-crop";
 const Re = {
   menus: [],
@@ -153,7 +153,7 @@ function _e({
         position: "sticky",
         top: "4rem",
         zIndex: 1,
-        borderBottom: "1px solid var(--sa-color-gray-300, #dddee1)",
+        borderBottom: "1px solid var(--sa-border-subtle, #0b120e24)",
         paddingLeft: "0.5rem",
         paddingRight: "0.5rem",
         paddingTop: "0.5rem",
@@ -174,16 +174,16 @@ function _e({
     }
   );
 }
-const YA = "moduleSwitcherGroupId", RA = "starasia-module-switcher-change";
+const pA = "moduleSwitcherGroupId", RA = "starasia-module-switcher-change";
 function re() {
   if (typeof window > "u") return null;
-  const e = window.localStorage.getItem(YA);
+  const e = window.localStorage.getItem(pA);
   if (e === null) return null;
   const t = Number(e);
   return Number.isFinite(t) ? t : null;
 }
 function me(e) {
-  typeof window > "u" || (e === null ? window.localStorage.removeItem(YA) : window.localStorage.setItem(YA, String(e)), window.dispatchEvent(new CustomEvent(RA, { detail: e })));
+  typeof window > "u" || (e === null ? window.localStorage.removeItem(pA) : window.localStorage.setItem(pA, String(e)), window.dispatchEvent(new CustomEvent(RA, { detail: e })));
 }
 function cr() {
   me(null);
@@ -196,7 +196,7 @@ function ye() {
     const o = () => {
       t(re());
     }, r = (c) => {
-      c.key === YA && o();
+      c.key === pA && o();
     };
     return window.addEventListener(RA, o), window.addEventListener("storage", r), () => {
       window.removeEventListener(RA, o), window.removeEventListener("storage", r);
@@ -216,7 +216,7 @@ const oe = {
   paddingTop: "0.5rem",
   paddingBottom: "0.5rem",
   fontSize: "0.875rem",
-  color: "var(--sa-color-gray-700, #6b6e76)",
+  color: "var(--sa-text-subtle, #8c8f97)",
   background: "transparent",
   border: "none",
   borderRadius: "0.375rem",
@@ -238,7 +238,7 @@ function nr({
   profileMenuItems: w,
   logoutButton: d
 }) {
-  const [u] = KA(), L = u.get("embed") === "true", D = Ee(), { badges: K } = Xe(), Z = $A(), q = fA(), M = !eA("md"), [k, P] = G(!1), [x, $] = G(!1), [tA, J] = G(!1), [m, Y] = G(/* @__PURE__ */ new Set()), { selectedGroupId: E, setSelectedGroupId: I } = ye(), N = cA(null), v = cA(null);
+  const [I] = KA(), L = I.get("embed") === "true", D = Ee(), { badges: K } = Xe(), Z = $A(), q = fA(), M = !tA("md"), [k, P] = G(!1), [x, $] = G(!1), [eA, J] = G(!1), [m, p] = G(/* @__PURE__ */ new Set()), { selectedGroupId: E, setSelectedGroupId: u } = ye(), N = cA(null), v = cA(null);
   V(() => {
     const S = N.current;
     if (!S) return;
@@ -288,21 +288,21 @@ function nr({
     P(!1);
   }, nA = () => {
     P(!1), r();
-  }, uA = D.menus.flatMap(
+  }, IA = D.menus.flatMap(
     (S) => S.items.flatMap((F) => {
       const z = [F.to];
       return F.children && z.push(...F.children.map((rA) => rA.to)), z;
     })
   ), aA = (S) => {
     if (!q.pathname.startsWith(S)) return !1;
-    const F = uA.filter((z) => q.pathname.startsWith(z)).sort((z, rA) => rA.length - z.length)[0];
+    const F = IA.filter((z) => q.pathname.startsWith(z)).sort((z, rA) => rA.length - z.length)[0];
     return S === F;
   };
   V(() => {
     D.menus.forEach((S) => {
       S.items.forEach((F) => {
         var z;
-        (z = F.children) != null && z.some((rA) => q.pathname.startsWith(rA.to)) && Y((rA) => {
+        (z = F.children) != null && z.some((rA) => q.pathname.startsWith(rA.to)) && p((rA) => {
           const gA = new Set(rA);
           return gA.add(F.id), gA;
         });
@@ -310,14 +310,14 @@ function nr({
     });
   }, [q.pathname, D.menus]);
   const Le = (S) => {
-    Y((F) => {
+    p((F) => {
       const z = new Set(F);
       return z.has(S) ? z.delete(S) : z.add(S), z;
     });
   };
   V(() => {
-    D.menus.length !== 0 && E !== null && !D.menus.some((S) => S.id === E) && I(null);
-  }, [D.menus, E, I]);
+    D.menus.length !== 0 && E !== null && !D.menus.some((S) => S.id === E) && u(null);
+  }, [D.menus, E, u]);
   const Ge = CA(() => {
     if (E !== null)
       return D.menus.filter(
@@ -329,17 +329,17 @@ function nr({
       { id: 18, name: "Pengaturan", items: F, parentGroupId: void 0 }
     ];
   }, [D.menus, E]);
-  return L ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "var(--sa-color-gray-100, #f8f8f8)" }, children: e || /* @__PURE__ */ A(te, {}) }) : /* @__PURE__ */ s(R, { children: [
+  return L ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)" }, children: e || /* @__PURE__ */ A(te, {}) }) : /* @__PURE__ */ s(R, { children: [
     /* @__PURE__ */ s(
       "div",
       {
         style: {
           display: "flex",
           height: "100vh",
-          // backgroundColor: "var(--sa-color-gray-100, #f8f8f8)",
+          // backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)",
           position: "relative",
           "--app-sidebar-width": M ? "0px" : x ? "4rem" : "16rem",
-          "--app-footer-zindex": M && tA ? "40" : "999"
+          "--app-footer-zindex": M && eA ? "40" : "999"
         },
         children: [
           M && /* @__PURE__ */ A(
@@ -350,8 +350,8 @@ function nr({
                 inset: 0,
                 backgroundColor: "var(--sa-color-black-alpha-a50, #181a198f)",
                 zIndex: 40,
-                opacity: tA ? 0.5 : 0,
-                pointerEvents: tA ? "auto" : "none",
+                opacity: eA ? 0.5 : 0,
+                pointerEvents: eA ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
               onClick: () => J(!1)
@@ -366,10 +366,10 @@ function nr({
                 ...M && {
                   inset: 0,
                   zIndex: 50,
-                  transform: tA ? "translateX(0)" : "translateX(-100%)"
+                  transform: eA ? "translateX(0)" : "translateX(-100%)"
                 },
-                backgroundColor: "var(--sa-color-gray-100, #f8f8f8)",
-                borderRight: "1px solid var(--sa-color-gray-300, #dddee1)",
+                backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)",
+                borderRight: "1px solid var(--sa-border-subtle, #0b120e24)",
                 display: "flex",
                 flexDirection: "column",
                 transition: "all 0.3s ease-in-out",
@@ -385,7 +385,7 @@ function nr({
                       alignItems: "center",
                       paddingLeft: "1rem",
                       paddingRight: "1rem",
-                      borderBottom: "1px solid var(--sa-color-gray-300, #dddee1)"
+                      borderBottom: "1px solid var(--sa-border-subtle, #0b120e24)"
                     },
                     children: [
                       /* @__PURE__ */ s(
@@ -410,12 +410,12 @@ function nr({
                                 }
                               }
                             ),
-                            (!x || tA) && /* @__PURE__ */ A(
+                            (!x || eA) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
                                   fontWeight: "600",
-                                  color: "var(--sa-color-gray-1100, #1e1f21)",
+                                  color: "var(--sa-text-primary, #292a2e)",
                                   whiteSpace: "nowrap",
                                   transition: "opacity 0.3s"
                                 },
@@ -434,7 +434,7 @@ function nr({
                             borderRadius: "0.5rem",
                             backgroundColor: "transparent",
                             border: "none",
-                            color: "var(--sa-color-gray-500, #8c8f97)",
+                            color: "var(--sa-text-subtle, #8c8f97)",
                             marginLeft: "auto",
                             cursor: "pointer"
                           },
@@ -477,9 +477,9 @@ function nr({
                       justifyContent: "center",
                       borderRadius: "var(--sa-radii-md, 0.5rem)",
                       backgroundColor: "var(--sa-background-primary, #ffffff)",
-                      border: "1px solid var(--sa-color-gray-300, #dddee1)",
+                      border: "1px solid var(--sa-border-subtle, #0b120e24)",
                       cursor: "pointer",
-                      color: "var(--sa-color-gray-700, #6b6e76)",
+                      color: "var(--sa-text-subtle, #8c8f97)",
                       transition: "background-color 0.2s"
                     },
                     children: /* @__PURE__ */ A(
@@ -566,7 +566,7 @@ function nr({
                             paddingBottom: "0.5rem",
                             fontSize: "0.75rem",
                             fontWeight: "600",
-                            color: "var(--sa-color-gray-500, #8c8f97)",
+                            color: "var(--sa-text-subtle, #8c8f97)",
                             textTransform: "uppercase",
                             letterSpacing: "0.05em",
                             transition: "opacity 0.3s"
@@ -598,15 +598,15 @@ function nr({
                                 paddingBottom: "0.5rem",
                                 borderRadius: "var(--sa-radii-md, 0.5rem)",
                                 textAlign: "left",
-                                border: gA ? "1px solid var(--sa-border-subtle, #0b120e24)" : "1px solid transparent",
-                                backgroundColor: gA ? "var(--sa-background-primary, #ffffff)" : "transparent",
-                                color: gA ? "var(--sa-text-primary, #292a2e)" : "var(--sa-color-gray-800, #505258)",
+                                border: gA ? "1px solid var(--sa-border-brand, #031f43)" : "1px solid transparent",
+                                backgroundColor: gA ? "var(--sa-background-brand-subtlest, #e6edf6)" : "transparent",
+                                color: gA ? "var(--sa-text-brand, #031f43)" : "var(--sa-text-primary, #292a2e)",
                                 // transition: "all 0.2s",
                                 cursor: "pointer"
                               },
                               title: x && !M ? F.title : void 0,
                               onMouseEnter: (AA) => {
-                                gA || (AA.currentTarget.style.backgroundColor = "var(--sa-color-gray-200, #f0f1f2)");
+                                gA || (AA.currentTarget.style.backgroundColor = "var(--sa-background-neutral, #f0f1f2)");
                               },
                               onMouseLeave: (AA) => {
                                 gA || (AA.currentTarget.style.backgroundColor = "transparent");
@@ -698,7 +698,7 @@ function nr({
                               style: {
                                 marginLeft: "1.5rem",
                                 paddingLeft: "0.75rem",
-                                borderLeft: "1px solid var(--sa-color-gray-300, #dddee1)",
+                                borderLeft: "1px solid var(--sa-border-subtle, #0b120e24)",
                                 overflow: "hidden",
                                 transition: "all 0.3s ease-in-out",
                                 maxHeight: rA ? `${F.children.length * 44}px` : "0px",
@@ -725,14 +725,14 @@ function nr({
                                       paddingBottom: "0.5rem",
                                       borderRadius: "var(--sa-radii-md, 0.5rem)",
                                       textAlign: "left",
-                                      backgroundColor: aA(AA.to) ? "var(--sa-background-primary, #ffffff)" : "transparent",
-                                      color: aA(AA.to) ? "var(--sa-text-primary, #292a2e)" : "var(--sa-color-gray-800, #505258)",
+                                      backgroundColor: aA(AA.to) ? "var(--sa-background-brand-subtlest, #e6edf6)" : "transparent",
+                                      color: aA(AA.to) ? "var(--sa-text-brand, #031f43)" : "var(--sa-text-primary, #292a2e)",
                                       // transition: "all 0.2s",
                                       cursor: "pointer",
-                                      border: aA(AA.to) ? "1px solid var(--sa-border-subtle, #0b120e24)" : "1px solid transparent"
+                                      border: aA(AA.to) ? "1px solid var(--sa-border-brand, #031f43)" : "1px solid transparent"
                                     },
                                     onMouseEnter: (JA) => {
-                                      aA(AA.to) || (JA.currentTarget.style.backgroundColor = "var(--sa-color-gray-200, #f0f1f2)");
+                                      aA(AA.to) || (JA.currentTarget.style.backgroundColor = "var(--sa-background-neutral, #f0f1f2)");
                                     },
                                     onMouseLeave: (JA) => {
                                       aA(AA.to) || (JA.currentTarget.style.backgroundColor = "transparent");
@@ -789,7 +789,7 @@ function nr({
                 style: {
                   height: "4rem",
                   backgroundColor: "var(--sa-background-primary, #ffffff)",
-                  borderBottom: "1px solid var(--sa-color-gray-300, #dddee1)",
+                  borderBottom: "1px solid var(--sa-border-subtle, #0b120e24)",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
@@ -808,7 +808,7 @@ function nr({
                           borderRadius: "0.5rem",
                           backgroundColor: "transparent",
                           border: "none",
-                          color: "var(--sa-color-gray-700, #6b6e76)",
+                          color: "var(--sa-text-subtle, #8c8f97)",
                           cursor: "pointer"
                         },
                         children: /* @__PURE__ */ A(
@@ -854,7 +854,7 @@ function nr({
                                     margin: 0,
                                     fontSize: "0.875rem",
                                     fontWeight: 500,
-                                    color: "var(--sa-color-gray-700, #6b6e76)",
+                                    color: "var(--sa-text-subtle, #8c8f97)",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
                                     textOverflow: "ellipsis"
@@ -868,7 +868,7 @@ function nr({
                                   style: {
                                     margin: 0,
                                     fontSize: "0.75rem",
-                                    color: "var(--sa-color-gray-500, #8c8f97)",
+                                    color: "var(--sa-text-subtle, #8c8f97)",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
                                     textOverflow: "ellipsis"
@@ -902,7 +902,7 @@ function nr({
                               {
                                 name: "ChevronDown",
                                 size: "sm",
-                                style: { color: "var(--sa-color-gray-500, #8c8f97)" }
+                                style: { color: "var(--sa-text-subtle, #8c8f97)" }
                               }
                             )
                           ]
@@ -919,7 +919,7 @@ function nr({
                             marginTop: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ A(pe, { children: /* @__PURE__ */ s(
+                            /* @__PURE__ */ A(Ye, { children: /* @__PURE__ */ s(
                               "div",
                               {
                                 style: {
@@ -957,7 +957,7 @@ function nr({
                                         margin: 0,
                                         fontSize: "0.875rem",
                                         fontWeight: 600,
-                                        color: "var(--sa-color-gray-1100, #1e1f21)",
+                                        color: "var(--sa-text-primary, #292a2e)",
                                         maxWidth: "100%",
                                         whiteSpace: "nowrap",
                                         overflow: "hidden",
@@ -972,7 +972,7 @@ function nr({
                                       style: {
                                         margin: 0,
                                         fontSize: "0.75rem",
-                                        color: "var(--sa-color-gray-600, #7d818a)",
+                                        color: "var(--sa-text-subtle, #8c8f97)",
                                         maxWidth: "100%",
                                         whiteSpace: "nowrap",
                                         overflow: "hidden",
@@ -987,7 +987,7 @@ function nr({
                                       style: {
                                         margin: 0,
                                         fontSize: "0.75rem",
-                                        color: "var(--sa-color-gray-600, #7d818a)",
+                                        color: "var(--sa-text-subtle, #8c8f97)",
                                         maxWidth: "100%",
                                         whiteSpace: "nowrap",
                                         overflow: "hidden",
@@ -1007,7 +1007,7 @@ function nr({
                                   onClick: S.onClick,
                                   style: oe,
                                   onMouseEnter: (z) => {
-                                    z.currentTarget.style.backgroundColor = "var(--sa-color-gray-200, #f0f1f2)";
+                                    z.currentTarget.style.backgroundColor = "var(--sa-background-neutral, #f0f1f2)";
                                   },
                                   onMouseLeave: (z) => {
                                     z.currentTarget.style.backgroundColor = "transparent";
@@ -1090,11 +1090,11 @@ function nr({
       }
     ),
     /* @__PURE__ */ s(mA, { isShow: k, onHide: oA, children: [
-      /* @__PURE__ */ A(IA, { children: "Confirmation Logout" }),
+      /* @__PURE__ */ A(uA, { children: "Confirmation Logout" }),
       /* @__PURE__ */ A(yA, { children: "Are you sure you want to end the session and exit the page?" }),
-      /* @__PURE__ */ A(pA, { children: /* @__PURE__ */ A(C, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ s(W, { direction: "row", gap: "sm", align: "center", children: [
-        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(p, { secondary: !0, onClick: oA, children: "Cancel" }) }),
-        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(p, { primary: !0, onClick: nA, children: "Yes, Sure" }) })
+      /* @__PURE__ */ A(YA, { children: /* @__PURE__ */ A(C, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ s(W, { direction: "row", gap: "sm", align: "center", children: [
+        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(Y, { secondary: !0, onClick: oA, children: "Cancel" }) }),
+        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(Y, { primary: !0, onClick: nA, children: "Yes, Sure" }) })
       ] }) }) })
     ] })
   ] });
@@ -1154,7 +1154,7 @@ function At({
                         width: "64px",
                         height: "64px",
                         borderRadius: "12px",
-                        border: o === null ? "2px solid var(--sa-background-brand, #04254f)" : "1px solid var(--sa-color-gray-300, #dddee1)",
+                        border: o === null ? "2px solid var(--sa-background-brand, #04254f)" : "1px solid var(--sa-border-subtle, #0b120e24)",
                         backgroundColor: o === null ? "var(--sa-color-brand-50, #e6edf6)" : "var(--sa-color-white-alpha-a90, #e5e9f66b)",
                         transition: "all 0.15s",
                         backdropFilter: "blur(4px)"
@@ -1209,7 +1209,7 @@ function At({
                           width: "64px",
                           height: "64px",
                           borderRadius: "12px",
-                          border: g ? "2px solid var(--sa-background-brand, #04254f)" : "1px solid var(--sa-color-gray-300, #dddee1)",
+                          border: g ? "2px solid var(--sa-background-brand, #04254f)" : "1px solid var(--sa-border-subtle, #0b120e24)",
                           backgroundColor: g ? "var(--sa-color-brand-50, #e6edf6)" : "var(--sa-color-white-alpha-a90, #e5e9f66b)",
                           transition: "all 0.15s",
                           backdropFilter: "blur(4px)"
@@ -1251,7 +1251,7 @@ function lr({
   const i = Ee(), o = $A(), { selectedGroupId: r, setSelectedGroupId: c } = ye(), [l, g] = G(!1), a = (B) => {
     var Q;
     if (c(B), B !== null) {
-      const w = i.menus.find((u) => u.id === B), d = (Q = w == null ? void 0 : w.items[0]) == null ? void 0 : Q.to;
+      const w = i.menus.find((I) => I.id === B), d = (Q = w == null ? void 0 : w.items[0]) == null ? void 0 : Q.to;
       d && o(d);
     }
     e == null || e(B);
@@ -1269,14 +1269,14 @@ function lr({
             width: "2.25rem",
             height: "2.25rem",
             borderRadius: "var(--sa-radii-md, 0.5rem)",
-            border: "1px solid var(--sa-color-gray-300, #dddee1)",
-            color: "var(--sa-color-gray-700, #6b6e76)",
+            border: "1px solid var(--sa-border-subtle, #0b120e24)",
+            color: "var(--sa-text-subtle, #8c8f97)",
             backgroundColor: "transparent",
             cursor: "pointer"
           },
           "aria-label": t,
           onMouseEnter: (B) => {
-            B.currentTarget.style.backgroundColor = "var(--sa-color-gray-100, #f8f8f8)";
+            B.currentTarget.style.backgroundColor = "var(--sa-background-primary-inverse, #f8f8f8)";
           },
           onMouseLeave: (B) => {
             B.currentTarget.style.backgroundColor = "transparent";
@@ -1314,7 +1314,7 @@ function lr({
 }
 const gr = iA(
   ({ children: e, coverImage: t, logo: i }) => {
-    const o = eA("md"), r = Je();
+    const o = tA("md"), r = Je();
     return /* @__PURE__ */ s(
       C,
       {
@@ -1519,31 +1519,31 @@ const gr = iA(
   const g = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(IA, { info: !0, children: e });
+        return /* @__PURE__ */ A(uA, { info: !0, children: e });
       case "danger":
-        return /* @__PURE__ */ A(IA, { danger: !0, children: e });
+        return /* @__PURE__ */ A(uA, { danger: !0, children: e });
       case "success":
-        return /* @__PURE__ */ A(IA, { success: !0, children: e });
+        return /* @__PURE__ */ A(uA, { success: !0, children: e });
       default:
-        return /* @__PURE__ */ A(IA, { success: !0, children: e });
+        return /* @__PURE__ */ A(uA, { success: !0, children: e });
     }
   }, a = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(p, { primary: !0, onClick: o, children: c });
+        return /* @__PURE__ */ A(Y, { primary: !0, onClick: o, children: c });
       case "danger":
-        return /* @__PURE__ */ A(p, { danger: !0, onClick: o, children: c });
+        return /* @__PURE__ */ A(Y, { danger: !0, onClick: o, children: c });
       case "success":
-        return /* @__PURE__ */ A(p, { success: !0, onClick: o, children: c });
+        return /* @__PURE__ */ A(Y, { success: !0, onClick: o, children: c });
       default:
-        return /* @__PURE__ */ A(p, { primary: !0, onClick: o, children: c });
+        return /* @__PURE__ */ A(Y, { primary: !0, onClick: o, children: c });
     }
   };
   return /* @__PURE__ */ s(mA, { isShow: r, onHide: i, children: [
     g(),
     /* @__PURE__ */ A(yA, { children: /* @__PURE__ */ A(h, { children: t }) }),
-    /* @__PURE__ */ A(pA, { children: /* @__PURE__ */ s(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
-      /* @__PURE__ */ A(p, { secondary: !0, onClick: i, children: "Cancel" }),
+    /* @__PURE__ */ A(YA, { children: /* @__PURE__ */ s(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
+      /* @__PURE__ */ A(Y, { secondary: !0, onClick: i, children: "Cancel" }),
       a()
     ] }) })
   ] });
@@ -1559,7 +1559,7 @@ const gr = iA(
     children: e
   }
 ), DA = iA(rt), ot = ({ backButton: e }) => {
-  const [t, i] = G(!1), o = (e == null ? void 0 : e.iconColor) ?? "var(--sa-color-gray-500, #8c8f97)", r = (e == null ? void 0 : e.textColor) ?? "var(--sa-text-subtle, #8c8f97)", c = (e == null ? void 0 : e.hoverIconColor) ?? "var(--sa-color-gray-700, #6b6e76)", l = (e == null ? void 0 : e.hoverTextColor) ?? "var(--sa-text-primary, #292a2e)";
+  const [t, i] = G(!1), o = (e == null ? void 0 : e.iconColor) ?? "var(--sa-text-subtle, #8c8f97)", r = (e == null ? void 0 : e.textColor) ?? "var(--sa-text-subtle, #8c8f97)", c = (e == null ? void 0 : e.hoverIconColor) ?? "var(--sa-text-subtle, #8c8f97)", l = (e == null ? void 0 : e.hoverTextColor) ?? "var(--sa-text-primary, #292a2e)";
   return /* @__PURE__ */ s(
     C,
     {
@@ -1607,15 +1607,15 @@ const gr = iA(
   containerProps: g,
   headerProps: a
 }) => {
-  const B = eA("lg"), Q = $A(), w = fA(), d = e == null ? void 0 : e.show, u = () => {
+  const B = tA("lg"), Q = $A(), w = fA(), d = e == null ? void 0 : e.show, I = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
     Q(-1, { replace: !0 });
-  }, L = () => c ? Ie(c) ? c : /* @__PURE__ */ A(C, { direction: "row", gap: "lg", children: c.map(
+  }, L = () => c ? ue(c) ? c : /* @__PURE__ */ A(C, { direction: "row", gap: "lg", children: c.map(
     ({ title: q, icon: X, buttonProps: M, onClick: k }, P) => !q && !X ? null : /* @__PURE__ */ A(
-      p,
+      Y,
       {
         fullWidth: !B,
         iconLeft: X ? /* @__PURE__ */ A(y, { name: X, size: "md" }) : void 0,
@@ -1635,7 +1635,7 @@ const gr = iA(
         style: { textDecoration: "none" },
         children: q
       }
-    ) }) : /* @__PURE__ */ A(C, { direction: "row", children: /* @__PURE__ */ A(DA, { onClick: u, children: q }) });
+    ) }) : /* @__PURE__ */ A(C, { direction: "row", children: /* @__PURE__ */ A(DA, { onClick: I, children: q }) });
   }, K = () => /* @__PURE__ */ s(
     C,
     {
@@ -1695,7 +1695,7 @@ const gr = iA(
     paddingHorizontal: c = !0,
     closeButton: l = nt
   }, g) => /* @__PURE__ */ A(R, { children: /* @__PURE__ */ A(
-    Ye,
+    pe,
     {
       blur: !1,
       isShow: t,
@@ -1752,13 +1752,13 @@ const gr = iA(
   ) })
 ), fe = iA(
   ({ children: e, borderBottom: t = !0, padding: i = !0 }) => {
-    const o = eA("lg");
+    const o = tA("lg");
     return /* @__PURE__ */ A(
       C,
       {
         padding: i ? "md" : "spacing-0",
-        paddingLeft: i ? o ? "lg" : "md" : "spacing-0",
-        paddingRight: i ? o ? "lg" : "md" : "spacing-0",
+        paddingLeft: i ? "md" : "spacing-0",
+        paddingRight: i ? "md" : "spacing-0",
         style: t ? {
           borderBottom: "1px solid var(--sa-border-subtle, #0b120e24)"
         } : void 0,
@@ -1768,13 +1768,13 @@ const gr = iA(
   }
 ), xe = iA(
   ({ children: e, borderTop: t = !0, padding: i = !0 }) => {
-    const o = eA("lg");
+    const o = tA("lg");
     return /* @__PURE__ */ A(
       C,
       {
         padding: i ? "md" : "spacing-0",
-        paddingLeft: i ? o ? "lg" : "md" : "spacing-0",
-        paddingRight: i ? o ? "lg" : "md" : "spacing-0",
+        paddingLeft: i ? "md" : "spacing-0",
+        paddingRight: i ? "md" : "spacing-0",
         style: t ? {
           borderTop: "1px solid var(--sa-border-subtle, #0b120e24)"
         } : void 0,
@@ -1783,20 +1783,17 @@ const gr = iA(
     );
   }
 ), lt = iA(
-  ({ children: e, ...t }) => {
-    const i = eA("lg");
-    return /* @__PURE__ */ A(
-      C,
-      {
-        padding: "md",
-        paddingLeft: i ? "lg" : "md",
-        paddingRight: i ? "lg" : "md",
-        gap: "md",
-        ...t,
-        children: e
-      }
-    );
-  }
+  ({ children: e, ...t }) => /* @__PURE__ */ A(
+    C,
+    {
+      padding: "md",
+      paddingLeft: "md",
+      paddingRight: "md",
+      gap: "md",
+      ...t,
+      children: e
+    }
+  )
 ), Br = iA(
   ({
     children: e,
@@ -1812,7 +1809,7 @@ const gr = iA(
     footerProps: Q = { borderTop: !0 },
     variantTag: w = "info"
   }) => {
-    const d = eA("lg"), u = () => i ? /* @__PURE__ */ s(C, { direction: "row", gap: "sm", align: "center", children: [
+    const d = tA("lg"), I = () => i ? /* @__PURE__ */ s(C, { direction: "row", gap: "sm", align: "center", children: [
       /* @__PURE__ */ A(h, { fontWeight: "medium", children: t }),
       /* @__PURE__ */ A(MA, { border: !0, text: i, variant: w })
     ] }) : /* @__PURE__ */ A(h, { fontWeight: "medium", children: t });
@@ -1833,9 +1830,9 @@ const gr = iA(
               direction: "row",
               justify: "space-between",
               align: "flex-start",
-              gap: "lg",
+              gap: "md",
               children: [
-                /* @__PURE__ */ A(C, { children: t ? u() : null }),
+                /* @__PURE__ */ A(C, { children: t ? I() : null }),
                 /* @__PURE__ */ A(
                   C,
                   {
@@ -1895,9 +1892,9 @@ const gr = iA(
     [r]
   );
   return /* @__PURE__ */ s(Ce, { position: c, style: i, children: [
-    /* @__PURE__ */ A(LA, { style: o, children: /* @__PURE__ */ A(p, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(y, { name: e, ...g }) }) }),
+    /* @__PURE__ */ A(LA, { style: o, children: /* @__PURE__ */ A(Y, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(y, { name: e, ...g }) }) }),
     /* @__PURE__ */ A(Be, { style: B, children: t.map((Q, w) => a === "outline-button" ? /* @__PURE__ */ A(de, { children: /* @__PURE__ */ s(
-      p,
+      Y,
       {
         size: "sm",
         secondary: !0,
@@ -2004,7 +2001,7 @@ const gr = iA(
       o ? B = r.includes(g.value) ? a.filter((Q) => Q.value !== g.value) : [...a, g] : B = [g], i == null || i(B);
     };
     return /* @__PURE__ */ A(C, { direction: "row", gap: "sm", flexWrap: "wrap", children: t == null ? void 0 : t.map((g, a) => /* @__PURE__ */ A(
-      p,
+      Y,
       {
         ...r.includes(g.value) ? { primary: !0 } : { secondary: !0 },
         onClick: () => l(g),
@@ -2029,7 +2026,7 @@ const gr = iA(
       onSearch: Q,
       value: w,
       dateFilter: d,
-      enableInputDate: u,
+      enableInputDate: I,
       withSearchParam: L,
       // disabled,
       rangedDate: D,
@@ -2059,7 +2056,7 @@ const gr = iA(
             return /* @__PURE__ */ A(
               se,
               {
-                input: u,
+                input: I,
                 filter: d,
                 value: wt(w || P, D),
                 onChange: (J) => o == null ? void 0 : o({ value: J, name: g, type: t }),
@@ -2103,9 +2100,9 @@ const gr = iA(
                   label: J.label,
                   checked: m,
                   sizes: "sm",
-                  onChange: (Y) => {
-                    const E = Array.isArray(w) ? w : [], I = Y.target.checked ? [...E, J.value] : E.filter((N) => N !== J.value);
-                    o == null || o({ value: I, name: g, type: t });
+                  onChange: (p) => {
+                    const E = Array.isArray(w) ? w : [], u = p.target.checked ? [...E, J.value] : E.filter((N) => N !== J.value);
+                    o == null || o({ value: u, name: g, type: t });
                   }
                 },
                 J.value
@@ -2141,7 +2138,7 @@ const gr = iA(
     onHide: c,
     resetting: l
   }) => {
-    const [g, a] = G(!1), B = cA(null), Q = ({ value: d, name: u, type: L }) => {
+    const [g, a] = G(!1), B = cA(null), Q = ({ value: d, name: I, type: L }) => {
       if (o)
         switch (L) {
           case "date":
@@ -2170,22 +2167,22 @@ const gr = iA(
         ref: B,
         children: [
           /* @__PURE__ */ A(Qt, { title: t, resetButton: { onClick: w } }),
-          g || l ? null : /* @__PURE__ */ A(C, { children: i == null ? void 0 : i.map((d, u) => /* @__PURE__ */ A(
+          g || l ? null : /* @__PURE__ */ A(C, { children: i == null ? void 0 : i.map((d, I) => /* @__PURE__ */ A(
             be,
             {
-              borderBottom: u !== i.length - 1,
+              borderBottom: I !== i.length - 1,
               onChange: Q,
               withSearchParam: o,
               ...d,
               ref: B
             },
-            u
+            I
           )) })
         ]
       }
     ) });
   }
-), It = wA.memo(({ active: e, onClick: t }) => {
+), ut = wA.memo(({ active: e, onClick: t }) => {
   var o, r;
   const i = VA();
   return /* @__PURE__ */ A(
@@ -2267,14 +2264,14 @@ const Dr = (e) => {
   let i = t[0].charAt(0);
   return t.length > 1 && (i += "" + t[1].charAt(0)), i.toUpperCase();
 };
-function Ir(e) {
+function ur(e) {
   const t = typeof e == "string" ? new Date(e) : e;
   if (isNaN(t.getTime()))
     throw new Error("Invalid date format");
   const i = t.getFullYear(), o = String(t.getMonth() + 1).padStart(2, "0"), r = String(t.getDate()).padStart(2, "0");
   return `${i}-${o}-${r}`;
 }
-const ut = "starasia-admin", sA = (e) => `var(--${ut}-${e})`, ur = {
+const It = "starasia-admin", sA = (e) => `var(--${It}-${e})`, Ir = {
   base: {
     borderColor: sA("base-border-color"),
     textColor: sA("base-text-color"),
@@ -2400,29 +2397,29 @@ const Lr = (e) => {
     o(!0);
   }, w = (M) => {
     o(M);
-  }, d = l ? yt(l) : void 0, u = !!(d && ((X = Object.values(d)) == null ? void 0 : X.length) > 0), L = () => d ? Object.keys(d).map((M) => {
-    var J, m, Y;
+  }, d = l ? yt(l) : void 0, I = !!(d && ((X = Object.values(d)) == null ? void 0 : X.length) > 0), L = () => d ? Object.keys(d).map((M) => {
+    var J, m, p;
     const k = PA(M, t.fields), P = [];
     let x = "";
-    const $ = (J = k == null ? void 0 : k.childrenKey) == null ? void 0 : J.length, tA = k == null ? void 0 : k.parentKey;
+    const $ = (J = k == null ? void 0 : k.childrenKey) == null ? void 0 : J.length, eA = k == null ? void 0 : k.parentKey;
     switch ($ && ((m = k == null ? void 0 : k.childrenKey) == null || m.forEach((E) => {
-      const I = PA(E, t.fields);
-      I && P.push({
-        name: I == null ? void 0 : I.name,
-        label: I == null ? void 0 : I.label,
-        value: d[I == null ? void 0 : I.name]
+      const u = PA(E, t.fields);
+      u && P.push({
+        name: u == null ? void 0 : u.name,
+        label: u == null ? void 0 : u.label,
+        value: d[u == null ? void 0 : u.name]
       });
     })), k == null ? void 0 : k.type) {
       case "dropdown":
       case "select-button":
-        const E = d[M] && typeof d[M] != "string" ? d[M] : [], I = (E == null ? void 0 : E.length) > 0 ? (Y = E.map((f) => f.label)) == null ? void 0 : Y.join(",") : d[M];
-        x = `${k == null ? void 0 : k.label}: ${I}`;
+        const E = d[M] && typeof d[M] != "string" ? d[M] : [], u = (E == null ? void 0 : E.length) > 0 ? (p = E.map((f) => f.label)) == null ? void 0 : p.join(",") : d[M];
+        x = `${k == null ? void 0 : k.label}: ${u}`;
         break;
       case "checkbox":
         const v = (Array.isArray(d[M]) ? d[M] : []).map(
           (f) => {
             var oA, nA;
-            return ((nA = (oA = k == null ? void 0 : k.options) == null ? void 0 : oA.find((uA) => uA.value === f)) == null ? void 0 : nA.label) || f;
+            return ((nA = (oA = k == null ? void 0 : k.options) == null ? void 0 : oA.find((IA) => IA.value === f)) == null ? void 0 : nA.label) || f;
           }
         ).join(", ");
         x = `${k == null ? void 0 : k.label}: ${v}`;
@@ -2441,15 +2438,15 @@ const Lr = (e) => {
         break;
     }
     if ($ && P.length > 0) {
-      let E = P.map((I) => {
+      let E = P.map((u) => {
         var N, v;
-        return I != null && I.value && typeof I.value != "string" ? (v = (N = I == null ? void 0 : I.value) == null ? void 0 : N.map((H) => H == null ? void 0 : H.label)) == null ? void 0 : v.join(",") : I.value;
+        return u != null && u.value && typeof u.value != "string" ? (v = (N = u == null ? void 0 : u.value) == null ? void 0 : N.map((H) => H == null ? void 0 : H.label)) == null ? void 0 : v.join(",") : u.value;
       });
       E = E.filter(
-        (I) => typeof I < "u" && I !== "" && I !== null
+        (u) => typeof u < "u" && u !== "" && u !== null
       ), E && E.length > 0 && (x = `${x} ${k.relationLabelChip || "by"} ${E}`);
     }
-    return tA && (x = ""), {
+    return eA && (x = ""), {
       name: k == null ? void 0 : k.name,
       label: k == null ? void 0 : k.label,
       value: d[M],
@@ -2467,7 +2464,7 @@ const Lr = (e) => {
     reset: Q,
     chips: K,
     toggleConfig: {
-      active: u,
+      active: I,
       onClick: B
     },
     chipsConfig: {
@@ -2482,12 +2479,12 @@ const Lr = (e) => {
       onReset: w
     }
   };
-}, Yr = {
+}, pr = {
   Container: Dt,
-  Toggle: It,
+  Toggle: ut,
   Chips: Bt,
   Chip: Se
-}, ft = (e) => /* @__PURE__ */ A(h, { variant: "h1", children: e.children, ...e.props }), xt = (e) => /* @__PURE__ */ A(h, { variant: "h2", children: e.children, ...e.props }), St = (e) => /* @__PURE__ */ A(h, { variant: "h3", children: e.children, ...e.props }), bt = (e) => /* @__PURE__ */ A(h, { variant: "h4", children: e.children, ...e.props }), Ft = (e) => /* @__PURE__ */ A(h, { variant: "h5", children: e.children, ...e.props }), Lt = (e) => /* @__PURE__ */ A(h, { variant: "h6", children: e.children, ...e.props }), Gt = (e) => /* @__PURE__ */ A(h, { variant: "sub-h1", children: e.children, ...e.props }), Ot = (e) => /* @__PURE__ */ A(h, { variant: "sub-h2", children: e.children, ...e.props }), Yt = (e) => /* @__PURE__ */ A(h, { variant: "sub-h3", children: e.children, ...e.props }), pt = (e) => /* @__PURE__ */ A(h, { variant: "body-1", children: e.children, ...e.props }), jt = (e) => /* @__PURE__ */ A(h, { variant: "body-2", children: e.children, ...e.props }), Nt = (e) => /* @__PURE__ */ A(h, { variant: "body-3", children: e.children, ...e.props }), U = {
+}, ft = (e) => /* @__PURE__ */ A(h, { variant: "h1", children: e.children, ...e.props }), xt = (e) => /* @__PURE__ */ A(h, { variant: "h2", children: e.children, ...e.props }), St = (e) => /* @__PURE__ */ A(h, { variant: "h3", children: e.children, ...e.props }), bt = (e) => /* @__PURE__ */ A(h, { variant: "h4", children: e.children, ...e.props }), Ft = (e) => /* @__PURE__ */ A(h, { variant: "h5", children: e.children, ...e.props }), Lt = (e) => /* @__PURE__ */ A(h, { variant: "h6", children: e.children, ...e.props }), Gt = (e) => /* @__PURE__ */ A(h, { variant: "sub-h1", children: e.children, ...e.props }), Ot = (e) => /* @__PURE__ */ A(h, { variant: "sub-h2", children: e.children, ...e.props }), pt = (e) => /* @__PURE__ */ A(h, { variant: "sub-h3", children: e.children, ...e.props }), Yt = (e) => /* @__PURE__ */ A(h, { variant: "body-1", children: e.children, ...e.props }), jt = (e) => /* @__PURE__ */ A(h, { variant: "body-2", children: e.children, ...e.props }), Nt = (e) => /* @__PURE__ */ A(h, { variant: "body-3", children: e.children, ...e.props }), U = {
   H1: ft,
   H2: xt,
   H3: St,
@@ -2496,12 +2493,12 @@ const Lr = (e) => {
   H6: Lt,
   SubH1: Gt,
   SubH2: Ot,
-  SubH3: Yt,
-  Body1: pt,
+  SubH3: pt,
+  Body1: Yt,
   Body2: jt,
   Body3: Nt
 }, _A = () => {
-  const [e, t] = KA(), i = NA(e.toString()), o = ue(), r = fA(), c = o.id;
+  const [e, t] = KA(), i = NA(e.toString()), o = Ie(), r = fA(), c = o.id;
   return {
     // query params
     setSearchParams: t,
@@ -2561,15 +2558,15 @@ const Lr = (e) => {
         [t]: B
       }, d = { ...c };
       l && typeof l == "string" && delete d[l], delete d[a];
-      const u = {
+      const I = {
         ...d,
         [g]: JSON.stringify(w)
       }, L = new URLSearchParams(c).toString(), D = new URLSearchParams(
-        u
+        I
       ).toString();
       if (L === D)
         return;
-      r(u);
+      r(I);
     }
   }
 }, qA = ({
@@ -2580,7 +2577,7 @@ const Lr = (e) => {
 }) => {
   const r = i.get(t) || void 0, c = r && typeof r == "string" ? JSON.parse(r) : void 0, l = c ? c[e] : void 0;
   return o === "label" && l ? JSON.parse(l)[0].label : o === "value" && l ? JSON.parse(l)[0].value : l;
-}, pr = ({
+}, Yr = ({
   name: e,
   filterKey: t = "filter",
   searchParams: i,
@@ -2632,23 +2629,23 @@ const Lr = (e) => {
 }) => {
   const { searchParams: c, setSearchParams: l, searchQueries: g } = _A(), [a, B] = G({}), Q = () => {
     c.delete(i || "filter"), l(c);
-  }, w = (d, u) => {
+  }, w = (d, I) => {
     switch (d.type) {
       case "radio": {
         const { show: L = !0 } = d;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, u);
+        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, I);
       }
       case "dropdown": {
         const { show: L = !0 } = d;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, u);
+        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, I);
       }
       case "date-range":
-        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, u);
+        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, I);
       case "date":
-        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, u);
+        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, I);
       case "dropdown-multiple": {
         const { show: L = !0 } = d;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, u);
+        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: d.title }) }, I);
       }
       default:
         return null;
@@ -2666,7 +2663,7 @@ const Lr = (e) => {
         }
       )
     ] }),
-    r == null ? void 0 : r.map((d, u) => w(d, u))
+    r == null ? void 0 : r.map((d, I) => w(d, I))
   ] }) });
 }, vt = ({
   searchKey: e = "q",
@@ -2682,30 +2679,30 @@ const Lr = (e) => {
   handleOnReset: Q,
   filterConfigs: w,
   buttonToggleProps: d,
-  position: u = "right",
+  position: I = "right",
   titleSearchLabel: L = "Work Order",
   withTitleLabels: D = !1
 }) => {
   const Z = (d == null ? void 0 : d.isShowLabel) ?? !0, [q, X] = G(!1), [M, k] = G(0), P = () => {
     k((f) => f + 1);
-  }, { searchParams: x, setSearchParams: $, getQueryParam: tA } = _A(), J = NA(x.toString()), m = Tt(e, x, g) || "", [Y, E] = G(m), I = tA(g), v = !!(I && !(() => {
-    if (I)
+  }, { searchParams: x, setSearchParams: $, getQueryParam: eA } = _A(), J = NA(x.toString()), m = Tt(e, x, g) || "", [p, E] = G(m), u = eA(g), v = !!(u && !(() => {
+    if (u)
       try {
-        const f = JSON.parse(I);
+        const f = JSON.parse(u);
         return Object.keys(f).length === 1 && f[e] === "";
       } catch (f) {
         console.error("Filter parameter is not a valid JSON:", f);
       }
     return !1;
-  })()), H = eA("md");
+  })()), H = tA("md");
   return V(() => {
     E(m);
   }, [m]), V(() => {
-    if (Y === m)
+    if (p === m)
       return;
     const f = window.setTimeout(() => {
       le({
-        value: Y,
+        value: p,
         name: e,
         type: "search",
         searchQueries: J,
@@ -2718,7 +2715,7 @@ const Lr = (e) => {
       window.clearTimeout(f);
     };
   }, [
-    Y,
+    p,
     m,
     e,
     J,
@@ -2730,12 +2727,12 @@ const Lr = (e) => {
     {
       gap: "md",
       style: {
-        flexDirection: H && u === "left" ? "row" : H && u === "right" ? "row-reverse" : "column"
+        flexDirection: H && I === "left" ? "row" : H && I === "right" ? "row-reverse" : "column"
       },
       align: "flex-end",
       children: [
         v && /* @__PURE__ */ A(C, { justify: "flex-end", children: /* @__PURE__ */ A(
-          p,
+          Y,
           {
             onClick: () => {
               const f = new URLSearchParams(x);
@@ -2745,11 +2742,11 @@ const Lr = (e) => {
             children: /* @__PURE__ */ A(h, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
-        r == null ? void 0 : r.map(({ minWidth: f, content: oA, title: nA, onClickContainer: uA }, aA) => /* @__PURE__ */ s(
+        r == null ? void 0 : r.map(({ minWidth: f, content: oA, title: nA, onClickContainer: IA }, aA) => /* @__PURE__ */ s(
           C,
           {
             gap: "sm",
-            onClick: uA,
+            onClick: IA,
             style: {
               minWidth: f
             },
@@ -2761,7 +2758,7 @@ const Lr = (e) => {
           `extended-filter-${aA}-${M}`
         )),
         !!(w != null && w.length) && /* @__PURE__ */ A(
-          p,
+          Y,
           {
             primary: v,
             secondary: !v,
@@ -2771,7 +2768,7 @@ const Lr = (e) => {
                 size: "sm",
                 name: (d == null ? void 0 : d.icon) || "FilterHorizontal",
                 style: {
-                  color: I ? "var(--sa-background-brand, #04254f)" : "var(--sa-text-primary, #292a2e)"
+                  color: u ? "var(--sa-background-brand, #04254f)" : "var(--sa-text-primary, #292a2e)"
                 }
               }
             ),
@@ -2856,7 +2853,7 @@ const Lr = (e) => {
                   placeholder: i,
                   leftIcon: /* @__PURE__ */ A(y, { name: "Search", width: 20, height: 20 }),
                   onChange: (f) => E(f.target.value),
-                  value: Y,
+                  value: p,
                   fullWidth: !0
                 },
                 M + 1 + g
@@ -2909,7 +2906,7 @@ const Lr = (e) => {
   advanceFilter: t,
   showFilter: i = !0
 }) => {
-  const o = eA("md"), r = () => e ? Ie(e) ? e : /* @__PURE__ */ A(
+  const o = tA("md"), r = () => e ? ue(e) ? e : /* @__PURE__ */ A(
     C,
     {
       style: {
@@ -2921,7 +2918,7 @@ const Lr = (e) => {
       },
       children: e.map(
         ({ title: c, icon: l, buttonProps: g, onClick: a }, B) => !c && !l ? null : /* @__PURE__ */ A(
-          p,
+          Y,
           {
             fullWidth: !o,
             iconLeft: l ? /* @__PURE__ */ A(y, { name: l, size: "md" }) : void 0,
@@ -3007,7 +3004,7 @@ const Lr = (e) => {
       [i]: L,
       [t]: "1"
     });
-  }, d = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), u = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
+  }, d = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), I = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
   return /* @__PURE__ */ A(
     C,
     {
@@ -3043,7 +3040,7 @@ const Lr = (e) => {
               defaultValue: B ? [{ label: `${B} per row`, value: B }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(h, { children: `${d}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(h, { children: `${d}-${I} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
           Ne,
@@ -3085,7 +3082,7 @@ const Lr = (e) => {
     };
     return i && document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
   }, [i]);
-  const u = (D) => {
+  const I = (D) => {
     const K = w.includes(D) ? w.filter((Z) => Z !== D) : [...w, D];
     e.onFilterChange(K);
   }, L = () => e.onFilterChange([]);
@@ -3110,7 +3107,7 @@ const Lr = (e) => {
             name: i ? "ChevronUp" : "ChevronDown",
             size: "sm",
             style: {
-              color: w.length > 0 ? "var(--sa-color-brand-500, #1a4fa0)" : "var(--sa-color-gray-600, #7d818a)"
+              color: w.length > 0 ? "var(--sa-color-brand-500, #1a4fa0)" : "var(--sa-text-subtle, #8c8f97)"
             }
           }
         )
@@ -3147,7 +3144,7 @@ const Lr = (e) => {
                 paddingBottom: "12px",
                 paddingLeft: "16px",
                 paddingRight: "16px",
-                borderBottom: "1px solid var(--sa-color-gray-100, #f8f8f8)"
+                borderBottom: "1px solid var(--sa-border-subtle, #0b120e24)"
               },
               children: [
                 /* @__PURE__ */ s(h, { fontSize: "sm", fontWeight: "semibold", color: "gray-700", children: [
@@ -3253,10 +3250,10 @@ const Lr = (e) => {
                     backgroundColor: w.includes(D.value) ? "var(--sa-color-brand-50, #e6edf6)" : "transparent"
                   },
                   onClick: (K) => {
-                    K.stopPropagation(), u(D.value);
+                    K.stopPropagation(), I(D.value);
                   },
                   onMouseEnter: (K) => {
-                    w.includes(D.value) || (K.currentTarget.style.backgroundColor = "var(--sa-color-gray-50, #ffffff)"), K.currentTarget.style.transform = "translateX(2px)";
+                    w.includes(D.value) || (K.currentTarget.style.backgroundColor = "var(--sa-background-primary, #ffffff)"), K.currentTarget.style.transform = "translateX(2px)";
                   },
                   onMouseLeave: (K) => {
                     K.currentTarget.style.backgroundColor = w.includes(D.value) ? "var(--sa-color-brand-50, #e6edf6)" : "transparent", K.currentTarget.style.transform = "translateX(0)";
@@ -3299,7 +3296,7 @@ const Lr = (e) => {
                       {
                         name: "Search",
                         size: "lg",
-                        style: { color: "var(--sa-color-gray-500, #8c8f97)" }
+                        style: { color: "var(--sa-text-subtle, #8c8f97)" }
                       }
                     ),
                     /* @__PURE__ */ A(
@@ -3324,7 +3321,7 @@ const Lr = (e) => {
                 paddingBottom: "8px",
                 paddingLeft: "16px",
                 paddingRight: "16px",
-                borderTop: "1px solid var(--sa-color-gray-100, #f8f8f8)",
+                borderTop: "1px solid var(--sa-border-subtle, #0b120e24)",
                 backgroundColor: "var(--sa-color-brand-50, #e6edf6)",
                 marginTop: "auto"
               },
@@ -3371,7 +3368,7 @@ const Lr = (e) => {
       /* @__PURE__ */ A("path", { d: e ? "M7 11V7a5 5 0 0 1 10 0v4" : "M7 11V7a5 5 0 0 1 9.9-1" })
     ]
   }
-), FA = "var(--sa-background-primary, #ffffff)", TA = "var(--sa-color-gray-100, #f8f8f8)", _t = ({
+), FA = "var(--sa-background-primary, #ffffff)", TA = "var(--sa-background-primary-inverse, #f8f8f8)", _t = ({
   columns: e,
   records: t,
   handleDetail: i,
@@ -3385,33 +3382,33 @@ const Lr = (e) => {
   scrollParentRef: Q,
   frozenCount: w = 0,
   onFrozenCountChange: d,
-  customActions: u,
+  customActions: I,
   actionsOrder: L = ["detail", "update", "delete", "custom"],
   customEmptyState: D
 }) => {
-  const Z = [i, o, r].filter((m) => m !== void 0).length, q = !!u, X = Z === 3 ? q ? "178px" : "140px" : Z === 2 ? q ? "140px" : "102px" : Z === 1 ? q ? "112px" : "74px" : q ? "74px" : "", M = (m, Y) => {
-    if (!Y) return m;
-    if (typeof Y == "function") return Y(m);
-    if (typeof Y == "string") return m[Y];
+  const Z = [i, o, r].filter((m) => m !== void 0).length, q = !!I, X = Z === 3 ? q ? "178px" : "140px" : Z === 2 ? q ? "140px" : "102px" : Z === 1 ? q ? "112px" : "74px" : q ? "74px" : "", M = (m, p) => {
+    if (!p) return m;
+    if (typeof p == "function") return p(m);
+    if (typeof p == "string") return m[p];
   }, [k, P] = G(!1);
   V(() => {
     if (!(Q != null && Q.current)) return;
     const m = Q.current;
     P(m.scrollHeight > m.clientHeight);
   }, [t, Q]);
-  const x = cA(null), [$, tA] = G([]);
+  const x = cA(null), [$, eA] = G([]);
   WA(() => {
     if (!w || !x.current) {
-      tA([]);
+      eA([]);
       return;
     }
     const m = Array.from(
       x.current.querySelectorAll("thead tr th")
-    ), Y = [];
+    ), p = [];
     let E = 0;
-    m.forEach((I, N) => {
-      Y[N] = E, N < w && (E += I.offsetWidth);
-    }), tA(Y);
+    m.forEach((u, N) => {
+      p[N] = E, N < w && (E += u.offsetWidth);
+    }), eA(p);
   }, [w, e, t]);
   const J = (m) => {
     d && d(m < w ? m : m + 1);
@@ -3425,22 +3422,22 @@ const Lr = (e) => {
           whiteSpace: "nowrap"
         },
         children: /* @__PURE__ */ s(kA, { children: [
-          e.map((m, Y) => {
+          e.map((m, p) => {
             var N;
-            const E = w > 0 && Y < w, I = $[Y] ?? 0;
+            const E = w > 0 && p < w, u = $[p] ?? 0;
             return /* @__PURE__ */ A(
               Ae,
               {
                 style: {
                   position: "sticky",
                   top: 0,
-                  left: E ? I : void 0,
+                  left: E ? u : void 0,
                   zIndex: E ? 4 : 2,
-                  paddingLeft: Y === 0 ? "12px" : "",
+                  paddingLeft: p === 0 ? "12px" : "",
                   borderRight: B ? "1px solid var(--sa-border-subtle, #0b120e24)" : void 0,
                   borderBottom: B ? "1px solid var(--sa-border-subtle, #0b120e24)" : void 0,
                   width: m.width,
-                  backgroundColor: "var(--sa-color-gray-100, #f8f8f8)",
+                  backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)",
                   textAlign: m.textAlign === "text-right" ? "right" : m.textAlign === "text-center" ? "center" : "left"
                 },
                 children: /* @__PURE__ */ s(
@@ -3465,7 +3462,7 @@ const Lr = (e) => {
                       d && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => J(Y),
+                          onClick: () => J(p),
                           title: E ? "Unfreeze column" : "Freeze column",
                           style: {
                             background: "none",
@@ -3475,7 +3472,7 @@ const Lr = (e) => {
                             display: "flex",
                             alignItems: "center",
                             flexShrink: 0,
-                            color: E ? "var(--sa-background-brand, #04254f)" : "var(--sa-color-gray-500, #8c8f97)",
+                            color: E ? "var(--sa-background-brand, #04254f)" : "var(--sa-text-subtle, #8c8f97)",
                             opacity: E ? 1 : 0.45,
                             transition: "opacity 0.15s"
                           },
@@ -3486,14 +3483,14 @@ const Lr = (e) => {
                   }
                 )
               },
-              `table-head-${Y}`
+              `table-head-${p}`
             );
           }),
-          i || o || r || u ? /* @__PURE__ */ A(
+          i || o || r || I ? /* @__PURE__ */ A(
             Ae,
             {
               style: {
-                backgroundColor: "var(--sa-color-gray-100, #f8f8f8)",
+                backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)",
                 position: "sticky",
                 top: 0,
                 right: 0,
@@ -3511,33 +3508,33 @@ const Lr = (e) => {
       /* @__PURE__ */ A(dA, { variant: "list" }),
       /* @__PURE__ */ A(dA, { variant: "list" }),
       /* @__PURE__ */ A(dA, { variant: "list" })
-    ] }) }) }) : !(t != null && t.length) && D ? /* @__PURE__ */ A(kA, { children: /* @__PURE__ */ A(hA, { colSpan: e.length + 1, children: D }) }) : t == null ? void 0 : t.map((m, Y) => /* @__PURE__ */ s(
+    ] }) }) }) : !(t != null && t.length) && D ? /* @__PURE__ */ A(kA, { children: /* @__PURE__ */ A(hA, { colSpan: e.length + 1, children: D }) }) : t == null ? void 0 : t.map((m, p) => /* @__PURE__ */ s(
       kA,
       {
         style: {
           transition: "background-color 0.3s ease",
           padding: 0,
-          borderBottom: Y === t.length - 1 && k ? void 0 : "1px solid var(--sa-border-subtle, #0b120e24)"
+          borderBottom: p === t.length - 1 && k ? void 0 : "1px solid var(--sa-border-subtle, #0b120e24)"
         },
         onMouseOver: (E) => {
-          const I = E.currentTarget;
-          I.style.backgroundColor = TA, I.style.position = "relative", I.style.zIndex = "2", w > 0 && Array.from(I.querySelectorAll("td")).slice(0, w).forEach((v) => {
+          const u = E.currentTarget;
+          u.style.backgroundColor = TA, u.style.position = "relative", u.style.zIndex = "2", w > 0 && Array.from(u.querySelectorAll("td")).slice(0, w).forEach((v) => {
             v.style.backgroundColor = TA;
           });
-          const N = Array.from(I.querySelectorAll("td")).at(-1);
+          const N = Array.from(u.querySelectorAll("td")).at(-1);
           N && N.style.position === "sticky" && (N.style.backgroundColor = TA);
         },
         onMouseOut: (E) => {
-          const I = E.currentTarget;
-          I.style.backgroundColor = "", I.style.position = "", I.style.zIndex = "", w > 0 && Array.from(I.querySelectorAll("td")).slice(0, w).forEach((v) => {
+          const u = E.currentTarget;
+          u.style.backgroundColor = "", u.style.position = "", u.style.zIndex = "", w > 0 && Array.from(u.querySelectorAll("td")).slice(0, w).forEach((v) => {
             v.style.backgroundColor = FA;
           });
-          const N = Array.from(I.querySelectorAll("td")).at(-1);
+          const N = Array.from(u.querySelectorAll("td")).at(-1);
           N && N.style.position === "sticky" && (N.style.backgroundColor = FA);
         },
         children: [
-          e.map((E, I) => {
-            const N = E.render ? E.render(m, Y, t) : M(m, E.accessor), v = w > 0 && I < w, H = $[I] ?? 0;
+          e.map((E, u) => {
+            const N = E.render ? E.render(m, p, t) : M(m, E.accessor), v = w > 0 && u < w, H = $[u] ?? 0;
             return /* @__PURE__ */ A(
               hA,
               {
@@ -3546,7 +3543,7 @@ const Lr = (e) => {
                   left: v ? H : void 0,
                   zIndex: v ? 1 : void 0,
                   backgroundColor: v ? FA : void 0,
-                  paddingLeft: I === 0 ? "12px" : "",
+                  paddingLeft: u === 0 ? "12px" : "",
                   whiteSpace: "nowrap",
                   borderLeft: E.showBorderLeft ? "1px solid var(--sa-border-subtle, #0b120e24)" : void 0,
                   borderRight: E.showBorderRight ? "1px solid var(--sa-border-subtle, #0b120e24)" : void 0,
@@ -3565,46 +3562,46 @@ const Lr = (e) => {
                   }
                 ) : N
               },
-              `row-${Y}-col-${I}`
+              `row-${p}-col-${u}`
             );
           }),
-          i || o || r || u ? /* @__PURE__ */ A(hA, { style: {
+          i || o || r || I ? /* @__PURE__ */ A(hA, { style: {
             width: X,
             position: "sticky",
             right: 0,
             zIndex: 1,
             backgroundColor: FA
           }, children: /* @__PURE__ */ A(W, { direction: "row", align: "center", justify: "center", gap: "sm", children: L.map((E) => {
-            const I = Y === t.length - 1 ? "top" : "bottom";
-            return E === "detail" && i && (a == null ? void 0 : a(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Detail", position: I, children: /* @__PURE__ */ A(
-              p,
+            const u = p === t.length - 1 ? "top" : "bottom";
+            return E === "detail" && i && (a == null ? void 0 : a(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Detail", position: u, children: /* @__PURE__ */ A(
+              Y,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => i(m.id, m),
-                iconLeft: /* @__PURE__ */ A(y, { name: "DocumentClean", size: "sm", style: { color: "var(--sa-color-gray-600, #7d818a)" } })
+                iconLeft: /* @__PURE__ */ A(y, { name: "DocumentClean", size: "sm", style: { color: "var(--sa-text-subtle, #8c8f97)" } })
               }
-            ) }, "detail") : E === "update" && o && (g == null ? void 0 : g(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Update", position: I, children: /* @__PURE__ */ A(
-              p,
+            ) }, "detail") : E === "update" && o && (g == null ? void 0 : g(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Update", position: u, children: /* @__PURE__ */ A(
+              Y,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => o(m),
-                iconLeft: /* @__PURE__ */ A(y, { name: "Edit1", size: "sm", style: { color: "var(--sa-color-gray-600, #7d818a)" } })
+                iconLeft: /* @__PURE__ */ A(y, { name: "Edit1", size: "sm", style: { color: "var(--sa-text-subtle, #8c8f97)" } })
               }
-            ) }, "update") : E === "delete" && r && (l == null ? void 0 : l(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Delete", position: I, children: /* @__PURE__ */ A(
-              p,
+            ) }, "update") : E === "delete" && r && (l == null ? void 0 : l(m)) !== !1 ? /* @__PURE__ */ A(lA, { label: "Delete", position: u, children: /* @__PURE__ */ A(
+              Y,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => r(m.id, m),
                 iconLeft: /* @__PURE__ */ A(y, { name: "Trash1", size: "sm", style: { color: "var(--sa-color-error-600, #c9184a)" } })
               }
-            ) }, "delete") : E === "custom" ? /* @__PURE__ */ A(wA.Fragment, { children: u == null ? void 0 : u(m) }, "custom") : null;
+            ) }, "delete") : E === "custom" ? /* @__PURE__ */ A(wA.Fragment, { children: I == null ? void 0 : I(m) }, "custom") : null;
           }) }) }) : null
         ]
       },
-      `${m}${Y}`
+      `${m}${p}`
     )) })
   ] }) });
 }, Ai = ({
@@ -3965,12 +3962,12 @@ const Zr = ei(Ai), xA = ({
             vA,
             {
               dataApps: (w = (Q = l.data) == null ? void 0 : Q.organizations) == null ? void 0 : w.map((d) => {
-                var u;
+                var I;
                 return {
                   ...d,
                   id: d.id,
                   isTenant: !0,
-                  applicationKey: ((u = l.data) == null ? void 0 : u.applicationKey) || ""
+                  applicationKey: ((I = l.data) == null ? void 0 : I.applicationKey) || ""
                 };
               }),
               handleSwitch: o,
@@ -4059,7 +4056,7 @@ const Zr = ei(Ai), xA = ({
               name: "GridApplication",
               size: "lg",
               style: {
-                color: "var(--sa-color-gray-1100, #1e1f21)"
+                color: "var(--sa-text-primary, #292a2e)"
               }
             }
           ),
@@ -4499,7 +4496,7 @@ const ai = (e) => {
           ] })
         ] }),
         /* @__PURE__ */ A(
-          p,
+          Y,
           {
             size: "xs",
             secondary: !0,
@@ -4529,7 +4526,7 @@ const ai = (e) => {
       return;
     }
     i.current && i.current.click();
-  }, r = eA("md");
+  }, r = tA("md");
   return /* @__PURE__ */ s(R, { children: [
     /* @__PURE__ */ A(
       "input",
@@ -4760,7 +4757,7 @@ const ai = (e) => {
                           name: d.name,
                           value: d.id,
                           checked: d.isChecked,
-                          onChange: (u) => c.onChecked(u.target.value, d),
+                          onChange: (I) => c.onChecked(I.target.value, d),
                           label: d.name,
                           description: d.description
                         }
@@ -4774,7 +4771,7 @@ const ai = (e) => {
                     name: d.name,
                     value: d.id,
                     checked: d.isChecked,
-                    onChange: (u) => c.onChecked(u.target.value, d),
+                    onChange: (I) => c.onChecked(I.target.value, d),
                     label: d.name,
                     description: d.description
                   }
@@ -5036,9 +5033,9 @@ const ai = (e) => {
   ...i
 }) => {
   const o = VA(), r = (l) => {
-    var a, B, Q, w, d, u;
+    var a, B, Q, w, d, I;
     if (!l) return;
-    const g = i.disabled ? "var(--sa-text-disable, #181a198f)" : e === "secondary" ? "var(--sa-text-subtle, #8c8f97)" : e === "secondary-danger" ? (B = (a = o == null ? void 0 : o.computed) == null ? void 0 : a.red) == null ? void 0 : B[600] : e === "secondary-primary" ? (w = (Q = o == null ? void 0 : o.computed) == null ? void 0 : Q.blue) == null ? void 0 : w[700] : (u = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.gray) == null ? void 0 : u[50];
+    const g = i.disabled ? "var(--sa-text-disable, #181a198f)" : e === "secondary" ? "var(--sa-text-subtle, #8c8f97)" : e === "secondary-danger" ? (B = (a = o == null ? void 0 : o.computed) == null ? void 0 : a.red) == null ? void 0 : B[600] : e === "secondary-primary" ? (w = (Q = o == null ? void 0 : o.computed) == null ? void 0 : Q.blue) == null ? void 0 : w[700] : (I = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.gray) == null ? void 0 : I[50];
     return /* @__PURE__ */ A(y, { name: l, size: t, style: { color: g } });
   }, c = () => {
     var g, a, B, Q;
@@ -5060,7 +5057,7 @@ const ai = (e) => {
     }
   };
   return /* @__PURE__ */ A(
-    p,
+    Y,
     {
       fullWidth: !0,
       disabled: i.disabled,
@@ -5075,7 +5072,7 @@ const ai = (e) => {
       children: c()
     }
   );
-}, Ii = (e) => /* @__PURE__ */ A(
+}, ui = (e) => /* @__PURE__ */ A(
   U.H5,
   {
     props: {
@@ -5083,7 +5080,7 @@ const ai = (e) => {
     },
     children: e.title
   }
-), ui = ({
+), Ii = ({
   size: e = "md",
   direction: t = "vertical",
   requiredTitle: i = "(Required)",
@@ -5223,7 +5220,7 @@ const ge = {
     maxFileSize: a = 2,
     onError: B
   }, Q) => {
-    const w = eA("md"), [d, u] = G(!1), [L, D] = G(null), [K, Z] = G(!1), [q, X] = G({ x: 0, y: 0 }), [M, k] = G(1), [P, x] = G(null);
+    const w = tA("md"), [d, I] = G(!1), [L, D] = G(null), [K, Z] = G(!1), [q, X] = G({ x: 0, y: 0 }), [M, k] = G(1), [P, x] = G(null);
     V(() => {
       t === null && r(null);
     }, [t]);
@@ -5232,7 +5229,7 @@ const ge = {
         x(f);
       },
       []
-    ), tA = (H) => {
+    ), eA = (H) => {
       var nA;
       const f = (nA = H.target.files) == null ? void 0 : nA[0];
       if (!f) return;
@@ -5254,7 +5251,7 @@ const ge = {
         } catch {
           B == null || B("Gagal memproses gambar");
         }
-    }, m = cA(null), Y = () => {
+    }, m = cA(null), p = () => {
       m.current && m.current.click();
     };
     Ue(Q, () => ({
@@ -5263,9 +5260,9 @@ const ge = {
         (H = m.current) == null || H.click();
       }
     }));
-    const E = parseInt(c, 10), I = ge[l];
+    const E = parseInt(c, 10), u = ge[l];
     let N, v;
-    return I >= 1 ? (v = E, N = E * I) : (N = E, v = E / I), /* @__PURE__ */ s(
+    return u >= 1 ? (v = E, N = E * u) : (N = E, v = E / u), /* @__PURE__ */ s(
       C,
       {
         display: "flex",
@@ -5281,11 +5278,11 @@ const ge = {
         style: {
           width: g != null && g.fullWidth ? "100%" : `${N}px`,
           height: g != null && g.fullWidth ? "auto" : `${v}px`,
-          aspectRatio: I,
+          aspectRatio: u,
           flexShrink: 0
         },
-        onMouseEnter: () => u(!0),
-        onMouseLeave: () => u(!1),
+        onMouseEnter: () => I(!0),
+        onMouseLeave: () => I(!1),
         children: [
           o || t ? /* @__PURE__ */ A(
             "img",
@@ -5311,7 +5308,7 @@ const ge = {
                 {
                   name: "Image",
                   style: {
-                    color: "var(--sa-color-gray-500, #8c8f97)",
+                    color: "var(--sa-text-subtle, #8c8f97)",
                     width: Number(c) / 2 < 40 ? Number(c) / 2 : 40,
                     height: Number(c) / 2 < 40 ? Number(c) / 2 : 40
                   }
@@ -5333,7 +5330,7 @@ const ge = {
                 opacity: d ? 1 : 0,
                 transition: "opacity 0.3s ease-in-out"
               },
-              onClick: Y,
+              onClick: p,
               children: [
                 /* @__PURE__ */ A(
                   "input",
@@ -5341,7 +5338,7 @@ const ge = {
                     ref: m,
                     type: "file",
                     accept: "image/*",
-                    onChange: tA,
+                    onChange: eA,
                     disabled: i,
                     style: { display: "none" }
                   }
@@ -5351,7 +5348,7 @@ const ge = {
                     y,
                     {
                       name: "Edit3",
-                      style: { color: "var(--sa-color-gray-50, #ffffff)" }
+                      style: { color: "var(--sa-background-primary, #ffffff)" }
                     }
                   ),
                   /* @__PURE__ */ A(j, { condition: c.toNumber() > 80, children: /* @__PURE__ */ A(
@@ -5429,9 +5426,9 @@ const ge = {
                     )
                   }
                 ) }),
-                /* @__PURE__ */ A(pA, { children: /* @__PURE__ */ s(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
-                  /* @__PURE__ */ A(p, { size: "xs", secondary: !0, onClick: () => Z(!1), children: "Cancel" }),
-                  /* @__PURE__ */ A(p, { size: "xs", primary: !0, onClick: J, children: "Crop" })
+                /* @__PURE__ */ A(YA, { children: /* @__PURE__ */ s(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
+                  /* @__PURE__ */ A(Y, { size: "xs", secondary: !0, onClick: () => Z(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(Y, { size: "xs", primary: !0, onClick: J, children: "Crop" })
                 ] }) })
               ]
             }
@@ -5634,8 +5631,8 @@ const ge = {
   InputTextArea: Qi,
   ToggleForm: hi,
   ActionButton: Di,
-  FormTitle: Ii,
-  InputDate: ui,
+  FormTitle: ui,
+  InputDate: Ii,
   InputImgFile: Mi,
   Custom: mi
 }, yi = ({ customBottom: e }) => {
@@ -5665,7 +5662,7 @@ const ge = {
             transition: "transform 0.2s ease-in-out"
           },
           children: /* @__PURE__ */ A(
-            p,
+            Y,
             {
               secondary: !0,
               size: "xs",
@@ -5689,7 +5686,7 @@ const ge = {
     }
   );
 }, Tr = ({ pageLayout: e, children: t }) => {
-  const i = eA("lg");
+  const i = tA("lg");
   return /* @__PURE__ */ s(
     C,
     {
@@ -5707,7 +5704,6 @@ const ge = {
           {
             show: "desktop",
             variant: "aside",
-            bg: "gray-50",
             position: "fixed",
             top: "top-0",
             bottom: "bottom-0",
@@ -5715,6 +5711,7 @@ const ge = {
             customWidth: 240,
             style: {
               marginTop: 57,
+              backgroundColor: "var(--sa-background-primary-inverse, #f8f8f8)",
               borderColor: "var(--sa-border-subtle, #0b120e24)"
             },
             borderStyle: "border-solid-l",
@@ -5771,7 +5768,7 @@ const ge = {
   }
 ) }), fi = ({ title: e, value: t, icon: i }) => /* @__PURE__ */ s(C, { display: "flex", direction: "column", gap: "sm", children: [
   i ? /* @__PURE__ */ s(C, { display: "flex", direction: "row", align: "center", gap: "xs", children: [
-    /* @__PURE__ */ A(y, { name: i, color: "var(--sa-color-gray-400, #b7b9be)" }),
+    /* @__PURE__ */ A(y, { name: i, color: "var(--sa-text-subtle, #8c8f97)" }),
     /* @__PURE__ */ A(h, { color: "gray-500", variant: "sub-h3", children: e })
   ] }) : /* @__PURE__ */ A(h, { color: "gray-500", variant: "sub-h3", children: e }),
   typeof t == "string" ? /* @__PURE__ */ A(h, { variant: "sub-h3", children: t }) : t
@@ -5937,9 +5934,9 @@ const Wr = ({
   const Q = () => {
     switch (o) {
       case "primary":
-        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(p, { primary: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(p, { primary: !0, onClick: i, children: a || e }) });
+        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(Y, { primary: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(Y, { primary: !0, onClick: i, children: a || e }) });
       case "secondary":
-        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(p, { secondary: !0, iconLeft: c, onClick: i, children: r ? /* @__PURE__ */ A(
+        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(Y, { secondary: !0, iconLeft: c, onClick: i, children: r ? /* @__PURE__ */ A(
           h,
           {
             fontFamily: "Poppins",
@@ -5948,11 +5945,11 @@ const Wr = ({
             style: { color: "var(--sa-background-success, #28ac6e)" },
             children: a || e
           }
-        ) : e }) : /* @__PURE__ */ A(p, { secondary: !0, onClick: i, children: a || e }) });
+        ) : e }) : /* @__PURE__ */ A(Y, { secondary: !0, onClick: i, children: a || e }) });
       case "success":
-        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(p, { success: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(p, { success: !0, onClick: i, children: a || e }) });
+        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(Y, { success: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(Y, { success: !0, onClick: i, children: a || e }) });
       default:
-        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(p, { primary: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(p, { primary: !0, onClick: i, children: a || e }) });
+        return /* @__PURE__ */ A(R, { children: c ? /* @__PURE__ */ A(Y, { primary: !0, iconLeft: c, onClick: i, children: a || e }) : /* @__PURE__ */ A(Y, { primary: !0, onClick: i, children: a || e }) });
     }
   };
   return /* @__PURE__ */ s(
@@ -6197,7 +6194,7 @@ function Si({ width: e, height: t }) {
   ) });
 }
 function Rr({ onClick: e }) {
-  const t = eA("md");
+  const t = tA("md");
   return /* @__PURE__ */ s(
     C,
     {
@@ -6227,7 +6224,7 @@ function Rr({ onClick: e }) {
             children: "Sorry, we couldn't find the page you are looking for"
           }
         ),
-        e && /* @__PURE__ */ A(p, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(Y, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -6469,7 +6466,7 @@ function bi({ width: e, height: t }) {
   ) });
 }
 function Pr({ onClick: e }) {
-  const t = eA("md");
+  const t = tA("md");
   return /* @__PURE__ */ s(
     C,
     {
@@ -6482,7 +6479,7 @@ function Pr({ onClick: e }) {
       children: [
         /* @__PURE__ */ A(bi, { width: t ? 600 : 300 }),
         /* @__PURE__ */ A(h, { fontWeight: "bold", fontSize: t ? "3xl" : "2xl", children: "We Are Sorry ..." }),
-        e && /* @__PURE__ */ A(p, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(Y, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -7177,7 +7174,7 @@ function Fi({ width: e, height: t }) {
   ) });
 }
 function Vr({ onClick: e }) {
-  const t = eA("md");
+  const t = tA("md");
   return /* @__PURE__ */ s(
     C,
     {
@@ -7208,14 +7205,14 @@ function Vr({ onClick: e }) {
             children: "we are trying to fix the problem"
           }
         ),
-        e && /* @__PURE__ */ A(p, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(Y, { size: t ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
 }
 const Xr = (e) => {
   var i, o, r, c, l;
-  const t = eA("md");
+  const t = tA("md");
   return /* @__PURE__ */ s(
     mA,
     {
@@ -7229,9 +7226,9 @@ const Xr = (e) => {
         }
       },
       children: [
-        /* @__PURE__ */ A(IA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(h, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
+        /* @__PURE__ */ A(uA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(h, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
         /* @__PURE__ */ A(yA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(h, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
-        /* @__PURE__ */ A(pA, { children: /* @__PURE__ */ A(
+        /* @__PURE__ */ A(YA, { children: /* @__PURE__ */ A(
           C,
           {
             display: "flex",
@@ -7247,7 +7244,7 @@ const Xr = (e) => {
                 gap: ((l = e.wrapperConfirmBtnProps) == null ? void 0 : l.gap) || "sm",
                 ...e.wrapperConfirmBtnProps,
                 children: [
-                  e.onCancel && /* @__PURE__ */ A(p, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
+                  e.onCancel && /* @__PURE__ */ A(Y, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
                   /* @__PURE__ */ A(
                     C,
                     {
@@ -7256,7 +7253,7 @@ const Xr = (e) => {
                         textWrap: "nowrap"
                       },
                       children: /* @__PURE__ */ A(
-                        p,
+                        Y,
                         {
                           ...e.buttonConfirmProps,
                           onClick: e.onConfirm,
@@ -7291,7 +7288,7 @@ const Xr = (e) => {
     action: Q,
     actionContainer: w,
     containerProps: d,
-    bodyProps: u,
+    bodyProps: I,
     headerProps: L = { borderBottom: !0 },
     footerProps: D = { borderTop: !0 },
     variantTag: K = "info"
@@ -7315,7 +7312,7 @@ const Xr = (e) => {
         direction: "row",
         justify: "space-between",
         align: "flex-start",
-        gap: "lg",
+        gap: "md",
         children: [
           /* @__PURE__ */ A(C, { children: a ? M() : null }),
           /* @__PURE__ */ A(C, { ...w, children: Q ?? null })
@@ -7345,11 +7342,11 @@ const Xr = (e) => {
             C,
             {
               padding: "spacing-0",
-              ...u,
+              ...I,
               style: {
                 flex: 1,
                 overflow: "auto",
-                ...(u == null ? void 0 : u.style) ?? {}
+                ...(I == null ? void 0 : I.style) ?? {}
               },
               children: e
             }
@@ -7394,7 +7391,7 @@ function Ao({
   }, [o.pathname]);
 }
 const eo = () => {
-  const [e, t] = KA(), i = NA(e.toString()), o = ue(), r = fA(), c = o.id;
+  const [e, t] = KA(), i = NA(e.toString()), o = Ie(), r = fA(), c = o.id;
   return {
     // query params
     setSearchParams: t,
@@ -7419,14 +7416,14 @@ function to(e) {
     var a, B;
     const c = ((B = (a = t == null ? void 0 : t.access) == null ? void 0 : a.role) == null ? void 0 : B.code) ?? "", l = Object.keys(e.role).reduce(
       (Q, w) => {
-        const d = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
+        const d = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
         return { ...Q, [d]: !1 };
       },
       {}
     );
     return {
       ...Object.keys(e.role).reduce((Q, w) => {
-        const d = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
+        const d = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
         return {
           ...Q,
           [d]: c === e.role[w]
@@ -7439,7 +7436,7 @@ function to(e) {
 }
 export {
   dr as ActionMenu,
-  Yr as AdvanceFilter,
+  pr as AdvanceFilter,
   vt as AdvanceFilterBar,
   or as App,
   $e as AppComponent,
@@ -7485,15 +7482,15 @@ export {
   vr as VerticalField,
   cr as clearModuleSelection,
   wr as createInitialFromUserName,
-  ur as cssVars,
+  Ir as cssVars,
   Mr as formHasChanged,
-  Ir as formatDate,
+  ur as formatDate,
   GA as formatDateToIndonesian,
   hr as formatRupiah,
   zr as getDateFilterValue,
   Nr as getDateRangeFilterValue,
   Dr as getInitials,
-  pr as getValueDropdownMultipleFilter,
+  Yr as getValueDropdownMultipleFilter,
   jr as getValueRadioFilter,
   Tt as getValueSearch,
   qA as getValuesFilter,