@janbox/storefront-builder 2.0.0 → 2.0.2

package/dist/editor.js

@@ -1,17 +1,18 @@
-import { jsx as r, Fragment as V2, jsxs as g } from "@emotion/react/jsx-runtime";
-import { N as v2, t as x2, H as j2, P as r2, V as A2, S as p2, G as R2, a as d2, j as H2, F as h2, m as f2, B as B2, I as _2, k as P2, L as Z2, s as ue, r as $2, g as D2, A as O2, i as G2, C as F2, b as we, c as Ce, d as pe, n as z2, M as U2, o as fe, p as ge, T as me, q as ke, R as ve } from "./countdown-timer.node-OmDiT-pz.js";
-import { useNode as xe, ROOT_NODE as D, serializeNode as be } from "@craftjs/core";
-import { f as s2, c as ye, e as Ne, u as $, r as L, a as W2, i as Me } from "./color-picker-popover-B3AVFuei.js";
-import { useRef as q2, useState as G, useEffect as W, createElement as Y2, Fragment as n2, Suspense as Le } from "react";
+import { jsx as r, Fragment as R2, jsxs as m } from "@emotion/react/jsx-runtime";
+import { N as v2, t as x2, H as V2, P as r2, V as B2, S as g2, G as j2, a as l2, j as A2, F as h2, m as f2, B as H2, I as _2, k as P2, L as D2, s as ue, r as Z2, g as $2, A as O2, i as G2, C as W2, b as pe, c as Ce, d as ge, n as z2, M as F2, o as fe, p as we, T as me, q as ke, R as ve } from "./countdown-timer.node-Bh5fTSJ8.js";
+import { useNode as xe, ROOT_NODE as $, serializeNode as be } from "@craftjs/core";
+import { f as s2, c as ye, e as Le, u as Z, r as N, a as U2, i as Me } from "./color-picker-popover-XeaVfYS8.js";
+import { useRef as q2, useState as G, useEffect as U, createElement as Y2, Fragment as n2, Suspense as Ie } from "react";
 import "flat";
-import { throttle as Ie, isFunction as b2, isNumber as y2, times as Z } from "lodash-es";
+import { throttle as Ne, isFunction as b2, isNumber as y2, times as D } from "lodash-es";
 import "@janbox/storefront-ui";
-import { D as Ee, a as Se, H as Te, P as Ve, k as je, i as Ae, G as Re, c as He, g as Be, F as _e, M as Pe, b as Ze, h as $e, I as De, L as Oe, U as Ge, T as Fe, B as ze, A as Ue, f as We, e as qe, R as C, d as Q2, C as X2 } from "./index-CwrFnubn.js";
+import { D as Se, a as Ee, H as Te, P as Re, k as Ve, i as Be, G as je, c as Ae, g as He, F as _e, M as Pe, b as De, h as Ze, I as $e, L as Oe, U as Ge, T as We, B as ze, A as Fe, f as Ue, e as qe, R as g, d as Q2, C as X2 } from "./index-CXyljfMv.js";
 import "@janbox/storefront-ui/hooks";
-import { ThemeProvider as Ye, getColorVar as N2, FLOATING_Z_INDEX as Qe, breakpoint as Xe } from "@janbox/storefront-ui/theme";
+import { ThemeProvider as Ye, getColorVar as L2, FLOATING_Z_INDEX as Qe, breakpoint as Xe } from "@janbox/storefront-ui/theme";
 import "@janbox/storefront-ui/utils";
-import { G as Ke, c as B, l as A, W as E, d as K2, m as J2, e as Je, v as e1, F as t1, C as r1, P as n1 } from "./dialog-header-DPLOS7TT.js";
-import { useFloating as o1, autoUpdate as s1, flip as i1, size as c1, useHover as a1, safePolygon as l1, useFocus as d1, useDismiss as h1, useRole as u1, useInteractions as w1, FloatingPortal as ee } from "@floating-ui/react";
+import { I as Ke, J as Je, t as u, k as j, W as E, c as K2, l as J2, d as e1, w as t1, z as r1, H as n1, C as o1, P as s1 } from "./dialog-header-Bh3Dkw2q.js";
+import { CacheProvider as i1, Global as c1, createElement as a1 } from "@emotion/react";
+import { useFloating as d1, autoUpdate as l1, flip as h1, size as u1, useHover as p1, safePolygon as C1, useFocus as g1, useDismiss as f1, useRole as w1, useInteractions as m1, FloatingPortal as ee } from "@floating-ui/react";
 import "react-use";
 import "react-colorful";
 import "overlayscrollbars-react";
@@ -23,18 +24,15 @@ import "@tiptap/extension-text-style";
 import "@tiptap/react";
 import "@tiptap/react/menus";
 import "@tiptap/starter-kit";
-import C1, { useFrame as p1 } from "react-frame-component";
-import { CacheProvider as f1, Global as g1, createElement as m1 } from "@emotion/react";
+import k1, { useFrame as v1 } from "react-frame-component";
 import "@hello-pangea/dnd";
 import { useToggle as te } from "usehooks-ts";
-import "clsx";
-import "tailwind-merge";
-import { w as i2, x as k1, y as v1, z as M2 } from "./anchor-target-BlOvysAr.js";
-import { E as A3 } from "./anchor-target-BlOvysAr.js";
-import { a as x1, W as re, A as ne } from "./dropzone-Dbfed3jK.js";
-import b1 from "dayjs";
-import { Layers as y1, useLayer as N1 } from "@craftjs/layers";
-class M1 {
+import { w as i2, x as x1, y as b1, z as M2 } from "./anchor-target-CtXzdkBu.js";
+import { E as B3 } from "./anchor-target-CtXzdkBu.js";
+import { a as y1, W as re, A as ne } from "./dropzone-CF4CWXth.js";
+import L1 from "dayjs";
+import { Layers as M1, useLayer as I1 } from "@craftjs/layers";
+class N1 {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -67,22 +65,22 @@ class M1 {
     });
   }
 }
-const L1 = () => new M1();
-function I1() {
-  return Ke(L1);
+const S1 = () => new N1();
+function E1() {
+  return Ke(S1);
 }
-function E1(e) {
+function T1(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 S1(e) {
+function R1(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 T1 = /* @__PURE__ */ (function() {
+var V1 = /* @__PURE__ */ (function() {
   function e(o) {
     var n = this;
     this._insertTag = function(i) {
@@ -94,10 +92,10 @@ var T1 = /* @__PURE__ */ (function() {
   return t.hydrate = function(n) {
     n.forEach(this._insertTag);
   }, t.insert = function(n) {
-    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(S1(this));
+    this.ctr % (this.isSpeedy ? 65e3 : 1) === 0 && this._insertTag(R1(this));
     var i = this.tags[this.tags.length - 1];
     if (this.isSpeedy) {
-      var s = E1(i);
+      var s = T1(i);
       try {
         s.insertRule(n, s.cssRules.length);
       } catch {
@@ -111,23 +109,23 @@ var T1 = /* @__PURE__ */ (function() {
       return (i = n.parentNode) == null ? void 0 : i.removeChild(n);
     }), this.tags = [], this.ctr = 0;
   }, e;
-})(), S = "-ms-", o2 = "-moz-", p = "-webkit-", oe = "comm", g2 = "rule", m2 = "decl", V1 = "@import", se = "@keyframes", j1 = "@layer", A1 = Math.abs, c2 = String.fromCharCode, R1 = Object.assign;
-function H1(e, t) {
-  return I(e, 0) ^ 45 ? (((t << 2 ^ I(e, 0)) << 2 ^ I(e, 1)) << 2 ^ I(e, 2)) << 2 ^ I(e, 3) : 0;
+})(), T = "-ms-", o2 = "-moz-", f = "-webkit-", oe = "comm", w2 = "rule", m2 = "decl", B1 = "@import", se = "@keyframes", j1 = "@layer", A1 = Math.abs, c2 = String.fromCharCode, H1 = Object.assign;
+function _1(e, t) {
+  return S(e, 0) ^ 45 ? (((t << 2 ^ S(e, 0)) << 2 ^ S(e, 1)) << 2 ^ S(e, 2)) << 2 ^ S(e, 3) : 0;
 }
 function ie(e) {
   return e.trim();
 }
-function B1(e, t) {
+function P1(e, t) {
   return (e = t.exec(e)) ? e[0] : e;
 }
-function f(e, t, o) {
+function w(e, t, o) {
   return e.replace(t, o);
 }
 function u2(e, t) {
   return e.indexOf(t);
 }
-function I(e, t) {
+function S(e, t) {
   return e.charCodeAt(t) | 0;
 }
 function q(e, t, o) {
@@ -142,27 +140,27 @@ function k2(e) {
 function K(e, t) {
   return t.push(e), e;
 }
-function _1(e, t) {
+function D1(e, t) {
   return e.map(t).join("");
 }
-var a2 = 1, F = 1, ce = 0, V = 0, N = 0, z = "";
-function l2(e, t, o, n, i, s, u) {
-  return { value: e, root: t, parent: o, type: n, props: i, children: s, line: a2, column: F, length: u, return: "" };
+var a2 = 1, W = 1, ce = 0, V = 0, M = 0, z = "";
+function d2(e, t, o, n, i, s, p) {
+  return { value: e, root: t, parent: o, type: n, props: i, children: s, line: a2, column: W, length: p, return: "" };
 }
-function U(e, t) {
-  return R1(l2("", null, null, "", null, null, 0), e, { length: -e.length }, t);
-}
-function P1() {
-  return N;
+function F(e, t) {
+  return H1(d2("", null, null, "", null, null, 0), e, { length: -e.length }, t);
 }
 function Z1() {
-  return N = V > 0 ? I(z, --V) : 0, F--, N === 10 && (F = 1, a2--), N;
+  return M;
+}
+function $1() {
+  return M = V > 0 ? S(z, --V) : 0, W--, M === 10 && (W = 1, a2--), M;
 }
-function j() {
-  return N = V < ce ? I(z, V++) : 0, F++, N === 10 && (F = 1, a2++), N;
+function B() {
+  return M = V < ce ? S(z, V++) : 0, W++, M === 10 && (W = 1, a2++), M;
 }
 function _() {
-  return I(z, V);
+  return S(z, V);
 }
 function J() {
   return V;
@@ -209,222 +207,222 @@ function Y(e) {
   return 0;
 }
 function ae(e) {
-  return a2 = F = 1, ce = H(z = e), V = 0, [];
+  return a2 = W = 1, ce = H(z = e), V = 0, [];
 }
-function le(e) {
+function de(e) {
   return z = "", e;
 }
 function e2(e) {
-  return ie(Q(V - 1, w2(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+  return ie(Q(V - 1, p2(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
 }
-function $1(e) {
-  for (; (N = _()) && N < 33; )
-    j();
-  return Y(e) > 2 || Y(N) > 3 ? "" : " ";
+function O1(e) {
+  for (; (M = _()) && M < 33; )
+    B();
+  return Y(e) > 2 || Y(M) > 3 ? "" : " ";
 }
-function D1(e, t) {
-  for (; --t && j() && !(N < 48 || N > 102 || N > 57 && N < 65 || N > 70 && N < 97); )
+function G1(e, t) {
+  for (; --t && B() && !(M < 48 || M > 102 || M > 57 && M < 65 || M > 70 && M < 97); )
     ;
-  return Q(e, J() + (t < 6 && _() == 32 && j() == 32));
+  return Q(e, J() + (t < 6 && _() == 32 && B() == 32));
 }
-function w2(e) {
-  for (; j(); )
-    switch (N) {
+function p2(e) {
+  for (; B(); )
+    switch (M) {
       // ] ) " '
       case e:
         return V;
       // " '
       case 34:
       case 39:
-        e !== 34 && e !== 39 && w2(N);
+        e !== 34 && e !== 39 && p2(M);
         break;
       // (
       case 40:
-        e === 41 && w2(e);
+        e === 41 && p2(e);
         break;
       // \
       case 92:
-        j();
+        B();
         break;
     }
   return V;
 }
-function O1(e, t) {
-  for (; j() && e + N !== 57; )
-    if (e + N === 84 && _() === 47)
+function W1(e, t) {
+  for (; B() && e + M !== 57; )
+    if (e + M === 84 && _() === 47)
       break;
-  return "/*" + Q(t, V - 1) + "*" + c2(e === 47 ? e : j());
+  return "/*" + Q(t, V - 1) + "*" + c2(e === 47 ? e : B());
 }
-function G1(e) {
+function z1(e) {
   for (; !Y(_()); )
-    j();
+    B();
   return Q(e, V);
 }
 function F1(e) {
-  return le(t2("", null, null, null, [""], e = ae(e), 0, [0], e));
+  return de(t2("", null, null, null, [""], e = ae(e), 0, [0], e));
 }
-function t2(e, t, o, n, i, s, u, c, w) {
-  for (var x = 0, l = 0, a = u, m = 0, k = 0, h = 0, d = 1, M = 1, v = 1, y = 0, T = "", X = i, P = s, R = n, b = T; M; )
-    switch (h = y, y = j()) {
+function t2(e, t, o, n, i, s, p, c, C) {
+  for (var b = 0, d = 0, a = p, k = 0, v = 0, h = 0, l = 1, I = 1, x = 1, L = 0, R = "", X = i, P = s, A = n, y = R; I; )
+    switch (h = L, L = B()) {
       // (
       case 40:
-        if (h != 108 && I(b, a - 1) == 58) {
-          u2(b += f(e2(y), "&", "&\f"), "&\f") != -1 && (v = -1);
+        if (h != 108 && S(y, a - 1) == 58) {
+          u2(y += w(e2(L), "&", "&\f"), "&\f") != -1 && (x = -1);
           break;
         }
       // " ' [
       case 34:
       case 39:
       case 91:
-        b += e2(y);
+        y += e2(L);
         break;
       // \t \n \r \s
       case 9:
       case 10:
       case 13:
       case 32:
-        b += $1(h);
+        y += O1(h);
         break;
       // \
       case 92:
-        b += D1(J() - 1, 7);
+        y += G1(J() - 1, 7);
         continue;
       // /
       case 47:
         switch (_()) {
           case 42:
           case 47:
-            K(z1(O1(j(), J()), t, o), w);
+            K(U1(W1(B(), J()), t, o), C);
             break;
           default:
-            b += "/";
+            y += "/";
         }
         break;
       // {
-      case 123 * d:
-        c[x++] = H(b) * v;
+      case 123 * l:
+        c[b++] = H(y) * x;
       // } ; \0
-      case 125 * d:
+      case 125 * l:
       case 59:
       case 0:
-        switch (y) {
+        switch (L) {
           // \0 }
           case 0:
           case 125:
-            M = 0;
+            I = 0;
           // ;
-          case 59 + l:
-            v == -1 && (b = f(b, /\f/g, "")), k > 0 && H(b) - a && K(k > 32 ? I2(b + ";", n, o, a - 1) : I2(f(b, " ", "") + ";", n, o, a - 2), w);
+          case 59 + d:
+            x == -1 && (y = w(y, /\f/g, "")), v > 0 && H(y) - a && K(v > 32 ? N2(y + ";", n, o, a - 1) : N2(w(y, " ", "") + ";", n, o, a - 2), C);
             break;
           // @ ;
           case 59:
-            b += ";";
+            y += ";";
           // { rule/at-rule
           default:
-            if (K(R = L2(b, t, o, x, l, i, c, T, X = [], P = [], a), s), y === 123)
-              if (l === 0)
-                t2(b, t, R, R, X, s, a, c, P);
+            if (K(A = I2(y, t, o, b, d, i, c, R, X = [], P = [], a), s), L === 123)
+              if (d === 0)
+                t2(y, t, A, A, X, s, a, c, P);
               else
-                switch (m === 99 && I(b, 3) === 110 ? 100 : m) {
+                switch (k === 99 && S(y, 3) === 110 ? 100 : k) {
                   // d l m s
                   case 100:
                   case 108:
                   case 109:
                   case 115:
-                    t2(e, R, R, n && K(L2(e, R, R, 0, 0, i, c, T, i, X = [], a), P), i, P, a, c, n ? X : P);
+                    t2(e, A, A, n && K(I2(e, A, A, 0, 0, i, c, R, i, X = [], a), P), i, P, a, c, n ? X : P);
                     break;
                   default:
-                    t2(b, R, R, R, [""], P, 0, c, P);
+                    t2(y, A, A, A, [""], P, 0, c, P);
                 }
         }
-        x = l = k = 0, d = v = 1, T = b = "", a = u;
+        b = d = v = 0, l = x = 1, R = y = "", a = p;
         break;
       // :
       case 58:
-        a = 1 + H(b), k = h;
+        a = 1 + H(y), v = h;
       default:
-        if (d < 1) {
-          if (y == 123)
-            --d;
-          else if (y == 125 && d++ == 0 && Z1() == 125)
+        if (l < 1) {
+          if (L == 123)
+            --l;
+          else if (L == 125 && l++ == 0 && $1() == 125)
             continue;
         }
-        switch (b += c2(y), y * d) {
+        switch (y += c2(L), L * l) {
           // &
           case 38:
-            v = l > 0 ? 1 : (b += "\f", -1);
+            x = d > 0 ? 1 : (y += "\f", -1);
             break;
           // ,
           case 44:
-            c[x++] = (H(b) - 1) * v, v = 1;
+            c[b++] = (H(y) - 1) * x, x = 1;
             break;
           // @
           case 64:
-            _() === 45 && (b += e2(j())), m = _(), l = a = H(T = b += G1(J())), y++;
+            _() === 45 && (y += e2(B())), k = _(), d = a = H(R = y += z1(J())), L++;
             break;
           // -
           case 45:
-            h === 45 && H(b) == 2 && (d = 0);
+            h === 45 && H(y) == 2 && (l = 0);
         }
     }
   return s;
 }
-function L2(e, t, o, n, i, s, u, c, w, x, l) {
-  for (var a = i - 1, m = i === 0 ? s : [""], k = k2(m), h = 0, d = 0, M = 0; h < n; ++h)
-    for (var v = 0, y = q(e, a + 1, a = A1(d = u[h])), T = e; v < k; ++v)
-      (T = ie(d > 0 ? m[v] + " " + y : f(y, /&\f/g, m[v]))) && (w[M++] = T);
-  return l2(e, t, o, i === 0 ? g2 : c, w, x, l);
+function I2(e, t, o, n, i, s, p, c, C, b, d) {
+  for (var a = i - 1, k = i === 0 ? s : [""], v = k2(k), h = 0, l = 0, I = 0; h < n; ++h)
+    for (var x = 0, L = q(e, a + 1, a = A1(l = p[h])), R = e; x < v; ++x)
+      (R = ie(l > 0 ? k[x] + " " + L : w(L, /&\f/g, k[x]))) && (C[I++] = R);
+  return d2(e, t, o, i === 0 ? w2 : c, C, b, d);
 }
-function z1(e, t, o) {
-  return l2(e, t, o, oe, c2(P1()), q(e, 2, -2), 0);
+function U1(e, t, o) {
+  return d2(e, t, o, oe, c2(Z1()), q(e, 2, -2), 0);
 }
-function I2(e, t, o, n) {
-  return l2(e, t, o, m2, q(e, 0, n), q(e, n + 1, -1), n);
+function N2(e, t, o, n) {
+  return d2(e, t, o, m2, q(e, 0, n), q(e, n + 1, -1), n);
 }
 function O(e, t) {
   for (var o = "", n = k2(e), i = 0; i < n; i++)
     o += t(e[i], i, e, t) || "";
   return o;
 }
-function U1(e, t, o, n) {
+function q1(e, t, o, n) {
   switch (e.type) {
     case j1:
       if (e.children.length) break;
-    case V1:
+    case B1:
     case m2:
       return e.return = e.return || e.value;
     case oe:
       return "";
     case se:
       return e.return = e.value + "{" + O(e.children, n) + "}";
-    case g2:
+    case w2:
       e.value = e.props.join(",");
   }
   return H(o = O(e.children, n)) ? e.return = e.value + "{" + o + "}" : "";
 }
-function W1(e) {
+function Y1(e) {
   var t = k2(e);
   return function(o, n, i, s) {
-    for (var u = "", c = 0; c < t; c++)
-      u += e[c](o, n, i, s) || "";
-    return u;
+    for (var p = "", c = 0; c < t; c++)
+      p += e[c](o, n, i, s) || "";
+    return p;
   };
 }
-function q1(e) {
+function Q1(e) {
   return function(t) {
     t.root || (t = t.return) && e(t);
   };
 }
-var Y1 = function(t, o, n) {
+var X1 = function(t, o, n) {
   for (var i = 0, s = 0; i = s, s = _(), i === 38 && s === 12 && (o[n] = 1), !Y(s); )
-    j();
+    B();
   return Q(t, V);
-}, Q1 = function(t, o) {
+}, K1 = function(t, o) {
   var n = -1, i = 44;
   do
     switch (Y(i)) {
       case 0:
-        i === 38 && _() === 12 && (o[n] = 1), t[n] += Y1(V - 1, o, n);
+        i === 38 && _() === 12 && (o[n] = 1), t[n] += X1(V - 1, o, n);
         break;
       case 2:
         t[n] += e2(i);
@@ -438,24 +436,24 @@ var Y1 = function(t, o, n) {
       default:
         t[n] += c2(i);
     }
-  while (i = j());
+  while (i = B());
   return t;
-}, X1 = function(t, o) {
-  return le(Q1(ae(t), o));
-}, E2 = /* @__PURE__ */ new WeakMap(), K1 = function(t) {
+}, J1 = function(t, o) {
+  return de(K1(ae(t), o));
+}, S2 = /* @__PURE__ */ new WeakMap(), et = 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, 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 && !E2.get(n)) && !i) {
-      E2.set(t, !0);
-      for (var s = [], u = X1(o, s), c = n.props, w = 0, x = 0; w < u.length; w++)
-        for (var l = 0; l < c.length; l++, x++)
-          t.props[x] = s[w] ? u[w].replace(/&\f/g, c[l]) : c[l] + " " + u[w];
+    if (!(t.props.length === 1 && o.charCodeAt(0) !== 58 && !S2.get(n)) && !i) {
+      S2.set(t, !0);
+      for (var s = [], p = J1(o, s), c = n.props, C = 0, b = 0; C < p.length; C++)
+        for (var d = 0; d < c.length; d++, b++)
+          t.props[b] = s[C] ? p[C].replace(/&\f/g, c[d]) : c[d] + " " + p[C];
     }
   }
-}, J1 = function(t) {
+}, tt = function(t) {
   if (t.type === "decl") {
     var o = t.value;
     // charcode for l
@@ -463,11 +461,11 @@ var Y1 = function(t, o, n) {
     o.charCodeAt(2) === 98 && (t.return = "", t.value = "");
   }
 };
-function de(e, t) {
-  switch (H1(e, t)) {
+function le(e, t) {
+  switch (_1(e, t)) {
     // color-adjust
     case 5103:
-      return p + "print-" + e + e;
+      return f + "print-" + e + e;
     // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
     case 5737:
     case 4201:
@@ -497,58 +495,58 @@ function de(e, t) {
     case 5365:
     case 5621:
     case 3829:
-      return p + e + e;
+      return f + e + e;
     // appearance, user-select, transform, hyphens, text-size-adjust
     case 5349:
     case 4246:
     case 4810:
     case 6968:
     case 2756:
-      return p + e + o2 + e + S + e + e;
+      return f + e + o2 + e + T + e + e;
     // flex, flex-direction
     case 6828:
     case 4268:
-      return p + e + S + e + e;
+      return f + e + T + e + e;
     // order
     case 6165:
-      return p + e + S + "flex-" + e + e;
+      return f + e + T + "flex-" + e + e;
     // align-items
     case 5187:
-      return p + e + f(e, /(\w+).+(:[^]+)/, p + "box-$1$2" + S + "flex-$1$2") + e;
+      return f + e + w(e, /(\w+).+(:[^]+)/, f + "box-$1$2" + T + "flex-$1$2") + e;
     // align-self
     case 5443:
-      return p + e + S + "flex-item-" + f(e, /flex-|-self/, "") + e;
+      return f + e + T + "flex-item-" + w(e, /flex-|-self/, "") + e;
     // align-content
     case 4675:
-      return p + e + S + "flex-line-pack" + f(e, /align-content|flex-|-self/, "") + e;
+      return f + e + T + "flex-line-pack" + w(e, /align-content|flex-|-self/, "") + e;
     // flex-shrink
     case 5548:
-      return p + e + S + f(e, "shrink", "negative") + e;
+      return f + e + T + w(e, "shrink", "negative") + e;
     // flex-basis
     case 5292:
-      return p + e + S + f(e, "basis", "preferred-size") + e;
+      return f + e + T + w(e, "basis", "preferred-size") + e;
     // flex-grow
     case 6060:
-      return p + "box-" + f(e, "-grow", "") + p + e + S + f(e, "grow", "positive") + e;
+      return f + "box-" + w(e, "-grow", "") + f + e + T + w(e, "grow", "positive") + e;
     // transition
     case 4554:
-      return p + f(e, /([^-])(transform)/g, "$1" + p + "$2") + e;
+      return f + w(e, /([^-])(transform)/g, "$1" + f + "$2") + e;
     // cursor
     case 6187:
-      return f(f(f(e, /(zoom-|grab)/, p + "$1"), /(image-set)/, p + "$1"), e, "") + e;
+      return w(w(w(e, /(zoom-|grab)/, f + "$1"), /(image-set)/, f + "$1"), e, "") + e;
     // background, background-image
     case 5495:
     case 3959:
-      return f(e, /(image-set\([^]*)/, p + "$1$`$1");
+      return w(e, /(image-set\([^]*)/, f + "$1$`$1");
     // justify-content
     case 4968:
-      return f(f(e, /(.+:)(flex-)?(.*)/, p + "box-pack:$3" + S + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + p + e + e;
+      return w(w(e, /(.+:)(flex-)?(.*)/, f + "box-pack:$3" + T + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + f + e + e;
     // (margin|padding)-inline-(start|end)
     case 4095:
     case 3583:
     case 4068:
     case 2532:
-      return f(e, /(.+)-inline(.+)/, p + "$1$2") + e;
+      return w(e, /(.+)-inline(.+)/, f + "$1$2") + e;
     // (min|max)?(width|height|inline-size|block-size)
     case 8116:
     case 7059:
@@ -562,116 +560,116 @@ function de(e, t) {
     case 5789:
     case 5021:
     case 4765:
-      if (H(e) - 1 - t > 6) switch (I(e, t + 1)) {
+      if (H(e) - 1 - t > 6) switch (S(e, t + 1)) {
         // (m)ax-content, (m)in-content
         case 109:
-          if (I(e, t + 4) !== 45) break;
+          if (S(e, t + 4) !== 45) break;
         // (f)ill-available, (f)it-content
         case 102:
-          return f(e, /(.+:)(.+)-([^]+)/, "$1" + p + "$2-$3$1" + o2 + (I(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
+          return w(e, /(.+:)(.+)-([^]+)/, "$1" + f + "$2-$3$1" + o2 + (S(e, t + 3) == 108 ? "$3" : "$2-$3")) + e;
         // (s)tretch
         case 115:
-          return ~u2(e, "stretch") ? de(f(e, "stretch", "fill-available"), t) + e : e;
+          return ~u2(e, "stretch") ? le(w(e, "stretch", "fill-available"), t) + e : e;
       }
       break;
     // position: sticky
     case 4949:
-      if (I(e, t + 1) !== 115) break;
+      if (S(e, t + 1) !== 115) break;
     // display: (flex|inline-flex)
     case 6444:
-      switch (I(e, H(e) - 3 - (~u2(e, "!important") && 10))) {
+      switch (S(e, H(e) - 3 - (~u2(e, "!important") && 10))) {
         // stic(k)y
         case 107:
-          return f(e, ":", ":" + p) + e;
+          return w(e, ":", ":" + f) + e;
         // (inline-)?fl(e)x
         case 101:
-          return f(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + p + (I(e, 14) === 45 ? "inline-" : "") + "box$3$1" + p + "$2$3$1" + S + "$2box$3") + e;
+          return w(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + f + (S(e, 14) === 45 ? "inline-" : "") + "box$3$1" + f + "$2$3$1" + T + "$2box$3") + e;
       }
       break;
     // writing-mode
     case 5936:
-      switch (I(e, t + 11)) {
+      switch (S(e, t + 11)) {
         // vertical-l(r)
         case 114:
-          return p + e + S + f(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+          return f + e + T + w(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
         // vertical-r(l)
         case 108:
-          return p + e + S + f(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+          return f + e + T + w(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
         // horizontal(-)tb
         case 45:
-          return p + e + S + f(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+          return f + e + T + w(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
       }
-      return p + e + S + e + e;
+      return f + e + T + e + e;
   }
   return e;
 }
-var et = function(t, o, n, i) {
+var rt = function(t, o, n, i) {
   if (t.length > -1 && !t.return) switch (t.type) {
     case m2:
-      t.return = de(t.value, t.length);
+      t.return = le(t.value, t.length);
       break;
     case se:
-      return O([U(t, {
-        value: f(t.value, "@", "@" + p)
+      return O([F(t, {
+        value: w(t.value, "@", "@" + f)
       })], i);
-    case g2:
-      if (t.length) return _1(t.props, function(s) {
-        switch (B1(s, /(::plac\w+|:read-\w+)/)) {
+    case w2:
+      if (t.length) return D1(t.props, function(s) {
+        switch (P1(s, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
           case ":read-only":
           case ":read-write":
-            return O([U(t, {
-              props: [f(s, /:(read-\w+)/, ":" + o2 + "$1")]
+            return O([F(t, {
+              props: [w(s, /:(read-\w+)/, ":" + o2 + "$1")]
             })], i);
           // :placeholder
           case "::placeholder":
-            return O([U(t, {
-              props: [f(s, /:(plac\w+)/, ":" + p + "input-$1")]
-            }), U(t, {
-              props: [f(s, /:(plac\w+)/, ":" + o2 + "$1")]
-            }), U(t, {
-              props: [f(s, /:(plac\w+)/, S + "input-$1")]
+            return O([F(t, {
+              props: [w(s, /:(plac\w+)/, ":" + f + "input-$1")]
+            }), F(t, {
+              props: [w(s, /:(plac\w+)/, ":" + o2 + "$1")]
+            }), F(t, {
+              props: [w(s, /:(plac\w+)/, T + "input-$1")]
             })], i);
         }
         return "";
       });
   }
-}, tt = [et], rt = function(t) {
+}, nt = [rt], ot = function(t) {
   var o = t.key;
   if (o === "css") {
     var n = document.querySelectorAll("style[data-emotion]:not([data-s])");
-    Array.prototype.forEach.call(n, function(d) {
-      var M = d.getAttribute("data-emotion");
-      M.indexOf(" ") !== -1 && (document.head.appendChild(d), d.setAttribute("data-s", ""));
+    Array.prototype.forEach.call(n, function(l) {
+      var I = l.getAttribute("data-emotion");
+      I.indexOf(" ") !== -1 && (document.head.appendChild(l), l.setAttribute("data-s", ""));
     });
   }
-  var i = t.stylisPlugins || tt, s = {}, u, c = [];
-  u = t.container || document.head, Array.prototype.forEach.call(
+  var i = t.stylisPlugins || nt, s = {}, p, c = [];
+  p = 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(d) {
-      for (var M = d.getAttribute("data-emotion").split(" "), v = 1; v < M.length; v++)
-        s[M[v]] = !0;
-      c.push(d);
+    function(l) {
+      for (var I = l.getAttribute("data-emotion").split(" "), x = 1; x < I.length; x++)
+        s[I[x]] = !0;
+      c.push(l);
     }
   );
-  var w, x = [K1, J1];
+  var C, b = [et, tt];
   {
-    var l, a = [U1, q1(function(d) {
-      l.insert(d);
-    })], m = W1(x.concat(i, a)), k = function(M) {
-      return O(F1(M), m);
+    var d, a = [q1, Q1(function(l) {
+      d.insert(l);
+    })], k = Y1(b.concat(i, a)), v = function(I) {
+      return O(F1(I), k);
     };
-    w = function(M, v, y, T) {
-      l = y, k(M ? M + "{" + v.styles + "}" : v.styles), T && (h.inserted[v.name] = !0);
+    C = function(I, x, L, R) {
+      d = L, v(I ? I + "{" + x.styles + "}" : x.styles), R && (h.inserted[x.name] = !0);
     };
   }
   var h = {
     key: o,
-    sheet: new T1({
+    sheet: new V1({
       key: o,
-      container: u,
+      container: p,
       nonce: t.nonce,
       speedy: t.speedy,
       prepend: t.prepend,
@@ -680,68 +678,68 @@ var et = function(t, o, n, i) {
     nonce: t.nonce,
     inserted: s,
     registered: {},
-    insert: w
+    insert: C
   };
   return h.sheet.hydrate(c), h;
 };
 const he = ({ children: e, viewport: t, containerProps: o }) => {
-  const n = q2(null), { theme: i } = s2(), [s, u] = G({
+  const n = q2(null), { theme: i } = s2(), [s, p] = G({
     width: 0,
     height: 0
   });
-  W(() => {
-    const h = Ie((M) => {
-      const v = M.at(0)?.target;
-      if (!v) return;
-      const { width: y, height: T } = v.getBoundingClientRect();
-      u(() => ({
-        width: y,
-        height: T
+  U(() => {
+    const h = Ne((I) => {
+      const x = I.at(0)?.target;
+      if (!x) return;
+      const { width: L, height: R } = x.getBoundingClientRect();
+      p(() => ({
+        width: L,
+        height: R
       }));
-    }, 200), d = new ResizeObserver(h);
-    return n.current && d.observe(n.current), () => d.disconnect();
+    }, 200), l = new ResizeObserver(h);
+    return n.current && l.observe(n.current), () => l.disconnect();
   }, []);
-  const c = b2(t?.width) ? t.width(s.width) : t?.width, w = b2(t?.height) ? t.height(s.height) : t?.height, x = y2(c) ? s.width / c : 1, l = y2(w) ? s.height / w : 1, a = Math.min(x, l, 1), m = (w ?? s.height / a) || 0, k = (c ?? s.width / a) || 0;
-  return /* @__PURE__ */ r("div", { ...o, className: B("tw:w-full tw:h-full tw:p-2 tw:bg-ic-ink-1s", o?.className), children: /* @__PURE__ */ r("div", { className: B("tw:w-full tw:h-full tw:overflow-hidden tw:relative"), ref: n, children: /* @__PURE__ */ r(
+  const c = b2(t?.width) ? t.width(s.width) : t?.width, C = b2(t?.height) ? t.height(s.height) : t?.height, b = y2(c) ? s.width / c : 1, d = y2(C) ? s.height / C : 1, a = Math.min(b, d, 1), k = (C ?? s.height / a) || 0, v = (c ?? s.width / a) || 0;
+  return /* @__PURE__ */ r("div", { ...o, css: { padding: 8, width: "100%", height: "100%", backgroundColor: Je.ink["1s"] }, children: /* @__PURE__ */ r("div", { css: { position: "relative", overflow: "hidden", width: "100%", height: "100%" }, ref: n, children: /* @__PURE__ */ r(
     "div",
     {
       style: {
         transform: `scale(${a})`,
-        width: k,
-        height: m,
-        marginLeft: (s.width - k) / 2,
-        marginTop: (s.height - m) / 2
+        width: v,
+        height: k,
+        marginLeft: (s.width - v) / 2,
+        marginTop: (s.height - k) / 2
       },
-      className: "tw:absolute",
+      css: { position: "absolute" },
       children: /* @__PURE__ */ r(
-        C1,
+        k1,
         {
           sandbox: "allow-same-origin allow-scripts allow-popups allow-presentation",
           allow: "autoplay; encrypted-media",
           width: c ?? "100%",
-          height: w ?? "100%",
-          children: /* @__PURE__ */ r(nt, { theme: i, children: e })
+          height: C ?? "100%",
+          children: /* @__PURE__ */ r(st, { theme: i, children: e })
         }
       )
     }
   ) }) });
-}, nt = ({ children: e, theme: t }) => {
-  const { document: o, window: n } = p1(), [i, s] = G(!1), u = q2(window.customElements.define.bind(window.customElements));
-  W(() => {
-    const w = u.current;
-    return n && (window.customElements.define = function(x, l, a) {
-      window.customElements.get(x) || n.customElements.define(x, l, a), w(x, l, a);
+}, st = ({ children: e, theme: t }) => {
+  const { document: o, window: n } = v1(), [i, s] = G(!1), p = q2(window.customElements.define.bind(window.customElements));
+  U(() => {
+    const C = p.current;
+    return n && (window.customElements.define = function(b, d, a) {
+      window.customElements.get(b) || n.customElements.define(b, d, a), C(b, d, a);
     }), o?.head.replaceWith(document.head.cloneNode(!0)), s(!0), () => {
-      window.customElements.define = w;
+      window.customElements.define = C;
     };
   }, [o, n]);
-  const c = rt({
+  const c = ot({
     key: "css",
     container: o?.head
   });
-  return i ? /* @__PURE__ */ r(V2, { children: /* @__PURE__ */ g(f1, { value: c, children: [
+  return i ? /* @__PURE__ */ r(R2, { children: /* @__PURE__ */ m(i1, { value: c, children: [
     /* @__PURE__ */ r(
-      g1,
+      c1,
       {
         styles: {
           ".frame-content": {
@@ -764,47 +762,47 @@ const he = ({ children: e, viewport: t, containerProps: o }) => {
     ),
     /* @__PURE__ */ r(Ye, { theme: t, children: e })
   ] }) }) : null;
-}, ot = ({ render: e }) => {
+}, it = ({ render: e }) => {
   const { id: t, renderer: o } = xe((s) => ({
-    resolvedId: Ne(s),
+    resolvedId: Le(s),
     renderer: ye(s).renderer
   })), {
     queryParams: { mode: n }
-  } = i2(), { isActive: i } = $((s, u) => ({
-    isActive: u.getEvent("selected").contains(t) && t !== D
+  } = i2(), { isActive: i } = Z((s, p) => ({
+    isActive: p.getEvent("selected").contains(t) && t !== $
   }));
-  return o ? Y2(o, { render: e }) : /* @__PURE__ */ g(n2, { children: [
-    i && n === "full" && /* @__PURE__ */ g(n2, { children: [
-      /* @__PURE__ */ r(Ee, {}),
-      /* @__PURE__ */ r(Se, {})
+  return o ? Y2(o, { render: e }) : /* @__PURE__ */ m(n2, { children: [
+    i && n === "full" && /* @__PURE__ */ m(n2, { children: [
+      /* @__PURE__ */ r(Se, {}),
+      /* @__PURE__ */ r(Ee, {})
     ] }),
     e
   ] });
 };
-L(j2, { inspector: Te });
-L(r2, { inspector: Ve });
-L(A2, { inspector: je });
-L(p2, { inspector: Ae });
-L(R2, { inspector: Re });
-L(d2, { inspector: He });
-L(H2, { inspector: Be });
-L(h2, { inspector: _e });
-L(f2, { inspector: Pe });
-L(B2, { inspector: Ze });
-L(_2, { inspector: $e });
-L(P2, { inspector: De });
-L(Z2, { inspector: Oe });
-L(ue, { inspector: Ge });
-L($2, { inspector: Fe });
-L(D2, { inspector: ze });
-L(O2, { inspector: Ue });
-L(G2, { inspector: We });
-L(F2, { inspector: qe });
-const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+N(V2, { inspector: Te });
+N(r2, { inspector: Re });
+N(B2, { inspector: Ve });
+N(g2, { inspector: Be });
+N(j2, { inspector: je });
+N(l2, { inspector: Ae });
+N(A2, { inspector: He });
+N(h2, { inspector: _e });
+N(f2, { inspector: Pe });
+N(H2, { inspector: De });
+N(_2, { inspector: Ze });
+N(P2, { inspector: $e });
+N(D2, { inspector: Oe });
+N(ue, { inspector: Ge });
+N(Z2, { inspector: We });
+N($2, { inspector: ze });
+N(O2, { inspector: Fe });
+N(G2, { inspector: Ue });
+N(W2, { inspector: qe });
+const E2 = `<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>
-`, st = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ct = `<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"/>
@@ -812,68 +810,101 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
 <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>
-`, it = `<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 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>
-`, ct = '<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>', at = () => {
+`, dt = '<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>', lt = () => {
   const {
     queryParams: { mode: e, screen: t },
     setQueryParams: o
-  } = i2(), [n, i] = G(!1), { handlers: s } = s2(), { actions: u, canRedo: c, canUndo: w, query: x } = $((h, d) => ({
+  } = i2(), [n, i] = G(!1), { handlers: s } = s2(), { actions: p, canRedo: c, canUndo: C, query: b } = Z((h, l) => ({
     enabled: h.options.enabled,
-    canUndo: d.history.canUndo(),
-    canRedo: d.history.canRedo()
-  })), l = (h) => {
+    canUndo: l.history.canUndo(),
+    canRedo: l.history.canRedo()
+  })), d = (h) => {
     o({
       screen: h
     });
   }, a = () => {
     o({ mode: e === "full" ? "compact" : "full" });
-  }, m = () => {
+  }, k = () => {
     s.close();
-  }, k = async () => {
+  }, v = async () => {
     try {
-      return u.selectNode(), s.submit(x.getSerializedNodes());
+      return p.selectNode(), s.submit(b.getSerializedNodes());
     } catch {
     } finally {
       i(!1);
     }
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: B(
-        "tw:flex tw:items-center tw:gap-4 tw:p-2 tw:justify-between tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm"
-      ),
+      css: {
+        display: "flex",
+        padding: 8,
+        alignItems: "center",
+        gap: 16,
+        justifyContent: "space-between",
+        backgroundColor: u.palette.ink["6s"],
+        color: u.palette.white["6s"],
+        ...u.text.sm
+      },
       children: [
-        /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
-          /* @__PURE__ */ r(A, { size: "32", onClick: m, children: /* @__PURE__ */ r(E, { source: ct }) }),
-          /* @__PURE__ */ r(x1, { onSelectionChange: l, value: t, children: k1.map(({ icon: h, size: d }) => /* @__PURE__ */ r(A, { value: d, children: /* @__PURE__ */ r(E, { source: h }) }, d)) }),
-          /* @__PURE__ */ g("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: [
-            /* @__PURE__ */ r(A, { onClick: u.history.undo, disabled: !w, children: /* @__PURE__ */ r(E, { source: S2 }) }),
-            /* @__PURE__ */ r(A, { onClick: u.history.redo, disabled: !c, children: /* @__PURE__ */ r(E, { source: S2, className: "tw:rotate-180" }) })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", children: /* @__PURE__ */ r(A, { onClick: a, children: /* @__PURE__ */ r(E, { source: e === "full" ? it : st }) }) })
+        /* @__PURE__ */ m("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ r(j, { size: "32", onClick: k, children: /* @__PURE__ */ r(E, { source: dt }) }),
+          /* @__PURE__ */ r(y1, { onSelectionChange: d, value: t, children: x1.map(({ icon: h, size: l }) => /* @__PURE__ */ r(j, { value: l, children: /* @__PURE__ */ r(E, { source: h }) }, l)) }),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              css: {
+                padding: 4,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                borderRadius: 8,
+                backgroundColor: u.palette.white["1s"]
+              },
+              children: [
+                /* @__PURE__ */ r(j, { onClick: p.history.undo, disabled: !C, children: /* @__PURE__ */ r(E, { source: E2 }) }),
+                /* @__PURE__ */ r(j, { onClick: p.history.redo, disabled: !c, children: /* @__PURE__ */ r(E, { source: E2, css: { transform: "rotate(180deg)" } }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              css: {
+                padding: 4,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                borderRadius: 8,
+                backgroundColor: u.palette.white["1s"]
+              },
+              children: /* @__PURE__ */ r(j, { onClick: a, children: /* @__PURE__ */ r(E, { source: e === "full" ? at : ct }) })
+            }
+          )
         ] }),
-        /* @__PURE__ */ r("div", { className: "tw:flex tw:items-center tw:gap-3", children: /* @__PURE__ */ r(K2, { isLoading: n, onClick: k, children: "Save" }) })
+        /* @__PURE__ */ r("div", { css: { display: "flex", alignItems: "center", gap: 12 }, children: /* @__PURE__ */ r(K2, { isLoading: n, onClick: v, children: "Save" }) })
       ]
     }
   );
-}, lt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, ht = `<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>
-`, dt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, ut = `<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>
-`, ht = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, pt = `<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>
-`, ut = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Ct = `<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"/>
@@ -884,23 +915,23 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
 <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>
-`, wt = {
+`, gt = {
   name: "Layout",
   templates: [
     {
       name: "Container",
-      template: /* @__PURE__ */ r(C, { is: F2 }),
+      template: /* @__PURE__ */ r(g, { is: W2 }),
       icon: { source: T2, height: 32 }
     },
     {
       name: "Block",
-      template: /* @__PURE__ */ r(C, { is: D2 }),
+      template: /* @__PURE__ */ r(g, { is: $2 }),
       icon: { source: T2, height: 32 }
     },
     {
       name: "Grid",
-      template: /* @__PURE__ */ g(
-        C,
+      template: /* @__PURE__ */ m(
+        g,
         {
           cols: 2,
           sx: {
@@ -910,20 +941,20 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
             paddingTop: 16,
             paddingBottom: 16
           },
-          is: R2,
+          is: j2,
           children: [
-            /* @__PURE__ */ r(C, { is: d2, canvas: !0 }),
-            /* @__PURE__ */ r(C, { is: d2, canvas: !0 })
+            /* @__PURE__ */ r(g, { is: l2, canvas: !0 }),
+            /* @__PURE__ */ r(g, { is: l2, canvas: !0 })
           ]
         }
       ),
-      icon: { source: ut, height: 32 }
+      icon: { source: Ct, height: 32 }
     },
     {
       name: "Flex",
-      template: /* @__PURE__ */ g(C, { is: H2, sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
+      template: /* @__PURE__ */ m(g, { is: A2, sx: { columnGap: 8, rowGap: 8, paddingTop: 16, paddingBottom: 16 }, children: [
         /* @__PURE__ */ r(
-          C,
+          g,
           {
             sx: {
               width: "40%"
@@ -933,7 +964,7 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           }
         ),
         /* @__PURE__ */ r(
-          C,
+          g,
           {
             sx: {
               width: "60%"
@@ -943,10 +974,10 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           }
         )
       ] }),
-      icon: { source: ht, height: 32 }
+      icon: { source: pt, height: 32 }
     }
   ]
-}, Ct = `<svg width="98" height="56" viewBox="0 0 98 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, ft = `<svg width="98" height="56" viewBox="0 0 98 56" fill="none" xmlns="http://www.w3.org/2000/svg">
       <rect x="4" y="4" width="57" height="6" rx="3" fill="currentColor"></rect>
       <rect x="2" y="4" width="57" height="6" rx="3" fill="currentColor"></rect>
       <path fill-rule="evenodd" clip-rule="evenodd" d="M86.1302 5.61716C86.3037 5.46095 86.5851 5.46095 86.7587 5.61716L90 8.53431L93.2413 5.61716C93.4149 5.46095 93.6963 5.46095 93.8698 5.61716C94.0434 5.77337 94.0434 6.02663 93.8698 6.18284L90.3143 9.38284C90.1407 9.53905 89.8593 9.53905 89.6857 9.38284L86.1302 6.18284C85.9566 6.02663 85.9566 5.77337 86.1302 5.61716Z" fill="currentColor"></path>
@@ -956,13 +987,13 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
       <rect x="4" y="46" width="57" height="6" rx="3" fill="currentColor"></rect>
       <rect x="2" y="46" width="57" height="6" rx="3" fill="currentColor"></rect>
       <path fill-rule="evenodd" clip-rule="evenodd" d="M86.1302 47.6172C86.3037 47.4609 86.5851 47.4609 86.7587 47.6172L90 50.5343L93.2413 47.6172C93.4149 47.4609 93.6963 47.4609 93.8698 47.6172C94.0434 47.7734 94.0434 48.0266 93.8698 48.1828L90.3143 51.3828C90.1407 51.5391 89.8593 51.5391 89.6857 51.3828L86.1302 48.1828C85.9566 48.0266 85.9566 47.7734 86.1302 47.6172Z" fill="currentColor"></path>
-      </svg>`, pt = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%209L12%2015L18%209'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", ft = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%209L12%2015L18%209'%20transform='rotate(180%2012%2012)'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", gt = {
+      </svg>`, wt = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%209L12%2015L18%209'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", mt = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%209L12%2015L18%209'%20transform='rotate(180%2012%2012)'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", kt = {
   name: "Content list",
   templates: [
     {
       name: "Accordion",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
           is: O2,
           accordionSummaryProps: {
@@ -973,8 +1004,8 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
             expandIcon: {
               position: "right",
               source: {
-                expanded: ft,
-                collapsed: pt
+                expanded: mt,
+                collapsed: wt
               }
             }
           },
@@ -985,17 +1016,17 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
             }
           },
           openMode: "single",
-          children: Z(3).map((e) => /* @__PURE__ */ g(C, { defaultOpen: e === 0, is: we, children: [
-            /* @__PURE__ */ r(C, { is: Ce, children: /* @__PURE__ */ r(
-              C,
+          children: D(3).map((e) => /* @__PURE__ */ m(g, { defaultOpen: e === 0, is: pe, children: [
+            /* @__PURE__ */ r(g, { is: Ce, children: /* @__PURE__ */ r(
+              g,
               {
                 sizeVariant: "base",
                 is: r2,
                 dangerouslySetInnerHTML: { __html: `Accordion ${e + 1}` }
               }
             ) }),
-            /* @__PURE__ */ r(C, { is: pe, children: /* @__PURE__ */ r(
-              C,
+            /* @__PURE__ */ r(g, { is: ge, children: /* @__PURE__ */ r(
+              g,
               {
                 sx: {
                   paddingTop: 8,
@@ -1010,22 +1041,22 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           ] }, e))
         }
       ),
-      icon: { source: Ct, height: 40 }
+      icon: { source: ft, height: 40 }
     }
   ]
 }, C2 = `<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.3998 10.6645L13.6661 15.4669C12.6691 16.1777 11.3309 16.1777 10.3339 15.4669L3.60018 10.6645C3.2236 10.3962 3 9.96237 3 9.5C3 9.03763 3.2236 8.60381 3.60018 8.33553L10.3339 3.5331C11.3309 2.8223 12.6691 2.8223 13.6661 3.5331L20.3998 8.33553C20.7764 8.60381 21 9.03763 21 9.5C21 9.96237 20.7764 10.3962 20.3998 10.6645Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M20.3998 15.6645L13.6661 20.4669C12.6691 21.1777 11.3309 21.1777 10.3339 20.4669L3.60018 15.6645C3.2236 15.3962 3 14.9624 3 14.5C3 14.0376 3.2236 13.6038 3.60018 13.3355L10.3339 8.5331C11.3309 7.8223 12.6691 7.8223 13.6661 8.5331L20.3998 13.3355C20.7764 13.6038 21 14.0376 21 14.5C21 14.9624 20.7764 15.3962 20.3998 15.6645Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, mt = {
+`, vt = {
   name: "Interactive",
   templates: [
     {
       name: "Carousel",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
-          is: p2,
+          is: g2,
           slidesPerView: 2,
           spaceBetween: 8,
           md: {
@@ -1034,8 +1065,8 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           lg: {
             slidesPerView: 4
           },
-          children: Z(6).map((e) => /* @__PURE__ */ r(
-            C,
+          children: D(6).map((e) => /* @__PURE__ */ r(
+            g,
             {
               custom: {
                 displayName: `Slide ${e + 1}`
@@ -1051,21 +1082,21 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
     },
     {
       name: "Marquee",
-      template: /* @__PURE__ */ r(C, { is: f2, children: Z(10).map((e) => /* @__PURE__ */ r(
-        C,
+      template: /* @__PURE__ */ r(g, { is: f2, children: D(10).map((e) => /* @__PURE__ */ r(
+        g,
         {
           canvas: !0,
           custom: {
             displayName: `Marquee Item ${e + 1}`
           },
-          is: U2
+          is: F2
         },
         e
       )) }),
       icon: { source: C2, height: 32 }
     }
   ]
-}, kt = `<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">
+}, xt = `<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>
@@ -1094,31 +1125,31 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
 		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>`, vt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, bt = `<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>
-`, xt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, yt = `<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>
-`, bt = {
+`, Lt = {
   name: "Media",
   templates: [
     {
       name: "Image",
-      template: /* @__PURE__ */ r(C, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/", is: _2 }),
-      icon: { source: vt, height: 32 }
+      template: /* @__PURE__ */ r(g, { src: "https://ucarecdn.com/ee6d5074-1640-4cc7-8933-47c8589c3dee/-/format/auto/", is: _2 }),
+      icon: { source: bt, height: 32 }
     },
     {
       name: "Video",
       template: /* @__PURE__ */ r(
-        A2,
+        B2,
         {
           sx: {
             aspectRatio: "16 / 9"
@@ -1126,21 +1157,21 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           src: "https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4"
         }
       ),
-      icon: { source: xt, height: 32 }
+      icon: { source: yt, height: 32 }
     },
     {
       name: "Icon",
-      template: /* @__PURE__ */ r(C, { source: C2, is: P2 }),
-      icon: { source: kt, height: 32 }
+      template: /* @__PURE__ */ r(g, { source: C2, is: P2 }),
+      icon: { source: xt, height: 32 }
     }
   ]
-}, yt = `<svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, Mt = `<svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M5.5 10V8.5M5.5 8.5V3.5C5.5 2.94772 5.94772 2.5 6.5 2.5C7.05228 2.5 7.5 2.94772 7.5 3.5V7.5H10.8529C11.7626 7.5 12.5 8.23741 12.5 9.14706V10C12.5 12.4853 10.4853 14.5 8 14.5H7.5C5.29086 14.5 3.5 12.7091 3.5 10.5C3.5 9.39543 4.39543 8.5 5.5 8.5ZM9 5.5H11C12.3807 5.5 13.5 4.38071 13.5 3C13.5 1.61929 12.3807 0.5 11 0.5H4C2.61929 0.5 1.5 1.61929 1.5 3C1.5 4.38071 2.61929 5.5 4 5.5" stroke="currentColor"/>
-</svg>`, Nt = `<svg fill="currentColor" width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+</svg>`, It = `<svg fill="currentColor" width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="M76.26,37.7H73.57V64.63h2.69A3.75,3.75,0,0,0,80,60.89V41.44A3.75,3.75,0,0,0,76.26,37.7Z"/>
   <path d="M20,41.44V60.89a3.75,3.75,0,0,0,3.74,3.74h2.69V37.7H23.74A3.75,3.75,0,0,0,20,41.44Z"/>
   <path d="M66.46,34.33H33.54a3.75,3.75,0,0,0-3.74,3.74V64.26A3.75,3.75,0,0,0,33.54,68H66.46a3.75,3.75,0,0,0,3.74-3.74V38.07A3.75,3.75,0,0,0,66.46,34.33ZM60.89,61.27H37.77a1.21,1.21,0,0,1-1-1.83l7-12.19a.75.75,0,0,1,1.35,0l4.23,7.26a.81.81,0,0,0,1.35.07l3.44-4.94a.8.8,0,0,1,1.35,0l6.28,10A1,1,0,0,1,60.89,61.27Zm-.6-14.36a3.18,3.18,0,1,1,3.18-3.18A3.18,3.18,0,0,1,60.29,46.9Z"/>
-</svg>`, Mt = `<svg width="126" height="80" viewBox="0 0 126 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, Nt = `<svg width="126" height="80" viewBox="0 0 126 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_10250_27631)">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M0.145174 28C-1.03957 28 -2 28.9604 -2 30.1452V49.8548C-2 51.0396 -1.03957 52 0.145173 52H33.8548C35.0396 52 36 51.0396 36 49.8548V30.1452C36 28.9604 35.0396 28 33.8548 28H0.145174ZM19.4204 37.493C19.2399 37.2145 18.9431 37.05 18.6263 37.05C18.3094 37.05 18.0086 37.2145 17.8321 37.493L14.3426 42.8761L13.2797 41.4797C13.0952 41.2392 12.8184 41.1 12.5296 41.1C12.2408 41.1 11.9601 41.2392 11.7796 41.4797L9.21258 44.8547C8.97995 45.1584 8.93583 45.5761 9.09626 45.9262C9.2567 46.2764 9.59362 46.5 9.96263 46.5H23.4394C23.7964 46.5 24.1253 46.2933 24.2897 45.96C24.4542 45.6267 24.4341 45.2259 24.2336 44.918L19.4204 37.493ZM10.9253 37.05C11.4359 37.05 11.9256 36.8366 12.2866 36.4569C12.6477 36.0771 12.8505 35.5621 12.8505 35.025C12.8505 34.4879 12.6477 33.9729 12.2866 33.5931C11.9256 33.2134 11.4359 33 10.9253 33C10.4146 33 9.92495 33.2134 9.56389 33.5931C9.20284 33.9729 9 34.4879 9 35.025C9 35.5621 9.20284 36.0771 9.56389 36.4569C9.92495 36.8366 10.4146 37.05 10.9253 37.05Z" fill="currentColor"></path>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M0.145174 28C-1.03957 28 -2 28.9604 -2 30.1452V49.8548C-2 51.0396 -1.03957 52 0.145173 52H33.8548C35.0396 52 36 51.0396 36 49.8548V30.1452C36 28.9604 35.0396 28 33.8548 28H0.145174ZM19.4204 37.493C19.2399 37.2145 18.9431 37.05 18.6263 37.05C18.3094 37.05 18.0086 37.2145 17.8321 37.493L14.3426 42.8761L13.2797 41.4797C13.0952 41.2392 12.8184 41.1 12.5296 41.1C12.2408 41.1 11.9601 41.2392 11.7796 41.4797L9.21258 44.8547C8.97995 45.1584 8.93583 45.5761 9.09626 45.9262C9.2567 46.2764 9.59362 46.5 9.96263 46.5H23.4394C23.7964 46.5 24.1253 46.2933 24.2897 45.96C24.4542 45.6267 24.4341 45.2259 24.2336 44.918L19.4204 37.493ZM10.9253 37.05C11.4359 37.05 11.9256 36.8366 12.2866 36.4569C12.6477 36.0771 12.8505 35.5621 12.8505 35.025C12.8505 34.4879 12.6477 33.9729 12.2866 33.5931C11.9256 33.2134 11.4359 33 10.9253 33C10.4146 33 9.92495 33.2134 9.56389 33.5931C9.20284 33.9729 9 34.4879 9 35.025C9 35.5621 9.20284 36.0771 9.56389 36.4569C9.92495 36.8366 10.4146 37.05 10.9253 37.05Z" fill="url(#paint0_linear_10250_27631)"></path>
@@ -1158,41 +1189,41 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
         <path d="M0 3C0 1.34315 1.34315 0 3 0H123C124.657 0 126 1.34315 126 3V77C126 78.6569 124.657 80 123 80H3C1.34315 80 0 78.6569 0 77V3Z" fill="white"></path>
         </clipPath>
         </defs>
-        </svg>`, Lt = `<svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        </svg>`, St = `<svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect x="8" y="30" width="32" height="2" fill="currentColor"></rect>
           <rect x="8" y="12" width="32" height="8" rx="4" fill="currentColor"></rect>
           <rect x="56" y="12" width="32" height="8" rx="4" fill="currentColor"></rect>
-          </svg>`, It = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          </svg>`, Et = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.964 6.03575C17.345 4.65475 19.583 4.65475 20.964 6.03575V6.03575C22.345 7.41675 22.345 9.65475 20.964 11.0357L15.085 16.9148C13.704 18.2958 11.466 18.2958 10.085 16.9148V16.9148C8.70401 15.5338 8.70401 13.2958 10.085 11.9148L10.964 11.0357" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8.036 18.9636C6.655 20.3446 4.417 20.3446 3.036 18.9636V18.9636C1.655 17.5826 1.655 15.3446 3.036 13.9636L8.915 8.08458C10.296 6.70358 12.534 6.70358 13.915 8.08458V8.08458C15.296 9.46558 15.296 11.7036 13.915 13.0846L13 13.9996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`, Et = {
+`, Tt = {
   name: "Interactive",
   templates: [
     {
       name: "Button",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
           dangerouslySetInnerHTML: {
             __html: "Button"
           },
-          is: B2
+          is: H2
         }
       ),
-      icon: { source: yt, height: 32 }
+      icon: { source: Mt, height: 32 }
     },
     {
       name: "Link",
-      template: /* @__PURE__ */ r(C, { is: Z2 }),
-      icon: { source: It, height: 32 }
+      template: /* @__PURE__ */ r(g, { is: D2 }),
+      icon: { source: Et, height: 32 }
     },
     {
       name: "Carousel",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
-          is: p2,
+          is: g2,
           slidesPerView: 2,
           spaceBetween: 8,
           md: {
@@ -1201,33 +1232,33 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           lg: {
             slidesPerView: 4
           },
-          children: Z(6).map((e) => /* @__PURE__ */ r(C, { is: z2, canvas: !0 }, e))
+          children: D(6).map((e) => /* @__PURE__ */ r(g, { is: z2, canvas: !0 }, e))
         }
       ),
-      icon: { source: Nt, height: 32 }
+      icon: { source: It, height: 32 }
     },
     {
       name: "Marquee",
-      template: /* @__PURE__ */ r(C, { is: f2, children: Z(10).map((e) => /* @__PURE__ */ r(C, { canvas: !0, is: U2 }, e)) }),
-      icon: { source: Mt, height: 32 }
+      template: /* @__PURE__ */ r(g, { is: f2, children: D(10).map((e) => /* @__PURE__ */ r(g, { canvas: !0, is: F2 }, e)) }),
+      icon: { source: Nt, height: 32 }
     },
     {
       name: "Tabs",
-      template: /* @__PURE__ */ g(
-        C,
+      template: /* @__PURE__ */ m(
+        g,
         {
-          is: $2,
+          is: Z2,
           sx: {
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ r(C, { is: fe, children: Z(3).map((e) => {
+            /* @__PURE__ */ r(g, { is: fe, children: D(3).map((e) => {
               const t = `Tab ${e + 1}`;
               return /* @__PURE__ */ r(
-                C,
+                g,
                 {
                   canvas: !0,
-                  is: ge,
+                  is: we,
                   dangerouslySetInnerHTML: {
                     __html: t
                   }
@@ -1235,28 +1266,28 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
                 e
               );
             }) }),
-            /* @__PURE__ */ r(C, { is: me, children: Z(3).map((e) => /* @__PURE__ */ r(C, { canvas: !0, is: ke }, e)) })
+            /* @__PURE__ */ r(g, { is: me, children: D(3).map((e) => /* @__PURE__ */ r(g, { canvas: !0, is: ke }, e)) })
           ]
         }
       ),
-      icon: { source: Lt, height: 40 }
+      icon: { source: St, height: 40 }
     }
   ]
-}, St = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+}, Rt = `<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>
-`, Tt = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+`, Vt = `<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>
-`, Vt = {
+`, Bt = {
   name: "Text",
   templates: [
     {
       name: "Heading",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
           dangerouslySetInnerHTML: {
             __html: "Your heading text goes here"
@@ -1264,15 +1295,15 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           as: "h2",
           sizeVariant: "4xl",
           md: { sizeVariant: "5xl" },
-          is: j2
+          is: V2
         }
       ),
-      icon: { source: St, height: 32 }
+      icon: { source: Rt, height: 32 }
     },
     {
       name: "Paragraph",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
           dangerouslySetInnerHTML: {
             __html: "Replace this text with your content"
@@ -1280,7 +1311,7 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           is: r2
         }
       ),
-      icon: { source: Tt, height: 32 }
+      icon: { source: Vt, height: 32 }
     }
   ]
 }, jt = `<svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1292,13 +1323,13 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
     {
       name: "Countdown timer",
       template: /* @__PURE__ */ r(
-        C,
+        g,
         {
           is: G2,
           omit: {
             days: !0
           },
-          date: b1().add(1, "week").toDate(),
+          date: L1().add(1, "week").toDate(),
           sx: {
             justifyContent: "center",
             columnGap: 8,
@@ -1310,7 +1341,7 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           },
           unitItemProps: {
             sx: {
-              backgroundColor: N2("neutral.100"),
+              backgroundColor: L2("neutral.100"),
               borderTopLeftRadius: 8,
               borderTopRightRadius: 8,
               borderBottomLeftRadius: 8,
@@ -1332,7 +1363,7 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
           },
           captionProps: {
             sx: {
-              color: N2("neutral.500")
+              color: L2("neutral.500")
             }
           },
           units: [
@@ -1358,129 +1389,212 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
       icon: { source: jt, height: 48 }
     }
   ]
-}, Rt = [
-  Vt,
-  wt,
-  bt,
-  Et,
-  mt,
+}, Ht = [
+  Bt,
   gt,
+  Lt,
+  Tt,
+  vt,
+  kt,
   At
-], Ht = '<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>', Bt = {
+], _t = '<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>', Pt = {
   name: "Basics",
-  icon: { source: Ht },
-  renderer: () => /* @__PURE__ */ r(Pt, { elementGroups: Rt })
-}, _t = ({ groups: e }) => {
-  const t = [Bt, ...e ?? []];
-  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:h-full", children: [
-    /* @__PURE__ */ r("div", { className: "tw:flex tw:items-center tw:p-2 tw:gap-3", children: /* @__PURE__ */ r(J2, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ r(E, { source: lt }) }) }),
-    /* @__PURE__ */ r(re, { className: "tw:flex-1 tw:py-2 tw:border-t tw:border-ic-white-1s", children: t.map((o, n) => /* @__PURE__ */ r($t, { group: o }, n)) })
+  icon: { source: _t },
+  renderer: () => /* @__PURE__ */ r(Zt, { elementGroups: Ht })
+}, Dt = ({ groups: e }) => {
+  const t = [Pt, ...e ?? []];
+  return /* @__PURE__ */ m("div", { css: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ r("div", { css: { display: "flex", padding: 8, alignItems: "center", gap: 12 }, children: /* @__PURE__ */ r(J2, { fullWidth: !0, placeholder: "Search...", prefix: /* @__PURE__ */ r(E, { source: ht }) }) }),
+    /* @__PURE__ */ r(
+      re,
+      {
+        css: {
+          paddingBlock: 8,
+          borderTopWidth: 1,
+          borderTopStyle: "solid",
+          borderColor: u.palette.white["1s"],
+          flex: 1
+        },
+        children: t.map((o, n) => /* @__PURE__ */ r(Ot, { group: o }, n))
+      }
+    )
   ] });
-}, Pt = ({ elementGroups: e }) => /* @__PURE__ */ r("div", { className: "tw:flex tw:flex-col tw:gap-2", children: e.map((t, o) => /* @__PURE__ */ r(Zt, { group: t }, o)) }), Zt = ({ group: e }) => {
-  const [t, o] = te(!0), { actions: n, connectors: i } = $();
-  return /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:text-sm", children: [
-    /* @__PURE__ */ r(K2, { onClick: o, className: "tw:bg-transparent tw:px-0", children: /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:justify-between tw:flex-1 tw:text-sm", children: [
-      e.name,
-      /* @__PURE__ */ r(
-        E,
-        {
-          source: ne,
-          className: B("tw:transition-transform", {
-            "tw:rotate-180": !t
-          })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ r(Je, { open: t, children: /* @__PURE__ */ r("div", { className: "tw:py-2 tw:grid tw:grid-cols-2 tw:gap-4", children: e.templates?.map((s, u) => /* @__PURE__ */ g("div", { className: "tw:space-y-1", children: [
+}, Zt = ({ elementGroups: e }) => /* @__PURE__ */ r("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: e.map((t, o) => /* @__PURE__ */ r($t, { group: t }, o)) }), $t = ({ group: e }) => {
+  const [t, o] = te(!0), { actions: n, connectors: i } = Z();
+  return /* @__PURE__ */ m("div", { css: { display: "flex", flexDirection: "column", ...u.text.sm }, children: [
+    /* @__PURE__ */ r(K2, { onClick: o, css: { paddingInline: 0, backgroundColor: "transparent" }, children: /* @__PURE__ */ m(
+      "div",
+      {
+        css: { display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1, ...u.text.sm },
+        children: [
+          e.name,
+          /* @__PURE__ */ r(
+            E,
+            {
+              source: ne,
+              css: [{ transition: "transform" }, !t && { transform: "rotate(180deg)" }]
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ r(e1, { open: t, children: /* @__PURE__ */ r("div", { css: { display: "grid", paddingBlock: 8, gap: 16, gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }, children: e.templates?.map((s, p) => /* @__PURE__ */ m("div", { css: { display: "flex", flexDirection: "column", gap: 4 }, children: [
       /* @__PURE__ */ r(
         "div",
         {
-          className: B(
-            "tw:bg-ic-ink-6s tw:relative tw:transition-transform tw:rounded-lg tw:hover:scale-105 tw:pointer-events-auto tw:aspect-video tw:overflow-hidden",
-            "tw:cursor-grabbing tw:flex tw:flex-col tw:gap-1 tw:items-center tw:justify-center tw:p-1 tw:opacity-100 tw:text-ic-white-5s",
-            "tw:after:absolute tw:after:inset-0 tw:after:content-empty tw:after:bg-ic-white-1s"
-          ),
+          css: {
+            position: "relative",
+            display: "flex",
+            padding: 4,
+            borderRadius: 8,
+            backgroundColor: u.palette.ink["6s"],
+            color: u.palette.white["5s"],
+            pointerEvents: "auto",
+            overflow: "hidden",
+            flexDirection: "column",
+            gap: 4,
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "grabbing",
+            opacity: 1,
+            aspectRatio: "16 / 9",
+            transition: "transform",
+            "&:hover": { transform: "scale(1.05)" },
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              backgroundColor: u.palette.white["1s"]
+            }
+          },
           ref: (c) => {
             c && i.create(c, s.template, {
-              onCreate(w) {
-                (typeof s.autoFocus == "function" ? s.autoFocus(w) : s.autoFocus) && n.selectNode(w.rootNodeId), s.onCreate?.(w);
+              onCreate(C) {
+                (typeof s.autoFocus == "function" ? s.autoFocus(C) : s.autoFocus) && n.selectNode(C.rootNodeId), s.onCreate?.(C);
               }
             });
           },
-          children: s.icon && /* @__PURE__ */ r(e1, { width: void 0, height: void 0, ...s.icon })
+          children: s.icon && /* @__PURE__ */ r(t1, { width: void 0, height: void 0, ...s.icon })
         }
       ),
-      /* @__PURE__ */ r("p", { className: "tw:text-xs tw:mx-auto tw:text-center", children: s.name })
-    ] }, u)) }) })
+      /* @__PURE__ */ r("p", { css: { marginInline: "auto", textAlign: "center", ...r1.xs }, children: s.name })
+    ] }, p)) }) })
   ] });
-}, $t = ({ group: e }) => {
-  const [t, o] = G(!1), { refs: n, floatingStyles: i, context: s } = o1({
+}, Ot = ({ group: e }) => {
+  const [t, o] = G(!1), { refs: n, floatingStyles: i, context: s } = d1({
     open: t,
     onOpenChange: o,
     placement: "right-start",
     middleware: [
-      i1(),
-      c1({
-        apply({ elements: k }) {
+      h1(),
+      u1({
+        apply({ elements: v }) {
           const h = {
             zIndex: `${Qe}`,
-            height: `${k.reference.getBoundingClientRect().height}px`
+            height: `${v.reference.getBoundingClientRect().height}px`
           };
-          Object.assign(k.floating.style, h);
+          Object.assign(v.floating.style, h);
         }
       })
     ],
-    whileElementsMounted: s1
+    whileElementsMounted: l1
   });
-  W(() => {
+  U(() => {
     n.setPositionReference(document.querySelector("aside"));
   }, [n]);
-  const u = a1(s, { move: !1, handleClose: l1() }), c = d1(s), w = h1(s), x = u1(s), { getReferenceProps: l, getFloatingProps: a } = w1([u, c, w, x]), m = e.renderer;
-  return /* @__PURE__ */ g(n2, { children: [
-    /* @__PURE__ */ g(
+  const p = p1(s, { move: !1, handleClose: C1() }), c = g1(s), C = f1(s), b = w1(s), { getReferenceProps: d, getFloatingProps: a } = m1([p, c, C, b]), k = e.renderer;
+  return /* @__PURE__ */ m(n2, { children: [
+    /* @__PURE__ */ m(
       "button",
       {
-        className: B(
-          "tw:w-full tw:text-left tw:flex tw:items-center tw:text-ic-white-5s tw:gap-2 tw:p-2 tw:rounded-lg",
-          "tw:hover:text-ic-white-6s tw:hover:bg-ic-white-1s tw:hover:font-medium"
-        ),
-        ...l(),
+        css: {
+          display: "flex",
+          padding: 8,
+          alignItems: "center",
+          gap: 8,
+          borderRadius: 8,
+          textAlign: "left",
+          width: "100%",
+          color: u.palette.white["5s"],
+          "&:hover": {
+            color: u.palette.white["6s"],
+            backgroundColor: u.palette.white["1s"],
+            fontWeight: 500
+          }
+        },
+        ...d(),
         ref: n.setReference,
         children: [
-          e.icon && /* @__PURE__ */ r("div", { className: "tw:bg-ic-white-1s tw:p-1.5 tw:rounded-lg", children: /* @__PURE__ */ r(E, { ...e.icon }) }),
-          /* @__PURE__ */ r("span", { className: "tw:flex-1 tw:truncate", children: e.name }),
-          /* @__PURE__ */ r(E, { className: "tw:rotate-180", source: dt })
+          e.icon && /* @__PURE__ */ r("div", { css: { padding: 6, borderRadius: 8, backgroundColor: u.palette.white["1s"] }, children: /* @__PURE__ */ r(E, { ...e.icon }) }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              css: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1
+              },
+              children: e.name
+            }
+          ),
+          /* @__PURE__ */ r(E, { css: { transform: "rotate(180deg)" }, source: ut })
         ]
       }
     ),
-    t && /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ r("div", { style: i, ...a(), ref: n.setFloating, children: /* @__PURE__ */ g("div", { className: "tw:h-full tw:flex tw:flex-col tw:border-l tw:border-t tw:border-ic-white-2s tw:bg-ic-ink-6s tw:text-ic-white-6s tw:text-sm", children: [
-      /* @__PURE__ */ r("div", { className: "tw:h-12 tw:px-2 tw:flex tw:items-center", children: /* @__PURE__ */ r("h6", { className: "tw:font-medium", children: e.name }) }),
-      /* @__PURE__ */ r(re, { className: "tw:flex-1 tw:px-3", children: m ? /* @__PURE__ */ r(m, {}) : /* @__PURE__ */ r("div", { className: "tw:flex tw:flex-col tw:gap-4", children: e.templates?.map((k, h) => /* @__PURE__ */ m1(Dt, { ...k, key: h })) }) })
-    ] }) }) })
+    t && /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ r("div", { style: i, ...a(), ref: n.setFloating, children: /* @__PURE__ */ m(
+      "div",
+      {
+        css: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          backgroundColor: u.palette.ink["6s"],
+          color: u.palette.white["6s"],
+          borderLeftWidth: 1,
+          borderLeftStyle: "solid",
+          borderTopWidth: 1,
+          borderTopStyle: "solid",
+          borderColor: u.palette.white["2s"],
+          ...u.text.sm
+        },
+        children: [
+          /* @__PURE__ */ r("div", { css: { display: "flex", paddingInline: 8, alignItems: "center", height: 48 }, children: /* @__PURE__ */ r("h6", { css: { fontWeight: 500 }, children: e.name }) }),
+          /* @__PURE__ */ r(re, { css: { paddingInline: 12, flex: 1 }, children: k ? /* @__PURE__ */ r(k, {}) : /* @__PURE__ */ r("div", { css: { display: "flex", flexDirection: "column", gap: 16 }, children: e.templates?.map((v, h) => /* @__PURE__ */ a1(Gt, { ...v, key: h })) }) })
+        ]
+      }
+    ) }) })
   ] });
-}, Dt = ({ template: e, autoFocus: t = !0, onCreate: o }) => {
-  const [, n] = G(!1), i = s2(), { actions: s, connectors: u, resolver: c, query: w } = $((l) => ({
-    resolver: l.options.resolver
-  })), x = G(() => {
-    const l = typeof e == "function" ? e() : e;
+}, Gt = ({ template: e, autoFocus: t = !0, onCreate: o }) => {
+  const [, n] = G(!1), i = s2(), { actions: s, connectors: p, resolver: c, query: C } = Z((d) => ({
+    resolver: d.options.resolver
+  })), b = G(() => {
+    const d = typeof e == "function" ? e() : e;
     let a;
-    "rootNodeId" in l ? a = l : a = w.parseReactElement(l).toNodeTree();
-    const { rootNodeId: m, nodes: k } = a, h = {};
-    return Object.entries(k).forEach(([d, M]) => {
-      const v = be(M.data, c), y = d === m ? D : d;
-      h[y] = {
-        ...v,
-        parent: v.parent === m ? D : v.parent,
-        nodes: v.nodes?.map((T) => T === m ? D : T)
+    "rootNodeId" in d ? a = d : a = C.parseReactElement(d).toNodeTree();
+    const { rootNodeId: k, nodes: v } = a, h = {};
+    return Object.entries(v).forEach(([l, I]) => {
+      const x = be(I.data, c), L = l === k ? $ : l;
+      h[L] = {
+        ...x,
+        parent: x.parent === k ? $ : x.parent,
+        nodes: x.nodes?.map((R) => R === k ? $ : R)
       };
     }), h;
   })[0];
   return /* @__PURE__ */ r(
     "div",
     {
-      className: "tw:cursor-grab tw:border tw:border-ic-white-1s tw:rounded-lg tw:overflow-hidden",
-      ref: (l) => {
-        l && u.create(l, e, {
+      css: {
+        borderRadius: 8,
+        overflow: "hidden",
+        cursor: "grab",
+        borderStyle: "solid",
+        borderWidth: 1,
+        borderColor: u.palette.white["1s"]
+      },
+      ref: (d) => {
+        d && p.create(d, e, {
           onCreate(a) {
             (typeof t == "function" ? t(a) : t) && s.selectNode(a.rootNodeId), o?.(a);
           }
@@ -1488,21 +1602,34 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
       },
       onDragStart: () => n(!0),
       onDragEnd: () => n(!1),
-      children: /* @__PURE__ */ r("div", { className: "tw:relative tw:aspect-video tw:rounded-lg tw:overflow-hidden tw:w-60 tw:pointer-events-none", children: /* @__PURE__ */ r("div", { className: "tw:absolute tw:inset-0", children: /* @__PURE__ */ r(
-        he,
+      children: /* @__PURE__ */ r(
+        "div",
         {
-          containerProps: {
-            style: {
-              backgroundColor: i.theme.palette.background.default
-            }
+          css: {
+            position: "relative",
+            borderRadius: 8,
+            overflow: "hidden",
+            pointerEvents: "none",
+            width: 240,
+            aspectRatio: "16 / 9"
           },
-          viewport: { width: Xe.md.minWidth },
-          children: /* @__PURE__ */ r(Q2, { resolver: c, children: /* @__PURE__ */ r(X2, { data: x }) })
+          children: /* @__PURE__ */ r("div", { css: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ r(
+            he,
+            {
+              containerProps: {
+                style: {
+                  backgroundColor: i.theme.palette.background.default
+                }
+              },
+              viewport: { width: Xe.md.minWidth },
+              children: /* @__PURE__ */ r(Q2, { resolver: c, children: /* @__PURE__ */ r(X2, { data: b }) })
+            }
+          ) })
         }
-      ) }) })
+      )
     }
   );
-}, Ot = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, Wt = `<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"/>
@@ -1513,7 +1640,7 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
 <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>
-`, Gt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, zt = `<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"/>
@@ -1521,204 +1648,307 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
 <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>
 `, Ft = (e) => {
-  const { query: t, actions: o } = $(), {
+  const { query: t, actions: o } = Z(), {
     id: n,
     expanded: i,
     actions: s,
-    displayName: u,
+    displayName: p,
     children: c,
-    depth: w
-  } = N1((k) => ({
-    expanded: k.expanded,
-    displayName: W2(t.node(k.id).get())
-  })), { selected: x, selectable: l } = $((k, h) => {
-    const d = h.node(n).get();
+    depth: C
+  } = I1((v) => ({
+    expanded: v.expanded,
+    displayName: U2(t.node(v.id).get())
+  })), { selected: b, selectable: d } = Z((v, h) => {
+    const l = h.node(n).get();
     return {
       selected: h.getEvent("selected").contains(n),
-      nodeDOM: d.dom,
-      selectable: Me(d)
+      nodeDOM: l.dom,
+      selectable: Me(l)
     };
   });
-  W(() => {
-    n === D && s.setExpandedState(!0);
-  }, [s, n]), W(() => {
+  U(() => {
+    n === $ && s.setExpandedState(!0);
+  }, [s, n]), U(() => {
     if (c.length === 0) return;
     c.some((h) => {
-      const d = t.getEvent("selected").all();
-      return d.includes(h) ? !0 : t.node(h).descendants(!0).some((v) => d.includes(v));
+      const l = t.getEvent("selected").all();
+      return l.includes(h) ? !0 : t.node(h).descendants(!0).some((x) => l.includes(x));
     }) && s.setExpandedState(!0);
   }, [c, s, t]);
   const a = () => {
     o.selectNode(n);
-  }, m = (k) => {
-    k.stopPropagation(), s.toggleLayer();
+  }, k = (v) => {
+    v.stopPropagation(), s.toggleLayer();
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: "tw:py-1",
+      css: { paddingBlock: 4 },
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ m(
           "div",
           {
             onClick: a,
             style: {
-              paddingLeft: Math.max(0, w - 1) * 16
+              paddingLeft: Math.max(0, C - 1) * 16
             },
-            className: B(
-              "tw:flex tw:items-center tw:gap-0.5 tw:cursor-pointer tw:rounded-1 tw:pr-2 tw:py-1 tw:border tw:border-ic-white-1s tw:hover:bg-ic-white-1s",
+            css: [
               {
-                hidden: n === D,
-                "tw:bg-ic-black-7s": x,
-                "tw:pointer-events-none": !l
-              }
-            ),
+                display: "flex",
+                paddingRight: 8,
+                paddingBlock: 4,
+                alignItems: "center",
+                gap: 2,
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: u.palette.white["1s"],
+                cursor: "pointer",
+                borderRadius: 4,
+                "&:hover": { backgroundColor: u.palette.white["1s"] }
+              },
+              !d && { pointerEvents: "none" },
+              b && { backgroundColor: u.palette.black["7s"] },
+              n === $ && { display: "none" }
+            ],
             children: [
-              c.length ? /* @__PURE__ */ r(A, { className: "tw:pointer-events-auto", onClick: m, children: /* @__PURE__ */ r(
+              c.length ? /* @__PURE__ */ r(j, { css: { pointerEvents: "auto" }, onClick: k, children: /* @__PURE__ */ r(
                 E,
                 {
-                  className: B("tw:transition-transform tw:-rotate-90", {
-                    "tw:rotate-0": i
-                  }),
+                  css: [
+                    { transition: "transform", transform: "rotate(-90deg)" },
+                    i && { transform: "rotate(0deg)" }
+                  ],
                   size: 16,
                   source: ne
                 }
-              ) }) : /* @__PURE__ */ r("div", { className: "tw:p-1", children: /* @__PURE__ */ r(E, { size: 16, source: Gt }) }),
+              ) }) : /* @__PURE__ */ r("div", { css: { padding: 4 }, children: /* @__PURE__ */ r(E, { size: 16, source: zt }) }),
               /* @__PURE__ */ r(
                 "span",
                 {
-                  className: B("tw:flex-1 tw:truncate", {
-                    "tw:text-ic-white-3s": !l
-                  }),
-                  children: u
+                  css: [
+                    {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      flex: 1
+                    },
+                    !d && { color: u.palette.white["3s"] }
+                  ],
+                  children: p
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: "tw:space-y-1", children: e.children })
+        /* @__PURE__ */ r(
+          "div",
+          {
+            css: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: e.children
+          }
+        )
       ]
     }
   );
-}, zt = ({ onClose: e }) => {
-  const t = I1(), o = (n) => {
+}, Ut = ({ onClose: e }) => {
+  const t = E1(), o = (n) => {
     t.start(n);
   };
-  return /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ g(
-    t1.div,
+  return /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ m(
+    n1.div,
     {
       drag: !0,
       dragControls: t,
       dragListener: !1,
       style: { zIndex: 1e5, width: 320, height: 400, top: 80, right: 40 },
-      className: "tw:fixed tw:rounded-md tw:bg-ic-ink-6s tw:text-white tw:flex tw:flex-col tw:border tw:border-ic-white-2s",
+      css: {
+        position: "fixed",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 6,
+        backgroundColor: u.palette.ink["6s"],
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: u.palette.white["2s"],
+        color: "white"
+      },
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ m(
           "div",
           {
             onPointerDown: o,
-            className: "tw:py-2 tw:cursor-grab tw:flex tw:items-center tw:justify-between tw:px-4",
+            css: {
+              paddingBlock: 8,
+              display: "flex",
+              paddingInline: 16,
+              alignItems: "center",
+              justifyContent: "space-between",
+              cursor: "grab"
+            },
             children: [
-              /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
-                /* @__PURE__ */ r(E, { source: Ot }),
-                /* @__PURE__ */ r("p", { className: "tw:text-sm tw:font-medium", children: "Layers" })
+              /* @__PURE__ */ m("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ r(E, { source: Wt }),
+                /* @__PURE__ */ r(
+                  "p",
+                  {
+                    css: {
+                      ...u.text.sm,
+                      fontWeight: 500
+                    },
+                    children: "Layers"
+                  }
+                )
               ] }),
-              /* @__PURE__ */ r(A, { onClick: e, children: /* @__PURE__ */ r(E, { source: r1 }) })
+              /* @__PURE__ */ r(j, { onClick: e, children: /* @__PURE__ */ r(E, { source: o1 }) })
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s tw:p-2", children: /* @__PURE__ */ r(y1, { renderLayer: Ft }) })
+        /* @__PURE__ */ r(
+          "div",
+          {
+            css: {
+              padding: 8,
+              overflow: "auto",
+              borderTopWidth: 1,
+              borderTopStyle: "solid",
+              borderColor: u.palette.white["1s"],
+              flex: 1
+            },
+            children: /* @__PURE__ */ r(M1, { renderLayer: Ft })
+          }
+        )
       ]
     }
   ) });
-}, Ut = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+}, qt = `<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>
-`, Wt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+`, Yt = `<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>
-`, qt = ({ insert: e }) => {
+`, Qt = ({ insert: e }) => {
   const [t, o] = te(!1), {
     queryParams: {
       action: n = "insert"
       /* Insert */
     },
     setQueryParams: i
-  } = i2(), { actions: s, isDeletable: u, focusedNode: c } = $((a, m) => {
-    const k = m.getEvent("selected").first(), h = k ? m.node(k) : null;
+  } = i2(), { actions: s, isDeletable: p, focusedNode: c } = Z((a, k) => {
+    const v = k.getEvent("selected").first(), h = v ? k.node(v) : null;
     return {
       enabled: a.options.enabled,
       isDeletable: !!(h?.isDeletable() && (h.get().data.custom?.deletable ?? !0)),
       focusedNode: h?.get()
     };
-  }), w = () => {
+  }), C = () => {
     s.selectNode();
-  }, x = (a) => {
+  }, b = (a) => {
     s.delete(a.currentTarget.value);
-  }, l = (a) => {
-    const m = a.currentTarget.value;
-    m === "layers" ? o() : (w(), i({
-      action: m
+  }, d = (a) => {
+    const k = a.currentTarget.value;
+    k === "layers" ? o() : (C(), i({
+      action: k
     }));
   };
-  return /* @__PURE__ */ g(n2, { children: [
-    /* @__PURE__ */ g("aside", { className: "tw:flex tw:items-stretch tw:bg-ic-ink-6s tw:relative tw:border-t tw:border-ic-white-2s tw:text-ic-white-6s tw:text-sm", children: [
-      /* @__PURE__ */ g("div", { className: "tw:px-1 tw:flex tw:flex-col tw:gap-1", children: [
-        !!e && /* @__PURE__ */ g(V2, { children: [
-          /* @__PURE__ */ r(
-            A,
+  return /* @__PURE__ */ m(n2, { children: [
+    /* @__PURE__ */ m(
+      "aside",
+      {
+        css: {
+          display: "flex",
+          position: "relative",
+          alignItems: "stretch",
+          backgroundColor: u.palette.ink["6s"],
+          color: u.palette.white["6s"],
+          borderTopWidth: 1,
+          borderTopStyle: "solid",
+          borderColor: u.palette.white["2s"],
+          ...u.text.sm
+        },
+        children: [
+          /* @__PURE__ */ m("div", { css: { display: "flex", paddingInline: 4, flexDirection: "column", gap: 4 }, children: [
+            !!e && /* @__PURE__ */ m(R2, { children: [
+              /* @__PURE__ */ r(
+                j,
+                {
+                  tooltip: {
+                    content: "Insert",
+                    placement: "right"
+                  },
+                  onClick: d,
+                  value: "insert",
+                  css: { position: "relative" },
+                  size: "32",
+                  children: /* @__PURE__ */ r(E, { source: s1 })
+                }
+              ),
+              /* @__PURE__ */ r("hr", { css: { borderColor: u.palette.white["2s"] } })
+            ] }),
+            /* @__PURE__ */ r(
+              j,
+              {
+                tooltip: {
+                  content: "Layers",
+                  placement: "right"
+                },
+                onClick: d,
+                value: "layers",
+                css: { position: "relative" },
+                size: "32",
+                children: /* @__PURE__ */ r(E, { source: qt })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ m(
+            "div",
             {
-              tooltip: {
-                content: "Insert",
-                placement: "right"
+              css: {
+                position: "relative",
+                display: "flex",
+                flexDirection: "column",
+                overflow: "auto",
+                width: 288,
+                borderLeftWidth: 1,
+                borderLeftStyle: "solid",
+                borderColor: u.palette.white["1s"]
               },
-              onClick: l,
-              value: "insert",
-              className: "tw:relative",
-              size: "32",
-              children: /* @__PURE__ */ r(E, { source: n1 })
+              children: [
+                !c?.related.inspector && /* @__PURE__ */ r("div", { css: { overflow: "auto", flex: 1 }, children: n === "insert" && !!e && /* @__PURE__ */ r(Dt, { groups: e.groups }) }),
+                !!c?.related?.inspector && /* @__PURE__ */ m("div", { css: { display: "flex", flexDirection: "column", overflow: "hidden", flex: 1 }, children: [
+                  /* @__PURE__ */ m("div", { css: { display: "flex", paddingInline: 8, paddingBlock: 8, alignItems: "center", gap: 8 }, children: [
+                    /* @__PURE__ */ r(j, { onClick: C, children: /* @__PURE__ */ r(E, { source: Yt }) }),
+                    /* @__PURE__ */ r("div", { css: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ r(J2, { fullWidth: !0, value: U2(c), size: "32" }) }),
+                    p && /* @__PURE__ */ r(j, { value: c.id, onClick: b, children: /* @__PURE__ */ r(E, { css: { color: u.palette.red["4s"] }, source: b1 }) })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      css: {
+                        overflow: "auto",
+                        flex: 1,
+                        borderTopWidth: 1,
+                        borderTopStyle: "solid",
+                        borderColor: u.palette.white["1s"]
+                      },
+                      children: /* @__PURE__ */ r(Ie, { fallback: null, children: Y2(c.related.inspector) })
+                    }
+                  )
+                ] })
+              ]
             }
-          ),
-          /* @__PURE__ */ r("hr", { className: "tw:border-ic-white-2s" })
-        ] }),
-        /* @__PURE__ */ r(
-          A,
-          {
-            tooltip: {
-              content: "Layers",
-              placement: "right"
-            },
-            onClick: l,
-            value: "layers",
-            className: "tw:relative",
-            size: "32",
-            children: /* @__PURE__ */ r(E, { source: Ut })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ g(
-        "div",
-        {
-          className: B("tw:relative tw:flex tw:flex-col tw:border-l tw:border-ic-white-1s tw:w-72 tw:overflow-auto"),
-          children: [
-            !c?.related.inspector && /* @__PURE__ */ r("div", { className: "tw:flex-1 tw:overflow-auto scrollbar", children: n === "insert" && !!e && /* @__PURE__ */ r(_t, { groups: e.groups }) }),
-            !!c?.related?.inspector && /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:flex-1 tw:overflow-hidden", children: [
-              /* @__PURE__ */ g("div", { className: "tw:flex tw:items-center tw:gap-2 tw:px-2 tw:py-2", children: [
-                /* @__PURE__ */ r(A, { onClick: w, children: /* @__PURE__ */ r(E, { source: Wt }) }),
-                /* @__PURE__ */ r("div", { className: "tw:flex-1 tw:overflow-hidden", children: /* @__PURE__ */ r(J2, { fullWidth: !0, value: W2(c), size: "32" }) }),
-                u && /* @__PURE__ */ r(A, { value: c.id, onClick: x, children: /* @__PURE__ */ r(E, { className: "tw:text-ic-red-4s", source: v1 }) })
-              ] }),
-              /* @__PURE__ */ r("div", { className: "tw:flex-1 tw:overflow-auto tw:border-t tw:border-ic-white-1s scrollbar-hidden", children: /* @__PURE__ */ r(Le, { fallback: null, children: Y2(c.related.inspector) }) })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    t && /* @__PURE__ */ r(zt, { onClose: o })
+          )
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ r(Ut, { onClose: o })
   ] });
 }, T3 = ({ theme: e, insert: t, resolver: o, handlers: n }) => {
   const {
@@ -1727,25 +1957,31 @@ const S2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="h
   return s2({
     theme: e,
     handlers: n
-  }), /* @__PURE__ */ r(Q2, { enabled: !0, onRender: ot, resolver: o, children: /* @__PURE__ */ g("div", { className: "tw:flex tw:flex-col tw:w-screen tw:h-screen tw:bg-ic-ink-6s tw:text-ic-white-6s", children: [
-    /* @__PURE__ */ r(at, {}),
-    /* @__PURE__ */ g("div", { className: "tw:flex-1 tw:overflow-hidden tw:flex", children: [
-      /* @__PURE__ */ r(qt, { insert: t }),
-      /* @__PURE__ */ r(
-        he,
-        {
-          viewport: {
-            width: (s) => i === "lg" ? Math.max(s, M2[i]) : M2[i]
-          },
-          children: /* @__PURE__ */ r(X2, { children: /* @__PURE__ */ r(ve, {}) })
-        }
-      )
-    ] })
-  ] }) });
+  }), /* @__PURE__ */ r(Q2, { enabled: !0, onRender: it, resolver: o, children: /* @__PURE__ */ m(
+    "div",
+    {
+      css: { display: "flex", flexDirection: "column", width: "100vw", height: "100vh", backgroundColor: u.palette.ink["6s"], color: u.palette.white["6s"] },
+      children: [
+        /* @__PURE__ */ r(lt, {}),
+        /* @__PURE__ */ m("div", { css: { display: "flex", overflow: "hidden", flex: 1 }, children: [
+          /* @__PURE__ */ r(Qt, { insert: t }),
+          /* @__PURE__ */ r(
+            he,
+            {
+              viewport: {
+                width: (s) => i === "lg" ? Math.max(s, M2[i]) : M2[i]
+              },
+              children: /* @__PURE__ */ r(X2, { children: /* @__PURE__ */ r(ve, {}) })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 };
 export {
   T3 as Editor,
   s2 as useEditor,
   i2 as useEditorQueryParams,
-  A3 as useEditorResponsive
+  B3 as useEditorResponsive
 };