@devtable/dashboard 4.9.0 → 4.10.0

package/dist/dashboard.es.js

@@ -1,18 +1,18 @@
 var Pi = Object.defineProperty;
 var Ai = (t, e, n) => e in t ? Pi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
 var E = (t, e, n) => (Ai(t, typeof e != "symbol" ? e + "" : e, n), n);
-import { Box as q, Text as b, Button as F, Checkbox as He, MultiSelect as dn, Select as j, TextInput as k, Group as g, Stack as w, ActionIcon as z, LoadingOverlay as Tt, Table as Vt, Tabs as V, Textarea as hn, AppShell as pn, Modal as Ce, Divider as de, SimpleGrid as Li, NumberInput as Be, Menu as ce, Tooltip as qi, Paper as $i, Code as dr, Switch as $e, useMantineTheme as Ni, ColorInput as ji, ColorSwatch as hr, Slider as zr, createStyles as mn, Popover as Kt, Accordion as P, SegmentedControl as Bi, JsonInput as Gi } from "@mantine/core";
+import { Box as q, Text as v, Button as F, Checkbox as He, MultiSelect as dn, Select as j, TextInput as k, Group as g, Stack as w, ActionIcon as z, LoadingOverlay as Tt, Table as Vt, Tabs as V, Textarea as hn, AppShell as pn, Modal as Ce, Divider as ie, SimpleGrid as Li, NumberInput as Be, Menu as ue, Tooltip as qi, Paper as $i, Code as dr, Switch as Fe, useMantineTheme as Ni, ColorInput as ji, ColorSwatch as hr, Slider as zr, createStyles as mn, Popover as Kt, Accordion as P, SegmentedControl as Bi, JsonInput as Gi } from "@mantine/core";
 import { useModals as Wi, ModalsProvider as Er } from "@mantine/modals";
-import { useRequest as zt, useBoolean as mt, useCreation as Fe, useAsyncEffect as ft, useLatest as pr } from "ahooks";
+import { useRequest as zt, useBoolean as mt, useCreation as Me, useAsyncEffect as ft, useLatest as pr } from "ahooks";
 import { observer as R } from "mobx-react-lite";
-import x, { forwardRef as fn, useMemo as A, useState as ue, createElement as Et, useEffect as K, useCallback as Rt, useRef as Qi, useContext as Me, createContext as Yi } from "react";
+import x, { forwardRef as fn, useMemo as A, useState as de, createElement as Et, useEffect as K, useCallback as Rt, useRef as Qi, useContext as Pe, createContext as Yi } from "react";
 import $, { omit as Ot, get as re, values as Or, unset as Ui, isObject as Fr, set as Mr, orderBy as Hi, last as Xi, noop as Ji, defaults as te, isEqual as Ie, defaultsDeep as Ge, findLastIndex as Ki, isEmpty as Pr, isNumber as Zi, isString as Ar, range as eo, cloneDeep as Lr, maxBy as qr, merge as $r, minBy as to, groupBy as no, template as Nr, cloneDeepWith as ro, throttle as ao } from "lodash";
 import { useForm as ke, Controller as _, useFieldArray as we } from "react-hook-form";
 import { DateRangePicker as io } from "@mantine/dates";
 import { Calendar as oo, Refresh as jr, DeviceFloppy as Z, Trash as J, PlaylistAdd as Je, Recycle as Br, Settings as Gr, Filter as so, Database as lo, Share as co, Download as Wr, Code as uo, InfoCircle as ho, ArrowRight as Zt, ArrowsMaximize as po, Copy as mo, ArrowLeft as fo, ArrowsMove as go, ChevronDownRight as bo } from "tabler-icons-react";
 import vo from "axios";
 import { Prism as Ne } from "@mantine/prism";
-import { cast as Pe, types as v, getRoot as mr, flow as yo, toGenerator as xo, addDisposer as Co } from "mobx-state-tree";
+import { cast as Ae, types as b, getRoot as mr, flow as yo, toGenerator as xo, addDisposer as Co } from "mobx-state-tree";
 import { randomId as fe, useClipboard as wo, useElementSize as rn, useInputState as Qr } from "@mantine/hooks";
 import Yr, { RichTextEditor as Ur } from "@mantine/rte";
 import { makeAutoObservable as gn, runInAction as ct, observable as Hr, toJS as Ft, reaction as bn } from "mobx";
@@ -24,10 +24,10 @@ import { quantile as So } from "d3-array";
 import { flexRender as Xr, createColumnHelper as _o, useReactTable as Io, getCoreRowModel as Ro, getSortedRowModel as Do } from "@tanstack/react-table";
 import { useVirtual as ko } from "react-virtual";
 import { useForm as yn } from "@mantine/form";
-import Ae from "echarts-for-react/lib/core";
+import Le from "echarts-for-react/lib/core";
 import { SunburstChart as To, PieChart as Vo, BoxplotChart as zo, BarChart as Jr, LineChart as Kr, ScatterChart as Zr, RadarChart as Eo } from "echarts/charts";
 import * as ne from "echarts/core";
-import { CanvasRenderer as Le } from "echarts/renderers";
+import { CanvasRenderer as qe } from "echarts/renderers";
 import "echarts-gl";
 import { GridComponent as Ke, VisualMapComponent as Oo, LegendComponent as Ze, TooltipComponent as et, DataZoomComponent as Mt, MarkLineComponent as Fo } from "echarts/components";
 import { transform as ea } from "echarts-stat";
@@ -111,12 +111,12 @@ function qo() {
         B.unshift("Warning: " + C), Function.prototype.apply.call(console[d], console, B);
       }
     }
-    var ie = !1, tt = !1, We = !1, nt = !1, bt = !1, rt;
+    var oe = !1, tt = !1, We = !1, nt = !1, bt = !1, rt;
     rt = Symbol.for("react.module.reference");
     function vt(d) {
-      return !!(typeof d == "string" || typeof d == "function" || d === a || d === o || bt || d === i || d === p || d === h || nt || d === y || ie || tt || We || typeof d == "object" && d !== null && (d.$$typeof === m || d.$$typeof === f || d.$$typeof === s || d.$$typeof === l || d.$$typeof === u || d.$$typeof === rt || d.getModuleId !== void 0));
+      return !!(typeof d == "string" || typeof d == "function" || d === a || d === o || bt || d === i || d === p || d === h || nt || d === y || oe || tt || We || typeof d == "object" && d !== null && (d.$$typeof === m || d.$$typeof === f || d.$$typeof === s || d.$$typeof === l || d.$$typeof === u || d.$$typeof === rt || d.getModuleId !== void 0));
     }
-    function oe(d, C, S) {
+    function se(d, C, S) {
       var T = d.displayName;
       if (T)
         return T;
@@ -126,7 +126,7 @@ function qo() {
     function be(d) {
       return d.displayName || "Context";
     }
-    function se(d) {
+    function le(d) {
       if (d == null)
         return null;
       if (typeof d.tag == "number" && W("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof d == "function")
@@ -156,14 +156,14 @@ function qo() {
             var S = d;
             return be(S._context) + ".Provider";
           case u:
-            return oe(d, d.render, "ForwardRef");
+            return se(d, d.render, "ForwardRef");
           case f:
             var T = d.displayName || null;
-            return T !== null ? T : se(d.type) || "Memo";
+            return T !== null ? T : le(d.type) || "Memo";
           case m: {
             var N = d, B = N._payload, L = N._init;
             try {
-              return se(L(B));
+              return le(L(B));
             } catch {
               return null;
             }
@@ -171,7 +171,7 @@ function qo() {
         }
       return null;
     }
-    var le = Object.assign, Ve = 0, Bn, Gn, Wn, Qn, Yn, Un, Hn;
+    var ce = Object.assign, Ve = 0, Bn, Gn, Wn, Qn, Yn, Un, Hn;
     function Xn() {
     }
     Xn.__reactDisabledLog = !0;
@@ -207,25 +207,25 @@ function qo() {
             writable: !0
           };
           Object.defineProperties(console, {
-            log: le({}, d, {
+            log: ce({}, d, {
               value: Bn
             }),
-            info: le({}, d, {
+            info: ce({}, d, {
               value: Gn
             }),
-            warn: le({}, d, {
+            warn: ce({}, d, {
               value: Wn
             }),
-            error: le({}, d, {
+            error: ce({}, d, {
               value: Qn
             }),
-            group: le({}, d, {
+            group: ce({}, d, {
               value: Yn
             }),
-            groupCollapsed: le({}, d, {
+            groupCollapsed: ce({}, d, {
               value: Un
             }),
-            groupEnd: le({}, d, {
+            groupEnd: ce({}, d, {
               value: Hn
             })
           });
@@ -302,18 +302,18 @@ function qo() {
         if (_e && T && typeof _e.stack == "string") {
           for (var M = _e.stack.split(`
 `), ae = T.stack.split(`
-`), U = M.length - 1, X = ae.length - 1; U >= 1 && X >= 0 && M[U] !== ae[X]; )
+`), H = M.length - 1, X = ae.length - 1; H >= 1 && X >= 0 && M[H] !== ae[X]; )
             X--;
-          for (; U >= 1 && X >= 0; U--, X--)
-            if (M[U] !== ae[X]) {
-              if (U !== 1 || X !== 1)
+          for (; H >= 1 && X >= 0; H--, X--)
+            if (M[H] !== ae[X]) {
+              if (H !== 1 || X !== 1)
                 do
-                  if (U--, X--, X < 0 || M[U] !== ae[X]) {
+                  if (H--, X--, X < 0 || M[H] !== ae[X]) {
                     var pe = `
-` + M[U].replace(" at new ", " at ");
+` + M[H].replace(" at new ", " at ");
                     return d.displayName && pe.includes("<anonymous>") && (pe = pe.replace("<anonymous>", d.displayName)), typeof d == "function" && xt.set(d, pe), pe;
                   }
-                while (U >= 1 && X >= 0);
+                while (H >= 1 && X >= 0);
               break;
             }
         }
@@ -379,8 +379,8 @@ function qo() {
                 throw ae.name = "Invariant Violation", ae;
               }
               M = d[L](C, L, T, S, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (U) {
-              M = U;
+            } catch (H) {
+              M = H;
             }
             M && !(M instanceof Error) && (St(N), W("%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).", T || "React class", S, L, typeof M), St(null)), M instanceof Error && !(M.message in Kn) && (Kn[M.message] = !0, St(N), W("Failed %s type: %s", S, M.message), St(null));
           }
@@ -435,8 +435,8 @@ function qo() {
     }
     function Si(d, C) {
       if (typeof d.ref == "string" && at.current && C && at.current.stateNode !== C) {
-        var S = se(at.current.type);
-        Ut[S] || (W('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', se(at.current.type), d.ref), Ut[S] = !0);
+        var S = le(at.current.type);
+        Ut[S] || (W('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', le(at.current.type), d.ref), Ut[S] = !0);
       }
     }
     function _i(d, C) {
@@ -494,9 +494,9 @@ function qo() {
         for (B in C)
           wt.call(C, B) && !xi.hasOwnProperty(B) && (L[B] = C[B]);
         if (d && d.defaultProps) {
-          var U = d.defaultProps;
-          for (B in U)
-            L[B] === void 0 && (L[B] = U[B]);
+          var H = d.defaultProps;
+          for (B in H)
+            L[B] === void 0 && (L[B] = H[B]);
         }
         if (M || ae) {
           var X = typeof d == "function" ? d.displayName || d.name || "Unknown" : d;
@@ -521,7 +521,7 @@ function qo() {
     function ir() {
       {
         if (Ht.current) {
-          var d = se(Ht.current.type);
+          var d = le(Ht.current.type);
           if (d)
             return `
 
@@ -564,7 +564,7 @@ Check the top-level render call using <` + S + ">.");
           return;
         or[S] = !0;
         var T = "";
-        d && d._owner && d._owner !== Ht.current && (T = " It was passed a child from " + se(d._owner.type) + "."), Qe(d), W('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', S, T), Qe(null);
+        d && d._owner && d._owner !== Ht.current && (T = " It was passed a child from " + le(d._owner.type) + "."), Qe(d), W('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', S, T), Qe(null);
       }
     }
     function lr(d, C) {
@@ -599,11 +599,11 @@ Check the top-level render call using <` + S + ">.");
         else
           return;
         if (S) {
-          var T = se(C);
+          var T = le(C);
           gi(S, d.props, "prop", T, d);
         } else if (C.PropTypes !== void 0 && !Xt) {
           Xt = !0;
-          var N = se(C);
+          var N = le(C);
           W("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", N || "Unknown");
         }
         typeof C.getDefaultProps == "function" && !C.getDefaultProps.isReactClassApproved && W("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
@@ -629,8 +629,8 @@ Check the top-level render call using <` + S + ">.");
           (d === void 0 || typeof d == "object" && d !== null && Object.keys(d).length === 0) && (M += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
           var ae = ki(N);
           ae ? M += ae : M += ir();
-          var U;
-          d === null ? U = "null" : Yt(d) ? U = "array" : d !== void 0 && d.$$typeof === e ? (U = "<" + (se(d.type) || "Unknown") + " />", M = " Did you accidentally export a JSX literal instead of a component?") : U = typeof d, W("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", U, M);
+          var H;
+          d === null ? H = "null" : Yt(d) ? H = "array" : d !== void 0 && d.$$typeof === e ? (H = "<" + (le(d.type) || "Unknown") + " />", M = " Did you accidentally export a JSX literal instead of a component?") : H = typeof d, W("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", H, M);
         }
         var X = Di(d, C, S, N, B);
         if (X == null)
@@ -664,7 +664,7 @@ Check the top-level render call using <` + S + ">.");
 (function(t) {
   process.env.NODE_ENV === "production" ? t.exports = Lo() : t.exports = qo();
 })(Pt);
-const H = Pt.exports.Fragment, r = Pt.exports.jsx, c = Pt.exports.jsxs;
+const U = Pt.exports.Fragment, r = Pt.exports.jsx, c = Pt.exports.jsxs;
 class Xe extends x.Component {
   constructor(e) {
     super(e), this.state = {
@@ -685,7 +685,7 @@ class Xe extends x.Component {
         });
       };
       return /* @__PURE__ */ c(q, {
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           size: "xs",
           children: (e = this.state.error) == null ? void 0 : e.message
         }), /* @__PURE__ */ r(F, {
@@ -714,7 +714,7 @@ function $o({
   onChange: i
 }) {
   return /* @__PURE__ */ c(q, {
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       children: "\xA0"
     }), /* @__PURE__ */ r(He, {
       label: t,
@@ -1038,7 +1038,7 @@ WHERE
         background: "#efefef",
         flexGrow: 0
       },
-      children: /* @__PURE__ */ r(b, {
+      children: /* @__PURE__ */ r(v, {
         weight: 500,
         children: "Global Variables"
       })
@@ -1056,7 +1056,7 @@ WHERE
         noCopy: !0,
         colorScheme: "dark",
         children: Jo
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         weight: 500,
         sx: {
           flexGrow: 0
@@ -1085,7 +1085,7 @@ function Ko({
     children: [/* @__PURE__ */ r("thead", {
       children: /* @__PURE__ */ r("tr", {
         children: Object.keys(t == null ? void 0 : t[0]).map((e) => /* @__PURE__ */ r("th", {
-          children: /* @__PURE__ */ r(b, {
+          children: /* @__PURE__ */ r(v, {
             weight: 700,
             color: "#000",
             children: e
@@ -1101,7 +1101,7 @@ function Ko({
                 fontFamily: "monospace"
               }
             },
-            children: /* @__PURE__ */ r(b, {
+            children: /* @__PURE__ */ r(v, {
               children: a
             })
           })
@@ -1134,10 +1134,10 @@ const da = R(function({
       },
       children: [/* @__PURE__ */ c(g, {
         position: "left",
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           weight: 500,
           children: "Preview Data"
-        }), a.length > 10 && /* @__PURE__ */ c(b, {
+        }), a.length > 10 && /* @__PURE__ */ c(v, {
           size: "sm",
           color: "gray",
           children: ["Showing 10 rows of ", a.length]
@@ -1171,9 +1171,9 @@ const da = R(function({
   position: "apart",
   ref: a,
   ...n,
-  children: [/* @__PURE__ */ r(b, {
+  children: [/* @__PURE__ */ r(v, {
     children: t
-  }), /* @__PURE__ */ r(b, {
+  }), /* @__PURE__ */ r(v, {
     children: e
   })]
 })), ha = R(function({
@@ -1247,7 +1247,7 @@ const es = R(function({
         borderBottom: "1px solid #eee",
         background: "#efefef"
       },
-      children: /* @__PURE__ */ r(b, {
+      children: /* @__PURE__ */ r(v, {
         weight: 500,
         children: "Edit Query"
       })
@@ -1372,7 +1372,7 @@ const ns = R(function({
   }, [e, a.queries.current, i]);
   const o = () => {
     const s = fe();
-    a.queries.append(Pe({
+    a.queries.append(Ae({
       id: s,
       type: xe.Postgresql,
       key: "",
@@ -1387,7 +1387,7 @@ const ns = R(function({
         maxWidth: "600px",
         alignItems: "baseline"
       },
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         children: "Select a Query"
       }), /* @__PURE__ */ r(j, {
         data: a.queries.options,
@@ -1398,7 +1398,7 @@ const ns = R(function({
         sx: {
           flexGrow: 1
         }
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         children: "or"
       }), /* @__PURE__ */ r(g, {
         position: "center",
@@ -1455,7 +1455,7 @@ function as({
 }) {
   const n = ee().context.current, a = x.useMemo(() => jo(t, n), [t, n]);
   return /* @__PURE__ */ c(w, {
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       children: "Preview"
     }), /* @__PURE__ */ r(Ne, {
       language: "sql",
@@ -1466,7 +1466,7 @@ function as({
   });
 }
 const is = R(function() {
-  const e = ee(), n = () => e.sqlSnippets.append(Pe({
+  const e = ee(), n = () => e.sqlSnippets.append(Ae({
     key: fe(),
     value: ""
   }));
@@ -1484,7 +1484,7 @@ const is = R(function() {
         background: "#efefef",
         flexGrow: 0
       },
-      children: /* @__PURE__ */ r(b, {
+      children: /* @__PURE__ */ r(v, {
         weight: 500,
         children: "SQL Snippets"
       })
@@ -1623,13 +1623,13 @@ const ss = R(function({
   });
 });
 var me = /* @__PURE__ */ ((t) => (t.Select = "select", t.MultiSelect = "multi-select", t.TextInput = "text-input", t.Checkbox = "checkbox", t.DateRange = "date-range", t))(me || {});
-const ma = v.model({
-  type: v.enumeration("DataSourceType", [xe.Postgresql, xe.MySQL, xe.HTTP]),
-  key: v.string,
-  sql: v.string
-}), fa = v.model("FilterConfigModel_TextInput", {
-  required: v.boolean,
-  default_value: v.string
+const ma = b.model({
+  type: b.enumeration("DataSourceType", [xe.Postgresql, xe.MySQL, xe.HTTP]),
+  key: b.string,
+  sql: b.string
+}), fa = b.model("FilterConfigModel_TextInput", {
+  required: b.boolean,
+  default_value: b.string
 }).actions((t) => ({
   setRequired(e) {
     t.required = e;
@@ -1643,7 +1643,7 @@ const ma = v.model({
 }), ls = R(function({
   config: e
 }) {
-  return /* @__PURE__ */ r(H, {
+  return /* @__PURE__ */ r(U, {
     children: /* @__PURE__ */ r(He, {
       checked: e.default_value,
       onChange: (n) => e.setDefaultValue(n.currentTarget.checked),
@@ -1662,7 +1662,7 @@ const ma = v.model({
 }], us = R(function({
   config: e
 }) {
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ c(g, {
       children: [/* @__PURE__ */ r(He, {
         checked: e.required,
@@ -1692,7 +1692,7 @@ function ds({
     children: [/* @__PURE__ */ r("thead", {
       children: /* @__PURE__ */ r("tr", {
         children: Object.keys(t == null ? void 0 : t[0]).map((e) => /* @__PURE__ */ r("th", {
-          children: /* @__PURE__ */ r(b, {
+          children: /* @__PURE__ */ r(v, {
             weight: 700,
             color: "#000",
             children: e
@@ -1708,7 +1708,7 @@ function ds({
                 fontFamily: "monospace"
               }
             },
-            children: /* @__PURE__ */ r(b, {
+            children: /* @__PURE__ */ r(v, {
               children: a
             })
           })
@@ -1718,7 +1718,7 @@ function ds({
       children: /* @__PURE__ */ r("tr", {
         children: /* @__PURE__ */ r("td", {
           colSpan: Object.keys(t == null ? void 0 : t[0]).length,
-          children: /* @__PURE__ */ c(b, {
+          children: /* @__PURE__ */ c(v, {
             color: "gray",
             size: "sm",
             children: [t.length - 3, " more row(s) hidden"]
@@ -1742,7 +1742,7 @@ const hs = R(function({
     my: 0,
     children: [/* @__PURE__ */ c(g, {
       position: "apart",
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         size: "md",
         pl: "sm",
         children: "Fetched Data"
@@ -1836,8 +1836,8 @@ const hs = R(function({
       value: ""
     });
   }, a = e.static_options, i = [...a];
-  return /* @__PURE__ */ c(H, {
-    children: [/* @__PURE__ */ r(de, {
+  return /* @__PURE__ */ c(U, {
+    children: [/* @__PURE__ */ r(ie, {
       label: "Configure options",
       labelPosition: "center"
     }), a.length > 0 && /* @__PURE__ */ r(dn, {
@@ -1895,7 +1895,7 @@ const hs = R(function({
       },
       mx: "auto",
       children: "Add an Option"
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       label: "Or fetch options from database",
       labelPosition: "center"
     }), /* @__PURE__ */ r(ba, {
@@ -1915,12 +1915,12 @@ const hs = R(function({
     label: "No default selection",
     value: ""
   }, ...a];
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(He, {
       checked: e.required,
       onChange: (o) => e.setRequired(o.currentTarget.checked),
       label: "Required"
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       label: "Configure options",
       labelPosition: "center"
     }), a.length > 0 && /* @__PURE__ */ r(j, {
@@ -1978,7 +1978,7 @@ const hs = R(function({
       },
       mx: "auto",
       children: "Add an Option"
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       label: "Or fetch options from database",
       labelPosition: "center"
     }), /* @__PURE__ */ r(ba, {
@@ -1989,7 +1989,7 @@ const hs = R(function({
 }), fs = R(function({
   config: e
 }) {
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(k, {
       label: "Default Value",
       value: e.default_value,
@@ -2012,7 +2012,7 @@ const hs = R(function({
     sx: {
       maxWidth: "30em"
     },
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       pb: "md",
       color: "gray",
       children: "Preview"
@@ -2020,7 +2020,7 @@ const hs = R(function({
       filter: e,
       value: a,
       onChange: i
-    }), /* @__PURE__ */ r(b, {
+    }), /* @__PURE__ */ r(v, {
       pt: "lg",
       pb: "md",
       color: "gray",
@@ -2062,7 +2062,7 @@ const hs = R(function({
     cols: 2,
     children: [/* @__PURE__ */ c(q, {
       pl: "md",
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         pb: "md",
         color: "gray",
         children: "Edit"
@@ -2255,12 +2255,12 @@ var ws = /* @__PURE__ */ ((t) => (t.Use = "use", t.Edit = "edit", t))(ws || {}),
 const _s = R(() => {
   const e = ee().views.VIE;
   return !e || e.type !== Re.Division ? null : /* @__PURE__ */ c(w, {
-    children: [/* @__PURE__ */ r(de, {
+    children: [/* @__PURE__ */ r(ie, {
       mt: 8,
       mb: 0,
       label: "Division settings",
       labelPosition: "center"
-    }), /* @__PURE__ */ r(b, {
+    }), /* @__PURE__ */ r(v, {
       align: "center",
       size: "xs",
       color: "dimmed",
@@ -2270,7 +2270,7 @@ const _s = R(() => {
 }), Is = R(() => {
   const e = ee().views.VIE;
   return !e || e.type !== Re.Modal ? null : /* @__PURE__ */ c(w, {
-    children: [/* @__PURE__ */ r(de, {
+    children: [/* @__PURE__ */ r(ie, {
       mt: 8,
       label: "Modal settings",
       labelPosition: "center"
@@ -2289,7 +2289,7 @@ const _s = R(() => {
       })]
     })]
   });
-}), Rs = R(() => /* @__PURE__ */ c(H, {
+}), Rs = R(() => /* @__PURE__ */ c(U, {
   children: [/* @__PURE__ */ r(_s, {}), /* @__PURE__ */ r(Is, {})]
 })), Ds = [{
   label: "Division",
@@ -2342,7 +2342,7 @@ const _s = R(() => {
     },
     title: /* @__PURE__ */ c(g, {
       position: "apart",
-      children: [/* @__PURE__ */ c(b, {
+      children: [/* @__PURE__ */ c(v, {
         sx: {
           flexGrow: 1
         },
@@ -2373,10 +2373,10 @@ const _s = R(() => {
   children: /* @__PURE__ */ c(g, {
     noWrap: !0,
     position: "apart",
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       size: "sm",
       children: t
-    }), /* @__PURE__ */ r(b, {
+    }), /* @__PURE__ */ r(v, {
       size: "xs",
       color: "dimmed",
       children: e
@@ -2388,7 +2388,7 @@ const _s = R(() => {
   children: /* @__PURE__ */ r(g, {
     noWrap: !0,
     grow: !0,
-    children: /* @__PURE__ */ r(b, {
+    children: /* @__PURE__ */ r(v, {
       size: "sm",
       align: "center",
       color: "#228be6",
@@ -2452,12 +2452,12 @@ const _s = R(() => {
     })]
   });
 }), Es = R(() => {
-  const t = ee(), [e, n] = ue(!1), a = () => {
+  const t = ee(), [e, n] = de(!1), a = () => {
     n(!0);
   }, i = () => {
     n(!1);
   };
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(zs, {
       value: t.views.idOfVIE,
       onChange: t.views.setIDOfVIE,
@@ -2506,13 +2506,13 @@ const va = R(function({
   saveChanges: e
 }) {
   const n = ee(), a = x.useCallback(() => {
-    const ie = n.queries.current, tt = n.views.current, We = n.sqlSnippets.current;
+    const oe = n.queries.current, tt = n.views.current, We = n.sqlSnippets.current;
     return {
       filters: n.filters.current,
       views: tt,
       definition: {
         sqlSnippets: We,
-        queries: ie
+        queries: oe
       }
     };
   }, [n]), i = () => {
@@ -2574,9 +2574,9 @@ const va = R(function({
           size: 20
         }),
         children: "Revert Changes"
-      }), /* @__PURE__ */ c(ce, {
+      }), /* @__PURE__ */ c(ue, {
         width: 180,
-        children: [/* @__PURE__ */ r(ce.Target, {
+        children: [/* @__PURE__ */ r(ue.Target, {
           children: /* @__PURE__ */ r(F, {
             variant: "default",
             size: "xs",
@@ -2585,14 +2585,14 @@ const va = R(function({
             }),
             children: "Export"
           })
-        }), /* @__PURE__ */ c(ce.Dropdown, {
-          children: [/* @__PURE__ */ r(ce.Item, {
+        }), /* @__PURE__ */ c(ue.Dropdown, {
+          children: [/* @__PURE__ */ r(ue.Item, {
             icon: /* @__PURE__ */ r(Wr, {
               size: 14
             }),
             onClick: n.queries.downloadAllData,
             children: "Download Data"
-          }), /* @__PURE__ */ r(ce.Item, {
+          }), /* @__PURE__ */ r(ue.Item, {
             icon: /* @__PURE__ */ r(uo, {
               size: 14
             }),
@@ -2622,7 +2622,7 @@ function ya() {
   } = he();
   return x.useEffect(() => {
     t(e);
-  }, [e]), !a.description || a.description === "<p><br></p>" ? null : /* @__PURE__ */ c(H, {
+  }, [e]), !a.description || a.description === "<p><br></p>" ? null : /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(Ce, {
       opened: e,
       onClose: () => n(!1),
@@ -2667,7 +2667,7 @@ const xa = (t) => {
   return /* @__PURE__ */ c($i, {
     withBorder: !0,
     p: "sm",
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       size: "xs",
       color: "dimmed",
       mb: "sm",
@@ -2676,7 +2676,7 @@ const xa = (t) => {
       style: {
         maxHeight: "300px"
       },
-      children: n.map((o) => /* @__PURE__ */ c(b, {
+      children: n.map((o) => /* @__PURE__ */ c(v, {
         size: "sm",
         children: [/* @__PURE__ */ c(dr, {
           color: "teal",
@@ -2763,10 +2763,10 @@ const qs = R((t) => {
     operationId: o,
     instance: s,
     variables: l
-  } = t, u = Fe(() => new Fs(i, s), [i, s]);
+  } = t, u = Me(() => new Fs(i, s), [i, s]);
   return ft(async () => {
     await u.configOperation(o, l);
-  }, [o, u]), Ms(u) ? /* @__PURE__ */ c(H, {
+  }, [o, u]), Ms(u) ? /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(Ps, {
       model: u,
       onClick: n
@@ -2816,7 +2816,7 @@ function Ns(t) {
   return !!t.triggerId && !!t.triggerSchema;
 }
 function js(t, e) {
-  return Fe(() => new $s(t, e), [t, e]);
+  return Me(() => new $s(t, e), [t, e]);
 }
 const Bs = R(({
   model: t,
@@ -2862,7 +2862,7 @@ const Bs = R(({
     setTrue: n,
     setFalse: a
   }] = mt(!1), i = t.model;
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(Ce, {
       opened: e,
       onClose: a,
@@ -3122,7 +3122,7 @@ const Hs = (t) => {
   getColor: At(["#fff7f1", "darkorange", "#b60000"]),
   name: "orange",
   category: "sequential"
-}, rl = "4.9.0";
+}, rl = "4.10.0";
 class al {
   constructor(e) {
     E(this, "staticColors", /* @__PURE__ */ new Map());
@@ -3225,7 +3225,7 @@ class ye extends ol {
 const _n = {
   content: ""
 }, G = (t, e) => {
-  const [n, { setFalse: a }] = mt(!0), [i, o] = ue();
+  const [n, { setFalse: a }] = mt(!0), [i, o] = de();
   K(() => (t.getItem(e).then((l) => {
     o(l), a();
   }), t.watchItem(e, (l) => {
@@ -3298,7 +3298,7 @@ function ll({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Content"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -3474,12 +3474,12 @@ function pl({
         sx: {
           flexGrow: 1
         }
-      }), /* @__PURE__ */ r($e, {
+      }), /* @__PURE__ */ r(Fe, {
         label: /* @__PURE__ */ c(w, {
           spacing: 0,
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             children: "Average"
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             size: 12,
             color: "gray",
             children: "like 1.234k, 1.234m"
@@ -3513,7 +3513,7 @@ function pl({
         max: 4,
         value: t.mantissa,
         onChange: i
-      }), /* @__PURE__ */ r($e, {
+      }), /* @__PURE__ */ r(Fe, {
         label: "Trim mantissa",
         checked: t.trimMantissa,
         onChange: o,
@@ -3529,25 +3529,25 @@ function pl({
       })]
     }), /* @__PURE__ */ c(w, {
       spacing: 0,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         weight: "bold",
         children: "Preview"
       }), /* @__PURE__ */ r(Xe, {
         children: /* @__PURE__ */ c(g, {
           position: "apart",
-          children: [/* @__PURE__ */ c(b, {
+          children: [/* @__PURE__ */ c(v, {
             size: 12,
             color: "gray",
             children: ["123456789 ", /* @__PURE__ */ r(Zt, {
               size: 9
             }), " ", ve(123456789).format(t)]
-          }), /* @__PURE__ */ c(b, {
+          }), /* @__PURE__ */ c(v, {
             size: 12,
             color: "gray",
             children: ["1234 ", /* @__PURE__ */ r(Zt, {
               size: 9
             }), " ", ve(1234).format(t)]
-          }), /* @__PURE__ */ c(b, {
+          }), /* @__PURE__ */ c(v, {
             size: 12,
             color: "gray",
             children: ["0.1234 ", /* @__PURE__ */ r(Zt, {
@@ -3693,11 +3693,11 @@ function vl({
   }, [o]), u = x.useMemo(() => !$.isEqual(i, e), [i, e]), p = () => {
     n(i.map((m) => m.toString()));
   }, h = Ni(), f = x.useMemo(() => Object.entries(h.colors).map(([m, y]) => y[6]), [h]);
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ c(g, {
       position: "left",
       ref: a,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         children: t
       }), /* @__PURE__ */ r(z, {
         mr: 5,
@@ -3744,7 +3744,7 @@ function xl({
 }, n) {
   const {
     colorManager: a
-  } = Me(Te), i = x.useMemo(() => a.getStaticColors().map((l) => ({
+  } = Pe(Te), i = x.useMemo(() => a.getStaticColors().map((l) => ({
     label: l.name,
     group: l.category,
     value: l.value
@@ -3766,7 +3766,7 @@ function xl({
         maxWidth: "46%",
         flexGrow: 1
       }
-    }), /* @__PURE__ */ r(b, {
+    }), /* @__PURE__ */ r(v, {
       sx: {
         flexGrow: 0
       },
@@ -3818,7 +3818,7 @@ function Cl({
     spacing: 0,
     mt: "sm",
     mb: "lg",
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       size: "sm",
       children: t
     }), /* @__PURE__ */ r(zr, {
@@ -3843,11 +3843,11 @@ function Sl({
   }, [o]), l = x.useCallback((h) => {
     o((f) => (f.splice(h, 1), [...f]));
   }, [o]), u = x.useMemo(() => !$.isEqual(i, e), [i, e]);
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ c(g, {
       position: "left",
       ref: a,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         children: t
       }), /* @__PURE__ */ r(z, {
         mr: 5,
@@ -3897,8 +3897,8 @@ const _l = x.forwardRef(Sl), Il = x.forwardRef(function({
     const u = $.cloneDeep(e);
     $.set(u, s, l), n(u);
   };
-  return /* @__PURE__ */ c(H, {
-    children: [/* @__PURE__ */ r(de, {
+  return /* @__PURE__ */ c(U, {
+    children: [/* @__PURE__ */ r(ie, {
       my: "xs",
       label: "Typography",
       labelPosition: "center"
@@ -3926,7 +3926,7 @@ const _l = x.forwardRef(Sl), Il = x.forwardRef(function({
         value: e.weight,
         onChange: (s) => o("weight", s)
       })
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       my: "xs",
       label: "Style",
       labelPosition: "center"
@@ -3945,7 +3945,7 @@ const _l = x.forwardRef(Sl), Il = x.forwardRef(function({
       }), i === "static" && /* @__PURE__ */ r(De, {
         value: e.color.staticColor,
         onChange: (s) => o("color.staticColor", s)
-      }), i === "continuous" && /* @__PURE__ */ c(H, {
+      }), i === "continuous" && /* @__PURE__ */ c(U, {
         children: [/* @__PURE__ */ r(_l, {
           label: "Value Range",
           value: e.color.valueRange,
@@ -3972,11 +3972,11 @@ const _l = x.forwardRef(Sl), Il = x.forwardRef(function({
     px: "sm",
     py: "md",
     ref: o,
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       weight: "bold",
       pb: 0,
       children: e.name
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       my: "xs",
       label: "Data",
       labelPosition: "center"
@@ -3999,7 +3999,7 @@ const _l = x.forwardRef(Sl), Il = x.forwardRef(function({
       label: "Aggregation",
       value: e.aggregation,
       onChange: (l) => s("aggregation", l)
-    }), /* @__PURE__ */ r(de, {
+    }), /* @__PURE__ */ r(ie, {
       my: "xs",
       label: "Format",
       labelPosition: "center"
@@ -4074,7 +4074,7 @@ const Tn = (t, e) => (n) => Boolean(gt(n) && kl.test(n) && n.startsWith(t) || e
     [n]: parseFloat(s),
     alpha: l !== void 0 ? parseFloat(l) : 1
   };
-}, qe = {
+}, $e = {
   test: Tn("hsl", "hue"),
   parse: Va("hue", "saturation", "lightness"),
   transform: ({ hue: t, saturation: e, lightness: n, alpha: a = 1 }) => "hsla(" + Math.round(t) + ", " + dt.transform(ut(e)) + ", " + dt.transform(ut(n)) + ", " + ut(Ta.transform(a)) + ")"
@@ -4097,9 +4097,9 @@ const sn = {
   parse: zl,
   transform: Ee.transform
 }, Nt = {
-  test: (t) => Ee.test(t) || sn.test(t) || qe.test(t),
-  parse: (t) => Ee.test(t) ? Ee.parse(t) : qe.test(t) ? qe.parse(t) : sn.parse(t),
-  transform: (t) => gt(t) ? t : t.hasOwnProperty("red") ? Ee.transform(t) : qe.transform(t)
+  test: (t) => Ee.test(t) || sn.test(t) || $e.test(t),
+  parse: (t) => Ee.test(t) ? Ee.parse(t) : $e.test(t) ? $e.parse(t) : sn.parse(t),
+  transform: (t) => gt(t) ? t : t.hasOwnProperty("red") ? Ee.transform(t) : $e.transform(t)
 }, za = "${c}", Ea = "${n}";
 function El(t) {
   var e, n, a, i;
@@ -4154,11 +4154,11 @@ function yr({ hue: t, saturation: e, lightness: n, alpha: a }) {
 const Ml = (t, e, n) => {
   const a = t * t, i = e * e;
   return Math.sqrt(Math.max(0, n * (i - a) + a));
-}, Pl = [sn, Ee, qe], xr = (t) => Pl.find((e) => e.test(t)), Cr = (t) => `'${t}' is not an animatable color. Use the equivalent color code instead.`, Aa = (t, e) => {
+}, Pl = [sn, Ee, $e], xr = (t) => Pl.find((e) => e.test(t)), Cr = (t) => `'${t}' is not an animatable color. Use the equivalent color code instead.`, Aa = (t, e) => {
   let n = xr(t), a = xr(e);
   pt(!!n, Cr(t)), pt(!!a, Cr(e));
   let i = n.parse(t), o = a.parse(e);
-  n === qe && (i = yr(i), n = Ee), a === qe && (o = yr(o), a = Ee);
+  n === $e && (i = yr(i), n = Ee), a === $e && (o = yr(o), a = Ee);
   const s = Object.assign({}, i);
   return (l) => {
     for (const u in s)
@@ -4274,7 +4274,7 @@ function Hl(t, e) {
       size: u,
       weight: p
     } = a, h = Dn(e, s, l), f = jt(a, h);
-    n[i] = /* @__PURE__ */ r(b, {
+    n[i] = /* @__PURE__ */ r(v, {
       sx: {
         fontSize: u,
         display: "inline"
@@ -4286,7 +4286,7 @@ function Hl(t, e) {
   }), n;
 }
 function Xl(t) {
-  return t.split(" ").map((e) => /* @__PURE__ */ c(H, {
+  return t.split(" ").map((e) => /* @__PURE__ */ c(U, {
     children: [e, "\xA0"]
   }));
 }
@@ -4312,7 +4312,7 @@ function ln(t, e, n) {
     if (!l)
       return nn(o);
     const u = (p = s[2]) != null ? p : "";
-    return /* @__PURE__ */ c(H, {
+    return /* @__PURE__ */ c(U, {
       children: [l, nn(u)]
     });
   });
@@ -4348,7 +4348,7 @@ function Zl({
     variables: a,
     align: i
   } = e, o = A(() => ln(n, a, t.data), [n, a, t.data]);
-  return /* @__PURE__ */ r(b, {
+  return /* @__PURE__ */ r(v, {
     align: i,
     children: Object.values(o).map((s) => s)
   });
@@ -4467,7 +4467,7 @@ function nc({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           weight: 500,
           children: "Stats Configurations"
         }), /* @__PURE__ */ r(z, {
@@ -4493,7 +4493,7 @@ function nc({
           },
           ...m
         })
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         pb: "sm",
         pt: "md",
         size: "sm",
@@ -4532,11 +4532,11 @@ const kt = {
 }, ac = ({
   vizManager: t,
   instance: e
-}) => Fe(
+}) => Me(
   () => new Xa(e, t.resolveComponent(e.type), $n),
   [e, t]
 ), ic = (t, e) => {
-  const [n, a] = ue([]);
+  const [n, a] = de([]);
   return K(() => t.watchTriggerSnapshotList(
     (i) => a(i.filter((o) => o.schemaRef === e))
   ), []), n;
@@ -4598,7 +4598,7 @@ function dc(t) {
 const hc = ({
   header: t,
   cx: e
-}) => /* @__PURE__ */ c(b, {
+}) => /* @__PURE__ */ c(v, {
   className: e("table-head-cell", {
     "table-head-cell--sortable": t.column.getCanSort()
   }),
@@ -4685,7 +4685,7 @@ function vc(t) {
   const e = Wa(t.instance), {
     value: n
   } = G(t.trigger.triggerData, "config");
-  return /* @__PURE__ */ r(b, {
+  return /* @__PURE__ */ r(v, {
     children: bc(n, e)
   });
 }
@@ -4746,7 +4746,7 @@ function Bt(t) {
     style: {
       ...wc(t)
     },
-    children: /* @__PURE__ */ r(b, {
+    children: /* @__PURE__ */ r(v, {
       className: "table-cell-text",
       onClick: t.tableCellContext.getClickHandler(),
       children: /* @__PURE__ */ r("span", {
@@ -4809,7 +4809,7 @@ function Dc(t) {
 const kc = (t) => {
   const e = ac(t), n = ic(e.triggerManager, Vn.id), {
     colorManager: a
-  } = Me(Te);
+  } = Pe(Te);
   return Rt((i) => new Vc(t.getColIndex, i, n, e, a), [n, e, t.getColIndex]);
 };
 function Tc({
@@ -4829,32 +4829,32 @@ function Tc({
   } = o, {
     classes: p,
     cx: h
-  } = yc(), f = x.useMemo(() => s ? Object.keys(n[0]).map((oe) => ({
-    label: oe,
-    value_field: oe,
+  } = yc(), f = x.useMemo(() => s ? Object.keys(n[0]).map((se) => ({
+    label: se,
+    value_field: se,
     value_type: Oe.string
   })) : l, [s, l, n]), m = kc({
-    getColIndex: Rt((oe) => f.indexOf(oe.column.columnDef.meta), [f]),
+    getColIndex: Rt((se) => f.indexOf(se.column.columnDef.meta), [f]),
     vizManager: t.vizManager,
     instance: e
   }), y = A(() => {
-    const oe = _o(), be = f.map((le) => oe.accessor(le.value_field, {
+    const se = _o(), be = f.map((ce) => se.accessor(ce.value_field, {
       cell: (Ve) => /* @__PURE__ */ r(Dc, {
         tableCellContext: m(Ve.cell),
         value: Ve.getValue(),
-        type: le.value_type
+        type: ce.value_type
       }),
-      header: le.label,
+      header: ce.label,
       enableSorting: !0,
-      meta: le
+      meta: ce
     }));
-    return [oe.display({
+    return [se.display({
       id: "#index",
-      cell: (le) => le.row.index + 1,
+      cell: (ce) => ce.row.index + 1,
       header: "#",
       size: 10 * (n.length.toString().length + 1)
     }), ...be];
-  }, [f, m]), [I, D] = ue([]), O = Io({
+  }, [f, m]), [I, D] = de([]), O = Io({
     data: n,
     state: {
       sorting: I
@@ -4871,9 +4871,9 @@ function Tc({
     estimateSize: Rt(() => 28, []),
     overscan: 20
   }), {
-    virtualItems: ie,
+    virtualItems: oe,
     totalSize: tt
-  } = ge, We = ie.length > 0 && ((rt = ie == null ? void 0 : ie[0]) == null ? void 0 : rt.start) || 0, nt = ie.length > 0 ? tt - (((vt = ie == null ? void 0 : ie[ie.length - 1]) == null ? void 0 : vt.end) || 0) : 0;
+  } = ge, We = oe.length > 0 && ((rt = oe == null ? void 0 : oe[0]) == null ? void 0 : rt.start) || 0, nt = oe.length > 0 ? tt - (((vt = oe == null ? void 0 : oe[oe.length - 1]) == null ? void 0 : vt.end) || 0) : 0;
   return /* @__PURE__ */ r("div", {
     ref: W,
     style: {
@@ -4891,8 +4891,8 @@ function Tc({
       striped: o.striped,
       children: [/* @__PURE__ */ r("thead", {
         className: p.thead,
-        children: O.getHeaderGroups().map((oe) => /* @__PURE__ */ r("tr", {
-          children: oe.headers.map((be) => /* @__PURE__ */ r("th", {
+        children: O.getHeaderGroups().map((se) => /* @__PURE__ */ r("tr", {
+          children: se.headers.map((be) => /* @__PURE__ */ r("th", {
             style: {
               width: be.getSize()
             },
@@ -4901,7 +4901,7 @@ function Tc({
               cx: h
             })
           }, be.id))
-        }, oe.id))
+        }, se.id))
       }), /* @__PURE__ */ c("tbody", {
         children: [We > 0 && /* @__PURE__ */ r("tr", {
           children: /* @__PURE__ */ r("td", {
@@ -4909,12 +4909,12 @@ function Tc({
               height: `${We}px`
             }
           })
-        }), ie.map((oe) => {
-          const be = Q[oe.index];
+        }), oe.map((se) => {
+          const be = Q[se.index];
           return /* @__PURE__ */ r("tr", {
-            children: be.getVisibleCells().map((se) => /* @__PURE__ */ r("td", {
-              children: Xr(se.column.columnDef.cell, se.getContext())
-            }, se.id))
+            children: be.getVisibleCells().map((le) => /* @__PURE__ */ r("td", {
+              children: Xr(le.column.columnDef.cell, le.getContext())
+            }, le.id))
           }, be.id);
         }), nt > 0 && /* @__PURE__ */ r("tr", {
           children: /* @__PURE__ */ r("td", {
@@ -5041,7 +5041,7 @@ function Oc(t) {
     value: i
   } = t, {
     classes: o
-  } = Qa(), [s, l] = ue(i), [u, {
+  } = Qa(), [s, l] = de(i), [u, {
     setTrue: p,
     setFalse: h
   }] = mt(!1), f = a % 2 === 1, m = f && i != null, y = !f && i != null, I = `map ${i} to color ${a}`, D = () => {
@@ -5054,7 +5054,7 @@ function Oc(t) {
   return /* @__PURE__ */ c("div", {
     "data-testid": `palette-item-${a}`,
     className: o.paletteItem,
-    children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ r(v, {
       title: I,
       style: {
         opacity: m ? 1 : 0
@@ -5101,7 +5101,7 @@ function Oc(t) {
           })]
         })
       })]
-    }), /* @__PURE__ */ r(b, {
+    }), /* @__PURE__ */ r(v, {
       title: I,
       style: {
         opacity: y ? 1 : 0
@@ -5129,7 +5129,7 @@ const Fc = R(({
     }, a))
   });
 }), Mc = R(function(e) {
-  const n = Fe(() => new Ec(), []);
+  const n = Me(() => new Ec(), []);
   return K(() => {
     n.fromProps(e);
   }), n.interpolation == null ? null : /* @__PURE__ */ r(Fc, {
@@ -5140,7 +5140,7 @@ const Fc = R(({
     value: e,
     onChange: n,
     colorManager: a
-  } = t, i = a.getColorInterpolations(), [o, s] = ue(e), l = a.decodeInterpolation(o.interpolation) || i[0], [u, {
+  } = t, i = a.getColorInterpolations(), [o, s] = de(e), l = a.decodeInterpolation(o.interpolation) || i[0], [u, {
     setTrue: p,
     setFalse: h
   }] = mt(), f = i.map((O) => ({
@@ -5166,7 +5166,7 @@ const Fc = R(({
   const D = () => {
     h(), s(e);
   };
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(F, {
       variant: "outline",
       onClick: p,
@@ -5224,7 +5224,7 @@ function $c(t, e) {
 const Nc = (t) => {
   const {
     colorManager: e
-  } = Me(Te), [n, a] = ue(Ya(t.value)), [i, o] = ue(qc(e, t.value)), s = pr(i), [l, u] = ue($c(e, t.value)), p = pr(l);
+  } = Pe(Te), [n, a] = de(Ya(t.value)), [i, o] = de(qc(e, t.value)), s = pr(i), [l, u] = de($c(e, t.value)), p = pr(l);
   return /* @__PURE__ */ c(g, {
     align: "end",
     children: [/* @__PURE__ */ r(j, {
@@ -5299,7 +5299,7 @@ function Gc({
         sx: {
           position: "relative"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Table Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -5370,17 +5370,17 @@ function Gc({
             ...a.getInputProps("fontSize")
           })
         }), /* @__PURE__ */ c(w, {
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             children: "Other"
           }), /* @__PURE__ */ c(g, {
             position: "apart",
             grow: !0,
-            children: [/* @__PURE__ */ r($e, {
+            children: [/* @__PURE__ */ r(Fe, {
               label: "Striped",
               ...a.getInputProps("striped", {
                 type: "checkbox"
               })
-            }), /* @__PURE__ */ r($e, {
+            }), /* @__PURE__ */ r(Fe, {
               label: "Highlight on hover",
               ...a.getInputProps("highlightOnHover", {
                 type: "checkbox"
@@ -5397,13 +5397,13 @@ function Gc({
           border: "1px solid #eee",
           borderRadius: "5px"
         },
-        children: [/* @__PURE__ */ r($e, {
+        children: [/* @__PURE__ */ r(Fe, {
           label: "Use Original Data Columns",
           ...a.getInputProps("use_raw_columns", {
             type: "checkbox"
           })
         }), !a.values.use_raw_columns && /* @__PURE__ */ c(w, {
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             mt: "xl",
             mb: 0,
             children: "Custom Columns"
@@ -5462,7 +5462,7 @@ function Gc({
             })
           })]
         })]
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         weight: 500,
         mb: "md",
         children: "Current Configuration:"
@@ -5504,7 +5504,7 @@ const cn = {
   label_field: "",
   value_field: ""
 };
-ne.use([To, Le]);
+ne.use([To, qe]);
 const Qc = {
   tooltip: {
     show: !0
@@ -5548,7 +5548,7 @@ function Yc({
       data: l
     }
   });
-  return /* @__PURE__ */ r(Ae, {
+  return /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: h,
     style: {
@@ -5588,7 +5588,7 @@ function Uc({
         sx: {
           position: "relative"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Sunburst Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -5646,7 +5646,7 @@ const Xc = {
   label_field: "",
   value_field: ""
 };
-ne.use([Vo, Le]);
+ne.use([Vo, qe]);
 const Jc = {
   tooltip: {
     show: !0
@@ -5709,7 +5709,7 @@ function Kc({
       data: l
     }
   });
-  return /* @__PURE__ */ r(Ae, {
+  return /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: p,
     style: {
@@ -5749,7 +5749,7 @@ function Zc({
         sx: {
           position: "relative"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Pie Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -5820,7 +5820,7 @@ const tu = {
     name: "Z Axis Name"
   }
 };
-ne.use([Ke, Oo, Ze, et, Le]);
+ne.use([Ke, Oo, Ze, et, qe]);
 function nu({
   context: t
 }) {
@@ -5876,7 +5876,7 @@ function nu({
       data: n.map((I) => [I[o], I[s], I[l]])
     }]
   };
-  return e ? /* @__PURE__ */ r(Ae, {
+  return e ? /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: y,
     style: {
@@ -5905,7 +5905,7 @@ function ru({
     spacing: "xs",
     children: /* @__PURE__ */ c("form", {
       onSubmit: s(n),
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         children: "X Axis"
       }), /* @__PURE__ */ c(g, {
         position: "apart",
@@ -5940,7 +5940,7 @@ function ru({
             ...u
           })
         })]
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         mt: "lg",
         children: "Y Axis"
       }), /* @__PURE__ */ c(g, {
@@ -5976,7 +5976,7 @@ function ru({
             ...u
           })
         })]
-      }), /* @__PURE__ */ r(b, {
+      }), /* @__PURE__ */ r(v, {
         mt: "lg",
         children: "Z Axis"
       }), /* @__PURE__ */ c(g, {
@@ -6025,7 +6025,7 @@ function ru({
           type: "submit",
           children: [/* @__PURE__ */ r(Z, {
             size: 20
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             ml: "md",
             children: "Save"
           })]
@@ -6066,7 +6066,7 @@ const iu = {
   variables: [],
   reference_lines: []
 };
-ne.use([Mt, zo, Fo, Ke, Ze, et, Le]);
+ne.use([Mt, zo, Fo, Ke, Ze, et, qe]);
 function ou(t, e, n) {
   const a = e.reduce((i, o) => {
     const s = ja(o, n);
@@ -6157,7 +6157,7 @@ function su({
       datasetIndex: 1
     }, ...ou(p, u, n)]
   };
-  return !e || !a || !i ? null : /* @__PURE__ */ r(Ae, {
+  return !e || !a || !i ? null : /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: m,
     style: {
@@ -6383,7 +6383,7 @@ function hu({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Chart Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -6471,7 +6471,7 @@ function hu({
           }), /* @__PURE__ */ r(P.Panel, {
             children: /* @__PURE__ */ c(w, {
               spacing: 4,
-              children: [/* @__PURE__ */ r(b, {
+              children: [/* @__PURE__ */ r(v, {
                 size: "sm",
                 children: "Color"
               }), /* @__PURE__ */ r(_, {
@@ -6490,7 +6490,7 @@ function hu({
           children: [/* @__PURE__ */ r(P.Control, {
             children: /* @__PURE__ */ c(g, {
               position: "apart",
-              children: ["Advanced", /* @__PURE__ */ r(b, {
+              children: ["Advanced", /* @__PURE__ */ r(v, {
                 align: "right",
                 size: 12,
                 color: "grey",
@@ -6771,7 +6771,7 @@ const Mn = {
   variables: [],
   reference_lines: []
 };
-ne.use([Mt, Jr, Kr, Zr, Ke, Ze, et, Le]);
+ne.use([Mt, Jr, Kr, Zr, Ke, Ze, et, qe]);
 ne.registerTransform(ea.regression);
 function _r(t) {
   return t.trim().length > 0;
@@ -6783,7 +6783,7 @@ function Ru({
   height: a
 }) {
   const i = x.useMemo(() => Iu(t, e), [t, e]);
-  return !n || !a ? null : /* @__PURE__ */ r(Ae, {
+  return !n || !a ? null : /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: i,
     style: {
@@ -6819,7 +6819,7 @@ function Du({
     };
   }, [n, a]), f = Math.max(0, o - l - p);
   return /* @__PURE__ */ c(q, {
-    children: [_r(n.stats.templates.top) && /* @__PURE__ */ r(b, {
+    children: [_r(n.stats.templates.top) && /* @__PURE__ */ r(v, {
       ref: s,
       align: "left",
       size: "xs",
@@ -6830,7 +6830,7 @@ function Du({
       height: f,
       data: a,
       conf: n
-    }), _r(n.stats.templates.bottom) && /* @__PURE__ */ r(b, {
+    }), _r(n.stats.templates.bottom) && /* @__PURE__ */ r(v, {
       ref: u,
       align: "left",
       size: "xs",
@@ -7062,7 +7062,7 @@ function zu({
       })]
     }), /* @__PURE__ */ c(w, {
       spacing: 4,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         size: "sm",
         children: "Color"
       }), /* @__PURE__ */ r(_, {
@@ -7155,7 +7155,7 @@ function Fu({
   control: t,
   index: e
 }) {
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ c(g, {
       grow: !0,
       align: "top",
@@ -7249,7 +7249,7 @@ function Pu({
         sx: {
           flexGrow: 1
         },
-        children: /* @__PURE__ */ r($e, {
+        children: /* @__PURE__ */ r(Fe, {
           label: "Smooth Line",
           checked: n.value,
           onChange: (a) => n.onChange(a.currentTarget.checked)
@@ -7280,7 +7280,7 @@ function Lu({
         },
         pb: 16,
         spacing: 4,
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           size: "sm",
           children: "Size"
         }), /* @__PURE__ */ r(zr, {
@@ -7479,7 +7479,7 @@ function $u({
       })
     }), /* @__PURE__ */ c(w, {
       spacing: 4,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         size: "sm",
         children: "Color"
       }), /* @__PURE__ */ r(_, {
@@ -7925,7 +7925,7 @@ function Xu({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Chart Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -8025,7 +8025,7 @@ function Xu({
           children: [/* @__PURE__ */ r(P.Control, {
             children: /* @__PURE__ */ c(g, {
               position: "apart",
-              children: ["Advanced", /* @__PURE__ */ r(b, {
+              children: ["Advanced", /* @__PURE__ */ r(v, {
                 align: "right",
                 size: 12,
                 color: "grey",
@@ -8118,7 +8118,7 @@ const Pn = {
   series_name_key: "name",
   dimensions: []
 };
-ne.use([Eo, Ke, Ze, et, Le]);
+ne.use([Eo, Ke, Ze, et, qe]);
 function td({
   context: t
 }) {
@@ -8129,7 +8129,7 @@ function td({
     height: a
   } = t.viewport, i = t.data, o = A(() => ed(Ge({}, e, Pn), i), [e, i]);
   return !n || !a || !e || Pr(e == null ? void 0 : e.dimensions) ? null : /* @__PURE__ */ r(q, {
-    children: /* @__PURE__ */ r(Ae, {
+    children: /* @__PURE__ */ r(Le, {
       echarts: ne,
       option: o,
       style: {
@@ -8199,7 +8199,7 @@ function nd({
         })
       })]
     }), /* @__PURE__ */ c(q, {
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         size: "sm",
         children: "Color"
       }), /* @__PURE__ */ r(_, {
@@ -8322,7 +8322,7 @@ function id({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Chart Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -8483,23 +8483,23 @@ function hd(t, e) {
         position: "center",
         noWrap: !0,
         spacing: 10,
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: i.name
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "="
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           weight: "bold",
           color: "gray",
           children: u
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "+"
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           weight: "bold",
           color: "gray",
           children: l
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "\xD7"
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: a.name
         })]
       }),
@@ -8518,31 +8518,31 @@ function hd(t, e) {
         position: "center",
         noWrap: !0,
         spacing: 10,
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: i.name
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "="
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           weight: "bold",
           color: "gray",
           children: s
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "\xD7"
         }), /* @__PURE__ */ c(g, {
           position: "left",
           noWrap: !0,
           spacing: 2,
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             children: "Math.exp("
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             weight: "bold",
             color: "gray",
             children: l
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: "\xD7"
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: a.name
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: ")"
           })]
         })]
@@ -8562,29 +8562,29 @@ function hd(t, e) {
         position: "center",
         noWrap: !0,
         spacing: 10,
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: i.name
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "="
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           weight: "bold",
           color: "gray",
           children: s
-        }), /* @__PURE__ */ r(b, {
+        }), /* @__PURE__ */ r(v, {
           children: "\xD7"
         }), /* @__PURE__ */ c(g, {
           position: "left",
           noWrap: !0,
           spacing: 2,
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             children: "Math.log("
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: a.name
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: ")"
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             children: "+"
-          }), /* @__PURE__ */ r(b, {
+          }), /* @__PURE__ */ r(v, {
             weight: "bold",
             color: "gray",
             children: l
@@ -8636,7 +8636,7 @@ const An = {
     y_axis_data_key: "value"
   }
 };
-ne.use([Mt, Zr, Ke, Ze, et, Le]);
+ne.use([Mt, Zr, Ke, Ze, et, qe]);
 ne.registerTransform(ea.regression);
 function pd({
   context: t
@@ -8662,7 +8662,7 @@ function pd({
     return null;
   let p = a;
   return s && (p -= 20), /* @__PURE__ */ c(q, {
-    children: [s && /* @__PURE__ */ r(b, {
+    children: [s && /* @__PURE__ */ r(v, {
       align: "center",
       size: 12,
       children: s
@@ -8676,7 +8676,7 @@ function pd({
           flexShrink: 0
         }
       },
-      children: [/* @__PURE__ */ r(Ae, {
+      children: [/* @__PURE__ */ r(Le, {
         echarts: ne,
         option: o,
         style: {
@@ -8806,7 +8806,7 @@ function fd({
       })]
     }), /* @__PURE__ */ c(w, {
       spacing: 4,
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         size: "sm",
         children: "Color"
       }), /* @__PURE__ */ r(_, {
@@ -8853,7 +8853,7 @@ function gd({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Chart Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -8995,7 +8995,7 @@ function xd(t) {
   });
   return n.unshift(`<strong>${e[0].name}</strong>`), n.join("<br />");
 }
-ne.use([Jr, Kr, Mt, Ke, Ze, et, Le]);
+ne.use([Jr, Kr, Mt, Ke, Ze, et, qe]);
 function Cd({
   context: t
 }) {
@@ -9085,7 +9085,7 @@ function Cd({
       data: h
     }]
   };
-  return !e || !a || !i ? null : /* @__PURE__ */ r(Ae, {
+  return !e || !a || !i ? null : /* @__PURE__ */ r(Le, {
     echarts: ne,
     option: f,
     style: {
@@ -9126,7 +9126,7 @@ function wd({
           borderBottom: "1px solid #eee",
           background: "#efefef"
         },
-        children: [/* @__PURE__ */ r(b, {
+        children: [/* @__PURE__ */ r(v, {
           children: "Chart Config"
         }), /* @__PURE__ */ r(z, {
           type: "submit",
@@ -9182,7 +9182,7 @@ function wd({
           },
           ...m
         })
-      }), /* @__PURE__ */ r(de, {
+      }), /* @__PURE__ */ r(ie, {
         my: "md",
         label: "Bar",
         labelPosition: "center"
@@ -9203,7 +9203,7 @@ function wd({
           })
         }), /* @__PURE__ */ c(w, {
           spacing: 4,
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             size: "sm",
             children: "Bar's Color"
           }), /* @__PURE__ */ r(_, {
@@ -9216,7 +9216,7 @@ function wd({
             })
           })]
         })]
-      }), /* @__PURE__ */ r(de, {
+      }), /* @__PURE__ */ r(ie, {
         my: "md",
         label: "Line",
         labelPosition: "center"
@@ -9237,7 +9237,7 @@ function wd({
           })
         }), /* @__PURE__ */ c(w, {
           spacing: 4,
-          children: [/* @__PURE__ */ r(b, {
+          children: [/* @__PURE__ */ r(v, {
             size: "sm",
             children: "Line's Color"
           }), /* @__PURE__ */ r(_, {
@@ -9347,7 +9347,7 @@ function Dd(t, e) {
   const {
     value: n,
     set: a
-  } = G(t.operation.operationData, "config"), [i, o] = ue(te({}, n, e)), s = async () => {
+  } = G(t.operation.operationData, "config"), [i, o] = de(te({}, n, e)), s = async () => {
     await a(i);
   };
   return K(() => {
@@ -9386,7 +9386,7 @@ function kd(t) {
       value: e.urlTemplate,
       onChange: s,
       onBlur: i
-    }), /* @__PURE__ */ r($e, {
+    }), /* @__PURE__ */ r(Fe, {
       label: "Open in new Tab",
       checked: e.openInNewTab,
       onChange: (l) => o(l.currentTarget.checked)
@@ -9597,7 +9597,7 @@ class Xa {
   }
 }
 function Ld(t, e) {
-  const [n, a] = ue([]);
+  const [n, a] = de([]);
   return ft(async () => {
     const i = await t.getInteractionList();
     a(i);
@@ -9638,7 +9638,7 @@ const qd = R(({
   }
   return null;
 }), $d = (t) => {
-  const [e, n] = ue(0), {
+  const [e, n] = de(0), {
     interactionManager: a,
     instance: i,
     sampleData: o,
@@ -9672,7 +9672,7 @@ const qd = R(({
     data: e
   } = he(), n = t.viz, {
     vizManager: a
-  } = Me(Te), i = t.json, o = Fe(() => a.getOrCreateInstance(i), [a, n.type]), s = Fe(() => new Xa(o, a.resolveComponent(n.type), $n), [o, n.type]);
+  } = Pe(Te), i = t.json, o = Me(() => a.getOrCreateInstance(i), [a, n.type]), s = Me(() => new Xa(o, a.resolveComponent(n.type), $n), [o, n.type]);
   return K(() => o.instanceData.watchItem(
     null,
     ao((l) => {
@@ -9693,20 +9693,23 @@ const qd = R(({
   return /* @__PURE__ */ r($d, {
     ...t
   });
-};
-function Bd() {
+}, Bd = R(() => {
   const {
     panel: t
   } = he(), [e, n] = x.useState(t.description), a = t.description !== e, i = x.useCallback(() => {
     !a || t.setDescription(e);
   }, [a, e]);
   return /* @__PURE__ */ c(w, {
+    spacing: 4,
     sx: {
       flexGrow: 1
     },
     children: [/* @__PURE__ */ c(g, {
       align: "end",
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
+        sx: {
+          flexGrow: 1
+        },
         children: "Description"
       }), /* @__PURE__ */ r(z, {
         variant: "subtle",
@@ -9727,11 +9730,26 @@ function Bd() {
       p: "0"
     })]
   });
-}
-function Gd() {
+}), Gd = R(() => {
+  const {
+    panel: t
+  } = he(), {
+    style: e
+  } = t;
+  return /* @__PURE__ */ r(U, {
+    children: /* @__PURE__ */ r(Fe, {
+      label: "Border",
+      checked: e.border.enabled,
+      onChange: (n) => e.border.setEnabled(n.currentTarget.checked)
+    })
+  });
+}), Wd = R(() => {
   const {
     panel: {
-      title: t
+      title: t,
+      style: {
+        border: e
+      }
     }
   } = he();
   return /* @__PURE__ */ r(Xe, {
@@ -9745,7 +9763,8 @@ function Gd() {
         height: "450px",
         background: "transparent",
         borderRadius: "5px",
-        boxShadow: "0px 0px 10px 0px rgba(0,0,0,.2)"
+        border: "1px solid #ced4da",
+        borderWidth: e.enabled ? "1px" : "0px"
       },
       children: [/* @__PURE__ */ c(g, {
         position: "apart",
@@ -9759,7 +9778,7 @@ function Gd() {
         }), /* @__PURE__ */ r(g, {
           grow: !0,
           position: "center",
-          children: /* @__PURE__ */ r(b, {
+          children: /* @__PURE__ */ r(v, {
             lineClamp: 1,
             weight: "bold",
             children: t
@@ -9779,8 +9798,7 @@ function Gd() {
       })]
     })
   });
-}
-function Wd() {
+}), Qd = R(() => {
   const {
     panel: t
   } = he(), {
@@ -9793,8 +9811,11 @@ function Wd() {
     value: a,
     onChange: i,
     label: /* @__PURE__ */ c(g, {
-      align: "end",
-      children: [/* @__PURE__ */ r(b, {
+      align: "apart",
+      children: [/* @__PURE__ */ r(v, {
+        sx: {
+          flexGrow: 1
+        },
         children: "Panel Title"
       }), /* @__PURE__ */ r(z, {
         variant: "subtle",
@@ -9805,10 +9826,16 @@ function Wd() {
           size: 20
         })
       })]
-    })
+    }),
+    styles: {
+      label: {
+        display: "block",
+        paddingBottom: "4px"
+      }
+    }
   });
-}
-function Qd() {
+});
+function Yd() {
   return /* @__PURE__ */ c(g, {
     grow: !0,
     noWrap: !0,
@@ -9823,18 +9850,26 @@ function Qd() {
         flexGrow: 0,
         height: "100%"
       },
-      children: [/* @__PURE__ */ r(Wd, {}), /* @__PURE__ */ r(Bd, {})]
+      children: [/* @__PURE__ */ r(ie, {
+        label: "Style",
+        labelPosition: "center",
+        variant: "dashed"
+      }), /* @__PURE__ */ r(Gd, {}), /* @__PURE__ */ r(ie, {
+        label: "Info",
+        labelPosition: "center",
+        variant: "dashed"
+      }), /* @__PURE__ */ r(Qd, {}), /* @__PURE__ */ r(Bd, {})]
     }), /* @__PURE__ */ r(q, {
       sx: {
         height: "100%",
         flexGrow: 1,
         maxWidth: "60%"
       },
-      children: /* @__PURE__ */ r(Gd, {})
+      children: /* @__PURE__ */ r(Wd, {})
     })]
   });
 }
-const Yd = R(function() {
+const Ud = R(function() {
   const e = ee(), {
     panel: {
       queryID: n,
@@ -9851,7 +9886,7 @@ const Yd = R(function() {
         maxWidth: "600px",
         alignItems: "baseline"
       },
-      children: [/* @__PURE__ */ r(b, {
+      children: [/* @__PURE__ */ r(v, {
         children: "Select a Query"
       }), /* @__PURE__ */ r(j, {
         data: i,
@@ -9869,7 +9904,7 @@ const Yd = R(function() {
   });
 });
 function Ja(t, e, n) {
-  const a = Fe(() => /* @__PURE__ */ new Set(), []), i = t.resolveComponent(e.type), [o, s] = ue(!1);
+  const a = Me(() => /* @__PURE__ */ new Set(), []), i = t.resolveComponent(e.type), [o, s] = de(!1);
   return ft(async () => {
     if (await i.migrator.needMigration(e) && !a.has(e.id))
       try {
@@ -9881,7 +9916,7 @@ function Ja(t, e, n) {
       s(!0);
   }, [e]), o;
 }
-function Ud({
+function Hd({
   setVizConf: t,
   ...e
 }) {
@@ -9900,11 +9935,11 @@ function Ud({
     t(s);
   }), [t, a.viz.type]), o ? /* @__PURE__ */ r(Xs, {
     ...e
-  }) : /* @__PURE__ */ r(b, {
+  }) : /* @__PURE__ */ r(v, {
     children: "Checking update..."
   });
 }
-function Hd(t) {
+function Xd(t) {
   const {
     vizManager: e,
     panel: n
@@ -9916,37 +9951,39 @@ function Hd(t) {
     });
   }) ? /* @__PURE__ */ r(Hs, {
     ...t
-  }) : /* @__PURE__ */ r(b, {
+  }) : /* @__PURE__ */ r(v, {
     children: "Checking update"
   });
 }
-function Xd(t, e) {
+function Jd(t, e) {
   const {
     vizManager: n
-  } = Me(Te), {
+  } = Pe(Te), {
     panel: {
       viz: a,
       title: i,
       id: o,
       description: s,
-      queryID: l
+      queryID: l,
+      style: u
     }
-  } = he(), u = {
+  } = he(), p = {
     title: i,
     id: o,
     description: s,
     queryID: l,
     viz: a,
-    layout: e
+    layout: e,
+    style: u.json
   };
   try {
-    return n.resolveComponent(a.type), /* @__PURE__ */ r(Hd, {
-      panel: u,
+    return n.resolveComponent(a.type), /* @__PURE__ */ r(Xd, {
+      panel: p,
       data: t,
       vizManager: n
     });
-  } catch (p) {
-    return console.info(re(p, "message")), null;
+  } catch (h) {
+    return console.info(re(h, "message")), null;
   }
 }
 function Rr(t, e, n, a) {
@@ -9955,7 +9992,7 @@ function Rr(t, e, n, a) {
       return null;
   }
 }
-const Jd = ["rich-text"], Ka = R(function({
+const Kd = ["rich-text"], Ka = R(function({
   height: e,
   viz: n,
   data: a,
@@ -9965,11 +10002,11 @@ const Jd = ["rich-text"], Ka = R(function({
     ref: o,
     width: s,
     height: l
-  } = rn(), u = x.useMemo(() => !Array.isArray(a) || a.length === 0, [a]), p = Xd(a, {
+  } = rn(), u = x.useMemo(() => !Array.isArray(a) || a.length === 0, [a]), p = Jd(a, {
     w: s,
     h: l
   });
-  if (!(!Jd.includes(n.type) || !!p))
+  if (!(!Kd.includes(n.type) || !!p))
     return /* @__PURE__ */ r("div", {
       className: "viz-root",
       ref: o,
@@ -9994,7 +10031,7 @@ const Jd = ["rich-text"], Ka = R(function({
       height: e
     },
     ref: o,
-    children: [u && /* @__PURE__ */ r(b, {
+    children: [u && /* @__PURE__ */ r(v, {
       color: "gray",
       align: "center",
       children: "nothing to show"
@@ -10003,7 +10040,7 @@ const Jd = ["rich-text"], Ka = R(function({
     })]
   });
 });
-function Kd() {
+function Zd() {
   const {
     data: t,
     loading: e,
@@ -10019,23 +10056,23 @@ function Kd() {
   });
 }
 const un = [];
-function Zd() {
+function eh() {
   const {
     vizManager: t
-  } = Me(Te);
+  } = Pe(Te);
   return A(() => t.availableVizList.map((e) => ({
     value: e.name,
     label: e.displayName
   })).concat(un), [t]);
 }
-function eh(t, e) {
+function th(t, e) {
   try {
     return t.resolveComponent(e).createConfig();
   } catch {
     return null;
   }
 }
-function th() {
+function nh() {
   const {
     data: t,
     panel: {
@@ -10046,34 +10083,36 @@ function th() {
       setDescription: o,
       setTitle: s,
       setQueryID: l,
-      id: u
+      id: u,
+      style: p
     }
   } = he(), {
-    vizManager: p
-  } = Me(Te), h = {
+    vizManager: h
+  } = Pe(Te), f = {
     title: n,
     description: i,
     viz: e,
     queryID: a,
-    id: u
-  }, f = {
+    id: u,
+    style: p.json
+  }, m = {
     setDescription: o,
     setQueryID: l,
     setTitle: s
   };
   try {
-    return p.resolveComponent(h.viz.type), /* @__PURE__ */ r(Ud, {
+    return h.resolveComponent(f.viz.type), /* @__PURE__ */ r(Hd, {
       setVizConf: e.setConf,
-      panel: h,
-      panelInfoEditor: f,
-      vizManager: p,
+      panel: f,
+      panelInfoEditor: m,
+      vizManager: h,
       data: t
     });
-  } catch (m) {
-    return console.info(re(m, "message")), null;
+  } catch (y) {
+    return console.info(re(y, "message")), null;
   }
 }
-function nh() {
+function rh() {
   const {
     data: t,
     panel: {
@@ -10081,10 +10120,10 @@ function nh() {
     }
   } = he(), [n, a] = Qr(e.type), i = e.type !== n, {
     vizManager: o
-  } = Me(Te), s = x.useCallback(() => {
+  } = Pe(Te), s = x.useCallback(() => {
     if (!i)
       return;
-    const y = eh(o, n);
+    const y = th(o, n);
     e.setType(n), e.setConf(y || {});
   }, [e, i, n]), l = (y) => {
     try {
@@ -10095,12 +10134,12 @@ function nh() {
   }, u = x.useMemo(() => {
     var y;
     return (y = un.find((I) => I.value === n)) == null ? void 0 : y.Panel;
-  }, [n, un]), p = th(), h = u ? Et(u, {
+  }, [n, un]), p = nh(), h = u ? Et(u, {
     data: t,
     conf: e.conf,
     setConf: e.setConf
-  }) : null, f = p || h, m = Zd();
-  return /* @__PURE__ */ c(H, {
+  }) : null, f = p || h, m = eh();
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(j, {
       label: "Visualization",
       value: n,
@@ -10121,7 +10160,7 @@ function nh() {
     })]
   });
 }
-function rh() {
+function ah() {
   return /* @__PURE__ */ c(g, {
     grow: !0,
     noWrap: !0,
@@ -10138,28 +10177,29 @@ function rh() {
         overflow: "scroll",
         height: "100%"
       },
-      children: /* @__PURE__ */ r(nh, {})
+      children: /* @__PURE__ */ r(rh, {})
     }), /* @__PURE__ */ r(q, {
       sx: {
         height: "100%",
         flexGrow: 1,
         maxWidth: "60%"
       },
-      children: /* @__PURE__ */ r(Kd, {})
+      children: /* @__PURE__ */ r(Zd, {})
     })]
   });
 }
-const ah = R(function({
+const ih = R(function({
   opened: e,
   close: n
 }) {
   const {
     freezeLayout: a
-  } = x.useContext(Se), [i, o] = ue("Visualization"), {
+  } = x.useContext(Se), [i, o] = de("Visualization"), {
     panel: s,
     loading: l
   } = he(), {
-    title: u
+    id: u,
+    title: p
   } = s;
   return x.useEffect(() => {
     a(e);
@@ -10168,10 +10208,10 @@ const ah = R(function({
     overflow: "inside",
     opened: e,
     onClose: n,
-    title: u,
+    title: `Editing Panel - ${p.trim() ? p : u}`,
     trapFocus: !0,
-    onDragStart: (p) => {
-      p.stopPropagation();
+    onDragStart: (h) => {
+      h.stopPropagation();
     },
     children: /* @__PURE__ */ r(pn, {
       sx: {
@@ -10213,15 +10253,15 @@ const ah = R(function({
           children: [/* @__PURE__ */ r(Tt, {
             visible: l,
             exitTransitionDuration: 0
-          }), /* @__PURE__ */ r(Yd, {})]
+          }), /* @__PURE__ */ r(Ud, {})]
         }), /* @__PURE__ */ r(V.Panel, {
           value: "Panel",
           pt: "sm",
-          children: i === "Panel" && /* @__PURE__ */ r(Qd, {})
+          children: i === "Panel" && /* @__PURE__ */ r(Yd, {})
         }), /* @__PURE__ */ r(V.Panel, {
           value: "Visualization",
           pt: "sm",
-          children: i === "Visualization" && /* @__PURE__ */ r(rh, {})
+          children: i === "Visualization" && /* @__PURE__ */ r(ah, {})
         }), /* @__PURE__ */ r(V.Panel, {
           value: "Interactions",
           pt: "sm",
@@ -10232,7 +10272,7 @@ const ah = R(function({
       })
     })
   });
-}), ih = R(({
+}), oh = R(({
   view: t
 }) => {
   const e = ee(), n = Wi(), [a, i] = x.useState(!1), o = () => i(!0), s = () => i(!1), {
@@ -10258,7 +10298,7 @@ const ah = R(function({
   }), O = x.useCallback(() => {
     m(u);
   }, [u, m]);
-  return /* @__PURE__ */ c(H, {
+  return /* @__PURE__ */ c(U, {
     children: [/* @__PURE__ */ r(q, {
       sx: {
         position: "absolute",
@@ -10267,8 +10307,8 @@ const ah = R(function({
         right: 0,
         zIndex: 300
       },
-      children: /* @__PURE__ */ c(ce, {
-        children: [/* @__PURE__ */ r(ce.Target, {
+      children: /* @__PURE__ */ c(ue, {
+        children: [/* @__PURE__ */ r(ue.Target, {
           children: /* @__PURE__ */ r(q, {
             className: "panel-dropdown-target",
             sx: {
@@ -10276,42 +10316,42 @@ const ah = R(function({
               height: "25px"
             }
           })
-        }), /* @__PURE__ */ c(ce.Dropdown, {
-          children: [/* @__PURE__ */ r(ce.Item, {
+        }), /* @__PURE__ */ c(ue.Dropdown, {
+          children: [/* @__PURE__ */ r(ue.Item, {
             onClick: f,
             icon: /* @__PURE__ */ r(jr, {
               size: 14
             }),
             children: "Refresh"
-          }), /* @__PURE__ */ r(ce.Item, {
+          }), /* @__PURE__ */ r(ue.Item, {
             onClick: () => e.queries.downloadDataByQueryID(p),
             icon: /* @__PURE__ */ r(Wr, {
               size: 14
             }),
             children: "Download Data"
-          }), !y && /* @__PURE__ */ r(ce.Item, {
+          }), !y && /* @__PURE__ */ r(ue.Item, {
             onClick: O,
             icon: /* @__PURE__ */ r(po, {
               size: 14
             }),
             children: "Full Screen"
-          }), h && /* @__PURE__ */ c(H, {
-            children: [/* @__PURE__ */ r(de, {
+          }), h && /* @__PURE__ */ c(U, {
+            children: [/* @__PURE__ */ r(ie, {
               label: "Edit",
               labelPosition: "center"
-            }), /* @__PURE__ */ r(ce.Item, {
+            }), /* @__PURE__ */ r(ue.Item, {
               onClick: o,
               icon: /* @__PURE__ */ r(Gr, {
                 size: 14
               }),
               children: "Settings"
-            }), /* @__PURE__ */ r(ce.Item, {
+            }), /* @__PURE__ */ r(ue.Item, {
               onClick: I,
               icon: /* @__PURE__ */ r(mo, {
                 size: 14
               }),
               children: "Duplicate"
-            }), /* @__PURE__ */ r(ce.Item, {
+            }), /* @__PURE__ */ r(ue.Item, {
               color: "red",
               onClick: D,
               icon: /* @__PURE__ */ r(J, {
@@ -10322,13 +10362,13 @@ const ah = R(function({
           })]
         })]
       })
-    }), h && /* @__PURE__ */ r(ah, {
+    }), h && /* @__PURE__ */ r(ih, {
       opened: a,
       close: s
     })]
   });
 });
-const oh = R(function() {
+const sh = R(function() {
   const {
     panel: e
   } = he(), {
@@ -10342,7 +10382,7 @@ const oh = R(function() {
     sx: {
       flexGrow: 1
     },
-    children: /* @__PURE__ */ r(b, {
+    children: /* @__PURE__ */ r(v, {
       align: "center",
       lineClamp: 1,
       weight: "bold",
@@ -10350,17 +10390,25 @@ const oh = R(function() {
     })
   }) : null;
 });
-function sh(t) {
+function lh(t) {
   return !["richText"].includes(t);
 }
-const Nn = R(function({
+const ch = {
+  border: "1px solid #ced4da"
+}, uh = {
+  border: "1px dashed transparent",
+  transition: "border-color 300ms ease",
+  "&:hover": {
+    borderColor: "#ced4da"
+  }
+}, Nn = R(function({
   panel: e,
   view: n
 }) {
   const a = ee(), {
     data: i,
     state: o
-  } = a.getDataStuffByID(e.queryID), s = sh(e.viz.type) && o === "loading", l = e.title ? "calc(100% - 25px - 5px)" : "100%";
+  } = a.getDataStuffByID(e.queryID), s = lh(e.viz.type) && o === "loading", l = e.title ? "calc(100% - 25px - 5px)" : "100%", u = e.style.border.enabled ? ch : uh;
   return /* @__PURE__ */ r(Xo, {
     value: {
       panel: e,
@@ -10371,6 +10419,9 @@ const Nn = R(function({
       className: "panel-root",
       p: 5,
       pt: 0,
+      sx: {
+        ...u
+      },
       children: [/* @__PURE__ */ r(q, {
         sx: {
           position: "absolute",
@@ -10380,9 +10431,9 @@ const Nn = R(function({
           zIndex: 310
         },
         children: /* @__PURE__ */ r(ya, {})
-      }), /* @__PURE__ */ r(ih, {
+      }), /* @__PURE__ */ r(oh, {
         view: n
-      }), /* @__PURE__ */ r(oh, {}), /* @__PURE__ */ r(Ka, {
+      }), /* @__PURE__ */ r(sh, {}), /* @__PURE__ */ r(Ka, {
         viz: e.viz,
         data: i,
         loading: s,
@@ -10455,7 +10506,7 @@ function ti() {
     };
   }, []);
 }
-const lh = x.forwardRef(({
+const dh = x.forwardRef(({
   handleAxis: t
 }, e) => /* @__PURE__ */ r(z, {
   ref: e,
@@ -10475,7 +10526,7 @@ const lh = x.forwardRef(({
   children: /* @__PURE__ */ r(go, {
     size: 16
   })
-})), ch = x.forwardRef(({
+})), hh = x.forwardRef(({
   handleAxis: t,
   ...e
 }, n) => /* @__PURE__ */ r(z, {
@@ -10497,7 +10548,7 @@ const lh = x.forwardRef(({
   children: /* @__PURE__ */ r(bo, {
     size: 16
   })
-})), uh = na(ta), dh = R(function({
+})), ph = na(ta), mh = R(function({
   view: e,
   className: n = "layout",
   rowHeight: a = 10,
@@ -10513,7 +10564,7 @@ const lh = x.forwardRef(({
       !h || h.layout.set(p);
     });
   }, [e]);
-  return /* @__PURE__ */ r(uh, {
+  return /* @__PURE__ */ r(ph, {
     onLayoutChange: s,
     className: `dashboard-layout ${n}`,
     rowHeight: a,
@@ -10521,7 +10572,7 @@ const lh = x.forwardRef(({
     isDraggable: i,
     isResizable: o,
     draggableHandle: ".react-grid-customDragHandle",
-    resizeHandle: /* @__PURE__ */ r(ch, {}),
+    resizeHandle: /* @__PURE__ */ r(hh, {}),
     children: e.panels.current.map((l, u) => /* @__PURE__ */ c("div", {
       "data-grid": {
         ...l.layout
@@ -10529,18 +10580,18 @@ const lh = x.forwardRef(({
       style: {
         position: "relative"
       },
-      children: [i && /* @__PURE__ */ r(lh, {}), /* @__PURE__ */ r(Nn, {
+      children: [i && /* @__PURE__ */ r(dh, {}), /* @__PURE__ */ r(Nn, {
         view: e,
         panel: l
       })]
     }, l.id))
   });
-}), hh = na(ta), ph = R(function({
+}), fh = na(ta), gh = R(function({
   view: e,
   className: n = "layout",
   rowHeight: a = 10
 }) {
-  return /* @__PURE__ */ r(hh, {
+  return /* @__PURE__ */ r(fh, {
     className: `dashboard-layout ${n}`,
     rowHeight: a,
     isDraggable: !1,
@@ -10554,11 +10605,11 @@ const lh = x.forwardRef(({
       })
     }, i.id))
   });
-}), mh = R(({
+}), bh = R(({
   children: t
 }) => /* @__PURE__ */ r(q, {
   children: t
-})), fh = R(({
+})), vh = R(({
   children: t,
   view: e
 }) => /* @__PURE__ */ r(Ce, {
@@ -10593,23 +10644,23 @@ const lh = x.forwardRef(({
   withinPortal: !1,
   transitionDuration: 0,
   children: t
-})), gh = R(({
+})), yh = R(({
   view: t,
   children: e
 }) => {
   switch (t.type) {
     case Re.Modal:
-      return /* @__PURE__ */ r(fh, {
+      return /* @__PURE__ */ r(vh, {
         view: t,
         children: e
       });
     case Re.Division:
     default:
-      return /* @__PURE__ */ r(mh, {
+      return /* @__PURE__ */ r(bh, {
         children: e
       });
   }
-}), bh = R(function({
+}), xh = R(function({
   view: e,
   saveDashboardChanges: n
 }) {
@@ -10637,7 +10688,7 @@ const lh = x.forwardRef(({
         exitFullScreen: i
       }), !o && /* @__PURE__ */ r(va, {
         saveChanges: n
-      }), /* @__PURE__ */ r(gh, {
+      }), /* @__PURE__ */ r(yh, {
         view: e,
         children: /* @__PURE__ */ c(q, {
           className: "dashboard-sticky-parent",
@@ -10650,7 +10701,7 @@ const lh = x.forwardRef(({
             sx: {
               display: o ? "none" : "block"
             },
-            children: /* @__PURE__ */ r(dh, {
+            children: /* @__PURE__ */ r(mh, {
               view: e,
               isDraggable: !0,
               isResizable: !0
@@ -10660,7 +10711,7 @@ const lh = x.forwardRef(({
       })]
     })
   });
-}), vh = R(function({
+}), Ch = R(function({
   view: e
 }) {
   const {
@@ -10691,14 +10742,14 @@ const lh = x.forwardRef(({
         }), /* @__PURE__ */ r(la, {
           view: e
         })]
-      }), /* @__PURE__ */ r(ph, {
+      }), /* @__PURE__ */ r(gh, {
         view: e
       })]
     })
   });
-}), ni = v.model({
-  label: v.string,
-  value: v.string
+}), ni = b.model({
+  label: b.string,
+  value: b.string
 }).actions((t) => ({
   setLabel(e) {
     t.label = e;
@@ -10706,10 +10757,10 @@ const lh = x.forwardRef(({
   setValue(e) {
     t.value = e;
   }
-})), ri = v.model("FilterConfigModel_Select", {
-  required: v.boolean,
-  default_value: v.string,
-  static_options: v.optional(v.array(ni), []),
+})), ri = b.model("FilterConfigModel_Select", {
+  required: b.boolean,
+  default_value: b.string,
+  static_options: b.optional(b.array(ni), []),
   options_query: ma
 }).actions((t) => ({
   addStaticOption(e) {
@@ -10727,7 +10778,7 @@ const lh = x.forwardRef(({
   setOptionsQuery(e) {
     t.options_query = e;
   }
-})), yh = () => ri.create({
+})), wh = () => ri.create({
   required: !1,
   default_value: "",
   static_options: [],
@@ -10736,9 +10787,9 @@ const lh = x.forwardRef(({
     key: "",
     sql: ""
   }
-}), ai = v.model("FilterConfigModel_MultiSelect", {
-  default_value: v.optional(v.array(v.string), []),
-  static_options: v.optional(v.array(ni), []),
+}), ai = b.model("FilterConfigModel_MultiSelect", {
+  default_value: b.optional(b.array(b.string), []),
+  static_options: b.optional(b.array(ni), []),
   options_query: ma
 }).actions((t) => ({
   addStaticOption(e) {
@@ -10748,12 +10799,12 @@ const lh = x.forwardRef(({
     t.static_options.splice(e, 1);
   },
   setDefaultValue(e) {
-    t.default_value = Pe(e);
+    t.default_value = Ae(e);
   },
   setOptionsQuery(e) {
     t.options_query = e;
   }
-})), xh = () => ai.create({
+})), Sh = () => ai.create({
   default_value: [],
   static_options: [],
   options_query: {
@@ -10761,18 +10812,18 @@ const lh = x.forwardRef(({
     key: "",
     sql: ""
   }
-}), ii = v.model("FilterConfigModel_Checkbox", {
-  default_value: v.boolean
+}), ii = b.model("FilterConfigModel_Checkbox", {
+  default_value: b.boolean
 }).actions((t) => ({
   setDefaultValue(e) {
     t.default_value = e;
   }
-})), Ch = () => ii.create({
+})), _h = () => ii.create({
   default_value: !1
-}), oi = v.model("FilterConfigModel_DateRange", {
-  required: v.boolean,
-  inputFormat: v.enumeration("DateRangeInputFormat", ["YYYY", "YYYY-MM", "YYYY-MM-DD"]),
-  clearable: v.boolean
+}), oi = b.model("FilterConfigModel_DateRange", {
+  required: b.boolean,
+  inputFormat: b.enumeration("DateRangeInputFormat", ["YYYY", "YYYY-MM", "YYYY-MM-DD"]),
+  clearable: b.boolean
 }).actions((t) => ({
   setRequired(e) {
     t.required = e;
@@ -10783,24 +10834,24 @@ const lh = x.forwardRef(({
   setInputFormat(e) {
     t.inputFormat = e;
   }
-})), wh = () => oi.create({
+})), Ih = () => oi.create({
   required: !1,
   inputFormat: "YYYY-MM-DD",
   clearable: !1
-}), Dr = v.model("FilterModel", {
-  id: v.identifier,
-  key: v.string,
-  label: v.string,
-  order: v.number,
-  visibleInViewsIDs: v.array(v.string),
-  type: v.enumeration("DashboardFilterType", [
+}), Dr = b.model("FilterModel", {
+  id: b.identifier,
+  key: b.string,
+  label: b.string,
+  order: b.number,
+  visibleInViewsIDs: b.array(b.string),
+  type: b.enumeration("DashboardFilterType", [
     me.Select,
     me.MultiSelect,
     me.TextInput,
     me.Checkbox,
     me.DateRange
   ]),
-  config: v.union(
+  config: b.union(
     ri,
     ai,
     fa,
@@ -10820,19 +10871,19 @@ const lh = x.forwardRef(({
   setType(e) {
     switch (e) {
       case me.Select:
-        t.config = yh();
+        t.config = wh();
         break;
       case me.MultiSelect:
-        t.config = xh();
+        t.config = Sh();
         break;
       case me.TextInput:
         t.config = ga();
         break;
       case me.Checkbox:
-        t.config = Ch();
+        t.config = _h();
         break;
       case me.DateRange:
-        t.config = wh();
+        t.config = Ih();
         break;
     }
     t.type = e;
@@ -10840,10 +10891,10 @@ const lh = x.forwardRef(({
   setVisibleInViewsIDs(e) {
     console.log(e), t.visibleInViewsIDs.length = 0, t.visibleInViewsIDs.push(...e);
   }
-})), Sh = v.model("FiltersModel", {
-  original: v.optional(v.array(Dr), []),
-  current: v.optional(v.array(Dr), []),
-  values: v.optional(v.frozen(), {})
+})), Rh = b.model("FiltersModel", {
+  original: b.optional(b.array(Dr), []),
+  current: b.optional(b.array(Dr), []),
+  values: b.optional(b.frozen(), {})
 }).views((t) => ({
   get changed() {
     return !$.isEqual(t.original, t.current);
@@ -10869,7 +10920,7 @@ const lh = x.forwardRef(({
     t.current = $.cloneDeep(t.original);
   },
   replace(e) {
-    t.current = Pe(e);
+    t.current = Ae(e);
   },
   append(e) {
     t.current.push(e);
@@ -10887,7 +10938,7 @@ const lh = x.forwardRef(({
     return t.values[e];
   }
 }));
-function _h(t) {
+function Dh(t) {
   const e = t.reduce((n, a) => {
     var i;
     return n[a.key] = (i = a.config.default_value) != null ? i : "", n;
@@ -10970,11 +11021,11 @@ var jn = { exports: {} };
     s.saveAs = u.saveAs = u, t.exports = u;
   });
 })(jn);
-function Ih(t, e) {
+function kh(t, e) {
   const n = new Blob([e], { type: "text/csv" });
   jn.exports.saveAs(n, `${t}.csv`);
 }
-function Rh(t) {
+function Th(t) {
   const e = new Po();
   t.forEach(({ id: n, data: a }) => {
     e.file(`${n}.csv`, si(a));
@@ -10992,11 +11043,11 @@ function si(t) {
   }), e.join(`
 `);
 }
-const li = v.model("QueryModel", {
-  id: v.string,
-  type: v.enumeration("DataSourceType", [xe.Postgresql, xe.MySQL, xe.HTTP]),
-  key: v.string,
-  sql: v.string
+const li = b.model("QueryModel", {
+  id: b.string,
+  type: b.enumeration("DataSourceType", [xe.Postgresql, xe.MySQL, xe.HTTP]),
+  key: b.string,
+  sql: b.string
 }).views((t) => ({
   get valid() {
     return t.id && t.type && t.key && t.sql;
@@ -11005,13 +11056,13 @@ const li = v.model("QueryModel", {
     const { id: e, type: n, key: a, sql: i } = t;
     return { id: e, type: n, key: a, sql: i };
   }
-})), Dh = v.compose(
+})), Vh = b.compose(
   "QueryModel",
   li,
-  v.model({
-    state: v.optional(v.enumeration(["idle", "loading", "error"]), "idle"),
-    data: v.optional(v.array(v.frozen()), []),
-    error: v.frozen()
+  b.model({
+    state: b.optional(b.enumeration(["idle", "loading", "error"]), "idle"),
+    data: b.optional(b.array(b.frozen()), []),
+    error: b.frozen()
   })
 ).views((t) => ({
   get formattedSQL() {
@@ -11064,9 +11115,9 @@ const li = v.model("QueryModel", {
       })
     );
   }
-})), kh = v.model("QueriesModel", {
-  original: v.optional(v.array(li), []),
-  current: v.optional(v.array(Dh), [])
+})), zh = b.model("QueriesModel", {
+  original: b.optional(b.array(li), []),
+  current: b.optional(b.array(Vh), [])
 }).views((t) => ({
   get changed() {
     return t.original.length !== t.current.length ? !0 : t.original.some((e, n) => !$.isEqual(e.configurations, t.current[n].configurations));
@@ -11095,7 +11146,7 @@ const li = v.model("QueryModel", {
     t.current.length = 0, t.current.unshift(...e);
   },
   replace(e) {
-    t.current = Pe(e);
+    t.current = Ae(e);
   },
   append(e) {
     t.current.push(e);
@@ -11111,7 +11162,7 @@ const li = v.model("QueryModel", {
       id: n,
       data: a.toJSON()
     }));
-    Rh(e);
+    Th(e);
   },
   downloadDataByQueryID(e) {
     const n = t.findByID(e);
@@ -11120,7 +11171,7 @@ const li = v.model("QueryModel", {
       return;
     }
     const { id: a, data: i } = n, o = si(i);
-    Ih(a, o);
+    kh(a, o);
   },
   refetchDataByQueryID(e) {
     const n = t.findByID(e);
@@ -11130,9 +11181,9 @@ const li = v.model("QueryModel", {
     }
     return n.fetchData();
   }
-})), kr = v.model("SQLSnippetModel", {
-  key: v.string,
-  value: v.string
+})), kr = b.model("SQLSnippetModel", {
+  key: b.string,
+  value: b.string
 }).actions((t) => ({
   setKey(e) {
     t.key = e;
@@ -11140,9 +11191,9 @@ const li = v.model("QueryModel", {
   setValue(e) {
     t.value = e;
   }
-})), Th = v.model("SQLSnippetsModel", {
-  original: v.optional(v.array(kr), []),
-  current: v.optional(v.array(kr), [])
+})), Eh = b.model("SQLSnippetsModel", {
+  original: b.optional(b.array(kr), []),
+  current: b.optional(b.array(kr), [])
 }).views((t) => ({
   get changed() {
     return !$.isEqual(t.original, t.current);
@@ -11152,7 +11203,7 @@ const li = v.model("QueryModel", {
     t.current = $.cloneDeep(t.original);
   },
   replace(e) {
-    t.current = Pe(e);
+    t.current = Ae(e);
   },
   append(e) {
     t.current.push(e);
@@ -11163,8 +11214,8 @@ const li = v.model("QueryModel", {
   replaceByIndex(e, n) {
     t.current.splice(e, 1, n);
   }
-})), Vh = v.model("ContextModel", {
-  current: v.optional(v.frozen(), {})
+})), Oh = b.model("ContextModel", {
+  current: b.optional(b.frozen(), {})
 }).views((t) => ({
   get keys() {
     return Object.keys(t.current);
@@ -11182,13 +11233,13 @@ const li = v.model("QueryModel", {
   set(e, n) {
     t.current[e] = n;
   }
-})), zh = v.model("PanelLayoutModel", {
-  x: v.number,
-  y: v.number,
-  w: v.number,
-  h: v.number,
-  moved: v.optional(v.boolean, !1),
-  static: v.optional(v.boolean, !1)
+})), Fh = b.model("PanelLayoutModel", {
+  x: b.number,
+  y: b.number,
+  w: b.number,
+  h: b.number,
+  moved: b.optional(b.boolean, !1),
+  static: b.optional(b.boolean, !1)
 }).views((t) => ({
   get json() {
     const { x: e, y: n, w: a, h: i, moved: o } = t;
@@ -11206,9 +11257,31 @@ const li = v.model("QueryModel", {
     const { x: n, y: a, w: i, h: o, moved: s } = e;
     t.x = n, t.y = a, t.w = i, t.h = o, t.moved = !!s, t.static = !!e.static;
   }
-})), Eh = v.model("PanelVizModel", {
-  type: v.string,
-  conf: v.frozen()
+})), Mh = b.model("PanelStyleBorderModel", {
+  enabled: b.boolean
+}).views((t) => ({
+  get json() {
+    const { enabled: e } = t;
+    return {
+      enabled: e
+    };
+  }
+})).actions((t) => ({
+  setEnabled(e) {
+    t.enabled = e;
+  }
+})), Ph = b.model("PanelStyleModel", {
+  border: Mh
+}).views((t) => ({
+  get json() {
+    const { border: e } = t;
+    return {
+      border: e.json
+    };
+  }
+})).actions((t) => ({})), Ah = b.model("PanelVizModel", {
+  type: b.string,
+  conf: b.frozen()
 }).views((t) => ({
   get json() {
     return {
@@ -11223,13 +11296,14 @@ const li = v.model("QueryModel", {
   setConf(e) {
     t.conf = e;
   }
-})), Tr = v.model({
-  id: v.string,
-  title: v.string,
-  description: v.string,
-  layout: zh,
-  queryID: v.string,
-  viz: Eh
+})), Tr = b.model({
+  id: b.string,
+  title: b.string,
+  description: b.string,
+  layout: Fh,
+  queryID: b.string,
+  viz: Ah,
+  style: Ph
 }).views((t) => ({
   get json() {
     const { id: e, title: n, description: a, queryID: i } = t;
@@ -11239,7 +11313,8 @@ const li = v.model("QueryModel", {
       description: a,
       layout: t.layout.json,
       queryID: i,
-      viz: t.viz.json
+      viz: t.viz.json,
+      style: t.style.json
     };
   }
 })).actions((t) => ({
@@ -11255,9 +11330,9 @@ const li = v.model("QueryModel", {
   setQueryID(e) {
     t.queryID = e;
   }
-})).actions((t) => ({})), Oh = v.model("PanelsModel", {
-  original: v.optional(v.array(Tr), []),
-  current: v.optional(v.array(Tr), [])
+})).actions((t) => ({})), Lh = b.model("PanelsModel", {
+  original: b.optional(b.array(Tr), []),
+  current: b.optional(b.array(Tr), [])
 }).views((t) => ({
   get changed() {
     return t.original.length !== t.current.length ? !0 : t.original.some((e, n) => !$.isEqual(e.json, t.current[n].json));
@@ -11282,7 +11357,7 @@ const li = v.model("QueryModel", {
     t.current.length = 0, t.current.unshift(...e);
   },
   replace(e) {
-    t.current = Pe(e);
+    t.current = Ae(e);
   },
   addANewPanel() {
     const e = fe();
@@ -11300,6 +11375,11 @@ const li = v.model("QueryModel", {
       viz: {
         type: cn.name,
         conf: cn.createConfig()
+      },
+      style: {
+        border: {
+          enabled: !0
+        }
       }
     });
   },
@@ -11333,12 +11413,12 @@ const li = v.model("QueryModel", {
   replaceByIndex(e, n) {
     t.current.splice(e, 1, n);
   }
-})), Vr = v.model({
-  id: v.identifier,
-  name: v.string,
-  type: v.string,
-  config: v.frozen(),
-  panels: Oh
+})), Vr = b.model({
+  id: b.identifier,
+  name: b.string,
+  type: b.string,
+  config: b.frozen(),
+  panels: Lh
 }).views((t) => ({
   get json() {
     const { id: e, name: n, type: a, config: i } = t;
@@ -11369,11 +11449,11 @@ const li = v.model("QueryModel", {
       [e]: n
     };
   }
-})).actions((t) => ({})), ci = v.model("ViewsModel", {
-  original: v.optional(v.array(Vr), []),
-  current: v.optional(v.array(Vr), []),
-  visibleViewIDs: v.array(v.string),
-  idOfVIE: v.string
+})).actions((t) => ({})), ci = b.model("ViewsModel", {
+  original: b.optional(b.array(Vr), []),
+  current: b.optional(b.array(Vr), []),
+  visibleViewIDs: b.array(b.string),
+  idOfVIE: b.string
 }).views((t) => ({
   get changed() {
     return t.original.length !== t.current.length ? !0 : t.original.some((e, n) => !$.isEqual(e.json, t.current[n].json));
@@ -11413,7 +11493,7 @@ const li = v.model("QueryModel", {
     t.current.length = 0, t.current.unshift(...e);
   },
   replace(e) {
-    t.current = Pe(e);
+    t.current = Ae(e);
   },
   addANewView(e, n, a) {
     t.current.push({
@@ -11460,7 +11540,7 @@ const li = v.model("QueryModel", {
     n !== -1 && t.visibleViewIDs.splice(n, 1);
   }
 }));
-function Fh(t) {
+function qh(t) {
   const e = t.length > 0 ? [t[0].id] : [], n = t.length > 0 ? t[0].id : "", a = t.map((i) => ({
     ...i,
     panels: {
@@ -11475,14 +11555,14 @@ function Fh(t) {
     idOfVIE: n
   });
 }
-const Mh = v.model({
-  id: v.identifier,
-  name: v.string,
-  filters: Sh,
-  queries: kh,
-  sqlSnippets: Th,
+const $h = b.model({
+  id: b.identifier,
+  name: b.string,
+  filters: Rh,
+  queries: zh,
+  sqlSnippets: Eh,
   views: ci,
-  context: Vh
+  context: Oh
 }).views((t) => ({
   get payloadForSQL() {
     return {
@@ -11516,10 +11596,10 @@ const Mh = v.model({
   }
 }));
 function ui({ id: t, name: e, filters: n, views: a, definition: { queries: i, sqlSnippets: o } }, s) {
-  return Mh.create({
+  return $h.create({
     id: t,
     name: e,
-    filters: _h(n),
+    filters: Dh(n),
     queries: {
       original: i,
       current: i
@@ -11529,10 +11609,10 @@ function ui({ id: t, name: e, filters: n, views: a, definition: { queries: i, sq
       current: o
     },
     context: s,
-    views: Fh(a)
+    views: qh(a)
   });
 }
-const fp = R(function({
+const xp = R(function({
   context: e,
   dashboard: n,
   update: a,
@@ -11555,7 +11635,7 @@ const fp = R(function({
       }
     };
     await a(I);
-  }, h = Fe(Ha, []);
+  }, h = Me(Ha, []);
   return /* @__PURE__ */ r(Er, {
     children: /* @__PURE__ */ r(aa, {
       value: u,
@@ -11573,7 +11653,7 @@ const fp = R(function({
           },
           children: /* @__PURE__ */ r(Te.Provider, {
             value: h,
-            children: u.views.visibleViews.map((f) => /* @__PURE__ */ r(bh, {
+            children: u.views.visibleViews.map((f) => /* @__PURE__ */ r(xh, {
               view: f,
               saveDashboardChanges: p
             }, f.id))
@@ -11583,7 +11663,7 @@ const fp = R(function({
     })
   });
 });
-function gp({
+function Cp({
   context: t,
   dashboard: e,
   className: n = "dashboard",
@@ -11605,7 +11685,7 @@ function gp({
         },
         children: /* @__PURE__ */ r(q, {
           className: `${n} dashboard-root dashboard-sticky-parent`,
-          children: i.views.visibleViews.map((o) => /* @__PURE__ */ r(vh, {
+          children: i.views.visibleViews.map((o) => /* @__PURE__ */ r(Ch, {
             view: o
           }, o.id))
         })
@@ -11614,29 +11694,29 @@ function gp({
   });
 }
 export {
-  Vh as ContextModel,
-  fp as Dashboard,
+  Oh as ContextModel,
+  xp as Dashboard,
   Ss as DashboardFilterType,
   ws as DashboardMode,
   Re as EViewComponentType,
   Dr as FilterModel,
-  Sh as FiltersModel,
+  Rh as FiltersModel,
   Se as LayoutStateContext,
-  bh as MainDashboardView,
+  xh as MainDashboardView,
   aa as ModelContextProvider,
   Nn as Panel,
   Xo as PanelContextProvider,
-  kh as QueriesModel,
-  Dh as QueryModel,
-  gp as ReadOnlyDashboard,
-  vh as ReadOnlyDashboardView,
+  zh as QueriesModel,
+  Vh as QueryModel,
+  Cp as ReadOnlyDashboard,
+  Ch as ReadOnlyDashboardView,
   kr as SQLSnippetModel,
-  Th as SQLSnippetsModel,
+  Eh as SQLSnippetsModel,
   Vr as ViewModel,
   ci as ViewsModel,
   ui as createDashboardModel,
-  Fh as createDashboardViewsModel,
-  _h as getInitialFiltersPayload,
+  qh as createDashboardViewsModel,
+  Dh as getInitialFiltersPayload,
   ee as useModelContext,
   he as usePanelContext
 };