@devtable/settings-form 12.10.1 → 12.11.0

package/dist/settings-form.es.js

@@ -1,16 +1,17 @@
-import F, { useEffect as Ct, forwardRef as ut, useState as or, Component as Vr } from "react";
-import { Box as X, TextInput as Q, Divider as ct, Group as z, NumberInput as Wr, PasswordInput as dt, Button as D, Modal as xe, Stack as Ke, Alert as Kr, SegmentedControl as Zr, Tooltip as at, Text as ke, ActionIcon as Dt, LoadingOverlay as pt, Table as ft, Select as Xr, Switch as Qr, createStyles as lr, rem as Ve, useComponentDefaultProps as Jr, useMantineTheme as en, ScrollArea as ur, Tabs as gt, HoverCard as _t } from "@mantine/core";
+import F, { useEffect as It, forwardRef as ct, useState as lr, Component as Wr } from "react";
+import { Box as X, TextInput as Q, Divider as dt, Group as z, NumberInput as Kr, PasswordInput as pt, Button as I, Modal as xe, Stack as Ze, Alert as Zr, SegmentedControl as Xr, Tooltip as it, Text as ke, ActionIcon as Dt, LoadingOverlay as ft, Table as gt, Select as Qr, Switch as Jr, createStyles as ur, rem as We, useComponentDefaultProps as en, useMantineTheme as tn, ScrollArea as cr, Tabs as ht, HoverCard as At } from "@mantine/core";
 import { showNotification as oe, updateNotification as P } from "@mantine/notifications";
-import { Recycle as tn, AlertCircle as rn, PlaylistAdd as ht, Trash as mt, Edit as nn } from "tabler-icons-react";
-import * as an from "crypto-js";
-import sn from "axios";
-import { useForm as me, Controller as O } from "react-hook-form";
-import { useBoolean as on, useRequest as Te } from "ahooks";
-import cr, { loader as At } from "@monaco-editor/react";
-import { useModals as Ze, closeAllModals as ln } from "@mantine/modals";
-import { IconLock as dr, IconEdit as Tt, IconNetwork as un, IconBrandMysql as cn, IconDatabase as dn, IconEye as pn } from "@tabler/icons-react";
-import { useClipboard as fn } from "@mantine/hooks";
-var jt = { exports: {} }, Ue = {};
+import { Recycle as rn, AlertCircle as nn, PlaylistAdd as mt, Trash as bt, Edit as an } from "tabler-icons-react";
+import * as sn from "crypto-js";
+import on from "lodash";
+import ln from "axios";
+import { useForm as me, Controller as R } from "react-hook-form";
+import { IconDeviceFloppy as Pe, IconLock as dr, IconEdit as jt, IconNetwork as un, IconBrandMysql as cn, IconDatabase as dn, IconEye as pn } from "@tabler/icons-react";
+import { useBoolean as fn, useRequest as Te } from "ahooks";
+import pr, { loader as kt } from "@monaco-editor/react";
+import { useModals as Xe, closeAllModals as gn } from "@mantine/modals";
+import { useClipboard as hn } from "@mantine/hooks";
+var Ct = { exports: {} }, Ge = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -20,11 +21,11 @@ var jt = { exports: {} }, Ue = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Xt;
-function gn() {
-  if (Xt)
-    return Ue;
-  Xt = 1;
+var Qt;
+function mn() {
+  if (Qt)
+    return Ge;
+  Qt = 1;
   var e = F, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, i = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
   function l(d, p, f) {
     var h, c = {}, u = null, g = null;
@@ -36,9 +37,9 @@ function gn() {
         c[h] === void 0 && (c[h] = p[h]);
     return { $$typeof: t, type: d, key: u, ref: g, props: c, _owner: i.current };
   }
-  return Ue.Fragment = r, Ue.jsx = l, Ue.jsxs = l, Ue;
+  return Ge.Fragment = r, Ge.jsx = l, Ge.jsxs = l, Ge;
 }
-var Ge = {};
+var He = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -48,9 +49,9 @@ var Ge = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Qt;
-function hn() {
-  return Qt || (Qt = 1, process.env.NODE_ENV !== "production" && function() {
+var Jt;
+function bn() {
+  return Jt || (Jt = 1, process.env.NODE_ENV !== "production" && function() {
     var e = F, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), i = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), l = Symbol.for("react.provider"), d = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), g = Symbol.for("react.offscreen"), v = Symbol.iterator, m = "@@iterator";
     function x(o) {
       if (o === null || typeof o != "object")
@@ -68,12 +69,12 @@ function hn() {
     }
     function _(o, y, E) {
       {
-        var A = w.ReactDebugCurrentFrame, R = A.getStackAddendum();
-        R !== "" && (y += "%s", E = E.concat([R]));
-        var I = E.map(function(j) {
+        var A = w.ReactDebugCurrentFrame, C = A.getStackAddendum();
+        C !== "" && (y += "%s", E = E.concat([C]));
+        var D = E.map(function(j) {
           return String(j);
         });
-        I.unshift("Warning: " + y), Function.prototype.apply.call(console[o], console, I);
+        D.unshift("Warning: " + y), Function.prototype.apply.call(console[o], console, D);
       }
     }
     var k = !1, H = !1, J = !1, N = !1, q = !1, $;
@@ -89,8 +90,8 @@ function hn() {
       var A = o.displayName;
       if (A)
         return A;
-      var R = y.displayName || y.name || "";
-      return R !== "" ? E + "(" + R + ")" : E;
+      var C = y.displayName || y.name || "";
+      return C !== "" ? E + "(" + C + ")" : E;
     }
     function V(o) {
       return o.displayName || "Context";
@@ -130,9 +131,9 @@ function hn() {
             var A = o.displayName || null;
             return A !== null ? A : B(o.type) || "Memo";
           case u: {
-            var R = o, I = R._payload, j = R._init;
+            var C = o, D = C._payload, j = C._init;
             try {
-              return B(j(I));
+              return B(j(D));
             } catch {
               return null;
             }
@@ -202,27 +203,27 @@ function hn() {
         M < 0 && S("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var ge = w.ReactCurrentDispatcher, Me;
+    var ge = w.ReactCurrentDispatcher, Be;
     function je(o, y, E) {
       {
-        if (Me === void 0)
+        if (Be === void 0)
           try {
             throw Error();
-          } catch (R) {
-            var A = R.stack.trim().match(/\n( *(at )?)/);
-            Me = A && A[1] || "";
+          } catch (C) {
+            var A = C.stack.trim().match(/\n( *(at )?)/);
+            Be = A && A[1] || "";
           }
         return `
-` + Me + o;
+` + Be + o;
       }
     }
-    var Re = !1, _e;
+    var Ce = !1, _e;
     {
-      var Oe = typeof WeakMap == "function" ? WeakMap : Map;
-      _e = new Oe();
+      var Re = typeof WeakMap == "function" ? WeakMap : Map;
+      _e = new Re();
     }
-    function $t(o, y) {
-      if (!o || Re)
+    function zt(o, y) {
+      if (!o || Ce)
         return "";
       {
         var E = _e.get(o);
@@ -230,11 +231,11 @@ function hn() {
           return E;
       }
       var A;
-      Re = !0;
-      var R = Error.prepareStackTrace;
+      Ce = !0;
+      var C = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var I;
-      I = ge.current, ge.current = null, fe();
+      var D;
+      D = ge.current, ge.current = null, fe();
       try {
         if (y) {
           var j = function() {
@@ -287,23 +288,23 @@ function hn() {
             }
         }
       } finally {
-        Re = !1, ge.current = I, Ee(), Error.prepareStackTrace = R;
+        Ce = !1, ge.current = D, Ee(), Error.prepareStackTrace = C;
       }
-      var De = o ? o.displayName || o.name : "", Zt = De ? je(De) : "";
-      return typeof o == "function" && _e.set(o, Zt), Zt;
+      var Ie = o ? o.displayName || o.name : "", Xt = Ie ? je(Ie) : "";
+      return typeof o == "function" && _e.set(o, Xt), Xt;
     }
-    function Ar(o, y, E) {
-      return $t(o, !1);
+    function kr(o, y, E) {
+      return zt(o, !1);
     }
-    function kr(o) {
+    function Tr(o) {
       var y = o.prototype;
       return !!(y && y.isReactComponent);
     }
-    function Je(o, y, E) {
+    function et(o, y, E) {
       if (o == null)
         return "";
       if (typeof o == "function")
-        return $t(o, kr(o));
+        return zt(o, Tr(o));
       if (typeof o == "string")
         return je(o);
       switch (o) {
@@ -315,32 +316,32 @@ function hn() {
       if (typeof o == "object")
         switch (o.$$typeof) {
           case p:
-            return Ar(o.render);
+            return kr(o.render);
           case c:
-            return Je(o.type, y, E);
+            return et(o.type, y, E);
           case u: {
-            var A = o, R = A._payload, I = A._init;
+            var A = o, C = A._payload, D = A._init;
             try {
-              return Je(I(R), y, E);
+              return et(D(C), y, E);
             } catch {
             }
           }
         }
       return "";
     }
-    var et = Object.prototype.hasOwnProperty, zt = {}, Pt = w.ReactDebugCurrentFrame;
-    function tt(o) {
+    var tt = Object.prototype.hasOwnProperty, Pt = {}, Mt = w.ReactDebugCurrentFrame;
+    function rt(o) {
       if (o) {
-        var y = o._owner, E = Je(o.type, o._source, y ? y.type : null);
-        Pt.setExtraStackFrame(E);
+        var y = o._owner, E = et(o.type, o._source, y ? y.type : null);
+        Mt.setExtraStackFrame(E);
       } else
-        Pt.setExtraStackFrame(null);
+        Mt.setExtraStackFrame(null);
     }
-    function Tr(o, y, E, A, R) {
+    function jr(o, y, E, A, C) {
       {
-        var I = Function.call.bind(et);
+        var D = Function.call.bind(tt);
         for (var j in o)
-          if (I(o, j)) {
+          if (D(o, j)) {
             var T = void 0;
             try {
               if (typeof o[j] != "function") {
@@ -351,13 +352,13 @@ function hn() {
             } catch (U) {
               T = U;
             }
-            T && !(T instanceof Error) && (tt(R), S("%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).", A || "React class", E, j, typeof T), tt(null)), T instanceof Error && !(T.message in zt) && (zt[T.message] = !0, tt(R), S("Failed %s type: %s", E, T.message), tt(null));
+            T && !(T instanceof Error) && (rt(C), S("%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).", A || "React class", E, j, typeof T), rt(null)), T instanceof Error && !(T.message in Pt) && (Pt[T.message] = !0, rt(C), S("Failed %s type: %s", E, T.message), rt(null));
           }
       }
     }
-    var jr = Array.isArray;
-    function yt(o) {
-      return jr(o);
+    var Cr = Array.isArray;
+    function St(o) {
+      return Cr(o);
     }
     function Rr(o) {
       {
@@ -367,51 +368,51 @@ function hn() {
     }
     function Or(o) {
       try {
-        return Mt(o), !1;
+        return Bt(o), !1;
       } catch {
         return !0;
       }
     }
-    function Mt(o) {
+    function Bt(o) {
       return "" + o;
     }
-    function Bt(o) {
+    function Ut(o) {
       if (Or(o))
-        return S("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Rr(o)), Mt(o);
+        return S("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Rr(o)), Bt(o);
     }
-    var Be = w.ReactCurrentOwner, Cr = {
+    var Ue = w.ReactCurrentOwner, Ir = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, Ut, Gt, St;
-    St = {};
+    }, Gt, Ht, xt;
+    xt = {};
     function Dr(o) {
-      if (et.call(o, "ref")) {
+      if (tt.call(o, "ref")) {
         var y = Object.getOwnPropertyDescriptor(o, "ref").get;
         if (y && y.isReactWarning)
           return !1;
       }
       return o.ref !== void 0;
     }
-    function Ir(o) {
-      if (et.call(o, "key")) {
+    function Lr(o) {
+      if (tt.call(o, "key")) {
         var y = Object.getOwnPropertyDescriptor(o, "key").get;
         if (y && y.isReactWarning)
           return !1;
       }
       return o.key !== void 0;
     }
-    function Lr(o, y) {
-      if (typeof o.ref == "string" && Be.current && y && Be.current.stateNode !== y) {
-        var E = B(Be.current.type);
-        St[E] || (S('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', B(Be.current.type), o.ref), St[E] = !0);
+    function Fr(o, y) {
+      if (typeof o.ref == "string" && Ue.current && y && Ue.current.stateNode !== y) {
+        var E = B(Ue.current.type);
+        xt[E] || (S('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', B(Ue.current.type), o.ref), xt[E] = !0);
       }
     }
-    function Fr(o, y) {
+    function Nr(o, y) {
       {
         var E = function() {
-          Ut || (Ut = !0, S("%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)", y));
+          Gt || (Gt = !0, S("%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)", y));
         };
         E.isReactWarning = !0, Object.defineProperty(o, "key", {
           get: E,
@@ -419,10 +420,10 @@ function hn() {
         });
       }
     }
-    function Nr(o, y) {
+    function $r(o, y) {
       {
         var E = function() {
-          Gt || (Gt = !0, S("%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)", y));
+          Ht || (Ht = !0, S("%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)", y));
         };
         E.isReactWarning = !0, Object.defineProperty(o, "ref", {
           get: E,
@@ -430,7 +431,7 @@ function hn() {
         });
       }
     }
-    var $r = function(o, y, E, A, R, I, j) {
+    var zr = function(o, y, E, A, C, D, j) {
       var T = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
@@ -440,7 +441,7 @@ function hn() {
         ref: E,
         props: j,
         // Record the component responsible for creating this element.
-        _owner: I
+        _owner: D
       };
       return T._store = {}, Object.defineProperty(T._store, "validated", {
         configurable: !1,
@@ -456,44 +457,44 @@ function hn() {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: R
+        value: C
       }), Object.freeze && (Object.freeze(T.props), Object.freeze(T)), T;
     };
-    function zr(o, y, E, A, R) {
+    function Pr(o, y, E, A, C) {
       {
-        var I, j = {}, T = null, ne = null;
-        E !== void 0 && (Bt(E), T = "" + E), Ir(y) && (Bt(y.key), T = "" + y.key), Dr(y) && (ne = y.ref, Lr(y, R));
-        for (I in y)
-          et.call(y, I) && !Cr.hasOwnProperty(I) && (j[I] = y[I]);
+        var D, j = {}, T = null, ne = null;
+        E !== void 0 && (Ut(E), T = "" + E), Lr(y) && (Ut(y.key), T = "" + y.key), Dr(y) && (ne = y.ref, Fr(y, C));
+        for (D in y)
+          tt.call(y, D) && !Ir.hasOwnProperty(D) && (j[D] = y[D]);
         if (o && o.defaultProps) {
           var U = o.defaultProps;
-          for (I in U)
-            j[I] === void 0 && (j[I] = U[I]);
+          for (D in U)
+            j[D] === void 0 && (j[D] = U[D]);
         }
         if (T || ne) {
           var Y = typeof o == "function" ? o.displayName || o.name || "Unknown" : o;
-          T && Fr(j, Y), ne && Nr(j, Y);
+          T && Nr(j, Y), ne && $r(j, Y);
         }
-        return $r(o, T, ne, R, A, Be.current, j);
+        return zr(o, T, ne, C, A, Ue.current, j);
       }
     }
-    var xt = w.ReactCurrentOwner, Ht = w.ReactDebugCurrentFrame;
-    function Ce(o) {
+    var wt = w.ReactCurrentOwner, qt = w.ReactDebugCurrentFrame;
+    function Oe(o) {
       if (o) {
-        var y = o._owner, E = Je(o.type, o._source, y ? y.type : null);
-        Ht.setExtraStackFrame(E);
+        var y = o._owner, E = et(o.type, o._source, y ? y.type : null);
+        qt.setExtraStackFrame(E);
       } else
-        Ht.setExtraStackFrame(null);
+        qt.setExtraStackFrame(null);
     }
-    var wt;
-    wt = !1;
-    function Et(o) {
+    var Et;
+    Et = !1;
+    function _t(o) {
       return typeof o == "object" && o !== null && o.$$typeof === t;
     }
-    function qt() {
+    function Yt() {
       {
-        if (xt.current) {
-          var o = B(xt.current.type);
+        if (wt.current) {
+          var o = B(wt.current.type);
           if (o)
             return `
 
@@ -502,7 +503,7 @@ Check the render method of \`` + o + "`.";
         return "";
       }
     }
-    function Pr(o) {
+    function Mr(o) {
       {
         if (o !== void 0) {
           var y = o.fileName.replace(/^.*[\\\/]/, ""), E = o.lineNumber;
@@ -513,10 +514,10 @@ Check your code at ` + y + ":" + E + ".";
         return "";
       }
     }
-    var Yt = {};
-    function Mr(o) {
+    var Vt = {};
+    function Br(o) {
       {
-        var y = qt();
+        var y = Yt();
         if (!y) {
           var E = typeof o == "string" ? o : o.displayName || o.name;
           E && (y = `
@@ -526,39 +527,39 @@ Check the top-level render call using <` + E + ">.");
         return y;
       }
     }
-    function Vt(o, y) {
+    function Wt(o, y) {
       {
         if (!o._store || o._store.validated || o.key != null)
           return;
         o._store.validated = !0;
-        var E = Mr(y);
-        if (Yt[E])
+        var E = Br(y);
+        if (Vt[E])
           return;
-        Yt[E] = !0;
+        Vt[E] = !0;
         var A = "";
-        o && o._owner && o._owner !== xt.current && (A = " It was passed a child from " + B(o._owner.type) + "."), Ce(o), S('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', E, A), Ce(null);
+        o && o._owner && o._owner !== wt.current && (A = " It was passed a child from " + B(o._owner.type) + "."), Oe(o), S('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', E, A), Oe(null);
       }
     }
-    function Wt(o, y) {
+    function Kt(o, y) {
       {
         if (typeof o != "object")
           return;
-        if (yt(o))
+        if (St(o))
           for (var E = 0; E < o.length; E++) {
             var A = o[E];
-            Et(A) && Vt(A, y);
+            _t(A) && Wt(A, y);
           }
-        else if (Et(o))
+        else if (_t(o))
           o._store && (o._store.validated = !0);
         else if (o) {
-          var R = x(o);
-          if (typeof R == "function" && R !== o.entries)
-            for (var I = R.call(o), j; !(j = I.next()).done; )
-              Et(j.value) && Vt(j.value, y);
+          var C = x(o);
+          if (typeof C == "function" && C !== o.entries)
+            for (var D = C.call(o), j; !(j = D.next()).done; )
+              _t(j.value) && Wt(j.value, y);
         }
       }
     }
-    function Br(o) {
+    function Ur(o) {
       {
         var y = o.type;
         if (y == null || typeof y == "string")
@@ -574,70 +575,70 @@ Check the top-level render call using <` + E + ">.");
           return;
         if (E) {
           var A = B(y);
-          Tr(E, o.props, "prop", A, o);
-        } else if (y.PropTypes !== void 0 && !wt) {
-          wt = !0;
-          var R = B(y);
-          S("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", R || "Unknown");
+          jr(E, o.props, "prop", A, o);
+        } else if (y.PropTypes !== void 0 && !Et) {
+          Et = !0;
+          var C = B(y);
+          S("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", C || "Unknown");
         }
         typeof y.getDefaultProps == "function" && !y.getDefaultProps.isReactClassApproved && S("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Ur(o) {
+    function Gr(o) {
       {
         for (var y = Object.keys(o.props), E = 0; E < y.length; E++) {
           var A = y[E];
           if (A !== "children" && A !== "key") {
-            Ce(o), S("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", A), Ce(null);
+            Oe(o), S("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", A), Oe(null);
             break;
           }
         }
-        o.ref !== null && (Ce(o), S("Invalid attribute `ref` supplied to `React.Fragment`."), Ce(null));
+        o.ref !== null && (Oe(o), S("Invalid attribute `ref` supplied to `React.Fragment`."), Oe(null));
       }
     }
-    function Kt(o, y, E, A, R, I) {
+    function Zt(o, y, E, A, C, D) {
       {
         var j = te(o);
         if (!j) {
           var T = "";
           (o === void 0 || typeof o == "object" && o !== null && Object.keys(o).length === 0) && (T += " 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 ne = Pr(R);
-          ne ? T += ne : T += qt();
+          var ne = Mr(C);
+          ne ? T += ne : T += Yt();
           var U;
-          o === null ? U = "null" : yt(o) ? U = "array" : o !== void 0 && o.$$typeof === t ? (U = "<" + (B(o.type) || "Unknown") + " />", T = " Did you accidentally export a JSX literal instead of a component?") : U = typeof o, S("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", U, T);
+          o === null ? U = "null" : St(o) ? U = "array" : o !== void 0 && o.$$typeof === t ? (U = "<" + (B(o.type) || "Unknown") + " />", T = " Did you accidentally export a JSX literal instead of a component?") : U = typeof o, S("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", U, T);
         }
-        var Y = zr(o, y, E, R, I);
+        var Y = Pr(o, y, E, C, D);
         if (Y == null)
           return Y;
         if (j) {
           var se = y.children;
           if (se !== void 0)
             if (A)
-              if (yt(se)) {
-                for (var De = 0; De < se.length; De++)
-                  Wt(se[De], o);
+              if (St(se)) {
+                for (var Ie = 0; Ie < se.length; Ie++)
+                  Kt(se[Ie], o);
                 Object.freeze && Object.freeze(se);
               } else
                 S("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
-              Wt(se, o);
+              Kt(se, o);
         }
-        return o === n ? Ur(Y) : Br(Y), Y;
+        return o === n ? Gr(Y) : Ur(Y), Y;
       }
     }
-    function Gr(o, y, E) {
-      return Kt(o, y, E, !0);
-    }
     function Hr(o, y, E) {
-      return Kt(o, y, E, !1);
+      return Zt(o, y, E, !0);
     }
-    var qr = Hr, Yr = Gr;
-    Ge.Fragment = n, Ge.jsx = qr, Ge.jsxs = Yr;
-  }()), Ge;
+    function qr(o, y, E) {
+      return Zt(o, y, E, !1);
+    }
+    var Yr = qr, Vr = Hr;
+    He.Fragment = n, He.jsx = Yr, He.jsxs = Vr;
+  }()), He;
 }
-process.env.NODE_ENV === "production" ? jt.exports = gn() : jt.exports = hn();
-var a = jt.exports;
-function mn(e) {
+process.env.NODE_ENV === "production" ? Ct.exports = mn() : Ct.exports = bn();
+var a = Ct.exports;
+function vn(e) {
   e = e || {};
   const t = Object.keys(e).sort(), r = [];
   for (let n = 0; n < t.length; n++) {
@@ -654,11 +655,11 @@ function mn(e) {
   }
   return r.sort().join("&");
 }
-function bn(e, t) {
-  let r = mn(e);
-  return r += "&key=" + t, an.MD5(r).toString().toUpperCase();
+function yn(e, t) {
+  let r = vn(e);
+  return r += "&key=" + t, sn.MD5(r).toString().toUpperCase();
 }
-class vn {
+class Sn {
   constructor() {
     this.type = "default_api_client", this.baseURL = "http://localhost:31200", this.app_id = "", this.app_secret = "";
   }
@@ -669,7 +670,7 @@ class vn {
     return {
       app_id: this.app_id,
       nonce_str: r,
-      sign: bn({
+      sign: yn({
         app_id: this.app_id,
         nonce_str: r,
         ...t
@@ -679,7 +680,10 @@ class vn {
   getRequest(t, r) {
     return (n, i, s, l) => {
       const d = this.buildHeader(s), p = this.buildAxiosConfig(t, n, i, s, d, r);
-      return sn(p).then((f) => l ? f : f.data).catch((f) => Promise.reject(f));
+      return ln(p).then((f) => l ? f : f.data).catch((f) => {
+        const h = on.get(f, "response.data.detail.message", f.message);
+        return Promise.reject(new Error(h));
+      });
     };
   }
   get(t) {
@@ -712,7 +716,7 @@ class vn {
     };
   }
 }
-class yn {
+class xn {
   constructor(t) {
     this.implementation = t;
   }
@@ -729,11 +733,11 @@ class yn {
     return this.getRequest("PUT", t);
   }
 }
-const Ye = new vn(), Sn = new yn(Ye), G = Sn;
-function Xe(e) {
-  Ye.baseURL !== e.apiBaseURL && (Ye.baseURL = e.apiBaseURL), e.app_id && (Ye.app_id = e.app_id), e.app_secret && (Ye.app_secret = e.app_secret);
+const Ve = new Sn(), wn = new xn(Ve), G = wn;
+function Qe(e) {
+  Ve.baseURL !== e.apiBaseURL && (Ve.baseURL = e.apiBaseURL), e.app_id && (Ve.app_id = e.app_id), e.app_secret && (Ve.app_secret = e.app_secret);
 }
-const xn = {
+const En = {
   login: async (e, t) => {
     const r = {
       name: e,
@@ -789,7 +793,7 @@ const xn = {
         id: e
       }, {});
   }
-}, wn = {
+}, _n = {
   list: async () => await G.post()("/api/key/list", {
     filter: {
       search: ""
@@ -813,7 +817,7 @@ const xn = {
         id: e
       }, {});
   }
-}, En = {
+}, An = {
   list: async () => await G.post()("/datasource/list", {
     filter: {},
     sort: [{
@@ -839,11 +843,11 @@ const xn = {
       id: e
     }, {});
   }
-}, _n = {
+}, kn = {
   list: async () => await G.get()("/role/list", {}, {})
 };
-var pr = 60, fr = pr * 60, gr = fr * 24, An = gr * 7, ze = 1e3, kt = pr * ze, Jt = fr * ze, kn = gr * ze, Tn = An * ze, It = "millisecond", Le = "second", Fe = "minute", Ne = "hour", ve = "day", nt = "week", le = "month", hr = "quarter", ye = "year", $e = "date", jn = "YYYY-MM-DDTHH:mm:ssZ", er = "Invalid Date", Rn = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, On = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
-const Cn = {
+var fr = 60, gr = fr * 60, hr = gr * 24, Tn = hr * 7, ze = 1e3, Tt = fr * ze, er = gr * ze, jn = hr * ze, Cn = Tn * ze, Lt = "millisecond", Le = "second", Fe = "minute", Ne = "hour", ve = "day", at = "week", le = "month", mr = "quarter", ye = "year", $e = "date", Rn = "YYYY-MM-DDTHH:mm:ssZ", tr = "Invalid Date", On = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, In = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+const Dn = {
   name: "en",
   weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
   months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
@@ -855,49 +859,49 @@ const Cn = {
 var Rt = function(t, r, n) {
   var i = String(t);
   return !i || i.length >= r ? t : "" + Array(r + 1 - i.length).join(n) + t;
-}, Dn = function(t) {
+}, Ln = function(t) {
   var r = -t.utcOffset(), n = Math.abs(r), i = Math.floor(n / 60), s = n % 60;
   return (r <= 0 ? "+" : "-") + Rt(i, 2, "0") + ":" + Rt(s, 2, "0");
-}, In = function e(t, r) {
+}, Fn = function e(t, r) {
   if (t.date() < r.date())
     return -e(r, t);
   var n = (r.year() - t.year()) * 12 + (r.month() - t.month()), i = t.clone().add(n, le), s = r - i < 0, l = t.clone().add(n + (s ? -1 : 1), le);
   return +(-(n + (r - i) / (s ? i - l : l - i)) || 0);
-}, Ln = function(t) {
+}, Nn = function(t) {
   return t < 0 ? Math.ceil(t) || 0 : Math.floor(t);
-}, Fn = function(t) {
+}, $n = function(t) {
   var r = {
     M: le,
     y: ye,
-    w: nt,
+    w: at,
     d: ve,
     D: $e,
     h: Ne,
     m: Fe,
     s: Le,
-    ms: It,
-    Q: hr
+    ms: Lt,
+    Q: mr
   };
   return r[t] || String(t || "").toLowerCase().replace(/s$/, "");
-}, Nn = function(t) {
+}, zn = function(t) {
   return t === void 0;
 };
-const $n = {
+const Pn = {
   s: Rt,
-  z: Dn,
-  m: In,
-  a: Ln,
-  p: Fn,
-  u: Nn
+  z: Ln,
+  m: Fn,
+  a: Nn,
+  p: $n,
+  u: zn
 };
-var We = "en", Ae = {};
-Ae[We] = Cn;
-var Lt = function(t) {
-  return t instanceof bt;
-}, it = function e(t, r, n) {
+var Ke = "en", Ae = {};
+Ae[Ke] = Dn;
+var Ft = function(t) {
+  return t instanceof vt;
+}, st = function e(t, r, n) {
   var i;
   if (!t)
-    return We;
+    return Ke;
   if (typeof t == "string") {
     var s = t.toLowerCase();
     Ae[s] && (i = s), r && (Ae[s] = r, i = s);
@@ -908,13 +912,13 @@ var Lt = function(t) {
     var d = t.name;
     Ae[d] = t, i = d;
   }
-  return !n && i && (We = i), i || !n && We;
+  return !n && i && (Ke = i), i || !n && Ke;
 }, K = function(t, r) {
-  if (Lt(t))
+  if (Ft(t))
     return t.clone();
   var n = typeof r == "object" ? r : {};
-  return n.date = t, n.args = arguments, new bt(n);
-}, zn = function(t, r) {
+  return n.date = t, n.args = arguments, new vt(n);
+}, Mn = function(t, r) {
   return K(t, {
     locale: r.$L,
     utc: r.$u,
@@ -922,40 +926,40 @@ var Lt = function(t) {
     $offset: r.$offset
     // todo: refactor; do not use this.$offset in you code
   });
-}, C = $n;
-C.l = it;
-C.i = Lt;
-C.w = zn;
-var Pn = function(t) {
+}, O = Pn;
+O.l = st;
+O.i = Ft;
+O.w = Mn;
+var Bn = function(t) {
   var r = t.date, n = t.utc;
   if (r === null)
     return /* @__PURE__ */ new Date(NaN);
-  if (C.u(r))
+  if (O.u(r))
     return /* @__PURE__ */ new Date();
   if (r instanceof Date)
     return new Date(r);
   if (typeof r == "string" && !/Z$/i.test(r)) {
-    var i = r.match(Rn);
+    var i = r.match(On);
     if (i) {
       var s = i[2] - 1 || 0, l = (i[7] || "0").substring(0, 3);
       return n ? new Date(Date.UTC(i[1], s, i[3] || 1, i[4] || 0, i[5] || 0, i[6] || 0, l)) : new Date(i[1], s, i[3] || 1, i[4] || 0, i[5] || 0, i[6] || 0, l);
     }
   }
   return new Date(r);
-}, bt = /* @__PURE__ */ function() {
+}, vt = /* @__PURE__ */ function() {
   function e(r) {
-    this.$L = it(r.locale, null, !0), this.parse(r);
+    this.$L = st(r.locale, null, !0), this.parse(r);
   }
   var t = e.prototype;
   return t.parse = function(n) {
-    this.$d = Pn(n), this.$x = n.x || {}, this.init();
+    this.$d = Bn(n), this.$x = n.x || {}, this.init();
   }, t.init = function() {
     var n = this.$d;
     this.$y = n.getFullYear(), this.$M = n.getMonth(), this.$D = n.getDate(), this.$W = n.getDay(), this.$H = n.getHours(), this.$m = n.getMinutes(), this.$s = n.getSeconds(), this.$ms = n.getMilliseconds();
   }, t.$utils = function() {
-    return C;
+    return O;
   }, t.isValid = function() {
-    return this.$d.toString() !== er;
+    return this.$d.toString() !== tr;
   }, t.isSame = function(n, i) {
     var s = K(n);
     return this.startOf(i) <= s && s <= this.endOf(i);
@@ -964,18 +968,18 @@ var Pn = function(t) {
   }, t.isBefore = function(n, i) {
     return this.endOf(i) < K(n);
   }, t.$g = function(n, i, s) {
-    return C.u(n) ? this[i] : this.set(s, n);
+    return O.u(n) ? this[i] : this.set(s, n);
   }, t.unix = function() {
     return Math.floor(this.valueOf() / 1e3);
   }, t.valueOf = function() {
     return this.$d.getTime();
   }, t.startOf = function(n, i) {
-    var s = this, l = C.u(i) ? !0 : i, d = C.p(n), p = function(w, S) {
-      var _ = C.w(s.$u ? Date.UTC(s.$y, S, w) : new Date(s.$y, S, w), s);
+    var s = this, l = O.u(i) ? !0 : i, d = O.p(n), p = function(w, S) {
+      var _ = O.w(s.$u ? Date.UTC(s.$y, S, w) : new Date(s.$y, S, w), s);
       return l ? _ : _.endOf(ve);
     }, f = function(w, S) {
       var _ = [0, 0, 0, 0], k = [23, 59, 59, 999];
-      return C.w(s.toDate()[w].apply(
+      return O.w(s.toDate()[w].apply(
         // eslint-disable-line prefer-spread
         s.toDate("s"),
         (l ? _ : k).slice(S)
@@ -986,7 +990,7 @@ var Pn = function(t) {
         return l ? p(1, 0) : p(31, 11);
       case le:
         return l ? p(1, c) : p(0, c + 1);
-      case nt: {
+      case at: {
         var v = this.$locale().weekStart || 0, m = (h < v ? h + 7 : h) - v;
         return p(l ? u - m : u + (6 - m), c);
       }
@@ -1005,7 +1009,7 @@ var Pn = function(t) {
   }, t.endOf = function(n) {
     return this.startOf(n, !1);
   }, t.$set = function(n, i) {
-    var s, l = C.p(n), d = "set" + (this.$u ? "UTC" : ""), p = (s = {}, s[ve] = d + "Date", s[$e] = d + "Date", s[le] = d + "Month", s[ye] = d + "FullYear", s[Ne] = d + "Hours", s[Fe] = d + "Minutes", s[Le] = d + "Seconds", s[It] = d + "Milliseconds", s)[l], f = l === ve ? this.$D + (i - this.$W) : i;
+    var s, l = O.p(n), d = "set" + (this.$u ? "UTC" : ""), p = (s = {}, s[ve] = d + "Date", s[$e] = d + "Date", s[le] = d + "Month", s[ye] = d + "FullYear", s[Ne] = d + "Hours", s[Fe] = d + "Minutes", s[Le] = d + "Seconds", s[Lt] = d + "Milliseconds", s)[l], f = l === ve ? this.$D + (i - this.$W) : i;
     if (l === le || l === ye) {
       var h = this.clone().set($e, 1);
       h.$d[p](f), h.init(), this.$d = h.set($e, Math.min(this.$D, h.daysInMonth())).$d;
@@ -1015,13 +1019,13 @@ var Pn = function(t) {
   }, t.set = function(n, i) {
     return this.clone().$set(n, i);
   }, t.get = function(n) {
-    return this[C.p(n)]();
+    return this[O.p(n)]();
   }, t.add = function(n, i) {
     var s = this, l;
     n = Number(n);
-    var d = C.p(i), p = function(u) {
+    var d = O.p(i), p = function(u) {
       var g = K(s);
-      return C.w(g.date(g.date() + Math.round(u * n)), s);
+      return O.w(g.date(g.date() + Math.round(u * n)), s);
     };
     if (d === le)
       return this.set(le, this.$M + n);
@@ -1029,20 +1033,20 @@ var Pn = function(t) {
       return this.set(ye, this.$y + n);
     if (d === ve)
       return p(1);
-    if (d === nt)
+    if (d === at)
       return p(7);
-    var f = (l = {}, l[Fe] = kt, l[Ne] = Jt, l[Le] = ze, l)[d] || 1, h = this.$d.getTime() + n * f;
-    return C.w(h, this);
+    var f = (l = {}, l[Fe] = Tt, l[Ne] = er, l[Le] = ze, l)[d] || 1, h = this.$d.getTime() + n * f;
+    return O.w(h, this);
   }, t.subtract = function(n, i) {
     return this.add(n * -1, i);
   }, t.format = function(n) {
     var i = this, s = this.$locale();
     if (!this.isValid())
-      return s.invalidDate || er;
-    var l = n || jn, d = C.z(this), p = this.$H, f = this.$m, h = this.$M, c = s.weekdays, u = s.months, g = s.meridiem, v = function(_, k, H, J) {
+      return s.invalidDate || tr;
+    var l = n || Rn, d = O.z(this), p = this.$H, f = this.$m, h = this.$M, c = s.weekdays, u = s.months, g = s.meridiem, v = function(_, k, H, J) {
       return _ && (_[k] || _(i, l)) || H[k].slice(0, J);
     }, m = function(_) {
-      return C.s(p % 12 || 12, _, "0");
+      return O.s(p % 12 || 12, _, "0");
     }, x = g || function(S, _, k) {
       var H = S < 12 ? "AM" : "PM";
       return k ? H.toLowerCase() : H;
@@ -1051,11 +1055,11 @@ var Pn = function(t) {
         case "YY":
           return String(i.$y).slice(-2);
         case "YYYY":
-          return C.s(i.$y, 4, "0");
+          return O.s(i.$y, 4, "0");
         case "M":
           return h + 1;
         case "MM":
-          return C.s(h + 1, 2, "0");
+          return O.s(h + 1, 2, "0");
         case "MMM":
           return v(s.monthsShort, h, u, 3);
         case "MMMM":
@@ -1063,7 +1067,7 @@ var Pn = function(t) {
         case "D":
           return i.$D;
         case "DD":
-          return C.s(i.$D, 2, "0");
+          return O.s(i.$D, 2, "0");
         case "d":
           return String(i.$W);
         case "dd":
@@ -1075,7 +1079,7 @@ var Pn = function(t) {
         case "H":
           return String(p);
         case "HH":
-          return C.s(p, 2, "0");
+          return O.s(p, 2, "0");
         case "h":
           return m(1);
         case "hh":
@@ -1087,26 +1091,26 @@ var Pn = function(t) {
         case "m":
           return String(f);
         case "mm":
-          return C.s(f, 2, "0");
+          return O.s(f, 2, "0");
         case "s":
           return String(i.$s);
         case "ss":
-          return C.s(i.$s, 2, "0");
+          return O.s(i.$s, 2, "0");
         case "SSS":
-          return C.s(i.$ms, 3, "0");
+          return O.s(i.$ms, 3, "0");
         case "Z":
           return d;
       }
       return null;
     };
-    return l.replace(On, function(S, _) {
+    return l.replace(In, function(S, _) {
       return _ || w(S) || d.replace(":", "");
     });
   }, t.utcOffset = function() {
     return -Math.round(this.$d.getTimezoneOffset() / 15) * 15;
   }, t.diff = function(n, i, s) {
-    var l = this, d = C.p(i), p = K(n), f = (p.utcOffset() - this.utcOffset()) * kt, h = this - p, c = function() {
-      return C.m(l, p);
+    var l = this, d = O.p(i), p = K(n), f = (p.utcOffset() - this.utcOffset()) * Tt, h = this - p, c = function() {
+      return O.m(l, p);
     }, u;
     switch (d) {
       case ye:
@@ -1115,20 +1119,20 @@ var Pn = function(t) {
       case le:
         u = c();
         break;
-      case hr:
+      case mr:
         u = c() / 3;
         break;
-      case nt:
-        u = (h - f) / Tn;
+      case at:
+        u = (h - f) / Cn;
         break;
       case ve:
-        u = (h - f) / kn;
+        u = (h - f) / jn;
         break;
       case Ne:
-        u = h / Jt;
+        u = h / er;
         break;
       case Fe:
-        u = h / kt;
+        u = h / Tt;
         break;
       case Le:
         u = h / ze;
@@ -1137,7 +1141,7 @@ var Pn = function(t) {
         u = h;
         break;
     }
-    return s ? u : C.a(u);
+    return s ? u : O.a(u);
   }, t.daysInMonth = function() {
     return this.endOf(le).$D;
   }, t.$locale = function() {
@@ -1145,10 +1149,10 @@ var Pn = function(t) {
   }, t.locale = function(n, i) {
     if (!n)
       return this.$L;
-    var s = this.clone(), l = it(n, i, !0);
+    var s = this.clone(), l = st(n, i, !0);
     return l && (s.$L = l), s;
   }, t.clone = function() {
-    return C.w(this.$d, this);
+    return O.w(this.$d, this);
   }, t.toDate = function() {
     return new Date(this.valueOf());
   }, t.toJSON = function() {
@@ -1158,25 +1162,25 @@ var Pn = function(t) {
   }, t.toString = function() {
     return this.$d.toUTCString();
   }, e;
-}(), mr = bt.prototype;
-K.prototype = mr;
-[["$ms", It], ["$s", Le], ["$m", Fe], ["$H", Ne], ["$W", ve], ["$M", le], ["$y", ye], ["$D", $e]].forEach(function(e) {
-  mr[e[1]] = function(t) {
+}(), br = vt.prototype;
+K.prototype = br;
+[["$ms", Lt], ["$s", Le], ["$m", Fe], ["$H", Ne], ["$W", ve], ["$M", le], ["$y", ye], ["$D", $e]].forEach(function(e) {
+  br[e[1]] = function(t) {
     return this.$g(t, e[0], e[1]);
   };
 });
 K.extend = function(e, t) {
-  return e.$i || (e(t, bt, K), e.$i = !0), K;
+  return e.$i || (e(t, vt, K), e.$i = !0), K;
 };
-K.locale = it;
-K.isDayjs = Lt;
+K.locale = st;
+K.isDayjs = Ft;
 K.unix = function(e) {
   return K(e * 1e3);
 };
-K.en = Ae[We];
+K.en = Ae[Ke];
 K.Ls = Ae;
 K.p = {};
-const Mn = {
+const Un = {
   list: async ({
     pagination: e
   }, t) => {
@@ -1200,11 +1204,11 @@ const Mn = {
     id: e
   }, {})
 }, Z = {
-  datasource: En,
-  account: xn,
-  role: _n,
-  api_key: wn,
-  sql_snippet: Mn
+  datasource: An,
+  account: En,
+  role: kn,
+  api_key: _n,
+  sql_snippet: Un
 }, de = {
   size: "sm",
   spacing: "md",
@@ -1212,7 +1216,7 @@ const Mn = {
     size: "xs"
   }
 };
-function Bn({
+function Gn({
   submit: e,
   styles: t = de,
   type: r
@@ -1234,41 +1238,41 @@ function Bn({
       }
     }
   });
-  return Ct(() => {
+  return It(() => {
     i("type", r);
   }, [i, r]), /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: s(e), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "key", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "key", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Name", placeholder: "A unique name", ...l }) }),
-    /* @__PURE__ */ a.jsx(ct, { label: "Connection Info", labelPosition: "center" }),
+    /* @__PURE__ */ a.jsx(dt, { label: "Connection Info", labelPosition: "center" }),
     /* @__PURE__ */ a.jsxs(z, { grow: !0, children: [
-      /* @__PURE__ */ a.jsx(O, { name: "config.host", control: n, render: ({
+      /* @__PURE__ */ a.jsx(R, { name: "config.host", control: n, render: ({
         field: l
       }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Host", sx: {
         flexGrow: 1
       }, ...l }) }),
-      /* @__PURE__ */ a.jsx(O, { name: "config.port", control: n, render: ({
+      /* @__PURE__ */ a.jsx(R, { name: "config.port", control: n, render: ({
         field: l
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ a.jsx(Wr, { mb: t.spacing, size: t.size, required: !0, label: "Port", hideControls: !0, sx: {
+        /* @__PURE__ */ a.jsx(Kr, { mb: t.spacing, size: t.size, required: !0, label: "Port", hideControls: !0, sx: {
           width: "8em"
         }, ...l })
       ) })
     ] }),
-    /* @__PURE__ */ a.jsx(O, { name: "config.username", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "config.username", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Username", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "config.password", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "config.password", control: n, render: ({
       field: l
-    }) => /* @__PURE__ */ a.jsx(dt, { mb: t.spacing, size: t.size, required: !0, label: "Password", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "config.database", control: n, render: ({
+    }) => /* @__PURE__ */ a.jsx(pt, { mb: t.spacing, size: t.size, required: !0, label: "Password", ...l }) }),
+    /* @__PURE__ */ a.jsx(R, { name: "config.database", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Database", ...l }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: t.button.size, children: "Submit" }) })
   ] }) });
 }
-const Un = ({
+const Hn = ({
   value: e,
   onChange: t
 }) => {
@@ -1277,12 +1281,12 @@ const Un = ({
   };
   return /* @__PURE__ */ a.jsx(X, { sx: {
     position: "relative"
-  }, children: /* @__PURE__ */ a.jsx(cr, { height: "500px", defaultLanguage: "javascript", value: e, onChange: r, theme: "vs-dark", options: {
+  }, children: /* @__PURE__ */ a.jsx(pr, { height: "500px", defaultLanguage: "javascript", value: e, onChange: r, theme: "vs-dark", options: {
     minimap: {
       enabled: !1
     }
   } }) });
-}, st = ut(({
+}, ot = ct(({
   value: e,
   onChange: t,
   label: r,
@@ -1293,37 +1297,37 @@ const Un = ({
   const [d, {
     setTrue: p,
     setFalse: f
-  }] = on(), [h, c] = or(e), u = () => {
+  }] = fn(), [h, c] = lr(e), u = () => {
     f(), t(h);
   }, g = () => {
     f(), c(e);
   }, v = () => {
     c(i);
   };
-  return Ct(() => {
+  return It(() => {
     c(e);
   }, [e]), /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(D, { variant: "filled", size: s.button.size, onClick: p, sx: {
+    /* @__PURE__ */ a.jsx(I, { variant: "filled", size: s.button.size, onClick: p, sx: {
       flexGrow: 1
     }, children: r }),
-    /* @__PURE__ */ a.jsx(xe, { size: 800, title: n, opened: d, onClose: f, closeOnClickOutside: !1, withCloseButton: !1, children: d && /* @__PURE__ */ a.jsxs(Ke, { children: [
-      /* @__PURE__ */ a.jsx(Un, { value: h, onChange: c }),
+    /* @__PURE__ */ a.jsx(xe, { size: 800, title: n, opened: d, onClose: f, closeOnClickOutside: !1, withCloseButton: !1, children: d && /* @__PURE__ */ a.jsxs(Ze, { children: [
+      /* @__PURE__ */ a.jsx(Hn, { value: h, onChange: c }),
       /* @__PURE__ */ a.jsxs(z, { position: "apart", children: [
-        /* @__PURE__ */ a.jsx(D, { onClick: v, color: "red", leftIcon: /* @__PURE__ */ a.jsx(tn, { size: 20 }), children: "Reset" }),
+        /* @__PURE__ */ a.jsx(I, { onClick: v, color: "red", leftIcon: /* @__PURE__ */ a.jsx(rn, { size: 20 }), children: "Reset" }),
         /* @__PURE__ */ a.jsxs(z, { position: "right", children: [
-          /* @__PURE__ */ a.jsx(D, { onClick: g, variant: "subtle", children: "Cancel" }),
-          /* @__PURE__ */ a.jsx(D, { onClick: u, children: "OK" })
+          /* @__PURE__ */ a.jsx(I, { onClick: g, variant: "subtle", children: "Cancel" }),
+          /* @__PURE__ */ a.jsx(I, { onClick: u, children: "OK" })
         ] })
       ] })
     ] }) })
   ] });
-}), rt = {
+}), nt = {
   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 Gn({
+function qn({
   submit: e,
   styles: t = de
 }) {
@@ -1338,47 +1342,47 @@ function Gn({
       config: {
         host: "",
         processing: {
-          pre: rt.pre,
-          post: rt.post
+          pre: nt.pre,
+          post: nt.post
         }
       }
     }
   });
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: i(e), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "key", control: r, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "key", control: r, render: ({
       field: s
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Name", placeholder: "A unique name", ...s }) }),
-    /* @__PURE__ */ a.jsx(ct, { label: "Connection Info", labelPosition: "center" }),
-    /* @__PURE__ */ a.jsx(O, { name: "config.host", control: r, render: ({
+    /* @__PURE__ */ a.jsx(dt, { label: "Connection Info", labelPosition: "center" }),
+    /* @__PURE__ */ a.jsx(R, { name: "config.host", control: r, render: ({
       field: s
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, label: "Base URL", sx: {
       flexGrow: 1
     }, ...s }) }),
     /* @__PURE__ */ a.jsxs(z, { grow: !0, children: [
-      /* @__PURE__ */ a.jsx(O, { name: "config.processing.pre", control: r, render: ({
+      /* @__PURE__ */ a.jsx(R, { name: "config.processing.pre", control: r, render: ({
         field: s
-      }) => /* @__PURE__ */ a.jsx(st, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: rt.pre, ...s, styles: t }) }),
-      /* @__PURE__ */ a.jsx(O, { name: "config.processing.post", control: r, render: ({
+      }) => /* @__PURE__ */ a.jsx(ot, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: nt.pre, ...s, styles: t }) }),
+      /* @__PURE__ */ a.jsx(R, { name: "config.processing.post", control: r, render: ({
         field: s
-      }) => /* @__PURE__ */ a.jsx(st, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: rt.post, ...s, styles: t }) })
+      }) => /* @__PURE__ */ a.jsx(ot, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: nt.post, ...s, styles: t }) })
     ] }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", size: t.button.size, children: "Save" }) })
   ] }) });
 }
-function Hn({
+function Yn({
   styles: e = de
 }) {
-  return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs(Kr, { mt: e.spacing, icon: /* @__PURE__ */ a.jsx(rn, { size: 16 }), children: [
+  return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs(Zr, { mt: e.spacing, icon: /* @__PURE__ */ a.jsx(nn, { size: 16 }), children: [
     "Only ",
     /* @__PURE__ */ a.jsx("b", { children: "SELECT" }),
     " privilege is needed."
   ] }) });
 }
-function qn({
+function Vn({
   postSubmit: e,
   styles: t = de
 }) {
-  const [r, n] = or("postgresql"), i = async ({
+  const [r, n] = lr("postgresql"), i = async ({
     type: d,
     key: p,
     config: f
@@ -1387,7 +1391,8 @@ function qn({
       id: "for-creating",
       title: "Pending",
       message: "Adding data source...",
-      loading: !0
+      loading: !0,
+      autoClose: !1
     });
     try {
       console.log({
@@ -1398,19 +1403,21 @@ function qn({
         id: "for-creating",
         title: "Successful",
         message: "Data source is added",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e();
     } catch (h) {
-      P({
+      console.error(h), P({
         id: "for-creating",
         title: "Failed",
         message: h.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   }, s = r === "postgresql" || r === "mysql", l = r === "http";
   return /* @__PURE__ */ a.jsxs(X, { mx: "auto", children: [
-    /* @__PURE__ */ a.jsx(Zr, { fullWidth: !0, mb: t.spacing, size: t.size, data: [{
+    /* @__PURE__ */ a.jsx(Xr, { fullWidth: !0, mb: t.spacing, size: t.size, data: [{
       label: "PostgreSQL",
       value: "postgresql"
     }, {
@@ -1420,12 +1427,12 @@ function qn({
       label: "HTTP",
       value: "http"
     }], value: r, onChange: (d) => n(d) }),
-    s && /* @__PURE__ */ a.jsx(Hn, { styles: t }),
-    s && /* @__PURE__ */ a.jsx(Bn, { submit: i, styles: t, type: r }),
-    l && /* @__PURE__ */ a.jsx(Gn, { submit: i, styles: t })
+    s && /* @__PURE__ */ a.jsx(Yn, { styles: t }),
+    s && /* @__PURE__ */ a.jsx(Gn, { submit: i, styles: t, type: r }),
+    l && /* @__PURE__ */ a.jsx(qn, { submit: i, styles: t })
   ] });
 }
-function Yn({
+function Wn({
   onSuccess: e,
   styles: t = de
 }) {
@@ -1435,42 +1442,44 @@ function Yn({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: r, onClose: () => n(!1), title: "Add a data source", trapFocus: !0, onDragStart: (d) => {
       d.stopPropagation();
-    }, children: /* @__PURE__ */ a.jsx(qn, { postSubmit: l, styles: t }) }),
-    /* @__PURE__ */ a.jsx(D, { size: t.button.size, onClick: i, leftIcon: /* @__PURE__ */ a.jsx(ht, { size: 20 }), children: "Add a Data Source" })
+    }, children: /* @__PURE__ */ a.jsx(Vn, { postSubmit: l, styles: t }) }),
+    /* @__PURE__ */ a.jsx(I, { size: t.button.size, onClick: i, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Add a Data Source" })
   ] });
 }
-const Vn = (e) => e.replace(/([^:])(\/\/+)/g, "$1/");
-function Wn(e) {
-  Ct(() => {
-    if (At.__getMonacoInstance())
+const Kn = (e) => e.replace(/([^:])(\/\/+)/g, "$1/");
+function Zn(e) {
+  It(() => {
+    if (kt.__getMonacoInstance())
       return;
     console.log("loading monaco for @devtable/settings-form");
-    const r = Vn(e);
-    At.config({
+    const r = Kn(e);
+    kt.config({
       paths: {
         vs: r
       }
-    }), At.init().then((n) => console.log("monaco instance:", n));
+    }), kt.init().then((n) => console.log("monaco instance:", n));
   }, []);
 }
-function Kn({
+function Xn({
   id: e,
   name: t,
   isProtected: r,
   onSuccess: n,
   styles: i = de
 }) {
-  const s = Ze(), l = async () => {
+  const s = Xe(), l = async () => {
     e && (oe({
       id: "for-deleting",
       title: "Pending",
       message: "Deleting data source...",
-      loading: !0
+      loading: !0,
+      autoClose: !1
     }), await Z.datasource.delete(e), P({
       id: "for-deleting",
       title: "Successful",
       message: `Data source [${t}] is deleted`,
-      color: "green"
+      color: "green",
+      autoClose: !0
     }), n());
   }, d = () => s.openConfirmModal({
     title: "Delete this data source?",
@@ -1482,21 +1491,21 @@ function Kn({
     onCancel: () => console.log("Cancel"),
     onConfirm: l
   });
-  return r ? /* @__PURE__ */ a.jsx(at, { withArrow: !0, events: {
+  return r ? /* @__PURE__ */ a.jsx(it, { withArrow: !0, events: {
     hover: !0,
     touch: !1,
     focus: !1
-  }, label: "This is a preset datasource, it can not be deleted", children: /* @__PURE__ */ a.jsx(D, { size: i.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(dr, { size: 16 }), sx: {
+  }, label: "This is a preset datasource, it can not be deleted", children: /* @__PURE__ */ a.jsx(I, { size: i.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(dr, { size: 16 }), sx: {
     transform: "none !important"
-  }, children: "Delete" }) }) : /* @__PURE__ */ a.jsx(D, { size: i.button.size, color: "red", onClick: d, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 16 }), children: "Delete" });
+  }, children: "Delete" }) }) : /* @__PURE__ */ a.jsx(I, { size: i.button.size, color: "red", onClick: d, leftIcon: /* @__PURE__ */ a.jsx(bt, { size: 16 }), children: "Delete" });
 }
-const tr = {
+const rr = {
   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 Zn({
+function Qn({
   name: e,
   config: t,
   submit: r,
@@ -1512,24 +1521,24 @@ function Zn({
   });
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: s(r), children: [
     /* @__PURE__ */ a.jsx(Q, { mb: n.spacing, size: n.size, required: !0, label: "Name", value: e, readOnly: !0 }),
-    /* @__PURE__ */ a.jsx(ct, { label: "Connection Info", labelPosition: "center" }),
-    /* @__PURE__ */ a.jsx(O, { name: "config.host", control: i, render: ({
+    /* @__PURE__ */ a.jsx(dt, { label: "Connection Info", labelPosition: "center" }),
+    /* @__PURE__ */ a.jsx(R, { name: "config.host", control: i, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: n.spacing, size: n.size, label: "Base URL", sx: {
       flexGrow: 1
     }, ...l }) }),
     /* @__PURE__ */ a.jsxs(z, { grow: !0, children: [
-      /* @__PURE__ */ a.jsx(O, { name: "config.processing.pre", control: i, render: ({
+      /* @__PURE__ */ a.jsx(R, { name: "config.processing.pre", control: i, render: ({
         field: l
-      }) => /* @__PURE__ */ a.jsx(st, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: tr.pre, ...l, styles: n }) }),
-      /* @__PURE__ */ a.jsx(O, { name: "config.processing.post", control: i, render: ({
+      }) => /* @__PURE__ */ a.jsx(ot, { label: "Pre Processing", modalTitle: "This function will run before sending the request (for scenarios like encryption)", defaultValue: rr.pre, ...l, styles: n }) }),
+      /* @__PURE__ */ a.jsx(R, { name: "config.processing.post", control: i, render: ({
         field: l
-      }) => /* @__PURE__ */ a.jsx(st, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: tr.post, ...l, styles: n }) })
+      }) => /* @__PURE__ */ a.jsx(ot, { label: "Post Processing", modalTitle: "This function will run after sending the request (for scenarios like decryption)", defaultValue: rr.post, ...l, styles: n }) })
     ] }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: n.button.size, children: "Save" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: n.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: n.button.size, children: "Submit" }) })
   ] }) });
 }
-function Xn({
+function Jn({
   dataSource: e,
   postSubmit: t,
   styles: r = de
@@ -1541,7 +1550,8 @@ function Xn({
       id: "for-updating",
       title: "Pending",
       message: "Editing data source...",
-      loading: !0
+      loading: !0,
+      autoClose: !1
     });
     try {
       console.log({
@@ -1550,20 +1560,22 @@ function Xn({
         id: "for-updating",
         title: "Successful",
         message: "Data source is updated",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), t();
     } catch (s) {
       P({
         id: "for-updating",
         title: "Failed",
         message: s.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
-  return e.config ? /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsx(Zn, { name: e.key, config: e.config, submit: n, styles: r }) }) : (console.error(new Error("unexpected empty config of a http datasource")), null);
+  return e.config ? /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsx(Qn, { name: e.key, config: e.config, submit: n, styles: r }) }) : (console.error(new Error("unexpected empty config of a http datasource")), null);
 }
-function Qn({
+function ea({
   dataSource: e,
   onSuccess: t,
   styles: r = de
@@ -1571,52 +1583,52 @@ function Qn({
   const [n, i] = F.useState(!1), s = () => i(!0), l = () => i(!1), d = () => {
     t(), l();
   };
-  return e.is_preset ? /* @__PURE__ */ a.jsx(at, { withArrow: !0, events: {
+  return e.is_preset ? /* @__PURE__ */ a.jsx(it, { withArrow: !0, events: {
     hover: !0,
     touch: !1,
     focus: !1
-  }, label: "This is a preset datasource, it can not be changed", children: /* @__PURE__ */ a.jsx(D, { size: r.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(dr, { size: 16 }), sx: {
+  }, label: "This is a preset datasource, it can not be changed", children: /* @__PURE__ */ a.jsx(I, { size: r.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(dr, { size: 16 }), sx: {
     transform: "none !important"
-  }, children: "Edit" }) }) : e.type !== "http" ? /* @__PURE__ */ a.jsx(at, { withArrow: !0, events: {
+  }, children: "Edit" }) }) : e.type !== "http" ? /* @__PURE__ */ a.jsx(it, { withArrow: !0, events: {
     hover: !0,
     touch: !1,
     focus: !1
-  }, label: "Only HTTP datasources can be edited", children: /* @__PURE__ */ a.jsx(D, { size: r.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(Tt, { size: 16 }), sx: {
+  }, label: "Only HTTP datasources can be edited", children: /* @__PURE__ */ a.jsx(I, { size: r.button.size, color: "gray", variant: "light", leftIcon: /* @__PURE__ */ a.jsx(jt, { size: 16 }), sx: {
     transform: "none !important"
   }, children: "Edit" }) }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: n, onClose: () => i(!1), title: "Add a data source", trapFocus: !0, onDragStart: (p) => {
       p.stopPropagation();
-    }, children: /* @__PURE__ */ a.jsx(Xn, { dataSource: e, postSubmit: d, styles: r }) }),
-    /* @__PURE__ */ a.jsx(D, { size: r.button.size, color: "blue", onClick: s, leftIcon: /* @__PURE__ */ a.jsx(Tt, { size: 16 }), children: "Edit" })
+    }, children: /* @__PURE__ */ a.jsx(Jn, { dataSource: e, postSubmit: d, styles: r }) }),
+    /* @__PURE__ */ a.jsx(I, { size: r.button.size, color: "blue", onClick: s, leftIcon: /* @__PURE__ */ a.jsx(jt, { size: 16 }), children: "Edit" })
   ] });
 }
-const Jn = {
+const ta = {
   http: "HTTP",
   mysql: "MySQL",
   postgresql: "PostgreSQL"
-}, ea = {
+}, ra = {
   http: /* @__PURE__ */ a.jsx(un, {}),
   mysql: /* @__PURE__ */ a.jsx(cn, {}),
   postgresql: /* @__PURE__ */ a.jsx(dn, {})
 };
-function ta({
+function na({
   type: e
 }) {
   return /* @__PURE__ */ a.jsxs(z, { children: [
     /* @__PURE__ */ a.jsx(Dt, { size: "xs", sx: {
       transform: "none !important"
-    }, children: ea[e] }),
+    }, children: ra[e] }),
     /* @__PURE__ */ a.jsx(ke, { sx: {
       cusor: "default",
       userSelect: "none"
-    }, children: Jn[e] })
+    }, children: ta[e] })
   ] });
 }
-function ti({
+function ai({
   styles: e = de,
   config: t
 }) {
-  Wn(t.monacoPath), Xe(t);
+  Zn(t.monacoPath), Qe(t);
   const {
     data: r = [],
     loading: n,
@@ -1630,12 +1642,12 @@ function ti({
     refreshDeps: []
   });
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(Yn, { onSuccess: i }) }),
+    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(Wn, { onSuccess: i }) }),
     /* @__PURE__ */ a.jsxs(X, { mt: e.spacing, sx: {
       position: "relative"
     }, children: [
-      /* @__PURE__ */ a.jsx(pt, { visible: n }),
-      /* @__PURE__ */ a.jsxs(ft, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
+      /* @__PURE__ */ a.jsx(ft, { visible: n }),
+      /* @__PURE__ */ a.jsxs(gt, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
         /* @__PURE__ */ a.jsx("thead", { children: /* @__PURE__ */ a.jsxs("tr", { children: [
           /* @__PURE__ */ a.jsx("th", { children: "Type" }),
           /* @__PURE__ */ a.jsx("th", { children: "Name" }),
@@ -1649,11 +1661,11 @@ function ti({
             is_preset: f
           } = s;
           return /* @__PURE__ */ a.jsxs("tr", { children: [
-            /* @__PURE__ */ a.jsx("td", { width: 200, children: /* @__PURE__ */ a.jsx(ta, { type: p }) }),
+            /* @__PURE__ */ a.jsx("td", { width: 200, children: /* @__PURE__ */ a.jsx(na, { type: p }) }),
             /* @__PURE__ */ a.jsx("td", { children: d }),
             /* @__PURE__ */ a.jsx("td", { width: 400, children: /* @__PURE__ */ a.jsxs(z, { position: "left", children: [
-              /* @__PURE__ */ a.jsx(Qn, { dataSource: s, onSuccess: i, styles: e }),
-              /* @__PURE__ */ a.jsx(Kn, { isProtected: f, id: l, name: d, onSuccess: i, styles: e })
+              /* @__PURE__ */ a.jsx(ea, { dataSource: s, onSuccess: i, styles: e }),
+              /* @__PURE__ */ a.jsx(Xn, { isProtected: f, id: l, name: d, onSuccess: i, styles: e })
             ] }) })
           ] }, d);
         }) })
@@ -1661,15 +1673,15 @@ function ti({
     ] })
   ] });
 }
-const ra = ut(({
+const aa = ct(({
   label: e,
   value: t,
   description: r,
   ...n
-}, i) => /* @__PURE__ */ a.jsxs(Ke, { spacing: 2, ref: i, ...n, children: [
+}, i) => /* @__PURE__ */ a.jsxs(Ze, { spacing: 2, ref: i, ...n, children: [
   /* @__PURE__ */ a.jsx(ke, { size: "sm", children: e }),
   /* @__PURE__ */ a.jsx(ke, { size: "xs", color: "dimmed", className: "role-description", children: r })
-] })), Ft = ut(({
+] })), Nt = ct(({
   styles: e,
   value: t,
   onChange: r
@@ -1685,7 +1697,7 @@ const ra = ut(({
   })), {
     refreshDeps: []
   });
-  return /* @__PURE__ */ a.jsx(Xr, { ref: n, mb: e.spacing, size: e.size, required: !0, label: "Role", itemComponent: ra, data: i, disabled: s, styles: () => ({
+  return /* @__PURE__ */ a.jsx(Qr, { ref: n, mb: e.spacing, size: e.size, required: !0, label: "Role", itemComponent: aa, data: i, disabled: s, styles: () => ({
     item: {
       "&[data-selected]": {
         "&, &:hover": {
@@ -1703,7 +1715,7 @@ const ra = ut(({
     size: "xs"
   }
 };
-function na({
+function ia({
   postSubmit: e,
   styles: t = we,
   initialRoleID: r
@@ -1729,39 +1741,42 @@ function na({
         id: "for-creating",
         title: "Pending",
         message: "Adding account...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       }), await Z.account.create(l, d, p, f), P({
         id: "for-creating",
         title: "Successful",
         message: "Account is added",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e();
     } catch (h) {
       P({
         id: "for-creating",
         title: "Failed",
         message: h.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", mb: 10, children: /* @__PURE__ */ a.jsxs("form", { onSubmit: i(s), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "name", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "name", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Username", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "email", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "email", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Email", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "password", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "password", control: n, render: ({
       field: l
-    }) => /* @__PURE__ */ a.jsx(dt, { mb: t.spacing, size: t.size, required: !0, label: "Password", description: "Password must be at least 8 characters long", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "role_id", control: n, render: ({
+    }) => /* @__PURE__ */ a.jsx(pt, { mb: t.spacing, size: t.size, required: !0, label: "Password", description: "Password must be at least 8 characters long", ...l }) }),
+    /* @__PURE__ */ a.jsx(R, { name: "role_id", control: n, render: ({
       field: l
-    }) => /* @__PURE__ */ a.jsx(Ft, { styles: t, ...l }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    }) => /* @__PURE__ */ a.jsx(Nt, { styles: t, ...l }) }),
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: t.button.size, children: "Submit" }) })
   ] }) });
 }
-function aa({
+function sa({
   onSuccess: e,
   styles: t = we,
   initialRoleID: r
@@ -1772,37 +1787,40 @@ function aa({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: n, onClose: () => i(!1), title: "Add an Account", trapFocus: !0, onDragStart: (p) => {
       p.stopPropagation();
-    }, children: /* @__PURE__ */ a.jsx(na, { postSubmit: d, styles: t, initialRoleID: r }) }),
-    /* @__PURE__ */ a.jsx(D, { size: t.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(ht, { size: 20 }), children: "Add an Account" })
+    }, children: /* @__PURE__ */ a.jsx(ia, { postSubmit: d, styles: t, initialRoleID: r }) }),
+    /* @__PURE__ */ a.jsx(I, { size: t.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Add an Account" })
   ] });
 }
-function ia({
+function oa({
   id: e,
   name: t,
   onSuccess: r,
   styles: n = we
 }) {
-  const i = Ze(), s = async () => {
+  const i = Xe(), s = async () => {
     if (e) {
       oe({
         id: "for-deleting",
         title: "Pending",
         message: "Deleting account...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       });
       try {
         await Z.account.delete(e), P({
           id: "for-deleting",
           title: "Successful",
           message: `Account [${t}] is deleted`,
-          color: "green"
+          color: "green",
+          autoClose: !0
         }), r();
       } catch (d) {
         P({
           id: "for-deleting",
           title: "Failed",
           message: d.message,
-          color: "red"
+          color: "red",
+          autoClose: !0
         });
       }
     }
@@ -1815,9 +1833,9 @@ function ia({
     onCancel: () => console.log("Cancel"),
     onConfirm: s
   });
-  return /* @__PURE__ */ a.jsx(D, { size: n.button.size, color: "red", onClick: l, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Delete" });
+  return /* @__PURE__ */ a.jsx(I, { size: n.button.size, color: "red", onClick: l, leftIcon: /* @__PURE__ */ a.jsx(bt, { size: 20 }), children: "Delete" });
 }
-function sa({
+function la({
   id: e,
   name: t,
   email: r,
@@ -1849,7 +1867,8 @@ function sa({
         id: "for-updating",
         title: "Pending",
         message: "Updating account...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       }), await Z.account.edit({
         id: e,
         name: u.trim(),
@@ -1861,49 +1880,51 @@ function sa({
         id: "for-updating",
         title: "Successful",
         message: "Account is updated",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), i();
     } catch (w) {
       P({
         id: "for-updating",
         title: "Failed",
         message: w.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   }, [h, c] = p(["reset_password", "new_password"]);
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", mb: 10, children: /* @__PURE__ */ a.jsxs("form", { onSubmit: d(f), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "name", control: l, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "name", control: l, render: ({
       field: u
     }) => /* @__PURE__ */ a.jsx(Q, { mb: s.spacing, size: s.size, required: !0, label: "Username", ...u }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "email", control: l, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "email", control: l, render: ({
       field: u
     }) => /* @__PURE__ */ a.jsx(Q, { mb: s.spacing, size: s.size, required: !0, label: "Email", ...u }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "role_id", control: l, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "role_id", control: l, render: ({
       field: u
-    }) => /* @__PURE__ */ a.jsx(Ft, { styles: s, ...u }) }),
-    /* @__PURE__ */ a.jsx(ct, { my: 20, variant: "dashed", label: "", labelPosition: "center" }),
-    /* @__PURE__ */ a.jsx(O, { name: "reset_password", control: l, render: ({
+    }) => /* @__PURE__ */ a.jsx(Nt, { styles: s, ...u }) }),
+    /* @__PURE__ */ a.jsx(dt, { my: 20, variant: "dashed", label: "", labelPosition: "center" }),
+    /* @__PURE__ */ a.jsx(R, { name: "reset_password", control: l, render: ({
       field: u
-    }) => /* @__PURE__ */ a.jsx(Qr, { mb: s.spacing, size: s.size, label: "Reset password", checked: u.value, onChange: (g) => u.onChange(g.currentTarget.checked), styles: {
+    }) => /* @__PURE__ */ a.jsx(Jr, { mb: s.spacing, size: s.size, label: "Reset password", checked: u.value, onChange: (g) => u.onChange(g.currentTarget.checked), styles: {
       label: {
         verticalAlign: "middle"
       }
     } }) }),
     h && /* @__PURE__ */ a.jsx(
-      O,
+      R,
       {
         name: "new_password",
         control: l,
         render: ({
           field: u
-        }) => /* @__PURE__ */ a.jsx(dt, { autoComplete: "off", mb: s.spacing, size: s.size, required: !0, description: "Password must be at least 8 characters long", label: "New Password", ...u })
+        }) => /* @__PURE__ */ a.jsx(pt, { autoComplete: "off", mb: s.spacing, size: s.size, required: !0, description: "Password must be at least 8 characters long", label: "New Password", ...u })
       }
     ),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: s.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: s.button.size, children: "Submit" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: s.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: s.button.size, children: "Submit" }) })
   ] }) });
 }
-function oa({
+function ua({
   account: e,
   onSuccess: t,
   styles: r = we
@@ -1914,16 +1935,16 @@ function oa({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: n, onClose: () => i(!1), title: `Editing ${e.name}`, trapFocus: !0, onDragStart: (p) => {
       p.stopPropagation();
-    }, children: /* @__PURE__ */ a.jsx(sa, { ...e, postSubmit: d, styles: r }) }),
-    /* @__PURE__ */ a.jsx(D, { size: r.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(nn, { size: 20 }), children: "Edit" })
+    }, children: /* @__PURE__ */ a.jsx(la, { ...e, postSubmit: d, styles: r }) }),
+    /* @__PURE__ */ a.jsx(I, { size: r.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(an, { size: 20 }), children: "Edit" })
   ] });
 }
-function ri({
+function ii({
   styles: e = we,
   config: t
 }) {
   var d;
-  Xe(t);
+  Qe(t);
   const {
     data: r = [],
     loading: n,
@@ -1947,12 +1968,12 @@ function ri({
     refreshDeps: []
   });
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(aa, { onSuccess: i, initialRoleID: ((d = s == null ? void 0 : s[0]) == null ? void 0 : d.value) ?? "INACTIVE" }) }),
+    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(sa, { onSuccess: i, initialRoleID: ((d = s == null ? void 0 : s[0]) == null ? void 0 : d.value) ?? "INACTIVE" }) }),
     /* @__PURE__ */ a.jsxs(X, { mt: e.spacing, sx: {
       position: "relative"
     }, children: [
-      /* @__PURE__ */ a.jsx(pt, { visible: n || l }),
-      /* @__PURE__ */ a.jsxs(ft, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
+      /* @__PURE__ */ a.jsx(ft, { visible: n || l }),
+      /* @__PURE__ */ a.jsxs(gt, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
         /* @__PURE__ */ a.jsx("thead", { children: /* @__PURE__ */ a.jsxs("tr", { children: [
           /* @__PURE__ */ a.jsx("th", { children: "Username" }),
           /* @__PURE__ */ a.jsx("th", { children: "Email" }),
@@ -1971,8 +1992,8 @@ function ri({
             /* @__PURE__ */ a.jsx("td", { width: 200, children: c }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: u }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: /* @__PURE__ */ a.jsxs(z, { position: "left", children: [
-              /* @__PURE__ */ a.jsx(oa, { account: p, onSuccess: i }),
-              /* @__PURE__ */ a.jsx(ia, { id: f, name: h, onSuccess: i })
+              /* @__PURE__ */ a.jsx(ua, { account: p, onSuccess: i }),
+              /* @__PURE__ */ a.jsx(oa, { id: f, name: h, onSuccess: i })
             ] }) })
           ] }, f);
         }) })
@@ -1980,7 +2001,7 @@ function ri({
     ] })
   ] });
 }
-function la({
+function ca({
   postSubmit: e,
   styles: t = we
 }) {
@@ -2001,53 +2022,56 @@ function la({
         id: "for-login",
         title: "Pending",
         message: "Loggin in...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       });
       const d = await Z.account.login(s.trim(), l.trim());
       window.localStorage.setItem("token", d.token), P({
         id: "for-login",
         title: "Successful",
         message: "Logged in",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e(d);
     } catch (d) {
       P({
         id: "for-login",
         title: "Login Failed",
         message: d.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: n(i), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "name", control: r, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "name", control: r, render: ({
       field: s
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Username", ...s }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "password", control: r, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "password", control: r, render: ({
       field: s
-    }) => /* @__PURE__ */ a.jsx(dt, { mb: t.spacing, size: t.size, required: !0, label: "Password", ...s }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Submit" }) })
+    }) => /* @__PURE__ */ a.jsx(pt, { mb: t.spacing, size: t.size, required: !0, label: "Password", ...s }) }),
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", size: t.button.size, children: "Submit" }) })
   ] }) });
 }
-function ni({
+function si({
   styles: e = we,
   config: t,
   onSuccess: r
 }) {
-  return Xe(t), /* @__PURE__ */ a.jsx(a.Fragment, { children: /* @__PURE__ */ a.jsx(X, { mt: e.spacing, sx: {
+  return Qe(t), /* @__PURE__ */ a.jsx(a.Fragment, { children: /* @__PURE__ */ a.jsx(X, { mt: e.spacing, sx: {
     position: "relative"
-  }, children: /* @__PURE__ */ a.jsx(la, { styles: e, postSubmit: r }) }) });
+  }, children: /* @__PURE__ */ a.jsx(ca, { styles: e, postSubmit: r }) }) });
 }
-const vt = {
+const yt = {
   size: "sm",
   spacing: "md",
   button: {
     size: "xs"
   }
 };
-function ua({
+function da({
   postSubmit: e,
-  styles: t = vt,
+  styles: t = yt,
   initialRoleID: r
 }) {
   const {
@@ -2067,7 +2091,8 @@ function ua({
         id: "for-creating",
         title: "Pending",
         message: "Adding API Key...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       });
       const {
         app_id: p,
@@ -2077,36 +2102,38 @@ function ua({
         id: "for-creating",
         title: "Successful",
         message: "API Key is added",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e(p, f);
     } catch (p) {
       P({
         id: "for-creating",
         title: "Failed",
         message: p.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", mb: 10, children: /* @__PURE__ */ a.jsxs("form", { onSubmit: i(s), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "name", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "name", control: n, render: ({
       field: l
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Name", ...l }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "role_id", control: n, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "role_id", control: n, render: ({
       field: l
-    }) => /* @__PURE__ */ a.jsx(Ft, { styles: t, ...l }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    }) => /* @__PURE__ */ a.jsx(Nt, { styles: t, ...l }) }),
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", size: t.button.size, children: "Save" }) })
   ] }) });
 }
-function ca({
+function pa({
   onSuccess: e,
-  styles: t = vt,
+  styles: t = yt,
   initialRoleID: r
 }) {
-  const n = Ze(), [i, s] = F.useState(!1), l = () => s(!0), d = () => s(!1), p = (f, h) => {
+  const n = Xe(), [i, s] = F.useState(!1), l = () => s(!0), d = () => s(!1), p = (f, h) => {
     d(), n.openModal({
       title: "API Key is generated",
-      children: /* @__PURE__ */ a.jsxs(Ke, { children: [
+      children: /* @__PURE__ */ a.jsxs(Ze, { children: [
         /* @__PURE__ */ a.jsx(ke, { color: "dimmed", children: "Make sure you save it - you won't be able to access it again." }),
         /* @__PURE__ */ a.jsx(Q, { defaultValue: f, disabled: !0, label: "APP ID", styles: {
           input: {
@@ -2118,8 +2145,8 @@ function ca({
             cursor: "text !important"
           }
         } }),
-        /* @__PURE__ */ a.jsx(D, { size: "sm", onClick: () => {
-          ln();
+        /* @__PURE__ */ a.jsx(I, { size: "sm", onClick: () => {
+          gn();
         }, children: "I've saved this API Key" })
       ] }),
       onClose: () => {
@@ -2130,37 +2157,40 @@ function ca({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: i, onClose: () => s(!1), title: "Add an API Key", trapFocus: !0, onDragStart: (f) => {
       f.stopPropagation();
-    }, children: /* @__PURE__ */ a.jsx(ua, { postSubmit: p, styles: t, initialRoleID: r }) }),
-    /* @__PURE__ */ a.jsx(D, { size: t.button.size, onClick: l, leftIcon: /* @__PURE__ */ a.jsx(ht, { size: 20 }), children: "Add an API Key" })
+    }, children: /* @__PURE__ */ a.jsx(da, { postSubmit: p, styles: t, initialRoleID: r }) }),
+    /* @__PURE__ */ a.jsx(I, { size: t.button.size, onClick: l, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Add an API Key" })
   ] });
 }
-function da({
+function fa({
   id: e,
   name: t,
   onSuccess: r,
-  styles: n = vt
+  styles: n = yt
 }) {
-  const i = Ze(), s = async () => {
+  const i = Xe(), s = async () => {
     if (e) {
       oe({
         id: "for-deleting",
         title: "Pending",
         message: "Deleting API Key...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       });
       try {
         await Z.api_key.delete(e), P({
           id: "for-deleting",
           title: "Successful",
           message: `API Key [${t}] is deleted`,
-          color: "green"
+          color: "green",
+          autoClose: !0
         }), r();
       } catch (d) {
         P({
           id: "for-deleting",
           title: "Failed",
           message: d.message,
-          color: "red"
+          color: "red",
+          autoClose: !0
         });
       }
     }
@@ -2173,14 +2203,14 @@ function da({
     onCancel: () => console.log("Cancel"),
     onConfirm: s
   });
-  return /* @__PURE__ */ a.jsx(D, { size: n.button.size, color: "red", onClick: l, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Delete" });
+  return /* @__PURE__ */ a.jsx(I, { size: n.button.size, color: "red", onClick: l, leftIcon: /* @__PURE__ */ a.jsx(bt, { size: 20 }), children: "Delete" });
 }
-function ai({
-  styles: e = vt,
+function oi({
+  styles: e = yt,
   config: t
 }) {
   var d;
-  Xe(t);
+  Qe(t);
   const {
     data: r = [],
     loading: n,
@@ -2204,12 +2234,12 @@ function ai({
     refreshDeps: []
   });
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(ca, { onSuccess: i, initialRoleID: ((d = s == null ? void 0 : s[0]) == null ? void 0 : d.value) ?? "INACTIVE" }) }),
+    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(pa, { onSuccess: i, initialRoleID: ((d = s == null ? void 0 : s[0]) == null ? void 0 : d.value) ?? "INACTIVE" }) }),
     /* @__PURE__ */ a.jsxs(X, { mt: e.spacing, sx: {
       position: "relative"
     }, children: [
-      /* @__PURE__ */ a.jsx(pt, { visible: n || l }),
-      /* @__PURE__ */ a.jsxs(ft, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
+      /* @__PURE__ */ a.jsx(ft, { visible: n || l }),
+      /* @__PURE__ */ a.jsxs(gt, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
         /* @__PURE__ */ a.jsx("thead", { children: /* @__PURE__ */ a.jsxs("tr", { children: [
           /* @__PURE__ */ a.jsx("th", { children: "Name" }),
           /* @__PURE__ */ a.jsx("th", { children: "APP ID" }),
@@ -2227,14 +2257,14 @@ function ai({
             /* @__PURE__ */ a.jsx("td", { width: 200, children: h }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: c }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: u }),
-            /* @__PURE__ */ a.jsx("td", { width: 200, children: /* @__PURE__ */ a.jsx(z, { position: "left", children: /* @__PURE__ */ a.jsx(da, { id: f, name: h, onSuccess: i }) }) })
+            /* @__PURE__ */ a.jsx("td", { width: 200, children: /* @__PURE__ */ a.jsx(z, { position: "left", children: /* @__PURE__ */ a.jsx(fa, { id: f, name: h, onSuccess: i }) }) })
           ] }, f);
         }) })
       ] })
     ] })
   ] });
 }
-const br = ({
+const vr = ({
   value: e,
   onChange: t,
   height: r = "200px",
@@ -2243,7 +2273,7 @@ const br = ({
   const i = (l) => {
     console.log("changing"), t == null || t(l ?? "");
   }, s = !t;
-  return /* @__PURE__ */ a.jsx(cr, { className: "minimal-monaco-editor", height: r, defaultLanguage: n, value: e, onChange: s ? void 0 : i, theme: "vs-dark", options: {
+  return /* @__PURE__ */ a.jsx(pr, { className: "minimal-monaco-editor", height: r, defaultLanguage: n, value: e, onChange: s ? void 0 : i, theme: "vs-dark", options: {
     lineNumbers: "off",
     folding: !1,
     lineDecorationsWidth: 20,
@@ -2254,16 +2284,16 @@ const br = ({
     },
     readOnly: s || !t
   } });
-}, Pe = {
+}, Me = {
   size: "sm",
   spacing: "md",
   button: {
     size: "xs"
   }
 };
-function pa({
+function ga({
   postSubmit: e,
-  styles: t = Pe
+  styles: t = Me
 }) {
   const {
     control: r,
@@ -2279,40 +2309,43 @@ function pa({
         id: "for-creating",
         title: "Pending",
         message: "Adding SQL Snippet...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       }), await Z.sql_snippet.create(s), P({
         id: "for-creating",
         title: "Successful",
         message: "SQL Snippet is added",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e();
     } catch (l) {
       P({
         id: "for-creating",
         title: "Failed",
         message: l.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: n(i), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "id", control: r, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "id", control: r, render: ({
       field: s
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Name", ...s }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "content", control: r, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "content", control: r, render: ({
       field: s
-    }) => /* @__PURE__ */ a.jsxs(Ke, { spacing: 4, children: [
+    }) => /* @__PURE__ */ a.jsxs(Ze, { spacing: 4, children: [
       /* @__PURE__ */ a.jsx(ke, { size: 14, fw: 500, color: "#212529", sx: {
         cursor: "default"
       }, children: "Content" }),
-      /* @__PURE__ */ a.jsx(br, { height: "600px", ...s })
+      /* @__PURE__ */ a.jsx(vr, { height: "600px", ...s })
     ] }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: t.button.size, children: "Submit" }) })
   ] }) });
 }
-function fa({
+function ha({
   onSuccess: e,
-  styles: t = Pe
+  styles: t = Me
 }) {
   const [r, n] = F.useState(!1), i = () => n(!0), s = () => n(!1), l = () => {
     s(), e();
@@ -2320,13 +2353,13 @@ function fa({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: r, onClose: () => n(!1), title: "Add a SQL Snippet", trapFocus: !0, onDragStart: (d) => {
       d.stopPropagation();
-    }, size: "80vw", children: /* @__PURE__ */ a.jsx(pa, { postSubmit: l, styles: t }) }),
-    /* @__PURE__ */ a.jsx(D, { size: t.button.size, onClick: i, leftIcon: /* @__PURE__ */ a.jsx(ht, { size: 18 }), children: "Add a SQL Snippet" })
+    }, size: "80vw", children: /* @__PURE__ */ a.jsx(ga, { postSubmit: l, styles: t }) }),
+    /* @__PURE__ */ a.jsx(I, { size: t.button.size, onClick: i, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 18 }), children: "Add a SQL Snippet" })
   ] });
 }
-function ga({
+function ma({
   postSubmit: e,
-  styles: t = Pe,
+  styles: t = Me,
   id: r,
   content: n
 }) {
@@ -2344,40 +2377,43 @@ function ga({
         id: "for-updating",
         title: "Pending",
         message: "Updating SQL Snippet...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       }), await Z.sql_snippet.update(d), P({
         id: "for-updating",
         title: "Successful",
         message: "SQL Snippet is updated",
-        color: "green"
+        color: "green",
+        autoClose: !0
       }), e();
     } catch (p) {
       P({
         id: "for-updating",
         title: "Failed",
         message: p.message,
-        color: "red"
+        color: "red",
+        autoClose: !0
       });
     }
   };
   return /* @__PURE__ */ a.jsx(X, { mx: "auto", children: /* @__PURE__ */ a.jsxs("form", { onSubmit: s(l), children: [
-    /* @__PURE__ */ a.jsx(O, { name: "id", control: i, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "id", control: i, render: ({
       field: d
     }) => /* @__PURE__ */ a.jsx(Q, { mb: t.spacing, size: t.size, required: !0, label: "Name", ...d }) }),
-    /* @__PURE__ */ a.jsx(O, { name: "content", control: i, render: ({
+    /* @__PURE__ */ a.jsx(R, { name: "content", control: i, render: ({
       field: d
-    }) => /* @__PURE__ */ a.jsxs(Ke, { spacing: 4, children: [
+    }) => /* @__PURE__ */ a.jsxs(Ze, { spacing: 4, children: [
       /* @__PURE__ */ a.jsx(ke, { size: 14, fw: 500, color: "#212529", sx: {
         cursor: "default"
       }, children: "Content" }),
-      /* @__PURE__ */ a.jsx(br, { height: "600px", ...d })
+      /* @__PURE__ */ a.jsx(vr, { height: "600px", ...d })
     ] }) }),
-    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(D, { type: "submit", size: t.button.size, children: "Save" }) })
+    /* @__PURE__ */ a.jsx(z, { position: "right", mt: t.spacing, children: /* @__PURE__ */ a.jsx(I, { type: "submit", color: "green", leftIcon: /* @__PURE__ */ a.jsx(Pe, { size: 16 }), size: t.button.size, children: "Submit" }) })
   ] }) });
 }
-function ha({
+function ba({
   onSuccess: e,
-  styles: t = Pe,
+  styles: t = Me,
   ...r
 }) {
   const [n, i] = F.useState(!1), s = () => i(!0), l = () => i(!1), d = () => {
@@ -2386,8 +2422,8 @@ function ha({
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(xe, { opened: n, onClose: () => i(!1), title: "Edit a SQL Snippet", trapFocus: !0, onDragStart: (p) => {
       p.stopPropagation();
-    }, size: "80vw", children: /* @__PURE__ */ a.jsx(ga, { postSubmit: d, styles: t, ...r }) }),
-    /* @__PURE__ */ a.jsx(D, { size: t.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(Tt, { size: 18 }), children: "Edit" })
+    }, size: "80vw", children: /* @__PURE__ */ a.jsx(ma, { postSubmit: d, styles: t, ...r }) }),
+    /* @__PURE__ */ a.jsx(I, { size: t.button.size, onClick: s, leftIcon: /* @__PURE__ */ a.jsx(jt, { size: 18 }), children: "Edit" })
   ] });
 }
 /**
@@ -5363,7 +5399,7 @@ b.languages.wasm = {
   number: /[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,
   punctuation: /[()]/
 };
-var ma = {
+var va = {
   plain: {
     backgroundColor: "#2a2734",
     color: "#9a86fd"
@@ -5430,13 +5466,13 @@ var ma = {
     }
   }]
 };
-const ba = ma;
-var va = {
+const ya = va;
+var Sa = {
   // $FlowFixMe
   Prism: b,
-  theme: ba
+  theme: ya
 };
-function He(e, t, r) {
+function qe(e, t, r) {
   return t in e ? Object.defineProperty(e, t, {
     value: r,
     enumerable: !0,
@@ -5454,7 +5490,7 @@ function Se() {
     return e;
   }, Se.apply(this, arguments);
 }
-var ya = /\r\n|\r|\n/, rr = function(e) {
+var xa = /\r\n|\r|\n/, nr = function(e) {
   e.length === 0 ? e.push({
     types: ["plain"],
     content: `
@@ -5462,32 +5498,32 @@ var ya = /\r\n|\r|\n/, rr = function(e) {
     empty: !0
   }) : e.length === 1 && e[0].content === "" && (e[0].content = `
 `, e[0].empty = !0);
-}, nr = function(e, t) {
+}, ar = function(e, t) {
   var r = e.length;
   return r > 0 && e[r - 1] === t ? e : e.concat(t);
-}, Sa = function(e) {
+}, wa = function(e) {
   for (var t = [[]], r = [e], n = [0], i = [e.length], s = 0, l = 0, d = [], p = [d]; l > -1; ) {
     for (; (s = n[l]++) < i[l]; ) {
       var f = void 0, h = t[l], c = r[l], u = c[s];
-      if (typeof u == "string" ? (h = l > 0 ? h : ["plain"], f = u) : (h = nr(h, u.type), u.alias && (h = nr(h, u.alias)), f = u.content), typeof f != "string") {
+      if (typeof u == "string" ? (h = l > 0 ? h : ["plain"], f = u) : (h = ar(h, u.type), u.alias && (h = ar(h, u.alias)), f = u.content), typeof f != "string") {
         l++, t.push(h), r.push(f), n.push(0), i.push(f.length);
         continue;
       }
-      var g = f.split(ya), v = g.length;
+      var g = f.split(xa), v = g.length;
       d.push({
         types: h,
         content: g[0]
       });
       for (var m = 1; m < v; m++)
-        rr(d), p.push(d = []), d.push({
+        nr(d), p.push(d = []), d.push({
           types: h,
           content: g[m]
         });
     }
     l--, t.pop(), r.pop(), n.pop(), i.pop();
   }
-  return rr(d), p;
-}, xa = function(e, t) {
+  return nr(d), p;
+}, Ea = function(e, t) {
   var r = e.plain, n = /* @__PURE__ */ Object.create(null), i = e.styles.reduce(function(s, l) {
     var d = l.languages, p = l.style;
     return d && !d.includes(t) || l.types.forEach(function(f) {
@@ -5499,30 +5535,30 @@ var ya = /\r\n|\r|\n/, rr = function(e) {
     backgroundColor: null
   }), i;
 };
-function ar(e, t) {
+function ir(e, t) {
   var r = {};
   for (var n in e)
     Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) === -1 && (r[n] = e[n]);
   return r;
 }
-var wa = /* @__PURE__ */ function(e) {
+var _a = /* @__PURE__ */ function(e) {
   function t() {
     for (var r = this, n = [], i = arguments.length; i--; )
       n[i] = arguments[i];
-    e.apply(this, n), He(this, "getThemeDict", function(s) {
+    e.apply(this, n), qe(this, "getThemeDict", function(s) {
       if (r.themeDict !== void 0 && s.theme === r.prevTheme && s.language === r.prevLanguage)
         return r.themeDict;
       r.prevTheme = s.theme, r.prevLanguage = s.language;
-      var l = s.theme ? xa(s.theme, s.language) : void 0;
+      var l = s.theme ? Ea(s.theme, s.language) : void 0;
       return r.themeDict = l;
-    }), He(this, "getLineProps", function(s) {
-      var l = s.key, d = s.className, p = s.style, f = ar(s, ["key", "className", "style", "line"]), h = f, c = Se({}, h, {
+    }), qe(this, "getLineProps", function(s) {
+      var l = s.key, d = s.className, p = s.style, f = ir(s, ["key", "className", "style", "line"]), h = f, c = Se({}, h, {
         className: "token-line",
         style: void 0,
         key: void 0
       }), u = r.getThemeDict(r.props);
       return u !== void 0 && (c.style = u.plain), p !== void 0 && (c.style = c.style !== void 0 ? Se({}, c.style, p) : p), l !== void 0 && (c.key = l), d && (c.className += " " + d), c;
-    }), He(this, "getStyleForToken", function(s) {
+    }), qe(this, "getStyleForToken", function(s) {
       var l = s.types, d = s.empty, p = l.length, f = r.getThemeDict(r.props);
       if (f !== void 0) {
         {
@@ -5540,15 +5576,15 @@ var wa = /* @__PURE__ */ function(e) {
         });
         return Object.assign.apply(Object, [h].concat(c));
       }
-    }), He(this, "getTokenProps", function(s) {
-      var l = s.key, d = s.className, p = s.style, f = s.token, h = ar(s, ["key", "className", "style", "token"]), c = h, u = Se({}, c, {
+    }), qe(this, "getTokenProps", function(s) {
+      var l = s.key, d = s.className, p = s.style, f = s.token, h = ir(s, ["key", "className", "style", "token"]), c = h, u = Se({}, c, {
         className: "token " + f.types.join(" "),
         children: f.content,
         style: r.getStyleForToken(f),
         key: void 0
       });
       return p !== void 0 && (u.style = u.style !== void 0 ? Se({}, u.style, p) : p), l !== void 0 && (u.key = l), d && (u.className += " " + d), u;
-    }), He(this, "tokenize", function(s, l, d, p) {
+    }), qe(this, "tokenize", function(s, l, d, p) {
       var f = {
         code: l,
         grammar: d,
@@ -5561,7 +5597,7 @@ var wa = /* @__PURE__ */ function(e) {
     });
   }
   return e && (t.__proto__ = e), t.prototype = Object.create(e && e.prototype), t.prototype.constructor = t, t.prototype.render = function() {
-    var n = this.props, i = n.Prism, s = n.language, l = n.code, d = n.children, p = this.getThemeDict(this.props), f = i.languages[s], h = f !== void 0 ? this.tokenize(i, l, f, s) : [l], c = Sa(h);
+    var n = this.props, i = n.Prism, s = n.language, l = n.code, d = n.children, p = this.getThemeDict(this.props), f = i.languages[s], h = f !== void 0 ? this.tokenize(i, l, f, s) : [l], c = wa(h);
     return d({
       tokens: c,
       className: "prism-code language-" + s,
@@ -5570,9 +5606,9 @@ var wa = /* @__PURE__ */ function(e) {
       getTokenProps: this.getTokenProps
     });
   }, t;
-}(Vr);
-const Ea = wa;
-function vr({ copied: e }) {
+}(Wr);
+const Aa = _a;
+function yr({ copied: e }) {
   return /* @__PURE__ */ F.createElement("svg", {
     viewBox: "0 0 15 15",
     fill: "none",
@@ -5590,8 +5626,8 @@ function vr({ copied: e }) {
     clipRule: "evenodd"
   }));
 }
-vr.displayName = "@mantine/prism/CopyIcon";
-const _a = (e) => ({
+yr.displayName = "@mantine/prism/CopyIcon";
+const ka = (e) => ({
   plain: {
     color: e.colors.gray[4],
     backgroundColor: e.colors.dark[8]
@@ -5676,7 +5712,7 @@ const _a = (e) => ({
       }
     }
   ]
-}), Aa = (e) => ({
+}), Ta = (e) => ({
   plain: {
     color: e.colors.gray[9],
     backgroundColor: e.fn.rgba(e.colors.gray[0], 0.65)
@@ -5767,8 +5803,8 @@ const _a = (e) => ({
       }
     }
   ]
-}), ka = (e, t) => t === "dark" ? _a(e) : Aa(e);
-var Ta = lr((e, { colorScheme: t, native: r, maxLineSize: n, radius: i }) => ({
+}), ja = (e, t) => t === "dark" ? ka(e) : Ta(e);
+var Ca = ur((e, { colorScheme: t, native: r, maxLineSize: n, radius: i }) => ({
   scrollArea: {},
   root: {
     position: "relative"
@@ -5778,7 +5814,7 @@ var Ta = lr((e, { colorScheme: t, native: r, maxLineSize: n, radius: i }) => ({
     position: "relative",
     fontFamily: e.fontFamilyMonospace,
     lineHeight: 1.7,
-    fontSize: Ve(13),
+    fontSize: We(13),
     overflowX: r ? "auto" : void 0,
     borderRadius: e.fn.radius(i),
     padding: `${e.spacing.sm} 0`,
@@ -5805,7 +5841,7 @@ var Ta = lr((e, { colorScheme: t, native: r, maxLineSize: n, radius: i }) => ({
   lineNumber: {
     color: t === "dark" ? e.colors.dark[4] : e.colors.gray[4],
     textAlign: "right",
-    width: `calc(8 * ${Ve(n)})`,
+    width: `calc(8 * ${We(n)})`,
     marginRight: e.dir === "ltr" ? e.spacing.xs : void 0,
     marginLeft: e.dir === "rtl" ? e.spacing.xs : void 0,
     userSelect: "none"
@@ -5814,34 +5850,34 @@ var Ta = lr((e, { colorScheme: t, native: r, maxLineSize: n, radius: i }) => ({
     width: "100%"
   }
 }));
-const ja = Ta;
-var Ra = Object.defineProperty, Oa = Object.defineProperties, Ca = Object.getOwnPropertyDescriptors, ot = Object.getOwnPropertySymbols, yr = Object.prototype.hasOwnProperty, Sr = Object.prototype.propertyIsEnumerable, ir = (e, t, r) => t in e ? Ra(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Ie = (e, t) => {
+const Ra = Ca;
+var Oa = Object.defineProperty, Ia = Object.defineProperties, Da = Object.getOwnPropertyDescriptors, lt = Object.getOwnPropertySymbols, Sr = Object.prototype.hasOwnProperty, xr = Object.prototype.propertyIsEnumerable, sr = (e, t, r) => t in e ? Oa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, De = (e, t) => {
   for (var r in t || (t = {}))
-    yr.call(t, r) && ir(e, r, t[r]);
-  if (ot)
-    for (var r of ot(t))
-      Sr.call(t, r) && ir(e, r, t[r]);
+    Sr.call(t, r) && sr(e, r, t[r]);
+  if (lt)
+    for (var r of lt(t))
+      xr.call(t, r) && sr(e, r, t[r]);
   return e;
-}, qe = (e, t) => Oa(e, Ca(t)), Da = (e, t) => {
+}, Ye = (e, t) => Ia(e, Da(t)), La = (e, t) => {
   var r = {};
   for (var n in e)
-    yr.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
-  if (e != null && ot)
-    for (var n of ot(e))
-      t.indexOf(n) < 0 && Sr.call(e, n) && (r[n] = e[n]);
+    Sr.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && lt)
+    for (var n of lt(e))
+      t.indexOf(n) < 0 && xr.call(e, n) && (r[n] = e[n]);
   return r;
 };
-const Ia = {
+const Fa = {
   noCopy: !1,
   copyLabel: "Copy code",
   copiedLabel: "Copied",
   withLineNumbers: !1,
   trim: !0,
   highlightLines: {},
-  scrollAreaComponent: ur,
-  getPrismTheme: ka
-}, Nt = ut((e, t) => {
-  const r = Jr("Prism", Ia, e), {
+  scrollAreaComponent: cr,
+  getPrismTheme: ja
+}, $t = ct((e, t) => {
+  const r = en("Prism", Fa, e), {
     className: n,
     children: i,
     language: s,
@@ -5859,7 +5895,7 @@ const Ia = {
     radius: w,
     getPrismTheme: S,
     variant: _
-  } = r, k = Da(r, [
+  } = r, k = La(r, [
     "className",
     "children",
     "language",
@@ -5878,18 +5914,18 @@ const Ia = {
     "getPrismTheme",
     "variant"
   ]), H = m && typeof i == "string" ? i.trim() : i, J = H.split(`
-`).length.toString().length, N = en(), q = fn(), $ = v || N.colorScheme, { classes: te, cx: L } = ja({
+`).length.toString().length, N = tn(), q = hn(), $ = v || N.colorScheme, { classes: te, cx: L } = Ra({
     colorScheme: $,
-    native: g !== ur,
+    native: g !== cr,
     maxLineSize: J,
     radius: w
   }, { name: "Prism", classNames: d, styles: p, unstyled: x, variant: _ });
-  return /* @__PURE__ */ F.createElement(X, qe(Ie({
+  return /* @__PURE__ */ F.createElement(X, Ye(De({
     className: L(te.root, n),
     ref: t
   }, k), {
     translate: "no"
-  }), !l && /* @__PURE__ */ F.createElement(at, {
+  }), !l && /* @__PURE__ */ F.createElement(it, {
     label: q.copied ? h : f,
     position: "left",
     withArrow: !0,
@@ -5902,9 +5938,9 @@ const Ia = {
     "aria-label": q.copied ? h : f,
     onClick: () => q.copy(H),
     unstyled: x
-  }, /* @__PURE__ */ F.createElement(vr, {
+  }, /* @__PURE__ */ F.createElement(yr, {
     copied: q.copied
-  }))), /* @__PURE__ */ F.createElement(Ea, qe(Ie({}, va), {
+  }))), /* @__PURE__ */ F.createElement(Aa, Ye(De({}, Sa), {
     theme: S(N, $),
     code: H,
     language: s
@@ -5927,9 +5963,9 @@ const Ia = {
 `)
       return null;
     const ie = re + 1, fe = M({ line: W, key: re }), Ee = ie in u, ge = $ === "dark" ? N.fn.rgba(N.fn.themeColor((ue = u[ie]) == null ? void 0 : ue.color, 9), 0.25) : N.fn.themeColor((ce = u[ie]) == null ? void 0 : ce.color, 0);
-    return /* @__PURE__ */ F.createElement("div", qe(Ie({}, fe), {
+    return /* @__PURE__ */ F.createElement("div", Ye(De({}, fe), {
       className: L(te.line, fe.className),
-      style: Ie({}, Ee ? { backgroundColor: ge } : null)
+      style: De({}, Ee ? { backgroundColor: ge } : null)
     }), c && /* @__PURE__ */ F.createElement("div", {
       className: te.lineNumber,
       style: {
@@ -5937,24 +5973,24 @@ const Ia = {
       }
     }, ((be = u[ie]) == null ? void 0 : be.label) || ie), /* @__PURE__ */ F.createElement("div", {
       className: te.lineContent
-    }, W.map((Me, je) => {
-      var Re, _e;
-      const Oe = ae({ token: Me, key: je });
-      return /* @__PURE__ */ F.createElement("span", qe(Ie({}, Oe), {
-        style: qe(Ie({}, Oe.style), {
-          color: Ee ? N.fn.themeColor((Re = u[ie]) == null ? void 0 : Re.color, $ === "dark" ? 5 : 8) : (_e = Oe == null ? void 0 : Oe.style) == null ? void 0 : _e.color
+    }, W.map((Be, je) => {
+      var Ce, _e;
+      const Re = ae({ token: Be, key: je });
+      return /* @__PURE__ */ F.createElement("span", Ye(De({}, Re), {
+        style: Ye(De({}, Re.style), {
+          color: Ee ? N.fn.themeColor((Ce = u[ie]) == null ? void 0 : Ce.color, $ === "dark" ? 5 : 8) : (_e = Re == null ? void 0 : Re.style) == null ? void 0 : _e.color
         })
       }));
     })));
   }).filter(Boolean)))));
 });
-Nt.displayName = "@mantine/prism/Prism";
-var La = lr((e, { radius: t }) => ({
+$t.displayName = "@mantine/prism/Prism";
+var Na = ur((e, { radius: t }) => ({
   tab: {
     paddingLeft: e.spacing.sm,
     paddingRight: e.spacing.sm,
-    height: Ve(34),
-    border: `${Ve(1)} solid ${e.colorScheme === "dark" ? e.colors.dark[5] : e.colors.gray[3]}`,
+    height: We(34),
+    border: `${We(1)} solid ${e.colorScheme === "dark" ? e.colors.dark[5] : e.colors.gray[3]}`,
     borderBottom: 0,
     fontSize: e.fontSizes.sm,
     color: e.colorScheme === "dark" ? e.colors.dark[1] : e.colors.gray[7],
@@ -5984,7 +6020,7 @@ var La = lr((e, { radius: t }) => ({
     borderRadius: e.fn.radius(t),
     borderTopRightRadius: 0,
     borderTopLeftRadius: 0,
-    border: `${Ve(1)} solid ${e.colorScheme === "dark" ? e.colors.dark[4] : e.colors.gray[3]}`,
+    border: `${We(1)} solid ${e.colorScheme === "dark" ? e.colors.dark[4] : e.colors.gray[3]}`,
     borderTop: 0,
     overflow: "hidden"
   },
@@ -5994,32 +6030,32 @@ var La = lr((e, { radius: t }) => ({
     border: 0
   }
 }));
-const xr = La;
-var Fa = Object.defineProperty, Na = Object.defineProperties, $a = Object.getOwnPropertyDescriptors, lt = Object.getOwnPropertySymbols, wr = Object.prototype.hasOwnProperty, Er = Object.prototype.propertyIsEnumerable, sr = (e, t, r) => t in e ? Fa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, _r = (e, t) => {
+const wr = Na;
+var $a = Object.defineProperty, za = Object.defineProperties, Pa = Object.getOwnPropertyDescriptors, ut = Object.getOwnPropertySymbols, Er = Object.prototype.hasOwnProperty, _r = Object.prototype.propertyIsEnumerable, or = (e, t, r) => t in e ? $a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Ar = (e, t) => {
   for (var r in t || (t = {}))
-    wr.call(t, r) && sr(e, r, t[r]);
-  if (lt)
-    for (var r of lt(t))
-      Er.call(t, r) && sr(e, r, t[r]);
+    Er.call(t, r) && or(e, r, t[r]);
+  if (ut)
+    for (var r of ut(t))
+      _r.call(t, r) && or(e, r, t[r]);
   return e;
-}, za = (e, t) => Na(e, $a(t)), Pa = (e, t) => {
+}, Ma = (e, t) => za(e, Pa(t)), Ba = (e, t) => {
   var r = {};
   for (var n in e)
-    wr.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
-  if (e != null && lt)
-    for (var n of lt(e))
-      t.indexOf(n) < 0 && Er.call(e, n) && (r[n] = e[n]);
+    Er.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && ut)
+    for (var n of ut(e))
+      t.indexOf(n) < 0 && _r.call(e, n) && (r[n] = e[n]);
   return r;
 };
-function Ma(e) {
-  const { classes: t } = xr({ radius: e.radius });
-  return /* @__PURE__ */ F.createElement(gt, za(_r({}, e), {
+function Ua(e) {
+  const { classes: t } = wr({ radius: e.radius });
+  return /* @__PURE__ */ F.createElement(ht, Ma(Ar({}, e), {
     variant: "outline",
     classNames: { tab: t.tab },
     translate: "no"
   }));
 }
-function Ba(e) {
+function Ga(e) {
   var t = e, {
     language: r,
     children: n,
@@ -6034,7 +6070,7 @@ function Ba(e) {
     getPrismTheme: u,
     colorScheme: g,
     variant: v
-  } = t, m = Pa(t, [
+  } = t, m = Ba(t, [
     "language",
     "children",
     "radius",
@@ -6049,8 +6085,8 @@ function Ba(e) {
     "colorScheme",
     "variant"
   ]);
-  const { classes: x } = xr({ radius: i });
-  return /* @__PURE__ */ F.createElement(gt.Panel, _r({}, m), /* @__PURE__ */ F.createElement(Nt, {
+  const { classes: x } = wr({ radius: i });
+  return /* @__PURE__ */ F.createElement(ht.Panel, Ar({}, m), /* @__PURE__ */ F.createElement($t, {
     language: r,
     classNames: { root: x.prism, code: x.code },
     radius: i,
@@ -6066,37 +6102,40 @@ function Ba(e) {
     variant: v
   }, n));
 }
-const Qe = Nt;
-Qe.Tabs = Ma;
-Qe.Tab = gt.Tab;
-Qe.TabsList = gt.List;
-Qe.Panel = Ba;
-function Ua({
+const Je = $t;
+Je.Tabs = Ua;
+Je.Tab = ht.Tab;
+Je.TabsList = ht.List;
+Je.Panel = Ga;
+function Ha({
   id: e,
   onSuccess: t,
-  styles: r = Pe
+  styles: r = Me
 }) {
-  const n = Ze(), i = async () => {
+  const n = Xe(), i = async () => {
     if (e) {
       oe({
         id: "for-deleting",
         title: "Pending",
         message: "Deleting SQL Snippet...",
-        loading: !0
+        loading: !0,
+        autoClose: !1
       });
       try {
         await Z.sql_snippet.delete(e), P({
           id: "for-deleting",
           title: "Successful",
           message: `SQL Snippet [${e}] is deleted`,
-          color: "green"
+          color: "green",
+          autoClose: !0
         }), t();
       } catch (l) {
         P({
           id: "for-deleting",
           title: "Failed",
           message: l.message,
-          color: "red"
+          color: "red",
+          autoClose: !0
         });
       }
     }
@@ -6112,21 +6151,21 @@ function Ua({
       color: "red"
     }
   });
-  return /* @__PURE__ */ a.jsx(D, { size: r.button.size, color: "red", onClick: s, leftIcon: /* @__PURE__ */ a.jsx(mt, { size: 20 }), children: "Delete" });
+  return /* @__PURE__ */ a.jsx(I, { size: r.button.size, color: "red", onClick: s, leftIcon: /* @__PURE__ */ a.jsx(bt, { size: 20 }), children: "Delete" });
 }
-function Ga({
+function qa({
   content: e
 }) {
-  return /* @__PURE__ */ a.jsxs(_t, { width: "60vw", shadow: "md", children: [
-    /* @__PURE__ */ a.jsx(_t.Target, { children: /* @__PURE__ */ a.jsx(Dt, { size: 16, children: /* @__PURE__ */ a.jsx(pn, {}) }) }),
-    /* @__PURE__ */ a.jsx(_t.Dropdown, { children: /* @__PURE__ */ a.jsx(Qe, { language: "sql", noCopy: !0, withLineNumbers: !0, children: e }) })
+  return /* @__PURE__ */ a.jsxs(At, { width: "60vw", shadow: "md", children: [
+    /* @__PURE__ */ a.jsx(At.Target, { children: /* @__PURE__ */ a.jsx(Dt, { size: 16, children: /* @__PURE__ */ a.jsx(pn, {}) }) }),
+    /* @__PURE__ */ a.jsx(At.Dropdown, { children: /* @__PURE__ */ a.jsx(Je, { language: "sql", noCopy: !0, withLineNumbers: !0, children: e }) })
   ] });
 }
-function ii({
-  styles: e = Pe,
+function li({
+  styles: e = Me,
   config: t
 }) {
-  Xe(t);
+  Qe(t);
   const {
     data: r = [],
     loading: n,
@@ -6145,12 +6184,12 @@ function ii({
     refreshDeps: []
   });
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(fa, { onSuccess: i }) }),
+    /* @__PURE__ */ a.jsx(z, { pt: e.spacing, position: "right", children: /* @__PURE__ */ a.jsx(ha, { onSuccess: i }) }),
     /* @__PURE__ */ a.jsxs(X, { mt: e.spacing, sx: {
       position: "relative"
     }, children: [
-      /* @__PURE__ */ a.jsx(pt, { visible: n }),
-      /* @__PURE__ */ a.jsxs(ft, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
+      /* @__PURE__ */ a.jsx(ft, { visible: n }),
+      /* @__PURE__ */ a.jsxs(gt, { horizontalSpacing: e.spacing, verticalSpacing: e.spacing, fontSize: e.size, highlightOnHover: !0, children: [
         /* @__PURE__ */ a.jsx("thead", { children: /* @__PURE__ */ a.jsxs("tr", { children: [
           /* @__PURE__ */ a.jsx("th", { children: "Name" }),
           /* @__PURE__ */ a.jsx("th", {}),
@@ -6167,12 +6206,12 @@ function ii({
           } = s;
           return /* @__PURE__ */ a.jsxs("tr", { children: [
             /* @__PURE__ */ a.jsx("td", { children: l }),
-            /* @__PURE__ */ a.jsx("td", { width: 50, children: /* @__PURE__ */ a.jsx(Ga, { content: d }) }),
+            /* @__PURE__ */ a.jsx("td", { width: 50, children: /* @__PURE__ */ a.jsx(qa, { content: d }) }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: p }),
             /* @__PURE__ */ a.jsx("td", { width: 200, children: f }),
             /* @__PURE__ */ a.jsx("td", { width: 400, children: /* @__PURE__ */ a.jsxs(z, { position: "left", children: [
-              /* @__PURE__ */ a.jsx(ha, { ...s, onSuccess: i }),
-              /* @__PURE__ */ a.jsx(Ua, { id: l, onSuccess: i })
+              /* @__PURE__ */ a.jsx(ba, { ...s, onSuccess: i }),
+              /* @__PURE__ */ a.jsx(Ha, { id: l, onSuccess: i })
             ] }) })
           ] }, l);
         }) })
@@ -6180,28 +6219,28 @@ function ii({
     ] })
   ] });
 }
-const si = () => import("./package-10c53529.mjs").then(({
+const ui = () => import("./package-e95cf677.mjs").then(({
   version: e
 }) => (console.log(`[@devtable/dashboard] version: ${e}`), e));
 export {
   G as APIClient,
-  ai as APIKeyList,
-  ri as AccountList,
-  ca as AddAPIKey,
-  aa as AddAccount,
-  Yn as AddDataSource,
-  fa as AddSQLSnippet,
-  ti as DataSourceList,
-  vn as DefaultApiClient,
-  da as DeleteAPIKey,
-  ia as DeleteAccount,
-  Kn as DeleteDataSource,
-  Ua as DeleteSQLSnippet,
-  yn as FacadeApiClient,
-  ni as Login,
-  ii as SQLSnippetList,
-  ha as UpdateSQLSnippet,
-  Xe as configureAPIClient,
-  Sn as facadeApiClient,
-  si as getVersion
+  oi as APIKeyList,
+  ii as AccountList,
+  pa as AddAPIKey,
+  sa as AddAccount,
+  Wn as AddDataSource,
+  ha as AddSQLSnippet,
+  ai as DataSourceList,
+  Sn as DefaultApiClient,
+  fa as DeleteAPIKey,
+  oa as DeleteAccount,
+  Xn as DeleteDataSource,
+  Ha as DeleteSQLSnippet,
+  xn as FacadeApiClient,
+  si as Login,
+  li as SQLSnippetList,
+  ba as UpdateSQLSnippet,
+  Qe as configureAPIClient,
+  wn as facadeApiClient,
+  ui as getVersion
 };