@chaibuilder/sdk 1.2.51 → 1.2.53

package/dist/{Settings-zm-cF9rZ.js → Settings-SK2ONoi0.js}

@@ -1,21 +1,22 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
-import * as ne from "react";
-import P, { useState as w, useMemo as T, useEffect as A, useCallback as H, memo as bt, useRef as mt, createContext as Fe, useContext as se } from "react";
-import { useThrottledCallback as de } from "@react-hookz/web";
-import { forEach as Ne, isArray as ce, omit as ft, truncate as vt, includes as X, get as y, first as oe, split as wt, startCase as F, toLower as re, isEmpty as m, map as _, find as Ze, last as jt, filter as ye, set as We, debounce as Ct, keys as he, cloneDeep as kt, each as Nt, capitalize as be, reject as _t, startsWith as W, nth as He, isNumber as St, parseInt as Tt, isNaN as Ue, findLast as Rt, flatten as De, intersection as Vt, has as ie, isNull as Ht } from "lodash-es";
-import { useTranslation as I } from "react-i18next";
-import { CopyIcon as Dt, PlusIcon as _e, Cross2Icon as Ke, EyeOpenIcon as Bt, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as It, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as At, ArrowBottomLeftIcon as $t, AlignLeftIcon as Et, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Lt, StretchHorizontallyIcon as Ot, FontItalicIcon as zt, UnderlineIcon as Yt, OverlineIcon as Xt, LetterCaseUppercaseIcon as Ft, Cross1Icon as Zt, InfoCircledIcon as Se, MinusIcon as Wt, BoxIcon as Ge, RowSpacingIcon as Ut, TriangleDownIcon as Kt, CrossCircledIcon as Gt, CaretDownIcon as qt, MixerHorizontalIcon as Jt } from "@radix-ui/react-icons";
-import { a1 as qe, aP as Je, aQ as Qe, B, aR as et, aS as Qt, aT as er, aU as tr, aV as rr, aW as sr, aX as or, L as U, aK as tt, _ as lr, $ as ar, a0 as nr, aY as ir, Y as dr, aa as cr, Z as pr, ab as $, ac as E, ad as M, aZ as ur, a_ as gr, a$ as xr, b0 as yr, b1 as hr, b2 as br, b3 as mr, Q as rt, P as st, h as ot, b4 as fr, b5 as lt, b6 as me, b7 as fe, b8 as ve, b9 as vr, ba as wr, ag as jr, bb as Cr, X as pe, n as Te, H as at, K as nt, bc as it, bd as we, j as kr, be as Nr, I as ue, v as _r, O as Sr, o as Ie, au as Tr, av as Rr, aw as Vr, bf as dt, ax as Pe, ay as Ae, bg as $e, bh as Ee, bi as Me, R as Hr } from "./ChaiBuilderEditor-KEwDa8Bl.js";
-import { Check as Dr, EditIcon as Br, TrashIcon as Ir, Loader as Pr, SparklesIcon as Ar, DeleteIcon as $r } from "lucide-react";
-import { getBlockComponent as Re, getChaiDataProviders as Er, useGlobalStylingPresets as Mr } from "@chaibuilder/runtime";
-import { J as Lr, a as Or, d as zr } from "./index-e0c8PmRQ.js";
-import Yr from "@rjsf/core";
-import Xr from "@rjsf/validator-ajv8";
-import { a as Fr, u as Zr } from "./useCodeEditor-2KOfsFsx.js";
-import Wr from "react-autosuggest";
-import Ur from "fuse.js";
-import { A as Kr, C as ge, g as Gr } from "./utils-VpVqnC9m.js";
-import { a as qr } from "./MODIFIERS-fd5XOmum.js";
+import * as ie from "react";
+import $, { useState as j, useMemo as R, useEffect as A, useCallback as B, memo as ft, useRef as ye, createContext as Ze, useContext as se } from "react";
+import { useThrottledCallback as ce } from "@react-hookz/web";
+import { forEach as ke, isArray as pe, omit as vt, truncate as wt, includes as z, get as g, first as oe, split as jt, startCase as Y, toLower as re, isEmpty as b, map as T, find as Ct, last as kt, filter as Re, set as We, debounce as Nt, keys as he, cloneDeep as _t, each as St, capitalize as me, reject as Tt, nth as Ve, startsWith as q, isNumber as Rt, parseInt as Vt, isNaN as Ue, findLast as Ht, flatten as He, intersection as Dt, has as de, isNull as Bt } from "lodash-es";
+import { useTranslation as F } from "react-i18next";
+import { CopyIcon as It, PlusIcon as Ke, Cross2Icon as Ge, EyeOpenIcon as At, EyeClosedIcon as De, BorderAllIcon as O, WidthIcon as H, HeightIcon as D, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as $t, ArrowBottomRightIcon as Et, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Ot, AlignRightIcon as zt, StretchHorizontallyIcon as Yt, FontItalicIcon as Ft, UnderlineIcon as Xt, OverlineIcon as Zt, LetterCaseUppercaseIcon as Wt, Cross1Icon as Ut, InfoCircledIcon as Ne, MinusIcon as Kt, BoxIcon as qe, RowSpacingIcon as Gt, TriangleDownIcon as qt, CrossCircledIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as er } from "@radix-ui/react-icons";
+import { a2 as Je, aQ as Qe, aR as et, B as P, aS as tt, aT as tr, aU as rr, aV as sr, aW as or, aX as lr, aY as ar, M as X, aL as rt, $ as nr, a0 as ir, a1 as dr, aZ as cr, Z as pr, ab as ur, _ as gr, ac as U, ad as K, ae as G, i as xr, a_ as yr, a$ as hr, b0 as mr, b1 as br, b2 as fr, b3 as vr, b4 as wr, R as st, Q as ot, h as lt, b5 as jr, b6 as at, b7 as be, b8 as fe, b9 as ve, ba as Cr, bb as nt, ah as kr, bc as Nr, Y as le, o as _e, I as it, L as dt, bd as _r, aD as Be, be as ct, k as Sr, bf as Tr, J as ue, w as Rr, P as Vr, p as Ie, av as Hr, aw as Dr, ax as Br, bg as pt, ay as Ae, az as Pe, bh as $e, bi as Ee, bj as Me, S as Ir } from "./ChaiBuilderEditor-4xhn_QlL.js";
+import { Check as Ar, EditIcon as Pr, TrashIcon as $r, Loader as Er, SparklesIcon as Mr, Edit2 as Lr, X as Or } from "lucide-react";
+import { getBlockComponent as Se, getChaiDataProviders as zr, useGlobalStylingPresets as Yr } from "@chaibuilder/runtime";
+import { J as Fr, a as Xr, d as Zr } from "./index-e0c8PmRQ.js";
+import Wr from "@rjsf/core";
+import Ur from "@rjsf/validator-ajv8";
+import { u as Kr } from "./useCanvasSettings-Rvn5rRB8.js";
+import Gr from "react-autosuggest";
+import qr from "fuse.js";
+import { A as Jr, C as ge, g as Qr } from "./utils-VpVqnC9m.js";
+import { a as es } from "./MODIFIERS-fd5XOmum.js";
+import { get as Le, isEmpty as ts } from "lodash";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -49,30 +50,30 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-import "./index-YpnaudSM.js";
-function Jr(r) {
-  const o = [], t = {};
-  function a(l, s) {
-    Ne(s, (d, c) => {
-      const n = l ? `${l}.${c}` : c, p = ce(d) ? "list" : typeof d;
-      o.push(n), t[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ce(d) && a(n, d);
+import "./index-VBXQixVm.js";
+function rs(r) {
+  const a = [], t = {};
+  function l(o, n) {
+    ke(n, (d, p) => {
+      const s = o ? `${o}.${p}` : p, c = pe(d) ? "list" : typeof d;
+      a.push(s), t[s] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !pe(d) && l(s, d);
     });
   }
-  return a("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
+  return l("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
 }
-const je = ({ data: r, fullView: o }) => {
+const we = ({ data: r, fullView: a }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return o ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(qe, { children: /* @__PURE__ */ e.jsx(
-      Lr,
+    /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsx(
+      Fr,
       {
         data: r,
-        shouldExpandNode: Or,
+        shouldExpandNode: Xr,
         style: {
-          ...zr,
+          ...Zr,
           container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
           stringValue: "text-orange-600",
           label: "text-green-900 font-semibold pr-1 tracking-wider"
@@ -82,271 +83,271 @@ const je = ({ data: r, fullView: o }) => {
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: "max-h-36 w-full overflow-y-auto overflow-x-hidden text-[12px] leading-4 text-gray-800/50", children: [
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     r
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: vt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, Le = ({
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: wt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+}, Oe = ({
   type: r,
-  value: o = "",
+  value: a = "",
   setValue: t,
-  data: a,
-  onChange: l,
-  dataType: s,
+  data: l,
+  onChange: o,
+  dataType: n,
   appliedBindings: d
 }) => {
-  const { paths: c, pathsType: n } = Jr(a), p = r === "PROP" ? Re(a == null ? void 0 : a._type) : {}, h = r === "PROP", [i, u] = w(!1), x = T(() => r === "PROP" ? c.filter(
-    (g) => !X(d, g) && y(p, `props.${oe(wt(g, "."))}.binding`)
-  ) : c.filter((g) => s === y(n, g, "")), [r, c, d, s, p]);
+  const { paths: p, pathsType: s } = rs(l), c = r === "PROP" ? Se(l == null ? void 0 : l._type) : {}, u = r === "PROP", [i, h] = j(!1), y = R(() => r === "PROP" ? p.filter(
+    (x) => !z(d, x) && g(c, `props.${oe(jt(x, "."))}.binding`)
+  ) : p.filter((x) => n === g(s, x, "")), [r, p, d, n, c]);
   return A(() => {
-    o && l(o);
-  }, [o, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    a && o(a);
+  }, [a, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: F(re(r)) }),
-      /* @__PURE__ */ e.jsxs(Je, { open: i, onOpenChange: u, children: [
-        /* @__PURE__ */ e.jsx(Qe, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          B,
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(re(r)) }),
+      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: h, children: [
+        /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          P,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${m(o) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
-            children: o ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${b(a) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
+            children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(s) }),
-                o
+                u && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(n) }),
+                a
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              F(re(r))
+              Y(re(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(et, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Qt, { children: [
-          /* @__PURE__ */ e.jsx(er, { placeholder: `Choose ${re(r)}...` }),
-          /* @__PURE__ */ e.jsxs(tr, { children: [
-            /* @__PURE__ */ e.jsx(rr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(sr, { children: _(x, (g) => /* @__PURE__ */ e.jsxs(
-              or,
+        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(tr, { children: [
+          /* @__PURE__ */ e.jsx(rr, { placeholder: `Choose ${re(r)}...` }),
+          /* @__PURE__ */ e.jsxs(sr, { children: [
+            /* @__PURE__ */ e.jsx(or, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(lr, { children: T(y, (x) => /* @__PURE__ */ e.jsxs(
+              ar,
               {
-                value: g,
-                className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
+                value: x,
+                className: `cursor-pointer ${u ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (v) => {
-                  t(Ze(x, (C) => C === v) || null), u(!1);
+                  t(Ct(y, (k) => k === v) || null), h(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Dr, { className: `h-4 w-4 text-green-500 ${o === g ? "" : "opacity-0"}` }),
-                    g
+                    /* @__PURE__ */ e.jsx(Ar, { className: `h-4 w-4 text-green-500 ${a === x ? "" : "opacity-0"}` }),
+                    x
                   ] }),
-                  h ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(y(n, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: y(a, g) }) })
+                  u ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(g(s, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: g(l, x) }) })
                 ]
               },
-              g
+              x
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !h && !m(o) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: y(a, o, ""), fullView: !0 }) })
+    !u && !b(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: g(l, a, ""), fullView: !0 }) })
   ] });
-}, Qr = ({
+}, ss = ({
   appliedBindings: r = [],
-  onAddBinding: o,
+  onAddBinding: a,
   editMode: t,
-  item: a
+  item: l
 }) => {
-  const [l, s] = w(t ? a.key : ""), [d, c] = w(t ? a.value : ""), n = U(), [p] = tt(), h = H(
-    (x, g) => {
-      if (m(x))
+  const [o, n] = j(t ? l.key : ""), [d, p] = j(t ? l.value : ""), s = X(), [c] = rt(), u = B(
+    (y, x) => {
+      if (b(y))
         return "";
       {
-        const v = y(g === "PROP" ? n : p, x, "");
-        if (ce(v))
+        const v = g(x === "PROP" ? s : c, y, "");
+        if (pe(v))
           return "list";
-        const C = typeof v;
-        return C === "string" ? "text" : C === "object" ? "model" : C;
+        const k = typeof v;
+        return k === "string" ? "text" : k === "object" ? "model" : k;
       }
     },
-    [n, p]
-  ), [i, u] = w(t ? h(a.key, "PROP") : "");
+    [s, c]
+  ), [i, h] = j(t ? u(l.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(lr, { children: [
-      /* @__PURE__ */ e.jsx(ar, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(nr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(nr, { children: [
+      /* @__PURE__ */ e.jsx(ir, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(dr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
-        Le,
+        Oe,
         {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: l,
-          setValue: s,
-          onChange: (x) => {
-            const g = h(x, "PROP");
-            s(x), i !== g && c(""), u(g);
+          value: o,
+          setValue: n,
+          onChange: (y) => {
+            const x = u(y, "PROP");
+            n(y), i !== x && p(""), h(x);
           },
-          data: n,
+          data: s,
           dataType: i,
           appliedBindings: r
         }
       ),
       /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
       /* @__PURE__ */ e.jsx(
-        Le,
+        Oe,
         {
           type: "PATH",
-          isDisabled: m(l),
+          isDisabled: b(o),
           placeholder: "Enter data path",
           value: d,
-          setValue: c,
-          onChange: (x) => {
-            const g = h(x, "PATH");
-            c(i === g ? x : "");
+          setValue: p,
+          onChange: (y) => {
+            const x = u(y, "PATH");
+            p(i === x ? y : "");
           },
-          data: p,
+          data: c,
           dataType: i,
           appliedBindings: r
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
-      B,
+    /* @__PURE__ */ e.jsx(cr, { children: /* @__PURE__ */ e.jsx(
+      P,
       {
         type: "submit",
         className: "mt-4",
-        disabled: m(l) && m(d),
-        onClick: () => o({ key: l, value: d }),
+        disabled: b(o) && b(d),
+        onClick: () => a({ key: o, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, ct = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: a, editMode: l = !0, item: s = {} }) => {
-  const [d, c] = w(!1);
-  return /* @__PURE__ */ e.jsxs(dr, { children: [
-    /* @__PURE__ */ e.jsx(cr, { disabled: r, asChild: !0, onClick: () => c(!0), children: o }),
-    d && /* @__PURE__ */ e.jsx(pr, { children: /* @__PURE__ */ e.jsx(
-      Qr,
+}, ut = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
+  const [d, p] = j(!1);
+  return /* @__PURE__ */ e.jsxs(pr, { children: [
+    /* @__PURE__ */ e.jsx(ur, { disabled: r, asChild: !0, onClick: () => p(!0), children: a }),
+    d && /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(
+      ss,
       {
-        item: s,
-        editMode: l,
-        appliedBindings: a,
-        onAddBinding: (n) => {
-          t(n), c(!1);
+        item: n,
+        editMode: o,
+        appliedBindings: l,
+        onAddBinding: (s) => {
+          t(s), p(!1);
         }
       }
     ) })
   ] });
-}, es = ({
+}, os = ({
   item: r,
-  onAddBinding: o,
+  onAddBinding: a,
   onRemove: t,
-  selectedBlock: a,
-  dataProvider: l,
-  appliedBindings: s
+  selectedBlock: l,
+  dataProvider: o,
+  appliedBindings: n
 }) => {
-  const [d, c] = w("string"), n = (p, h) => {
-    if (m(p))
+  const [d, p] = j("string"), s = (c, u) => {
+    if (b(c))
       return "";
     {
-      const i = y(h === "PROP" ? a : l, p, "");
-      if (ce(i))
+      const i = g(u === "PROP" ? l : o, c, "");
+      if (pe(i))
         return "list";
-      const u = typeof i;
-      return u === "string" ? "text" : u === "object" ? "model" : u;
+      const h = typeof i;
+      return h === "string" ? "text" : h === "object" ? "model" : h;
     }
   };
-  return A(() => c(() => n(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return A(() => p(() => s(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-sm font-normal text-gray-500", children: r.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
-    /* @__PURE__ */ e.jsx(je, { data: y(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(we, { data: g(o, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(ct, { editMode: !0, onAddBinding: o, appliedBindings: s, item: r, children: /* @__PURE__ */ e.jsx(Br, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
+      /* @__PURE__ */ e.jsx(ut, { editMode: !0, onAddBinding: a, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Pr, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
-        Ir,
+        $r,
         {
           onClick: () => t(),
           className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
         }
       )
     ] }),
-    !m(d) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: F(d) })
+    !b(d) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(d) })
   ] });
-}, ts = ({ bindingData: r, onChange: o }) => {
-  const t = U(), [a] = tt(), l = Er(), [s, d] = w(
-    _(r, (i, u) => ({ key: u, value: i }))
+}, ls = ({ bindingData: r, onChange: a }) => {
+  const t = X(), [l] = rt(), o = zr(), [n, d] = j(
+    T(r, (i, h) => ({ key: h, value: i }))
   );
   A(() => {
-    d(_(r, (i, u) => ({ key: u, value: i })));
+    d(T(r, (i, h) => ({ key: h, value: i })));
   }, [t == null ? void 0 : t._id, r]);
-  const c = T(() => {
-    if (m(a))
+  const p = R(() => {
+    if (b(l))
       return !0;
-    if (m(s))
+    if (b(n))
       return !1;
-    const i = jt(s);
-    return m(i == null ? void 0 : i.key) || m(i == null ? void 0 : i.value);
-  }, [a, s]), n = (i) => {
-    const u = ye(s, (x) => x.key !== i.key);
-    d([...u, i]), h([...u, i]);
-  }, p = (i) => {
-    const u = ye(s, (x, g) => i !== g);
-    h([...u]);
-  }, h = H(
+    const i = kt(n);
+    return b(i == null ? void 0 : i.key) || b(i == null ? void 0 : i.value);
+  }, [l, n]), s = (i) => {
+    const h = Re(n, (y) => y.key !== i.key);
+    d([...h, i]), u([...h, i]);
+  }, c = (i) => {
+    const h = Re(n, (y, x) => i !== x);
+    u([...h]);
+  }, u = B(
     (i = []) => {
-      if (d(i), m(i)) {
-        o({});
+      if (d(i), b(i)) {
+        a({});
         return;
       }
-      const u = {};
-      Ne(i, (x) => {
-        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && We(u, x.key, x.value);
-      }), o(u);
+      const h = {};
+      ke(i, (y) => {
+        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && We(h, y.key, y.value);
+      }), a(h);
     },
-    [o]
+    [a]
   );
-  return m(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
+  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    _(s, (i, u) => /* @__PURE__ */ e.jsx(
-      es,
+    T(n, (i, h) => /* @__PURE__ */ e.jsx(
+      os,
       {
         item: i,
-        onAddBinding: n,
-        onRemove: () => p(u),
+        onAddBinding: s,
+        onRemove: () => c(h),
         selectedBlock: t,
-        dataProvider: a,
-        appliedBindings: _(s, "key")
+        dataProvider: l,
+        appliedBindings: T(n, "key")
       },
       i.key
     )),
-    /* @__PURE__ */ e.jsxs($, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(E, { disabled: m(a), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        ct,
+    /* @__PURE__ */ e.jsxs(U, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(K, { disabled: b(l), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        ut,
         {
-          disabled: c,
-          appliedBindings: _(s, "key"),
-          onAddBinding: n,
+          disabled: p,
+          appliedBindings: T(n, "key"),
+          onAddBinding: s,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
-              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: m(a) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${p ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      c && /* @__PURE__ */ e.jsx(M, { sideOffset: -55, className: "text-[11px]", children: m(a) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      p && /* @__PURE__ */ e.jsx(G, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, rs = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), ss = ({ id: r, placeholder: o, value: t }) => {
-  const { t: a } = I(), [, l] = Fr(), s = U();
+}, as = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), ns = ({ id: r, placeholder: a, value: t }) => {
+  const { t: l } = F(), [, o] = xr(), n = X();
   if (typeof window > "u")
     return null;
   const d = () => {
-    const c = s == null ? void 0 : s._id, n = r.replace("root.", "");
-    l({ blockId: c, blockProp: n, placeholder: o, initialCode: t });
+    const p = n == null ? void 0 : n._id, s = r.replace("root.", "");
+    o({ blockId: p, blockProp: s, placeholder: a, initialCode: t });
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ e.jsx(
@@ -354,256 +355,256 @@ const je = ({ data: r, fullView: o }) => {
       {
         onClick: d,
         className: "text-pretty w-[90%] max-w-full cursor-default truncate rounded border bg-white p-2 text-left text-[10px]",
-        children: t.trim().length > 0 ? t.substring(0, 46) : o || "Eg: <script>console.log('Hello, world!');<\/script>"
+        children: t.trim().length > 0 ? t.substring(0, 46) : a || "Eg: <script>console.log('Hello, world!');<\/script>"
       }
     ),
-    /* @__PURE__ */ e.jsx(B, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: a("Open code editor") })
+    /* @__PURE__ */ e.jsx(P, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: l("Open code editor") })
   ] });
-}, Ce = bt(({ id: r, properties: o, formData: t, onChange: a }) => {
-  const [l, s] = w(t), d = { type: "object", properties: {} }, c = {};
-  Object.keys(o).forEach((p) => {
-    const h = o[p];
-    if (X(["slot", "styles"], h.type))
+}, je = ft(({ id: r, properties: a, formData: t, onChange: l }) => {
+  const [o, n] = j(t), d = { type: "object", properties: {} }, p = {};
+  Object.keys(a).forEach((c) => {
+    const u = a[c];
+    if (z(["slot", "styles"], u.type))
       return;
-    const i = p;
-    d.properties[i] = ur(h), c[i] = gr(h);
+    const i = c;
+    d.properties[i] = yr(u), p[i] = hr(u);
   }), A(() => {
-    s(t);
+    n(t);
   }, [r]);
-  const n = de(
-    async ({ formData: p }, h) => {
-      a({ formData: p }, h);
+  const s = ce(
+    async ({ formData: c }, u) => {
+      l({ formData: c }, u);
     },
-    [a],
+    [l],
     1e3
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Yr,
+    Wr,
     {
       widgets: {
-        binding: rs,
-        richtext: xr,
-        icon: yr,
-        image: hr,
-        code: ss
+        binding: as,
+        richtext: mr,
+        icon: br,
+        image: fr,
+        code: ns
       },
-      fields: { link: br },
+      fields: { link: vr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Xr,
-      uiSchema: c,
+      validator: Ur,
+      uiSchema: p,
       schema: d,
-      formData: l,
-      onChange: ({ formData: p }, h) => {
-        h && (s(p), n({ formData: p }, h));
+      formData: o,
+      onChange: ({ formData: c }, u) => {
+        u && (n(c), s({ formData: c }, u));
       }
     }
   );
-}), os = () => {
-  const [r, o] = Zr(), t = mr(), a = (d, c) => {
-    o((n) => ({ ...n, [d]: c }));
+}), is = () => {
+  const [r, a] = Kr(), t = wr(), l = (d, p) => {
+    a((s) => ({ ...s, [d]: p }));
   };
-  if (m(t))
+  if (b(t))
     return null;
-  const { block: l, settings: s } = t;
+  const { block: o, settings: n } = t;
   return /* @__PURE__ */ e.jsxs("div", { className: "text-xs hover:no-underline", children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2 bg-gray-100 px-4 py-2", children: [
       t.block._type,
       " settings"
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "bg-white pb-2", children: /* @__PURE__ */ e.jsx(
-      Ce,
+      je,
       {
-        id: l == null ? void 0 : l._id,
-        onChange: ({ formData: d }) => a(l._id, d),
-        formData: y(r, l._id, {}),
-        properties: s
+        id: o == null ? void 0 : o._id,
+        onChange: ({ formData: d }) => l(o._id, d),
+        formData: g(r, o._id, {}),
+        properties: n
       }
     ) })
   ] });
 };
-function ls() {
-  const r = U(), o = rt(), t = st(), a = Re(r._type), l = { ...r }, [s, d] = w(l), c = ot("dataBindingSupport", !1), n = ({ formData: x }, g, v) => {
-    if (g && (s == null ? void 0 : s._id) === r._id) {
-      const C = g.replace("root.", "");
-      t([r._id], { [C]: y(x, C) }, v);
+function ds() {
+  const r = X(), a = st(), t = ot(), l = Se(r._type), o = { ...r }, [n, d] = j(o), p = lt("dataBindingSupport", !1), s = ({ formData: y }, x, v) => {
+    if (x && (n == null ? void 0 : n._id) === r._id) {
+      const k = x.replace("root.", "");
+      t([r._id], { [k]: g(y, k) }, v);
     }
-  }, p = H(
-    Ct(({ formData: x }, g, v) => {
-      n({ formData: x }, g, v), d(x);
+  }, c = B(
+    Nt(({ formData: y }, x, v) => {
+      s({ formData: y }, x, v), d(y);
     }, 1500),
     [r == null ? void 0 : r._id]
-  ), h = ({ formData: x }, g) => {
-    if (g) {
-      const v = g.replace("root.", "");
-      o(
+  ), u = ({ formData: y }, x) => {
+    if (x) {
+      const v = x.replace("root.", "");
+      a(
         [r._id],
-        fr(v, y(x, v.split(".")))
-      ), p({ formData: x }, g, { [v]: y(s, v) });
+        jr(v, g(y, v.split(".")))
+      ), c({ formData: y }, x, { [v]: g(n, v) });
     }
-  }, i = he(y(l, "_bindings", {})), u = T(() => {
-    const x = kt(y(a, "props", {}));
-    return c && Nt(i, (g) => delete x[g]), x;
-  }, [a, i, c]);
+  }, i = he(g(o, "_bindings", {})), h = R(() => {
+    const y = _t(g(l, "props", {}));
+    return p && St(i, (x) => delete y[x]), y;
+  }, [l, i, p]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(os, {}),
-    c ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(me, { value: "BINDING", children: [
+    /* @__PURE__ */ e.jsx(is, {}),
+    p ? /* @__PURE__ */ e.jsxs(at, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(be, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${m(y(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${b(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          ts,
+          ls,
           {
-            bindingData: y(r, "_bindings", {}),
-            onChange: (x) => {
-              n({ formData: { _bindings: x } }, "root._bindings");
+            bindingData: g(r, "_bindings", {}),
+            onChange: (y) => {
+              s({ formData: { _bindings: y } }, "root._bindings");
             }
           }
         ) })
       ] }),
-      /* @__PURE__ */ e.jsxs(me, { value: "STATIC", children: [
+      /* @__PURE__ */ e.jsxs(be, { value: "STATIC", children: [
         /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-blue-500" }),
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(ve, { className: "pt-4", children: [
-          m(i) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
+          b(i) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: _(i, be).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: T(i, me).join(", ") }),
             " ",
             i.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            Ce,
+            je,
             {
               id: r == null ? void 0 : r._id,
-              onChange: h,
-              formData: l,
-              properties: u
+              onChange: u,
+              formData: o,
+              properties: h
             }
           )
         ] })
       ] })
     ] }) : /* @__PURE__ */ e.jsx(
-      Ce,
+      je,
       {
         id: r == null ? void 0 : r._id,
-        onChange: h,
-        formData: l,
-        properties: u
+        onChange: u,
+        formData: o,
+        properties: h
       }
     )
   ] });
 }
-const as = ({ blockId: r }) => {
-  const { t: o } = I(), { askAi: t, loading: a, error: l } = vr(), [s, d] = w(""), c = mt(null);
+const cs = ({ blockId: r }) => {
+  const { t: a } = F(), { askAi: t, loading: l, error: o } = Cr(), [n, d] = j(""), p = ye(null);
   A(() => {
-    var p;
-    (p = c.current) == null || p.focus();
+    var c;
+    (c = p.current) == null || c.focus();
   }, []);
-  const n = () => {
-    l || d("");
+  const s = () => {
+    o || d("");
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "", children: [
-    /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: o("Ask AI") }),
+    /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: a("Ask AI") }),
     /* @__PURE__ */ e.jsx(
-      wr,
+      nt,
       {
-        ref: c,
-        value: s,
-        onChange: (p) => d(p.target.value),
-        placeholder: o("Ask AI to edit styles"),
+        ref: p,
+        value: n,
+        onChange: (c) => d(c.target.value),
+        placeholder: a("Ask AI to edit styles"),
         className: "w-full border border-gray-400 focus:border-0",
         rows: 3,
-        onKeyDown: (p) => {
-          p.key === "Enter" && (p.preventDefault(), t("styles", r, s, n));
+        onKeyDown: (c) => {
+          c.key === "Enter" && (c.preventDefault(), t("styles", r, n, s));
         }
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 my-2", children: [
-      a ? null : /* @__PURE__ */ e.jsx(
-        B,
+      l ? null : /* @__PURE__ */ e.jsx(
+        P,
         {
-          disabled: s.trim().length < 5 || a,
-          onClick: () => t("styles", r, s, n),
+          disabled: n.trim().length < 5 || l,
+          onClick: () => t("styles", r, n, s),
           variant: "default",
           className: "w-fit",
           size: "sm",
-          children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx(Pr, { className: "w-5 h-5 animate-spin" }),
-            o("Generating... Please wait")
-          ] }) : o("Edit with AI")
+          children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(Er, { className: "w-5 h-5 animate-spin" }),
+            a("Generating... Please wait")
+          ] }) : a("Edit with AI")
         }
       ),
-      a ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e.jsxs(jr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
-          /* @__PURE__ */ e.jsx(Cr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
-          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: o("Generating... Please wait") })
+      l ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ e.jsxs(kr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
+          /* @__PURE__ */ e.jsx(Nr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
+          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
         ] }),
-        /* @__PURE__ */ e.jsx(B, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: o("Stop") })
+        /* @__PURE__ */ e.jsx(P, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
       ] }) : null
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: l.message }) })
+    /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: o && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: o.message }) })
   ] });
-}, Oe = new Ur(Kr, {
+}, ze = new qr(Jr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function pt() {
-  var S;
-  const { t: r } = I(), [o] = pe(), t = U(), a = Te(), l = at(), [s] = nt(), d = ot("askAiCallBack", null), [c, n] = w(""), { toast: p } = it(), h = (S = oe(o)) == null ? void 0 : S.prop, i = _t((y(t, h, "").replace(qr, "").split(",").pop() || "").split(" "), m), u = () => {
-    const j = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(s, j, !0), n("");
-  }, [x, g] = w([]), v = ({ value: j }) => {
-    const D = j.trim().toLowerCase(), Z = D.match(/.+:/g);
-    let b = [];
-    if (Z && Z.length > 0) {
-      const [f] = Z, N = D.replace(f, "");
-      b = Oe.search(N).map((z) => ({
-        ...z,
-        item: { ...z.item, name: f + z.item.name }
+function gt() {
+  var N;
+  const { t: r } = F(), [a] = le(), t = X(), l = _e(), o = it(), [n] = dt(), d = lt("askAiCallBack", null), [p, s] = j(""), { toast: c } = _r(), u = (N = oe(a)) == null ? void 0 : N.prop, i = Tt((g(t, u, "").replace(es, "").split(",").pop() || "").split(" "), b), h = () => {
+    const C = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l(n, C, !0), s("");
+  }, [y, x] = j([]), v = ({ value: C }) => {
+    const V = C.trim().toLowerCase(), W = V.match(/.+:/g);
+    let m = [];
+    if (W && W.length > 0) {
+      const [f] = W, S = V.replace(f, "");
+      m = ze.search(S).map((L) => ({
+        ...L,
+        item: { ...L.item, name: f + L.item.name }
       }));
     } else
-      b = Oe.search(D);
-    return g(_(b, "item"));
-  }, C = () => {
-    g([]);
-  }, K = (j) => j.name, L = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), G = {
+      m = ze.search(V);
+    return x(T(m, "item"));
+  }, k = () => {
+    x([]);
+  }, E = (C) => C.name, I = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), Z = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("Enter classes separated by space"),
-    value: c,
-    onKeyDown: (j) => {
-      j.key === "Enter" && c.trim() !== "" && u();
+    value: p,
+    onKeyDown: (C) => {
+      C.key === "Enter" && p.trim() !== "" && h();
     },
-    onChange: (j, { newValue: D }) => n(D),
+    onChange: (C, { newValue: V }) => s(V),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, q = () => {
+  }, w = () => {
     if (navigator.clipboard === void 0) {
-      p({
+      c({
         title: "Clipboard not supported",
         description: "Please use Chrome, Firefox or Safari",
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(i.join(" ")), p({
+    navigator.clipboard.writeText(i.join(" ")), c({
       title: "Copied",
       description: "Classes copied to clipboard"
     });
@@ -611,34 +612,34 @@ function pt() {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `flex ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto border-b-2 bg-gray-100 pb-4`,
+      className: `flex ${y.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto border-b-2 bg-gray-100 pb-4`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
             /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
-            /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(Dt, { onClick: q, className: "cursor-pointer" }) }),
-              /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
+            /* @__PURE__ */ e.jsxs(U, { children: [
+              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(It, { onClick: w, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
-          d ? /* @__PURE__ */ e.jsxs(Je, { children: [
-            /* @__PURE__ */ e.jsx(Qe, { children: /* @__PURE__ */ e.jsxs(B, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-              /* @__PURE__ */ e.jsx(Ar, { className: "h-4 w-4" }),
+          d ? /* @__PURE__ */ e.jsxs(Qe, { children: [
+            /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
+              /* @__PURE__ */ e.jsx(Mr, { className: "h-4 w-4" }),
               /* @__PURE__ */ e.jsx("span", { className: "ml-2", children: r("Ask AI") })
             ] }) }),
-            /* @__PURE__ */ e.jsx(et, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(as, { blockId: t == null ? void 0 : t._id }) })
+            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(cs, { blockId: t == null ? void 0 : t._id }) })
           ] }) : null
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Wr,
+            Gr,
             {
-              suggestions: x,
+              suggestions: y,
               onSuggestionsFetchRequested: v,
-              onSuggestionsClearRequested: C,
-              getSuggestionValue: K,
-              renderSuggestion: L,
-              inputProps: G,
+              onSuggestionsClearRequested: k,
+              getSuggestionValue: E,
+              renderSuggestion: I,
+              inputProps: Z,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -650,172 +651,162 @@ function pt() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            B,
+            P,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: u,
-              disabled: c.trim() === "",
+              onClick: h,
+              disabled: p.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(_e, {})
+              children: /* @__PURE__ */ e.jsx(Ke, {})
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ne.Children.toArray(
-          i.map((j) => /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ie.Children.toArray(
+          i.map((C) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-gray-300 bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300",
               children: [
-                j,
+                C,
                 /* @__PURE__ */ e.jsx(
-                  Ke,
+                  Ge,
                   {
-                    onClick: () => l(s, [j]),
+                    onClick: () => o(n, [C]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            j
+            C
           ))
         ) })
       ]
     }
   );
 }
-const ns = ({ onAdd: r }) => {
-  const { t: o } = I(), [t, a] = w({ key: "", value: "" }), l = () => {
-    m(t.key) || (r({ ...t, key: t.key }), a({ key: "", value: "" }));
+const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t }) {
+  const [l, o] = j([]), [n, d] = j(""), [p, s] = j(""), [c, u] = j(null), [i, h] = j(""), y = ye(null), x = ye(null);
+  A(() => {
+    y.current && y.current.focus();
+  }, [l]), A(() => {
+    o(a);
+  }, [a]);
+  const v = () => {
+    if (n.startsWith("@")) {
+      h("Attribute keys cannot start with '@'");
+      return;
+    }
+    if (n && p) {
+      const w = [...l, { key: n, value: p }];
+      t(w), o(l), d(""), s(""), h("");
+    }
+  }, k = (w) => {
+    const N = l.filter((C, V) => V !== w);
+    t(N), o(N);
+  }, E = (w) => {
+    u(w), d(l[w].key), s(l[w].value);
+  }, I = () => {
+    if (n.startsWith("@")) {
+      h("Attribute keys cannot start with '@'");
+      return;
+    }
+    if (c !== null && n && p) {
+      const w = [...l];
+      w[c] = { key: n, value: p }, t(w), o(w), u(null), d(""), s(""), h("");
+    }
+  }, Z = (w) => {
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), c !== null ? I() : v());
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200", children: [
-    /* @__PURE__ */ e.jsx(
-      we,
+  return /* @__PURE__ */ e.jsxs("div", { className: "px-1", children: [
+    /* @__PURE__ */ e.jsxs(
+      "form",
       {
-        name: "key",
-        className: "h-6",
-        onChange: (s) => a({ ...t, key: s.target.value }),
-        value: t.key,
-        placeholder: o("Name"),
-        autoComplete: "off",
-        autoCapitalize: "off",
-        onKeyDown: (s) => {
-          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
-        }
+        onSubmit: (w) => {
+          w.preventDefault(), c !== null ? I() : v();
+        },
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+              /* @__PURE__ */ e.jsx(Be, { htmlFor: "attrKey", className: "text-xs", children: "Key" }),
+              /* @__PURE__ */ e.jsx(
+                ct,
+                {
+                  id: "attrKey",
+                  ref: y,
+                  value: n,
+                  onChange: (w) => d(w.target.value),
+                  placeholder: "Key",
+                  className: "h-8 text-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+              /* @__PURE__ */ e.jsx(Be, { htmlFor: "attrValue", className: "text-xs", children: "Value" }),
+              /* @__PURE__ */ e.jsx(
+                nt,
+                {
+                  id: "attrValue",
+                  rows: 2,
+                  ref: x,
+                  value: p,
+                  onChange: (w) => s(w.target.value),
+                  onKeyDown: Z,
+                  placeholder: "Value",
+                  className: "bg-background text-sm"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx(P, { type: "submit", className: "h-8 w-full text-sm", children: c !== null ? "Save" : "Add" }),
+          i && /* @__PURE__ */ e.jsx("p", { className: "text-xs text-red-500", children: i })
+        ]
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-1.5", children: /* @__PURE__ */ e.jsx(
-      we,
-      {
-        className: "h-6",
-        name: "value",
-        onChange: (s) => a({ ...t, value: s.target.value }),
-        value: t.value,
-        placeholder: o("Value"),
-        autoComplete: "off",
-        autoCapitalize: "off",
-        onKeyDown: (s) => {
-          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
-        }
-      }
-    ) }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsxs(B, { disabled: m(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
-        /* @__PURE__ */ e.jsxs("span", { children: [
-          o("Add"),
-          " "
-        ] }),
-        /* @__PURE__ */ e.jsx(_e, {})
+    /* @__PURE__ */ e.jsx("div", { className: "mt-4 max-h-60 space-y-1 overflow-y-auto", children: l.map((w, N) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "mr-2 flex flex-col", children: [
+        /* @__PURE__ */ e.jsx("span", { className: "truncate font-semibold", children: w.key }),
+        /* @__PURE__ */ e.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value })
       ] }),
-      m(t.key) ? null : /* @__PURE__ */ e.jsx(B, { variant: "ghost", onClick: () => a({ key: "", value: "" }), children: o("Cancel") })
-    ] })
+      /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0", children: [
+        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(N), children: [
+          /* @__PURE__ */ e.jsx(Lr, { className: "h-3 w-3" }),
+          /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Edit attribute" })
+        ] }),
+        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(N), children: [
+          /* @__PURE__ */ e.jsx(Or, { className: "h-3 w-3" }),
+          /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Remove attribute" })
+        ] })
+      ] })
+    ] }, N)) })
   ] });
-}, is = () => {
-  const r = U(), [o, t] = w([]), [a] = pe(), l = rt(), s = st(), { t: d } = I(), { toast: c } = it(), n = `${y(a, "0.prop")}_attrs`;
-  ne.useEffect(() => {
-    const u = _(y(r, n), (x, g) => ({ key: g, value: x }));
-    m(u) ? t([]) : t(u);
-  }, [y(r, n)]);
-  const p = (u) => {
-    const x = ye(o, (g, v) => u !== v);
-    i(x);
-  }, h = (u) => {
-    const x = Ze(o, { key: u.key });
-    if (x && (x.value.startsWith("dnd-") || x.value.startsWith("#dnd-"))) {
-      c({
-        title: d("Cannot add predefined attribute"),
-        variant: "destructive",
-        description: d(`"(${u.key})" cannot be added as it is a predefined attribute for this block`)
-      });
-      return;
-    }
-    const g = [...o, u];
-    i(g);
-  }, i = ne.useCallback(
-    (u = []) => {
-      const x = {};
-      Ne(u, (g) => {
-        m(g.key) || We(x, g.key, g.value);
-      }), s([y(r, "_id")], { [n]: x });
+}), us = ie.memo(() => {
+  const r = X(), [a, t] = j([]), [l] = le(), o = st(), n = ot(), d = `${g(l, "0.prop")}_attrs`;
+  ie.useEffect(() => {
+    const s = T(g(r, d), (c, u) => ({ key: u, value: c }));
+    b(s) ? t([]) : t(s);
+  }, [g(r, d)]);
+  const p = ie.useCallback(
+    (s = []) => {
+      const c = {};
+      ke(s, (u) => {
+        b(u.key) || We(c, u.key, u.value);
+      }), n([g(r, "_id")], { [d]: c });
     },
-    [r, l, n]
+    [r, o, d]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 text-xs text-gray-700", children: [
-      m(o) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No attributes added") }) }) : null,
-      ne.Children.toArray(
-        _(o, (u) => /* @__PURE__ */ e.jsxs("li", { className: "group flex w-full max-w-full items-center justify-between", children: [
-          /* @__PURE__ */ e.jsxs($, { delayDuration: 1e3, children: [
-            /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-[230px] cursor-default truncate px-1 hover:bg-gray-200", children: [
-              u.key,
-              u.value.toString().trim() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                " ",
-                /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
-                " ",
-                u.value.toString().trim()
-              ] }) : null
-            ] }) }),
-            /* @__PURE__ */ e.jsxs(M, { className: "max-w-[200px]", children: [
-              /* @__PURE__ */ e.jsxs("div", { children: [
-                d("Name"),
-                ": ",
-                u.key
-              ] }),
-              /* @__PURE__ */ e.jsxs("div", { children: [
-                d("Value"),
-                ": ",
-                u.value.toString()
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsxs($, { children: [
-            /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-              "button",
-              {
-                disabled: W(u.value, "dnd-"),
-                className: "invisible group-hover:visible",
-                onClick: () => p(o.indexOf(u)),
-                children: /* @__PURE__ */ e.jsx($r, { className: "w-4 text-gray-500" })
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(M, { className: "max-w-[200px]", children: W(u.value.toString(), "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
-          ] })
-        ] }))
-      )
-    ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(ns, { onAdd: (u) => h(u) })
-  ] }) });
-}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
+  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(ps, { preloadedAttributes: a, onAttributesChange: p }) }) }) });
+}), _ = ["px", "%", "em", "rem", "ch", "vh", "vw"], gs = {
   heading: "flex.heading",
   items: [
-    { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
+    { type: "arbitrary", label: "flex.basis", units: _, property: "flexBasis" },
     { type: "range", label: "flex.order", property: "order" },
     { type: "dropdown", label: "flex.flex", property: "flexGrowShrink" },
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, cs = {
+}, xs = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -826,18 +817,18 @@ const ns = ({ onAdd: r }) => {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ps = [
+}, ys = [
   {
     heading: "Styles",
     items: [
-      { component: pt },
-      { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
+      { component: gt },
+      { type: "arbitrary", label: "layout.width", units: _.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: _.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "layout.margin",
         negative: !0,
-        units: [...k, "auto"],
+        units: [..._, "auto"],
         options: [
           { key: "margin", label: "layout.margin_all" },
           { key: "marginX", label: "layout.margin_lr" },
@@ -867,8 +858,8 @@ const ns = ({ onAdd: r }) => {
         items: [
           { type: "dropdown", property: "textAlign", label: "typography.align" },
           { type: "dropdown", property: "fontFamily", label: "typography.font" },
-          { type: "arbitrary", property: "fontSize", label: "typography.size", units: k },
-          { type: "arbitrary", property: "lineHeight", label: "typography.height", units: k.concat("-") },
+          { type: "arbitrary", property: "fontSize", label: "typography.size", units: _ },
+          { type: "arbitrary", property: "lineHeight", label: "typography.height", units: _.concat("-") },
           { type: "range", property: "fontWeight", label: "typography.weight" },
           { type: "color", property: "textColor", label: "typography.color" }
         ]
@@ -890,19 +881,19 @@ const ns = ({ onAdd: r }) => {
   },
   {
     heading: "Attributes",
-    items: [{ component: is }]
+    items: [{ component: us }]
   }
-], Vo = [
+], Ao = [
   {
     heading: "layout.heading",
     items: [
-      { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "layout.width", units: _.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: _.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "layout.margin",
         negative: !0,
-        units: [...k, "auto"],
+        units: [..._, "auto"],
         options: [
           { key: "margin", label: "layout.margin_all" },
           { key: "marginX", label: "layout.margin_lr" },
@@ -943,16 +934,16 @@ const ns = ({ onAdd: r }) => {
         styleType: "accordion",
         heading: "size.min_width_height",
         items: [
-          { type: "arbitrary", label: "size.min_width", units: k.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "size.min_height", units: k.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "size.min_width", units: _.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "size.min_height", units: _.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "size.max_width_height",
         items: [
-          { type: "arbitrary", label: "size.max_width", units: k.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "size.max_height", units: k.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "size.max_width", units: _.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "size.max_height", units: _.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -969,7 +960,7 @@ const ns = ({ onAdd: r }) => {
   {
     heading: "display.heading",
     items: [
-      { type: "dropdown", label: "display.display", property: "display", units: k },
+      { type: "dropdown", label: "display.display", property: "display", units: _ },
       {
         styleType: "accordion",
         heading: "display.flex_options",
@@ -1020,7 +1011,7 @@ const ns = ({ onAdd: r }) => {
         styleType: "accordion",
         heading: "display.visibility_opacity",
         items: [
-          { type: "dropdown", label: "display.visibility", property: "visibility", units: k },
+          { type: "dropdown", label: "display.visibility", property: "visibility", units: _ },
           { type: "arbitrary", label: "display.opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -1096,8 +1087,8 @@ const ns = ({ onAdd: r }) => {
     heading: "typography.heading",
     items: [
       { type: "dropdown", property: "fontFamily", label: "typography.font" },
-      { type: "arbitrary", property: "fontSize", label: "typography.size", units: k },
-      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: k.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "typography.size", units: _ },
+      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: _.concat("-") },
       { type: "range", property: "fontWeight", label: "typography.weight" },
       { type: "color", property: "textColor", label: "typography.color" },
       {
@@ -1294,89 +1285,89 @@ const ns = ({ onAdd: r }) => {
   },
   {
     heading: "classes.heading",
-    items: [{ component: pt }]
+    items: [{ component: gt }]
   }
-], ut = {
+], xt = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
-  visible: Bt,
-  invisible: Be,
+  visible: At,
+  invisible: De,
   // display
-  hidden: Be,
-  gap: Y,
-  gapX: R,
-  gapY: V,
-  spaceX: R,
-  spaceY: V,
-  overscroll: Y,
-  overscrollX: R,
-  overscrollY: V,
-  overflow: Y,
-  overflowX: R,
-  overflowY: V,
+  hidden: De,
+  gap: O,
+  gapX: H,
+  gapY: D,
+  spaceX: H,
+  spaceY: D,
+  overscroll: O,
+  overscrollX: H,
+  overscrollY: D,
+  overflow: O,
+  overflowX: H,
+  overflowY: D,
   top: J,
   right: Q,
   bottom: ee,
   left: te,
-  inset: Y,
-  insetX: R,
-  insetY: V,
-  border: Y,
-  borderX: R,
-  borderY: V,
+  inset: O,
+  insetX: H,
+  insetY: D,
+  border: O,
+  borderX: H,
+  borderY: D,
   borderTop: J,
   borderRight: Q,
   borderBottom: ee,
   borderLeft: te,
-  borderRadius: Y,
-  borderRadiusX: R,
-  borderRadiusY: V,
+  borderRadius: O,
+  borderRadiusX: H,
+  borderRadiusY: D,
   borderRadiusTop: J,
   borderRadiusRight: Q,
   borderRadiusBottom: ee,
   borderRadiusLeft: te,
-  borderRadiusTopLeft: It,
-  borderRadiusTopRight: Pt,
-  borderRadiusBottomRight: At,
-  borderRadiusBottomLeft: $t,
-  divideXWidth: R,
-  divideYWidth: V,
-  scale: Y,
-  scaleX: R,
-  scaleY: V,
-  skewX: R,
-  skewY: V,
-  translateX: R,
-  translateY: V,
+  borderRadiusTopLeft: Pt,
+  borderRadiusTopRight: $t,
+  borderRadiusBottomRight: Et,
+  borderRadiusBottomLeft: Mt,
+  divideXWidth: H,
+  divideYWidth: D,
+  scale: O,
+  scaleX: H,
+  scaleY: D,
+  skewX: H,
+  skewY: D,
+  translateX: H,
+  translateY: D,
   // padding
-  padding: Y,
-  paddingX: R,
-  paddingY: V,
+  padding: O,
+  paddingX: H,
+  paddingY: D,
   paddingTop: J,
   paddingRight: Q,
   paddingBottom: ee,
   paddingLeft: te,
   // margin
-  margin: Y,
-  marginX: R,
-  marginY: V,
+  margin: O,
+  marginX: H,
+  marginY: D,
   marginTop: J,
   marginRight: Q,
   marginBottom: ee,
   marginLeft: te,
   // text-align
-  textLeft: Et,
-  textCenter: Mt,
-  textRight: Lt,
-  textJustify: Ot,
+  textLeft: Lt,
+  textCenter: Ot,
+  textRight: zt,
+  textJustify: Yt,
   // font style
-  italic: zt,
+  italic: Ft,
   // "not-italic": "",
   // decoration
-  underline: Yt,
-  overline: Xt,
+  underline: Xt,
+  overline: Zt,
   // transform
-  uppercase: Ft,
+  uppercase: Wt,
   block: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
       "path",
@@ -1417,7 +1408,7 @@ const ns = ({ onAdd: r }) => {
       }
     )
   ] }),
-  "float-none": Ke,
+  "float-none": Ge,
   // position
   fixed: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
@@ -1489,101 +1480,101 @@ const ns = ({ onAdd: r }) => {
       }
     )
   ] }),
-  static: Zt
-}, le = Fe({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  static: Ut
+}, ae = Ze({ canReset: !1, canChange: !0 }), hs = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: o, canChange: t }, children: r })
-), gt = ({ label: r, property: o, onChange: t }) => {
-  const a = T(() => y(ge, `${o}.classes`, [""]), [o]), l = ae(o), s = T(() => y(l, "cls", ""), [l]), { canChange: d } = se(le), c = /\[.*\]/g.test(s);
-  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(we, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
-    /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
-      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind arbitrary value." })
+  /* @__PURE__ */ e.jsx(ae.Provider, { value: { canReset: a, canChange: t }, children: r })
+), yt = ({ label: r, property: a, onChange: t }) => {
+  const l = R(() => g(ge, `${a}.classes`, [""]), [a]), o = ne(a), n = R(() => g(o, "cls", ""), [o]), { canChange: d } = se(ae), p = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e.jsx(ct, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
+      /* @__PURE__ */ e.jsx(G, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    ke,
+    Ce,
     {
       rounded: r,
-      onChange: (n) => t(n, o),
-      selected: s,
-      options: a,
+      onChange: (s) => t(s, a),
+      selected: n,
+      options: l,
       disabled: !d
     }
   ) });
 };
-function ke({ selected: r, onChange: o, rounded: t = !1, options: a, disabled: l = !1 }) {
-  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = kr();
+function Ce({ selected: r, onChange: a, rounded: t = !1, options: l, disabled: o = !1 }) {
+  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: p } = Sr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !a.length || l,
+      disabled: !l.length || o,
       className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (n) => o(n.target.value),
-      onKeyDown: (n) => {
-        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && c());
+      onChange: (s) => a(s.target.value),
+      onKeyDown: (s) => {
+        s.ctrlKey && (s.key === "z" && d(), s.key === "y" && p());
       },
-      value: s,
+      value: n,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
-          a.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
+        $.Children.toArray(
+          l.map((s) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: s, children: s }))
         )
       ]
     }
   );
 }
-const gs = ({ property: r, onChange: o }) => {
-  const { canReset: t, canChange: a } = se(le), l = ae(r), s = T(() => y(l, "cls", ""), [l]), d = T(() => y(ge, `${r}.classes`, [""]), [r]), c = d.indexOf(s) > -1 ? d.indexOf(s) : 0, n = /\[.*\]/g.test(s);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const ms = ({ property: r, onChange: a }) => {
+  const { canReset: t, canChange: l } = se(ae), o = ne(r), n = R(() => g(o, "cls", ""), [o]), d = R(() => g(ge, `${r}.classes`, [""]), [r]), p = d.indexOf(n) > -1 ? d.indexOf(n) : 0, s = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: s ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!t || c - 1 < 0),
-        onClick: () => o(He(d, c - 1), r),
+        disabled: !l && (!t || p - 1 < 0),
+        onClick: () => a(Ve(d, p - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Wt,
+          Kt,
           {
-            className: !a && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !l && (!t || p - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(gt, { label: !1, property: r, onChange: o }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(yt, { label: !1, property: r, onChange: a }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!t || c + 1 >= d.length),
-        onClick: () => o(He(d, c + 1), r),
+        disabled: !l && (!t || p + 1 >= d.length),
+        onClick: () => a(Ve(d, p + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          _e,
+          Ke,
           {
-            className: !a && (!t || c + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !l && (!t || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, xs = ({ property: r, onChange: o }) => {
-  const t = T(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: a } = se(le), l = ae(r), s = T(() => y(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: _(t, (d) => /* @__PURE__ */ e.jsxs($, { children: [
-    /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, bs = ({ property: r, onChange: a }) => {
+  const t = R(() => g(ge, `${r}.classes`, [""]), [r]), { canChange: l } = se(ae), o = ne(r), n = R(() => g(o, "cls", ""), [o]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: T(t, (d) => /* @__PURE__ */ e.jsxs(U, { children: [
+    /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !a,
-        onClick: () => o(d, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${s === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(y(ut, d, Ge))
+        disabled: !l,
+        onClick: () => a(d, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(g(xt, d, qe))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(M, { children: F(re(d)) })
+    /* @__PURE__ */ e.jsx(G, { children: Y(re(d)) })
   ] })) });
-}, ys = {
+}, fs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1595,39 +1586,39 @@ const gs = ({ property: r, onChange: o }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, hs = ({ property: r, onChange: o }) => {
-  const t = ae(r), a = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = w([]), [c, n] = w({ color: "", shade: "" }), p = a.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), u = H(
+}, vs = ({ property: r, onChange: a }) => {
+  const t = ne(r), l = R(() => g(t, "cls", ""), [t]), { canChange: o } = se(ae), [n, d] = j([]), [p, s] = j({ color: "", shade: "" }), c = l.split("-"), u = g(c, "1", ""), i = g(c, "2", ""), h = B(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), n({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((v) => ({ ...v, color: g, shade: v.shade ? v.shade : "500" })));
+    (x) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), s({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), s((v) => ({ ...v, color: x, shade: v.shade ? v.shade : "500" })));
     },
-    [d, n]
+    [d, s]
   );
   A(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(h))
+    if (["current", "inherit", "transparent", "black", "white"].includes(u))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [h]);
-  const x = H(
+  }, [u]);
+  const y = B(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      n({ color: h, shade: g });
+    (x) => {
+      s({ color: u, shade: x });
     },
-    [h]
+    [u]
   );
   return A(() => {
-    n({ color: "", shade: "" });
+    s({ color: "", shade: "" });
   }, [t]), A(() => {
-    const v = `${y(ys, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    v.match(new RegExp(y(ge, `${r}.regExp`, ""))) && o(v, r);
-  }, [c, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const v = `${g(fs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
+    v.match(new RegExp(g(ge, `${r}.regExp`, ""))) && a(v, r);
+  }, [p, a, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      ke,
+      Ce,
       {
-        disabled: !l,
+        disabled: !o,
         rounded: !0,
-        selected: h,
-        onChange: u,
+        selected: u,
+        onChange: h,
         options: [
           "current",
           "transparent",
@@ -1660,20 +1651,20 @@ const gs = ({ property: r, onChange: o }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ke, { rounded: !0, selected: i, disabled: !h || !l, onChange: x, options: s }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: i, disabled: !u || !o, onChange: y, options: n }) })
   ] });
-}, ze = (r, o) => {
+}, Ye = (r, a) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && o.includes(t))
+  if ((t === "auto" || t === "none") && a.includes(t))
     return { value: "", unit: t };
-  const a = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(a, "");
-  const l = r.match(a), s = l && l.length > 1, d = !m(t) && Number.isNaN(Number(t));
-  return s || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
+  const l = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(l, "");
+  const o = r.match(l), n = o && o.length > 1, d = !b(t) && Number.isNaN(Number(t));
+  return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
 };
-const bs = (r) => {
-  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const ws = (r) => {
+  const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1682,26 +1673,26 @@ const bs = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (X(r, "skew-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (X(r, "rotate-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (X(r, "opacity-"))
+  if (z(r, "skew-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (z(r, "rotate-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (z(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (X(r, "duration-") || X(r, "delay-"))
+  if (z(r, "duration-") || z(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (X(r, "translate-") && !t.includes("/"))
-    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
-  if (X(r, "scale-"))
-    return { value: `${o}${`${t / 100}`}`, unit: "-" };
-  if (W(r, "border")) {
-    const a = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (a)
-      return { value: a[0].split("-").pop(), unit: "px" };
+  if (z(r, "translate-") && !t.includes("/"))
+    return { value: `${a}${`${t / 4}`}`, unit: "rem" };
+  if (z(r, "scale-"))
+    return { value: `${a}${`${t / 100}`}`, unit: "-" };
+  if (q(r, "border")) {
+    const l = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (l)
+      return { value: l[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (W(r, "max-w-")) {
+  if (q(r, "max-w-")) {
     if (r === "max-w-screen-sm")
       return { value: "640", unit: "px" };
     if (r === "max-w-screen-md")
@@ -1737,7 +1728,7 @@ const bs = (r) => {
     if (t === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (W(r, "text-")) {
+  if (q(r, "text-")) {
     if (t === "xs")
       return { value: "12", unit: "px" };
     if (t === "sm")
@@ -1765,7 +1756,7 @@ const bs = (r) => {
     if (t === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (W(r, "leading-")) {
+  if (q(r, "leading-")) {
     if (t === "none")
       return { value: "1", unit: "-" };
     if (t === "tight")
@@ -1779,7 +1770,7 @@ const bs = (r) => {
     if (t === "loose")
       return { value: "2", unit: "-" };
   }
-  if (W(r, "tracking-")) {
+  if (q(r, "tracking-")) {
     if (t === "tighter")
       return { value: "-0.05", unit: "em" };
     if (t === "tight")
@@ -1796,208 +1787,208 @@ const bs = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [a, l] = _(t.split("/"), (s) => parseInt(s, 10));
-    return { value: o + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [l, o] = T(t.split("/"), (n) => parseInt(n, 10));
+    return { value: a + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return St(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Rt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const ms = (r) => {
-  if (m(r))
+const js = (r) => {
+  if (b(r))
     return { value: "", unit: "" };
-  const o = r.match(/\[.*\]/g);
-  if (o === null)
-    return fs(r);
-  const t = y(o, "0", "").replace(/\[|\]/g, ""), a = r.startsWith("-") ? "-" : "", l = oe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${a}${l}`, unit: t.replace(l, "") };
-}, fs = (r) => m(r) ? { value: "", unit: "" } : bs(r), xt = P.createContext({
+  const a = r.match(/\[.*\]/g);
+  if (a === null)
+    return Cs(r);
+  const t = g(a, "0", "").replace(/\[|\]/g, ""), l = r.startsWith("-") ? "-" : "", o = oe(t.match(/\d+.\d+|\d+/g));
+  return { value: `${l}${o}`, unit: t.replace(o, "") };
+}, Cs = (r) => b(r) ? { value: "", unit: "" } : ws(r), ht = $.createContext({
   setDragData: () => {
   }
-}), vs = ({
+}), ks = ({
   unit: r,
-  currentValue: o,
+  currentValue: a,
   onDrag: t,
-  onDragEnd: a,
-  onDragStart: l,
-  negative: s,
+  onDragEnd: l,
+  onDragStart: o,
+  negative: n,
   cssProperty: d
 }) => {
-  const { setDragData: c } = se(xt);
+  const { setDragData: p } = se(ht);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (n) => {
-        const p = {
+      onMouseDown: (s) => {
+        const c = {
           onDrag: t,
-          onDragEnd: a,
+          onDragEnd: l,
           dragging: !0,
-          dragStartY: n.pageY,
-          dragStartValue: `${o}`,
+          dragStartY: s.pageY,
+          dragStartValue: `${a}`,
           dragUnit: r,
-          negative: s,
+          negative: n,
           cssProperty: d
         };
-        l(p), c(p);
+        o(c), p(c);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Ut, {})
+      children: /* @__PURE__ */ e.jsx(Gt, {})
     }
   );
-}, ws = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((a) => /* @__PURE__ */ e.jsx(
-  B,
+}, Ns = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((l) => /* @__PURE__ */ e.jsx(
+  P,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: o === a ? "primary" : void 0,
+    color: a === l ? "primary" : void 0,
     size: "sm",
-    onClick: (l) => {
-      l.stopPropagation(), r(a);
+    onClick: (o) => {
+      o.stopPropagation(), r(l);
     },
-    children: a
+    children: l
   },
-  a
-)) }), Ye = 50, js = (r) => {
-  const [o, t] = w(!1), [a, l] = w(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: n, units: p, negative: h } = r, [i, u] = w(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [x, g] = w(!1), [v, C] = w(""), [K, L] = w(!1), [G, q] = w(!1);
+  l
+)) }), Fe = 50, _s = (r) => {
+  const [a, t] = j(!1), [l, o] = j(""), { currentClass: n, onChange: d, classPrefix: p, cssProperty: s, units: c, negative: u } = r, [i, h] = j(s != null && s.toLowerCase().includes("width") ? "%" : c[0]), [y, x] = j(!1), [v, k] = j(""), [E, I] = j(!1), [Z, w] = j(!1);
   A(() => {
-    const { value: b, unit: f } = ms(s);
+    const { value: m, unit: f } = js(n);
     if (f === "") {
-      l(b), u(n != null && n.toLowerCase().includes("width") ? "%" : oe(p));
+      o(m), h(s != null && s.toLowerCase().includes("width") ? "%" : oe(c));
       return;
     }
-    u(f), l(f === "class" || m(b) ? "" : b);
-  }, [s, n, p]);
-  const S = de((b) => d(b), [d], Ye), j = de((b) => d(b, !1), [d], Ye), D = H(
-    (b = !1) => {
-      const f = ze(`${a}`, p);
-      if (y(f, "error", !1)) {
-        g(!0);
+    h(f), o(f === "class" || b(m) ? "" : m);
+  }, [n, s, c]);
+  const N = ce((m) => d(m), [d], Fe), C = ce((m) => d(m, !1), [d], Fe), V = B(
+    (m = !1) => {
+      const f = Ye(`${l}`, c);
+      if (g(f, "error", !1)) {
+        x(!0);
         return;
       }
-      const N = y(f, "unit") !== "" ? y(f, "unit") : i;
-      if (N === "auto" || N === "none") {
-        S(`${c}${N}`);
+      const S = g(f, "unit") !== "" ? g(f, "unit") : i;
+      if (S === "auto" || S === "none") {
+        N(`${p}${S}`);
         return;
       }
-      if (y(f, "value") === "")
+      if (g(f, "value") === "")
         return;
-      const z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      b ? j(z) : S(z);
+      const L = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      m ? C(L) : N(L);
     },
-    [S, j, a, i, c, p]
-  ), Z = H(
-    (b) => {
-      const f = ze(`${a}`, p);
-      if (y(f, "error", !1)) {
-        g(!0);
+    [N, C, l, i, p, c]
+  ), W = B(
+    (m) => {
+      const f = Ye(`${l}`, c);
+      if (g(f, "error", !1)) {
+        x(!0);
         return;
       }
-      if (b === "auto" || b === "none") {
-        S(`${c}${b}`);
+      if (m === "auto" || m === "none") {
+        N(`${p}${m}`);
         return;
       }
-      if (y(f, "value") === "")
+      if (g(f, "value") === "")
         return;
-      const N = y(f, "unit") !== "" ? y(f, "unit") : b, z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      S(z);
+      const S = g(f, "unit") !== "" ? g(f, "unit") : m, L = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      N(L);
     },
-    [S, a, c, p]
+    [N, l, p, c]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: i === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: s }),
-    /* @__PURE__ */ e.jsxs($, { children: [
-      /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
-      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind preset class." })
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsxs(U, { children: [
+      /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
+      /* @__PURE__ */ e.jsx(G, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${K ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${E ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
           readOnly: i === "class",
-          onKeyPress: (b) => {
-            b.key === "Enter" && D();
+          onKeyPress: (m) => {
+            m.key === "Enter" && V();
           },
-          onKeyDown: (b) => {
-            if (b.keyCode !== 38 && b.keyCode !== 40)
+          onKeyDown: (m) => {
+            if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            b.preventDefault(), q(!0);
-            const f = Tt(b.target.value);
-            let N = Ue(f) ? 0 : f;
-            b.keyCode === 38 && (N += 1), b.keyCode === 40 && (N -= 1);
-            const O = `${N}`, ht = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
-            j(ht);
+            m.preventDefault(), w(!0);
+            const f = Vt(m.target.value);
+            let S = Ue(f) ? 0 : f;
+            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
+            const M = `${S}`, bt = `${M.startsWith("-") ? "-" : ""}${p}[${M.replace("-", "")}${i === "-" ? "" : i}]`;
+            C(bt);
           },
-          onKeyUp: (b) => {
-            G && (b.preventDefault(), q(!1));
+          onKeyUp: (m) => {
+            Z && (m.preventDefault(), w(!1));
           },
-          onBlur: () => D(),
-          onChange: (b) => {
-            g(!1), l(b.target.value);
+          onBlur: () => V(),
+          onChange: (m) => {
+            x(!1), o(m.target.value);
           },
-          onClick: (b) => {
+          onClick: (m) => {
             var f;
-            (f = b == null ? void 0 : b.target) == null || f.select(), t(!1);
+            (f = m == null ? void 0 : m.target) == null || f.select(), t(!1);
           },
-          value: K ? v : a,
+          value: E ? v : l,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            y ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs($, { open: o, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(U, { open: a, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!o),
+            onClick: () => t(!a),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Kt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
+              c.length > 1 ? /* @__PURE__ */ e.jsx(qt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ws,
+        /* @__PURE__ */ e.jsx(Tr, { children: /* @__PURE__ */ e.jsx(G, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          Ns,
           {
-            units: p,
+            units: c,
             current: i,
-            onSelect: (b) => {
-              t(!1), u(b), Z(b);
+            onSelect: (m) => {
+              t(!1), h(m), W(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(i) !== -1 || K ? null : /* @__PURE__ */ e.jsx(
-      vs,
+    ["none", "auto"].indexOf(i) !== -1 || E ? null : /* @__PURE__ */ e.jsx(
+      ks,
       {
-        onDragStart: () => L(!0),
-        onDragEnd: (b) => {
-          if (C(() => ""), L(!1), m(b))
+        onDragStart: () => I(!0),
+        onDragEnd: (m) => {
+          if (k(() => ""), I(!1), b(m))
             return;
-          const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          S(O);
+          const f = `${m}`, M = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          N(M);
         },
-        onDrag: (b) => {
-          if (m(b))
+        onDrag: (m) => {
+          if (b(m))
             return;
-          C(b);
-          const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          j(O);
+          k(m);
+          const f = `${m}`, M = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          C(M);
         },
-        currentValue: a,
+        currentValue: l,
         unit: i,
-        negative: h,
-        cssProperty: n
+        negative: u,
+        cssProperty: s
       }
     )
   ] }) }) });
-}, ae = (r) => {
-  const o = ue();
-  return Rt(o, { property: r });
-}, Cs = (r, o) => {
+}, ne = (r) => {
+  const a = ue();
+  return Ht(a, { property: r });
+}, Ss = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -2006,8 +1997,8 @@ const ms = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[y(r, "mq", "xs")] <= t[o];
-}, ks = {
+  return t[g(r, "mq", "xs")] <= t[a];
+}, Ts = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2080,80 +2071,80 @@ const ms = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Ns = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
-  const { t: o } = I(), { type: t = "icons", label: a, property: l, onEmitChange: s = () => {
-  }, units: d, negative: c = !1 } = r, [n] = _r(), [p] = Sr(), [, h] = Ie(), i = ae(l), u = Te(), x = at(), [g] = nt(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
-    (j, D = !0) => {
-      const Z = { dark: n, mq: h, mod: p, cls: j, property: l, fullCls: "" };
-      (n || p !== "") && (Z.mq = "xs");
-      const b = Gr(Z);
-      u(g, [b], D);
+}, Rs = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Te = (r) => {
+  const { t: a } = F(), { type: t = "icons", label: l, property: o, onEmitChange: n = () => {
+  }, units: d, negative: p = !1 } = r, [s] = Rr(), [c] = Vr(), [, u] = Ie(), i = ne(o), h = _e(), y = it(), [x] = dt(), v = R(() => g(i, "fullCls", ""), [i]), k = B(
+    (C, V = !0) => {
+      const W = { dark: s, mq: u, mod: c, cls: C, property: o, fullCls: "" };
+      (s || c !== "") && (W.mq = "xs");
+      const m = Qr(W);
+      h(x, [m], V);
     },
-    [g, n, h, p, l, u]
-  ), K = H(() => {
-    x(g, [v]);
-  }, [g, v, x]), L = T(() => Cs(i, h), [i, h]);
+    [x, s, u, c, o, h]
+  ), E = B(() => {
+    y(x, [v]);
+  }, [x, v, y]), I = R(() => Ss(i, u), [i, u]);
   A(() => {
-    s(L, i);
-  }, [L, s, i]);
-  const [, , G] = Ie(), q = H(
-    (j) => {
-      G({
+    n(I, i);
+  }, [I, n, i]);
+  const [, , Z] = Ie(), w = B(
+    (C) => {
+      Z({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[j]);
+      }[C]);
     },
-    [G]
-  ), S = y(i, "dark", null) === n && y(i, "mod", null) === p && y(i, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(us, { canChange: L, canReset: i && S, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${i && !S ? "text-foreground" : ""}`, children: o(a) }) }),
+    [Z]
+  ), N = g(i, "dark", null) === s && g(i, "mod", null) === c && g(i, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(hs, { canChange: I, canReset: i && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${i && !N ? "text-foreground" : ""}`, children: a(l) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          js,
+          _s,
           {
-            currentClass: y(i, "cls", ""),
-            classPrefix: y(ks, l, ""),
+            currentClass: g(i, "cls", ""),
+            classPrefix: g(Ts, o, ""),
             units: d || [],
-            onChange: C,
-            negative: c,
-            cssProperty: l
+            onChange: k,
+            negative: p,
+            cssProperty: o
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(xs, { property: l, onChange: C }),
-        t === "range" && /* @__PURE__ */ e.jsx(gs, { property: l, onChange: C }),
-        t === "color" && /* @__PURE__ */ e.jsx(hs, { property: l, onChange: C }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(gt, { label: a, property: l, onChange: C })
+        t === "icons" && /* @__PURE__ */ e.jsx(bs, { property: o, onChange: k }),
+        t === "range" && /* @__PURE__ */ e.jsx(ms, { property: o, onChange: k }),
+        t === "color" && /* @__PURE__ */ e.jsx(vs, { property: o, onChange: k }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(yt, { label: l, property: o, onChange: k })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => K(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Gt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => E(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Jt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : I && i ? /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
             className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
-            children: /* @__PURE__ */ e.jsx(Se, {})
+            children: /* @__PURE__ */ e.jsx(Ne, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold", children: [
-            Ns(y(i, "mq")),
-            n && !i.dark ? "(Light mode)" : ""
+            Rs(g(i, "mq")),
+            s && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => q(y(i, "mq")),
+              onClick: () => w(g(i, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                y(i, "mq").toUpperCase()
+                g(i, "mq").toUpperCase()
               ]
             }
           )
@@ -2161,148 +2152,154 @@ const ms = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], yt = ({
+}, Vs = ["px", "%", "em", "rem", "ch", "vh", "vw"], mt = ({
   label: r,
-  options: o,
+  options: a,
   borderB: t = !1,
-  borderT: a = !1,
-  type: l = "arbitrary",
-  units: s = _s,
+  borderT: l = !1,
+  type: o = "arbitrary",
+  units: n = Vs,
   negative: d = !1
 }) => {
-  const { t: c } = I(), [n, p] = w(o[0].key), h = ue(), i = H((u) => _(h, "property").includes(u), [h]);
+  const { t: p } = F(), [s, c] = j(a[0].key), u = ue(), i = B((h) => T(u, "property").includes(h), [u]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${a ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${l ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
-          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
-            o.map(({ label: u, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: p(r) }),
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
+            a.map(({ label: h, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(U, { children: [
+              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(x),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === n ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => c(y),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === s ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    P.createElement("div", {
-                      className: i(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    $.createElement("div", {
+                      className: i(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(y(ut, x, Ge), { className: "text-inherit w-3 h-3" })
+                    $.createElement(g(xt, y, qe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(M, { children: F(re(u)) })
+              /* @__PURE__ */ e.jsx(G, { children: Y(re(h)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Ve,
+          Te,
           {
-            type: l,
-            units: [...s],
+            type: o,
+            units: [...n],
             label: "",
-            property: n,
+            property: s,
             negative: d
           }
         ) })
       ]
     }
   );
-}, Ss = ({ heading: r, items: o }) => {
-  const { t } = I(), a = ue(), l = T(() => {
-    const s = (n) => De(
-      n.map((p) => p.styleType === "multiple" ? _(p.options, "key") : p.property)
-    ), d = De(
-      o.map((n) => n.styleType === "accordion" ? s(n.items) : n.styleType === "multiple" ? _(n.options, "key") : n.property)
-    ), c = _(a, "property");
-    return Vt(d, c).length > 0;
-  }, [a, o]);
+}, Hs = ({ heading: r, items: a }) => {
+  const { t } = F(), l = ue(), o = R(() => {
+    const n = (s) => He(
+      s.map((c) => c.styleType === "multiple" ? T(c.options, "key") : c.property)
+    ), d = He(
+      a.map((s) => s.styleType === "accordion" ? n(s.items) : s.styleType === "multiple" ? T(s.options, "key") : s.property)
+    ), p = T(l, "property");
+    return Dt(d, p).length > 0;
+  }, [l, a]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       t(r),
-      l ? /* @__PURE__ */ e.jsx(
+      o ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${o ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...s }, s.label) : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Te, { ...n }, n.label)) })
   ] });
-}, Ts = Fe({}), xe = ({ section: r }) => {
-  const { t: o } = I(), t = ue(), a = H(
+}, Ds = Ze({}), xe = ({ section: r }) => {
+  const { t: a } = F(), t = ue(), l = X(), o = B(
     (s = []) => {
-      const d = {};
-      for (let n = 0; n < t.length; n++)
-        d[t[n].property] = t[n].cls;
-      let c = !0;
-      for (const n in s)
-        if (!ie(d, n) || d[n] !== s[n]) {
-          c = !1;
+      const c = {};
+      for (let i = 0; i < t.length; i++)
+        c[t[i].property] = t[i].cls;
+      let u = !0;
+      for (const i in s)
+        if (!de(c, i) || c[i] !== s[i]) {
+          u = !1;
           break;
         }
-      return c;
+      return u;
     },
     [t]
-  ), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Ts.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: o(r.heading) }) }),
-    /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      r.items.map((s) => ie(s, "component") ? P.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...s }, s.label) : s.styleType === "accordion" && a(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ss, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
+  ), n = R(() => ({}), []), [d] = le(), p = R(() => {
+    const s = `${Le(d, "0.prop")}_attrs`;
+    return !ts(Le(l, s, {}));
+  }, [d]);
+  return /* @__PURE__ */ e.jsx(Ds.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(be, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(fe, { className: "border-b border-gray-300 bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+      r.heading === "Attributes" && p ? /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-block h-[8px] w-[8px] rounded-full bg-blue-600" }) : null,
+      /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: a(r.heading) })
+    ] }) }),
+    /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      r.items.map((s) => de(s, "component") ? $.createElement(s.component, { key: s.label }) : de(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...s }, s.label) : s.styleType === "accordion" && o(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Hs, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Te, { ...s }, s.label))
     ) })
   ] }) });
-}, Rs = () => {
-  const r = U(), [o] = pe(), { t } = I(), a = Mr(), l = Te(), s = Re(r._type), d = y(oe(o), "prop"), c = y(s.props, `${d}.presets`, {});
-  if (m(a) && (!ie(s, "props") || m(c)))
+}, Bs = () => {
+  const r = X(), [a] = le(), { t } = F(), l = Yr(), o = _e(), n = Se(r._type), d = g(oe(a), "prop"), p = g(n.props, `${d}.presets`, {});
+  if (b(l) && (!de(n, "props") || b(p)))
     return null;
-  const n = (p) => {
-    const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([r._id], h, !0);
+  const s = (c) => {
+    const u = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    o([r._id], u, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Tr, { children: [
-    /* @__PURE__ */ e.jsx(Rr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(B, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Hr, { children: [
+    /* @__PURE__ */ e.jsx(Dr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(qt, {})
+      /* @__PURE__ */ e.jsx(Qt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Vr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar h-full", children: [
-      m(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(Pe, { children: [
-          s.type,
+    /* @__PURE__ */ e.jsx(Br, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(pt, { className: "no-scrollbar h-full", children: [
+      b(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(Ae, { children: [
+          n.type,
           " ",
           t("presets")
         ] }),
-        /* @__PURE__ */ e.jsx(Ae, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => n(c[p]), children: [
-          be(F(t(p))),
+        /* @__PURE__ */ e.jsx(Pe, {}),
+        /* @__PURE__ */ e.jsx($e, { children: he(p).map((c) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(p[c]), children: [
+          me(Y(t(c))),
           /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      m(a) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(Pe, { children: t("Global presets") }),
-        /* @__PURE__ */ e.jsx(Ae, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(a).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => n(a[p]), children: [
-          be(F(t(p))),
+      b(l) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(Ae, { children: t("Global presets") }),
+        /* @__PURE__ */ e.jsx(Pe, {}),
+        /* @__PURE__ */ e.jsx($e, { children: he(l).map((c) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(l[c]), children: [
+          me(Y(t(c))),
           /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Vs() {
-  const { flexChild: r, gridChild: o } = Hr(), [t] = pe();
-  return m(t) ? null : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Rs, {}),
-    /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: ds }),
-      o ? /* @__PURE__ */ e.jsx(xe, { section: cs }) : null,
-      ps.map((a) => /* @__PURE__ */ e.jsx(xe, { section: a }, a.heading))
+function Is() {
+  const { flexChild: r, gridChild: a } = Ir(), [t] = le();
+  return b(t) ? null : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsx(Bs, {}),
+    /* @__PURE__ */ e.jsxs(at, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+      r && /* @__PURE__ */ e.jsx(xe, { section: gs }),
+      a ? /* @__PURE__ */ e.jsx(xe, { section: xs }) : null,
+      ys.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
     ] })
   ] });
 }
-const Hs = {
+const As = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2313,32 +2310,32 @@ const Hs = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Ho = () => {
-  const r = U(), { t: o } = I(), [t, a] = P.useState(""), [l, s] = P.useState({
-    onDrag: (n) => n,
-    onDragEnd: (n) => n,
+}, Po = () => {
+  const r = X(), { t: a } = F(), [t, l] = $.useState(""), [o, n] = $.useState({
+    onDrag: (s) => s,
+    onDragEnd: (s) => s,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = de(
-    (n) => {
-      const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
-      let i = parseFloat(l.dragStartValue);
+  }), d = ce(
+    (s) => {
+      const c = !g(o, "negative", !1), u = g(o, "cssProperty", "");
+      let i = parseFloat(o.dragStartValue);
       i = Ue(i) ? 0 : i;
-      let u = Hs[l.dragUnit];
-      (W(h, "scale") || h === "opacity") && (u = 10);
-      let g = (l.dragStartY - n.pageY) / u + i;
-      p && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), a(`${g}`);
+      let h = As[o.dragUnit];
+      (q(u, "scale") || u === "opacity") && (h = 10);
+      let x = (o.dragStartY - s.pageY) / h + i;
+      c && x < 0 && (x = 0), u === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
     },
-    [l],
+    [o],
     50
-  ), c = H(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
-      onDrag: (n) => n,
-      onDragEnd: (n) => n,
+  ), p = B(() => {
+    setTimeout(() => o.onDragEnd(`${t}`), 100), n({
+      onDrag: (s) => s,
+      onDragEnd: (s) => s,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2346,22 +2343,22 @@ const Hs = {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, s]);
-  return Ht(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(Jt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(qe, { children: /* @__PURE__ */ e.jsxs(xt.Provider, { value: { setDragData: s }, children: [
-    l.dragging ? /* @__PURE__ */ e.jsx(
+  }, [o, t, n]);
+  return Bt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+    /* @__PURE__ */ e.jsx(er, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(ht.Provider, { value: { setDragData: n }, children: [
+    o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
-        onMouseUp: () => c(),
+        onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
-      /* @__PURE__ */ e.jsx(ls, {}),
-      /* @__PURE__ */ e.jsx(Vs, {}),
+    /* @__PURE__ */ e.jsxs(pt, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
+      /* @__PURE__ */ e.jsx(ds, {}),
+      /* @__PURE__ */ e.jsx(Is, {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {})
@@ -2369,5 +2366,5 @@ const Hs = {
   ] }) });
 };
 export {
-  Ho as default
+  Po as default
 };