@blocklet/pages-kit-inner-components 0.0.18 → 0.1.0

package/lib/es/setting.js

@@ -1,72 +1,75 @@
-import { jsx as e, jsxs as I, Fragment as $ } from "react/jsx-runtime";
-import { g as Z, i as Re, b as ze, h as re, E as qe, n as Qe, j as ce } from "../state-CETtldI3.mjs";
-import { TextField as V, Stack as R, FormControlLabel as Ve, Switch as Pe, Box as S, InputAdornment as de, Dialog as ae, DialogTitle as Oe, DialogContent as je, DialogActions as Ce, Button as N, alpha as Xe, Tooltip as ne, buttonClasses as Ze, Typography as Q, Autocomplete as Ae, MenuItem as T, FormLabel as Le, Popper as Te, Paper as Be, Table as et, TableHead as tt, TableRow as Se, TableCell as ke, TableBody as rt } from "@mui/material";
-import { forwardRef as We, useState as Ne, useEffect as L, useImperativeHandle as Ee, lazy as it, useCallback as ee, Suspense as lt, useRef as M, useId as nt } from "react";
-import ot from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as W } from "@arcblock/ux/lib/Locale/context";
-import { styled as st } from "@arcblock/ux/lib/Theme";
-import { cx as ct } from "@emotion/css";
-import { useReactive as dt, useBoolean as at, useUpdate as ut } from "ahooks";
-import De from "gradient-parser";
+import { jsx as e, jsxs as k, Fragment as N } from "react/jsx-runtime";
+import { g as ee, i as Re, b as Oe, h as re, E as Qe, n as Xe, j as ce } from "../state-BfVA6vd8.mjs";
+import { TextField as D, Stack as S, FormControlLabel as ze, Switch as je, Box as w, InputAdornment as de, Dialog as ae, DialogTitle as Ae, DialogContent as Te, DialogActions as Be, Button as j, alpha as Ze, Tooltip as ne, buttonClasses as Le, Typography as E, Autocomplete as Ne, MenuItem as R, FormLabel as et, Popper as We, Paper as Ee, Table as tt, TableHead as rt, TableRow as Se, TableCell as Ce, TableBody as it } from "@mui/material";
+import { forwardRef as Ve, useState as ue, useEffect as Q, useImperativeHandle as _e, lazy as lt, useCallback as te, Suspense as nt, useRef as X, useId as ot } from "react";
+import st from "@arcblock/ux/lib/Empty";
+import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
+import { styled as ct } from "@arcblock/ux/lib/Theme";
+import { cx as dt } from "@emotion/css";
+import { useReactive as at, useBoolean as ut, useUpdate as pt } from "ahooks";
+import Pe from "gradient-parser";
 import "lodash/without";
-import pt from "tinycolor2";
-import { red as mt, pink as ht, purple as ft, indigo as bt, blue as gt, cyan as vt, teal as xt, green as yt, lime as It, yellow as wt, amber as St, orange as kt, brown as Dt, grey as Rt, blueGrey as zt } from "@mui/material/colors";
-import { getImageSize as oe, getVideoSize as se, UploaderButton as ue, UploaderProvider as He } from "./uploader.js";
-import { Icon as Vt } from "@iconify-icon/react";
-import { useDebounce as Pt, useUpdate as Ot } from "react-use";
-import { CodeEditor as _e } from "@blocklet/code-editor";
-import { CustomComponentRenderer as Fe } from "@blocklet/pages-kit/components";
-import { ClickAwayListener as Ue, unstable_useNumberInput as jt } from "@mui/base";
-import { DeleteOutlineRounded as Ct, DragIndicatorRounded as At, AddRounded as Tt, TranslateRounded as Ke, InfoRounded as Bt, SettingsRounded as $e, StarRounded as Wt } from "@mui/icons-material";
-import { getYjsValue as J } from "@syncedstore/core";
-import { sortBy as X, omit as Nt, isNil as te } from "lodash";
-import { usePopupState as ie, bindTrigger as le, bindDialog as Je, bindPopper as Ye } from "material-ui-popup-state/hooks";
-import { ErrorBoundary as Et } from "react-error-boundary";
-import Ht from "lodash/sortBy";
-import { useDrop as Ge, useDrag as _t } from "react-dnd";
-mt[300], ht[300], ft[300], // deepPurple['300'],
-bt[300], gt[300], // lightBlue['300'],
-vt[300], xt[300], yt[300], // lightGreen['300'],
-It[300], wt[300], St[300], kt[300], // deepOrange['300'],
-Dt[300], Rt[300], zt[300];
-const Ft = We(function({ showMarkdown: r, markdown: l, onMarkdownChange: i, showUploader: s, value: a, meta: d, onChange: c, ...b }, v) {
-  const [u, g] = Ne("");
-  L(() => {
-    g(a || "");
-  }, [a, g]);
-  const h = async () => {
-    if (u !== a) {
-      const n = Z(u);
-      if (!n) {
-        c(u, void 0);
+import mt from "tinycolor2";
+import { red as ht, pink as ft, purple as bt, indigo as vt, blue as yt, cyan as gt, teal as xt, green as It, lime as kt, yellow as wt, amber as St, orange as Ct, brown as Pt, grey as Dt, blueGrey as Rt } from "@mui/material/colors";
+import { getImageSize as oe, getVideoSize as se, UploaderButton as pe, UploaderProvider as Ke } from "./uploader.js";
+import { Icon as Ot } from "@iconify-icon/react";
+import { useDebounce as zt, useUpdate as jt } from "react-use";
+import { sortBy as V, omit as At, isNil as Z, isEmpty as Tt } from "lodash";
+import Bt from "@arcblock/ux/lib/Toast";
+import { CodeEditor as Fe } from "@blocklet/code-editor";
+import { CustomComponentRenderer as He, transpileAndLoadScript as Nt, getPropertiesFromCode as Wt } from "@blocklet/pages-kit/components";
+import { ClickAwayListener as Ue, unstable_useNumberInput as Et } from "@mui/base";
+import { DeleteOutlineRounded as Vt, DragIndicatorRounded as _t, AddRounded as Kt, TranslateRounded as Je, InfoRounded as Ft, SettingsRounded as Ye, StarRounded as Ht } from "@mui/icons-material";
+import { getYjsValue as _ } from "@syncedstore/core";
+import Ut from "lodash/has";
+import Jt from "lodash/keyBy";
+import { usePopupState as ie, bindTrigger as le, bindDialog as $e, bindPopper as Ge } from "material-ui-popup-state/hooks";
+import { ErrorBoundary as Yt } from "react-error-boundary";
+import $t from "lodash/sortBy";
+import { useDrop as qe, useDrag as Gt } from "react-dnd";
+ht[300], ft[300], bt[300], // deepPurple['300'],
+vt[300], yt[300], // lightBlue['300'],
+gt[300], xt[300], It[300], // lightGreen['300'],
+kt[300], wt[300], St[300], Ct[300], // deepOrange['300'],
+Pt[300], Dt[300], Rt[300];
+const qt = Ve(function({ showMarkdown: i, markdown: n, onMarkdownChange: r, showUploader: a, value: b, meta: p, onChange: u, ...v }, c) {
+  const [h, m] = ue("");
+  Q(() => {
+    m(b || "");
+  }, [b, m]);
+  const f = async () => {
+    if (h !== b) {
+      const l = ee(h);
+      if (!l) {
+        u(h, void 0);
         return;
       }
-      const o = await oe(n).catch(() => se(n)).catch(() => {
+      const o = await oe(l).catch(() => se(l)).catch(() => {
       });
-      c(u, { ...o, filename: u });
+      u(h, { ...o, filename: h });
     }
   };
-  Pt(
+  zt(
     () => {
-      u !== a && c(u);
+      h !== b && u(h);
     },
     300,
-    [u]
-  ), Ee(v, () => ({
-    submit: h
+    [h]
+  ), _e(c, () => ({
+    submit: f
   }));
-  const m = {};
-  return s && (m.InputProps = {
+  const s = {};
+  return a && (s.InputProps = {
     sx: { pr: 0 },
     endAdornment: /* @__PURE__ */ e(de, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ e(
-      ue,
+      pe,
       {
-        onChange: async ({ response: n }) => {
+        onChange: async ({ response: l }) => {
           var y;
-          const o = (y = n == null ? void 0 : n.data) == null ? void 0 : y.filename, f = Z(o) || "";
+          const o = (y = l == null ? void 0 : l.data) == null ? void 0 : y.filename, d = ee(o) || "";
           let x = {};
-          f && (x = await oe(f).catch(() => se(f)).catch(() => {
-          })), c(o, {
+          d && (x = await oe(d).catch(() => se(d)).catch(() => {
+          })), u(o, {
             ...x,
             filename: o
           });
@@ -74,71 +77,71 @@ const Ft = We(function({ showMarkdown: r, markdown: l, onMarkdownChange: i, show
       }
     ) })
   }), /* @__PURE__ */ e(
-    V,
+    D,
     {
       size: "small",
       fullWidth: !0,
-      ...b,
-      label: /* @__PURE__ */ I(R, { direction: "row", spacing: 1, alignItems: "center", children: [
-        b.label,
-        r && /* @__PURE__ */ I($, { children: [
+      ...v,
+      label: /* @__PURE__ */ k(S, { direction: "row", spacing: 1, alignItems: "center", children: [
+        v.label,
+        i && /* @__PURE__ */ k(N, { children: [
           " (",
           /* @__PURE__ */ e(
-            Ve,
+            ze,
             {
-              checked: l,
-              label: /* @__PURE__ */ e(S, { component: Vt, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
+              checked: n,
+              label: /* @__PURE__ */ e(w, { component: Ot, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
               labelPlacement: "start",
-              control: /* @__PURE__ */ e(Pe, { size: "small" }),
+              control: /* @__PURE__ */ e(je, { size: "small" }),
               sx: { ml: 0.25, pr: 1 },
-              onChange: (n, o) => i == null ? void 0 : i(o)
+              onChange: (l, o) => r == null ? void 0 : r(o)
             }
           ),
           ")"
         ] })
       ] }),
-      InputLabelProps: { shrink: !0, ...b.InputLabelProps },
-      value: u,
-      onChange: (n) => g(n.target.value),
-      ...m,
-      onKeyDown: (n) => {
-        n.keyCode !== 229 && n.key === "Enter" && h();
+      InputLabelProps: { shrink: !0, ...v.InputLabelProps },
+      value: h,
+      onChange: (l) => m(l.target.value),
+      ...s,
+      onKeyDown: (l) => {
+        l.keyCode !== 229 && l.key === "Enter" && f();
       }
     }
   );
-}), Ut = it(() => import("react-best-gradient-color-picker"));
-function Kt(t) {
+}), Mt = lt(() => import("react-best-gradient-color-picker"));
+function Qt(t) {
   try {
-    const l = De.parse(t).map((s) => {
-      const a = s.colorStops.map((d) => {
-        if (d.type !== "rgba") {
-          const c = pt(d.value).toRgb();
+    const n = Pe.parse(t).map((a) => {
+      const b = a.colorStops.map((p) => {
+        if (p.type !== "rgba") {
+          const u = mt(p.value).toRgb();
           return {
-            ...d,
-            value: [c.r, c.g, c.b, c.a],
+            ...p,
+            value: [u.r, u.g, u.b, u.a],
             type: "rgba"
           };
         }
-        return d;
+        return p;
       });
       return {
-        ...s,
-        colorStops: a
+        ...a,
+        colorStops: b
       };
     });
-    return De.stringify(l);
+    return Pe.stringify(n);
   } catch {
-    return ze(t) ? t : "";
+    return Oe(t) ? t : "";
   }
 }
-function $t({ color: t, sx: r = {}, ...l }) {
-  ze(t);
-  const i = {};
-  return Re(t) ? i.backgroundImage = t : i.backgroundColor = t, /* @__PURE__ */ e(
-    S,
+function Xt({ color: t, sx: i = {}, ...n }) {
+  Oe(t);
+  const r = {};
+  return Re(t) ? r.backgroundImage = t : r.backgroundColor = t, /* @__PURE__ */ e(
+    w,
     {
       sx: {
-        ...r,
+        ...i,
         width: "100%",
         paddingBottom: "100%",
         cursor: "pointer",
@@ -148,41 +151,41 @@ function $t({ color: t, sx: r = {}, ...l }) {
         "&:hover": {
           opacity: 0.75
         },
-        ...i
+        ...r
       },
-      ...l
+      ...n
     }
   );
 }
-const Jt = We(function({ onSave: r }, l) {
-  const i = dt({
+const Zt = Ve(function({ onSave: i }, n) {
+  const r = at({
     value: ""
-  }), { t: s } = W(), a = {};
-  i.value ? Re(i.value) ? a.backgroundImage = i.value : a.backgroundColor = i.value : a.border = "1px solid #ccc";
-  const [d, { setFalse: c, setTrue: b }] = at(!1), v = ee(() => {
-    c();
-  }, [c]), u = () => {
-    r({ value: i.value }, v);
+  }), { t: a } = z(), b = {};
+  r.value ? Re(r.value) ? b.backgroundImage = r.value : b.backgroundColor = r.value : b.border = "1px solid #ccc";
+  const [p, { setFalse: u, setTrue: v }] = ut(!1), c = te(() => {
+    u();
+  }, [u]), h = () => {
+    i({ value: r.value }, c);
   };
-  return Ee(l, () => ({
-    open({ value: g } = { value: "" }) {
-      i.value = g, b();
+  return _e(n, () => ({
+    open({ value: m } = { value: "" }) {
+      r.value = m, v();
     },
     close() {
-      v();
+      c();
     }
-  })), /* @__PURE__ */ I(ae, { open: d, onClose: v, hideBackdrop: !0, children: [
-    /* @__PURE__ */ e(Oe, { children: s("maker.configBackground") }),
-    /* @__PURE__ */ e(je, { sx: { width: 600 }, children: /* @__PURE__ */ I(S, { width: "100%", display: "flex", children: [
-      /* @__PURE__ */ e(S, { flex: 1, mr: 1, sx: a, children: !i.value && /* @__PURE__ */ e(ot, { children: s("error.notConfig") }) }),
-      /* @__PURE__ */ e(lt, { children: /* @__PURE__ */ e(
-        Ut,
+  })), /* @__PURE__ */ k(ae, { open: p, onClose: c, hideBackdrop: !0, children: [
+    /* @__PURE__ */ e(Ae, { children: a("maker.configBackground") }),
+    /* @__PURE__ */ e(Te, { sx: { width: 600 }, children: /* @__PURE__ */ k(w, { width: "100%", display: "flex", children: [
+      /* @__PURE__ */ e(w, { flex: 1, mr: 1, sx: b, children: !r.value && /* @__PURE__ */ e(st, { children: a("error.notConfig") }) }),
+      /* @__PURE__ */ e(nt, { children: /* @__PURE__ */ e(
+        Mt,
         {
           width: 200,
           height: 200,
-          value: Kt(i.value),
-          onChange: (g) => {
-            i.value = g;
+          value: Qt(r.value),
+          onChange: (m) => {
+            r.value = m;
           },
           hidePresets: !0,
           hideAdvancedSliders: !0,
@@ -191,13 +194,13 @@ const Jt = We(function({ onSave: r }, l) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ I(Ce, { children: [
-      /* @__PURE__ */ e(N, { variant: "outlined", size: "small", onClick: v, children: s("common.cancel") }),
-      /* @__PURE__ */ e(N, { variant: "contained", size: "small", onClick: u, children: s("maker.save") })
+    /* @__PURE__ */ k(Be, { children: [
+      /* @__PURE__ */ e(j, { variant: "outlined", size: "small", onClick: c, children: a("common.cancel") }),
+      /* @__PURE__ */ e(j, { variant: "contained", size: "small", onClick: h, children: a("maker.save") })
     ] })
   ] });
 });
-st(S)`
+ct(w)`
   .color-item {
     position: relative;
   }
@@ -218,28 +221,28 @@ st(S)`
     right: 0;
   }
 `;
-function Yt({
+function Lt({
   value: t,
-  onChange: r,
-  ...l
+  onChange: i,
+  ...n
 }) {
-  const i = M(null);
-  return /* @__PURE__ */ I($, { children: [
+  const r = X(null);
+  return /* @__PURE__ */ k(N, { children: [
     /* @__PURE__ */ e(
-      Ft,
+      qt,
       {
-        ...l,
+        ...n,
         value: t,
-        onChange: r,
+        onChange: i,
         InputProps: {
           endAdornment: /* @__PURE__ */ e(de, { position: "end", children: /* @__PURE__ */ e(
-            $t,
+            Xt,
             {
               color: t ?? "",
               style: { width: "1.5rem", height: "1.5rem", padding: 0 },
               onClick: () => {
-                var s;
-                (s = i.current) == null || s.open({ value: t ?? "" });
+                var a;
+                (a = r.current) == null || a.open({ value: t ?? "" });
               }
             }
           ) })
@@ -247,150 +250,151 @@ function Yt({
       }
     ),
     /* @__PURE__ */ e(
-      Jt,
+      Zt,
       {
-        ref: i,
-        onSave: ({ value: s }, a) => {
-          r(s), a();
+        ref: r,
+        onSave: ({ value: a }, b) => {
+          i(a), b();
         }
       }
     )
   ] });
 }
-function Gt({
+const De = ["string", "multiline", "json", "yaml", "component", "custom", "url"];
+function er({
   disabled: t,
-  list: r,
-  renderItem: l,
-  ...i
+  list: i,
+  renderItem: n,
+  ...r
 }) {
-  const s = M(null), a = nt(), d = ut(), c = Ht(Object.entries(r), (m) => m[1].index).map((m) => m[0]), b = M(c), v = ee(
-    (m) => {
-      b.current = m, d();
+  const a = X(null), b = ot(), p = pt(), u = $t(Object.entries(i), (s) => s[1].index).map((s) => s[0]), v = X(u), c = te(
+    (s) => {
+      v.current = s, p();
     },
-    [d]
-  ), u = ee(
-    ({ index: m }, { index: n }) => {
-      const o = [...b.current];
-      o.splice(n, 0, ...o.splice(m, 1)), v(o);
+    [p]
+  ), h = te(
+    ({ index: s }, { index: l }) => {
+      const o = [...v.current];
+      o.splice(l, 0, ...o.splice(s, 1)), c(o);
     },
-    [v]
+    [c]
   );
-  L(() => {
-    v(c);
-  }, [c.join("-")]);
-  const [{ isOver: g }, h] = Ge({
-    accept: a,
-    collect: (m) => ({
-      isOver: m.isOver()
+  Q(() => {
+    c(u);
+  }, [u.join("-")]);
+  const [{ isOver: m }, f] = qe({
+    accept: b,
+    collect: (s) => ({
+      isOver: s.isOver()
     }),
     canDrop: () => !t,
     drop: () => {
       var o;
-      const m = () => {
-        b.current.forEach((f, x) => {
-          const y = r[f];
+      const s = () => {
+        v.current.forEach((d, x) => {
+          const y = i[d];
           y && (y.index = x);
         });
-      }, n = (o = J(r)) == null ? void 0 : o.doc;
-      n ? n.transact(() => {
-        m();
-      }) : m();
+      }, l = (o = _(i)) == null ? void 0 : o.doc;
+      l ? l.transact(() => {
+        s();
+      }) : s();
     }
   });
-  return L(() => {
-    g || v(c);
-  }, [g]), h(s), /* @__PURE__ */ e(S, { ...i, ref: s, className: ct(g && "isDragging"), children: b.current.map((m, n) => /* @__PURE__ */ e(
-    Mt,
+  return Q(() => {
+    m || c(u);
+  }, [m]), f(a), /* @__PURE__ */ e(w, { ...r, ref: a, className: dt(m && "isDragging"), children: v.current.map((s, l) => /* @__PURE__ */ e(
+    tr,
     {
-      type: a,
+      type: b,
       disabled: t,
-      id: m,
-      index: n,
-      itemIndex: (o) => b.current.indexOf(o),
-      move: u,
+      id: s,
+      index: l,
+      itemIndex: (o) => v.current.indexOf(o),
+      move: h,
       children: (o) => {
-        const f = r[m];
-        return f ? l(f.data, n, o) : null;
+        const d = i[s];
+        return d ? n(d.data, l, o) : null;
       }
     },
-    m
+    s
   )) });
 }
-function Mt({
+function tr({
   disabled: t,
-  id: r,
-  index: l,
-  type: i,
-  children: s,
-  itemIndex: a,
-  move: d
+  id: i,
+  index: n,
+  type: r,
+  children: a,
+  itemIndex: b,
+  move: p
 }) {
-  const c = M(), [{ isDragging: b }, v, u] = _t({
-    type: i,
-    item: () => ({ id: r }),
+  const u = X(), [{ isDragging: v }, c, h] = Gt({
+    type: r,
+    item: () => ({ id: i }),
     canDrag: () => !t,
-    collect: (h) => ({ isDragging: h.isDragging() })
-  }), [, g] = Ge({
-    accept: i,
+    collect: (f) => ({ isDragging: f.isDragging() })
+  }), [, m] = qe({
+    accept: r,
     canDrop: () => !t,
-    hover(h, m) {
-      var w;
-      if (!c.current)
+    hover(f, s) {
+      var g;
+      if (!u.current)
         return;
-      const n = a(h.id), o = l;
-      if (n === o)
+      const l = b(f.id), o = n;
+      if (l === o)
         return;
-      const f = (w = c.current) == null ? void 0 : w.getBoundingClientRect(), x = (f.bottom - f.top) / 2, p = m.getClientOffset().y - f.top;
-      n < o && p < x || n > o && p > x || d({ id: h.id, index: n }, { id: r, index: l });
+      const d = (g = u.current) == null ? void 0 : g.getBoundingClientRect(), x = (d.bottom - d.top) / 2, I = s.getClientOffset().y - d.top;
+      l < o && I < x || l > o && I > x || p({ id: f.id, index: l }, { id: i, index: n });
     }
   });
-  return typeof s == "function" ? s({
-    isDragging: b,
-    drag: v,
-    drop: (h) => (c.current = h, g(h)),
-    preview: u
-  }) : (v(g(u(c))), /* @__PURE__ */ e(S, { ref: c, children: s }));
+  return typeof a == "function" ? a({
+    isDragging: v,
+    drag: c,
+    drop: (f) => (u.current = f, m(f)),
+    preview: h
+  }) : (c(m(h(u))), /* @__PURE__ */ e(w, { ref: u, children: a }));
 }
-function qt({
+function rr({
   drop: t,
-  preview: r,
-  drag: l,
-  disabled: i,
-  isDragging: s,
-  children: a,
-  onDelete: d,
-  actions: c
+  preview: i,
+  drag: n,
+  disabled: r,
+  isDragging: a,
+  children: b,
+  onDelete: p,
+  actions: u
 }) {
-  const { t: b } = W();
-  return /* @__PURE__ */ e(S, { ref: t, sx: { ":hover .hover-visible": { maxHeight: "100%" } }, children: /* @__PURE__ */ I(S, { sx: { position: "relative" }, children: [
+  const { t: v } = z();
+  return /* @__PURE__ */ e(w, { ref: t, sx: { ":hover .hover-visible": { maxHeight: "100%" } }, children: /* @__PURE__ */ k(w, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ e(
-      S,
+      w,
       {
-        ref: r,
+        ref: i,
         sx: {
           flex: 1,
           borderRadius: 1,
-          bgcolor: s ? "action.hover" : "background.paper",
+          bgcolor: a ? "action.hover" : "background.paper",
           opacity: 0.9999
           // NOTE: make preview effective
         },
-        children: a
+        children: b
       }
     ),
-    !i && /* @__PURE__ */ e(
-      S,
+    !r && /* @__PURE__ */ e(
+      w,
       {
         className: "hover-visible",
         sx: { maxHeight: 0, overflow: "hidden", position: "absolute", right: 2, top: 2 },
-        children: /* @__PURE__ */ I(
-          R,
+        children: /* @__PURE__ */ k(
+          S,
           {
             direction: "row",
             sx: {
-              bgcolor: (v) => Xe(v.palette.grey[300], 0.9),
+              bgcolor: (c) => Ze(c.palette.grey[300], 0.9),
               borderRadius: 1,
               p: 0.5,
-              [`.${Ze.root}`]: {
+              [`.${Le.root}`]: {
                 minWidth: 24,
                 width: 24,
                 height: 24,
@@ -398,9 +402,9 @@ function qt({
               }
             },
             children: [
-              c,
-              d && /* @__PURE__ */ e(ne, { title: b("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(N, { onClick: d, children: /* @__PURE__ */ e(Ct, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
-              /* @__PURE__ */ e(ne, { title: b("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(N, { ref: l, children: /* @__PURE__ */ e(At, { sx: { color: "grey.500" } }) }) })
+              u,
+              p && /* @__PURE__ */ e(ne, { title: v("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(j, { onClick: p, children: /* @__PURE__ */ e(Vt, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
+              /* @__PURE__ */ e(ne, { title: v("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(j, { ref: n, children: /* @__PURE__ */ e(_t, { sx: { color: "grey.500" } }) }) })
             ]
           }
         )
@@ -408,403 +412,383 @@ function qt({
     )
   ] }) });
 }
-function Qt({
+function ir({
   label: t,
-  value: r,
-  onChange: l
+  value: i,
+  onChange: n
 }) {
-  const [i, s] = Ne(!1);
-  return /* @__PURE__ */ I(R, { gap: 1, children: [
+  const [r, a] = ue(!1);
+  return /* @__PURE__ */ k(S, { gap: 1, children: [
     /* @__PURE__ */ e(
-      V,
+      D,
       {
         label: t,
         size: "small",
-        value: r,
-        onChange: (a) => l == null ? void 0 : l(a.target.value),
+        value: i,
+        onChange: (b) => n == null ? void 0 : n(b.target.value),
         InputProps: {
           endAdornment: /* @__PURE__ */ e(
-            ue,
+            pe,
             {
-              onChange: ({ response: a }) => {
-                var c;
-                const d = (c = a == null ? void 0 : a.data) == null ? void 0 : c.filename;
-                d && (l == null || l(d));
+              onChange: ({ response: b }) => {
+                var u;
+                const p = (u = b == null ? void 0 : b.data) == null ? void 0 : u.filename;
+                p && (n == null || n(p));
               }
             }
           )
         }
       }
     ),
-    r && /* @__PURE__ */ e(
-      S,
+    i && /* @__PURE__ */ e(
+      w,
       {
         component: "img",
         sx: { objectFit: "contain", borderRadius: 1, cursor: "pointer" },
-        src: Z(r),
+        src: ee(i),
         alt: t,
         maxWidth: 100,
         maxHeight: 100,
         width: "100%",
-        onClick: () => s(!0)
+        onClick: () => a(!0)
       }
     ),
-    /* @__PURE__ */ e(ae, { open: i, onClose: () => s(!1), children: /* @__PURE__ */ e(S, { component: "img", sx: { objectFit: "contain" }, src: Z(r), alt: t }) })
+    /* @__PURE__ */ e(ae, { open: r, onClose: () => a(!1), children: /* @__PURE__ */ e(w, { component: "img", sx: { objectFit: "contain" }, src: ee(i), alt: t }) })
   ] });
 }
-function Ar({ componentId: t }) {
+function Jr({ componentId: t }) {
   const {
-    state: { components: r }
-  } = re(), l = r[t], i = l == null ? void 0 : l.data;
-  return i ? /* @__PURE__ */ e(R, { maxHeight: "100%", overflow: "auto", children: /* @__PURE__ */ e(S, { p: 2, children: /* @__PURE__ */ e(Et, { FallbackComponent: qe, resetKeys: [t], children: /* @__PURE__ */ e(Xt, { value: i }) }) }) }) : null;
+    state: { components: i }
+  } = re(), n = i[t], r = n == null ? void 0 : n.data;
+  return r ? /* @__PURE__ */ e(S, { maxHeight: "100%", overflow: "auto", children: /* @__PURE__ */ e(w, { p: 2, children: /* @__PURE__ */ e(Yt, { FallbackComponent: Qe, resetKeys: [t], children: /* @__PURE__ */ e(lr, { value: r }) }) }) }) : null;
 }
-function Xt({ value: t }) {
-  var d, c, b;
-  const { t: r } = W(), {
-    localState: { currentLocale: l },
+function lr({ value: t }) {
+  var v, c, h;
+  const { t: i } = z(), {
+    localState: { currentLocale: n },
     state: {
-      config: { defaultLocale: i }
-    }
-  } = re(), s = J(t).doc, a = ce();
-  return /* @__PURE__ */ e(R, { height: "100%", children: /* @__PURE__ */ I(R, { gap: 2, children: [
-    /* @__PURE__ */ e(Zt, { config: t }),
+      config: { defaultLocale: r }
+    },
+    currentPage: a,
+    currentSection: b
+  } = re(), p = _(t).doc, u = ce();
+  return /* @__PURE__ */ e(S, { height: "100%", children: /* @__PURE__ */ k(S, { gap: 2, children: [
+    /* @__PURE__ */ e(nr, { config: t }),
     /* @__PURE__ */ e(
-      Lt,
+      or,
       {
         config: t,
-        currentLocale: l,
-        defaultLocale: i,
-        allComponents: a,
-        onUpdateConfig: (v) => {
-          s.transact(() => {
-            v(t);
+        currentLocale: n,
+        defaultLocale: r,
+        allComponents: u,
+        onUpdateConfig: (m) => {
+          p.transact(() => {
+            m(t);
           });
         }
       }
     ),
-    /* @__PURE__ */ I(R, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ e(Q, { variant: "subtitle1", children: r("renderer") }),
-      /* @__PURE__ */ I(
-        V,
+    /* @__PURE__ */ k(S, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ e(E, { variant: "subtitle1", children: i("renderer") }),
+      /* @__PURE__ */ k(
+        D,
         {
           hiddenLabel: !0,
           size: "small",
           select: !0,
           SelectProps: { autoWidth: !0 },
-          value: ((d = t.renderer) == null ? void 0 : d.type) || "react-component",
-          onChange: (v) => {
-            s.transact(() => {
-              const u = v.target.value;
-              t.renderer ?? (t.renderer = { type: u }), t.renderer.type = u;
+          value: ((v = t.renderer) == null ? void 0 : v.type) || "react-component",
+          onChange: (m) => {
+            p.transact(() => {
+              const f = m.target.value;
+              t.renderer ?? (t.renderer = { type: f }), t.renderer.type = f;
             });
           },
           children: [
-            /* @__PURE__ */ e(T, { value: "react-component", children: "React Component" }),
-            /* @__PURE__ */ e(T, { value: "component", children: "Custom Component" })
+            /* @__PURE__ */ e(R, { value: "react-component", children: "React Component" }),
+            /* @__PURE__ */ e(R, { value: "component", children: "Custom Component" })
           ]
         }
       )
     ] }),
-    ((c = t.renderer) == null ? void 0 : c.type) === "component" ? /* @__PURE__ */ e(or, { value: t }) : ((b = t.renderer) == null ? void 0 : b.type) === "react-component" ? /* @__PURE__ */ e(nr, { value: t }) : null
+    ((c = t.renderer) == null ? void 0 : c.type) === "component" ? /* @__PURE__ */ e(mr, { value: t }) : ((h = t.renderer) == null ? void 0 : h.type) === "react-component" ? /* @__PURE__ */ e(pr, { value: t }) : null,
+    /* @__PURE__ */ e(
+      hr,
+      {
+        config: t,
+        currentLocale: n,
+        defaultLocale: r,
+        allComponents: u,
+        onChange: (m) => {
+          console.warn(m, JSON.parse(JSON.stringify({ currentPage: a, currentSection: b })));
+        },
+        props: {}
+      }
+    )
   ] }) });
 }
-function Zt({ config: t }) {
-  const { t: r } = W();
-  return /* @__PURE__ */ e(He, { children: /* @__PURE__ */ I(R, { gap: 2, children: [
-    /* @__PURE__ */ e(Q, { variant: "subtitle1", children: r("basicInfo") }),
+function nr({ config: t }) {
+  const { t: i } = z();
+  return /* @__PURE__ */ e(Ke, { children: /* @__PURE__ */ k(S, { gap: 2, children: [
+    /* @__PURE__ */ e(E, { variant: "subtitle1", children: i("basicInfo") }),
     /* @__PURE__ */ e(
-      V,
+      D,
       {
-        label: r("name"),
+        label: i("name"),
         size: "small",
         value: t.name || "",
-        onChange: (l) => t.name = l.target.value
+        onChange: (n) => t.name = n.target.value
       }
     ),
     /* @__PURE__ */ e(
-      V,
+      D,
       {
-        label: r("description"),
+        label: i("description"),
         size: "small",
         multiline: !0,
         minRows: 2,
         maxRows: 10,
         inputProps: { maxLength: 200 },
         value: t.description || "",
-        onChange: (l) => t.description = l.target.value
+        onChange: (n) => t.description = n.target.value
       }
     ),
     /* @__PURE__ */ e(
-      Ae,
+      Ne,
       {
         size: "small",
         options: [],
         multiple: !0,
         freeSolo: !0,
         value: t.tags ?? [],
-        onChange: (l, i) => t.tags = i,
-        renderInput: (l) => /* @__PURE__ */ e(V, { label: r("tags"), ...l })
+        onChange: (n, r) => t.tags = r,
+        renderInput: (n) => /* @__PURE__ */ e(D, { label: i("tags"), ...n })
       }
     ),
     /* @__PURE__ */ e(
-      Qt,
+      ir,
       {
-        label: r("previewImage"),
+        label: i("previewImage"),
         value: t.previewImage || "",
-        onChange: (l) => t.previewImage = l
+        onChange: (n) => t.previewImage = n
       }
     )
   ] }) });
 }
-function Lt({
+function or({
   config: t,
-  currentLocale: r,
-  defaultLocale: l,
-  allComponents: i,
-  onUpdateConfig: s,
-  useI18nEditor: a = !0
+  currentLocale: i,
+  defaultLocale: n,
+  allComponents: r,
+  onUpdateConfig: a,
+  useI18nEditor: b = !0
 }) {
-  var u, g, h, m, n, o, f, x, y;
-  const { t: d } = W(), c = ie({ variant: "dialog" }), b = t.properties && X(Object.values(t.properties), "index"), v = ee(
-    (p) => {
-      s((w) => {
-        var D, O, j;
-        w.properties ?? (w.properties = {}), (D = w.properties).customSettings ?? (D.customSettings = {
-          index: 0,
-          data: {
-            id: "customSettings",
-            key: "customSettings",
-            type: "custom-settings",
-            locales: {
-              [r]: {
-                defaultValue: {}
-              }
-            }
-          }
-        }), (O = w.properties.customSettings.data).locales ?? (O.locales = {}), (j = w.properties.customSettings.data.locales)[r] ?? (j[r] = {}), w.properties.customSettings.data.locales[r].defaultValue = p;
-      });
-    },
-    [r, s]
-  );
-  return /* @__PURE__ */ e(He, { children: /* @__PURE__ */ I(R, { gap: 2, children: [
-    /* @__PURE__ */ I(R, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(Q, { variant: "subtitle1", children: d("properties") }),
-      /* @__PURE__ */ e(S, { flex: 1 }),
+  const { t: p } = z(), u = ie({ variant: "dialog" }), v = t.properties && V(Object.values(t.properties), "index");
+  return /* @__PURE__ */ e(Ke, { children: /* @__PURE__ */ k(S, { gap: 2, children: [
+    /* @__PURE__ */ k(S, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ e(E, { variant: "subtitle1", children: p("properties") }),
+      /* @__PURE__ */ e(w, { flex: 1 }),
       /* @__PURE__ */ e(
-        N,
+        j,
         {
           onClick: () => {
-            s((p) => {
-              var D;
-              const w = Qe();
-              p.properties ?? (p.properties = {}), (D = p.properties)[w] ?? (D[w] = { index: (b == null ? void 0 : b.length) || 0, data: { id: w } });
+            a((c) => {
+              var m;
+              const h = Xe();
+              c.properties ?? (c.properties = {}), (m = c.properties)[h] ?? (m[h] = { index: (v == null ? void 0 : v.length) || 0, data: { id: h } });
             });
           },
-          startIcon: /* @__PURE__ */ e(Tt, {}),
-          children: d("addObject", { object: d("property") })
+          startIcon: /* @__PURE__ */ e(Kt, {}),
+          children: p("addObject", { object: p("property") })
         }
       ),
-      a && /* @__PURE__ */ e(N, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(c), children: /* @__PURE__ */ e(Ke, { fontSize: "small" }) })
+      b && /* @__PURE__ */ e(j, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(u), children: /* @__PURE__ */ e(Je, { fontSize: "small" }) })
     ] }),
     t.properties && /* @__PURE__ */ e(
-      Gt,
+      er,
       {
-        component: R,
+        component: S,
         gap: 2,
         list: t.properties,
-        renderItem: (p, w, D) => {
-          var O, j, B, H, _, F;
-          return p.type === "custom-settings" ? null : /* @__PURE__ */ I(R, { gap: 1, bgcolor: "background.paper", children: [
+        renderItem: (c, h, m) => {
+          var f, s, l, o, d, x;
+          return c.type === "custom-settings" ? null : /* @__PURE__ */ k(S, { gap: 1, bgcolor: "background.paper", children: [
             /* @__PURE__ */ e(
-              qt,
+              rr,
               {
-                preview: D.preview,
-                drop: D.drop,
-                drag: D.drag,
-                isDragging: D.isDragging,
+                preview: m.preview,
+                drop: m.drop,
+                drag: m.drag,
+                isDragging: m.isDragging,
                 onDelete: () => {
-                  s((z) => {
-                    if (z.properties) {
-                      const k = Object.entries(z.properties).sort(([, A], [, E]) => A.index - E.index);
-                      delete z.properties[p.id], k.filter(([A]) => A !== p.id).forEach(([, A], E) => {
-                        A.index = E;
+                  a((y) => {
+                    if (y.properties) {
+                      const g = Object.entries(y.properties).sort(([, P], [, O]) => P.index - O.index);
+                      delete y.properties[c.id], g.filter(([P]) => P !== c.id).forEach(([, P], O) => {
+                        P.index = O;
                       });
                     }
                   });
                 },
-                children: /* @__PURE__ */ I(R, { direction: "row", gap: 1, children: [
+                children: /* @__PURE__ */ k(S, { direction: "row", gap: 1, children: [
                   /* @__PURE__ */ e(
-                    V,
+                    D,
                     {
-                      label: d("key"),
+                      label: p("key"),
                       size: "small",
                       sx: { flex: 1 },
-                      value: p.key || "",
-                      onChange: (z) => {
-                        s((C) => {
-                          const k = C.properties[p.id].data;
-                          k.key = z.target.value.trim();
+                      value: c.key || "",
+                      onChange: (y) => {
+                        a((I) => {
+                          const g = I.properties[c.id].data;
+                          g.key = y.target.value.trim();
                         });
                       }
                     }
                   ),
                   /* @__PURE__ */ e(
-                    V,
+                    D,
                     {
-                      label: d("label"),
+                      label: p("label"),
                       size: "small",
                       sx: { flex: 1 },
-                      value: (((j = (O = p.locales) == null ? void 0 : O[r]) == null ? void 0 : j.name) ?? ((H = (B = p.locales) == null ? void 0 : B[l]) == null ? void 0 : H.name)) || "",
-                      onChange: (z) => {
-                        s((C) => {
-                          var P;
-                          const k = C.properties[p.id].data;
-                          k.locales ?? (k.locales = {}), (P = k.locales)[r] ?? (P[r] = {}), k.locales[r].name = z.target.value;
+                      value: (((s = (f = c.locales) == null ? void 0 : f[i]) == null ? void 0 : s.name) ?? ((o = (l = c.locales) == null ? void 0 : l[n]) == null ? void 0 : o.name)) || "",
+                      onChange: (y) => {
+                        a((I) => {
+                          var C;
+                          const g = I.properties[c.id].data;
+                          g.locales ?? (g.locales = {}), (C = g.locales)[i] ?? (C[i] = {}), g.locales[i].name = y.target.value;
                         });
                       }
                     }
                   ),
-                  /* @__PURE__ */ I(
-                    V,
+                  /* @__PURE__ */ k(
+                    D,
                     {
-                      label: d("type"),
+                      label: p("type"),
                       size: "small",
                       select: !0,
                       sx: { flex: 1 },
-                      value: p.type === "string" && p.multiline ? "multiline" : p.type || "string",
-                      onChange: (z) => {
-                        s((C) => {
-                          const k = C.properties[p.id].data;
-                          if (k.locales)
-                            for (const A of Object.keys(k.locales))
-                              k.locales[A].defaultValue = void 0;
-                          const P = z.target.value;
-                          P === "multiline" ? (k.type = "string", k.multiline = !0) : (typeof k.multiline < "u" && delete k.multiline, k.type = P);
+                      value: c.type === "string" && c.multiline ? "multiline" : c.type || "string",
+                      onChange: (y) => {
+                        a((I) => {
+                          const g = I.properties[c.id].data;
+                          if (g.locales)
+                            for (const P of Object.keys(g.locales))
+                              g.locales[P].defaultValue = void 0;
+                          const C = y.target.value;
+                          C === "multiline" ? (g.type = "string", g.multiline = !0) : (typeof g.multiline < "u" && delete g.multiline, g.type = C);
                         });
                       },
                       children: [
-                        /* @__PURE__ */ e(T, { value: "string", children: "Text" }),
-                        /* @__PURE__ */ e(T, { value: "multiline", children: "Text (Multiline)" }),
-                        /* @__PURE__ */ e(T, { value: "number", children: "Number" }),
-                        /* @__PURE__ */ e(T, { value: "decimal", children: "Decimal" }),
-                        /* @__PURE__ */ e(T, { value: "boolean", children: "Boolean" }),
-                        /* @__PURE__ */ e(T, { value: "color", children: "Color" }),
-                        /* @__PURE__ */ e(T, { value: "url", children: "URL (Upload)" }),
-                        /* @__PURE__ */ e(T, { value: "json", children: "JSON" }),
-                        /* @__PURE__ */ e(T, { value: "yaml", children: "YAML" }),
-                        /* @__PURE__ */ e(T, { value: "component", children: "Component" }),
-                        /* @__PURE__ */ e(T, { value: "custom", children: "Custom (Render by a Component)" })
+                        /* @__PURE__ */ e(R, { value: "string", children: "Text" }),
+                        /* @__PURE__ */ e(R, { value: "multiline", children: "Text (Multiline)" }),
+                        /* @__PURE__ */ e(R, { value: "number", children: "Number" }),
+                        /* @__PURE__ */ e(R, { value: "decimal", children: "Decimal" }),
+                        /* @__PURE__ */ e(R, { value: "boolean", children: "Boolean" }),
+                        /* @__PURE__ */ e(R, { value: "color", children: "Color" }),
+                        /* @__PURE__ */ e(R, { value: "url", children: "URL (Upload)" }),
+                        /* @__PURE__ */ e(R, { value: "json", children: "JSON" }),
+                        /* @__PURE__ */ e(R, { value: "yaml", children: "YAML" }),
+                        /* @__PURE__ */ e(R, { value: "component", children: "Component" }),
+                        /* @__PURE__ */ e(R, { value: "custom", children: "Custom (Render by a Component)" })
                       ]
                     }
                   )
                 ] })
               }
             ),
-            /* @__PURE__ */ I(R, { direction: "row", gap: 1, children: [
+            /* @__PURE__ */ k(S, { direction: "row", gap: 1, children: [
               /* @__PURE__ */ e(
-                q,
+                W,
                 {
-                  allComponents: i,
-                  defaultLocale: l,
+                  allComponents: r,
+                  defaultLocale: n,
                   component: t,
-                  property: p,
-                  label: d("defaultValue"),
+                  property: c,
+                  label: p("defaultValue"),
                   size: "small",
                   fullWidth: !0,
-                  value: (F = (_ = p.locales) == null ? void 0 : _[r]) == null ? void 0 : F.defaultValue,
-                  onChange: (z) => {
-                    s((C) => {
-                      var P;
-                      const k = C.properties[p.id].data;
-                      k.locales ?? (k.locales = {}), (P = k.locales)[r] ?? (P[r] = {}), k.locales[r].defaultValue = z;
+                  value: (x = (d = c.locales) == null ? void 0 : d[i]) == null ? void 0 : x.defaultValue,
+                  onChange: (y) => {
+                    a((I) => {
+                      var C;
+                      const g = I.properties[c.id].data;
+                      g.locales ?? (g.locales = {}), (C = g.locales)[i] ?? (C[i] = {}), g.locales[i].defaultValue = y;
                     });
                   }
                 }
               ),
-              p.type === "custom" ? /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(er, { property: p, allComponents: i }) }) : null
+              c.type === "custom" ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(sr, { property: c, allComponents: r }) }) : null
             ] })
-          ] }, p.id);
+          ] }, c.id);
         }
       }
     ),
-    ((u = i == null ? void 0 : i[t.id]) == null ? void 0 : u.data) && /* @__PURE__ */ e(S, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-      Fe,
-      {
-        componentId: t.id,
-        renderType: "setting",
-        locale: r,
-        properties: {},
-        dev: { mode: "draft", components: i, defaultLocale: l },
-        props: {
-          value: ((n = (m = (h = (g = t.properties) == null ? void 0 : g.customSettings) == null ? void 0 : h.data.locales) == null ? void 0 : m[r]) == null ? void 0 : n.defaultValue) ?? ((y = (x = (f = (o = t.properties) == null ? void 0 : o.customSettings) == null ? void 0 : f.data.locales) == null ? void 0 : x[l]) == null ? void 0 : y.defaultValue) ?? null,
-          onChange: v
-        }
-      }
-    ) }),
-    a && /* @__PURE__ */ e(Me, { ...Je(c), component: t })
+    b && /* @__PURE__ */ e(Me, { ...$e(u), component: t })
   ] }) });
 }
-function er({
+function sr({
   property: t,
-  allComponents: r
+  allComponents: i
 }) {
-  const l = ie({ variant: "popper" });
-  return /* @__PURE__ */ I($, { children: [
-    /* @__PURE__ */ e(N, { sx: { minWidth: 0 }, ...le(l), children: /* @__PURE__ */ e($e, { fontSize: "small" }) }),
-    /* @__PURE__ */ e(Te, { ...Ye(l), children: /* @__PURE__ */ e(Ue, { onClickAway: l.close, children: /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(S, { width: 500, p: 2, children: /* @__PURE__ */ e(
-      pe,
+  const n = ie({ variant: "popper" });
+  return /* @__PURE__ */ k(N, { children: [
+    /* @__PURE__ */ e(j, { sx: { minWidth: 0 }, ...le(n), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) }),
+    /* @__PURE__ */ e(We, { ...Ge(n), children: /* @__PURE__ */ e(Ue, { onClickAway: n.close, children: /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(w, { width: 500, p: 2, children: /* @__PURE__ */ e(
+      me,
       {
         value: t.componentId,
-        onChange: (i, s) => t.componentId = s,
-        allComponents: r
+        onChange: (r, a) => t.componentId = a,
+        allComponents: i
       }
     ) }) }) }) })
   ] });
 }
-function tr({
+function cr({
   value: t,
-  valueImmutable: r,
-  onChange: l,
-  defaultLocale: i,
-  allComponents: s
+  valueImmutable: i,
+  onChange: n,
+  defaultLocale: r,
+  allComponents: a
 }) {
-  var b;
-  const a = ie({ variant: "popper" }), { locale: d } = W(), c = typeof (t == null ? void 0 : t.componentId) == "string" ? (b = s[t.componentId]) == null ? void 0 : b.data : void 0;
-  return c ? /* @__PURE__ */ I($, { children: [
-    /* @__PURE__ */ e(N, { sx: { minWidth: 0 }, disabled: !c, ...le(a), children: /* @__PURE__ */ e($e, { fontSize: "small" }) }),
+  var v;
+  const b = ie({ variant: "popper" }), { locale: p } = z(), u = typeof (t == null ? void 0 : t.componentId) == "string" ? (v = a[t.componentId]) == null ? void 0 : v.data : void 0;
+  return u ? /* @__PURE__ */ k(N, { children: [
+    /* @__PURE__ */ e(j, { sx: { minWidth: 0 }, disabled: !u, ...le(b), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) }),
     /* @__PURE__ */ e(
-      Te,
+      We,
       {
-        ...Ye(a),
+        ...Ge(b),
         sx: {
           zIndex: 1e3
         },
-        children: /* @__PURE__ */ e(Ue, { onClickAway: a.close, children: /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ I(S, { width: 500, p: 2, children: [
-          /* @__PURE__ */ e(Q, { variant: "subtitle1", children: "Parameters" }),
-          /* @__PURE__ */ e(R, { gap: 1, children: (c == null ? void 0 : c.properties) && X(Object.values(c.properties), "index").map(({ data: v }) => {
-            var u, g, h, m, n, o, f, x;
-            return /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
-              q,
+        children: /* @__PURE__ */ e(Ue, { onClickAway: b.close, children: /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ k(w, { width: 500, p: 2, children: [
+          /* @__PURE__ */ e(E, { variant: "subtitle1", children: "Parameters" }),
+          /* @__PURE__ */ e(S, { gap: 1, children: (u == null ? void 0 : u.properties) && V(Object.values(u.properties), "index").map(({ data: c }) => {
+            var h, m, f, s, l, o, d, x;
+            return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+              W,
               {
-                allComponents: s,
-                defaultLocale: i,
+                allComponents: a,
+                defaultLocale: r,
                 size: "small",
                 fullWidth: !0,
-                component: c,
-                property: v,
-                valueImmutable: te((g = (u = t.properties) == null ? void 0 : u[v.id]) == null ? void 0 : g.value),
-                value: ((m = (h = t.properties) == null ? void 0 : h[v.id]) == null ? void 0 : m.value) ?? ((o = (n = v.locales) == null ? void 0 : n[d]) == null ? void 0 : o.defaultValue) ?? ((x = (f = v.locales) == null ? void 0 : f[i]) == null ? void 0 : x.defaultValue),
+                component: u,
+                property: c,
+                valueImmutable: Z((m = (h = t.properties) == null ? void 0 : h[c.id]) == null ? void 0 : m.value),
+                value: ((s = (f = t.properties) == null ? void 0 : f[c.id]) == null ? void 0 : s.value) ?? ((o = (l = c.locales) == null ? void 0 : l[p]) == null ? void 0 : o.defaultValue) ?? ((x = (d = c.locales) == null ? void 0 : d[r]) == null ? void 0 : x.defaultValue),
                 onChange: (y) => {
-                  if (r) {
-                    const p = JSON.parse(JSON.stringify(t));
-                    l == null || l({ ...p, properties: { ...p.properties, [v.id]: { value: y } } });
+                  if (i) {
+                    const I = JSON.parse(JSON.stringify(t));
+                    n == null || n({ ...I, properties: { ...I.properties, [c.id]: { value: y } } });
                   } else
-                    J(c).doc.transact(() => {
-                      t.properties ?? (t.properties = {}), t.properties[v.id] = { value: y };
+                    _(u).doc.transact(() => {
+                      t.properties ?? (t.properties = {}), t.properties[c.id] = { value: y };
                     });
                 }
               }
-            ) }, v.id);
+            ) }, c.id);
           }) })
         ] }) }) })
       }
@@ -813,173 +797,173 @@ function tr({
 }
 function Me({
   type: t = "properties",
-  component: r,
-  ...l
+  component: i,
+  ...n
 }) {
-  var g, h, m;
-  const { t: i } = W(), {
+  var m, f, s;
+  const { t: r } = z(), {
     state: {
-      components: s,
-      supportedLocales: a,
-      config: { defaultLocale: d }
+      components: a,
+      supportedLocales: b,
+      config: { defaultLocale: p }
     }
-  } = re(), c = ce(), b = J(r).doc, v = t === "properties" ? r.properties : t === "parameters" && ((g = r.renderer) == null ? void 0 : g.type) === "component" ? (h = s[r.renderer.componentId]) == null ? void 0 : h.data.properties : void 0, u = ((m = r.renderer) == null ? void 0 : m.type) === "component" ? r : void 0;
-  return /* @__PURE__ */ I(ae, { ...l, fullWidth: !0, maxWidth: "lg", children: [
-    /* @__PURE__ */ e(Oe, { children: i("i18nEditorTitle") }),
-    /* @__PURE__ */ e(je, { children: v && /* @__PURE__ */ e(R, { children: /* @__PURE__ */ I(et, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
-      /* @__PURE__ */ e(tt, { children: /* @__PURE__ */ e(Se, { children: a.map(({ locale: n, name: o }) => /* @__PURE__ */ I(ke, { children: [
+  } = re(), u = ce(), v = _(i).doc, c = t === "properties" ? i.properties : t === "parameters" && ((m = i.renderer) == null ? void 0 : m.type) === "component" ? (f = a[i.renderer.componentId]) == null ? void 0 : f.data.properties : void 0, h = ((s = i.renderer) == null ? void 0 : s.type) === "component" ? i : void 0;
+  return /* @__PURE__ */ k(ae, { ...n, fullWidth: !0, maxWidth: "lg", children: [
+    /* @__PURE__ */ e(Ae, { children: r("i18nEditorTitle") }),
+    /* @__PURE__ */ e(Te, { children: c && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ k(tt, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
+      /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(Se, { children: b.map(({ locale: l, name: o }) => /* @__PURE__ */ k(Ce, { children: [
         o,
-        d === n && /* @__PURE__ */ e(Wt, { sx: { fontSize: 12, color: "text.secondary" } })
-      ] }, n)) }) }),
-      /* @__PURE__ */ e(rt, { children: X(Object.values(v), "index").map(({ data: n }) => /* @__PURE__ */ e(Se, { children: a.map(({ locale: o }) => {
-        var f, x, y, p, w, D, O, j, B, H, _, F, z, C, k, P, A, E, Y, G, me, he, fe, be, ge, ve;
-        return /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(R, { gap: 1, children: t === "properties" ? /* @__PURE__ */ I($, { children: [
+        p === l && /* @__PURE__ */ e(Ht, { sx: { fontSize: 12, color: "text.secondary" } })
+      ] }, l)) }) }),
+      /* @__PURE__ */ e(it, { children: V(Object.values(c), "index").map(({ data: l }) => /* @__PURE__ */ e(Se, { children: b.map(({ locale: o }) => {
+        var d, x, y, I, g, C, P, O, A, K, F, H, U, J, L, Y, $, G, q, M, he, fe, be, ve, ye, ge;
+        return /* @__PURE__ */ e(Ce, { children: /* @__PURE__ */ e(S, { gap: 1, children: t === "properties" ? /* @__PURE__ */ k(N, { children: [
           /* @__PURE__ */ e(
-            V,
+            D,
             {
               size: "small",
               label: "Key",
-              value: n.key || "",
-              onChange: (K) => {
-                b.transact(() => {
-                  n.key = K.target.value.trim();
+              value: l.key || "",
+              onChange: (B) => {
+                v.transact(() => {
+                  l.key = B.target.value.trim();
                 });
               }
             }
           ),
           /* @__PURE__ */ e(
-            V,
+            D,
             {
               size: "small",
-              label: i("label"),
-              value: (((x = (f = n.locales) == null ? void 0 : f[o]) == null ? void 0 : x.name) ?? ((p = (y = n.locales) == null ? void 0 : y[d]) == null ? void 0 : p.name)) || "",
-              onChange: (K) => {
-                b.transact(() => {
-                  var U;
-                  n.locales ?? (n.locales = {}), (U = n.locales)[o] ?? (U[o] = {}), n.locales[o].name = K.target.value;
+              label: r("label"),
+              value: (((x = (d = l.locales) == null ? void 0 : d[o]) == null ? void 0 : x.name) ?? ((I = (y = l.locales) == null ? void 0 : y[p]) == null ? void 0 : I.name)) || "",
+              onChange: (B) => {
+                v.transact(() => {
+                  var T;
+                  l.locales ?? (l.locales = {}), (T = l.locales)[o] ?? (T[o] = {}), l.locales[o].name = B.target.value;
                 });
               }
             }
           ),
-          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
-            q,
+          /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+            W,
             {
-              allComponents: c,
-              defaultLocale: d,
-              component: r,
-              property: n,
+              allComponents: u,
+              defaultLocale: p,
+              component: i,
+              property: l,
               size: "small",
               fullWidth: !0,
               label: "Default Value",
-              valueImmutable: te((D = (w = n.locales) == null ? void 0 : w[o]) == null ? void 0 : D.defaultValue),
-              value: ((j = (O = n.locales) == null ? void 0 : O[o]) == null ? void 0 : j.defaultValue) ?? ((H = (B = n.locales) == null ? void 0 : B[d]) == null ? void 0 : H.defaultValue),
-              onChange: (K) => {
-                b.transact(() => {
-                  var U;
-                  n.locales ?? (n.locales = {}), (U = n.locales)[o] ?? (U[o] = {}), n.locales[o].defaultValue = K;
+              valueImmutable: Z((C = (g = l.locales) == null ? void 0 : g[o]) == null ? void 0 : C.defaultValue),
+              value: ((O = (P = l.locales) == null ? void 0 : P[o]) == null ? void 0 : O.defaultValue) ?? ((K = (A = l.locales) == null ? void 0 : A[p]) == null ? void 0 : K.defaultValue),
+              onChange: (B) => {
+                v.transact(() => {
+                  var T;
+                  l.locales ?? (l.locales = {}), (T = l.locales)[o] ?? (T[o] = {}), l.locales[o].defaultValue = B;
                 });
               }
             }
           ) })
-        ] }) : t === "parameters" && u ? /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
-          q,
+        ] }) : t === "parameters" && h ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+          W,
           {
-            allComponents: c,
-            defaultLocale: d,
-            component: r,
-            property: n,
+            allComponents: u,
+            defaultLocale: p,
+            component: i,
+            property: l,
             size: "small",
             fullWidth: !0,
-            valueImmutable: te(
-              (C = (z = (F = (_ = u.renderer.properties) == null ? void 0 : _[n.id]) == null ? void 0 : F.locales) == null ? void 0 : z[o]) == null ? void 0 : C.value
+            valueImmutable: Z(
+              (J = (U = (H = (F = h.renderer.properties) == null ? void 0 : F[l.id]) == null ? void 0 : H.locales) == null ? void 0 : U[o]) == null ? void 0 : J.value
             ),
-            value: ((E = (A = (P = (k = u.renderer.properties) == null ? void 0 : k[n.id]) == null ? void 0 : P.locales) == null ? void 0 : A[o]) == null ? void 0 : E.value) ?? ((he = (me = (G = (Y = u.renderer.properties) == null ? void 0 : Y[n.id]) == null ? void 0 : G.locales) == null ? void 0 : me[d]) == null ? void 0 : he.value) ?? ((be = (fe = n.locales) == null ? void 0 : fe[o]) == null ? void 0 : be.defaultValue) ?? ((ve = (ge = n.locales) == null ? void 0 : ge[d]) == null ? void 0 : ve.defaultValue),
-            onChange: (K) => {
-              b.transact(() => {
-                var U, xe, ye, Ie, we;
-                (U = u.renderer).properties ?? (U.properties = {}), (xe = u.renderer.properties)[ye = n.id] ?? (xe[ye] = {}), (Ie = u.renderer.properties[n.id]).locales ?? (Ie.locales = {}), (we = u.renderer.properties[n.id].locales)[o] ?? (we[o] = {}), u.renderer.properties[n.id].locales[o].value = K;
+            value: ((G = ($ = (Y = (L = h.renderer.properties) == null ? void 0 : L[l.id]) == null ? void 0 : Y.locales) == null ? void 0 : $[o]) == null ? void 0 : G.value) ?? ((fe = (he = (M = (q = h.renderer.properties) == null ? void 0 : q[l.id]) == null ? void 0 : M.locales) == null ? void 0 : he[p]) == null ? void 0 : fe.value) ?? ((ve = (be = l.locales) == null ? void 0 : be[o]) == null ? void 0 : ve.defaultValue) ?? ((ge = (ye = l.locales) == null ? void 0 : ye[p]) == null ? void 0 : ge.defaultValue),
+            onChange: (B) => {
+              v.transact(() => {
+                var T, xe, Ie, ke, we;
+                (T = h.renderer).properties ?? (T.properties = {}), (xe = h.renderer.properties)[Ie = l.id] ?? (xe[Ie] = {}), (ke = h.renderer.properties[l.id]).locales ?? (ke.locales = {}), (we = h.renderer.properties[l.id].locales)[o] ?? (we[o] = {}), h.renderer.properties[l.id].locales[o].value = B;
               });
             }
           }
-        ) }) : null }, n.id) }, o);
-      }) }, n.id)) })
+        ) }) : null }, l.id) }, o);
+      }) }, l.id)) })
     ] }) }) }),
-    /* @__PURE__ */ e(Ce, { children: /* @__PURE__ */ e(N, { onClick: (n) => {
+    /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(j, { onClick: (l) => {
       var o;
-      return (o = l.onClose) == null ? void 0 : o.call(l, n, "escapeKeyDown");
-    }, children: i("close") }) })
+      return (o = n.onClose) == null ? void 0 : o.call(n, l, "escapeKeyDown");
+    }, children: r("close") }) })
   ] });
 }
-function q({
+function W({
   component: t,
-  property: r,
-  value: l,
-  onChange: i,
-  valueImmutable: s,
-  defaultLocale: a,
-  allComponents: d,
-  ...c
+  property: i,
+  value: n,
+  onChange: r,
+  valueImmutable: a,
+  defaultLocale: b,
+  allComponents: p,
+  ...u
 }) {
-  var g, h, m, n, o;
-  const { locale: b } = W(), v = M(null), u = c.label || ((h = (g = r.locales) == null ? void 0 : g[b]) == null ? void 0 : h.name) || ((n = (m = r.locales) == null ? void 0 : m[a]) == null ? void 0 : n.name) || r.key || r.id;
-  if (r.type === "number")
+  var m, f, s, l, o;
+  const { locale: v } = z(), c = X(null), h = u.label || ((f = (m = i.locales) == null ? void 0 : m[v]) == null ? void 0 : f.name) || ((l = (s = i.locales) == null ? void 0 : s[b]) == null ? void 0 : l.name) || i.key || i.id;
+  if (i.type === "number")
     return /* @__PURE__ */ e(
-      rr,
+      dr,
       {
-        ...c,
-        label: u,
+        ...u,
+        label: h,
         NumberProps: {
-          value: ["number", "string"].includes(typeof l) ? l : null,
-          onChange: (f, x) => i == null ? void 0 : i(x)
+          value: ["number", "string"].includes(typeof n) ? n : null,
+          onChange: (d, x) => r == null ? void 0 : r(x)
         }
       }
     );
-  if (r.type === "custom-settings")
+  if (i.type === "custom-settings")
     return null;
-  if (r.type === "decimal")
+  if (i.type === "decimal")
     return /* @__PURE__ */ e(
-      V,
+      D,
       {
-        ...c,
-        label: u,
+        ...u,
+        label: h,
         type: "text",
-        value: l ?? "",
-        onChange: (f) => {
-          const x = f.target.value;
+        value: n ?? "",
+        onChange: (d) => {
+          const x = d.target.value;
           if (x === "" || x === "-") {
-            i == null || i(x);
+            r == null || r(x);
             return;
           }
           if (/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(x)) {
-            let p = x;
-            /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(p) && (p = Number(p)), i == null || i(p);
+            let I = x;
+            /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(I) && (I = Number(I)), r == null || r(I);
           }
         }
       }
     );
-  if (r.type === "boolean")
+  if (i.type === "boolean")
     return /* @__PURE__ */ e(
-      Ve,
+      ze,
       {
-        label: u,
+        label: h,
         labelPlacement: "start",
-        control: /* @__PURE__ */ e(Pe, { checked: l === !0, onChange: (f, x) => i == null ? void 0 : i(x) })
+        control: /* @__PURE__ */ e(je, { checked: n === !0, onChange: (d, x) => r == null ? void 0 : r(x) })
       }
     );
-  if (r.type === "color")
+  if (i.type === "color")
     return /* @__PURE__ */ e(
-      Yt,
+      Lt,
       {
-        label: u,
-        value: l,
-        onChange: (f) => {
-          i == null || i(f);
+        label: h,
+        value: n,
+        onChange: (d) => {
+          r == null || r(d);
         }
       }
     );
-  if (r.type === "json" || r.type === "yaml")
-    return /* @__PURE__ */ I(
-      R,
+  if (i.type === "json" || i.type === "yaml")
+    return /* @__PURE__ */ k(
+      S,
       {
         sx: {
           width: "100%",
@@ -992,7 +976,7 @@ function q({
         },
         children: [
           /* @__PURE__ */ e(
-            Le,
+            et,
             {
               sx: {
                 position: "absolute",
@@ -1000,25 +984,25 @@ function q({
                 top: 0,
                 transform: "translate(0px, -7px) scale(0.75)"
               },
-              children: u
+              children: h
             }
           ),
           /* @__PURE__ */ e(
-            _e,
+            Fe,
             {
-              keyId: r.id,
-              locale: b,
-              language: r.type === "yaml" ? "yaml" : "json",
-              value: typeof l == "string" ? l : "",
-              onChange: (f) => i == null ? void 0 : i(f),
-              onUpload: (f) => {
-                v.current = f;
+              keyId: i.id,
+              locale: v,
+              language: i.type === "yaml" ? "yaml" : "json",
+              value: typeof n == "string" ? n : "",
+              onChange: (d) => r == null ? void 0 : r(d),
+              onUpload: (d) => {
+                c.current = d;
               }
             },
-            r.id
+            i.id
           ),
           /* @__PURE__ */ e(
-            S,
+            w,
             {
               component: "fieldset",
               sx: {
@@ -1034,104 +1018,104 @@ function q({
                 px: 1,
                 py: 0
               },
-              children: /* @__PURE__ */ e(S, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ e(S, { component: "span", sx: { opacity: 0 }, children: c.label }) })
+              children: /* @__PURE__ */ e(w, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ e(w, { component: "span", sx: { opacity: 0 }, children: u.label }) })
             }
           )
         ]
       }
     );
-  if (r.type === "custom") {
-    const f = (o = d[r.componentId]) == null ? void 0 : o.data;
-    return f ? /* @__PURE__ */ e(S, { width: "100%", children: /* @__PURE__ */ e(
-      Fe,
+  if (i.type === "custom") {
+    const d = (o = p[i.componentId]) == null ? void 0 : o.data;
+    return d ? /* @__PURE__ */ e(w, { width: "100%", children: /* @__PURE__ */ e(
+      He,
       {
-        componentId: f.id,
-        props: { label: u, value: l, onChange: i },
-        locale: b,
+        componentId: d.id,
+        props: { label: h, value: n, onChange: r },
+        locale: v,
         dev: {
           mode: "draft",
-          components: d,
-          defaultLocale: a
+          components: p,
+          defaultLocale: b
         }
       }
-    ) }) : /* @__PURE__ */ e(V, { ...c, label: u, disabled: !0, placeholder: "Click right button select a component" });
+    ) }) : /* @__PURE__ */ e(D, { ...u, label: h, disabled: !0, placeholder: "Click right button select a component" });
   }
-  if (r.type === "component")
-    return /* @__PURE__ */ I(R, { width: "100%", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ e(S, { flex: 1, children: /* @__PURE__ */ e(
-        pe,
+  if (i.type === "component")
+    return /* @__PURE__ */ k(S, { width: "100%", direction: "row", gap: 1, children: [
+      /* @__PURE__ */ e(w, { flex: 1, children: /* @__PURE__ */ e(
+        me,
         {
-          allComponents: d,
-          label: u,
-          value: l == null ? void 0 : l.componentId,
-          onChange: (f, x) => {
-            s || !l ? i == null || i({ ...l && JSON.parse(JSON.stringify(l)), componentId: x }) : typeof l == "object" && (l.componentId = x);
+          allComponents: p,
+          label: h,
+          value: n == null ? void 0 : n.componentId,
+          onChange: (d, x) => {
+            a || !n ? r == null || r({ ...n && JSON.parse(JSON.stringify(n)), componentId: x }) : typeof n == "object" && (n.componentId = x);
           }
         }
       ) }),
-      /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
-        tr,
+      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+        cr,
         {
-          value: l,
-          valueImmutable: s,
-          onChange: i,
-          defaultLocale: a,
-          allComponents: d
+          value: n,
+          valueImmutable: a,
+          onChange: r,
+          defaultLocale: b,
+          allComponents: p
         }
       ) })
     ] });
-  if (!r.type || ["string", "url"].includes(r.type)) {
-    const f = r.type === "string" ? r.multiline : void 0, x = r.type === "url" ? l == null ? void 0 : l.url : l;
+  if (!i.type || ["string", "url"].includes(i.type)) {
+    const d = i.type === "string" ? i.multiline : void 0, x = i.type === "url" ? n == null ? void 0 : n.url : n;
     return /* @__PURE__ */ e(
-      V,
+      D,
       {
-        ...c,
-        label: u,
+        ...u,
+        label: h,
         value: typeof x == "string" ? x : "",
-        multiline: f,
-        minRows: f ? 2 : void 0,
-        maxRows: f ? 10 : void 0,
-        onChange: (y) => i == null ? void 0 : i(
-          r.type === "url" ? { ...l, url: y.target.value, mediaKitUrl: y.target.value } : y.target.value
+        multiline: d,
+        minRows: d ? 2 : void 0,
+        maxRows: d ? 10 : void 0,
+        onChange: (y) => r == null ? void 0 : r(
+          i.type === "url" ? { ...n, url: y.target.value, mediaKitUrl: y.target.value } : y.target.value
         ),
-        InputProps: r.type === "url" ? {
+        InputProps: i.type === "url" ? {
           sx: { pr: 0 },
-          endAdornment: /* @__PURE__ */ I(de, { position: "end", children: [
+          endAdornment: /* @__PURE__ */ k(de, { position: "end", children: [
             /* @__PURE__ */ e(
-              ue,
+              pe,
               {
                 onChange: async ({ response: y }) => {
-                  var O, j, B;
-                  const p = ((O = y == null ? void 0 : y.data) == null ? void 0 : O.url) || ((j = y == null ? void 0 : y.data) == null ? void 0 : j.fileUrl);
-                  let w;
-                  p && (w = await oe(p).catch(() => se(p)).catch(() => {
+                  var P, O, A;
+                  const I = ((P = y == null ? void 0 : y.data) == null ? void 0 : P.url) || ((O = y == null ? void 0 : y.data) == null ? void 0 : O.fileUrl);
+                  let g;
+                  I && (g = await oe(I).catch(() => se(I)).catch(() => {
                   }));
-                  let D = ((B = y == null ? void 0 : y.data) == null ? void 0 : B.filename) || "";
-                  D && (D = `mediakit://${D}`), i == null || i({
-                    url: p,
-                    mediaKitUrl: D,
-                    width: w == null ? void 0 : w.naturalWidth,
-                    height: w == null ? void 0 : w.naturalHeight
+                  let C = ((A = y == null ? void 0 : y.data) == null ? void 0 : A.filename) || "";
+                  C && (C = `mediakit://${C}`), r == null || r({
+                    url: I,
+                    mediaKitUrl: C,
+                    width: g == null ? void 0 : g.naturalWidth,
+                    height: g == null ? void 0 : g.naturalHeight
                   });
                 }
               }
             ),
-            /* @__PURE__ */ e(ne, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ e(Bt, { sx: { cursor: "default" }, fontSize: "small" }) })
+            /* @__PURE__ */ e(ne, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ e(Ft, { sx: { cursor: "default" }, fontSize: "small" }) })
           ] })
         } : void 0
       }
     );
   }
-  return console.error("Unsupported property type", r.type), null;
+  return console.error("Unsupported property type", i.type), null;
 }
-function rr({
+function dr({
   NumberProps: t,
-  ...r
+  ...i
 }) {
-  const { getInputProps: l } = jt(t), i = l();
-  return /* @__PURE__ */ e(V, { ...r, inputProps: i });
+  const { getInputProps: n } = Et(t), r = n();
+  return /* @__PURE__ */ e(D, { ...i, inputProps: r });
 }
-const ir = `import React from '@blocklet/pages-kit/builtin/react'
+const ar = `import React from '@blocklet/pages-kit/builtin/react'
 import { Box } from '@blocklet/pages-kit/builtin/mui/material'
 
 export default function () {
@@ -1140,122 +1124,212 @@ export default function () {
       Hello World
     </Box>
   )
-}`, lr = `console.log('hello')
+}`, ur = `console.log('hello')
 `;
-function nr({
+function pr({
   value: t
 }) {
-  const { locale: r } = W(), l = Ot(), i = J(t).doc;
-  return L(() => {
-    var s;
-    (s = t.renderer) != null && s.script || (i.transact(() => {
-      t.renderer.script = t.renderer.type === "react-component" ? ir : lr;
-    }), l());
-  }, [t]), /* @__PURE__ */ e(S, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ e(
-    _e,
+  const { locale: i } = z(), n = jt(), r = _(t).doc;
+  return Q(() => {
+    var a;
+    (a = t.renderer) != null && a.script || (r.transact(() => {
+      t.renderer.script = t.renderer.type === "react-component" ? ar : ur;
+    }), n());
+  }, [t]), /* @__PURE__ */ e(w, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ e(
+    Fe,
     {
       keyId: t.id,
-      locale: r,
+      locale: i,
       language: "typescript",
       value: t.renderer.script || "",
-      onChange: (s) => t.renderer.script = s,
+      onChange: (a) => t.renderer.script = a,
       typeScriptNoValidation: !1
     },
     t.id
   ) });
 }
-function or({ value: t }) {
-  var u, g, h;
-  const { t: r } = W(), l = J(t).doc, {
+function mr({ value: t }) {
+  var h, m, f;
+  const { t: i } = z(), n = _(t).doc, {
     state: {
-      components: i,
-      config: { defaultLocale: s },
-      resources: a
+      components: r,
+      config: { defaultLocale: a },
+      resources: b
     },
-    localState: { currentLocale: d }
-  } = re(), c = ce(), b = ((u = i[t.renderer.componentId]) == null ? void 0 : u.data) ?? ((h = (g = a.components) == null ? void 0 : g[t.renderer.componentId]) == null ? void 0 : h.component), v = ie({ variant: "dialog" });
-  return /* @__PURE__ */ I(R, { gap: 1, children: [
+    localState: { currentLocale: p }
+  } = re(), u = ce(), v = ((h = r[t.renderer.componentId]) == null ? void 0 : h.data) ?? ((f = (m = b.components) == null ? void 0 : m[t.renderer.componentId]) == null ? void 0 : f.component), c = ie({ variant: "dialog" });
+  return /* @__PURE__ */ k(S, { gap: 1, children: [
     /* @__PURE__ */ e(
-      pe,
+      me,
       {
-        allComponents: c,
+        allComponents: u,
         excludes: [t.id],
         value: t.renderer.componentId,
-        onChange: (m, n) => t.renderer.componentId = n
+        onChange: (s, l) => t.renderer.componentId = l
       }
     ),
-    b && /* @__PURE__ */ I($, { children: [
-      /* @__PURE__ */ I(R, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ e(Q, { variant: "subtitle2", children: r("parameters") }),
-        /* @__PURE__ */ e(N, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(v), children: /* @__PURE__ */ e(Ke, { fontSize: "small" }) })
+    v && /* @__PURE__ */ k(N, { children: [
+      /* @__PURE__ */ k(S, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ e(E, { variant: "subtitle2", children: i("parameters") }),
+        /* @__PURE__ */ e(j, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(c), children: /* @__PURE__ */ e(Je, { fontSize: "small" }) })
       ] }),
-      b.properties && X(Object.values(b.properties), "index").map(({ data: m }) => {
-        var n, o, f, x, y, p, w, D, O, j, B, H, _, F, z, C;
-        return /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
-          q,
+      v.properties && V(Object.values(v.properties), "index").map(({ data: s }) => {
+        var l, o, d, x, y, I, g, C, P, O, A, K, F, H, U, J;
+        return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+          W,
           {
-            allComponents: c,
-            defaultLocale: s,
-            component: b,
-            property: m,
+            allComponents: u,
+            defaultLocale: a,
+            component: v,
+            property: s,
             fullWidth: !0,
             size: "small",
-            valueImmutable: te((x = (f = (o = (n = t.renderer.properties) == null ? void 0 : n[m.id]) == null ? void 0 : o.locales) == null ? void 0 : f[d]) == null ? void 0 : x.value),
-            value: ((D = (w = (p = (y = t.renderer.properties) == null ? void 0 : y[m.id]) == null ? void 0 : p.locales) == null ? void 0 : w[d]) == null ? void 0 : D.value) ?? ((H = (B = (j = (O = t.renderer.properties) == null ? void 0 : O[m.id]) == null ? void 0 : j.locales) == null ? void 0 : B[s]) == null ? void 0 : H.value) ?? ((F = (_ = m.locales) == null ? void 0 : _[d]) == null ? void 0 : F.defaultValue) ?? ((C = (z = m.locales) == null ? void 0 : z[s]) == null ? void 0 : C.defaultValue),
-            onChange: (k) => {
-              l.transact(() => {
-                var P, A, E, Y, G;
-                (P = t.renderer).properties ?? (P.properties = {}), (A = t.renderer.properties)[E = m.id] ?? (A[E] = {}), (Y = t.renderer.properties[m.id]).locales ?? (Y.locales = {}), (G = t.renderer.properties[m.id].locales)[d] ?? (G[d] = {}), t.renderer.properties[m.id].locales[d].value = k;
+            valueImmutable: Z((x = (d = (o = (l = t.renderer.properties) == null ? void 0 : l[s.id]) == null ? void 0 : o.locales) == null ? void 0 : d[p]) == null ? void 0 : x.value),
+            value: ((C = (g = (I = (y = t.renderer.properties) == null ? void 0 : y[s.id]) == null ? void 0 : I.locales) == null ? void 0 : g[p]) == null ? void 0 : C.value) ?? ((K = (A = (O = (P = t.renderer.properties) == null ? void 0 : P[s.id]) == null ? void 0 : O.locales) == null ? void 0 : A[a]) == null ? void 0 : K.value) ?? ((H = (F = s.locales) == null ? void 0 : F[p]) == null ? void 0 : H.defaultValue) ?? ((J = (U = s.locales) == null ? void 0 : U[a]) == null ? void 0 : J.defaultValue),
+            onChange: (L) => {
+              n.transact(() => {
+                var Y, $, G, q, M;
+                (Y = t.renderer).properties ?? (Y.properties = {}), ($ = t.renderer.properties)[G = s.id] ?? ($[G] = {}), (q = t.renderer.properties[s.id]).locales ?? (q.locales = {}), (M = t.renderer.properties[s.id].locales)[p] ?? (M[p] = {}), t.renderer.properties[s.id].locales[p].value = L;
               });
             }
           }
-        ) }, m.id);
+        ) }, s.id);
       }),
-      /* @__PURE__ */ e(Me, { ...Je(v), component: t, type: "parameters" })
+      /* @__PURE__ */ e(Me, { ...$e(c), component: t, type: "parameters" })
     ] })
   ] });
 }
-function pe({
+function me({
   label: t,
-  options: r,
-  excludes: l,
-  value: i,
-  onChange: s,
-  allComponents: a,
-  ...d
+  options: i,
+  excludes: n,
+  value: r,
+  onChange: a,
+  allComponents: b,
+  ...p
 }) {
-  var u;
-  const { t: c } = W(), b = r ?? X(Object.values(Nt(a, ...l ?? [])), "index").map((g) => g.data), v = (typeof i == "string" ? (u = a[i]) == null ? void 0 : u.data : void 0) ?? null;
+  var h;
+  const { t: u } = z(), v = i ?? V(Object.values(At(b, ...n ?? [])), "index").map((m) => m.data), c = (typeof r == "string" ? (h = b[r]) == null ? void 0 : h.data : void 0) ?? null;
   return /* @__PURE__ */ e(
-    Ae,
+    Ne,
     {
-      ...d,
+      ...p,
       size: "small",
-      options: b,
+      options: v,
       autoHighlight: !0,
-      isOptionEqualToValue: (g, h) => g.id === h.id,
-      getOptionKey: (g) => g.id,
-      getOptionLabel: (g) => g.name || g.id,
-      renderInput: (g) => /* @__PURE__ */ e(V, { label: t || c("component"), ...g }),
-      value: v,
-      onChange: (g, h) => {
-        var n, o, f, x, y, p;
-        let m = {};
-        h && (m = {
-          blockletId: (n = a[h == null ? void 0 : h.id]) == null ? void 0 : n.blockletId,
-          blockletTitle: (o = a[h == null ? void 0 : h.id]) == null ? void 0 : o.blockletTitle,
-          componentName: ((x = (f = a[h == null ? void 0 : h.id]) == null ? void 0 : f.data) == null ? void 0 : x.name) || ((p = (y = a[h == null ? void 0 : h.id]) == null ? void 0 : y.data) == null ? void 0 : p.id)
-        }), s == null || s(g, h == null ? void 0 : h.id, m);
+      isOptionEqualToValue: (m, f) => m.id === f.id,
+      getOptionKey: (m) => m.id,
+      getOptionLabel: (m) => m.name || m.id,
+      renderInput: (m) => /* @__PURE__ */ e(D, { label: t || u("component"), ...m }),
+      value: c,
+      onChange: (m, f) => {
+        var l, o, d, x, y, I;
+        let s = {};
+        f && (s = {
+          blockletId: (l = b[f == null ? void 0 : f.id]) == null ? void 0 : l.blockletId,
+          blockletTitle: (o = b[f == null ? void 0 : f.id]) == null ? void 0 : o.blockletTitle,
+          componentName: ((x = (d = b[f == null ? void 0 : f.id]) == null ? void 0 : d.data) == null ? void 0 : x.name) || ((I = (y = b[f == null ? void 0 : f.id]) == null ? void 0 : y.data) == null ? void 0 : I.id)
+        }), a == null || a(m, f == null ? void 0 : f.id, s);
       }
     }
   );
 }
+function hr({
+  config: t,
+  allComponents: i,
+  defaultLocale: n,
+  propertiesValue: r,
+  currentLocale: a,
+  onChange: b,
+  props: p
+}) {
+  const { t: u } = z(), [v, c] = ue(t == null ? void 0 : t.properties);
+  Q(() => {
+    (() => {
+      var l, o;
+      ((l = t == null ? void 0 : t.renderer) == null ? void 0 : l.type) === "react-component" && Tt(t == null ? void 0 : t.properties) ? Nt((o = t == null ? void 0 : t.renderer) == null ? void 0 : o.script).then((d) => {
+        const x = Wt(d);
+        c(x);
+      }) : c(t == null ? void 0 : t.properties);
+    })();
+  }, [t]);
+  const m = te(() => !t || !v ? {} : Object.values(v).reduce(
+    (s, { data: l }) => {
+      var d, x, y, I, g;
+      const o = l.key || l.id;
+      return s[l.id] = {
+        value: (p == null ? void 0 : p[o]) ?? ((d = r == null ? void 0 : r[l.id]) == null ? void 0 : d.value) ?? ((y = (x = l.locales) == null ? void 0 : x[a]) == null ? void 0 : y.defaultValue) ?? ((g = (I = l.locales) == null ? void 0 : I[n]) == null ? void 0 : g.defaultValue),
+        key: o,
+        id: l.id,
+        type: l.type
+      }, s;
+    },
+    {}
+  ), [v, t, r, a, n])(), f = Jt(m, "key");
+  return /* @__PURE__ */ k(N, { children: [
+    /* @__PURE__ */ e(E, { variant: "subtitle1", children: u("maker.properties.parameters") }),
+    /* @__PURE__ */ e(S, { gap: 1, children: t && v && V(Object.values(v), "index").map(({ data: s }) => {
+      var l, o;
+      return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+        W,
+        {
+          allComponents: i,
+          defaultLocale: n,
+          size: "small",
+          fullWidth: !0,
+          component: t,
+          property: s,
+          valueImmutable: Z((l = r == null ? void 0 : r[s.id]) == null ? void 0 : l.value),
+          value: (o = m[s.id]) == null ? void 0 : o.value,
+          onChange: (d) => {
+            b({
+              path: ["properties", s.id],
+              value: { value: d },
+              shouldSync: !(!s.type || De.includes(s.type)),
+              excludeKeys: [],
+              key: s.key || s.id
+            });
+          }
+        }
+      ) }, s.id);
+    }) }),
+    /* @__PURE__ */ e(w, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+      He,
+      {
+        componentId: (t == null ? void 0 : t.id) || "",
+        renderType: "setting",
+        locale: a,
+        properties: m,
+        dev: { mode: "draft", components: i, defaultLocale: n },
+        props: {
+          ...p,
+          onChange: (s) => {
+            Object.keys(s).filter((o) => {
+              var d;
+              return s[o] !== ((d = f == null ? void 0 : f[o]) == null ? void 0 : d.value);
+            }).filter((o) => !(o === "locale" && !Ut(f[o], "locale"))).forEach((o) => {
+              const d = f[o];
+              d != null && d.id ? b({
+                path: ["properties", d.id],
+                value: { value: s[o] },
+                shouldSync: !(!d.type || De.includes(d.type)),
+                excludeKeys: [],
+                key: d.key || d.id
+              }) : (console.warn("property not found: ", o), Bt.warning(u("maker.properties.propertyNotFound", { key: o })));
+            });
+          }
+        }
+      }
+    ) })
+  ] });
+}
 export {
-  Zt as BasicInfo,
-  pe as CustomComponentAutocomplete,
-  Ar as CustomComponentSettings,
-  ir as DefaultReactComponentScriptTemplate,
-  lr as DefaultWebComponentScriptTemplate,
-  Lt as PropertiesConfig,
-  q as PropertyValueField
+  nr as BasicInfo,
+  me as CustomComponentAutocomplete,
+  Jr as CustomComponentSettings,
+  ar as DefaultReactComponentScriptTemplate,
+  ur as DefaultWebComponentScriptTemplate,
+  hr as ParametersConfig,
+  or as PropertiesConfig,
+  W as PropertyValueField
 };