@janbox/storefront-builder 2.0.24 → 2.0.26

package/dist/editor.js

@@ -1,25 +1,22 @@
-import { jsx as n, jsxs as w, Fragment as Fe } from "@emotion/react/jsx-runtime";
-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 { jsxs as b, jsx as r, Fragment as ct } from "@emotion/react/jsx-runtime";
+import { aA as zt, aB as c, aC as I, aD as Pe, aE as we, ax as _t, aF as Gt, aG as U, aH as We, b as Ye, B as Ze, a5 as Ut, aI as ae, aJ as dt, aK as Yt, aL as A, az as ht, ay as Zt, aM as Xt, aN as qt, aO as Jt, aP as Kt, aQ as Qt, aR as er, aS as tr, aT as rr, aU as nr, aV as or, aW as sr, aX as ir, u as G, aY as ar, aZ as lr, a_ as me, m as cr, i as dr, G as hr, l as Xe, p as ur, F as qe, t as pr, Y as gr, I as fr, a$ as br, s as wr, P as mr, b0 as ut, b1 as Be, b2 as kr, b3 as vr, b4 as Cr, b5 as xr, b6 as le, b7 as yr, b8 as X, b9 as pt, ba as Tr, bb as Sr, bc as Ir, bd as Mr, be as Er, a4 as gt, a0 as ft, bf as Je, bg as Lr, bh as Rr, N as je, bi as Wr, bj as Nr, bk as Ar, a2 as Dr, bl as Ke, bm as Pr } from "./toaster-Bx7Helq-.js";
+import { bn as Zo, bo as Xo, bp as qo, bq as Jo, br as Ko, bs as Qo, bt as es, bu as ts, bv as rs, bw as ns, bx as os, by as ss, bz as is, bA as as, bB as ls, bC as cs, bD as ds, bE as hs, bF as us, bG as ps, bH as gs, bI as fs, bJ as bs, bK as ws, bL as ms, bM as ks, bN as vs, bO as Cs, bP as xs, bQ as ys, bR as Ts, bS as Ss, bT as Is, bU as Ms, bV as Es, bW as Ls, bX as Rs, bY as Ws, bZ as Ns, b_ as As, b$ as Ds, c0 as Ps, c1 as Bs, c2 as js, c3 as Vs, c4 as Os, c5 as Fs, c6 as $s, c7 as Hs, c8 as zs, c9 as _s, ca as Gs, cb as Us, cc as Ys, cd as Zs, ce as Xs, cf as qs, cg as Js, W as Ks, ch as Qs, ci as ei, cj as ti, ck as ri, cl as ni } from "./toaster-Bx7Helq-.js";
+import { isNil as $, isUndefined as Br, throttle as jr, isFunction as Qe, isNumber as ke, isEqual as Vr } from "lodash-es";
+import { useState as j, useCallback as oe, useMemo as et, Fragment as J, isValidElement as Or, useRef as K, useEffect as z, Suspense as Fr, createElement as bt } from "react";
 import "flat";
-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 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 { FLOATING_Z_INDEX as Ne, ThemeProvider as $r, breakpoint as Hr, createTheme as tt } from "@janbox/storefront-ui/theme";
+import { useControllableState as rt } from "@janbox/storefront-ui/hooks";
+import { CacheProvider as zr, Global as _r, createElement as Gr } from "@emotion/react";
+import { useFloating as Ce, autoUpdate as xe, flip as Ve, offset as wt, size as mt, useClick as Ur, useDismiss as kt, useRole as vt, useInteractions as Ct, FloatingPortal as ce, useHover as Yr, safePolygon as Zr, useFocus as Xr } from "@floating-ui/react";
 import "react-colorful";
 import "overlayscrollbars-react";
 import "@tanstack/react-virtual";
-import Tn, { useFrame as Ce } from "react-frame-component";
+import qr, { useFrame as Oe } from "react-frame-component";
 import "react-dropzone";
-import "react-datepicker";
-import { a as rt, C as In } from "./index-BBoR6Gy_.js";
+import { a as xt, C as Jr } from "./composer-DBRKIqu7.js";
 import "@janbox/storefront-ui/utils";
-import { useToggle as ot } from "usehooks-ts";
-import "@hello-pangea/dnd";
 import "@janbox/storefront-ui";
-class Mn {
+class Kr {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -47,128 +44,270 @@ class Mn {
    * @public
    */
   start(t, o) {
-    this.componentControls.forEach((r) => {
-      r.start(t.nativeEvent || t, o);
+    this.componentControls.forEach((n) => {
+      n.start(t.nativeEvent || t, o);
     });
   }
 }
-const Sn = () => new Mn();
-function En() {
-  return gt(Sn);
+const Qr = () => new Kr();
+function en() {
+  return zt(Qr);
 }
-const Ln = (e) => Cn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(vn, { children: /* @__PURE__ */ n(Re, { ...e }) }), Re = ({
-  open: e,
-  placement: t = "bottom",
-  onOpenChange: o,
-  dismissProps: r = {
-    enabled: !1
-  },
-  children: i,
-  clickProps: s = {
-    enabled: !1
-  },
-  focusProps: l = {
-    enabled: !1
-  },
-  hoverProps: a = {
-    enabled: !1
-  },
-  elements: d,
-  offsetOptions: k = 4,
-  sizeOptions: h,
-  autoUpdateOptions: u,
-  ref: c
-}) => {
-  const p = le({
-    open: e,
-    onOpenChange: o,
-    placement: t,
-    middleware: [qe(k), Je(h), me()],
-    whileElementsMounted: (...A) => de(...A, u),
-    elements: d
-  });
-  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(
-    () => ({
-      ...p,
-      ...F
-    }),
-    [p, F]
-  );
-  return /* @__PURE__ */ n(ft.Provider, { value: j, children: i });
-}, go = ({ width: e = 600, children: t, ...o }) => /* @__PURE__ */ n(
-  Ln,
-  {
-    dismissProps: {
-      enabled: !0
+const Bo = (e) => {
+  const {
+    innerRef: t,
+    placement: o = "bottom-start",
+    contentWidth: n,
+    visible: i,
+    onOpenChange: s,
+    dissmiss: d,
+    defaultValue: l,
+    value: h,
+    options: f,
+    onChange: u,
+    expandTrigger: p = "click",
+    changeOnSelect: a = !1,
+    placeholder: w,
+    allowClear: m = !1,
+    displayRender: g,
+    separator: y = "/",
+    prefix: v,
+    suffix: M,
+    size: R = "32",
+    columnWidth: Y = 180,
+    columnMaxHeight: F = 240,
+    emptyText: B = "No options",
+    ...T
+  } = e, [he, Ie] = rt({
+    defaultValue: !1,
+    value: i
+  }), [Z, ue] = rt({
+    defaultValue: l,
+    value: h ?? void 0
+  }), [te, Me] = j([]), Ee = oe((k) => $(k.children) || k.children.length === 0, []), re = et(() => {
+    if ($(Z) || Z.length === 0) return [];
+    const k = [];
+    let S = f;
+    for (const E of Z) {
+      const H = S?.find((Re) => Re.value === E);
+      if ($(H)) break;
+      k.push(H), S = H.children;
+    }
+    return k;
+  }, [Z, f]), ze = et(() => {
+    const k = [f];
+    for (const S of te) {
+      if ($(S.children) || S.children.length === 0) break;
+      k.push(S.children);
+    }
+    return k;
+  }, [f, te]), _e = oe(
+    (k) => {
+      const S = k.map((E) => E.value);
+      ue(S), u?.(S, k), Ie(!1);
     },
-    ...o,
-    children: /* @__PURE__ */ w(
-      bt,
+    [u, ue, Ie]
+  ), Nt = oe(
+    (k) => {
+      k.stopPropagation(), ue([]), Me([]), u?.([], []);
+    },
+    [u, ue]
+  ), At = oe(
+    (k, S) => {
+      if (k.disabled) return;
+      const E = [...te.slice(0, S), k];
+      Me(E), (Ee(k) || a) && _e(E);
+    },
+    [te, a, _e, Ee]
+  ), Dt = (k, S, E) => {
+    !k && !E || (k && Me(re), Ie(k), s?.(k, S, E));
+  }, { refs: Ge, floatingStyles: Pt, context: Le } = Ce({
+    open: he,
+    onOpenChange: Dt,
+    placement: o,
+    middleware: [
+      Ve(),
+      wt(4),
+      mt({
+        apply({ elements: k }) {
+          const { width: S } = k.reference.getBoundingClientRect(), E = n === "fit-parent" ? S : n, H = {
+            zIndex: Ne
+          };
+          Br(E) || (H.minWidth = `${E}px`), Object.assign(k.floating.style, H);
+        }
+      })
+    ],
+    whileElementsMounted: xe
+  }), Bt = Ur(Le), jt = kt(Le, d), Vt = vt(Le), { getReferenceProps: Ot, getFloatingProps: Ft } = Ct([Bt, jt, Vt]), $t = () => {
+    if (re.length === 0)
+      return /* @__PURE__ */ r("span", { css: { color: c.palette.white["3s"] }, children: w });
+    const k = re.map((S) => S.label);
+    return g ? g(k, re) : k.map((S, E) => /* @__PURE__ */ b(J, { children: [
+      E > 0 && /* @__PURE__ */ b("span", { css: { color: c.palette.white["3s"] }, children: [
+        " ",
+        y,
+        " "
+      ] }),
+      S
+    ] }, E));
+  }, Ht = ({ option: k, columnIndex: S }) => {
+    const E = Ee(k), H = te[S]?.value === k.value, Re = !$(Z) && Z[S] === k.value && (E || a), Ue = () => At(k, S);
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        "aria-hidden": !0,
+        onClick: Ue,
+        onMouseEnter: p === "hover" && !E && !k.disabled ? Ue : void 0,
+        css: [
+          {
+            padding: 8,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            borderRadius: 8,
+            cursor: k.disabled ? "not-allowed" : "pointer",
+            opacity: k.disabled ? 0.4 : 1,
+            ":hover": k.disabled ? void 0 : { backgroundColor: c.palette.white["1s"] }
+          },
+          H && { backgroundColor: c.palette.black["7s"] }
+        ],
+        children: [
+          /* @__PURE__ */ r("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: k.label }),
+          Re && /* @__PURE__ */ r(I, { size: 16, source: _t }),
+          !E && /* @__PURE__ */ r(I, { size: 16, source: we, css: { transform: "rotate(-90deg)", flexShrink: 0 } })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ b(J, { children: [
+    /* @__PURE__ */ b(
+      "button",
       {
-        floatingOverlayProps: {
-          disabled: !1,
-          lockScroll: !0,
-          style: {
-            zIndex: Xe,
-            display: "grid",
-            placeItems: "center",
-            padding: 20
+        css: [
+          {
+            ...c.text.xs,
+            height: Number(R),
+            display: "inline-flex",
+            position: "relative",
+            paddingInline: 8,
+            borderRadius: 8,
+            overflow: "hidden",
+            alignItems: "center",
+            gap: 8,
+            backgroundColor: c.palette.white["1s"],
+            color: c.palette.white["6s"],
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderColor: "transparent"
+            }
+          },
+          he && {
+            backgroundColor: c.palette.black["7s"],
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderColor: c.palette.white["1s"]
+            }
           }
-        },
-        css: { display: "flex", overflow: "hidden", flexDirection: "column", maxWidth: "100%", maxHeight: "100%" },
+        ],
+        ...T,
+        ...Ot(),
+        ref: Ge.setReference,
         children: [
-          /* @__PURE__ */ n(
-            "div",
+          v,
+          /* @__PURE__ */ r("div", { css: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: $t() }),
+          M ?? (m && re.length > 0 ? /* @__PURE__ */ r(
+            "span",
             {
+              role: "button",
+              "aria-label": "Clear",
+              tabIndex: -1,
+              onClick: Nt,
               css: {
-                backdropFilter: "blur(2px)",
-                position: "fixed",
-                inset: 0,
-                pointerEvents: "none",
-                backgroundColor: "rgba(0, 0, 0, 0.4)"
-              }
+                display: "inline-flex",
+                flexShrink: 0,
+                cursor: "pointer",
+                color: c.palette.white["3s"],
+                ":hover": { color: c.palette.white["6s"] }
+              },
+              children: /* @__PURE__ */ r(I, { source: Pe, size: 16 })
             }
-          ),
-          /* @__PURE__ */ n(
-            "div",
+          ) : /* @__PURE__ */ r(
+            I,
             {
-              css: {
-                width: e,
-                display: "flex",
-                position: "relative",
-                paddingBlock: 8,
-                flexDirection: "column",
-                overflow: "hidden",
-                borderRadius: 8,
-                backgroundColor: f.palette.ink["6s"],
-                maxWidth: "100%",
-                color: "white"
-              },
-              children: t
+              source: we,
+              css: [{ transition: "transform" }, he && { transform: "rotate(-180deg)" }],
+              size: 16
             }
-          )
+          ))
         ]
       }
-    )
-  }
-), fo = () => wt(), bo = ({ ref: e, ...t }) => /* @__PURE__ */ n(
-  ce,
-  {
-    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: [
-  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 = G(null), s = (k, h) => {
+    ),
+    he && /* @__PURE__ */ r(ce, { root: document.body, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: Ge.setFloating,
+        css: { borderRadius: 8, backgroundColor: c.palette.ink["6s"] },
+        style: {
+          ...Pt,
+          zIndex: Ne
+        },
+        ...Ft(),
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: t,
+            css: {
+              display: "flex",
+              padding: 4,
+              borderRadius: 8,
+              backgroundColor: c.palette.white["1s"],
+              color: c.palette.white["6s"],
+              ":focus-visible": { outlineStyle: "none" },
+              ...c.text.xs
+            },
+            children: ze.map((k, S) => /* @__PURE__ */ r(
+              "div",
+              {
+                css: {
+                  width: Y,
+                  maxHeight: F,
+                  overflowY: "auto",
+                  paddingInline: 4,
+                  borderRightWidth: S < ze.length - 1 ? 1 : 0,
+                  borderRightStyle: "solid",
+                  borderRightColor: c.palette.white["1s"]
+                },
+                children: k.length === 0 ? /* @__PURE__ */ r("div", { css: { padding: 8, color: c.palette.white["3s"] }, children: B }) : k.map((E) => /* @__PURE__ */ r(Ht, { option: E, columnIndex: S }, String(E.value)))
+              },
+              S
+            ))
+          }
+        )
+      }
+    ) })
+  ] });
+}, jo = () => Gt(), Vo = ({ required: e, children: t, ...o }) => /* @__PURE__ */ b("div", { css: { marginBottom: 6, display: "flex", width: "fit-content" }, ...o, children: [
+  Or(t) ? t : /* @__PURE__ */ r("label", { children: t }),
+  e && /* @__PURE__ */ r("span", { css: { color: c.palette.red["6s"] }, children: " *" })
+] }), Oo = () => {
+  const [e, t] = j(0), [o, n] = j(!1), i = K(null), s = (f, u) => {
     if (!i.current) return 0;
-    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;
+    const p = i.current.getBoundingClientRect(), a = p.left + p.width / 2, w = p.top + p.height / 2, m = f - a, g = u - w;
+    return (Math.atan2(g, m) * (180 / Math.PI) + 360) % 360;
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "div",
     {
       style: {
@@ -176,37 +315,37 @@ const Ln = (e) => Cn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(vn,
         marginTop: "50px",
         userSelect: "none"
       },
-      onMouseMove: (k) => {
+      onMouseMove: (f) => {
         if (o) {
-          const h = s(k.clientX, k.clientY);
-          t(Math.round(h));
+          const u = s(f.clientX, f.clientY);
+          t(Math.round(u));
         }
       },
       onMouseUp: () => {
-        r(!1);
+        n(!1);
       },
       children: [
-        /* @__PURE__ */ w("h3", { children: [
+        /* @__PURE__ */ b("h3", { children: [
           "Chọn độ: ",
           e,
           "°"
         ] }),
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ b(
           "svg",
           {
             ref: i,
             width: "200",
             height: "200",
             viewBox: "0 0 200 200",
-            onMouseDown: (k) => {
-              r(!0);
-              const h = s(k.clientX, k.clientY);
-              t(Math.round(h));
+            onMouseDown: (f) => {
+              n(!0);
+              const u = s(f.clientX, f.clientY);
+              t(Math.round(u));
             },
             style: { cursor: "grab" },
             children: [
-              /* @__PURE__ */ n("circle", { cx: "100", cy: "100", r: "90", fill: "#EAEAEA", stroke: "#CCC", strokeWidth: "2" }),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ r("circle", { cx: "100", cy: "100", r: "90", fill: "#EAEAEA", stroke: "#CCC", strokeWidth: "2" }),
+              /* @__PURE__ */ r(
                 "line",
                 {
                   x1: "100",
@@ -217,7 +356,7 @@ const Ln = (e) => Cn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(vn,
                   strokeWidth: "2"
                 }
               ),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ r(
                 "circle",
                 {
                   cx: 100 + 90 * Math.cos((e - 90) * (Math.PI / 180)),
@@ -234,106 +373,106 @@ const Ln = (e) => Cn() ? /* @__PURE__ */ n(Re, { ...e }) : /* @__PURE__ */ n(vn,
     }
   );
 };
-function Wn(e) {
+function tn(e) {
   if (e.sheet)
     return e.sheet;
   for (var t = 0; t < document.styleSheets.length; t++)
     if (document.styleSheets[t].ownerNode === e)
       return document.styleSheets[t];
 }
-function Nn(e) {
+function rn(e) {
   var t = document.createElement("style");
   return t.setAttribute("data-emotion", e.key), e.nonce !== void 0 && t.setAttribute("nonce", e.nonce), t.appendChild(document.createTextNode("")), t.setAttribute("data-s", ""), t;
 }
-var Rn = /* @__PURE__ */ (function() {
+var nn = /* @__PURE__ */ (function() {
   function e(o) {
-    var r = this;
+    var n = this;
     this._insertTag = function(i) {
       var s;
-      r.tags.length === 0 ? r.insertionPoint ? s = r.insertionPoint.nextSibling : r.prepend ? s = r.container.firstChild : s = r.before : s = r.tags[r.tags.length - 1].nextSibling, r.container.insertBefore(i, s), r.tags.push(i);
+      n.tags.length === 0 ? n.insertionPoint ? s = n.insertionPoint.nextSibling : n.prepend ? s = n.container.firstChild : s = n.before : s = n.tags[n.tags.length - 1].nextSibling, n.container.insertBefore(i, s), n.tags.push(i);
     }, this.isSpeedy = o.speedy === void 0 ? !0 : o.speedy, this.tags = [], this.ctr = 0, this.nonce = o.nonce, this.key = o.key, this.container = o.container, this.prepend = o.prepend, this.insertionPoint = o.insertionPoint, this.before = null;
   }
   var t = e.prototype;
-  return t.hydrate = function(r) {
-    r.forEach(this._insertTag);
-  }, t.insert = function(r) {
-    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(Nn(this));
+  return t.hydrate = function(n) {
+    n.forEach(this._insertTag);
+  }, t.insert = function(n) {
+    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(rn(this));
     var i = this.tags[this.tags.length - 1];
     if (this.isSpeedy) {
-      var s = Wn(i);
+      var s = tn(i);
       try {
-        s.insertRule(r, s.cssRules.length);
+        s.insertRule(n, s.cssRules.length);
       } catch {
       }
     } else
-      i.appendChild(document.createTextNode(r));
+      i.appendChild(document.createTextNode(n));
     this.ctr++;
   }, t.flush = function() {
-    this.tags.forEach(function(r) {
+    this.tags.forEach(function(n) {
       var i;
-      return (i = r.parentNode) == null ? void 0 : i.removeChild(r);
+      return (i = n.parentNode) == null ? void 0 : i.removeChild(n);
     }), this.tags = [], this.ctr = 0;
   }, e;
-})(), 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;
+})(), N = "-ms-", ve = "-moz-", C = "-webkit-", yt = "comm", Fe = "rule", $e = "decl", on = "@import", Tt = "@keyframes", sn = "@layer", an = Math.abs, ye = String.fromCharCode, ln = Object.assign;
+function cn(e, t) {
+  return W(e, 0) ^ 45 ? (((t << 2 ^ W(e, 0)) << 2 ^ W(e, 1)) << 2 ^ W(e, 2)) << 2 ^ W(e, 3) : 0;
 }
-function at(e) {
+function St(e) {
   return e.trim();
 }
-function Vn(e, t) {
+function dn(e, t) {
   return (e = t.exec(e)) ? e[0] : e;
 }
-function v(e, t, o) {
+function x(e, t, o) {
   return e.replace(t, o);
 }
-function be(e, t) {
+function Ae(e, t) {
   return e.indexOf(t);
 }
-function E(e, t) {
+function W(e, t) {
   return e.charCodeAt(t) | 0;
 }
-function X(e, t, o) {
+function se(e, t, o) {
   return e.slice(t, o);
 }
-function D(e) {
+function V(e) {
   return e.length;
 }
-function ye(e) {
+function He(e) {
   return e.length;
 }
-function Q(e, t) {
+function pe(e, t) {
   return t.push(e), e;
 }
-function Fn(e, t) {
+function hn(e, t) {
   return e.map(t).join("");
 }
-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: "" };
+var Te = 1, Q = 1, It = 0, D = 0, L = 0, ee = "";
+function Se(e, t, o, n, i, s, d) {
+  return { value: e, root: t, parent: o, type: n, props: i, children: s, line: Te, column: Q, length: d, return: "" };
 }
-function Y(e, t) {
-  return Pn(ge("", null, null, "", null, null, 0), e, { length: -e.length }, t);
+function ne(e, t) {
+  return ln(Se("", null, null, "", null, null, 0), e, { length: -e.length }, t);
 }
-function On() {
-  return M;
+function un() {
+  return L;
 }
-function Hn() {
-  return M = N > 0 ? E(Z, --N) : 0, U--, M === 10 && (U = 1, pe--), M;
+function pn() {
+  return L = D > 0 ? W(ee, --D) : 0, Q--, L === 10 && (Q = 1, Te--), L;
 }
-function R() {
-  return M = N < ct ? E(Z, N++) : 0, U++, M === 10 && (U = 1, pe++), M;
+function P() {
+  return L = D < It ? W(ee, D++) : 0, Q++, L === 10 && (Q = 1, Te++), L;
 }
-function B() {
-  return E(Z, N);
+function O() {
+  return W(ee, D);
 }
-function te() {
-  return N;
+function ge() {
+  return D;
 }
-function K(e, t) {
-  return X(Z, e, t);
+function de(e, t) {
+  return se(ee, e, t);
 }
-function q(e) {
+function ie(e) {
   switch (e) {
     // \0 \t \n \r \s whitespace token
     case 0:
@@ -371,254 +510,254 @@ function q(e) {
   }
   return 0;
 }
-function lt(e) {
-  return pe = U = 1, ct = D(Z = e), N = 0, [];
+function Mt(e) {
+  return Te = Q = 1, It = V(ee = e), D = 0, [];
 }
-function dt(e) {
-  return Z = "", e;
+function Et(e) {
+  return ee = "", e;
 }
-function ne(e) {
-  return at(K(N - 1, we(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+function fe(e) {
+  return St(de(D - 1, De(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
-function $n(e) {
-  for (; (M = B()) && M < 33; )
-    R();
-  return q(e) > 2 || q(M) > 3 ? "" : " ";
+function gn(e) {
+  for (; (L = O()) && L < 33; )
+    P();
+  return ie(e) > 2 || ie(L) > 3 ? "" : " ";
 }
-function _n(e, t) {
-  for (; --t && R() && !(M < 48 || M > 102 || M > 57 && M < 65 || M > 70 && M < 97); )
+function fn(e, t) {
+  for (; --t && P() && !(L < 48 || L > 102 || L > 57 && L < 65 || L > 70 && L < 97); )
     ;
-  return K(e, te() + (t < 6 && B() == 32 && R() == 32));
+  return de(e, ge() + (t < 6 && O() == 32 && P() == 32));
 }
-function we(e) {
-  for (; R(); )
-    switch (M) {
+function De(e) {
+  for (; P(); )
+    switch (L) {
       // ] ) " '
       case e:
-        return N;
+        return D;
       // " '
       case 34:
       case 39:
-        e !== 34 && e !== 39 && we(M);
+        e !== 34 && e !== 39 && De(L);
         break;
       // (
       case 40:
-        e === 41 && we(e);
+        e === 41 && De(e);
         break;
       // \
       case 92:
-        R();
+        P();
         break;
     }
-  return N;
+  return D;
 }
-function zn(e, t) {
-  for (; R() && e + M !== 57; )
-    if (e + M === 84 && B() === 47)
+function bn(e, t) {
+  for (; P() && e + L !== 57; )
+    if (e + L === 84 && O() === 47)
       break;
-  return "/*" + K(t, N - 1) + "*" + ue(e === 47 ? e : R());
+  return "/*" + de(t, D - 1) + "*" + ye(e === 47 ? e : P());
 }
-function Gn(e) {
-  for (; !q(B()); )
-    R();
-  return K(e, N);
+function wn(e) {
+  for (; !ie(O()); )
+    P();
+  return de(e, D);
 }
-function Un(e) {
-  return dt(re("", null, null, null, [""], e = lt(e), 0, [0], e));
+function mn(e) {
+  return Et(be("", null, null, null, [""], e = Mt(e), 0, [0], e));
 }
-function re(e, t, o, r, i, s, l, a, d) {
-  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()) {
+function be(e, t, o, n, i, s, d, l, h) {
+  for (var f = 0, u = 0, p = d, a = 0, w = 0, m = 0, g = 1, y = 1, v = 1, M = 0, R = "", Y = i, F = s, B = n, T = R; y; )
+    switch (m = M, M = P()) {
       // (
       case 40:
-        if (b != 108 && E(y, u - 1) == 58) {
-          be(y += v(ne(T), "&", "&\f"), "&\f") != -1 && (m = -1);
+        if (m != 108 && W(T, p - 1) == 58) {
+          Ae(T += x(fe(M), "&", "&\f"), "&\f") != -1 && (v = -1);
           break;
         }
       // " ' [
       case 34:
       case 39:
       case 91:
-        y += ne(T);
+        T += fe(M);
         break;
       // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
-        y += $n(b);
+        T += gn(m);
         break;
       // \
       case 92:
-        y += _n(te() - 1, 7);
+        T += fn(ge() - 1, 7);
         continue;
       // /
       case 47:
-        switch (B()) {
+        switch (O()) {
           case 42:
           case 47:
-            Q(Zn(zn(R(), te()), t, o), d);
+            pe(kn(bn(P(), ge()), t, o), h);
             break;
           default:
-            y += "/";
+            T += "/";
         }
         break;
       // {
       case 123 * g:
-        a[k++] = D(y) * m;
+        l[f++] = V(T) * v;
       // } ; \0
       case 125 * g:
       case 59:
       case 0:
-        switch (T) {
+        switch (M) {
           // \0 }
           case 0:
           case 125:
-            x = 0;
+            y = 0;
           // ;
-          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);
+          case 59 + u:
+            v == -1 && (T = x(T, /\f/g, "")), w > 0 && V(T) - p && pe(w > 32 ? ot(T + ";", n, o, p - 1) : ot(x(T, " ", "") + ";", n, o, p - 2), h);
             break;
           // @ ;
           case 59:
-            y += ";";
+            T += ";";
           // { rule/at-rule
           default:
-            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);
+            if (pe(B = nt(T, t, o, f, u, i, l, R, Y = [], F = [], p), s), M === 123)
+              if (u === 0)
+                be(T, t, B, B, Y, s, p, l, F);
               else
-                switch (c === 99 && E(y, 3) === 110 ? 100 : c) {
+                switch (a === 99 && W(T, 3) === 110 ? 100 : a) {
                   // 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 = [], u), j), i, j, u, a, r ? F : j);
+                    be(e, B, B, n && pe(nt(e, B, B, 0, 0, i, l, R, i, Y = [], p), F), i, F, p, l, n ? Y : F);
                     break;
                   default:
-                    re(y, A, A, A, [""], j, 0, a, j);
+                    be(T, B, B, B, [""], F, 0, l, F);
                 }
         }
-        k = h = p = 0, g = m = 1, S = y = "", u = l;
+        f = u = w = 0, g = v = 1, R = T = "", p = d;
         break;
       // :
       case 58:
-        u = 1 + D(y), p = b;
+        p = 1 + V(T), w = m;
       default:
         if (g < 1) {
-          if (T == 123)
+          if (M == 123)
             --g;
-          else if (T == 125 && g++ == 0 && Hn() == 125)
+          else if (M == 125 && g++ == 0 && pn() == 125)
             continue;
         }
-        switch (y += ue(T), T * g) {
+        switch (T += ye(M), M * g) {
           // &
           case 38:
-            m = h > 0 ? 1 : (y += "\f", -1);
+            v = u > 0 ? 1 : (T += "\f", -1);
             break;
           // ,
           case 44:
-            a[k++] = (D(y) - 1) * m, m = 1;
+            l[f++] = (V(T) - 1) * v, v = 1;
             break;
           // @
           case 64:
-            B() === 45 && (y += ne(R())), c = B(), h = u = D(S = y += Gn(te())), T++;
+            O() === 45 && (T += fe(P())), a = O(), u = p = V(R = T += wn(ge())), M++;
             break;
           // -
           case 45:
-            b === 45 && D(y) == 2 && (g = 0);
+            m === 45 && V(T) == 2 && (g = 0);
         }
     }
   return s;
 }
-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 nt(e, t, o, n, i, s, d, l, h, f, u) {
+  for (var p = i - 1, a = i === 0 ? s : [""], w = He(a), m = 0, g = 0, y = 0; m < n; ++m)
+    for (var v = 0, M = se(e, p + 1, p = an(g = d[m])), R = e; v < w; ++v)
+      (R = St(g > 0 ? a[v] + " " + M : x(M, /&\f/g, a[v]))) && (h[y++] = R);
+  return Se(e, t, o, i === 0 ? Fe : l, h, f, u);
 }
-function Zn(e, t, o) {
-  return ge(e, t, o, st, ue(On()), X(e, 2, -2), 0);
+function kn(e, t, o) {
+  return Se(e, t, o, yt, ye(un()), se(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 ot(e, t, o, n) {
+  return Se(e, t, o, $e, se(e, 0, n), se(e, n + 1, -1), n);
 }
-function z(e, t) {
-  for (var o = "", r = ye(e), i = 0; i < r; i++)
+function q(e, t) {
+  for (var o = "", n = He(e), i = 0; i < n; i++)
     o += t(e[i], i, e, t) || "";
   return o;
 }
-function Yn(e, t, o, r) {
+function vn(e, t, o, n) {
   switch (e.type) {
-    case Dn:
+    case sn:
       if (e.children.length) break;
-    case An:
-    case xe:
+    case on:
+    case $e:
       return e.return = e.return || e.value;
-    case st:
+    case yt:
       return "";
-    case it:
-      return e.return = e.value + "{" + z(e.children, r) + "}";
-    case ve:
+    case Tt:
+      return e.return = e.value + "{" + q(e.children, n) + "}";
+    case Fe:
       e.value = e.props.join(",");
   }
-  return D(o = z(e.children, r)) ? e.return = e.value + "{" + o + "}" : "";
+  return V(o = q(e.children, n)) ? e.return = e.value + "{" + o + "}" : "";
 }
-function Xn(e) {
-  var t = ye(e);
-  return function(o, r, i, s) {
-    for (var l = "", a = 0; a < t; a++)
-      l += e[a](o, r, i, s) || "";
-    return l;
+function Cn(e) {
+  var t = He(e);
+  return function(o, n, i, s) {
+    for (var d = "", l = 0; l < t; l++)
+      d += e[l](o, n, i, s) || "";
+    return d;
   };
 }
-function qn(e) {
+function xn(e) {
   return function(t) {
     t.root || (t = t.return) && e(t);
   };
 }
-var Jn = function(t, o, r) {
-  for (var i = 0, s = 0; i = s, s = B(), i === 38 && s === 12 && (o[r] = 1), !q(s); )
-    R();
-  return K(t, N);
-}, Kn = function(t, o) {
-  var r = -1, i = 44;
+var yn = function(t, o, n) {
+  for (var i = 0, s = 0; i = s, s = O(), i === 38 && s === 12 && (o[n] = 1), !ie(s); )
+    P();
+  return de(t, D);
+}, Tn = function(t, o) {
+  var n = -1, i = 44;
   do
-    switch (q(i)) {
+    switch (ie(i)) {
       case 0:
-        i === 38 && B() === 12 && (o[r] = 1), t[r] += Jn(N - 1, o, r);
+        i === 38 && O() === 12 && (o[n] = 1), t[n] += yn(D - 1, o, n);
         break;
       case 2:
-        t[r] += ne(i);
+        t[n] += fe(i);
         break;
       case 4:
         if (i === 44) {
-          t[++r] = B() === 58 ? "&\f" : "", o[r] = t[r].length;
+          t[++n] = O() === 58 ? "&\f" : "", o[n] = t[n].length;
           break;
         }
       // fallthrough
       default:
-        t[r] += ue(i);
+        t[n] += ye(i);
     }
-  while (i = R());
+  while (i = P());
   return t;
-}, Qn = function(t, o) {
-  return dt(Kn(lt(t), o));
-}, Be = /* @__PURE__ */ new WeakMap(), er = function(t) {
+}, Sn = function(t, o) {
+  return Et(Tn(Mt(t), o));
+}, st = /* @__PURE__ */ new WeakMap(), In = 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
   t.length < 1)) {
-    for (var o = t.value, r = t.parent, i = t.column === r.column && t.line === r.line; r.type !== "rule"; )
-      if (r = r.parent, !r) return;
-    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 h = 0; h < a.length; h++, k++)
-          t.props[k] = s[d] ? l[d].replace(/&\f/g, a[h]) : a[h] + " " + l[d];
+    for (var o = t.value, n = t.parent, i = t.column === n.column && t.line === n.line; n.type !== "rule"; )
+      if (n = n.parent, !n) return;
+    if (!(t.props.length === 1 && o.charCodeAt(0) !== 58 && !st.get(n)) && !i) {
+      st.set(t, !0);
+      for (var s = [], d = Sn(o, s), l = n.props, h = 0, f = 0; h < d.length; h++)
+        for (var u = 0; u < l.length; u++, f++)
+          t.props[f] = s[h] ? d[h].replace(/&\f/g, l[u]) : l[u] + " " + d[h];
     }
   }
-}, tr = function(t) {
+}, Mn = function(t) {
   if (t.type === "decl") {
     var o = t.value;
     // charcode for l
@@ -626,8 +765,8 @@ var Jn = function(t, o, r) {
     o.charCodeAt(2) === 98 && (t.return = "", t.value = "");
   }
 };
-function ht(e, t) {
-  switch (jn(e, t)) {
+function Lt(e, t) {
+  switch (cn(e, t)) {
     // color-adjust
     case 5103:
       return C + "print-" + e + e;
@@ -667,51 +806,51 @@ function ht(e, t) {
     case 4810:
     case 6968:
     case 2756:
-      return C + e + ae + e + L + e + e;
+      return C + e + ve + e + N + e + e;
     // flex, flex-direction
     case 6828:
     case 4268:
-      return C + e + L + e + e;
+      return C + e + N + e + e;
     // order
     case 6165:
-      return C + e + L + "flex-" + e + e;
+      return C + e + N + "flex-" + e + e;
     // align-items
     case 5187:
-      return C + e + v(e, /(\w+).+(:[^]+)/, C + "box-$1$2" + L + "flex-$1$2") + e;
+      return C + e + x(e, /(\w+).+(:[^]+)/, C + "box-$1$2" + N + "flex-$1$2") + e;
     // align-self
     case 5443:
-      return C + e + L + "flex-item-" + v(e, /flex-|-self/, "") + e;
+      return C + e + N + "flex-item-" + x(e, /flex-|-self/, "") + e;
     // align-content
     case 4675:
-      return C + e + L + "flex-line-pack" + v(e, /align-content|flex-|-self/, "") + e;
+      return C + e + N + "flex-line-pack" + x(e, /align-content|flex-|-self/, "") + e;
     // flex-shrink
     case 5548:
-      return C + e + L + v(e, "shrink", "negative") + e;
+      return C + e + N + x(e, "shrink", "negative") + e;
     // flex-basis
     case 5292:
-      return C + e + L + v(e, "basis", "preferred-size") + e;
+      return C + e + N + x(e, "basis", "preferred-size") + e;
     // flex-grow
     case 6060:
-      return C + "box-" + v(e, "-grow", "") + C + e + L + v(e, "grow", "positive") + e;
+      return C + "box-" + x(e, "-grow", "") + C + e + N + x(e, "grow", "positive") + e;
     // transition
     case 4554:
-      return C + v(e, /([^-])(transform)/g, "$1" + C + "$2") + e;
+      return C + x(e, /([^-])(transform)/g, "$1" + C + "$2") + e;
     // cursor
     case 6187:
-      return v(v(v(e, /(zoom-|grab)/, C + "$1"), /(image-set)/, C + "$1"), e, "") + e;
+      return x(x(x(e, /(zoom-|grab)/, C + "$1"), /(image-set)/, C + "$1"), e, "") + e;
     // background, background-image
     case 5495:
     case 3959:
-      return v(e, /(image-set\([^]*)/, C + "$1$`$1");
+      return x(e, /(image-set\([^]*)/, C + "$1$`$1");
     // justify-content
     case 4968:
-      return v(v(e, /(.+:)(flex-)?(.*)/, C + "box-pack:$3" + L + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + C + e + e;
+      return x(x(e, /(.+:)(flex-)?(.*)/, C + "box-pack:$3" + N + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + C + e + e;
     // (margin|padding)-inline-(start|end)
     case 4095:
     case 3583:
     case 4068:
     case 2532:
-      return v(e, /(.+)-inline(.+)/, C + "$1$2") + e;
+      return x(e, /(.+)-inline(.+)/, C + "$1$2") + e;
     // (min|max)?(width|height|inline-size|block-size)
     case 8116:
     case 7059:
@@ -725,116 +864,116 @@ function ht(e, t) {
     case 5789:
     case 5021:
     case 4765:
-      if (D(e) - 1 - t > 6) switch (E(e, t + 1)) {
+      if (V(e) - 1 - t > 6) switch (W(e, t + 1)) {
         // (m)ax-content, (m)in-content
         case 109:
-          if (E(e, t + 4) !== 45) break;
+          if (W(e, t + 4) !== 45) break;
         // (f)ill-available, (f)it-content
         case 102:
-          return v(e, /(.+:)(.+)-([^]+)/, "$1" + C + "$2-$3$1" + ae + (E(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
+          return x(e, /(.+:)(.+)-([^]+)/, "$1" + C + "$2-$3$1" + ve + (W(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
         // (s)tretch
         case 115:
-          return ~be(e, "stretch") ? ht(v(e, "stretch", "fill-available"), t) + e : e;
+          return ~Ae(e, "stretch") ? Lt(x(e, "stretch", "fill-available"), t) + e : e;
       }
       break;
     // position: sticky
     case 4949:
-      if (E(e, t + 1) !== 115) break;
+      if (W(e, t + 1) !== 115) break;
     // display: (flex|inline-flex)
     case 6444:
-      switch (E(e, D(e) - 3 - (~be(e, "!important") && 10))) {
+      switch (W(e, V(e) - 3 - (~Ae(e, "!important") && 10))) {
         // stic(k)y
         case 107:
-          return v(e, ":", ":" + C) + e;
+          return x(e, ":", ":" + C) + e;
         // (inline-)?fl(e)x
         case 101:
-          return v(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + C + (E(e, 14) === 45 ? "inline-" : "") + "box$3$1" + C + "$2$3$1" + L + "$2box$3") + e;
+          return x(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + C + (W(e, 14) === 45 ? "inline-" : "") + "box$3$1" + C + "$2$3$1" + N + "$2box$3") + e;
       }
       break;
     // writing-mode
     case 5936:
-      switch (E(e, t + 11)) {
+      switch (W(e, t + 11)) {
         // vertical-l(r)
         case 114:
-          return C + e + L + v(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+          return C + e + N + x(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
         // vertical-r(l)
         case 108:
-          return C + e + L + v(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+          return C + e + N + x(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
         // horizontal(-)tb
         case 45:
-          return C + e + L + v(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+          return C + e + N + x(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
       }
-      return C + e + L + e + e;
+      return C + e + N + e + e;
   }
   return e;
 }
-var nr = function(t, o, r, i) {
+var En = function(t, o, n, i) {
   if (t.length > -1 && !t.return) switch (t.type) {
-    case xe:
-      t.return = ht(t.value, t.length);
+    case $e:
+      t.return = Lt(t.value, t.length);
       break;
-    case it:
-      return z([Y(t, {
-        value: v(t.value, "@", "@" + C)
+    case Tt:
+      return q([ne(t, {
+        value: x(t.value, "@", "@" + C)
       })], i);
-    case ve:
-      if (t.length) return Fn(t.props, function(s) {
-        switch (Vn(s, /(::plac\w+|:read-\w+)/)) {
+    case Fe:
+      if (t.length) return hn(t.props, function(s) {
+        switch (dn(s, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
-            return z([Y(t, {
-              props: [v(s, /:(read-\w+)/, ":" + ae + "$1")]
+            return q([ne(t, {
+              props: [x(s, /:(read-\w+)/, ":" + ve + "$1")]
             })], i);
           // :placeholder
           case "::placeholder":
-            return z([Y(t, {
-              props: [v(s, /:(plac\w+)/, ":" + C + "input-$1")]
-            }), Y(t, {
-              props: [v(s, /:(plac\w+)/, ":" + ae + "$1")]
-            }), Y(t, {
-              props: [v(s, /:(plac\w+)/, L + "input-$1")]
+            return q([ne(t, {
+              props: [x(s, /:(plac\w+)/, ":" + C + "input-$1")]
+            }), ne(t, {
+              props: [x(s, /:(plac\w+)/, ":" + ve + "$1")]
+            }), ne(t, {
+              props: [x(s, /:(plac\w+)/, N + "input-$1")]
             })], i);
         }
         return "";
       });
   }
-}, rr = [nr], or = function(t) {
+}, Ln = [En], Rn = function(t) {
   var o = t.key;
   if (o === "css") {
-    var r = document.querySelectorAll("style[data-emotion]:not([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 n = document.querySelectorAll("style[data-emotion]:not([data-s])");
+    Array.prototype.forEach.call(n, function(g) {
+      var y = g.getAttribute("data-emotion");
+      y.indexOf(" ") !== -1 && (document.head.appendChild(g), g.setAttribute("data-s", ""));
     });
   }
-  var i = t.stylisPlugins || rr, s = {}, l, a = [];
-  l = t.container || document.head, Array.prototype.forEach.call(
+  var i = t.stylisPlugins || Ln, s = {}, d, l = [];
+  d = t.container || document.head, Array.prototype.forEach.call(
     // 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(g) {
-      for (var x = g.getAttribute("data-emotion").split(" "), m = 1; m < x.length; m++)
-        s[x[m]] = !0;
-      a.push(g);
+      for (var y = g.getAttribute("data-emotion").split(" "), v = 1; v < y.length; v++)
+        s[y[v]] = !0;
+      l.push(g);
     }
   );
-  var d, k = [er, tr];
+  var h, f = [In, Mn];
   {
-    var h, u = [Yn, qn(function(g) {
-      h.insert(g);
-    })], c = Xn(k.concat(i, u)), p = function(x) {
-      return z(Un(x), c);
+    var u, p = [vn, xn(function(g) {
+      u.insert(g);
+    })], a = Cn(f.concat(i, p)), w = function(y) {
+      return q(mn(y), a);
     };
-    d = function(x, m, T, S) {
-      h = T, p(x ? x + "{" + m.styles + "}" : m.styles), S && (b.inserted[m.name] = !0);
+    h = function(y, v, M, R) {
+      u = M, w(y ? y + "{" + v.styles + "}" : v.styles), R && (m.inserted[v.name] = !0);
     };
   }
-  var b = {
+  var m = {
     key: o,
-    sheet: new Rn({
+    sheet: new nn({
       key: o,
-      container: l,
+      container: d,
       nonce: t.nonce,
       speedy: t.speedy,
       prepend: t.prepend,
@@ -843,68 +982,68 @@ var nr = function(t, o, r, i) {
     nonce: t.nonce,
     inserted: s,
     registered: {},
-    insert: d
+    insert: h
   };
-  return b.sheet.hydrate(a), b;
+  return m.sheet.hydrate(l), m;
 };
-const ut = ({ children: e, viewport: t, containerProps: o }) => {
-  const r = G(null), { theme: i } = $(), [s, l] = P({
+const Rt = ({ children: e, viewport: t, containerProps: o }) => {
+  const n = K(null), { theme: i } = U(), [s, d] = j({
     width: 0,
     height: 0
   });
-  V(() => {
-    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
+  z(() => {
+    const m = jr((y) => {
+      const v = y.at(0)?.target;
+      if (!v) return;
+      const { width: M, height: R } = v.getBoundingClientRect();
+      d(() => ({
+        width: M,
+        height: R
       }));
-    }, 200), g = new ResizeObserver(b);
-    return r.current && g.observe(r.current), () => g.disconnect();
+    }, 200), g = new ResizeObserver(m);
+    return n.current && g.observe(n.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, 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(
+  const l = Qe(t?.width) ? t.width(s.width) : t?.width, h = Qe(t?.height) ? t.height(s.height) : t?.height, f = ke(l) ? s.width / l : 1, u = ke(h) ? s.height / h : 1, p = Math.min(f, u, 1), a = (h ?? s.height / p) || 0, w = (l ?? s.width / p) || 0;
+  return /* @__PURE__ */ r("div", { ...o, css: { padding: 8, width: "100%", height: "100%", backgroundColor: We.ink["1s"] }, children: /* @__PURE__ */ r("div", { css: { position: "relative", overflow: "hidden", width: "100%", height: "100%" }, ref: n, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
-        transform: `scale(${u})`,
-        width: p,
-        height: c,
-        marginLeft: (s.width - p) / 2,
-        marginTop: (s.height - c) / 2
+        transform: `scale(${p})`,
+        width: w,
+        height: a,
+        marginLeft: (s.width - w) / 2,
+        marginTop: (s.height - a) / 2
       },
       css: { position: "absolute" },
-      children: /* @__PURE__ */ n(
-        Tn,
+      children: /* @__PURE__ */ r(
+        qr,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
-          width: a ?? "100%",
-          height: d ?? "100%",
-          children: /* @__PURE__ */ n(sr, { theme: i, children: e })
+          width: l ?? "100%",
+          height: h ?? "100%",
+          children: /* @__PURE__ */ r(Wn, { theme: i, children: e })
         }
       )
     }
   ) }) });
-}, sr = ({ children: e, theme: t }) => {
-  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, h, u) {
-      window.customElements.get(k) || r.customElements.define(k, h, u), d(k, h, u);
+}, Wn = ({ children: e, theme: t }) => {
+  const { document: o, window: n } = Oe(), [i, s] = j(!1), d = K(window.customElements.define.bind(window.customElements));
+  z(() => {
+    const h = d.current;
+    return n && (window.customElements.define = function(f, u, p) {
+      window.customElements.get(f) || n.customElements.define(f, u, p), h(f, u, p);
     }), o?.head.replaceWith(document.head.cloneNode(!0)), s(!0), () => {
-      window.customElements.define = d;
+      window.customElements.define = h;
     };
-  }, [o, r]);
-  const a = or({
+  }, [o, n]);
+  const l = Rn({
     key: "css",
     container: o?.head
   });
-  return i ? /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ w(wn, { value: a, children: [
-    /* @__PURE__ */ n(
-      kn,
+  return i ? /* @__PURE__ */ r(ct, { children: /* @__PURE__ */ b(zr, { value: l, children: [
+    /* @__PURE__ */ r(
+      _r,
       {
         styles: {
           ".frame-content": {
@@ -913,23 +1052,23 @@ const ut = ({ children: e, viewport: t, containerProps: o }) => {
             minHeight: "100vh",
             justifyContent: "center"
           },
-          [`& *[${Te.DATA_NODE_DROP_TARGET}=${Ie.True}]`]: {
+          [`& *[${Ye.DATA_NODE_DROP_TARGET}=${Ze.True}]`]: {
             outlineWidth: 1,
             outlineStyle: "solid",
             outlineOffset: -1,
             outlineColor: "green"
           },
-          [`& *[${Te.DATA_NODE_DROP_TARGET_ERROR}=${Ie.True}]`]: {
+          [`& *[${Ye.DATA_NODE_DROP_TARGET_ERROR}=${Ze.True}]`]: {
             outlineColor: "red"
           }
         }
       }
     ),
-    /* @__PURE__ */ n(fn, { root: o?.body, theme: t, children: e })
+    /* @__PURE__ */ r($r, { root: o?.body, theme: t, children: e })
   ] }) }) : null;
 };
-var O = /* @__PURE__ */ ((e) => (e[e.Pixels = 0] = "Pixels", e[e.Unitless = 1] = "Unitless", e))(O || {});
-const ir = [
+var _ = /* @__PURE__ */ ((e) => (e[e.Pixels = 0] = "Pixels", e[e.Unitless = 1] = "Unitless", e))(_ || {});
+const Nn = [
   {
     label: "Pixels",
     value: 0
@@ -940,55 +1079,55 @@ const ir = [
     value: 1
     /* 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 = kt(o?.lineHeight, "float"), a = ({ unit: c, value: p }) => {
-    if (ee(p)) {
-      r?.({
-        lineHeight: c === O.Unitless ? 1 : p
+], Fo = ({ name: e, responsive: t = !0, value: o, onChange: n }) => {
+  const i = ke(o?.lineHeight) ? _.Unitless : _.Pixels, s = i === _.Unitless ? 0.1 : 1, d = Ut(o?.lineHeight, "float"), l = ({ unit: a, value: w }) => {
+    if ($(w)) {
+      n?.({
+        lineHeight: a === _.Unitless ? 1 : w
       });
       return;
     }
-    r?.({
-      lineHeight: c === O.Unitless ? Number(p.toFixed(1)) : `${p}px`
+    n?.({
+      lineHeight: a === _.Unitless ? Number(w.toFixed(1)) : `${w}px`
     });
-  }, d = (c) => {
-    a({ unit: Number(c.target.value) });
-  }, k = (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) });
-  }, u = (c) => {
-    c.stopPropagation(), !ee(l) && a({ unit: i, value: Math.max(l - s, 0) });
+  }, h = (a) => {
+    l({ unit: Number(a.target.value) });
+  }, f = (a) => {
+    const w = isNaN(a.target.valueAsNumber) ? void 0 : a.target.valueAsNumber;
+    l({ unit: i, value: w });
+  }, u = (a) => {
+    a.stopPropagation(), !$(d) && l({ unit: i, value: Math.max(d + s, 0) });
+  }, p = (a) => {
+    a.stopPropagation(), !$(d) && l({ unit: i, value: Math.max(d - s, 0) });
   };
-  return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ n(J, { responsive: t, name: e ?? "Line height", children: /* @__PURE__ */ n("div", { css: { display: "flex", alignItems: "center", gap: 4 }, children: ir.map((c) => /* @__PURE__ */ n(
-      Oe,
+  return /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ r(ae, { responsive: t, name: e ?? "Line height", children: /* @__PURE__ */ r("div", { css: { display: "flex", alignItems: "center", gap: 4 }, children: Nn.map((a) => /* @__PURE__ */ r(
+      dt,
       {
-        onChange: d,
-        checked: c.value === i,
-        value: c.value,
+        onChange: h,
+        checked: a.value === i,
+        value: a.value,
         name: "toolbar-line-height",
-        children: c.label
+        children: a.label
       },
-      c.value
+      a.value
     )) }) }),
-    /* @__PURE__ */ n("div", { css: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n("div", { css: { width: "50%" }, children: /* @__PURE__ */ n(
-      mt,
+    /* @__PURE__ */ r("div", { css: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ r("div", { css: { width: "50%" }, children: /* @__PURE__ */ r(
+      Yt,
       {
         fractionDigits: 1,
-        type: i === O.Unitless ? "decimal" : "integer",
-        value: l ?? "",
-        onChange: k,
-        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 }) }),
+        type: i === _.Unitless ? "decimal" : "integer",
+        value: d ?? "",
+        onChange: f,
+        prefix: /* @__PURE__ */ r(A, { disabled: ke(d) && d <= 0, onClick: p, children: /* @__PURE__ */ r(I, { source: Zt }) }),
+        suffix: /* @__PURE__ */ r(A, { onClick: u, children: /* @__PURE__ */ r(I, { source: ht }) }),
         mode: "onBlur",
         css: { textAlign: "center" },
         placeholder: "normal"
       }
     ) }) })
   ] });
-}, Pe = [
+}, it = [
   {
     label: "Block",
     value: "block"
@@ -1017,18 +1156,18 @@ const ir = [
     label: "Inline Grid",
     value: "inline-grid"
   }
-], Co = ({
+], $o = ({
   name: e,
   responsive: t = !1,
   availableDisplays: o,
-  onChange: r,
+  onChange: n,
   value: i
 }) => {
-  const s = ee(o) ? Pe : Pe.filter((a) => o.includes(a.value)), l = (a) => {
-    r?.({ display: a });
+  const s = $(o) ? it : it.filter((l) => o.includes(l.value)), d = (l) => {
+    n?.({ display: l });
   };
-  return /* @__PURE__ */ n(J, { name: e ?? "Display", responsive: t, children: /* @__PURE__ */ n(
-    vt,
+  return /* @__PURE__ */ r(ae, { name: e ?? "Display", responsive: t, children: /* @__PURE__ */ r(
+    Xt,
     {
       css: {
         width: "50%"
@@ -1037,10 +1176,10 @@ const ir = [
       placeholder: "default",
       options: s,
       value: i?.display ?? null,
-      onChange: l
+      onChange: d
     }
   ) });
-}, vo = ({ value: e, onChange: t, name: o, responsive: r = !1 }) => {
+}, Ho = ({ value: e, onChange: t, name: o, responsive: n = !1 }) => {
   const i = {
     flexBasis: e?.flexBasis ?? "auto",
     flexGrow: e?.flexGrow ?? 0,
@@ -1064,28 +1203,28 @@ const ir = [
         flexShrink: 1
       }
     }
-  ], 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);
+  ], d = s.find((h) => Vr(h.rawValue, i))?.value, l = (h) => {
+    const f = s.find((u) => u.value === Number(h.target.value));
+    f && t?.(f.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(
-    Oe,
+  return /* @__PURE__ */ r(ae, { name: o ?? "Content", responsive: n, children: /* @__PURE__ */ r("div", { css: { display: "inline-flex", alignItems: "center", gap: 8 }, children: s.map((h) => /* @__PURE__ */ r(
+    dt,
     {
-      checked: d.value === l,
-      value: d.value,
-      onChange: a,
-      children: d.label
+      checked: h.value === d,
+      value: h.value,
+      onChange: l,
+      children: h.label
     },
-    d.value
+    h.value
   )) }) });
-}, xo = ({ name: e, value: t, onChange: o, responsive: r = !0 }) => {
-  const i = G(null), s = (l) => {
+}, zo = ({ name: e, value: t, onChange: o, responsive: n = !0 }) => {
+  const i = K(null), s = (d) => {
     o?.({
-      minWidth: l
+      minWidth: d
     });
   };
-  return /* @__PURE__ */ n(J, { name: e ?? "Min width", responsive: r, children: /* @__PURE__ */ n("div", { css: { position: "relative", width: "50%" }, children: /* @__PURE__ */ n(
-    xt,
+  return /* @__PURE__ */ r(ae, { name: e ?? "Min width", responsive: n, children: /* @__PURE__ */ r("div", { css: { position: "relative", width: "50%" }, children: /* @__PURE__ */ r(
+    qt,
     {
       fullWidth: !0,
       wrapRef: i,
@@ -1097,20 +1236,20 @@ const ir = [
       }
     }
   ) }) });
-}, yo = ({ value: e, onChange: t }) => {
-  const [o, r] = P(!1), i = (l) => {
-    t?.({ ...e, sizeVariant: l });
-  }, s = (l) => {
+}, _o = ({ value: e, onChange: t }) => {
+  const [o, n] = j(!1), i = (d) => {
+    t?.({ ...e, sizeVariant: d });
+  }, s = (d) => {
     t?.({
       ...e,
       css: {
         ...e?.css,
-        ...l
+        ...d
       }
     });
   };
-  return /* @__PURE__ */ n(J, { name: "Text style", children: /* @__PURE__ */ w(yt, { open: o, onOpenChange: r, placement: "right", children: [
-    /* @__PURE__ */ n(Tt, { children: /* @__PURE__ */ w(
+  return /* @__PURE__ */ r(ae, { name: "Text style", children: /* @__PURE__ */ b(Jt, { open: o, onOpenChange: n, placement: "right", children: [
+    /* @__PURE__ */ r(Kt, { children: /* @__PURE__ */ b(
       "button",
       {
         css: [
@@ -1123,31 +1262,31 @@ const ir = [
             textAlign: "left",
             width: "50%",
             height: 32,
-            backgroundColor: f.palette.white["1s"],
+            backgroundColor: c.palette.white["1s"],
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            ...f.text.xs
+            ...c.text.xs
           },
-          o && { backgroundColor: f.palette.black["7s"] }
+          o && { backgroundColor: c.palette.black["7s"] }
         ],
         children: [
-          /* @__PURE__ */ n(I, { css: { color: "white" }, source: It }),
-          /* @__PURE__ */ n("span", { children: "Auto" })
+          /* @__PURE__ */ r(I, { css: { color: "white" }, source: Qt }),
+          /* @__PURE__ */ r("span", { children: "Auto" })
         ]
       }
     ) }),
-    /* @__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(St, { children: /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(I, { source: $e }) }) })
+    /* @__PURE__ */ r(er, { children: /* @__PURE__ */ b("div", { style: { width: 280 }, children: [
+      /* @__PURE__ */ b("div", { css: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ r("div", { css: { fontWeight: 500 }, children: "Text style" }),
+        /* @__PURE__ */ r(tr, { children: /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(I, { source: Pe }) }) })
       ] }),
-      /* @__PURE__ */ n("hr", { css: { marginBlock: 8, borderColor: f.palette.white["1s"] } }),
-      /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-        /* @__PURE__ */ n(Et, { value: e?.sizeVariant, onChange: i }),
-        /* @__PURE__ */ n(Lt, { value: { color: e?.css?.color }, onChange: s }),
-        /* @__PURE__ */ n(
-          Wt,
+      /* @__PURE__ */ r("hr", { css: { marginBlock: 8, borderColor: c.palette.white["1s"] } }),
+      /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ r(rr, { value: e?.sizeVariant, onChange: i }),
+        /* @__PURE__ */ r(nr, { value: { color: e?.css?.color }, onChange: s }),
+        /* @__PURE__ */ r(
+          or,
           {
             name: "Style",
             value: {
@@ -1158,9 +1297,9 @@ const ir = [
             onChange: s
           }
         ),
-        /* @__PURE__ */ n(Nt, { value: { fontWeight: e?.css?.fontWeight }, onChange: s }),
-        /* @__PURE__ */ n(
-          Rt,
+        /* @__PURE__ */ r(sr, { value: { fontWeight: e?.css?.fontWeight }, onChange: s }),
+        /* @__PURE__ */ r(
+          ir,
           {
             value: {
               textTransform: e?.css?.textTransform
@@ -1171,11 +1310,11 @@ const ir = [
       ] })
     ] }) })
   ] }) });
-}, je = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, at = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 5L5 8L8 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M5 8H14C17.314 8 20 10.462 20 13.5V13.5C20 16.538 17.314 19 14 19H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, ar = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, An = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 19.0004C11.158 19.0004 10.315 18.8224 9.496 18.5054" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20.882 12.4678C18.99 15.9668 15.495 18.9998 12 18.9998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M19.079 8.9209C19.77 9.7299 20.384 10.6119 20.882 11.5329C21.039 11.8239 21.039 12.1769 20.882 12.4679" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1183,34 +1322,34 @@ const ir = [
 <path d="M9.77299 14.2271C8.54299 12.9971 8.54299 11.0021 9.77299 9.77211C11.003 8.54211 12.998 8.54211 14.228 9.77211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M17.044 6.956C15.497 5.759 13.748 5 12 5C8.50499 5 5.00999 8.033 3.11799 11.533C2.96099 11.824 2.96099 12.177 3.11799 12.468C4.06399 14.217 5.40999 15.849 6.95599 17.045" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, cr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Dn = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <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 = ({ 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 = () => {
-    r({ mode: t === "full" ? "compact" : "full" });
-  }, b = () => {
+`, Pn = '<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>', Bn = ({ actions: e }) => {
+  const { mode: t, screen: o, setState: n, handlers: i } = U(), [s, d] = j(!1), {
+    actions: { history: l, selectNode: h },
+    canRedo: f,
+    canUndo: u,
+    query: p
+  } = G((y, v) => ({
+    enabled: y.options.enabled,
+    canUndo: v.history.canUndo(),
+    canRedo: v.history.canRedo()
+  })), a = (y) => {
+    n({ screen: y });
+  }, w = () => {
+    n({ mode: t === "full" ? "compact" : "full" });
+  }, m = () => {
     i.close();
   }, g = async () => {
     try {
-      l(!0), d(), await i.submit(u.getSerializedNodes());
+      d(!0), h(), await i.submit(p.getSerializedNodes());
     } finally {
-      l(!1);
+      d(!1);
     }
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "div",
     {
       css: {
@@ -1219,15 +1358,15 @@ const ir = [
         alignItems: "center",
         gap: 16,
         justifyContent: "space-between",
-        backgroundColor: f.palette.ink["6s"],
-        color: f.palette.white["6s"],
-        ...f.text.sm
+        backgroundColor: c.palette.ink["6s"],
+        color: c.palette.white["6s"],
+        ...c.text.sm
       },
       children: [
-        /* @__PURE__ */ w("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: [
-          /* @__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(
+        /* @__PURE__ */ b("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ r(A, { size: "32", onClick: m, children: /* @__PURE__ */ r(I, { source: Pn }) }),
+          /* @__PURE__ */ r(ar, { onSelectionChange: a, value: o, children: lr.map(({ icon: y, size: v, name: M }) => /* @__PURE__ */ r(A, { tooltip: { content: M }, value: v, children: /* @__PURE__ */ r(I, { source: y }) }, v)) }),
+          /* @__PURE__ */ b(
             "div",
             {
               css: {
@@ -1236,15 +1375,15 @@ const ir = [
                 alignItems: "center",
                 gap: 8,
                 borderRadius: 8,
-                backgroundColor: f.palette.white["1s"]
+                backgroundColor: c.palette.white["1s"]
               },
               children: [
-                /* @__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)" } }) })
+                /* @__PURE__ */ r(A, { onClick: l.undo, disabled: !u, children: /* @__PURE__ */ r(I, { source: at }) }),
+                /* @__PURE__ */ r(A, { onClick: l.redo, disabled: !f, children: /* @__PURE__ */ r(I, { source: at, css: { transform: "rotate(180deg)" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             "div",
             {
               css: {
@@ -1253,58 +1392,58 @@ const ir = [
                 alignItems: "center",
                 gap: 8,
                 borderRadius: 8,
-                backgroundColor: f.palette.white["1s"]
+                backgroundColor: c.palette.white["1s"]
               },
-              children: /* @__PURE__ */ n(W, { onClick: p, children: /* @__PURE__ */ n(I, { source: t === "full" ? cr : ar }) })
+              children: /* @__PURE__ */ r(A, { onClick: w, children: /* @__PURE__ */ r(I, { source: t === "full" ? Dn : An }) })
             }
           ),
           e
         ] }),
-        /* @__PURE__ */ n("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ n(oe, { isLoading: s, onClick: g, children: "Save" }) })
+        /* @__PURE__ */ r("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ r(me, { isLoading: s, onClick: g, children: "Save" }) })
       ]
     }
   );
-}, hr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, jn = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 19.9997L16.3763 16.376" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M4 11.25C4 15.2541 7.24594 18.5 11.25 18.5C15.2541 18.5 18.5 15.2541 18.5 11.25C18.5 7.24594 15.2541 4 11.25 4V4C7.24606 4.00029 4.00029 7.24606 4 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, ur = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Vn = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, pr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, On = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="3.00024" y="3" width="17.9997" height="17.9997" rx="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M13.5 20.9998V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M9.50011 11.9998V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20.9999 12H3.00024" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, gr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Fn = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M3 12H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12 21V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Ve = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, lt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 6V18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M21 6V18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6 21H18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6 3H18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, fr = {
+`, $n = {
   name: "Layout",
   templates: [
     {
       name: "Container",
-      template: /* @__PURE__ */ n(Bt, {}),
-      icon: { source: Ve, height: 32 }
+      template: /* @__PURE__ */ r(cr, {}),
+      icon: { source: lt, height: 32 }
     },
     {
       name: "Block",
-      template: /* @__PURE__ */ n(Pt, {}),
-      icon: { source: Ve, height: 32 }
+      template: /* @__PURE__ */ r(dr, {}),
+      icon: { source: lt, height: 32 }
     },
     {
       name: "Grid",
-      template: /* @__PURE__ */ w(
-        jt,
+      template: /* @__PURE__ */ b(
+        hr,
         {
           cols: 2,
           sx: {
@@ -1315,26 +1454,26 @@ const ir = [
             paddingBottom: 16
           },
           children: [
-            /* @__PURE__ */ n(Me, {}),
-            /* @__PURE__ */ n(Me, {})
+            /* @__PURE__ */ r(Xe, {}),
+            /* @__PURE__ */ r(Xe, {})
           ]
         }
       ),
-      icon: { source: gr, height: 32 }
+      icon: { source: Fn, height: 32 }
     },
     {
       name: "Flex",
-      template: /* @__PURE__ */ w(Vt, { sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
-        /* @__PURE__ */ n(
-          Se,
+      template: /* @__PURE__ */ b(ur, { sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
+        /* @__PURE__ */ r(
+          qe,
           {
             sx: {
               width: "40%"
             }
           }
         ),
-        /* @__PURE__ */ n(
-          Se,
+        /* @__PURE__ */ r(
+          qe,
           {
             sx: {
               width: "60%"
@@ -1342,10 +1481,10 @@ const ir = [
           }
         )
       ] }),
-      icon: { source: pr, height: 32 }
+      icon: { source: On, height: 32 }
     }
   ]
-}, br = `<svg height="24" width="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
+}, Hn = `<svg height="24" width="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
   <style type="text/css">
     .st0{fill:currentColor;}
   </style>
@@ -1374,31 +1513,31 @@ const ir = [
 		c4.709,14.802,17.357,22.204,33.644,22.204c16.286,0,28.668-8.204,33.374-22.881c1.617-5.111,2.29-12.645,2.29-20.716v-0.95
 		C372.362,303.664,369.538,300.836,364.556,300.836z"/>
   </g>
-</svg>`, wr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, zn = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20.64 15.3735L16.5187 11.2522C16.1434 10.8769 15.5357 10.8769 15.1613 11.2522L11.04 15.3735" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.76 20.1736H6.24C4.64928 20.1736 3.36 18.8843 3.36 17.2936V5.77355C3.36 4.18283 4.64928 2.89355 6.24 2.89355H17.76C19.3507 2.89355 20.64 4.18283 20.64 5.77355V17.2936C20.64 18.8843 19.3507 20.1736 17.76 20.1736Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15.84 20.1734L9.79872 14.1321C9.42336 13.7567 8.81568 13.7567 8.44128 14.1321L3.78816 18.7852" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M9.37456 8.39927C9.51515 8.53986 9.51515 8.7678 9.37456 8.90839C9.23397 9.04898 9.00603 9.04898 8.86544 8.90839C8.72485 8.7678 8.72485 8.53986 8.86544 8.39927C9.00603 8.25868 9.23397 8.25868 9.37456 8.39927" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, kr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, _n = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2939 12L14.6229 9.5L10.2939 7V12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.889 3.38867H4.111C3.497 3.38867 3 3.88567 3 4.49967V14.4997C3 15.1137 3.497 15.6107 4.111 15.6107H19.889C20.503 15.6107 21 15.1137 21 14.4997V4.49967C21 3.88567 20.503 3.38867 19.889 3.38867Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.56066 18.9393C9.14645 19.5251 9.14645 20.4749 8.56066 21.0607C7.97487 21.6464 7.02513 21.6464 6.43934 21.0607C5.85355 20.4749 5.85355 19.5251 6.43934 18.9393C7.02513 18.3536 7.97487 18.3536 8.56066 18.9393" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M21 20H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M3 20H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, mr = {
+`, Gn = {
   name: "Media",
   templates: [
     {
       name: "Image",
-      template: /* @__PURE__ */ n(Ft, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/" }),
-      icon: { source: wr, height: 32 }
+      template: /* @__PURE__ */ r(pr, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/" }),
+      icon: { source: zn, height: 32 }
     },
     {
       name: "Video",
-      template: /* @__PURE__ */ n(
-        Ot,
+      template: /* @__PURE__ */ r(
+        gr,
         {
           sx: {
             aspectRatio: "16 / 9"
@@ -1406,87 +1545,87 @@ const ir = [
           src: "https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4"
         }
       ),
-      icon: { source: kr, height: 32 }
+      icon: { source: _n, height: 32 }
     },
     {
       name: "Icon",
-      template: /* @__PURE__ */ n(Ht, { source: $t }),
-      icon: { source: br, height: 32 }
+      template: /* @__PURE__ */ r(fr, { source: br }),
+      icon: { source: Hn, height: 32 }
     }
   ]
-}, Cr = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+}, Un = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <title>h</title>
   <path d="M25.264 3.993h-0.928c-0.442 0-0.8 0.358-0.801 0.8v9.952h-15.038v-9.952c-0-0.442-0.358-0.8-0.8-0.8h-0.928c-0.442 0-0.8 0.358-0.8 0.8v22.4c0 0.442 0.358 0.8 0.8 0.801h0.928c0.442-0.001 0.8-0.359 0.8-0.801v0-9.952h15.038v9.952c0.001 0.442 0.359 0.8 0.801 0.801h0.928c0.442-0.001 0.8-0.359 0.801-0.801v-22.4c-0.001-0.442-0.359-0.8-0.801-0.8h-0z"/>
 </svg>
-`, vr = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+`, Yn = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <title>p</title>
   <path d="M24.223 6.397c-1.592-1.495-3.741-2.413-6.104-2.413-0.137 0-0.274 0.003-0.41 0.009l0.019-0.001h-8.416c-0.442 0-0.8 0.358-0.8 0.8v22.4c0 0.442 0.358 0.8 0.8 0.801h0.928c0.442-0.001 0.8-0.359 0.8-0.801v0-6.561h6.688c0.117 0.005 0.253 0.009 0.391 0.009 2.363 0 4.512-0.918 6.108-2.417l-0.005 0.004c1.521-1.457 2.466-3.504 2.466-5.772 0-0.050-0-0.101-0.001-0.151l0 0.008c0.001-0.042 0.001-0.093 0.001-0.143 0-2.268-0.945-4.316-2.463-5.771l-0.003-0.003zM11.040 6.521h6.624c0.12-0.008 0.259-0.012 0.4-0.012 1.678 0 3.208 0.636 4.361 1.68l-0.006-0.005c1.054 0.998 1.709 2.407 1.709 3.969 0 0.056-0.001 0.112-0.003 0.168l0-0.008c0.001 0.047 0.002 0.101 0.002 0.156 0 1.569-0.656 2.985-1.709 3.988l-0.002 0.002c-1.145 1.047-2.676 1.689-4.357 1.689-0.14 0-0.278-0.004-0.416-0.013l0.019 0.001h-6.624z"/>
 </svg>
-`, xr = {
+`, Zn = {
   name: "Text",
   templates: [
     {
       name: "Heading",
-      template: /* @__PURE__ */ n(_t, { as: "h2", sizeVariant: "4xl", md: { sizeVariant: "5xl" }, children: "Your heading text goes here" }),
-      icon: { source: Cr, height: 32 }
+      template: /* @__PURE__ */ r(wr, { as: "h2", sizeVariant: "4xl", md: { sizeVariant: "5xl" }, children: "Your heading text goes here" }),
+      icon: { source: Un, height: 32 }
     },
     {
       name: "Paragraph",
-      template: /* @__PURE__ */ n(zt, { children: "Replace this text with your content" }),
-      icon: { source: vr, height: 32 }
+      template: /* @__PURE__ */ r(mr, { children: "Replace this text with your content" }),
+      icon: { source: Yn, height: 32 }
     }
   ]
-}, yr = [
-  fr,
-  xr,
-  mr,
-  Gt,
-  Ut,
-  Zt,
-  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 = {
+}, Xn = [
+  $n,
+  Zn,
+  Gn,
+  kr,
+  vr,
+  Cr,
+  xr
+], qn = '<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>', Jn = {
   name: "Basics",
-  icon: { source: Tr },
-  renderer: () => /* @__PURE__ */ n(Sr, { elementGroups: yr })
-}, Mr = ({ groups: e }) => {
-  const t = [Ir, ...e ?? []];
-  return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ n("div", { css: { display: "flex", padding: 8, alignItems: "center", gap: 12 }, children: /* @__PURE__ */ n(_e, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ n(I, { source: hr }) }) }),
-    /* @__PURE__ */ n(
-      ce,
+  icon: { source: qn },
+  renderer: () => /* @__PURE__ */ r(Qn, { elementGroups: Xn })
+}, Kn = ({ groups: e }) => {
+  const t = [Jn, ...e ?? []];
+  return /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ r("div", { css: { display: "flex", padding: 8, alignItems: "center", gap: 12 }, children: /* @__PURE__ */ r(ut, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ r(I, { source: jn }) }) }),
+    /* @__PURE__ */ r(
+      Be,
       {
         css: {
           paddingBlock: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: f.palette.white["1s"],
+          borderColor: c.palette.white["1s"],
           flex: 1
         },
-        children: t.map((o, r) => /* @__PURE__ */ n(Lr, { group: o }, r))
+        children: t.map((o, n) => /* @__PURE__ */ r(to, { group: o }, n))
       }
     )
   ] });
-}, 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] = 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(
+}, Qn = ({ elementGroups: e }) => /* @__PURE__ */ r("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: e.map((t, o) => /* @__PURE__ */ r(eo, { group: t }, o)) }), eo = ({ group: e }) => {
+  const [t, o] = pt(!0), { actions: n, connectors: i } = G();
+  return /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", ...c.text.sm }, children: [
+    /* @__PURE__ */ r(me, { onClick: o, css: { paddingInline: 0, backgroundColor: "transparent" }, children: /* @__PURE__ */ b(
       "div",
       {
-        css: { display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1, ...f.text.sm },
+        css: { display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1, ...c.text.sm },
         children: [
           e.name,
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ r(
             I,
             {
-              source: ze,
+              source: we,
               css: [{ transition: "transform" }, !t && { transform: "rotate(180deg)" }]
             }
           )
         ]
       }
     ) }),
-    /* @__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(
+    /* @__PURE__ */ r(Tr, { open: t, children: /* @__PURE__ */ r("div", { css: { display: "grid", paddingBlock: 8, gap: 16, gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }, children: e.templates?.map((s, d) => /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ r(
         "div",
         {
           css: {
@@ -1494,8 +1633,8 @@ const ir = [
             display: "flex",
             padding: 4,
             borderRadius: 8,
-            backgroundColor: f.palette.ink["6s"],
-            color: f.palette.white["5s"],
+            backgroundColor: c.palette.ink["6s"],
+            color: c.palette.white["5s"],
             pointerEvents: "auto",
             overflow: "hidden",
             flexDirection: "column",
@@ -1511,47 +1650,47 @@ const ir = [
               content: '""',
               position: "absolute",
               inset: 0,
-              backgroundColor: f.palette.white["1s"]
+              backgroundColor: c.palette.white["1s"]
             }
           },
-          ref: (a) => {
-            a && i.create(a, s.template, {
-              onCreate(d) {
-                (typeof s.autoFocus == "function" ? s.autoFocus(d) : s.autoFocus) && r.selectNode(d.rootNodeId), s.onCreate?.(d);
+          ref: (l) => {
+            l && i.create(l, s.template, {
+              onCreate(h) {
+                (typeof s.autoFocus == "function" ? s.autoFocus(h) : s.autoFocus) && n.selectNode(h.rootNodeId), s.onCreate?.(h);
               }
             });
           },
-          children: s.icon && /* @__PURE__ */ n(Jt, { width: void 0, height: void 0, ...s.icon })
+          children: s.icon && /* @__PURE__ */ r(Sr, { width: void 0, height: void 0, ...s.icon })
         }
       ),
-      /* @__PURE__ */ n("p", { css: { marginInline: "auto", textAlign: "center", ...Ge.xs }, children: s.name })
-    ] }, l)) }) })
+      /* @__PURE__ */ r("p", { css: { marginInline: "auto", textAlign: "center", ...le.xs }, children: s.name })
+    ] }, d)) }) })
   ] });
-}, Lr = ({ group: e }) => {
-  const [t, o] = P(!1), { refs: r, floatingStyles: i, context: s } = le({
+}, to = ({ group: e }) => {
+  const [t, o] = j(!1), { refs: n, floatingStyles: i, context: s } = Ce({
     open: t,
     onOpenChange: o,
     placement: "right-start",
     middleware: [
-      me(),
-      Je({
-        apply({ elements: p }) {
-          const b = {
-            zIndex: `${Xe}`,
-            height: `${p.reference.getBoundingClientRect().height}px`
+      Ve(),
+      mt({
+        apply({ elements: w }) {
+          const m = {
+            zIndex: `${Ne}`,
+            height: `${w.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(p.floating.style, b);
+          Object.assign(w.floating.style, m);
         }
       })
     ],
-    whileElementsMounted: de
+    whileElementsMounted: xe
   });
-  V(() => {
-    r.setPositionReference(document.querySelector("aside"));
-  }, [r]);
-  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(
+  z(() => {
+    n.setPositionReference(document.querySelector("aside"));
+  }, [n]);
+  const d = Yr(s, { move: !1, handleClose: Zr() }), l = Xr(s), h = kt(s), f = vt(s), { getReferenceProps: u, getFloatingProps: p } = Ct([d, l, h, f]), a = e.renderer;
+  return /* @__PURE__ */ b(J, { children: [
+    /* @__PURE__ */ b(
       "button",
       {
         css: {
@@ -1562,74 +1701,76 @@ const ir = [
           borderRadius: 8,
           textAlign: "left",
           width: "100%",
-          color: f.palette.white["5s"],
-          "&:hover": {
-            color: f.palette.white["6s"],
-            backgroundColor: f.palette.white["1s"],
+          color: t ? c.palette.white["6s"] : c.palette.white["5s"],
+          backgroundColor: t ? c.palette.white["1s"] : void 0,
+          ":hover": {
+            color: c.palette.white["6s"],
+            backgroundColor: c.palette.white["1s"],
             fontWeight: 500
           }
         },
-        ...h(),
-        ref: r.setReference,
+        ...u(),
+        ref: n.setReference,
         children: [
-          e.icon && /* @__PURE__ */ n("div", { css: { padding: 6, borderRadius: 8, backgroundColor: f.palette.white["1s"] }, children: /* @__PURE__ */ n(I, { ...e.icon }) }),
-          /* @__PURE__ */ n(
+          e.icon && /* @__PURE__ */ r("div", { css: { padding: 6, borderRadius: 8, backgroundColor: c.palette.white["1s"] }, children: /* @__PURE__ */ r(I, { ...e.icon }) }),
+          /* @__PURE__ */ r(
             "span",
             {
               css: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
-                flex: 1
+                flex: 1,
+                ...le.sm
               },
               children: e.name
             }
           ),
-          /* @__PURE__ */ n(I, { css: { transform: "rotate(180deg)" }, source: ur })
+          /* @__PURE__ */ r(I, { css: { transform: "rotate(180deg)" }, source: Vn })
         ]
       }
     ),
-    t && /* @__PURE__ */ n(he, { children: /* @__PURE__ */ n("div", { style: i, ...u(), ref: r.setFloating, children: /* @__PURE__ */ w(
+    t && /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r("div", { style: i, ...p(), ref: n.setFloating, children: /* @__PURE__ */ b(
       "div",
       {
         css: {
           display: "flex",
           flexDirection: "column",
           height: "100%",
-          backgroundColor: f.palette.ink["6s"],
-          color: f.palette.white["6s"],
+          backgroundColor: c.palette.ink["6s"],
+          color: c.palette.white["6s"],
           borderLeftWidth: 1,
           borderLeftStyle: "solid",
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: f.palette.white["2s"],
-          ...f.text.sm
+          borderColor: c.palette.white["2s"],
+          ...c.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((p, b) => /* @__PURE__ */ mn(Wr, { ...p, key: b })) }) })
+          /* @__PURE__ */ r("div", { css: { display: "flex", paddingInline: 8, alignItems: "center", height: 48 }, children: /* @__PURE__ */ r("h6", { css: { fontWeight: 500 }, children: e.name }) }),
+          /* @__PURE__ */ r(Be, { css: { paddingInline: 12, flex: 1 }, children: a ? /* @__PURE__ */ r(a, {}) : /* @__PURE__ */ r("div", { css: { display: "flex", flexDirection: "column", gap: 16 }, children: e.templates?.map((w, m) => /* @__PURE__ */ Gr(ro, { ...w, key: m })) }) })
         ]
       }
     ) }) })
   ] });
-}, Wr = ({ template: e, autoFocus: t = !0, onCreate: o }) => {
-  const [, r] = P(!1), i = $(), { actions: s, connectors: l, resolver: a, query: d } = H((h) => ({
-    resolver: h.options.resolver
-  })), k = P(() => {
-    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)
+}, ro = ({ template: e, autoFocus: t = !0, onCreate: o }) => {
+  const [, n] = j(!1), i = U(), { actions: s, connectors: d, resolver: l, query: h } = G((u) => ({
+    resolver: u.options.resolver
+  })), f = j(() => {
+    const u = typeof e == "function" ? e() : e;
+    let p;
+    "rootNodeId" in u ? p = u : p = h.parseReactElement(u).toNodeTree();
+    const { rootNodeId: a, nodes: w } = p, m = {};
+    return Object.entries(w).forEach(([g, y]) => {
+      const v = yr(y.data, l), M = g === a ? X : g;
+      m[M] = {
+        ...v,
+        parent: v.parent === a ? X : v.parent,
+        nodes: v.nodes?.map((R) => R === a ? X : R)
       };
-    }), b;
+    }), m;
   })[0];
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(
     "div",
     {
       css: {
@@ -1638,18 +1779,18 @@ const ir = [
         cursor: "grab",
         borderStyle: "solid",
         borderWidth: 1,
-        borderColor: f.palette.white["1s"]
+        borderColor: c.palette.white["1s"]
       },
-      ref: (h) => {
-        h && l.create(h, e, {
-          onCreate(u) {
-            (typeof t == "function" ? t(u) : t) && s.selectNode(u.rootNodeId), o?.(u);
+      ref: (u) => {
+        u && d.create(u, e, {
+          onCreate(p) {
+            (typeof t == "function" ? t(p) : t) && s.selectNode(p.rootNodeId), o?.(p);
           }
         });
       },
-      onDragStart: () => r(!0),
-      onDragEnd: () => r(!1),
-      children: /* @__PURE__ */ n(
+      onDragStart: () => n(!0),
+      onDragEnd: () => n(!1),
+      children: /* @__PURE__ */ r(
         "div",
         {
           css: {
@@ -1660,23 +1801,23 @@ const ir = [
             width: 240,
             aspectRatio: "16 / 9"
           },
-          children: /* @__PURE__ */ n("div", { css: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ n(
-            ut,
+          children: /* @__PURE__ */ r("div", { css: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ r(
+            Rt,
             {
               containerProps: {
                 style: {
                   backgroundColor: i.theme.palette.background.default
                 }
               },
-              viewport: { width: bn.md.minWidth },
-              children: /* @__PURE__ */ n(rt, { resolver: a, children: /* @__PURE__ */ n(In, { data: k }) })
+              viewport: { width: Hr.md.minWidth },
+              children: /* @__PURE__ */ r(xt, { resolver: l, children: /* @__PURE__ */ r(Jr, { data: f }) })
             }
           ) })
         }
       )
     }
   );
-}, Nr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, no = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5 2H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 9.5V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10.257 16.6214L7.075 13.4394C6.489 12.8534 6.489 11.9034 7.075 11.3184V11.3184C7.661 10.7324 8.611 10.7324 9.196 11.3184" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1687,57 +1828,56 @@ const ir = [
 <path d="M2 17V18C2 19.105 2.895 20 4 20H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M20 5V4C20 2.895 19.105 2 18 2H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Rr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, oo = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="6.49771" cy="5.49762" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <circle cx="6.49771" cy="18.503" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.49771 7.99854V16.0019" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <circle cx="17.5023" cy="13.0006" r="2.50104" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.49771 7.99854V7.99854C6.49771 10.7611 8.73722 13.0006 11.4998 13.0006H15.0013" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Ar = (e) => {
-  const { query: t, actions: o } = H(), {
-    id: r,
+`, so = (e) => {
+  const { query: t, actions: o } = G(), {
+    id: n,
     expanded: i,
     actions: s,
-    displayName: l,
-    children: a,
-    depth: d
-  } = 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();
+    displayName: d,
+    children: l,
+    depth: h
+  } = Er((w) => ({
+    expanded: w.expanded,
+    displayName: ft(t.node(w.id).get())
+  })), { selected: f, selectable: u } = G((w, m) => {
+    const g = m.node(n).get();
     return {
-      selected: b.getEvent("selected").contains(r),
+      selected: m.getEvent("selected").contains(n),
       nodeDOM: g.dom,
-      selectable: Ue(g)
+      selectable: gt(g)
     };
   });
-  V(() => {
-    r === _ && s.setExpandedState(!0);
-  }, [s, r]), V(() => {
-    if (a.length === 0) return;
-    a.some((b) => {
+  z(() => {
+    n === X && s.setExpandedState(!0);
+  }, [s, n]), z(() => {
+    if (l.length === 0) return;
+    l.some((m) => {
       const g = t.getEvent("selected").all();
-      return g.includes(b) ? !0 : t.node(b).descendants(!0).some((m) => g.includes(m));
+      return g.includes(m) ? !0 : t.node(m).descendants(!0).some((v) => g.includes(v));
     }) && s.setExpandedState(!0);
-  }, [a, s, t]);
-  const u = () => {
-    o.selectNode(r);
-  }, c = (p) => {
-    p.stopPropagation(), s.toggleLayer();
+  }, [l, s, t]);
+  const p = () => {
+    o.selectNode(n);
+  }, a = (w) => {
+    w.stopPropagation(), s.toggleLayer();
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "div",
     {
-      css: { paddingBlock: 4 },
       children: [
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ b(
           "div",
           {
-            onClick: u,
+            onClick: p,
             style: {
-              paddingLeft: Math.max(0, d - 1) * 16
+              paddingLeft: Math.max(0, h - 1) * 16
             },
             css: [
               {
@@ -1748,17 +1888,17 @@ const ir = [
                 gap: 2,
                 borderWidth: 1,
                 borderStyle: "solid",
-                borderColor: f.palette.white["1s"],
+                borderColor: c.palette.white["1s"],
                 cursor: "pointer",
                 borderRadius: 4,
-                "&:hover": { backgroundColor: f.palette.white["1s"] }
+                "&:hover": { backgroundColor: c.palette.white["1s"] }
               },
-              !h && { pointerEvents: "none" },
-              k && { backgroundColor: f.palette.black["7s"] },
-              r === _ && { display: "none" }
+              !u && { pointerEvents: "none" },
+              f && { backgroundColor: c.palette.black["7s"] },
+              n === X && { display: "none" }
             ],
             children: [
-              a.length ? /* @__PURE__ */ n(W, { css: { pointerEvents: "auto" }, onClick: c, children: /* @__PURE__ */ n(
+              l.length ? /* @__PURE__ */ r(A, { css: { pointerEvents: "auto" }, onClick: a, children: /* @__PURE__ */ r(
                 I,
                 {
                   css: [
@@ -1766,10 +1906,10 @@ const ir = [
                     i && { transform: "rotate(0deg)" }
                   ],
                   size: 16,
-                  source: ze
+                  source: we
                 }
-              ) }) : /* @__PURE__ */ n("div", { css: { padding: 4 }, children: /* @__PURE__ */ n(I, { size: 16, source: Rr }) }),
-              /* @__PURE__ */ n(
+              ) }) : /* @__PURE__ */ r("div", { css: { padding: 4 }, children: /* @__PURE__ */ r(I, { size: 16, source: oo }) }),
+              /* @__PURE__ */ r(
                 "span",
                 {
                   css: [
@@ -1777,23 +1917,28 @@ const ir = [
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
-                      flex: 1
+                      flex: 1,
+                      ...le.xs
                     },
-                    !h && { color: f.palette.white["3s"] }
+                    !u && { color: c.palette.white["3s"] }
                   ],
-                  children: l
+                  children: d
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           "div",
           {
             css: {
               display: "flex",
               flexDirection: "column",
-              gap: 4
+              gap: 4,
+              marginTop: 4,
+              ":empty": {
+                display: "none"
+              }
             },
             children: e.children
           }
@@ -1801,12 +1946,12 @@ const ir = [
       ]
     }
   );
-}, Dr = ({ onClose: e }) => {
-  const t = En(), o = (r) => {
-    t.start(r);
+}, io = ({ onClose: e }) => {
+  const t = en(), o = (n) => {
+    t.start(n);
   };
-  return /* @__PURE__ */ n(he, { children: /* @__PURE__ */ w(
-    Kt.div,
+  return /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ b(
+    Ir.div,
     {
       drag: !0,
       dragControls: t,
@@ -1817,14 +1962,14 @@ const ir = [
         display: "flex",
         flexDirection: "column",
         borderRadius: 6,
-        backgroundColor: f.palette.ink["6s"],
+        backgroundColor: c.palette.ink["6s"],
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: f.palette.white["2s"],
+        borderColor: c.palette.white["2s"],
         color: "white"
       },
       children: [
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ b(
           "div",
           {
             onPointerDown: o,
@@ -1837,24 +1982,24 @@ const ir = [
               cursor: "grab"
             },
             children: [
-              /* @__PURE__ */ w("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ n(I, { source: Nr }),
-                /* @__PURE__ */ n(
+              /* @__PURE__ */ b("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ r(I, { source: no }),
+                /* @__PURE__ */ r(
                   "p",
                   {
                     css: {
-                      ...f.text.sm,
+                      ...c.text.sm,
                       fontWeight: 500
                     },
                     children: "Layers"
                   }
                 )
               ] }),
-              /* @__PURE__ */ n(W, { onClick: e, children: /* @__PURE__ */ n(I, { source: $e }) })
+              /* @__PURE__ */ r(A, { onClick: e, children: /* @__PURE__ */ r(I, { source: Pe }) })
             ]
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ r(
           "div",
           {
             css: {
@@ -1862,16 +2007,16 @@ const ir = [
               overflow: "auto",
               borderTopWidth: 1,
               borderTopStyle: "solid",
-              borderColor: f.palette.white["1s"],
+              borderColor: c.palette.white["1s"],
               flex: 1
             },
-            children: /* @__PURE__ */ n(Qt, { renderLayer: Ar })
+            children: /* @__PURE__ */ r(Mr, { renderLayer: so })
           }
         )
       ]
     }
   ) });
-}, pt = {
+}, Wt = {
   primary: "Primary",
   secondary: "Secondary",
   red: "Red",
@@ -1881,83 +2026,83 @@ const ir = [
   blue: "Blue",
   neutral: "Neutral",
   violet: "Violet"
-}, 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;
+}, ao = ["primary", "secondary"], lo = Object.keys(Wt), co = [100, 200, 300, 400, 500, 600, 700, 800], ho = () => {
+  const e = U(), t = !!e.handlers.saveTheme, o = e.theme.palette, n = K(e.theme), i = K(!1);
+  z(() => {
+    const a = n.current;
     return () => {
-      i.current || e.setState({ theme: c });
+      i.current || e.setState({ theme: a });
     };
   }, []);
-  const s = (c) => o[c], l = (c, p) => {
-    const b = s(c), g = {
+  const s = (a) => o[a], d = (a, w) => {
+    const m = s(a), g = {
       palette: {
         background: o.background,
         border: o.border,
         surface: o.surface,
-        [c]: { main: p, contrast: b.contrast }
+        [a]: { main: w, contrast: m.contrast }
       }
     };
-    e.setState({ theme: Ne(g) });
-  }, a = (c, p) => {
-    const b = s(c), g = {
+    e.setState({ theme: tt(g) });
+  }, l = (a, w) => {
+    const m = s(a), g = {
       palette: {
         background: o.background,
         border: o.border,
         surface: o.surface,
-        [c]: { main: b[600], contrast: p }
+        [a]: { main: m[600], contrast: w }
       }
     };
-    e.setState({ theme: Ne(g) });
-  }, [d, k] = P(!1), h = async () => {
-    k(!0);
+    e.setState({ theme: tt(g) });
+  }, [h, f] = j(!1), u = async () => {
+    f(!0);
     try {
       await e.handlers.saveTheme?.(e.theme), i.current = !0;
     } finally {
-      k(!1);
+      f(!1);
     }
-  }, u = () => {
-    e.setState({ theme: r.current, action: void 0 });
+  }, p = () => {
+    e.setState({ theme: n.current, action: void 0 });
   };
-  return /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ n("div", { css: { display: "flex", padding: 8, alignItems: "center" }, children: /* @__PURE__ */ n("h6", { css: { fontWeight: 500 }, children: "Palette" }) }),
-    /* @__PURE__ */ n(
-      ce,
+  return /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ r("div", { css: { display: "flex", padding: 8, alignItems: "center" }, children: /* @__PURE__ */ r("h6", { css: { fontWeight: 500 }, children: "Palette" }) }),
+    /* @__PURE__ */ r(
+      Be,
       {
         css: {
           paddingInline: 8,
           paddingBlock: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: f.palette.white["1s"],
+          borderColor: c.palette.white["1s"],
           flex: 1
         },
-        children: /* @__PURE__ */ n("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: Pr.map((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: { ...Ge.xs, color: f.palette.white["4s"] }, children: pt[c] }),
-            /* @__PURE__ */ w("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              t && b && /* @__PURE__ */ w("div", { css: { display: "flex", gap: 4 }, children: [
-                /* @__PURE__ */ n(
-                  Ee,
+        children: /* @__PURE__ */ r("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: lo.map((a) => {
+          const w = s(a), m = ao.includes(a);
+          return /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+            /* @__PURE__ */ r("p", { css: { ...le.xs, color: c.palette.white["4s"] }, children: Wt[a] }),
+            /* @__PURE__ */ b("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              t && m && /* @__PURE__ */ b("div", { css: { display: "flex", gap: 4 }, children: [
+                /* @__PURE__ */ r(
+                  Je,
                   {
                     hidePalette: !0,
-                    color: p[600],
-                    onChange: (g) => l(c, g),
+                    color: w[600],
+                    onChange: (g) => d(a, g),
                     placement: "right-start"
                   }
                 ),
-                /* @__PURE__ */ n(
-                  Ee,
+                /* @__PURE__ */ r(
+                  Je,
                   {
                     hidePalette: !0,
-                    color: p.contrast,
-                    onChange: (g) => a(c, g),
+                    color: w.contrast,
+                    onChange: (g) => l(a, g),
                     placement: "right-start"
                   }
                 )
               ] }),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ r(
                 "div",
                 {
                   css: {
@@ -1965,7 +2110,7 @@ const ir = [
                     gap: 4,
                     flex: 1
                   },
-                  children: jr.map((g) => /* @__PURE__ */ n(
+                  children: co.map((g) => /* @__PURE__ */ r(
                     "div",
                     {
                       css: {
@@ -1975,14 +2120,14 @@ const ir = [
                         padding: 1,
                         borderWidth: 1,
                         borderStyle: "solid",
-                        borderColor: f.palette.white["3s"]
+                        borderColor: c.palette.white["3s"]
                       },
-                      title: `${c}.${g}`,
-                      children: /* @__PURE__ */ n(
+                      title: `${a}.${g}`,
+                      children: /* @__PURE__ */ r(
                         "div",
                         {
                           css: { width: "100%", height: "100%", borderRadius: 1 },
-                          style: { backgroundColor: p[g] }
+                          style: { backgroundColor: w[g] }
                         }
                       )
                     },
@@ -1991,11 +2136,11 @@ const ir = [
                 }
               )
             ] })
-          ] }, c);
+          ] }, a);
         }) })
       }
     ),
-    t && /* @__PURE__ */ w(
+    t && /* @__PURE__ */ b(
       "div",
       {
         css: {
@@ -2004,111 +2149,105 @@ const ir = [
           padding: 8,
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: f.palette.white["1s"]
+          borderColor: c.palette.white["1s"]
         },
         children: [
-          /* @__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" })
+          /* @__PURE__ */ r(me, { variant: "text", onClick: p, disabled: h, css: { flex: 1 }, children: "Cancel" }),
+          /* @__PURE__ */ r(me, { onClick: u, isLoading: h, css: { flex: 1 }, children: h ? "Saving..." : "Save" })
         ]
       }
     )
   ] });
-}, Fr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, uo = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.024L11.987 11.049L21 7.024L12.013 3L3 7.024Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15.436 14.484L21 16.976L11.987 21L3 16.976L8.564 14.491" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15.436 9.50903L21 12L11.987 16.024L3 12L8.564 9.51603" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Or = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 7L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 17L5 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`, Hr = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, po = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M20.221 4.29206V4.29206C19.438 3.50906 18.183 3.46806 17.35 4.19606L9.31298 11.2281C8.44198 11.9901 8.39798 13.3291 9.21598 14.1471L10.365 15.2961C11.183 16.1141 12.523 16.0691 13.284 15.1991L20.316 7.16206C21.045 6.33006 21.003 5.07506 20.221 4.29206V4.29206Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10.87 9.87012L14.65 13.6501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <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] = 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;
+`, go = ({ insert: e }) => {
+  const [t, o] = pt(!1), { action: n = "insert", setState: i } = U(), { actions: s, isDeletable: d, focusedNode: l } = G((p, a) => {
+    const w = a.getEvent("selected").first(), m = w ? a.node(w) : null;
     return {
-      enabled: u.options.enabled,
-      isDeletable: !!(b?.isDeletable() && (b.get().data.custom?.deletable ?? !0)),
-      focusedNode: b?.get()
+      enabled: p.options.enabled,
+      isDeletable: !!(m?.isDeletable() && (m.get().data.custom?.deletable ?? !0)),
+      focusedNode: m?.get()
     };
-  }), d = () => {
+  }), h = () => {
     s.selectNode();
-  }, k = (u) => {
-    s.delete(u.currentTarget.value);
-  }, h = (u) => {
-    const c = u.currentTarget.value;
-    c === "layers" ? o() : (d(), i({ action: c }));
+  }, f = (p) => {
+    s.delete(p.currentTarget.value);
+  }, u = (p) => {
+    const a = p.currentTarget.value;
+    a === "layers" ? o() : (h(), i({ action: a }));
   };
-  return /* @__PURE__ */ w(ie, { children: [
-    /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(J, { children: [
+    /* @__PURE__ */ b(
       "aside",
       {
         css: {
           display: "flex",
           position: "relative",
           alignItems: "stretch",
-          backgroundColor: f.palette.ink["6s"],
-          color: f.palette.white["6s"],
+          backgroundColor: c.palette.ink["6s"],
+          color: c.palette.white["6s"],
           borderTopWidth: 1,
           borderTopStyle: "solid",
-          borderColor: f.palette.white["2s"],
-          ...f.text.sm
+          borderColor: c.palette.white["2s"]
         },
         children: [
-          /* @__PURE__ */ w("div", { css: { display: "flex", paddingInline: 4, flexDirection: "column", gap: 4 }, children: [
-            !!e && /* @__PURE__ */ w(Fe, { children: [
-              /* @__PURE__ */ n(
-                W,
+          /* @__PURE__ */ b("div", { css: { display: "flex", paddingInline: 4, flexDirection: "column", gap: 4 }, children: [
+            !!e && /* @__PURE__ */ b(ct, { children: [
+              /* @__PURE__ */ r(
+                A,
                 {
                   tooltip: {
                     content: "Insert",
                     placement: "right"
                   },
-                  onClick: h,
+                  onClick: u,
                   value: "insert",
                   css: { position: "relative" },
                   size: "32",
-                  children: /* @__PURE__ */ n(I, { source: He })
+                  children: /* @__PURE__ */ r(I, { source: ht })
                 }
               ),
-              /* @__PURE__ */ n("hr", { css: { borderColor: f.palette.white["2s"] } })
+              /* @__PURE__ */ r("hr", { css: { borderColor: c.palette.white["2s"] } })
             ] }),
-            /* @__PURE__ */ n(
-              W,
+            /* @__PURE__ */ r(
+              A,
               {
                 tooltip: {
                   content: "Layers",
                   placement: "right"
                 },
-                onClick: h,
+                onClick: u,
                 value: "layers",
                 css: { position: "relative" },
                 size: "32",
-                children: /* @__PURE__ */ n(I, { source: Fr })
+                children: /* @__PURE__ */ r(I, { source: uo })
               }
             ),
-            /* @__PURE__ */ n("hr", { css: { borderColor: f.palette.white["2s"] } }),
-            /* @__PURE__ */ n(
-              W,
+            /* @__PURE__ */ r("hr", { css: { borderColor: c.palette.white["2s"] } }),
+            /* @__PURE__ */ r(
+              A,
               {
                 tooltip: {
                   content: "Theme",
                   placement: "right"
                 },
-                onClick: h,
+                onClick: u,
                 value: "theme",
                 css: { position: "relative" },
                 size: "32",
-                children: /* @__PURE__ */ n(I, { source: Hr })
+                children: /* @__PURE__ */ r(I, { source: po })
               }
             )
           ] }),
-          /* @__PURE__ */ w(
+          /* @__PURE__ */ b(
             "div",
             {
               css: {
@@ -2119,18 +2258,18 @@ const ir = [
                 width: 288,
                 borderLeftWidth: 1,
                 borderLeftStyle: "solid",
-                borderColor: f.palette.white["1s"]
+                borderColor: c.palette.white["1s"]
               },
               children: [
-                r === "theme" && /* @__PURE__ */ n("div", { css: { overflow: "auto", flex: 1 }, children: /* @__PURE__ */ n(Vr, {}) }),
-                r !== "theme" && !a?.related.inspector && /* @__PURE__ */ n("div", { css: { overflow: "auto", flex: 1 }, children: r === "insert" && !!e && /* @__PURE__ */ n(Mr, { groups: e.groups }) }),
-                r !== "theme" && !!a?.related?.inspector && /* @__PURE__ */ w("div", { css: { display: "flex", flexDirection: "column", overflow: "hidden", flex: 1 }, children: [
-                  /* @__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: f.palette.red["4s"] }, source: tn }) })
+                n === "theme" && /* @__PURE__ */ r("div", { css: { overflow: "auto", flex: 1 }, children: /* @__PURE__ */ r(ho, {}) }),
+                n !== "theme" && !l?.related.inspector && /* @__PURE__ */ r("div", { css: { overflow: "auto", flex: 1 }, children: n === "insert" && !!e && /* @__PURE__ */ r(Kn, { groups: e.groups }) }),
+                n !== "theme" && !!l?.related?.inspector && /* @__PURE__ */ b("div", { css: { display: "flex", flexDirection: "column", overflow: "hidden", flex: 1 }, children: [
+                  /* @__PURE__ */ b("div", { css: { display: "flex", paddingInline: 8, paddingBlock: 8, alignItems: "center", gap: 8 }, children: [
+                    /* @__PURE__ */ r(A, { onClick: h, children: /* @__PURE__ */ r(I, { source: Lr }) }),
+                    /* @__PURE__ */ r("div", { css: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ r(ut, { fullWidth: !0, value: ft(l), size: "32" }) }),
+                    d && /* @__PURE__ */ r(A, { value: l.id, onClick: f, children: /* @__PURE__ */ r(I, { css: { color: c.palette.red["4s"] }, source: Rr }) })
                   ] }),
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ r(
                     "div",
                     {
                       css: {
@@ -2138,9 +2277,9 @@ const ir = [
                         flex: 1,
                         borderTopWidth: 1,
                         borderTopStyle: "solid",
-                        borderColor: f.palette.white["1s"]
+                        borderColor: c.palette.white["1s"]
                       },
-                      children: /* @__PURE__ */ n(pn, { fallback: null, children: Ye(a.related.inspector) })
+                      children: /* @__PURE__ */ r(Fr, { fallback: null, children: bt(l.related.inspector) })
                     }
                   )
                 ] })
@@ -2150,20 +2289,20 @@ const ir = [
         ]
       }
     ),
-    t && /* @__PURE__ */ n(Dr, { onClose: o })
+    t && /* @__PURE__ */ r(io, { onClose: o })
   ] });
-}, _r = () => {
-  const { dom: e } = ke((s) => ({
+}, fo = () => {
+  const { dom: e } = je((s) => ({
     dom: s.dom
-  })), { document: t } = Ce(), { floatingStyles: o, refs: r } = le({
+  })), { document: t } = Oe(), { floatingStyles: o, refs: n } = Ce({
     open: !0,
     strategy: "fixed",
     placement: "bottom-start",
     middleware: [
       {
         name: "overlay",
-        fn({ rects: s, elements: l }) {
-          return Object.assign(l.floating.style, {
+        fn({ rects: s, elements: d }) {
+          return Object.assign(d.floating.style, {
             width: `${s.reference.width}px`,
             height: `${s.reference.height}px`
           }), {
@@ -2173,13 +2312,13 @@ const ir = [
         }
       }
     ],
-    whileElementsMounted: de
+    whileElementsMounted: xe
   });
-  V(() => {
-    r.setReference(e);
-  }, [e, r]);
-  const i = gn((s) => r.setFloating(s), [r]);
-  return e ? /* @__PURE__ */ n(he, { root: t?.body, children: /* @__PURE__ */ n(
+  z(() => {
+    n.setReference(e);
+  }, [e, n]);
+  const i = oe((s) => n.setFloating(s), [n]);
+  return e ? /* @__PURE__ */ r(ce, { root: t?.body, children: /* @__PURE__ */ r(
     "div",
     {
       ref: i,
@@ -2189,49 +2328,49 @@ const ir = [
         zIndex: 9999,
         borderWidth: 1,
         borderStyle: "dashed",
-        borderColor: f.palette.ink["6s"]
+        borderColor: c.palette.ink["6s"]
       }
     }
   ) }) : null;
-}, zr = ({ render: e }) => {
-  const { id: t, toolbar: o } = ke((s) => ({
-    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 };
+}, bo = ({ render: e }) => {
+  const { id: t, toolbar: o } = je((s) => ({
+    toolbar: Dr(s).toolbar
+  })), { mode: n } = U(), { isActiveSelectable: i } = G((s, d) => {
+    const l = d.getEvent("selected").contains(t) && t !== X, h = l ? gt(d.node(t).get()) : !1;
+    return { isActiveSelectable: l && h };
   });
-  return /* @__PURE__ */ w(ie, { children: [
-    i && r === "full" && /* @__PURE__ */ w(ie, { children: [
-      /* @__PURE__ */ n(Gr, { children: o ? Ye(o) : /* @__PURE__ */ n(Ur, {}) }),
-      /* @__PURE__ */ n(_r, {})
+  return /* @__PURE__ */ b(J, { children: [
+    i && n === "full" && /* @__PURE__ */ b(J, { children: [
+      /* @__PURE__ */ r(wo, { children: o ? bt(o) : /* @__PURE__ */ r(mo, {}) }),
+      /* @__PURE__ */ r(fo, {})
     ] }),
     e
   ] });
-}, Gr = ({ children: e }) => {
-  const { dom: t } = ke((s) => ({ dom: s.dom })), { document: o } = Ce(), { floatingStyles: r, refs: i } = le({
+}, wo = ({ children: e }) => {
+  const { dom: t } = je((s) => ({ dom: s.dom })), { document: o } = Oe(), { floatingStyles: n, refs: i } = Ce({
     open: !0,
     placement: "bottom-start",
-    middleware: [me(), qe(4)],
-    whileElementsMounted: de
+    middleware: [Ve(), wt(4)],
+    whileElementsMounted: xe
   });
-  return V(() => {
+  return z(() => {
     i.setReference(t);
-  }, [t, i]), t ? /* @__PURE__ */ n(he, { root: o?.body, children: /* @__PURE__ */ n(
+  }, [t, i]), t ? /* @__PURE__ */ r(ce, { root: o?.body, children: /* @__PURE__ */ r(
     "div",
     {
       css: {
         paddingBlock: 4,
         paddingInline: 6,
-        backgroundColor: f.palette.ink["6s"],
-        color: f.palette.white["6s"],
+        backgroundColor: c.palette.ink["6s"],
+        color: c.palette.white["6s"],
         borderRadius: 4
       },
       ref: i.setFloating,
-      style: r,
+      style: n,
       children: e
     }
   ) }) : null;
-}, Ur = () => /* @__PURE__ */ w(
+}, mo = () => /* @__PURE__ */ b(
   "div",
   {
     css: {
@@ -2240,29 +2379,31 @@ const ir = [
       gap: 4
     },
     children: [
-      /* @__PURE__ */ n(nn, {}),
-      /* @__PURE__ */ n(rn, {}),
-      /* @__PURE__ */ n(on, {})
+      /* @__PURE__ */ r(Wr, {}),
+      /* @__PURE__ */ r(Nr, {}),
+      /* @__PURE__ */ r(Ar, {})
     ]
   }
-), To = ({
+), Go = ({
   theme: e,
   insert: t,
   resolver: o,
-  handlers: r,
+  handlers: n,
   variableDefinitions: i,
   headerActions: s,
+  resources: d,
   children: l
 }) => {
-  const { screen: a } = $({
+  const { screen: h } = U({
     theme: e,
-    handlers: r,
+    handlers: n,
     mode: "full",
     screen: "xs",
-    variableDefinitions: i
+    variableDefinitions: i,
+    resources: d
   });
-  return /* @__PURE__ */ w(rt, { enabled: !0, onRender: zr, resolver: o, children: [
-    /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(xt, { enabled: !0, onRender: bo, resolver: o, children: [
+    /* @__PURE__ */ b(
       "div",
       {
         css: {
@@ -2270,18 +2411,19 @@ const ir = [
           flexDirection: "column",
           width: "100vw",
           height: "100vh",
-          backgroundColor: fe.ink["6s"],
-          color: fe.white["6s"]
+          backgroundColor: We.ink["6s"],
+          color: We.white["6s"],
+          ...le.xs
         },
         children: [
-          /* @__PURE__ */ n(dr, { actions: s }),
-          /* @__PURE__ */ w("div", { css: { display: "flex", overflow: "hidden", flex: 1 }, children: [
-            /* @__PURE__ */ n($r, { insert: t }),
-            /* @__PURE__ */ n(
-              ut,
+          /* @__PURE__ */ r(Bn, { actions: s }),
+          /* @__PURE__ */ b("div", { css: { display: "flex", overflow: "hidden", flex: 1 }, children: [
+            /* @__PURE__ */ r(go, { insert: t }),
+            /* @__PURE__ */ r(
+              Rt,
               {
                 viewport: {
-                  width: (d) => a === "lg" ? Math.max(d, Le[a]) : Le[a]
+                  width: (f) => h === "lg" ? Math.max(f, Ke[h]) : Ke[h]
                 },
                 children: l
               }
@@ -2290,109 +2432,111 @@ const ir = [
         ]
       }
     ),
-    /* @__PURE__ */ n(an, {})
+    /* @__PURE__ */ r(Pr, {})
   ] });
 };
 export {
-  So as AspectRatioToolbar,
-  Eo as BackgroundToolbar,
-  Lo as BorderRadiusToolbar,
-  Wo as BorderToolbar,
-  No as ChildNodesToolbar,
-  Ro as ColorPickerContent,
-  Ee as ColorPickerPopover,
-  Ao as ColorPreview,
-  Lt as ColorToolbar,
-  Do as ColorVariantToolbar,
-  Bo as ColumnGapToolbar,
-  Nt as CssFontWeightToolbar,
-  xt as CssSizeInput,
-  Po as CssTextAlignToolbar,
-  jo as CssWidthToolbar,
-  ko as DegreePicker,
-  Co as DisplayToolbar,
-  To as Editor,
-  Vo as FlexAlignItemsToolbar,
-  vo as FlexToolbar,
-  Fo as FlexWrapToolbar,
-  Oo as FontSizeToolbar,
-  ut as FramePreview,
-  Ho as GridAlignItemsToolbar,
-  $o as HeightToolbar,
-  _o as HtmlAnchorTargetToolbar,
-  zo as ImageSourceSelection,
-  Go as InsertInlineToolbar,
-  Uo as InsertLinkToolbar,
-  Zo as JustifyContentToolbar,
-  Yo as JustifyItemsToolbar,
-  mo as LineHeightToolbar,
-  Xo as MarginToolbar,
-  xo as MinWidthToolbar,
-  on as NodeDeleteToolbar,
-  nn as NodeDragToolbar,
-  rn as NodeNameToolbar,
-  qo as NumberField,
-  Jo as NumberFieldMixOptions,
-  Ko as ObjectFitToolbar,
-  Qo as OrderToolbar,
-  es as PaddingToolbar,
-  ts as RowGapToolbar,
-  ns as SvgSourceToolbar,
-  rs as TagNameToolbar,
-  Et as TextSizeVariantToolbar,
-  yo as TextStyleGroupToolbar,
-  Wt as TextStyleToolbar,
-  Rt as TextTransformToolbar,
-  J as ToolbarField,
-  os as ToolbarGroup,
-  ss as VisibilityToolbar,
-  oe as WbButton,
-  At as WbButtonGroup,
-  qt as WbCollapse,
-  is as WbColorPicker,
-  as as WbDatePicker,
-  go as WbDialog,
-  bo as WbDialogBody,
-  cs as WbDialogClose,
-  ls as WbDialogFooter,
-  ds as WbDialogHeader,
-  hs as WbDropzone,
-  Ln as WbFloating,
-  us as WbFloatingClose,
-  bt as WbFloatingContent,
-  ft as WbFloatingContext,
-  wo as WbFormLabel,
+  Zo as AspectRatioToolbar,
+  Xo as BackgroundToolbar,
+  qo as BorderRadiusToolbar,
+  Jo as BorderToolbar,
+  Ko as ChildNodesToolbar,
+  Qo as ColorPickerContent,
+  Je as ColorPickerPopover,
+  es as ColorPreview,
+  nr as ColorToolbar,
+  ts as ColorVariantToolbar,
+  rs as ColumnGapToolbar,
+  sr as CssFontWeightToolbar,
+  qt as CssSizeInput,
+  ns as CssTextAlignToolbar,
+  os as CssWidthToolbar,
+  Oo as DegreePicker,
+  $o as DisplayToolbar,
+  Go as Editor,
+  ss as FlexAlignItemsToolbar,
+  Ho as FlexToolbar,
+  is as FlexWrapToolbar,
+  as as FontSizeToolbar,
+  Rt as FramePreview,
+  ls as GridAlignItemsToolbar,
+  cs as HeightToolbar,
+  ds as HtmlAnchorTargetToolbar,
+  hs as ImageGalleryDialog,
+  us as ImageSourceSelection,
+  ps as InsertInlineToolbar,
+  gs as InsertLinkToolbar,
+  fs as JustifyContentToolbar,
+  bs as JustifyItemsToolbar,
+  Fo as LineHeightToolbar,
+  ws as MarginToolbar,
+  zo as MinWidthToolbar,
+  Ar as NodeDeleteToolbar,
+  Wr as NodeDragToolbar,
+  Nr as NodeNameToolbar,
+  ms as NumberField,
+  ks as NumberFieldMixOptions,
+  vs as ObjectFitToolbar,
+  Cs as OrderToolbar,
+  xs as PaddingToolbar,
+  ys as RowGapToolbar,
+  Ts as SvgSourceToolbar,
+  Ss as TagNameToolbar,
+  rr as TextSizeVariantToolbar,
+  _o as TextStyleGroupToolbar,
+  or as TextStyleToolbar,
+  ir as TextTransformToolbar,
+  ae as ToolbarField,
+  Is as ToolbarGroup,
+  Ms as VisibilityToolbar,
+  me as WbButton,
+  ar as WbButtonGroup,
+  Bo as WbCascader,
+  Tr as WbCollapse,
+  Es as WbColorPicker,
+  Ls as WbDatePicker,
+  Rs as WbDialog,
+  Ws as WbDialogBody,
+  Ns as WbDialogClose,
+  As as WbDialogFooter,
+  Ds as WbDialogHeader,
+  Ps as WbDropzone,
+  Bs as WbFloating,
+  js as WbFloatingClose,
+  Vs as WbFloatingContent,
+  Os as WbFloatingContext,
+  Vo as WbFormLabel,
   I as WbIcon,
-  W as WbIconButton,
-  _e as WbInput,
-  mt as WbInputNumber,
-  ps as WbLoadingOverlay,
-  gs as WbMenu,
-  fs as WbMenuItem,
-  bs as WbMenuList,
-  ws as WbMenuTrigger,
-  yt as WbPopover,
-  St as WbPopoverClose,
-  Mt as WbPopoverContent,
-  Tt as WbPopoverTrigger,
-  Oe as WbRadioButton,
-  ce as WbScrollView,
-  vt as WbSelect,
-  Jt as WbSvgLoader,
-  ks as WbSwitch,
-  ms as WbTab,
-  Cs as WbTabContent,
-  vs as WbTabList,
-  xs as WbTabPanel,
-  ys as WbTabs,
-  Ts as WbTextarea,
-  Is as WbTooltip,
-  Ms as WbVirtualizedList,
-  Ss as pushToast,
-  Es as textSizeVariantOptions,
-  fo as useDialogContext,
-  $ as useEditor,
-  Ls as useEditorResponsive,
-  Ws as useInlineEditable,
-  wt as useWbFloatingContext
+  A as WbIconButton,
+  ut as WbInput,
+  Yt as WbInputNumber,
+  Fs as WbLoadingOverlay,
+  $s as WbMenu,
+  Hs as WbMenuItem,
+  zs as WbMenuList,
+  _s as WbMenuTrigger,
+  Jt as WbPopover,
+  tr as WbPopoverClose,
+  er as WbPopoverContent,
+  Kt as WbPopoverTrigger,
+  dt as WbRadioButton,
+  Be as WbScrollView,
+  Xt as WbSelect,
+  Sr as WbSvgLoader,
+  Gs as WbSwitch,
+  Us as WbTab,
+  Ys as WbTabContent,
+  Zs as WbTabList,
+  Xs as WbTabPanel,
+  qs as WbTabs,
+  Js as WbTextarea,
+  Ks as WbTooltip,
+  Qs as WbVirtualizedList,
+  ei as pushToast,
+  ti as textSizeVariantOptions,
+  jo as useDialogContext,
+  U as useEditor,
+  ri as useEditorResponsive,
+  ni as useInlineEditable,
+  Gt as useWbFloatingContext
 };