@devtable/settings-form 8.57.1 → 8.58.0

package/dist/settings-form.es.js

@@ -1,49 +1,684 @@
-import { Box as v, TextInput as z, Divider as V, Group as w, NumberInput as ie, PasswordInput as F, Button as b, Modal as R, Stack as B, Alert as oe, SegmentedControl as ae, useMantineTheme as se, Tooltip as ce, Text as L, LoadingOverlay as H, Table as $, Select as le, Switch as de } from "@mantine/core";
-import { showNotification as _, updateNotification as S } from "@mantine/notifications";
-import * as O from "react";
-import E, { useEffect as G, forwardRef as J, useState as ee, useMemo as te } from "react";
-import { Recycle as ue, AlertCircle as pe, PlaylistAdd as Q, Trash as W, Edit as ge } from "tabler-icons-react";
-import me from "axios";
-import he from "crypto-js";
-import fe from "lodash";
-import { useForm as q, Controller as m } from "react-hook-form";
-import * as X from "../../node_modules/react/jsx-runtime.js";
-import { useBoolean as be, useRequest as T } from "ahooks";
-import we, { loader as N } from "@monaco-editor/react";
-import { useModals as j, closeAllModals as Se } from "@mantine/modals";
-function ze(t) {
+import * as Z from "react";
+import H, { useEffect as Te, forwardRef as ze, useState as lr, useMemo as ur } from "react";
+import { Box as I, TextInput as D, Divider as Oe, Group as z, NumberInput as Wr, PasswordInput as de, Button as T, Modal as ne, Stack as Ae, Alert as Yr, SegmentedControl as Br, useMantineTheme as Kr, Tooltip as Gr, Text as ue, LoadingOverlay as xe, Table as ke, Select as Hr, Switch as Jr } from "@mantine/core";
+import { showNotification as V, updateNotification as x } from "@mantine/notifications";
+import { Recycle as Xr, AlertCircle as Qr, PlaylistAdd as De, Trash as je, Edit as Zr } from "tabler-icons-react";
+import et from "axios";
+import rt from "crypto-js";
+import tt from "lodash";
+import { useForm as J, Controller as R } from "react-hook-form";
+import { useBoolean as nt, useRequest as G } from "ahooks";
+import at, { loader as Ee } from "@monaco-editor/react";
+import { useModals as fe, closeAllModals as it } from "@mantine/modals";
+var te = {}, ot = {
+  get exports() {
+    return te;
+  },
+  set exports(t) {
+    te = t;
+  }
+}, ee = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var or;
+function st() {
+  if (or)
+    return ee;
+  or = 1;
+  var t = H, n = Symbol.for("react.element"), i = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, l = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function c(d, p, b) {
+    var f, h = {}, _ = null, k = null;
+    b !== void 0 && (_ = "" + b), p.key !== void 0 && (_ = "" + p.key), p.ref !== void 0 && (k = p.ref);
+    for (f in p)
+      o.call(p, f) && !s.hasOwnProperty(f) && (h[f] = p[f]);
+    if (d && d.defaultProps)
+      for (f in p = d.defaultProps, p)
+        h[f] === void 0 && (h[f] = p[f]);
+    return { $$typeof: n, type: d, key: _, ref: k, props: h, _owner: l.current };
+  }
+  return ee.Fragment = i, ee.jsx = c, ee.jsxs = c, ee;
+}
+var re = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var sr;
+function ct() {
+  return sr || (sr = 1, process.env.NODE_ENV !== "production" && function() {
+    var t = H, n = Symbol.for("react.element"), i = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), c = Symbol.for("react.provider"), d = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), b = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), k = Symbol.for("react.offscreen"), q = Symbol.iterator, he = "@@iterator";
+    function me(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var a = q && e[q] || e[he];
+      return typeof a == "function" ? a : null;
+    }
+    var U = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function O(e) {
+      {
+        for (var a = arguments.length, u = new Array(a > 1 ? a - 1 : 0), g = 1; g < a; g++)
+          u[g - 1] = arguments[g];
+        dr("error", e, u);
+      }
+    }
+    function dr(e, a, u) {
+      {
+        var g = U.ReactDebugCurrentFrame, S = g.getStackAddendum();
+        S !== "" && (a += "%s", u = u.concat([S]));
+        var y = u.map(function(w) {
+          return String(w);
+        });
+        y.unshift("Warning: " + a), Function.prototype.apply.call(console[e], console, y);
+      }
+    }
+    var fr = !1, pr = !1, gr = !1, hr = !1, mr = !1, Fe;
+    Fe = Symbol.for("react.module.reference");
+    function vr(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === o || e === s || mr || e === l || e === b || e === f || hr || e === k || fr || pr || gr || typeof e == "object" && e !== null && (e.$$typeof === _ || e.$$typeof === h || e.$$typeof === c || e.$$typeof === d || e.$$typeof === p || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === Fe || e.getModuleId !== void 0));
+    }
+    function br(e, a, u) {
+      var g = e.displayName;
+      if (g)
+        return g;
+      var S = a.displayName || a.name || "";
+      return S !== "" ? u + "(" + S + ")" : u;
+    }
+    function qe(e) {
+      return e.displayName || "Context";
+    }
+    function L(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && O("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case o:
+          return "Fragment";
+        case i:
+          return "Portal";
+        case s:
+          return "Profiler";
+        case l:
+          return "StrictMode";
+        case b:
+          return "Suspense";
+        case f:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case d:
+            var a = e;
+            return qe(a) + ".Consumer";
+          case c:
+            var u = e;
+            return qe(u._context) + ".Provider";
+          case p:
+            return br(e, e.render, "ForwardRef");
+          case h:
+            var g = e.displayName || null;
+            return g !== null ? g : L(e.type) || "Memo";
+          case _: {
+            var S = e, y = S._payload, w = S._init;
+            try {
+              return L(w(y));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var W = Object.assign, X = 0, Le, Me, Ne, Ue, Ve, $e, We;
+    function Ye() {
+    }
+    Ye.__reactDisabledLog = !0;
+    function wr() {
+      {
+        if (X === 0) {
+          Le = console.log, Me = console.info, Ne = console.warn, Ue = console.error, Ve = console.group, $e = console.groupCollapsed, We = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: Ye,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        X++;
+      }
+    }
+    function Sr() {
+      {
+        if (X--, X === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: W({}, e, {
+              value: Le
+            }),
+            info: W({}, e, {
+              value: Me
+            }),
+            warn: W({}, e, {
+              value: Ne
+            }),
+            error: W({}, e, {
+              value: Ue
+            }),
+            group: W({}, e, {
+              value: Ve
+            }),
+            groupCollapsed: W({}, e, {
+              value: $e
+            }),
+            groupEnd: W({}, e, {
+              value: We
+            })
+          });
+        }
+        X < 0 && O("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var ve = U.ReactCurrentDispatcher, be;
+    function ae(e, a, u) {
+      {
+        if (be === void 0)
+          try {
+            throw Error();
+          } catch (S) {
+            var g = S.stack.trim().match(/\n( *(at )?)/);
+            be = g && g[1] || "";
+          }
+        return `
+` + be + e;
+      }
+    }
+    var we = !1, ie;
+    {
+      var _r = typeof WeakMap == "function" ? WeakMap : Map;
+      ie = new _r();
+    }
+    function Be(e, a) {
+      if (!e || we)
+        return "";
+      {
+        var u = ie.get(e);
+        if (u !== void 0)
+          return u;
+      }
+      var g;
+      we = !0;
+      var S = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var y;
+      y = ve.current, ve.current = null, wr();
+      try {
+        if (a) {
+          var w = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(w.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(w, []);
+            } catch (M) {
+              g = M;
+            }
+            Reflect.construct(e, [], w);
+          } else {
+            try {
+              w.call();
+            } catch (M) {
+              g = M;
+            }
+            e.call(w.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (M) {
+            g = M;
+          }
+          e();
+        }
+      } catch (M) {
+        if (M && g && typeof M.stack == "string") {
+          for (var m = M.stack.split(`
+`), A = g.stack.split(`
+`), P = m.length - 1, E = A.length - 1; P >= 1 && E >= 0 && m[P] !== A[E]; )
+            E--;
+          for (; P >= 1 && E >= 0; P--, E--)
+            if (m[P] !== A[E]) {
+              if (P !== 1 || E !== 1)
+                do
+                  if (P--, E--, E < 0 || m[P] !== A[E]) {
+                    var F = `
+` + m[P].replace(" at new ", " at ");
+                    return e.displayName && F.includes("<anonymous>") && (F = F.replace("<anonymous>", e.displayName)), typeof e == "function" && ie.set(e, F), F;
+                  }
+                while (P >= 1 && E >= 0);
+              break;
+            }
+        }
+      } finally {
+        we = !1, ve.current = y, Sr(), Error.prepareStackTrace = S;
+      }
+      var K = e ? e.displayName || e.name : "", ir = K ? ae(K) : "";
+      return typeof e == "function" && ie.set(e, ir), ir;
+    }
+    function yr(e, a, u) {
+      return Be(e, !1);
+    }
+    function Rr(e) {
+      var a = e.prototype;
+      return !!(a && a.isReactComponent);
+    }
+    function oe(e, a, u) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return Be(e, Rr(e));
+      if (typeof e == "string")
+        return ae(e);
+      switch (e) {
+        case b:
+          return ae("Suspense");
+        case f:
+          return ae("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case p:
+            return yr(e.render);
+          case h:
+            return oe(e.type, a, u);
+          case _: {
+            var g = e, S = g._payload, y = g._init;
+            try {
+              return oe(y(S), a, u);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var se = Object.prototype.hasOwnProperty, Ke = {}, Ge = U.ReactDebugCurrentFrame;
+    function ce(e) {
+      if (e) {
+        var a = e._owner, u = oe(e.type, e._source, a ? a.type : null);
+        Ge.setExtraStackFrame(u);
+      } else
+        Ge.setExtraStackFrame(null);
+    }
+    function Pr(e, a, u, g, S) {
+      {
+        var y = Function.call.bind(se);
+        for (var w in e)
+          if (y(e, w)) {
+            var m = void 0;
+            try {
+              if (typeof e[w] != "function") {
+                var A = Error((g || "React class") + ": " + u + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw A.name = "Invariant Violation", A;
+              }
+              m = e[w](a, w, g, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (P) {
+              m = P;
+            }
+            m && !(m instanceof Error) && (ce(S), O("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", g || "React class", u, w, typeof m), ce(null)), m instanceof Error && !(m.message in Ke) && (Ke[m.message] = !0, ce(S), O("Failed %s type: %s", u, m.message), ce(null));
+          }
+      }
+    }
+    var Er = Array.isArray;
+    function Se(e) {
+      return Er(e);
+    }
+    function Cr(e) {
+      {
+        var a = typeof Symbol == "function" && Symbol.toStringTag, u = a && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u;
+      }
+    }
+    function Tr(e) {
+      try {
+        return He(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function He(e) {
+      return "" + e;
+    }
+    function Je(e) {
+      if (Tr(e))
+        return O("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Cr(e)), He(e);
+    }
+    var Q = U.ReactCurrentOwner, zr = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Xe, Qe, _e;
+    _e = {};
+    function Or(e) {
+      if (se.call(e, "ref")) {
+        var a = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (a && a.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function Ar(e) {
+      if (se.call(e, "key")) {
+        var a = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (a && a.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function xr(e, a) {
+      if (typeof e.ref == "string" && Q.current && a && Q.current.stateNode !== a) {
+        var u = L(Q.current.type);
+        _e[u] || (O('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', L(Q.current.type), e.ref), _e[u] = !0);
+      }
+    }
+    function kr(e, a) {
+      {
+        var u = function() {
+          Xe || (Xe = !0, O("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a));
+        };
+        u.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: u,
+          configurable: !0
+        });
+      }
+    }
+    function Dr(e, a) {
+      {
+        var u = function() {
+          Qe || (Qe = !0, O("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a));
+        };
+        u.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: u,
+          configurable: !0
+        });
+      }
+    }
+    var jr = function(e, a, u, g, S, y, w) {
+      var m = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: n,
+        // Built-in properties that belong on the element
+        type: e,
+        key: a,
+        ref: u,
+        props: w,
+        // Record the component responsible for creating this element.
+        _owner: y
+      };
+      return m._store = {}, Object.defineProperty(m._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(m, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: g
+      }), Object.defineProperty(m, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: S
+      }), Object.freeze && (Object.freeze(m.props), Object.freeze(m)), m;
+    };
+    function Ir(e, a, u, g, S) {
+      {
+        var y, w = {}, m = null, A = null;
+        u !== void 0 && (Je(u), m = "" + u), Ar(a) && (Je(a.key), m = "" + a.key), Or(a) && (A = a.ref, xr(a, S));
+        for (y in a)
+          se.call(a, y) && !zr.hasOwnProperty(y) && (w[y] = a[y]);
+        if (e && e.defaultProps) {
+          var P = e.defaultProps;
+          for (y in P)
+            w[y] === void 0 && (w[y] = P[y]);
+        }
+        if (m || A) {
+          var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          m && kr(w, E), A && Dr(w, E);
+        }
+        return jr(e, m, A, S, g, Q.current, w);
+      }
+    }
+    var ye = U.ReactCurrentOwner, Ze = U.ReactDebugCurrentFrame;
+    function B(e) {
+      if (e) {
+        var a = e._owner, u = oe(e.type, e._source, a ? a.type : null);
+        Ze.setExtraStackFrame(u);
+      } else
+        Ze.setExtraStackFrame(null);
+    }
+    var Re;
+    Re = !1;
+    function Pe(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === n;
+    }
+    function er() {
+      {
+        if (ye.current) {
+          var e = L(ye.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function Fr(e) {
+      {
+        if (e !== void 0) {
+          var a = e.fileName.replace(/^.*[\\\/]/, ""), u = e.lineNumber;
+          return `
+
+Check your code at ` + a + ":" + u + ".";
+        }
+        return "";
+      }
+    }
+    var rr = {};
+    function qr(e) {
+      {
+        var a = er();
+        if (!a) {
+          var u = typeof e == "string" ? e : e.displayName || e.name;
+          u && (a = `
+
+Check the top-level render call using <` + u + ">.");
+        }
+        return a;
+      }
+    }
+    function tr(e, a) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var u = qr(a);
+        if (rr[u])
+          return;
+        rr[u] = !0;
+        var g = "";
+        e && e._owner && e._owner !== ye.current && (g = " It was passed a child from " + L(e._owner.type) + "."), B(e), O('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, g), B(null);
+      }
+    }
+    function nr(e, a) {
+      {
+        if (typeof e != "object")
+          return;
+        if (Se(e))
+          for (var u = 0; u < e.length; u++) {
+            var g = e[u];
+            Pe(g) && tr(g, a);
+          }
+        else if (Pe(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var S = me(e);
+          if (typeof S == "function" && S !== e.entries)
+            for (var y = S.call(e), w; !(w = y.next()).done; )
+              Pe(w.value) && tr(w.value, a);
+        }
+      }
+    }
+    function Lr(e) {
+      {
+        var a = e.type;
+        if (a == null || typeof a == "string")
+          return;
+        var u;
+        if (typeof a == "function")
+          u = a.propTypes;
+        else if (typeof a == "object" && (a.$$typeof === p || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        a.$$typeof === h))
+          u = a.propTypes;
+        else
+          return;
+        if (u) {
+          var g = L(a);
+          Pr(u, e.props, "prop", g, e);
+        } else if (a.PropTypes !== void 0 && !Re) {
+          Re = !0;
+          var S = L(a);
+          O("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", S || "Unknown");
+        }
+        typeof a.getDefaultProps == "function" && !a.getDefaultProps.isReactClassApproved && O("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function Mr(e) {
+      {
+        for (var a = Object.keys(e.props), u = 0; u < a.length; u++) {
+          var g = a[u];
+          if (g !== "children" && g !== "key") {
+            B(e), O("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", g), B(null);
+            break;
+          }
+        }
+        e.ref !== null && (B(e), O("Invalid attribute `ref` supplied to `React.Fragment`."), B(null));
+      }
+    }
+    function ar(e, a, u, g, S, y) {
+      {
+        var w = vr(e);
+        if (!w) {
+          var m = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (m += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var A = Fr(S);
+          A ? m += A : m += er();
+          var P;
+          e === null ? P = "null" : Se(e) ? P = "array" : e !== void 0 && e.$$typeof === n ? (P = "<" + (L(e.type) || "Unknown") + " />", m = " Did you accidentally export a JSX literal instead of a component?") : P = typeof e, O("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", P, m);
+        }
+        var E = Ir(e, a, u, S, y);
+        if (E == null)
+          return E;
+        if (w) {
+          var F = a.children;
+          if (F !== void 0)
+            if (g)
+              if (Se(F)) {
+                for (var K = 0; K < F.length; K++)
+                  nr(F[K], e);
+                Object.freeze && Object.freeze(F);
+              } else
+                O("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              nr(F, e);
+        }
+        return e === o ? Mr(E) : Lr(E), E;
+      }
+    }
+    function Nr(e, a, u) {
+      return ar(e, a, u, !0);
+    }
+    function Ur(e, a, u) {
+      return ar(e, a, u, !1);
+    }
+    var Vr = Ur, $r = Nr;
+    re.Fragment = o, re.jsx = Vr, re.jsxs = $r;
+  }()), re;
+}
+(function(t) {
+  process.env.NODE_ENV === "production" ? t.exports = st() : t.exports = ct();
+})(ot);
+const N = te.Fragment, r = te.jsx, v = te.jsxs;
+function lt(t) {
   t = t || {};
-  const n = Object.keys(t).sort(), r = [];
-  for (let i = 0; i < n.length; i++) {
-    const s = n[i];
-    if (s != "authentication" && t[s])
-      r.push(n[i] + "=" + (typeof t[s] == "object" ? JSON.stringify(t[s]) : t[s]));
+  const n = Object.keys(t).sort(), i = [];
+  for (let o = 0; o < n.length; o++) {
+    const l = n[o];
+    if (l != "authentication" && t[l])
+      i.push(n[o] + "=" + (typeof t[l] == "object" ? JSON.stringify(t[l]) : t[l]));
     else {
-      const o = Object.keys(t[s]).sort();
-      for (let a = 0; a < o.length; a++) {
-        const c = o[a];
-        c != "sign" && t[s][c] && r.push(o[a] + "=" + (typeof t[s][c] == "object" ? JSON.stringify(t[s][c]) : t[s][c]));
+      const s = Object.keys(t[l]).sort();
+      for (let c = 0; c < s.length; c++) {
+        const d = s[c];
+        d != "sign" && t[l][d] && i.push(s[c] + "=" + (typeof t[l][d] == "object" ? JSON.stringify(t[l][d]) : t[l][d]));
       }
     }
   }
-  return r.sort().join("&");
+  return i.sort().join("&");
 }
-function Pe(t, n) {
-  let r = ze(t);
-  return r += "&key=" + n, he.MD5(r).toString().toUpperCase();
+function ut(t, n) {
+  let i = lt(t);
+  return i += "&key=" + n, rt.MD5(i).toString().toUpperCase();
 }
-const f = {
+const C = {
   baseURL: "http://localhost:31200",
   app_id: "",
   app_secret: "",
   getAuthentication(t) {
     if (!this.app_id || !this.app_secret)
       return;
-    const n = new Date().getTime().toString();
+    const n = (/* @__PURE__ */ new Date()).getTime().toString();
     return {
       app_id: this.app_id,
       nonce_str: n,
-      sign: Pe({
+      sign: ut({
         app_id: this.app_id,
         nonce_str: n,
         ...t
@@ -51,35 +686,35 @@ const f = {
     };
   },
   getRequest(t) {
-    return (n, r, i = {}) => {
-      const s = window.localStorage.getItem("token"), o = {
+    return (n, i, o = {}) => {
+      const l = window.localStorage.getItem("token"), s = {
         "X-Requested-With": "XMLHttpRequest",
-        "Content-Type": i.string ? "application/x-www-form-urlencoded" : "application/json",
-        authorization: s ? `bearer ${s}` : "",
-        ...i.headers
-      }, a = {
+        "Content-Type": o.string ? "application/x-www-form-urlencoded" : "application/json",
+        authorization: l ? `bearer ${l}` : "",
+        ...o.headers
+      }, c = {
         baseURL: this.baseURL,
         method: t,
         url: n,
-        params: t === "GET" ? r : i.params,
-        headers: o
+        params: t === "GET" ? i : o.params,
+        headers: s
       };
-      return ["POST", "PUT"].includes(t) && (a.data = i.string ? JSON.stringify(r) : r, a.data.authentication = this.getAuthentication(a.data)), me(a).then((c) => c.data).catch((c) => fe.has(c, "response.data.detail.message") ? Promise.reject(new Error(c.response.data.detail.message)) : Promise.reject(c));
+      return ["POST", "PUT"].includes(t) && (c.data = o.string ? JSON.stringify(i) : i, c.data.authentication = this.getAuthentication(c.data)), et(c).then((d) => d.data).catch((d) => tt.has(d, "response.data.detail.message") ? Promise.reject(new Error(d.response.data.detail.message)) : Promise.reject(d));
     };
   }
 };
-function M(t) {
-  f.baseURL !== t.apiBaseURL && (f.baseURL = t.apiBaseURL), t.app_id && (f.app_id = t.app_id), t.app_secret && (f.app_secret = t.app_secret);
+function pe(t) {
+  C.baseURL !== t.apiBaseURL && (C.baseURL = t.apiBaseURL), t.app_id && (C.app_id = t.app_id), t.app_secret && (C.app_secret = t.app_secret);
 }
-const ve = {
+const dt = {
   login: async (t, n) => {
-    const r = {
+    const i = {
       name: t,
       password: n
     };
-    return await f.getRequest("POST")("/account/login", r);
+    return await C.getRequest("POST")("/account/login", i);
   },
-  list: async () => await f.getRequest("POST")("/account/list", {
+  list: async () => await C.getRequest("POST")("/account/list", {
     filter: {},
     sort: [{
       field: "name",
@@ -90,36 +725,45 @@ const ve = {
       pagesize: 100
     }
   }),
-  get: async () => await f.getRequest("GET")("/account/get", {}),
+  /**
+   * get current account
+   */
+  get: async () => await C.getRequest("GET")("/account/get", {}),
+  /**
+   * update current account
+   */
   update: async (t, n) => {
-    const r = {
+    const i = {
       name: t,
       email: n
     };
-    return await f.getRequest("PUT")("/account/update", r);
+    return await C.getRequest("PUT")("/account/update", i);
   },
+  /**
+   * change current account's password
+   */
   changepassword: async (t, n) => {
-    const r = {
+    const i = {
       old_password: t,
       new_password: n
     };
-    return await f.getRequest("POST")("/account/changepassword", r);
+    return await C.getRequest("POST")("/account/changepassword", i);
   },
-  create: async (t, n, r, i) => await f.getRequest("POST")("/account/create", {
+  create: async (t, n, i, o) => await C.getRequest("POST")("/account/create", {
     name: t,
     email: n,
-    password: r,
-    role_id: i
+    password: i,
+    role_id: o
   }),
-  edit: async (t) => (t.reset_password || (t.new_password = void 0), await f.getRequest("PUT")("/account/edit", t)),
+  edit: async (t) => (t.reset_password || (t.new_password = void 0), await C.getRequest("PUT")("/account/edit", t)),
   delete: async (t) => {
-    if (!!t)
-      return f.getRequest("POST")("/account/delete", {
+    if (t)
+      return C.getRequest("POST")("/account/delete", {
         id: t
       });
   }
-}, Ae = {
-  list: async () => await f.getRequest("POST")("/api/key/list", {
+}, ft = {
+  list: async () => await C.getRequest("POST")("/api/key/list", {
     filter: {
       search: ""
     },
@@ -132,18 +776,18 @@ const ve = {
       pagesize: 100
     }
   }),
-  create: async (t, n) => f.getRequest("POST")("/api/key/create", {
+  create: async (t, n) => C.getRequest("POST")("/api/key/create", {
     name: t,
     role_id: n
   }),
   delete: async (t) => {
-    if (!!t)
-      return f.getRequest("POST")("/api/key/delete", {
+    if (t)
+      return C.getRequest("POST")("/api/key/delete", {
         id: t
       });
   }
-}, Ce = {
-  list: async () => await f.getRequest("POST")("/datasource/list", {
+}, pt = {
+  list: async () => await C.getRequest("POST")("/datasource/list", {
     filter: {},
     sort: [{
       field: "create_time",
@@ -154,42 +798,42 @@ const ve = {
       pagesize: 100
     }
   }),
-  create: async (t, n, r) => await f.getRequest("POST")("/datasource/create", {
+  create: async (t, n, i) => await C.getRequest("POST")("/datasource/create", {
     type: t,
     key: n,
-    config: r
+    config: i
   }),
   delete: async (t) => {
-    await f.getRequest("POST")("/datasource/delete", {
+    await C.getRequest("POST")("/datasource/delete", {
       id: t
     });
   }
-}, _e = {
-  list: async () => await f.getRequest("GET")("/role/list", {})
-}, P = {
-  datasource: Ce,
-  account: ve,
-  role: _e,
-  api_key: Ae
-}, D = {
+}, gt = {
+  list: async () => await C.getRequest("GET")("/role/list", {})
+}, j = {
+  datasource: pt,
+  account: dt,
+  role: gt,
+  api_key: ft
+}, Y = {
   size: "sm",
   spacing: "md",
   button: {
     size: "xs"
   }
-}, C = X.Fragment, e = X.jsx, d = X.jsxs;
-function ye({
+};
+function ht({
   submit: t,
-  styles: n = D,
-  type: r
+  styles: n = Y,
+  type: i
 }) {
   const {
-    control: i,
-    setValue: s,
-    handleSubmit: o
-  } = q({
+    control: o,
+    setValue: l,
+    handleSubmit: s
+  } = J({
     defaultValues: {
-      type: r,
+      type: i,
       key: "",
       config: {
         host: "",
@@ -200,322 +844,150 @@ function ye({
       }
     }
   });
-  return G(() => {
-    s("type", r);
-  }, [s, r]), /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: o(t),
-      children: [/* @__PURE__ */ e(m, {
-        name: "key",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Name",
-          placeholder: "A unique name",
-          ...a
-        })
-      }), /* @__PURE__ */ e(V, {
-        label: "Connection Info",
-        labelPosition: "center"
-      }), /* @__PURE__ */ d(w, {
-        grow: !0,
-        children: [/* @__PURE__ */ e(m, {
-          name: "config.host",
-          control: i,
-          render: ({
-            field: a
-          }) => /* @__PURE__ */ e(z, {
-            mb: n.spacing,
-            size: n.size,
-            required: !0,
-            label: "Host",
-            sx: {
-              flexGrow: 1
-            },
-            ...a
-          })
-        }), /* @__PURE__ */ e(m, {
-          name: "config.port",
-          control: i,
-          render: ({
-            field: a
-          }) => /* @__PURE__ */ e(ie, {
-            mb: n.spacing,
-            size: n.size,
-            required: !0,
-            label: "Port",
-            hideControls: !0,
-            sx: {
-              width: "8em"
-            },
-            ...a
-          })
-        })]
-      }), /* @__PURE__ */ e(m, {
-        name: "config.username",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Username",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "config.password",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(F, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Password",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "config.database",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Database",
-          ...a
-        })
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: n.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: n.button.size,
-          children: "Save"
-        })
-      })]
-    })
-  });
+  return Te(() => {
+    l("type", i);
+  }, [l, i]), /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: s(t), children: [
+    /* @__PURE__ */ r(R, { name: "key", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Name", placeholder: "A unique name", ...c }) }),
+    /* @__PURE__ */ r(Oe, { label: "Connection Info", labelPosition: "center" }),
+    /* @__PURE__ */ v(z, { grow: !0, children: [
+      /* @__PURE__ */ r(R, { name: "config.host", control: o, render: ({
+        field: c
+      }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Host", sx: {
+        flexGrow: 1
+      }, ...c }) }),
+      /* @__PURE__ */ r(R, { name: "config.port", control: o, render: ({
+        field: c
+      }) => /* @__PURE__ */ r(Wr, { mb: n.spacing, size: n.size, required: !0, label: "Port", hideControls: !0, sx: {
+        width: "8em"
+      }, ...c }) })
+    ] }),
+    /* @__PURE__ */ r(R, { name: "config.username", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "config.password", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(de, { mb: n.spacing, size: n.size, required: !0, label: "Password", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "config.database", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Database", ...c }) }),
+    /* @__PURE__ */ r(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: n.button.size, children: "Save" }) })
+  ] }) });
 }
-const ke = ({
+const mt = ({
   value: t,
   onChange: n
-}) => /* @__PURE__ */ e(v, {
-  sx: {
-    position: "relative"
-  },
-  children: /* @__PURE__ */ e(we, {
-    height: "500px",
-    defaultLanguage: "javascript",
-    value: t,
-    onChange: (i) => {
-      !i || n(i);
-    },
-    theme: "vs-dark",
-    options: {
-      minimap: {
-        enabled: !1
-      }
-    }
-  })
-}), Z = J(({
+}) => /* @__PURE__ */ r(I, { sx: {
+  position: "relative"
+}, children: /* @__PURE__ */ r(at, { height: "500px", defaultLanguage: "javascript", value: t, onChange: (o) => {
+  o && n(o);
+}, theme: "vs-dark", options: {
+  minimap: {
+    enabled: !1
+  }
+} }) }), cr = ze(({
   value: t,
   onChange: n,
-  label: r,
-  modalTitle: i,
-  defaultValue: s,
-  styles: o
-}, a) => {
-  const [c, {
+  label: i,
+  modalTitle: o,
+  defaultValue: l,
+  styles: s
+}, c) => {
+  const [d, {
     setTrue: p,
-    setFalse: g
-  }] = be(), [h, u] = ee(t), l = () => {
-    g(), n(h);
-  }, A = () => {
-    g(), u(t);
+    setFalse: b
+  }] = nt(), [f, h] = lr(t), _ = () => {
+    b(), n(f);
   }, k = () => {
-    u(s);
+    b(), h(t);
+  }, q = () => {
+    h(l);
   };
-  return G(() => {
-    u(t);
-  }, [t]), /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(b, {
-      variant: "filled",
-      size: o.button.size,
-      onClick: p,
-      sx: {
-        flexGrow: 1
-      },
-      children: r
-    }), /* @__PURE__ */ e(R, {
-      size: 800,
-      title: i,
-      opened: c,
-      onClose: g,
-      closeOnClickOutside: !1,
-      withCloseButton: !1,
-      children: c && /* @__PURE__ */ d(B, {
-        children: [/* @__PURE__ */ e(ke, {
-          value: h,
-          onChange: u
-        }), /* @__PURE__ */ d(w, {
-          position: "apart",
-          children: [/* @__PURE__ */ e(b, {
-            onClick: k,
-            color: "red",
-            leftIcon: /* @__PURE__ */ e(ue, {
-              size: 20
-            }),
-            children: "Rest"
-          }), /* @__PURE__ */ d(w, {
-            position: "right",
-            children: [/* @__PURE__ */ e(b, {
-              onClick: A,
-              variant: "subtle",
-              children: "Cancel"
-            }), /* @__PURE__ */ e(b, {
-              onClick: l,
-              children: "OK"
-            })]
-          })]
-        })]
-      })
-    })]
-  });
-}), I = {
+  return Te(() => {
+    h(t);
+  }, [t]), /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(T, { variant: "filled", size: s.button.size, onClick: p, sx: {
+      flexGrow: 1
+    }, children: i }),
+    /* @__PURE__ */ r(ne, { size: 800, title: o, opened: d, onClose: b, closeOnClickOutside: !1, withCloseButton: !1, children: d && /* @__PURE__ */ v(Ae, { children: [
+      /* @__PURE__ */ r(mt, { value: f, onChange: h }),
+      /* @__PURE__ */ v(z, { position: "apart", children: [
+        /* @__PURE__ */ r(T, { onClick: q, color: "red", leftIcon: /* @__PURE__ */ r(Xr, { size: 20 }), children: "Rest" }),
+        /* @__PURE__ */ v(z, { position: "right", children: [
+          /* @__PURE__ */ r(T, { onClick: k, variant: "subtle", children: "Cancel" }),
+          /* @__PURE__ */ r(T, { onClick: _, children: "OK" })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}), le = {
   pre: ["function pre_process({ method, url, params, headers, data }, utils) {", "    // your code goes here", "    return { method, url, params, headers, data }", "}"].join(`
 `),
   post: ["function post_process(res, utils) {", "    // your code goes here", "    return data", "}"].join(`
 `)
 };
-function De({
+function vt({
   submit: t,
-  styles: n = D
+  styles: n = Y
 }) {
   const {
-    control: r,
-    setValue: i,
-    handleSubmit: s
-  } = q({
+    control: i,
+    setValue: o,
+    handleSubmit: l
+  } = J({
     defaultValues: {
       type: "http",
       key: "",
       config: {
         host: "",
         processing: {
-          pre: I.pre,
-          post: I.post
+          pre: le.pre,
+          post: le.post
         }
       }
     }
   });
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: s(t),
-      children: [/* @__PURE__ */ e(m, {
-        name: "key",
-        control: r,
-        render: ({
-          field: o
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Name",
-          placeholder: "A unique name",
-          ...o
-        })
-      }), /* @__PURE__ */ e(V, {
-        label: "Connection Info",
-        labelPosition: "center"
-      }), /* @__PURE__ */ e(m, {
-        name: "config.host",
-        control: r,
-        render: ({
-          field: o
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Base URL",
-          sx: {
-            flexGrow: 1
-          },
-          ...o
-        })
-      }), /* @__PURE__ */ d(w, {
-        grow: !0,
-        children: [/* @__PURE__ */ e(m, {
-          name: "config.processing.pre",
-          control: r,
-          render: ({
-            field: o
-          }) => /* @__PURE__ */ e(Z, {
-            label: "Pre Processing",
-            modalTitle: "This function will run before sending the request (for scenarios like encryption)",
-            defaultValue: I.pre,
-            ...o,
-            styles: n
-          })
-        }), /* @__PURE__ */ e(m, {
-          name: "config.processing.post",
-          control: r,
-          render: ({
-            field: o
-          }) => /* @__PURE__ */ e(Z, {
-            label: "Post Processing",
-            modalTitle: "This function will run after sending the request (for scenarios like decryption)",
-            defaultValue: I.post,
-            ...o,
-            styles: n
-          })
-        })]
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: n.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: n.button.size,
-          children: "Save"
-        })
-      })]
-    })
-  });
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: l(t), children: [
+    /* @__PURE__ */ r(R, { name: "key", control: i, render: ({
+      field: s
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Name", placeholder: "A unique name", ...s }) }),
+    /* @__PURE__ */ r(Oe, { label: "Connection Info", labelPosition: "center" }),
+    /* @__PURE__ */ r(R, { name: "config.host", control: i, render: ({
+      field: s
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Base URL", sx: {
+      flexGrow: 1
+    }, ...s }) }),
+    /* @__PURE__ */ v(z, { grow: !0, children: [
+      /* @__PURE__ */ r(R, { name: "config.processing.pre", control: i, render: ({
+        field: s
+      }) => /* @__PURE__ */ r(cr, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: le.pre, ...s, styles: n }) }),
+      /* @__PURE__ */ r(R, { name: "config.processing.post", control: i, render: ({
+        field: s
+      }) => /* @__PURE__ */ r(cr, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: le.post, ...s, styles: n }) })
+    ] }),
+    /* @__PURE__ */ r(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: n.button.size, children: "Save" }) })
+  ] }) });
 }
-function Te({
-  styles: t = D
+function bt({
+  styles: t = Y
 }) {
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d(oe, {
-      mt: t.spacing,
-      icon: /* @__PURE__ */ e(pe, {
-        size: 16
-      }),
-      children: ["Only ", /* @__PURE__ */ e("b", {
-        children: "SELECT"
-      }), " privilege is needed."]
-    })
-  });
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v(Yr, { mt: t.spacing, icon: /* @__PURE__ */ r(Qr, { size: 16 }), children: [
+    "Only ",
+    /* @__PURE__ */ r("b", { children: "SELECT" }),
+    " privilege is needed."
+  ] }) });
 }
-function qe({
+function wt({
   postSubmit: t,
-  styles: n = D
+  styles: n = Y
 }) {
-  const [r, i] = ee("postgresql"), s = async ({
-    type: c,
+  const [i, o] = lr("postgresql"), l = async ({
+    type: d,
     key: p,
-    config: g
+    config: b
   }) => {
-    _({
+    V({
       id: "for-creating",
       title: "Pending",
       message: "Adding data source...",
@@ -523,1202 +995,783 @@ function qe({
     });
     try {
       console.log({
-        type: c,
+        type: d,
         key: p,
-        config: g
-      }), await P.datasource.create(c, p, g), S({
+        config: b
+      }), await j.datasource.create(d, p, b), x({
         id: "for-creating",
         title: "Successful",
         message: "Data source is added",
         color: "green"
       }), t();
-    } catch (h) {
-      S({
+    } catch (f) {
+      x({
         id: "for-creating",
         title: "Failed",
-        message: h.message,
+        message: f.message,
         color: "red"
       });
     }
-  }, o = r === "postgresql" || r === "mysql", a = r === "http";
-  return /* @__PURE__ */ d(v, {
-    mx: "auto",
-    children: [/* @__PURE__ */ e(ae, {
-      fullWidth: !0,
-      mb: n.spacing,
-      size: n.size,
-      data: [{
-        label: "PostgreSQL",
-        value: "postgresql"
-      }, {
-        label: "MySQL",
-        value: "mysql"
-      }, {
-        label: "HTTP",
-        value: "http"
-      }],
-      value: r,
-      onChange: (c) => i(c)
-    }), o && /* @__PURE__ */ e(Te, {
-      styles: n
-    }), o && /* @__PURE__ */ e(ye, {
-      submit: s,
-      styles: n,
-      type: r
-    }), a && /* @__PURE__ */ e(De, {
-      submit: s,
-      styles: n
-    })]
-  });
+  }, s = i === "postgresql" || i === "mysql", c = i === "http";
+  return /* @__PURE__ */ v(I, { mx: "auto", children: [
+    /* @__PURE__ */ r(Br, { fullWidth: !0, mb: n.spacing, size: n.size, data: [{
+      label: "PostgreSQL",
+      value: "postgresql"
+    }, {
+      label: "MySQL",
+      value: "mysql"
+    }, {
+      label: "HTTP",
+      value: "http"
+    }], value: i, onChange: (d) => o(d) }),
+    s && /* @__PURE__ */ r(bt, { styles: n }),
+    s && /* @__PURE__ */ r(ht, { submit: l, styles: n, type: i }),
+    c && /* @__PURE__ */ r(vt, { submit: l, styles: n })
+  ] });
 }
-function xe({
+function St({
   onSuccess: t,
-  styles: n = D
+  styles: n = Y
 }) {
-  const [r, i] = E.useState(!1), s = () => i(!0), o = () => i(!1);
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(R, {
-      overflow: "inside",
-      opened: r,
-      onClose: () => i(!1),
-      title: "Add a data source",
-      trapFocus: !0,
-      onDragStart: (c) => {
-        c.stopPropagation();
-      },
-      children: /* @__PURE__ */ e(qe, {
-        postSubmit: () => {
-          t(), o();
-        },
-        styles: n
-      })
-    }), /* @__PURE__ */ e(b, {
-      size: n.button.size,
-      onClick: s,
-      leftIcon: /* @__PURE__ */ e(Q, {
-        size: 20
-      }),
-      children: "Add a Data Source"
-    })]
-  });
+  const [i, o] = H.useState(!1), l = () => o(!0), s = () => o(!1);
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(ne, { overflow: "inside", opened: i, onClose: () => o(!1), title: "Add a data source", trapFocus: !0, onDragStart: (d) => {
+      d.stopPropagation();
+    }, children: /* @__PURE__ */ r(wt, { postSubmit: () => {
+      t(), s();
+    }, styles: n }) }),
+    /* @__PURE__ */ r(T, { size: n.button.size, onClick: l, leftIcon: /* @__PURE__ */ r(De, { size: 20 }), children: "Add a Data Source" })
+  ] });
 }
-const Oe = (t) => t.replace(/([^:])(\/\/+)/g, "$1/");
-function Re(t) {
-  G(() => {
-    if (N.__getMonacoInstance())
+const _t = (t) => t.replace(/([^:])(\/\/+)/g, "$1/");
+function yt(t) {
+  Te(() => {
+    if (Ee.__getMonacoInstance())
       return;
     console.log("loading monaco for @devtable/settings-form");
-    const r = Oe(t);
-    N.config({
+    const i = _t(t);
+    Ee.config({
       paths: {
-        vs: r
+        vs: i
       }
-    }), N.init().then((i) => console.log("monaco instance:", i));
+    }), Ee.init().then((o) => console.log("monaco instance:", o));
   }, []);
 }
-function K() {
-  return K = Object.assign ? Object.assign.bind() : function(t) {
+function Ce() {
+  return Ce = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
-      var r = arguments[n];
-      for (var i in r)
-        Object.prototype.hasOwnProperty.call(r, i) && (t[i] = r[i]);
+      var i = arguments[n];
+      for (var o in i)
+        Object.prototype.hasOwnProperty.call(i, o) && (t[o] = i[o]);
     }
     return t;
-  }, K.apply(this, arguments);
+  }, Ce.apply(this, arguments);
 }
-function Ie(t, n) {
+function Rt(t, n) {
   if (t == null)
     return {};
-  var r, i, s = function(a, c) {
-    if (a == null)
+  var i, o, l = function(c, d) {
+    if (c == null)
       return {};
-    var p, g, h = {}, u = Object.keys(a);
-    for (g = 0; g < u.length; g++)
-      p = u[g], c.indexOf(p) >= 0 || (h[p] = a[p]);
-    return h;
+    var p, b, f = {}, h = Object.keys(c);
+    for (b = 0; b < h.length; b++)
+      p = h[b], d.indexOf(p) >= 0 || (f[p] = c[p]);
+    return f;
   }(t, n);
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (i = 0; i < o.length; i++)
-      r = o[i], n.indexOf(r) >= 0 || Object.prototype.propertyIsEnumerable.call(t, r) && (s[r] = t[r]);
+    var s = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < s.length; o++)
+      i = s[o], n.indexOf(i) >= 0 || Object.prototype.propertyIsEnumerable.call(t, i) && (l[i] = t[i]);
   }
-  return s;
+  return l;
 }
-var Le = ["size", "color", "stroke"];
-function Fe(t) {
-  var n = t.size, r = n === void 0 ? 24 : n, i = t.color, s = i === void 0 ? "currentColor" : i, o = t.stroke, a = o === void 0 ? 2 : o, c = Ie(t, Le);
-  return O.createElement("svg", K({ xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-lock", width: r, height: r, viewBox: "0 0 24 24", strokeWidth: a, stroke: s, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, c), O.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), O.createElement("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }), O.createElement("circle", { cx: 12, cy: 16, r: 1 }), O.createElement("path", { d: "M8 11v-4a4 4 0 0 1 8 0v4" }));
+var Pt = ["size", "color", "stroke"];
+function Et(t) {
+  var n = t.size, i = n === void 0 ? 24 : n, o = t.color, l = o === void 0 ? "currentColor" : o, s = t.stroke, c = s === void 0 ? 2 : s, d = Rt(t, Pt);
+  return Z.createElement("svg", Ce({ xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-lock", width: i, height: i, viewBox: "0 0 24 24", strokeWidth: c, stroke: l, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, d), Z.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), Z.createElement("rect", { x: 5, y: 11, width: 14, height: 10, rx: 2 }), Z.createElement("circle", { cx: 12, cy: 16, r: 1 }), Z.createElement("path", { d: "M8 11v-4a4 4 0 0 1 8 0v4" }));
 }
-function Ee({
+function Ct({
   id: t,
   name: n,
-  isProtected: r,
-  onSuccess: i,
-  styles: s = D
+  isProtected: i,
+  onSuccess: o,
+  styles: l = Y
 }) {
-  const o = j(), a = async () => {
-    !t || (_({
+  const s = fe(), c = async () => {
+    t && (V({
       id: "for-deleting",
       title: "Pending",
       message: "Deleting data source...",
       loading: !0
-    }), await P.datasource.delete(t), S({
+    }), await j.datasource.delete(t), x({
       id: "for-deleting",
       title: "Successful",
       message: `Data source [${n}] is deleted`,
       color: "green"
-    }), i());
-  }, c = () => o.openConfirmModal({
+    }), o());
+  }, d = () => s.openConfirmModal({
     title: "Delete this data source?",
-    children: /* @__PURE__ */ e(L, {
-      size: s.size,
-      children: "This action won't affect your database."
-    }),
+    children: /* @__PURE__ */ r(ue, { size: l.size, children: "This action won't affect your database." }),
     labels: {
       confirm: "Confirm",
       cancel: "Cancel"
     },
     onCancel: () => console.log("Cancel"),
-    onConfirm: a
-  }), p = se();
-  return r ? /* @__PURE__ */ e(ce, {
-    withArrow: !0,
-    events: {
-      hover: !0,
-      touch: !1,
-      focus: !1
-    },
-    label: "This is a preset datasource, it can not be deleted",
-    children: /* @__PURE__ */ e("span", {
-      children: /* @__PURE__ */ e(Fe, {
-        size: 16,
-        color: p.colors.gray[7]
-      })
-    })
-  }) : /* @__PURE__ */ e(b, {
-    size: s.button.size,
-    color: "red",
-    onClick: c,
-    leftIcon: /* @__PURE__ */ e(W, {
-      size: 20
-    }),
-    children: "Delete"
-  });
+    onConfirm: c
+  }), p = Kr();
+  return i ? /* @__PURE__ */ r(Gr, { withArrow: !0, events: {
+    hover: !0,
+    touch: !1,
+    focus: !1
+  }, label: "This is a preset datasource, it can not be deleted", children: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(Et, { size: 16, color: p.colors.gray[7] }) }) }) : /* @__PURE__ */ r(T, { size: l.button.size, color: "red", onClick: d, leftIcon: /* @__PURE__ */ r(je, { size: 20 }), children: "Delete" });
 }
-function ot({
-  styles: t = D,
+function Gt({
+  styles: t = Y,
   config: n
 }) {
-  Re(n.monacoPath), M(n);
+  yt(n.monacoPath), pe(n);
   const {
-    data: r = [],
-    loading: i,
-    refresh: s
-  } = T(async () => {
+    data: i = [],
+    loading: o,
+    refresh: l
+  } = G(async () => {
     const {
-      data: o
-    } = await P.datasource.list();
-    return o;
+      data: s
+    } = await j.datasource.list();
+    return s;
   }, {
     refreshDeps: []
   });
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(w, {
-      pt: t.spacing,
-      position: "right",
-      children: /* @__PURE__ */ e(xe, {
-        onSuccess: s
-      })
-    }), /* @__PURE__ */ d(v, {
-      mt: t.spacing,
-      sx: {
-        position: "relative"
-      },
-      children: [/* @__PURE__ */ e(H, {
-        visible: i
-      }), /* @__PURE__ */ d($, {
-        horizontalSpacing: t.spacing,
-        verticalSpacing: t.spacing,
-        fontSize: t.size,
-        highlightOnHover: !0,
-        children: [/* @__PURE__ */ e("thead", {
-          children: /* @__PURE__ */ d("tr", {
-            children: [/* @__PURE__ */ e("th", {
-              children: "Type"
-            }), /* @__PURE__ */ e("th", {
-              children: "Name"
-            }), /* @__PURE__ */ e("th", {
-              children: "Action"
-            })]
-          })
-        }), /* @__PURE__ */ e("tbody", {
-          children: r.map(({
-            id: o,
-            key: a,
-            type: c,
-            is_preset: p
-          }) => /* @__PURE__ */ d("tr", {
-            children: [/* @__PURE__ */ e("td", {
-              width: 200,
-              children: c
-            }), /* @__PURE__ */ e("td", {
-              children: a
-            }), /* @__PURE__ */ e("td", {
-              width: 200,
-              children: /* @__PURE__ */ e(w, {
-                position: "left",
-                children: /* @__PURE__ */ e(Ee, {
-                  isProtected: p,
-                  id: o,
-                  name: a,
-                  onSuccess: s
-                })
-              })
-            })]
-          }, a))
-        })]
-      })]
-    })]
-  });
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(z, { pt: t.spacing, position: "right", children: /* @__PURE__ */ r(St, { onSuccess: l }) }),
+    /* @__PURE__ */ v(I, { mt: t.spacing, sx: {
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ r(xe, { visible: o }),
+      /* @__PURE__ */ v(ke, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
+        /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ v("tr", { children: [
+          /* @__PURE__ */ r("th", { children: "Type" }),
+          /* @__PURE__ */ r("th", { children: "Name" }),
+          /* @__PURE__ */ r("th", { children: "Action" })
+        ] }) }),
+        /* @__PURE__ */ r("tbody", { children: i.map(({
+          id: s,
+          key: c,
+          type: d,
+          is_preset: p
+        }) => /* @__PURE__ */ v("tr", { children: [
+          /* @__PURE__ */ r("td", { width: 200, children: d }),
+          /* @__PURE__ */ r("td", { children: c }),
+          /* @__PURE__ */ r("td", { width: 200, children: /* @__PURE__ */ r(z, { position: "left", children: /* @__PURE__ */ r(Ct, { isProtected: p, id: s, name: c, onSuccess: l }) }) })
+        ] }, c)) })
+      ] })
+    ] })
+  ] });
 }
-const je = J(({
+const Tt = ze(({
   label: t,
   value: n,
-  description: r,
-  ...i
-}, s) => /* @__PURE__ */ d(B, {
-  spacing: 2,
-  ref: s,
-  ...i,
-  children: [/* @__PURE__ */ e(L, {
-    size: "sm",
-    children: t
-  }), /* @__PURE__ */ e(L, {
-    size: "xs",
-    color: "dimmed",
-    className: "role-description",
-    children: r
-  })]
-})), Y = J(({
+  description: i,
+  ...o
+}, l) => /* @__PURE__ */ v(Ae, { spacing: 2, ref: l, ...o, children: [
+  /* @__PURE__ */ r(ue, { size: "sm", children: t }),
+  /* @__PURE__ */ r(ue, { size: "xs", color: "dimmed", className: "role-description", children: i })
+] })), Ie = ze(({
   styles: t,
   value: n,
-  onChange: r
-}, i) => {
+  onChange: i
+}, o) => {
   const {
-    data: s = [],
-    loading: o
-  } = T(async () => (await P.role.list()).map((c) => ({
-    label: c.name,
-    value: c.id,
-    description: c.description,
-    disabled: c.id === 50
+    data: l = [],
+    loading: s
+  } = G(async () => (await j.role.list()).map((d) => ({
+    label: d.name,
+    value: d.id,
+    description: d.description,
+    disabled: d.id === 50
+    // SUPERADMIN
   })), {
     refreshDeps: []
   });
-  return /* @__PURE__ */ e(le, {
-    ref: i,
-    mb: t.spacing,
-    size: t.size,
-    required: !0,
-    label: "Role",
-    itemComponent: je,
-    data: s,
-    disabled: o,
-    styles: () => ({
-      item: {
-        "&[data-selected]": {
-          "&, &:hover": {
-            ".role-description": {
-              color: "rgba(255,255,255,.8)"
+  return /* @__PURE__ */ r(
+    Hr,
+    {
+      ref: o,
+      mb: t.spacing,
+      size: t.size,
+      required: !0,
+      label: "Role",
+      itemComponent: Tt,
+      data: l,
+      disabled: s,
+      styles: () => ({
+        item: {
+          "&[data-selected]": {
+            "&, &:hover": {
+              ".role-description": {
+                color: "rgba(255,255,255,.8)"
+              }
             }
           }
         }
-      }
-    }),
-    value: n,
-    onChange: r
-  });
-}), y = {
+      }),
+      value: n,
+      onChange: i
+    }
+  );
+}), $ = {
   size: "sm",
   spacing: "md",
   button: {
     size: "xs"
   }
 };
-function Me({
+function zt({
   postSubmit: t,
-  styles: n = y,
-  initialRoleID: r
+  styles: n = $,
+  initialRoleID: i
 }) {
   const {
-    control: i,
-    handleSubmit: s
-  } = q({
+    control: o,
+    handleSubmit: l
+  } = J({
     defaultValues: {
       name: "",
       email: "",
-      role_id: r,
+      role_id: i,
       password: ""
     }
   });
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: s(async ({
-        name: a,
-        email: c,
-        password: p,
-        role_id: g
-      }) => {
-        try {
-          _({
-            id: "for-creating",
-            title: "Pending",
-            message: "Adding account...",
-            loading: !0
-          }), await P.account.create(a, c, p, g), S({
-            id: "for-creating",
-            title: "Successful",
-            message: "Account is added",
-            color: "green"
-          }), t();
-        } catch (h) {
-          S({
-            id: "for-creating",
-            title: "Failed",
-            message: h.message,
-            color: "red"
-          });
-        }
-      }),
-      children: [/* @__PURE__ */ e(m, {
-        name: "name",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Username",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "email",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Email",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "password",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(F, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Password",
-          description: "Password must be at least 8 characters long",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "role_id",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(Y, {
-          styles: n,
-          ...a
-        })
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: n.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: n.button.size,
-          children: "Save"
-        })
-      })]
-    })
-  });
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: l(async ({
+    name: c,
+    email: d,
+    password: p,
+    role_id: b
+  }) => {
+    try {
+      V({
+        id: "for-creating",
+        title: "Pending",
+        message: "Adding account...",
+        loading: !0
+      }), await j.account.create(c, d, p, b), x({
+        id: "for-creating",
+        title: "Successful",
+        message: "Account is added",
+        color: "green"
+      }), t();
+    } catch (f) {
+      x({
+        id: "for-creating",
+        title: "Failed",
+        message: f.message,
+        color: "red"
+      });
+    }
+  }), children: [
+    /* @__PURE__ */ r(R, { name: "name", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "email", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Email", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "password", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(de, { mb: n.spacing, size: n.size, required: !0, label: "Password", description: "Password must be at least 8 characters long", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "role_id", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(Ie, { styles: n, ...c }) }),
+    /* @__PURE__ */ r(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: n.button.size, children: "Save" }) })
+  ] }) });
 }
-function Ue({
+function Ot({
   onSuccess: t,
-  styles: n = y,
-  initialRoleID: r
+  styles: n = $,
+  initialRoleID: i
 }) {
-  const [i, s] = E.useState(!1), o = () => s(!0), a = () => s(!1);
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(R, {
-      overflow: "inside",
-      opened: i,
-      onClose: () => s(!1),
-      title: "Add an Account",
-      trapFocus: !0,
-      onDragStart: (p) => {
-        p.stopPropagation();
-      },
-      children: /* @__PURE__ */ e(Me, {
-        postSubmit: () => {
-          t(), a();
-        },
-        styles: n,
-        initialRoleID: r
-      })
-    }), /* @__PURE__ */ e(b, {
-      size: n.button.size,
-      onClick: o,
-      leftIcon: /* @__PURE__ */ e(Q, {
-        size: 20
-      }),
-      children: "Add an Account"
-    })]
-  });
+  const [o, l] = H.useState(!1), s = () => l(!0), c = () => l(!1);
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(ne, { overflow: "inside", opened: o, onClose: () => l(!1), title: "Add an Account", trapFocus: !0, onDragStart: (p) => {
+      p.stopPropagation();
+    }, children: /* @__PURE__ */ r(zt, { postSubmit: () => {
+      t(), c();
+    }, styles: n, initialRoleID: i }) }),
+    /* @__PURE__ */ r(T, { size: n.button.size, onClick: s, leftIcon: /* @__PURE__ */ r(De, { size: 20 }), children: "Add an Account" })
+  ] });
 }
-function Ne({
+function At({
   id: t,
   name: n,
-  onSuccess: r,
-  styles: i = y
+  onSuccess: i,
+  styles: o = $
 }) {
-  const s = j(), o = async () => {
-    if (!!t) {
-      _({
+  const l = fe(), s = async () => {
+    if (t) {
+      V({
         id: "for-deleting",
         title: "Pending",
         message: "Deleting account...",
         loading: !0
       });
       try {
-        await P.account.delete(t), S({
+        await j.account.delete(t), x({
           id: "for-deleting",
           title: "Successful",
           message: `Account [${n}] is deleted`,
           color: "green"
-        }), r();
-      } catch (c) {
-        S({
+        }), i();
+      } catch (d) {
+        x({
           id: "for-deleting",
           title: "Failed",
-          message: c.message,
+          message: d.message,
           color: "red"
         });
       }
     }
-  }, a = () => s.openConfirmModal({
+  }, c = () => l.openConfirmModal({
     title: "Delete this account?",
     labels: {
       confirm: "Confirm",
       cancel: "Cancel"
     },
     onCancel: () => console.log("Cancel"),
-    onConfirm: o
-  });
-  return /* @__PURE__ */ e(b, {
-    size: i.button.size,
-    color: "red",
-    onClick: a,
-    leftIcon: /* @__PURE__ */ e(W, {
-      size: 20
-    }),
-    children: "Delete"
+    onConfirm: s
   });
+  return /* @__PURE__ */ r(T, { size: o.button.size, color: "red", onClick: c, leftIcon: /* @__PURE__ */ r(je, { size: 20 }), children: "Delete" });
 }
-function Ke({
+function xt({
   id: t,
   name: n,
-  email: r,
-  role_id: i,
-  postSubmit: s,
-  styles: o = y
+  email: i,
+  role_id: o,
+  postSubmit: l,
+  styles: s = $
 }) {
   const {
-    control: a,
-    handleSubmit: c,
+    control: c,
+    handleSubmit: d,
     watch: p
-  } = q({
+  } = J({
     defaultValues: {
       name: n,
-      email: r,
-      role_id: i,
+      email: i,
+      role_id: o,
       reset_password: !1,
       new_password: ""
     }
-  }), g = async ({
-    name: l,
-    email: A,
-    role_id: k,
-    reset_password: x,
-    new_password: ne
+  }), b = async ({
+    name: _,
+    email: k,
+    role_id: q,
+    reset_password: he,
+    new_password: me
   }) => {
     try {
-      _({
+      V({
         id: "for-updating",
         title: "Pending",
         message: "Updating account...",
         loading: !0
-      }), await P.account.edit({
+      }), await j.account.edit({
         id: t,
-        name: l,
-        email: A,
-        role_id: k,
-        reset_password: x,
-        new_password: ne
-      }), S({
+        name: _,
+        email: k,
+        role_id: q,
+        reset_password: he,
+        new_password: me
+      }), x({
         id: "for-updating",
         title: "Successful",
         message: "Account is updated",
         color: "green"
-      }), s();
-    } catch (re) {
-      S({
+      }), l();
+    } catch (U) {
+      x({
         id: "for-updating",
         title: "Failed",
-        message: re.message,
+        message: U.message,
         color: "red"
       });
     }
-  }, [h, u] = p(["reset_password", "new_password"]);
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: c(g),
-      children: [/* @__PURE__ */ e(m, {
-        name: "name",
-        control: a,
-        render: ({
-          field: l
-        }) => /* @__PURE__ */ e(z, {
-          mb: o.spacing,
-          size: o.size,
-          required: !0,
-          label: "Username",
-          ...l
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "email",
-        control: a,
-        render: ({
-          field: l
-        }) => /* @__PURE__ */ e(z, {
-          mb: o.spacing,
-          size: o.size,
-          required: !0,
-          label: "Email",
-          ...l
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "role_id",
-        control: a,
-        render: ({
-          field: l
-        }) => /* @__PURE__ */ e(Y, {
-          styles: o,
-          ...l
-        })
-      }), /* @__PURE__ */ e(V, {
-        my: 20,
-        variant: "dashed",
-        label: "",
-        labelPosition: "center"
-      }), /* @__PURE__ */ e(m, {
-        name: "reset_password",
-        control: a,
-        render: ({
-          field: l
-        }) => /* @__PURE__ */ e(de, {
-          mb: o.spacing,
-          size: o.size,
-          label: "Reset password",
-          checked: l.value,
-          onChange: (A) => l.onChange(A.currentTarget.checked),
-          styles: {
-            label: {
-              verticalAlign: "middle"
-            }
-          }
-        })
-      }), h && /* @__PURE__ */ e(m, {
+  }, [f, h] = p(["reset_password", "new_password"]);
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: d(b), children: [
+    /* @__PURE__ */ r(R, { name: "name", control: c, render: ({
+      field: _
+    }) => /* @__PURE__ */ r(D, { mb: s.spacing, size: s.size, required: !0, label: "Username", ..._ }) }),
+    /* @__PURE__ */ r(R, { name: "email", control: c, render: ({
+      field: _
+    }) => /* @__PURE__ */ r(D, { mb: s.spacing, size: s.size, required: !0, label: "Email", ..._ }) }),
+    /* @__PURE__ */ r(R, { name: "role_id", control: c, render: ({
+      field: _
+    }) => /* @__PURE__ */ r(Ie, { styles: s, ..._ }) }),
+    /* @__PURE__ */ r(Oe, { my: 20, variant: "dashed", label: "", labelPosition: "center" }),
+    /* @__PURE__ */ r(R, { name: "reset_password", control: c, render: ({
+      field: _
+    }) => /* @__PURE__ */ r(Jr, { mb: s.spacing, size: s.size, label: "Reset password", checked: _.value, onChange: (k) => _.onChange(k.currentTarget.checked), styles: {
+      label: {
+        verticalAlign: "middle"
+      }
+    } }) }),
+    f && /* @__PURE__ */ r(
+      R,
+      {
         name: "new_password",
-        control: a,
+        control: c,
         render: ({
-          field: l
-        }) => /* @__PURE__ */ e(F, {
-          autoComplete: "off",
-          mb: o.spacing,
-          size: o.size,
-          required: !0,
-          description: "Password must be at least 8 characters long",
-          label: "New Password",
-          ...l
-        })
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: o.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: o.button.size,
-          children: "Submit"
-        })
-      })]
-    })
-  });
+          field: _
+        }) => /* @__PURE__ */ r(de, { autoComplete: "off", mb: s.spacing, size: s.size, required: !0, description: "Password must be at least 8 characters long", label: "New Password", ..._ })
+      }
+    ),
+    /* @__PURE__ */ r(z, { position: "right", mt: s.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: s.button.size, children: "Submit" }) })
+  ] }) });
 }
-function Ve({
+function kt({
   account: t,
   onSuccess: n,
-  styles: r = y
+  styles: i = $
 }) {
-  const [i, s] = E.useState(!1), o = () => s(!0), a = () => s(!1), c = () => {
-    n(), a();
+  const [o, l] = H.useState(!1), s = () => l(!0), c = () => l(!1), d = () => {
+    n(), c();
   };
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(R, {
-      overflow: "inside",
-      opened: i,
-      onClose: () => s(!1),
-      title: `Editing ${t.name}`,
-      trapFocus: !0,
-      onDragStart: (p) => {
-        p.stopPropagation();
-      },
-      children: /* @__PURE__ */ e(Ke, {
-        ...t,
-        postSubmit: c,
-        styles: r
-      })
-    }), /* @__PURE__ */ e(b, {
-      size: r.button.size,
-      onClick: o,
-      leftIcon: /* @__PURE__ */ e(ge, {
-        size: 20
-      }),
-      children: "Edit"
-    })]
-  });
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(ne, { overflow: "inside", opened: o, onClose: () => l(!1), title: `Editing ${t.name}`, trapFocus: !0, onDragStart: (p) => {
+      p.stopPropagation();
+    }, children: /* @__PURE__ */ r(xt, { ...t, postSubmit: d, styles: i }) }),
+    /* @__PURE__ */ r(T, { size: i.button.size, onClick: s, leftIcon: /* @__PURE__ */ r(Zr, { size: 20 }), children: "Edit" })
+  ] });
 }
-function at({
-  styles: t = y,
+function Ht({
+  styles: t = $,
   config: n
 }) {
-  var g, h;
-  M(n);
+  var b;
+  pe(n);
   const {
-    data: r = [],
-    loading: i,
-    refresh: s
-  } = T(async () => {
+    data: i = [],
+    loading: o,
+    refresh: l
+  } = G(async () => {
     const {
-      data: u
-    } = await P.account.list();
-    return u;
+      data: f
+    } = await j.account.list();
+    return f;
   }, {
     refreshDeps: []
   }), {
-    data: o = [],
-    loading: a
-  } = T(async () => (await P.role.list()).map((l) => ({
-    label: l.name,
-    value: l.id,
-    description: l.description,
-    disabled: l.id === 50
+    data: s = [],
+    loading: c
+  } = G(async () => (await j.role.list()).map((h) => ({
+    label: h.name,
+    value: h.id,
+    description: h.description,
+    disabled: h.id === 50
+    // SUPERADMIN
   })), {
     refreshDeps: []
-  }), c = te(() => o.reduce((u, l) => (u.set(l.value, l.label), u), /* @__PURE__ */ new Map()), [o]), p = (u) => {
-    var l;
-    return (l = c.get(u)) != null ? l : u;
-  };
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(w, {
-      pt: t.spacing,
-      position: "right",
-      children: /* @__PURE__ */ e(Ue, {
-        onSuccess: s,
-        initialRoleID: (h = (g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) != null ? h : 0
-      })
-    }), /* @__PURE__ */ d(v, {
-      mt: t.spacing,
-      sx: {
-        position: "relative"
-      },
-      children: [/* @__PURE__ */ e(H, {
-        visible: i || a
-      }), /* @__PURE__ */ d($, {
-        horizontalSpacing: t.spacing,
-        verticalSpacing: t.spacing,
-        fontSize: t.size,
-        highlightOnHover: !0,
-        children: [/* @__PURE__ */ e("thead", {
-          children: /* @__PURE__ */ d("tr", {
-            children: [/* @__PURE__ */ e("th", {
-              children: "Username"
-            }), /* @__PURE__ */ e("th", {
-              children: "Email"
-            }), /* @__PURE__ */ e("th", {
-              children: "Role"
-            }), /* @__PURE__ */ e("th", {
-              children: "Action"
-            })]
-          })
-        }), /* @__PURE__ */ e("tbody", {
-          children: r.map((u) => {
-            const {
-              id: l,
-              name: A,
-              email: k,
-              role_id: x
-            } = u;
-            return /* @__PURE__ */ d("tr", {
-              children: [/* @__PURE__ */ e("td", {
-                width: 200,
-                children: A
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: k
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: p(x)
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: /* @__PURE__ */ d(w, {
-                  position: "left",
-                  children: [/* @__PURE__ */ e(Ve, {
-                    account: u,
-                    onSuccess: s
-                  }), /* @__PURE__ */ e(Ne, {
-                    id: l,
-                    name: A,
-                    onSuccess: s
-                  })]
-                })
-              })]
-            }, l);
-          })
-        })]
-      })]
-    })]
-  });
+  }), d = ur(() => s.reduce((f, h) => (f.set(h.value, h.label), f), /* @__PURE__ */ new Map()), [s]), p = (f) => d.get(f) ?? f;
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(z, { pt: t.spacing, position: "right", children: /* @__PURE__ */ r(Ot, { onSuccess: l, initialRoleID: ((b = s == null ? void 0 : s[0]) == null ? void 0 : b.value) ?? 0 }) }),
+    /* @__PURE__ */ v(I, { mt: t.spacing, sx: {
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ r(xe, { visible: o || c }),
+      /* @__PURE__ */ v(ke, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
+        /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ v("tr", { children: [
+          /* @__PURE__ */ r("th", { children: "Username" }),
+          /* @__PURE__ */ r("th", { children: "Email" }),
+          /* @__PURE__ */ r("th", { children: "Role" }),
+          /* @__PURE__ */ r("th", { children: "Action" })
+        ] }) }),
+        /* @__PURE__ */ r("tbody", { children: i.map((f) => {
+          const {
+            id: h,
+            name: _,
+            email: k,
+            role_id: q
+          } = f;
+          return /* @__PURE__ */ v("tr", { children: [
+            /* @__PURE__ */ r("td", { width: 200, children: _ }),
+            /* @__PURE__ */ r("td", { width: 200, children: k }),
+            /* @__PURE__ */ r("td", { width: 200, children: p(q) }),
+            /* @__PURE__ */ r("td", { width: 200, children: /* @__PURE__ */ v(z, { position: "left", children: [
+              /* @__PURE__ */ r(kt, { account: f, onSuccess: l }),
+              /* @__PURE__ */ r(At, { id: h, name: _, onSuccess: l })
+            ] }) })
+          ] }, h);
+        }) })
+      ] })
+    ] })
+  ] });
 }
-function Be({
+function Dt({
   postSubmit: t,
-  styles: n = y
+  styles: n = $
 }) {
   const {
-    control: r,
-    handleSubmit: i
-  } = q({
+    control: i,
+    handleSubmit: o
+  } = J({
     defaultValues: {
       name: "",
       password: ""
     }
   });
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: i(async ({
-        name: o,
-        password: a
-      }) => {
-        try {
-          _({
-            id: "for-login",
-            title: "Pending",
-            message: "Loggin in...",
-            loading: !0
-          });
-          const c = await P.account.login(o, a);
-          window.localStorage.setItem("token", c.token), S({
-            id: "for-login",
-            title: "Successful",
-            message: "Logged in",
-            color: "green"
-          }), t(c);
-        } catch (c) {
-          S({
-            id: "for-login",
-            title: "Login Failed",
-            message: c.message,
-            color: "red"
-          });
-        }
-      }),
-      children: [/* @__PURE__ */ e(m, {
-        name: "name",
-        control: r,
-        render: ({
-          field: o
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Username",
-          ...o
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "password",
-        control: r,
-        render: ({
-          field: o
-        }) => /* @__PURE__ */ e(F, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Password",
-          ...o
-        })
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: n.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: n.button.size,
-          children: "Submit"
-        })
-      })]
-    })
-  });
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: o(async ({
+    name: s,
+    password: c
+  }) => {
+    try {
+      V({
+        id: "for-login",
+        title: "Pending",
+        message: "Loggin in...",
+        loading: !0
+      });
+      const d = await j.account.login(s, c);
+      window.localStorage.setItem("token", d.token), x({
+        id: "for-login",
+        title: "Successful",
+        message: "Logged in",
+        color: "green"
+      }), t(d);
+    } catch (d) {
+      x({
+        id: "for-login",
+        title: "Login Failed",
+        message: d.message,
+        color: "red"
+      });
+    }
+  }), children: [
+    /* @__PURE__ */ r(R, { name: "name", control: i, render: ({
+      field: s
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Username", ...s }) }),
+    /* @__PURE__ */ r(R, { name: "password", control: i, render: ({
+      field: s
+    }) => /* @__PURE__ */ r(de, { mb: n.spacing, size: n.size, required: !0, label: "Password", ...s }) }),
+    /* @__PURE__ */ r(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: n.button.size, children: "Submit" }) })
+  ] }) });
 }
-function st({
-  styles: t = y,
+function Jt({
+  styles: t = $,
   config: n,
-  onSuccess: r
+  onSuccess: i
 }) {
-  return M(n), /* @__PURE__ */ e(C, {
-    children: /* @__PURE__ */ e(v, {
-      mt: t.spacing,
-      sx: {
-        position: "relative"
-      },
-      children: /* @__PURE__ */ e(Be, {
-        styles: t,
-        postSubmit: r
-      })
-    })
-  });
+  return pe(n), /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(I, { mt: t.spacing, sx: {
+    position: "relative"
+  }, children: /* @__PURE__ */ r(Dt, { styles: t, postSubmit: i }) }) });
 }
-const U = {
+const ge = {
   size: "sm",
   spacing: "md",
   button: {
     size: "xs"
   }
 };
-function He({
+function jt({
   postSubmit: t,
-  styles: n = U,
-  initialRoleID: r
+  styles: n = ge,
+  initialRoleID: i
 }) {
   const {
-    control: i,
-    handleSubmit: s
-  } = q({
+    control: o,
+    handleSubmit: l
+  } = J({
     defaultValues: {
       name: "",
-      role_id: r
+      role_id: i
     }
   });
-  return /* @__PURE__ */ e(v, {
-    mx: "auto",
-    children: /* @__PURE__ */ d("form", {
-      onSubmit: s(async ({
-        name: a,
-        role_id: c
-      }) => {
-        try {
-          _({
-            id: "for-creating",
-            title: "Pending",
-            message: "Adding API Key...",
-            loading: !0
-          });
-          const {
-            app_id: p,
-            app_secret: g
-          } = await P.api_key.create(a, c);
-          S({
-            id: "for-creating",
-            title: "Successful",
-            message: "API Key is added",
-            color: "green"
-          }), t(p, g);
-        } catch (p) {
-          S({
-            id: "for-creating",
-            title: "Failed",
-            message: p.message,
-            color: "red"
-          });
-        }
-      }),
-      children: [/* @__PURE__ */ e(m, {
-        name: "name",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(z, {
-          mb: n.spacing,
-          size: n.size,
-          required: !0,
-          label: "Name",
-          ...a
-        })
-      }), /* @__PURE__ */ e(m, {
-        name: "role_id",
-        control: i,
-        render: ({
-          field: a
-        }) => /* @__PURE__ */ e(Y, {
-          styles: n,
-          ...a
-        })
-      }), /* @__PURE__ */ e(w, {
-        position: "right",
-        mt: n.spacing,
-        children: /* @__PURE__ */ e(b, {
-          type: "submit",
-          size: n.button.size,
-          children: "Save"
-        })
-      })]
-    })
-  });
+  return /* @__PURE__ */ r(I, { mx: "auto", children: /* @__PURE__ */ v("form", { onSubmit: l(async ({
+    name: c,
+    role_id: d
+  }) => {
+    try {
+      V({
+        id: "for-creating",
+        title: "Pending",
+        message: "Adding API Key...",
+        loading: !0
+      });
+      const {
+        app_id: p,
+        app_secret: b
+      } = await j.api_key.create(c, d);
+      x({
+        id: "for-creating",
+        title: "Successful",
+        message: "API Key is added",
+        color: "green"
+      }), t(p, b);
+    } catch (p) {
+      x({
+        id: "for-creating",
+        title: "Failed",
+        message: p.message,
+        color: "red"
+      });
+    }
+  }), children: [
+    /* @__PURE__ */ r(R, { name: "name", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(D, { mb: n.spacing, size: n.size, required: !0, label: "Name", ...c }) }),
+    /* @__PURE__ */ r(R, { name: "role_id", control: o, render: ({
+      field: c
+    }) => /* @__PURE__ */ r(Ie, { styles: n, ...c }) }),
+    /* @__PURE__ */ r(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ r(T, { type: "submit", size: n.button.size, children: "Save" }) })
+  ] }) });
 }
-function $e({
+function It({
   onSuccess: t,
-  styles: n = U,
-  initialRoleID: r
+  styles: n = ge,
+  initialRoleID: i
 }) {
-  const i = j(), [s, o] = E.useState(!1), a = () => o(!0), c = () => o(!1);
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(R, {
-      overflow: "inside",
-      opened: s,
-      onClose: () => o(!1),
-      title: "Add an API Key",
-      trapFocus: !0,
-      onDragStart: (g) => {
-        g.stopPropagation();
-      },
-      children: /* @__PURE__ */ e(He, {
-        postSubmit: (g, h) => {
-          c(), i.openModal({
-            title: "API Key is generated",
-            children: /* @__PURE__ */ d(B, {
-              children: [/* @__PURE__ */ e(L, {
-                color: "dimmed",
-                children: "Make sure you save it - you won't be able to access it again."
-              }), /* @__PURE__ */ e(z, {
-                defaultValue: g,
-                disabled: !0,
-                label: "APP ID",
-                styles: {
-                  input: {
-                    cursor: "text !important"
-                  }
-                }
-              }), /* @__PURE__ */ e(z, {
-                defaultValue: h,
-                disabled: !0,
-                label: "APP Secret",
-                styles: {
-                  input: {
-                    cursor: "text !important"
-                  }
-                }
-              }), /* @__PURE__ */ e(b, {
-                size: "sm",
-                onClick: () => {
-                  Se();
-                },
-                children: "I've saved this API Key"
-              })]
-            }),
-            onClose: () => {
-              t();
+  const o = fe(), [l, s] = H.useState(!1), c = () => s(!0), d = () => s(!1);
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(ne, { overflow: "inside", opened: l, onClose: () => s(!1), title: "Add an API Key", trapFocus: !0, onDragStart: (b) => {
+      b.stopPropagation();
+    }, children: /* @__PURE__ */ r(jt, { postSubmit: (b, f) => {
+      d(), o.openModal({
+        title: "API Key is generated",
+        children: /* @__PURE__ */ v(Ae, { children: [
+          /* @__PURE__ */ r(ue, { color: "dimmed", children: "Make sure you save it - you won't be able to access it again." }),
+          /* @__PURE__ */ r(D, { defaultValue: b, disabled: !0, label: "APP ID", styles: {
+            input: {
+              cursor: "text !important"
             }
-          });
-        },
-        styles: n,
-        initialRoleID: r
-      })
-    }), /* @__PURE__ */ e(b, {
-      size: n.button.size,
-      onClick: a,
-      leftIcon: /* @__PURE__ */ e(Q, {
-        size: 20
-      }),
-      children: "Add an API Key"
-    })]
-  });
+          } }),
+          /* @__PURE__ */ r(D, { defaultValue: f, disabled: !0, label: "APP Secret", styles: {
+            input: {
+              cursor: "text !important"
+            }
+          } }),
+          /* @__PURE__ */ r(T, { size: "sm", onClick: () => {
+            it();
+          }, children: "I've saved this API Key" })
+        ] }),
+        onClose: () => {
+          t();
+        }
+      });
+    }, styles: n, initialRoleID: i }) }),
+    /* @__PURE__ */ r(T, { size: n.button.size, onClick: c, leftIcon: /* @__PURE__ */ r(De, { size: 20 }), children: "Add an API Key" })
+  ] });
 }
-function Ge({
+function Ft({
   id: t,
   name: n,
-  onSuccess: r,
-  styles: i = U
+  onSuccess: i,
+  styles: o = ge
 }) {
-  const s = j(), o = async () => {
-    if (!!t) {
-      _({
+  const l = fe(), s = async () => {
+    if (t) {
+      V({
         id: "for-deleting",
         title: "Pending",
         message: "Deleting API Key...",
         loading: !0
       });
       try {
-        await P.api_key.delete(t), S({
+        await j.api_key.delete(t), x({
           id: "for-deleting",
           title: "Successful",
           message: `API Key [${n}] is deleted`,
           color: "green"
-        }), r();
-      } catch (c) {
-        S({
+        }), i();
+      } catch (d) {
+        x({
           id: "for-deleting",
           title: "Failed",
-          message: c.message,
+          message: d.message,
           color: "red"
         });
       }
     }
-  }, a = () => s.openConfirmModal({
+  }, c = () => l.openConfirmModal({
     title: "Delete this api-key?",
     labels: {
       confirm: "Confirm",
       cancel: "Cancel"
     },
     onCancel: () => console.log("Cancel"),
-    onConfirm: o
-  });
-  return /* @__PURE__ */ e(b, {
-    size: i.button.size,
-    color: "red",
-    onClick: a,
-    leftIcon: /* @__PURE__ */ e(W, {
-      size: 20
-    }),
-    children: "Delete"
+    onConfirm: s
   });
+  return /* @__PURE__ */ r(T, { size: o.button.size, color: "red", onClick: c, leftIcon: /* @__PURE__ */ r(je, { size: 20 }), children: "Delete" });
 }
-function ct({
-  styles: t = U,
+function Xt({
+  styles: t = ge,
   config: n
 }) {
-  var g, h;
-  M(n);
+  var b;
+  pe(n);
   const {
-    data: r = [],
-    loading: i,
-    refresh: s
-  } = T(async () => {
+    data: i = [],
+    loading: o,
+    refresh: l
+  } = G(async () => {
     const {
-      data: u
-    } = await P.api_key.list();
-    return u;
+      data: f
+    } = await j.api_key.list();
+    return f;
   }, {
     refreshDeps: []
   }), {
-    data: o = [],
-    loading: a
-  } = T(async () => (await P.role.list()).map((l) => ({
-    label: l.name,
-    value: l.id,
-    description: l.description,
-    disabled: l.id === 50
+    data: s = [],
+    loading: c
+  } = G(async () => (await j.role.list()).map((h) => ({
+    label: h.name,
+    value: h.id,
+    description: h.description,
+    disabled: h.id === 50
+    // SUPERADMIN
   })), {
     refreshDeps: []
-  }), c = te(() => o.reduce((u, l) => (u.set(l.value, l.label), u), /* @__PURE__ */ new Map()), [o]), p = (u) => {
-    var l;
-    return (l = c.get(u)) != null ? l : u;
-  };
-  return /* @__PURE__ */ d(C, {
-    children: [/* @__PURE__ */ e(w, {
-      pt: t.spacing,
-      position: "right",
-      children: /* @__PURE__ */ e($e, {
-        onSuccess: s,
-        initialRoleID: (h = (g = o == null ? void 0 : o[0]) == null ? void 0 : g.value) != null ? h : 0
-      })
-    }), /* @__PURE__ */ d(v, {
-      mt: t.spacing,
-      sx: {
-        position: "relative"
-      },
-      children: [/* @__PURE__ */ e(H, {
-        visible: i || a
-      }), /* @__PURE__ */ d($, {
-        horizontalSpacing: t.spacing,
-        verticalSpacing: t.spacing,
-        fontSize: t.size,
-        highlightOnHover: !0,
-        children: [/* @__PURE__ */ e("thead", {
-          children: /* @__PURE__ */ d("tr", {
-            children: [/* @__PURE__ */ e("th", {
-              children: "Name"
-            }), /* @__PURE__ */ e("th", {
-              children: "APP ID"
-            }), /* @__PURE__ */ e("th", {
-              children: "Role"
-            }), /* @__PURE__ */ e("th", {
-              children: "Action"
-            })]
-          })
-        }), /* @__PURE__ */ e("tbody", {
-          children: r.map((u) => {
-            const {
-              id: l,
-              name: A,
-              app_id: k,
-              role_id: x
-            } = u;
-            return /* @__PURE__ */ d("tr", {
-              children: [/* @__PURE__ */ e("td", {
-                width: 200,
-                children: A
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: k
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: p(x)
-              }), /* @__PURE__ */ e("td", {
-                width: 200,
-                children: /* @__PURE__ */ e(w, {
-                  position: "left",
-                  children: /* @__PURE__ */ e(Ge, {
-                    id: l,
-                    name: A,
-                    onSuccess: s
-                  })
-                })
-              })]
-            }, l);
-          })
-        })]
-      })]
-    })]
-  });
+  }), d = ur(() => s.reduce((f, h) => (f.set(h.value, h.label), f), /* @__PURE__ */ new Map()), [s]), p = (f) => d.get(f) ?? f;
+  return /* @__PURE__ */ v(N, { children: [
+    /* @__PURE__ */ r(z, { pt: t.spacing, position: "right", children: /* @__PURE__ */ r(It, { onSuccess: l, initialRoleID: ((b = s == null ? void 0 : s[0]) == null ? void 0 : b.value) ?? 0 }) }),
+    /* @__PURE__ */ v(I, { mt: t.spacing, sx: {
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ r(xe, { visible: o || c }),
+      /* @__PURE__ */ v(ke, { horizontalSpacing: t.spacing, verticalSpacing: t.spacing, fontSize: t.size, highlightOnHover: !0, children: [
+        /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ v("tr", { children: [
+          /* @__PURE__ */ r("th", { children: "Name" }),
+          /* @__PURE__ */ r("th", { children: "APP ID" }),
+          /* @__PURE__ */ r("th", { children: "Role" }),
+          /* @__PURE__ */ r("th", { children: "Action" })
+        ] }) }),
+        /* @__PURE__ */ r("tbody", { children: i.map((f) => {
+          const {
+            id: h,
+            name: _,
+            app_id: k,
+            role_id: q
+          } = f;
+          return /* @__PURE__ */ v("tr", { children: [
+            /* @__PURE__ */ r("td", { width: 200, children: _ }),
+            /* @__PURE__ */ r("td", { width: 200, children: k }),
+            /* @__PURE__ */ r("td", { width: 200, children: p(q) }),
+            /* @__PURE__ */ r("td", { width: 200, children: /* @__PURE__ */ r(z, { position: "left", children: /* @__PURE__ */ r(Ft, { id: h, name: _, onSuccess: l }) }) })
+          ] }, h);
+        }) })
+      ] })
+    ] })
+  ] });
 }
-const lt = () => import("./package.5579293f.mjs").then(({
+const Qt = () => import("./package-580f3090.mjs").then(({
   version: t
 }) => (console.log(`[@devtable/dashboard] version: ${t}`), t));
 export {
-  ct as APIKeyList,
-  at as AccountList,
-  $e as AddAPIKey,
-  Ue as AddAccount,
-  xe as AddDataSource,
-  ot as DataSourceList,
-  Ge as DeleteAPIKey,
-  Ne as DeleteAccount,
-  Ee as DeleteDataSource,
-  st as Login,
-  lt as getVersion
+  Xt as APIKeyList,
+  Ht as AccountList,
+  It as AddAPIKey,
+  Ot as AddAccount,
+  St as AddDataSource,
+  Gt as DataSourceList,
+  Ft as DeleteAPIKey,
+  At as DeleteAccount,
+  Ct as DeleteDataSource,
+  Jt as Login,
+  Qt as getVersion
 };