@janbox/storefront-builder 2.0.23 → 2.0.24

package/dist/editor.js

@@ -1,22 +1,22 @@
 import { jsx as n, jsxs as w, Fragment as Fe } from "@emotion/react/jsx-runtime";
-import { at as ft, au as bt, av as wt, aw as b, ax as kt, ay as ce, az as $, aA as fe, b as Te, B as Ie, a1 as mt, aB as J, aC as Oe, aD as Ct, aE as W, aF as I, as as He, ar as vt, aG as xt, aH as yt, aI as Tt, aJ as It, aK as Mt, aL as St, aM as Et, aN as $e, aO as Lt, aP as Wt, aQ as Nt, aR as Rt, aS as At, u as H, aT as Dt, aU as Bt, aV as oe, m as Pt, i as jt, G as Vt, l as Me, o as Ft, F as Se, s as Ot, V as Ht, I as $t, aW as _t, q as Gt, P as zt, aX as _e, aY as Ut, aZ as Zt, a_ as Yt, a$ as Xt, b0 as qt, b1 as _, b2 as Ge, b3 as Jt, b4 as Kt, b5 as ze, b6 as Qt, b7 as en, b8 as tn, a0 as Ue, Z as Ze, b9 as Ee, ba as nn, N as ke, bb as rn, bc as on, bd as sn, $ as an, be as Le, bf as cn } from "./toaster-DMjFxzB_.js";
-import { bg as So, bh as Eo, bi as Lo, bj as Wo, bk as No, bl as Ro, bm as Ao, bn as Do, bo as Bo, bp as Po, bq as jo, br as Vo, bs as Fo, bt as Oo, bu as Ho, bv as $o, bw as _o, bx as Go, by as zo, bz as Uo, bA as Zo, bB as Yo, bC as Xo, bD as qo, bE as Jo, bF as Ko, bG as Qo, bH as es, bI as ts, bJ as ns, bK as rs, bL as os, bM as ss, bN as is, bO as as, bP as cs, bQ as ls, bR as ds, bS as hs, bT as us, bU as ps, bV as gs, bW as fs, bX as bs, bY as ws, bZ as ks, b_ as ms, b$ as Cs, c0 as vs, c1 as xs, c2 as ys, c3 as Ts, W as Is, c4 as Ms, c5 as Ss, c6 as Es, c7 as Ls, c8 as Ws } from "./toaster-DMjFxzB_.js";
-import { throttle as ln, isFunction as We, isNumber as se, isNil as ee, isEqual as dn } from "lodash-es";
-import { useImperativeHandle as hn, useMemo as un, isValidElement as pn, useState as P, useRef as z, useEffect as V, Fragment as ie, Suspense as gn, createElement as Ye, useCallback as fn } from "react";
+import { at as gt, au as ft, av as bt, aw as f, ax as wt, ay as ce, az as $, aA as fe, b as Te, B as Ie, a1 as kt, aB as J, aC as Oe, aD as mt, aE as W, aF as I, as as He, ar as Ct, aG as vt, aH as xt, aI as yt, aJ as Tt, aK as It, aL as Mt, aM as St, aN as $e, aO as Et, aP as Lt, aQ as Wt, aR as Nt, aS as Rt, u as H, aT as At, aU as Dt, aV as oe, m as Bt, i as Pt, G as jt, l as Me, o as Vt, F as Se, s as Ft, V as Ot, I as Ht, aW as $t, q as _t, P as zt, aX as _e, aY as Gt, aZ as Ut, a_ as Zt, a$ as Yt, b0 as Xt, b1 as _, b2 as ze, b3 as qt, b4 as Jt, b5 as Ge, b6 as Kt, b7 as Qt, b8 as en, a0 as Ue, Z as Ze, b9 as Ee, ba as tn, N as ke, bb as nn, bc as rn, bd as on, $ as sn, be as Le, bf as an } from "./toaster-DMjFxzB_.js";
+import { bg as So, bh as Eo, bi as Lo, bj as Wo, bk as No, bl as Ro, bm as Ao, bn as Do, bo as Bo, bp as Po, bq as jo, br as Vo, bs as Fo, bt as Oo, bu as Ho, bv as $o, bw as _o, bx as zo, by as Go, bz as Uo, bA as Zo, bB as Yo, bC as Xo, bD as qo, bE as Jo, bF as Ko, bG as Qo, bH as es, bI as ts, bJ as ns, bK as rs, bL as os, bM as ss, bN as is, bO as as, bP as cs, bQ as ls, bR as ds, bS as hs, bT as us, bU as ps, bV as gs, bW as fs, bX as bs, bY as ws, bZ as ks, b_ as ms, b$ as Cs, c0 as vs, c1 as xs, c2 as ys, c3 as Ts, W as Is, c4 as Ms, c5 as Ss, c6 as Es, c7 as Ls, c8 as Ws } from "./toaster-DMjFxzB_.js";
+import { throttle as cn, isFunction as We, isNumber as se, isNil as ee, isEqual as ln } from "lodash-es";
+import { useImperativeHandle as dn, useMemo as hn, isValidElement as un, useState as P, useRef as G, useEffect as V, Fragment as ie, Suspense as pn, createElement as Ye, useCallback as gn } from "react";
 import "flat";
-import { FLOATING_Z_INDEX as Xe, ThemeProvider as bn, breakpoint as wn, createTheme as Ne } from "@janbox/storefront-ui/theme";
+import { FLOATING_Z_INDEX as Xe, ThemeProvider as fn, breakpoint as bn, createTheme as Ne } from "@janbox/storefront-ui/theme";
 import "@janbox/storefront-ui/hooks";
-import { CacheProvider as kn, Global as mn, createElement as Cn } from "@emotion/react";
-import { useFloatingParentNodeId as vn, FloatingTree as xn, useFloating as le, autoUpdate as de, offset as qe, size as Je, flip as me, useClick as yn, useHover as Ke, useFocus as Qe, useDismiss as et, useRole as tt, useInteractions as nt, safePolygon as Tn, FloatingPortal as he } from "@floating-ui/react";
+import { CacheProvider as wn, Global as kn, createElement as mn } from "@emotion/react";
+import { useFloatingParentNodeId as Cn, FloatingTree as vn, useFloating as le, autoUpdate as de, offset as qe, size as Je, flip as me, useClick as xn, useHover as Ke, useFocus as Qe, useDismiss as et, useRole as tt, useInteractions as nt, safePolygon as yn, FloatingPortal as he } from "@floating-ui/react";
 import "react-colorful";
 import "overlayscrollbars-react";
 import "@tanstack/react-virtual";
-import In, { useFrame as Ce } from "react-frame-component";
+import Tn, { useFrame as Ce } from "react-frame-component";
 import "react-dropzone";
 import "react-datepicker";
-import { a as rt, C as ot } from "./index-BBoR6Gy_.js";
+import { a as rt, C as In } from "./index-BBoR6Gy_.js";
 import "@janbox/storefront-ui/utils";
-import { useToggle as st } from "usehooks-ts";
+import { useToggle as ot } from "usehooks-ts";
 import "@hello-pangea/dnd";
 import "@janbox/storefront-ui";
 class Mn {
@@ -54,9 +54,9 @@ class Mn {
 }
 const Sn = () => new Mn();
 function En() {
-  return ft(Sn);
+  return gt(Sn);
 }
-const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn, { children: /* @__PURE__ */ n(Re, { ...e }) }), Re = ({
+const Ln = (e) => Cn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(vn, { children: /* @__PURE__ */ n(Re, { ...e }) }), Re = ({
   open: e,
   placement: t = "bottom",
   onOpenChange: o,
@@ -75,27 +75,27 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
   },
   elements: d,
   offsetOptions: k = 4,
-  sizeOptions: u,
-  autoUpdateOptions: p,
+  sizeOptions: h,
+  autoUpdateOptions: u,
   ref: c
 }) => {
-  const g = le({
+  const p = le({
     open: e,
     onOpenChange: o,
     placement: t,
-    middleware: [qe(k), Je(u), me()],
-    whileElementsMounted: (...A) => de(...A, p),
+    middleware: [qe(k), Je(h), me()],
+    whileElementsMounted: (...A) => de(...A, u),
     elements: d
   });
-  hn(c, () => g, [g]);
-  const { context: f } = g, h = yn(f, s), y = Ke(f, a), m = Qe(f, l), T = et(f, r), S = tt(f), F = nt([h, T, S, y, m]), j = un(
+  dn(c, () => p, [p]);
+  const { context: b } = p, g = xn(b, s), x = Ke(b, a), m = Qe(b, l), T = et(b, r), S = tt(b), F = nt([g, T, S, x, m]), j = hn(
     () => ({
-      ...g,
+      ...p,
       ...F
     }),
-    [g, F]
+    [p, F]
   );
-  return /* @__PURE__ */ n(bt.Provider, { value: j, children: i });
+  return /* @__PURE__ */ n(ft.Provider, { value: j, children: i });
 }, go = ({ width: e = 600, children: t, ...o }) => /* @__PURE__ */ n(
   Ln,
   {
@@ -104,7 +104,7 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
     },
     ...o,
     children: /* @__PURE__ */ w(
-      wt,
+      bt,
       {
         floatingOverlayProps: {
           disabled: !1,
@@ -141,7 +141,7 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
                 flexDirection: "column",
                 overflow: "hidden",
                 borderRadius: 8,
-                backgroundColor: b.palette.ink["6s"],
+                backgroundColor: f.palette.ink["6s"],
                 maxWidth: "100%",
                 color: "white"
               },
@@ -152,21 +152,21 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
       }
     )
   }
-), fo = () => kt(), bo = ({ ref: e, ...t }) => /* @__PURE__ */ n(
+), fo = () => wt(), bo = ({ ref: e, ...t }) => /* @__PURE__ */ n(
   ce,
   {
-    css: { paddingBlock: 12, paddingInline: 20, flex: 1, overflow: "auto", ...b.text.xs },
+    css: { paddingBlock: 12, paddingInline: 20, flex: 1, overflow: "auto", ...f.text.xs },
     ...t,
     ref: e
   }
 ), wo = ({ required: e, children: t, ...o }) => /* @__PURE__ */ w("div", { css: { marginBottom: 6, display: "flex", width: "fit-content" }, ...o, children: [
-  pn(t) ? t : /* @__PURE__ */ n("label", { children: t }),
-  e && /* @__PURE__ */ n("span", { css: { color: b.palette.red["6s"] }, children: " *" })
+  un(t) ? t : /* @__PURE__ */ n("label", { children: t }),
+  e && /* @__PURE__ */ n("span", { css: { color: f.palette.red["6s"] }, children: " *" })
 ] }), ko = () => {
-  const [e, t] = P(0), [o, r] = P(!1), i = z(null), s = (k, u) => {
+  const [e, t] = P(0), [o, r] = P(!1), i = G(null), s = (k, h) => {
     if (!i.current) return 0;
-    const p = i.current.getBoundingClientRect(), c = p.left + p.width / 2, g = p.top + p.height / 2, f = k - c, h = u - g;
-    return (Math.atan2(h, f) * (180 / Math.PI) + 360) % 360;
+    const u = i.current.getBoundingClientRect(), c = u.left + u.width / 2, p = u.top + u.height / 2, b = k - c, g = h - p;
+    return (Math.atan2(g, b) * (180 / Math.PI) + 360) % 360;
   };
   return /* @__PURE__ */ w(
     "div",
@@ -178,8 +178,8 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
       },
       onMouseMove: (k) => {
         if (o) {
-          const u = s(k.clientX, k.clientY);
-          t(Math.round(u));
+          const h = s(k.clientX, k.clientY);
+          t(Math.round(h));
         }
       },
       onMouseUp: () => {
@@ -200,8 +200,8 @@ const Ln = (e) => vn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(xn,
             viewBox: "0 0 200 200",
             onMouseDown: (k) => {
               r(!0);
-              const u = s(k.clientX, k.clientY);
-              t(Math.round(u));
+              const h = s(k.clientX, k.clientY);
+              t(Math.round(h));
             },
             style: { cursor: "grab" },
             children: [
@@ -274,11 +274,11 @@ var Rn = /* @__PURE__ */ (function() {
       return (i = r.parentNode) == null ? void 0 : i.removeChild(r);
     }), this.tags = [], this.ctr = 0;
   }, e;
-})(), L = "-ms-", ae = "-moz-", C = "-webkit-", it = "comm", ve = "rule", xe = "decl", An = "@import", at = "@keyframes", Dn = "@layer", Bn = Math.abs, ue = String.fromCharCode, Pn = Object.assign;
+})(), L = "-ms-", ae = "-moz-", C = "-webkit-", st = "comm", ve = "rule", xe = "decl", An = "@import", it = "@keyframes", Dn = "@layer", Bn = Math.abs, ue = String.fromCharCode, Pn = Object.assign;
 function jn(e, t) {
   return E(e, 0) ^ 45 ? (((t << 2 ^ E(e, 0)) << 2 ^ E(e, 1)) << 2 ^ E(e, 2)) << 2 ^ E(e, 3) : 0;
 }
-function ct(e) {
+function at(e) {
   return e.trim();
 }
 function Vn(e, t) {
@@ -308,7 +308,7 @@ function Q(e, t) {
 function Fn(e, t) {
   return e.map(t).join("");
 }
-var pe = 1, U = 1, lt = 0, N = 0, M = 0, Z = "";
+var pe = 1, U = 1, ct = 0, N = 0, M = 0, Z = "";
 function ge(e, t, o, r, i, s, l) {
   return { value: e, root: t, parent: o, type: r, props: i, children: s, line: pe, column: U, length: l, return: "" };
 }
@@ -322,7 +322,7 @@ function Hn() {
   return M = N > 0 ? E(Z, --N) : 0, U--, M === 10 && (U = 1, pe--), M;
 }
 function R() {
-  return M = N < lt ? E(Z, N++) : 0, U++, M === 10 && (U = 1, pe++), M;
+  return M = N < ct ? E(Z, N++) : 0, U++, M === 10 && (U = 1, pe++), M;
 }
 function B() {
   return E(Z, N);
@@ -371,14 +371,14 @@ function q(e) {
   }
   return 0;
 }
-function dt(e) {
-  return pe = U = 1, lt = D(Z = e), N = 0, [];
+function lt(e) {
+  return pe = U = 1, ct = D(Z = e), N = 0, [];
 }
-function ht(e) {
+function dt(e) {
   return Z = "", e;
 }
 function ne(e) {
-  return ct(K(N - 1, we(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+  return at(K(N - 1, we(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
 function $n(e) {
   for (; (M = B()) && M < 33; )
@@ -412,139 +412,139 @@ function we(e) {
     }
   return N;
 }
-function Gn(e, t) {
+function zn(e, t) {
   for (; R() && e + M !== 57; )
     if (e + M === 84 && B() === 47)
       break;
   return "/*" + K(t, N - 1) + "*" + ue(e === 47 ? e : R());
 }
-function zn(e) {
+function Gn(e) {
   for (; !q(B()); )
     R();
   return K(e, N);
 }
 function Un(e) {
-  return ht(re("", null, null, null, [""], e = dt(e), 0, [0], e));
+  return dt(re("", null, null, null, [""], e = lt(e), 0, [0], e));
 }
 function re(e, t, o, r, i, s, l, a, d) {
-  for (var k = 0, u = 0, p = l, c = 0, g = 0, f = 0, h = 1, y = 1, m = 1, T = 0, S = "", F = i, j = s, A = r, x = S; y; )
-    switch (f = T, T = R()) {
+  for (var k = 0, h = 0, u = l, c = 0, p = 0, b = 0, g = 1, x = 1, m = 1, T = 0, S = "", F = i, j = s, A = r, y = S; x; )
+    switch (b = T, T = R()) {
       // (
       case 40:
-        if (f != 108 && E(x, p - 1) == 58) {
-          be(x += v(ne(T), "&", "&\f"), "&\f") != -1 && (m = -1);
+        if (b != 108 && E(y, u - 1) == 58) {
+          be(y += v(ne(T), "&", "&\f"), "&\f") != -1 && (m = -1);
           break;
         }
       // " ' [
       case 34:
       case 39:
       case 91:
-        x += ne(T);
+        y += ne(T);
         break;
       // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
-        x += $n(f);
+        y += $n(b);
         break;
       // \
       case 92:
-        x += _n(te() - 1, 7);
+        y += _n(te() - 1, 7);
         continue;
       // /
       case 47:
         switch (B()) {
           case 42:
           case 47:
-            Q(Zn(Gn(R(), te()), t, o), d);
+            Q(Zn(zn(R(), te()), t, o), d);
             break;
           default:
-            x += "/";
+            y += "/";
         }
         break;
       // {
-      case 123 * h:
-        a[k++] = D(x) * m;
+      case 123 * g:
+        a[k++] = D(y) * m;
       // } ; \0
-      case 125 * h:
+      case 125 * g:
       case 59:
       case 0:
         switch (T) {
           // \0 }
           case 0:
           case 125:
-            y = 0;
+            x = 0;
           // ;
-          case 59 + u:
-            m == -1 && (x = v(x, /\f/g, "")), g > 0 && D(x) - p && Q(g > 32 ? De(x + ";", r, o, p - 1) : De(v(x, " ", "") + ";", r, o, p - 2), d);
+          case 59 + h:
+            m == -1 && (y = v(y, /\f/g, "")), p > 0 && D(y) - u && Q(p > 32 ? De(y + ";", r, o, u - 1) : De(v(y, " ", "") + ";", r, o, u - 2), d);
             break;
           // @ ;
           case 59:
-            x += ";";
+            y += ";";
           // { rule/at-rule
           default:
-            if (Q(A = Ae(x, t, o, k, u, i, a, S, F = [], j = [], p), s), T === 123)
-              if (u === 0)
-                re(x, t, A, A, F, s, p, a, j);
+            if (Q(A = Ae(y, t, o, k, h, i, a, S, F = [], j = [], u), s), T === 123)
+              if (h === 0)
+                re(y, t, A, A, F, s, u, a, j);
               else
-                switch (c === 99 && E(x, 3) === 110 ? 100 : c) {
+                switch (c === 99 && E(y, 3) === 110 ? 100 : c) {
                   // d l m s
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    re(e, A, A, r && Q(Ae(e, A, A, 0, 0, i, a, S, i, F = [], p), j), i, j, p, a, r ? F : j);
+                    re(e, A, A, r && Q(Ae(e, A, A, 0, 0, i, a, S, i, F = [], u), j), i, j, u, a, r ? F : j);
                     break;
                   default:
-                    re(x, A, A, A, [""], j, 0, a, j);
+                    re(y, A, A, A, [""], j, 0, a, j);
                 }
         }
-        k = u = g = 0, h = m = 1, S = x = "", p = l;
+        k = h = p = 0, g = m = 1, S = y = "", u = l;
         break;
       // :
       case 58:
-        p = 1 + D(x), g = f;
+        u = 1 + D(y), p = b;
       default:
-        if (h < 1) {
+        if (g < 1) {
           if (T == 123)
-            --h;
-          else if (T == 125 && h++ == 0 && Hn() == 125)
+            --g;
+          else if (T == 125 && g++ == 0 && Hn() == 125)
             continue;
         }
-        switch (x += ue(T), T * h) {
+        switch (y += ue(T), T * g) {
           // &
           case 38:
-            m = u > 0 ? 1 : (x += "\f", -1);
+            m = h > 0 ? 1 : (y += "\f", -1);
             break;
           // ,
           case 44:
-            a[k++] = (D(x) - 1) * m, m = 1;
+            a[k++] = (D(y) - 1) * m, m = 1;
             break;
           // @
           case 64:
-            B() === 45 && (x += ne(R())), c = B(), u = p = D(S = x += zn(te())), T++;
+            B() === 45 && (y += ne(R())), c = B(), h = u = D(S = y += Gn(te())), T++;
             break;
           // -
           case 45:
-            f === 45 && D(x) == 2 && (h = 0);
+            b === 45 && D(y) == 2 && (g = 0);
         }
     }
   return s;
 }
-function Ae(e, t, o, r, i, s, l, a, d, k, u) {
-  for (var p = i - 1, c = i === 0 ? s : [""], g = ye(c), f = 0, h = 0, y = 0; f < r; ++f)
-    for (var m = 0, T = X(e, p + 1, p = Bn(h = l[f])), S = e; m < g; ++m)
-      (S = ct(h > 0 ? c[m] + " " + T : v(T, /&\f/g, c[m]))) && (d[y++] = S);
-  return ge(e, t, o, i === 0 ? ve : a, d, k, u);
+function Ae(e, t, o, r, i, s, l, a, d, k, h) {
+  for (var u = i - 1, c = i === 0 ? s : [""], p = ye(c), b = 0, g = 0, x = 0; b < r; ++b)
+    for (var m = 0, T = X(e, u + 1, u = Bn(g = l[b])), S = e; m < p; ++m)
+      (S = at(g > 0 ? c[m] + " " + T : v(T, /&\f/g, c[m]))) && (d[x++] = S);
+  return ge(e, t, o, i === 0 ? ve : a, d, k, h);
 }
 function Zn(e, t, o) {
-  return ge(e, t, o, it, ue(On()), X(e, 2, -2), 0);
+  return ge(e, t, o, st, ue(On()), X(e, 2, -2), 0);
 }
 function De(e, t, o, r) {
   return ge(e, t, o, xe, X(e, 0, r), X(e, r + 1, -1), r);
 }
-function G(e, t) {
+function z(e, t) {
   for (var o = "", r = ye(e), i = 0; i < r; i++)
     o += t(e[i], i, e, t) || "";
   return o;
@@ -556,14 +556,14 @@ function Yn(e, t, o, r) {
     case An:
     case xe:
       return e.return = e.return || e.value;
-    case it:
+    case st:
       return "";
-    case at:
-      return e.return = e.value + "{" + G(e.children, r) + "}";
+    case it:
+      return e.return = e.value + "{" + z(e.children, r) + "}";
     case ve:
       e.value = e.props.join(",");
   }
-  return D(o = G(e.children, r)) ? e.return = e.value + "{" + o + "}" : "";
+  return D(o = z(e.children, r)) ? e.return = e.value + "{" + o + "}" : "";
 }
 function Xn(e) {
   var t = ye(e);
@@ -604,7 +604,7 @@ var Jn = function(t, o, r) {
   while (i = R());
   return t;
 }, Qn = function(t, o) {
-  return ht(Kn(dt(t), o));
+  return dt(Kn(lt(t), o));
 }, Be = /* @__PURE__ */ new WeakMap(), er = function(t) {
   if (!(t.type !== "rule" || !t.parent || // positive .length indicates that this rule contains pseudo
   // negative .length indicates that this rule has been already prefixed
@@ -614,8 +614,8 @@ var Jn = function(t, o, r) {
     if (!(t.props.length === 1 && o.charCodeAt(0) !== 58 && !Be.get(r)) && !i) {
       Be.set(t, !0);
       for (var s = [], l = Qn(o, s), a = r.props, d = 0, k = 0; d < l.length; d++)
-        for (var u = 0; u < a.length; u++, k++)
-          t.props[k] = s[d] ? l[d].replace(/&\f/g, a[u]) : a[u] + " " + l[d];
+        for (var h = 0; h < a.length; h++, k++)
+          t.props[k] = s[d] ? l[d].replace(/&\f/g, a[h]) : a[h] + " " + l[d];
     }
   }
 }, tr = function(t) {
@@ -626,7 +626,7 @@ var Jn = function(t, o, r) {
     o.charCodeAt(2) === 98 && (t.return = "", t.value = "");
   }
 };
-function ut(e, t) {
+function ht(e, t) {
   switch (jn(e, t)) {
     // color-adjust
     case 5103:
@@ -734,7 +734,7 @@ function ut(e, t) {
           return v(e, /(.+:)(.+)-([^]+)/, "$1" + C + "$2-$3$1" + ae + (E(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
         // (s)tretch
         case 115:
-          return ~be(e, "stretch") ? ut(v(e, "stretch", "fill-available"), t) + e : e;
+          return ~be(e, "stretch") ? ht(v(e, "stretch", "fill-available"), t) + e : e;
       }
       break;
     // position: sticky
@@ -771,10 +771,10 @@ function ut(e, t) {
 var nr = function(t, o, r, i) {
   if (t.length > -1 && !t.return) switch (t.type) {
     case xe:
-      t.return = ut(t.value, t.length);
+      t.return = ht(t.value, t.length);
       break;
-    case at:
-      return G([Y(t, {
+    case it:
+      return z([Y(t, {
         value: v(t.value, "@", "@" + C)
       })], i);
     case ve:
@@ -783,12 +783,12 @@ var nr = function(t, o, r, i) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
-            return G([Y(t, {
+            return z([Y(t, {
               props: [v(s, /:(read-\w+)/, ":" + ae + "$1")]
             })], i);
           // :placeholder
           case "::placeholder":
-            return G([Y(t, {
+            return z([Y(t, {
               props: [v(s, /:(plac\w+)/, ":" + C + "input-$1")]
             }), Y(t, {
               props: [v(s, /:(plac\w+)/, ":" + ae + "$1")]
@@ -803,9 +803,9 @@ var nr = function(t, o, r, i) {
   var o = t.key;
   if (o === "css") {
     var r = document.querySelectorAll("style[data-emotion]:not([data-s])");
-    Array.prototype.forEach.call(r, function(h) {
-      var y = h.getAttribute("data-emotion");
-      y.indexOf(" ") !== -1 && (document.head.appendChild(h), h.setAttribute("data-s", ""));
+    Array.prototype.forEach.call(r, function(g) {
+      var x = g.getAttribute("data-emotion");
+      x.indexOf(" ") !== -1 && (document.head.appendChild(g), g.setAttribute("data-s", ""));
     });
   }
   var i = t.stylisPlugins || rr, s = {}, l, a = [];
@@ -813,24 +813,24 @@ var nr = function(t, o, r, i) {
     // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
     document.querySelectorAll('style[data-emotion^="' + o + ' "]'),
-    function(h) {
-      for (var y = h.getAttribute("data-emotion").split(" "), m = 1; m < y.length; m++)
-        s[y[m]] = !0;
-      a.push(h);
+    function(g) {
+      for (var x = g.getAttribute("data-emotion").split(" "), m = 1; m < x.length; m++)
+        s[x[m]] = !0;
+      a.push(g);
     }
   );
   var d, k = [er, tr];
   {
-    var u, p = [Yn, qn(function(h) {
-      u.insert(h);
-    })], c = Xn(k.concat(i, p)), g = function(y) {
-      return G(Un(y), c);
+    var h, u = [Yn, qn(function(g) {
+      h.insert(g);
+    })], c = Xn(k.concat(i, u)), p = function(x) {
+      return z(Un(x), c);
     };
-    d = function(y, m, T, S) {
-      u = T, g(y ? y + "{" + m.styles + "}" : m.styles), S && (f.inserted[m.name] = !0);
+    d = function(x, m, T, S) {
+      h = T, p(x ? x + "{" + m.styles + "}" : m.styles), S && (b.inserted[m.name] = !0);
     };
   }
-  var f = {
+  var b = {
     key: o,
     sheet: new Rn({
       key: o,
@@ -845,39 +845,39 @@ var nr = function(t, o, r, i) {
     registered: {},
     insert: d
   };
-  return f.sheet.hydrate(a), f;
+  return b.sheet.hydrate(a), b;
 };
-const pt = ({ children: e, viewport: t, containerProps: o }) => {
-  const r = z(null), { theme: i } = $(), [s, l] = P({
+const ut = ({ children: e, viewport: t, containerProps: o }) => {
+  const r = G(null), { theme: i } = $(), [s, l] = P({
     width: 0,
     height: 0
   });
   V(() => {
-    const f = ln((y) => {
-      const m = y.at(0)?.target;
+    const b = cn((x) => {
+      const m = x.at(0)?.target;
       if (!m) return;
       const { width: T, height: S } = m.getBoundingClientRect();
       l(() => ({
         width: T,
         height: S
       }));
-    }, 200), h = new ResizeObserver(f);
-    return r.current && h.observe(r.current), () => h.disconnect();
+    }, 200), g = new ResizeObserver(b);
+    return r.current && g.observe(r.current), () => g.disconnect();
   }, []);
-  const a = We(t?.width) ? t.width(s.width) : t?.width, d = We(t?.height) ? t.height(s.height) : t?.height, k = se(a) ? s.width / a : 1, u = se(d) ? s.height / d : 1, p = Math.min(k, u, 1), c = (d ?? s.height / p) || 0, g = (a ?? s.width / p) || 0;
+  const a = We(t?.width) ? t.width(s.width) : t?.width, d = We(t?.height) ? t.height(s.height) : t?.height, k = se(a) ? s.width / a : 1, h = se(d) ? s.height / d : 1, u = Math.min(k, h, 1), c = (d ?? s.height / u) || 0, p = (a ?? s.width / u) || 0;
   return /* @__PURE__ */ n("div", { ...o, css: { padding: 8, width: "100%", height: "100%", backgroundColor: fe.ink["1s"] }, children: /* @__PURE__ */ n("div", { css: { position: "relative", overflow: "hidden", width: "100%", height: "100%" }, ref: r, children: /* @__PURE__ */ n(
     "div",
     {
       style: {
-        transform: `scale(${p})`,
-        width: g,
+        transform: `scale(${u})`,
+        width: p,
         height: c,
-        marginLeft: (s.width - g) / 2,
+        marginLeft: (s.width - p) / 2,
         marginTop: (s.height - c) / 2
       },
       css: { position: "absolute" },
       children: /* @__PURE__ */ n(
-        In,
+        Tn,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
@@ -889,11 +889,11 @@ const pt = ({ children: e, viewport: t, containerProps: o }) => {
     }
   ) }) });
 }, sr = ({ children: e, theme: t }) => {
-  const { document: o, window: r } = Ce(), [i, s] = P(!1), l = z(window.customElements.define.bind(window.customElements));
+  const { document: o, window: r } = Ce(), [i, s] = P(!1), l = G(window.customElements.define.bind(window.customElements));
   V(() => {
     const d = l.current;
-    return r && (window.customElements.define = function(k, u, p) {
-      window.customElements.get(k) || r.customElements.define(k, u, p), d(k, u, p);
+    return r && (window.customElements.define = function(k, h, u) {
+      window.customElements.get(k) || r.customElements.define(k, h, u), d(k, h, u);
     }), o?.head.replaceWith(document.head.cloneNode(!0)), s(!0), () => {
       window.customElements.define = d;
     };
@@ -902,9 +902,9 @@ const pt = ({ children: e, viewport: t, containerProps: o }) => {
     key: "css",
     container: o?.head
   });
-  return i ? /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ w(kn, { value: a, children: [
+  return i ? /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ w(wn, { value: a, children: [
     /* @__PURE__ */ n(
-      mn,
+      kn,
       {
         styles: {
           ".frame-content": {
@@ -925,7 +925,7 @@ const pt = ({ children: e, viewport: t, containerProps: o }) => {
         }
       }
     ),
-    /* @__PURE__ */ n(bn, { root: o?.body, theme: t, children: e })
+    /* @__PURE__ */ n(fn, { root: o?.body, theme: t, children: e })
   ] }) }) : null;
 };
 var O = /* @__PURE__ */ ((e) => (e[e.Pixels = 0] = "Pixels", e[e.Unitless = 1] = "Unitless", e))(O || {});
@@ -941,24 +941,24 @@ const ir = [
     /* Unitless */
   }
 ], mo = ({ name: e, responsive: t = !0, value: o, onChange: r }) => {
-  const i = se(o?.lineHeight) ? O.Unitless : O.Pixels, s = i === O.Unitless ? 0.1 : 1, l = mt(o?.lineHeight, "float"), a = ({ unit: c, value: g }) => {
-    if (ee(g)) {
+  const i = se(o?.lineHeight) ? O.Unitless : O.Pixels, s = i === O.Unitless ? 0.1 : 1, l = kt(o?.lineHeight, "float"), a = ({ unit: c, value: p }) => {
+    if (ee(p)) {
       r?.({
-        lineHeight: c === O.Unitless ? 1 : g
+        lineHeight: c === O.Unitless ? 1 : p
       });
       return;
     }
     r?.({
-      lineHeight: c === O.Unitless ? Number(g.toFixed(1)) : `${g}px`
+      lineHeight: c === O.Unitless ? Number(p.toFixed(1)) : `${p}px`
     });
   }, d = (c) => {
     a({ unit: Number(c.target.value) });
   }, k = (c) => {
-    const g = isNaN(c.target.valueAsNumber) ? void 0 : c.target.valueAsNumber;
-    a({ unit: i, value: g });
-  }, u = (c) => {
+    const p = isNaN(c.target.valueAsNumber) ? void 0 : c.target.valueAsNumber;
+    a({ unit: i, value: p });
+  }, h = (c) => {
     c.stopPropagation(), !ee(l) && a({ unit: i, value: Math.max(l + s, 0) });
-  }, p = (c) => {
+  }, u = (c) => {
     c.stopPropagation(), !ee(l) && a({ unit: i, value: Math.max(l - s, 0) });
   };
   return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
@@ -974,14 +974,14 @@ const ir = [
       c.value
     )) }) }),
     /* @__PURE__ */ n("div", { css: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n("div", { css: { width: "50%" }, children: /* @__PURE__ */ n(
-      Ct,
+      mt,
       {
         fractionDigits: 1,
         type: i === O.Unitless ? "decimal" : "integer",
         value: l ?? "",
         onChange: k,
-        prefix: /* @__PURE__ */ n(W, { disabled: se(l) && l <= 0, onClick: p, children: /* @__PURE__ */ n(I, { source: vt }) }),
-        suffix: /* @__PURE__ */ n(W, { onClick: u, children: /* @__PURE__ */ n(I, { source: He }) }),
+        prefix: /* @__PURE__ */ n(W, { disabled: se(l) && l <= 0, onClick: u, children: /* @__PURE__ */ n(I, { source: Ct }) }),
+        suffix: /* @__PURE__ */ n(W, { onClick: h, children: /* @__PURE__ */ n(I, { source: He }) }),
         mode: "onBlur",
         css: { textAlign: "center" },
         placeholder: "normal"
@@ -1028,7 +1028,7 @@ const ir = [
     r?.({ display: a });
   };
   return /* @__PURE__ */ n(J, { name: e ?? "Display", responsive: t, children: /* @__PURE__ */ n(
-    xt,
+    vt,
     {
       css: {
         width: "50%"
@@ -1064,8 +1064,8 @@ const ir = [
         flexShrink: 1
       }
     }
-  ], l = s.find((d) => dn(d.rawValue, i))?.value, a = (d) => {
-    const k = s.find((u) => u.value === Number(d.target.value));
+  ], l = s.find((d) => ln(d.rawValue, i))?.value, a = (d) => {
+    const k = s.find((h) => h.value === Number(d.target.value));
     k && t?.(k.rawValue);
   };
   return /* @__PURE__ */ n(J, { name: o ?? "Content", responsive: r, children: /* @__PURE__ */ n("div", { css: { display: "inline-flex", alignItems: "center", gap: 8 }, children: s.map((d) => /* @__PURE__ */ n(
@@ -1079,13 +1079,13 @@ const ir = [
     d.value
   )) }) });
 }, xo = ({ name: e, value: t, onChange: o, responsive: r = !0 }) => {
-  const i = z(null), s = (l) => {
+  const i = G(null), s = (l) => {
     o?.({
       minWidth: l
     });
   };
   return /* @__PURE__ */ n(J, { name: e ?? "Min width", responsive: r, children: /* @__PURE__ */ n("div", { css: { position: "relative", width: "50%" }, children: /* @__PURE__ */ n(
-    yt,
+    xt,
     {
       fullWidth: !0,
       wrapRef: i,
@@ -1109,8 +1109,8 @@ const ir = [
       }
     });
   };
-  return /* @__PURE__ */ n(J, { name: "Text style", children: /* @__PURE__ */ w(Tt, { open: o, onOpenChange: r, placement: "right", children: [
-    /* @__PURE__ */ n(It, { children: /* @__PURE__ */ w(
+  return /* @__PURE__ */ n(J, { name: "Text style", children: /* @__PURE__ */ w(yt, { open: o, onOpenChange: r, placement: "right", children: [
+    /* @__PURE__ */ n(Tt, { children: /* @__PURE__ */ w(
       "button",
       {
         css: [
@@ -1123,31 +1123,31 @@ const ir = [
             textAlign: "left",
             width: "50%",
             height: 32,
-            backgroundColor: b.palette.white["1s"],
+            backgroundColor: f.palette.white["1s"],
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            ...b.text.xs
+            ...f.text.xs
           },
-          o && { backgroundColor: b.palette.black["7s"] }
+          o && { backgroundColor: f.palette.black["7s"] }
         ],
         children: [
-          /* @__PURE__ */ n(I, { css: { color: "white" }, source: Mt }),
+          /* @__PURE__ */ n(I, { css: { color: "white" }, source: It }),
           /* @__PURE__ */ n("span", { children: "Auto" })
         ]
       }
     ) }),
-    /* @__PURE__ */ n(St, { children: /* @__PURE__ */ w("div", { style: { width: 280 }, children: [
+    /* @__PURE__ */ n(Mt, { children: /* @__PURE__ */ w("div", { style: { width: 280 }, children: [
       /* @__PURE__ */ w("div", { css: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ n("div", { css: { fontWeight: 500 }, children: "Text style" }),
-        /* @__PURE__ */ n(Et, { children: /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(I, { source: $e }) }) })
+        /* @__PURE__ */ n(St, { children: /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(I, { source: $e }) }) })
       ] }),
-      /* @__PURE__ */ n("hr", { css: { marginBlock: 8, borderColor: b.palette.white["1s"] } }),
+      /* @__PURE__ */ n("hr", { css: { marginBlock: 8, borderColor: f.palette.white["1s"] } }),
       /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-        /* @__PURE__ */ n(Lt, { value: e?.sizeVariant, onChange: i }),
-        /* @__PURE__ */ n(Wt, { value: { color: e?.css?.color }, onChange: s }),
+        /* @__PURE__ */ n(Et, { value: e?.sizeVariant, onChange: i }),
+        /* @__PURE__ */ n(Lt, { value: { color: e?.css?.color }, onChange: s }),
         /* @__PURE__ */ n(
-          Nt,
+          Wt,
           {
             name: "Style",
             value: {
@@ -1158,9 +1158,9 @@ const ir = [
             onChange: s
           }
         ),
-        /* @__PURE__ */ n(Rt, { value: { fontWeight: e?.css?.fontWeight }, onChange: s }),
+        /* @__PURE__ */ n(Nt, { value: { fontWeight: e?.css?.fontWeight }, onChange: s }),
         /* @__PURE__ */ n(
-          At,
+          Rt,
           {
             value: {
               textTransform: e?.css?.textTransform
@@ -1187,22 +1187,27 @@ const ir = [
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3.11799 12.467C2.96099 12.176 2.96099 11.823 3.11799 11.532C5.00999 8.033 8.50499 5 12 5C15.495 5 18.99 8.033 20.882 11.533C21.039 11.824 21.039 12.177 20.882 12.468C18.99 15.967 15.495 19 12 19C8.50499 19 5.00999 15.967 3.11799 12.467Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.1213 9.87868C15.2929 11.0502 15.2929 12.9497 14.1213 14.1213C12.9497 15.2929 11.0502 15.2929 9.87866 14.1213C8.70709 12.9497 8.70709 11.0502 9.87866 9.87868C11.0502 8.70711 12.9497 8.70711 14.1213 9.87868" stroke="currentColor" stroke-width="1.4286" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, lr = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M9.75 3C8.50736 3 7.5 4.00736 7.5 5.25C7.5 5.66421 7.83579 6 8.25 6C8.66421 6 9 5.66421 9 5.25C9 4.83579 9.33579 4.5 9.75 4.5H13.75C14.1642 4.5 14.5 4.83579 14.5 5.25V14.75C14.5 15.1642 14.1642 15.5 13.75 15.5H9.75C9.33579 15.5 9 15.1642 9 14.75C9 14.3358 8.66421 14 8.25 14C7.83579 14 7.5 14.3358 7.5 14.75C7.5 15.9926 8.50736 17 9.75 17H13.75C14.9926 17 16 15.9926 16 14.75V5.25C16 4.00736 14.9926 3 13.75 3H9.75Z" fill="currentColor"></path><path d="M12.25 10.75C12.6642 10.75 13 10.4142 13 10C13 9.58579 12.6642 9.25 12.25 9.25L6.56066 9.25L7.53033 8.28033C7.82322 7.98744 7.82322 7.51256 7.53033 7.21967C7.23744 6.92678 6.76256 6.92678 6.46967 7.21967L4.21967 9.46967C4.07902 9.61032 4 9.80109 4 10C4 10.1989 4.07902 10.3897 4.21967 10.5303L6.46967 12.7803C6.76256 13.0732 7.23744 13.0732 7.53033 12.7803C7.82322 12.4874 7.82322 12.0126 7.53033 11.7197L6.56066 10.75H12.25Z" fill="currentColor"></path></svg>', dr = () => {
-  const { mode: e, screen: t, setState: o, handlers: r } = $(), [i, s] = P(!1), { actions: l, canRedo: a, canUndo: d, query: k } = H((f, h) => ({
-    enabled: f.options.enabled,
-    canUndo: h.history.canUndo(),
-    canRedo: h.history.canRedo()
-  })), u = (f) => {
-    o({ screen: f });
+`, lr = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M9.75 3C8.50736 3 7.5 4.00736 7.5 5.25C7.5 5.66421 7.83579 6 8.25 6C8.66421 6 9 5.66421 9 5.25C9 4.83579 9.33579 4.5 9.75 4.5H13.75C14.1642 4.5 14.5 4.83579 14.5 5.25V14.75C14.5 15.1642 14.1642 15.5 13.75 15.5H9.75C9.33579 15.5 9 15.1642 9 14.75C9 14.3358 8.66421 14 8.25 14C7.83579 14 7.5 14.3358 7.5 14.75C7.5 15.9926 8.50736 17 9.75 17H13.75C14.9926 17 16 15.9926 16 14.75V5.25C16 4.00736 14.9926 3 13.75 3H9.75Z" fill="currentColor"></path><path d="M12.25 10.75C12.6642 10.75 13 10.4142 13 10C13 9.58579 12.6642 9.25 12.25 9.25L6.56066 9.25L7.53033 8.28033C7.82322 7.98744 7.82322 7.51256 7.53033 7.21967C7.23744 6.92678 6.76256 6.92678 6.46967 7.21967L4.21967 9.46967C4.07902 9.61032 4 9.80109 4 10C4 10.1989 4.07902 10.3897 4.21967 10.5303L6.46967 12.7803C6.76256 13.0732 7.23744 13.0732 7.53033 12.7803C7.82322 12.4874 7.82322 12.0126 7.53033 11.7197L6.56066 10.75H12.25Z" fill="currentColor"></path></svg>', dr = ({ actions: e }) => {
+  const { mode: t, screen: o, setState: r, handlers: i } = $(), [s, l] = P(!1), {
+    actions: { history: a, selectNode: d },
+    canRedo: k,
+    canUndo: h,
+    query: u
+  } = H((x, m) => ({
+    enabled: x.options.enabled,
+    canUndo: m.history.canUndo(),
+    canRedo: m.history.canRedo()
+  })), c = (x) => {
+    r({ screen: x });
   }, p = () => {
-    o({ mode: e === "full" ? "compact" : "full" });
-  }, c = () => {
-    r.close();
+    r({ mode: t === "full" ? "compact" : "full" });
+  }, b = () => {
+    i.close();
   }, g = async () => {
     try {
-      s(!0), l.selectNode(), await r.submit(k.getSerializedNodes());
+      l(!0), d(), await i.submit(u.getSerializedNodes());
     } finally {
-      s(!1);
+      l(!1);
     }
   };
   return /* @__PURE__ */ w(
@@ -1214,14 +1219,14 @@ const ir = [
         alignItems: "center",
         gap: 16,
         justifyContent: "space-between",
-        backgroundColor: b.palette.ink["6s"],
-        color: b.palette.white["6s"],
-        ...b.text.sm
+        backgroundColor: f.palette.ink["6s"],
+        color: f.palette.white["6s"],
+        ...f.text.sm
       },
       children: [
         /* @__PURE__ */ w("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ n(W, { size: "32", onClick: c, children: /* @__PURE__ */ n(I, { source: lr }) }),
-          /* @__PURE__ */ n(Dt, { onSelectionChange: u, value: t, children: Bt.map(({ icon: f, size: h }) => /* @__PURE__ */ n(W, { value: h, children: /* @__PURE__ */ n(I, { source: f }) }, h)) }),
+          /* @__PURE__ */ n(W, { size: "32", onClick: b, children: /* @__PURE__ */ n(I, { source: lr }) }),
+          /* @__PURE__ */ n(At, { onSelectionChange: c, value: o, children: Dt.map(({ icon: x, size: m }) => /* @__PURE__ */ n(W, { value: m, children: /* @__PURE__ */ n(I, { source: x }) }, m)) }),
           /* @__PURE__ */ w(
             "div",
             {
@@ -1231,11 +1236,11 @@ const ir = [
                 alignItems: "center",
                 gap: 8,
                 borderRadius: 8,
-                backgroundColor: b.palette.white["1s"]
+                backgroundColor: f.palette.white["1s"]
               },
               children: [
-                /* @__PURE__ */ n(W, { onClick: l.history.undo, disabled: !d, children: /* @__PURE__ */ n(I, { source: je }) }),
-                /* @__PURE__ */ n(W, { onClick: l.history.redo, disabled: !a, children: /* @__PURE__ */ n(I, { source: je, css: { transform: "rotate(180deg)" } }) })
+                /* @__PURE__ */ n(W, { onClick: a.undo, disabled: !h, children: /* @__PURE__ */ n(I, { source: je }) }),
+                /* @__PURE__ */ n(W, { onClick: a.redo, disabled: !k, children: /* @__PURE__ */ n(I, { source: je, css: { transform: "rotate(180deg)" } }) })
               ]
             }
           ),
@@ -1248,13 +1253,14 @@ const ir = [
                 alignItems: "center",
                 gap: 8,
                 borderRadius: 8,
-                backgroundColor: b.palette.white["1s"]
+                backgroundColor: f.palette.white["1s"]
               },
-              children: /* @__PURE__ */ n(W, { onClick: p, children: /* @__PURE__ */ n(I, { source: e === "full" ? cr : ar }) })
+              children: /* @__PURE__ */ n(W, { onClick: p, children: /* @__PURE__ */ n(I, { source: t === "full" ? cr : ar }) })
             }
-          )
+          ),
+          e
         ] }),
-        /* @__PURE__ */ n("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ n(oe, { isLoading: i, onClick: g, children: "Save" }) })
+        /* @__PURE__ */ n("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ n(oe, { isLoading: s, onClick: g, children: "Save" }) })
       ]
     }
   );
@@ -1287,18 +1293,18 @@ const ir = [
   templates: [
     {
       name: "Container",
-      template: /* @__PURE__ */ n(Pt, {}),
+      template: /* @__PURE__ */ n(Bt, {}),
       icon: { source: Ve, height: 32 }
     },
     {
       name: "Block",
-      template: /* @__PURE__ */ n(jt, {}),
+      template: /* @__PURE__ */ n(Pt, {}),
       icon: { source: Ve, height: 32 }
     },
     {
       name: "Grid",
       template: /* @__PURE__ */ w(
-        Vt,
+        jt,
         {
           cols: 2,
           sx: {
@@ -1318,7 +1324,7 @@ const ir = [
     },
     {
       name: "Flex",
-      template: /* @__PURE__ */ w(Ft, { sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
+      template: /* @__PURE__ */ w(Vt, { sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
         /* @__PURE__ */ n(
           Se,
           {
@@ -1386,13 +1392,13 @@ const ir = [
   templates: [
     {
       name: "Image",
-      template: /* @__PURE__ */ n(Ot, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/" }),
+      template: /* @__PURE__ */ n(Ft, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/" }),
       icon: { source: wr, height: 32 }
     },
     {
       name: "Video",
       template: /* @__PURE__ */ n(
-        Ht,
+        Ot,
         {
           sx: {
             aspectRatio: "16 / 9"
@@ -1404,7 +1410,7 @@ const ir = [
     },
     {
       name: "Icon",
-      template: /* @__PURE__ */ n($t, { source: _t }),
+      template: /* @__PURE__ */ n(Ht, { source: $t }),
       icon: { source: br, height: 32 }
     }
   ]
@@ -1421,7 +1427,7 @@ const ir = [
   templates: [
     {
       name: "Heading",
-      template: /* @__PURE__ */ n(Gt, { as: "h2", sizeVariant: "4xl", md: { sizeVariant: "5xl" }, children: "Your heading text goes here" }),
+      template: /* @__PURE__ */ n(_t, { as: "h2", sizeVariant: "4xl", md: { sizeVariant: "5xl" }, children: "Your heading text goes here" }),
       icon: { source: Cr, height: 32 }
     },
     {
@@ -1434,10 +1440,10 @@ const ir = [
   fr,
   xr,
   mr,
+  Gt,
   Ut,
   Zt,
-  Yt,
-  Xt
+  Yt
 ], Tr = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>', Ir = {
   name: "Basics",
   icon: { source: Tr },
@@ -1453,7 +1459,7 @@ const ir = [
           paddingBlock: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: b.palette.white["1s"],
+          borderColor: f.palette.white["1s"],
           flex: 1
         },
         children: t.map((o, r) => /* @__PURE__ */ n(Lr, { group: o }, r))
@@ -1461,25 +1467,25 @@ const ir = [
     )
   ] });
 }, Sr = ({ elementGroups: e }) => /* @__PURE__ */ n("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: e.map((t, o) => /* @__PURE__ */ n(Er, { group: t }, o)) }), Er = ({ group: e }) => {
-  const [t, o] = st(!0), { actions: r, connectors: i } = H();
-  return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", ...b.text.sm }, children: [
+  const [t, o] = ot(!0), { actions: r, connectors: i } = H();
+  return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", ...f.text.sm }, children: [
     /* @__PURE__ */ n(oe, { onClick: o, css: { paddingInline: 0, backgroundColor: "transparent" }, children: /* @__PURE__ */ w(
       "div",
       {
-        css: { display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1, ...b.text.sm },
+        css: { display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1, ...f.text.sm },
         children: [
           e.name,
           /* @__PURE__ */ n(
             I,
             {
-              source: Ge,
+              source: ze,
               css: [{ transition: "transform" }, !t && { transform: "rotate(180deg)" }]
             }
           )
         ]
       }
     ) }),
-    /* @__PURE__ */ n(Jt, { open: t, children: /* @__PURE__ */ n("div", { css: { display: "grid", paddingBlock: 8, gap: 16, gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }, children: e.templates?.map((s, l) => /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ n(qt, { open: t, children: /* @__PURE__ */ n("div", { css: { display: "grid", paddingBlock: 8, gap: 16, gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }, children: e.templates?.map((s, l) => /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -1488,8 +1494,8 @@ const ir = [
             display: "flex",
             padding: 4,
             borderRadius: 8,
-            backgroundColor: b.palette.ink["6s"],
-            color: b.palette.white["5s"],
+            backgroundColor: f.palette.ink["6s"],
+            color: f.palette.white["5s"],
             pointerEvents: "auto",
             overflow: "hidden",
             flexDirection: "column",
@@ -1505,7 +1511,7 @@ const ir = [
               content: '""',
               position: "absolute",
               inset: 0,
-              backgroundColor: b.palette.white["1s"]
+              backgroundColor: f.palette.white["1s"]
             }
           },
           ref: (a) => {
@@ -1515,10 +1521,10 @@ const ir = [
               }
             });
           },
-          children: s.icon && /* @__PURE__ */ n(Kt, { width: void 0, height: void 0, ...s.icon })
+          children: s.icon && /* @__PURE__ */ n(Jt, { width: void 0, height: void 0, ...s.icon })
         }
       ),
-      /* @__PURE__ */ n("p", { css: { marginInline: "auto", textAlign: "center", ...ze.xs }, children: s.name })
+      /* @__PURE__ */ n("p", { css: { marginInline: "auto", textAlign: "center", ...Ge.xs }, children: s.name })
     ] }, l)) }) })
   ] });
 }, Lr = ({ group: e }) => {
@@ -1529,12 +1535,12 @@ const ir = [
     middleware: [
       me(),
       Je({
-        apply({ elements: g }) {
-          const f = {
+        apply({ elements: p }) {
+          const b = {
             zIndex: `${Xe}`,
-            height: `${g.reference.getBoundingClientRect().height}px`
+            height: `${p.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(g.floating.style, f);
+          Object.assign(p.floating.style, b);
         }
       })
     ],
@@ -1543,7 +1549,7 @@ const ir = [
   V(() => {
     r.setPositionReference(document.querySelector("aside"));
   }, [r]);
-  const l = Ke(s, { move: !1, handleClose: Tn() }), a = Qe(s), d = et(s), k = tt(s), { getReferenceProps: u, getFloatingProps: p } = nt([l, a, d, k]), c = e.renderer;
+  const l = Ke(s, { move: !1, handleClose: yn() }), a = Qe(s), d = et(s), k = tt(s), { getReferenceProps: h, getFloatingProps: u } = nt([l, a, d, k]), c = e.renderer;
   return /* @__PURE__ */ w(ie, { children: [
     /* @__PURE__ */ w(
       "button",
@@ -1556,17 +1562,17 @@ const ir = [
           borderRadius: 8,
           textAlign: "left",
           width: "100%",
-          color: b.palette.white["5s"],
+          color: f.palette.white["5s"],
           "&:hover": {
-            color: b.palette.white["6s"],
-            backgroundColor: b.palette.white["1s"],
+            color: f.palette.white["6s"],
+            backgroundColor: f.palette.white["1s"],
             fontWeight: 500
           }
         },
-        ...u(),
+        ...h(),
         ref: r.setReference,
         children: [
-          e.icon && /* @__PURE__ */ n("div", { css: { padding: 6, borderRadius: 8, backgroundColor: b.palette.white["1s"] }, children: /* @__PURE__ */ n(I, { ...e.icon }) }),
+          e.icon && /* @__PURE__ */ n("div", { css: { padding: 6, borderRadius: 8, backgroundColor: f.palette.white["1s"] }, children: /* @__PURE__ */ n(I, { ...e.icon }) }),
           /* @__PURE__ */ n(
             "span",
             {
@@ -1583,45 +1589,45 @@ const ir = [
         ]
       }
     ),
-    t && /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n("div", { style: i, ...p(), ref: r.setFloating, children: /* @__PURE__ */ w(
+    t && /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n("div", { style: i, ...u(), ref: r.setFloating, children: /* @__PURE__ */ w(
       "div",
       {
         css: {
           display: "flex",
           flexDirection: "column",
           height: "100%",
-          backgroundColor: b.palette.ink["6s"],
-          color: b.palette.white["6s"],
+          backgroundColor: f.palette.ink["6s"],
+          color: f.palette.white["6s"],
           borderLeftWidth: 1,
           borderLeftStyle: "solid",
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: b.palette.white["2s"],
-          ...b.text.sm
+          borderColor: f.palette.white["2s"],
+          ...f.text.sm
         },
         children: [
           /* @__PURE__ */ n("div", { css: { display: "flex", paddingInline: 8, alignItems: "center", height: 48 }, children: /* @__PURE__ */ n("h6", { css: { fontWeight: 500 }, children: e.name }) }),
-          /* @__PURE__ */ n(ce, { css: { paddingInline: 12, flex: 1 }, children: c ? /* @__PURE__ */ n(c, {}) : /* @__PURE__ */ n("div", { css: { display: "flex", flexDirection: "column", gap: 16 }, children: e.templates?.map((g, f) => /* @__PURE__ */ Cn(Wr, { ...g, key: f })) }) })
+          /* @__PURE__ */ n(ce, { css: { paddingInline: 12, flex: 1 }, children: c ? /* @__PURE__ */ n(c, {}) : /* @__PURE__ */ n("div", { css: { display: "flex", flexDirection: "column", gap: 16 }, children: e.templates?.map((p, b) => /* @__PURE__ */ mn(Wr, { ...p, key: b })) }) })
         ]
       }
     ) }) })
   ] });
 }, Wr = ({ template: e, autoFocus: t = !0, onCreate: o }) => {
-  const [, r] = P(!1), i = $(), { actions: s, connectors: l, resolver: a, query: d } = H((u) => ({
-    resolver: u.options.resolver
+  const [, r] = P(!1), i = $(), { actions: s, connectors: l, resolver: a, query: d } = H((h) => ({
+    resolver: h.options.resolver
   })), k = P(() => {
-    const u = typeof e == "function" ? e() : e;
-    let p;
-    "rootNodeId" in u ? p = u : p = d.parseReactElement(u).toNodeTree();
-    const { rootNodeId: c, nodes: g } = p, f = {};
-    return Object.entries(g).forEach(([h, y]) => {
-      const m = qt(y.data, a), T = h === c ? _ : h;
-      f[T] = {
+    const h = typeof e == "function" ? e() : e;
+    let u;
+    "rootNodeId" in h ? u = h : u = d.parseReactElement(h).toNodeTree();
+    const { rootNodeId: c, nodes: p } = u, b = {};
+    return Object.entries(p).forEach(([g, x]) => {
+      const m = Xt(x.data, a), T = g === c ? _ : g;
+      b[T] = {
         ...m,
         parent: m.parent === c ? _ : m.parent,
         nodes: m.nodes?.map((S) => S === c ? _ : S)
       };
-    }), f;
+    }), b;
   })[0];
   return /* @__PURE__ */ n(
     "div",
@@ -1632,12 +1638,12 @@ const ir = [
         cursor: "grab",
         borderStyle: "solid",
         borderWidth: 1,
-        borderColor: b.palette.white["1s"]
+        borderColor: f.palette.white["1s"]
       },
-      ref: (u) => {
-        u && l.create(u, e, {
-          onCreate(p) {
-            (typeof t == "function" ? t(p) : t) && s.selectNode(p.rootNodeId), o?.(p);
+      ref: (h) => {
+        h && l.create(h, e, {
+          onCreate(u) {
+            (typeof t == "function" ? t(u) : t) && s.selectNode(u.rootNodeId), o?.(u);
           }
         });
       },
@@ -1655,15 +1661,15 @@ const ir = [
             aspectRatio: "16 / 9"
           },
           children: /* @__PURE__ */ n("div", { css: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ n(
-            pt,
+            ut,
             {
               containerProps: {
                 style: {
                   backgroundColor: i.theme.palette.background.default
                 }
               },
-              viewport: { width: wn.md.minWidth },
-              children: /* @__PURE__ */ n(rt, { resolver: a, children: /* @__PURE__ */ n(ot, { data: k }) })
+              viewport: { width: bn.md.minWidth },
+              children: /* @__PURE__ */ n(rt, { resolver: a, children: /* @__PURE__ */ n(In, { data: k }) })
             }
           ) })
         }
@@ -1696,30 +1702,30 @@ const ir = [
     displayName: l,
     children: a,
     depth: d
-  } = tn((g) => ({
-    expanded: g.expanded,
-    displayName: Ze(t.node(g.id).get())
-  })), { selected: k, selectable: u } = H((g, f) => {
-    const h = f.node(r).get();
+  } = en((p) => ({
+    expanded: p.expanded,
+    displayName: Ze(t.node(p.id).get())
+  })), { selected: k, selectable: h } = H((p, b) => {
+    const g = b.node(r).get();
     return {
-      selected: f.getEvent("selected").contains(r),
-      nodeDOM: h.dom,
-      selectable: Ue(h)
+      selected: b.getEvent("selected").contains(r),
+      nodeDOM: g.dom,
+      selectable: Ue(g)
     };
   });
   V(() => {
     r === _ && s.setExpandedState(!0);
   }, [s, r]), V(() => {
     if (a.length === 0) return;
-    a.some((f) => {
-      const h = t.getEvent("selected").all();
-      return h.includes(f) ? !0 : t.node(f).descendants(!0).some((m) => h.includes(m));
+    a.some((b) => {
+      const g = t.getEvent("selected").all();
+      return g.includes(b) ? !0 : t.node(b).descendants(!0).some((m) => g.includes(m));
     }) && s.setExpandedState(!0);
   }, [a, s, t]);
-  const p = () => {
+  const u = () => {
     o.selectNode(r);
-  }, c = (g) => {
-    g.stopPropagation(), s.toggleLayer();
+  }, c = (p) => {
+    p.stopPropagation(), s.toggleLayer();
   };
   return /* @__PURE__ */ w(
     "div",
@@ -1729,7 +1735,7 @@ const ir = [
         /* @__PURE__ */ w(
           "div",
           {
-            onClick: p,
+            onClick: u,
             style: {
               paddingLeft: Math.max(0, d - 1) * 16
             },
@@ -1742,13 +1748,13 @@ const ir = [
                 gap: 2,
                 borderWidth: 1,
                 borderStyle: "solid",
-                borderColor: b.palette.white["1s"],
+                borderColor: f.palette.white["1s"],
                 cursor: "pointer",
                 borderRadius: 4,
-                "&:hover": { backgroundColor: b.palette.white["1s"] }
+                "&:hover": { backgroundColor: f.palette.white["1s"] }
               },
-              !u && { pointerEvents: "none" },
-              k && { backgroundColor: b.palette.black["7s"] },
+              !h && { pointerEvents: "none" },
+              k && { backgroundColor: f.palette.black["7s"] },
               r === _ && { display: "none" }
             ],
             children: [
@@ -1760,7 +1766,7 @@ const ir = [
                     i && { transform: "rotate(0deg)" }
                   ],
                   size: 16,
-                  source: Ge
+                  source: ze
                 }
               ) }) : /* @__PURE__ */ n("div", { css: { padding: 4 }, children: /* @__PURE__ */ n(I, { size: 16, source: Rr }) }),
               /* @__PURE__ */ n(
@@ -1773,7 +1779,7 @@ const ir = [
                       whiteSpace: "nowrap",
                       flex: 1
                     },
-                    !u && { color: b.palette.white["3s"] }
+                    !h && { color: f.palette.white["3s"] }
                   ],
                   children: l
                 }
@@ -1800,7 +1806,7 @@ const ir = [
     t.start(r);
   };
   return /* @__PURE__ */ n(he, { children: /* @__PURE__ */ w(
-    Qt.div,
+    Kt.div,
     {
       drag: !0,
       dragControls: t,
@@ -1811,10 +1817,10 @@ const ir = [
         display: "flex",
         flexDirection: "column",
         borderRadius: 6,
-        backgroundColor: b.palette.ink["6s"],
+        backgroundColor: f.palette.ink["6s"],
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: b.palette.white["2s"],
+        borderColor: f.palette.white["2s"],
         color: "white"
       },
       children: [
@@ -1837,7 +1843,7 @@ const ir = [
                   "p",
                   {
                     css: {
-                      ...b.text.sm,
+                      ...f.text.sm,
                       fontWeight: 500
                     },
                     children: "Layers"
@@ -1856,16 +1862,16 @@ const ir = [
               overflow: "auto",
               borderTopWidth: 1,
               borderTopStyle: "solid",
-              borderColor: b.palette.white["1s"],
+              borderColor: f.palette.white["1s"],
               flex: 1
             },
-            children: /* @__PURE__ */ n(en, { renderLayer: Ar })
+            children: /* @__PURE__ */ n(Qt, { renderLayer: Ar })
           }
         )
       ]
     }
   ) });
-}, gt = {
+}, pt = {
   primary: "Primary",
   secondary: "Secondary",
   red: "Red",
@@ -1875,42 +1881,42 @@ const ir = [
   blue: "Blue",
   neutral: "Neutral",
   violet: "Violet"
-}, Br = ["primary", "secondary"], Pr = Object.keys(gt), jr = [100, 200, 300, 400, 500, 600, 700, 800], Vr = () => {
-  const e = $(), t = !!e.handlers.saveTheme, o = e.theme.palette, r = z(e.theme), i = z(!1);
+}, Br = ["primary", "secondary"], Pr = Object.keys(pt), jr = [100, 200, 300, 400, 500, 600, 700, 800], Vr = () => {
+  const e = $(), t = !!e.handlers.saveTheme, o = e.theme.palette, r = G(e.theme), i = G(!1);
   V(() => {
     const c = r.current;
     return () => {
       i.current || e.setState({ theme: c });
     };
   }, []);
-  const s = (c) => o[c], l = (c, g) => {
-    const f = s(c), h = {
+  const s = (c) => o[c], l = (c, p) => {
+    const b = s(c), g = {
       palette: {
         background: o.background,
         border: o.border,
         surface: o.surface,
-        [c]: { main: g, contrast: f.contrast }
+        [c]: { main: p, contrast: b.contrast }
       }
     };
-    e.setState({ theme: Ne(h) });
-  }, a = (c, g) => {
-    const f = s(c), h = {
+    e.setState({ theme: Ne(g) });
+  }, a = (c, p) => {
+    const b = s(c), g = {
       palette: {
         background: o.background,
         border: o.border,
         surface: o.surface,
-        [c]: { main: f[600], contrast: g }
+        [c]: { main: b[600], contrast: p }
       }
     };
-    e.setState({ theme: Ne(h) });
-  }, [d, k] = P(!1), u = async () => {
+    e.setState({ theme: Ne(g) });
+  }, [d, k] = P(!1), h = async () => {
     k(!0);
     try {
       await e.handlers.saveTheme?.(e.theme), i.current = !0;
     } finally {
       k(!1);
     }
-  }, p = () => {
+  }, u = () => {
     e.setState({ theme: r.current, action: void 0 });
   };
   return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
@@ -1923,21 +1929,21 @@ const ir = [
           paddingBlock: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: b.palette.white["1s"],
+          borderColor: f.palette.white["1s"],
           flex: 1
         },
         children: /* @__PURE__ */ n("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: Pr.map((c) => {
-          const g = s(c), f = Br.includes(c);
+          const p = s(c), b = Br.includes(c);
           return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-            /* @__PURE__ */ n("p", { css: { ...ze.xs, color: b.palette.white["4s"] }, children: gt[c] }),
+            /* @__PURE__ */ n("p", { css: { ...Ge.xs, color: f.palette.white["4s"] }, children: pt[c] }),
             /* @__PURE__ */ w("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              t && f && /* @__PURE__ */ w("div", { css: { display: "flex", gap: 4 }, children: [
+              t && b && /* @__PURE__ */ w("div", { css: { display: "flex", gap: 4 }, children: [
                 /* @__PURE__ */ n(
                   Ee,
                   {
                     hidePalette: !0,
-                    color: g[600],
-                    onChange: (h) => l(c, h),
+                    color: p[600],
+                    onChange: (g) => l(c, g),
                     placement: "right-start"
                   }
                 ),
@@ -1945,8 +1951,8 @@ const ir = [
                   Ee,
                   {
                     hidePalette: !0,
-                    color: g.contrast,
-                    onChange: (h) => a(c, h),
+                    color: p.contrast,
+                    onChange: (g) => a(c, g),
                     placement: "right-start"
                   }
                 )
@@ -1959,7 +1965,7 @@ const ir = [
                     gap: 4,
                     flex: 1
                   },
-                  children: jr.map((h) => /* @__PURE__ */ n(
+                  children: jr.map((g) => /* @__PURE__ */ n(
                     "div",
                     {
                       css: {
@@ -1969,18 +1975,18 @@ const ir = [
                         padding: 1,
                         borderWidth: 1,
                         borderStyle: "solid",
-                        borderColor: b.palette.white["3s"]
+                        borderColor: f.palette.white["3s"]
                       },
-                      title: `${c}.${h}`,
+                      title: `${c}.${g}`,
                       children: /* @__PURE__ */ n(
                         "div",
                         {
                           css: { width: "100%", height: "100%", borderRadius: 1 },
-                          style: { backgroundColor: g[h] }
+                          style: { backgroundColor: p[g] }
                         }
                       )
                     },
-                    h
+                    g
                   ))
                 }
               )
@@ -1998,11 +2004,11 @@ const ir = [
           padding: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: b.palette.white["1s"]
+          borderColor: f.palette.white["1s"]
         },
         children: [
-          /* @__PURE__ */ n(oe, { variant: "text", onClick: p, disabled: d, css: { flex: 1 }, children: "Cancel" }),
-          /* @__PURE__ */ n(oe, { onClick: u, isLoading: d, css: { flex: 1 }, children: d ? "Saving..." : "Save" })
+          /* @__PURE__ */ n(oe, { variant: "text", onClick: u, disabled: d, css: { flex: 1 }, children: "Cancel" }),
+          /* @__PURE__ */ n(oe, { onClick: h, isLoading: d, css: { flex: 1 }, children: d ? "Saving..." : "Save" })
         ]
       }
     )
@@ -2023,19 +2029,19 @@ const ir = [
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3.59903 20.3231H7.30203C10.287 20.3231 11.782 16.7141 9.67103 14.6031V14.6031C8.11903 13.0511 5.48303 13.6221 4.71303 15.6771L3.19103 19.7351C3.08503 20.0201 3.29503 20.3231 3.59903 20.3231Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `, $r = ({ insert: e }) => {
-  const [t, o] = st(!1), { action: r = "insert", setState: i } = $(), { actions: s, isDeletable: l, focusedNode: a } = H((p, c) => {
-    const g = c.getEvent("selected").first(), f = g ? c.node(g) : null;
+  const [t, o] = ot(!1), { action: r = "insert", setState: i } = $(), { actions: s, isDeletable: l, focusedNode: a } = H((u, c) => {
+    const p = c.getEvent("selected").first(), b = p ? c.node(p) : null;
     return {
-      enabled: p.options.enabled,
-      isDeletable: !!(f?.isDeletable() && (f.get().data.custom?.deletable ?? !0)),
-      focusedNode: f?.get()
+      enabled: u.options.enabled,
+      isDeletable: !!(b?.isDeletable() && (b.get().data.custom?.deletable ?? !0)),
+      focusedNode: b?.get()
     };
   }), d = () => {
     s.selectNode();
-  }, k = (p) => {
-    s.delete(p.currentTarget.value);
-  }, u = (p) => {
-    const c = p.currentTarget.value;
+  }, k = (u) => {
+    s.delete(u.currentTarget.value);
+  }, h = (u) => {
+    const c = u.currentTarget.value;
     c === "layers" ? o() : (d(), i({ action: c }));
   };
   return /* @__PURE__ */ w(ie, { children: [
@@ -2046,12 +2052,12 @@ const ir = [
           display: "flex",
           position: "relative",
           alignItems: "stretch",
-          backgroundColor: b.palette.ink["6s"],
-          color: b.palette.white["6s"],
+          backgroundColor: f.palette.ink["6s"],
+          color: f.palette.white["6s"],
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: b.palette.white["2s"],
-          ...b.text.sm
+          borderColor: f.palette.white["2s"],
+          ...f.text.sm
         },
         children: [
           /* @__PURE__ */ w("div", { css: { display: "flex", paddingInline: 4, flexDirection: "column", gap: 4 }, children: [
@@ -2063,14 +2069,14 @@ const ir = [
                     content: "Insert",
                     placement: "right"
                   },
-                  onClick: u,
+                  onClick: h,
                   value: "insert",
                   css: { position: "relative" },
                   size: "32",
                   children: /* @__PURE__ */ n(I, { source: He })
                 }
               ),
-              /* @__PURE__ */ n("hr", { css: { borderColor: b.palette.white["2s"] } })
+              /* @__PURE__ */ n("hr", { css: { borderColor: f.palette.white["2s"] } })
             ] }),
             /* @__PURE__ */ n(
               W,
@@ -2079,14 +2085,14 @@ const ir = [
                   content: "Layers",
                   placement: "right"
                 },
-                onClick: u,
+                onClick: h,
                 value: "layers",
                 css: { position: "relative" },
                 size: "32",
                 children: /* @__PURE__ */ n(I, { source: Fr })
               }
             ),
-            /* @__PURE__ */ n("hr", { css: { borderColor: b.palette.white["2s"] } }),
+            /* @__PURE__ */ n("hr", { css: { borderColor: f.palette.white["2s"] } }),
             /* @__PURE__ */ n(
               W,
               {
@@ -2094,7 +2100,7 @@ const ir = [
                   content: "Theme",
                   placement: "right"
                 },
-                onClick: u,
+                onClick: h,
                 value: "theme",
                 css: { position: "relative" },
                 size: "32",
@@ -2113,7 +2119,7 @@ const ir = [
                 width: 288,
                 borderLeftWidth: 1,
                 borderLeftStyle: "solid",
-                borderColor: b.palette.white["1s"]
+                borderColor: f.palette.white["1s"]
               },
               children: [
                 r === "theme" && /* @__PURE__ */ n("div", { css: { overflow: "auto", flex: 1 }, children: /* @__PURE__ */ n(Vr, {}) }),
@@ -2122,7 +2128,7 @@ const ir = [
                   /* @__PURE__ */ w("div", { css: { display: "flex", paddingInline: 8, paddingBlock: 8, alignItems: "center", gap: 8 }, children: [
                     /* @__PURE__ */ n(W, { onClick: d, children: /* @__PURE__ */ n(I, { source: Or }) }),
                     /* @__PURE__ */ n("div", { css: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ n(_e, { fullWidth: !0, value: Ze(a), size: "32" }) }),
-                    l && /* @__PURE__ */ n(W, { value: a.id, onClick: k, children: /* @__PURE__ */ n(I, { css: { color: b.palette.red["4s"] }, source: nn }) })
+                    l && /* @__PURE__ */ n(W, { value: a.id, onClick: k, children: /* @__PURE__ */ n(I, { css: { color: f.palette.red["4s"] }, source: tn }) })
                   ] }),
                   /* @__PURE__ */ n(
                     "div",
@@ -2132,9 +2138,9 @@ const ir = [
                         flex: 1,
                         borderTopWidth: 1,
                         borderTopStyle: "solid",
-                        borderColor: b.palette.white["1s"]
+                        borderColor: f.palette.white["1s"]
                       },
-                      children: /* @__PURE__ */ n(gn, { fallback: null, children: Ye(a.related.inspector) })
+                      children: /* @__PURE__ */ n(pn, { fallback: null, children: Ye(a.related.inspector) })
                     }
                   )
                 ] })
@@ -2172,7 +2178,7 @@ const ir = [
   V(() => {
     r.setReference(e);
   }, [e, r]);
-  const i = fn((s) => r.setFloating(s), [r]);
+  const i = gn((s) => r.setFloating(s), [r]);
   return e ? /* @__PURE__ */ n(he, { root: t?.body, children: /* @__PURE__ */ n(
     "div",
     {
@@ -2183,25 +2189,25 @@ const ir = [
         zIndex: 9999,
         borderWidth: 1,
         borderStyle: "dashed",
-        borderColor: b.palette.ink["6s"]
+        borderColor: f.palette.ink["6s"]
       }
     }
   ) }) : null;
-}, Gr = ({ render: e }) => {
+}, zr = ({ render: e }) => {
   const { id: t, toolbar: o } = ke((s) => ({
-    toolbar: an(s).toolbar
+    toolbar: sn(s).toolbar
   })), { mode: r } = $(), { isActiveSelectable: i } = H((s, l) => {
     const a = l.getEvent("selected").contains(t) && t !== _, d = a ? Ue(l.node(t).get()) : !1;
     return { isActiveSelectable: a && d };
   });
   return /* @__PURE__ */ w(ie, { children: [
     i && r === "full" && /* @__PURE__ */ w(ie, { children: [
-      /* @__PURE__ */ n(zr, { children: o ? Ye(o) : /* @__PURE__ */ n(Ur, {}) }),
+      /* @__PURE__ */ n(Gr, { children: o ? Ye(o) : /* @__PURE__ */ n(Ur, {}) }),
       /* @__PURE__ */ n(_r, {})
     ] }),
     e
   ] });
-}, zr = ({ children: e }) => {
+}, Gr = ({ children: e }) => {
   const { dom: t } = ke((s) => ({ dom: s.dom })), { document: o } = Ce(), { floatingStyles: r, refs: i } = le({
     open: !0,
     placement: "bottom-start",
@@ -2216,8 +2222,8 @@ const ir = [
       css: {
         paddingBlock: 4,
         paddingInline: 6,
-        backgroundColor: b.palette.ink["6s"],
-        color: b.palette.white["6s"],
+        backgroundColor: f.palette.ink["6s"],
+        color: f.palette.white["6s"],
         borderRadius: 4
       },
       ref: i.setFloating,
@@ -2234,9 +2240,9 @@ const ir = [
       gap: 4
     },
     children: [
+      /* @__PURE__ */ n(nn, {}),
       /* @__PURE__ */ n(rn, {}),
-      /* @__PURE__ */ n(on, {}),
-      /* @__PURE__ */ n(sn, {})
+      /* @__PURE__ */ n(on, {})
     ]
   }
 ), To = ({
@@ -2244,8 +2250,8 @@ const ir = [
   insert: t,
   resolver: o,
   handlers: r,
-  serializedNodes: i,
-  variableDefinitions: s,
+  variableDefinitions: i,
+  headerActions: s,
   children: l
 }) => {
   const { screen: a } = $({
@@ -2253,9 +2259,9 @@ const ir = [
     handlers: r,
     mode: "full",
     screen: "xs",
-    variableDefinitions: s
+    variableDefinitions: i
   });
-  return /* @__PURE__ */ w(rt, { enabled: !0, onRender: Gr, resolver: o, children: [
+  return /* @__PURE__ */ w(rt, { enabled: !0, onRender: zr, resolver: o, children: [
     /* @__PURE__ */ w(
       "div",
       {
@@ -2268,23 +2274,23 @@ const ir = [
           color: fe.white["6s"]
         },
         children: [
-          /* @__PURE__ */ n(dr, {}),
+          /* @__PURE__ */ n(dr, { actions: s }),
           /* @__PURE__ */ w("div", { css: { display: "flex", overflow: "hidden", flex: 1 }, children: [
             /* @__PURE__ */ n($r, { insert: t }),
             /* @__PURE__ */ n(
-              pt,
+              ut,
               {
                 viewport: {
                   width: (d) => a === "lg" ? Math.max(d, Le[a]) : Le[a]
                 },
-                children: i ? /* @__PURE__ */ n(ot, { data: i }) : l
+                children: l
               }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ n(cn, {})
+    /* @__PURE__ */ n(an, {})
   ] });
 };
 export {
@@ -2296,11 +2302,11 @@ export {
   Ro as ColorPickerContent,
   Ee as ColorPickerPopover,
   Ao as ColorPreview,
-  Wt as ColorToolbar,
+  Lt as ColorToolbar,
   Do as ColorVariantToolbar,
   Bo as ColumnGapToolbar,
-  Rt as CssFontWeightToolbar,
-  yt as CssSizeInput,
+  Nt as CssFontWeightToolbar,
+  xt as CssSizeInput,
   Po as CssTextAlignToolbar,
   jo as CssWidthToolbar,
   ko as DegreePicker,
@@ -2310,21 +2316,21 @@ export {
   vo as FlexToolbar,
   Fo as FlexWrapToolbar,
   Oo as FontSizeToolbar,
-  pt as FramePreview,
+  ut as FramePreview,
   Ho as GridAlignItemsToolbar,
   $o as HeightToolbar,
   _o as HtmlAnchorTargetToolbar,
-  Go as ImageSourceSelection,
-  zo as InsertInlineToolbar,
+  zo as ImageSourceSelection,
+  Go as InsertInlineToolbar,
   Uo as InsertLinkToolbar,
   Zo as JustifyContentToolbar,
   Yo as JustifyItemsToolbar,
   mo as LineHeightToolbar,
   Xo as MarginToolbar,
   xo as MinWidthToolbar,
-  sn as NodeDeleteToolbar,
-  rn as NodeDragToolbar,
-  on as NodeNameToolbar,
+  on as NodeDeleteToolbar,
+  nn as NodeDragToolbar,
+  rn as NodeNameToolbar,
   qo as NumberField,
   Jo as NumberFieldMixOptions,
   Ko as ObjectFitToolbar,
@@ -2333,16 +2339,16 @@ export {
   ts as RowGapToolbar,
   ns as SvgSourceToolbar,
   rs as TagNameToolbar,
-  Lt as TextSizeVariantToolbar,
+  Et as TextSizeVariantToolbar,
   yo as TextStyleGroupToolbar,
-  Nt as TextStyleToolbar,
-  At as TextTransformToolbar,
+  Wt as TextStyleToolbar,
+  Rt as TextTransformToolbar,
   J as ToolbarField,
   os as ToolbarGroup,
   ss as VisibilityToolbar,
   oe as WbButton,
-  Dt as WbButtonGroup,
-  Jt as WbCollapse,
+  At as WbButtonGroup,
+  qt as WbCollapse,
   is as WbColorPicker,
   as as WbDatePicker,
   go as WbDialog,
@@ -2353,26 +2359,26 @@ export {
   hs as WbDropzone,
   Ln as WbFloating,
   us as WbFloatingClose,
-  wt as WbFloatingContent,
-  bt as WbFloatingContext,
+  bt as WbFloatingContent,
+  ft as WbFloatingContext,
   wo as WbFormLabel,
   I as WbIcon,
   W as WbIconButton,
   _e as WbInput,
-  Ct as WbInputNumber,
+  mt as WbInputNumber,
   ps as WbLoadingOverlay,
   gs as WbMenu,
   fs as WbMenuItem,
   bs as WbMenuList,
   ws as WbMenuTrigger,
-  Tt as WbPopover,
-  Et as WbPopoverClose,
-  St as WbPopoverContent,
-  It as WbPopoverTrigger,
+  yt as WbPopover,
+  St as WbPopoverClose,
+  Mt as WbPopoverContent,
+  Tt as WbPopoverTrigger,
   Oe as WbRadioButton,
   ce as WbScrollView,
-  xt as WbSelect,
-  Kt as WbSvgLoader,
+  vt as WbSelect,
+  Jt as WbSvgLoader,
   ks as WbSwitch,
   ms as WbTab,
   Cs as WbTabContent,
@@ -2388,5 +2394,5 @@ export {
   $ as useEditor,
   Ls as useEditorResponsive,
   Ws as useInlineEditable,
-  kt as useWbFloatingContext
+  wt as useWbFloatingContext
 };