@starasia/admin 1.2.6 → 1.2.8

package/dist/index.es.js

@@ -35,7 +35,7 @@ export * from "@starasia/theme";
 export * from "@starasia/toast";
 import { Toggle as ee } from "@starasia/toggle";
 export * from "@starasia/toggle";
-import { Tooltip as eA } from "@starasia/tooltip";
+import { Tooltip as iA } from "@starasia/tooltip";
 export * from "@starasia/tooltip";
 import { Checkbox as FA } from "@starasia/checkbox";
 export * from "@starasia/checkbox";
@@ -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 p, useContext as me, memo as _, useRef as iA, useEffect as v, 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 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 "@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] = p(
+  const [i, r] = b(
     (e == null ? void 0 : e.initialUserData) || null
   );
   return {
@@ -288,8 +288,8 @@ function Zt({
   sidebarHeaderContent: c,
   showModuleSwitcher: s = !0
 }) {
-  const [C] = uA(), Q = C.get("embed") === "true", w = be(), B = te(), u = SA(), D = !V("md"), [G, O] = p(!1), [F, U] = p(!1), [Y, k] = p(!1), [Z, H] = p(/* @__PURE__ */ new Set()), [P, X] = p(!1), [q, E] = p(!1), [f, M] = p(null), h = iA(null), N = iA(null);
-  v(() => {
+  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);
+  R(() => {
     const I = h.current;
     if (!I) return;
     const y = () => {
@@ -317,44 +317,44 @@ function Zt({
       );
       I && I.scrollIntoView({ block: "center", behavior: "instant" });
     }));
-  }, [w.menus]), v(() => {
+  }, [w.menus]), R(() => {
     gA = !0, x();
-    const I = setTimeout(x, 0), y = setTimeout(x, 50), S = setTimeout(x, 100), R = setTimeout(x, 200), AA = setTimeout(() => {
+    const I = setTimeout(x, 0), y = setTimeout(x, 50), S = setTimeout(x, 100), v = setTimeout(x, 200), eA = setTimeout(() => {
       gA = !1;
     }, 300);
     return () => {
-      clearTimeout(I), clearTimeout(y), clearTimeout(S), clearTimeout(R), clearTimeout(AA);
+      clearTimeout(I), clearTimeout(y), clearTimeout(S), clearTimeout(v), clearTimeout(eA);
     };
-  }, [u.pathname]), v(() => {
+  }, [u.pathname]), R(() => {
     N.current && (N.current.scrollTop = 0);
-  }, [u.pathname]), v(() => {
+  }, [u.pathname]), R(() => {
     D && k(!1);
-  }, [u.pathname, D]), v(() => {
+  }, [u.pathname, D]), R(() => {
     D && U(!0);
   }, [D]);
   const T = () => {
-    O(!0);
+    Y(!0);
   }, tA = () => {
-    O(!1);
+    Y(!1);
   }, wA = () => {
-    O(!1), t();
+    Y(!1), t();
   }, MA = w.menus.flatMap(
     (I) => I.items.flatMap((y) => {
       const S = [y.to];
-      return y.children && S.push(...y.children.map((R) => R.to)), S;
+      return y.children && S.push(...y.children.map((v) => v.to)), S;
     })
   ), CA = (I) => {
     if (!u.pathname.startsWith(I)) return !1;
-    const y = MA.filter((S) => u.pathname.startsWith(S)).sort((S, R) => R.length - S.length)[0];
+    const y = MA.filter((S) => u.pathname.startsWith(S)).sort((S, v) => v.length - S.length)[0];
     return I === y;
   };
-  v(() => {
+  R(() => {
     w.menus.forEach((I) => {
       I.items.forEach((y) => {
         var S;
-        (S = y.children) != null && S.some((R) => u.pathname.startsWith(R.to)) && H((R) => {
-          const AA = new Set(R);
-          return AA.add(y.id), AA;
+        (S = y.children) != null && S.some((v) => u.pathname.startsWith(v.to)) && H((v) => {
+          const eA = new Set(v);
+          return eA.add(y.id), eA;
         });
       });
     });
@@ -365,11 +365,11 @@ function Zt({
       return S.has(I) ? S.delete(I) : S.add(I), S;
     });
   };
-  v(() => {
+  R(() => {
     if (w.menus.length === 0) return;
     const I = localStorage.getItem("moduleSwitcherGroupId");
     if (I !== null) {
-      const y = Number(I), S = w.menus.some((R) => R.id === y);
+      const y = Number(I), S = w.menus.some((v) => v.id === y);
       M(S ? y : null);
     }
   }, [w.menus]);
@@ -379,8 +379,8 @@ function Zt({
       localStorage.removeItem("moduleSwitcherGroupId");
     else {
       localStorage.setItem("moduleSwitcherGroupId", String(I));
-      const S = w.menus.find((AA) => AA.id === I), R = (y = S == null ? void 0 : S.items[0]) == null ? void 0 : y.to;
-      R && B(R);
+      const S = w.menus.find((eA) => eA.id === I), v = (y = S == null ? void 0 : S.items[0]) == null ? void 0 : y.to;
+      v && B(v);
     }
   }, bA = oA(() => {
     if (f !== null)
@@ -396,9 +396,9 @@ function Zt({
     () => bA.filter((I) => I.parentGroupId !== void 0 || I.id === 18).flatMap((I) => I.items),
     [bA]
   );
-  return v(() => {
+  return R(() => {
     X(!1);
-  }, [u.pathname]), v(() => {
+  }, [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: [
     /* @__PURE__ */ g(
@@ -419,8 +419,8 @@ function Zt({
                 inset: 0,
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
                 zIndex: 40,
-                opacity: Y ? 0.5 : 0,
-                pointerEvents: Y ? "auto" : "none",
+                opacity: p ? 0.5 : 0,
+                pointerEvents: p ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
               onClick: () => k(!1)
@@ -435,7 +435,7 @@ function Zt({
                 ...D && {
                   inset: 0,
                   zIndex: 50,
-                  transform: Y ? "translateX(0)" : "translateX(-100%)"
+                  transform: p ? "translateX(0)" : "translateX(-100%)"
                 },
                 backgroundColor: "white",
                 borderRight: "1px solid #e5e7eb",
@@ -479,7 +479,7 @@ function Zt({
                                 }
                               }
                             ),
-                            (!F || Y) && /* @__PURE__ */ A(
+                            (!F || p) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
@@ -645,8 +645,8 @@ function Zt({
                         }
                       ),
                       /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem" }, children: I.items.map((y) => {
-                        const S = y.children && y.children.length > 0, R = Z.has(y.id), AA = S ? y.children.some(($) => CA($.to)) : CA(y.to);
-                        return /* @__PURE__ */ g("div", { "data-menu-active": AA || void 0, children: [
+                        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(
                             "button",
                             {
@@ -665,17 +665,17 @@ function Zt({
                                 borderRadius: "0.5rem",
                                 textAlign: "left",
                                 border: "none",
-                                backgroundColor: AA ? "#dbeafe" : "transparent",
-                                color: AA ? "#1e40af" : "#374151",
+                                backgroundColor: eA ? "#dbeafe" : "transparent",
+                                color: eA ? "#1e40af" : "#374151",
                                 transition: "all 0.2s",
                                 cursor: "pointer"
                               },
                               title: F && !D ? y.title : void 0,
                               onMouseEnter: ($) => {
-                                AA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
+                                eA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
                               onMouseLeave: ($) => {
-                                AA || ($.currentTarget.style.backgroundColor = "transparent");
+                                eA || ($.currentTarget.style.backgroundColor = "transparent");
                               },
                               children: [
                                 /* @__PURE__ */ A(m, { name: y.icon, size: "sm", style: { flexShrink: 0 } }),
@@ -701,7 +701,7 @@ function Zt({
                                         height: "1rem",
                                         flexShrink: 0,
                                         transition: "transform 0.2s",
-                                        transform: R ? "rotate(180deg)" : "rotate(0deg)"
+                                        transform: v ? "rotate(180deg)" : "rotate(0deg)"
                                       },
                                       fill: "none",
                                       stroke: "currentColor",
@@ -730,9 +730,9 @@ function Zt({
                                 borderLeft: "1px solid #e5e7eb",
                                 overflow: "hidden",
                                 transition: "all 0.3s ease-in-out",
-                                maxHeight: R ? `${y.children.length * 44}px` : "0px",
-                                opacity: R ? 1 : 0,
-                                marginTop: R ? "0.25rem" : "0px"
+                                maxHeight: v ? `${y.children.length * 44}px` : "0px",
+                                opacity: v ? 1 : 0,
+                                marginTop: v ? "0.25rem" : "0px"
                               },
                               children: y.children.map(($) => /* @__PURE__ */ g(
                                 "button",
@@ -1089,7 +1089,7 @@ function Zt({
         onSelect: se
       }
     ),
-    /* @__PURE__ */ g(dA, { isShow: G, onHide: tA, children: [
+    /* @__PURE__ */ g(dA, { isShow: O, 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: [
@@ -1363,14 +1363,14 @@ const Ht = _(
     }
     Q(-1, { replace: !0 });
   }, u = () => n ? ie(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
-    ({ title: O, icon: F, buttonProps: U, onClick: Y }, k) => !O && !F ? null : /* @__PURE__ */ A(
+    ({ title: Y, icon: F, buttonProps: U, onClick: p }, k) => !Y && !F ? null : /* @__PURE__ */ A(
       L,
       {
         fullWidth: !C,
         iconLeft: F ? /* @__PURE__ */ A(m, { name: F, size: "md" }) : void 0,
-        onClick: Y,
+        onClick: p,
         ...U,
-        children: O
+        children: Y
       },
       `action-${k}`
     )
@@ -1439,17 +1439,17 @@ const Ht = _(
         align: "center",
         children: [
           typeof i == "string" ? /* @__PURE__ */ g(a, { direction: "row", gap: "lg", align: "center", children: [
-            /* @__PURE__ */ A(d, { fontSize: "4xl", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
+            /* @__PURE__ */ A(d, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
             r && /* @__PURE__ */ A(XA, { border: !0, size: "lg", text: r, ...l })
           ] }) : i,
           u()
         ]
       }
     )
-  ] }), G = () => o;
+  ] }), O = () => o;
   return /* @__PURE__ */ g(a, { gap: "lg", variant: "main", ...c, children: [
     t && D(),
-    G()
+    O()
   ] });
 }, Tt = _(Ke), Ze = {
   icon: "Cross",
@@ -1566,18 +1566,18 @@ const Ht = _(
     headerProps: u = { borderBottom: !0 },
     variantTag: j = "info"
   }) => {
-    const D = V("lg"), [G, O] = uA(), F = G.get(s), U = DA(G.toString()), Y = JA(
+    const D = V("lg"), [O, Y] = uA(), F = O.get(s), U = DA(O.toString()), p = JA(
       ({ target: { value: P } }) => {
-        c && c(P), s && O({ ...U, [s]: P });
+        c && c(P), s && Y({ ...U, [s]: P });
       },
-      [s, c, O, U]
+      [s, c, Y, U]
     ), k = () => /* @__PURE__ */ A(
       IA,
       {
         placeholder: C,
         highlightPlaceholder: Q,
         leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-        onChange: Y,
+        onChange: p,
         style: { width: "100%" },
         value: F || ""
       }
@@ -1618,7 +1618,7 @@ const Ht = _(
     );
   }
 ), qe = "#E6E9FB", Te = ({ children: e, onClick: i }) => {
-  const [r, o] = p("");
+  const [r, o] = b("");
   return /* @__PURE__ */ A(
     aA,
     {
@@ -1797,11 +1797,11 @@ const Ht = _(
       withSearchParam: j,
       // disabled,
       rangedDate: D,
-      disabled: G,
-      inputTextType: O = "text",
+      disabled: O,
+      inputTextType: Y = "text",
       min: F,
       max: U
-    }, Y) => {
+    }, p) => {
       const k = t == null ? void 0 : t.length;
       let Z;
       const H = () => {
@@ -1828,7 +1828,7 @@ const Ht = _(
                 value: Pe(w || Z, D),
                 onChange: (q) => o == null ? void 0 : o({ value: q, name: c, type: i }),
                 rangedDate: D,
-                ref: Y
+                ref: p
               }
             );
           case "select-button":
@@ -1848,11 +1848,11 @@ const Ht = _(
                 onChange: ({ target: { value: q } }) => o == null ? void 0 : o({ value: q, name: c, type: i }),
                 value: w || Z,
                 placeholder: n,
-                disabled: G,
-                type: O,
+                disabled: O,
+                type: Y,
                 name: c,
-                ...O === "number" && { min: F, max: U },
-                ...(!O || O === "text") && {
+                ...Y === "number" && { min: F, max: U },
+                ...(!Y || Y === "text") && {
                   minLength: F,
                   maxLength: U
                 }
@@ -1865,7 +1865,7 @@ const Ht = _(
       return k ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((q, E) => /* @__PURE__ */ A(
         le,
         {
-          ref: Y,
+          ref: p,
           onChange: o,
           ...q,
           withSearchParam: j
@@ -1888,7 +1888,7 @@ const Ht = _(
     onHide: n,
     resetting: l
   }) => {
-    const [c, s] = p(!1), C = iA(null), Q = ({ value: B, name: u, type: j }) => {
+    const [c, s] = b(!1), C = AA(null), Q = ({ value: B, name: u, type: j }) => {
       if (o)
         switch (j) {
           case "date":
@@ -1904,7 +1904,7 @@ const Ht = _(
     }, w = () => {
       s(!0), t == null || t(!0);
     };
-    return v(() => {
+    return R(() => {
       (c || l) && (s(!1), t == null || t(!1));
     }, [c, l]), /* @__PURE__ */ A(W, { children: /* @__PURE__ */ g(
       LA,
@@ -2143,13 +2143,13 @@ const gr = (e) => {
   }), r;
 }, ar = (e) => {
   var U;
-  const i = oA(() => ({ ...ri, ...e }), [e]), [r, o] = p(!1), [t, n] = p(!1), [l] = p(void 0), c = () => n(!0), s = () => n(!1), C = t ? s : c, Q = () => {
+  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 = () => {
     o(!0);
-  }, w = (Y) => {
-    o(Y);
-  }, B = l ? oi(l) : void 0, u = !!(B && ((U = Object.values(B)) == null ? void 0 : U.length) > 0), j = () => B ? Object.keys(B).map((Y) => {
+  }, 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) => {
     var q, E, f;
-    const k = KA(Y, i.fields), Z = [];
+    const k = KA(p, 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) => {
@@ -2162,20 +2162,20 @@ const gr = (e) => {
     })), k == null ? void 0 : k.type) {
       case "dropdown":
       case "select-button":
-        const M = B[Y] && typeof B[Y] != "string" ? B[Y] : [], h = (M == null ? void 0 : M.length) > 0 ? (f = M.map((x) => x.label)) == null ? void 0 : f.join(",") : B[Y];
+        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}`;
         break;
       case "date":
         if (k.rangedDate) {
-          const x = B[Y], 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[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;
           H = `${k == null ? void 0 : k.label}: ${T || ""} ~ ${tA || ""}`;
           break;
         }
-        const N = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[Y])) : B[Y];
+        const N = (k == null ? void 0 : k.dateValueFormatText) === "indonesian" ? yA(new Date(B[p])) : B[p];
         H = `${k == null ? void 0 : k.label}: ${N || ""}`;
         break;
       default:
-        H = `${k == null ? void 0 : k.label}: ${B[Y]}`;
+        H = `${k == null ? void 0 : k.label}: ${B[p]}`;
         break;
     }
     if (P && Z.length > 0) {
@@ -2190,26 +2190,26 @@ const gr = (e) => {
     return X && (H = ""), {
       name: k == null ? void 0 : k.name,
       label: k == null ? void 0 : k.label,
-      value: B[Y],
+      value: B[p],
       valueText: H,
       children: Z
     };
-  }) : [], D = (Y) => {
-    Y != null && Y.name && o(!0);
-  }, G = j();
+  }) : [], D = (p) => {
+    p != null && p.name && o(!0);
+  }, O = j();
   return {
     value: B,
     open: c,
     close: s,
     toggle: C,
     reset: Q,
-    chips: G,
+    chips: O,
     toggleConfig: {
       active: u,
       onClick: C
     },
     chipsConfig: {
-      items: G,
+      items: O,
       onClose: D
     },
     config: {
@@ -2364,7 +2364,7 @@ const gr = (e) => {
   pageKey: o,
   filters: t
 }) => {
-  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [s, C] = p({}), Q = () => {
+  const { searchParams: n, setSearchParams: l, searchQueries: c } = qA(), [s, C] = b({}), Q = () => {
     n.delete(r || "filter"), l(n);
   }, w = (B, u) => {
     switch (B.type) {
@@ -2420,8 +2420,8 @@ const gr = (e) => {
   titleSearchLabel: j = "Work Order",
   withTitleLabels: D = !1
 }) => {
-  const G = (B == null ? void 0 : B.isShowLabel) ?? !0, [O, F] = p(!1), [U, Y] = p(0), k = () => {
-    Y(U + 1);
+  const O = (B == null ? void 0 : B.isShowLabel) ?? !0, [Y, F] = b(!1), [U, p] = b(0), k = () => {
+    p(U + 1);
   }, { searchParams: Z, setSearchParams: H, getQueryParam: P } = qA(), X = DA(Z.toString()), q = P(c), f = !!(q && !(() => {
     if (q)
       try {
@@ -2468,7 +2468,7 @@ const gr = (e) => {
             ),
             fullWidth: !M,
             onClick: () => F(!0),
-            children: G ? "Filter" : void 0
+            children: O ? "Filter" : void 0
           }
         ),
         l && /* @__PURE__ */ g(
@@ -2581,7 +2581,7 @@ const gr = (e) => {
         /* @__PURE__ */ A(
           yi,
           {
-            isOpen: O,
+            isOpen: Y,
             onClose: () => F(!1),
             filterKey: c,
             filters: w,
@@ -2592,8 +2592,8 @@ const gr = (e) => {
     }
   );
 }, fi = ({ children: e, borderRadius: i }) => {
-  const r = iA(null), [o, t] = p("100vh");
-  return v(() => {
+  const r = AA(null), [o, t] = b("100vh");
+  return R(() => {
     const n = () => {
       if (r.current) {
         const l = r.current.getBoundingClientRect().top;
@@ -2777,30 +2777,30 @@ const gr = (e) => {
     }
   );
 }, Gi = ({ filter: e, columnTitle: i }) => {
-  const [r, o] = p(!1), t = iA(null), n = iA(null), l = iA(null), [c, s] = p(""), [C, Q] = p({ top: 0, left: 0 }), w = e.selectedValues, B = oA(() => c ? e.options.filter(
+  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())
   ) : e.options, [e.options, c]);
-  v(() => {
+  R(() => {
     if (r && n.current) {
-      const D = n.current.getBoundingClientRect(), G = 280, O = {
+      const D = n.current.getBoundingClientRect(), O = 280, Y = {
         top: D.bottom + 8
       };
-      e.position === "left" || D.left + G > window.innerWidth ? O.right = window.innerWidth - D.right : O.left = D.left, Q(O);
+      e.position === "left" || D.left + O > window.innerWidth ? Y.right = window.innerWidth - D.right : Y.left = D.left, Q(Y);
     }
-  }, [r, e.position]), v(() => {
+  }, [r, e.position]), R(() => {
     r && l.current ? setTimeout(() => {
       var D;
       return (D = l.current) == null ? void 0 : D.focus();
     }, 50) : s("");
-  }, [r]), v(() => {
-    const D = (G) => {
-      t.current && !t.current.contains(G.target) && n.current && !n.current.contains(G.target) && o(!1);
+  }, [r]), R(() => {
+    const D = (O) => {
+      t.current && !t.current.contains(O.target) && n.current && !n.current.contains(O.target) && o(!1);
     };
     return r && document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
   }, [r]);
   const u = (D) => {
-    const G = w.includes(D) ? w.filter((O) => O !== D) : [...w, D];
-    e.onFilterChange(G);
+    const O = w.includes(D) ? w.filter((Y) => Y !== D) : [...w, D];
+    e.onFilterChange(O);
   }, j = () => e.onFilterChange([]);
   return /* @__PURE__ */ g(a, { style: { position: "relative" }, children: [
     /* @__PURE__ */ A(
@@ -2814,8 +2814,8 @@ const gr = (e) => {
           cursor: "pointer"
         },
         onClick: (D) => {
-          var G;
-          D.stopPropagation(), r || (G = e.onOpen) == null || G.call(e), o((O) => !O);
+          var O;
+          D.stopPropagation(), r || (O = e.onOpen) == null || O.call(e), o((Y) => !Y);
         },
         children: /* @__PURE__ */ A(
           m,
@@ -2965,14 +2965,14 @@ const gr = (e) => {
                     transition: "all 0.2s ease",
                     backgroundColor: w.includes(D.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
                   },
-                  onClick: (G) => {
-                    G.stopPropagation(), u(D.value);
+                  onClick: (O) => {
+                    O.stopPropagation(), u(D.value);
                   },
-                  onMouseEnter: (G) => {
-                    w.includes(D.value) || (G.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), G.currentTarget.style.transform = "translateX(2px)";
+                  onMouseEnter: (O) => {
+                    w.includes(D.value) || (O.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), O.currentTarget.style.transform = "translateX(2px)";
                   },
-                  onMouseLeave: (G) => {
-                    G.currentTarget.style.backgroundColor = w.includes(D.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", G.currentTarget.style.transform = "translateX(0)";
+                  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)";
                   },
                   children: [
                     /* @__PURE__ */ A(
@@ -3102,17 +3102,17 @@ const gr = (e) => {
   actionsOrder: j = ["detail", "update", "delete", "custom"],
   customEmptyState: D
 }) => {
-  const O = [r, o, t].filter((E) => E !== void 0).length, F = !!u, U = O === 3 ? F ? "178px" : "140px" : O === 2 ? F ? "140px" : "102px" : O === 1 ? F ? "112px" : "74px" : F ? "74px" : "", Y = (E, f) => {
+  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) => {
     if (!f) return E;
     if (typeof f == "function") return f(E);
     if (typeof f == "string") return E[f];
-  }, [k, Z] = p(!1);
-  v(() => {
+  }, [k, Z] = b(!1);
+  R(() => {
     if (!(Q != null && Q.current)) return;
     const E = Q.current;
     Z(E.scrollHeight > E.clientHeight);
   }, [i, Q]);
-  const H = iA(null), [P, X] = p([]);
+  const H = AA(null), [P, X] = b([]);
   zA(() => {
     if (!w || !H.current) {
       X([]);
@@ -3250,7 +3250,7 @@ const gr = (e) => {
         },
         children: [
           e.map((M, h) => {
-            const N = M.render ? M.render(E, f, i) : Y(E, M.accessor), x = w > 0 && h < w, T = P[h] ?? 0;
+            const N = M.render ? M.render(E, f, i) : p(E, M.accessor), x = w > 0 && h < w, T = P[h] ?? 0;
             return /* @__PURE__ */ A(
               sA,
               {
@@ -3289,7 +3289,7 @@ const gr = (e) => {
             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(eA, { label: "Detail", position: h, children: /* @__PURE__ */ A(
+            return M === "detail" && r && (s == null ? void 0 : s(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Detail", position: h, children: /* @__PURE__ */ A(
               L,
               {
                 size: "xs",
@@ -3297,7 +3297,7 @@ const gr = (e) => {
                 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(eA, { label: "Update", position: h, children: /* @__PURE__ */ A(
+            ) }, "detail") : M === "update" && o && (c == null ? void 0 : c(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Update", position: h, children: /* @__PURE__ */ A(
               L,
               {
                 size: "xs",
@@ -3305,7 +3305,7 @@ const gr = (e) => {
                 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(eA, { label: "Delete", position: h, children: /* @__PURE__ */ A(
+            ) }, "update") : M === "delete" && t && (l == null ? void 0 : l(E)) !== !1 ? /* @__PURE__ */ A(iA, { label: "Delete", position: h, children: /* @__PURE__ */ A(
               L,
               {
                 size: "xs",
@@ -3327,9 +3327,9 @@ const gr = (e) => {
   footerProps: o
 }) => {
   var w;
-  const t = iA(null), [n, l] = p(
+  const t = AA(null), [n, l] = b(
     (i == null ? void 0 : i.defaultFrozenCount) ?? 0
-  ), c = (r == null ? void 0 : r.show) ?? !0, s = iA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
+  ), 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);
   return /* @__PURE__ */ g(fi, { ...e, children: [
@@ -3375,7 +3375,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))), b = ({
+}) => ye.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), G = ({
   condition: e,
   fallback: i,
   children: r,
@@ -3427,7 +3427,7 @@ const Dr = ji(pi), kA = ({
       ),
       children: [
         /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!e.role && !e.isTenant || t,
             fallback: /* @__PURE__ */ A(K.Body1, { children: e.name }),
@@ -3445,7 +3445,7 @@ const Dr = ji(pi), kA = ({
             ] })
           }
         ),
-        /* @__PURE__ */ A(b, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
+        /* @__PURE__ */ A(G, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
       ]
     }
   );
@@ -3526,7 +3526,7 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        b,
+        G,
         {
           condition: !!(o != null && o.length),
           isLoading: c,
@@ -3671,7 +3671,7 @@ const Dr = ji(pi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        b,
+        G,
         {
           condition: !!((C = (s = l.data) == null ? void 0 : s.organizations) != null && C.length),
           children: /* @__PURE__ */ A(
@@ -3746,7 +3746,7 @@ const Dr = ji(pi), kA = ({
   variant: l = "single-api",
   isLoading: c
 }) => {
-  const [s, C] = p(!1), [Q, w] = p("");
+  const [s, C] = b(!1), [Q, w] = b("");
   return /* @__PURE__ */ g(W, { children: [
     /* @__PURE__ */ g(
       a,
@@ -3796,7 +3796,7 @@ const Dr = ji(pi), kA = ({
       }
     ),
     /* @__PURE__ */ A(
-      b,
+      G,
       {
         condition: l === "single-api",
         fallback: /* @__PURE__ */ A(
@@ -3903,7 +3903,7 @@ const Dr = ji(pi), kA = ({
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -3928,8 +3928,8 @@ 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(b, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -3948,7 +3948,7 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -3988,7 +3988,7 @@ const Dr = ji(pi), kA = ({
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4013,8 +4013,8 @@ 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(b, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4033,7 +4033,7 @@ const Dr = ji(pi), kA = ({
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4064,7 +4064,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] = p(!1), o = (s) => {
+  const [i, r] = b(!1), o = (s) => {
     s.preventDefault(), s.stopPropagation();
   }, t = (s) => {
     s.preventDefault(), s.stopPropagation(), s.dataTransfer && e.handleOnFileChange(s.dataTransfer.files.item(0));
@@ -4236,7 +4236,7 @@ const Ui = (e) => {
   );
 }, Wi = ({ status: e = "default", ...i }) => {
   var n;
-  const r = iA(null), o = () => {
+  const r = AA(null), o = () => {
     if (i.defaultUrl) {
       window.open(i.defaultUrl);
       return;
@@ -4313,7 +4313,7 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4338,8 +4338,8 @@ 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(b, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4358,7 +4358,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4395,7 +4395,7 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t,
             fallback: /* @__PURE__ */ g(
@@ -4420,8 +4420,8 @@ 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(b, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { 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,
@@ -4440,7 +4440,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
@@ -4514,7 +4514,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(b, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
+        /* @__PURE__ */ A(G, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
           a,
           {
             direction: "column",
@@ -4522,7 +4522,7 @@ const Ui = (e) => {
             fullWidth: r,
             children: [
               o.title && /* @__PURE__ */ A(z, { children: o.title }),
-              /* @__PURE__ */ A(b, { condition: !!o.description, children: /* @__PURE__ */ A(d, { color: "gray-500", children: o.description }) })
+              /* @__PURE__ */ A(G, { condition: !!o.description, children: /* @__PURE__ */ A(d, { color: "gray-500", children: o.description }) })
             ]
           }
         ) }),
@@ -4595,7 +4595,7 @@ const Ui = (e) => {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4620,8 +4620,8 @@ 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(b, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4640,7 +4640,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4679,7 +4679,7 @@ const Ui = (e) => {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: o,
             fallback: /* @__PURE__ */ g(
@@ -4704,8 +4704,8 @@ 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(b, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = n.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = n.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4724,7 +4724,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
+                  /* @__PURE__ */ A(G, { condition: !!n.titleDescription, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.titleDescription }) })
                 ]
               }
             )
@@ -4813,7 +4813,7 @@ const Ui = (e) => {
       onClick: t.onClickContainer,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -4838,8 +4838,8 @@ 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(b, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (s = t.tooltip) == null ? void 0 : s.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4858,7 +4858,7 @@ const Ui = (e) => {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -4936,8 +4936,8 @@ const VA = {
     maxFileSize: s = 2,
     onError: C
   }, Q) => {
-    const w = V("md"), [B, u] = p(!1), [j, D] = p(null), [G, O] = p(!1), [F, U] = p({ x: 0, y: 0 }), [Y, k] = p(1), [Z, H] = p(null);
-    v(() => {
+    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);
+    R(() => {
       i === null && t(null);
     }, [i]);
     const P = JA(
@@ -4951,7 +4951,7 @@ const VA = {
       if (!tA) return;
       const wA = new FileReader();
       wA.onload = () => {
-        D(wA.result), O(!0);
+        D(wA.result), Y(!0);
       }, wA.readAsDataURL(tA);
     }, q = async () => {
       if (!(!j || !Z))
@@ -4963,11 +4963,11 @@ const VA = {
           }
           e == null || e(T);
           const tA = URL.createObjectURL(T);
-          t(tA, T), O(!1);
+          t(tA, T), Y(!1);
         } catch {
           C == null || C("Gagal memproses gambar");
         }
-    }, E = iA(null), f = () => {
+    }, E = AA(null), f = () => {
       E.current && E.current.click();
     };
     xe(Q, () => ({
@@ -5067,7 +5067,7 @@ const VA = {
                       style: { color: "var(--starasia-ui-color-gray-50)" }
                     }
                   ),
-                  /* @__PURE__ */ A(b, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
+                  /* @__PURE__ */ A(G, { condition: n.toNumber() > 80, children: /* @__PURE__ */ A(
                     d,
                     {
                       color: "gray-50",
@@ -5110,8 +5110,8 @@ const VA = {
           /* @__PURE__ */ g(
             dA,
             {
-              isShow: G,
-              onHide: () => O(!1),
+              isShow: O,
+              onHide: () => Y(!1),
               style: {
                 minWidth: w ? l === "1:1" ? "20rem" : N * 2 : "100%"
               },
@@ -5130,7 +5130,7 @@ const VA = {
                       {
                         image: j,
                         crop: F,
-                        zoom: Y,
+                        zoom: p,
                         aspect: l ? VA[l] : void 0,
                         onCropChange: U,
                         onZoomChange: k,
@@ -5143,7 +5143,7 @@ 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: () => O(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(L, { size: "xs", secondary: !0, onClick: () => Y(!1), children: "Cancel" }),
                   /* @__PURE__ */ A(L, { size: "xs", primary: !0, onClick: q, children: "Crop" })
                 ] }) })
               ]
@@ -5171,7 +5171,7 @@ const VA = {
       ...n.containerProps,
       children: [
         n.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t,
             fallback: /* @__PURE__ */ g(
@@ -5196,8 +5196,8 @@ 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(b, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { 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,
@@ -5216,7 +5216,7 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!n.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description }) })
                 ]
               }
             )
@@ -5246,7 +5246,7 @@ const VA = {
       ...t.containerProps,
       children: [
         t.title && /* @__PURE__ */ A(
-          b,
+          G,
           {
             condition: !!t.inputProps.required,
             fallback: /* @__PURE__ */ g(
@@ -5271,8 +5271,8 @@ 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(b, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
-                      eA,
+                    /* @__PURE__ */ A(G, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
+                      iA,
                       {
                         label: (c = t.tooltip) == null ? void 0 : c.label,
                         arrowPosition: (s = t.tooltip) == null ? void 0 : s.arrowPosition,
@@ -5291,7 +5291,7 @@ const VA = {
                       }
                     ) })
                   ] }),
-                  /* @__PURE__ */ A(b, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
+                  /* @__PURE__ */ A(G, { condition: !!t.description, children: /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description }) })
                 ]
               }
             )
@@ -5310,8 +5310,8 @@ const VA = {
   disabled: n = !1
 }) => {
   var Q;
-  const [l, c] = p([]);
-  v(() => {
+  const [l, c] = b([]);
+  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(() => {
@@ -5352,12 +5352,12 @@ const VA = {
   InputImgFile: tt,
   Custom: rt
 }, ot = ({ customBottom: e }) => {
-  const [i, r] = p(!1), o = () => {
+  const [i, r] = b(!1), o = () => {
     window.scrollY > window.screenY ? r(!0) : r(!1);
   }, t = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
-  return v(() => (window.addEventListener("scroll", o), () => {
+  return R(() => (window.addEventListener("scroll", o), () => {
     window.removeEventListener("scroll", o);
   }), []), /* @__PURE__ */ A(
     a,
@@ -6939,7 +6939,41 @@ const Lr = (e) => {
     },
     e.key
   );
-}, br = (e) => {
+}, br = _(
+  ({
+    children: e,
+    height: i,
+    minHeight: r,
+    customHeight: o,
+    paddingInline: t = "spacing-24"
+  }) => {
+    const n = AA(null), [l, c] = b("100vh");
+    return R(() => {
+      const s = () => {
+        if (n.current) {
+          const C = n.current.getBoundingClientRect().top;
+          c(`calc(100vh - ${C + 16}px)`);
+        }
+      };
+      return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+    }, []), /* @__PURE__ */ A(
+      a,
+      {
+        ref: n,
+        height: i,
+        customMinHeight: r,
+        customHeight: o,
+        paddingBlock: "xl",
+        paddingInline: t,
+        style: {
+          backgroundColor: "var(--hsd-ui-color-gray-50)",
+          height: l
+        },
+        children: e
+      }
+    );
+  }
+), Gr = (e) => {
   const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = uA(), n = DA(o.toString());
   return {
     activeTab: n[r] ? parseInt(n[r]) : i,
@@ -6952,13 +6986,13 @@ const Lr = (e) => {
     searchQueries: n
   };
 };
-function Gr({
+function Or({
   appName: e,
   menuConfig: i,
   formatTitle: r
 }) {
   const o = SA();
-  v(() => {
+  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);
@@ -6973,7 +7007,7 @@ function Gr({
     document.title = (r || c)(l, e);
   }, [o.pathname]);
 }
-const Or = () => {
+const Yr = () => {
   const [e, i] = uA(), r = DA(e.toString()), o = re(), t = SA(), n = o.id;
   return {
     // query params
@@ -6992,7 +7026,7 @@ const Or = () => {
     hasId: !!n
   };
 };
-function Yr(e) {
+function pr(e) {
   var o, t;
   const i = e.decodedAccessToken;
   return oA(() => {
@@ -7030,13 +7064,14 @@ export {
   Gi as ColumnFilterDropdown,
   Lr as ConfirmationDialog,
   Yi as DataTable,
-  b as DecisionWrapper,
+  G as DecisionWrapper,
   kA as EachUtils,
   yr as EmptyStatePage,
   yi as FilterDrawer,
   Er as FloatingFooter,
   fr as ForbiddenPage,
   kr as Form,
+  br as FullSection,
   Jt as HorizontalField,
   Wi as InputFile,
   it as InputImage,
@@ -7092,9 +7127,9 @@ export {
   ar as useAdvanceFilter,
   be as useApp,
   Ge as useAppState,
-  Yr as useAuthRole,
-  Gr as useDynamicTitle,
+  pr as useAuthRole,
+  Or as useDynamicTitle,
   qA as useRouteInfo,
-  Or as useRouteParams,
-  br as useTabState
+  Yr as useRouteParams,
+  Gr as useTabState
 };