@devtable/dashboard 10.19.0 → 10.20.1

package/dist/dashboard.es.js

@@ -2,7 +2,7 @@ var Xu = Object.defineProperty;
 var Ju = (e, t, n) => t in e ? Xu(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var H = (e, t, n) => (Ju(e, typeof t != "symbol" ? t + "" : t, n), n);
 import R, { useState as U, useEffect as W, useCallback as ot, useMemo as z, forwardRef as _e, createElement as ei, useContext as Yt, useRef as ti, createContext as ll, memo as Zu } from "react";
-import { Select as P, Stack as S, Text as C, Group as v, TextInput as $, Button as M, Box as F, Switch as Je, NumberInput as se, Divider as E, Table as Ft, ActionIcon as Q, MultiSelect as lr, Paper as jo, Code as hs, Modal as De, Tabs as g, LoadingOverlay as Sn, Alert as Go, NativeSelect as cl, useMantineTheme as dl, ColorInput as Yo, ColorSwatch as Ki, Slider as eh, Overlay as sn, Checkbox as ve, Center as kn, CheckIcon as th, MANTINE_SIZES as nh, SimpleGrid as rn, Tooltip as Ve, SegmentedControl as rh, HoverCard as it, Anchor as Ui, Textarea as ih, Collapse as Ho, Mark as oh, createStyles as Wn, Popover as Ei, Flex as jn, Badge as cr, CloseButton as ul, Menu as he, Affix as ah, Header as sh, ThemeIcon as Ri, List as ps, UnstyledButton as lh, Navbar as Wt, JsonInput as hl, Drawer as ch, Radio as fs, Skeleton as ms, NavLink as Xi, Pagination as dh, AppShell as pl } from "@mantine/core";
+import { Select as F, Stack as S, Text as C, Group as v, TextInput as $, Button as M, Box as P, Switch as Je, NumberInput as se, Divider as E, Table as Ft, ActionIcon as Q, MultiSelect as lr, Paper as jo, Code as hs, Modal as De, Tabs as g, LoadingOverlay as Sn, Alert as Go, NativeSelect as cl, useMantineTheme as dl, ColorInput as Yo, ColorSwatch as Ki, Slider as eh, Overlay as sn, Checkbox as ve, Center as kn, CheckIcon as th, MANTINE_SIZES as nh, SimpleGrid as rn, Tooltip as Ve, SegmentedControl as rh, HoverCard as it, Anchor as Ui, Textarea as ih, Collapse as Ho, Mark as oh, createStyles as Wn, Popover as Ei, Flex as jn, Badge as cr, CloseButton as ul, Menu as he, Affix as ah, Header as sh, ThemeIcon as Ri, List as ps, UnstyledButton as lh, Navbar as Wt, JsonInput as hl, Drawer as ch, Radio as fs, Skeleton as ms, NavLink as Xi, Pagination as dh, AppShell as pl } from "@mantine/core";
 import { useModals as Ht, ModalsProvider as fl } from "@mantine/modals";
 import { useBoolean as Ze, useCreation as Tt, useAsyncEffect as yr, useRequest as vn, useLatest as gs, usePrevious as uh } from "ahooks";
 import { observable as ml, runInAction as ir, toJS as Qt, reaction as xt, makeAutoObservable as xr } from "mobx";
@@ -1164,7 +1164,7 @@ class aa {
     }), this.instanceRegistry.clear(), this.factoryRegistry.clear();
   }
 }
-const dc = "10.19.0", gf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const dc = "10.20.1", gf = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   version: dc
 }, Symbol.toStringTag, { value: "Module" }));
@@ -1283,7 +1283,7 @@ class Re extends xf {
     return ce(n, "version", 0) < this.VERSION;
   }
 }
-const J = (e, t) => {
+const Z = (e, t) => {
   const [n, {
     setFalse: r
   }] = Ze(!0), [o, a] = U();
@@ -1360,7 +1360,7 @@ function _f({
 }) {
   const {
     value: t
-  } = J(e.instanceData, "config"), n = e.data, {
+  } = Z(e.instanceData, "config"), n = e.data, {
     width: r,
     height: o
   } = e.viewport, {
@@ -1468,7 +1468,7 @@ function kf() {
     throw new Error("Please use FullScreenPanelContext.Provider");
   return e;
 }
-const X = D(_e(({
+const J = D(_e(({
   label: e,
   required: t,
   value: n,
@@ -1487,7 +1487,7 @@ const X = D(_e(({
       group: ""
     }), p;
   }, [c.dataFieldOptions]);
-  return /* @__PURE__ */ i(P, { ref: l, label: e, data: d, value: n, onChange: r, required: t, sx: a, maxDropdownHeight: 500, ...s });
+  return /* @__PURE__ */ i(F, { ref: l, label: e, data: d, value: n, onChange: r, required: t, sx: a, maxDropdownHeight: 500, ...s });
 }));
 function Tf({
   context: e
@@ -1495,7 +1495,7 @@ function Tf({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = Ne({}, t, sa), {
+  } = Z(e.instanceData, "config"), r = Ne({}, t, sa), {
     control: o,
     handleSubmit: a,
     reset: s
@@ -1512,7 +1512,7 @@ function Tf({
     }, children: [
       /* @__PURE__ */ i(y, { name: "x_axis_data_key", control: o, render: ({
         field: l
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, ...l }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, ...l }) }),
       /* @__PURE__ */ i(y, { name: "xAxis3D.name", control: o, render: ({
         field: l
       }) => /* @__PURE__ */ i($, { sx: {
@@ -1526,7 +1526,7 @@ function Tf({
     }, children: [
       /* @__PURE__ */ i(y, { name: "y_axis_data_key", control: o, render: ({
         field: l
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, ...l }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, ...l }) }),
       /* @__PURE__ */ i(y, { name: "yAxis3D.name", control: o, render: ({
         field: l
       }) => /* @__PURE__ */ i($, { sx: {
@@ -1540,7 +1540,7 @@ function Tf({
     }, children: [
       /* @__PURE__ */ i(y, { name: "z_axis_data_key", control: o, render: ({
         field: l
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, ...l }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, ...l }) }),
       /* @__PURE__ */ i(y, { name: "zAxis3D.name", control: o, render: ({
         field: l
       }) => /* @__PURE__ */ i($, { sx: {
@@ -1632,7 +1632,7 @@ class ct extends R.Component {
           error: null
         });
       };
-      return /* @__PURE__ */ u(F, { children: [
+      return /* @__PURE__ */ u(P, { children: [
         /* @__PURE__ */ i(C, { size: "xs", children: (t = this.state.error) == null ? void 0 : t.message }),
         /* @__PURE__ */ i(M, { variant: "subtle", size: "xs", mx: "auto", compact: !0, sx: {
           display: "block"
@@ -1677,7 +1677,7 @@ function zf({
   };
   return /* @__PURE__ */ u(S, { ref: n, children: [
     /* @__PURE__ */ u(v, { grow: !0, children: [
-      /* @__PURE__ */ i(P, { label: "Format", data: [{
+      /* @__PURE__ */ i(F, { label: "Format", data: [{
         label: "1234",
         value: "number"
       }, {
@@ -1805,7 +1805,7 @@ const Af = [{
     } }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(se, { label: "Max Width", hideControls: !0, value: t.width, onChange: o("width") }),
-      /* @__PURE__ */ i(P, { label: "Overflow", data: Af, value: t.overflow, onChange: o("overflow") }),
+      /* @__PURE__ */ i(F, { label: "Overflow", data: Af, value: t.overflow, onChange: o("overflow") }),
       /* @__PURE__ */ i(
         $,
         {
@@ -1978,7 +1978,7 @@ function Ef(e, t) {
   const {
     value: n,
     set: r
-  } = J(e.operation.operationData, "config"), [o, a] = U(Ne({}, n, t)), s = async () => {
+  } = Z(e.operation.operationData, "config"), [o, a] = U(Ne({}, n, t)), s = async () => {
     await r(o);
   };
   return W(() => {
@@ -2056,7 +2056,7 @@ function Vf(e) {
   const {
     value: t,
     set: n
-  } = J(e.operationData, "config"), r = (o) => void n({
+  } = Z(e.operationData, "config"), r = (o) => void n({
     template: o
   });
   return [(t == null ? void 0 : t.template) || "", r];
@@ -2078,13 +2078,13 @@ const qf = {
   const t = Ce(), {
     value: n,
     set: r
-  } = J(e.operation.operationData, "config");
+  } = Z(e.operation.operationData, "config");
   console.log({
     value: n,
     viewID: n == null ? void 0 : n.viewID
   });
   const o = (n == null ? void 0 : n.viewID) || "";
-  return /* @__PURE__ */ i(P, { defaultValue: o, value: o, onChange: (s) => void r({
+  return /* @__PURE__ */ i(F, { defaultValue: o, value: o, onChange: (s) => void r({
     viewID: s
   }), label: "View", data: t.views.options });
 });
@@ -2127,7 +2127,7 @@ const Gf = {
   const t = Ce(), {
     value: n = Qf,
     set: r
-  } = J(e.operation.operationData, "config"), {
+  } = Z(e.operation.operationData, "config"), {
     dictionary: o = {}
   } = n;
   console.log({
@@ -2190,7 +2190,7 @@ const Xf = {
   const t = Ce(), {
     value: n = Jf,
     set: r
-  } = J(e.operation.operationData, "config"), {
+  } = Z(e.operation.operationData, "config"), {
     filter_keys: o = []
   } = n, a = (l) => {
     r({
@@ -2506,7 +2506,7 @@ function lm({
   async function r(o) {
     await e.changeSchema(t.find((a) => a.id === o));
   }
-  return /* @__PURE__ */ i(P, { label: "Operation", data: n, onChange: r, value: e.operationSchema.id });
+  return /* @__PURE__ */ i(F, { label: "Operation", data: n, onChange: r, value: e.operationSchema.id });
 }
 const cm = D((e) => {
   const [t, {
@@ -2585,7 +2585,7 @@ const pm = D(({
   async function r(o) {
     await e.changeSchema(t.find((a) => a.id === o));
   }
-  return /* @__PURE__ */ i(P, { label: "Trigger", data: n, value: e.triggerSchema.id, onChange: r });
+  return /* @__PURE__ */ i(F, { label: "Trigger", data: n, value: e.triggerSchema.id, onChange: r });
 }), mm = D(({
   model: e
 }) => {
@@ -6228,7 +6228,7 @@ function fb() {
 const mb = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { sx: {
+}) => /* @__PURE__ */ i(P, { sx: {
   position: "relative",
   flexGrow: 1
 }, children: /* @__PURE__ */ i(ht, { className: "function-editor", height: "100%", defaultLanguage: "javascript", value: e, onChange: (r) => {
@@ -6289,7 +6289,7 @@ const mb = ({
     close: d
   }] = ta(!1);
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(De, { opened: l, onClose: d, title: "Authentication", withinPortal: !0, zIndex: 320, size: "900px", children: /* @__PURE__ */ i(F, { h: 600, children: /* @__PURE__ */ i(gr, { value: e, onChange: t, defaultValue: a, label: n }) }) }),
+    /* @__PURE__ */ i(De, { opened: l, onClose: d, title: "Authentication", withinPortal: !0, zIndex: 320, size: "900px", children: /* @__PURE__ */ i(P, { h: 600, children: /* @__PURE__ */ i(gr, { value: e, onChange: t, defaultValue: a, label: n }) }) }),
     /* @__PURE__ */ i(M, { onClick: c, ...o, children: r })
   ] });
 }), Vs = ["function aggregation({ queryData }, utils) {", '    return "Aggregation Result";', "}"].join(`
@@ -6423,7 +6423,7 @@ function _b({
     });
   };
   return /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, pt: r, children: [
-    /* @__PURE__ */ i(P, { ref: o, label: e, data: wb, value: t.type, onChange: a }),
+    /* @__PURE__ */ i(F, { ref: o, label: e, data: wb, value: t.type, onChange: a }),
     t.type === "quantile" && /* @__PURE__ */ i(se, { label: "p", value: t.config.p, onChange: s, precision: 2, min: 0.05, step: 0.05, max: 1 }),
     t.type === "custom" && /* @__PURE__ */ i(gb, { label: "", triggerLabel: "Edit Function", value: t.config.func, onChange: l, defaultValue: Vs, triggerButtonProps: {
       size: "xs",
@@ -6496,7 +6496,7 @@ function kb({
       flexGrow: 0
     }, children: "or" }),
     /* @__PURE__ */ i(
-      P,
+      F,
       {
         data: o,
         value: e,
@@ -6594,7 +6594,7 @@ const Ib = R.forwardRef(Db), Yc = R.forwardRef(function({
     }, children: /* @__PURE__ */ i(Gc, { label: "Font Weight", value: t.weight, onChange: (s) => a("weight", s) }) }),
     /* @__PURE__ */ i(E, { my: "xs", label: "Style", labelPosition: "center" }),
     /* @__PURE__ */ u(S, { children: [
-      /* @__PURE__ */ i(P, { label: "Color Type", data: [{
+      /* @__PURE__ */ i(F, { label: "Color Type", data: [{
         label: "Static Color",
         value: "static"
       }, {
@@ -6618,12 +6618,12 @@ R.forwardRef(function({
     const c = k.cloneDeep(t);
     k.set(c, s, l), n(c);
   };
-  return /* @__PURE__ */ u(F, { px: "sm", py: "md", ref: o, children: [
+  return /* @__PURE__ */ u(P, { px: "sm", py: "md", ref: o, children: [
     /* @__PURE__ */ i(C, { weight: "bold", pb: 0, children: t.name }),
     /* @__PURE__ */ i(E, { my: "xs", label: "Data", labelPosition: "center" }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i($, { label: "Name", required: !0, value: t.name, onChange: (s) => a("name", s.currentTarget.value) }),
-      /* @__PURE__ */ i(X, { label: "Data Field", required: !0, value: t.data_field, onChange: (s) => a("data_field", s) })
+      /* @__PURE__ */ i(J, { label: "Data Field", required: !0, value: t.data_field, onChange: (s) => a("data_field", s) })
     ] }),
     /* @__PURE__ */ i(mi, { label: "Aggregation", value: t.aggregation, onChange: (s) => a("aggregation", s) }),
     /* @__PURE__ */ i(E, { my: "xs", label: "Format", labelPosition: "center" }),
@@ -6854,7 +6854,7 @@ function Vb({
 }) {
   const {
     value: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = e.data, {
     width: a,
@@ -6879,7 +6879,7 @@ function Vb({
     data: o,
     variables: r
   }), [l, o, r]);
-  return !n || !a || !s ? null : /* @__PURE__ */ i(F, { sx: {
+  return !n || !a || !s ? null : /* @__PURE__ */ i(P, { sx: {
     width: a,
     height: s,
     overflow: "hidden"
@@ -6911,7 +6911,7 @@ function Nb({
           control: e,
           render: ({
             field: o
-          }) => /* @__PURE__ */ i(P, { label: "Value", required: !0, data: r, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Value", required: !0, data: r, sx: {
             flex: 1
           }, ...o })
         }
@@ -6961,7 +6961,7 @@ const qb = ({
   disabled: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ u(F, { sx: {
+}) => /* @__PURE__ */ u(P, { sx: {
   position: "relative"
 }, children: [
   e && /* @__PURE__ */ i(sn, { opacity: 0.6, color: "#fff", zIndex: 5, blur: 2 }),
@@ -7037,7 +7037,7 @@ const qb = ({
     }, ...n }) }),
     /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "X Axis Data Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "X Axis Data Field", required: !0, sx: {
       flex: 1
     }, ...n }) })
   ] }),
@@ -7076,7 +7076,7 @@ const qb = ({
     }, ...n }) }),
     /* @__PURE__ */ i(y, { name: "y_axis.data_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Y Axis Data Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Y Axis Data Field", required: !0, sx: {
       flex: 1
     }, ...n }) })
   ] }),
@@ -7099,7 +7099,7 @@ const qb = ({
     }, ...r }) }),
     /* @__PURE__ */ i(y, { name: `tooltip.metrics.${t}.data_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
       flex: 1
     }, ...r }) })
   ] }),
@@ -7186,7 +7186,7 @@ const Qb = [{
     }, checked: o.value, onChange: (a) => o.onChange(a.currentTarget.checked) }) }) }),
     /* @__PURE__ */ i(v, { children: /* @__PURE__ */ i(y, { name: "legend", control: e, render: ({
       field: o
-    }) => /* @__PURE__ */ i(P, { label: "Orientation", data: Qb, sx: {
+    }) => /* @__PURE__ */ i(F, { label: "Orientation", data: Qb, sx: {
       flex: 1
     }, value: o.value.orient, onChange: (a) => {
       r(a, o.onChange);
@@ -7199,7 +7199,7 @@ function Ub({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => Ne({}, t, ca), [t]), {
     control: a,
@@ -7523,7 +7523,7 @@ const xa = {
     instance: t
   }), r = Mt(n.triggerManager, Qc.id), o = Ke(), {
     value: a
-  } = J(e.instanceData, "config"), s = z(() => $e({}, a, xa), [a]), {
+  } = Z(e.instanceData, "config"), s = z(() => $e({}, a, xa), [a]), {
     content: l,
     horizontal_align: c,
     vertical_align: d,
@@ -7566,7 +7566,7 @@ const xa = {
   label: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ i(P, { data: py, label: e, value: t, onChange: n }), my = [{
+}) => /* @__PURE__ */ i(F, { data: py, label: e, value: t, onChange: n }), my = [{
   label: "Filled",
   value: "filled"
 }, {
@@ -7613,7 +7613,7 @@ function yy({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, xa), [t]), o = r;
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, xa), [t]), o = r;
   W(() => {
     !ke(r, o) && (console.log("config malformed, resetting to defaults", r, o), n(o));
   }, [r, o]);
@@ -7651,7 +7651,7 @@ function yy({
             name: "variant",
             render: ({
               field: f
-            }) => /* @__PURE__ */ i(P, { label: "Variant", data: my, ...f })
+            }) => /* @__PURE__ */ i(F, { label: "Variant", data: my, ...f })
           }
         ),
         /* @__PURE__ */ i(y, { control: a, name: "color", render: ({
@@ -7674,7 +7674,7 @@ function yy({
             name: "horizontal_align",
             render: ({
               field: f
-            }) => /* @__PURE__ */ i(P, { label: "Horizontal Alignment", data: gy, ...f })
+            }) => /* @__PURE__ */ i(F, { label: "Horizontal Alignment", data: gy, ...f })
           }
         ),
         /* @__PURE__ */ i(
@@ -7684,7 +7684,7 @@ function yy({
             name: "vertical_align",
             render: ({
               field: f
-            }) => /* @__PURE__ */ i(P, { label: "Vertical Alignment", data: by, ...f })
+            }) => /* @__PURE__ */ i(F, { label: "Vertical Alignment", data: by, ...f })
           }
         )
       ] })
@@ -8361,7 +8361,7 @@ function Yy({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => Ne({}, r, wa), [r]), s = e.data, {
     width: l,
@@ -8383,7 +8383,7 @@ function Yy({
       bottom: br(x.bottom, o, s)
     };
   }, [a, s]), w = Math.max(0, c - p - f);
-  return /* @__PURE__ */ u(F, { sx: {
+  return /* @__PURE__ */ u(P, { sx: {
     width: l,
     height: c,
     overflow: "hidden"
@@ -8410,19 +8410,19 @@ const Sa = _e(({
   return /* @__PURE__ */ u(S, { children: [
     /* @__PURE__ */ i(E, { variant: "dashed", label: "Scroll to Zoom", labelPosition: "center" }),
     /* @__PURE__ */ u(v, { children: [
-      /* @__PURE__ */ i(F, { sx: {
+      /* @__PURE__ */ i(P, { sx: {
         flexGrow: 1
       }, children: /* @__PURE__ */ i(Je, { label: "Enable on X Axis", checked: e.x_axis_scroll, onChange: (o) => r("x_axis_scroll")(o.currentTarget.checked) }) }),
-      /* @__PURE__ */ i(F, { sx: {
+      /* @__PURE__ */ i(P, { sx: {
         flexGrow: 1
       }, children: /* @__PURE__ */ i(Je, { label: "Enable on Y Axis", checked: e.y_axis_scroll, onChange: (o) => r("y_axis_scroll")(o.currentTarget.checked) }) })
     ] }),
     /* @__PURE__ */ i(E, { variant: "dashed", label: "Slider for Zooming", labelPosition: "center" }),
     /* @__PURE__ */ u(v, { children: [
-      /* @__PURE__ */ i(F, { sx: {
+      /* @__PURE__ */ i(P, { sx: {
         flexGrow: 1
       }, children: /* @__PURE__ */ i(Je, { label: "Slider for X Axis", checked: e.x_axis_slider, onChange: (o) => r("x_axis_slider")(o.currentTarget.checked) }) }),
-      /* @__PURE__ */ i(Ve, { label: "Not available for now, will overlap y-axis's label", children: /* @__PURE__ */ i(F, { sx: {
+      /* @__PURE__ */ i(Ve, { label: "Not available for now, will overlap y-axis's label", children: /* @__PURE__ */ i(P, { sx: {
         flexGrow: 1
       }, children: /* @__PURE__ */ i(Je, { label: "Slider for Y Axis", disabled: !e.y_axis_slider, checked: e.y_axis_slider, onChange: (o) => r("y_axis_slider")(o.currentTarget.checked) }) }) })
     ] })
@@ -8460,7 +8460,7 @@ function Ky({
         field: o
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Type", required: !0, data: Hy, sx: {
+        /* @__PURE__ */ i(F, { label: "Type", required: !0, data: Hy, sx: {
           flex: 1
         }, ...o })
       ) }),
@@ -8468,7 +8468,7 @@ function Ky({
         field: o
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Direction", required: !0, data: Qy, sx: {
+        /* @__PURE__ */ i(F, { label: "Direction", required: !0, data: Qy, sx: {
           flex: 1
         }, ...o })
       ) })
@@ -8479,7 +8479,7 @@ function Ky({
         field: o
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Upper Boundary", required: !0, data: r, sx: {
+        /* @__PURE__ */ i(F, { label: "Upper Boundary", required: !0, data: r, sx: {
           flex: 1
         }, ...o })
       ) }),
@@ -8487,7 +8487,7 @@ function Ky({
         field: o
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Lower Boundary", required: !0, data: r, sx: {
+        /* @__PURE__ */ i(F, { label: "Lower Boundary", required: !0, data: r, sx: {
           flex: 1
         }, ...o })
       ) })
@@ -8583,7 +8583,7 @@ function Zy({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Value", required: !0, data: o, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Value", required: !0, data: o, sx: {
             flex: 1
           }, ...l })
         }
@@ -8600,7 +8600,7 @@ function Zy({
           field: l
         }) => (
           // @ts-expect-error type of onChange
-          /* @__PURE__ */ i(P, { label: "Orientation", data: Jy, required: !0, sx: {
+          /* @__PURE__ */ i(F, { label: "Orientation", data: Jy, required: !0, sx: {
             flex: 1
           }, ...l })
         ) }),
@@ -8612,7 +8612,7 @@ function Zy({
           onChange: c,
           ...d
         }
-      }) => /* @__PURE__ */ i(P, { label: "Y Axis", data: a, disabled: a.length === 0, ...d, value: (l == null ? void 0 : l.toString()) ?? "", onChange: (p) => {
+      }) => /* @__PURE__ */ i(F, { label: "Y Axis", data: a, disabled: a.length === 0, ...d, value: (l == null ? void 0 : l.toString()) ?? "", onChange: (p) => {
         if (!p) {
           c(0);
           return;
@@ -8631,7 +8631,7 @@ function Zy({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Line Type", data: Xy, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Line Type", data: Xy, sx: {
             flexGrow: 1
           }, ...l })
         }
@@ -8760,14 +8760,14 @@ function rx({
       }, ...s }) }),
       /* @__PURE__ */ i(y, { name: `regressions.${n}.group_by_key`, control: e, render: ({
         field: s
-      }) => /* @__PURE__ */ i(X, { label: "Split into multiple regression lines by this key...", clearable: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Split into multiple regression lines by this key...", clearable: !0, sx: {
         flex: 1
       }, ...s }) })
     ] }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: `regressions.${n}.y_axis_data_key`, control: e, render: ({
         field: s
-      }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
         flex: 1
       }, ...s }) }),
       /* @__PURE__ */ i(y, { name: `regressions.${n}.plot.yAxisIndex`, control: e, render: ({
@@ -8776,7 +8776,7 @@ function rx({
           onChange: l,
           ...c
         }
-      }) => /* @__PURE__ */ i(P, { label: "Y Axis", data: o, disabled: o.length === 0, ...c, value: (s == null ? void 0 : s.toString()) ?? "", onChange: (d) => {
+      }) => /* @__PURE__ */ i(F, { label: "Y Axis", data: o, disabled: o.length === 0, ...c, value: (s == null ? void 0 : s.toString()) ?? "", onChange: (d) => {
         if (!d) {
           l(0);
           return;
@@ -8794,7 +8794,7 @@ function rx({
           control: e,
           render: ({
             field: s
-          }) => /* @__PURE__ */ i(P, { label: "Method", data: tx, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Method", data: tx, sx: {
             flex: 1
           }, ...s })
         }
@@ -8821,7 +8821,7 @@ function rx({
           control: e,
           render: ({
             field: s
-          }) => /* @__PURE__ */ i(P, { label: "Line Type", data: nx, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Line Type", data: nx, sx: {
             flexGrow: 1
           }, ...s })
         }
@@ -8946,7 +8946,7 @@ function ax({
           control: e,
           render: ({
             field: o
-          }) => /* @__PURE__ */ i(P, { label: "Bar Gap", data: ox, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Bar Gap", data: ox, sx: {
             flexGrow: 1
           }, ...o })
         }
@@ -8974,7 +8974,7 @@ function ax({
 const sx = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
+}) => /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
   r && t(r);
 }, theme: "vs-dark", options: {
   minimap: {
@@ -9008,7 +9008,7 @@ const sx = ({
     d(ka.dynamic.func_content);
   };
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       width: "50%"
     }, children: /* @__PURE__ */ i(M, { variant: "filled", mt: 24, onClick: r, sx: {
       flexGrow: 0
@@ -9058,7 +9058,7 @@ const sx = ({
     });
   };
   return /* @__PURE__ */ u(rn, { cols: 2, children: [
-    /* @__PURE__ */ i(P, { ref: r, label: e, data: ux, value: t.type, onChange: o, sx: {
+    /* @__PURE__ */ i(F, { ref: r, label: e, data: ux, value: t.type, onChange: o, sx: {
       flexGrow: 1
     } }),
     /* @__PURE__ */ i(dx, { value: t, onChange: n }),
@@ -9102,7 +9102,7 @@ function fx({
           control: e,
           render: ({
             field: o
-          }) => /* @__PURE__ */ i(P, { label: "Line Type", data: px, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Line Type", data: px, sx: {
             flexGrow: 1
           }, ...o })
         }
@@ -9123,7 +9123,7 @@ function fx({
     /* @__PURE__ */ u(v, { grow: !0, align: "center", children: [
       /* @__PURE__ */ i(y, { name: `series.${t}.step`, control: e, render: ({
         field: o
-      }) => /* @__PURE__ */ i(P, { label: "Step", data: hx, sx: {
+      }) => /* @__PURE__ */ i(F, { label: "Step", data: hx, sx: {
         flexGrow: 1,
         maxWidth: "48%"
       }, ...o, value: String(o.value), onChange: (a) => {
@@ -9133,12 +9133,12 @@ function fx({
       /* @__PURE__ */ u(S, { children: [
         /* @__PURE__ */ i(y, { name: `series.${t}.smooth`, control: e, render: ({
           field: o
-        }) => /* @__PURE__ */ i(F, { sx: {
+        }) => /* @__PURE__ */ i(P, { sx: {
           flexGrow: 1
         }, children: /* @__PURE__ */ i(Je, { label: "Smooth Line", checked: o.value, onChange: (a) => o.onChange(a.currentTarget.checked) }) }) }),
         /* @__PURE__ */ i(y, { name: `series.${t}.display_name_on_line`, control: e, render: ({
           field: o
-        }) => /* @__PURE__ */ i(F, { sx: {
+        }) => /* @__PURE__ */ i(P, { sx: {
           flexGrow: 1
         }, children: /* @__PURE__ */ i(Je, { label: "Display Name on Line", checked: o.value ?? !1, onChange: (a) => o.onChange(a.currentTarget.checked) }) }) })
       ] })
@@ -9146,7 +9146,7 @@ function fx({
     /* @__PURE__ */ u(S, { children: [
       /* @__PURE__ */ i(y, { name: `series.${t}.showSymbol`, control: e, render: ({
         field: o
-      }) => /* @__PURE__ */ i(F, { mt: 10, mb: -10, sx: {
+      }) => /* @__PURE__ */ i(P, { mt: 10, mb: -10, sx: {
         flexGrow: 1
       }, children: /* @__PURE__ */ i(Je, { label: "Show Symbol on Line", checked: o.value, onChange: (a) => o.onChange(a.currentTarget.checked) }) }) }),
       r && /* @__PURE__ */ i(y, { name: `series.${t}.symbolSize`, control: e, render: ({
@@ -9244,7 +9244,7 @@ function bx({
           onChange: l,
           ...c
         }
-      }) => /* @__PURE__ */ i(P, { label: "Y Axis", data: o, disabled: o.length === 0, ...c, value: (s == null ? void 0 : s.toString()) ?? "", onChange: (d) => {
+      }) => /* @__PURE__ */ i(F, { label: "Y Axis", data: o, disabled: o.length === 0, ...c, value: (s == null ? void 0 : s.toString()) ?? "", onChange: (d) => {
         if (!d) {
           l(0);
           return;
@@ -9257,7 +9257,7 @@ function bx({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: `series.${t}.y_axis_data_key`, control: e, render: ({
         field: s
-      }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
         flex: 1
       }, ...s }) }),
       /* @__PURE__ */ i(y, { name: `series.${t}.aggregation_on_value`, control: e, render: ({
@@ -9266,7 +9266,7 @@ function bx({
     ] }),
     /* @__PURE__ */ i(v, { grow: !0, children: /* @__PURE__ */ i(y, { name: `series.${t}.group_by_key`, control: e, render: ({
       field: s
-    }) => /* @__PURE__ */ i(X, { label: "Split into multiple series by this key...", clearable: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Split into multiple series by this key...", clearable: !0, sx: {
       flex: 1
     }, ...s }) }) }),
     a === "line" && /* @__PURE__ */ i(fx, { index: t, control: e, seriesItem: r }),
@@ -9280,7 +9280,7 @@ function bx({
         control: e,
         render: ({
           field: s
-        }) => /* @__PURE__ */ i(P, { label: "Label Position", data: gx, ...s })
+        }) => /* @__PURE__ */ i(F, { label: "Label Position", data: gx, ...s })
       }
     ),
     /* @__PURE__ */ u(S, { spacing: 4, children: [
@@ -9420,14 +9420,14 @@ function _x({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "x_axis_data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "X Axis Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "X Axis Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.type", control: e, render: ({
         field: n
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: /* @__PURE__ */ i(vx, {}), required: !0, data: wx, sx: {
+        /* @__PURE__ */ i(F, { label: /* @__PURE__ */ i(vx, {}), required: !0, data: wx, sx: {
           flex: 1
         }, ...n })
       ) })
@@ -9492,7 +9492,7 @@ function kx({
         field: r
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Name Anchor", required: !0, data: Cx, sx: {
+        /* @__PURE__ */ i(F, { label: "Name Anchor", required: !0, data: Cx, sx: {
           flex: 1
         }, ...r })
       ) })
@@ -9502,7 +9502,7 @@ function kx({
       field: r
     }) => (
       // @ts-expect-error type of onChange
-      /* @__PURE__ */ i(P, { label: "Position", required: !0, data: Sx, sx: {
+      /* @__PURE__ */ i(F, { label: "Position", required: !0, data: Sx, sx: {
         flex: 1
       }, ...r })
     ) }) }),
@@ -9575,7 +9575,7 @@ function Dx({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => $e({}, t, wa), [t]), {
     control: a,
@@ -10221,11 +10221,11 @@ function rv({
 }) {
   const {
     value: t
-  } = J(e.instanceData, "config"), n = z(() => Ne({}, t, Ta), [t]), r = e.data, {
+  } = Z(e.instanceData, "config"), n = z(() => Ne({}, t, Ta), [t]), r = e.data, {
     width: o,
     height: a
   } = e.viewport;
-  return /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(nv, { width: o, height: a, data: r, conf: n }) });
+  return /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(nv, { width: o, height: a, data: r, conf: n }) });
 }
 const iv = [{
   label: "Top",
@@ -10274,7 +10274,7 @@ const iv = [{
   value: t,
   onChange: n,
   options: r = iv
-}, o) => /* @__PURE__ */ i(P, { ref: o, label: e, data: r, value: t, onChange: n })), ov = [{
+}, o) => /* @__PURE__ */ i(F, { ref: o, label: e, data: r, value: t, onChange: n })), ov = [{
   label: "Ascending",
   value: "ascending"
 }, {
@@ -10341,10 +10341,10 @@ const iv = [{
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: `series.${n}.level_name_data_key`, control: t, render: ({
         field: l
-      }) => /* @__PURE__ */ i(X, { label: "Level Name Field", ...l }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Level Name Field", ...l }) }),
       /* @__PURE__ */ i(y, { name: `series.${n}.level_value_data_key`, control: t, render: ({
         field: l
-      }) => /* @__PURE__ */ i(X, { label: "Level Value Field", ...l }) })
+      }) => /* @__PURE__ */ i(J, { label: "Level Value Field", ...l }) })
     ] }),
     /* @__PURE__ */ i(E, { mb: -10, mt: 10, variant: "dashed", label: "Funnel Style", labelPosition: "center" }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
@@ -10358,7 +10358,7 @@ const iv = [{
           width: "100%"
         }, children: [
           /* @__PURE__ */ i(C, { children: "Min Value" }),
-          /* @__PURE__ */ i(Ve, { label: "Check to enable specific min value", children: /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(y, { name: `series.${n}.min.enable_value`, control: t, render: ({
+          /* @__PURE__ */ i(Ve, { label: "Check to enable specific min value", children: /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(y, { name: `series.${n}.min.enable_value`, control: t, render: ({
             field: c
           }) => /* @__PURE__ */ i(ve, { size: "xs", checked: c.value, onChange: (d) => c.onChange(d.currentTarget.checked) }) }) }) })
         ] }), ...l })
@@ -10378,7 +10378,7 @@ const iv = [{
           width: "100%"
         }, children: [
           /* @__PURE__ */ i(C, { children: "Max Value" }),
-          /* @__PURE__ */ i(Ve, { label: "Check to enable specific max value", children: /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(y, { name: `series.${n}.max.enable_value`, control: t, render: ({
+          /* @__PURE__ */ i(Ve, { label: "Check to enable specific max value", children: /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(y, { name: `series.${n}.max.enable_value`, control: t, render: ({
             field: c
           }) => /* @__PURE__ */ i(ve, { size: "xs", checked: c.value, onChange: (d) => c.onChange(d.currentTarget.checked) }) }) }) })
         ] }), ...l })
@@ -10395,7 +10395,7 @@ const iv = [{
           control: t,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Orientation", data: sv, ...l })
+          }) => /* @__PURE__ */ i(F, { label: "Orientation", data: sv, ...l })
         }
       ),
       /* @__PURE__ */ i(
@@ -10405,7 +10405,7 @@ const iv = [{
           control: t,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Sort", data: ov, ...l })
+          }) => /* @__PURE__ */ i(F, { label: "Sort", data: ov, ...l })
         }
       )
     ] }),
@@ -10414,7 +10414,7 @@ const iv = [{
         field: l
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Align", disabled: s === "horizontal", data: av, ...l })
+        /* @__PURE__ */ i(F, { label: "Align", disabled: s === "horizontal", data: av, ...l })
       ) }),
       /* @__PURE__ */ i(
         y,
@@ -10432,7 +10432,7 @@ const iv = [{
       /* @__PURE__ */ i(y, { name: `series.${n}.axisLabel.position`, control: t, render: ({
         field: l
       }) => /* @__PURE__ */ i(Da, { label: "Position", options: lv[s], ...l }) }),
-      /* @__PURE__ */ i(F, {})
+      /* @__PURE__ */ i(P, {})
     ] }),
     /* @__PURE__ */ i(v, { grow: !0, noWrap: !0, children: /* @__PURE__ */ i(y, { name: `series.${n}.axisLabel.overflow`, control: t, render: ({
       field: l
@@ -10474,7 +10474,7 @@ function uv({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => k.defaultsDeep({}, t, Ta), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => k.defaultsDeep({}, t, Ta), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -10756,7 +10756,7 @@ function _v(e, t, n, r) {
 const Cv = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
+}) => /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
   r && t(r);
 }, theme: "vs-dark", options: {
   minimap: {
@@ -10800,7 +10800,7 @@ const Cv = ({
     d(Xc.dynamic.value);
   };
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       width: "50%"
     }, children: /* @__PURE__ */ i(M, { variant: "filled", mt: 24, onClick: r, sx: {
       flexGrow: 0
@@ -10850,7 +10850,7 @@ const Cv = ({
     });
   };
   return /* @__PURE__ */ u(rn, { cols: 2, children: [
-    /* @__PURE__ */ i(P, { ref: r, label: e, data: Dv, value: t.type, onChange: o, sx: {
+    /* @__PURE__ */ i(F, { ref: r, label: e, data: Dv, value: t.type, onChange: o, sx: {
       flexGrow: 1
     } }),
     /* @__PURE__ */ i(Tv, { value: t, onChange: n }),
@@ -11103,13 +11103,13 @@ function Ov({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => Ne({}, r, Ia), [r]), s = e.data, {
     width: l,
     height: c
   } = e.viewport;
-  return /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(Rv, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
+  return /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(Rv, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
 }
 function Fv({
   control: e,
@@ -11121,7 +11121,7 @@ function Fv({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "heat_block.data_key", control: e, render: ({
         field: r
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...r }) }),
       /* @__PURE__ */ i(y, { name: "heat_block.name", control: e, render: ({
@@ -11171,7 +11171,7 @@ const Pv = ({
     }, ...r }) }),
     /* @__PURE__ */ i(y, { name: `tooltip.metrics.${t}.data_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
       flex: 1
     }, ...r }) })
   ] }),
@@ -11238,7 +11238,7 @@ const Bv = ({
   disabled: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ u(F, { sx: {
+}) => /* @__PURE__ */ u(P, { sx: {
   position: "relative"
 }, children: [
   e && /* @__PURE__ */ i(sn, { opacity: 0.6, color: "#fff", zIndex: 5, blur: 2 }),
@@ -11315,7 +11315,7 @@ function Wv({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.name", control: e, render: ({
@@ -11369,7 +11369,7 @@ function Gv({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "y_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "y_axis.name", control: e, render: ({
@@ -11382,7 +11382,7 @@ function Gv({
       field: n
     }) => (
       // @ts-expect-error type of onChange
-      /* @__PURE__ */ i(P, { label: "Name Alignment", required: !0, data: jv, sx: {
+      /* @__PURE__ */ i(F, { label: "Name Alignment", required: !0, data: jv, sx: {
         flex: 1
       }, ...n })
     ) }) }),
@@ -11417,7 +11417,7 @@ function Yv({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, Ia), [t]), o = z(() => k.cloneDeep(r), [r]);
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, Ia), [t]), o = z(() => k.cloneDeep(r), [r]);
   W(() => {
     !ke(r, o) && (console.log("config malformed, resetting to defaults", r, o), n(o));
   }, [r, o]);
@@ -11895,7 +11895,7 @@ function d0({
 }) {
   const {
     value: n
-  } = J(e.instanceData, "config"), r = e.data, {
+  } = Z(e.instanceData, "config"), r = e.data, {
     width: o,
     height: a
   } = e.viewport, s = Ne({}, n, Ma), l = c0(s, r), c = zt({
@@ -11944,7 +11944,7 @@ function h0({
         field: n
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Align", required: !0, data: u0, sx: {
+        /* @__PURE__ */ i(F, { label: "Align", required: !0, data: u0, sx: {
           flex: 1
         }, ...n })
       ) })
@@ -11988,7 +11988,7 @@ function f0({
         field: n
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Align", required: !0, data: p0, sx: {
+        /* @__PURE__ */ i(F, { label: "Align", required: !0, data: p0, sx: {
           flex: 1
         }, ...n })
       ) })
@@ -12060,7 +12060,7 @@ function y0({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.name", control: e, render: ({
@@ -12100,7 +12100,7 @@ function x0({
 }) {
   return t(["data_key"]), /* @__PURE__ */ i(S, { children: /* @__PURE__ */ i(y, { name: "data_key", control: e, render: ({
     field: n
-  }) => /* @__PURE__ */ i(X, { label: "Y Axis Data Field", required: !0, sx: {
+  }) => /* @__PURE__ */ i(J, { label: "Y Axis Data Field", required: !0, sx: {
     flex: 1
   }, ...n }) }) });
 }
@@ -12110,7 +12110,7 @@ function v0({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => Ne({}, t, Ma), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => Ne({}, t, Ma), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -12563,7 +12563,7 @@ function P0({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), o = z(() => k.defaults({}, r, za), [r]), a = e.data, {
+  } = Z(e.instanceData, "config"), o = z(() => k.defaults({}, r, za), [r]), a = e.data, {
     width: s,
     height: l
   } = e.viewport;
@@ -12575,7 +12575,7 @@ function V0({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, za), [t]), o = z(() => k.clone(r), [r]), {
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, za), [t]), o = z(() => k.clone(r), [r]), {
     control: a,
     handleSubmit: s,
     watch: l,
@@ -12602,13 +12602,13 @@ function V0({
     }, children: [
       /* @__PURE__ */ i(y, { control: a, name: "label_field", render: ({
         field: f
-      }) => /* @__PURE__ */ i(X, { label: "Label Key", required: !0, ...f }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Label Key", required: !0, ...f }) }),
       /* @__PURE__ */ i(y, { control: a, name: "value_field", render: ({
         field: f
-      }) => /* @__PURE__ */ i(X, { label: "Value Key", required: !0, ...f }) }),
+      }) => /* @__PURE__ */ i(J, { label: "Value Key", required: !0, ...f }) }),
       /* @__PURE__ */ i(y, { control: a, name: "color_field", render: ({
         field: f
-      }) => /* @__PURE__ */ i(X, { label: "Color Key", clearable: !0, ...f }) })
+      }) => /* @__PURE__ */ i(J, { label: "Color Key", clearable: !0, ...f }) })
     ] })
   ] }) });
 }
@@ -12963,13 +12963,13 @@ function tw({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => k.defaults({}, r, xi), [r]), s = e.data, {
     width: l,
     height: c
   } = e.viewport;
-  return !l || !c || !a || vl(a == null ? void 0 : a.dimensions) ? null : /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(ew, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
+  return !l || !c || !a || vl(a == null ? void 0 : a.dimensions) ? null : /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(ew, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
 }
 function nw({
   control: e,
@@ -12982,12 +12982,12 @@ function nw({
   }, children: [
     /* @__PURE__ */ i(v, { grow: !0, noWrap: !0, children: /* @__PURE__ */ i(y, { name: `additional_series.${t}.name_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Series Name Key", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Series Name Key", required: !0, sx: {
       flex: 1
     }, ...r }) }) }),
     /* @__PURE__ */ i(S, { children: /* @__PURE__ */ i(y, { name: `additional_series.${t}.color_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Color Key", required: !0, clearable: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Color Key", required: !0, clearable: !0, sx: {
       flex: 1
     }, ...r }) }) }),
     /* @__PURE__ */ i(M, { mt: 20, leftIcon: /* @__PURE__ */ i(ge, { size: 16 }), color: "red", variant: "light", onClick: () => n(t), disabled: t === 0, children: "Delete" })
@@ -13062,7 +13062,7 @@ function iw({
       }, ...r }) }),
       /* @__PURE__ */ i(y, { name: `dimensions.${t}.data_key`, control: e, render: ({
         field: r
-      }) => /* @__PURE__ */ i(X, { label: "Data Key", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Key", required: !0, sx: {
         flex: 1
       }, ...r }) }),
       /* @__PURE__ */ i(
@@ -13141,7 +13141,7 @@ function aw({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, xi), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, xi), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -13171,7 +13171,7 @@ function aw({
       ] }),
       /* @__PURE__ */ i(g.Panel, { value: "series", p: "md", children: /* @__PURE__ */ i(y, { name: "series_name_key", control: o, render: ({
         field: h
-      }) => /* @__PURE__ */ i(X, { label: "Series Name Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Series Name Field", required: !0, sx: {
         flex: 1
       }, ...h }) }) }),
       /* @__PURE__ */ i(g.Panel, { value: "metrics", p: "md", children: /* @__PURE__ */ i(ow, { control: o, watch: s }) }),
@@ -13796,7 +13796,7 @@ function Lw({
 }) {
   const {
     value: t
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     width: n,
     height: r
   } = e.viewport, o = z(() => {
@@ -13812,7 +13812,7 @@ function Lw({
   }, [e.data, t == null ? void 0 : t.regression.y_axis_data_key]), a = z(() => _w($e({}, t, $a), o), [t, o]), s = ti(null), l = (c) => {
     s.current = c;
   };
-  return !n || !r || !t ? null : /* @__PURE__ */ u(F, { sx: {
+  return !n || !r || !t ? null : /* @__PURE__ */ u(P, { sx: {
     position: "relative"
   }, children: [
     /* @__PURE__ */ i($w, { conf: t, queryData: o }),
@@ -13849,7 +13849,7 @@ function Ew({
     }, ...o }) }) }),
     /* @__PURE__ */ i(y, { name: "regression.group_by_key", control: e, render: ({
       field: o
-    }) => /* @__PURE__ */ i(X, { label: "按此字段将数据分为多个系列", clearable: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "按此字段将数据分为多个系列", clearable: !0, sx: {
       flex: 1
     }, ...o }) }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
@@ -13860,7 +13860,7 @@ function Ew({
           control: e,
           render: ({
             field: o
-          }) => /* @__PURE__ */ i(P, { label: "回归方法", data: Aw, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "回归方法", data: Aw, sx: {
             flex: 1
           }, ...o })
         }
@@ -13890,7 +13890,7 @@ const Rw = ({
   disabled: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ u(F, { sx: {
+}) => /* @__PURE__ */ u(P, { sx: {
   position: "relative"
 }, children: [
   e && /* @__PURE__ */ i(sn, { opacity: 0.6, color: "#fff", zIndex: 5, blur: 2 }),
@@ -13969,7 +13969,7 @@ function Ow({
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "X轴数据字段", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "X轴数据字段", required: !0, sx: {
         flex: 1
       }, ...n }) })
     ] }),
@@ -14014,7 +14014,7 @@ function Fw({
     }, ...n }) }),
     /* @__PURE__ */ i(y, { name: "regression.y_axis_data_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Y轴数据字段", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Y轴数据字段", required: !0, sx: {
       flex: 1
     }, ...n }) })
   ] }) });
@@ -14025,7 +14025,7 @@ function Pw({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => Ne({}, t, $a), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => Ne({}, t, $a), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -14196,7 +14196,7 @@ const Hw = D(({
 }) => {
   const t = Ke(), {
     value: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r,
     data: o
   } = e, a = z(() => {
@@ -14315,7 +14315,7 @@ function Kw({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => Ne({}, t, _i), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => Ne({}, t, _i), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -14905,7 +14905,7 @@ function b_({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => Ne({}, r, Aa), [r]), s = e.data, {
     width: l,
@@ -14927,7 +14927,7 @@ function b_({
       bottom: br(x.bottom, o, s)
     };
   }, [a, s]), w = Math.max(0, c - p - f);
-  return !l || !c ? null : /* @__PURE__ */ u(F, { children: [
+  return !l || !c ? null : /* @__PURE__ */ u(P, { children: [
     /* @__PURE__ */ i(C, { ref: d, align: "left", size: "xs", pl: "sm", sx: {
       display: Ys(a.stats.templates.top) ? "block" : "none"
     }, children: Object.values(m.top).map((x) => x) }),
@@ -14956,21 +14956,21 @@ const y_ = _e(({
     ] }),
     /* @__PURE__ */ i(E, { mb: -15, variant: "dashed", label: "Endpoints", labelPosition: "right" }),
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
-      n && /* @__PURE__ */ i(P, { label: "X Axis", data: n, value: e.xAxisIndex, onChange: (l) => s("xAxisIndex", l) }),
-      r && /* @__PURE__ */ i(P, { label: "Y Axis", data: r, value: e.yAxisIndex, onChange: (l) => s("xAxisIndex", l) })
+      n && /* @__PURE__ */ i(F, { label: "X Axis", data: n, value: e.xAxisIndex, onChange: (l) => s("xAxisIndex", l) }),
+      r && /* @__PURE__ */ i(F, { label: "Y Axis", data: r, value: e.yAxisIndex, onChange: (l) => s("xAxisIndex", l) })
     ] }),
     /* @__PURE__ */ u(S, { spacing: 0, children: [
       /* @__PURE__ */ i(C, { size: 14, color: "#212529", fw: 500, children: "Left-Bottom Point" }),
       /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
-        /* @__PURE__ */ i(P, { icon: /* @__PURE__ */ i(C, { children: "x" }), data: o, value: e.leftBottomPoint.x_data_key, onChange: (l) => s("leftBottomPoint.x_data_key", l ?? ""), clearable: !0 }),
-        /* @__PURE__ */ i(P, { icon: /* @__PURE__ */ i(C, { children: "y" }), data: o, value: e.leftBottomPoint.y_data_key, onChange: (l) => s("leftBottomPoint.y_data_key", l ?? ""), clearable: !0 })
+        /* @__PURE__ */ i(F, { icon: /* @__PURE__ */ i(C, { children: "x" }), data: o, value: e.leftBottomPoint.x_data_key, onChange: (l) => s("leftBottomPoint.x_data_key", l ?? ""), clearable: !0 }),
+        /* @__PURE__ */ i(F, { icon: /* @__PURE__ */ i(C, { children: "y" }), data: o, value: e.leftBottomPoint.y_data_key, onChange: (l) => s("leftBottomPoint.y_data_key", l ?? ""), clearable: !0 })
       ] })
     ] }),
     /* @__PURE__ */ u(S, { spacing: 0, children: [
       /* @__PURE__ */ i(C, { size: 14, color: "#212529", fw: 500, children: "Right-Top Point" }),
       /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
-        /* @__PURE__ */ i(P, { icon: /* @__PURE__ */ i(C, { children: "x" }), data: o, value: e.rightTopPoint.x_data_key, onChange: (l) => s("rightTopPoint.x_data_key", l ?? ""), clearable: !0 }),
-        /* @__PURE__ */ i(P, { icon: /* @__PURE__ */ i(C, { children: "y" }), data: o, value: e.rightTopPoint.y_data_key, onChange: (l) => s("rightTopPoint.y_data_key", l ?? ""), clearable: !0 })
+        /* @__PURE__ */ i(F, { icon: /* @__PURE__ */ i(C, { children: "x" }), data: o, value: e.rightTopPoint.x_data_key, onChange: (l) => s("rightTopPoint.x_data_key", l ?? ""), clearable: !0 }),
+        /* @__PURE__ */ i(F, { icon: /* @__PURE__ */ i(C, { children: "y" }), data: o, value: e.rightTopPoint.y_data_key, onChange: (l) => s("rightTopPoint.y_data_key", l ?? ""), clearable: !0 })
       ] })
     ] }),
     /* @__PURE__ */ i(E, { mb: -15, variant: "dashed", label: "Style", labelPosition: "right" }),
@@ -15100,7 +15100,7 @@ function C_({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Value", required: !0, data: o, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Value", required: !0, data: o, sx: {
             flex: 1
           }, ...l })
         }
@@ -15117,7 +15117,7 @@ function C_({
           field: l
         }) => (
           // @ts-expect-error type of onChange
-          /* @__PURE__ */ i(P, { label: "Orientation", data: __, required: !0, sx: {
+          /* @__PURE__ */ i(F, { label: "Orientation", data: __, required: !0, sx: {
             flex: 1
           }, ...l })
         ) }),
@@ -15129,7 +15129,7 @@ function C_({
           onChange: c,
           ...d
         }
-      }) => /* @__PURE__ */ i(P, { label: "Y Axis", data: a, disabled: a.length === 0, ...d, value: (l == null ? void 0 : l.toString()) ?? "", onChange: (p) => {
+      }) => /* @__PURE__ */ i(F, { label: "Y Axis", data: a, disabled: a.length === 0, ...d, value: (l == null ? void 0 : l.toString()) ?? "", onChange: (p) => {
         if (!p) {
           c(0);
           return;
@@ -15148,7 +15148,7 @@ function C_({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Line Type", data: w_, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Line Type", data: w_, sx: {
             flexGrow: 1
           }, ...l })
         }
@@ -15236,7 +15236,7 @@ function S_({
 const k_ = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
+}) => /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
   r && t(r);
 }, theme: "vs-dark", options: {
   minimap: {
@@ -15270,7 +15270,7 @@ const k_ = ({
     d(Cr.dynamic.func_content);
   };
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       width: "50%"
     }, children: /* @__PURE__ */ i(M, { variant: "filled", mt: 24, onClick: r, sx: {
       flexGrow: 0
@@ -15320,7 +15320,7 @@ const k_ = ({
     });
   };
   return /* @__PURE__ */ u(rn, { cols: 2, children: [
-    /* @__PURE__ */ i(P, { ref: r, label: e, data: M_, value: t.type, onChange: o, sx: {
+    /* @__PURE__ */ i(F, { ref: r, label: e, data: M_, value: t.type, onChange: o, sx: {
       flexGrow: 1
     } }),
     /* @__PURE__ */ i(I_, { value: t, onChange: n }),
@@ -15348,7 +15348,7 @@ const k_ = ({
 }), L_ = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
+}) => /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
   r && t(r);
 }, theme: "vs-dark", options: {
   minimap: {
@@ -15392,7 +15392,7 @@ const k_ = ({
     d(md.dynamic.func_content);
   };
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       width: "50%"
     }, children: /* @__PURE__ */ i(M, { variant: "filled", mt: 24, onClick: r, sx: {
       flexGrow: 0
@@ -15442,7 +15442,7 @@ const k_ = ({
     });
   };
   return /* @__PURE__ */ u(rn, { cols: 2, children: [
-    /* @__PURE__ */ i(P, { ref: r, label: e, data: O_, value: t.type, onChange: o, sx: {
+    /* @__PURE__ */ i(F, { ref: r, label: e, data: O_, value: t.type, onChange: o, sx: {
       flexGrow: 1
     } }),
     /* @__PURE__ */ i(R_, { value: t, onChange: n }),
@@ -15499,12 +15499,12 @@ function V_({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "scatter.name_data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Name Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Name Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "scatter.y_data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Value Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Value Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) })
     ] }),
@@ -15523,7 +15523,7 @@ function V_({
         control: e,
         render: ({
           field: n
-        }) => /* @__PURE__ */ i(P, { label: "Label Position", data: P_, ...n })
+        }) => /* @__PURE__ */ i(F, { label: "Label Position", data: P_, ...n })
       }
     ) }),
     /* @__PURE__ */ i(y, { name: "scatter.label_overflow", control: e, render: ({
@@ -15561,7 +15561,7 @@ const B_ = ({
     }, ...r }) }),
     /* @__PURE__ */ i(y, { name: `tooltip.metrics.${t}.data_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
       flex: 1
     }, ...r }) })
   ] }),
@@ -15635,7 +15635,7 @@ function j_({
         control: e,
         render: ({
           field: n
-        }) => /* @__PURE__ */ i(P, { label: "Trigger", data: W_, sx: {
+        }) => /* @__PURE__ */ i(F, { label: "Trigger", data: W_, sx: {
           flexGrow: 1
         }, ...n })
       }
@@ -15648,7 +15648,7 @@ const G_ = ({
   disabled: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ u(F, { sx: {
+}) => /* @__PURE__ */ u(P, { sx: {
   position: "relative"
 }, children: [
   e && /* @__PURE__ */ i(sn, { opacity: 0.6, color: "#fff", zIndex: 5, blur: 2 }),
@@ -15721,7 +15721,7 @@ function H_({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.name", control: e, render: ({
@@ -15787,7 +15787,7 @@ function U_({
         field: r
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Align", required: !0, data: Q_, sx: {
+        /* @__PURE__ */ i(F, { label: "Align", required: !0, data: Q_, sx: {
           flex: 1
         }, ...r })
       ) })
@@ -15797,7 +15797,7 @@ function U_({
       field: r
     }) => (
       // @ts-expect-error type of onChange
-      /* @__PURE__ */ i(P, { label: "Position", required: !0, data: K_, sx: {
+      /* @__PURE__ */ i(F, { label: "Position", required: !0, data: K_, sx: {
         flex: 1
       }, ...r })
     ) }) }),
@@ -15885,7 +15885,7 @@ function eC({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => $e({}, t, Aa), [t]), a = z(() => Z_(o), [o]);
   W(() => {
@@ -16240,7 +16240,7 @@ const fC = {
 }) => {
   const t = Ke(), {
     value: n = Ea
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, {
     template: o,
@@ -16261,7 +16261,7 @@ const fC = {
     height: c,
     justifyContent: fC[a],
     alignItems: mC[s]
-  }, children: /* @__PURE__ */ i(F, { children: Object.values(p).map((h, f) => /* @__PURE__ */ i(R.Fragment, { children: h }, f)) }) });
+  }, children: /* @__PURE__ */ i(P, { children: Object.values(p).map((h, f) => /* @__PURE__ */ i(R.Fragment, { children: h }, f)) }) });
 }), bC = [{
   label: "Left",
   value: "left"
@@ -16287,7 +16287,7 @@ function xC({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = R.useMemo(() => $e({}, t, Ea), [t]), {
+  } = Z(e.instanceData, "config"), r = R.useMemo(() => $e({}, t, Ea), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -16321,7 +16321,7 @@ function xC({
           control: o,
           render: ({
             field: h
-          }) => /* @__PURE__ */ i(P, { label: "Horizontal Alignment", data: bC, ...h })
+          }) => /* @__PURE__ */ i(F, { label: "Horizontal Alignment", data: bC, ...h })
         }
       ),
       /* @__PURE__ */ i(
@@ -16331,7 +16331,7 @@ function xC({
           name: "vertical_align",
           render: ({
             field: h
-          }) => /* @__PURE__ */ i(P, { label: "Vertical Alignment", data: yC, ...h })
+          }) => /* @__PURE__ */ i(F, { label: "Vertical Alignment", data: yC, ...h })
         }
       )
     ] })
@@ -16511,7 +16511,7 @@ function zC({
     variables: t
   } = e, {
     value: n
-  } = J(e.instanceData, "config"), r = z(() => Ne({}, n, Ra), [n]), o = e.data, {
+  } = Z(e.instanceData, "config"), r = z(() => Ne({}, n, Ra), [n]), o = e.data, {
     width: a,
     height: s
   } = e.viewport, l = z(() => MC(r, o, t), [r, o, t]);
@@ -16527,13 +16527,13 @@ function $C({
   return t(["label_key", "value_key", "group_key"]), /* @__PURE__ */ u(S, { children: [
     /* @__PURE__ */ i(y, { name: "label_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Label Key", required: !0, ...n }) }),
+    }) => /* @__PURE__ */ i(J, { label: "Label Key", required: !0, ...n }) }),
     /* @__PURE__ */ i(y, { name: "value_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Value Key", required: !0, ...n }) }),
+    }) => /* @__PURE__ */ i(J, { label: "Value Key", required: !0, ...n }) }),
     /* @__PURE__ */ i(y, { name: "group_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Group Key", clearable: !0, ...n }) })
+    }) => /* @__PURE__ */ i(J, { label: "Group Key", clearable: !0, ...n }) })
   ] });
 }
 const LC = [{
@@ -16582,7 +16582,7 @@ const LC = [{
         control: e,
         render: ({
           field: r
-        }) => /* @__PURE__ */ i(P, { label: "Rotate", data: LC, ...r })
+        }) => /* @__PURE__ */ i(F, { label: "Rotate", data: LC, ...r })
       }
     ),
     /* @__PURE__ */ i(
@@ -16592,7 +16592,7 @@ const LC = [{
         control: e,
         render: ({
           field: r
-        }) => /* @__PURE__ */ i(P, { label: "Align", data: AC, ...r })
+        }) => /* @__PURE__ */ i(F, { label: "Align", data: AC, ...r })
       }
     )
   ] }),
@@ -16677,7 +16677,7 @@ function OC({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, Ra), [t]), o = z(() => k.clone(r), [r]), {
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, Ra), [t]), o = z(() => k.clone(r), [r]), {
     control: a,
     handleSubmit: s,
     watch: l,
@@ -16879,7 +16879,7 @@ const gd = ["function text({ value }) {", "    // your code goes here", "    ret
 function xd(e, t) {
   const {
     value: n
-  } = J(e.instanceData, "config"), r = {
+  } = Z(e.instanceData, "config"), r = {
     columnsFromConfig: [],
     columnsFromData: []
   };
@@ -16904,7 +16904,7 @@ function YC(e) {
   } = xd(e.instance, e.sampleData), r = t.length > 0 ? t : n, {
     value: o,
     set: a
-  } = J(e.trigger.triggerData, "config"), {
+  } = Z(e.trigger.triggerData, "config"), {
     column: s
   } = Ne({}, o, GC), l = (c) => {
     isNaN(+c) ? a({
@@ -16913,7 +16913,7 @@ function YC(e) {
       column: +c
     });
   };
-  return /* @__PURE__ */ i(P, { clearable: !1, data: r, label: "Choose a column", value: s.toString(), onChange: l });
+  return /* @__PURE__ */ i(F, { clearable: !1, data: r, label: "Choose a column", value: s.toString(), onChange: l });
 }
 function HC(e, t) {
   return e ? xh(e.column) ? `Click cell of ${t[e.column].label}` : `Click cell of ${e.column}` : "Click cell content (click to config)";
@@ -16923,7 +16923,7 @@ function QC(e) {
     columnsFromConfig: t
   } = xd(e.instance), {
     value: n
-  } = J(e.trigger.triggerData, "config");
+  } = Z(e.trigger.triggerData, "config");
   return /* @__PURE__ */ i(C, { children: HC(n, t) });
 }
 const KC = Wn((e) => ({
@@ -17205,7 +17205,7 @@ function c1({
   }, "data-enable-scrollbar": !0, className: h(p.root, {
     "table-highlight-on-hover": r.highlightOnHover
   }), children: [
-    te > 0 && /* @__PURE__ */ i(F, { className: p.info_bar, sx: {
+    te > 0 && /* @__PURE__ */ i(P, { className: p.info_bar, sx: {
       height: 22
     }, children: /* @__PURE__ */ u(C, { align: "right", pr: 6, size: 14, color: "dimmed", fw: "normal", children: [
       "Total: ",
@@ -17244,7 +17244,7 @@ function d1({
     width: o
   } = e.viewport, {
     value: a
-  } = J(e.instanceData, "config");
+  } = Z(e.instanceData, "config");
   return a ? a.id_field ? /* @__PURE__ */ i(c1, { data: n, width: o, height: r, conf: a, context: e, instance: t }) : /* @__PURE__ */ i(C, { color: "red", align: "center", children: "ID Field is not set, can't render a table without it" }) : null;
 }
 const vd = Wn(() => ({
@@ -17400,7 +17400,7 @@ const f1 = D(({
   return /* @__PURE__ */ u(j, { children: [
     /* @__PURE__ */ i(M, { variant: "outline", onClick: d, children: l == null ? void 0 : l.displayName }),
     /* @__PURE__ */ i(De, { size: 508, title: "Setup color interpolation", opened: c, onClose: p, zIndex: 320, children: c && /* @__PURE__ */ u(S, { "data-testid": "color-interpolation-modal", children: [
-      /* @__PURE__ */ i(P, { label: "Color style", value: a.interpolation, data: h, onChange: f }),
+      /* @__PURE__ */ i(F, { label: "Color style", value: a.interpolation, data: h, onChange: f }),
       /* @__PURE__ */ i(m1, { steps: a.steps, interpolation: l, onChange: w }),
       /* @__PURE__ */ u(v, { position: "right", children: [
         /* @__PURE__ */ i(M, { onClick: x, variant: "subtle", children: "Cancel" }),
@@ -17436,7 +17436,7 @@ const w1 = _e((e, t) => {
     colorManager: n
   } = Yt(Nt), [r, o] = U(wd(e.value)), [a, s] = U(x1(n, e.value)), l = gs(a), [c, d] = U(v1(n, e.value)), p = gs(c);
   return /* @__PURE__ */ u(S, { align: "stretch", children: [
-    /* @__PURE__ */ i(P, { label: "Cell background", value: r || "none", onChange: (w) => {
+    /* @__PURE__ */ i(F, { label: "Cell background", value: r || "none", onChange: (w) => {
       var x, T, I;
       o(w || "none"), w === "static" ? (x = e.onChange) == null || x.call(e, l.current) : w === "none" || !w ? (T = e.onChange) == null || T.call(e, "none") : (I = e.onChange) == null || I.call(e, p.current);
     }, data: b1 }),
@@ -17459,7 +17459,7 @@ const w1 = _e((e, t) => {
   value: t,
   onChange: n,
   sx: r
-}, o) => /* @__PURE__ */ i(P, { ref: o, label: e, data: C1, value: t, onChange: n, sx: r })), k1 = _e(({
+}, o) => /* @__PURE__ */ i(F, { ref: o, label: e, data: C1, value: t, onChange: n, sx: r })), k1 = _e(({
   value: e,
   onChange: t
 }, n) => {
@@ -17480,7 +17480,7 @@ const w1 = _e((e, t) => {
       flexGrow: 0
     }, children: "Custom Cell Content" }),
     /* @__PURE__ */ i(De, { size: 800, title: "Custom cell content", opened: r, onClose: a, closeOnClickOutside: !1, withCloseButton: !1, zIndex: 320, children: r && /* @__PURE__ */ u(S, { children: [
-      /* @__PURE__ */ i(F, { sx: {
+      /* @__PURE__ */ i(P, { sx: {
         position: "relative"
       }, children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: s, onChange: (h) => l(h ?? ""), theme: "vs-dark", options: {
         minimap: {
@@ -17524,7 +17524,7 @@ const w1 = _e((e, t) => {
       }, ...s }) }),
       /* @__PURE__ */ i(y, { name: `columns.${t}.value_field`, control: e, render: ({
         field: s
-      }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, ...s }) })
+      }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, ...s }) })
     ] }),
     /* @__PURE__ */ u(v, { grow: !0, children: [
       /* @__PURE__ */ i(y, { name: `columns.${t}.value_type`, control: e, render: ({
@@ -17551,7 +17551,7 @@ const w1 = _e((e, t) => {
         control: e,
         render: ({
           field: s
-        }) => /* @__PURE__ */ i(P, { label: "Alignment", data: T1, ...s })
+        }) => /* @__PURE__ */ i(F, { label: "Alignment", data: T1, ...s })
       }
     ) }),
     /* @__PURE__ */ i(y, { name: `columns.${t}.cellBackgroundColor`, control: e, render: ({
@@ -17668,7 +17668,7 @@ function $1({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, bd), [t]), o = z(() => z1(r), [r]);
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, bd), [t]), o = z(() => z1(r), [r]);
   W(() => {
     !ke(r, o) && (console.log("config malformed, resetting to defaults", r, o), n(o));
   }, [r, o]);
@@ -17710,7 +17710,7 @@ function $1({
       /* @__PURE__ */ u(g.Panel, { value: "Columns", children: [
         /* @__PURE__ */ i(y, { name: "id_field", control: a, render: ({
           field: f
-        }) => /* @__PURE__ */ i(X, { label: "ID Field", required: !0, ...f }) }),
+        }) => /* @__PURE__ */ i(J, { label: "ID Field", required: !0, ...f }) }),
         /* @__PURE__ */ i(E, { mt: 20, mb: 10, variant: "dashed" }),
         /* @__PURE__ */ i(I1, { control: a, watch: l })
       ] }),
@@ -17838,7 +17838,7 @@ const ro = {
 }) => {
   const t = Ke(), {
     value: n = Fa
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = e.data, {
     func_content: a,
@@ -17860,7 +17860,7 @@ const ro = {
 }), F1 = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ i(F, { sx: {
+}) => /* @__PURE__ */ i(P, { sx: {
   position: "relative"
 }, children: /* @__PURE__ */ i(ht, { height: "500px", defaultLanguage: "javascript", value: e, onChange: (r) => {
   r && t(r);
@@ -17915,7 +17915,7 @@ function N1({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, Fa), [t]), o = z(() => {
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, Fa), [t]), o = z(() => {
     const {
       func_content: f,
       horizontal_align: m,
@@ -17965,7 +17965,7 @@ function N1({
           control: a,
           render: ({
             field: f
-          }) => /* @__PURE__ */ i(P, { label: "Horizontal Alignment", data: V1, ...f })
+          }) => /* @__PURE__ */ i(F, { label: "Horizontal Alignment", data: V1, ...f })
         }
       ),
       /* @__PURE__ */ i(y, { name: "font_size", control: a, render: ({
@@ -18070,7 +18070,7 @@ const G1 = ({
   ...ha
 }, Ks = ({
   message: e
-}) => /* @__PURE__ */ i(F, { sx: io, children: /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: {
+}) => /* @__PURE__ */ i(P, { sx: io, children: /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: {
   __html: e
 }, style: {
   fontSize: "14px",
@@ -18098,7 +18098,7 @@ function H1({
 }) {
   const {
     value: t
-  } = J(e.instanceData, "config"), n = z(() => $e({}, t, Pa), [t]), {
+  } = Z(e.instanceData, "config"), n = z(() => $e({}, t, Pa), [t]), {
     width: r,
     height: o
   } = e.viewport, a = e.data, {
@@ -18111,10 +18111,10 @@ function H1({
   }), {
     refreshDeps: [a, n]
   });
-  return !r || !o || !n ? null : c ? /* @__PURE__ */ i(F, { sx: {
+  return !r || !o || !n ? null : c ? /* @__PURE__ */ i(P, { sx: {
     position: "relative",
     height: o
-  }, children: /* @__PURE__ */ i(Sn, { visible: !0 }) }) : l ? /* @__PURE__ */ i(F, { sx: io, "data-enable-scrollbar": !0, children: /* @__PURE__ */ i(Y1, { error: l, width: r, height: o }) }) : !s || !Array.isArray(s.replies) || s.replies.length === 0 ? null : /* @__PURE__ */ i(F, { sx: io, "data-enable-scrollbar": !0, children: s.replies.map((d, p) => /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: {
+  }, children: /* @__PURE__ */ i(Sn, { visible: !0 }) }) : l ? /* @__PURE__ */ i(P, { sx: io, "data-enable-scrollbar": !0, children: /* @__PURE__ */ i(Y1, { error: l, width: r, height: o }) }) : !s || !Array.isArray(s.replies) || s.replies.length === 0 ? null : /* @__PURE__ */ i(P, { sx: io, "data-enable-scrollbar": !0, children: s.replies.map((d, p) => /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: {
     __html: d.interpretation.html
   } }, p)) });
 }
@@ -18124,7 +18124,7 @@ function Q1({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, Pa), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, Pa), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -18496,13 +18496,13 @@ function fS({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => k.defaults({}, r, Va), [r]), s = e.data, {
     width: l,
     height: c
   } = e.viewport;
-  return !a.calendar.data_key || !a.heat_block.data_key ? null : /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(pS, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
+  return !a.calendar.data_key || !a.heat_block.data_key ? null : /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(pS, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
 }
 function mS({
   control: e,
@@ -18512,7 +18512,7 @@ function mS({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "heat_block.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "heat_block.name", control: e, render: ({
@@ -18548,7 +18548,7 @@ const gS = ({
     }, ...r }) }),
     /* @__PURE__ */ i(y, { name: `tooltip.metrics.${t}.data_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
       flex: 1
     }, ...r }) })
   ] }),
@@ -18625,7 +18625,7 @@ function vS({
   return t(["calendar"]), /* @__PURE__ */ u(S, { children: [
     /* @__PURE__ */ i(v, { grow: !0, noWrap: !0, children: /* @__PURE__ */ i(y, { name: "calendar.data_key", control: e, render: ({
       field: n
-    }) => /* @__PURE__ */ i(X, { label: "Data Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Data Field", required: !0, sx: {
       flex: 1
     }, ...n }) }) }),
     /* @__PURE__ */ i(
@@ -18635,7 +18635,7 @@ function vS({
         control: e,
         render: ({
           field: n
-        }) => /* @__PURE__ */ i(P, { label: "Language", required: !0, data: xS, sx: {
+        }) => /* @__PURE__ */ i(F, { label: "Language", required: !0, data: xS, sx: {
           flex: 1
         }, ...n })
       }
@@ -18648,7 +18648,7 @@ function wS({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => $e({}, t, Va), [t]), o = z(() => k.cloneDeep(r), [r]);
+  } = Z(e.instanceData, "config"), r = z(() => $e({}, t, Va), [t]), o = z(() => k.cloneDeep(r), [r]);
   W(() => {
     !ke(r, o) && (console.log("config malformed, resetting to defaults", r, o), n(o));
   }, [r, o]);
@@ -19237,13 +19237,13 @@ function HS({
     instance: t
   }), {
     value: r
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: o
   } = e, a = z(() => Ne({}, r, Na), [r]), s = e.data, {
     width: l,
     height: c
   } = e.viewport;
-  return /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(YS, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
+  return /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(YS, { variables: o, width: l, height: c, data: s, conf: a, interactionManager: n }) });
 }
 const QS = [{
   label: "solid",
@@ -19286,7 +19286,7 @@ function US({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Value", required: !0, data: o, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Value", required: !0, data: o, sx: {
             flex: 1
           }, ...l })
         }
@@ -19303,7 +19303,7 @@ function US({
           field: l
         }) => (
           // @ts-expect-error type of onChange
-          /* @__PURE__ */ i(P, { label: "Orientation", data: KS, required: !0, sx: {
+          /* @__PURE__ */ i(F, { label: "Orientation", data: KS, required: !0, sx: {
             flex: 1
           }, ...l })
         ) }),
@@ -19313,7 +19313,7 @@ function US({
         field: l
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "X Axis", data: a, disabled: a.length === 0, sx: {
+        /* @__PURE__ */ i(F, { label: "X Axis", data: a, disabled: a.length === 0, sx: {
           flex: 1
         }, ...l })
       ) })
@@ -19327,7 +19327,7 @@ function US({
           control: e,
           render: ({
             field: l
-          }) => /* @__PURE__ */ i(P, { label: "Line Type", data: QS, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Line Type", data: QS, sx: {
             flexGrow: 1
           }, ...l })
         }
@@ -19440,7 +19440,7 @@ function ek({
           control: e,
           render: ({
             field: o
-          }) => /* @__PURE__ */ i(P, { label: "Bar Gap", data: ZS, sx: {
+          }) => /* @__PURE__ */ i(F, { label: "Bar Gap", data: ZS, sx: {
             flexGrow: 1
           }, ...o })
         }
@@ -19528,7 +19528,7 @@ function nk({
         field: a
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "X Axis", data: o, disabled: o.length === 0, sx: {
+        /* @__PURE__ */ i(F, { label: "X Axis", data: o, disabled: o.length === 0, sx: {
           flex: 1
         }, ...a })
       ) })
@@ -19536,7 +19536,7 @@ function nk({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: `series.${t}.data_key`, control: e, render: ({
         field: a
-      }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
         flex: 1
       }, ...a }) }),
       /* @__PURE__ */ i(y, { name: `series.${t}.aggregation_on_value`, control: e, render: ({
@@ -19545,7 +19545,7 @@ function nk({
     ] }),
     /* @__PURE__ */ i(v, { grow: !0, children: /* @__PURE__ */ i(y, { name: `series.${t}.group_by_key`, control: e, render: ({
       field: a
-    }) => /* @__PURE__ */ i(X, { label: "Split into multiple series by this key...", clearable: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Split into multiple series by this key...", clearable: !0, sx: {
       flex: 1
     }, ...a }) }) }),
     /* @__PURE__ */ i(ek, { index: t, control: e, seriesItem: r }),
@@ -19557,7 +19557,7 @@ function nk({
         control: e,
         render: ({
           field: a
-        }) => /* @__PURE__ */ i(P, { label: "Label Position", data: tk, ...a })
+        }) => /* @__PURE__ */ i(F, { label: "Label Position", data: tk, ...a })
       }
     ),
     /* @__PURE__ */ u(S, { spacing: 4, children: [
@@ -19650,7 +19650,7 @@ function ok({
       field: r
     }) => (
       // @ts-expect-error type of onChange
-      /* @__PURE__ */ i(P, { label: "Position", required: !0, data: ik, sx: {
+      /* @__PURE__ */ i(F, { label: "Position", required: !0, data: ik, sx: {
         flex: 1
       }, ...r })
     ) }) }),
@@ -19720,7 +19720,7 @@ function sk({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "y_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "Y Axis Data Field", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "Y Axis Data Field", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "y_axis.name", control: e, render: ({
@@ -19744,7 +19744,7 @@ function lk({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => k.defaultsDeep({}, t, Na), [t]), {
     control: a,
@@ -20524,7 +20524,7 @@ function Rk({
 }) {
   const {
     value: t
-  } = J(e.instanceData, "config"), n = z(() => Ne({}, t, Ba), [t]), r = e.data, {
+  } = Z(e.instanceData, "config"), n = z(() => Ne({}, t, Ba), [t]), r = e.data, {
     width: o,
     height: a
   } = e.viewport, {
@@ -20539,7 +20539,7 @@ function Rk({
   }, [d]), !s.data_key || !c || !d || !o || !a)
     return null;
   const f = Math.max(o, 300), m = Math.max(a, 370);
-  return /* @__PURE__ */ u(F, { sx: {
+  return /* @__PURE__ */ u(P, { sx: {
     overflow: "hidden",
     height: m,
     width: f
@@ -20561,12 +20561,12 @@ function Ok({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "deviation.data_keys.estimated_value", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "估算值字段", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "估算值字段", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "deviation.data_keys.actual_value", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "实际值字段", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "实际值字段", required: !0, sx: {
         flex: 1
       }, ...n }) })
     ] })
@@ -20585,7 +20585,7 @@ const Fk = ({
     }, ...r }) }),
     /* @__PURE__ */ i(y, { name: `metrics.${t}.data_key`, control: e, render: ({
       field: r
-    }) => /* @__PURE__ */ i(X, { label: "Value Field", required: !0, sx: {
+    }) => /* @__PURE__ */ i(J, { label: "Value Field", required: !0, sx: {
       flex: 1
     }, ...r }) })
   ] }),
@@ -20650,7 +20650,7 @@ function Vk({
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i(y, { name: "x_axis.data_key", control: e, render: ({
         field: n
-      }) => /* @__PURE__ */ i(X, { label: "数据字段", required: !0, sx: {
+      }) => /* @__PURE__ */ i(J, { label: "数据字段", required: !0, sx: {
         flex: 1
       }, ...n }) }),
       /* @__PURE__ */ i(y, { name: "x_axis.name", control: e, render: ({
@@ -20687,7 +20687,7 @@ function Nk({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), r = z(() => k.defaultsDeep({}, t, Ba), [t]), {
+  } = Z(e.instanceData, "config"), r = z(() => k.defaultsDeep({}, t, Ba), [t]), {
     control: o,
     handleSubmit: a,
     watch: s,
@@ -20874,7 +20874,7 @@ const Js = ({
 }) => {
   const {
     value: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => k.defaults({}, n, qa), [n]), a = e.data, s = z(() => Kc(a, r), [r, a]), {
     width: l,
@@ -20905,11 +20905,11 @@ const Js = ({
     });
   };
   return /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
-    /* @__PURE__ */ i(P, { label: "Postfix Type", data: Hk, value: e.type, onChange: a }),
+    /* @__PURE__ */ i(F, { label: "Postfix Type", data: Hk, value: e.type, onChange: a }),
     e.type === "text" && /* @__PURE__ */ i($, { label: "Postfix Content", value: e.value, onChange: (l) => {
       s(l.currentTarget.value);
     } }),
-    e.type === "filter-option-label" && /* @__PURE__ */ i(P, { label: "Filter", value: e.value, onChange: s, data: o })
+    e.type === "filter-option-label" && /* @__PURE__ */ i(F, { label: "Filter", value: e.value, onChange: s, data: o })
   ] });
 }));
 function Kk({
@@ -20933,7 +20933,7 @@ function Kk({
         field: a
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Metric Data", required: !0, data: o, sx: {
+        /* @__PURE__ */ i(F, { label: "Metric Data", required: !0, data: o, sx: {
           flex: 1
         }, ...a })
       ) })
@@ -20948,7 +20948,7 @@ function Kk({
         field: a
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Basis Data", required: !0, data: o, sx: {
+        /* @__PURE__ */ i(F, { label: "Basis Data", required: !0, data: o, sx: {
           flex: 1
         }, ...a })
       ) })
@@ -21065,7 +21065,7 @@ function Zk({
         field: n
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Justify Content", required: !0, data: Xk, sx: {
+        /* @__PURE__ */ i(F, { label: "Justify Content", required: !0, data: Xk, sx: {
           flex: 1
         }, ...n })
       ) }),
@@ -21073,7 +21073,7 @@ function Zk({
         field: n
       }) => (
         // @ts-expect-error type of onChange
-        /* @__PURE__ */ i(P, { label: "Align", required: !0, data: Jk, sx: {
+        /* @__PURE__ */ i(F, { label: "Align", required: !0, data: Jk, sx: {
           flex: 1
         }, ...n })
       ) })
@@ -21086,7 +21086,7 @@ function eT({
   const {
     value: t,
     set: n
-  } = J(e.instanceData, "config"), {
+  } = Z(e.instanceData, "config"), {
     variables: r
   } = e, o = z(() => $e({}, t, qa), [t]), {
     control: a,
@@ -21265,7 +21265,7 @@ const aT = {
     border: "0.0625rem solid rgb(233, 236, 239)",
     boxShadow: "rgb(0 0 0 / 5%) 0px 0.0625rem 0.1875rem, rgb(0 0 0 / 5%) 0px 1.25rem 1.5625rem -0.3125rem, rgb(0 0 0 / 4%) 0px 0.625rem 0.625rem -0.3125rem"
   }
-}, withArrow: !0, children: /* @__PURE__ */ i(F, { sx: {
+}, withArrow: !0, children: /* @__PURE__ */ i(P, { sx: {
   height: "16px",
   alignSelf: "center"
 }, children: /* @__PURE__ */ i(Dn, { size: 16, color: "gray" }) }) }), lT = D(({
@@ -21278,10 +21278,10 @@ const aT = {
   },
   value: a,
   onChange: s
-}) => /* @__PURE__ */ u(F, { children: [
+}) => /* @__PURE__ */ u(P, { children: [
   /* @__PURE__ */ i(C, { children: " " }),
   /* @__PURE__ */ i(ve, { label: /* @__PURE__ */ u(v, { noWrap: !0, position: "apart", align: "middle", spacing: 6, children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       flexGrow: 1
     }, children: e }),
     /* @__PURE__ */ i(sT, { description: n, isDescriptionEmpty: r })
@@ -21577,7 +21577,7 @@ const aT = {
     state: s,
     error: l
   } = o.getDataStuffByID(t.options_query_id), c = s === "loading";
-  return /* @__PURE__ */ i(P, { label: e, data: t.options, disabled: a ? c : !1, value: n, onChange: r, error: !!l, placeholder: l, maxDropdownHeight: 500, styles: {
+  return /* @__PURE__ */ i(F, { label: e, data: t.options, disabled: a ? c : !1, value: n, onChange: r, error: !!l, placeholder: l, maxDropdownHeight: 500, styles: {
     root: {
       width: t.width ? t.width : "200px"
     },
@@ -22859,9 +22859,9 @@ const Nd = b.compose("FilterTreeSelectConfigMeta", b.model({
     e.auto_submit = e.auto_submit_supported && t;
   }
 }));
-var Z = /* @__PURE__ */ ((e) => (e.Division = "div", e.Modal = "modal", e.Tabs = "tabs", e))(Z || {});
+var X = /* @__PURE__ */ ((e) => (e.Division = "div", e.Modal = "modal", e.Tabs = "tabs", e))(X || {});
 const qd = b.model("ViewDivisionConfig", {
-  _name: b.literal(Z.Division)
+  _name: b.literal(X.Division)
 }).views((e) => ({
   get json() {
     const {
@@ -22872,7 +22872,7 @@ const qd = b.model("ViewDivisionConfig", {
     };
   }
 })), BT = () => qd.create({
-  _name: Z.Division
+  _name: X.Division
 }), qT = b.model("CustomModalTitleModel", {
   enabled: b.optional(b.boolean, !1),
   func_content: b.optional(b.string, "")
@@ -22922,7 +22922,7 @@ const qd = b.model("ViewDivisionConfig", {
   func_content: ["function text({ filters, context}) {", "    // your code goes here", '    return "text"', "}"].join(`
 `)
 }, Wd = b.model("ViewModalConfig", {
-  _name: b.literal(Z.Modal),
+  _name: b.literal(X.Modal),
   width: b.string,
   height: b.string,
   custom_modal_title: b.optional(qT, so)
@@ -22949,7 +22949,7 @@ const qd = b.model("ViewDivisionConfig", {
     e.height = t;
   }
 })), WT = () => Wd.create({
-  _name: Z.Modal,
+  _name: X.Modal,
   width: "90vw",
   height: "90vh"
 }), jT = b.model("ViewTabsTabModel", {
@@ -22983,7 +22983,7 @@ const qd = b.model("ViewDivisionConfig", {
     e.color = t;
   }
 })), jd = b.model("ViewTabsConfig", {
-  _name: b.literal(Z.Modal),
+  _name: b.literal(X.Modal),
   tabs: b.optional(b.array(jT), []),
   variant: b.optional(b.enumeration("variant", ["default", "outline", "pills"]), "default"),
   orientation: b.optional(b.enumeration("orientation", ["horizontal", "vertical"]), "horizontal"),
@@ -23030,12 +23030,12 @@ const qd = b.model("ViewDivisionConfig", {
     e.tabs.splice(t, 1);
   }
 })), GT = () => jd.create({
-  _name: Z.Modal,
+  _name: X.Modal,
   tabs: []
 }), YT = b.model({
   id: b.identifier,
   name: b.string,
-  type: b.enumeration("EViewComponentType", [Z.Division, Z.Modal, Z.Tabs]),
+  type: b.enumeration("EViewComponentType", [X.Division, X.Modal, X.Tabs]),
   config: b.union(qd, Wd, jd),
   panelIDs: b.optional(b.array(b.string), [])
 }).views((e) => ({
@@ -23061,13 +23061,13 @@ const qd = b.model("ViewDivisionConfig", {
   setType(t) {
     if (e.type !== t) {
       switch (t) {
-        case Z.Division:
+        case X.Division:
           e.config = BT();
           break;
-        case Z.Modal:
+        case X.Modal:
           e.config = WT();
           break;
-        case Z.Tabs:
+        case X.Tabs:
           e.config = GT();
           break;
       }
@@ -23755,15 +23755,15 @@ const dD = (e) => new cD(e), uD = D(({
     zIndex: 320
   }), f = R.useCallback(() => {
     l(s);
-  }, [s, l]), m = !c && e.type !== Z.Modal;
-  return /* @__PURE__ */ i(j, { children: /* @__PURE__ */ i(F, { sx: {
+  }, [s, l]), m = !c && e.type !== X.Modal;
+  return /* @__PURE__ */ i(j, { children: /* @__PURE__ */ i(P, { sx: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     zIndex: 300
   }, children: /* @__PURE__ */ u(he, { withinPortal: !0, children: [
-    /* @__PURE__ */ i(he.Target, { children: /* @__PURE__ */ i(F, { className: "panel-dropdown-target", sx: {
+    /* @__PURE__ */ i(he.Target, { children: /* @__PURE__ */ i(P, { className: "panel-dropdown-target", sx: {
       width: "100%",
       height: "25px"
     } }) }),
@@ -24020,11 +24020,11 @@ const xD = D(function({
     loading: e.dataLoading,
     errors: e.queryErrors,
     downloadPanelScreenshot: o
-  }, children: /* @__PURE__ */ u(F, { className: "panel-root", ref: r, p: 5, pt: 0, sx: {
+  }, children: /* @__PURE__ */ u(P, { className: "panel-root", ref: r, p: 5, pt: 0, sx: {
     ...wD,
     ...t
   }, children: [
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       position: "absolute",
       left: 0,
       top: 0,
@@ -24068,15 +24068,15 @@ const TD = D(({
     inFullScreen: a
   } = R.useContext(ki), s = R.useCallback(() => {
     o(r);
-  }, [r, o]), l = !a && e.type !== Z.Modal;
-  return kD(t.viz.type) ? /* @__PURE__ */ i(F, { sx: {
+  }, [r, o]), l = !a && e.type !== X.Modal;
+  return kD(t.viz.type) ? /* @__PURE__ */ i(P, { sx: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     zIndex: 300
   }, children: /* @__PURE__ */ u(he, { withinPortal: !0, children: [
-    /* @__PURE__ */ i(he.Target, { children: /* @__PURE__ */ i(F, { className: "panel-dropdown-target", sx: {
+    /* @__PURE__ */ i(he.Target, { children: /* @__PURE__ */ i(P, { className: "panel-dropdown-target", sx: {
       width: "100%",
       height: "25px"
     } }) }),
@@ -24259,7 +24259,7 @@ const FD = D(({
     downloadScreenshot: o
   } = Ya(t);
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(F, { ref: r, sx: n, children: e }),
+    /* @__PURE__ */ i(P, { ref: r, sx: n, children: e }),
     /* @__PURE__ */ i(FD, { downloadScreenShot: o })
   ] });
 }), fu = D(({
@@ -24273,7 +24273,7 @@ const FD = D(({
     downloadScreenshot: l
   } = Ya(t);
   return /* @__PURE__ */ i(De, { size: r.width, centered: !0, opened: o, onClose: a, withCloseButton: !1, title: /* @__PURE__ */ u(v, { position: "apart", px: "1rem", h: "48px", children: [
-    /* @__PURE__ */ i(F, { children: r.custom_modal_title.value }),
+    /* @__PURE__ */ i(P, { children: r.custom_modal_title.value }),
     /* @__PURE__ */ i(fu, { downloadScreenshot: l })
   ] }), trapFocus: !0, onDragStart: (c) => {
     c.stopPropagation();
@@ -24308,40 +24308,42 @@ const FD = D(({
     }
   }, transitionProps: {
     duration: 0
-  }, children: /* @__PURE__ */ i(F, { ref: s, children: e }) });
+  }, children: /* @__PURE__ */ i(P, { ref: s, children: e }) });
 }), VD = (e) => e.color ? {
   "&[data-active], &[data-active]:hover": {
     borderColor: e.color ? e.color : "..."
   }
 } : {}, ND = D(({
-  children: e,
-  view: t
+  view: e
 }) => {
-  const n = Ke(), r = t.config;
-  return /* @__PURE__ */ u(F, { className: "render-view-tabs", children: [
-    /* @__PURE__ */ u(g, { variant: r.variant, orientation: r.orientation, defaultValue: r.tabs.length > 0 ? r.tabs[0].id : "0", styles: {
-      panel: {
-        padding: r.orientation === "horizontal" ? "16px 0px" : "0"
-      }
-    }, keepMounted: !1, children: [
-      /* @__PURE__ */ i(g.List, { grow: r.grow, children: r.tabs.map((o) => /* @__PURE__ */ i(g.Tab, { value: o.id, sx: VD(o), disabled: !o.view_id, children: o.name ?? o.id }, o.id)) }),
-      r.tabs.map((o) => {
-        const a = n.views.findByID(o.view_id);
-        return a ? /* @__PURE__ */ i(g.Panel, { value: o.id, children: /* @__PURE__ */ i(Ha, { view: a }) }, o.id) : null;
-      })
-    ] }),
-    e
+  const t = Ke(), n = e.config;
+  return /* @__PURE__ */ u(g, { className: "render-view-tabs", variant: n.variant, orientation: n.orientation, defaultValue: n.tabs.length > 0 ? n.tabs[0].id : "0", styles: {
+    root: {
+      height: "100%",
+      overflow: n.orientation === "horizontal" ? "hidden" : "auto"
+    },
+    panel: {
+      padding: n.orientation === "horizontal" ? "8px 0px 8px" : "0",
+      height: "100%",
+      overflow: "auto"
+    }
+  }, keepMounted: !1, children: [
+    /* @__PURE__ */ i(g.List, { grow: n.grow, children: n.tabs.map((r) => /* @__PURE__ */ i(g.Tab, { value: r.id, sx: VD(r), disabled: !r.view_id, children: r.name ?? r.id }, r.id)) }),
+    n.tabs.map((r) => {
+      const o = t.views.findByID(r.view_id);
+      return o ? /* @__PURE__ */ i(g.Panel, { value: r.id, children: /* @__PURE__ */ i(Ha, { view: o }) }, r.id) : null;
+    })
   ] });
 }), BD = D(({
   view: e,
   children: t
 }) => {
   switch (e.type) {
-    case Z.Modal:
+    case X.Modal:
       return /* @__PURE__ */ i(PD, { view: e, children: t });
-    case Z.Tabs:
-      return /* @__PURE__ */ i(ND, { view: e, children: t });
-    case Z.Division:
+    case X.Tabs:
+      return /* @__PURE__ */ i(ND, { view: e });
+    case X.Division:
     default:
       return /* @__PURE__ */ i(pu, { view: e, children: t });
   }
@@ -24369,13 +24371,13 @@ const WD = D(({
     ref: a,
     downloadScreenshot: s
   } = Ya(t);
-  return /* @__PURE__ */ i(F, { sx: {
+  return /* @__PURE__ */ i(P, { sx: {
     height: "100%",
     "> div:not(.mantine-Modal-root)": {
       height: "100%"
     }
   }, children: /* @__PURE__ */ i(De, { size: n.width, opened: !0, onClose: k.noop, withCloseButton: !1, title: /* @__PURE__ */ u(v, { position: "apart", px: "1rem", h: "48px", children: [
-    /* @__PURE__ */ i(F, { children: n.custom_modal_title.value }),
+    /* @__PURE__ */ i(P, { children: n.custom_modal_title.value }),
     /* @__PURE__ */ i(fu, { downloadScreenshot: s })
   ] }), trapFocus: !0, onDragStart: (l) => {
     l.stopPropagation();
@@ -24416,12 +24418,16 @@ const WD = D(({
     }
   }, withinPortal: !1, transitionProps: {
     duration: 0
-  }, children: /* @__PURE__ */ i(F, { ref: a, children: e }) }) });
+  }, children: /* @__PURE__ */ i(P, { ref: a, children: e }) }) });
 }), jD = ({
   variant: e,
   orientation: t
 }) => {
   const n = {
+    root: {
+      height: "100%",
+      overflow: "hidden"
+    },
     tab: {},
     panel: {
       padding: "16px"
@@ -24439,10 +24445,9 @@ const WD = D(({
     borderColor: e.color ? e.color : "..."
   }
 } : {}, YD = D(({
-  children: e,
-  view: t
+  view: e
 }) => {
-  const n = Ht(), r = Ce(), o = z(() => r.views.options.filter((c) => c.type === Z.Division), [t.id, r.views.options]), a = t.config, s = (c) => n.openConfirmModal({
+  const t = Ht(), n = Ce(), r = z(() => n.views.options.filter((l) => l.type === X.Division), [e.id, n.views.options]), o = e.config, a = (l) => t.openConfirmModal({
     title: "Delete this tab?",
     labels: {
       confirm: "Confirm",
@@ -24450,67 +24455,64 @@ const WD = D(({
     },
     onCancel: () => console.log("Cancel"),
     onConfirm: () => {
-      a.removeTab(c);
+      o.removeTab(l);
     },
     confirmProps: {
       color: "red"
     },
     zIndex: 320
-  }), l = a.tabs.length === 0;
-  return /* @__PURE__ */ u(F, { className: "preview-view-tabs", children: [
-    /* @__PURE__ */ u(g, { variant: a.variant, orientation: a.orientation, defaultValue: a.tabs.length > 0 ? a.tabs[0].id : "0", styles: jD(a), children: [
-      /* @__PURE__ */ u(g.List, { grow: a.grow, children: [
-        a.tabs.map((c) => /* @__PURE__ */ i(g.Tab, { value: c.id, sx: GD(c), children: c.name ?? c.id }, c.id)),
-        /* @__PURE__ */ i(g.Tab, { onClick: a.addTab, value: "add", className: "add-a-tab", children: /* @__PURE__ */ i(Qe, { size: 18, color: "#228be6" }) })
-      ] }),
-      a.tabs.map((c, d) => {
-        const p = r.views.findByID(c.view_id);
-        return /* @__PURE__ */ u(g.Panel, { value: c.id, sx: {
-          position: "relative"
+  }), s = o.tabs.length === 0;
+  return /* @__PURE__ */ u(g, { className: "preview-view-tabs", variant: o.variant, orientation: o.orientation, defaultValue: o.tabs.length > 0 ? o.tabs[0].id : "0", styles: jD(o), children: [
+    /* @__PURE__ */ u(g.List, { grow: o.grow, children: [
+      o.tabs.map((l) => /* @__PURE__ */ i(g.Tab, { value: l.id, sx: GD(l), children: l.name ?? l.id }, l.id)),
+      /* @__PURE__ */ i(g.Tab, { onClick: o.addTab, value: "add", className: "add-a-tab", children: /* @__PURE__ */ i(Qe, { size: 18, color: "#228be6" }) })
+    ] }),
+    o.tabs.map((l, c) => {
+      const d = n.views.findByID(l.view_id);
+      return /* @__PURE__ */ u(g.Panel, { value: l.id, sx: {
+        position: "relative"
+      }, children: [
+        /* @__PURE__ */ u(P, { sx: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 200
         }, children: [
-          /* @__PURE__ */ u(F, { sx: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
+          /* @__PURE__ */ i(sn, { opacity: 0.8, color: "#FFF", blur: 10, zIndex: 100 }),
+          /* @__PURE__ */ u(S, { mx: "auto", mt: 100, sx: {
+            width: "300px",
+            position: "relative",
             zIndex: 200
           }, children: [
-            /* @__PURE__ */ i(sn, { opacity: 0.8, color: "#FFF", blur: 10, zIndex: 100 }),
-            /* @__PURE__ */ u(S, { mx: "auto", mt: 100, sx: {
-              width: "300px",
-              position: "relative",
-              zIndex: 200
-            }, children: [
-              /* @__PURE__ */ i($, { label: "Tab Name", value: c.name, onChange: (h) => c.setName(h.currentTarget.value) }),
-              /* @__PURE__ */ i(P, { label: "View", value: c.view_id, onChange: c.setViewID, data: o }),
-              /* @__PURE__ */ i(Yo, { label: "Color", value: c.color, onChange: c.setColor, disabled: a.variant !== "default" }),
-              p && /* @__PURE__ */ u(M, { mt: 20, variant: "gradient", leftIcon: /* @__PURE__ */ i(jh, { size: 18 }), gradient: {
-                from: "cyan",
-                to: "indigo"
-              }, onClick: () => r.views.setIDOfVIE(p.id), children: [
-                "Swith to View: ",
-                p.name
-              ] }),
-              /* @__PURE__ */ i(M, { mt: 20, variant: "subtle", color: "red", onClick: () => s(d), disabled: l, leftIcon: /* @__PURE__ */ i(Bn, { size: 14 }), children: "Delete This Tab" })
-            ] })
-          ] }),
-          p && /* @__PURE__ */ i(Ha, { view: p })
-        ] }, c.id);
-      })
-    ] }),
-    e
+            /* @__PURE__ */ i($, { label: "Tab Name", value: l.name, onChange: (p) => l.setName(p.currentTarget.value) }),
+            /* @__PURE__ */ i(F, { label: "View", value: l.view_id, onChange: l.setViewID, data: r }),
+            /* @__PURE__ */ i(Yo, { label: "Color", value: l.color, onChange: l.setColor, disabled: o.variant !== "default" }),
+            d && /* @__PURE__ */ u(M, { mt: 20, variant: "gradient", leftIcon: /* @__PURE__ */ i(jh, { size: 18 }), gradient: {
+              from: "cyan",
+              to: "indigo"
+            }, onClick: () => n.views.setIDOfVIE(d.id), children: [
+              "Swith to View: ",
+              d.name
+            ] }),
+            /* @__PURE__ */ i(M, { mt: 20, variant: "subtle", color: "red", onClick: () => a(c), disabled: s, leftIcon: /* @__PURE__ */ i(Bn, { size: 14 }), children: "Delete This Tab" })
+          ] })
+        ] }),
+        d && /* @__PURE__ */ i(Ha, { view: d })
+      ] }, l.id);
+    })
   ] });
 }), HD = D(({
   view: e,
   children: t
 }) => {
   switch (e.type) {
-    case Z.Modal:
+    case X.Modal:
       return /* @__PURE__ */ i(WD, { view: e, children: t });
-    case Z.Tabs:
-      return /* @__PURE__ */ i(YD, { view: e, children: t });
-    case Z.Division:
+    case X.Tabs:
+      return /* @__PURE__ */ i(YD, { view: e });
+    case X.Division:
     default:
       return /* @__PURE__ */ i(qD, { view: e, children: t });
   }
@@ -24520,10 +24522,10 @@ const WD = D(({
   return /* @__PURE__ */ i(ki.Provider, { value: {
     viewPanelInFullScreen: k.noop,
     inFullScreen: !1
-  }, children: /* @__PURE__ */ i(F, { className: "dashboard-view", "data-enable-scrollbar": !0, children: /* @__PURE__ */ i(HD, { view: t, children: /* @__PURE__ */ u(F, { sx: {
+  }, children: /* @__PURE__ */ i(P, { className: "dashboard-view", "data-enable-scrollbar": !0, children: /* @__PURE__ */ i(HD, { view: t, children: /* @__PURE__ */ u(P, { sx: {
     position: "relative"
   }, children: [
-    /* @__PURE__ */ i(F, { className: "dashboard-sticky-area", sx: {
+    /* @__PURE__ */ i(P, { className: "dashboard-sticky-area", sx: {
       position: "sticky",
       top: "0px"
     }, children: /* @__PURE__ */ i(zd, { view: t }) }),
@@ -24544,14 +24546,14 @@ const WD = D(({
   return /* @__PURE__ */ i(ki.Provider, { value: {
     viewPanelInFullScreen: o,
     inFullScreen: s
-  }, children: /* @__PURE__ */ u(F, { className: "dashboard-view", "data-enable-scrollbar": !0, sx: {
-    height: t.type === Z.Modal ? "0 !important" : "100%"
+  }, children: /* @__PURE__ */ u(P, { className: "dashboard-view", "data-enable-scrollbar": !0, sx: {
+    height: t.type === X.Modal ? "0 !important" : "100%"
   }, children: [
     s && /* @__PURE__ */ i(MD, { view: t, panel: l, exitFullScreen: a }),
-    /* @__PURE__ */ i(BD, { view: t, children: /* @__PURE__ */ u(F, { sx: {
+    /* @__PURE__ */ i(BD, { view: t, children: /* @__PURE__ */ u(P, { sx: {
       position: "relative"
     }, children: [
-      !s && /* @__PURE__ */ i(F, { className: "dashboard-sticky-area", sx: {
+      !s && /* @__PURE__ */ i(P, { className: "dashboard-sticky-area", sx: {
         position: "sticky",
         top: "0px"
       }, children: /* @__PURE__ */ i(zd, { view: t }) }),
@@ -24561,17 +24563,17 @@ const WD = D(({
 });
 var KD = /* @__PURE__ */ ((e) => (e.Use = "use", e.Edit = "edit", e))(KD || {});
 const kA = {
-  [Z.Division]: "Division",
-  [Z.Tabs]: "Tabs",
-  [Z.Modal]: "Modal"
+  [X.Division]: "Division",
+  [X.Tabs]: "Tabs",
+  [X.Modal]: "Modal"
 }, UD = {
-  [Z.Division]: "rgba(255, 0, 0, 0.2)",
-  [Z.Modal]: "rgba(0, 0, 0, 0.2)",
-  [Z.Tabs]: "rgba(255, 200, 100, 0.4)"
+  [X.Division]: "rgba(255, 0, 0, 0.2)",
+  [X.Modal]: "rgba(0, 0, 0, 0.2)",
+  [X.Tabs]: "rgba(255, 200, 100, 0.4)"
 }, TA = {
-  [Z.Division]: "#ff4000",
-  [Z.Modal]: "#000",
-  [Z.Tabs]: "#ffad18"
+  [X.Division]: "#ff4000",
+  [X.Modal]: "#000",
+  [X.Tabs]: "#ffad18"
 }, DA = {
   definition: {
     sqlSnippets: [],
@@ -24581,7 +24583,7 @@ const kA = {
   views: [{
     id: "Main",
     name: "Main",
-    type: Z.Division,
+    type: X.Division,
     config: {},
     panelIDs: []
   }],
@@ -25294,8 +25296,8 @@ const lI = b.model("EditorModel", {
   },
   addARandomNewView() {
     const t = (/* @__PURE__ */ new Date()).getTime().toString();
-    this.addANewView(t, Z.Division, Z.Division, {
-      _name: Z.Division
+    this.addANewView(t, X.Division, X.Division, {
+      _name: X.Division
     }), this.setIDOfVIE(t);
   },
   removeVIE() {
@@ -25817,8 +25819,9 @@ const gI = D(() => {
   borderBottom: "1px solid #e9ecef",
   background: "rgba(233,236,239, 0.15)"
 }, vI = D(() => {
-  const e = Ce();
-  return /* @__PURE__ */ i(F, { sx: xI, pl: {
+  var n;
+  const e = Ce(), t = ((n = e.views.VIE) == null ? void 0 : n.type) === X.Tabs;
+  return /* @__PURE__ */ i(P, { sx: xI, pl: {
     base: 200,
     xs: 200,
     sm: 200,
@@ -25828,7 +25831,7 @@ const gI = D(() => {
   }, children: /* @__PURE__ */ u(v, { position: "apart", align: "center", sx: {
     height: "30px"
   }, pr: 16, children: [
-    /* @__PURE__ */ i(M, { variant: "outline", color: "blue", radius: 0, size: "xs", disabled: !e.views.VIE, onClick: () => e.addANewPanel(e.views.idOfVIE), leftIcon: /* @__PURE__ */ i(Uh, { size: 20 }), sx: {
+    /* @__PURE__ */ i(M, { variant: "outline", color: "blue", radius: 0, size: "xs", disabled: !e.views.VIE || t, onClick: () => e.addANewPanel(e.views.idOfVIE), leftIcon: /* @__PURE__ */ i(Uh, { size: 20 }), sx: {
       height: "30px",
       borderLeft: "none",
       borderTop: "none",
@@ -25836,8 +25839,8 @@ const gI = D(() => {
       borderBottom: "1px solid #e9ecef",
       background: "rgb(231, 245, 255)"
     }, children: "Add a Panel" }),
-    /* @__PURE__ */ i(F, {}),
-    /* @__PURE__ */ i(F, {})
+    /* @__PURE__ */ i(P, {}),
+    /* @__PURE__ */ i(P, {})
   ] }) });
 }), wI = D((e) => /* @__PURE__ */ u(j, { children: [
   /* @__PURE__ */ i(yI, { ...e }),
@@ -25968,15 +25971,15 @@ function II(e, t) {
   }), r;
 }
 const MI = {
-  [Z.Division]: "Div",
-  [Z.Modal]: "Modal",
-  [Z.Tabs]: "Tabs"
+  [X.Division]: "Div",
+  [X.Modal]: "Modal",
+  [X.Tabs]: "Tabs"
 }, zI = UD;
 function $I(e) {
   return e.current.map((n, r) => {
     const o = SI(n.panelIDs.length, Br, _u) + Qa + vu;
     let a = [];
-    return n.type === Z.Tabs && (a = n.config.tabs.map((l) => l.view_id)), {
+    return n.type === X.Tabs && (a = n.config.tabs.map((l) => l.view_id)), {
       id: n.id,
       _node_type: "view-root",
       _view_type: n.type,
@@ -26004,7 +26007,7 @@ function $I(e) {
 function LI(e) {
   const t = k.keyBy(e, (n) => n.id);
   e.forEach((n) => {
-    n._node_type !== "view-root" || n._view_type !== Z.Tabs || n._tab_view_ids.forEach((r) => {
+    n._node_type !== "view-root" || n._view_type !== X.Tabs || n._tab_view_ids.forEach((r) => {
       t[r].parentNode = n.id;
     });
   });
@@ -26021,7 +26024,7 @@ function EI({
   edges: n
 }) {
   t.forEach((r) => {
-    r._node_type !== "view-root" || r._view_type !== Z.Tabs || (r.sourcePosition = kt.Bottom, r.style.width = Ka + Zr * 2, r.style.height = vu + r._tab_view_ids.reduce((o, a) => {
+    r._node_type !== "view-root" || r._view_type !== X.Tabs || (r.sourcePosition = kt.Bottom, r.style.width = Ka + Zr * 2, r.style.height = vu + r._tab_view_ids.reduce((o, a) => {
       const s = e[a];
       s.position.y = o, s.position.x = Zr;
       const l = s.style.height;
@@ -26160,7 +26163,7 @@ const BI = Zu(({
   const a = z(() => NI(e.interactions), [e.interactions]);
   return /* @__PURE__ */ u(j, { children: [
     /* @__PURE__ */ i(_s, { type: "target", position: r, isConnectable: t }),
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       position: "absolute",
       top: 0,
       right: 0
@@ -26237,7 +26240,7 @@ function YI({
   active: n,
   openSettings: r
 }) {
-  return /* @__PURE__ */ u(F, { sx: {
+  return /* @__PURE__ */ u(P, { sx: {
     position: "relative"
   }, children: [
     /* @__PURE__ */ i(lh, { sx: (o) => ({
@@ -26269,7 +26272,7 @@ const HI = D(() => {
   const e = Oe(), t = Ce(), n = ot((o) => () => t.views.setIDOfVIE(o), [t]), r = (o) => {
     e.editor.open(["_VIEWS_", o]);
   };
-  return /* @__PURE__ */ u(F, { sx: {
+  return /* @__PURE__ */ u(P, { sx: {
     position: "relative"
   }, children: [
     t.views.options.map((o) => /* @__PURE__ */ i(YI, { active: t.views.idOfVIE === o.value, name: o.label, onClick: n(o.value), openSettings: () => r(o.value) }, o.value)),
@@ -26375,7 +26378,7 @@ const HI = D(() => {
       /* @__PURE__ */ i(ve, { checked: t.clearable, onChange: (n) => t.setClearable(n.currentTarget.checked), disabled: t.max_days > 0, label: "Clearable" }),
       /* @__PURE__ */ i(ve, { checked: t.allowSingleDateInRange, onChange: (n) => t.setAllowSingleDateInRange(n.currentTarget.checked), label: "Allow choosing 1 day" })
     ] }),
-    /* @__PURE__ */ i(P, { data: UI, label: "Display Format", value: t.inputFormat, onChange: t.setInputFormat }),
+    /* @__PURE__ */ i(F, { data: UI, label: "Display Format", value: t.inputFormat, onChange: t.setInputFormat }),
     /* @__PURE__ */ i(
       Dd,
       {
@@ -26399,7 +26402,7 @@ const HI = D(() => {
   onChange: t
 }) => {
   const n = Ce(), r = R.useMemo(() => n.queries.options, [n.queries.current]), o = r.length === 0;
-  return /* @__PURE__ */ i(P, { label: "Pick a query", data: r, value: e, onChange: t, allowDeselect: !1, clearable: !0, sx: {
+  return /* @__PURE__ */ i(F, { label: "Pick a query", data: r, value: e, onChange: t, allowDeselect: !1, clearable: !0, sx: {
     flexGrow: 1
   }, disabled: o, error: o ? "You need to add a query in Data Settings" : void 0 });
 }), JI = `
@@ -26512,7 +26515,7 @@ const HI = D(() => {
           width: "100%"
         }, children: /* @__PURE__ */ i(C, { color: "white", size: 16, children: "Using query" }) })
       ] }),
-      r.length > 0 && /* @__PURE__ */ i(P, { label: "Default Selection", data: o, value: t.default_value, onChange: t.setDefaultValue }),
+      r.length > 0 && /* @__PURE__ */ i(F, { label: "Default Selection", data: o, value: t.default_value, onChange: t.setDefaultValue }),
       r.map((a, s) => /* @__PURE__ */ u(jn, { gap: 10, sx: {
         position: "relative"
       }, pr: "40px", children: [
@@ -26580,7 +26583,7 @@ const HI = D(() => {
   const [n, r] = R.useState(t.plainDefaultValue);
   return R.useEffect(() => {
     r(t.plainDefaultValue);
-  }, [t]), /* @__PURE__ */ u(F, { sx: {
+  }, [t]), /* @__PURE__ */ u(P, { sx: {
     maxWidth: "480px"
   }, children: [
     /* @__PURE__ */ i(C, { pb: "md", color: "gray", children: "Preview" }),
@@ -26618,7 +26621,7 @@ const HI = D(() => {
 }) {
   const n = Ce(), r = R.useMemo(() => aM[t.type], [t.type]);
   return /* @__PURE__ */ u(v, { grow: !0, spacing: 20, align: "top", children: [
-    /* @__PURE__ */ u(F, { sx: {
+    /* @__PURE__ */ u(P, { sx: {
       maxWidth: "600px"
     }, children: [
       /* @__PURE__ */ i(C, { pb: "md", color: "gray", children: "Edit" }),
@@ -26646,7 +26649,7 @@ const HI = D(() => {
         /* @__PURE__ */ i($, { label: "Label", placeholder: "Label for this field", required: !0, value: t.label, onChange: (o) => {
           t.setLabel(o.currentTarget.value);
         } }),
-        /* @__PURE__ */ i(P, { label: "Widget", data: sM, required: !0, value: t.type, onChange: t.setType }),
+        /* @__PURE__ */ i(F, { label: "Widget", data: sM, required: !0, value: t.type, onChange: t.setType }),
         /* @__PURE__ */ i(r, { config: t.config })
       ] })
     ] }),
@@ -26689,7 +26692,7 @@ const HI = D(() => {
         zIndex: 320
       });
     }, children: "Delete this filter" }) }),
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       flexGrow: 1,
       maxHeight: "calc(100% - 52px)",
       overflow: "auto"
@@ -26846,7 +26849,7 @@ function Su({
     columnResizeMode: "onChange",
     getCoreRowModel: ec()
   });
-  return e.length === 0 ? /* @__PURE__ */ i(F, { sx: {
+  return e.length === 0 ? /* @__PURE__ */ i(P, { sx: {
     height: "5em"
   } }) : /* @__PURE__ */ i(ct, { children: /* @__PURE__ */ u(Ft, { sx: mM, children: [
     /* @__PURE__ */ i("thead", { children: n.getHeaderGroups().map((r) => /* @__PURE__ */ i("tr", { children: r.headers.map((o) => /* @__PURE__ */ u("th", { style: {
@@ -26900,7 +26903,7 @@ const gM = ({
         /* @__PURE__ */ i(Q, { variant: "subtle", color: "blue", disabled: s || p, onClick: c, children: /* @__PURE__ */ i(Jo, { size: 16 }) })
       ] })
     ] }),
-    /* @__PURE__ */ u(F, { sx: {
+    /* @__PURE__ */ u(P, { sx: {
       position: "relative",
       overflow: "auto"
     }, children: [
@@ -26930,7 +26933,7 @@ const gM = ({
   const {
     panel: e
   } = zn();
-  return /* @__PURE__ */ i(ct, { children: /* @__PURE__ */ i(F, { sx: {
+  return /* @__PURE__ */ i(ct, { children: /* @__PURE__ */ i(P, { sx: {
     height: "100%",
     flexGrow: 0,
     flexShrink: 0,
@@ -27054,10 +27057,10 @@ const ku = Wn((e) => ({
     const d = k.cloneDeep(t);
     k.set(d, l, c), n(d);
   };
-  return /* @__PURE__ */ u(F, { px: "sm", py: "md", ref: a, children: [
+  return /* @__PURE__ */ u(P, { px: "sm", py: "md", ref: a, children: [
     /* @__PURE__ */ u(v, { grow: !0, noWrap: !0, children: [
       /* @__PURE__ */ i($, { label: "Name", required: !0, value: t.name, onChange: (l) => s("name", l.currentTarget.value) }),
-      /* @__PURE__ */ i(X, { label: "Data Field", required: !0, value: t.data_field, onChange: (l) => s("data_field", l) })
+      /* @__PURE__ */ i(J, { label: "Data Field", required: !0, value: t.data_field, onChange: (l) => s("data_field", l) })
     ] }),
     /* @__PURE__ */ i(mi, { label: "Aggregation", value: t.aggregation, onChange: (l) => s("aggregation", l) }),
     t.aggregation.type !== "custom" && /* @__PURE__ */ u(j, { children: [
@@ -27101,7 +27104,7 @@ const ku = Wn((e) => ({
   } = ku();
   return /* @__PURE__ */ u(v, { className: t.root, noWrap: !0, align: "start", children: [
     /* @__PURE__ */ i(jo, { withBorder: !0, p: "md", className: "var-list-container", children: /* @__PURE__ */ u(S, { justify: "space-between", children: [
-      /* @__PURE__ */ i(F, { className: "var-list-actions", children: /* @__PURE__ */ i(M, { variant: "light", size: "sm", onClick: e.addNew, fullWidth: !0, children: "Add Variable" }) }),
+      /* @__PURE__ */ i(P, { className: "var-list-actions", children: /* @__PURE__ */ i(M, { variant: "light", size: "sm", onClick: e.addNew, fullWidth: !0, children: "Add Variable" }) }),
       /* @__PURE__ */ i(CM, { uiModel: e })
     ] }) }),
     e.selected ? /* @__PURE__ */ i(j, { children: /* @__PURE__ */ i(DM, { uiModel: e, variable: e.selected }) }) : /* @__PURE__ */ i("span", { children: "Select or create a new variable on right side" })
@@ -27129,7 +27132,7 @@ const $M = D(({
     r(e);
   }, [e]);
   const o = zM();
-  return /* @__PURE__ */ i(P, { label: "Visualization", value: n, searchable: !0, onChange: r, data: o, rightSection: /* @__PURE__ */ i(Q, { disabled: !(e !== n), onClick: () => t(n), children: /* @__PURE__ */ i(we, { size: 20 }) }), maxDropdownHeight: 600 });
+  return /* @__PURE__ */ i(F, { label: "Visualization", value: n, searchable: !0, onChange: r, data: o, rightSection: /* @__PURE__ */ i(Q, { disabled: !(e !== n), onClick: () => t(n), children: /* @__PURE__ */ i(we, { size: 20 }) }), maxDropdownHeight: 600 });
 }), rl = [];
 function LM(e, t) {
   try {
@@ -27266,7 +27269,7 @@ const EM = D(() => {
   width: "100%",
   height: "100%"
 }, children: [
-  /* @__PURE__ */ i(F, { sx: {
+  /* @__PURE__ */ i(P, { sx: {
     maxWidth: "calc(100% - 610px - 10px)",
     height: "100%",
     overflow: "auto"
@@ -27593,7 +27596,7 @@ const KM = D(({
   const {
     tables: t
   } = e;
-  return t.loading ? /* @__PURE__ */ i(Tu, { height: "24px", lastWidth: "50%", count: 15 }) : /* @__PURE__ */ i(F, { h: "100%", sx: {
+  return t.loading ? /* @__PURE__ */ i(Tu, { height: "24px", lastWidth: "50%", count: 15 }) : /* @__PURE__ */ i(P, { h: "100%", sx: {
     overflow: "auto",
     ".mantine-NavLink-label": {
       fontFamily: "monospace"
@@ -27603,7 +27606,7 @@ const KM = D(({
   }, active: e.table_name === o.table_name }, o.table_name)) }, n)) });
 }), UM = ({
   visible: e
-}) => /* @__PURE__ */ i(F, { py: 10, sx: {
+}) => /* @__PURE__ */ i(P, { py: 10, sx: {
   width: "100%",
   height: "100%",
   overflow: "hidden",
@@ -27644,7 +27647,7 @@ const KM = D(({
         }
       } }),
       /* @__PURE__ */ i(
-        P,
+        F,
         {
           icon: /* @__PURE__ */ i(C, { ta: "center", color: "dimmed", size: 14, children: "Limit" }),
           size: "xs",
@@ -27671,7 +27674,7 @@ const KM = D(({
     fontFamily: "monospace"
   }, children: t.error }) : t.page === 1 && t.loading ? /* @__PURE__ */ i(UM, { visible: !0 }) : /* @__PURE__ */ u(ct, { children: [
     /* @__PURE__ */ i(ZM, { dataSource: e }),
-    /* @__PURE__ */ u(F, { py: 10, sx: {
+    /* @__PURE__ */ u(P, { py: 10, sx: {
       width: "100%",
       height: "calc(100% - 42px)",
       overflow: "auto",
@@ -27702,7 +27705,7 @@ const KM = D(({
 }, children: e.tables.error }) : /* @__PURE__ */ u(jn, { sx: {
   height: "100%"
 }, children: [
-  /* @__PURE__ */ i(F, { w: 300, sx: {
+  /* @__PURE__ */ i(P, { w: 300, sx: {
     flexGrow: 0,
     flexShrink: 0,
     position: "relative"
@@ -27756,7 +27759,7 @@ const KM = D(({
           to: "red"
         }, children: e.type })
       ] })
-    ] }), zIndex: 320, size: "96vw", styles: rz, children: /* @__PURE__ */ i(F, { sx: {
+    ] }), zIndex: 320, size: "96vw", styles: rz, children: /* @__PURE__ */ i(P, { sx: {
       height: "calc(100vh - 220px)"
     }, children: /* @__PURE__ */ i(nz, { dataSource: e }) }) }),
     /* @__PURE__ */ i(M, { variant: "subtle", onClick: () => r(!0), px: 16, styles: {
@@ -27791,8 +27794,8 @@ const KM = D(({
       type: s[d]
     });
   }, c = z(() => n.datasources.find(e), [n, e]);
-  return /* @__PURE__ */ i(P, { data: a, label: /* @__PURE__ */ u(v, { position: "apart", children: [
-    /* @__PURE__ */ i(F, { children: "Data Source" }),
+  return /* @__PURE__ */ i(F, { data: a, label: /* @__PURE__ */ u(v, { position: "apart", children: [
+    /* @__PURE__ */ i(P, { children: "Data Source" }),
     c && /* @__PURE__ */ i(Du, { dataSource: c, triggerButtonProps: {
       compact: !0,
       size: "xs",
@@ -27994,8 +27997,8 @@ WHERE
       /* @__PURE__ */ i("td", { children: k.capitalize(a.type) }),
       /* @__PURE__ */ i("td", { children: /* @__PURE__ */ i(Ui, { component: "button", type: "button", onClick: () => r(a), children: a.label }) }),
       /* @__PURE__ */ i("td", { children: /* @__PURE__ */ u(S, { align: "flex-start", justify: "flex-start", spacing: 2, children: [
-        a.views.map((s) => /* @__PURE__ */ i(Ui, { component: "button", type: "button", onClick: () => o(s.id), children: /* @__PURE__ */ i(F, { children: s.label }) })),
-        a.views.length === 0 && /* @__PURE__ */ i(F, { children: "--" })
+        a.views.map((s) => /* @__PURE__ */ i(Ui, { component: "button", type: "button", onClick: () => o(s.id), children: /* @__PURE__ */ i(P, { children: s.label }) })),
+        a.views.length === 0 && /* @__PURE__ */ i(P, { children: "--" })
       ] }) })
     ] }, a.id)) })
   ] }) });
@@ -28251,7 +28254,7 @@ WHERE
   } });
 }), wz = D(({
   view: e
-}) => !e || e.type !== Z.Division ? null : /* @__PURE__ */ u(S, { children: [
+}) => !e || e.type !== X.Division ? null : /* @__PURE__ */ u(S, { children: [
   /* @__PURE__ */ i(E, { mt: 8, mb: 0, label: "Division settings", labelPosition: "center" }),
   /* @__PURE__ */ i(C, { align: "center", size: "xs", color: "dimmed", children: "Under construction" })
 ] })), _z = [{
@@ -28272,20 +28275,20 @@ WHERE
 }], Sz = D(({
   view: e
 }) => {
-  if (!e || e.type !== Z.Tabs)
+  if (!e || e.type !== X.Tabs)
     return null;
   const t = e.config;
   return /* @__PURE__ */ u(S, { children: [
     /* @__PURE__ */ i(E, { mt: 8, mb: 0, label: "Tabs settings", labelPosition: "center" }),
-    /* @__PURE__ */ i(P, { label: "Variant", value: t.variant, onChange: t.setVariant, data: _z }),
-    /* @__PURE__ */ i(P, { label: "Orientation", value: t.orientation, onChange: t.setOrientation, data: Cz }),
+    /* @__PURE__ */ i(F, { label: "Variant", value: t.variant, onChange: t.setVariant, data: _z }),
+    /* @__PURE__ */ i(F, { label: "Orientation", value: t.orientation, onChange: t.setOrientation, data: Cz }),
     /* @__PURE__ */ i(Je, { label: "Grow Tabs", checked: t.grow, onChange: (n) => t.setGrow(n.currentTarget.checked) })
   ] });
 }), kz = ({
   disabled: e,
   value: t,
   onChange: n
-}) => /* @__PURE__ */ u(F, { sx: {
+}) => /* @__PURE__ */ u(P, { sx: {
   position: "relative"
 }, children: [
   e && /* @__PURE__ */ i(sn, { opacity: 0.6, color: "#fff", zIndex: 5, blur: 2 }),
@@ -28348,7 +28351,7 @@ WHERE
 }, Dz = D(({
   view: e
 }) => {
-  if (!e || e.type !== Z.Modal)
+  if (!e || e.type !== X.Modal)
     return null;
   const t = e.config, n = t.custom_modal_title.value;
   return /* @__PURE__ */ u(S, { children: [
@@ -28372,13 +28375,13 @@ WHERE
   /* @__PURE__ */ i(Sz, { view: e })
 ] })), Mz = [{
   label: "Division",
-  value: Z.Division
+  value: X.Division
 }, {
   label: "Modal",
-  value: Z.Modal
+  value: X.Modal
 }, {
   label: "Tabs",
-  value: Z.Tabs
+  value: X.Tabs
 }], zz = D(({
   view: e
 }) => e ? /* @__PURE__ */ u(S, { sx: {
@@ -28387,7 +28390,7 @@ WHERE
   /* @__PURE__ */ i($, { label: "Name", value: e.name, onChange: (t) => {
     e.setName(t.currentTarget.value);
   } }),
-  /* @__PURE__ */ i(P, { label: "Type", withinPortal: !0, zIndex: 320, value: e.type, onChange: e.setType, data: Mz }),
+  /* @__PURE__ */ i(F, { label: "Type", withinPortal: !0, zIndex: 320, value: e.type, onChange: e.setType, data: Mz }),
   /* @__PURE__ */ i(Iz, { view: e })
 ] }) : null), $z = D(({
   id: e
@@ -28423,7 +28426,7 @@ WHERE
         zIndex: 320
       });
     }, children: "Delete this view" }) }),
-    /* @__PURE__ */ i(F, { sx: {
+    /* @__PURE__ */ i(P, { sx: {
       flexGrow: 1,
       maxHeight: "calc(100% - 52px)",
       overflow: "auto"
@@ -28455,7 +28458,7 @@ const Vz = D(() => /* @__PURE__ */ i(S, { sx: {
   height: "100%"
 }, p: "sm", children: /* @__PURE__ */ i(Iu, {}) })), Nz = D(() => {
   const e = Oe().editor, t = e.path;
-  return Lz(t) ? /* @__PURE__ */ i(Vz, {}) : Az(t) ? /* @__PURE__ */ i(dM, {}) : Ez(t) ? /* @__PURE__ */ i(F, { p: "xs", pl: 20, children: /* @__PURE__ */ i(cM, { id: t[1] }) }) : Rz(t) ? /* @__PURE__ */ i(vz, { id: t[1] }) : Oz(t) ? /* @__PURE__ */ i(bz, { id: t[1] }) : Fz(t) ? /* @__PURE__ */ i(F, { p: "xs", pl: 20, children: /* @__PURE__ */ i($z, { id: t[1] }) }) : Pz(t) ? /* @__PURE__ */ i(VM, { viewID: t[1], panelID: t[3] }) : /* @__PURE__ */ i(F, { children: e.path });
+  return Lz(t) ? /* @__PURE__ */ i(Vz, {}) : Az(t) ? /* @__PURE__ */ i(dM, {}) : Ez(t) ? /* @__PURE__ */ i(P, { p: "xs", pl: 20, children: /* @__PURE__ */ i(cM, { id: t[1] }) }) : Rz(t) ? /* @__PURE__ */ i(vz, { id: t[1] }) : Oz(t) ? /* @__PURE__ */ i(bz, { id: t[1] }) : Fz(t) ? /* @__PURE__ */ i(P, { p: "xs", pl: 20, children: /* @__PURE__ */ i($z, { id: t[1] }) }) : Pz(t) ? /* @__PURE__ */ i(VM, { viewID: t[1], panelID: t[3] }) : /* @__PURE__ */ i(P, { children: e.path });
 }), Bz = D(() => /* @__PURE__ */ i(Nz, {})), qz = D(() => {
   const e = Oe();
   return /* @__PURE__ */ i(M, { variant: "subtle", leftIcon: /* @__PURE__ */ i(Pt, { size: 14 }), size: "sm", px: "xs", mb: 10, color: "blue", onClick: () => {
@@ -28485,14 +28488,14 @@ const Vz = D(() => /* @__PURE__ */ i(S, { sx: {
   if (!e)
     return null;
   const n = t.views.findByID(e);
-  return n ? /* @__PURE__ */ i(M, { variant: "subtle", leftIcon: /* @__PURE__ */ i(Pt, { size: 14 }), size: "sm", px: "xs", mb: 10, color: "blue", onClick: () => t.addANewPanel(n.id), sx: {
+  return !n || n.type === X.Tabs ? null : /* @__PURE__ */ i(M, { variant: "subtle", leftIcon: /* @__PURE__ */ i(Pt, { size: 14 }), size: "sm", px: "xs", mb: 10, color: "blue", onClick: () => t.addANewPanel(n.id), sx: {
     width: "100%",
     borderRadius: 0
   }, styles: {
     inner: {
       justifyContent: "flex-start"
     }
-  }, children: "Add a Panel" }) : null;
+  }, children: "Add a Panel" });
 }), jz = D(() => {
   const e = Oe();
   return /* @__PURE__ */ i(M, { variant: "subtle", leftIcon: /* @__PURE__ */ i(Pt, { size: 14 }), size: "sm", px: "xs", mb: 10, color: "blue", onClick: () => {
@@ -28551,7 +28554,7 @@ const Vz = D(() => /* @__PURE__ */ i(S, { sx: {
   }, [s]), /* @__PURE__ */ i(Xi, { active: r, defaultOpened: s, opened: l, onChange: c, label: e.label, onClick: () => a(e), icon: e.Icon ? /* @__PURE__ */ i(e.Icon, { size: 18 }) : null, children: (d = e.children) == null ? void 0 : d.map((p) => p._type === "ACTION" ? /* @__PURE__ */ i(Hz, { action_type: p._action_type, parentID: p.parentID }, `_ADD_${p.value}_`) : /* @__PURE__ */ i(Mu, { option: p }, p.value)) }, e.label);
 }), Qz = D(() => {
   const e = Oe();
-  return /* @__PURE__ */ i(F, { sx: {
+  return /* @__PURE__ */ i(P, { sx: {
     position: "relative"
   }, children: e.editor.navOptions.map((t) => /* @__PURE__ */ i(Mu, { option: t }, t.value)) });
 }), Kz = D(() => {
@@ -28673,7 +28676,7 @@ const e$ = {
   return /* @__PURE__ */ i(fl, { children: /* @__PURE__ */ i(hc, { value: h, children: /* @__PURE__ */ i(gc, { value: h.content, children: /* @__PURE__ */ i(la.Provider, { value: {
     inEditMode: !0
   }, children: /* @__PURE__ */ i(Nt.Provider, { value: m, children: /* @__PURE__ */ u(Si, { configure: w, children: [
-    /* @__PURE__ */ i(pl, { padding: 0, header: /* @__PURE__ */ i(wI, { saveDashboardChanges: f, headerSlot: l }), navbar: /* @__PURE__ */ i(QI, {}), styles: e$, children: /* @__PURE__ */ i(F, { className: `${o} dashboard-root`, sx: {
+    /* @__PURE__ */ i(pl, { padding: 0, header: /* @__PURE__ */ i(wI, { saveDashboardChanges: f, headerSlot: l }), navbar: /* @__PURE__ */ i(QI, {}), styles: e$, children: /* @__PURE__ */ i(P, { className: `${o} dashboard-root`, sx: {
       position: "relative"
     }, children: h.content.views.visibleViews.map((x) => /* @__PURE__ */ i(QD, { view: x }, x.id)) }) }),
     /* @__PURE__ */ i(Xz, {})
@@ -28865,7 +28868,7 @@ const zA = D(({
     setFullScreenPanelID: s
   }, children: /* @__PURE__ */ i(la.Provider, { value: {
     inEditMode: !1
-  }, children: /* @__PURE__ */ i(F, { className: `${r} dashboard-root`, children: /* @__PURE__ */ i(Nt.Provider, { value: p, children: /* @__PURE__ */ i(Si, { configure: h, children: d.content.views.visibleViews.map((f) => /* @__PURE__ */ i(Ha, { view: f }, f.id)) }) }) }) }) }) }) }) });
+  }, children: /* @__PURE__ */ i(P, { className: `${r} dashboard-root`, children: /* @__PURE__ */ i(Nt.Provider, { value: p, children: /* @__PURE__ */ i(Si, { configure: h, children: d.content.views.visibleViews.map((f) => /* @__PURE__ */ i(Ha, { view: f }, f.id)) }) }) }) }) }) }) }) });
 });
 var co = {}, o$ = {
   get exports() {