@chaibuilder/sdk 1.2.49 → 1.2.50

package/dist/{Settings-aEcWAB0x.js → Settings-0uSGoECC.js}

@@ -1,21 +1,21 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
-import I, { useState as j, useMemo as T, useEffect as P, useCallback as H, memo as mt, useRef as ft, createContext as Xe, useContext as se } from "react";
+import P, { useState as w, useMemo as T, useEffect as A, useCallback as H, memo as bt, useRef as mt, createContext as Fe, useContext as se } from "react";
 import { useThrottledCallback as de } from "@react-hookz/web";
-import { forEach as Ne, isArray as ce, omit as vt, truncate as jt, includes as F, get as y, first as ae, split as wt, startCase as X, toLower as re, isEmpty as m, map as _, find as Ze, last as Ct, filter as ye, set as We, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as be, reject as St, startsWith as W, nth as He, isNumber as Tt, parseInt as Rt, isNaN as Ue, findLast as Vt, flatten as De, intersection as Ht, has as ie, isNull as Dt } from "lodash-es";
-import { useTranslation as B } from "react-i18next";
-import { CopyIcon as Bt, PlusIcon as _e, Cross2Icon as Ge, EyeOpenIcon as It, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as At, ArrowBottomRightIcon as $t, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Et, AlignCenterHorizontallyIcon as Lt, AlignRightIcon as Ot, StretchHorizontallyIcon as zt, FontItalicIcon as Yt, UnderlineIcon as Ft, OverlineIcon as Xt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as Se, MinusIcon as Ut, BoxIcon as Ke, RowSpacingIcon as Gt, TriangleDownIcon as Kt, CrossCircledIcon as qt, CaretDownIcon as Jt, MixerHorizontalIcon as qe } from "@radix-ui/react-icons";
-import { a2 as Je, aQ as Qe, aR as et, B as A, aS as tt, aT as Qt, aU as er, aV as tr, aW as rr, aX as sr, aY as ar, M as G, aL as rt, $ as lr, a0 as or, a1 as nr, aZ as ir, Z as dr, ab as cr, _ as pr, ac as $, ad as M, ae as E, a_ as ur, a$ as gr, b0 as xr, b1 as yr, b2 as hr, b3 as br, b4 as mr, R as st, Q as at, h as lt, b5 as fr, b6 as ot, b7 as me, b8 as fe, b9 as ve, ba as vr, bb as jr, ah as wr, bc as Cr, Y as pe, n as Te, I as nt, L as it, bd as dt, be as je, j as kr, bf as Nr, J as ue, v as _r, P as Sr, o as Ie, av as Tr, aw as Rr, ax as Vr, bg as ct, ay as Pe, az as Ae, bh as $e, bi as Me, bj as Ee, S as Hr } from "./ChaiBuilderEditor-F2yUJQdt.js";
+import { forEach as Ne, isArray as ce, omit as ft, truncate as vt, includes as X, get as y, first as oe, split as wt, startCase as F, toLower as re, isEmpty as m, map as _, find as Ze, last as jt, filter as ye, set as We, debounce as Ct, keys as he, cloneDeep as kt, each as Nt, capitalize as be, reject as _t, startsWith as W, nth as He, isNumber as St, parseInt as Tt, isNaN as Ue, findLast as Rt, flatten as De, intersection as Vt, has as ie, isNull as Ht } from "lodash-es";
+import { useTranslation as I } from "react-i18next";
+import { CopyIcon as Dt, PlusIcon as _e, Cross2Icon as Ke, EyeOpenIcon as Bt, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as It, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as At, ArrowBottomLeftIcon as $t, AlignLeftIcon as Et, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Lt, StretchHorizontallyIcon as Ot, FontItalicIcon as zt, UnderlineIcon as Yt, OverlineIcon as Xt, LetterCaseUppercaseIcon as Ft, Cross1Icon as Zt, InfoCircledIcon as Se, MinusIcon as Wt, BoxIcon as Ge, RowSpacingIcon as Ut, TriangleDownIcon as Kt, CrossCircledIcon as Gt, CaretDownIcon as qt, MixerHorizontalIcon as Jt } from "@radix-ui/react-icons";
+import { a1 as qe, aP as Je, aQ as Qe, B, aR as et, aS as Qt, aT as er, aU as tr, aV as rr, aW as sr, aX as or, L as U, aK as tt, _ as lr, $ as ar, a0 as nr, aY as ir, Y as dr, aa as cr, Z as pr, ab as $, ac as E, ad as M, aZ as ur, a_ as gr, a$ as xr, b0 as yr, b1 as hr, b2 as br, b3 as mr, Q as rt, P as st, h as ot, b4 as fr, b5 as lt, b6 as me, b7 as fe, b8 as ve, b9 as vr, ba as wr, ag as jr, bb as Cr, X as pe, n as Te, H as at, K as nt, bc as it, bd as we, j as kr, be as Nr, I as ue, v as _r, O as Sr, o as Ie, au as Tr, av as Rr, aw as Vr, bf as dt, ax as Pe, ay as Ae, bg as $e, bh as Ee, bi as Me, R as Hr } from "./ChaiBuilderEditor-3xIN-AP_.js";
 import { Check as Dr, EditIcon as Br, TrashIcon as Ir, Loader as Pr, SparklesIcon as Ar, DeleteIcon as $r } from "lucide-react";
-import { getBlockComponent as Re, getChaiDataProviders as Mr, useGlobalStylingPresets as Er } from "@chaibuilder/runtime";
+import { getBlockComponent as Re, getChaiDataProviders as Er, useGlobalStylingPresets as Mr } from "@chaibuilder/runtime";
 import { J as Lr, a as Or, d as zr } from "./index-e0c8PmRQ.js";
 import Yr from "@rjsf/core";
-import Fr from "@rjsf/validator-ajv8";
-import { u as Xr } from "./useCanvasSettings-2YhM5XKu.js";
-import Zr from "react-autosuggest";
-import Wr from "fuse.js";
-import { A as Ur, C as ge, g as Gr } from "./utils-iMv3T4WT.js";
-import { a as Kr } from "./STRINGS--j49GZJP.js";
+import Xr from "@rjsf/validator-ajv8";
+import { a as Fr, u as Zr } from "./useCodeEditor-yl5V3Hte.js";
+import Wr from "react-autosuggest";
+import Ur from "fuse.js";
+import { A as Kr, C as ge, g as Gr } from "./utils-VpVqnC9m.js";
+import { a as qr } from "./MODIFIERS-fd5XOmum.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -26,7 +26,6 @@ import "i18next";
 import "flagged";
 import "./Functions-7jnEwJyw.js";
 import "tailwind-merge";
-import "./MODIFIERS-cBT31iqE.js";
 import "tree-model";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
@@ -50,23 +49,24 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-function qr(r) {
-  const a = [], t = {};
-  function n(l, s) {
+import "./index-YpnaudSM.js";
+function Jr(r) {
+  const o = [], t = {};
+  function a(l, s) {
     Ne(s, (d, c) => {
-      const o = l ? `${l}.${c}` : c, p = ce(d) ? "list" : typeof d;
-      a.push(o), t[o] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ce(d) && n(o, d);
+      const n = l ? `${l}.${c}` : c, p = ce(d) ? "list" : typeof d;
+      o.push(n), t[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ce(d) && a(n, d);
     });
   }
-  return n("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
+  return a("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
 }
-const we = ({ data: r, fullView: a }) => {
+const je = ({ data: r, fullView: o }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return o ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(qe, { children: /* @__PURE__ */ e.jsx(
       Lr,
       {
         data: r,
@@ -82,49 +82,49 @@ const we = ({ data: r, fullView: a }) => {
   ] }) : /* @__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: jt(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 }) });
 }, Le = ({
   type: r,
-  value: a = "",
+  value: o = "",
   setValue: t,
-  data: n,
+  data: a,
   onChange: l,
   dataType: s,
   appliedBindings: d
 }) => {
-  const { paths: c, pathsType: o } = qr(n), p = r === "PROP" ? Re(n == null ? void 0 : n._type) : {}, h = r === "PROP", [i, u] = j(!1), x = T(() => r === "PROP" ? c.filter(
-    (g) => !F(d, g) && y(p, `props.${ae(wt(g, "."))}.binding`)
-  ) : c.filter((g) => s === y(o, g, "")), [r, c, d, s, p]);
-  return P(() => {
-    a && l(a);
-  }, [a, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  const { paths: c, pathsType: n } = Jr(a), p = r === "PROP" ? Re(a == null ? void 0 : a._type) : {}, h = r === "PROP", [i, u] = w(!1), x = T(() => r === "PROP" ? c.filter(
+    (g) => !X(d, g) && y(p, `props.${oe(wt(g, "."))}.binding`)
+  ) : c.filter((g) => s === y(n, g, "")), [r, c, d, s, p]);
+  return A(() => {
+    o && l(o);
+  }, [o, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: X(re(r)) }),
-      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: u, children: [
-        /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          A,
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: F(re(r)) }),
+      /* @__PURE__ */ e.jsxs(Je, { open: i, onOpenChange: u, children: [
+        /* @__PURE__ */ e.jsx(Qe, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          B,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${m(a) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
-            children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${m(o) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
+            children: o ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: X(s) }),
-                a
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(s) }),
+                o
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              X(re(r))
+              F(re(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Qt, { children: [
+        /* @__PURE__ */ e.jsx(et, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Qt, { children: [
           /* @__PURE__ */ e.jsx(er, { placeholder: `Choose ${re(r)}...` }),
           /* @__PURE__ */ e.jsxs(tr, { children: [
             /* @__PURE__ */ e.jsx(rr, { children: "No results found." }),
             /* @__PURE__ */ e.jsx(sr, { children: _(x, (g) => /* @__PURE__ */ e.jsxs(
-              ar,
+              or,
               {
                 value: g,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
@@ -133,10 +133,10 @@ const we = ({ data: r, fullView: a }) => {
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Dr, { className: `h-4 w-4 text-green-500 ${a === g ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Dr, { className: `h-4 w-4 text-green-500 ${o === g ? "" : "opacity-0"}` }),
                     g
                   ] }),
-                  h ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: X(y(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: y(n, g) }) })
+                  h ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(y(n, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: y(a, g) }) })
                 ]
               },
               g
@@ -145,31 +145,31 @@ const we = ({ data: r, fullView: a }) => {
         ] }) })
       ] })
     ] }),
-    !h && !m(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: y(n, a, ""), fullView: !0 }) })
+    !h && !m(o) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: y(a, o, ""), fullView: !0 }) })
   ] });
-}, Jr = ({
+}, Qr = ({
   appliedBindings: r = [],
-  onAddBinding: a,
+  onAddBinding: o,
   editMode: t,
-  item: n
+  item: a
 }) => {
-  const [l, s] = j(t ? n.key : ""), [d, c] = j(t ? n.value : ""), o = G(), [p] = rt(), h = H(
+  const [l, s] = w(t ? a.key : ""), [d, c] = w(t ? a.value : ""), n = U(), [p] = tt(), h = H(
     (x, g) => {
       if (m(x))
         return "";
       {
-        const v = y(g === "PROP" ? o : p, x, "");
+        const v = y(g === "PROP" ? n : p, x, "");
         if (ce(v))
           return "list";
         const C = typeof v;
         return C === "string" ? "text" : C === "object" ? "model" : C;
       }
     },
-    [o, p]
-  ), [i, u] = j(t ? h(n.key, "PROP") : "");
+    [n, p]
+  ), [i, u] = w(t ? h(a.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(lr, { children: [
-      /* @__PURE__ */ e.jsx(or, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(ar, { children: "Add Data Binding" }),
       /* @__PURE__ */ e.jsx(nr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
@@ -185,7 +185,7 @@ const we = ({ data: r, fullView: a }) => {
             const g = h(x, "PROP");
             s(x), i !== g && c(""), u(g);
           },
-          data: o,
+          data: n,
           dataType: i,
           appliedBindings: r
         }
@@ -210,57 +210,57 @@ const we = ({ data: r, fullView: a }) => {
       )
     ] }),
     /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
-      A,
+      B,
       {
         type: "submit",
         className: "mt-4",
         disabled: m(l) && m(d),
-        onClick: () => a({ key: l, value: d }),
+        onClick: () => o({ key: l, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, pt = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: n, editMode: l = !0, item: s = {} }) => {
-  const [d, c] = j(!1);
+}, ct = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: a, editMode: l = !0, item: s = {} }) => {
+  const [d, c] = w(!1);
   return /* @__PURE__ */ e.jsxs(dr, { children: [
-    /* @__PURE__ */ e.jsx(cr, { disabled: r, asChild: !0, onClick: () => c(!0), children: a }),
+    /* @__PURE__ */ e.jsx(cr, { disabled: r, asChild: !0, onClick: () => c(!0), children: o }),
     d && /* @__PURE__ */ e.jsx(pr, { children: /* @__PURE__ */ e.jsx(
-      Jr,
+      Qr,
       {
         item: s,
         editMode: l,
-        appliedBindings: n,
-        onAddBinding: (o) => {
-          t(o), c(!1);
+        appliedBindings: a,
+        onAddBinding: (n) => {
+          t(n), c(!1);
         }
       }
     ) })
   ] });
-}, Qr = ({
+}, es = ({
   item: r,
-  onAddBinding: a,
+  onAddBinding: o,
   onRemove: t,
-  selectedBlock: n,
+  selectedBlock: a,
   dataProvider: l,
   appliedBindings: s
 }) => {
-  const [d, c] = j("string"), o = (p, h) => {
+  const [d, c] = w("string"), n = (p, h) => {
     if (m(p))
       return "";
     {
-      const i = y(h === "PROP" ? n : l, p, "");
+      const i = y(h === "PROP" ? a : l, p, "");
       if (ce(i))
         return "list";
       const u = typeof i;
       return u === "string" ? "text" : u === "object" ? "model" : u;
     }
   };
-  return P(() => c(() => o(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return A(() => c(() => n(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(we, { data: y(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(je, { data: y(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: a, appliedBindings: s, item: r, children: /* @__PURE__ */ e.jsx(Br, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
+      /* @__PURE__ */ e.jsx(ct, { editMode: !0, onAddBinding: o, appliedBindings: s, item: r, children: /* @__PURE__ */ e.jsx(Br, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
         Ir,
         {
@@ -269,23 +269,23 @@ const we = ({ data: r, fullView: a }) => {
         }
       )
     ] }),
-    !m(d) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: X(d) })
+    !m(d) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: F(d) })
   ] });
-}, es = ({ bindingData: r, onChange: a }) => {
-  const t = G(), [n] = rt(), l = Mr(), [s, d] = j(
+}, ts = ({ bindingData: r, onChange: o }) => {
+  const t = U(), [a] = tt(), l = Er(), [s, d] = w(
     _(r, (i, u) => ({ key: u, value: i }))
   );
-  P(() => {
+  A(() => {
     d(_(r, (i, u) => ({ key: u, value: i })));
   }, [t == null ? void 0 : t._id, r]);
   const c = T(() => {
-    if (m(n))
+    if (m(a))
       return !0;
     if (m(s))
       return !1;
-    const i = Ct(s);
+    const i = jt(s);
     return m(i == null ? void 0 : i.key) || m(i == null ? void 0 : i.value);
-  }, [n, s]), o = (i) => {
+  }, [a, s]), n = (i) => {
     const u = ye(s, (x) => x.key !== i.key);
     d([...u, i]), h([...u, i]);
   }, p = (i) => {
@@ -294,15 +294,15 @@ const we = ({ data: r, fullView: a }) => {
   }, h = H(
     (i = []) => {
       if (d(i), m(i)) {
-        a({});
+        o({});
         return;
       }
       const u = {};
       Ne(i, (x) => {
         !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && We(u, x.key, x.value);
-      }), a(u);
+      }), o(u);
     },
-    [a]
+    [o]
   );
   return m(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
@@ -310,52 +310,71 @@ const we = ({ data: r, fullView: a }) => {
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
     _(s, (i, u) => /* @__PURE__ */ e.jsx(
-      Qr,
+      es,
       {
         item: i,
-        onAddBinding: o,
+        onAddBinding: n,
         onRemove: () => p(u),
         selectedBlock: t,
-        dataProvider: n,
+        dataProvider: a,
         appliedBindings: _(s, "key")
       },
       i.key
     )),
     /* @__PURE__ */ e.jsxs($, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(M, { disabled: m(n), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        pt,
+      /* @__PURE__ */ e.jsx(E, { disabled: m(a), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        ct,
         {
           disabled: c,
           appliedBindings: _(s, "key"),
-          onAddBinding: o,
+          onAddBinding: n,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
               className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: m(n) ? /* @__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"
+              children: m(a) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      c && /* @__PURE__ */ e.jsx(E, { sideOffset: -55, className: "text-[11px]", children: m(n) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      c && /* @__PURE__ */ e.jsx(M, { sideOffset: -55, className: "text-[11px]", children: m(a) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, 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" }), Ce = mt(({ id: r, properties: a, formData: t, onChange: n }) => {
-  const [l, s] = j(t), d = { type: "object", properties: {} }, c = {};
-  Object.keys(a).forEach((p) => {
-    const h = a[p];
-    if (F(["slot", "styles"], h.type))
+}, rs = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), ss = ({ id: r, placeholder: o, value: t }) => {
+  const { t: a } = I(), [, l] = Fr(), s = U();
+  if (typeof window > "u")
+    return null;
+  const d = () => {
+    const c = s == null ? void 0 : s._id, n = r.replace("root.", "");
+    l({ blockId: c, blockProp: n, placeholder: o, initialCode: t });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        onClick: d,
+        className: "text-pretty w-[90%] max-w-full cursor-default truncate rounded border bg-white p-2 text-left text-[10px]",
+        children: t.trim().length > 0 ? t.substring(0, 46) : o || "Eg: <script>console.log('Hello, world!');<\/script>"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(B, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: a("Open code editor") })
+  ] });
+}, Ce = bt(({ id: r, properties: o, formData: t, onChange: a }) => {
+  const [l, s] = w(t), d = { type: "object", properties: {} }, c = {};
+  Object.keys(o).forEach((p) => {
+    const h = o[p];
+    if (X(["slot", "styles"], h.type))
       return;
     const i = p;
     d.properties[i] = ur(h), c[i] = gr(h);
-  }), P(() => {
+  }), A(() => {
     s(t);
   }, [r]);
-  const o = de(
+  const n = de(
     async ({ formData: p }, h) => {
-      n({ formData: p }, h);
+      a({ formData: p }, h);
     },
-    [n],
+    [a],
     1e3
     // save only every 5 seconds
   );
@@ -363,10 +382,11 @@ const we = ({ data: r, fullView: a }) => {
     Yr,
     {
       widgets: {
-        binding: ts,
+        binding: rs,
         richtext: xr,
         icon: yr,
-        image: hr
+        image: hr,
+        code: ss
       },
       fields: { link: br },
       idSeparator: ".",
@@ -374,18 +394,18 @@ const we = ({ data: r, fullView: a }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Fr,
+      validator: Xr,
       uiSchema: c,
       schema: d,
       formData: l,
       onChange: ({ formData: p }, h) => {
-        h && (s(p), o({ formData: p }, h));
+        h && (s(p), n({ formData: p }, h));
       }
     }
   );
-}), rs = () => {
-  const [r, a] = Xr(), t = mr(), n = (d, c) => {
-    a((o) => ({ ...o, [d]: c }));
+}), os = () => {
+  const [r, o] = Zr(), t = mr(), a = (d, c) => {
+    o((n) => ({ ...n, [d]: c }));
   };
   if (m(t))
     return null;
@@ -399,39 +419,39 @@ const we = ({ data: r, fullView: a }) => {
       Ce,
       {
         id: l == null ? void 0 : l._id,
-        onChange: ({ formData: d }) => n(l._id, d),
+        onChange: ({ formData: d }) => a(l._id, d),
         formData: y(r, l._id, {}),
         properties: s
       }
     ) })
   ] });
 };
-function ss() {
-  const r = G(), a = st(), t = at(), n = Re(r._type), l = { ...r }, [s, d] = j(l), c = lt("dataBindingSupport", !1), o = ({ formData: x }, g, v) => {
+function ls() {
+  const r = U(), o = rt(), t = st(), a = Re(r._type), l = { ...r }, [s, d] = w(l), c = ot("dataBindingSupport", !1), n = ({ formData: x }, g, v) => {
     if (g && (s == null ? void 0 : s._id) === r._id) {
       const C = g.replace("root.", "");
       t([r._id], { [C]: y(x, C) }, v);
     }
   }, p = H(
-    kt(({ formData: x }, g, v) => {
-      o({ formData: x }, g, v), d(x);
+    Ct(({ formData: x }, g, v) => {
+      n({ formData: x }, g, v), d(x);
     }, 1500),
     [r == null ? void 0 : r._id]
   ), h = ({ formData: x }, g) => {
     if (g) {
       const v = g.replace("root.", "");
-      a(
+      o(
         [r._id],
         fr(v, y(x, v.split(".")))
       ), p({ formData: x }, g, { [v]: y(s, v) });
     }
   }, i = he(y(l, "_bindings", {})), u = T(() => {
-    const x = Nt(y(n, "props", {}));
-    return c && _t(i, (g) => delete x[g]), x;
-  }, [n, i, c]);
+    const x = kt(y(a, "props", {}));
+    return c && Nt(i, (g) => delete x[g]), x;
+  }, [a, i, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(rs, {}),
-    c ? /* @__PURE__ */ e.jsxs(ot, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+    /* @__PURE__ */ e.jsx(os, {}),
+    c ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(me, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
@@ -443,11 +463,11 @@ function ss() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          es,
+          ts,
           {
             bindingData: y(r, "_bindings", {}),
             onChange: (x) => {
-              o({ formData: { _bindings: x } }, "root._bindings");
+              n({ formData: { _bindings: x } }, "root._bindings");
             }
           }
         ) })
@@ -488,68 +508,68 @@ function ss() {
   ] });
 }
 const as = ({ blockId: r }) => {
-  const { t: a } = B(), { askAi: t, loading: n, error: l } = vr(), [s, d] = j(""), c = ft(null);
-  P(() => {
+  const { t: o } = I(), { askAi: t, loading: a, error: l } = vr(), [s, d] = w(""), c = mt(null);
+  A(() => {
     var p;
     (p = c.current) == null || p.focus();
   }, []);
-  const o = () => {
+  const n = () => {
     l || d("");
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "", children: [
-    /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: a("Ask AI") }),
+    /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: o("Ask AI") }),
     /* @__PURE__ */ e.jsx(
-      jr,
+      wr,
       {
         ref: c,
         value: s,
         onChange: (p) => d(p.target.value),
-        placeholder: a("Ask AI to edit styles"),
+        placeholder: o("Ask AI to edit styles"),
         className: "w-full border border-gray-400 focus:border-0",
         rows: 3,
         onKeyDown: (p) => {
-          p.key === "Enter" && (p.preventDefault(), t("styles", r, s, o));
+          p.key === "Enter" && (p.preventDefault(), t("styles", r, s, n));
         }
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 my-2", children: [
-      n ? null : /* @__PURE__ */ e.jsx(
-        A,
+      a ? null : /* @__PURE__ */ e.jsx(
+        B,
         {
-          disabled: s.trim().length < 5 || n,
-          onClick: () => t("styles", r, s, o),
+          disabled: s.trim().length < 5 || a,
+          onClick: () => t("styles", r, s, n),
           variant: "default",
           className: "w-fit",
           size: "sm",
-          children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
             /* @__PURE__ */ e.jsx(Pr, { className: "w-5 h-5 animate-spin" }),
-            a("Generating... Please wait")
-          ] }) : a("Edit with AI")
+            o("Generating... Please wait")
+          ] }) : o("Edit with AI")
         }
       ),
-      n ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e.jsxs(wr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
+      a ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ e.jsxs(jr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
           /* @__PURE__ */ e.jsx(Cr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
-          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
+          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: o("Generating... Please wait") })
         ] }),
-        /* @__PURE__ */ e.jsx(A, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
+        /* @__PURE__ */ e.jsx(B, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: o("Stop") })
       ] }) : null
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: l.message }) })
   ] });
-}, Oe = new Wr(Ur, {
+}, Oe = new Ur(Kr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function ut() {
+function pt() {
   var S;
-  const { t: r } = B(), [a] = pe(), t = G(), n = Te(), l = nt(), [s] = it(), d = lt("askAiCallBack", null), [c, o] = j(""), { toast: p } = dt(), h = (S = ae(a)) == null ? void 0 : S.prop, i = St((y(t, h, "").replace(Kr, "").split(",").pop() || "").split(" "), m), u = () => {
-    const w = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    n(s, w, !0), o("");
-  }, [x, g] = j([]), v = ({ value: w }) => {
-    const D = w.trim().toLowerCase(), Z = D.match(/.+:/g);
+  const { t: r } = I(), [o] = pe(), t = U(), a = Te(), l = at(), [s] = nt(), d = ot("askAiCallBack", null), [c, n] = w(""), { toast: p } = it(), h = (S = oe(o)) == null ? void 0 : S.prop, i = _t((y(t, h, "").replace(qr, "").split(",").pop() || "").split(" "), m), u = () => {
+    const j = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a(s, j, !0), n("");
+  }, [x, g] = w([]), v = ({ value: j }) => {
+    const D = j.trim().toLowerCase(), Z = D.match(/.+:/g);
     let b = [];
     if (Z && Z.length > 0) {
       const [f] = Z, N = D.replace(f, "");
@@ -562,17 +582,17 @@ function ut() {
     return g(_(b, "item"));
   }, C = () => {
     g([]);
-  }, U = (w) => w.name, L = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), K = {
+  }, K = (j) => j.name, L = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), G = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("Enter classes separated by space"),
     value: c,
-    onKeyDown: (w) => {
-      w.key === "Enter" && c.trim() !== "" && u();
+    onKeyDown: (j) => {
+      j.key === "Enter" && c.trim() !== "" && u();
     },
-    onChange: (w, { newValue: D }) => o(D),
+    onChange: (j, { newValue: D }) => n(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, q = () => {
     if (navigator.clipboard === void 0) {
@@ -597,28 +617,28 @@ function ut() {
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
             /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(Bt, { onClick: q, className: "cursor-pointer" }) }),
-              /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
+              /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(Dt, { onClick: q, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
-          d ? /* @__PURE__ */ e.jsxs(Qe, { children: [
-            /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
+          d ? /* @__PURE__ */ e.jsxs(Je, { children: [
+            /* @__PURE__ */ e.jsx(Qe, { children: /* @__PURE__ */ e.jsxs(B, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
               /* @__PURE__ */ e.jsx(Ar, { className: "h-4 w-4" }),
               /* @__PURE__ */ e.jsx("span", { className: "ml-2", children: r("Ask AI") })
             ] }) }),
-            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(as, { blockId: t == null ? void 0 : t._id }) })
+            /* @__PURE__ */ e.jsx(et, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(as, { blockId: t == null ? void 0 : t._id }) })
           ] }) : null
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Zr,
+            Wr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: v,
               onSuggestionsClearRequested: C,
-              getSuggestionValue: U,
+              getSuggestionValue: K,
               renderSuggestion: L,
-              inputProps: K,
+              inputProps: G,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -630,7 +650,7 @@ function ut() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            A,
+            B,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
@@ -642,41 +662,41 @@ function ut() {
           )
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ne.Children.toArray(
-          i.map((w) => /* @__PURE__ */ e.jsxs(
+          i.map((j) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-gray-300 bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300",
               children: [
-                w,
+                j,
                 /* @__PURE__ */ e.jsx(
-                  Ge,
+                  Ke,
                   {
-                    onClick: () => l(s, [w]),
+                    onClick: () => l(s, [j]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            w
+            j
           ))
         ) })
       ]
     }
   );
 }
-const ls = ({ onAdd: r }) => {
-  const { t: a } = B(), [t, n] = j({ key: "", value: "" }), l = () => {
-    m(t.key) || (r({ ...t, key: t.key }), n({ key: "", value: "" }));
+const ns = ({ onAdd: r }) => {
+  const { t: o } = I(), [t, a] = w({ key: "", value: "" }), l = () => {
+    m(t.key) || (r({ ...t, key: t.key }), a({ key: "", value: "" }));
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200", children: [
     /* @__PURE__ */ e.jsx(
-      je,
+      we,
       {
         name: "key",
         className: "h-6",
-        onChange: (s) => n({ ...t, key: s.target.value }),
+        onChange: (s) => a({ ...t, key: s.target.value }),
         value: t.key,
-        placeholder: a("Name"),
+        placeholder: o("Name"),
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (s) => {
@@ -685,13 +705,13 @@ const ls = ({ onAdd: r }) => {
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-1.5", children: /* @__PURE__ */ e.jsx(
-      je,
+      we,
       {
         className: "h-6",
         name: "value",
-        onChange: (s) => n({ ...t, value: s.target.value }),
+        onChange: (s) => a({ ...t, value: s.target.value }),
         value: t.value,
-        placeholder: a("Value"),
+        placeholder: o("Value"),
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (s) => {
@@ -700,27 +720,27 @@ const ls = ({ onAdd: r }) => {
       }
     ) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsxs(A, { disabled: m(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
+      /* @__PURE__ */ e.jsxs(B, { disabled: m(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
         /* @__PURE__ */ e.jsxs("span", { children: [
-          a("Add"),
+          o("Add"),
           " "
         ] }),
         /* @__PURE__ */ e.jsx(_e, {})
       ] }),
-      m(t.key) ? null : /* @__PURE__ */ e.jsx(A, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: a("Cancel") })
+      m(t.key) ? null : /* @__PURE__ */ e.jsx(B, { variant: "ghost", onClick: () => a({ key: "", value: "" }), children: o("Cancel") })
     ] })
   ] });
-}, os = () => {
-  const r = G(), [a, t] = j([]), [n] = pe(), l = st(), s = at(), { t: d } = B(), { toast: c } = dt(), o = `${y(n, "0.prop")}_attrs`;
+}, is = () => {
+  const r = U(), [o, t] = w([]), [a] = pe(), l = rt(), s = st(), { t: d } = I(), { toast: c } = it(), n = `${y(a, "0.prop")}_attrs`;
   ne.useEffect(() => {
-    const u = _(y(r, o), (x, g) => ({ key: g, value: x }));
+    const u = _(y(r, n), (x, g) => ({ key: g, value: x }));
     m(u) ? t([]) : t(u);
-  }, [y(r, o)]);
+  }, [y(r, n)]);
   const p = (u) => {
-    const x = ye(a, (g, v) => u !== v);
+    const x = ye(o, (g, v) => u !== v);
     i(x);
   }, h = (u) => {
-    const x = Ze(a, { key: u.key });
+    const x = Ze(o, { key: u.key });
     if (x && (x.value.startsWith("dnd-") || x.value.startsWith("#dnd-"))) {
       c({
         title: d("Cannot add predefined attribute"),
@@ -729,24 +749,24 @@ const ls = ({ onAdd: r }) => {
       });
       return;
     }
-    const g = [...a, u];
+    const g = [...o, u];
     i(g);
   }, i = ne.useCallback(
     (u = []) => {
       const x = {};
       Ne(u, (g) => {
         m(g.key) || We(x, g.key, g.value);
-      }), s([y(r, "_id")], { [o]: x });
+      }), s([y(r, "_id")], { [n]: x });
     },
-    [r, l, o]
+    [r, l, n]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 text-xs text-gray-700", children: [
-      m(a) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No attributes added") }) }) : null,
+      m(o) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No attributes added") }) }) : null,
       ne.Children.toArray(
-        _(a, (u) => /* @__PURE__ */ e.jsxs("li", { className: "group flex w-full max-w-full items-center justify-between", children: [
+        _(o, (u) => /* @__PURE__ */ e.jsxs("li", { className: "group flex w-full max-w-full items-center justify-between", children: [
           /* @__PURE__ */ e.jsxs($, { delayDuration: 1e3, children: [
-            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-[230px] cursor-default truncate px-1 hover:bg-gray-200", children: [
+            /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-[230px] cursor-default truncate px-1 hover:bg-gray-200", children: [
               u.key,
               u.value.trim() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                 " ",
@@ -755,7 +775,7 @@ const ls = ({ onAdd: r }) => {
                 u.value.trim()
               ] }) : null
             ] }) }),
-            /* @__PURE__ */ e.jsxs(E, { className: "max-w-[200px]", children: [
+            /* @__PURE__ */ e.jsxs(M, { className: "max-w-[200px]", children: [
               /* @__PURE__ */ e.jsxs("div", { children: [
                 d("Name"),
                 ": ",
@@ -769,24 +789,24 @@ const ls = ({ onAdd: r }) => {
             ] })
           ] }),
           /* @__PURE__ */ e.jsxs($, { children: [
-            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+            /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
               "button",
               {
                 disabled: W(u.value, "dnd-"),
                 className: "invisible group-hover:visible",
-                onClick: () => p(a.indexOf(u)),
+                onClick: () => p(o.indexOf(u)),
                 children: /* @__PURE__ */ e.jsx($r, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(E, { className: "max-w-[200px]", children: W(u.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
+            /* @__PURE__ */ e.jsx(M, { className: "max-w-[200px]", children: W(u.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
           ] })
         ] }))
       )
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(ls, { onAdd: (u) => h(u) })
+    /* @__PURE__ */ e.jsx(ns, { onAdd: (u) => h(u) })
   ] }) });
-}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ns = {
+}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
@@ -795,7 +815,7 @@ const ls = ({ onAdd: r }) => {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, is = {
+}, cs = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -806,11 +826,11 @@ const ls = ({ onAdd: r }) => {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ds = [
+}, ps = [
   {
     heading: "Styles",
     items: [
-      { component: ut },
+      { component: pt },
       { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
       { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
       {
@@ -870,9 +890,9 @@ const ls = ({ onAdd: r }) => {
   },
   {
     heading: "Attributes",
-    items: [{ component: os }]
+    items: [{ component: is }]
   }
-], Sa = [
+], Vo = [
   {
     heading: "layout.heading",
     items: [
@@ -1274,12 +1294,12 @@ const ls = ({ onAdd: r }) => {
   },
   {
     heading: "classes.heading",
-    items: [{ component: ut }]
+    items: [{ component: pt }]
   }
-], gt = {
+], ut = {
   "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: It,
+  visible: Bt,
   invisible: Be,
   // display
   hidden: Be,
@@ -1315,10 +1335,10 @@ const ls = ({ onAdd: r }) => {
   borderRadiusRight: Q,
   borderRadiusBottom: ee,
   borderRadiusLeft: te,
-  borderRadiusTopLeft: Pt,
-  borderRadiusTopRight: At,
-  borderRadiusBottomRight: $t,
-  borderRadiusBottomLeft: Mt,
+  borderRadiusTopLeft: It,
+  borderRadiusTopRight: Pt,
+  borderRadiusBottomRight: At,
+  borderRadiusBottomLeft: $t,
   divideXWidth: R,
   divideYWidth: V,
   scale: Y,
@@ -1346,17 +1366,17 @@ const ls = ({ onAdd: r }) => {
   marginLeft: te,
   // text-align
   textLeft: Et,
-  textCenter: Lt,
-  textRight: Ot,
-  textJustify: zt,
+  textCenter: Mt,
+  textRight: Lt,
+  textJustify: Ot,
   // font style
-  italic: Yt,
+  italic: zt,
   // "not-italic": "",
   // decoration
-  underline: Ft,
+  underline: Yt,
   overline: Xt,
   // transform
-  uppercase: Zt,
+  uppercase: Ft,
   block: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
       "path",
@@ -1397,7 +1417,7 @@ const ls = ({ onAdd: r }) => {
       }
     )
   ] }),
-  "float-none": Ge,
+  "float-none": Ke,
   // 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(
@@ -1469,101 +1489,101 @@ const ls = ({ onAdd: r }) => {
       }
     )
   ] }),
-  static: Wt
-}, le = Xe({ canReset: !1, canChange: !0 }), cs = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
+  static: Zt
+}, le = Fe({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: a, canChange: t }, children: r })
-), xt = ({ label: r, property: a, onChange: t }) => {
-  const n = T(() => y(ge, `${a}.classes`, [""]), [a]), l = oe(a), s = T(() => y(l, "cls", ""), [l]), { canChange: d } = se(le), c = /\[.*\]/g.test(s);
+  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: o, canChange: t }, children: r })
+), gt = ({ label: r, property: o, onChange: t }) => {
+  const a = T(() => y(ge, `${o}.classes`, [""]), [o]), l = ae(o), s = T(() => y(l, "cls", ""), [l]), { canChange: d } = se(le), c = /\[.*\]/g.test(s);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(je, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
+    /* @__PURE__ */ e.jsx(we, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
     /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
-      /* @__PURE__ */ e.jsx(E, { children: "Current value is using a Tailwind arbitrary value." })
+      /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
+      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
     ke,
     {
       rounded: r,
-      onChange: (o) => t(o, a),
+      onChange: (n) => t(n, o),
       selected: s,
-      options: n,
+      options: a,
       disabled: !d
     }
   ) });
 };
-function ke({ selected: r, onChange: a, rounded: t = !1, options: n, disabled: l = !1 }) {
+function ke({ selected: r, onChange: o, rounded: t = !1, options: a, disabled: l = !1 }) {
   const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = kr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !n.length || l,
+      disabled: !a.length || l,
       className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (o) => a(o.target.value),
-      onKeyDown: (o) => {
-        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && c());
+      onChange: (n) => o(n.target.value),
+      onKeyDown: (n) => {
+        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && c());
       },
       value: s,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        I.Children.toArray(
-          n.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
+        P.Children.toArray(
+          a.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
-const ps = ({ property: r, onChange: a }) => {
-  const { canReset: t, canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]), d = T(() => y(ge, `${r}.classes`, [""]), [r]), c = d.indexOf(s) > -1 ? d.indexOf(s) : 0, o = /\[.*\]/g.test(s);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const gs = ({ property: r, onChange: o }) => {
+  const { canReset: t, canChange: a } = se(le), l = ae(r), s = T(() => y(l, "cls", ""), [l]), d = T(() => y(ge, `${r}.classes`, [""]), [r]), c = d.indexOf(s) > -1 ? d.indexOf(s) : 0, n = /\[.*\]/g.test(s);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__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: !n && (!t || c - 1 < 0),
-        onClick: () => a(He(d, c - 1), r),
+        disabled: !a && (!t || c - 1 < 0),
+        onClick: () => o(He(d, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ut,
+          Wt,
           {
-            className: !n && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(xt, { label: !1, property: r, onChange: a }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(gt, { label: !1, property: r, onChange: o }) }),
     /* @__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: !n && (!t || c + 1 >= d.length),
-        onClick: () => a(He(d, c + 1), r),
+        disabled: !a && (!t || c + 1 >= d.length),
+        onClick: () => o(He(d, c + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           _e,
           {
-            className: !n && (!t || c + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!t || c + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, us = ({ property: r, onChange: a }) => {
-  const t = T(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]);
+}, xs = ({ property: r, onChange: o }) => {
+  const t = T(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: a } = se(le), l = ae(r), s = T(() => y(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: _(t, (d) => /* @__PURE__ */ e.jsxs($, { children: [
-    /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !n,
-        onClick: () => a(d, r),
+        disabled: !a,
+        onClick: () => o(d, r),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${s === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: I.createElement(y(gt, d, Ke))
+        children: P.createElement(y(ut, d, Ge))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(E, { children: X(re(d)) })
+    /* @__PURE__ */ e.jsx(M, { children: F(re(d)) })
   ] })) });
-}, gs = {
+}, ys = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1575,15 +1595,15 @@ const ps = ({ property: r, onChange: a }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, xs = ({ property: r, onChange: a }) => {
-  const t = oe(r), n = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = j([]), [c, o] = j({ color: "", shade: "" }), p = n.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), u = H(
+}, hs = ({ property: r, onChange: o }) => {
+  const t = ae(r), a = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = w([]), [c, n] = w({ color: "", shade: "" }), p = a.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), u = H(
     // eslint-disable-next-line no-shadow
     (g) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), o({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: g, shade: v.shade ? v.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), n({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((v) => ({ ...v, color: g, shade: v.shade ? v.shade : "500" })));
     },
-    [d, o]
+    [d, n]
   );
-  P(() => {
+  A(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
@@ -1591,16 +1611,16 @@ const ps = ({ property: r, onChange: a }) => {
   const x = H(
     // eslint-disable-next-line no-shadow
     (g) => {
-      o({ color: h, shade: g });
+      n({ color: h, shade: g });
     },
     [h]
   );
-  return P(() => {
-    o({ color: "", shade: "" });
-  }, [t]), P(() => {
-    const v = `${y(gs, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    v.match(new RegExp(y(ge, `${r}.regExp`, ""))) && a(v, r);
-  }, [c, a, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+  return A(() => {
+    n({ color: "", shade: "" });
+  }, [t]), A(() => {
+    const v = `${y(ys, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    v.match(new RegExp(y(ge, `${r}.regExp`, ""))) && o(v, r);
+  }, [c, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       ke,
       {
@@ -1642,18 +1662,18 @@ const ps = ({ property: r, onChange: a }) => {
     ) }),
     /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ke, { rounded: !0, selected: i, disabled: !h || !l, onChange: x, options: s }) })
   ] });
-}, ze = (r, a) => {
+}, ze = (r, o) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && a.includes(t))
+  if ((t === "auto" || t === "none") && o.includes(t))
     return { value: "", unit: t };
-  const n = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(n, "");
-  const l = r.match(n), s = l && l.length > 1, d = !m(t) && Number.isNaN(Number(t));
+  const a = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(a, "");
+  const l = r.match(a), s = l && l.length > 1, d = !m(t) && Number.isNaN(Number(t));
   return s || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const ys = (r) => {
-  const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const bs = (r) => {
+  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1662,22 +1682,22 @@ const ys = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (F(r, "skew-"))
-    return { value: `${a}${t}`, unit: "deg" };
-  if (F(r, "rotate-"))
-    return { value: `${a}${t}`, unit: "deg" };
-  if (F(r, "opacity-"))
+  if (X(r, "skew-"))
+    return { value: `${o}${t}`, unit: "deg" };
+  if (X(r, "rotate-"))
+    return { value: `${o}${t}`, unit: "deg" };
+  if (X(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (F(r, "duration-") || F(r, "delay-"))
+  if (X(r, "duration-") || X(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (F(r, "translate-") && !t.includes("/"))
-    return { value: `${a}${`${t / 4}`}`, unit: "rem" };
-  if (F(r, "scale-"))
-    return { value: `${a}${`${t / 100}`}`, unit: "-" };
+  if (X(r, "translate-") && !t.includes("/"))
+    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
+  if (X(r, "scale-"))
+    return { value: `${o}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
-    const n = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (n)
-      return { value: n[0].split("-").pop(), unit: "px" };
+    const a = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (a)
+      return { value: a[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1776,43 +1796,43 @@ const ys = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [n, l] = _(t.split("/"), (s) => parseInt(s, 10));
-    return { value: a + (n / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [a, l] = _(t.split("/"), (s) => parseInt(s, 10));
+    return { value: o + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Tt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return St(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const hs = (r) => {
+const ms = (r) => {
   if (m(r))
     return { value: "", unit: "" };
-  const a = r.match(/\[.*\]/g);
-  if (a === null)
-    return bs(r);
-  const t = y(a, "0", "").replace(/\[|\]/g, ""), n = r.startsWith("-") ? "-" : "", l = ae(t.match(/\d+.\d+|\d+/g));
-  return { value: `${n}${l}`, unit: t.replace(l, "") };
-}, bs = (r) => m(r) ? { value: "", unit: "" } : ys(r), yt = I.createContext({
+  const o = r.match(/\[.*\]/g);
+  if (o === null)
+    return fs(r);
+  const t = y(o, "0", "").replace(/\[|\]/g, ""), a = r.startsWith("-") ? "-" : "", l = oe(t.match(/\d+.\d+|\d+/g));
+  return { value: `${a}${l}`, unit: t.replace(l, "") };
+}, fs = (r) => m(r) ? { value: "", unit: "" } : bs(r), xt = P.createContext({
   setDragData: () => {
   }
-}), ms = ({
+}), vs = ({
   unit: r,
-  currentValue: a,
+  currentValue: o,
   onDrag: t,
-  onDragEnd: n,
+  onDragEnd: a,
   onDragStart: l,
   negative: s,
   cssProperty: d
 }) => {
-  const { setDragData: c } = se(yt);
+  const { setDragData: c } = se(xt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (o) => {
+      onMouseDown: (n) => {
         const p = {
           onDrag: t,
-          onDragEnd: n,
+          onDragEnd: a,
           dragging: !0,
-          dragStartY: o.pageY,
-          dragStartValue: `${a}`,
+          dragStartY: n.pageY,
+          dragStartValue: `${o}`,
           dragUnit: r,
           negative: s,
           cssProperty: d
@@ -1821,34 +1841,34 @@ const hs = (r) => {
       },
       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(Gt, {})
+      children: /* @__PURE__ */ e.jsx(Ut, {})
     }
   );
-}, fs = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((n) => /* @__PURE__ */ e.jsx(
-  A,
+}, ws = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((a) => /* @__PURE__ */ e.jsx(
+  B,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: a === n ? "primary" : void 0,
+    color: o === a ? "primary" : void 0,
     size: "sm",
     onClick: (l) => {
-      l.stopPropagation(), r(n);
+      l.stopPropagation(), r(a);
     },
-    children: n
+    children: a
   },
-  n
-)) }), Ye = 50, vs = (r) => {
-  const [a, t] = j(!1), [n, l] = j(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: o, units: p, negative: h } = r, [i, u] = j(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, g] = j(!1), [v, C] = j(""), [U, L] = j(!1), [K, q] = j(!1);
-  P(() => {
-    const { value: b, unit: f } = hs(s);
+  a
+)) }), Ye = 50, js = (r) => {
+  const [o, t] = w(!1), [a, l] = w(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: n, units: p, negative: h } = r, [i, u] = w(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [x, g] = w(!1), [v, C] = w(""), [K, L] = w(!1), [G, q] = w(!1);
+  A(() => {
+    const { value: b, unit: f } = ms(s);
     if (f === "") {
-      l(b), u(o != null && o.toLowerCase().includes("width") ? "%" : ae(p));
+      l(b), u(n != null && n.toLowerCase().includes("width") ? "%" : oe(p));
       return;
     }
     u(f), l(f === "class" || m(b) ? "" : b);
-  }, [s, o, p]);
-  const S = de((b) => d(b), [d], Ye), w = de((b) => d(b, !1), [d], Ye), D = H(
+  }, [s, n, p]);
+  const S = de((b) => d(b), [d], Ye), j = de((b) => d(b, !1), [d], Ye), D = H(
     (b = !1) => {
-      const f = ze(`${n}`, p);
+      const f = ze(`${a}`, p);
       if (y(f, "error", !1)) {
         g(!0);
         return;
@@ -1861,12 +1881,12 @@ const hs = (r) => {
       if (y(f, "value") === "")
         return;
       const z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      b ? w(z) : S(z);
+      b ? j(z) : S(z);
     },
-    [S, w, n, i, c, p]
+    [S, j, a, i, c, p]
   ), Z = H(
     (b) => {
-      const f = ze(`${n}`, p);
+      const f = ze(`${a}`, p);
       if (y(f, "error", !1)) {
         g(!0);
         return;
@@ -1880,15 +1900,15 @@ const hs = (r) => {
       const N = y(f, "unit") !== "" ? y(f, "unit") : b, z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
       S(z);
     },
-    [S, n, c, p]
+    [S, a, c, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: i === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: s }),
     /* @__PURE__ */ e.jsxs($, { children: [
-      /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
-      /* @__PURE__ */ e.jsx(E, { children: "Current value is using a Tailwind preset class." })
+      /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Se, {}) }) }),
+      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${U ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${K ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
@@ -1901,14 +1921,14 @@ const hs = (r) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
             b.preventDefault(), q(!0);
-            const f = Rt(b.target.value);
+            const f = Tt(b.target.value);
             let N = Ue(f) ? 0 : f;
             b.keyCode === 38 && (N += 1), b.keyCode === 40 && (N -= 1);
-            const O = `${N}`, bt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
-            w(bt);
+            const O = `${N}`, ht = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
+            j(ht);
           },
           onKeyUp: (b) => {
-            K && (b.preventDefault(), q(!1));
+            G && (b.preventDefault(), q(!1));
           },
           onBlur: () => D(),
           onChange: (b) => {
@@ -1918,19 +1938,19 @@ const hs = (r) => {
             var f;
             (f = b == null ? void 0 : b.target) == null || f.select(), t(!1);
           },
-          value: U ? v : n,
+          value: K ? v : a,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs($, { open: a, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs($, { open: o, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!a),
+            onClick: () => t(!o),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
@@ -1938,8 +1958,8 @@ const hs = (r) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          fs,
+        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ws,
           {
             units: p,
             current: i,
@@ -1950,8 +1970,8 @@ const hs = (r) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(i) !== -1 || U ? null : /* @__PURE__ */ e.jsx(
-      ms,
+    ["none", "auto"].indexOf(i) !== -1 || K ? null : /* @__PURE__ */ e.jsx(
+      vs,
       {
         onDragStart: () => L(!0),
         onDragEnd: (b) => {
@@ -1965,19 +1985,19 @@ const hs = (r) => {
             return;
           C(b);
           const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          w(O);
+          j(O);
         },
-        currentValue: n,
+        currentValue: a,
         unit: i,
         negative: h,
-        cssProperty: o
+        cssProperty: n
       }
     )
   ] }) }) });
-}, oe = (r) => {
-  const a = ue();
-  return Vt(a, { property: r });
-}, js = (r, a) => {
+}, ae = (r) => {
+  const o = ue();
+  return Rt(o, { property: r });
+}, Cs = (r, o) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1986,8 +2006,8 @@ const hs = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[y(r, "mq", "xs")] <= t[a];
-}, ws = {
+  return t[y(r, "mq", "xs")] <= t[o];
+}, ks = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2053,64 +2073,64 @@ const hs = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Fe = {
+}, Xe = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Cs = (r) => `${r.toUpperCase()} ${Fe[r] ? `(${Fe[r]} & up)` : ""}`, Ve = (r) => {
-  const { t: a } = B(), { type: t = "icons", label: n, property: l, onEmitChange: s = () => {
-  }, units: d, negative: c = !1 } = r, [o] = _r(), [p] = Sr(), [, h] = Ie(), i = oe(l), u = Te(), x = nt(), [g] = it(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
-    (w, D = !0) => {
-      const Z = { dark: o, mq: h, mod: p, cls: w, property: l, fullCls: "" };
-      (o || p !== "") && (Z.mq = "xs");
+}, Ns = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
+  const { t: o } = I(), { type: t = "icons", label: a, property: l, onEmitChange: s = () => {
+  }, units: d, negative: c = !1 } = r, [n] = _r(), [p] = Sr(), [, h] = Ie(), i = ae(l), u = Te(), x = at(), [g] = nt(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
+    (j, D = !0) => {
+      const Z = { dark: n, mq: h, mod: p, cls: j, property: l, fullCls: "" };
+      (n || p !== "") && (Z.mq = "xs");
       const b = Gr(Z);
       u(g, [b], D);
     },
-    [g, o, h, p, l, u]
-  ), U = H(() => {
+    [g, n, h, p, l, u]
+  ), K = H(() => {
     x(g, [v]);
-  }, [g, v, x]), L = T(() => js(i, h), [i, h]);
-  P(() => {
+  }, [g, v, x]), L = T(() => Cs(i, h), [i, h]);
+  A(() => {
     s(L, i);
   }, [L, s, i]);
-  const [, , K] = Ie(), q = H(
-    (w) => {
-      K({
+  const [, , G] = Ie(), q = H(
+    (j) => {
+      G({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[w]);
+      }[j]);
     },
-    [K]
-  ), S = y(i, "dark", null) === o && y(i, "mod", null) === p && y(i, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(cs, { canChange: L, canReset: i && S, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${i && !S ? "text-foreground" : ""}`, children: a(n) }) }),
+    [G]
+  ), S = y(i, "dark", null) === n && y(i, "mod", null) === p && y(i, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(us, { canChange: L, canReset: i && S, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${i && !S ? "text-foreground" : ""}`, children: o(a) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          vs,
+          js,
           {
             currentClass: y(i, "cls", ""),
-            classPrefix: y(ws, l, ""),
+            classPrefix: y(ks, l, ""),
             units: d || [],
             onChange: C,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(us, { property: l, onChange: C }),
-        t === "range" && /* @__PURE__ */ e.jsx(ps, { property: l, onChange: C }),
-        t === "color" && /* @__PURE__ */ e.jsx(xs, { property: l, onChange: C }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: n, property: l, onChange: C })
+        t === "icons" && /* @__PURE__ */ e.jsx(xs, { property: l, onChange: C }),
+        t === "range" && /* @__PURE__ */ e.jsx(gs, { property: l, onChange: C }),
+        t === "color" && /* @__PURE__ */ e.jsx(hs, { property: l, onChange: C }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(gt, { label: a, property: l, onChange: C })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => U(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(qt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => K(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Gt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
@@ -2118,11 +2138,11 @@ const hs = (r) => {
             children: /* @__PURE__ */ e.jsx(Se, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold", children: [
-            Cs(y(i, "mq")),
-            o && !i.dark ? "(Light mode)" : ""
+            Ns(y(i, "mq")),
+            n && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
@@ -2141,40 +2161,40 @@ const hs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, ks = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
+}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], yt = ({
   label: r,
-  options: a,
+  options: o,
   borderB: t = !1,
-  borderT: n = !1,
+  borderT: a = !1,
   type: l = "arbitrary",
-  units: s = ks,
+  units: s = _s,
   negative: d = !1
 }) => {
-  const { t: c } = B(), [o, p] = j(a[0].key), h = ue(), i = H((u) => _(h, "property").includes(u), [h]);
+  const { t: c } = I(), [n, p] = w(o[0].key), h = ue(), i = H((u) => _(h, "property").includes(u), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${n ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${a ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
-            a.map(({ label: u, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
+            o.map(({ label: u, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
+              /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => p(x),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === o ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === n ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    I.createElement("div", {
+                    P.createElement("div", {
                       className: i(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    I.createElement(y(gt, x, Ke), { className: "text-inherit w-3 h-3" })
+                    P.createElement(y(ut, x, Ge), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(E, { children: X(re(u)) })
+              /* @__PURE__ */ e.jsx(M, { children: F(re(u)) })
             ] }) }))
           ) })
         ] }),
@@ -2184,22 +2204,22 @@ const hs = (r) => {
             type: l,
             units: [...s],
             label: "",
-            property: o,
+            property: n,
             negative: d
           }
         ) })
       ]
     }
   );
-}, Ns = ({ heading: r, items: a }) => {
-  const { t } = B(), n = ue(), l = T(() => {
-    const s = (o) => De(
-      o.map((p) => p.styleType === "multiple" ? _(p.options, "key") : p.property)
+}, Ss = ({ heading: r, items: o }) => {
+  const { t } = I(), a = ue(), l = T(() => {
+    const s = (n) => De(
+      n.map((p) => p.styleType === "multiple" ? _(p.options, "key") : p.property)
     ), d = De(
-      a.map((o) => o.styleType === "accordion" ? s(o.items) : o.styleType === "multiple" ? _(o.options, "key") : o.property)
-    ), c = _(n, "property");
-    return Ht(d, c).length > 0;
-  }, [n, a]);
+      o.map((n) => n.styleType === "accordion" ? s(n.items) : n.styleType === "multiple" ? _(n.options, "key") : n.property)
+    ), c = _(a, "property");
+    return Vt(d, c).length > 0;
+  }, [a, o]);
   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),
@@ -2210,17 +2230,17 @@ const hs = (r) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...s }, s.label) : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label)) })
   ] });
-}, _s = Xe({}), xe = ({ section: r }) => {
-  const { t: a } = B(), t = ue(), n = H(
+}, Ts = Fe({}), xe = ({ section: r }) => {
+  const { t: o } = I(), t = ue(), a = H(
     (s = []) => {
       const d = {};
-      for (let o = 0; o < t.length; o++)
-        d[t[o].property] = t[o].cls;
+      for (let n = 0; n < t.length; n++)
+        d[t[n].property] = t[n].cls;
       let c = !0;
-      for (const o in s)
-        if (!ie(d, o) || d[o] !== s[o]) {
+      for (const n in s)
+        if (!ie(d, n) || d[n] !== s[n]) {
           c = !1;
           break;
         }
@@ -2228,26 +2248,26 @@ const hs = (r) => {
     },
     [t]
   ), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(_s.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: a(r.heading) }) }),
-    /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      r.items.map((s) => ie(s, "component") ? I.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && n(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ns, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
+  return /* @__PURE__ */ e.jsx(Ts.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: o(r.heading) }) }),
+    /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
+      r.items.map((s) => ie(s, "component") ? P.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...s }, s.label) : s.styleType === "accordion" && a(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ss, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
     ) })
   ] }) });
-}, Ss = () => {
-  const r = G(), [a] = pe(), { t } = B(), n = Er(), l = Te(), s = Re(r._type), d = y(ae(a), "prop"), c = y(s.props, `${d}.presets`, {});
-  if (m(n) && (!ie(s, "props") || m(c)))
+}, Rs = () => {
+  const r = U(), [o] = pe(), { t } = I(), a = Mr(), l = Te(), s = Re(r._type), d = y(oe(o), "prop"), c = y(s.props, `${d}.presets`, {});
+  if (m(a) && (!ie(s, "props") || m(c)))
     return null;
-  const o = (p) => {
+  const n = (p) => {
     const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l([r._id], h, !0);
   };
   return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Tr, { children: [
-    /* @__PURE__ */ e.jsx(Rr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "w-full", size: "sm", children: [
+    /* @__PURE__ */ e.jsx(Rr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(B, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(Jt, {})
+      /* @__PURE__ */ e.jsx(qt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Vr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Vr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar h-full", children: [
       m(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsxs(Pe, { children: [
           s.type,
@@ -2255,37 +2275,34 @@ const hs = (r) => {
           t("presets")
         ] }),
         /* @__PURE__ */ e.jsx(Ae, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(c[p]), children: [
-          be(X(t(p))),
-          /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+        /* @__PURE__ */ e.jsx($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => n(c[p]), children: [
+          be(F(t(p))),
+          /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      m(n) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      m(a) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(Pe, { children: t("Global presets") }),
         /* @__PURE__ */ e.jsx(Ae, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(n).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(n[p]), children: [
-          be(X(t(p))),
-          /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+        /* @__PURE__ */ e.jsx($e, { children: he(a).map((p) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => n(a[p]), children: [
+          be(F(t(p))),
+          /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Ts() {
-  const { flexChild: r, gridChild: a } = Hr(), { t } = B(), [n] = pe();
-  return m(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(qe, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: t("no_styling_block_selected") })
-  ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Ss, {}),
-    /* @__PURE__ */ e.jsxs(ot, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: ns }),
-      a ? /* @__PURE__ */ e.jsx(xe, { section: is }) : null,
-      ds.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
+function Vs() {
+  const { flexChild: r, gridChild: o } = Hr(), [t] = pe();
+  return m(t) ? null : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsx(Rs, {}),
+    /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+      r && /* @__PURE__ */ e.jsx(xe, { section: ds }),
+      o ? /* @__PURE__ */ e.jsx(xe, { section: cs }) : null,
+      ps.map((a) => /* @__PURE__ */ e.jsx(xe, { section: a }, a.heading))
     ] })
   ] });
 }
-const Rs = {
+const Hs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2296,10 +2313,10 @@ const Rs = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Ta = () => {
-  const r = G(), { t: a } = B(), [t, n] = I.useState(""), [l, s] = I.useState({
-    onDrag: (o) => o,
-    onDragEnd: (o) => o,
+}, Ho = () => {
+  const r = U(), { t: o } = I(), [t, a] = P.useState(""), [l, s] = P.useState({
+    onDrag: (n) => n,
+    onDragEnd: (n) => n,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2307,21 +2324,21 @@ const Rs = {
     negative: !1,
     cssProperty: ""
   }), d = de(
-    (o) => {
+    (n) => {
       const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
       let i = parseFloat(l.dragStartValue);
       i = Ue(i) ? 0 : i;
-      let u = Rs[l.dragUnit];
+      let u = Hs[l.dragUnit];
       (W(h, "scale") || h === "opacity") && (u = 10);
-      let g = (l.dragStartY - o.pageY) / u + i;
-      p && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), n(`${g}`);
+      let g = (l.dragStartY - n.pageY) / u + i;
+      p && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), a(`${g}`);
     },
     [l],
     50
   ), c = H(() => {
     setTimeout(() => l.onDragEnd(`${t}`), 100), s({
-      onDrag: (o) => o,
-      onDragEnd: (o) => o,
+      onDrag: (n) => n,
+      onDragEnd: (n) => n,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2330,10 +2347,10 @@ const Rs = {
       cssProperty: ""
     });
   }, [l, t, s]);
-  return Dt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(qe, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: s }, children: [
+  return Ht(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+    /* @__PURE__ */ e.jsx(Jt, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(qe, { children: /* @__PURE__ */ e.jsxs(xt.Provider, { value: { setDragData: s }, children: [
     l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -2342,9 +2359,9 @@ const Rs = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
-      /* @__PURE__ */ e.jsx(ss, {}),
-      /* @__PURE__ */ e.jsx(Ts, {}),
+    /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
+      /* @__PURE__ */ e.jsx(ls, {}),
+      /* @__PURE__ */ e.jsx(Vs, {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {})
@@ -2352,5 +2369,5 @@ const Rs = {
   ] }) });
 };
 export {
-  Ta as default
+  Ho as default
 };