@chaibuilder/sdk 1.2.50 → 1.2.52

package/dist/{Settings-0uSGoECC.js → Settings-dJ72rwnH.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 * as ie from "react";
+import P, { useState as w, useMemo as S, useEffect as A, useCallback as H, memo as mt, useRef as ft, createContext as Ze, useContext as se } from "react";
+import { useThrottledCallback as ce } from "@react-hookz/web";
+import { forEach as Ne, isArray as pe, omit as vt, truncate as wt, includes as F, get as y, first as oe, split as jt, startCase as X, toLower as re, isEmpty as m, map as _, find as We, last as Ct, filter as ye, set as Ue, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as be, reject as St, startsWith as U, nth as He, isNumber as Tt, parseInt as Rt, isNaN as Ge, findLast as Vt, flatten as De, intersection as Ht, has as de, isNull as Dt } 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-3xIN-AP_.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-yl5V3Hte.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 { CopyIcon as Bt, PlusIcon as _e, Cross2Icon as Ke, EyeOpenIcon as It, 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 Pt, ArrowTopRightIcon as At, ArrowBottomRightIcon as $t, ArrowBottomLeftIcon as Et, AlignLeftIcon as Mt, AlignCenterHorizontallyIcon as Lt, AlignRightIcon as Ot, StretchHorizontallyIcon as zt, FontItalicIcon as Yt, UnderlineIcon as Ft, OverlineIcon as Xt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as Se, MinusIcon as Ut, BoxIcon as qe, RowSpacingIcon as Gt, TriangleDownIcon as Kt, CrossCircledIcon as qt, CaretDownIcon as Jt, MixerHorizontalIcon as Qt } from "@radix-ui/react-icons";
+import { a2 as Je, aQ as Qe, aR as et, B, aS as tt, aT as er, aU as tr, aV as rr, aW as sr, aX as or, aY as lr, M as Z, aL as rt, $ as ar, a0 as nr, a1 as ir, aZ as dr, Z as cr, ab as pr, _ as ur, ac as $, ad as E, ae as M, i as gr, a_ as xr, a$ as yr, b0 as hr, b1 as br, b2 as mr, b3 as fr, b4 as vr, R as st, Q as ot, h as lt, b5 as wr, b6 as at, b7 as me, b8 as fe, b9 as ve, ba as jr, bb as Cr, ah as kr, bc as Nr, Y as le, o as Te, I as nt, L as it, bd as dt, be as we, k as _r, bf as Sr, J as ue, w as Tr, P as Rr, p as Ie, av as Vr, aw as Hr, ax as Dr, bg as ct, ay as Pe, az as Ae, bh as $e, bi as Ee, bj as Me, S as Br } from "./ChaiBuilderEditor-bNZZWYMh.js";
+import { Check as Ir, EditIcon as Pr, TrashIcon as Ar, Loader as $r, SparklesIcon as Er, DeleteIcon as Mr } from "lucide-react";
+import { getBlockComponent as Re, getChaiDataProviders as Lr, useGlobalStylingPresets as Or } from "@chaibuilder/runtime";
+import { J as zr, a as Yr, d as Fr } from "./index-e0c8PmRQ.js";
+import Xr from "@rjsf/core";
+import Zr from "@rjsf/validator-ajv8";
+import { u as Wr } from "./useCanvasSettings-5y2fSCpN.js";
+import Ur from "react-autosuggest";
+import Gr from "fuse.js";
+import { A as Kr, C as ge, g as qr } from "./utils-VpVqnC9m.js";
+import { a as Jr } from "./MODIFIERS-fd5XOmum.js";
+import { get as Le, isEmpty as Qr } from "lodash";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -49,16 +50,16 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-import "./index-YpnaudSM.js";
-function Jr(r) {
+import "./index-VBXQixVm.js";
+function es(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);
+  function a(l, n) {
+    Ne(n, (d, c) => {
+      const s = l ? `${l}.${c}` : c, p = pe(d) ? "list" : typeof d;
+      o.push(s), t[s] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !pe(d) && a(s, d);
     });
   }
-  return a("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
+  return a("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
 }
 const je = ({ data: r, fullView: o }) => {
   if (!r)
@@ -66,13 +67,13 @@ const je = ({ data: r, fullView: o }) => {
   const t = typeof r;
   return o ? 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(
+      zr,
       {
         data: r,
-        shouldExpandNode: Or,
+        shouldExpandNode: Yr,
         style: {
-          ...zr,
+          ...Fr,
           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,26 +83,26 @@ 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 = "",
   setValue: t,
   data: a,
   onChange: l,
-  dataType: s,
+  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: c, pathsType: s } = es(a), p = r === "PROP" ? Re(a == null ? void 0 : a._type) : {}, h = r === "PROP", [i, u] = w(!1), x = S(() => r === "PROP" ? c.filter(
+    (g) => !F(d, g) && y(p, `props.${oe(jt(g, "."))}.binding`)
+  ) : c.filter((g) => n === y(s, g, "")), [r, c, d, n, p]);
   return A(() => {
     o && l(o);
   }, [o, 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(
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: X(re(r)) }),
+      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: u, children: [
+        /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           B,
           {
             variant: "outline",
@@ -109,34 +110,34 @@ const je = ({ data: r, fullView: o }) => {
             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: [
               /* @__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) }),
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: X(n) }),
                 o
               ] }),
               /* @__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))
+              X(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(er, { children: [
+          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${re(r)}...` }),
+          /* @__PURE__ */ e.jsxs(rr, { children: [
+            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(or, { children: _(x, (g) => /* @__PURE__ */ e.jsxs(
+              lr,
               {
                 value: g,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (v) => {
-                  t(Ze(x, (C) => C === v) || null), u(!1);
+                  t(We(x, (C) => C === v) || null), u(!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"}` }),
+                    /* @__PURE__ */ e.jsx(Ir, { className: `h-4 w-4 text-green-500 ${o === g ? "" : "opacity-0"}` }),
                     g
                   ] }),
-                  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) }) })
+                  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: X(y(s, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: y(a, g) }) })
                 ]
               },
               g
@@ -147,52 +148,52 @@ const je = ({ data: r, fullView: o }) => {
     ] }),
     !h && !m(o) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: y(a, o, ""), fullView: !0 }) })
   ] });
-}, Qr = ({
+}, ts = ({
   appliedBindings: r = [],
   onAddBinding: o,
   editMode: t,
   item: a
 }) => {
-  const [l, s] = w(t ? a.key : ""), [d, c] = w(t ? a.value : ""), n = U(), [p] = tt(), h = H(
+  const [l, n] = w(t ? a.key : ""), [d, c] = w(t ? a.value : ""), s = Z(), [p] = rt(), h = H(
     (x, g) => {
       if (m(x))
         return "";
       {
-        const v = y(g === "PROP" ? n : p, x, "");
-        if (ce(v))
+        const v = y(g === "PROP" ? s : p, x, "");
+        if (pe(v))
           return "list";
         const C = typeof v;
         return C === "string" ? "text" : C === "object" ? "model" : C;
       }
     },
-    [n, p]
+    [s, p]
   ), [i, u] = w(t ? h(a.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(ar, { children: [
+      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(ir, { 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,
+          setValue: n,
           onChange: (x) => {
             const g = h(x, "PROP");
-            s(x), i !== g && c(""), u(g);
+            n(x), i !== g && c(""), u(g);
           },
-          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),
@@ -209,7 +210,7 @@ const je = ({ data: r, fullView: o }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
       B,
       {
         type: "submit",
@@ -220,76 +221,76 @@ const je = ({ data: r, fullView: o }) => {
       }
     ) })
   ] });
-}, ct = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: a, editMode: l = !0, item: s = {} }) => {
+}, pt = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: a, editMode: l = !0, item: n = {} }) => {
   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,
+  return /* @__PURE__ */ e.jsxs(cr, { children: [
+    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => c(!0), children: o }),
+    d && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
+      ts,
       {
-        item: s,
+        item: n,
         editMode: l,
         appliedBindings: a,
-        onAddBinding: (n) => {
-          t(n), c(!1);
+        onAddBinding: (s) => {
+          t(s), c(!1);
         }
       }
     ) })
   ] });
-}, es = ({
+}, rs = ({
   item: r,
   onAddBinding: o,
   onRemove: t,
   selectedBlock: a,
   dataProvider: l,
-  appliedBindings: s
+  appliedBindings: n
 }) => {
-  const [d, c] = w("string"), n = (p, h) => {
+  const [d, c] = w("string"), s = (p, h) => {
     if (m(p))
       return "";
     {
       const i = y(h === "PROP" ? a : l, p, "");
-      if (ce(i))
+      if (pe(i))
         return "list";
       const u = typeof i;
       return u === "string" ? "text" : u === "object" ? "model" : u;
     }
   };
-  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(() => c(() => 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.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(pt, { editMode: !0, onAddBinding: o, 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,
+        Ar,
         {
           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) })
+    !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: X(d) })
   ] });
-}, ts = ({ bindingData: r, onChange: o }) => {
-  const t = U(), [a] = tt(), l = Er(), [s, d] = w(
+}, ss = ({ bindingData: r, onChange: o }) => {
+  const t = Z(), [a] = rt(), l = Lr(), [n, d] = w(
     _(r, (i, u) => ({ key: u, value: i }))
   );
   A(() => {
     d(_(r, (i, u) => ({ key: u, value: i })));
   }, [t == null ? void 0 : t._id, r]);
-  const c = T(() => {
+  const c = S(() => {
     if (m(a))
       return !0;
-    if (m(s))
+    if (m(n))
       return !1;
-    const i = jt(s);
+    const i = Ct(n);
     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);
+  }, [a, n]), s = (i) => {
+    const u = ye(n, (x) => x.key !== i.key);
     d([...u, i]), h([...u, i]);
   }, p = (i) => {
-    const u = ye(s, (x, g) => i !== g);
+    const u = ye(n, (x, g) => i !== g);
     h([...u]);
   }, h = H(
     (i = []) => {
@@ -299,7 +300,7 @@ const je = ({ data: r, fullView: o }) => {
       }
       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);
+        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && Ue(u, x.key, x.value);
       }), o(u);
     },
     [o]
@@ -309,25 +310,25 @@ const je = ({ data: r, fullView: o }) => {
     /* @__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,
+    _(n, (i, u) => /* @__PURE__ */ e.jsx(
+      rs,
       {
         item: i,
-        onAddBinding: n,
+        onAddBinding: s,
         onRemove: () => p(u),
         selectedBlock: t,
         dataProvider: a,
-        appliedBindings: _(s, "key")
+        appliedBindings: _(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,
+        pt,
         {
           disabled: c,
-          appliedBindings: _(s, "key"),
-          onAddBinding: n,
+          appliedBindings: _(n, "key"),
+          onAddBinding: s,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
@@ -340,13 +341,13 @@ const je = ({ data: r, fullView: o }) => {
       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" })
     ] })
   ] });
-}, 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();
+}, os = () => /* @__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" }), ls = ({ id: r, placeholder: o, value: t }) => {
+  const { t: a } = I(), [, l] = gr(), n = Z();
   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 c = n == null ? void 0 : n._id, s = r.replace("root.", "");
+    l({ blockId: c, blockProp: s, placeholder: o, initialCode: t });
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ e.jsx(
@@ -359,18 +360,18 @@ const je = ({ data: r, fullView: o }) => {
     ),
     /* @__PURE__ */ e.jsx(B, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: a("Open code editor") })
   ] });
-}, Ce = bt(({ id: r, properties: o, formData: t, onChange: a }) => {
-  const [l, s] = w(t), d = { type: "object", properties: {} }, c = {};
+}, Ce = mt(({ id: r, properties: o, formData: t, onChange: a }) => {
+  const [l, n] = w(t), d = { type: "object", properties: {} }, c = {};
   Object.keys(o).forEach((p) => {
     const h = o[p];
-    if (X(["slot", "styles"], h.type))
+    if (F(["slot", "styles"], h.type))
       return;
     const i = p;
-    d.properties[i] = ur(h), c[i] = gr(h);
+    d.properties[i] = xr(h), c[i] = yr(h);
   }), A(() => {
-    s(t);
+    n(t);
   }, [r]);
-  const n = de(
+  const s = ce(
     async ({ formData: p }, h) => {
       a({ formData: p }, h);
     },
@@ -379,37 +380,37 @@ const je = ({ data: r, fullView: o }) => {
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Yr,
+    Xr,
     {
       widgets: {
-        binding: rs,
-        richtext: xr,
-        icon: yr,
-        image: hr,
-        code: ss
+        binding: os,
+        richtext: hr,
+        icon: br,
+        image: mr,
+        code: ls
       },
-      fields: { link: br },
+      fields: { link: fr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Xr,
+      validator: Zr,
       uiSchema: c,
       schema: d,
       formData: l,
       onChange: ({ formData: p }, h) => {
-        h && (s(p), n({ formData: p }, h));
+        h && (n(p), s({ formData: p }, h));
       }
     }
   );
-}), os = () => {
-  const [r, o] = Zr(), t = mr(), a = (d, c) => {
-    o((n) => ({ ...n, [d]: c }));
+}), as = () => {
+  const [r, o] = Wr(), t = vr(), a = (d, c) => {
+    o((s) => ({ ...s, [d]: c }));
   };
   if (m(t))
     return null;
-  const { block: l, settings: s } = t;
+  const { block: l, 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,
@@ -421,20 +422,20 @@ const je = ({ data: r, fullView: o }) => {
         id: l == null ? void 0 : l._id,
         onChange: ({ formData: d }) => a(l._id, d),
         formData: y(r, l._id, {}),
-        properties: s
+        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) {
+function ns() {
+  const r = Z(), o = st(), t = ot(), a = Re(r._type), l = { ...r }, [n, d] = w(l), c = lt("dataBindingSupport", !1), s = ({ formData: x }, g, v) => {
+    if (g && (n == null ? void 0 : n._id) === r._id) {
       const C = g.replace("root.", "");
       t([r._id], { [C]: y(x, C) }, v);
     }
   }, p = H(
-    Ct(({ formData: x }, g, v) => {
-      n({ formData: x }, g, v), d(x);
+    kt(({ formData: x }, g, v) => {
+      s({ formData: x }, g, v), d(x);
     }, 1500),
     [r == null ? void 0 : r._id]
   ), h = ({ formData: x }, g) => {
@@ -442,16 +443,16 @@ function ls() {
       const v = g.replace("root.", "");
       o(
         [r._id],
-        fr(v, y(x, v.split(".")))
-      ), p({ formData: x }, g, { [v]: y(s, v) });
+        wr(v, y(x, v.split(".")))
+      ), p({ formData: x }, g, { [v]: y(n, v) });
     }
-  }, i = he(y(l, "_bindings", {})), u = T(() => {
-    const x = kt(y(a, "props", {}));
-    return c && Nt(i, (g) => delete x[g]), x;
+  }, i = he(y(l, "_bindings", {})), u = S(() => {
+    const x = Nt(y(a, "props", {}));
+    return c && _t(i, (g) => delete x[g]), x;
   }, [a, i, c]);
   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.jsx(as, {}),
+    c ? /* @__PURE__ */ e.jsxs(at, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(me, { 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(
@@ -463,11 +464,11 @@ function ls() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          ts,
+          ss,
           {
             bindingData: y(r, "_bindings", {}),
             onChange: (x) => {
-              n({ formData: { _bindings: x } }, "root._bindings");
+              s({ formData: { _bindings: x } }, "root._bindings");
             }
           }
         ) })
@@ -507,28 +508,28 @@ function ls() {
     )
   ] });
 }
-const as = ({ blockId: r }) => {
-  const { t: o } = I(), { askAi: t, loading: a, error: l } = vr(), [s, d] = w(""), c = mt(null);
+const is = ({ blockId: r }) => {
+  const { t: o } = I(), { askAi: t, loading: a, error: l } = jr(), [n, d] = w(""), c = ft(null);
   A(() => {
     var p;
     (p = c.current) == null || p.focus();
   }, []);
-  const n = () => {
+  const s = () => {
     l || 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(
-      wr,
+      Cr,
       {
         ref: c,
-        value: s,
+        value: n,
         onChange: (p) => d(p.target.value),
         placeholder: o("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));
+          p.key === "Enter" && (p.preventDefault(), t("styles", r, n, s));
         }
       }
     ),
@@ -536,20 +537,20 @@ const as = ({ blockId: r }) => {
       a ? null : /* @__PURE__ */ e.jsx(
         B,
         {
-          disabled: s.trim().length < 5 || a,
-          onClick: () => t("styles", r, s, n),
+          disabled: n.trim().length < 5 || a,
+          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" }),
+            /* @__PURE__ */ e.jsx($r, { className: "w-5 h-5 animate-spin" }),
             o("Generating... Please wait")
           ] }) : o("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.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: o("Generating... Please wait") })
         ] }),
         /* @__PURE__ */ e.jsx(B, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: o("Stop") })
@@ -557,32 +558,32 @@ const as = ({ blockId: r }) => {
     ] }),
     /* @__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 }) })
   ] });
-}, Oe = new Ur(Kr, {
+}, ze = new Gr(Kr, {
   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 = () => {
+function ut() {
+  var T;
+  const { t: r } = I(), [o] = le(), t = Z(), a = Te(), l = nt(), [n] = it(), d = lt("askAiCallBack", null), [c, s] = w(""), { toast: p } = dt(), h = (T = oe(o)) == null ? void 0 : T.prop, i = St((y(t, h, "").replace(Jr, "").split(",").pop() || "").split(" "), m), u = () => {
     const j = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(s, j, !0), n("");
+    a(n, j, !0), s("");
   }, [x, g] = w([]), v = ({ value: j }) => {
-    const D = j.trim().toLowerCase(), Z = D.match(/.+:/g);
+    const D = j.trim().toLowerCase(), W = D.match(/.+:/g);
     let b = [];
-    if (Z && Z.length > 0) {
-      const [f] = Z, N = D.replace(f, "");
-      b = Oe.search(N).map((z) => ({
+    if (W && W.length > 0) {
+      const [f] = W, N = D.replace(f, "");
+      b = ze.search(N).map((z) => ({
         ...z,
         item: { ...z.item, name: f + z.item.name }
       }));
     } else
-      b = Oe.search(D);
+      b = ze.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 = {
+  }, G = (j) => j.name, L = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), K = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -592,7 +593,7 @@ function pt() {
     onKeyDown: (j) => {
       j.key === "Enter" && c.trim() !== "" && u();
     },
-    onChange: (j, { newValue: D }) => n(D),
+    onChange: (j, { newValue: D }) => s(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, q = () => {
     if (navigator.clipboard === void 0) {
@@ -617,28 +618,28 @@ function pt() {
           /* @__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(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(Bt, { onClick: q, className: "cursor-pointer" }) }),
               /* @__PURE__ */ e.jsx(M, { 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(B, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
+              /* @__PURE__ */ e.jsx(Er, { 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(is, { 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,
+            Ur,
             {
               suggestions: x,
               onSuggestionsFetchRequested: v,
               onSuggestionsClearRequested: C,
-              getSuggestionValue: K,
+              getSuggestionValue: G,
               renderSuggestion: L,
-              inputProps: G,
+              inputProps: K,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -661,7 +662,7 @@ function pt() {
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ne.Children.toArray(
+        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ie.Children.toArray(
           i.map((j) => /* @__PURE__ */ e.jsxs(
             "div",
             {
@@ -671,7 +672,7 @@ function pt() {
                 /* @__PURE__ */ e.jsx(
                   Ke,
                   {
-                    onClick: () => l(s, [j]),
+                    onClick: () => l(n, [j]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
@@ -684,7 +685,7 @@ function pt() {
     }
   );
 }
-const ns = ({ onAdd: r }) => {
+const ds = ({ onAdd: r }) => {
   const { t: o } = I(), [t, a] = w({ key: "", value: "" }), l = () => {
     m(t.key) || (r({ ...t, key: t.key }), a({ key: "", value: "" }));
   };
@@ -694,13 +695,13 @@ const ns = ({ onAdd: r }) => {
       {
         name: "key",
         className: "h-6",
-        onChange: (s) => a({ ...t, key: s.target.value }),
+        onChange: (n) => a({ ...t, key: n.target.value }),
         value: t.key,
         placeholder: o("Name"),
         autoComplete: "off",
         autoCapitalize: "off",
-        onKeyDown: (s) => {
-          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
+        onKeyDown: (n) => {
+          n.key === "Enter" && (n.preventDefault(), m(t.key) || l());
         }
       }
     ),
@@ -709,13 +710,13 @@ const ns = ({ onAdd: r }) => {
       {
         className: "h-6",
         name: "value",
-        onChange: (s) => a({ ...t, value: s.target.value }),
+        onChange: (n) => a({ ...t, value: n.target.value }),
         value: t.value,
         placeholder: o("Value"),
         autoComplete: "off",
         autoCapitalize: "off",
-        onKeyDown: (s) => {
-          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
+        onKeyDown: (n) => {
+          n.key === "Enter" && (n.preventDefault(), m(t.key) || l());
         }
       }
     ) }),
@@ -730,17 +731,17 @@ const ns = ({ onAdd: r }) => {
       m(t.key) ? null : /* @__PURE__ */ e.jsx(B, { variant: "ghost", onClick: () => a({ key: "", value: "" }), children: o("Cancel") })
     ] })
   ] });
-}, 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 }));
+}, cs = () => {
+  const r = Z(), [o, t] = w([]), [a] = le(), l = st(), n = ot(), { t: d } = I(), { toast: c } = dt(), s = `${y(a, "0.prop")}_attrs`;
+  ie.useEffect(() => {
+    const u = _(y(r, s), (x, g) => ({ key: g, value: x }));
     m(u) ? t([]) : t(u);
-  }, [y(r, n)]);
+  }, [y(r, s)]);
   const p = (u) => {
     const x = ye(o, (g, v) => u !== v);
     i(x);
   }, h = (u) => {
-    const x = Ze(o, { key: u.key });
+    const x = We(o, { key: u.key });
     if (x && (x.value.startsWith("dnd-") || x.value.startsWith("#dnd-"))) {
       c({
         title: d("Cannot add predefined attribute"),
@@ -751,28 +752,28 @@ const ns = ({ onAdd: r }) => {
     }
     const g = [...o, u];
     i(g);
-  }, i = ne.useCallback(
+  }, i = ie.useCallback(
     (u = []) => {
       const x = {};
       Ne(u, (g) => {
-        m(g.key) || We(x, g.key, g.value);
-      }), s([y(r, "_id")], { [n]: x });
+        m(g.key) || Ue(x, g.key, g.value);
+      }), n([y(r, "_id")], { [s]: x });
     },
-    [r, l, n]
+    [r, l, s]
   );
   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(
+      ie.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.trim() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              u.value.toString().trim() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                 " ",
                 /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
                 " ",
-                u.value.trim()
+                u.value.toString().trim()
               ] }) : null
             ] }) }),
             /* @__PURE__ */ e.jsxs(M, { className: "max-w-[200px]", children: [
@@ -784,7 +785,7 @@ const ns = ({ onAdd: r }) => {
               /* @__PURE__ */ e.jsxs("div", { children: [
                 d("Value"),
                 ": ",
-                u.value
+                u.value.toString()
               ] })
             ] })
           ] }),
@@ -792,21 +793,21 @@ const ns = ({ onAdd: r }) => {
             /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
               "button",
               {
-                disabled: W(u.value, "dnd-"),
+                disabled: U(u.value, "dnd-"),
                 className: "invisible group-hover:visible",
                 onClick: () => p(o.indexOf(u)),
-                children: /* @__PURE__ */ e.jsx($r, { className: "w-4 text-gray-500" })
+                children: /* @__PURE__ */ e.jsx(Mr, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(M, { className: "max-w-[200px]", children: W(u.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
+            /* @__PURE__ */ e.jsx(M, { className: "max-w-[200px]", children: U(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) })
+    /* @__PURE__ */ e.jsx(ds, { onAdd: (u) => h(u) })
   ] }) });
-}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
+}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
@@ -815,7 +816,7 @@ const ns = ({ onAdd: r }) => {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, cs = {
+}, us = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -826,11 +827,11 @@ const ns = ({ onAdd: r }) => {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ps = [
+}, gs = [
   {
     heading: "Styles",
     items: [
-      { component: pt },
+      { component: ut },
       { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
       { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
       {
@@ -890,9 +891,9 @@ const ns = ({ onAdd: r }) => {
   },
   {
     heading: "Attributes",
-    items: [{ component: is }]
+    items: [{ component: cs }]
   }
-], Vo = [
+], Bo = [
   {
     heading: "layout.heading",
     items: [
@@ -1294,12 +1295,12 @@ const ns = ({ onAdd: r }) => {
   },
   {
     heading: "classes.heading",
-    items: [{ component: pt }]
+    items: [{ component: ut }]
   }
-], ut = {
+], gt = {
   "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,
+  visible: It,
   invisible: Be,
   // display
   hidden: Be,
@@ -1335,10 +1336,10 @@ const ns = ({ onAdd: r }) => {
   borderRadiusRight: Q,
   borderRadiusBottom: ee,
   borderRadiusLeft: te,
-  borderRadiusTopLeft: It,
-  borderRadiusTopRight: Pt,
-  borderRadiusBottomRight: At,
-  borderRadiusBottomLeft: $t,
+  borderRadiusTopLeft: Pt,
+  borderRadiusTopRight: At,
+  borderRadiusBottomRight: $t,
+  borderRadiusBottomLeft: Et,
   divideXWidth: R,
   divideYWidth: V,
   scale: Y,
@@ -1365,18 +1366,18 @@ const ns = ({ onAdd: r }) => {
   marginBottom: ee,
   marginLeft: te,
   // text-align
-  textLeft: Et,
-  textCenter: Mt,
-  textRight: Lt,
-  textJustify: Ot,
+  textLeft: Mt,
+  textCenter: Lt,
+  textRight: Ot,
+  textJustify: zt,
   // font style
-  italic: zt,
+  italic: Yt,
   // "not-italic": "",
   // decoration
-  underline: Yt,
+  underline: Ft,
   overline: Xt,
   // transform
-  uppercase: Ft,
+  uppercase: Zt,
   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",
@@ -1489,14 +1490,14 @@ const ns = ({ onAdd: r }) => {
       }
     )
   ] }),
-  static: Zt
-}, le = Fe({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  static: Wt
+}, ae = Ze({ canReset: !1, canChange: !0 }), xs = ({ children: r, canReset: o = !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);
+  /* @__PURE__ */ e.jsx(ae.Provider, { value: { canReset: o, canChange: t }, children: r })
+), xt = ({ label: r, property: o, onChange: t }) => {
+  const a = S(() => y(ge, `${o}.classes`, [""]), [o]), l = ne(o), n = S(() => y(l, "cls", ""), [l]), { canChange: d } = se(ae), c = /\[.*\]/g.test(n);
   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.jsx(we, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__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." })
@@ -1505,37 +1506,37 @@ const ns = ({ onAdd: r }) => {
     ke,
     {
       rounded: r,
-      onChange: (n) => t(n, o),
-      selected: s,
+      onChange: (s) => t(s, o),
+      selected: n,
       options: a,
       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();
+  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = _r();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
       disabled: !a.length || l,
       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) => o(s.target.value),
+      onKeyDown: (s) => {
+        s.ctrlKey && (s.key === "z" && d(), s.key === "y" && c());
       },
-      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 }))
+          a.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 ys = ({ property: r, onChange: o }) => {
+  const { canReset: t, canChange: a } = se(ae), l = ne(r), n = S(() => y(l, "cls", ""), [l]), d = S(() => y(ge, `${r}.classes`, [""]), [r]), c = 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",
       {
@@ -1544,14 +1545,14 @@ const gs = ({ property: r, onChange: o }) => {
         disabled: !a && (!t || c - 1 < 0),
         onClick: () => o(He(d, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Wt,
+          Ut,
           {
             className: !a && (!t || c - 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(xt, { label: !1, property: r, onChange: o }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1568,8 +1569,8 @@ const gs = ({ property: r, onChange: o }) => {
       }
     )
   ] }) });
-}, 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]);
+}, hs = ({ property: r, onChange: o }) => {
+  const t = S(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: a } = se(ae), l = ne(r), n = S(() => 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(
       "button",
@@ -1577,13 +1578,13 @@ const gs = ({ property: r, onChange: o }) => {
         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))
+        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: P.createElement(y(gt, d, qe))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(M, { children: F(re(d)) })
+    /* @__PURE__ */ e.jsx(M, { children: X(re(d)) })
   ] })) });
-}, ys = {
+}, bs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1595,13 +1596,13 @@ 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(
+}, ms = ({ property: r, onChange: o }) => {
+  const t = ne(r), a = S(() => y(t, "cls", ""), [t]), { canChange: l } = se(ae), [n, d] = w([]), [c, s] = w({ color: "", shade: "" }), p = a.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), u = H(
     // 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" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), s({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), s((v) => ({ ...v, color: g, shade: v.shade ? v.shade : "500" })));
     },
-    [d, n]
+    [d, s]
   );
   A(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
@@ -1611,14 +1612,14 @@ const gs = ({ property: r, onChange: o }) => {
   const x = H(
     // eslint-disable-next-line no-shadow
     (g) => {
-      n({ color: h, shade: g });
+      s({ color: h, shade: g });
     },
     [h]
   );
   return A(() => {
-    n({ color: "", shade: "" });
+    s({ color: "", shade: "" });
   }, [t]), A(() => {
-    const v = `${y(ys, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    const v = `${y(bs, 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: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
@@ -1660,19 +1661,19 @@ 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(ke, { rounded: !0, selected: i, disabled: !h || !l, onChange: x, options: n }) })
   ] });
-}, ze = (r, o) => {
+}, Ye = (r, o) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
   if ((t === "auto" || t === "none") && o.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 = r.match(a), n = l && l.length > 1, d = !m(t) && Number.isNaN(Number(t));
+  return n || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const bs = (r) => {
+const fs = (r) => {
   const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1682,26 +1683,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-"))
+  if (F(r, "skew-"))
     return { value: `${o}${t}`, unit: "deg" };
-  if (X(r, "rotate-"))
+  if (F(r, "rotate-"))
     return { value: `${o}${t}`, unit: "deg" };
-  if (X(r, "opacity-"))
+  if (F(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (X(r, "duration-") || X(r, "delay-"))
+  if (F(r, "duration-") || F(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (X(r, "translate-") && !t.includes("/"))
+  if (F(r, "translate-") && !t.includes("/"))
     return { value: `${o}${`${t / 4}`}`, unit: "rem" };
-  if (X(r, "scale-"))
+  if (F(r, "scale-"))
     return { value: `${o}${`${t / 100}`}`, unit: "-" };
-  if (W(r, "border")) {
+  if (U(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 (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (W(r, "max-w-")) {
+  if (U(r, "max-w-")) {
     if (r === "max-w-screen-sm")
       return { value: "640", unit: "px" };
     if (r === "max-w-screen-md")
@@ -1737,7 +1738,7 @@ const bs = (r) => {
     if (t === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (W(r, "text-")) {
+  if (U(r, "text-")) {
     if (t === "xs")
       return { value: "12", unit: "px" };
     if (t === "sm")
@@ -1765,7 +1766,7 @@ const bs = (r) => {
     if (t === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (W(r, "leading-")) {
+  if (U(r, "leading-")) {
     if (t === "none")
       return { value: "1", unit: "-" };
     if (t === "tight")
@@ -1779,7 +1780,7 @@ const bs = (r) => {
     if (t === "loose")
       return { value: "2", unit: "-" };
   }
-  if (W(r, "tracking-")) {
+  if (U(r, "tracking-")) {
     if (t === "tighter")
       return { value: "-0.05", unit: "em" };
     if (t === "tight")
@@ -1796,55 +1797,55 @@ 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));
+    const [a, l] = _(t.split("/"), (n) => parseInt(n, 10));
     return { value: o + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return St(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Tt(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const ms = (r) => {
+const vs = (r) => {
   if (m(r))
     return { value: "", unit: "" };
   const o = r.match(/\[.*\]/g);
   if (o === null)
-    return fs(r);
+    return ws(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({
+}, ws = (r) => m(r) ? { value: "", unit: "" } : fs(r), yt = P.createContext({
   setDragData: () => {
   }
-}), vs = ({
+}), js = ({
   unit: r,
   currentValue: o,
   onDrag: t,
   onDragEnd: a,
   onDragStart: l,
-  negative: s,
+  negative: n,
   cssProperty: d
 }) => {
-  const { setDragData: c } = se(xt);
+  const { setDragData: c } = se(yt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (n) => {
+      onMouseDown: (s) => {
         const p = {
           onDrag: t,
           onDragEnd: a,
           dragging: !0,
-          dragStartY: n.pageY,
+          dragStartY: s.pageY,
           dragStartValue: `${o}`,
           dragUnit: r,
-          negative: s,
+          negative: n,
           cssProperty: d
         };
         l(p), c(p);
       },
       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(
+}, Cs = ({ 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,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1856,59 +1857,59 @@ const ms = (r) => {
     children: a
   },
   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);
+)) }), Fe = 50, ks = (r) => {
+  const [o, t] = w(!1), [a, l] = w(""), { currentClass: n, onChange: d, classPrefix: c, cssProperty: s, units: p, negative: h } = r, [i, u] = w(s != null && s.toLowerCase().includes("width") ? "%" : p[0]), [x, g] = w(!1), [v, C] = w(""), [G, L] = w(!1), [K, q] = w(!1);
   A(() => {
-    const { value: b, unit: f } = ms(s);
+    const { value: b, unit: f } = vs(n);
     if (f === "") {
-      l(b), u(n != null && n.toLowerCase().includes("width") ? "%" : oe(p));
+      l(b), u(s != null && s.toLowerCase().includes("width") ? "%" : oe(p));
       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(
+  }, [n, s, p]);
+  const T = ce((b) => d(b), [d], Fe), j = ce((b) => d(b, !1), [d], Fe), D = H(
     (b = !1) => {
-      const f = ze(`${a}`, p);
+      const f = Ye(`${a}`, p);
       if (y(f, "error", !1)) {
         g(!0);
         return;
       }
       const N = y(f, "unit") !== "" ? y(f, "unit") : i;
       if (N === "auto" || N === "none") {
-        S(`${c}${N}`);
+        T(`${c}${N}`);
         return;
       }
       if (y(f, "value") === "")
         return;
       const z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      b ? j(z) : S(z);
+      b ? j(z) : T(z);
     },
-    [S, j, a, i, c, p]
-  ), Z = H(
+    [T, j, a, i, c, p]
+  ), W = H(
     (b) => {
-      const f = ze(`${a}`, p);
+      const f = Ye(`${a}`, p);
       if (y(f, "error", !1)) {
         g(!0);
         return;
       }
       if (b === "auto" || b === "none") {
-        S(`${c}${b}`);
+        T(`${c}${b}`);
         return;
       }
       if (y(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);
+      T(z);
     },
-    [S, a, c, p]
+    [T, a, c, p]
   );
   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.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
     /* @__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.jsxs("div", { className: `group relative  flex items-center ${K ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${G ? "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",
@@ -1921,14 +1922,14 @@ const ms = (r) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
             b.preventDefault(), q(!0);
-            const f = Tt(b.target.value);
-            let N = Ue(f) ? 0 : f;
+            const f = Rt(b.target.value);
+            let N = Ge(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);
+            const O = `${N}`, bt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
+            j(bt);
           },
           onKeyUp: (b) => {
-            G && (b.preventDefault(), q(!1));
+            K && (b.preventDefault(), q(!1));
           },
           onBlur: () => D(),
           onChange: (b) => {
@@ -1938,7 +1939,7 @@ const ms = (r) => {
             var f;
             (f = b == null ? void 0 : b.target) == null || f.select(), t(!1);
           },
-          value: K ? v : a,
+          value: G ? v : a,
           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"
@@ -1958,27 +1959,27 @@ const ms = (r) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ws,
+        /* @__PURE__ */ e.jsx(Sr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          Cs,
           {
             units: p,
             current: i,
             onSelect: (b) => {
-              t(!1), u(b), Z(b);
+              t(!1), u(b), W(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(i) !== -1 || K ? null : /* @__PURE__ */ e.jsx(
-      vs,
+    ["none", "auto"].indexOf(i) !== -1 || G ? null : /* @__PURE__ */ e.jsx(
+      js,
       {
         onDragStart: () => L(!0),
         onDragEnd: (b) => {
           if (C(() => ""), L(!1), m(b))
             return;
           const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          S(O);
+          T(O);
         },
         onDrag: (b) => {
           if (m(b))
@@ -1990,14 +1991,14 @@ const ms = (r) => {
         currentValue: a,
         unit: i,
         negative: h,
-        cssProperty: n
+        cssProperty: s
       }
     )
   ] }) }) });
-}, ae = (r) => {
+}, ne = (r) => {
   const o = ue();
-  return Rt(o, { property: r });
-}, Cs = (r, o) => {
+  return Vt(o, { property: r });
+}, Ns = (r, o) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -2007,7 +2008,7 @@ const ms = (r) => {
     "2xl": 5
   };
   return t[y(r, "mq", "xs")] <= t[o];
-}, ks = {
+}, _s = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2080,25 +2081,25 @@ 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(
+}, Ss = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
+  const { t: o } = I(), { type: t = "icons", label: a, property: l, onEmitChange: n = () => {
+  }, units: d, negative: c = !1 } = r, [s] = Tr(), [p] = Rr(), [, h] = Ie(), i = ne(l), u = Te(), x = nt(), [g] = it(), v = S(() => 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);
+      const W = { dark: s, mq: h, mod: p, cls: j, property: l, fullCls: "" };
+      (s || p !== "") && (W.mq = "xs");
+      const b = qr(W);
       u(g, [b], D);
     },
-    [g, n, h, p, l, u]
-  ), K = H(() => {
+    [g, s, h, p, l, u]
+  ), G = H(() => {
     x(g, [v]);
-  }, [g, v, x]), L = T(() => Cs(i, h), [i, h]);
+  }, [g, v, x]), L = S(() => Ns(i, h), [i, h]);
   A(() => {
-    s(L, i);
-  }, [L, s, i]);
-  const [, , G] = Ie(), q = H(
+    n(L, i);
+  }, [L, n, i]);
+  const [, , K] = Ie(), q = H(
     (j) => {
-      G({
+      K({
         xs: 400,
         sm: 640,
         md: 800,
@@ -2107,29 +2108,29 @@ const ms = (r) => {
         "2xl": 1920
       }[j]);
     },
-    [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) }) }),
+    [K]
+  ), T = y(i, "dark", null) === s && y(i, "mod", null) === p && y(i, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(xs, { canChange: L, canReset: i && T, 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 && !T ? "text-foreground" : ""}`, children: o(a) }) }),
     /* @__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,
+          ks,
           {
             currentClass: y(i, "cls", ""),
-            classPrefix: y(ks, l, ""),
+            classPrefix: y(_s, l, ""),
             units: d || [],
             onChange: C,
             negative: c,
             cssProperty: l
           }
         ) : 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(hs, { property: l, onChange: C }),
+        t === "range" && /* @__PURE__ */ e.jsx(ys, { property: l, onChange: C }),
+        t === "color" && /* @__PURE__ */ e.jsx(ms, { property: l, onChange: C }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: a, property: l, onChange: C })
       ] }),
-      /* @__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("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: T ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => G(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(qt, { 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(
           "button",
           {
@@ -2141,8 +2142,8 @@ const ms = (r) => {
         /* @__PURE__ */ e.jsx(M, { 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)" : ""
+            Ss(y(i, "mq")),
+            s && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
@@ -2161,16 +2162,16 @@ const ms = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], yt = ({
+}, Ts = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
   label: r,
   options: o,
   borderB: t = !1,
   borderT: a = !1,
   type: l = "arbitrary",
-  units: s = _s,
+  units: n = Ts,
   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: c } = I(), [s, p] = w(o[0].key), h = ue(), i = H((u) => _(h, "property").includes(u), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -2185,16 +2186,16 @@ const ms = (r) => {
                 {
                   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"}`,
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === 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" : ""
                     }),
-                    P.createElement(y(ut, x, Ge), { className: "text-inherit w-3 h-3" })
+                    P.createElement(y(gt, x, qe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(M, { children: F(re(u)) })
+              /* @__PURE__ */ e.jsx(M, { children: X(re(u)) })
             ] }) }))
           ) })
         ] }),
@@ -2202,23 +2203,23 @@ const ms = (r) => {
           Ve,
           {
             type: l,
-            units: [...s],
+            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)
+}, Rs = ({ heading: r, items: o }) => {
+  const { t } = I(), a = ue(), l = S(() => {
+    const n = (s) => De(
+      s.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)
+      o.map((s) => s.styleType === "accordion" ? n(s.items) : s.styleType === "multiple" ? _(s.options, "key") : s.property)
     ), c = _(a, "property");
-    return Vt(d, c).length > 0;
+    return Ht(d, c).length > 0;
   }, [a, o]);
   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: [
@@ -2230,79 +2231,85 @@ const ms = (r) => {
         }
       ) : 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: o.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Ve, { ...n }, n.label)) })
   ] });
-}, Ts = Fe({}), xe = ({ section: r }) => {
-  const { t: o } = I(), t = ue(), a = H(
+}, Vs = Ze({}), xe = ({ section: r }) => {
+  const { t: o } = I(), t = ue(), a = Z(), l = H(
     (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 p = {};
+      for (let i = 0; i < t.length; i++)
+        p[t[i].property] = t[i].cls;
+      let h = !0;
+      for (const i in s)
+        if (!de(p, i) || p[i] !== s[i]) {
+          h = !1;
           break;
         }
-      return c;
+      return h;
     },
     [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) }) }),
+  ), n = S(() => ({}), []), [d] = le(), c = S(() => {
+    const s = `${Le(d, "0.prop")}_attrs`;
+    return !Qr(Le(a, s, {}));
+  }, [d]);
+  return /* @__PURE__ */ e.jsx(Vs.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(me, { 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" && c ? /* @__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: 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))
+      r.items.map((s) => de(s, "component") ? P.createElement(s.component, { key: s.label }) : de(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && l(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Rs, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...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)))
+}, Hs = () => {
+  const r = Z(), [o] = le(), { t } = I(), a = Or(), l = Te(), n = Re(r._type), d = y(oe(o), "prop"), c = y(n.props, `${d}.presets`, {});
+  if (m(a) && (!de(n, "props") || m(c)))
     return null;
-  const n = (p) => {
+  const s = (p) => {
     const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l([r._id], h, !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(Vr, { children: [
+    /* @__PURE__ */ e.jsx(Hr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(B, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(qt, {})
+      /* @__PURE__ */ e.jsx(Jt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Vr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Dr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
       m(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsxs(Pe, { children: [
-          s.type,
+          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($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(c[p]), children: [
+          be(X(t(p))),
           /* @__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))),
+        /* @__PURE__ */ e.jsx($e, { children: he(a).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(a[p]), children: [
+          be(X(t(p))),
           /* @__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();
+function Ds() {
+  const { flexChild: r, gridChild: o } = Br(), [t] = le();
   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))
+    /* @__PURE__ */ e.jsx(Hs, {}),
+    /* @__PURE__ */ e.jsxs(at, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+      r && /* @__PURE__ */ e.jsx(xe, { section: ps }),
+      o ? /* @__PURE__ */ e.jsx(xe, { section: us }) : null,
+      gs.map((a) => /* @__PURE__ */ e.jsx(xe, { section: a }, a.heading))
     ] })
   ] });
 }
-const Hs = {
+const Bs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2313,32 +2320,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,
+}, Io = () => {
+  const r = Z(), { t: o } = I(), [t, a] = P.useState(""), [l, n] = P.useState({
+    onDrag: (s) => s,
+    onDragEnd: (s) => s,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = de(
-    (n) => {
+  }), d = ce(
+    (s) => {
       const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
       let i = parseFloat(l.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;
+      i = Ge(i) ? 0 : i;
+      let u = Bs[l.dragUnit];
+      (U(h, "scale") || h === "opacity") && (u = 10);
+      let g = (l.dragStartY - s.pageY) / u + i;
       p && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), a(`${g}`);
     },
     [l],
     50
   ), c = H(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
-      onDrag: (n) => n,
-      onDragEnd: (n) => n,
+    setTimeout(() => l.onDragEnd(`${t}`), 100), n({
+      onDrag: (s) => s,
+      onDragEnd: (s) => s,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2346,11 +2353,11 @@ 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" }),
+  }, [l, t, n]);
+  return Dt(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(Qt, { 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: [
+  ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: n }, children: [
     l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -2359,9 +2366,9 @@ const Hs = {
         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(ct, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
+      /* @__PURE__ */ e.jsx(ns, {}),
+      /* @__PURE__ */ e.jsx(Ds, {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {})
@@ -2369,5 +2376,5 @@ const Hs = {
   ] }) });
 };
 export {
-  Ho as default
+  Io as default
 };