@promakeai/inspector 1.1.0 → 1.1.2

package/dist/inspector.js

@@ -1,19 +1,19 @@
-import { jsxs as b, Fragment as mt, jsx as s } from "react/jsx-runtime";
+import { jsxs as b, Fragment as mt, jsx as c } from "react/jsx-runtime";
 import * as U from "react";
-import F, { useCallback as Te, useState as T, useEffect as W, forwardRef as bt, createElement as Ge, useRef as G, useLayoutEffect as It, useMemo as Me } from "react";
+import A, { useCallback as Ee, useState as E, useEffect as W, forwardRef as bt, createElement as qe, useRef as q, useLayoutEffect as It, useMemo as Me } from "react";
 function Pe() {
-  const e = Te((o, n) => {
+  const e = Ee((o, n) => {
     if (window.parent !== window) {
-      const a = JSON.stringify({
+      const i = JSON.stringify({
         type: o,
         data: n
       });
-      window.parent.postMessage(a, "*");
+      window.parent.postMessage(i, "*");
     }
-  }, []), t = Te((o) => {
-    const n = (a) => {
+  }, []), t = Ee((o) => {
+    const n = (i) => {
       try {
-        const r = typeof a.data == "string" ? JSON.parse(a.data) : a.data;
+        const r = typeof i.data == "string" ? JSON.parse(i.data) : i.data;
         r && r.type && o(r);
       } catch {
       }
@@ -83,14 +83,14 @@ class Bt {
       t.apply(console, o);
       const n = o.map(
         (r) => typeof r == "object" ? JSON.stringify(r) : String(r)
-      ).join(" "), a = o.find((r) => r instanceof Error);
+      ).join(" "), i = o.find((r) => r instanceof Error);
       this.callback({
         type: "console",
         message: n,
-        stack: a?.stack,
-        fileName: a?.fileName,
-        lineNumber: a?.lineNumber,
-        columnNumber: a?.columnNumber
+        stack: i?.stack,
+        fileName: i?.fileName,
+        lineNumber: i?.lineNumber,
+        columnNumber: i?.columnNumber
       });
     };
   }
@@ -102,8 +102,8 @@ class Bt {
       t.forEach((o) => {
         o.addedNodes.forEach((n) => {
           if (n.nodeType === 1) {
-            const a = n;
-            a.tagName === "VITE-ERROR-OVERLAY" && this.parseViteError(a);
+            const i = n;
+            i.tagName === "VITE-ERROR-OVERLAY" && this.parseViteError(i);
           }
         });
       });
@@ -119,15 +119,15 @@ class Bt {
     try {
       const o = t.shadowRoot;
       if (!o) return;
-      const a = o.querySelector(".message-body")?.textContent?.trim() || "Vite error", p = (o.querySelector(".file")?.textContent?.trim() || "").match(/(.+):(\d+):(\d+)/), l = o.querySelector(".frame")?.textContent?.trim(), u = o.querySelector(".plugin")?.textContent?.trim();
+      const i = o.querySelector(".message-body")?.textContent?.trim() || "Vite error", p = (o.querySelector(".file")?.textContent?.trim() || "").match(/(.+):(\d+):(\d+)/), l = o.querySelector(".frame")?.textContent?.trim(), d = o.querySelector(".plugin")?.textContent?.trim();
       this.callback({
         type: "vite",
-        message: a,
+        message: i,
         fileName: p?.[1],
         lineNumber: p?.[2] ? parseInt(p[2]) : void 0,
         columnNumber: p?.[3] ? parseInt(p[3]) : void 0,
         frame: l,
-        plugin: u
+        plugin: d
       });
     } catch (o) {
       console.error("Failed to parse Vite error:", o);
@@ -176,27 +176,27 @@ function Ot({
   selectedElement: t,
   showChildBorders: o = !0
 }) {
-  const [n, a] = T(null), [r, c] = T([]), [p, d] = T(!1), l = t || e;
+  const [n, i] = E(null), [r, s] = E([]), [p, u] = E(!1), l = t || e;
   return W(() => {
     if (!l) {
-      a(null);
+      i(null);
       return;
     }
-    d(!!t);
-    let g = null, u = 0;
-    const i = 16, f = () => {
-      const L = Date.now(), S = L - u;
-      if (S >= i) {
+    u(!!t);
+    let g = null, d = 0;
+    const a = 16, f = () => {
+      const L = Date.now(), S = L - d;
+      if (S >= a) {
         const C = l.getBoundingClientRect();
-        a(C);
-        const k = Array.from(l.children).filter((A) => !A.closest("[data-inspector-ignore]")).map((A) => A.getBoundingClientRect());
-        c(k), u = L;
+        i(C);
+        const k = Array.from(l.children).filter((F) => !F.closest("[data-inspector-ignore]")).map((F) => F.getBoundingClientRect());
+        s(k), d = L;
       } else g || (g = window.setTimeout(() => {
         const C = l.getBoundingClientRect();
-        a(C);
-        const k = Array.from(l.children).filter((A) => !A.closest("[data-inspector-ignore]")).map((A) => A.getBoundingClientRect());
-        c(k), u = Date.now(), g = null;
-      }, i - S));
+        i(C);
+        const k = Array.from(l.children).filter((F) => !F.closest("[data-inspector-ignore]")).map((F) => F.getBoundingClientRect());
+        s(k), d = Date.now(), g = null;
+      }, a - S));
     };
     f();
     const y = () => {
@@ -219,7 +219,7 @@ function Ot({
       window.removeEventListener("scroll", y, !0), window.removeEventListener("resize", y), _ && _.disconnect(), x && x.disconnect(), g && clearTimeout(g);
     };
   }, [l, t]), n ? /* @__PURE__ */ b(mt, { children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       "div",
       {
         className: `inspector-overlay ${p ? "paused" : ""} active`,
@@ -231,7 +231,7 @@ function Ot({
         }
       }
     ),
-    o && r.map((g, u) => /* @__PURE__ */ s(
+    o && r.map((g, d) => /* @__PURE__ */ c(
       "div",
       {
         className: "inspector-overlay-child active",
@@ -242,7 +242,7 @@ function Ot({
           height: `${g.height}px`
         }
       },
-      u
+      d
     ))
   ] }) : null;
 }
@@ -250,38 +250,38 @@ function vt(e) {
   var t, o, n = "";
   if (typeof e == "string" || typeof e == "number") n += e;
   else if (typeof e == "object") if (Array.isArray(e)) {
-    var a = e.length;
-    for (t = 0; t < a; t++) e[t] && (o = vt(e[t])) && (n && (n += " "), n += o);
+    var i = e.length;
+    for (t = 0; t < i; t++) e[t] && (o = vt(e[t])) && (n && (n += " "), n += o);
   } else for (o in e) e[o] && (n && (n += " "), n += o);
   return n;
 }
 function re() {
-  for (var e, t, o = 0, n = "", a = arguments.length; o < a; o++) (e = arguments[o]) && (t = vt(e)) && (n && (n += " "), n += t);
+  for (var e, t, o = 0, n = "", i = arguments.length; o < i; o++) (e = arguments[o]) && (t = vt(e)) && (n && (n += " "), n += t);
   return n;
 }
 const tt = (e) => {
   let t;
   const o = /* @__PURE__ */ new Set(), n = (l, g) => {
-    const u = typeof l == "function" ? l(t) : l;
-    if (!Object.is(u, t)) {
-      const i = t;
-      t = g ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), o.forEach((f) => f(t, i));
+    const d = typeof l == "function" ? l(t) : l;
+    if (!Object.is(d, t)) {
+      const a = t;
+      t = g ?? (typeof d != "object" || d === null) ? d : Object.assign({}, t, d), o.forEach((f) => f(t, a));
     }
-  }, a = () => t, p = { setState: n, getState: a, getInitialState: () => d, subscribe: (l) => (o.add(l), () => o.delete(l)) }, d = t = e(n, a, p);
+  }, i = () => t, p = { setState: n, getState: i, getInitialState: () => u, subscribe: (l) => (o.add(l), () => o.delete(l)) }, u = t = e(n, i, p);
   return p;
 }, Dt = ((e) => e ? tt(e) : tt), Mt = (e) => e;
 function Pt(e, t = Mt) {
-  const o = F.useSyncExternalStore(
+  const o = A.useSyncExternalStore(
     e.subscribe,
-    F.useCallback(() => t(e.getState()), [e, t]),
-    F.useCallback(() => t(e.getInitialState()), [e, t])
+    A.useCallback(() => t(e.getState()), [e, t]),
+    A.useCallback(() => t(e.getInitialState()), [e, t])
   );
-  return F.useDebugValue(o), o;
+  return A.useDebugValue(o), o;
 }
 const ot = (e) => {
   const t = Dt(e), o = (n) => Pt(t, n);
   return Object.assign(o, t), o;
-}, zt = ((e) => e ? ot(e) : ot), Ft = {
+}, zt = ((e) => e ? ot(e) : ot), At = {
   backgroundColor: "#ffffff",
   textColor: "#0f172a",
   secondaryTextColor: "#64748b",
@@ -322,7 +322,7 @@ const ot = (e) => {
   dialogBackgroundColor: "#ffffff",
   dialogTextColor: "#0f172a",
   dialogSecondaryTextColor: "#64748b"
-}, At = {
+}, Ft = {
   // Text Editor
   editText: "Edit Content",
   textContentLabel: "Text Content",
@@ -469,9 +469,9 @@ const ot = (e) => {
   // Badge
   badgeText: "Built by Promake",
   badgeUrl: "https://promake.ai"
-}, q = zt((e) => ({
-  theme: Ft,
-  labels: At,
+}, K = zt((e) => ({
+  theme: At,
+  labels: Ft,
   setTheme: (t) => e((o) => ({
     theme: { ...o.theme, ...t }
   })),
@@ -481,34 +481,34 @@ const ot = (e) => {
 })), Ht = "_input_18103_1", jt = {
   input: Ht
 }, Be = U.forwardRef(
-  ({ className: e, type: t, style: o, ...n }, a) => {
-    const { theme: r } = q(), c = {
+  ({ className: e, type: t, style: o, ...n }, i) => {
+    const { theme: r } = K(), s = {
       borderColor: r.borderColor,
       color: r.textColor,
       ...o
     };
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ c(
       "input",
       {
         type: t,
         "data-slot": "input",
         className: re(jt.input, e),
-        style: c,
-        ref: a,
+        style: s,
+        ref: i,
         ...n
       }
     );
   }
 );
 Be.displayName = "Input";
-const $t = "_button_esc83_3", Wt = "_destructive_esc83_85 _button_esc83_3", Vt = "_outline_esc83_105 _button_esc83_3", Ut = "_secondary_esc83_127 _button_esc83_3", Gt = "_ghost_esc83_143 _button_esc83_3", qt = "_link_esc83_161 _button_esc83_3", Xt = "_sizeDefault_esc83_185", Kt = "_sizeSm_esc83_205", Yt = "_sizeLg_esc83_227", Jt = "_sizeIcon_esc83_247", Zt = "_sizeIconSm_esc83_259", Qt = "_sizeIconLg_esc83_271", nt = {
+const $t = "_button_esc83_3", Wt = "_destructive_esc83_85 _button_esc83_3", Vt = "_outline_esc83_105 _button_esc83_3", Ut = "_secondary_esc83_127 _button_esc83_3", qt = "_ghost_esc83_143 _button_esc83_3", Gt = "_link_esc83_161 _button_esc83_3", Xt = "_sizeDefault_esc83_185", Kt = "_sizeSm_esc83_205", Yt = "_sizeLg_esc83_227", Jt = "_sizeIcon_esc83_247", Zt = "_sizeIconSm_esc83_259", Qt = "_sizeIconLg_esc83_271", nt = {
   button: $t,
   default: "_default_esc83_65 _button_esc83_3",
   destructive: Wt,
   outline: Vt,
   secondary: Ut,
-  ghost: Gt,
-  link: qt,
+  ghost: qt,
+  link: Gt,
   sizeDefault: Xt,
   sizeSm: Kt,
   sizeLg: Yt,
@@ -521,11 +521,11 @@ function ye({
   variant: t = "default",
   size: o = "default",
   asChild: n = !1,
-  style: a,
+  style: i,
   children: r,
-  ...c
+  ...s
 }) {
-  const { theme: p } = q(), d = o === "icon" ? "sizeIcon" : o === "icon-sm" ? "sizeIconSm" : o === "icon-lg" ? "sizeIconLg" : `size${o.charAt(0).toUpperCase()}${o.slice(1)}`, l = {
+  const { theme: p } = K(), u = o === "icon" ? "sizeIcon" : o === "icon-sm" ? "sizeIconSm" : o === "icon-lg" ? "sizeIconLg" : `size${o.charAt(0).toUpperCase()}${o.slice(1)}`, l = {
     default: {
       background: p.buttonColor,
       color: p.buttonTextColor
@@ -553,25 +553,25 @@ function ye({
     }
   }, g = re(
     nt[t],
-    nt[d],
+    nt[u],
     e
-  ), u = { ...l[t], ...a };
+  ), d = { ...l[t], ...i };
   if (n && U.isValidElement(r)) {
-    const i = r.props;
+    const a = r.props;
     return U.cloneElement(r, {
-      className: re(i.className, g),
-      style: { ...u, ...i.style },
+      className: re(a.className, g),
+      style: { ...d, ...a.style },
       "data-slot": "button",
-      ...c
+      ...s
     });
   }
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "button",
     {
       "data-slot": "button",
       className: g,
-      style: u,
-      ...c,
+      style: d,
+      ...s,
       children: r
     }
   );
@@ -604,32 +604,32 @@ const ro = bt(
     size: t = 24,
     strokeWidth: o = 2,
     absoluteStrokeWidth: n,
-    className: a = "",
+    className: i = "",
     children: r,
-    iconNode: c,
+    iconNode: s,
     ...p
-  }, d) => Ge(
+  }, u) => qe(
     "svg",
     {
-      ref: d,
+      ref: u,
       ...no,
       width: t,
       height: t,
       stroke: e,
       strokeWidth: n ? Number(o) * 24 / Number(t) : o,
-      className: yt("lucide", a),
+      className: yt("lucide", i),
       ...!r && !oo(p) && { "aria-hidden": "true" },
       ...p
     },
     [
-      ...c.map(([l, g]) => Ge(l, g)),
+      ...s.map(([l, g]) => qe(l, g)),
       ...Array.isArray(r) ? r : [r]
     ]
   )
 );
 const le = (e, t) => {
   const o = bt(
-    ({ className: n, ...a }, r) => Ge(ro, {
+    ({ className: n, ...i }, r) => qe(ro, {
       ref: r,
       iconNode: t,
       className: yt(
@@ -637,25 +637,25 @@ const le = (e, t) => {
         `lucide-${e}`,
         n
       ),
-      ...a
+      ...i
     })
   );
   return o.displayName = rt(e), o;
 };
-const ao = [
+const io = [
   ["path", { d: "M7 7h10v10", key: "1tivn9" }],
   ["path", { d: "M7 17 17 7", key: "1vkiza" }]
-], io = le("arrow-up-right", ao);
+], ao = le("arrow-up-right", io);
 const lo = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], Ct = le("check", lo);
-const so = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], xe = le("chevron-down", so);
-const co = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], uo = le("circle", co);
+const co = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], xe = le("chevron-down", co);
+const so = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], uo = le("circle", so);
 const po = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M3 9h18", key: "1pudct" }],
   ["path", { d: "M3 15h18", key: "5xshup" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
-], at = le("grid-3x3", po);
+], it = le("grid-3x3", po);
 const go = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
@@ -667,12 +667,12 @@ const go = [
 const ho = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
-], ie = le("rotate-ccw", ho);
+], ae = le("rotate-ccw", ho);
 const mo = [
   ["path", { d: "M5 8V5c0-1 1-2 2-2h10c1 0 2 1 2 2v3", key: "1pi83i" }],
   ["path", { d: "M19 16v3c0 1-1 2-2 2H7c-1 0-2-1-2-2v-3", key: "ido5k7" }],
   ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }]
-], it = le("square-split-vertical", mo);
+], at = le("square-split-vertical", mo);
 const bo = [
   ["path", { d: "M21 5H3", key: "1fi0y6" }],
   ["path", { d: "M17 12H7", key: "16if0g" }],
@@ -696,8 +696,8 @@ const ko = [
 const So = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], To = le("x", So), Eo = "_container_18svj_1", No = "_inputContainer_18svj_17", Lo = "_input_18svj_17", Io = "_buttons_18svj_77", Bo = "_submitButton_18svj_89", Ro = "_submitIcon_18svj_101", Oo = "_closeButton_18svj_111", Do = "_closeIcon_18svj_125", me = {
-  container: Eo,
+], Eo = le("x", So), To = "_container_18svj_1", No = "_inputContainer_18svj_17", Lo = "_input_18svj_17", Io = "_buttons_18svj_77", Bo = "_submitButton_18svj_89", Ro = "_submitIcon_18svj_101", Oo = "_closeButton_18svj_111", Do = "_closeIcon_18svj_125", me = {
+  container: To,
   inputContainer: No,
   input: Lo,
   buttons: Io,
@@ -712,14 +712,14 @@ function Mo({
   onClose: o,
   autoFocus: n = !1
 }) {
-  const { theme: a } = q(), [r, c] = T(""), p = G(null);
+  const { theme: i } = K(), [r, s] = E(""), p = q(null);
   W(() => {
     n && p.current && p.current.focus();
   }, [n]);
-  const d = () => {
-    r.trim() && (t(r.trim()), c(""));
+  const u = () => {
+    r.trim() && (t(r.trim()), s(""));
   }, l = (g) => {
-    g.key === "Enter" && (g.preventDefault(), d());
+    g.key === "Enter" && (g.preventDefault(), u());
   };
   return /* @__PURE__ */ b("div", { className: me.container, children: [
     /* @__PURE__ */ b(
@@ -727,46 +727,46 @@ function Mo({
       {
         className: me.inputContainer,
         style: {
-          backgroundColor: a.inputBackgroundColor,
-          borderColor: a.inputBorderColor
+          backgroundColor: i.inputBackgroundColor,
+          borderColor: i.inputBorderColor
         },
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             Be,
             {
               ref: p,
               type: "text",
               value: r,
-              onChange: (g) => c(g.target.value),
+              onChange: (g) => s(g.target.value),
               onKeyDown: l,
               placeholder: e,
               className: me.input,
               style: {
                 backgroundColor: "transparent",
-                color: a.inputTextColor
+                color: i.inputTextColor
               },
               autoFocus: n
             }
           ),
-          /* @__PURE__ */ s("div", { className: me.buttons, children: /* @__PURE__ */ s(
+          /* @__PURE__ */ c("div", { className: me.buttons, children: /* @__PURE__ */ c(
             ye,
             {
-              onClick: d,
+              onClick: u,
               disabled: !r.trim(),
               size: "icon",
               className: me.submitButton,
               title: "Send",
               style: {
-                backgroundColor: a.buttonColor,
-                color: a.buttonTextColor
+                backgroundColor: i.buttonColor,
+                color: i.buttonTextColor
               },
-              children: /* @__PURE__ */ s(io, { className: me.submitIcon })
+              children: /* @__PURE__ */ c(ao, { className: me.submitIcon })
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       ye,
       {
         onClick: o,
@@ -775,11 +775,11 @@ function Mo({
         size: "icon",
         className: me.closeButton,
         style: {
-          backgroundColor: a.inputBackgroundColor,
-          borderColor: a.inputBorderColor,
-          color: a.textColor
+          backgroundColor: i.inputBackgroundColor,
+          borderColor: i.inputBorderColor,
+          color: i.textColor
         },
-        children: /* @__PURE__ */ s(To, { className: me.closeIcon })
+        children: /* @__PURE__ */ c(Eo, { className: me.closeIcon })
       }
     )
   ] });
@@ -787,9 +787,9 @@ function Mo({
 const Po = "_textarea_7dsc4_1", zo = {
   textarea: Po
 };
-function Fo({ className: e, style: t, ...o }) {
-  const { theme: n } = q();
-  return /* @__PURE__ */ s(
+function Ao({ className: e, style: t, ...o }) {
+  const { theme: n } = K();
+  return /* @__PURE__ */ c(
     "textarea",
     {
       "data-slot": "textarea",
@@ -824,7 +824,7 @@ function ke(e, t) {
       return !0;
   }
 }
-function Ao(e) {
+function Fo(e) {
   return e.tagName.toLowerCase() === "a";
 }
 const Ho = "_container_3zzoo_1", jo = "_textarea_3zzoo_21", $o = "_button_3zzoo_39", Wo = "_input_3zzoo_47", Vo = "_inputContainer_3zzoo_57", we = {
@@ -835,39 +835,39 @@ const Ho = "_container_3zzoo_1", jo = "_textarea_3zzoo_21", $o = "_button_3zzoo_
   inputContainer: Vo
 };
 function Uo({ element: e, elementData: t }) {
-  const { theme: o, labels: n } = q(), [a, r] = T(""), [c, p] = T(""), d = G(null), { sendToParent: l } = Pe(), g = Ao(e);
+  const { theme: o, labels: n } = K(), [i, r] = E(""), [s, p] = E(""), u = q(null), { sendToParent: l } = Pe(), g = Fo(e);
   W(() => {
-    t.isTextNode && t.textContent && r(t.textContent), g && p(e.href || ""), d.current && (d.current.focus(), d.current.select());
+    t.isTextNode && t.textContent && r(t.textContent), g && p(e.href || ""), u.current && (u.current.focus(), u.current.select());
   }, [t, e, g]);
-  const u = () => {
+  const d = () => {
     if (e && ((y) => {
       for (let _ = 0; _ < y.childNodes.length; _++) {
         const x = y.childNodes[_];
         if (x.nodeType === Node.TEXT_NODE && x.textContent?.trim()) {
-          x.textContent = a;
+          x.textContent = i;
           break;
         }
       }
-    })(e), g && c) {
+    })(e), g && s) {
       const y = e;
-      y.href = c, l("INSPECTOR_ATTRIBUTE_UPDATED", {
+      y.href = s, l("INSPECTOR_ATTRIBUTE_UPDATED", {
         element: t,
         attribute: "href",
-        value: c,
+        value: s,
         originalValue: y.getAttribute("href") || ""
       });
     }
     l("INSPECTOR_TEXT_UPDATED", {
-      text: a,
+      text: i,
       originalText: t.textContent,
       element: t
     });
-  }, i = (f) => {
-    f.key === "Enter" && !f.shiftKey && (f.preventDefault(), u());
+  }, a = (f) => {
+    f.key === "Enter" && !f.shiftKey && (f.preventDefault(), d());
   };
   return /* @__PURE__ */ b("div", { className: we.container, children: [
     /* @__PURE__ */ b("div", { className: we.inputContainer, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "label",
         {
           style: {
@@ -881,13 +881,13 @@ function Uo({ element: e, elementData: t }) {
           children: n.textContentLabel || "Text Content"
         }
       ),
-      /* @__PURE__ */ s(
-        Fo,
+      /* @__PURE__ */ c(
+        Ao,
         {
-          ref: d,
-          value: a,
+          ref: u,
+          value: i,
           onInput: (f) => r(f.target.value),
-          onKeyDown: (f) => i(f),
+          onKeyDown: (f) => a(f),
           placeholder: n.textPlaceholder,
           className: we.textarea,
           style: {
@@ -899,7 +899,7 @@ function Uo({ element: e, elementData: t }) {
       )
     ] }),
     g && /* @__PURE__ */ b("div", { className: we.inputContainer, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "label",
         {
           style: {
@@ -913,11 +913,11 @@ function Uo({ element: e, elementData: t }) {
           children: n.linkUrlLabel || "Link URL (href)"
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Be,
         {
           type: "url",
-          value: c,
+          value: s,
           onChange: (f) => p(f.target.value),
           placeholder: "https://example.com",
           className: we.input,
@@ -929,10 +929,10 @@ function Uo({ element: e, elementData: t }) {
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(
+    /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(
       ye,
       {
-        onClick: u,
+        onClick: d,
         className: we.button,
         style: {
           backgroundColor: o.buttonColor,
@@ -943,9 +943,9 @@ function Uo({ element: e, elementData: t }) {
     ) })
   ] });
 }
-const Go = "_hiddenInput_b1o6c_1", qo = "_uploadBox_b1o6c_29", Xo = "_uploadContent_b1o6c_69", Ko = "_uploadIcon_b1o6c_87", Yo = "_uploadTitle_b1o6c_101", Jo = "_uploadHint_b1o6c_113", Zo = "_previewImage_b1o6c_125", Ce = {
-  hiddenInput: Go,
-  uploadBox: qo,
+const qo = "_hiddenInput_b1o6c_1", Go = "_uploadBox_b1o6c_29", Xo = "_uploadContent_b1o6c_69", Ko = "_uploadIcon_b1o6c_87", Yo = "_uploadTitle_b1o6c_101", Jo = "_uploadHint_b1o6c_113", Zo = "_previewImage_b1o6c_125", Ce = {
+  hiddenInput: qo,
+  uploadBox: Go,
   uploadContent: Xo,
   uploadIcon: Ko,
   uploadTitle: Yo,
@@ -953,44 +953,44 @@ const Go = "_hiddenInput_b1o6c_1", qo = "_uploadBox_b1o6c_29", Xo = "_uploadCont
   previewImage: Zo
 };
 function Qo({ onFileSelect: e, previewImage: t }) {
-  const { theme: o, labels: n } = q(), a = G(null), [r, c] = T(!1), p = () => {
-    a.current?.click();
-  }, d = (i) => {
-    const f = i.target.files?.[0];
+  const { theme: o, labels: n } = K(), i = q(null), [r, s] = E(!1), p = () => {
+    i.current?.click();
+  }, u = (a) => {
+    const f = a.target.files?.[0];
     f && f.type.startsWith("image/") && e(f);
-  }, l = (i) => {
-    i.preventDefault(), c(!0);
-  }, g = (i) => {
-    i.preventDefault(), c(!1);
-  }, u = (i) => {
-    i.preventDefault(), c(!1);
-    const f = i.dataTransfer?.files[0];
+  }, l = (a) => {
+    a.preventDefault(), s(!0);
+  }, g = (a) => {
+    a.preventDefault(), s(!1);
+  }, d = (a) => {
+    a.preventDefault(), s(!1);
+    const f = a.dataTransfer?.files[0];
     f && f.type.startsWith("image/") && e(f);
   };
   return /* @__PURE__ */ b(mt, { children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       "input",
       {
-        ref: a,
+        ref: i,
         type: "file",
         accept: "image/*",
-        onChange: d,
+        onChange: u,
         className: Ce.hiddenInput
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       "div",
       {
         onClick: p,
         onDragOver: l,
         onDragLeave: g,
-        onDrop: u,
+        onDrop: d,
         className: Ce.uploadBox,
         style: {
           borderColor: r ? o.buttonColor : o.inputBorderColor,
           backgroundColor: r ? `${o.buttonColor}10` : o.inputBackgroundColor
         },
-        children: t ? /* @__PURE__ */ s(
+        children: t ? /* @__PURE__ */ c(
           "img",
           {
             src: t,
@@ -998,7 +998,7 @@ function Qo({ onFileSelect: e, previewImage: t }) {
             className: Ce.previewImage
           }
         ) : /* @__PURE__ */ b("div", { className: Ce.uploadContent, children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "svg",
             {
               width: "32",
@@ -1007,7 +1007,7 @@ function Qo({ onFileSelect: e, previewImage: t }) {
               fill: "none",
               className: Ce.uploadIcon,
               style: { color: o.secondaryTextColor },
-              children: /* @__PURE__ */ s(
+              children: /* @__PURE__ */ c(
                 "path",
                 {
                   d: "M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M17 8L12 3M12 3L7 8M12 3V15",
@@ -1019,7 +1019,7 @@ function Qo({ onFileSelect: e, previewImage: t }) {
               )
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "div",
             {
               className: Ce.uploadTitle,
@@ -1027,7 +1027,7 @@ function Qo({ onFileSelect: e, previewImage: t }) {
               children: n.imageUploadTitle || "Click or drag image"
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "div",
             {
               className: Ce.uploadHint,
@@ -1045,25 +1045,25 @@ const en = "_container_ycoo8_1", tn = "_button_ycoo8_17", lt = {
   button: tn
 };
 function on({ element: e, elementData: t }) {
-  const [o, n] = T(null), [a, r] = T(null), { sendToParent: c } = Pe(), { labels: p, theme: d } = q(), l = (u) => {
-    n(u);
-    const i = new FileReader();
-    i.onload = (f) => {
+  const [o, n] = E(null), [i, r] = E(null), { sendToParent: s } = Pe(), { labels: p, theme: u } = K(), l = (d) => {
+    n(d);
+    const a = new FileReader();
+    a.onload = (f) => {
       const y = f.target?.result;
       r(y);
-    }, i.readAsDataURL(u);
+    }, a.readAsDataURL(d);
   }, g = () => {
-    if (!(!o || !a)) {
+    if (!(!o || !i)) {
       if (e.tagName.toLowerCase() === "img")
-        e.src = a;
+        e.src = i;
       else if (window.getComputedStyle(e).backgroundImage !== "none")
-        e.style.backgroundImage = `url("${a}")`;
+        e.style.backgroundImage = `url("${i}")`;
       else {
-        const u = e.querySelector("img");
-        u && (u.src = a);
+        const d = e.querySelector("img");
+        d && (d.src = i);
       }
-      c("INSPECTOR_IMAGE_UPDATED", {
-        imageData: a,
+      s("INSPECTOR_IMAGE_UPDATED", {
+        imageData: i,
         imageFile: {
           name: o.name,
           size: o.size,
@@ -1075,16 +1075,16 @@ function on({ element: e, elementData: t }) {
     }
   };
   return /* @__PURE__ */ b("div", { className: lt.container, children: [
-    /* @__PURE__ */ s(Qo, { onFileSelect: l, previewImage: a }),
-    /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(
+    /* @__PURE__ */ c(Qo, { onFileSelect: l, previewImage: i }),
+    /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(
       ye,
       {
         onClick: g,
         disabled: !o,
         className: lt.button,
         style: {
-          backgroundColor: d.buttonColor,
-          color: d.buttonTextColor,
+          backgroundColor: u.buttonColor,
+          color: u.buttonTextColor,
           opacity: o ? 1 : 0.5
         },
         children: p.updateImage
@@ -1096,7 +1096,7 @@ function nn(e) {
   const t = e.toLowerCase();
   return t.includes("monospace") || t.includes("courier") || t.includes("consolas") ? "monospace" : t.includes("serif") || t.includes("times") ? "serif" : "sans-serif";
 }
-function st(e) {
+function ct(e) {
   const t = window.getComputedStyle(e);
   return {
     // Layout
@@ -1146,126 +1146,126 @@ function rn(e) {
   )), e.paddingTop || e.paddingRight || e.paddingBottom || e.paddingLeft)
     t.paddingTop = o(e.paddingTop || "0"), t.paddingRight = o(e.paddingRight || "0"), t.paddingBottom = o(e.paddingBottom || "0"), t.paddingLeft = o(e.paddingLeft || "0");
   else if (e.paddingVertical || e.paddingHorizontal) {
-    const n = e.paddingVertical || "0", a = e.paddingHorizontal || "0";
-    t.padding = o(`${n} ${a}`);
+    const n = e.paddingVertical || "0", i = e.paddingHorizontal || "0";
+    t.padding = o(`${n} ${i}`);
   }
   if (e.marginTop || e.marginRight || e.marginBottom || e.marginLeft)
     t.marginTop = o(e.marginTop || "0"), t.marginRight = o(e.marginRight || "0"), t.marginBottom = o(e.marginBottom || "0"), t.marginLeft = o(e.marginLeft || "0");
   else if (e.marginVertical || e.marginHorizontal) {
-    const n = e.marginVertical || "0", a = e.marginHorizontal || "0";
-    t.margin = o(`${n} ${a}`);
+    const n = e.marginVertical || "0", i = e.marginHorizontal || "0";
+    t.margin = o(`${n} ${i}`);
   }
   return t;
 }
 function an(e) {
-  const t = G(/* @__PURE__ */ new Set());
+  const t = q(/* @__PURE__ */ new Set());
   W(() => {
     e && t.current.clear();
   }, [e]);
-  const o = Te(
-    (r, c) => {
+  const o = Ee(
+    (r, s) => {
       if (e)
         switch (t.current.add(r), r) {
           case "backgroundColor":
-            e.style.setProperty("background-color", c, "important");
+            e.style.setProperty("background-color", s, "important");
             break;
           case "height":
-            e.style.setProperty("height", c, "important");
+            e.style.setProperty("height", s, "important");
             break;
           case "width":
-            e.style.setProperty("width", c, "important");
+            e.style.setProperty("width", s, "important");
             break;
           case "color":
-            e.style.setProperty("color", c, "important");
+            e.style.setProperty("color", s, "important");
             break;
           case "fontSize":
-            e.style.setProperty("font-size", c, "important");
+            e.style.setProperty("font-size", s, "important");
             break;
           case "fontWeight":
-            e.style.setProperty("font-weight", c, "important");
+            e.style.setProperty("font-weight", s, "important");
             break;
           case "fontFamily":
-            e.style.setProperty("font-family", c, "important");
+            e.style.setProperty("font-family", s, "important");
             break;
           case "textAlign":
-            e.style.setProperty("text-align", c, "important");
+            e.style.setProperty("text-align", s, "important");
             break;
           case "borderRadius":
-            e.style.setProperty("border-radius", c, "important");
+            e.style.setProperty("border-radius", s, "important");
             break;
           case "borderWidth":
-            e.style.setProperty("border-width", c, "important"), e.style.borderStyle || (e.style.setProperty("border-style", "solid", "important"), t.current.add("borderStyle"));
+            e.style.setProperty("border-width", s, "important"), e.style.borderStyle || (e.style.setProperty("border-style", "solid", "important"), t.current.add("borderStyle"));
             break;
           case "borderColor":
-            e.style.setProperty("border-color", c, "important"), e.style.borderStyle || (e.style.setProperty("border-style", "solid", "important"), t.current.add("borderStyle")), e.style.borderWidth || (e.style.setProperty("border-width", "1px", "important"), t.current.add("borderWidth"));
+            e.style.setProperty("border-color", s, "important"), e.style.borderStyle || (e.style.setProperty("border-style", "solid", "important"), t.current.add("borderStyle")), e.style.borderWidth || (e.style.setProperty("border-width", "1px", "important"), t.current.add("borderWidth"));
             break;
           case "borderStyle":
-            e.style.setProperty("border-style", c, "important");
+            e.style.setProperty("border-style", s, "important");
             break;
           case "display":
-            e.style.setProperty("display", c, "important");
+            e.style.setProperty("display", s, "important");
             break;
           case "opacity":
-            e.style.setProperty("opacity", c, "important");
+            e.style.setProperty("opacity", s, "important");
             break;
           case "flex":
-            e.style.setProperty("flex", c, "important");
+            e.style.setProperty("flex", s, "important");
             break;
           case "flexDirection":
-            e.style.setProperty("flex-direction", c, "important");
+            e.style.setProperty("flex-direction", s, "important");
             break;
           case "justifyContent":
-            e.style.setProperty("justify-content", c, "important");
+            e.style.setProperty("justify-content", s, "important");
             break;
           case "alignItems":
-            e.style.setProperty("align-items", c, "important");
+            e.style.setProperty("align-items", s, "important");
             break;
           case "objectFit":
-            e.style.setProperty("object-fit", c, "important");
+            e.style.setProperty("object-fit", s, "important");
             break;
           case "textDecoration":
-            e.style.setProperty("text-decoration", c, "important");
+            e.style.setProperty("text-decoration", s, "important");
             break;
           case "paddingVertical":
-            e.style.setProperty("padding-top", c, "important"), e.style.setProperty("padding-bottom", c, "important");
+            e.style.setProperty("padding-top", s, "important"), e.style.setProperty("padding-bottom", s, "important");
             break;
           case "paddingHorizontal":
-            e.style.setProperty("padding-left", c, "important"), e.style.setProperty("padding-right", c, "important");
+            e.style.setProperty("padding-left", s, "important"), e.style.setProperty("padding-right", s, "important");
             break;
           case "paddingTop":
-            e.style.setProperty("padding-top", c, "important");
+            e.style.setProperty("padding-top", s, "important");
             break;
           case "paddingRight":
-            e.style.setProperty("padding-right", c, "important");
+            e.style.setProperty("padding-right", s, "important");
             break;
           case "paddingBottom":
-            e.style.setProperty("padding-bottom", c, "important");
+            e.style.setProperty("padding-bottom", s, "important");
             break;
           case "paddingLeft":
-            e.style.setProperty("padding-left", c, "important");
+            e.style.setProperty("padding-left", s, "important");
             break;
           case "marginVertical":
-            e.style.setProperty("margin-top", c, "important"), e.style.setProperty("margin-bottom", c, "important");
+            e.style.setProperty("margin-top", s, "important"), e.style.setProperty("margin-bottom", s, "important");
             break;
           case "marginHorizontal":
-            e.style.setProperty("margin-left", c, "important"), e.style.setProperty("margin-right", c, "important");
+            e.style.setProperty("margin-left", s, "important"), e.style.setProperty("margin-right", s, "important");
             break;
           case "marginTop":
-            e.style.setProperty("margin-top", c, "important");
+            e.style.setProperty("margin-top", s, "important");
             break;
           case "marginRight":
-            e.style.setProperty("margin-right", c, "important");
+            e.style.setProperty("margin-right", s, "important");
             break;
           case "marginBottom":
-            e.style.setProperty("margin-bottom", c, "important");
+            e.style.setProperty("margin-bottom", s, "important");
             break;
           case "marginLeft":
-            e.style.setProperty("margin-left", c, "important");
+            e.style.setProperty("margin-left", s, "important");
             break;
         }
     },
     [e]
-  ), n = Te(() => {
+  ), n = Ee(() => {
     e && (t.current.forEach((r) => {
       switch (r) {
         case "backgroundColor":
@@ -1318,7 +1318,7 @@ function an(e) {
           break;
       }
     }), t.current.clear());
-  }, [e]), a = Te(
+  }, [e]), i = Ee(
     (r) => {
       if (e) {
         switch (r) {
@@ -1427,17 +1427,17 @@ function an(e) {
   return {
     previewStyle: o,
     resetStyles: n,
-    resetSingleProperty: a
+    resetSingleProperty: i
   };
 }
 function ln(e) {
   const t = [];
   if (e.backgroundColor) {
-    const o = sn(e.backgroundColor);
+    const o = cn(e.backgroundColor);
     o && t.push(o);
   }
   if (e.color) {
-    const o = cn(e.color);
+    const o = sn(e.color);
     o && t.push(o);
   }
   if (e.fontSize) {
@@ -1489,11 +1489,11 @@ function ln(e) {
     o && t.push(o);
   }
   if (e.justifyContent) {
-    const o = Tn(e.justifyContent);
+    const o = En(e.justifyContent);
     o && t.push(o);
   }
   if (e.alignItems) {
-    const o = En(e.alignItems);
+    const o = Tn(e.alignItems);
     o && t.push(o);
   }
   if (e.objectFit) {
@@ -1536,7 +1536,7 @@ function ln(e) {
   }
   return t;
 }
-function sn(e) {
+function cn(e) {
   if (e.startsWith("var(--")) {
     const o = e.match(/var\(--(\w+)\)/)?.[1];
     if (o) return `bg-${o}`;
@@ -1552,7 +1552,7 @@ function sn(e) {
     "#10b981": "bg-green-500"
   }[e.toLowerCase()] || `bg-[${e}]`;
 }
-function cn(e) {
+function sn(e) {
   if (e.startsWith("var(--")) {
     const o = e.match(/var\(--(\w+)\)/)?.[1];
     if (o) return `text-${o}`;
@@ -1620,11 +1620,11 @@ function fn(e) {
 function hn(e, t) {
   const o = [];
   if (e) {
-    const n = ce(e, "py");
+    const n = se(e, "py");
     n && o.push(n);
   }
   if (t) {
-    const n = ce(t, "px");
+    const n = se(t, "px");
     n && o.push(n);
   }
   return o;
@@ -1632,16 +1632,16 @@ function hn(e, t) {
 function mn(e, t) {
   const o = [];
   if (e) {
-    const n = ce(e, "my");
+    const n = se(e, "my");
     n && o.push(n);
   }
   if (t) {
-    const n = ce(t, "mx");
+    const n = se(t, "mx");
     n && o.push(n);
   }
   return o;
 }
-function ce(e, t) {
+function se(e, t) {
   const n = {
     "0px": "0",
     "4px": "1",
@@ -1751,7 +1751,7 @@ function Sn(e) {
     "column-reverse": "flex-col-reverse"
   }[e] || null;
 }
-function Tn(e) {
+function En(e) {
   return {
     "flex-start": "justify-start",
     center: "justify-center",
@@ -1761,7 +1761,7 @@ function Tn(e) {
     "space-evenly": "justify-evenly"
   }[e] || null;
 }
-function En(e) {
+function Tn(e) {
   return {
     "flex-start": "items-start",
     center: "items-center",
@@ -1780,80 +1780,80 @@ function Nn(e) {
   }[e] || null;
 }
 function Ln(e, t, o, n) {
-  const a = [];
+  const i = [];
   if (e) {
-    const r = ce(e, "pt");
-    r && a.push(r);
+    const r = se(e, "pt");
+    r && i.push(r);
   }
   if (t) {
-    const r = ce(t, "pr");
-    r && a.push(r);
+    const r = se(t, "pr");
+    r && i.push(r);
   }
   if (o) {
-    const r = ce(o, "pb");
-    r && a.push(r);
+    const r = se(o, "pb");
+    r && i.push(r);
   }
   if (n) {
-    const r = ce(n, "pl");
-    r && a.push(r);
+    const r = se(n, "pl");
+    r && i.push(r);
   }
-  return a;
+  return i;
 }
 function In(e, t, o, n) {
-  const a = [];
+  const i = [];
   if (e) {
-    const r = ce(e, "mt");
-    r && a.push(r);
+    const r = se(e, "mt");
+    r && i.push(r);
   }
   if (t) {
-    const r = ce(t, "mr");
-    r && a.push(r);
+    const r = se(t, "mr");
+    r && i.push(r);
   }
   if (o) {
-    const r = ce(o, "mb");
-    r && a.push(r);
+    const r = se(o, "mb");
+    r && i.push(r);
   }
   if (n) {
-    const r = ce(n, "ml");
-    r && a.push(r);
+    const r = se(n, "ml");
+    r && i.push(r);
   }
-  return a;
+  return i;
 }
 function Se({
   open: e = !1,
   onOpenChange: t,
   children: o
 }) {
-  const [n, a] = T(e);
+  const [n, i] = E(e);
   W(() => {
-    a(e);
+    i(e);
   }, [e]);
   const r = () => {
-    const c = !n;
-    a(c), t?.(c);
+    const s = !n;
+    i(s), t?.(s);
   };
-  return /* @__PURE__ */ s("div", { "data-collapsible": !0, "data-state": n ? "open" : "closed", children: F.Children.map(o, (c) => {
-    if (F.isValidElement(c)) {
-      if (c.type === be)
-        return F.cloneElement(c, {
+  return /* @__PURE__ */ c("div", { "data-collapsible": !0, "data-state": n ? "open" : "closed", children: A.Children.map(o, (s) => {
+    if (A.isValidElement(s)) {
+      if (s.type === be)
+        return A.cloneElement(s, {
           onClick: r,
           "data-state": n ? "open" : "closed"
         });
-      if (c.type === _e)
-        return F.cloneElement(c, {
+      if (s.type === _e)
+        return A.cloneElement(s, {
           isOpen: n
         });
     }
-    return c;
+    return s;
   }) });
 }
-const be = F.forwardRef(
-  ({ asChild: e, children: t, onClick: o, ...n }, a) => e && F.isValidElement(t) ? F.cloneElement(t, {
+const be = A.forwardRef(
+  ({ asChild: e, children: t, onClick: o, ...n }, i) => e && A.isValidElement(t) ? A.cloneElement(t, {
     onClick: (r) => {
       o?.(), t.props.onClick?.(r);
     },
     ...n
-  }) : /* @__PURE__ */ s("button", { ref: a, onClick: o, ...n, children: t })
+  }) : /* @__PURE__ */ c("button", { ref: i, onClick: o, ...n, children: t })
 );
 be.displayName = "CollapsibleTrigger";
 function _e({
@@ -1861,29 +1861,29 @@ function _e({
   className: t,
   isOpen: o
 }) {
-  const n = G(null), a = G(null), [r, c] = T(o ? "auto" : 0), [p, d] = T(!1);
+  const n = q(null), i = q(null), [r, s] = E(o ? "auto" : 0), [p, u] = E(!1);
   return W(() => {
-    if (!(!n.current || !a.current))
+    if (!(!n.current || !i.current))
       if (o) {
-        d(!0);
-        const l = a.current.scrollHeight;
-        c(0), n.current.offsetHeight, c(l);
+        u(!0);
+        const l = i.current.scrollHeight;
+        s(0), n.current.offsetHeight, s(l);
         const g = setTimeout(() => {
-          c("auto"), d(!1);
+          s("auto"), u(!1);
         }, 200);
         return () => clearTimeout(g);
       } else {
-        d(!0);
-        const l = a.current.scrollHeight;
-        c(l), n.current.offsetHeight, requestAnimationFrame(() => {
-          c(0);
+        u(!0);
+        const l = i.current.scrollHeight;
+        s(l), n.current.offsetHeight, requestAnimationFrame(() => {
+          s(0);
         });
         const g = setTimeout(() => {
-          d(!1);
+          u(!1);
         }, 200);
         return () => clearTimeout(g);
       }
-  }, [o]), /* @__PURE__ */ s(
+  }, [o]), /* @__PURE__ */ c(
     "div",
     {
       ref: n,
@@ -1895,24 +1895,24 @@ function _e({
         transition: "height 200ms cubic-bezier(0.4, 0, 0.2, 1)",
         visibility: !o && !p ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ s("div", { ref: a, children: e })
+      children: /* @__PURE__ */ c("div", { ref: i, children: e })
     }
   );
 }
 var Oe = { exports: {} }, ee = {};
-var ct;
+var st;
 function Bn() {
-  if (ct) return ee;
-  ct = 1;
-  var e = F;
-  function t(d) {
-    var l = "https://react.dev/errors/" + d;
+  if (st) return ee;
+  st = 1;
+  var e = A;
+  function t(u) {
+    var l = "https://react.dev/errors/" + u;
     if (1 < arguments.length) {
       l += "?args[]=" + encodeURIComponent(arguments[1]);
       for (var g = 2; g < arguments.length; g++)
         l += "&args[]=" + encodeURIComponent(arguments[g]);
     }
-    return "Minified React error #" + d + "; visit " + l + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
+    return "Minified React error #" + u + "; visit " + l + " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
   }
   function o() {
   }
@@ -1932,77 +1932,77 @@ function Bn() {
     },
     p: 0,
     findDOMNode: null
-  }, a = Symbol.for("react.portal");
-  function r(d, l, g) {
-    var u = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] : null;
+  }, i = Symbol.for("react.portal");
+  function r(u, l, g) {
+    var d = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] : null;
     return {
-      $$typeof: a,
-      key: u == null ? null : "" + u,
-      children: d,
+      $$typeof: i,
+      key: d == null ? null : "" + d,
+      children: u,
       containerInfo: l,
       implementation: g
     };
   }
-  var c = e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-  function p(d, l) {
-    if (d === "font") return "";
+  var s = e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  function p(u, l) {
+    if (u === "font") return "";
     if (typeof l == "string")
       return l === "use-credentials" ? l : "";
   }
-  return ee.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = n, ee.createPortal = function(d, l) {
+  return ee.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = n, ee.createPortal = function(u, l) {
     var g = 2 < arguments.length && arguments[2] !== void 0 ? arguments[2] : null;
     if (!l || l.nodeType !== 1 && l.nodeType !== 9 && l.nodeType !== 11)
       throw Error(t(299));
-    return r(d, l, null, g);
-  }, ee.flushSync = function(d) {
-    var l = c.T, g = n.p;
+    return r(u, l, null, g);
+  }, ee.flushSync = function(u) {
+    var l = s.T, g = n.p;
     try {
-      if (c.T = null, n.p = 2, d) return d();
+      if (s.T = null, n.p = 2, u) return u();
     } finally {
-      c.T = l, n.p = g, n.d.f();
+      s.T = l, n.p = g, n.d.f();
     }
-  }, ee.preconnect = function(d, l) {
-    typeof d == "string" && (l ? (l = l.crossOrigin, l = typeof l == "string" ? l === "use-credentials" ? l : "" : void 0) : l = null, n.d.C(d, l));
-  }, ee.prefetchDNS = function(d) {
-    typeof d == "string" && n.d.D(d);
-  }, ee.preinit = function(d, l) {
-    if (typeof d == "string" && l && typeof l.as == "string") {
-      var g = l.as, u = p(g, l.crossOrigin), i = typeof l.integrity == "string" ? l.integrity : void 0, f = typeof l.fetchPriority == "string" ? l.fetchPriority : void 0;
+  }, ee.preconnect = function(u, l) {
+    typeof u == "string" && (l ? (l = l.crossOrigin, l = typeof l == "string" ? l === "use-credentials" ? l : "" : void 0) : l = null, n.d.C(u, l));
+  }, ee.prefetchDNS = function(u) {
+    typeof u == "string" && n.d.D(u);
+  }, ee.preinit = function(u, l) {
+    if (typeof u == "string" && l && typeof l.as == "string") {
+      var g = l.as, d = p(g, l.crossOrigin), a = typeof l.integrity == "string" ? l.integrity : void 0, f = typeof l.fetchPriority == "string" ? l.fetchPriority : void 0;
       g === "style" ? n.d.S(
-        d,
+        u,
         typeof l.precedence == "string" ? l.precedence : void 0,
         {
-          crossOrigin: u,
-          integrity: i,
+          crossOrigin: d,
+          integrity: a,
           fetchPriority: f
         }
-      ) : g === "script" && n.d.X(d, {
-        crossOrigin: u,
-        integrity: i,
+      ) : g === "script" && n.d.X(u, {
+        crossOrigin: d,
+        integrity: a,
         fetchPriority: f,
         nonce: typeof l.nonce == "string" ? l.nonce : void 0
       });
     }
-  }, ee.preinitModule = function(d, l) {
-    if (typeof d == "string")
+  }, ee.preinitModule = function(u, l) {
+    if (typeof u == "string")
       if (typeof l == "object" && l !== null) {
         if (l.as == null || l.as === "script") {
           var g = p(
             l.as,
             l.crossOrigin
           );
-          n.d.M(d, {
+          n.d.M(u, {
             crossOrigin: g,
             integrity: typeof l.integrity == "string" ? l.integrity : void 0,
             nonce: typeof l.nonce == "string" ? l.nonce : void 0
           });
         }
-      } else l == null && n.d.M(d);
-  }, ee.preload = function(d, l) {
-    if (typeof d == "string" && typeof l == "object" && l !== null && typeof l.as == "string") {
-      var g = l.as, u = p(g, l.crossOrigin);
-      n.d.L(d, g, {
-        crossOrigin: u,
+      } else l == null && n.d.M(u);
+  }, ee.preload = function(u, l) {
+    if (typeof u == "string" && typeof l == "object" && l !== null && typeof l.as == "string") {
+      var g = l.as, d = p(g, l.crossOrigin);
+      n.d.L(u, g, {
+        crossOrigin: d,
         integrity: typeof l.integrity == "string" ? l.integrity : void 0,
         nonce: typeof l.nonce == "string" ? l.nonce : void 0,
         type: typeof l.type == "string" ? l.type : void 0,
@@ -2013,24 +2013,24 @@ function Bn() {
         media: typeof l.media == "string" ? l.media : void 0
       });
     }
-  }, ee.preloadModule = function(d, l) {
-    if (typeof d == "string")
+  }, ee.preloadModule = function(u, l) {
+    if (typeof u == "string")
       if (l) {
         var g = p(l.as, l.crossOrigin);
-        n.d.m(d, {
+        n.d.m(u, {
           as: typeof l.as == "string" && l.as !== "script" ? l.as : void 0,
           crossOrigin: g,
           integrity: typeof l.integrity == "string" ? l.integrity : void 0
         });
-      } else n.d.m(d);
-  }, ee.requestFormReset = function(d) {
-    n.d.r(d);
-  }, ee.unstable_batchedUpdates = function(d, l) {
-    return d(l);
-  }, ee.useFormState = function(d, l, g) {
-    return c.H.useFormState(d, l, g);
+      } else n.d.m(u);
+  }, ee.requestFormReset = function(u) {
+    n.d.r(u);
+  }, ee.unstable_batchedUpdates = function(u, l) {
+    return u(l);
+  }, ee.useFormState = function(u, l, g) {
+    return s.H.useFormState(u, l, g);
   }, ee.useFormStatus = function() {
-    return c.H.useHostTransitionStatus();
+    return s.H.useHostTransitionStatus();
   }, ee.version = "19.2.0", ee;
 }
 var te = {};
@@ -2039,10 +2039,10 @@ function Rn() {
   return dt || (dt = 1, process.env.NODE_ENV !== "production" && (function() {
     function e() {
     }
-    function t(u) {
-      return "" + u;
+    function t(d) {
+      return "" + d;
     }
-    function o(u, i, f) {
+    function o(d, a, f) {
       var y = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] : null;
       try {
         t(y);
@@ -2056,34 +2056,34 @@ function Rn() {
       ), t(y)), {
         $$typeof: l,
         key: y == null ? null : "" + y,
-        children: u,
-        containerInfo: i,
+        children: d,
+        containerInfo: a,
         implementation: f
       };
     }
-    function n(u, i) {
-      if (u === "font") return "";
-      if (typeof i == "string")
-        return i === "use-credentials" ? i : "";
+    function n(d, a) {
+      if (d === "font") return "";
+      if (typeof a == "string")
+        return a === "use-credentials" ? a : "";
     }
-    function a(u) {
-      return u === null ? "`null`" : u === void 0 ? "`undefined`" : u === "" ? "an empty string" : 'something with type "' + typeof u + '"';
+    function i(d) {
+      return d === null ? "`null`" : d === void 0 ? "`undefined`" : d === "" ? "an empty string" : 'something with type "' + typeof d + '"';
     }
-    function r(u) {
-      return u === null ? "`null`" : u === void 0 ? "`undefined`" : u === "" ? "an empty string" : typeof u == "string" ? JSON.stringify(u) : typeof u == "number" ? "`" + u + "`" : 'something with type "' + typeof u + '"';
+    function r(d) {
+      return d === null ? "`null`" : d === void 0 ? "`undefined`" : d === "" ? "an empty string" : typeof d == "string" ? JSON.stringify(d) : typeof d == "number" ? "`" + d + "`" : 'something with type "' + typeof d + '"';
     }
-    function c() {
-      var u = g.H;
-      return u === null && console.error(
+    function s() {
+      var d = g.H;
+      return d === null && console.error(
         `Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
 2. You might be breaking the Rules of Hooks
 3. You might have more than one copy of React in the same app
 See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`
-      ), u;
+      ), d;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var p = F, d = {
+    var p = A, u = {
       d: {
         f: e,
         r: function() {
@@ -2104,146 +2104,146 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
     }, l = Symbol.for("react.portal"), g = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     typeof Map == "function" && Map.prototype != null && typeof Map.prototype.forEach == "function" && typeof Set == "function" && Set.prototype != null && typeof Set.prototype.clear == "function" && typeof Set.prototype.forEach == "function" || console.error(
       "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
-    ), te.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = d, te.createPortal = function(u, i) {
+    ), te.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = u, te.createPortal = function(d, a) {
       var f = 2 < arguments.length && arguments[2] !== void 0 ? arguments[2] : null;
-      if (!i || i.nodeType !== 1 && i.nodeType !== 9 && i.nodeType !== 11)
+      if (!a || a.nodeType !== 1 && a.nodeType !== 9 && a.nodeType !== 11)
         throw Error("Target container is not a DOM element.");
-      return o(u, i, null, f);
-    }, te.flushSync = function(u) {
-      var i = g.T, f = d.p;
+      return o(d, a, null, f);
+    }, te.flushSync = function(d) {
+      var a = g.T, f = u.p;
       try {
-        if (g.T = null, d.p = 2, u)
-          return u();
+        if (g.T = null, u.p = 2, d)
+          return d();
       } finally {
-        g.T = i, d.p = f, d.d.f() && console.error(
+        g.T = a, u.p = f, u.d.f() && console.error(
           "flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task."
         );
       }
-    }, te.preconnect = function(u, i) {
-      typeof u == "string" && u ? i != null && typeof i != "object" ? console.error(
+    }, te.preconnect = function(d, a) {
+      typeof d == "string" && d ? a != null && typeof a != "object" ? console.error(
         "ReactDOM.preconnect(): Expected the `options` argument (second) to be an object but encountered %s instead. The only supported option at this time is `crossOrigin` which accepts a string.",
-        r(i)
-      ) : i != null && typeof i.crossOrigin != "string" && console.error(
+        r(a)
+      ) : a != null && typeof a.crossOrigin != "string" && console.error(
         "ReactDOM.preconnect(): Expected the `crossOrigin` option (second argument) to be a string but encountered %s instead. Try removing this option or passing a string value instead.",
-        a(i.crossOrigin)
+        i(a.crossOrigin)
       ) : console.error(
         "ReactDOM.preconnect(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
-        a(u)
-      ), typeof u == "string" && (i ? (i = i.crossOrigin, i = typeof i == "string" ? i === "use-credentials" ? i : "" : void 0) : i = null, d.d.C(u, i));
-    }, te.prefetchDNS = function(u) {
-      if (typeof u != "string" || !u)
+        i(d)
+      ), typeof d == "string" && (a ? (a = a.crossOrigin, a = typeof a == "string" ? a === "use-credentials" ? a : "" : void 0) : a = null, u.d.C(d, a));
+    }, te.prefetchDNS = function(d) {
+      if (typeof d != "string" || !d)
         console.error(
           "ReactDOM.prefetchDNS(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
-          a(u)
+          i(d)
         );
       else if (1 < arguments.length) {
-        var i = arguments[1];
-        typeof i == "object" && i.hasOwnProperty("crossOrigin") ? console.error(
+        var a = arguments[1];
+        typeof a == "object" && a.hasOwnProperty("crossOrigin") ? console.error(
           "ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. It looks like the you are attempting to set a crossOrigin property for this DNS lookup hint. Browsers do not perform DNS queries using CORS and setting this attribute on the resource hint has no effect. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.",
-          r(i)
+          r(a)
         ) : console.error(
           "ReactDOM.prefetchDNS(): Expected only one argument, `href`, but encountered %s as a second argument instead. This argument is reserved for future options and is currently disallowed. Try calling ReactDOM.prefetchDNS() with just a single string argument, `href`.",
-          r(i)
+          r(a)
         );
       }
-      typeof u == "string" && d.d.D(u);
-    }, te.preinit = function(u, i) {
-      if (typeof u == "string" && u ? i == null || typeof i != "object" ? console.error(
+      typeof d == "string" && u.d.D(d);
+    }, te.preinit = function(d, a) {
+      if (typeof d == "string" && d ? a == null || typeof a != "object" ? console.error(
         "ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.",
-        r(i)
-      ) : i.as !== "style" && i.as !== "script" && console.error(
+        r(a)
+      ) : a.as !== "style" && a.as !== "script" && console.error(
         'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
-        r(i.as)
+        r(a.as)
       ) : console.error(
         "ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.",
-        a(u)
-      ), typeof u == "string" && i && typeof i.as == "string") {
-        var f = i.as, y = n(f, i.crossOrigin), _ = typeof i.integrity == "string" ? i.integrity : void 0, x = typeof i.fetchPriority == "string" ? i.fetchPriority : void 0;
-        f === "style" ? d.d.S(
-          u,
-          typeof i.precedence == "string" ? i.precedence : void 0,
+        i(d)
+      ), typeof d == "string" && a && typeof a.as == "string") {
+        var f = a.as, y = n(f, a.crossOrigin), _ = typeof a.integrity == "string" ? a.integrity : void 0, x = typeof a.fetchPriority == "string" ? a.fetchPriority : void 0;
+        f === "style" ? u.d.S(
+          d,
+          typeof a.precedence == "string" ? a.precedence : void 0,
           {
             crossOrigin: y,
             integrity: _,
             fetchPriority: x
           }
-        ) : f === "script" && d.d.X(u, {
+        ) : f === "script" && u.d.X(d, {
           crossOrigin: y,
           integrity: _,
           fetchPriority: x,
-          nonce: typeof i.nonce == "string" ? i.nonce : void 0
+          nonce: typeof a.nonce == "string" ? a.nonce : void 0
         });
       }
-    }, te.preinitModule = function(u, i) {
+    }, te.preinitModule = function(d, a) {
       var f = "";
-      if (typeof u == "string" && u || (f += " The `href` argument encountered was " + a(u) + "."), i !== void 0 && typeof i != "object" ? f += " The `options` argument encountered was " + a(i) + "." : i && "as" in i && i.as !== "script" && (f += " The `as` option encountered was " + r(i.as) + "."), f)
+      if (typeof d == "string" && d || (f += " The `href` argument encountered was " + i(d) + "."), a !== void 0 && typeof a != "object" ? f += " The `options` argument encountered was " + i(a) + "." : a && "as" in a && a.as !== "script" && (f += " The `as` option encountered was " + r(a.as) + "."), f)
         console.error(
           "ReactDOM.preinitModule(): Expected up to two arguments, a non-empty `href` string and, optionally, an `options` object with a valid `as` property.%s",
           f
         );
       else
-        switch (f = i && typeof i.as == "string" ? i.as : "script", f) {
+        switch (f = a && typeof a.as == "string" ? a.as : "script", f) {
           case "script":
             break;
           default:
             f = r(f), console.error(
               'ReactDOM.preinitModule(): Currently the only supported "as" type for this function is "script" but received "%s" instead. This warning was generated for `href` "%s". In the future other module types will be supported, aligning with the import-attributes proposal. Learn more here: (https://github.com/tc39/proposal-import-attributes)',
               f,
-              u
+              d
             );
         }
-      typeof u == "string" && (typeof i == "object" && i !== null ? (i.as == null || i.as === "script") && (f = n(
-        i.as,
-        i.crossOrigin
-      ), d.d.M(u, {
+      typeof d == "string" && (typeof a == "object" && a !== null ? (a.as == null || a.as === "script") && (f = n(
+        a.as,
+        a.crossOrigin
+      ), u.d.M(d, {
         crossOrigin: f,
-        integrity: typeof i.integrity == "string" ? i.integrity : void 0,
-        nonce: typeof i.nonce == "string" ? i.nonce : void 0
-      })) : i == null && d.d.M(u));
-    }, te.preload = function(u, i) {
+        integrity: typeof a.integrity == "string" ? a.integrity : void 0,
+        nonce: typeof a.nonce == "string" ? a.nonce : void 0
+      })) : a == null && u.d.M(d));
+    }, te.preload = function(d, a) {
       var f = "";
-      if (typeof u == "string" && u || (f += " The `href` argument encountered was " + a(u) + "."), i == null || typeof i != "object" ? f += " The `options` argument encountered was " + a(i) + "." : typeof i.as == "string" && i.as || (f += " The `as` option encountered was " + a(i.as) + "."), f && console.error(
+      if (typeof d == "string" && d || (f += " The `href` argument encountered was " + i(d) + "."), a == null || typeof a != "object" ? f += " The `options` argument encountered was " + i(a) + "." : typeof a.as == "string" && a.as || (f += " The `as` option encountered was " + i(a.as) + "."), f && console.error(
         'ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag.%s',
         f
-      ), typeof u == "string" && typeof i == "object" && i !== null && typeof i.as == "string") {
-        f = i.as;
+      ), typeof d == "string" && typeof a == "object" && a !== null && typeof a.as == "string") {
+        f = a.as;
         var y = n(
           f,
-          i.crossOrigin
+          a.crossOrigin
         );
-        d.d.L(u, f, {
+        u.d.L(d, f, {
           crossOrigin: y,
-          integrity: typeof i.integrity == "string" ? i.integrity : void 0,
-          nonce: typeof i.nonce == "string" ? i.nonce : void 0,
-          type: typeof i.type == "string" ? i.type : void 0,
-          fetchPriority: typeof i.fetchPriority == "string" ? i.fetchPriority : void 0,
-          referrerPolicy: typeof i.referrerPolicy == "string" ? i.referrerPolicy : void 0,
-          imageSrcSet: typeof i.imageSrcSet == "string" ? i.imageSrcSet : void 0,
-          imageSizes: typeof i.imageSizes == "string" ? i.imageSizes : void 0,
-          media: typeof i.media == "string" ? i.media : void 0
+          integrity: typeof a.integrity == "string" ? a.integrity : void 0,
+          nonce: typeof a.nonce == "string" ? a.nonce : void 0,
+          type: typeof a.type == "string" ? a.type : void 0,
+          fetchPriority: typeof a.fetchPriority == "string" ? a.fetchPriority : void 0,
+          referrerPolicy: typeof a.referrerPolicy == "string" ? a.referrerPolicy : void 0,
+          imageSrcSet: typeof a.imageSrcSet == "string" ? a.imageSrcSet : void 0,
+          imageSizes: typeof a.imageSizes == "string" ? a.imageSizes : void 0,
+          media: typeof a.media == "string" ? a.media : void 0
         });
       }
-    }, te.preloadModule = function(u, i) {
+    }, te.preloadModule = function(d, a) {
       var f = "";
-      typeof u == "string" && u || (f += " The `href` argument encountered was " + a(u) + "."), i !== void 0 && typeof i != "object" ? f += " The `options` argument encountered was " + a(i) + "." : i && "as" in i && typeof i.as != "string" && (f += " The `as` option encountered was " + a(i.as) + "."), f && console.error(
+      typeof d == "string" && d || (f += " The `href` argument encountered was " + i(d) + "."), a !== void 0 && typeof a != "object" ? f += " The `options` argument encountered was " + i(a) + "." : a && "as" in a && typeof a.as != "string" && (f += " The `as` option encountered was " + i(a.as) + "."), f && console.error(
         'ReactDOM.preloadModule(): Expected two arguments, a non-empty `href` string and, optionally, an `options` object with an `as` property valid for a `<link rel="modulepreload" as="..." />` tag.%s',
         f
-      ), typeof u == "string" && (i ? (f = n(
-        i.as,
-        i.crossOrigin
-      ), d.d.m(u, {
-        as: typeof i.as == "string" && i.as !== "script" ? i.as : void 0,
+      ), typeof d == "string" && (a ? (f = n(
+        a.as,
+        a.crossOrigin
+      ), u.d.m(d, {
+        as: typeof a.as == "string" && a.as !== "script" ? a.as : void 0,
         crossOrigin: f,
-        integrity: typeof i.integrity == "string" ? i.integrity : void 0
-      })) : d.d.m(u));
-    }, te.requestFormReset = function(u) {
-      d.d.r(u);
-    }, te.unstable_batchedUpdates = function(u, i) {
-      return u(i);
-    }, te.useFormState = function(u, i, f) {
-      return c().useFormState(u, i, f);
+        integrity: typeof a.integrity == "string" ? a.integrity : void 0
+      })) : u.d.m(d));
+    }, te.requestFormReset = function(d) {
+      u.d.r(d);
+    }, te.unstable_batchedUpdates = function(d, a) {
+      return d(a);
+    }, te.useFormState = function(d, a, f) {
+      return s().useFormState(d, a, f);
     }, te.useFormStatus = function() {
-      return c().useHostTransitionStatus();
+      return s().useHostTransitionStatus();
     }, te.version = "19.2.0", typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
   })()), te;
 }
@@ -2276,48 +2276,48 @@ function ze() {
 }
 function _t(e, t) {
   if (e == null) return {};
-  var o, n, a = {}, r = Object.keys(e);
-  for (n = 0; n < r.length; n++) t.indexOf(o = r[n]) >= 0 || (a[o] = e[o]);
-  return a;
+  var o, n, i = {}, r = Object.keys(e);
+  for (n = 0; n < r.length; n++) t.indexOf(o = r[n]) >= 0 || (i[o] = e[o]);
+  return i;
 }
-function qe(e) {
-  var t = G(e), o = G(function(n) {
+function Ge(e) {
+  var t = q(e), o = q(function(n) {
     t.current && t.current(n);
   });
   return t.current = e, o.current;
 }
-var Ee = function(e, t, o) {
+var Te = function(e, t, o) {
   return t === void 0 && (t = 0), o === void 0 && (o = 1), e > o ? o : e < t ? t : e;
 }, Le = function(e) {
   return "touches" in e;
 }, Xe = function(e) {
   return e && e.ownerDocument.defaultView || self;
 }, pt = function(e, t, o) {
-  var n = e.getBoundingClientRect(), a = Le(t) ? (function(r, c) {
-    for (var p = 0; p < r.length; p++) if (r[p].identifier === c) return r[p];
+  var n = e.getBoundingClientRect(), i = Le(t) ? (function(r, s) {
+    for (var p = 0; p < r.length; p++) if (r[p].identifier === s) return r[p];
     return r[0];
   })(t.touches, o) : t;
-  return { left: Ee((a.pageX - (n.left + Xe(e).pageXOffset)) / n.width), top: Ee((a.pageY - (n.top + Xe(e).pageYOffset)) / n.height) };
+  return { left: Te((i.pageX - (n.left + Xe(e).pageXOffset)) / n.width), top: Te((i.pageY - (n.top + Xe(e).pageYOffset)) / n.height) };
 }, gt = function(e) {
   !Le(e) && e.preventDefault();
-}, Je = F.memo(function(e) {
-  var t = e.onMove, o = e.onKey, n = _t(e, ["onMove", "onKey"]), a = G(null), r = qe(t), c = qe(o), p = G(null), d = G(!1), l = Me(function() {
+}, Je = A.memo(function(e) {
+  var t = e.onMove, o = e.onKey, n = _t(e, ["onMove", "onKey"]), i = q(null), r = Ge(t), s = Ge(o), p = q(null), u = q(!1), l = Me(function() {
     var f = function(x) {
-      gt(x), (Le(x) ? x.touches.length > 0 : x.buttons > 0) && a.current ? r(pt(a.current, x, p.current)) : _(!1);
+      gt(x), (Le(x) ? x.touches.length > 0 : x.buttons > 0) && i.current ? r(pt(i.current, x, p.current)) : _(!1);
     }, y = function() {
       return _(!1);
     };
     function _(x) {
-      var L = d.current, S = Xe(a.current), C = x ? S.addEventListener : S.removeEventListener;
+      var L = u.current, S = Xe(i.current), C = x ? S.addEventListener : S.removeEventListener;
       C(L ? "touchmove" : "mousemove", f), C(L ? "touchend" : "mouseup", y);
     }
     return [function(x) {
-      var L = x.nativeEvent, S = a.current;
+      var L = x.nativeEvent, S = i.current;
       if (S && (gt(L), !(function(M, k) {
         return k && !Le(M);
-      })(L, d.current) && S)) {
+      })(L, u.current) && S)) {
         if (Le(L)) {
-          d.current = !0;
+          u.current = !0;
           var C = L.changedTouches || [];
           C.length && (p.current = C[0].identifier);
         }
@@ -2325,22 +2325,22 @@ var Ee = function(e, t, o) {
       }
     }, function(x) {
       var L = x.which || x.keyCode;
-      L < 37 || L > 40 || (x.preventDefault(), c({ left: L === 39 ? 0.05 : L === 37 ? -0.05 : 0, top: L === 40 ? 0.05 : L === 38 ? -0.05 : 0 }));
+      L < 37 || L > 40 || (x.preventDefault(), s({ left: L === 39 ? 0.05 : L === 37 ? -0.05 : 0, top: L === 40 ? 0.05 : L === 38 ? -0.05 : 0 }));
     }, _];
-  }, [c, r]), g = l[0], u = l[1], i = l[2];
+  }, [s, r]), g = l[0], d = l[1], a = l[2];
   return W(function() {
-    return i;
-  }, [i]), F.createElement("div", ze({}, n, { onTouchStart: g, onMouseDown: g, className: "react-colorful__interactive", ref: a, onKeyDown: u, tabIndex: 0, role: "slider" }));
-}), Fe = function(e) {
+    return a;
+  }, [a]), A.createElement("div", ze({}, n, { onTouchStart: g, onMouseDown: g, className: "react-colorful__interactive", ref: i, onKeyDown: d, tabIndex: 0, role: "slider" }));
+}), Ae = function(e) {
   return e.filter(Boolean).join(" ");
 }, Ze = function(e) {
-  var t = e.color, o = e.left, n = e.top, a = n === void 0 ? 0.5 : n, r = Fe(["react-colorful__pointer", e.className]);
-  return F.createElement("div", { className: r, style: { top: 100 * a + "%", left: 100 * o + "%" } }, F.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t } }));
-}, ae = function(e, t, o) {
+  var t = e.color, o = e.left, n = e.top, i = n === void 0 ? 0.5 : n, r = Ae(["react-colorful__pointer", e.className]);
+  return A.createElement("div", { className: r, style: { top: 100 * i + "%", left: 100 * o + "%" } }, A.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t } }));
+}, ie = function(e, t, o) {
   return t === void 0 && (t = 0), o === void 0 && (o = Math.pow(10, t)), Math.round(o * e) / o;
 }, kt = function(e) {
-  var t = e.s, o = e.v, n = e.a, a = (200 - t) * o / 100;
-  return { h: ae(e.h), s: ae(a > 0 && a < 200 ? t * o / 100 / (a <= 100 ? a : 200 - a) * 100 : 0), l: ae(a / 2), a: ae(n, 2) };
+  var t = e.s, o = e.v, n = e.a, i = (200 - t) * o / 100;
+  return { h: ie(e.h), s: ie(i > 0 && i < 200 ? t * o / 100 / (i <= 100 ? i : 200 - i) * 100 : 0), l: ie(i / 2), a: ie(n, 2) };
 }, Ke = function(e) {
   var t = kt(e);
   return "hsl(" + t.h + ", " + t.s + "%, " + t.l + "%)";
@@ -2348,56 +2348,56 @@ var Ee = function(e, t, o) {
   var t = kt(e);
   return "hsla(" + t.h + ", " + t.s + "%, " + t.l + "%, " + t.a + ")";
 }, Dn = function(e) {
-  var t = e.h, o = e.s, n = e.v, a = e.a;
+  var t = e.h, o = e.s, n = e.v, i = e.a;
   t = t / 360 * 6, o /= 100, n /= 100;
-  var r = Math.floor(t), c = n * (1 - o), p = n * (1 - (t - r) * o), d = n * (1 - (1 - t + r) * o), l = r % 6;
-  return { r: ae(255 * [n, p, c, c, d, n][l]), g: ae(255 * [d, n, n, p, c, c][l]), b: ae(255 * [c, c, d, n, n, p][l]), a: ae(a, 2) };
+  var r = Math.floor(t), s = n * (1 - o), p = n * (1 - (t - r) * o), u = n * (1 - (1 - t + r) * o), l = r % 6;
+  return { r: ie(255 * [n, p, s, s, u, n][l]), g: ie(255 * [u, n, n, p, s, s][l]), b: ie(255 * [s, s, u, n, n, p][l]), a: ie(i, 2) };
 }, Mn = function(e) {
-  var t = e.r, o = e.g, n = e.b, a = e.a, r = Math.max(t, o, n), c = r - Math.min(t, o, n), p = c ? r === t ? (o - n) / c : r === o ? 2 + (n - t) / c : 4 + (t - o) / c : 0;
-  return { h: ae(60 * (p < 0 ? p + 6 : p)), s: ae(r ? c / r * 100 : 0), v: ae(r / 255 * 100), a };
-}, Pn = F.memo(function(e) {
-  var t = e.hue, o = e.onChange, n = Fe(["react-colorful__hue", e.className]);
-  return F.createElement("div", { className: n }, F.createElement(Je, { onMove: function(a) {
-    o({ h: 360 * a.left });
-  }, onKey: function(a) {
-    o({ h: Ee(t + 360 * a.left, 0, 360) });
-  }, "aria-label": "Hue", "aria-valuenow": ae(t), "aria-valuemax": "360", "aria-valuemin": "0" }, F.createElement(Ze, { className: "react-colorful__hue-pointer", left: t / 360, color: Ke({ h: t, s: 100, v: 100, a: 1 }) })));
-}), zn = F.memo(function(e) {
+  var t = e.r, o = e.g, n = e.b, i = e.a, r = Math.max(t, o, n), s = r - Math.min(t, o, n), p = s ? r === t ? (o - n) / s : r === o ? 2 + (n - t) / s : 4 + (t - o) / s : 0;
+  return { h: ie(60 * (p < 0 ? p + 6 : p)), s: ie(r ? s / r * 100 : 0), v: ie(r / 255 * 100), a: i };
+}, Pn = A.memo(function(e) {
+  var t = e.hue, o = e.onChange, n = Ae(["react-colorful__hue", e.className]);
+  return A.createElement("div", { className: n }, A.createElement(Je, { onMove: function(i) {
+    o({ h: 360 * i.left });
+  }, onKey: function(i) {
+    o({ h: Te(t + 360 * i.left, 0, 360) });
+  }, "aria-label": "Hue", "aria-valuenow": ie(t), "aria-valuemax": "360", "aria-valuemin": "0" }, A.createElement(Ze, { className: "react-colorful__hue-pointer", left: t / 360, color: Ke({ h: t, s: 100, v: 100, a: 1 }) })));
+}), zn = A.memo(function(e) {
   var t = e.hsva, o = e.onChange, n = { backgroundColor: Ke({ h: t.h, s: 100, v: 100, a: 1 }) };
-  return F.createElement("div", { className: "react-colorful__saturation", style: n }, F.createElement(Je, { onMove: function(a) {
-    o({ s: 100 * a.left, v: 100 - 100 * a.top });
-  }, onKey: function(a) {
-    o({ s: Ee(t.s + 100 * a.left, 0, 100), v: Ee(t.v - 100 * a.top, 0, 100) });
-  }, "aria-label": "Color", "aria-valuetext": "Saturation " + ae(t.s) + "%, Brightness " + ae(t.v) + "%" }, F.createElement(Ze, { className: "react-colorful__saturation-pointer", top: 1 - t.v / 100, left: t.s / 100, color: Ke(t) })));
+  return A.createElement("div", { className: "react-colorful__saturation", style: n }, A.createElement(Je, { onMove: function(i) {
+    o({ s: 100 * i.left, v: 100 - 100 * i.top });
+  }, onKey: function(i) {
+    o({ s: Te(t.s + 100 * i.left, 0, 100), v: Te(t.v - 100 * i.top, 0, 100) });
+  }, "aria-label": "Color", "aria-valuetext": "Saturation " + ie(t.s) + "%, Brightness " + ie(t.v) + "%" }, A.createElement(Ze, { className: "react-colorful__saturation-pointer", top: 1 - t.v / 100, left: t.s / 100, color: Ke(t) })));
 }), wt = function(e, t) {
   if (e === t) return !0;
   for (var o in e) if (e[o] !== t[o]) return !1;
   return !0;
 };
-function Fn(e, t, o) {
-  var n = qe(o), a = T(function() {
+function An(e, t, o) {
+  var n = Ge(o), i = E(function() {
     return e.toHsva(t);
-  }), r = a[0], c = a[1], p = G({ color: t, hsva: r });
+  }), r = i[0], s = i[1], p = q({ color: t, hsva: r });
   W(function() {
     if (!e.equal(t, p.current.color)) {
       var l = e.toHsva(t);
-      p.current = { hsva: l, color: t }, c(l);
+      p.current = { hsva: l, color: t }, s(l);
     }
   }, [t, e]), W(function() {
     var l;
     wt(r, p.current.hsva) || e.equal(l = e.fromHsva(r), p.current.color) || (p.current = { hsva: r, color: l }, n(l));
   }, [r, e, n]);
-  var d = Te(function(l) {
-    c(function(g) {
+  var u = Ee(function(l) {
+    s(function(g) {
       return Object.assign({}, g, l);
     });
   }, []);
-  return [r, d];
+  return [r, u];
 }
-var An = typeof window < "u" ? It : W, Hn = function() {
+var Fn = typeof window < "u" ? It : W, Hn = function() {
   return typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0;
 }, ft = /* @__PURE__ */ new Map(), jn = function(e) {
-  An(function() {
+  Fn(function() {
     var t = e.current ? e.current.ownerDocument : document;
     if (t !== void 0 && !ft.has(t)) {
       var o = t.createElement("style");
@@ -2407,31 +2407,31 @@ var An = typeof window < "u" ? It : W, Hn = function() {
     }
   }, []);
 }, $n = function(e) {
-  var t = e.className, o = e.hsva, n = e.onChange, a = { backgroundImage: "linear-gradient(90deg, " + je(Object.assign({}, o, { a: 0 })) + ", " + je(Object.assign({}, o, { a: 1 })) + ")" }, r = Fe(["react-colorful__alpha", t]), c = ae(100 * o.a);
-  return F.createElement("div", { className: r }, F.createElement("div", { className: "react-colorful__alpha-gradient", style: a }), F.createElement(Je, { onMove: function(p) {
+  var t = e.className, o = e.hsva, n = e.onChange, i = { backgroundImage: "linear-gradient(90deg, " + je(Object.assign({}, o, { a: 0 })) + ", " + je(Object.assign({}, o, { a: 1 })) + ")" }, r = Ae(["react-colorful__alpha", t]), s = ie(100 * o.a);
+  return A.createElement("div", { className: r }, A.createElement("div", { className: "react-colorful__alpha-gradient", style: i }), A.createElement(Je, { onMove: function(p) {
     n({ a: p.left });
   }, onKey: function(p) {
-    n({ a: Ee(o.a + p.left) });
-  }, "aria-label": "Alpha", "aria-valuetext": c + "%", "aria-valuenow": c, "aria-valuemin": "0", "aria-valuemax": "100" }, F.createElement(Ze, { className: "react-colorful__alpha-pointer", left: o.a, color: je(o) })));
+    n({ a: Te(o.a + p.left) });
+  }, "aria-label": "Alpha", "aria-valuetext": s + "%", "aria-valuenow": s, "aria-valuemin": "0", "aria-valuemax": "100" }, A.createElement(Ze, { className: "react-colorful__alpha-pointer", left: o.a, color: je(o) })));
 }, Wn = function(e) {
-  var t = e.className, o = e.colorModel, n = e.color, a = n === void 0 ? o.defaultColor : n, r = e.onChange, c = _t(e, ["className", "colorModel", "color", "onChange"]), p = G(null);
+  var t = e.className, o = e.colorModel, n = e.color, i = n === void 0 ? o.defaultColor : n, r = e.onChange, s = _t(e, ["className", "colorModel", "color", "onChange"]), p = q(null);
   jn(p);
-  var d = Fn(o, a, r), l = d[0], g = d[1], u = Fe(["react-colorful", t]);
-  return F.createElement("div", ze({}, c, { ref: p, className: u }), F.createElement(zn, { hsva: l, onChange: g }), F.createElement(Pn, { hue: l.h, onChange: g }), F.createElement($n, { hsva: l, onChange: g, className: "react-colorful__last-control" }));
+  var u = An(o, i, r), l = u[0], g = u[1], d = Ae(["react-colorful", t]);
+  return A.createElement("div", ze({}, s, { ref: p, className: d }), A.createElement(zn, { hsva: l, onChange: g }), A.createElement(Pn, { hue: l.h, onChange: g }), A.createElement($n, { hsva: l, onChange: g, className: "react-colorful__last-control" }));
 }, Vn = { defaultColor: { r: 0, g: 0, b: 0, a: 1 }, toHsva: Mn, fromHsva: Dn, equal: wt }, Un = function(e) {
-  return F.createElement(Wn, ze({}, e, { colorModel: Vn }));
+  return A.createElement(Wn, ze({}, e, { colorModel: Vn }));
 };
-function Gn(e) {
+function qn(e) {
   if (e = e.replace(/^#/, ""), /^[0-9A-Fa-f]{3}$/.test(e))
     e = e.split("").map((r) => r + r).join("");
   else if (!/^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(e))
     return null;
   const t = parseInt(e.substring(0, 2), 16), o = parseInt(e.substring(2, 4), 16), n = parseInt(e.substring(4, 6), 16);
-  let a = 1;
-  return e.length === 8 && (a = parseInt(e.substring(6, 8), 16) / 255), { r: t, g: o, b: n, a };
+  let i = 1;
+  return e.length === 8 && (i = parseInt(e.substring(6, 8), 16) / 255), { r: t, g: o, b: n, a: i };
 }
-const qn = "_section_cqfni_5", Xn = "_sectionTitle_cqfni_19", Kn = "_grid2_cqfni_33", Yn = "_grid4_cqfni_49", Jn = "_flexRow_cqfni_63", Zn = "_inputField_cqfni_87", Qn = "_labelContainer_cqfni_95", er = "_label_cqfni_95", tr = "_resetIcon_cqfni_129", or = "_inputContainer_cqfni_159", nr = "_buttonGroupContainer_cqfni_195", rr = "_input_cqfni_87", ar = "_dragHandle_cqfni_241", ir = "_dragHandleIcon_cqfni_271", lr = "_colorPreview_cqfni_281", sr = "_fontButton_cqfni_313", cr = "_alignButton_cqfni_345", dr = "_tabButtons_cqfni_377", m = {
-  section: qn,
+const Gn = "_section_cqfni_5", Xn = "_sectionTitle_cqfni_19", Kn = "_grid2_cqfni_33", Yn = "_grid4_cqfni_49", Jn = "_flexRow_cqfni_63", Zn = "_inputField_cqfni_87", Qn = "_labelContainer_cqfni_95", er = "_label_cqfni_95", tr = "_resetIcon_cqfni_129", or = "_inputContainer_cqfni_159", nr = "_buttonGroupContainer_cqfni_195", rr = "_input_cqfni_87", ir = "_dragHandle_cqfni_241", ar = "_dragHandleIcon_cqfni_271", lr = "_colorPreview_cqfni_281", cr = "_fontButton_cqfni_313", sr = "_alignButton_cqfni_345", dr = "_tabButtons_cqfni_377", m = {
+  section: Gn,
   sectionTitle: Xn,
   grid2: Kn,
   grid4: Yn,
@@ -2443,11 +2443,11 @@ const qn = "_section_cqfni_5", Xn = "_sectionTitle_cqfni_19", Kn = "_grid2_cqfni
   inputContainer: or,
   buttonGroupContainer: nr,
   input: rr,
-  dragHandle: ar,
-  dragHandleIcon: ir,
+  dragHandle: ir,
+  dragHandleIcon: ar,
   colorPreview: lr,
-  fontButton: sr,
-  alignButton: cr,
+  fontButton: cr,
+  alignButton: sr,
   tabButtons: dr
 }, ur = () => document.getElementById("inspector-canvas-root") || document.body;
 function Qe({
@@ -2455,12 +2455,12 @@ function Qe({
   value: t,
   onChange: o,
   originalValue: n,
-  onReset: a
+  onReset: i
 }) {
-  const { theme: r } = q(), c = n !== void 0 && t !== n, [p, d] = T(""), [l, g] = T(!1), [u, i] = T(!1), f = G(null), y = G(null), [_, x] = T({ top: 0, left: 0 }), L = Me(() => {
+  const { theme: r } = K(), s = n !== void 0 && t !== n, [p, u] = E(""), [l, g] = E(!1), [d, a] = E(!1), f = q(null), y = q(null), [_, x] = E({ top: 0, left: 0 }), L = Me(() => {
     if (t === "transparent") return { r: 255, g: 255, b: 255, a: 0 };
     if (t.startsWith("#"))
-      return Gn(t) || { r: 0, g: 0, b: 0, a: 1 };
+      return qn(t) || { r: 0, g: 0, b: 0, a: 1 };
     if (t.startsWith("rgb")) {
       const w = t.match(
         /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
@@ -2486,26 +2486,26 @@ function Qe({
     return t || "#000000";
   }, [t]);
   W(() => {
-    if (!u || !f.current) return;
+    if (!d || !f.current) return;
     (() => {
       if (!f.current) return;
       const P = f.current.getBoundingClientRect(), V = window.innerHeight, B = window.innerWidth, N = 220, oe = 280;
-      let Y = P.top - oe - 8, X = P.left;
-      Y < 8 && (Y = P.bottom + 8), X + N > B - 8 && (X = B - N - 8), X < 8 && (X = 8), Y + oe > V - 8 && (Y = V - oe - 8), x({ top: Y, left: X });
+      let Y = P.top - oe - 8, G = P.left;
+      Y < 8 && (Y = P.bottom + 8), G + N > B - 8 && (G = B - N - 8), G < 8 && (G = 8), Y + oe > V - 8 && (Y = V - oe - 8), x({ top: Y, left: G });
     })();
-  }, [u]), W(() => {
-    if (!u) return;
+  }, [d]), W(() => {
+    if (!d) return;
     const w = (B) => {
-      y.current && !y.current.contains(B.target) && f.current && !f.current.contains(B.target) && i(!1);
+      y.current && !y.current.contains(B.target) && f.current && !f.current.contains(B.target) && a(!1);
     }, P = (B) => {
-      B.key === "Escape" && i(!1);
+      B.key === "Escape" && a(!1);
     }, V = setTimeout(() => {
       document.addEventListener("mousedown", w), document.addEventListener("keydown", P);
     }, 100);
     return () => {
       clearTimeout(V), document.removeEventListener("mousedown", w), document.removeEventListener("keydown", P);
     };
-  }, [u]);
+  }, [d]);
   const C = (w) => {
     if (w.a < 1)
       o(`rgba(${w.r}, ${w.g}, ${w.b}, ${w.a})`);
@@ -2515,26 +2515,26 @@ function Qe({
     }
   }, M = (w) => {
     const P = w.target.value;
-    d(P), /^#[0-9A-Fa-f]{6}$/.test(P) && o(P);
+    u(P), /^#[0-9A-Fa-f]{6}$/.test(P) && o(P);
   }, k = () => {
-    g(!0), d(S);
-  }, A = () => {
+    g(!0), u(S);
+  }, F = () => {
     g(!1), p && /^#[0-9A-Fa-f]{6}$/.test(p) && o(p);
   }, $ = (w) => {
-    w.stopPropagation(), i(!u);
+    w.stopPropagation(), a(!d);
   };
   return /* @__PURE__ */ b("div", { className: m.inputField, children: [
     /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-      /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: e }),
-      c && a && /* @__PURE__ */ s(
+      /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: e }),
+      s && i && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: a,
+          onClick: i,
           className: m.resetIcon,
           style: { color: r.secondaryTextColor },
           title: "Reset to original",
-          children: /* @__PURE__ */ s(ie, { size: 12 })
+          children: /* @__PURE__ */ c(ae, { size: 12 })
         }
       )
     ] }),
@@ -2547,7 +2547,7 @@ function Qe({
           borderColor: r.inputBorderColor
         },
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "button",
             {
               ref: f,
@@ -2561,14 +2561,14 @@ function Qe({
               title: "Pick color"
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             Be,
             {
               type: "text",
               value: l ? p : S,
               onChange: M,
               onFocus: k,
-              onBlur: A,
+              onBlur: F,
               className: m.input,
               style: {
                 backgroundColor: "transparent",
@@ -2581,8 +2581,8 @@ function Qe({
         ]
       }
     ),
-    u && xt.createPortal(
-      /* @__PURE__ */ s(
+    d && xt.createPortal(
+      /* @__PURE__ */ c(
         "div",
         {
           ref: y,
@@ -2599,7 +2599,7 @@ function Qe({
             boxShadow: "var(--shadow-lg)",
             pointerEvents: "auto"
           },
-          children: /* @__PURE__ */ s(Un, { color: L, onChange: C })
+          children: /* @__PURE__ */ c(Un, { color: L, onChange: C })
         }
       ),
       ur()
@@ -2611,47 +2611,47 @@ function Q({
   value: t,
   onChange: o,
   min: n = 0,
-  max: a = 1e3,
+  max: i = 1e3,
   step: r = 1,
-  unit: c = "px",
+  unit: s = "px",
   originalValue: p,
-  onReset: d
+  onReset: u
 }) {
-  const { labels: l, theme: g } = q(), u = p !== void 0 && t !== p, [i, f] = T(!1), y = G(0), _ = G(0), x = G(null), S = ((k) => {
+  const { labels: l, theme: g } = K(), d = p !== void 0 && t !== p, [a, f] = E(!1), y = q(0), _ = q(0), x = q(null), S = ((k) => {
     if (!k) return 0;
-    const A = parseFloat(k.replace(/[^\d.-]/g, ""));
-    return isNaN(A) ? 0 : A;
+    const F = parseFloat(k.replace(/[^\d.-]/g, ""));
+    return isNaN(F) ? 0 : F;
   })(t), C = (k) => {
     o(k.target.value);
   };
   W(() => {
-    if (!i) return;
+    if (!a) return;
     const k = ($) => {
       const w = $.clientX - y.current, P = Math.round(w / 2) * r;
       let V = _.current + P;
-      V = Math.max(n, Math.min(a, V)), o(`${V}${c}`);
-    }, A = () => {
+      V = Math.max(n, Math.min(i, V)), o(`${V}${s}`);
+    }, F = () => {
       f(!1), document.body.style.cursor = "";
     };
-    return document.addEventListener("mousemove", k), document.addEventListener("mouseup", A), () => {
-      document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", A);
+    return document.addEventListener("mousemove", k), document.addEventListener("mouseup", F), () => {
+      document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", F);
     };
-  }, [i, r, n, a, c, o]);
+  }, [a, r, n, i, s, o]);
   const M = (k) => {
     k.preventDefault(), f(!0), y.current = k.clientX, _.current = S, document.body.style.cursor = "ew-resize";
   };
   return /* @__PURE__ */ b("div", { className: m.inputField, children: [
     /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-      /* @__PURE__ */ s("label", { className: m.label, style: { color: g.textColor }, children: e }),
-      u && d && /* @__PURE__ */ s(
+      /* @__PURE__ */ c("label", { className: m.label, style: { color: g.textColor }, children: e }),
+      d && u && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: d,
+          onClick: u,
           className: m.resetIcon,
           style: { color: g.secondaryTextColor },
           title: "Reset to original",
-          children: /* @__PURE__ */ s(ie, { size: 12 })
+          children: /* @__PURE__ */ c(ae, { size: 12 })
         }
       )
     ] }),
@@ -2664,7 +2664,7 @@ function Q({
           borderColor: g.inputBorderColor
         },
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             Be,
             {
               type: "text",
@@ -2677,7 +2677,7 @@ function Q({
               }
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ c(
             "div",
             {
               ref: x,
@@ -2685,9 +2685,9 @@ function Q({
               className: m.dragHandle,
               style: {
                 color: g.secondaryTextColor || g.textColor,
-                opacity: i ? 1 : 0.6
+                opacity: a ? 1 : 0.6
               },
-              children: /* @__PURE__ */ s(fo, { className: m.dragHandleIcon })
+              children: /* @__PURE__ */ c(fo, { className: m.dragHandleIcon })
             }
           )
         ]
@@ -2701,12 +2701,12 @@ function pr({
   originalStyles: o,
   onResetProperty: n
 }) {
-  const { labels: a } = q();
+  const { labels: i } = K();
   return /* @__PURE__ */ b("div", { className: m.section, children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       Qe,
       {
-        label: a.backgroundColorLabel || "Background Color",
+        label: i.backgroundColorLabel || "Background Color",
         value: e.backgroundColor || "#ffffff",
         onChange: (r) => t("backgroundColor", r),
         originalValue: o.backgroundColor,
@@ -2714,10 +2714,10 @@ function pr({
       }
     ),
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.heightLabel || "Height",
+          label: i.heightLabel || "Height",
           value: e.height,
           onChange: (r) => t("height", r),
           min: 0,
@@ -2728,10 +2728,10 @@ function pr({
           onReset: () => n("height")
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.widthLabel || "Width",
+          label: i.widthLabel || "Width",
           value: e.width,
           onChange: (r) => t("width", r),
           min: 0,
@@ -2752,7 +2752,7 @@ const gr = "_trigger_uqfi2_1", fr = "_content_uqfi2_83", hr = "_viewport_uqfi2_1
   viewportPopper: mr,
   item: br
 }, vr = () => document.getElementById("inspector-canvas-root") || document.body, St = U.createContext(null);
-function Ae() {
+function Fe() {
   const e = U.useContext(St);
   if (!e)
     throw new Error("Select components must be used within a Select");
@@ -2763,15 +2763,15 @@ function ue({
   defaultValue: t,
   onValueChange: o,
   children: n,
-  open: a,
+  open: i,
   onOpenChange: r
 }) {
-  const [c, p] = U.useState(t), [d, l] = U.useState(!1), g = U.useRef(null), u = U.useRef(null), i = U.useRef(/* @__PURE__ */ new Map()), f = e !== void 0 ? e : c, y = a !== void 0 ? a : d, _ = U.useCallback((C) => {
-    a === void 0 && l(C), r?.(C);
-  }, [a, r]), x = U.useCallback((C) => {
+  const [s, p] = U.useState(t), [u, l] = U.useState(!1), g = U.useRef(null), d = U.useRef(null), a = U.useRef(/* @__PURE__ */ new Map()), f = e !== void 0 ? e : s, y = i !== void 0 ? i : u, _ = U.useCallback((C) => {
+    i === void 0 && l(C), r?.(C);
+  }, [i, r]), x = U.useCallback((C) => {
     e === void 0 && p(C), o?.(C), _(!1);
   }, [e, o, _]), L = U.useCallback((C, M) => {
-    i.current.set(C, M);
+    a.current.set(C, M);
   }, []), S = U.useMemo(
     () => ({
       value: f,
@@ -2779,29 +2779,29 @@ function ue({
       open: y,
       setOpen: _,
       triggerRef: g,
-      contentRef: u,
-      itemLabels: i.current,
+      contentRef: d,
+      itemLabels: a.current,
       registerItem: L
     }),
     [f, x, y, _, L]
   );
-  return /* @__PURE__ */ s(St.Provider, { value: S, children: n });
+  return /* @__PURE__ */ c(St.Provider, { value: S, children: n });
 }
 function pe({ placeholder: e }) {
-  const { value: t, itemLabels: o } = Ae(), n = t && o.has(t) ? o.get(t) : t || e;
-  return /* @__PURE__ */ s("span", { "data-slot": "select-value", children: n });
+  const { value: t, itemLabels: o } = Fe(), n = t && o.has(t) ? o.get(t) : t || e;
+  return /* @__PURE__ */ c("span", { "data-slot": "select-value", children: n });
 }
 function ge({
   className: e,
   size: t = "default",
   children: o,
   style: n,
-  ...a
+  ...i
 }) {
-  const { open: r, setOpen: c, triggerRef: p } = Ae(), { theme: d } = q(), l = (u) => {
-    u.stopPropagation(), c(!r);
-  }, g = (u) => {
-    (u.key === "Enter" || u.key === " " || u.key === "ArrowDown") && (u.preventDefault(), c(!0));
+  const { open: r, setOpen: s, triggerRef: p } = Fe(), { theme: u } = K(), l = (d) => {
+    d.stopPropagation(), s(!r);
+  }, g = (d) => {
+    (d.key === "Enter" || d.key === " " || d.key === "ArrowDown") && (d.preventDefault(), s(!0));
   };
   return /* @__PURE__ */ b(
     "button",
@@ -2815,16 +2815,16 @@ function ge({
       "data-size": t,
       className: re(Ie.trigger, e),
       style: {
-        borderColor: d.borderColor,
-        color: d.textColor,
+        borderColor: u.borderColor,
+        color: u.textColor,
         ...n
       },
       onClick: l,
       onKeyDown: g,
-      ...a,
+      ...i,
       children: [
         o,
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           xe,
           {
             style: { width: "1rem", height: "1rem", opacity: 0.5 }
@@ -2839,10 +2839,10 @@ function fe({
   children: t,
   position: o = "popper",
   align: n = "center",
-  style: a,
+  style: i,
   sideOffset: r = 4
 }) {
-  const { open: c, setOpen: p, triggerRef: d, contentRef: l, value: g } = Ae(), { theme: u } = q(), [i, f] = U.useState(-1), y = U.useRef(/* @__PURE__ */ new Map()), [_, x] = U.useState({
+  const { open: s, setOpen: p, triggerRef: u, contentRef: l, value: g } = Fe(), { theme: d } = K(), [a, f] = U.useState(-1), y = U.useRef(/* @__PURE__ */ new Map()), [_, x] = U.useState({
     top: 0,
     left: 0,
     width: 0,
@@ -2850,13 +2850,13 @@ function fe({
     openAbove: !1
   });
   if (U.useLayoutEffect(() => {
-    if (!c || !d.current) return;
+    if (!s || !u.current) return;
     const S = requestAnimationFrame(() => {
-      if (!d.current) return;
-      const C = d.current.getBoundingClientRect(), M = window.innerHeight, k = window.innerWidth, A = d.current.closest('[class*="controlBox"]');
+      if (!u.current) return;
+      const C = u.current.getBoundingClientRect(), M = window.innerHeight, k = window.innerWidth, F = u.current.closest('[class*="controlBox"]');
       let $ = 300, w = !1;
-      if (A) {
-        const V = A.getBoundingClientRect(), B = V.bottom - C.bottom - r - 16, N = C.top - V.top - r - 16;
+      if (F) {
+        const V = F.getBoundingClientRect(), B = V.bottom - C.bottom - r - 16, N = C.top - V.top - r - 16;
         w = B < 150 && N > B, $ = Math.max(Math.min(w ? N : B, 300), 100);
       } else {
         const V = M - C.bottom - r, B = C.top - r;
@@ -2872,10 +2872,10 @@ function fe({
       });
     });
     return () => cancelAnimationFrame(S);
-  }, [c, r]), U.useEffect(() => {
-    if (!c) return;
+  }, [s, r]), U.useEffect(() => {
+    if (!s) return;
     const S = (k) => {
-      l.current && !l.current.contains(k.target) && d.current && !d.current.contains(k.target) && p(!1);
+      l.current && !l.current.contains(k.target) && u.current && !u.current.contains(k.target) && p(!1);
     }, C = (k) => {
       (k.key === "Escape" || k.key === "Tab") && p(!1);
     }, M = setTimeout(() => {
@@ -2884,36 +2884,36 @@ function fe({
     return () => {
       clearTimeout(M), document.removeEventListener("mousedown", S), document.removeEventListener("keydown", C);
     };
-  }, [c, p]), U.useEffect(() => {
-    if (!c) return;
+  }, [s, p]), U.useEffect(() => {
+    if (!s) return;
     const S = (C) => {
       const M = y.current.size;
       if (C.key === "ArrowDown")
         C.preventDefault(), f((k) => {
-          const A = k < M - 1 ? k + 1 : 0;
-          return y.current.get(A)?.scrollIntoView({ block: "nearest" }), A;
+          const F = k < M - 1 ? k + 1 : 0;
+          return y.current.get(F)?.scrollIntoView({ block: "nearest" }), F;
         });
       else if (C.key === "ArrowUp")
         C.preventDefault(), f((k) => {
-          const A = k > 0 ? k - 1 : M - 1;
-          return y.current.get(A)?.scrollIntoView({ block: "nearest" }), A;
+          const F = k > 0 ? k - 1 : M - 1;
+          return y.current.get(F)?.scrollIntoView({ block: "nearest" }), F;
         });
-      else if (C.key === "Enter" && i >= 0) {
+      else if (C.key === "Enter" && a >= 0) {
         C.preventDefault();
-        const k = y.current.get(i);
+        const k = y.current.get(a);
         k && k.click();
       }
     };
     return document.addEventListener("keydown", S), () => document.removeEventListener("keydown", S);
-  }, [c, i]), U.useEffect(() => {
-    if (c && g) {
+  }, [s, a]), U.useEffect(() => {
+    if (s && g) {
       const S = Array.from(y.current.entries()).find(
         ([C, M]) => M.dataset.value === g
       )?.[0];
       S !== void 0 && (f(S), y.current.get(S)?.scrollIntoView({ block: "nearest" }));
     }
-  }, [c, g]), !c) return null;
-  const L = /* @__PURE__ */ s(
+  }, [s, g]), !s) return null;
+  const L = /* @__PURE__ */ c(
     "div",
     {
       ref: l,
@@ -2932,15 +2932,15 @@ function fe({
         maxHeight: `${_.maxHeight}px`,
         overflowY: "auto",
         zIndex: "var(--z-inspector-popover)",
-        backgroundColor: u.backgroundColor,
-        color: u.textColor,
-        borderColor: u.borderColor,
-        ...a
+        backgroundColor: d.backgroundColor,
+        color: d.textColor,
+        borderColor: d.borderColor,
+        ...i
       },
-      children: /* @__PURE__ */ s("div", { className: o === "popper" ? Ie.viewportPopper : Ie.viewport, children: U.Children.map(t, (S, C) => U.isValidElement(S) ? U.cloneElement(S, {
+      children: /* @__PURE__ */ c("div", { className: o === "popper" ? Ie.viewportPopper : Ie.viewport, children: U.Children.map(t, (S, C) => U.isValidElement(S) ? U.cloneElement(S, {
         _index: C,
         _itemRefs: y,
-        _focusedIndex: i
+        _focusedIndex: a
       }) : S) })
     }
   );
@@ -2951,33 +2951,33 @@ function he({
   children: t,
   className: o,
   style: n,
-  disabled: a,
+  disabled: i,
   _index: r,
-  _itemRefs: c,
+  _itemRefs: s,
   _focusedIndex: p
 }) {
-  const { value: d, onValueChange: l, registerItem: g } = Ae(), { theme: u } = q(), i = d === e, f = p === r, y = U.useRef(null);
+  const { value: u, onValueChange: l, registerItem: g } = Fe(), { theme: d } = K(), a = u === e, f = p === r, y = U.useRef(null);
   U.useEffect(() => {
     t && typeof t == "string" && g(e, t);
   }, [e, t, g]), U.useEffect(() => {
-    if (r !== void 0 && c && y.current)
-      return c.current.set(r, y.current), () => {
-        c.current.delete(r);
+    if (r !== void 0 && s && y.current)
+      return s.current.set(r, y.current), () => {
+        s.current.delete(r);
       };
-  }, [r, c]);
+  }, [r, s]);
   const _ = (x) => {
-    x.stopPropagation(), a || l?.(e);
+    x.stopPropagation(), i || l?.(e);
   };
   return /* @__PURE__ */ b(
     "div",
     {
       ref: y,
       role: "option",
-      "aria-selected": i,
+      "aria-selected": a,
       "data-slot": "select-item",
       "data-value": e,
-      "data-state": i ? "checked" : "unchecked",
-      "data-disabled": a,
+      "data-state": a ? "checked" : "unchecked",
+      "data-disabled": i,
       className: re(Ie.item, o),
       style: {
         position: "relative",
@@ -2985,21 +2985,21 @@ function he({
         alignItems: "center",
         padding: "var(--spacing-1-5) var(--spacing-8) var(--spacing-1-5) var(--spacing-2)",
         fontSize: "var(--text-sm)",
-        cursor: a ? "not-allowed" : "pointer",
-        opacity: a ? 0.5 : 1,
-        backgroundColor: f ? u.inputBackgroundColor || "rgba(0, 0, 0, 0.05)" : "transparent",
+        cursor: i ? "not-allowed" : "pointer",
+        opacity: i ? 0.5 : 1,
+        backgroundColor: f ? d.inputBackgroundColor || "rgba(0, 0, 0, 0.05)" : "transparent",
         ...n
       },
       onClick: _,
       onMouseEnter: (x) => {
-        a || (x.currentTarget.style.backgroundColor = u.inputBackgroundColor || "rgba(0, 0, 0, 0.05)");
+        i || (x.currentTarget.style.backgroundColor = d.inputBackgroundColor || "rgba(0, 0, 0, 0.05)");
       },
       onMouseLeave: (x) => {
-        !a && !f && (x.currentTarget.style.backgroundColor = "transparent");
+        !i && !f && (x.currentTarget.style.backgroundColor = "transparent");
       },
       children: [
         t,
-        i && /* @__PURE__ */ s(
+        a && /* @__PURE__ */ c(
           "span",
           {
             style: {
@@ -3011,7 +3011,7 @@ function he({
               width: "1rem",
               height: "1rem"
             },
-            children: /* @__PURE__ */ s(Ct, { style: { width: "1rem", height: "1rem" } })
+            children: /* @__PURE__ */ c(Ct, { style: { width: "1rem", height: "1rem" } })
           }
         )
       ]
@@ -3024,38 +3024,38 @@ function yr({
   originalStyles: o,
   onResetProperty: n
 }) {
-  const { labels: a, theme: r } = q(), c = [
-    { label: a.displayBlock || "Block", value: "block" },
-    { label: a.displayInline || "Inline", value: "inline" },
-    { label: a.displayInlineBlock || "Inline Block", value: "inline-block" },
-    { label: a.displayFlex || "Flex", value: "flex" },
-    { label: a.displayGrid || "Grid", value: "grid" },
-    { label: a.displayNone || "None", value: "none" }
+  const { labels: i, theme: r } = K(), s = [
+    { label: i.displayBlock || "Block", value: "block" },
+    { label: i.displayInline || "Inline", value: "inline" },
+    { label: i.displayInlineBlock || "Inline Block", value: "inline-block" },
+    { label: i.displayFlex || "Flex", value: "flex" },
+    { label: i.displayGrid || "Grid", value: "grid" },
+    { label: i.displayNone || "None", value: "none" }
   ], p = [
-    { label: a.justifyContentFlexStart || "Flex Start", value: "flex-start" },
-    { label: a.justifyContentCenter || "Center", value: "center" },
-    { label: a.justifyContentFlexEnd || "Flex End", value: "flex-end" },
-    { label: a.justifyContentSpaceBetween || "Space Between", value: "space-between" },
-    { label: a.justifyContentSpaceAround || "Space Around", value: "space-around" },
-    { label: a.justifyContentSpaceEvenly || "Space Evenly", value: "space-evenly" }
-  ], d = [
-    { label: a.alignItemsFlexStart || "Flex Start", value: "flex-start" },
-    { label: a.alignItemsCenter || "Center", value: "center" },
-    { label: a.alignItemsFlexEnd || "Flex End", value: "flex-end" },
-    { label: a.alignItemsStretch || "Stretch", value: "stretch" },
-    { label: a.alignItemsBaseline || "Baseline", value: "baseline" }
+    { label: i.justifyContentFlexStart || "Flex Start", value: "flex-start" },
+    { label: i.justifyContentCenter || "Center", value: "center" },
+    { label: i.justifyContentFlexEnd || "Flex End", value: "flex-end" },
+    { label: i.justifyContentSpaceBetween || "Space Between", value: "space-between" },
+    { label: i.justifyContentSpaceAround || "Space Around", value: "space-around" },
+    { label: i.justifyContentSpaceEvenly || "Space Evenly", value: "space-evenly" }
+  ], u = [
+    { label: i.alignItemsFlexStart || "Flex Start", value: "flex-start" },
+    { label: i.alignItemsCenter || "Center", value: "center" },
+    { label: i.alignItemsFlexEnd || "Flex End", value: "flex-end" },
+    { label: i.alignItemsStretch || "Stretch", value: "stretch" },
+    { label: i.alignItemsBaseline || "Baseline", value: "baseline" }
   ], l = [
-    { label: a.flexDirectionRow || "Row", value: "row" },
-    { label: a.flexDirectionRowReverse || "Row Reverse", value: "row-reverse" },
-    { label: a.flexDirectionColumn || "Column", value: "column" },
-    { label: a.flexDirectionColumnReverse || "Column Reverse", value: "column-reverse" }
+    { label: i.flexDirectionRow || "Row", value: "row" },
+    { label: i.flexDirectionRowReverse || "Row Reverse", value: "row-reverse" },
+    { label: i.flexDirectionColumn || "Column", value: "column" },
+    { label: i.flexDirectionColumnReverse || "Column Reverse", value: "column-reverse" }
   ];
   return /* @__PURE__ */ b("div", { className: m.section, children: [
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.displayLabel || "Display" }),
-          e.display !== o.display && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.displayLabel || "Display" }),
+          e.display !== o.display && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3063,11 +3063,11 @@ function yr({
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3081,7 +3081,7 @@ function yr({
                 value: e.display || "block",
                 onValueChange: (g) => t("display", g),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3090,17 +3090,17 @@ function yr({
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: c.map((g) => /* @__PURE__ */ s(
+                      children: s.map((g) => /* @__PURE__ */ c(
                         he,
                         {
                           value: g.value,
@@ -3119,10 +3119,10 @@ function yr({
           }
         )
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.opacityLabel || "Opacity",
+          label: i.opacityLabel || "Opacity",
           value: e.opacity,
           onChange: (g) => t("opacity", g),
           min: 0,
@@ -3135,10 +3135,10 @@ function yr({
       )
     ] }),
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.flexLabel || "Flex",
+          label: i.flexLabel || "Flex",
           value: e.flex,
           onChange: (g) => t("flex", g),
           min: 0,
@@ -3151,8 +3151,8 @@ function yr({
       ),
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.flexDirectionLabel || "Flex Direction" }),
-          e.flexDirection !== o.flexDirection && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.flexDirectionLabel || "Flex Direction" }),
+          e.flexDirection !== o.flexDirection && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3160,11 +3160,11 @@ function yr({
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3178,7 +3178,7 @@ function yr({
                 value: e.flexDirection || "row",
                 onValueChange: (g) => t("flexDirection", g),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3187,17 +3187,17 @@ function yr({
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: l.map((g) => /* @__PURE__ */ s(
+                      children: l.map((g) => /* @__PURE__ */ c(
                         he,
                         {
                           value: g.value,
@@ -3220,8 +3220,8 @@ function yr({
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.justifyContentLabel || "Justify Content" }),
-          e.justifyContent !== o.justifyContent && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.justifyContentLabel || "Justify Content" }),
+          e.justifyContent !== o.justifyContent && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3229,11 +3229,11 @@ function yr({
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3247,7 +3247,7 @@ function yr({
                 value: e.justifyContent || "flex-start",
                 onValueChange: (g) => t("justifyContent", g),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3256,17 +3256,17 @@ function yr({
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: p.map((g) => /* @__PURE__ */ s(
+                      children: p.map((g) => /* @__PURE__ */ c(
                         he,
                         {
                           value: g.value,
@@ -3287,8 +3287,8 @@ function yr({
       ] }),
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.alignItemsLabel || "Align Items" }),
-          e.alignItems !== o.alignItems && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.alignItemsLabel || "Align Items" }),
+          e.alignItems !== o.alignItems && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3296,11 +3296,11 @@ function yr({
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3314,7 +3314,7 @@ function yr({
                 value: e.alignItems || "stretch",
                 onValueChange: (g) => t("alignItems", g),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3323,17 +3323,17 @@ function yr({
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: d.map((g) => /* @__PURE__ */ s(
+                      children: u.map((g) => /* @__PURE__ */ c(
                         he,
                         {
                           value: g.value,
@@ -3361,17 +3361,17 @@ function Cr({
   originalStyles: o,
   onResetProperty: n
 }) {
-  const { labels: a, theme: r } = q(), c = [
-    { label: a.objectFitFill || "Fill", value: "fill" },
-    { label: a.objectFitContain || "Contain", value: "contain" },
-    { label: a.objectFitCover || "Cover", value: "cover" },
-    { label: a.objectFitNone || "None", value: "none" },
-    { label: a.objectFitScaleDown || "Scale Down", value: "scale-down" }
+  const { labels: i, theme: r } = K(), s = [
+    { label: i.objectFitFill || "Fill", value: "fill" },
+    { label: i.objectFitContain || "Contain", value: "contain" },
+    { label: i.objectFitCover || "Cover", value: "cover" },
+    { label: i.objectFitNone || "None", value: "none" },
+    { label: i.objectFitScaleDown || "Scale Down", value: "scale-down" }
   ];
-  return /* @__PURE__ */ s("div", { className: m.section, children: /* @__PURE__ */ b("div", { children: [
+  return /* @__PURE__ */ c("div", { className: m.section, children: /* @__PURE__ */ b("div", { children: [
     /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-      /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.objectFitLabel || "Object Fit" }),
-      e.objectFit !== o.objectFit && /* @__PURE__ */ s(
+      /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.objectFitLabel || "Object Fit" }),
+      e.objectFit !== o.objectFit && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
@@ -3379,11 +3379,11 @@ function Cr({
           className: m.resetIcon,
           style: { color: r.secondaryTextColor },
           title: "Reset to original",
-          children: /* @__PURE__ */ s(ie, { size: 12 })
+          children: /* @__PURE__ */ c(ae, { size: 12 })
         }
       )
     ] }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ c(
       "div",
       {
         className: m.inputContainer,
@@ -3397,7 +3397,7 @@ function Cr({
             value: e.objectFit || "fill",
             onValueChange: (p) => t("objectFit", p),
             children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 ge,
                 {
                   className: m.input,
@@ -3406,17 +3406,17 @@ function Cr({
                     color: r.inputTextColor
                   },
                   size: "sm",
-                  children: /* @__PURE__ */ s(pe, {})
+                  children: /* @__PURE__ */ c(pe, {})
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 fe,
                 {
                   style: {
                     backgroundColor: r.backgroundColor,
                     borderColor: r.borderColor
                   },
-                  children: c.map((p) => /* @__PURE__ */ s(
+                  children: s.map((p) => /* @__PURE__ */ c(
                     he,
                     {
                       value: p.value,
@@ -3450,37 +3450,37 @@ const xr = [
   { label: "Justify", value: "justify", Icon: _o }
 ];
 function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
-  const { labels: a, theme: r } = q(), c = [
-    { label: a.fontSizeXS || "XS", value: "0.75rem" },
-    { label: a.fontSizeSM || "SM", value: "0.875rem" },
-    { label: a.fontSizeBase || "Base", value: "1rem" },
-    { label: a.fontSizeLG || "LG", value: "1.125rem" },
-    { label: a.fontSizeXL || "XL", value: "1.25rem" },
-    { label: a.fontSize2XL || "2XL", value: "1.5rem" },
-    { label: a.fontSize3XL || "3XL", value: "1.875rem" },
-    { label: a.fontSize4XL || "4XL", value: "2.25rem" },
-    { label: a.fontSize5XL || "5XL", value: "3rem" }
+  const { labels: i, theme: r } = K(), s = [
+    { label: i.fontSizeXS || "XS", value: "0.75rem" },
+    { label: i.fontSizeSM || "SM", value: "0.875rem" },
+    { label: i.fontSizeBase || "Base", value: "1rem" },
+    { label: i.fontSizeLG || "LG", value: "1.125rem" },
+    { label: i.fontSizeXL || "XL", value: "1.25rem" },
+    { label: i.fontSize2XL || "2XL", value: "1.5rem" },
+    { label: i.fontSize3XL || "3XL", value: "1.875rem" },
+    { label: i.fontSize4XL || "4XL", value: "2.25rem" },
+    { label: i.fontSize5XL || "5XL", value: "3rem" }
   ], p = [
-    { label: a.fontWeightThin || "Thin", value: "100" },
-    { label: a.fontWeightExtralight || "Extralight", value: "200" },
-    { label: a.fontWeightNormal || "Normal", value: "400" },
-    { label: a.fontWeightMedium || "Medium", value: "500" },
-    { label: a.fontWeightSemibold || "Semibold", value: "600" },
-    { label: a.fontWeightBold || "Bold", value: "700" },
-    { label: a.fontWeightExtrabold || "Extrabold", value: "800" },
-    { label: a.fontWeightBlack || "Black", value: "900" }
-  ], d = [
-    { label: a.textDecorationNone || "None", value: "none" },
-    { label: a.textDecorationUnderline || "Underline", value: "underline" },
-    { label: a.textDecorationLineThrough || "Line Through", value: "line-through" },
-    { label: a.textDecorationOverline || "Overline", value: "overline" }
+    { label: i.fontWeightThin || "Thin", value: "100" },
+    { label: i.fontWeightExtralight || "Extralight", value: "200" },
+    { label: i.fontWeightNormal || "Normal", value: "400" },
+    { label: i.fontWeightMedium || "Medium", value: "500" },
+    { label: i.fontWeightSemibold || "Semibold", value: "600" },
+    { label: i.fontWeightBold || "Bold", value: "700" },
+    { label: i.fontWeightExtrabold || "Extrabold", value: "800" },
+    { label: i.fontWeightBlack || "Black", value: "900" }
+  ], u = [
+    { label: i.textDecorationNone || "None", value: "none" },
+    { label: i.textDecorationUnderline || "Underline", value: "underline" },
+    { label: i.textDecorationLineThrough || "Line Through", value: "line-through" },
+    { label: i.textDecorationOverline || "Overline", value: "overline" }
   ];
   return /* @__PURE__ */ b("div", { className: m.section, children: [
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Qe,
         {
-          label: a.colorLabel || "Color",
+          label: i.colorLabel || "Color",
           value: e.color || "#000000",
           onChange: (l) => t("color", l),
           originalValue: o.color,
@@ -3489,8 +3489,8 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
       ),
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.fontSizeLabel || "Font Size" }),
-          e.fontSize !== o.fontSize && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.fontSizeLabel || "Font Size" }),
+          e.fontSize !== o.fontSize && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3498,11 +3498,11 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3516,7 +3516,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                 value: e.fontSize || "1rem",
                 onValueChange: (l) => t("fontSize", l),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3525,17 +3525,17 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: c.map((l) => /* @__PURE__ */ s(
+                      children: s.map((l) => /* @__PURE__ */ c(
                         he,
                         {
                           value: l.value,
@@ -3558,8 +3558,8 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.fontWeightLabel || "Font Weight" }),
-          e.fontWeight !== o.fontWeight && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.fontWeightLabel || "Font Weight" }),
+          e.fontWeight !== o.fontWeight && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3567,11 +3567,11 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3585,7 +3585,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                 value: e.fontWeight || "400",
                 onValueChange: (l) => t("fontWeight", l),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3594,17 +3594,17 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: p.map((l) => /* @__PURE__ */ s(
+                      children: p.map((l) => /* @__PURE__ */ c(
                         he,
                         {
                           value: l.value,
@@ -3625,8 +3625,8 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
       ] }),
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.textDecorationLabel || "Text Decoration" }),
-          e.textDecoration !== o.textDecoration && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.textDecorationLabel || "Text Decoration" }),
+          e.textDecoration !== o.textDecoration && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3634,11 +3634,11 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3652,7 +3652,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                 value: e.textDecoration || "none",
                 onValueChange: (l) => t("textDecoration", l),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3661,17 +3661,17 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: d.map((l) => /* @__PURE__ */ s(
+                      children: u.map((l) => /* @__PURE__ */ c(
                         he,
                         {
                           value: l.value,
@@ -3693,8 +3693,8 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
     ] }),
     /* @__PURE__ */ b("div", { children: [
       /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-        /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.fontFamilyLabel || "Font Family" }),
-        e.fontFamily !== o.fontFamily && /* @__PURE__ */ s(
+        /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.fontFamilyLabel || "Font Family" }),
+        e.fontFamily !== o.fontFamily && /* @__PURE__ */ c(
           "button",
           {
             type: "button",
@@ -3702,11 +3702,11 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
             className: m.resetIcon,
             style: { color: r.secondaryTextColor },
             title: "Reset to original",
-            children: /* @__PURE__ */ s(ie, { size: 12 })
+            children: /* @__PURE__ */ c(ae, { size: 12 })
           }
         )
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "div",
         {
           className: $e(
@@ -3717,7 +3717,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
             backgroundColor: r.inputBackgroundColor,
             borderColor: r.inputBorderColor
           },
-          children: /* @__PURE__ */ s("div", { className: $e(m.flexRow, m.tabButtons), children: xr.map((l) => /* @__PURE__ */ s(
+          children: /* @__PURE__ */ c("div", { className: $e(m.flexRow, m.tabButtons), children: xr.map((l) => /* @__PURE__ */ c(
             ye,
             {
               variant: e.fontFamily === l.value ? "default" : "ghost",
@@ -3736,8 +3736,8 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
     ] }),
     /* @__PURE__ */ b("div", { children: [
       /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-        /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.textAlignLabel || "Text Align" }),
-        e.textAlign !== o.textAlign && /* @__PURE__ */ s(
+        /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.textAlignLabel || "Text Align" }),
+        e.textAlign !== o.textAlign && /* @__PURE__ */ c(
           "button",
           {
             type: "button",
@@ -3745,11 +3745,11 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
             className: m.resetIcon,
             style: { color: r.secondaryTextColor },
             title: "Reset to original",
-            children: /* @__PURE__ */ s(ie, { size: 12 })
+            children: /* @__PURE__ */ c(ae, { size: 12 })
           }
         )
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "div",
         {
           className: $e(
@@ -3760,7 +3760,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
             backgroundColor: r.inputBackgroundColor,
             borderColor: r.inputBorderColor
           },
-          children: /* @__PURE__ */ s("div", { className: m.grid4, children: _r.map((l) => /* @__PURE__ */ s(
+          children: /* @__PURE__ */ c("div", { className: m.grid4, children: _r.map((l) => /* @__PURE__ */ c(
             ye,
             {
               variant: e.textAlign === l.value ? "default" : "ghost",
@@ -3771,7 +3771,7 @@ function kr({ styles: e, onChange: t, originalStyles: o, onResetProperty: n }) {
                 backgroundColor: e.textAlign === l.value ? r.buttonColor : "transparent",
                 color: e.textAlign === l.value ? r.buttonTextColor : r.textColor
               },
-              children: /* @__PURE__ */ s(l.Icon, { className: m.alignIcon })
+              children: /* @__PURE__ */ c(l.Icon, { className: m.alignIcon })
             },
             l.value
           )) })
@@ -3786,23 +3786,23 @@ function wr({
   originalStyles: o,
   onResetProperty: n
 }) {
-  const { labels: a, theme: r } = q(), c = [
-    { label: a.borderStyleSolid || "Solid", value: "solid" },
-    { label: a.borderStyleDashed || "Dashed", value: "dashed" },
-    { label: a.borderStyleDotted || "Dotted", value: "dotted" },
-    { label: a.borderStyleDouble || "Double", value: "double" },
-    { label: a.borderStyleGroove || "Groove", value: "groove" },
-    { label: a.borderStyleRidge || "Ridge", value: "ridge" },
-    { label: a.borderStyleInset || "Inset", value: "inset" },
-    { label: a.borderStyleOutset || "Outset", value: "outset" },
-    { label: a.borderStyleNone || "None", value: "none" }
+  const { labels: i, theme: r } = K(), s = [
+    { label: i.borderStyleSolid || "Solid", value: "solid" },
+    { label: i.borderStyleDashed || "Dashed", value: "dashed" },
+    { label: i.borderStyleDotted || "Dotted", value: "dotted" },
+    { label: i.borderStyleDouble || "Double", value: "double" },
+    { label: i.borderStyleGroove || "Groove", value: "groove" },
+    { label: i.borderStyleRidge || "Ridge", value: "ridge" },
+    { label: i.borderStyleInset || "Inset", value: "inset" },
+    { label: i.borderStyleOutset || "Outset", value: "outset" },
+    { label: i.borderStyleNone || "None", value: "none" }
   ];
   return /* @__PURE__ */ b("div", { className: m.section, children: [
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.borderRadiusLabel || "Border Radius",
+          label: i.borderRadiusLabel || "Border Radius",
           value: e.borderRadius,
           onChange: (p) => t("borderRadius", p),
           min: 0,
@@ -3813,10 +3813,10 @@ function wr({
           onReset: () => n("borderRadius")
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Q,
         {
-          label: a.borderWidthLabel || "Border Width",
+          label: i.borderWidthLabel || "Border Width",
           value: e.borderWidth,
           onChange: (p) => t("borderWidth", p),
           min: 0,
@@ -3829,10 +3829,10 @@ function wr({
       )
     ] }),
     /* @__PURE__ */ b("div", { className: m.grid2, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         Qe,
         {
-          label: a.borderColorLabel || "Border Color",
+          label: i.borderColorLabel || "Border Color",
           value: e.borderColor || "#000000",
           onChange: (p) => t("borderColor", p),
           originalValue: o.borderColor,
@@ -3841,8 +3841,8 @@ function wr({
       ),
       /* @__PURE__ */ b("div", { children: [
         /* @__PURE__ */ b("div", { className: m.labelContainer, children: [
-          /* @__PURE__ */ s("label", { className: m.label, style: { color: r.textColor }, children: a.borderStyleLabel || "Border Style" }),
-          e.borderStyle !== o.borderStyle && /* @__PURE__ */ s(
+          /* @__PURE__ */ c("label", { className: m.label, style: { color: r.textColor }, children: i.borderStyleLabel || "Border Style" }),
+          e.borderStyle !== o.borderStyle && /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -3850,11 +3850,11 @@ function wr({
               className: m.resetIcon,
               style: { color: r.secondaryTextColor },
               title: "Reset to original",
-              children: /* @__PURE__ */ s(ie, { size: 12 })
+              children: /* @__PURE__ */ c(ae, { size: 12 })
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: m.inputContainer,
@@ -3868,7 +3868,7 @@ function wr({
                 value: e.borderStyle || "solid",
                 onValueChange: (p) => t("borderStyle", p),
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     ge,
                     {
                       className: m.input,
@@ -3877,17 +3877,17 @@ function wr({
                         color: r.inputTextColor
                       },
                       size: "sm",
-                      children: /* @__PURE__ */ s(pe, {})
+                      children: /* @__PURE__ */ c(pe, {})
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c(
                     fe,
                     {
                       style: {
                         backgroundColor: r.backgroundColor,
                         borderColor: r.borderColor
                       },
-                      children: c.map((p) => /* @__PURE__ */ s(
+                      children: s.map((p) => /* @__PURE__ */ c(
                         he,
                         {
                           value: p.value,
@@ -3915,30 +3915,30 @@ function Sr({
   originalStyles: o,
   onResetProperty: n
 }) {
-  const { labels: a, theme: r } = q(), [c, p] = T("vh"), [d, l] = T("all"), g = G("vh"), u = G("all");
+  const { labels: i, theme: r } = K(), [s, p] = E("vh"), [u, l] = E("all"), g = q("vh"), d = q("all");
   return W(() => {
-    if (g.current !== c) {
-      if (g.current === "vh" && c === "all") {
-        const i = e.paddingVertical || e.paddingTop || "0px", f = e.paddingHorizontal || e.paddingLeft || "0px";
-        t("paddingTop", i), t("paddingBottom", i), t("paddingLeft", f), t("paddingRight", f);
-      } else if (g.current === "all" && c === "vh") {
-        const i = e.paddingTop || "0px", f = e.paddingBottom || "0px", y = e.paddingLeft || "0px", _ = e.paddingRight || "0px", x = parseFloat(i), L = parseFloat(f), S = parseFloat(y), C = parseFloat(_), M = x > 0 || L > 0 ? Math.min(x || 999999, L || 999999) : 0, k = S > 0 || C > 0 ? Math.min(S || 999999, C || 999999) : 0;
+    if (g.current !== s) {
+      if (g.current === "vh" && s === "all") {
+        const a = e.paddingVertical || e.paddingTop || "0px", f = e.paddingHorizontal || e.paddingLeft || "0px";
+        t("paddingTop", a), t("paddingBottom", a), t("paddingLeft", f), t("paddingRight", f);
+      } else if (g.current === "all" && s === "vh") {
+        const a = e.paddingTop || "0px", f = e.paddingBottom || "0px", y = e.paddingLeft || "0px", _ = e.paddingRight || "0px", x = parseFloat(a), L = parseFloat(f), S = parseFloat(y), C = parseFloat(_), M = x > 0 || L > 0 ? Math.min(x || 999999, L || 999999) : 0, k = S > 0 || C > 0 ? Math.min(S || 999999, C || 999999) : 0;
         t("paddingVertical", M > 0 ? `${M}px` : "0px"), t("paddingHorizontal", k > 0 ? `${k}px` : "0px");
       }
-      g.current = c;
+      g.current = s;
     }
-  }, [c, e, t]), W(() => {
-    if (u.current !== d) {
-      if (u.current === "vh" && d === "all") {
-        const i = e.marginVertical || e.marginTop || "0px", f = e.marginHorizontal || e.marginLeft || "0px";
-        t("marginTop", i), t("marginBottom", i), t("marginLeft", f), t("marginRight", f);
-      } else if (u.current === "all" && d === "vh") {
-        const i = e.marginTop || "0px", f = e.marginBottom || "0px", y = e.marginLeft || "0px", _ = e.marginRight || "0px", x = parseFloat(i), L = parseFloat(f), S = parseFloat(y), C = parseFloat(_), M = x > 0 || L > 0 ? Math.min(x || 999999, L || 999999) : 0, k = S > 0 || C > 0 ? Math.min(S || 999999, C || 999999) : 0;
+  }, [s, e, t]), W(() => {
+    if (d.current !== u) {
+      if (d.current === "vh" && u === "all") {
+        const a = e.marginVertical || e.marginTop || "0px", f = e.marginHorizontal || e.marginLeft || "0px";
+        t("marginTop", a), t("marginBottom", a), t("marginLeft", f), t("marginRight", f);
+      } else if (d.current === "all" && u === "vh") {
+        const a = e.marginTop || "0px", f = e.marginBottom || "0px", y = e.marginLeft || "0px", _ = e.marginRight || "0px", x = parseFloat(a), L = parseFloat(f), S = parseFloat(y), C = parseFloat(_), M = x > 0 || L > 0 ? Math.min(x || 999999, L || 999999) : 0, k = S > 0 || C > 0 ? Math.min(S || 999999, C || 999999) : 0;
         t("marginVertical", M > 0 ? `${M}px` : "0px"), t("marginHorizontal", k > 0 ? `${k}px` : "0px");
       }
-      u.current = d;
+      d.current = u;
     }
-  }, [d, e, t]), /* @__PURE__ */ b("div", { className: m.section, children: [
+  }, [u, e, t]), /* @__PURE__ */ b("div", { className: m.section, children: [
     /* @__PURE__ */ b("div", { children: [
       /* @__PURE__ */ b(
         "div",
@@ -3950,9 +3950,9 @@ function Sr({
             marginBottom: "var(--spacing-2)"
           },
           children: [
-            /* @__PURE__ */ s("div", { className: m.sectionTitle, style: { color: r.textColor }, children: a.paddingLabel || "Padding" }),
+            /* @__PURE__ */ c("div", { className: m.sectionTitle, style: { color: r.textColor }, children: i.paddingLabel || "Padding" }),
             /* @__PURE__ */ b("div", { style: { display: "flex", gap: "4px" }, children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 "button",
                 {
                   type: "button",
@@ -3965,14 +3965,14 @@ function Sr({
                     display: "flex",
                     alignItems: "center",
                     color: r.textColor,
-                    opacity: c === "vh" ? 1 : 0.4,
-                    fontWeight: c === "vh" ? "bold" : "normal"
+                    opacity: s === "vh" ? 1 : 0.4,
+                    fontWeight: s === "vh" ? "bold" : "normal"
                   },
                   title: "Vertical/Horizontal mode",
-                  children: /* @__PURE__ */ s(it, { size: 16 })
+                  children: /* @__PURE__ */ c(at, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 "button",
                 {
                   type: "button",
@@ -3985,24 +3985,24 @@ function Sr({
                     display: "flex",
                     alignItems: "center",
                     color: r.textColor,
-                    opacity: c === "all" ? 1 : 0.4,
-                    fontWeight: c === "all" ? "bold" : "normal"
+                    opacity: s === "all" ? 1 : 0.4,
+                    fontWeight: s === "all" ? "bold" : "normal"
                   },
                   title: "All sides mode",
-                  children: /* @__PURE__ */ s(at, { size: 16 })
+                  children: /* @__PURE__ */ c(it, { size: 16 })
                 }
               )
             ] })
           ]
         }
       ),
-      c === "vh" ? /* @__PURE__ */ b("div", { className: m.grid2, children: [
-        /* @__PURE__ */ s(
+      s === "vh" ? /* @__PURE__ */ b("div", { className: m.grid2, children: [
+        /* @__PURE__ */ c(
           Q,
           {
-            label: a.paddingVerticalLabel || "Vertical",
+            label: i.paddingVerticalLabel || "Vertical",
             value: e.paddingVertical,
-            onChange: (i) => t("paddingVertical", i),
+            onChange: (a) => t("paddingVertical", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4011,12 +4011,12 @@ function Sr({
             onReset: () => n("paddingVertical")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
-            label: a.paddingHorizontalLabel || "Horizontal",
+            label: i.paddingHorizontalLabel || "Horizontal",
             value: e.paddingHorizontal,
-            onChange: (i) => t("paddingHorizontal", i),
+            onChange: (a) => t("paddingHorizontal", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4026,12 +4026,12 @@ function Sr({
           }
         )
       ] }) : /* @__PURE__ */ b("div", { className: m.grid2, children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Top",
             value: e.paddingTop,
-            onChange: (i) => t("paddingTop", i),
+            onChange: (a) => t("paddingTop", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4040,12 +4040,12 @@ function Sr({
             onReset: () => n("paddingTop")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Right",
             value: e.paddingRight,
-            onChange: (i) => t("paddingRight", i),
+            onChange: (a) => t("paddingRight", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4054,12 +4054,12 @@ function Sr({
             onReset: () => n("paddingRight")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Bottom",
             value: e.paddingBottom,
-            onChange: (i) => t("paddingBottom", i),
+            onChange: (a) => t("paddingBottom", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4068,12 +4068,12 @@ function Sr({
             onReset: () => n("paddingBottom")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Left",
             value: e.paddingLeft,
-            onChange: (i) => t("paddingLeft", i),
+            onChange: (a) => t("paddingLeft", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4095,9 +4095,9 @@ function Sr({
             marginBottom: "var(--spacing-2)"
           },
           children: [
-            /* @__PURE__ */ s("div", { className: m.sectionTitle, style: { color: r.textColor }, children: a.marginLabel || "Margin" }),
+            /* @__PURE__ */ c("div", { className: m.sectionTitle, style: { color: r.textColor }, children: i.marginLabel || "Margin" }),
             /* @__PURE__ */ b("div", { style: { display: "flex", gap: "4px" }, children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 "button",
                 {
                   type: "button",
@@ -4110,14 +4110,14 @@ function Sr({
                     display: "flex",
                     alignItems: "center",
                     color: r.textColor,
-                    opacity: d === "vh" ? 1 : 0.4,
-                    fontWeight: d === "vh" ? "bold" : "normal"
+                    opacity: u === "vh" ? 1 : 0.4,
+                    fontWeight: u === "vh" ? "bold" : "normal"
                   },
                   title: "Vertical/Horizontal mode",
-                  children: /* @__PURE__ */ s(it, { size: 16 })
+                  children: /* @__PURE__ */ c(at, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ c(
                 "button",
                 {
                   type: "button",
@@ -4130,24 +4130,24 @@ function Sr({
                     display: "flex",
                     alignItems: "center",
                     color: r.textColor,
-                    opacity: d === "all" ? 1 : 0.4,
-                    fontWeight: d === "all" ? "bold" : "normal"
+                    opacity: u === "all" ? 1 : 0.4,
+                    fontWeight: u === "all" ? "bold" : "normal"
                   },
                   title: "All sides mode",
-                  children: /* @__PURE__ */ s(at, { size: 16 })
+                  children: /* @__PURE__ */ c(it, { size: 16 })
                 }
               )
             ] })
           ]
         }
       ),
-      d === "vh" ? /* @__PURE__ */ b("div", { className: m.grid2, children: [
-        /* @__PURE__ */ s(
+      u === "vh" ? /* @__PURE__ */ b("div", { className: m.grid2, children: [
+        /* @__PURE__ */ c(
           Q,
           {
-            label: a.marginVerticalLabel || "Vertical",
+            label: i.marginVerticalLabel || "Vertical",
             value: e.marginVertical,
-            onChange: (i) => t("marginVertical", i),
+            onChange: (a) => t("marginVertical", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4156,12 +4156,12 @@ function Sr({
             onReset: () => n("marginVertical")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
-            label: a.marginHorizontalLabel || "Horizontal",
+            label: i.marginHorizontalLabel || "Horizontal",
             value: e.marginHorizontal,
-            onChange: (i) => t("marginHorizontal", i),
+            onChange: (a) => t("marginHorizontal", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4171,12 +4171,12 @@ function Sr({
           }
         )
       ] }) : /* @__PURE__ */ b("div", { className: m.grid2, children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Top",
             value: e.marginTop,
-            onChange: (i) => t("marginTop", i),
+            onChange: (a) => t("marginTop", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4185,12 +4185,12 @@ function Sr({
             onReset: () => n("marginTop")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Right",
             value: e.marginRight,
-            onChange: (i) => t("marginRight", i),
+            onChange: (a) => t("marginRight", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4199,12 +4199,12 @@ function Sr({
             onReset: () => n("marginRight")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Bottom",
             value: e.marginBottom,
-            onChange: (i) => t("marginBottom", i),
+            onChange: (a) => t("marginBottom", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4213,12 +4213,12 @@ function Sr({
             onReset: () => n("marginBottom")
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Q,
           {
             label: "Left",
             value: e.marginLeft,
-            onChange: (i) => t("marginLeft", i),
+            onChange: (a) => t("marginLeft", a),
             min: 0,
             max: 500,
             step: 1,
@@ -4231,9 +4231,9 @@ function Sr({
     ] })
   ] });
 }
-const Tr = "_container_hrbvc_1", Er = "_scrollArea_hrbvc_21", Nr = "_collapsibleTrigger_hrbvc_79", Lr = "_collapsibleContent_hrbvc_111", Ir = "_chevron_hrbvc_127", Br = "_chevronOpen_hrbvc_141", Rr = "_actionsContainer_hrbvc_149", Or = "_statusIndicator_hrbvc_159", Dr = "_statusIcon_hrbvc_177", Mr = "_buttonGroup_hrbvc_189", Pr = "_resetButton_hrbvc_199", zr = "_applyButton_hrbvc_207", Fr = "_savingSpinner_hrbvc_215", Ar = "_buttonContent_hrbvc_233", Hr = "_buttonIcon_hrbvc_247", D = {
-  container: Tr,
-  scrollArea: Er,
+const Er = "_container_hrbvc_1", Tr = "_scrollArea_hrbvc_21", Nr = "_collapsibleTrigger_hrbvc_79", Lr = "_collapsibleContent_hrbvc_111", Ir = "_chevron_hrbvc_127", Br = "_chevronOpen_hrbvc_141", Rr = "_actionsContainer_hrbvc_149", Or = "_statusIndicator_hrbvc_159", Dr = "_statusIcon_hrbvc_177", Mr = "_buttonGroup_hrbvc_189", Pr = "_resetButton_hrbvc_199", zr = "_applyButton_hrbvc_207", Ar = "_savingSpinner_hrbvc_215", Fr = "_buttonContent_hrbvc_233", Hr = "_buttonIcon_hrbvc_247", D = {
+  container: Er,
+  scrollArea: Tr,
   collapsibleTrigger: Nr,
   collapsibleContent: Lr,
   chevron: Ir,
@@ -4244,8 +4244,8 @@ const Tr = "_container_hrbvc_1", Er = "_scrollArea_hrbvc_21", Nr = "_collapsible
   buttonGroup: Mr,
   resetButton: Pr,
   applyButton: zr,
-  savingSpinner: Fr,
-  buttonContent: Ar,
+  savingSpinner: Ar,
+  buttonContent: Fr,
   buttonIcon: Hr
 };
 function jr({
@@ -4253,17 +4253,17 @@ function jr({
   elementData: t,
   onHasChangesChange: o
 }) {
-  const { theme: n, labels: a } = q(), [r, c] = T(
-    () => st(e)
-  ), [p, d] = T(!1), [l, g] = T(!1), [u, i] = T(!1), [f, y] = T(!1), [_, x] = T(!1), [L, S] = T(!1), [C, M] = T(!1), [k, A] = T(!1), { previewStyle: $, resetStyles: w, resetSingleProperty: P } = an(e), { sendToParent: V } = Pe(), B = T(() => st(e))[0];
-  W(() => (i(!1), y(!1), x(!1), S(!1), M(!1), A(!1), () => {
-    i(!1), y(!1), x(!1), S(!1), M(!1), A(!1);
+  const { theme: n, labels: i } = K(), [r, s] = E(
+    () => ct(e)
+  ), [p, u] = E(!1), [l, g] = E(!1), [d, a] = E(!1), [f, y] = E(!1), [_, x] = E(!1), [L, S] = E(!1), [C, M] = E(!1), [k, F] = E(!1), { previewStyle: $, resetStyles: w, resetSingleProperty: P } = an(e), { sendToParent: V } = Pe(), B = E(() => ct(e))[0];
+  W(() => (a(!1), y(!1), x(!1), S(!1), M(!1), F(!1), () => {
+    a(!1), y(!1), x(!1), S(!1), M(!1), F(!1);
   }), []), W(() => {
     o?.(p);
   }, [p, o]);
   const N = (h, J) => {
     const ne = { ...r, [h]: J };
-    c(ne), $(h, J), d(!0);
+    s(ne), $(h, J), u(!0);
   }, oe = async () => {
     g(!0);
     try {
@@ -4273,7 +4273,7 @@ function jr({
       });
       const J = rn(h), ne = ln(
         h
-      ), E = {
+      ), T = {
         layout: {},
         text: {},
         border: {},
@@ -4281,15 +4281,15 @@ function jr({
         display: {},
         image: {}
       };
-      return h.backgroundColor !== void 0 && (E.layout.backgroundColor = h.backgroundColor), h.height !== void 0 && (E.layout.height = h.height), h.width !== void 0 && (E.layout.width = h.width), h.color !== void 0 && (E.text.color = h.color), h.fontSize !== void 0 && (E.text.fontSize = h.fontSize), h.fontWeight !== void 0 && (E.text.fontWeight = h.fontWeight), h.fontFamily !== void 0 && (E.text.fontFamily = h.fontFamily), h.textAlign !== void 0 && (E.text.textAlign = h.textAlign), h.textDecoration !== void 0 && (E.text.textDecoration = h.textDecoration), h.borderRadius !== void 0 && (E.border.borderRadius = h.borderRadius), h.borderWidth !== void 0 && (E.border.borderWidth = h.borderWidth), h.borderColor !== void 0 && (E.border.borderColor = h.borderColor), h.borderStyle !== void 0 && (E.border.borderStyle = h.borderStyle), h.paddingVertical !== void 0 && (E.spacing.paddingVertical = h.paddingVertical), h.paddingHorizontal !== void 0 && (E.spacing.paddingHorizontal = h.paddingHorizontal), h.paddingTop !== void 0 && (E.spacing.paddingTop = h.paddingTop), h.paddingRight !== void 0 && (E.spacing.paddingRight = h.paddingRight), h.paddingBottom !== void 0 && (E.spacing.paddingBottom = h.paddingBottom), h.paddingLeft !== void 0 && (E.spacing.paddingLeft = h.paddingLeft), h.marginVertical !== void 0 && (E.spacing.marginVertical = h.marginVertical), h.marginHorizontal !== void 0 && (E.spacing.marginHorizontal = h.marginHorizontal), h.marginTop !== void 0 && (E.spacing.marginTop = h.marginTop), h.marginRight !== void 0 && (E.spacing.marginRight = h.marginRight), h.marginBottom !== void 0 && (E.spacing.marginBottom = h.marginBottom), h.marginLeft !== void 0 && (E.spacing.marginLeft = h.marginLeft), h.display !== void 0 && (E.display.display = h.display), h.opacity !== void 0 && (E.display.opacity = h.opacity), h.flex !== void 0 && (E.display.flex = h.flex), h.flexDirection !== void 0 && (E.display.flexDirection = h.flexDirection), h.justifyContent !== void 0 && (E.display.justifyContent = h.justifyContent), h.alignItems !== void 0 && (E.display.alignItems = h.alignItems), h.objectFit !== void 0 && (E.image.objectFit = h.objectFit), Object.keys(E).forEach((Z) => {
-        Object.keys(E[Z]).length === 0 && delete E[Z];
+      return h.backgroundColor !== void 0 && (T.layout.backgroundColor = h.backgroundColor), h.height !== void 0 && (T.layout.height = h.height), h.width !== void 0 && (T.layout.width = h.width), h.color !== void 0 && (T.text.color = h.color), h.fontSize !== void 0 && (T.text.fontSize = h.fontSize), h.fontWeight !== void 0 && (T.text.fontWeight = h.fontWeight), h.fontFamily !== void 0 && (T.text.fontFamily = h.fontFamily), h.textAlign !== void 0 && (T.text.textAlign = h.textAlign), h.textDecoration !== void 0 && (T.text.textDecoration = h.textDecoration), h.borderRadius !== void 0 && (T.border.borderRadius = h.borderRadius), h.borderWidth !== void 0 && (T.border.borderWidth = h.borderWidth), h.borderColor !== void 0 && (T.border.borderColor = h.borderColor), h.borderStyle !== void 0 && (T.border.borderStyle = h.borderStyle), h.paddingVertical !== void 0 && (T.spacing.paddingVertical = h.paddingVertical), h.paddingHorizontal !== void 0 && (T.spacing.paddingHorizontal = h.paddingHorizontal), h.paddingTop !== void 0 && (T.spacing.paddingTop = h.paddingTop), h.paddingRight !== void 0 && (T.spacing.paddingRight = h.paddingRight), h.paddingBottom !== void 0 && (T.spacing.paddingBottom = h.paddingBottom), h.paddingLeft !== void 0 && (T.spacing.paddingLeft = h.paddingLeft), h.marginVertical !== void 0 && (T.spacing.marginVertical = h.marginVertical), h.marginHorizontal !== void 0 && (T.spacing.marginHorizontal = h.marginHorizontal), h.marginTop !== void 0 && (T.spacing.marginTop = h.marginTop), h.marginRight !== void 0 && (T.spacing.marginRight = h.marginRight), h.marginBottom !== void 0 && (T.spacing.marginBottom = h.marginBottom), h.marginLeft !== void 0 && (T.spacing.marginLeft = h.marginLeft), h.display !== void 0 && (T.display.display = h.display), h.opacity !== void 0 && (T.display.opacity = h.opacity), h.flex !== void 0 && (T.display.flex = h.flex), h.flexDirection !== void 0 && (T.display.flexDirection = h.flexDirection), h.justifyContent !== void 0 && (T.display.justifyContent = h.justifyContent), h.alignItems !== void 0 && (T.display.alignItems = h.alignItems), h.objectFit !== void 0 && (T.image.objectFit = h.objectFit), Object.keys(T).forEach((Z) => {
+        Object.keys(T[Z]).length === 0 && delete T[Z];
       }), V("INSPECTOR_STYLE_UPDATED", {
         element: t,
         styles: h,
         inlineStyles: J,
         tailwindClasses: ne,
-        appliedStyles: E
-      }), d(!1), !0;
+        appliedStyles: T
+      }), u(!1), !0;
     } catch (h) {
       return console.error("Failed to save styles:", h), !1;
     } finally {
@@ -4300,14 +4300,14 @@ function jr({
     window.__styleEditorSave = null;
   }), [p, r, t]);
   const Y = () => {
-    c(B), w(), d(!1);
-  }, X = (h) => {
+    s(B), w(), u(!1);
+  }, G = (h) => {
     const J = B[h];
-    c((Z) => ({ ...Z, [h]: J })), P(h);
-    const ne = { ...r, [h]: J }, E = Object.keys(ne).some(
+    s((Z) => ({ ...Z, [h]: J })), P(h);
+    const ne = { ...r, [h]: J }, T = Object.keys(ne).some(
       (Z) => ne[Z] !== B[Z]
     );
-    d(E);
+    u(T);
   };
   return /* @__PURE__ */ b("div", { className: D.container, children: [
     /* @__PURE__ */ b(
@@ -4319,8 +4319,8 @@ function jr({
           scrollbarColor: `${n.borderColor} transparent`
         },
         children: [
-          ke(e, "layout") && /* @__PURE__ */ b(Se, { open: u, onOpenChange: i, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+          ke(e, "layout") && /* @__PURE__ */ b(Se, { open: d, onOpenChange: a, children: [
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4330,37 +4330,37 @@ function jr({
                   color: n.textColor
                 },
                 onMouseEnter: (h) => {
-                  u || (h.currentTarget.style.backgroundColor = n.secondaryButtonHoverColor || n.inputBackgroundColor);
+                  d || (h.currentTarget.style.backgroundColor = n.secondaryButtonHoverColor || n.inputBackgroundColor);
                 },
                 onMouseLeave: (h) => {
-                  u || (h.currentTarget.style.backgroundColor = "transparent");
+                  d || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.layoutSectionTitle || "Layout" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.layoutSectionTitle || "Layout" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
                         D.chevron,
-                        u && D.chevronOpen
+                        d && D.chevronOpen
                       )
                     }
                   )
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               pr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] }),
           ke(e, "display") && /* @__PURE__ */ b(Se, { open: f, onOpenChange: y, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4376,8 +4376,8 @@ function jr({
                   f || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.displaySectionTitle || "Display" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.displaySectionTitle || "Display" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
@@ -4389,18 +4389,18 @@ function jr({
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               yr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] }),
           ke(e, "image") && /* @__PURE__ */ b(Se, { open: _, onOpenChange: x, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4416,8 +4416,8 @@ function jr({
                   _ || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.imageSectionTitle || "Image" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.imageSectionTitle || "Image" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
@@ -4429,18 +4429,18 @@ function jr({
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               Cr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] }),
           ke(e, "text") && /* @__PURE__ */ b(Se, { open: L, onOpenChange: S, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4456,8 +4456,8 @@ function jr({
                   L || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.textSectionTitle || "Text" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.textSectionTitle || "Text" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
@@ -4469,18 +4469,18 @@ function jr({
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               kr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] }),
           ke(e, "border") && /* @__PURE__ */ b(Se, { open: C, onOpenChange: M, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4496,8 +4496,8 @@ function jr({
                   C || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.borderSectionTitle || "Border" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.borderSectionTitle || "Border" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
@@ -4509,18 +4509,18 @@ function jr({
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               wr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] }),
-          ke(e, "spacing") && /* @__PURE__ */ b(Se, { open: k, onOpenChange: A, children: [
-            /* @__PURE__ */ s(be, { asChild: !0, children: /* @__PURE__ */ b(
+          ke(e, "spacing") && /* @__PURE__ */ b(Se, { open: k, onOpenChange: F, children: [
+            /* @__PURE__ */ c(be, { asChild: !0, children: /* @__PURE__ */ b(
               "div",
               {
                 className: D.collapsibleTrigger,
@@ -4536,8 +4536,8 @@ function jr({
                   k || (h.currentTarget.style.backgroundColor = "transparent");
                 },
                 children: [
-                  /* @__PURE__ */ s("span", { children: a.spacingSectionTitle || "Spacing" }),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ c("span", { children: i.spacingSectionTitle || "Spacing" }),
+                  /* @__PURE__ */ c(
                     xe,
                     {
                       className: re(
@@ -4549,13 +4549,13 @@ function jr({
                 ]
               }
             ) }),
-            /* @__PURE__ */ s(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ c(_e, { className: D.collapsibleContent, children: /* @__PURE__ */ c(
               Sr,
               {
                 styles: r,
                 onChange: N,
                 originalStyles: B,
-                onResetProperty: X
+                onResetProperty: G
               }
             ) })
           ] })
@@ -4574,13 +4574,13 @@ function jr({
               className: D.statusIndicator,
               style: { color: n.warningColor },
               children: [
-                /* @__PURE__ */ s(uo, { className: D.statusIcon }),
-                /* @__PURE__ */ s("span", { style: { fontFamily: "Satoshi", fontSize: "var(--text-xs)" }, children: a.unsavedChangesText || "Unsaved" })
+                /* @__PURE__ */ c(uo, { className: D.statusIcon }),
+                /* @__PURE__ */ c("span", { style: { fontFamily: "Satoshi", fontSize: "var(--text-xs)" }, children: i.unsavedChangesText || "Unsaved" })
               ]
             }
           ),
           /* @__PURE__ */ b("div", { className: D.buttonGroup, children: [
-            p && /* @__PURE__ */ s(
+            p && /* @__PURE__ */ c(
               ye,
               {
                 variant: "secondary",
@@ -4591,10 +4591,10 @@ function jr({
                   backgroundColor: n.secondaryButtonColor,
                   color: n.secondaryButtonTextColor
                 },
-                children: a.resetButton || "Reset"
+                children: i.resetButton || "Reset"
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ c(
               ye,
               {
                 variant: "default",
@@ -4606,10 +4606,10 @@ function jr({
                   color: p && !l ? n.buttonTextColor : n.secondaryButtonTextColor
                 },
                 children: l ? /* @__PURE__ */ b("span", { className: D.buttonContent, children: [
-                  /* @__PURE__ */ s("span", { className: D.savingSpinner }),
-                  a.savingText || "Saving..."
-                ] }) : p ? a.saveButton || "Save" : /* @__PURE__ */ b("span", { className: D.buttonContent, children: [
-                  /* @__PURE__ */ s(Ct, { className: D.buttonIcon }),
+                  /* @__PURE__ */ c("span", { className: D.savingSpinner }),
+                  i.savingText || "Saving..."
+                ] }) : p ? i.saveButton || "Save" : /* @__PURE__ */ b("span", { className: D.buttonContent, children: [
+                  /* @__PURE__ */ c(Ct, { className: D.buttonIcon }),
                   "Saved"
                 ] })
               }
@@ -4664,25 +4664,25 @@ const $r = (e, t) => {
   };
   if (o === "svg" || o === "path")
     return "Icon";
-  const a = n[o];
-  return a ? Ve(a, t, We[a]) : Ve("elementDefault", t, We.elementDefault);
+  const i = n[o];
+  return i ? Ve(i, t, We[i]) : Ve("elementDefault", t, We.elementDefault);
 }, Wr = (e, t) => {
   if (!e || !e.tagName)
     return "Element";
   const o = $r(e, t), n = e.tagName.toLowerCase();
   return `${o} (${n})`;
-}, Vr = "_controlBox_6l0f9_1", Ur = "_tabsContainer_6l0f9_35", Gr = "_tabsList_6l0f9_57", qr = "_tabTrigger_6l0f9_79", Xr = "_tabContent_6l0f9_141", Ne = {
+}, Vr = "_controlBox_3hq1l_1", Ur = "_tabsContainer_3hq1l_35", qr = "_tabsList_3hq1l_57", Gr = "_tabTrigger_3hq1l_79", Xr = "_tabContent_3hq1l_141", Ne = {
   controlBox: Vr,
   tabsContainer: Ur,
-  tabsList: Gr,
-  tabTrigger: qr,
+  tabsList: qr,
+  tabTrigger: Gr,
   tabContent: Xr
 }, Kr = ({
   active: e,
   onClick: t,
   children: o,
   theme: n
-}) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ c(
   "button",
   {
     onClick: t,
@@ -4700,18 +4700,18 @@ function Yr({
   element: t,
   elementData: o,
   activeTab: n,
-  availableTabs: a,
+  availableTabs: i,
   onTabChange: r,
-  onClose: c,
+  onClose: s,
   onPromptSubmit: p,
-  elementStack: d = [],
+  elementStack: u = [],
   onElementSelect: l,
   labels: g
 }) {
-  const { theme: u, labels: i } = q(), f = G(null), [y, _] = T({ left: 0 }), [x, L] = T(0), [S, C] = T("below"), [M, k] = T(!1), A = {
-    text: i.textTabLabel || "Content",
-    image: i.imageTabLabel || "Image",
-    style: i.styleTabLabel || "Design"
+  const { theme: d, labels: a } = K(), f = q(null), [y, _] = E({ left: 0 }), [x, L] = E(0), [S, C] = E("below"), [M, k] = E(!1), F = {
+    text: a.textTabLabel || "Content",
+    image: a.imageTabLabel || "Image",
+    style: a.styleTabLabel || "Design"
   };
   return W(() => {
     k(!1);
@@ -4719,27 +4719,27 @@ function Yr({
     if (!f.current || !t) return;
     let $ = null;
     const w = (B = !1) => {
-      const N = t.getBoundingClientRect(), oe = window.innerWidth, Y = window.innerHeight, X = 10, h = 10, J = 16, ne = 250, E = 0.7, Z = Math.min(600, oe - X * 2), He = Math.min(320, Z), v = Math.max(He, Math.min(N.width, Z));
+      const N = t.getBoundingClientRect(), oe = window.innerWidth, Y = window.innerHeight, G = 10, h = 10, J = 16, ne = 250, T = 0.7, Z = Math.min(600, oe - G * 2), He = Math.min(320, Z), v = Math.max(He, Math.min(N.width, Z));
       let H = N.left + N.width / 2 - v / 2;
       if (H = Math.max(
-        X,
-        Math.min(H, oe - v - X)
+        G,
+        Math.min(H, oe - v - G)
       ), B || $ === null) {
-        const K = Math.max(0, Y - N.bottom), I = Math.max(0, N.top), z = N.height / Y, O = N.width / oe, se = z > E && O > E, de = O > E && z <= E, Re = N.top < 0 || N.bottom > Y, et = I < ne && K < ne, Lt = I >= ne || K >= ne;
-        de && Lt ? $ = I > K ? "above" : "below" : se || et || Re && z > 0.5 ? $ = "inside" : $ = I > K ? "above" : "below", C($);
+        const X = Math.max(0, Y - N.bottom), I = Math.max(0, N.top), z = N.height / Y, O = N.width / oe, ce = z > T && O > T, de = O > T && z <= T, Re = N.top < 0 || N.bottom > Y, et = I < ne && X < ne, Lt = I >= ne || X >= ne;
+        de && Lt ? $ = I > X ? "above" : "below" : ce || et || Re && z > 0.5 ? $ = "inside" : $ = I > X ? "above" : "below", C($);
       }
       let j, R;
       if ($ === "inside") {
-        const K = Math.max(N.top + J, J);
+        const X = Math.max(N.top + J, J);
         j = Math.min(
           N.bottom - J,
           Y - J
-        ) - K;
+        ) - X;
         let z = N.left + J;
         N.left < 0 && (z = J);
-        const se = Math.min(N.right, oe) - z - J, de = Math.min(v, se), Re = Math.min(N.right, oe) - Math.max(N.left, 0);
-        de < Re - J * 2 && (z = Math.max(N.left, 0) + (Re - de) / 2), R = { top: K, left: z }, f.current && de !== v && (f.current.style.width = `${de}px`);
-      } else $ === "above" ? (j = N.top - X - h, R = { bottom: Y - N.top + h, left: H }) : (j = Y - N.bottom - X - h, R = { top: N.bottom + h, left: H });
+        const ce = Math.min(N.right, oe) - z - J, de = Math.min(v, ce), Re = Math.min(N.right, oe) - Math.max(N.left, 0);
+        de < Re - J * 2 && (z = Math.max(N.left, 0) + (Re - de) / 2), R = { top: X, left: z }, f.current && de !== v && (f.current.style.width = `${de}px`);
+      } else $ === "above" ? (j = N.top - G - h, R = { bottom: Y - N.top + h, left: H }) : (j = Y - N.bottom - G - h, R = { top: N.bottom + h, left: H });
       j = Math.max(200, j), L(j), _(R), f.current && $ !== "inside" && (f.current.style.width = `${v}px`), B && k(!0);
     };
     w(!0);
@@ -4761,13 +4761,13 @@ function Yr({
         bottom: y.bottom !== void 0 ? `${y.bottom}px` : void 0,
         left: `${y.left}px`,
         maxHeight: x > 0 ? `${x}px` : void 0,
-        backgroundColor: u.backgroundColor,
+        backgroundColor: d.backgroundColor,
         opacity: M ? 1 : 0,
         transform: M ? "scale(1)" : "scale(0.95)",
         transition: "opacity 0.2s ease, transform 0.2s ease"
       },
       children: [
-        d.length > 1 && /* @__PURE__ */ s(
+        u.length > 1 && /* @__PURE__ */ c(
           "div",
           {
             className: "inspector-element-tags",
@@ -4778,6 +4778,8 @@ function Yr({
               overflowX: "auto",
               overflowY: "hidden",
               width: "calc(100% + 24px)",
+              height: "46px",
+              minHeight: "46px",
               marginLeft: "-12px",
               marginRight: "-12px",
               marginTop: "-12px",
@@ -4785,21 +4787,21 @@ function Yr({
               paddingRight: "12px",
               paddingTop: "12px",
               paddingBottom: "10px",
-              borderBottom: "1px solid rgba(0, 0, 0, 0.05)"
+              borderBottom: `1px solid ${d.borderColor}`
             },
-            children: d.map((w, P) => {
-              const V = Wr(w, g || i), B = w === t;
+            children: u.map((w, P) => {
+              const V = Wr(w, g || a), B = w === t;
               return console.log(`🏷️ Button ${P}:`, V, w, {
                 isSelected: B
-              }), /* @__PURE__ */ s(
+              }), /* @__PURE__ */ c(
                 "button",
                 {
                   className: "inspector-element-tag",
                   onClick: () => l?.(w),
                   style: {
-                    background: B ? "rgb(58, 18, 189)" : "#ffffff",
-                    color: B ? "#ffffff" : "#475569",
-                    border: B ? "none" : "1px solid #e2e8f0",
+                    background: B ? d.buttonColor : d.backgroundColor,
+                    color: B ? d.buttonTextColor : d.secondaryTextColor,
+                    border: B ? "none" : `1px solid ${d.borderColor}`,
                     padding: "4px 8px",
                     borderRadius: "4px",
                     fontSize: "11px",
@@ -4810,7 +4812,7 @@ function Yr({
                     height: "24px",
                     display: "flex",
                     alignItems: "center",
-                    boxShadow: B ? "0 1px 3px rgba(58, 18, 189, 0.2)" : "0 1px 2px rgba(0, 0, 0, 0.05)"
+                    boxShadow: B ? `0 1px 3px ${d.buttonColor}33` : "0 1px 2px rgba(0, 0, 0, 0.05)"
                   },
                   children: String(V)
                 },
@@ -4819,134 +4821,46 @@ function Yr({
             })
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Mo,
           {
-            placeholder: i.promptPlaceholder || "Ask AI...",
+            placeholder: a.promptPlaceholder || "Ask AI...",
             onSubmit: p,
-            onClose: c,
+            onClose: s,
             autoFocus: !n
           }
         ),
-        a.length > 0 && n ? /* @__PURE__ */ b("div", { className: Ne.tabsContainer, children: [
-          /* @__PURE__ */ s(
+        i.length > 0 && n ? /* @__PURE__ */ b("div", { className: Ne.tabsContainer, children: [
+          /* @__PURE__ */ c(
             "div",
             {
               className: Ne.tabsList,
               style: {
-                backgroundColor: u.tabContainerBg
+                backgroundColor: d.tabContainerBg
               },
-              children: a.map(($) => /* @__PURE__ */ s(
+              children: i.map(($) => /* @__PURE__ */ c(
                 Kr,
                 {
                   active: n === $,
                   onClick: () => r($),
-                  theme: u,
-                  children: A[$]
+                  theme: d,
+                  children: F[$]
                 },
                 $
               ))
             }
           ),
           /* @__PURE__ */ b("div", { className: Ne.tabContent, children: [
-            n === "text" && /* @__PURE__ */ s(Uo, { element: t, elementData: o }),
-            n === "image" && /* @__PURE__ */ s(on, { element: t, elementData: o }),
-            n === "style" && /* @__PURE__ */ s(jr, { element: t, elementData: o })
+            n === "text" && /* @__PURE__ */ c(Uo, { element: t, elementData: o }),
+            n === "image" && /* @__PURE__ */ c(on, { element: t, elementData: o }),
+            n === "style" && /* @__PURE__ */ c(jr, { element: t, elementData: o })
           ] })
         ] }) : null
       ]
     }
   );
 }
-function Jr({ visible: e }) {
-  const { theme: t, labels: o } = q(), [n, a] = T(!1), [r, c] = T(!1);
-  if (!e || r) return null;
-  const p = !!o.badgeUrl;
-  return /* @__PURE__ */ b(
-    "div",
-    {
-      "data-inspector-ignore": !0,
-      style: {
-        position: "fixed",
-        bottom: "16px",
-        right: "16px",
-        pointerEvents: "all"
-      },
-      onMouseEnter: () => a(!0),
-      onMouseLeave: () => a(!1),
-      children: [
-        /* @__PURE__ */ s(
-          "div",
-          {
-            "data-inspector-ignore": !0,
-            style: {
-              position: "relative",
-              background: `linear-gradient(135deg, ${t.badgeGradientStart} 0%, ${t.badgeGradientEnd} 100%)`,
-              color: t.badgeTextColor,
-              padding: "8px 16px",
-              borderRadius: "24px",
-              fontSize: "13px",
-              fontWeight: 600,
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-              cursor: p ? "pointer" : "default",
-              transition: "all 0.3s ease",
-              fontFamily: "'Satoshi', system-ui, -apple-system, sans-serif",
-              userSelect: "none",
-              transform: n ? "scale(1.02)" : "scale(1)"
-            },
-            onClick: (d) => {
-              d.target.dataset.badgeClose || p && window.open(o.badgeUrl, "_blank");
-            },
-            children: o.badgeText
-          }
-        ),
-        n && /* @__PURE__ */ s(
-          "button",
-          {
-            "data-badge-close": !0,
-            "data-inspector-ignore": !0,
-            onClick: (d) => {
-              d.stopPropagation(), c(!0);
-            },
-            style: {
-              position: "absolute",
-              top: "-6px",
-              right: "-6px",
-              width: "20px",
-              height: "20px",
-              border: "none",
-              background: t.badgeTextColor === "#ffffff" ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.9)",
-              color: t.badgeTextColor === "#ffffff" ? "#ffffff" : "#000000",
-              borderRadius: "50%",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "14px",
-              fontWeight: 700,
-              lineHeight: 1,
-              transition: "all 0.2s ease",
-              padding: 0,
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-              zIndex: 1
-            },
-            onMouseEnter: (d) => {
-              const l = t.badgeTextColor === "#ffffff";
-              d.currentTarget.style.background = l ? "rgba(0, 0, 0, 0.9)" : "rgba(255, 255, 255, 1)", d.currentTarget.style.transform = "scale(1.08)", d.currentTarget.style.boxShadow = "0 3px 12px rgba(0, 0, 0, 0.3)";
-            },
-            onMouseLeave: (d) => {
-              const l = t.badgeTextColor === "#ffffff";
-              d.currentTarget.style.background = l ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.9)", d.currentTarget.style.transform = "scale(1)", d.currentTarget.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.2)";
-            },
-            "aria-label": "Close badge",
-            children: "×"
-          }
-        )
-      ]
-    }
-  );
-}
-class Zr {
+class Jr {
   constructor() {
     this.activeOverlay = null, this.scrollListener = null, this.resizeListener = null, this.cleanupTimeout = null, this.animationFrameId = null, this.targetElement = null;
   }
@@ -4960,25 +4874,25 @@ class Zr {
     this.clearHighlight();
     const {
       duration: n = 3e3,
-      scrollIntoView: a = !0,
+      scrollIntoView: i = !0,
       color: r = "#4417db",
-      animation: c = "pulse"
+      animation: s = "pulse"
     } = o;
-    a ? (t.scrollIntoView({
+    i ? (t.scrollIntoView({
       behavior: "smooth",
       block: "center",
       inline: "center"
     }), setTimeout(() => {
-      this.createOverlay(t, n, r, c);
-    }, 600)) : this.createOverlay(t, n, r, c);
+      this.createOverlay(t, n, r, s);
+    }, 600)) : this.createOverlay(t, n, r, s);
   }
   /**
    * Creates the highlight overlay element
    */
-  createOverlay(t, o, n, a) {
+  createOverlay(t, o, n, i) {
     this.targetElement = t;
-    const r = t.getBoundingClientRect(), c = document.createElement("div");
-    c.id = "inspector-highlight-overlay", c.style.cssText = `
+    const r = t.getBoundingClientRect(), s = document.createElement("div");
+    s.id = "inspector-highlight-overlay", s.style.cssText = `
       position: fixed;
       top: ${r.top}px;
       left: ${r.left}px;
@@ -4991,19 +4905,19 @@ class Zr {
       z-index: 999999;
       box-shadow: 0 0 20px ${n}66;
       transition: all 0.1s ease-out;
-    `, a === "pulse" ? c.style.animation = "inspectorPulse 0.6s ease-in-out infinite" : a === "fade" && (c.style.animation = "inspectorFade 0.5s ease-in-out"), this.injectStyles(), document.body.appendChild(c), this.activeOverlay = c;
+    `, i === "pulse" ? s.style.animation = "inspectorPulse 0.6s ease-in-out infinite" : i === "fade" && (s.style.animation = "inspectorFade 0.5s ease-in-out"), this.injectStyles(), document.body.appendChild(s), this.activeOverlay = s;
     const p = () => {
       if (!this.activeOverlay || !this.targetElement) return;
       const l = this.targetElement.getBoundingClientRect();
       this.activeOverlay.style.top = `${l.top}px`, this.activeOverlay.style.left = `${l.left}px`, this.activeOverlay.style.width = `${l.width}px`, this.activeOverlay.style.height = `${l.height}px`, this.animationFrameId = requestAnimationFrame(p);
     };
     this.animationFrameId = requestAnimationFrame(p);
-    const d = () => {
+    const u = () => {
       if (!this.activeOverlay || !this.targetElement) return;
       const l = this.targetElement.getBoundingClientRect();
       this.activeOverlay.style.top = `${l.top}px`, this.activeOverlay.style.left = `${l.left}px`, this.activeOverlay.style.width = `${l.width}px`, this.activeOverlay.style.height = `${l.height}px`;
     };
-    this.scrollListener = d, this.resizeListener = d, window.addEventListener("scroll", this.scrollListener, !0), window.addEventListener("resize", this.resizeListener), this.cleanupTimeout = window.setTimeout(() => {
+    this.scrollListener = u, this.resizeListener = u, window.addEventListener("scroll", this.scrollListener, !0), window.addEventListener("resize", this.resizeListener), this.cleanupTimeout = window.setTimeout(() => {
       this.clearHighlight();
     }, o);
   }
@@ -5033,7 +4947,7 @@ class Zr {
     `, document.head.appendChild(o);
   }
 }
-const ve = "data-dev-id", Ye = (e) => e.replace(/\\/g, "/"), Qr = (e) => {
+const ve = "data-dev-id", Ye = (e) => e.replace(/\\/g, "/"), Zr = (e) => {
   const t = e.getBoundingClientRect();
   return t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth);
 }, De = (e) => {
@@ -5043,22 +4957,22 @@ const ve = "data-dev-id", Ye = (e) => e.replace(/\\/g, "/"), Qr = (e) => {
     denormalizedId: o,
     escapedId: n
   });
-  let a = document.querySelector(`[${ve}="${n}"]`) || document.querySelector(`[${ve}="${CSS.escape(t)}"]`) || document.querySelector(
+  let i = document.querySelector(`[${ve}="${n}"]`) || document.querySelector(`[${ve}="${CSS.escape(t)}"]`) || document.querySelector(
     `[${ve}="${CSS.escape(Ye(t))}"]`
   );
-  if (!a) {
+  if (!i) {
     const r = document.querySelectorAll(`[${ve}]`);
-    for (const c of r) {
-      const p = c.getAttribute(ve);
+    for (const s of r) {
+      const p = s.getAttribute(ve);
       if (p && p.includes(t)) {
-        a = c;
+        i = s;
         break;
       }
     }
   }
-  return !a && typeof e == "object" && e.selector && (a = document.querySelector(e.selector)), a;
+  return !i && typeof e == "object" && e.selector && (i = document.querySelector(e.selector)), i;
 };
-function Tt(e) {
+function Et(e) {
   if (e.id)
     return "#" + e.id;
   let t = e.tagName.toLowerCase();
@@ -5068,13 +4982,13 @@ function Tt(e) {
   }
   return t;
 }
-function Et(e) {
-  const t = e.hasAttribute(ve) ? e : e.closest(`[${ve}]`), o = t?.getAttribute(ve), n = t?.getAttribute("data-dev-name"), a = t?.getAttribute("data-dev-path"), r = t?.getAttribute("data-dev-component"), c = a ? Ye(a) : void 0, p = o ? Ye(o) : void 0, d = o?.split(":"), l = d?.[1] ? parseInt(d[1], 10) : 0, g = d?.[2] ? parseInt(d[2], 10) : 0;
+function Tt(e) {
+  const t = e.hasAttribute(ve) ? e : e.closest(`[${ve}]`), o = t?.getAttribute(ve), n = t?.getAttribute("data-dev-name"), i = t?.getAttribute("data-dev-path"), r = t?.getAttribute("data-dev-component"), s = i ? Ye(i) : void 0, p = o ? Ye(o) : void 0, u = o?.split(":"), l = u?.[1] ? parseInt(u[1], 10) : 0, g = u?.[2] ? parseInt(u[2], 10) : 0;
   return {
     id: p,
     name: n || void 0,
-    path: c || void 0,
-    fileName: c || "production build",
+    path: s || void 0,
+    fileName: s || "production build",
     lineNumber: l,
     columnNumber: g,
     component: r || n || "Unknown"
@@ -5082,26 +4996,26 @@ function Et(e) {
 }
 function Nt(e) {
   return {
-    id: Et(e)?.id || "",
+    id: Tt(e)?.id || "",
     tagName: e.tagName,
     className: e.className,
-    selector: Tt(e)
+    selector: Et(e)
   };
 }
-function ea(e) {
+function Qr(e) {
   const t = [];
   let o = e.parentElement, n = 0;
   for (; o && n < 3; )
     o.closest("[data-inspector-ignore]") || (t.push(Nt(o)), n++), o = o.parentElement;
   return t;
 }
-function ta(e) {
+function ei(e) {
   const t = [], o = Array.from(e.children);
   for (let n = 0; n < Math.min(3, o.length); n++)
     t.push(Nt(o[n]));
   return t;
 }
-function oa(e, t) {
+function ti(e, t) {
   const o = [];
   let n = document.elementFromPoint(e, t);
   if (!n || n.closest("[data-inspector-ignore]"))
@@ -5116,18 +5030,18 @@ function oa(e, t) {
       return o;
   }
   o.push(n);
-  const a = (r, c) => {
-    if (c > 2) return;
+  const i = (r, s) => {
+    if (s > 2) return;
     const p = Array.from(r.children);
-    console.log(`🔍 Checking children at depth ${c}:`, {
+    console.log(`🔍 Checking children at depth ${s}:`, {
       parent: r.tagName,
       childrenCount: p.length,
       currentStackLength: o.length
     });
-    const d = [];
-    for (const i of p) {
-      if (!(i instanceof HTMLElement) || i.closest("[data-inspector-ignore]")) continue;
-      const f = i.getBoundingClientRect(), y = i.hasAttribute("data-dev-id"), _ = f.width > 0 && f.height > 0, x = i.children.length > 0, L = i.textContent && i.textContent.trim().length > 0, S = [
+    const u = [];
+    for (const a of p) {
+      if (!(a instanceof HTMLElement) || a.closest("[data-inspector-ignore]")) continue;
+      const f = a.getBoundingClientRect(), y = a.hasAttribute("data-dev-id"), _ = f.width > 0 && f.height > 0, x = a.children.length > 0, L = a.textContent && a.textContent.trim().length > 0, S = [
         "BUTTON",
         "A",
         "INPUT",
@@ -5135,22 +5049,22 @@ function oa(e, t) {
         "VIDEO",
         "SELECT",
         "TEXTAREA"
-      ].includes(i.tagName);
-      (y || _ && (x || L || S)) && d.push(i);
+      ].includes(a.tagName);
+      (y || _ && (x || L || S)) && u.push(a);
     }
-    console.log(`  ✅ Found ${d.length} meaningful children`);
-    const l = d.filter(
-      (i) => i.hasAttribute("data-dev-id")
-    ), g = d.filter(
-      (i) => !i.hasAttribute("data-dev-id")
-    ), u = [...l, ...g];
-    for (const i of u)
-      console.log("  ➕ Adding to stack:", i.tagName, i), o.push(i), a(i, c + 1);
+    console.log(`  ✅ Found ${u.length} meaningful children`);
+    const l = u.filter(
+      (a) => a.hasAttribute("data-dev-id")
+    ), g = u.filter(
+      (a) => !a.hasAttribute("data-dev-id")
+    ), d = [...l, ...g];
+    for (const a of d)
+      console.log("  ➕ Adding to stack:", a.tagName, a), o.push(a), i(a, s + 1);
   };
-  return a(n, 1), o;
+  return i(n, 1), o;
 }
 function Ue(e) {
-  const t = e.textContent && e.children.length === 0, o = e.tagName === "IMG", n = Et(e);
+  const t = e.textContent && e.children.length === 0, o = e.tagName === "IMG", n = Tt(e);
   return {
     id: n?.id || "",
     tagName: e.tagName,
@@ -5166,24 +5080,24 @@ function Ue(e) {
     textContent: t ? e.textContent?.trim() : "",
     isImageNode: o,
     imageUrl: o ? e.src : "",
-    selector: Tt(e),
+    selector: Et(e),
     currentRoute: window.location.pathname,
-    parents: ea(e),
-    children: ta(e)
+    parents: Qr(e),
+    children: ei(e)
   };
 }
-function aa() {
-  const { setTheme: e, setLabels: t, labels: o } = q(), [n, a] = T(!1), r = G(null);
+function ri() {
+  const { setTheme: e, setLabels: t, labels: o } = K(), [n, i] = E(!1), r = q(null);
   W(() => {
-    r.current = new Zr();
+    r.current = new Jr();
   }, []);
-  const [c, p] = T(!1), [d, l] = T(
+  const [s, p] = E(!1), [u, l] = E(
     null
-  ), [g, u] = T(
+  ), [g, d] = E(
     null
-  ), [i, f] = T(null), [y, _] = T(
+  ), [a, f] = E(null), [y, _] = E(
     null
-  ), [x, L] = T(!1), [S, C] = T(!1), [M, k] = T(!1), [A, $] = T(!1), [w, P] = T(!0), [V, B] = T([]), { sendToParent: N, listenToParent: oe } = Pe(), Y = G(null), X = G(null), h = Me(() => {
+  ), [x, L] = E(!1), [S, C] = E(!1), [M, k] = E(!1), [F, $] = E(!1), [w, P] = E(!0), [V, B] = E([]), { sendToParent: N, listenToParent: oe } = Pe(), Y = q(null), G = q(null), h = Me(() => {
     const v = [];
     return x && v.push("text"), S && v.push("image"), M && v.push("style"), v;
   }, [x, S, M]);
@@ -5191,14 +5105,14 @@ function aa() {
     h.length > 0 && !y && _(h[0]);
   }, [h, y]), W(() => (Y.current = new Bt((v) => {
     N("INSPECTOR_ERROR", v);
-  }), Y.current.start(), X.current = new Rt((v) => {
+  }), Y.current.start(), G.current = new Rt((v) => {
     N("URL_CHANGED", v);
-  }), X.current.start(), () => {
+  }), G.current.start(), () => {
     Y.current?.stop();
   }), [N]), W(() => oe((v) => {
     switch (v.type) {
       case "TOGGLE_INSPECTOR":
-        a(v.active), v.labels && t(v.labels), v.theme && e(v.theme);
+        i(v.active), v.labels && t(v.labels), v.theme && e(v.theme);
         break;
       case "SHOW_CONTENT_INPUT":
         L(v.show);
@@ -5223,7 +5137,7 @@ function aa() {
         break;
     }
   }), [oe]), W(() => {
-    if (!n || c) return;
+    if (!n || s) return;
     const v = (H) => {
       const j = H.target;
       if (j.closest("[data-inspector-ignore]")) {
@@ -5233,7 +5147,7 @@ function aa() {
       l(j);
     };
     return document.addEventListener("mousemove", v, !0), () => document.removeEventListener("mousemove", v, !0);
-  }, [n, c]), W(() => {
+  }, [n, s]), W(() => {
     if (!n) return;
     const v = (H) => {
       let j = H.target;
@@ -5248,28 +5162,28 @@ function aa() {
         else
           return;
       }
-      if (c) {
+      if (s) {
         H.preventDefault(), H.stopPropagation(), ne();
         return;
       }
       H.preventDefault(), H.stopPropagation();
-      const R = Ue(j), K = oa(H.clientX, H.clientY);
-      console.log("Element stack:", K.length, K), B(K), u(j), f(R), J(), N("INSPECTOR_ELEMENT_SELECTED", R);
+      const R = Ue(j), X = ti(H.clientX, H.clientY);
+      console.log("Element stack:", X.length, X), B(X), d(j), f(R), J(), N("INSPECTOR_ELEMENT_SELECTED", R);
     };
     return document.addEventListener("click", v, !0), () => document.removeEventListener("click", v, !0);
-  }, [n, c, N]), W(() => {
-    n && !c ? document.body.style.cursor = "crosshair" : document.body.style.cursor = "";
-  }, [n, c]);
+  }, [n, s, N]), W(() => {
+    n && !s ? document.body.style.cursor = "crosshair" : document.body.style.cursor = "";
+  }, [n, s]);
   function J() {
     p(!0), document.body.style.overflow = "hidden";
   }
   async function ne() {
-    p(!1), u(null), f(null), _(null), B([]), document.body.style.overflow = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null;
+    p(!1), d(null), f(null), _(null), B([]), document.body.style.overflow = "", window.__styleEditorHasChanges = !1, window.__styleEditorSave = null;
   }
-  function E(v) {
+  function T(v) {
     console.log("🔄 Element stack select:", v);
     const H = Ue(v);
-    console.log("📦 New element data:", H), u(v), f(H), N("INSPECTOR_ELEMENT_SELECTED", H);
+    console.log("📦 New element data:", H), d(v), f(H), N("INSPECTOR_ELEMENT_SELECTED", H);
   }
   function Z(v, H) {
     const j = typeof v == "object" ? v.targetRoute : H?.targetRoute;
@@ -5312,10 +5226,10 @@ function aa() {
           const z = v.className.split(" ").filter(Boolean);
           if (z.length > 0) {
             const O = document.getElementsByClassName(z[0]);
-            for (let se = 0; se < O.length; se++) {
-              const de = O[se].getBoundingClientRect();
+            for (let ce = 0; ce < O.length; ce++) {
+              const de = O[ce].getBoundingClientRect();
               if (de.width > 0 && de.height > 0) {
-                R = O[se];
+                R = O[ce];
                 break;
               }
             }
@@ -5337,13 +5251,13 @@ function aa() {
       element: R,
       identifier: v,
       elementRect: R?.getBoundingClientRect(),
-      elementInViewport: R ? Qr(R) : !1
+      elementInViewport: R ? Zr(R) : !1
     }), !R) {
       console.warn("❌ Element not found for highlighting:", v);
       return;
     }
-    const K = R.getBoundingClientRect();
-    if ((K.width === 0 || K.height === 0) && (console.log("⚠️ Element is invisible, trying parents..."), typeof v == "object" && v.parents))
+    const X = R.getBoundingClientRect();
+    if ((X.width === 0 || X.height === 0) && (console.log("⚠️ Element is invisible, trying parents..."), typeof v == "object" && v.parents))
       for (const I of v.parents) {
         let z = null;
         if (I.id && (z = De(I.id)), !z && I.selector && (z = document.querySelector(I.selector)), z) {
@@ -5375,7 +5289,7 @@ function aa() {
       });
   }
   return W(() => {
-    if (c) {
+    if (s) {
       let v = !1;
       const H = () => {
         v = !0;
@@ -5383,15 +5297,19 @@ function aa() {
         v = !1;
       }, R = document.getElementById("inspector-canvas-root");
       R && (R.addEventListener("pointerdown", H), R.addEventListener("pointerup", j), document.addEventListener("pointerup", j));
-      const K = (O) => {
-        O.target.closest("#inspector-canvas-root") || (O.preventDefault(), O.stopPropagation());
+      const X = (O) => {
+        if (O.target.closest("#inspector-canvas-root")) {
+          O.stopPropagation();
+          return;
+        }
+        O.preventDefault(), O.stopPropagation();
       }, I = (O) => {
         O.target.closest("#inspector-canvas-root") || v || O.type === "mouseleave" || O.type === "mouseout" || (O.preventDefault(), O.stopPropagation());
       };
-      document.addEventListener("wheel", K, {
+      document.addEventListener("wheel", X, {
         passive: !1,
         capture: !0
-      }), document.addEventListener("touchmove", K, {
+      }), document.addEventListener("touchmove", X, {
         passive: !1,
         capture: !0
       }), document.addEventListener("pointerdown", I, {
@@ -5404,9 +5322,9 @@ function aa() {
       };
       return document.addEventListener("keydown", z, { capture: !0 }), document.addEventListener("keyup", z, { capture: !0 }), () => {
         const O = document.getElementById("inspector-canvas-root");
-        O && (O.removeEventListener("pointerdown", H), O.removeEventListener("pointerup", j)), document.removeEventListener("pointerup", j), document.removeEventListener("wheel", K, {
+        O && (O.removeEventListener("pointerdown", H), O.removeEventListener("pointerup", j)), document.removeEventListener("pointerup", j), document.removeEventListener("wheel", X, {
           capture: !0
-        }), document.removeEventListener("touchmove", K, {
+        }), document.removeEventListener("touchmove", X, {
           capture: !0
         }), document.removeEventListener("pointerdown", I, {
           capture: !0
@@ -5429,14 +5347,14 @@ function aa() {
         });
       };
     }
-  }, [c]), /* @__PURE__ */ b(
+  }, [s]), /* @__PURE__ */ b(
     "div",
     {
       id: "inspector-canvas-root",
       "data-inspector-ignore": !0,
-      className: c ? "inspector-active" : "",
+      className: s ? "inspector-active" : "",
       children: [
-        c && /* @__PURE__ */ s(
+        s && /* @__PURE__ */ c(
           "div",
           {
             className: "inspector-backdrop",
@@ -5445,19 +5363,19 @@ function aa() {
             }
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           Ot,
           {
-            element: n && !c ? d : null,
-            selectedElement: c ? g : null,
+            element: n && !s ? u : null,
+            selectedElement: s ? g : null,
             showChildBorders: w
           }
         ),
-        c && g && i && /* @__PURE__ */ s(
+        s && g && a && /* @__PURE__ */ c(
           Yr,
           {
             element: g,
-            elementData: i,
+            elementData: a,
             activeTab: y,
             availableTabs: h,
             onTabChange: _,
@@ -5465,20 +5383,19 @@ function aa() {
             onPromptSubmit: (v) => {
               N("INSPECTOR_PROMPT_SUBMITTED", {
                 prompt: v,
-                element: i
-              }), a(!1), ne();
+                element: a
+              }), i(!1), ne();
             },
             elementStack: V,
-            onElementSelect: E,
+            onElementSelect: T,
             labels: o
           }
-        ),
-        /* @__PURE__ */ s(Jr, { visible: A })
+        )
       ]
     }
   );
 }
 export {
-  aa as App,
-  aa as Inspector
+  ri as App,
+  ri as Inspector
 };