@chaibuilder/sdk 1.2.26 → 1.2.28

package/dist/{Settings-4s2LUVmC.js → Settings-dnO-s6x0.js}

@@ -1,28 +1,29 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as de from "react";
-import $, { useState as w, useMemo as _, useEffect as L, useCallback as V, memo as mt, createContext as Ke, useContext as oe } from "react";
+import $, { useState as w, useMemo as _, useEffect as L, useCallback as H, memo as bt, createContext as Ke, useContext as ae } from "react";
 import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as Re, isArray as pe, omit as bt, truncate as ft, includes as M, get as x, first as ae, split as vt, startCase as E, toLower as le, isEmpty as b, map as k, find as jt, last as wt, filter as ve, set as Ge, debounce as Ct, keys as je, cloneDeep as kt, each as Nt, capitalize as we, reject as _t, nth as $e, startsWith as G, isNumber as Tt, parseInt as St, isNaN as qe, findLast as Rt, flatten as q, intersection as Je, has as ce, kebabCase as Vt, isNull as Ht } from "lodash-es";
+import { forEach as Re, isArray as ue, omit as ft, truncate as vt, includes as M, get as g, first as oe, split as jt, startCase as E, toLower as le, isEmpty as b, map as k, find as Ge, last as wt, filter as ve, set as qe, debounce as Ct, keys as je, cloneDeep as kt, each as Nt, capitalize as we, reject as _t, nth as $e, startsWith as W, isNumber as St, parseInt as Tt, isNaN as Je, findLast as Rt, flatten as q, intersection as Qe, has as ce, kebabCase as Vt, isNull as Ht } from "lodash-es";
 import { useTranslation as z } from "react-i18next";
-import { PlusIcon as Ve, Cross2Icon as Qe, EyeOpenIcon as Dt, EyeClosedIcon as Ae, BorderAllIcon as A, WidthIcon as S, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as Bt, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as It, ArrowBottomLeftIcon as $t, AlignLeftIcon as At, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Et, StretchHorizontallyIcon as Lt, FontItalicIcon as Ot, UnderlineIcon as Ft, OverlineIcon as Yt, LetterCaseUppercaseIcon as zt, Cross1Icon as Xt, InfoCircledIcon as He, MinusIcon as Zt, BoxIcon as et, RowSpacingIcon as Wt, TriangleDownIcon as Ut, CrossCircledIcon as Kt, CaretDownIcon as Gt, MixerHorizontalIcon as tt } from "@radix-ui/react-icons";
-import { aV as qt, aW as Jt, B as U, aX as Qt, aY as er, aZ as tr, a_ as rr, a$ as sr, b0 as lr, b1 as or, a1 as K, af as ar, ag as nr, ah as ir, b2 as dr, ad as cr, ao as pr, ae as ur, ap as O, aq as F, ar as Y, b3 as xr, b4 as gr, b5 as hr, b6 as yr, b7 as mr, b8 as br, a6 as rt, a5 as st, h as fr, b9 as lt, ba as Ce, bb as ke, bc as Ne, ac as ue, M as De, _ as ot, r as at, aB as nt, bd as _e, v as vr, be as jr, $ as xe, V as wr, a4 as it, N as Me, aG as Cr, aH as kr, aI as Nr, bf as Be, aJ as Ee, aK as Le, bg as Oe, bh as Fe, bi as Ye, a7 as _r, aj as Tr, ak as Sr, al as Rr, am as Vr, an as H, au as Hr, av as Dr, aw as he, ax as ye } from "./index-Gk6sASBd.js";
-import { u as Br } from "./controls-OfJWSEqC.js";
-import { Check as Pr, EditIcon as Ir, TrashIcon as $r, BrushIcon as Ar, DeleteIcon as Mr } from "lucide-react";
-import { getBlockComponent as Pe, getChaiDataProviders as Er, useGlobalStylingPresets as Lr } from "@chaibuilder/runtime";
-import { E as dt, u as ct } from "./index-SkyM3d6Q.js";
-import { J as Or, a as Fr, d as Yr } from "./index-e0c8PmRQ.js";
-import zr from "@rjsf/core";
-import Xr from "@rjsf/validator-ajv8";
-import Zr from "react-autosuggest";
-import Wr from "fuse.js";
-import { A as Ur, C as ge, g as Kr } from "./Class-lGzsNBOK.js";
-import { a as Gr } from "./STRINGS--j49GZJP.js";
+import { PlusIcon as Ve, Cross2Icon as et, EyeOpenIcon as Dt, EyeClosedIcon as Ae, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as Bt, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as It, ArrowBottomLeftIcon as $t, AlignLeftIcon as At, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Et, StretchHorizontallyIcon as Lt, FontItalicIcon as Ot, UnderlineIcon as Ft, OverlineIcon as Yt, LetterCaseUppercaseIcon as zt, Cross1Icon as Xt, InfoCircledIcon as He, MinusIcon as Zt, BoxIcon as tt, RowSpacingIcon as Wt, TriangleDownIcon as Ut, CrossCircledIcon as Kt, CaretDownIcon as Gt, MixerHorizontalIcon as rt } from "@radix-ui/react-icons";
+import { aW as qt, aX as Jt, B as K, aY as Qt, aZ as er, a_ as tr, a$ as rr, b0 as sr, b1 as lr, b2 as ar, a1 as G, af as or, ag as nr, ah as ir, b3 as dr, ad as cr, ao as pr, ae as ur, ap as O, aq as F, ar as Y, b4 as xr, b5 as gr, b6 as hr, b7 as yr, b8 as mr, b9 as br, ba as fr, a6 as st, a5 as lt, h as vr, bb as at, bc as Ce, bd as ke, be as Ne, ac as xe, M as De, _ as ot, r as nt, aB as it, bf as _e, v as jr, bg as wr, $ as ge, V as Cr, a4 as dt, N as Me, aG as kr, aH as Nr, aI as _r, bh as Be, aJ as Ee, aK as Le, bi as Oe, bj as Fe, bk as Ye, a7 as Sr, bl as Tr, aj as Rr, ak as Vr, al as Hr, am as Dr, an as V, bm as Br, au as Pr, av as Ir, aw as ye, ax as me } from "./index-UHaqEdws.js";
+import { u as $r } from "./controls-OfJWSEqC.js";
+import { Check as Ar, EditIcon as Mr, TrashIcon as Er, BrushIcon as Lr, DeleteIcon as Or } from "lucide-react";
+import { getBlockComponent as Pe, getChaiDataProviders as Fr, useGlobalStylingPresets as Yr } from "@chaibuilder/runtime";
+import { E as ct, u as pt } from "./index-0QJwevON.js";
+import { J as zr, a as Xr, d as Zr } from "./index-e0c8PmRQ.js";
+import Wr from "@rjsf/core";
+import Ur from "@rjsf/validator-ajv8";
+import { u as Kr } from "./useCanvasSettings-R6br4J9i.js";
+import Gr from "react-autosuggest";
+import qr from "fuse.js";
+import { A as Jr, C as he, g as Qr } from "./Class-6Hz2KzYb.js";
+import { a as es } from "./STRINGS--j49GZJP.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "./Functions-7jnEwJyw.js";
 import "clsx";
 import "tailwind-merge";
 import "jotai";
-import "./MODIFIERS-dytZ-osO.js";
+import "./MODIFIERS-cBT31iqE.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -50,29 +51,29 @@ import "i18next";
 import "@floating-ui/react-dom";
 import "flagged";
 import "react-hotkeys-hook";
-function qr(r) {
-  const s = [], t = {};
-  function d(l, n) {
-    Re(n, (o, p) => {
-      const i = l ? `${l}.${p}` : p, c = pe(o) ? "list" : typeof o;
-      s.push(i), t[i] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !pe(o) && d(i, o);
+function ts(r) {
+  const l = [], t = {};
+  function i(s, n) {
+    Re(n, (a, d) => {
+      const o = s ? `${s}.${d}` : d, c = ue(a) ? "list" : typeof a;
+      l.push(o), t[o] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !ue(a) && i(o, a);
     });
   }
-  return d("", bt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
+  return i("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
 }
-const Te = ({ data: r, fullView: s }) => {
+const Se = ({ data: r, fullView: l }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return s ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return l ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsx(
-      Or,
+    /* @__PURE__ */ e.jsx(ct, { children: /* @__PURE__ */ e.jsx(
+      zr,
       {
         data: r,
-        shouldExpandNode: Fr,
+        shouldExpandNode: Xr,
         style: {
-          ...Yr,
+          ...Zr,
           container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
           stringValue: "text-orange-600",
           label: "text-green-900 font-semibold pr-1 tracking-wider"
@@ -82,35 +83,35 @@ const Te = ({ data: r, fullView: s }) => {
   ] }) : /* @__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: ft(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+  ] }) : /* @__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 }) });
 }, ze = ({
   type: r,
-  value: s = "",
+  value: l = "",
   setValue: t,
-  data: d,
-  onChange: l,
+  data: i,
+  onChange: s,
   dataType: n,
-  appliedBindings: o
+  appliedBindings: a
 }) => {
-  const { paths: p, pathsType: i } = qr(d), c = r === "PROP" ? Pe(d == null ? void 0 : d._type) : {}, h = r === "PROP", [a, g] = w(!1), y = _(() => r === "PROP" ? p.filter(
-    (u) => !M(o, u) && x(c, `props.${ae(vt(u, "."))}.binding`)
-  ) : p.filter((u) => n === x(i, u, "")), [r, p, o, n, c]);
+  const { paths: d, pathsType: o } = ts(i), c = r === "PROP" ? Pe(i == null ? void 0 : i._type) : {}, h = r === "PROP", [p, x] = w(!1), y = _(() => r === "PROP" ? d.filter(
+    (u) => !M(a, u) && g(c, `props.${oe(jt(u, "."))}.binding`)
+  ) : d.filter((u) => n === g(o, u, "")), [r, d, a, n, c]);
   return L(() => {
-    s && l(s);
-  }, [s, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    l && s(l);
+  }, [l, 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: E(le(r)) }),
-      /* @__PURE__ */ e.jsxs(qt, { open: a, onOpenChange: g, children: [
+      /* @__PURE__ */ e.jsxs(qt, { open: p, onOpenChange: x, children: [
         /* @__PURE__ */ e.jsx(Jt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          U,
+          K,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${b(s) ? "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: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${b(l) ? "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: l ? /* @__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: E(n) }),
-                s
+                l
               ] }),
               /* @__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: [
@@ -124,19 +125,19 @@ const Te = ({ data: r, fullView: s }) => {
           /* @__PURE__ */ e.jsxs(rr, { children: [
             /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
             /* @__PURE__ */ e.jsx(lr, { children: k(y, (u) => /* @__PURE__ */ e.jsxs(
-              or,
+              ar,
               {
                 value: u,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
-                  t(jt(y, (j) => j === f) || null), g(!1);
+                  t(Ge(y, (j) => j === f) || null), x(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Pr, { className: `h-4 w-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Ar, { className: `h-4 w-4 text-green-500 ${l === u ? "" : "opacity-0"}` }),
                     u
                   ] }),
-                  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: E(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Te, { data: x(d, u) }) })
+                  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: E(g(o, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Se, { data: g(i, u) }) })
                 ]
               },
               u
@@ -145,30 +146,30 @@ const Te = ({ data: r, fullView: s }) => {
         ] }) })
       ] })
     ] }),
-    !h && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Te, { data: x(d, s, ""), fullView: !0 }) })
+    !h && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Se, { data: g(i, l, ""), fullView: !0 }) })
   ] });
-}, Jr = ({
+}, rs = ({
   appliedBindings: r = [],
-  onAddBinding: s,
+  onAddBinding: l,
   editMode: t,
-  item: d
+  item: i
 }) => {
-  const [l, n] = w(t ? d.key : ""), [o, p] = w(t ? d.value : ""), i = K(), [c] = ct(), h = V(
+  const [s, n] = w(t ? i.key : ""), [a, d] = w(t ? i.value : ""), o = G(), [c] = pt(), h = H(
     (y, u) => {
       if (b(y))
         return "";
       {
-        const f = x(u === "PROP" ? i : c, y, "");
-        if (pe(f))
+        const f = g(u === "PROP" ? o : c, y, "");
+        if (ue(f))
           return "list";
         const j = typeof f;
         return j === "string" ? "text" : j === "object" ? "model" : j;
       }
     },
-    [i, c]
-  ), [a, g] = w(t ? h(d.key, "PROP") : "");
+    [o, c]
+  ), [p, x] = w(t ? h(i.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(ar, { children: [
+    /* @__PURE__ */ e.jsxs(or, { 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." })
     ] }),
@@ -179,14 +180,14 @@ const Te = ({ data: r, fullView: s }) => {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: l,
+          value: s,
           setValue: n,
           onChange: (y) => {
             const u = h(y, "PROP");
-            n(y), a !== u && p(""), g(u);
+            n(y), p !== u && d(""), x(u);
           },
-          data: i,
-          dataType: a,
+          data: o,
+          dataType: p,
           appliedBindings: r
         }
       ),
@@ -195,166 +196,166 @@ const Te = ({ data: r, fullView: s }) => {
         ze,
         {
           type: "PATH",
-          isDisabled: b(l),
+          isDisabled: b(s),
           placeholder: "Enter data path",
-          value: o,
-          setValue: p,
+          value: a,
+          setValue: d,
           onChange: (y) => {
             const u = h(y, "PATH");
-            p(a === u ? y : "");
+            d(p === u ? y : "");
           },
           data: c,
-          dataType: a,
+          dataType: p,
           appliedBindings: r
         }
       )
     ] }),
     /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
-      U,
+      K,
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(l) && b(o),
-        onClick: () => s({ key: l, value: o }),
+        disabled: b(s) && b(a),
+        onClick: () => l({ key: s, value: a }),
         children: "Save"
       }
     ) })
   ] });
-}, pt = ({ disabled: r, children: s, onAddBinding: t, appliedBindings: d, editMode: l = !0, item: n = {} }) => {
-  const [o, p] = w(!1);
+}, ut = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: i, editMode: s = !0, item: n = {} }) => {
+  const [a, d] = w(!1);
   return /* @__PURE__ */ e.jsxs(cr, { children: [
-    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => p(!0), children: s }),
-    o && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
-      Jr,
+    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => d(!0), children: l }),
+    a && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
+      rs,
       {
         item: n,
-        editMode: l,
-        appliedBindings: d,
-        onAddBinding: (i) => {
-          t(i), p(!1);
+        editMode: s,
+        appliedBindings: i,
+        onAddBinding: (o) => {
+          t(o), d(!1);
         }
       }
     ) })
   ] });
-}, Qr = ({
+}, ss = ({
   item: r,
-  onAddBinding: s,
+  onAddBinding: l,
   onRemove: t,
-  selectedBlock: d,
-  dataProvider: l,
+  selectedBlock: i,
+  dataProvider: s,
   appliedBindings: n
 }) => {
-  const [o, p] = w("string"), i = (c, h) => {
+  const [a, d] = w("string"), o = (c, h) => {
     if (b(c))
       return "";
     {
-      const a = x(h === "PROP" ? d : l, c, "");
-      if (pe(a))
+      const p = g(h === "PROP" ? i : s, c, "");
+      if (ue(p))
         return "list";
-      const g = typeof a;
-      return g === "string" ? "text" : g === "object" ? "model" : g;
+      const x = typeof p;
+      return x === "string" ? "text" : x === "object" ? "model" : x;
     }
   };
-  return L(() => p(() => i(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return L(() => d(() => o(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(Te, { data: x(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(Se, { data: g(s, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: s, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Ir, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
+      /* @__PURE__ */ e.jsx(ut, { editMode: !0, onAddBinding: l, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Mr, { 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(
-        $r,
+        Er,
         {
           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"
         }
       )
     ] }),
-    !b(o) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: E(o) })
+    !b(a) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: E(a) })
   ] });
-}, es = ({ bindingData: r, onChange: s }) => {
-  const t = K(), [d] = ct(), l = Er(), [n, o] = w(
-    k(r, (a, g) => ({ key: g, value: a }))
+}, ls = ({ bindingData: r, onChange: l }) => {
+  const t = G(), [i] = pt(), s = Fr(), [n, a] = w(
+    k(r, (p, x) => ({ key: x, value: p }))
   );
   L(() => {
-    o(k(r, (a, g) => ({ key: g, value: a })));
+    a(k(r, (p, x) => ({ key: x, value: p })));
   }, [t == null ? void 0 : t._id, r]);
-  const p = _(() => {
-    if (b(d))
+  const d = _(() => {
+    if (b(i))
       return !0;
     if (b(n))
       return !1;
-    const a = wt(n);
-    return b(a == null ? void 0 : a.key) || b(a == null ? void 0 : a.value);
-  }, [d, n]), i = (a) => {
-    const g = ve(n, (y) => y.key !== a.key);
-    o([...g, a]), h([...g, a]);
-  }, c = (a) => {
-    const g = ve(n, (y, u) => a !== u);
-    h([...g]);
-  }, h = V(
-    (a = []) => {
-      if (o(a), b(a)) {
-        s({});
+    const p = wt(n);
+    return b(p == null ? void 0 : p.key) || b(p == null ? void 0 : p.value);
+  }, [i, n]), o = (p) => {
+    const x = ve(n, (y) => y.key !== p.key);
+    a([...x, p]), h([...x, p]);
+  }, c = (p) => {
+    const x = ve(n, (y, u) => p !== u);
+    h([...x]);
+  }, h = H(
+    (p = []) => {
+      if (a(p), b(p)) {
+        l({});
         return;
       }
-      const g = {};
-      Re(a, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && Ge(g, y.key, y.value);
-      }), s(g);
+      const x = {};
+      Re(p, (y) => {
+        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && qe(x, y.key, y.value);
+      }), l(x);
     },
-    [s]
+    [l]
   );
-  return b(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
+  return b(s) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    k(n, (a, g) => /* @__PURE__ */ e.jsx(
-      Qr,
+    k(n, (p, x) => /* @__PURE__ */ e.jsx(
+      ss,
       {
-        item: a,
-        onAddBinding: i,
-        onRemove: () => c(g),
+        item: p,
+        onAddBinding: o,
+        onRemove: () => c(x),
         selectedBlock: t,
-        dataProvider: d,
+        dataProvider: i,
         appliedBindings: k(n, "key")
       },
-      a.key
+      p.key
     )),
     /* @__PURE__ */ e.jsxs(O, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(F, { disabled: b(d), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        pt,
+      /* @__PURE__ */ e.jsx(F, { disabled: b(i), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        ut,
         {
-          disabled: p,
+          disabled: d,
           appliedBindings: k(n, "key"),
-          onAddBinding: i,
+          onAddBinding: o,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
-              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${p ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(d) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${d ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: b(i) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      p && /* @__PURE__ */ e.jsx(Y, { sideOffset: -55, className: "text-[11px]", children: b(d) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      d && /* @__PURE__ */ e.jsx(Y, { sideOffset: -55, className: "text-[11px]", children: b(i) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, ts = () => /* @__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 = mt(({ id: r, properties: s, formData: t, onChange: d }) => {
-  const [l, n] = w(t), o = { type: "object", properties: {} }, p = {};
-  return Object.keys(s).forEach((i) => {
-    const c = s[i];
+}, as = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), pe = bt(({ id: r, properties: l, formData: t, onChange: i }) => {
+  const [s, n] = w(t), a = { type: "object", properties: {} }, d = {};
+  return Object.keys(l).forEach((o) => {
+    const c = l[o];
     if (M(["slot", "styles"], c.type))
       return;
-    const h = i;
-    o.properties[h] = xr(c), p[h] = gr(c);
+    const h = o;
+    a.properties[h] = xr(c), d[h] = gr(c);
   }), L(() => {
     n(t);
   }, [r]), /* @__PURE__ */ e.jsx(
-    zr,
+    Wr,
     {
       widgets: {
-        binding: ts,
+        binding: as,
         richtext: hr,
         icon: yr,
         image: mr
@@ -365,61 +366,84 @@ const Te = ({ data: r, fullView: s }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Xr,
-      uiSchema: p,
-      schema: o,
-      formData: l,
-      onChange: ({ formData: i }, c) => {
-        c && (n(i), d({ formData: i }, c));
+      validator: Ur,
+      uiSchema: d,
+      schema: a,
+      formData: s,
+      onChange: ({ formData: o }, c) => {
+        c && (n(o), i({ formData: o }, c));
       }
     }
   );
-});
-function rs() {
-  const r = K(), s = rt(), t = st(), d = Pe(r._type), l = { ...r }, [n, o] = w(l), p = fr("dataBindingSupport", !1), i = ({ formData: u }, f, j) => {
+}), os = () => {
+  const [r, l] = Kr(), t = fr(), i = (a, d) => {
+    l((o) => ({ ...o, [a]: d }));
+  };
+  if (b(t))
+    return null;
+  const { block: s, settings: n } = t;
+  return /* @__PURE__ */ e.jsxs("div", { className: "text-xs hover:no-underline", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2 bg-gray-100 px-4 py-2", children: [
+      t.block._type,
+      " settings"
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "bg-white pb-2", children: /* @__PURE__ */ e.jsx(
+      pe,
+      {
+        id: s == null ? void 0 : s._id,
+        onChange: ({ formData: a }) => i(s._id, a),
+        formData: g(r, s._id, {}),
+        properties: n
+      }
+    ) })
+  ] });
+};
+function ns() {
+  const r = G(), l = st(), t = lt(), i = Pe(r._type), s = { ...r }, [n, a] = w(s), d = vr("dataBindingSupport", !1), o = ({ formData: u }, f, j) => {
     if (f && (n == null ? void 0 : n._id) === r._id) {
       const B = f.replace("root.", "");
-      t([r._id], { [B]: x(u, B) }, j);
+      t([r._id], { [B]: g(u, B) }, j);
     }
-  }, c = V(
+  }, c = H(
     Ct(({ formData: u }, f, j) => {
-      i({ formData: u }, f, j), o(u);
+      o({ formData: u }, f, j), a(u);
     }, 1500),
     [r == null ? void 0 : r._id]
   ), h = ({ formData: u }, f) => {
     if (f) {
       const j = f.replace("root.", "");
-      s([r._id], { [j]: x(u, j) }), c({ formData: u }, f, { [j]: x(n, j) });
+      l([r._id], { [j]: g(u, j) }), c({ formData: u }, f, { [j]: g(n, j) });
     }
-  }, a = {
-    _name: Br({
+  }, p = {
+    _name: $r({
       title: "Name",
-      default: x(r, "_name", r._type)
+      default: g(r, "_name", r._type)
     })
-  }, g = je(x(l, "_bindings", {})), y = _(() => {
-    const u = kt(x(d, "props", {}));
-    return p && Nt(g, (f) => delete u[f]), u;
-  }, [d, g, p]);
+  }, x = je(g(s, "_bindings", {})), y = _(() => {
+    const u = kt(g(i, "props", {}));
+    return d && Nt(x, (f) => delete u[f]), u;
+  }, [i, x, d]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(me, { id: r == null ? void 0 : r._id, onChange: h, formData: l, properties: a }),
+    /* @__PURE__ */ e.jsx(pe, { id: r == null ? void 0 : r._id, onChange: h, formData: s, properties: p }),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    p ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+    /* @__PURE__ */ e.jsx(os, {}),
+    d ? /* @__PURE__ */ e.jsxs(at, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(Ce, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(ke, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${b(x(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${b(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(Ne, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          es,
+          ls,
           {
-            bindingData: x(r, "_bindings", {}),
+            bindingData: g(r, "_bindings", {}),
             onChange: (u) => {
-              i({ formData: { _bindings: u } }, "root._bindings");
+              o({ formData: { _bindings: u } }, "root._bindings");
             }
           }
         ) })
@@ -430,61 +454,61 @@ function rs() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(Ne, { className: "pt-4", children: [
-          b(g) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
+          b(x) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: k(g, we).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: k(x, we).join(", ") }),
             " ",
-            g.length === 1 ? "property" : "properties",
+            x.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            me,
+            pe,
             {
               id: r == null ? void 0 : r._id,
               onChange: h,
-              formData: l,
+              formData: s,
               properties: y
             }
           )
         ] })
       ] })
     ] }) : /* @__PURE__ */ e.jsx(
-      me,
+      pe,
       {
         id: r == null ? void 0 : r._id,
         onChange: h,
-        formData: l,
+        formData: s,
         properties: y
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Xe = new Wr(Ur, {
+const Xe = new qr(Jr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function ss() {
+function is() {
   var B;
-  const [r] = ue(), s = K(), t = De(), d = ot(), [l] = at(), [n, o] = w(""), p = (B = ae(r)) == null ? void 0 : B.prop, i = _t((x(s, p, "").replace(Gr, "").split(",").pop() || "").split(" "), b), c = () => {
+  const [r] = xe(), l = G(), t = De(), i = ot(), [s] = nt(), [n, a] = w(""), d = (B = oe(r)) == null ? void 0 : B.prop, o = _t((g(l, d, "").replace(es, "").split(",").pop() || "").split(" "), b), c = () => {
     const C = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(l, C, !0), o("");
-  }, [h, a] = w([]), g = ({ value: C }) => {
+    t(s, C, !0), a("");
+  }, [h, p] = w([]), x = ({ value: C }) => {
     const I = C.trim().toLowerCase(), X = I.match(/.+:/g);
     let N = [];
     if (X && X.length > 0) {
-      const [P] = X, W = I.replace(P, "");
-      N = Xe.search(W).map((m) => ({
+      const [P] = X, U = I.replace(P, "");
+      N = Xe.search(U).map((m) => ({
         ...m,
         item: { ...m.item, name: P + m.item.name }
       }));
     } else
       N = Xe.search(I);
-    a(k(N, "item"));
+    p(k(N, "item"));
   }, y = () => {
-    a([]);
+    p([]);
   }, u = (C) => C.name, f = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), j = {
     autoComplete: "off",
     autoCorrect: "off",
@@ -495,7 +519,7 @@ function ss() {
     onKeyDown: (C) => {
       C.key === "Enter" && n.trim() !== "" && c();
     },
-    onChange: (C, { newValue: I }) => o(I),
+    onChange: (C, { newValue: I }) => a(I),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   };
   return /* @__PURE__ */ e.jsxs(
@@ -503,13 +527,13 @@ function ss() {
     {
       className: `no-scrollbar flex ${h.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(nt, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(it, { 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(
-            Zr,
+            Gr,
             {
               suggestions: h,
-              onSuggestionsFetchRequested: g,
+              onSuggestionsFetchRequested: x,
               onSuggestionsClearRequested: y,
               getSuggestionValue: u,
               renderSuggestion: f,
@@ -525,7 +549,7 @@ function ss() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            U,
+            K,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
@@ -537,18 +561,18 @@ function ss() {
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(i) && /* @__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(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" }),
           de.Children.toArray(
-            i.map((C) => /* @__PURE__ */ e.jsxs(
+            o.map((C) => /* @__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",
                 children: [
                   C,
                   /* @__PURE__ */ e.jsx(
-                    Qe,
+                    et,
                     {
-                      onClick: () => d(l, [C]),
+                      onClick: () => i(s, [C]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -562,7 +586,7 @@ function ss() {
     }
   );
 }
-const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
+const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: D, property: "flexBasis" },
@@ -571,7 +595,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, os = {
+}, cs = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -582,7 +606,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, as = [
+}, ps = [
   {
     heading: "layout.heading",
     items: [
@@ -984,9 +1008,9 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: ss }]
+    items: [{ component: is }]
   }
-], ut = {
+], xt = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
   visible: Dt,
@@ -994,32 +1018,32 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   // display
   hidden: Ae,
   gap: A,
-  gapX: S,
+  gapX: T,
   gapY: R,
-  spaceX: S,
+  spaceX: T,
   spaceY: R,
   overscroll: A,
-  overscrollX: S,
+  overscrollX: T,
   overscrollY: R,
   overflow: A,
-  overflowX: S,
+  overflowX: T,
   overflowY: R,
   top: ee,
   right: te,
   bottom: re,
   left: se,
   inset: A,
-  insetX: S,
+  insetX: T,
   insetY: R,
   border: A,
-  borderX: S,
+  borderX: T,
   borderY: R,
   borderTop: ee,
   borderRight: te,
   borderBottom: re,
   borderLeft: se,
   borderRadius: A,
-  borderRadiusX: S,
+  borderRadiusX: T,
   borderRadiusY: R,
   borderRadiusTop: ee,
   borderRadiusRight: te,
@@ -1029,18 +1053,18 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   borderRadiusTopRight: Pt,
   borderRadiusBottomRight: It,
   borderRadiusBottomLeft: $t,
-  divideXWidth: S,
+  divideXWidth: T,
   divideYWidth: R,
   scale: A,
-  scaleX: S,
+  scaleX: T,
   scaleY: R,
-  skewX: S,
+  skewX: T,
   skewY: R,
-  translateX: S,
+  translateX: T,
   translateY: R,
   // padding
   padding: A,
-  paddingX: S,
+  paddingX: T,
   paddingY: R,
   paddingTop: ee,
   paddingRight: te,
@@ -1048,7 +1072,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   paddingLeft: se,
   // margin
   margin: A,
-  marginX: S,
+  marginX: T,
   marginY: R,
   marginTop: ee,
   marginRight: te,
@@ -1107,7 +1131,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
       }
     )
   ] }),
-  "float-none": Qe,
+  "float-none": et,
   // position
   fixed: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
@@ -1180,100 +1204,100 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     )
   ] }),
   static: Xt
-}, ne = Ke({ canReset: !1, canChange: !0 }), ns = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
+}, ne = Ke({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: l = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(ne.Provider, { value: { canReset: s, canChange: t }, children: r })
-), xt = ({ label: r, property: s, onChange: t }) => {
-  const d = _(() => x(ge, `${s}.classes`, [""]), [s]), l = ie(s), n = _(() => x(l, "cls", ""), [l]), { canChange: o } = oe(ne), p = /\[.*\]/g.test(n);
-  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e.jsx(ne.Provider, { value: { canReset: l, canChange: t }, children: r })
+), gt = ({ label: r, property: l, onChange: t }) => {
+  const i = _(() => g(he, `${l}.classes`, [""]), [l]), s = ie(l), n = _(() => g(s, "cls", ""), [s]), { canChange: a } = ae(ne), d = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: d ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ e.jsx(_e, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(F, { 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(He, {}) }) }),
       /* @__PURE__ */ e.jsx(Y, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    Se,
+    Te,
     {
       rounded: r,
-      onChange: (i) => t(i, s),
+      onChange: (o) => t(o, l),
       selected: n,
-      options: d,
-      disabled: !o
+      options: i,
+      disabled: !a
     }
   ) });
 };
-function Se({ selected: r, onChange: s, rounded: t = !1, options: d, disabled: l = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: o, redo: p } = vr();
+function Te({ selected: r, onChange: l, rounded: t = !1, options: i, disabled: s = !1 }) {
+  const n = r.replace(/.*:/g, "").trim(), { undo: a, redo: d } = jr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !d.length || l,
+      disabled: !i.length || s,
       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: (i) => s(i.target.value),
-      onKeyDown: (i) => {
-        i.ctrlKey && (i.key === "z" && o(), i.key === "y" && p());
+      onChange: (o) => l(o.target.value),
+      onKeyDown: (o) => {
+        o.ctrlKey && (o.key === "z" && a(), o.key === "y" && d());
       },
       value: n,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         $.Children.toArray(
-          d.map((i) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: i, children: i }))
+          i.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
         )
       ]
     }
   );
 }
-const is = ({ property: r, onChange: s }) => {
-  const { canReset: t, canChange: d } = oe(ne), l = ie(r), n = _(() => x(l, "cls", ""), [l]), o = _(() => x(ge, `${r}.classes`, [""]), [r]), p = o.indexOf(n) > -1 ? o.indexOf(n) : 0, i = /\[.*\]/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: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const xs = ({ property: r, onChange: l }) => {
+  const { canReset: t, canChange: i } = ae(ne), s = ie(r), n = _(() => g(s, "cls", ""), [s]), a = _(() => g(he, `${r}.classes`, [""]), [r]), d = a.indexOf(n) > -1 ? a.indexOf(n) : 0, o = /\[.*\]/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: o ? /* @__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: !d && (!t || p - 1 < 0),
-        onClick: () => s($e(o, p - 1), r),
+        disabled: !i && (!t || d - 1 < 0),
+        onClick: () => l($e(a, d - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Zt,
           {
-            className: !d && (!t || p - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !i && (!t || d - 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(xt, { label: !1, property: r, onChange: s }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(gt, { label: !1, property: r, onChange: l }) }),
     /* @__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: !d && (!t || p + 1 >= o.length),
-        onClick: () => s($e(o, p + 1), r),
+        disabled: !i && (!t || d + 1 >= a.length),
+        onClick: () => l($e(a, d + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ve,
           {
-            className: !d && (!t || p + 1 >= o.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !i && (!t || d + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, ds = ({ property: r, onChange: s }) => {
-  const t = _(() => x(ge, `${r}.classes`, [""]), [r]), { canChange: d } = oe(ne), l = ie(r), n = _(() => x(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (o) => /* @__PURE__ */ e.jsxs(O, { children: [
+}, gs = ({ property: r, onChange: l }) => {
+  const t = _(() => g(he, `${r}.classes`, [""]), [r]), { canChange: i } = ae(ne), s = ie(r), n = _(() => g(s, "cls", ""), [s]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (a) => /* @__PURE__ */ e.jsxs(O, { children: [
     /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !d,
-        onClick: () => s(o, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === o ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(x(ut, o, et))
+        disabled: !i,
+        onClick: () => l(a, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(g(xt, a, tt))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(Y, { children: E(le(o)) })
+    /* @__PURE__ */ e.jsx(Y, { children: E(le(a)) })
   ] })) });
-}, cs = {
+}, hs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1285,39 +1309,39 @@ const is = ({ property: r, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, ps = ({ property: r, onChange: s }) => {
-  const t = ie(r), d = _(() => x(t, "cls", ""), [t]), { canChange: l } = oe(ne), [n, o] = w([]), [p, i] = w({ color: "", shade: "" }), c = d.split("-"), h = x(c, "1", ""), a = x(c, "2", ""), g = V(
+}, ys = ({ property: r, onChange: l }) => {
+  const t = ie(r), i = _(() => g(t, "cls", ""), [t]), { canChange: s } = ae(ne), [n, a] = w([]), [d, o] = w({ color: "", shade: "" }), c = i.split("-"), h = g(c, "1", ""), p = g(c, "2", ""), x = H(
     // eslint-disable-next-line no-shadow
     (u) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (o([]), i({ color: u })) : (o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (a([]), o({ color: u })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
     },
-    [o, i]
+    [a, o]
   );
   L(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
-      return o([]);
-    o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+      return a([]);
+    a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [h]);
-  const y = V(
+  const y = H(
     // eslint-disable-next-line no-shadow
     (u) => {
-      i({ color: h, shade: u });
+      o({ color: h, shade: u });
     },
     [h]
   );
   return L(() => {
-    i({ color: "", shade: "" });
+    o({ color: "", shade: "" });
   }, [t]), L(() => {
-    const f = `${x(cs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
-    f.match(new RegExp(x(ge, `${r}.regExp`, ""))) && s(f, r);
-  }, [p, s, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const f = `${g(hs, r, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    f.match(new RegExp(g(he, `${r}.regExp`, ""))) && l(f, r);
+  }, [d, l, 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(
-      Se,
+      Te,
       {
-        disabled: !l,
+        disabled: !s,
         rounded: !0,
         selected: h,
-        onChange: g,
+        onChange: x,
         options: [
           "current",
           "transparent",
@@ -1350,20 +1374,20 @@ const is = ({ property: r, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Se, { rounded: !0, selected: a, disabled: !h || !l, onChange: y, options: n }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Te, { rounded: !0, selected: p, disabled: !h || !s, onChange: y, options: n }) })
   ] });
-}, Ze = (r, s) => {
+}, Ze = (r, l) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && s.includes(t))
+  if ((t === "auto" || t === "none") && l.includes(t))
     return { value: "", unit: t };
-  const d = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(d, "");
-  const l = r.match(d), n = l && l.length > 1, o = !b(t) && Number.isNaN(Number(t));
-  return n || o ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
+  const i = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(i, "");
+  const s = r.match(i), n = s && s.length > 1, a = !b(t) && Number.isNaN(Number(t));
+  return n || a ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
 };
-const us = (r) => {
-  const s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const ms = (r) => {
+  const l = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1373,25 +1397,25 @@ const us = (r) => {
   if (t === "full")
     return { value: "100", unit: "%" };
   if (M(r, "skew-"))
-    return { value: `${s}${t}`, unit: "deg" };
+    return { value: `${l}${t}`, unit: "deg" };
   if (M(r, "rotate-"))
-    return { value: `${s}${t}`, unit: "deg" };
+    return { value: `${l}${t}`, unit: "deg" };
   if (M(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
   if (M(r, "duration-") || M(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
   if (M(r, "translate-") && !t.includes("/"))
-    return { value: `${s}${`${t / 4}`}`, unit: "rem" };
+    return { value: `${l}${`${t / 4}`}`, unit: "rem" };
   if (M(r, "scale-"))
-    return { value: `${s}${`${t / 100}`}`, unit: "-" };
-  if (G(r, "border")) {
-    const d = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (d)
-      return { value: d[0].split("-").pop(), unit: "px" };
+    return { value: `${l}${`${t / 100}`}`, unit: "-" };
+  if (W(r, "border")) {
+    const i = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (i)
+      return { value: i[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (G(r, "max-w-")) {
+  if (W(r, "max-w-")) {
     if (r === "max-w-screen-sm")
       return { value: "640", unit: "px" };
     if (r === "max-w-screen-md")
@@ -1427,7 +1451,7 @@ const us = (r) => {
     if (t === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (G(r, "text-")) {
+  if (W(r, "text-")) {
     if (t === "xs")
       return { value: "12", unit: "px" };
     if (t === "sm")
@@ -1455,7 +1479,7 @@ const us = (r) => {
     if (t === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (G(r, "leading-")) {
+  if (W(r, "leading-")) {
     if (t === "none")
       return { value: "1", unit: "-" };
     if (t === "tight")
@@ -1469,7 +1493,7 @@ const us = (r) => {
     if (t === "loose")
       return { value: "2", unit: "-" };
   }
-  if (G(r, "tracking-")) {
+  if (W(r, "tracking-")) {
     if (t === "tighter")
       return { value: "-0.05", unit: "em" };
     if (t === "tight")
@@ -1486,113 +1510,113 @@ const us = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [d, l] = k(t.split("/"), (n) => parseInt(n, 10));
-    return { value: s + (d / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [i, s] = k(t.split("/"), (n) => parseInt(n, 10));
+    return { value: l + (i / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Tt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return St(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const xs = (r) => {
+const bs = (r) => {
   if (b(r))
     return { value: "", unit: "" };
-  const s = r.match(/\[.*\]/g);
-  if (s === null)
-    return gs(r);
-  const t = x(s, "0", "").replace(/\[|\]/g, ""), d = r.startsWith("-") ? "-" : "", l = ae(t.match(/\d+.\d+|\d+/g));
-  return { value: `${d}${l}`, unit: t.replace(l, "") };
-}, gs = (r) => b(r) ? { value: "", unit: "" } : us(r), gt = $.createContext({
+  const l = r.match(/\[.*\]/g);
+  if (l === null)
+    return fs(r);
+  const t = g(l, "0", "").replace(/\[|\]/g, ""), i = r.startsWith("-") ? "-" : "", s = oe(t.match(/\d+.\d+|\d+/g));
+  return { value: `${i}${s}`, unit: t.replace(s, "") };
+}, fs = (r) => b(r) ? { value: "", unit: "" } : ms(r), ht = $.createContext({
   setDragData: () => {
   }
-}), hs = ({
+}), vs = ({
   unit: r,
-  currentValue: s,
+  currentValue: l,
   onDrag: t,
-  onDragEnd: d,
-  onDragStart: l,
+  onDragEnd: i,
+  onDragStart: s,
   negative: n,
-  cssProperty: o
+  cssProperty: a
 }) => {
-  const { setDragData: p } = oe(gt);
+  const { setDragData: d } = ae(ht);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (i) => {
+      onMouseDown: (o) => {
         const c = {
           onDrag: t,
-          onDragEnd: d,
+          onDragEnd: i,
           dragging: !0,
-          dragStartY: i.pageY,
-          dragStartValue: `${s}`,
+          dragStartY: o.pageY,
+          dragStartValue: `${l}`,
           dragUnit: r,
           negative: n,
-          cssProperty: o
+          cssProperty: a
         };
-        l(c), p(c);
+        s(c), d(c);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
       children: /* @__PURE__ */ e.jsx(Wt, {})
     }
   );
-}, ys = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((d) => /* @__PURE__ */ e.jsx(
-  U,
+}, js = ({ onSelect: r, current: l, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((i) => /* @__PURE__ */ e.jsx(
+  K,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: s === d ? "primary" : void 0,
+    color: l === i ? "primary" : void 0,
     size: "sm",
-    onClick: (l) => {
-      l.stopPropagation(), r(d);
+    onClick: (s) => {
+      s.stopPropagation(), r(i);
     },
-    children: d
+    children: i
   },
-  d
-)) }), We = 50, ms = (r) => {
-  const [s, t] = w(!1), [d, l] = w(""), { currentClass: n, onChange: o, classPrefix: p, cssProperty: i, units: c, negative: h } = r, [a, g] = w(i != null && i.toLowerCase().includes("width") ? "%" : c[0]), [y, u] = w(!1), [f, j] = w(""), [B, C] = w(!1), [I, X] = w(!1);
+  i
+)) }), We = 50, ws = (r) => {
+  const [l, t] = w(!1), [i, s] = w(""), { currentClass: n, onChange: a, classPrefix: d, cssProperty: o, units: c, negative: h } = r, [p, x] = w(o != null && o.toLowerCase().includes("width") ? "%" : c[0]), [y, u] = w(!1), [f, j] = w(""), [B, C] = w(!1), [I, X] = w(!1);
   L(() => {
-    const { value: m, unit: v } = xs(n);
+    const { value: m, unit: v } = bs(n);
     if (v === "") {
-      l(m), g(i != null && i.toLowerCase().includes("width") ? "%" : ae(c));
+      s(m), x(o != null && o.toLowerCase().includes("width") ? "%" : oe(c));
       return;
     }
-    g(v), l(v === "class" || b(m) ? "" : m);
-  }, [n, i, c]);
-  const N = fe((m) => o(m), [o], We), P = fe((m) => o(m, !1), [o], We), W = V(
+    x(v), s(v === "class" || b(m) ? "" : m);
+  }, [n, o, c]);
+  const N = fe((m) => a(m), [a], We), P = fe((m) => a(m, !1), [a], We), U = H(
     (m = !1) => {
-      const v = Ze(`${d}`, c);
-      if (x(v, "error", !1)) {
+      const v = Ze(`${i}`, c);
+      if (g(v, "error", !1)) {
         u(!0);
         return;
       }
-      const T = x(v, "unit") !== "" ? x(v, "unit") : a;
-      if (T === "auto" || T === "none") {
-        N(`${p}${T}`);
+      const S = g(v, "unit") !== "" ? g(v, "unit") : p;
+      if (S === "auto" || S === "none") {
+        N(`${d}${S}`);
         return;
       }
-      if (x(v, "value") === "")
+      if (g(v, "value") === "")
         return;
-      const Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       m ? P(Q) : N(Q);
     },
-    [N, P, d, a, p, c]
-  ), J = V(
+    [N, P, i, p, d, c]
+  ), J = H(
     (m) => {
-      const v = Ze(`${d}`, c);
-      if (x(v, "error", !1)) {
+      const v = Ze(`${i}`, c);
+      if (g(v, "error", !1)) {
         u(!0);
         return;
       }
       if (m === "auto" || m === "none") {
-        N(`${p}${m}`);
+        N(`${d}${m}`);
         return;
       }
-      if (x(v, "value") === "")
+      if (g(v, "value") === "")
         return;
-      const T = x(v, "unit") !== "" ? x(v, "unit") : m, Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const S = g(v, "unit") !== "" ? g(v, "unit") : m, Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(Q);
     },
-    [N, d, p, c]
+    [N, i, d, c]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: a === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: p === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(O, { children: [
       /* @__PURE__ */ e.jsx(F, { 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(He, {}) }) }),
@@ -1600,94 +1624,94 @@ const xs = (r) => {
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(a) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(p) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: a === "class",
+          readOnly: p === "class",
           onKeyPress: (m) => {
-            m.key === "Enter" && W();
+            m.key === "Enter" && U();
           },
           onKeyDown: (m) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
             m.preventDefault(), X(!0);
-            const v = St(m.target.value);
-            let T = qe(v) ? 0 : v;
-            m.keyCode === 38 && (T += 1), m.keyCode === 40 && (T -= 1);
-            const Z = `${T}`, yt = `${Z.startsWith("-") ? "-" : ""}${p}[${Z.replace("-", "")}${a === "-" ? "" : a}]`;
-            P(yt);
+            const v = Tt(m.target.value);
+            let S = Je(v) ? 0 : v;
+            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
+            const Z = `${S}`, mt = `${Z.startsWith("-") ? "-" : ""}${d}[${Z.replace("-", "")}${p === "-" ? "" : p}]`;
+            P(mt);
           },
           onKeyUp: (m) => {
             I && (m.preventDefault(), X(!1));
           },
-          onBlur: () => W(),
+          onBlur: () => U(),
           onChange: (m) => {
-            u(!1), l(m.target.value);
+            u(!1), s(m.target.value);
           },
           onClick: (m) => {
             var v;
             (v = m == null ? void 0 : m.target) == null || v.select(), t(!1);
           },
-          value: B ? f : d,
+          value: B ? f : i,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             y ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(O, { open: s, delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsxs(O, { open: l, delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!s),
+            onClick: () => t(!l),
             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 ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: a }),
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: p }),
               c.length > 1 ? /* @__PURE__ */ e.jsx(Ut, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(jr, { children: /* @__PURE__ */ e.jsx(Y, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ys,
+        /* @__PURE__ */ e.jsx(wr, { children: /* @__PURE__ */ e.jsx(Y, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          js,
           {
             units: c,
-            current: a,
+            current: p,
             onSelect: (m) => {
-              t(!1), g(m), J(m);
+              t(!1), x(m), J(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(a) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
-      hs,
+    ["none", "auto"].indexOf(p) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
+      vs,
       {
         onDragStart: () => C(!0),
         onDragEnd: (m) => {
           if (j(() => ""), C(!1), b(m))
             return;
-          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${p}[${v.replace("-", "")}${a === "-" ? "" : a}]`;
+          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
           N(Z);
         },
         onDrag: (m) => {
           if (b(m))
             return;
           j(m);
-          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${p}[${v.replace("-", "")}${a === "-" ? "" : a}]`;
+          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
           P(Z);
         },
-        currentValue: d,
-        unit: a,
+        currentValue: i,
+        unit: p,
         negative: h,
-        cssProperty: i
+        cssProperty: o
       }
     )
   ] }) }) });
 }, ie = (r) => {
-  const s = xe();
-  return Rt(s, { property: r });
-}, bs = (r, s) => {
+  const l = ge();
+  return Rt(l, { property: r });
+}, Cs = (r, l) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1696,8 +1720,8 @@ const xs = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[x(r, "mq", "xs")] <= t[s];
-}, fs = {
+  return t[g(r, "mq", "xs")] <= t[l];
+}, ks = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1770,23 +1794,23 @@ const xs = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, vs = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
-  const { t: s } = z(), { type: t = "icons", label: d, property: l, onEmitChange: n = () => {
-  }, units: o, negative: p = !1 } = r, [i] = wr(), [c] = it(), [, h] = Me(), a = ie(l), g = De(), y = ot(), [u] = at(), f = _(() => x(a, "fullCls", ""), [a]), j = V(
-    (P, W = !0) => {
-      const J = { dark: i, mq: h, mod: c, cls: P, property: l, fullCls: "" };
-      (i || c !== "") && (J.mq = "xs");
-      const m = Kr(J);
-      g(u, [m], W);
+}, Ns = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
+  const { t: l } = z(), { type: t = "icons", label: i, property: s, onEmitChange: n = () => {
+  }, units: a, negative: d = !1 } = r, [o] = Cr(), [c] = dt(), [, h] = Me(), p = ie(s), x = De(), y = ot(), [u] = nt(), f = _(() => g(p, "fullCls", ""), [p]), j = H(
+    (P, U = !0) => {
+      const J = { dark: o, mq: h, mod: c, cls: P, property: s, fullCls: "" };
+      (o || c !== "") && (J.mq = "xs");
+      const m = Qr(J);
+      x(u, [m], U);
     },
-    [u, i, h, c, l, g]
-  ), B = V(() => {
+    [u, o, h, c, s, x]
+  ), B = H(() => {
     y(u, [f]);
-  }, [u, f, y]), C = _(() => bs(a, h), [a, h]);
+  }, [u, f, y]), C = _(() => Cs(p, h), [p, h]);
   L(() => {
-    n(C, a);
-  }, [C, n, a]);
-  const [, , I] = Me(), X = V(
+    n(C, p);
+  }, [C, n, p]);
+  const [, , I] = Me(), X = H(
     (P) => {
       I({
         xs: 400,
@@ -1798,28 +1822,28 @@ const xs = (r) => {
       }[P]);
     },
     [I]
-  ), N = x(a, "dark", null) === i && x(a, "mod", null) === c && x(a, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(ns, { canChange: C, canReset: a && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${a && !N ? "text-foreground" : ""}`, children: s(d) }) }),
+  ), N = g(p, "dark", null) === o && g(p, "mod", null) === c && g(p, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(us, { canChange: C, canReset: p && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${p && !N ? "text-foreground" : ""}`, children: l(i) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ms,
+          ws,
           {
-            currentClass: x(a, "cls", ""),
-            classPrefix: x(fs, l, ""),
-            units: o || [],
+            currentClass: g(p, "cls", ""),
+            classPrefix: g(ks, s, ""),
+            units: a || [],
             onChange: j,
-            negative: p,
-            cssProperty: l
+            negative: d,
+            cssProperty: s
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(ds, { property: l, onChange: j }),
-        t === "range" && /* @__PURE__ */ e.jsx(is, { property: l, onChange: j }),
-        t === "color" && /* @__PURE__ */ e.jsx(ps, { property: l, onChange: j }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: d, property: l, onChange: j })
+        t === "icons" && /* @__PURE__ */ e.jsx(gs, { property: s, onChange: j }),
+        t === "range" && /* @__PURE__ */ e.jsx(xs, { property: s, onChange: j }),
+        t === "color" && /* @__PURE__ */ e.jsx(ys, { property: s, onChange: j }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(gt, { label: i, property: s, onChange: j })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Kt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && a ? /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Kt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && p ? /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1831,19 +1855,19 @@ const xs = (r) => {
         /* @__PURE__ */ e.jsx(Y, { 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: [
-            vs(x(a, "mq")),
-            i && !a.dark ? "(Light mode)" : ""
+            Ns(g(p, "mq")),
+            o && !p.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => X(x(a, "mq")),
+              onClick: () => X(g(p, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                x(a, "mq").toUpperCase()
+                g(p, "mq").toUpperCase()
               ]
             }
           )
@@ -1851,141 +1875,141 @@ const xs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, js = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
+}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], yt = ({
   label: r,
-  options: s,
+  options: l,
   borderB: t = !1,
-  borderT: d = !1,
-  type: l = "arbitrary",
-  units: n = js,
-  negative: o = !1
+  borderT: i = !1,
+  type: s = "arbitrary",
+  units: n = _s,
+  negative: a = !1
 }) => {
-  const { t: p } = z(), [i, c] = w(s[0].key), h = xe(), a = V((g) => k(h, "property").includes(g), [h]);
+  const { t: d } = z(), [o, c] = w(l[0].key), h = ge(), p = H((x) => k(h, "property").includes(x), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${d ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${i ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
-          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: p(r) }),
+          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(r) }),
           /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            s.map(({ label: g, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(O, { children: [
+            l.map(({ label: x, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(O, { children: [
               /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => c(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === o ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     $.createElement("div", {
-                      className: a(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: p(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(x(ut, y, et), { className: "text-inherit w-3 h-3" })
+                    $.createElement(g(xt, y, tt), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Y, { children: E(le(g)) })
+              /* @__PURE__ */ e.jsx(Y, { children: E(le(x)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           Ie,
           {
-            type: l,
+            type: s,
             units: [...n],
             label: "",
-            property: i,
-            negative: o
+            property: o,
+            negative: a
           }
         ) })
       ]
     }
   );
-}, ws = ({ heading: r, items: s }) => {
-  const { t } = z(), d = xe(), l = _(() => {
-    const n = (i) => q(
-      i.map((c) => c.styleType === "multiple" ? k(c.options, "key") : c.property)
-    ), o = q(
-      s.map((i) => i.styleType === "accordion" ? n(i.items) : i.styleType === "multiple" ? k(i.options, "key") : i.property)
-    ), p = k(d, "property");
-    return Je(o, p).length > 0;
-  }, [d, s]);
+}, Ss = ({ heading: r, items: l }) => {
+  const { t } = z(), i = ge(), s = _(() => {
+    const n = (o) => q(
+      o.map((c) => c.styleType === "multiple" ? k(c.options, "key") : c.property)
+    ), a = q(
+      l.map((o) => o.styleType === "accordion" ? n(o.items) : o.styleType === "multiple" ? k(o.options, "key") : o.property)
+    ), d = k(i, "property");
+    return Qe(a, d).length > 0;
+  }, [i, l]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       t(r),
-      l ? /* @__PURE__ */ e.jsx(
+      s ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Ie, { ...n }, n.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Ie, { ...n }, n.label)) })
   ] });
-}, Cs = Ke({}), be = ({ section: r }) => {
-  const { t: s } = z(), t = xe(), d = V(
-    (o = []) => {
-      const p = {};
+}, Ts = Ke({}), be = ({ section: r }) => {
+  const { t: l } = z(), t = ge(), i = H(
+    (a = []) => {
+      const d = {};
       for (let c = 0; c < t.length; c++)
-        p[t[c].property] = t[c].cls;
-      let i = !0;
-      for (const c in o)
-        if (!ce(p, c) || p[c] !== o[c]) {
-          i = !1;
+        d[t[c].property] = t[c].cls;
+      let o = !0;
+      for (const c in a)
+        if (!ce(d, c) || d[c] !== a[c]) {
+          o = !1;
           break;
         }
-      return i;
+      return o;
     },
     [t]
-  ), l = _(() => {
+  ), s = _(() => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
-    const o = (c) => q(
+    const a = (c) => q(
       c.map((h) => h.styleType === "multiple" ? q(k(h.options, "key")) : h.property)
-    ), p = q(
-      r.items.map((c) => c.styleType === "accordion" ? o(c.items) : c.styleType === "multiple" ? q(k(c.options, "key")) : c.property)
-    ), i = k(t, "property");
-    return Je(p, i).length > 0;
+    ), d = q(
+      r.items.map((c) => c.styleType === "accordion" ? a(c.items) : c.styleType === "multiple" ? q(k(c.options, "key")) : c.property)
+    ), o = k(t, "property");
+    return Qe(d, o).length > 0;
   }, [t, r.heading, r.items]), n = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Cs.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(Ce, { value: r.heading, children: [
+  return /* @__PURE__ */ e.jsx(Ts.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(Ce, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ke, { 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 ${l ? "bg-blue-500" : "bg-gray-300"}` }),
-      s(r.heading)
+      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}` }),
+      l(r.heading)
     ] }) }),
     /* @__PURE__ */ e.jsx(Ne, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((o) => ce(o, "component") ? $.createElement(o.component, { key: o.label }) : ce(o, "styleType") ? o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...o }, o.label) : o.styleType === "accordion" && d(o == null ? void 0 : o.conditions) ? /* @__PURE__ */ e.jsx(ws, { ...o }, o.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...o }, o.label))
+      r.items.map((a) => ce(a, "component") ? $.createElement(a.component, { key: a.label }) : ce(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...a }, a.label) : a.styleType === "accordion" && i(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(Ss, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...a }, a.label))
     ) })
   ] }) });
-}, ks = () => {
-  const r = K(), [s] = ue(), { t } = z(), d = Lr(), l = De(), n = Pe(r._type), o = x(ae(s), "prop"), p = x(n.props, `${o}.presets`, {});
-  if (b(d) && (!ce(n, "props") || b(p)))
+}, Rs = () => {
+  const r = G(), [l] = xe(), { t } = z(), i = Yr(), s = De(), n = Pe(r._type), a = g(oe(l), "prop"), d = g(n.props, `${a}.presets`, {});
+  if (b(i) && (!ce(n, "props") || b(d)))
     return null;
-  const i = (c) => {
+  const o = (c) => {
     const h = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([r._id], h, !0);
+    s([r._id], h, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Cr, { children: [
-    /* @__PURE__ */ e.jsx(kr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(U, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(kr, { children: [
+    /* @__PURE__ */ e.jsx(Nr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(K, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
       /* @__PURE__ */ e.jsx(Gt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Nr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Be, { className: "no-scrollbar h-full", children: [
-      b(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(_r, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Be, { className: "no-scrollbar h-full", children: [
+      b(d) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsxs(Ee, { children: [
           n.type,
           " ",
           t("presets")
         ] }),
         /* @__PURE__ */ e.jsx(Le, {}),
-        /* @__PURE__ */ e.jsx(Oe, { children: je(p).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => i(p[c]), children: [
+        /* @__PURE__ */ e.jsx(Oe, { children: je(d).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(d[c]), children: [
           we(E(t(c))),
           /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      b(d) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      b(i) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(Ee, { children: t("Global presets") }),
         /* @__PURE__ */ e.jsx(Le, {}),
-        /* @__PURE__ */ e.jsx(Oe, { children: je(d).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => i(d[c]), children: [
+        /* @__PURE__ */ e.jsx(Oe, { children: je(i).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(i[c]), children: [
           we(E(t(c))),
           /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
@@ -1993,60 +2017,62 @@ const xs = (r) => {
     ] }) })
   ] }) });
 };
-function Ns() {
-  const [r, s] = it(), { flexChild: t, gridChild: d } = _r(), { t: l } = z(), [n] = ue();
-  return b(n) ? /* @__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(tt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: l("no_styling_block_selected") })
+function Vs() {
+  const [r, l] = dt(), { flexChild: t, gridChild: i } = Sr(), { t: s } = z(), n = Tr(), [a] = xe();
+  return b(a) ? /* @__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(rt, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: s("no_styling_block_selected") })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(ks, {}),
+    /* @__PURE__ */ e.jsx(Rs, {}),
     /* @__PURE__ */ e.jsx("div", { className: "flex h-12 flex-col space-x-4 px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-      /* @__PURE__ */ e.jsx(nt, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-      /* @__PURE__ */ e.jsxs(Tr, { defaultValue: r, onValueChange: (o) => s(o), children: [
-        /* @__PURE__ */ e.jsx(Sr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Rr, { placeholder: "State" }) }),
-        /* @__PURE__ */ e.jsxs(Vr, { children: [
-          /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
-          /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
-          /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
-          /* @__PURE__ */ e.jsx(H, { value: "focus", children: "Focus" }),
-          /* @__PURE__ */ e.jsx(H, { value: "before", children: "Before" }),
-          /* @__PURE__ */ e.jsx(H, { value: "after", children: "After" }),
-          /* @__PURE__ */ e.jsx(H, { value: "only", children: "Only" }),
-          /* @__PURE__ */ e.jsx(H, { value: "first", children: "First" }),
-          /* @__PURE__ */ e.jsx(H, { value: "last", children: "Last" }),
-          /* @__PURE__ */ e.jsx(H, { value: "first-letter", children: "First Letter" }),
-          /* @__PURE__ */ e.jsx(H, { value: "first-line", children: "First Line" }),
-          /* @__PURE__ */ e.jsx(H, { value: "disabled", children: "Disabled" })
+      /* @__PURE__ */ e.jsx(it, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+      /* @__PURE__ */ e.jsxs(Rr, { defaultValue: r, onValueChange: (d) => l(d), children: [
+        /* @__PURE__ */ e.jsx(Vr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Hr, { placeholder: s("State") }) }),
+        /* @__PURE__ */ e.jsxs(Dr, { children: [
+          k(n, (d, o) => /* @__PURE__ */ e.jsx(V, { value: o, children: s(d) }, o)),
+          /* @__PURE__ */ e.jsx("hr", {}),
+          /* @__PURE__ */ e.jsx(V, { value: "", children: s("Normal") }),
+          /* @__PURE__ */ e.jsx(V, { value: "hover", children: s("Hover") }),
+          /* @__PURE__ */ e.jsx(V, { value: "active", children: s("Active") }),
+          /* @__PURE__ */ e.jsx(V, { value: "focus", children: s("Focus") }),
+          /* @__PURE__ */ e.jsx(V, { value: "before", children: s("Before") }),
+          /* @__PURE__ */ e.jsx(V, { value: "after", children: s("After") }),
+          /* @__PURE__ */ e.jsx(V, { value: "only", children: s("Only") }),
+          /* @__PURE__ */ e.jsx(V, { value: "first", children: s("First") }),
+          /* @__PURE__ */ e.jsx(V, { value: "last", children: s("Last") }),
+          /* @__PURE__ */ e.jsx(V, { value: "first-letter", children: s("First Letter") }),
+          /* @__PURE__ */ e.jsx(V, { value: "first-line", children: s("First Line") }),
+          /* @__PURE__ */ e.jsx(V, { value: "disabled", children: s("Disabled") })
         ] })
       ] })
     ] }) }),
     r !== "" ? /* @__PURE__ */ e.jsxs("div", { className: "m-1 flex items-center space-x-1 rounded border border-orange-500 bg-orange-200 p-px px-2 text-xs text-orange-900", children: [
-      /* @__PURE__ */ e.jsx(Ar, { className: "w-3" }),
-      /* @__PURE__ */ e.jsx("span", { children: l(`Styles will be applied for (:${r}) state`) })
+      /* @__PURE__ */ e.jsx(Lr, { className: "w-3" }),
+      /* @__PURE__ */ e.jsx("span", { children: s(`Styles will be applied for (:${r}) state`) })
     ] }) : null,
-    /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-      t && /* @__PURE__ */ e.jsx(be, { section: ls }),
-      d ? /* @__PURE__ */ e.jsx(be, { section: os }) : null,
-      as.map((o) => /* @__PURE__ */ e.jsx(be, { section: o }, o.heading))
+    /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(at, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+      t && /* @__PURE__ */ e.jsx(be, { section: ds }),
+      i ? /* @__PURE__ */ e.jsx(be, { section: cs }) : null,
+      ps.map((d) => /* @__PURE__ */ e.jsx(be, { section: d }, d.heading))
     ] }) })
   ] });
 }
-const _s = ({ onAdd: r }) => {
-  const { t: s } = z(), [t, d] = w({ key: "", value: "" }), l = () => {
-    b(t.key) || (r({ ...t, key: Vt(t.key) }), d({ key: "", value: "" }));
+const Hs = ({ onAdd: r }) => {
+  const { t: l } = z(), [t, i] = w({ key: "", value: "" }), s = () => {
+    b(t.key) || (r({ ...t, key: Vt(t.key) }), i({ key: "", value: "" }));
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200 px-1", children: [
     /* @__PURE__ */ e.jsx(
       _e,
       {
         name: "key",
-        onChange: (n) => d({ ...t, key: n.target.value }),
+        onChange: (n) => i({ ...t, key: n.target.value }),
         value: t.key,
-        placeholder: s("Name"),
+        placeholder: l("Name"),
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || l());
+          n.key === "Enter" && (n.preventDefault(), b(t.key) || s());
         }
       }
     ),
@@ -2054,71 +2080,80 @@ const _s = ({ onAdd: r }) => {
       _e,
       {
         name: "value",
-        onChange: (n) => d({ ...t, value: n.target.value }),
+        onChange: (n) => i({ ...t, value: n.target.value }),
         value: t.value,
-        placeholder: s("Value"),
+        placeholder: l("Value"),
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || l());
+          n.key === "Enter" && (n.preventDefault(), b(t.key) || s());
         }
       }
     ) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsxs(U, { disabled: b(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
+      /* @__PURE__ */ e.jsxs(K, { disabled: b(t.key), onClick: s, size: "sm", className: "flex items-center", children: [
         /* @__PURE__ */ e.jsxs("span", { children: [
-          s("Add"),
+          l("Add"),
           " "
         ] }),
         /* @__PURE__ */ e.jsx(Ve, {})
       ] }),
-      b(t.key) ? null : /* @__PURE__ */ e.jsx(U, { variant: "ghost", onClick: () => d({ key: "", value: "" }), children: s("Cancel") })
+      b(t.key) ? null : /* @__PURE__ */ e.jsx(K, { variant: "ghost", onClick: () => i({ key: "", value: "" }), children: l("Cancel") })
     ] })
   ] });
-}, Ts = () => {
-  const r = K(), [s, t] = w([]), [d] = ue(), l = rt(), n = st(), { t: o } = z(), p = `${x(d, "0.prop")}_attrs`;
+}, Ds = () => {
+  const r = G(), [l, t] = w([]), [i] = xe(), s = st(), n = lt(), { t: a } = z(), { toast: d } = Br(), o = `${g(i, "0.prop")}_attrs`;
   de.useEffect(() => {
-    const a = k(x(r, p), (g, y) => ({ key: y, value: g }));
-    b(a) ? t([]) : t(a);
-  }, [x(r, p)]);
-  const i = (a) => {
-    const g = ve(s, (y, u) => a !== u);
-    h(g);
-  }, c = (a) => {
-    const g = [...s, a];
-    h(g);
-  }, h = de.useCallback(
-    (a = []) => {
-      const g = {};
-      Re(a, (y) => {
-        b(y.key) || Ge(g, y.key, y.value);
-      }), n([x(r, "_id")], { [p]: g });
+    const x = k(g(r, o), (y, u) => ({ key: u, value: y }));
+    b(x) ? t([]) : t(x);
+  }, [g(r, o)]);
+  const c = (x) => {
+    const y = ve(l, (u, f) => x !== f);
+    p(y);
+  }, h = (x) => {
+    const y = Ge(l, { key: x.key });
+    if (y && (y.value.startsWith("dnd-") || y.value.startsWith("#dnd-"))) {
+      d({
+        title: a("Cannot add predefined attribute"),
+        variant: "destructive",
+        description: a(`"(${x.key})" cannot be added as it is a predefined attribute for this block`)
+      });
+      return;
+    }
+    const u = [...l, x];
+    p(u);
+  }, p = de.useCallback(
+    (x = []) => {
+      const y = {};
+      Re(x, (u) => {
+        b(u.key) || qe(y, u.key, u.value);
+      }), n([g(r, "_id")], { [o]: y });
     },
-    [r, l, p]
+    [r, s, o]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "px-2", children: /* @__PURE__ */ e.jsx("div", { className: "no-scrollbar 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 p-2 text-xs text-gray-700", children: [
-      b(s) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-16 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: o("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: o("Custom attributes") }) }),
+      b(l) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-16 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: a("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: a("Attributes") }) }),
       de.Children.toArray(
-        k(s, (a) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
+        k(l, (x) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
           /* @__PURE__ */ e.jsxs(O, { delayDuration: 1e3, children: [
             /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-[90%] cursor-default truncate px-1 hover:bg-gray-200", children: [
-              a.key,
+              x.key,
               " ",
               /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
               " ",
-              a.value
+              x.value
             ] }) }),
             /* @__PURE__ */ e.jsxs(Y, { className: "max-w-[200px]", children: [
               /* @__PURE__ */ e.jsxs("div", { children: [
-                o("Name"),
+                a("Name"),
                 ": ",
-                a.key
+                x.key
               ] }),
               /* @__PURE__ */ e.jsxs("div", { children: [
-                o("Value"),
+                a("Value"),
                 ": ",
-                a.value
+                x.value
               ] })
             ] })
           ] }),
@@ -2126,20 +2161,21 @@ const _s = ({ onAdd: r }) => {
             /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
               "button",
               {
+                disabled: W(x.value, "dnd-"),
                 className: "invisible group-hover:visible",
-                onClick: () => i(s.indexOf(a)),
-                children: /* @__PURE__ */ e.jsx(Mr, { className: "w-4 text-gray-500" })
+                onClick: () => c(l.indexOf(x)),
+                children: /* @__PURE__ */ e.jsx(Or, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(Y, { className: "max-w-[200px]", children: o("Remove attribute") })
+            /* @__PURE__ */ e.jsx(Y, { className: "max-w-[200px]", children: W(x.value, "dnd-") ? a("Predefined attribute. Cannot be deleted") : a("Remove attribute") })
           ] })
         ] }))
       )
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(_s, { onAdd: (a) => c(a) })
+    /* @__PURE__ */ e.jsx(Hs, { onAdd: (x) => h(x) })
   ] }) }) });
-}, Ss = {
+}, Bs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2150,32 +2186,32 @@ const _s = ({ onAdd: r }) => {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, _l = () => {
-  const r = K(), { t: s } = z(), [t, d] = $.useState(""), [l, n] = $.useState({
-    onDrag: (i) => i,
-    onDragEnd: (i) => i,
+}, Dl = () => {
+  const r = G(), { t: l } = z(), [t, i] = $.useState(""), [s, n] = $.useState({
+    onDrag: (o) => o,
+    onDragEnd: (o) => o,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), o = fe(
-    (i) => {
-      const c = !x(l, "negative", !1), h = x(l, "cssProperty", "");
-      let a = parseFloat(l.dragStartValue);
-      a = qe(a) ? 0 : a;
-      let g = Ss[l.dragUnit];
-      (G(h, "scale") || h === "opacity") && (g = 10);
-      let u = (l.dragStartY - i.pageY) / g + a;
-      c && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), d(`${u}`);
+  }), a = fe(
+    (o) => {
+      const c = !g(s, "negative", !1), h = g(s, "cssProperty", "");
+      let p = parseFloat(s.dragStartValue);
+      p = Je(p) ? 0 : p;
+      let x = Bs[s.dragUnit];
+      (W(h, "scale") || h === "opacity") && (x = 10);
+      let u = (s.dragStartY - o.pageY) / x + p;
+      c && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), s.onDrag(`${u}`), i(`${u}`);
     },
-    [l],
+    [s],
     50
-  ), p = V(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), n({
-      onDrag: (i) => i,
-      onDragEnd: (i) => i,
+  ), d = H(() => {
+    setTimeout(() => s.onDragEnd(`${t}`), 100), n({
+      onDrag: (o) => o,
+      onDragEnd: (o) => o,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2183,31 +2219,31 @@ const _s = ({ onAdd: r }) => {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, n]);
+  }, [s, t, n]);
   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(tt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsxs(gt.Provider, { value: { setDragData: n }, children: [
-    l.dragging ? /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(rt, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(ct, { children: /* @__PURE__ */ e.jsxs(ht.Provider, { value: { setDragData: n }, children: [
+    s.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        onMouseMove: o,
-        onMouseUp: () => p(),
+        onMouseMove: a,
+        onMouseUp: () => d(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(Hr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
-      /* @__PURE__ */ e.jsxs(Dr, { className: "mx-1 grid grid-cols-3", children: [
-        /* @__PURE__ */ e.jsx(he, { value: "settings", children: s("settings") }),
-        /* @__PURE__ */ e.jsx(he, { value: "styling", children: s("styling") }),
-        /* @__PURE__ */ e.jsx(he, { value: "attrs", children: s("Attributes") })
+    /* @__PURE__ */ e.jsxs(Pr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
+      /* @__PURE__ */ e.jsxs(Ir, { className: "mx-1 grid grid-cols-3", children: [
+        /* @__PURE__ */ e.jsx(ye, { value: "settings", children: l("settings") }),
+        /* @__PURE__ */ e.jsx(ye, { value: "styling", children: l("styling") }),
+        /* @__PURE__ */ e.jsx(ye, { value: "attrs", children: l("Attributes") })
       ] }),
-      /* @__PURE__ */ e.jsx(ye, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(rs, {}) }) }),
-      /* @__PURE__ */ e.jsx(ye, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ns, {}) }),
-      /* @__PURE__ */ e.jsx(ye, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ts, {}) })
+      /* @__PURE__ */ e.jsx(me, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(ns, {}) }) }),
+      /* @__PURE__ */ e.jsx(me, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Vs, {}) }),
+      /* @__PURE__ */ e.jsx(me, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ds, {}) })
     ] })
   ] }) });
 };
 export {
-  _l as default
+  Dl as default
 };