@chaibuilder/sdk 1.1.0 → 1.1.2

package/dist/{Settings-xkL3U3Y-.js → Settings-4v3M1bRS.js}

@@ -1,22 +1,22 @@
 import { j as e } from "./jsx-runtime-NV737rRe.js";
 import * as ne from "react";
 import I, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Me, useContext as re } from "react";
-import { useThrottledCallback as ye } from "@react-hookz/web";
-import { forEach as we, isArray as ae, omit as ct, truncate as pt, includes as M, get as p, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as be, filter as fe, set as Ee, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Se, startsWith as z, isNumber as ft, parseInt as vt, isNaN as _e, findLast as jt, flatten as U, intersection as Fe, has as he, isNull as wt } from "lodash";
+import { useThrottledCallback as be } from "@react-hookz/web";
+import { forEach as Ce, isArray as ae, omit as ct, truncate as pt, includes as M, get as u, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as fe, filter as ve, set as Ee, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Ve, startsWith as z, isNumber as ft, parseInt as vt, isNaN as _e, findLast as jt, flatten as U, intersection as Fe, has as he, isNull as wt } from "lodash";
 import { useTranslation as Ye } from "react-i18next";
-import { PlusIcon as Ce, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as S, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as Rt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as ke, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Mt, CrossCircledIcon as Et, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b3 as Ft, b4 as Yt, B as ue, b5 as Wt, b6 as Xt, b7 as Zt, b8 as zt, b9 as Ut, ba as Gt, bb as Kt, a6 as G, aq as qt, ar as Jt, as as Qt, bc as er, ao as tr, bd as rr, ap as lr, aH as W, aI as X, aK as Z, ak as sr, be as or, bf as nr, bg as ar, bh as ir, bi as dr, bj as cr, p as ze, ac as Ue, bk as Ge, bl as ie, bm as de, bn as ce, aj as Ne, P as Ke, a3 as qe, j as Je, aM as Te, bo as pr, bp as ur, a4 as xe, W as xr, a9 as Qe, R as He, ag as gr, ad as hr, bq as mr, au as yr, av as br, aw as fr, ax as vr, ay as H, br as jr, aB as wr, aC as Cr, aD as Be, aE as Ae } from "./index-ORFlyrBx.js";
-import kr from "@rjsf/core";
-import Nr from "@rjsf/validator-ajv8";
-import { u as Tr } from "./controls-G0puEH71.js";
-import { Check as Rr, EditIcon as Sr, TrashIcon as Vr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Hr } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-N3mTbV2j.js";
-import { useAtom as Br } from "jotai";
-import Ar from "react-autosuggest";
-import Dr from "fuse.js";
-import { A as Ir, C as ge, d as Pr } from "./utils-PPBbw5bk.js";
-import { a as $r } from "./MODIFIERS-MLfpKQY1.js";
+import { PlusIcon as ke, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as He, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as St, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as Ne, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Mt, CrossCircledIcon as Et, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b3 as Ft, b4 as Yt, B as ue, b5 as Wt, b6 as Xt, b7 as Zt, b8 as zt, b9 as Ut, ba as Gt, bb as Kt, a6 as G, aq as qt, ar as Jt, as as Qt, bc as er, ao as tr, bd as rr, ap as sr, aH as W, aI as X, aK as Z, ak as lr, be as or, bf as nr, bg as ar, bh as ir, bi as dr, bj as cr, p as ze, ac as Ue, i as pr, bk as Ge, bl as ie, bm as de, bn as ce, aj as Te, P as Ke, a3 as qe, j as Je, aM as Se, bo as ur, bp as xr, a4 as xe, W as gr, a9 as Qe, R as Be, ag as hr, ad as mr, bq as yr, au as br, av as fr, aw as vr, ax as jr, ay as H, br as wr, aB as Cr, aC as kr, aD as Ae, aE as De } from "./index-ORFlyrBx.js";
+import Nr from "@rjsf/core";
+import Tr from "@rjsf/validator-ajv8";
+import { u as Sr } from "./controls-G0puEH71.js";
+import { Check as Rr, EditIcon as Vr, TrashIcon as Hr } from "lucide-react";
+import { getBlockComponent as et, getChaiDataProviders as Br } from "@chaibuilder/runtime";
+import { E as tt, u as rt } from "./index-HjvZqhVh.js";
+import { useAtom as Ar } from "jotai";
+import Dr from "react-autosuggest";
+import Ir from "fuse.js";
+import { A as Pr, C as ge, d as $r } from "./utils-PPBbw5bk.js";
+import { a as Lr } from "./MODIFIERS-MLfpKQY1.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -62,25 +62,25 @@ import "./tailwind-config-d1VL1lzE.js";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "sonner";
-const Lr = I.lazy(() => import("react-json-view"));
-function Or(t) {
-  const l = [], r = {};
-  function s(n, a) {
-    we(a, (d, i) => {
-      const o = n ? `${n}.${i}` : i, u = ae(d) ? "list" : typeof d;
-      l.push(o), r[o] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && s(o, d);
+const Or = I.lazy(() => import("react-json-view"));
+function Mr(t) {
+  const s = [], r = {};
+  function l(o, n) {
+    Ce(n, (d, i) => {
+      const a = o ? `${o}.${i}` : i, p = ae(d) ? "list" : typeof d;
+      s.push(a), r[a] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && l(a, d);
     });
   }
-  return s("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
+  return l("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
 }
-const ve = ({ data: t, fullView: l }) => {
+const je = ({ data: t, fullView: s }) => {
   if (!t)
     return null;
   const r = typeof t;
-  return l ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
-      Lr,
+      Or,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -95,21 +95,21 @@ const ve = ({ data: t, fullView: l }) => {
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     t
   ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: pt(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
-}, De = ({
+}, Ie = ({
   type: t,
-  value: l = "",
+  value: s = "",
   setValue: r,
-  data: s,
-  onChange: n,
-  dataType: a,
+  data: l,
+  onChange: o,
+  dataType: n,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: o } = Or(s), u = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (g) => !M(d, g) && p(u, `props.${pe(ut(g, "."))}.binding`)
-  ) : i.filter((g) => a === p(o, g, "")), [t, i, d, a, u]);
+  const { paths: i, pathsType: a } = Mr(l), p = t === "PROP" ? et(l == null ? void 0 : l._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (x) => !M(d, x) && u(p, `props.${pe(ut(x, "."))}.binding`)
+  ) : i.filter((x) => n === u(a, x, "")), [t, i, d, n, p]);
   return _(() => {
-    l && n(l);
-  }, [l, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    s && o(s);
+  }, [s, t]), /* @__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: Y(te(t)) }),
       /* @__PURE__ */ e.jsxs(Ft, { open: c, onOpenChange: m, children: [
@@ -118,11 +118,11 @@ const ve = ({ data: t, fullView: l }) => {
           {
             variant: "outline",
             size: "sm",
-            className: ` ${b(l) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
-            children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${b(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
+            children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
-                x && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(a) }),
-                l
+                g && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(n) }),
+                s
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
@@ -135,50 +135,50 @@ const ve = ({ data: t, fullView: l }) => {
           /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${te(t)}...` }),
           /* @__PURE__ */ e.jsxs(zt, { children: [
             /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(Gt, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
+            /* @__PURE__ */ e.jsx(Gt, { children: C(h, (x) => /* @__PURE__ */ e.jsxs(
               Kt,
               {
-                value: g,
-                className: `cursor-pointer ${x ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
+                value: x,
+                className: `cursor-pointer ${g ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
                   r(xt(h, (T) => T === f) || null), m(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Rr, { className: `w-4 h-4 text-green-500 ${l === g ? "" : "opacity-0"}` }),
-                    g
+                    /* @__PURE__ */ e.jsx(Rr, { className: `w-4 h-4 text-green-500 ${s === x ? "" : "opacity-0"}` }),
+                    x
                   ] }),
-                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(ve, { data: p(s, g) }) })
+                  g ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(u(a, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: u(l, x) }) })
                 ]
               },
-              g
+              x
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !x && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(ve, { data: p(s, l, ""), fullView: !0 }) })
+    !g && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: u(l, s, ""), fullView: !0 }) })
   ] });
-}, Mr = ({
+}, Er = ({
   appliedBindings: t = [],
-  onAddBinding: l,
+  onAddBinding: s,
   editMode: r,
-  item: s
+  item: l
 }) => {
-  const [n, a] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), o = G(), [u] = rt(), x = A(
-    (h, g) => {
+  const [o, n] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), a = G(), [p] = rt(), g = A(
+    (h, x) => {
       if (b(h))
         return "";
       {
-        const f = p(g === "PROP" ? o : u, h, "");
+        const f = u(x === "PROP" ? a : p, h, "");
         if (ae(f))
           return "list";
         const T = typeof f;
         return T === "string" ? "text" : T === "object" ? "model" : T;
       }
     },
-    [o, u]
-  ), [c, m] = w(r ? x(s.key, "PROP") : "");
+    [a, p]
+  ), [c, m] = w(r ? g(l.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(qt, { children: [
       /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
@@ -186,36 +186,36 @@ const ve = ({ data: t, fullView: l }) => {
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
-        De,
+        Ie,
         {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: n,
-          setValue: a,
+          value: o,
+          setValue: n,
           onChange: (h) => {
-            const g = x(h, "PROP");
-            a(h), c !== g && i(""), m(g);
+            const x = g(h, "PROP");
+            n(h), c !== x && i(""), m(x);
           },
-          data: o,
+          data: a,
           dataType: c,
           appliedBindings: t
         }
       ),
       /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
       /* @__PURE__ */ e.jsx(
-        De,
+        Ie,
         {
           type: "PATH",
-          isDisabled: b(n),
+          isDisabled: b(o),
           placeholder: "Enter data path",
           value: d,
           setValue: i,
           onChange: (h) => {
-            const g = x(h, "PATH");
-            i(c === g ? h : "");
+            const x = g(h, "PATH");
+            i(c === x ? h : "");
           },
-          data: u,
+          data: p,
           dataType: c,
           appliedBindings: t
         }
@@ -226,55 +226,55 @@ const ve = ({ data: t, fullView: l }) => {
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(n) && b(d),
-        onClick: () => l({ key: n, value: d }),
+        disabled: b(o) && b(d),
+        onClick: () => s({ key: o, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, lt = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: n = !0, item: a = {} }) => {
+}, st = ({ disabled: t, children: s, onAddBinding: r, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
   const [d, i] = w(!1);
   return /* @__PURE__ */ e.jsxs(tr, { children: [
-    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
-    d && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
-      Mr,
+    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: s }),
+    d && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
+      Er,
       {
-        item: a,
-        editMode: n,
-        appliedBindings: s,
-        onAddBinding: (o) => {
-          r(o), i(!1);
+        item: n,
+        editMode: o,
+        appliedBindings: l,
+        onAddBinding: (a) => {
+          r(a), i(!1);
         }
       }
     ) })
   ] });
-}, Er = ({
+}, _r = ({
   item: t,
-  onAddBinding: l,
+  onAddBinding: s,
   onRemove: r,
-  selectedBlock: s,
-  dataProvider: n,
-  appliedBindings: a
+  selectedBlock: l,
+  dataProvider: o,
+  appliedBindings: n
 }) => {
-  const [d, i] = w("string"), o = (u, x) => {
-    if (b(u))
+  const [d, i] = w("string"), a = (p, g) => {
+    if (b(p))
       return "";
     {
-      const c = p(x === "PROP" ? s : n, u, "");
+      const c = u(g === "PROP" ? l : o, p, "");
       if (ae(c))
         return "list";
       const m = typeof c;
       return m === "string" ? "text" : m === "object" ? "model" : m;
     }
   };
-  return _(() => i(() => o(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
+  return _(() => i(() => a(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
-    /* @__PURE__ */ e.jsx(ve, { data: p(n, t.value, "") }),
+    /* @__PURE__ */ e.jsx(je, { data: u(o, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Sr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: n, item: t, children: /* @__PURE__ */ e.jsx(Vr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
-        Vr,
+        Hr,
         {
           onClick: () => r(),
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
@@ -283,94 +283,94 @@ const ve = ({ data: t, fullView: l }) => {
     ] }),
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
-}, _r = ({ bindingData: t, onChange: l }) => {
-  const r = G(), [s] = rt(), n = Hr(), [a, d] = w(
+}, Fr = ({ bindingData: t, onChange: s }) => {
+  const r = G(), [l] = rt(), o = Br(), [n, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
     d(C(t, (c, m) => ({ key: m, value: c })));
   }, [r == null ? void 0 : r._id]);
   const i = N(() => {
-    if (b(s))
+    if (b(l))
       return !0;
-    if (b(a))
+    if (b(n))
       return !1;
-    const c = be(a);
+    const c = fe(n);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [s, a]), o = (c) => {
-    const m = fe(a, (h) => h.key !== c.key);
-    d([...m, c]), x([...m, c]);
-  }, u = (c) => {
-    const m = fe(a, (h, g) => c !== g);
-    x([...m]);
-  }, x = A(
+  }, [l, n]), a = (c) => {
+    const m = ve(n, (h) => h.key !== c.key);
+    d([...m, c]), g([...m, c]);
+  }, p = (c) => {
+    const m = ve(n, (h, x) => c !== x);
+    g([...m]);
+  }, g = A(
     (c = []) => {
       if (d(c), b(c)) {
-        l({});
+        s({});
         return;
       }
       const m = {};
-      we(c, (h) => {
+      Ce(c, (h) => {
         !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Ee(m, h.key, h.value);
-      }), l(m);
+      }), s(m);
     },
-    [l]
+    [s]
   );
-  return b(n) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
+  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", 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: [
-    C(a, (c, m) => /* @__PURE__ */ e.jsx(
-      Er,
+    C(n, (c, m) => /* @__PURE__ */ e.jsx(
+      _r,
       {
         item: c,
-        onAddBinding: o,
-        onRemove: () => u(m),
+        onAddBinding: a,
+        onRemove: () => p(m),
         selectedBlock: r,
-        dataProvider: s,
-        appliedBindings: C(a, "key")
+        dataProvider: l,
+        appliedBindings: C(n, "key")
       },
       c.key
     )),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 200, children: [
       /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
-        lt,
+        st,
         {
           disabled: i,
-          appliedBindings: C(a, "key"),
-          onAddBinding: o,
+          appliedBindings: C(n, "key"),
+          onAddBinding: a,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
               className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(s) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      i && /* @__PURE__ */ e.jsx(Z, { 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" })
     ] })
   ] });
-}, Fr = () => /* @__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" }), Ie = dt(
+}, Yr = () => /* @__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" }), me = dt(
   ({
     createHistorySnapshot: t,
-    properties: l,
+    properties: s,
     formData: r,
-    onChange: s
+    onChange: l
   }) => {
-    const [n] = sr(), a = { type: "object", properties: {} }, d = {};
-    return Object.keys(l).forEach((i) => {
-      const o = l[i];
-      if (M(["slot", "styles"], o.type))
+    const [o] = lr(), n = { type: "object", properties: {} }, d = {};
+    return Object.keys(s).forEach((i) => {
+      const a = s[i];
+      if (M(["slot", "styles"], a.type))
         return;
-      const u = p(o, "i18n", !1) ? `${i}-${n}` : i;
-      a.properties[u] = or(o, n), d[u] = nr(o, n);
+      const p = u(a, "i18n", !1) ? `${i}-${o}` : i;
+      n.properties[p] = or(a, o), d[p] = nr(a, o);
     }), /* @__PURE__ */ e.jsx(
-      kr,
+      Nr,
       {
         widgets: {
-          binding: Fr,
+          binding: Yr,
           richtext: ar,
           icon: ir,
           image: dr
@@ -383,61 +383,59 @@ const ve = ({ data: t, fullView: l }) => {
         omitExtraData: !1,
         liveOmit: !1,
         liveValidate: !0,
-        validator: Nr,
+        validator: Tr,
         uiSchema: d,
         onBlur: t,
-        schema: a,
+        schema: n,
         formData: r,
-        onChange: s
+        onChange: l
       }
     );
   }
 );
-function Yr() {
-  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), n = { ...t }, a = () => l(), d = ({ formData: x }, c) => {
-    if (c) {
-      const m = c.replace("root.", "");
-      r([t._id], { [m]: p(x, m) });
+function Wr() {
+  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = et(t._type), o = { ...t }, n = pr("dataBindingSupport", !1), d = () => s(), i = ({ formData: c }, m) => {
+    if (m) {
+      const h = m.replace("root.", "");
+      r([t._id], { [h]: u(c, h) });
     }
-  }, i = {
-    _name: Tr({
+  }, a = {
+    _name: Sr({
       title: "Name",
-      default: p(t, "_name", t._type)
+      default: u(t, "_name", t._type)
     })
-  }, o = gt(p(n, "_bindings", {})), u = N(() => {
-    const x = ht(p(s, "props", {}));
-    return mt(o, (c) => {
-      delete x[c];
-    }), x;
-  }, [s, o]);
+  }, p = gt(u(o, "_bindings", {})), g = N(() => {
+    const c = ht(u(l, "props", {}));
+    return n && mt(p, (m) => delete c[m]), c;
+  }, [l, p, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      Ie,
+      me,
       {
-        onChange: d,
-        createHistorySnapshot: a,
-        formData: n,
-        properties: i
+        onChange: i,
+        createHistorySnapshot: d,
+        formData: o,
+        properties: a
       }
     ),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+    n ? /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(ie, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${b(p(t, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${b(u(t, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          _r,
+          Fr,
           {
-            bindingData: p(n, "_bindings", {}),
-            onChange: (x) => {
-              d({ formData: { ...n, _bindings: x } }, "root._bindings");
+            bindingData: u(o, "_bindings", {}),
+            onChange: (c) => {
+              i({ formData: { ...o, _bindings: c } }, "root._bindings");
             }
           }
         ) })
@@ -448,40 +446,48 @@ function Yr() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(ce, { className: "pt-4", children: [
-          b(o) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
+          b(p) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(o, yt).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(p, yt).join(", ") }),
             " ",
-            o.length === 1 ? "property" : "properties",
+            p.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            Ie,
+            me,
             {
-              onChange: d,
-              createHistorySnapshot: a,
-              formData: n,
-              properties: u
+              onChange: i,
+              createHistorySnapshot: d,
+              formData: o,
+              properties: g
             }
           )
         ] })
       ] })
-    ] }),
+    ] }) : /* @__PURE__ */ e.jsx(
+      me,
+      {
+        onChange: i,
+        createHistorySnapshot: d,
+        formData: o,
+        properties: g
+      }
+    ),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Dr(Ir, {
+const Pe = new Ir(Pr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Wr() {
+function Xr() {
   var D;
-  const [t] = Ne(), l = G(), r = Ke(), s = qe(), [n] = Je(), [a, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, o = bt((p(l, i, "").replace($r, "").split(",").pop() || "").split(" "), b), u = () => {
-    const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    r(n, j, !0), d("");
-  }, [x, c] = w([]), m = ({ value: j }) => {
+  const [t] = Te(), s = G(), r = Ke(), l = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = bt((u(s, i, "").replace(Lr, "").split(",").pop() || "").split(" "), b), p = () => {
+    const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    r(o, j, !0), d("");
+  }, [g, c] = w([]), m = ({ value: j }) => {
     const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
     let k = [];
     if (P && P.length > 0) {
@@ -495,15 +501,15 @@ function Wr() {
     c(C(k, "item"));
   }, h = () => {
     c([]);
-  }, g = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), T = {
+  }, x = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), T = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: a,
+    value: n,
     onKeyDown: (j) => {
-      j.key === "Enter" && a.trim() !== "" && u();
+      j.key === "Enter" && n.trim() !== "" && p();
     },
     onChange: (j, { newValue: L }) => d(L),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -511,17 +517,17 @@ function Wr() {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
+      className: `no-scrollbar flex ${g.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
-        /* @__PURE__ */ e.jsx(Te, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(Se, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 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(
-            Ar,
+            Dr,
             {
-              suggestions: x,
+              suggestions: g,
               onSuggestionsFetchRequested: m,
               onSuggestionsClearRequested: h,
-              getSuggestionValue: g,
+              getSuggestionValue: x,
               renderSuggestion: f,
               inputProps: T,
               containerProps: {
@@ -539,17 +545,17 @@ function Wr() {
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: u,
-              disabled: a.trim() === "",
+              onClick: p,
+              disabled: n.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(Ce, {})
+              children: /* @__PURE__ */ e.jsx(ke, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
+          b(a) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
           ne.Children.toArray(
-            o.map((j) => /* @__PURE__ */ e.jsxs(
+            a.map((j) => /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: "group relative flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
@@ -558,7 +564,7 @@ function Wr() {
                   /* @__PURE__ */ e.jsx(
                     We,
                     {
-                      onClick: () => s(n, [j]),
+                      onClick: () => l(o, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -572,7 +578,7 @@ function Wr() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
   heading: "Flex Child",
   items: [
     { type: "arbitrary", label: "Basis", units: B, property: "flexBasis" },
@@ -581,7 +587,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, Zr = {
+}, zr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -592,7 +598,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, zr = [
+}, Ur = [
   {
     heading: "Layout",
     items: [
@@ -994,42 +1000,42 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   },
   {
     heading: "Classes",
-    items: [{ component: Wr }]
+    items: [{ component: Xr }]
   }
-], st = {
+], lt = {
   "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: Ct,
-  invisible: Ve,
+  invisible: He,
   // display
-  hidden: Ve,
+  hidden: He,
   gap: O,
-  gapX: S,
+  gapX: R,
   gapY: V,
-  spaceX: S,
+  spaceX: R,
   spaceY: V,
   overscroll: O,
-  overscrollX: S,
+  overscrollX: R,
   overscrollY: V,
   overflow: O,
-  overflowX: S,
+  overflowX: R,
   overflowY: V,
   top: q,
   right: J,
   bottom: Q,
   left: ee,
   inset: O,
-  insetX: S,
+  insetX: R,
   insetY: V,
   border: O,
-  borderX: S,
+  borderX: R,
   borderY: V,
   borderTop: q,
   borderRight: J,
   borderBottom: Q,
   borderLeft: ee,
   borderRadius: O,
-  borderRadiusX: S,
+  borderRadiusX: R,
   borderRadiusY: V,
   borderRadiusTop: q,
   borderRadiusRight: J,
@@ -1038,19 +1044,19 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   borderRadiusTopLeft: kt,
   borderRadiusTopRight: Nt,
   borderRadiusBottomRight: Tt,
-  borderRadiusBottomLeft: Rt,
-  divideXWidth: S,
+  borderRadiusBottomLeft: St,
+  divideXWidth: R,
   divideYWidth: V,
   scale: O,
-  scaleX: S,
+  scaleX: R,
   scaleY: V,
-  skewX: S,
+  skewX: R,
   skewY: V,
-  translateX: S,
+  translateX: R,
   translateY: V,
   // padding
   padding: O,
-  paddingX: S,
+  paddingX: R,
   paddingY: V,
   paddingTop: q,
   paddingRight: J,
@@ -1058,14 +1064,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   paddingLeft: ee,
   // margin
   margin: O,
-  marginX: S,
+  marginX: R,
   marginY: V,
   marginTop: q,
   marginRight: J,
   marginBottom: Q,
   marginLeft: ee,
   // text-align
-  textLeft: St,
+  textLeft: Rt,
   textCenter: Vt,
   textRight: Ht,
   textJustify: Bt,
@@ -1190,100 +1196,100 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     )
   ] }),
   static: $t
-}, le = Me({ canReset: !1, canChange: !0 }), Ur = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
+}, se = Me({ canReset: !1, canChange: !0 }), Gr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: l, canChange: r }, children: t })
-), ot = ({ label: t, property: l, onChange: r }) => {
-  const s = N(() => p(ge, `${l}.classes`, [""]), [l]), n = se(l), a = N(() => p(n, "cls", ""), [n]), { canChange: d } = re(le), i = /\[.*\]/g.test(a);
+  /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
+), ot = ({ label: t, property: s, onChange: r }) => {
+  const l = N(() => u(ge, `${s}.classes`, [""]), [s]), o = le(s), n = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(X, { 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(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(X, { 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(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    je,
+    we,
     {
       rounded: t,
-      onChange: (o) => r(o, l),
-      selected: a,
-      options: s,
+      onChange: (a) => r(a, s),
+      selected: n,
+      options: l,
       disabled: !d
     }
   ) });
 };
-function je({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: n = !1 }) {
-  const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
+function we({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
+  const n = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !s.length || n,
+      disabled: !l.length || o,
       className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (o) => l(o.target.value),
-      onKeyDown: (o) => {
-        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && i());
+      onChange: (a) => s(a.target.value),
+      onKeyDown: (a) => {
+        a.ctrlKey && (a.key === "z" && d(), a.key === "y" && i());
       },
-      value: a,
+      value: n,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         I.Children.toArray(
-          s.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
+          l.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
         )
       ]
     }
   );
 }
-const Gr = ({ property: t, onChange: l }) => {
-  const { canReset: r, canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]), d = N(() => p(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, o = /\[.*\]/g.test(a);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const Kr = ({ property: t, onChange: s }) => {
+  const { canReset: r, canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]), d = N(() => u(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/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: a ? /* @__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: !s && (!r || i - 1 < 0),
-        onClick: () => l(Se(d, i - 1), t),
+        disabled: !l && (!r || i - 1 < 0),
+        onClick: () => s(Ve(d, i - 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Lt,
           {
-            className: !s && (!r || i - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !l && (!r || i - 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(ot, { label: !1, property: t, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: t, onChange: s }) }),
     /* @__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: !s && (!r || i + 1 >= d.length),
-        onClick: () => l(Se(d, i + 1), t),
+        disabled: !l && (!r || i + 1 >= d.length),
+        onClick: () => s(Ve(d, i + 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ce,
+          ke,
           {
-            className: !s && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !l && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, Kr = ({ property: t, onChange: l }) => {
-  const r = N(() => p(ge, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]);
+}, qr = ({ property: t, onChange: s }) => {
+  const r = N(() => u(ge, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !s,
-        onClick: () => l(d, t),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: I.createElement(p(st, d, Xe))
+        disabled: !l,
+        onClick: () => s(d, t),
+        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: I.createElement(u(lt, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
   ] })) });
-}, qr = {
+}, Jr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1295,38 +1301,38 @@ const Gr = ({ property: t, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Jr = ({ property: t, onChange: l }) => {
-  const r = se(t), s = N(() => p(r, "cls", ""), [r]), { canChange: n } = re(le), [a, d] = w([]), [i, o] = w({ color: "", shade: "" }), u = s.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
+}, Qr = ({ property: t, onChange: s }) => {
+  const r = le(t), l = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(se), [n, d] = w([]), [i, a] = w({ color: "", shade: "" }), p = l.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), o({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((f) => ({ ...f, color: g, shade: f.shade ? f.shade : "500" })));
+    (x) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), a({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), a((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
     },
-    [d, o]
+    [d, a]
   );
   _(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(x))
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [x]);
+  }, [g]);
   const h = A(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      o({ color: x, shade: g });
+    (x) => {
+      a({ color: g, shade: x });
     },
-    [x]
+    [g]
   );
   return _(() => {
-    o({ color: "", shade: "" });
+    a({ color: "", shade: "" });
   }, [r]), _(() => {
-    const f = `${p(qr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(p(ge, `${t}.regExp`, ""))) && l(f, t);
-  }, [i, l, t]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const f = `${u(Jr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(u(ge, `${t}.regExp`, ""))) && s(f, t);
+  }, [i, s, t]), /* @__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(
-      je,
+      we,
       {
-        disabled: !n,
+        disabled: !o,
         rounded: !0,
-        selected: x,
+        selected: g,
         onChange: m,
         options: [
           "current",
@@ -1360,20 +1366,20 @@ const Gr = ({ property: t, onChange: l }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(je, { rounded: !0, selected: c, disabled: !x || !n, onChange: h, options: a }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(we, { rounded: !0, selected: c, disabled: !g || !o, onChange: h, options: n }) })
   ] });
-}, $e = (t, l) => {
+}, $e = (t, s) => {
   t = t.toLowerCase();
   let r = t.trim().replace(/ |\+/g, "");
-  if ((r === "auto" || r === "none") && l.includes(r))
+  if ((r === "auto" || r === "none") && s.includes(r))
     return { value: "", unit: r };
-  const s = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
-  r = r.replace(s, "");
-  const n = t.match(s), a = n && n.length > 1, d = !b(r) && Number.isNaN(Number(r));
-  return a || d ? { error: "Invalid value" } : n && (n[0] === "auto" || n[0] === "none") ? { value: n[0], unit: "" } : { value: r, unit: n ? n[0] : "" };
+  const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
+  r = r.replace(l, "");
+  const o = t.match(l), n = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
 };
-const Qr = (t) => {
-  const l = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
+const es = (t) => {
+  const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
   if (["auto", "none"].includes(r))
     return { value: "", unit: r };
   if (r === "px")
@@ -1383,21 +1389,21 @@ const Qr = (t) => {
   if (r === "full")
     return { value: "100", unit: "%" };
   if (M(t, "skew-"))
-    return { value: `${l}${r}`, unit: "deg" };
+    return { value: `${s}${r}`, unit: "deg" };
   if (M(t, "rotate-"))
-    return { value: `${l}${r}`, unit: "deg" };
+    return { value: `${s}${r}`, unit: "deg" };
   if (M(t, "opacity-"))
     return { value: `${r / 100}`, unit: "-" };
   if (M(t, "duration-") || M(t, "delay-"))
     return { value: `${r}`, unit: "ms" };
   if (M(t, "translate-") && !r.includes("/"))
-    return { value: `${l}${`${r / 4}`}`, unit: "rem" };
+    return { value: `${s}${`${r / 4}`}`, unit: "rem" };
   if (M(t, "scale-"))
-    return { value: `${l}${`${r / 100}`}`, unit: "-" };
+    return { value: `${s}${`${r / 100}`}`, unit: "-" };
   if (z(t, "border")) {
-    const s = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (s)
-      return { value: s[0].split("-").pop(), unit: "px" };
+    const l = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (l)
+      return { value: l[0].split("-").pop(), unit: "px" };
     if (t.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1496,29 +1502,29 @@ const Qr = (t) => {
   if (["max", "min", "fit"].includes(r))
     return { value: t, unit: "class" };
   if (r.includes("/")) {
-    const [s, n] = C(r.split("/"), (a) => parseInt(a, 10));
-    return { value: l + (s / n * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [l, o] = C(r.split("/"), (n) => parseInt(n, 10));
+    return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return ft(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
+  return ft(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 };
-const el = (t) => {
+const ts = (t) => {
   if (b(t))
     return { value: "", unit: "" };
-  const l = t.match(/\[.*\]/g);
-  if (l === null)
-    return tl(t);
-  const r = p(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", n = pe(r.match(/\d+.\d+|\d+/g));
-  return { value: `${s}${n}`, unit: r.replace(n, "") };
-}, tl = (t) => b(t) ? { value: "", unit: "" } : Qr(t), nt = I.createContext({
+  const s = t.match(/\[.*\]/g);
+  if (s === null)
+    return rs(t);
+  const r = u(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = pe(r.match(/\d+.\d+|\d+/g));
+  return { value: `${l}${o}`, unit: r.replace(o, "") };
+}, rs = (t) => b(t) ? { value: "", unit: "" } : es(t), nt = I.createContext({
   setDragData: () => {
   }
-}), rl = ({
+}), ss = ({
   unit: t,
-  currentValue: l,
+  currentValue: s,
   onDrag: r,
-  onDragEnd: s,
-  onDragStart: n,
-  negative: a,
+  onDragEnd: l,
+  onDragStart: o,
+  negative: n,
   cssProperty: d
 }) => {
   const { setDragData: i } = re(nt);
@@ -1526,86 +1532,86 @@ const el = (t) => {
     "button",
     {
       type: "button",
-      onMouseDown: (o) => {
-        const u = {
+      onMouseDown: (a) => {
+        const p = {
           onDrag: r,
-          onDragEnd: s,
+          onDragEnd: l,
           dragging: !0,
-          dragStartY: o.pageY,
-          dragStartValue: `${l}`,
+          dragStartY: a.pageY,
+          dragStartValue: `${s}`,
           dragUnit: t,
-          negative: a,
+          negative: n,
           cssProperty: d
         };
-        n(u), i(u);
+        o(p), i(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(Ot, {})
     }
   );
-}, ll = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
+}, ls = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((l) => /* @__PURE__ */ e.jsx(
   ue,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: l === s ? "primary" : void 0,
+    color: s === l ? "primary" : void 0,
     size: "sm",
-    onClick: (n) => {
-      n.stopPropagation(), t(s);
+    onClick: (o) => {
+      o.stopPropagation(), t(l);
     },
-    children: s
+    children: l
   },
-  s
-)) }), Le = 50, sl = (t) => {
-  const [l, r] = w(!1), [s, n] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: o, units: u, negative: x } = t, [c, m] = w(o != null && o.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
+  l
+)) }), Le = 50, os = (t) => {
+  const [s, r] = w(!1), [l, o] = w(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: p, negative: g } = t, [c, m] = w(a != null && a.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
   _(() => {
-    const { value: y, unit: v } = el(a);
+    const { value: y, unit: v } = ts(n);
     if (v === "") {
-      n(y), m(o != null && o.toLowerCase().includes("width") ? "%" : pe(u));
+      o(y), m(a != null && a.toLowerCase().includes("width") ? "%" : pe(p));
       return;
     }
-    m(v), n(v === "class" || b(y) ? "" : y);
-  }, [a, o, u]);
-  const k = ye((y) => d(y), [d], Le), $ = ye((y) => d(y, !1), [d], Le), F = A(
+    m(v), o(v === "class" || b(y) ? "" : y);
+  }, [n, a, p]);
+  const k = be((y) => d(y), [d], Le), $ = be((y) => d(y, !1), [d], Le), F = A(
     (y = !1) => {
-      const v = $e(`${s}`, u);
-      if (p(v, "error", !1)) {
-        g(!0);
+      const v = $e(`${l}`, p);
+      if (u(v, "error", !1)) {
+        x(!0);
         return;
       }
-      const R = p(v, "unit") !== "" ? p(v, "unit") : c;
-      if (R === "auto" || R === "none") {
-        k(`${i}${R}`);
+      const S = u(v, "unit") !== "" ? u(v, "unit") : c;
+      if (S === "auto" || S === "none") {
+        k(`${i}${S}`);
         return;
       }
-      if (p(v, "value") === "")
+      if (u(v, "value") === "")
         return;
-      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      const K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       y ? $(K) : k(K);
     },
-    [k, $, s, c, i, u]
+    [k, $, l, c, i, p]
   ), oe = A(
     (y) => {
-      const v = $e(`${s}`, u);
-      if (p(v, "error", !1)) {
-        g(!0);
+      const v = $e(`${l}`, p);
+      if (u(v, "error", !1)) {
+        x(!0);
         return;
       }
       if (y === "auto" || y === "none") {
         k(`${i}${y}`);
         return;
       }
-      if (p(v, "value") === "")
+      if (u(v, "value") === "")
         return;
-      const R = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      const S = u(v, "unit") !== "" ? u(v, "unit") : y, K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       k(K);
     },
-    [k, s, i, u]
+    [k, l, i, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(W, { children: [
-      /* @__PURE__ */ e.jsx(X, { 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(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(X, { 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(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
@@ -1622,9 +1628,9 @@ const el = (t) => {
               return;
             y.preventDefault(), P(!0);
             const v = vt(y.target.value);
-            let R = _e(v) ? 0 : v;
-            y.keyCode === 38 && (R += 1), y.keyCode === 40 && (R -= 1);
-            const E = `${R}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
+            let S = _e(v) ? 0 : v;
+            y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
+            const E = `${S}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
             $(it);
           },
           onKeyUp: (y) => {
@@ -1632,36 +1638,36 @@ const el = (t) => {
           },
           onBlur: () => F(),
           onChange: (y) => {
-            g(!1), n(y.target.value);
+            x(!1), o(y.target.value);
           },
           onClick: (y) => {
             var v;
             (v = y == null ? void 0 : y.target) == null || v.select(), r(!1);
           },
-          value: D ? f : s,
+          value: D ? f : l,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(W, { open: l, delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsxs(W, { open: s, delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => r(!l),
+            onClick: () => r(!s),
             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 ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              u.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ll,
+        /* @__PURE__ */ e.jsx(xr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ls,
           {
-            units: u,
+            units: p,
             current: c,
             onSelect: (y) => {
               r(!1), m(y), oe(y);
@@ -1671,7 +1677,7 @@ const el = (t) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      rl,
+      ss,
       {
         onDragStart: () => j(!0),
         onDragEnd: (y) => {
@@ -1687,17 +1693,17 @@ const el = (t) => {
           const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
           $(E);
         },
-        currentValue: s,
+        currentValue: l,
         unit: c,
-        negative: x,
-        cssProperty: o
+        negative: g,
+        cssProperty: a
       }
     )
   ] }) }) });
-}, se = (t) => {
-  const l = xe();
-  return jt(l, { property: t });
-}, ol = (t, l) => {
+}, le = (t) => {
+  const s = xe();
+  return jt(s, { property: t });
+}, ns = (t, s) => {
   const r = {
     xs: 0,
     sm: 1,
@@ -1706,8 +1712,8 @@ const el = (t) => {
     xl: 4,
     "2xl": 5
   };
-  return r[p(t, "mq", "xs")] <= r[l];
-}, nl = {
+  return r[u(t, "mq", "xs")] <= r[s];
+}, as = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1780,23 +1786,23 @@ const el = (t) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, al = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
-  const { type: l = "icons", label: r, property: s, onEmitChange: n = () => {
-  }, units: a, negative: d = !1 } = t, [i] = xr(), [o] = Qe(), [, u] = He(), x = se(s), c = Ke(), m = qe(), [h] = Je(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
+}, is = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
+  const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
+  }, units: n, negative: d = !1 } = t, [i] = gr(), [a] = Qe(), [, p] = Be(), g = le(l), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
     (k, $ = !0) => {
-      const F = { dark: i, mq: u, mod: o, cls: k, property: s, fullCls: "" };
-      (i || o !== "") && (F.mq = "xs");
-      const oe = Pr(F);
+      const F = { dark: i, mq: p, mod: a, cls: k, property: l, fullCls: "" };
+      (i || a !== "") && (F.mq = "xs");
+      const oe = $r(F);
       c(h, [oe], $);
     },
-    [h, i, u, o, s, c]
+    [h, i, p, a, l, c]
   ), T = A(() => {
-    m(h, [g]);
-  }, [h, g, m]), D = N(() => ol(x, u), [x, u]);
+    m(h, [x]);
+  }, [h, x, m]), D = N(() => ns(g, p), [g, p]);
   _(() => {
-    n(D, x);
-  }, [D, n, x]);
-  const [, , j] = He(), L = A(
+    o(D, g);
+  }, [D, o, g]);
+  const [, , j] = Be(), L = A(
     (k) => {
       j({
         xs: 400,
@@ -1808,52 +1814,52 @@ const el = (t) => {
       }[k]);
     },
     [j]
-  ), P = p(x, "dark", null) === i && p(x, "mod", null) === o && p(x, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(Ur, { canChange: D, canReset: x && P, 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] ${x && !P ? "text-foreground" : ""}`, children: r }) }),
+  ), P = u(g, "dark", null) === i && u(g, "mod", null) === a && u(g, "mq", null) === p;
+  return /* @__PURE__ */ e.jsx(Gr, { canChange: D, canReset: g && P, 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] ${g && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        l === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          sl,
+        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          os,
           {
-            currentClass: p(x, "cls", ""),
-            classPrefix: p(nl, s, ""),
-            units: a || [],
+            currentClass: u(g, "cls", ""),
+            classPrefix: u(as, l, ""),
+            units: n || [],
             onChange: f,
             negative: d,
-            cssProperty: s
+            cssProperty: l
           }
         ) : null,
-        l === "icons" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: f }),
-        l === "range" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: f }),
-        l === "color" && /* @__PURE__ */ e.jsx(Jr, { property: s, onChange: f }),
-        l === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: s, onChange: f })
+        s === "icons" && /* @__PURE__ */ e.jsx(qr, { property: l, onChange: f }),
+        s === "range" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: f }),
+        s === "color" && /* @__PURE__ */ e.jsx(Qr, { property: l, onChange: f }),
+        s === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: l, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Et, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Et, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { 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(ke, {})
+            children: /* @__PURE__ */ e.jsx(Ne, {})
           }
         ) }),
         /* @__PURE__ */ e.jsx(Z, { 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: [
-            al(p(x, "mq")),
-            i && !x.dark ? "(Light mode)" : ""
+            is(u(g, "mq")),
+            i && !g.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => L(p(x, "mq")),
+              onClick: () => L(u(g, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                p(x, "mq").toUpperCase()
+                u(g, "mq").toUpperCase()
               ]
             }
           )
@@ -1861,36 +1867,36 @@ const el = (t) => {
       ] }) : null })
     ] })
   ] }) });
-}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
+}, ds = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
   label: t,
-  options: l,
+  options: s,
   borderB: r = !1,
-  borderT: s = !1,
-  type: n = "arbitrary",
-  units: a = il,
+  borderT: l = !1,
+  type: o = "arbitrary",
+  units: n = ds,
   negative: d = !1
 }) => {
-  const [i, o] = w(l[0].key), u = xe(), x = A((c) => C(u, "property").includes(c), [u]);
+  const [i, a] = w(s[0].key), p = xe(), g = A((c) => C(p, "property").includes(c), [p]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${s ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${l ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
           /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
-            l.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
+            s.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
               /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => o(m),
+                  onClick: () => a(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     I.createElement("div", {
-                      className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    I.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
+                    I.createElement(u(lt, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1901,8 +1907,8 @@ const el = (t) => {
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           Re,
           {
-            type: n,
-            units: [...a],
+            type: o,
+            units: [...n],
             label: "",
             property: i,
             negative: d
@@ -1911,73 +1917,73 @@ const el = (t) => {
       ]
     }
   );
-}, dl = ({ heading: t, items: l }) => {
-  const r = xe(), s = N(() => {
-    const n = (i) => U(
-      i.map((o) => o.styleType === "multiple" ? C(o.options, "key") : o.property)
-    ), a = U(
-      l.map((i) => i.styleType === "accordion" ? n(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+}, cs = ({ heading: t, items: s }) => {
+  const r = xe(), l = N(() => {
+    const o = (i) => U(
+      i.map((a) => a.styleType === "multiple" ? C(a.options, "key") : a.property)
+    ), n = U(
+      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
-    return Fe(a, d).length > 0;
-  }, [r, l]);
+    return Fe(n, d).length > 0;
+  }, [r, s]);
   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,
-      s ? /* @__PURE__ */ e.jsx(
+      l ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Re, { ...o }, o.label)) })
   ] });
-}, cl = Me({}), me = ({ section: t }) => {
-  const l = xe(), r = A(
-    (a = []) => {
+}, ps = Me({}), ye = ({ section: t }) => {
+  const s = xe(), r = A(
+    (n = []) => {
       const d = {};
-      for (let o = 0; o < l.length; o++)
-        d[l[o].property] = l[o].cls;
+      for (let a = 0; a < s.length; a++)
+        d[s[a].property] = s[a].cls;
       let i = !0;
-      for (const o in a)
-        if (!he(d, o) || d[o] !== a[o]) {
+      for (const a in n)
+        if (!he(d, a) || d[a] !== n[a]) {
           i = !1;
           break;
         }
       return i;
     },
-    [l]
-  ), s = N(() => {
-    if (l.length > 0 && t.heading === "Classes")
+    [s]
+  ), l = N(() => {
+    if (s.length > 0 && t.heading === "Classes")
       return !0;
-    const a = (o) => U(
-      o.map((u) => u.styleType === "multiple" ? U(C(u.options, "key")) : u.property)
+    const n = (a) => U(
+      a.map((p) => p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
     ), d = U(
-      t.items.map((o) => o.styleType === "accordion" ? a(o.items) : o.styleType === "multiple" ? U(C(o.options, "key")) : o.property)
-    ), i = C(l, "property");
+      t.items.map((a) => a.styleType === "accordion" ? n(a.items) : a.styleType === "multiple" ? U(C(a.options, "key")) : a.property)
+    ), i = C(s, "property");
     return Fe(d, i).length > 0;
-  }, [l, t.heading, t.items]), n = N(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(cl.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+  }, [s, t.heading, t.items]), o = N(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(ps.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "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 ${s ? "bg-blue-500" : "bg-gray-300"}` }),
+      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
       t.heading
     ] }) }),
     /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      t.items.map((a) => he(a, "component") ? I.createElement(a.component, { key: a.label }) : he(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(cs, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
     ) })
   ] }) });
-}, pl = ({
+}, us = ({
   item: t,
-  index: l,
+  index: s,
   canDelete: r,
-  onChange: s,
-  onRemove: n
+  onChange: l,
+  onRemove: o
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (a) => s(a, l),
+      onChange: (n) => l(n, s),
       value: t.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1990,7 +1996,7 @@ const el = (t) => {
       "input",
       {
         name: "value",
-        onChange: (a) => b(t.key) ? {} : s(a, l),
+        onChange: (n) => b(t.key) ? {} : l(n, s),
         value: t.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -2001,74 +2007,74 @@ const el = (t) => {
     /* @__PURE__ */ e.jsx(
       _t,
       {
-        onClick: n,
+        onClick: o,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), ul = ({ section: t }) => {
+] }), xs = ({ section: t }) => {
   var m;
-  const { setSyncState: l } = gr(), r = G(), [s, n] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  const { setSyncState: s } = hr(), r = G(), [l, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
   ne.useEffect(() => {
-    const h = C(p(r, i), (g, f) => ({ key: f, value: g }));
-    b(h) ? n([]) : n(h);
-  }, [p(r, i)]);
-  const o = () => n([...s, { key: "", value: "" }]), u = (h) => {
-    const g = fe(s, (f, T) => h !== T);
-    c(g);
-  }, x = (h, g) => {
-    const f = [...s];
-    f[g][h.target.name] = h.target.value, c(f);
+    const h = C(u(r, i), (x, f) => ({ key: f, value: x }));
+    b(h) ? o([]) : o(h);
+  }, [u(r, i)]);
+  const a = () => o([...l, { key: "", value: "" }]), p = (h) => {
+    const x = ve(l, (f, T) => h !== T);
+    c(x);
+  }, g = (h, x) => {
+    const f = [...l];
+    f[x][h.target.name] = h.target.value, c(f);
   }, c = ne.useCallback(
     (h = []) => {
-      const g = {};
-      we(h, (f) => {
-        b(f.key) || Ee(g, f.key, f.value);
-      }), d([p(r, "_id")], { [i]: g }), l("UNSAVED");
+      const x = {};
+      Ce(h, (f) => {
+        b(f.key) || Ee(x, f.key, f.value);
+      }), d([u(r, "_id")], { [i]: x }), s("UNSAVED");
     },
-    [r, l, d, i]
+    [r, s, d, i]
   );
   return /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "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 ${b(p(r, i)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${b(u(r, i)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
     ] }) }),
     /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(Te, { className: "mt-2 flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ e.jsxs(Se, { className: "mt-2 flex w-full items-center justify-between", children: [
         "Add Custom attributes",
         /* @__PURE__ */ e.jsxs(
           "div",
           {
-            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(s) && b((m = be(s)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(l) && b((m = fe(l)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
               var h;
-              !b(s) && b((h = be(s)) == null ? void 0 : h.key) || o();
+              !b(l) && b((h = fe(l)) == null ? void 0 : h.key) || a();
             },
             children: [
-              /* @__PURE__ */ e.jsx(Ce, { width: 12, height: 12 }),
+              /* @__PURE__ */ e.jsx(ke, { width: 12, height: 12 }),
               " Add"
             ]
           }
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(s) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        b(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         ne.Children.toArray(
-          C(s, (h, g) => {
-            const f = s.length > 0 && g < s.length - 1;
+          C(l, (h, x) => {
+            const f = l.length > 0 && x < l.length - 1;
             return /* @__PURE__ */ e.jsx(
-              pl,
+              us,
               {
                 item: h,
-                index: g,
+                index: x,
                 canDelete: f,
-                onChange: x,
-                onRemove: () => u(g)
+                onChange: g,
+                onRemove: () => p(x)
               }
             );
           })
@@ -2077,11 +2083,11 @@ const el = (t) => {
     ] }) })
   ] });
 };
-function xl() {
-  const [t, l] = Qe(), { flexChild: r, gridChild: s } = hr(), [, n] = Br(mr), { t: a } = Ye(), [d] = Ne();
+function gs() {
+  const [t, s] = Qe(), { flexChild: r, gridChild: l } = mr(), [, o] = Ar(yr), { t: n } = Ye(), [d] = Te();
   return b(d) ? /* @__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(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
+    /* @__PURE__ */ e.jsx("h1", { children: n("no_styling_block_selected") }),
     /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
       "Hint: Styling allowed blocks are highlighted with",
       " ",
@@ -2090,12 +2096,12 @@ function xl() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => n(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-        /* @__PURE__ */ e.jsx(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(yr, { defaultValue: t, onValueChange: (i) => l(i), children: [
-          /* @__PURE__ */ e.jsx(br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(vr, { children: [
+        /* @__PURE__ */ e.jsx(Se, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+        /* @__PURE__ */ e.jsxs(br, { defaultValue: t, onValueChange: (i) => s(i), children: [
+          /* @__PURE__ */ e.jsx(fr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(vr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(jr, { children: [
             /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
             /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
@@ -2111,19 +2117,19 @@ function xl() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(jr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+      /* @__PURE__ */ e.jsxs(wr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
         /* @__PURE__ */ e.jsxs(Ge, { defaultValue: ["Layout"], type: "multiple", className: "h-full w-full", children: [
-          r && /* @__PURE__ */ e.jsx(me, { section: Xr }),
-          s ? /* @__PURE__ */ e.jsx(me, { section: Zr }) : null,
-          zr.map((i) => /* @__PURE__ */ e.jsx(me, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
+          r && /* @__PURE__ */ e.jsx(ye, { section: Zr }),
+          l ? /* @__PURE__ */ e.jsx(ye, { section: zr }) : null,
+          Ur.map((i) => /* @__PURE__ */ e.jsx(ye, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(xs, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const gl = {
+const hs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2134,32 +2140,32 @@ const gl = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, ks = () => {
-  const t = G(), { t: l } = Ye(), [r, s] = I.useState(""), [n, a] = I.useState({
-    onDrag: (o) => o,
-    onDragEnd: (o) => o,
+}, Nl = () => {
+  const t = G(), { t: s } = Ye(), [r, l] = I.useState(""), [o, n] = I.useState({
+    onDrag: (a) => a,
+    onDragEnd: (a) => a,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = ye(
-    (o) => {
-      const u = !p(n, "negative", !1), x = p(n, "cssProperty", "");
-      let c = parseFloat(n.dragStartValue);
+  }), d = be(
+    (a) => {
+      const p = !u(o, "negative", !1), g = u(o, "cssProperty", "");
+      let c = parseFloat(o.dragStartValue);
       c = _e(c) ? 0 : c;
-      let m = gl[n.dragUnit];
-      (z(x, "scale") || x === "opacity") && (m = 10);
-      let g = (n.dragStartY - o.pageY) / m + c;
-      u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), n.onDrag(`${g}`), s(`${g}`);
+      let m = hs[o.dragUnit];
+      (z(g, "scale") || g === "opacity") && (m = 10);
+      let x = (o.dragStartY - a.pageY) / m + c;
+      p && x < 0 && (x = 0), g === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
     },
-    [n],
+    [o],
     50
   ), i = A(() => {
-    setTimeout(() => n.onDragEnd(`${r}`), 100), a({
-      onDrag: (o) => o,
-      onDragEnd: (o) => o,
+    setTimeout(() => o.onDragEnd(`${r}`), 100), n({
+      onDrag: (a) => a,
+      onDragEnd: (a) => a,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2167,12 +2173,12 @@ const gl = {
       negative: !1,
       cssProperty: ""
     });
-  }, [n, r, a]);
+  }, [o, r, n]);
   return wt(t) ? /* @__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(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: a }, children: [
-    n.dragging ? /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: n }, children: [
+    o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2180,23 +2186,23 @@ const gl = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(wr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(Cr, { className: "mx-1 grid grid-cols-2", children: [
-        /* @__PURE__ */ e.jsx(Be, { value: "settings", children: "Settings" }),
-        /* @__PURE__ */ e.jsx(Be, { value: "styling", children: "Styling" })
+    /* @__PURE__ */ e.jsxs(Cr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(kr, { className: "mx-1 grid grid-cols-2", children: [
+        /* @__PURE__ */ e.jsx(Ae, { value: "settings", children: "Settings" }),
+        /* @__PURE__ */ e.jsx(Ae, { value: "styling", children: "Styling" })
       ] }),
       /* @__PURE__ */ e.jsx(
-        Ae,
+        De,
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(Yr, {})
+          children: /* @__PURE__ */ e.jsx(Wr, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(Ae, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })
+      /* @__PURE__ */ e.jsx(De, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(gs, {}) })
     ] })
   ] }) });
 };
 export {
-  ks as default
+  Nl as default
 };