@chaibuilder/sdk 1.0.9 → 1.0.11

package/dist/{Settings-1c41c514.js → Settings-fH8fZKpm.js}

@@ -1,33 +1,37 @@
-import { j as e } from "./jsx-runtime-944c88e2.js";
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
 import * as ne from "react";
-import P, { useState as w, useEffect as E, useMemo as k, useCallback as A, createContext as Oe, useContext as re } from "react";
+import $, { useState as w, useEffect as E, useMemo as k, useCallback as A, createContext as Oe, useContext as re } from "react";
 import { useThrottledCallback as me } from "@react-hookz/web";
 import { map as C, isEmpty as b, last as ye, forEach as je, set as Me, get as p, startCase as Y, filter as be, truncate as it, isArray as ae, includes as M, first as we, split as dt, toLower as te, find as ct, omit as pt, keys as ut, cloneDeep as xt, each as gt, capitalize as ht, reject as mt, nth as Re, startsWith as z, isNumber as yt, parseInt as bt, isNaN as _e, findLast as ft, has as ge, flatten as U, intersection as Ee, isNull as vt } from "lodash";
 import { useTranslation as Fe } from "react-i18next";
-import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as jt, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as wt, ArrowTopRightIcon as Ct, ArrowBottomRightIcon as Nt, ArrowBottomLeftIcon as kt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Tt, AlignRightIcon as Rt, StretchHorizontallyIcon as Vt, FontItalicIcon as Ht, UnderlineIcon as Bt, OverlineIcon as At, LetterCaseUppercaseIcon as Dt, Cross1Icon as Pt, InfoCircledIcon as Ne, MinusIcon as $t, BoxIcon as Xe, TriangleDownIcon as It, RowSpacingIcon as Lt, TrashIcon as We, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { T as Ot, a as Mt, b as He, c as Be } from "./tabs-85caa1e8.js";
+import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as jt, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as wt, ArrowTopRightIcon as Ct, ArrowBottomRightIcon as Nt, ArrowBottomLeftIcon as kt, AlignLeftIcon as Tt, AlignCenterHorizontallyIcon as St, AlignRightIcon as Rt, StretchHorizontallyIcon as Vt, FontItalicIcon as Ht, UnderlineIcon as Bt, OverlineIcon as At, LetterCaseUppercaseIcon as Dt, Cross1Icon as $t, InfoCircledIcon as Ne, MinusIcon as Pt, BoxIcon as Xe, TriangleDownIcon as It, RowSpacingIcon as Lt, TrashIcon as We, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { T as Ot, a as Mt, b as He, c as Be } from "./tabs-Gb9v5dVb.js";
 import _t from "@rjsf/core";
 import Et from "@rjsf/validator-ajv8";
-import { D as G, E as Ft, d as ze, G as Ue, H as Yt, I as Xt, J as Wt, j as ke, K as Ge, L as Ke, i as qe, e as Zt, M as Je, f as Ae, N as pe, c as zt, O as Ut, P as Gt } from "./index-aa42febc.js";
-import { getChaiDataProviders as Kt, getBlockComponent as Qe, SingleLineText as qt } from "@chaibuilder/blocks";
-import { EditIcon as Jt, TrashIcon as Qt, Check as er } from "lucide-react";
-import { u as et } from "./useChaiExternalData-192c7896.js";
-import { l as X, m as W, n as Z, B as ue, o as tr } from "./useBuilderProp-21feb2da.js";
-import { D as rr, a as sr, b as lr, c as or, e as nr, f as ar, d as ir } from "./dialog-18207bef.js";
-import { P as dr, a as cr, b as pr } from "./popover-f7addcf4.js";
-import { C as ur, b as xr, c as gr, d as hr, e as mr, f as yr, I as br } from "./command-6f260f61.js";
-import { A as tt, a as ie, b as de, c as ce } from "./accordion-c0176dc5.js";
-import { R as fr, I as vr, a as jr, L as wr } from "./link-57de608a.js";
-import { useAtom as Cr } from "jotai";
-import Nr from "react-autosuggest";
-import kr from "fuse.js";
-import { A as Sr, C as xe, d as Tr } from "./html-to-json-45e0e3b5.js";
-import { L as Se } from "./label-e770a087.js";
-import { S as Rr } from "./MODIFIERS-2f19c314.js";
-import { S as Vr } from "./scroll-area-83bd9e8f.js";
-import { S as Hr, c as Br, b as Ar, d as Dr, f as H } from "./select-7fddd7c3.js";
+import { m as G, E as Ft, a as ze, q as ke, l as Ue, p as Yt, o as Xt, G as Wt } from "./ChaiBuilderEditor-hEuUONQ3.js";
+import { f as Ge, g as Zt, u as Ke, a as qe, d as Je, b as pe } from "./useLanguage-gVC5rxO5.js";
+import { g as zt, a as Ut } from "./controls-Ni5kEzLz.js";
+import { u as Gt } from "./controls-enQY7NI8.js";
+import { EditIcon as Kt, TrashIcon as qt, Check as Jt } from "lucide-react";
+import { T as X, a as W, c as Z, B as ue, e as Qt } from "./skeleton-CU_FIbg3.js";
+import { D as er, a as tr, b as rr, c as sr, e as or, f as lr, d as nr } from "./dialog-jrw9DF1f.js";
+import { P as ar, a as ir, b as dr } from "./popover-a84pbVhQ.js";
+import { C as cr, b as pr, c as ur, d as xr, e as gr, f as hr, I as mr } from "./command-VHca6CcN.js";
+import { A as yr, h as Qe } from "./index-ehKdBRUK.js";
+import { u as et } from "./useChaiExternalData-4K9WxANa.js";
+import { A as tt, a as ie, b as de, c as ce } from "./accordion-oPUeqPCZ.js";
+import { R as br, I as fr, a as vr, L as jr } from "./link-6o6n2Tnd.js";
+import { useAtom as wr } from "jotai";
+import Cr from "react-autosuggest";
+import Nr from "fuse.js";
+import { A as kr, C as xe, g as Tr } from "./Class-l7qYbuoN.js";
+import { L as Te } from "./label-KaP7MRrs.js";
+import { S as Sr } from "./MODIFIERS-DsEzQ3aH.js";
+import { a as Rr, u as Ae } from "./useDarkMode-ZKCO_gkt.js";
+import { S as Vr } from "./scroll-area-ewXbxc3n.js";
+import { S as Hr, c as Br, b as Ar, d as Dr, f as H } from "./select-POGdEDHT.js";
 import "@radix-ui/react-tabs";
-import "./utils-ac68b2c8.js";
+import "./utils-dze1SGvB.js";
 import "clsx";
 import "tailwind-merge";
 import "@radix-ui/react-scroll-area";
@@ -39,9 +43,8 @@ import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
+import "./functions-pcUZhFJM.js";
 import "redux-undo";
-import "sonner";
-import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
@@ -51,21 +54,20 @@ import "@radix-ui/react-popover";
 import "cmdk";
 import "@radix-ui/react-accordion";
 import "react-icons-picker";
-import "./ImagesPanel-47ac13c3.js";
+import "./ImagesPanel-oaHOD-Ex.js";
 import "react-quill";
-import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
-const Pr = P.lazy(() => import("react-json-view"));
-function $r(t) {
+const $r = $.lazy(() => import("react-json-view"));
+function Pr(t) {
   const s = [], r = {};
-  function l(o, a) {
+  function o(l, a) {
     je(a, (d, i) => {
-      const n = o ? `${o}.${i}` : i, u = ae(d) ? "list" : typeof d;
-      s.push(n), r[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && l(n, d);
+      const n = l ? `${l}.${i}` : i, u = ae(d) ? "list" : typeof d;
+      s.push(n), r[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && o(n, d);
     });
   }
-  return l("", pt(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
+  return o("", pt(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
 }
 const fe = ({ data: t, fullView: s }) => {
   if (!t)
@@ -74,7 +76,7 @@ const fe = ({ data: t, fullView: s }) => {
   return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(Ft, { children: /* @__PURE__ */ e.jsx(
-      Pr,
+      $r,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -93,21 +95,21 @@ const fe = ({ data: t, fullView: s }) => {
   type: t,
   value: s = "",
   setValue: r,
-  data: l,
-  onChange: o,
+  data: o,
+  onChange: l,
   dataType: a,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: n } = $r(l), u = t === "PROP" ? Qe(l == null ? void 0 : l._type) : {}, x = t === "PROP", [c, m] = w(!1), h = k(() => t === "PROP" ? i.filter(
+  const { paths: i, pathsType: n } = Pr(o), u = t === "PROP" ? Qe(o == null ? void 0 : o._type) : {}, x = t === "PROP", [c, m] = w(!1), h = k(() => t === "PROP" ? i.filter(
     (g) => !M(d, g) && p(u, `props.${we(dt(g, "."))}.binding`)
   ) : i.filter((g) => a === p(n, g, "")), [t, i, d, a, u]);
   return E(() => {
-    s && o(s);
+    s && l(s);
   }, [s, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(te(t)) }),
-      /* @__PURE__ */ e.jsxs(dr, { open: c, onOpenChange: m, children: [
-        /* @__PURE__ */ e.jsx(cr, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsxs(ar, { open: c, onOpenChange: m, children: [
+        /* @__PURE__ */ e.jsx(ir, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           ue,
           {
             variant: "outline",
@@ -125,24 +127,24 @@ const fe = ({ data: t, fullView: s }) => {
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(pr, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(ur, { children: [
-          /* @__PURE__ */ e.jsx(xr, { placeholder: `Choose ${te(t)}...` }),
-          /* @__PURE__ */ e.jsxs(gr, { children: [
-            /* @__PURE__ */ e.jsx(hr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(mr, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
-              yr,
+        /* @__PURE__ */ e.jsx(dr, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(cr, { children: [
+          /* @__PURE__ */ e.jsx(pr, { placeholder: `Choose ${te(t)}...` }),
+          /* @__PURE__ */ e.jsxs(ur, { children: [
+            /* @__PURE__ */ e.jsx(xr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(gr, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
+              hr,
               {
                 value: g,
                 className: `cursor-pointer ${x ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
-                  r(ct(h, (S) => S === f) || null), m(!1);
+                  r(ct(h, (T) => T === f) || null), m(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(er, { className: `w-4 h-4 text-green-500 ${s === g ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Jt, { className: `w-4 h-4 text-green-500 ${s === g ? "" : "opacity-0"}` }),
                     g
                   ] }),
-                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(n, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(fe, { data: p(l, g) }) })
+                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(n, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(fe, { data: p(o, g) }) })
                 ]
               },
               g
@@ -151,15 +153,15 @@ const fe = ({ data: t, fullView: s }) => {
         ] }) })
       ] })
     ] }),
-    !x && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(fe, { data: p(l, s, ""), fullView: !0 }) })
+    !x && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(fe, { data: p(o, s, ""), fullView: !0 }) })
   ] });
 }, Ir = ({
   appliedBindings: t = [],
   onAddBinding: s,
   editMode: r,
-  item: l
+  item: o
 }) => {
-  const [o, a] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), n = G(), [u] = et(), x = A(
+  const [l, a] = w(r ? o.key : ""), [d, i] = w(r ? o.value : ""), n = G(), [u] = et(), x = A(
     (h, g) => {
       if (b(h))
         return "";
@@ -167,16 +169,16 @@ const fe = ({ data: t, fullView: s }) => {
         const f = p(g === "PROP" ? n : u, h, "");
         if (ae(f))
           return "list";
-        const S = typeof f;
-        return S === "string" ? "text" : S === "object" ? "model" : S;
+        const T = typeof f;
+        return T === "string" ? "text" : T === "object" ? "model" : T;
       }
     },
     [n, u]
-  ), [c, m] = w(r ? x(l.key, "PROP") : "");
+  ), [c, m] = w(r ? x(o.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(or, { children: [
-      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(ar, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(sr, { children: [
+      /* @__PURE__ */ e.jsx(or, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(lr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
@@ -185,7 +187,7 @@ const fe = ({ data: t, fullView: s }) => {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: o,
+          value: l,
           setValue: a,
           onChange: (h) => {
             const g = x(h, "PROP");
@@ -201,7 +203,7 @@ const fe = ({ data: t, fullView: s }) => {
         De,
         {
           type: "PATH",
-          isDisabled: b(o),
+          isDisabled: b(l),
           placeholder: "Enter data path",
           value: d,
           setValue: i,
@@ -215,26 +217,26 @@ const fe = ({ data: t, fullView: s }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(nr, { children: /* @__PURE__ */ e.jsx(
       ue,
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(o) && b(d),
-        onClick: () => s({ key: o, value: d }),
+        disabled: b(l) && b(d),
+        onClick: () => s({ key: l, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, rt = ({ children: t, onAddBinding: s, appliedBindings: r, editMode: l = !0, item: o = {} }) => {
+}, rt = ({ children: t, onAddBinding: s, appliedBindings: r, editMode: o = !0, item: l = {} }) => {
   const [a, d] = w(!1);
-  return /* @__PURE__ */ e.jsxs(rr, { children: [
-    /* @__PURE__ */ e.jsx(sr, { asChild: !0, onClick: () => d(!0), children: t }),
-    a && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsxs(er, { children: [
+    /* @__PURE__ */ e.jsx(tr, { asChild: !0, onClick: () => d(!0), children: t }),
+    a && /* @__PURE__ */ e.jsx(rr, { children: /* @__PURE__ */ e.jsx(
       Ir,
       {
-        item: o,
-        editMode: l,
+        item: l,
+        editMode: o,
         appliedBindings: r,
         onAddBinding: (i) => {
           s(i), d(!1);
@@ -246,15 +248,15 @@ const fe = ({ data: t, fullView: s }) => {
   item: t,
   onAddBinding: s,
   onRemove: r,
-  selectedBlock: l,
-  dataProvider: o,
+  selectedBlock: o,
+  dataProvider: l,
   appliedBindings: a
 }) => {
   const [d, i] = w("string"), n = (u, x) => {
     if (b(u))
       return "";
     {
-      const c = p(x === "PROP" ? l : o, u, "");
+      const c = p(x === "PROP" ? o : l, u, "");
       if (ae(c))
         return "list";
       const m = typeof c;
@@ -264,11 +266,11 @@ const fe = ({ data: t, fullView: s }) => {
   return E(() => i(() => n(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
-    /* @__PURE__ */ e.jsx(fe, { data: p(o, t.value, "") }),
+    /* @__PURE__ */ e.jsx(fe, { data: p(l, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(rt, { editMode: !0, onAddBinding: s, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Jt, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(rt, { editMode: !0, onAddBinding: s, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Kt, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
-        Qt,
+        qt,
         {
           onClick: () => r(),
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
@@ -278,20 +280,20 @@ const fe = ({ data: t, fullView: s }) => {
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
 }, Or = ({ bindingData: t, onChange: s }) => {
-  const r = G(), [l] = et(), o = Kt(), [a, d] = w(
+  const r = G(), [o] = et(), l = yr(), [a, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   E(() => {
     d(C(t, (c, m) => ({ key: m, value: c })));
   }, [r == null ? void 0 : r._id]);
   const i = k(() => {
-    if (b(l))
+    if (b(o))
       return !0;
     if (b(a))
       return !1;
     const c = ye(a);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [l, a]), n = (c) => {
+  }, [o, a]), n = (c) => {
     const m = be(a, (h) => h.key !== c.key);
     d([...m, c]), x([...m, c]);
   }, u = (c) => {
@@ -308,9 +310,9 @@ const fe = ({ data: t, fullView: s }) => {
         !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Me(m, h.key, h.value);
       }), s(m);
     },
-    [r]
+    [s]
   );
-  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
+  return b(l) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
@@ -322,7 +324,7 @@ const fe = ({ data: t, fullView: s }) => {
         onAddBinding: n,
         onRemove: () => u(m),
         selectedBlock: r,
-        dataProvider: l,
+        dataProvider: o,
         appliedBindings: C(a, "key")
       },
       c.key
@@ -333,36 +335,36 @@ const fe = ({ data: t, fullView: s }) => {
         {
           disabled: i,
           className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-          children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+          children: b(o) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
         }
       ) }) }),
-      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(o) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Mr = Or, _r = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), Pe = ({
+}, Mr = Or, _r = () => /* @__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" }), $e = ({
   createHistorySnapshot: t,
   properties: s,
   formData: r,
-  onChange: l
+  onChange: o
 }) => {
-  const [o] = Yt(), a = { type: "object", properties: {} }, d = {};
+  const [l] = Zt(), a = { type: "object", properties: {} }, d = {};
   return Object.keys(s).forEach((i) => {
     const n = s[i];
     if (M(["slot", "styles"], n.type))
       return;
-    const u = p(n, "i18n", !1) ? `${i}-${o}` : i;
-    a.properties[u] = Xt(n, o), d[u] = Wt(n, o);
+    const u = p(n, "i18n", !1) ? `${i}-${l}` : i;
+    a.properties[u] = zt(n, l), d[u] = Ut(n, l);
   }), /* @__PURE__ */ e.jsx(
     _t,
     {
       widgets: {
         binding: _r,
-        richtext: fr,
-        icon: vr,
-        image: jr
+        richtext: br,
+        icon: fr,
+        image: vr
       },
       fields: {
-        link: wr
+        link: jr
       },
       idSeparator: ".",
       autoComplete: "off",
@@ -374,34 +376,34 @@ const fe = ({ data: t, fullView: s }) => {
       onBlur: t,
       schema: a,
       formData: r,
-      onChange: l
+      onChange: o
     }
   );
 };
 function Er() {
-  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = Qe(t._type), o = { ...t }, a = () => s(), d = ({ formData: x }, c) => {
+  const t = G(), { createSnapshot: s } = ze(), r = Ge(), o = Qe(t._type), l = { ...t }, a = () => s(), d = ({ formData: x }, c) => {
     if (c) {
       const m = c.replace("root.", "");
       r([t._id], { [m]: p(x, m) });
     }
   }, i = {
-    _name: qt({
+    _name: Gt({
       title: "Name",
       default: p(t, "_name", t._type)
     })
-  }, n = ut(p(o, "_bindings", {})), u = k(() => {
-    const x = xt(p(l, "props", {}));
+  }, n = ut(p(l, "_bindings", {})), u = k(() => {
+    const x = xt(p(o, "props", {}));
     return gt(n, (c) => {
       delete x[c];
     }), x;
-  }, [l, n]);
+  }, [o, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      Pe,
+      $e,
       {
         onChange: d,
         createHistorySnapshot: a,
-        formData: o,
+        formData: l,
         properties: i
       }
     ),
@@ -420,9 +422,9 @@ function Er() {
         /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
           Mr,
           {
-            bindingData: p(o, "_bindings", {}),
+            bindingData: p(l, "_bindings", {}),
             onChange: (x) => {
-              d({ formData: { ...o, _bindings: x } }, "root._bindings");
+              d({ formData: { ...l, _bindings: x } }, "root._bindings");
             }
           }
         ) })
@@ -441,11 +443,11 @@ function Er() {
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            Pe,
+            $e,
             {
               onChange: d,
               createHistorySnapshot: a,
-              formData: o,
+              formData: l,
               properties: u
             }
           )
@@ -455,7 +457,7 @@ function Er() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const $e = new kr(Sr, {
+const Pe = new Nr(kr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -463,24 +465,24 @@ const $e = new kr(Sr, {
 });
 function Fr() {
   var D;
-  const [t] = ke(), s = G(), r = Ge(), l = Ke(), [o] = qe(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(s, i, "").replace(Rr, "").split(",").pop() || "").split(" "), b), u = () => {
+  const [t] = ke(), s = G(), r = Ke(), o = qe(), [l] = Ue(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(s, i, "").replace(Sr, "").split(",").pop() || "").split(" "), b), u = () => {
     const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    r(o, j, !0), d("");
+    r(l, j, !0), d("");
   }, [x, c] = w([]), m = ({ value: j }) => {
-    const L = j.trim().toLowerCase(), $ = L.match(/.+:/g);
+    const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
     let N = [];
-    if ($ && $.length > 0) {
-      const [I] = $, F = L.replace(I, "");
-      N = $e.search(F).map((y) => ({
+    if (P && P.length > 0) {
+      const [I] = P, F = L.replace(I, "");
+      N = Pe.search(F).map((y) => ({
         ...y,
         item: { ...y.item, name: I + y.item.name }
       }));
     } else
-      N = $e.search(L);
+      N = Pe.search(L);
     c(C(N, "item"));
   }, h = () => {
     c([]);
-  }, g = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), S = {
+  }, g = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), T = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -498,17 +500,17 @@ function Fr() {
     {
       className: `no-scrollbar flex ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
-        /* @__PURE__ */ e.jsx(Se, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(Te, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Nr,
+            Cr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: m,
               onSuggestionsClearRequested: h,
               getSuggestionValue: g,
               renderSuggestion: f,
-              inputProps: S,
+              inputProps: T,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -543,7 +545,7 @@ function Fr() {
                   /* @__PURE__ */ e.jsx(
                     Ye,
                     {
-                      onClick: () => l(o, [j]),
+                      onClick: () => o(l, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -1050,8 +1052,8 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   marginBottom: Q,
   marginLeft: ee,
   // text-align
-  textLeft: St,
-  textCenter: Tt,
+  textLeft: Tt,
+  textCenter: St,
   textRight: Rt,
   textJustify: Vt,
   // font style
@@ -1174,14 +1176,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       }
     )
   ] }),
-  static: Pt
+  static: $t
 }, se = Oe({ canReset: !1, canChange: !0 }), Zr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
-), lt = ({ label: t, property: s, onChange: r }) => {
-  const l = k(() => p(xe, `${s}.classes`, [""]), [s]), o = le(s), a = k(() => p(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
+), ot = ({ label: t, property: s, onChange: r }) => {
+  const o = k(() => p(xe, `${s}.classes`, [""]), [s]), l = oe(s), a = k(() => p(l, "cls", ""), [l]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(br, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx(mr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
     /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1192,17 +1194,17 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       rounded: t,
       onChange: (n) => r(n, s),
       selected: a,
-      options: l,
+      options: o,
       disabled: !d
     }
   ) });
 };
-function ve({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
+function ve({ selected: t, onChange: s, rounded: r = !1, options: o, disabled: l = !1 }) {
   const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !l.length || o,
+      disabled: !o.length || l,
       className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
       onChange: (n) => s(n.target.value),
       onKeyDown: (n) => {
@@ -1211,54 +1213,54 @@ function ve({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o
       value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
-          l.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
+        $.Children.toArray(
+          o.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
 const zr = ({ property: t, onChange: s }) => {
-  const { canReset: r, canChange: l } = re(se), o = le(t), a = k(() => p(o, "cls", ""), [o]), d = k(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
+  const { canReset: r, canChange: o } = re(se), l = oe(t), a = k(() => p(l, "cls", ""), [l]), d = k(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__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: !l && (!r || i - 1 < 0),
+        disabled: !o && (!r || i - 1 < 0),
         onClick: () => s(Re(d, i - 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx($t, { className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(Pt, { className: !o && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: t, onChange: s }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: t, onChange: s }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!r || i + 1 >= d.length),
+        disabled: !o && (!r || i + 1 >= d.length),
         onClick: () => s(Re(d, i + 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ce,
           {
-            className: !l && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+            className: !o && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
           }
         ) })
       }
     )
   ] }) });
 }, Ur = ({ property: t, onChange: s }) => {
-  const r = k(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = k(() => p(o, "cls", ""), [o]);
+  const r = k(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: o } = re(se), l = oe(t), a = k(() => p(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(X, { children: [
     /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !l,
+        disabled: !o,
         onClick: () => s(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(p(st, d, Xe))
+        children: $.createElement(p(st, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
@@ -1276,7 +1278,7 @@ const zr = ({ property: t, onChange: s }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, Kr = ({ property: t, onChange: s }) => {
-  const r = le(t), l = k(() => p(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = l.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
+  const r = oe(t), o = k(() => p(r, "cls", ""), [r]), { canChange: l } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = o.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
     (g) => {
       ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), n({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: g, shade: f.shade ? f.shade : "500" })));
@@ -1304,7 +1306,7 @@ const zr = ({ property: t, onChange: s }) => {
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       ve,
       {
-        disabled: !o,
+        disabled: !l,
         rounded: !0,
         selected: x,
         onChange: m,
@@ -1340,17 +1342,17 @@ const zr = ({ property: t, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ve, { rounded: !0, selected: c, disabled: !x || !o, onChange: h, options: a }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ve, { rounded: !0, selected: c, disabled: !x || !l, onChange: h, options: a }) })
   ] });
 }, Ie = (t, s) => {
   t = t.toLowerCase();
   let r = t.trim().replace(/ |\+/g, "");
   if ((r === "auto" || r === "none") && s.includes(r))
     return { value: "", unit: r };
-  const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
-  r = r.replace(l, "");
-  const o = t.match(l), a = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
-  return a || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
+  const o = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
+  r = r.replace(o, "");
+  const l = t.match(o), a = l && l.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  return a || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: r, unit: l ? l[0] : "" };
 }, qr = (t) => {
   const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
   if (["auto", "none"].includes(r))
@@ -1374,9 +1376,9 @@ const zr = ({ property: t, onChange: s }) => {
   if (M(t, "scale-"))
     return { value: `${s}${`${r / 100}`}`, unit: "-" };
   if (z(t, "border")) {
-    const l = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (l)
-      return { value: l[0].split("-").pop(), unit: "px" };
+    const o = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (o)
+      return { value: o[0].split("-").pop(), unit: "px" };
     if (t.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1475,8 +1477,8 @@ const zr = ({ property: t, onChange: s }) => {
   if (["max", "min", "fit"].includes(r))
     return { value: t, unit: "class" };
   if (r.includes("/")) {
-    const [l, o] = C(r.split("/"), (a) => parseInt(a, 10));
-    return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [o, l] = C(r.split("/"), (a) => parseInt(a, 10));
+    return { value: s + (o / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
   return yt(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 }, Jr = (t) => {
@@ -1485,21 +1487,21 @@ const zr = ({ property: t, onChange: s }) => {
   const s = t.match(/\[.*\]/g);
   if (s === null)
     return Qr(t);
-  const r = p(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = we(r.match(/\d+.\d+|\d+/g));
-  return { value: `${l}${o}`, unit: r.replace(o, "") };
-}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), ot = P.createContext({
+  const r = p(s, "0", "").replace(/\[|\]/g, ""), o = t.startsWith("-") ? "-" : "", l = we(r.match(/\d+.\d+|\d+/g));
+  return { value: `${o}${l}`, unit: r.replace(l, "") };
+}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), lt = $.createContext({
   setDragData: () => {
   }
 }), es = ({
   unit: t,
   currentValue: s,
   onDrag: r,
-  onDragEnd: l,
-  onDragStart: o,
+  onDragEnd: o,
+  onDragStart: l,
   negative: a,
   cssProperty: d
 }) => {
-  const { setDragData: i } = re(ot);
+  const { setDragData: i } = re(lt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
@@ -1507,7 +1509,7 @@ const zr = ({ property: t, onChange: s }) => {
       onMouseDown: (n) => {
         const u = {
           onDrag: r,
-          onDragEnd: l,
+          onDragEnd: o,
           dragging: !0,
           dragStartY: n.pageY,
           dragStartValue: `${s}`,
@@ -1515,34 +1517,34 @@ const zr = ({ property: t, onChange: s }) => {
           negative: a,
           cssProperty: d
         };
-        o(u), i(u);
+        l(u), i(u);
       },
       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(Lt, {})
     }
   );
-}, ts = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((l) => /* @__PURE__ */ e.jsx(
+}, ts = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((o) => /* @__PURE__ */ e.jsx(
   ue,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: s === l ? "primary" : void 0,
+    color: s === o ? "primary" : void 0,
     size: "sm",
-    onClick: (o) => {
-      o.stopPropagation(), t(l);
+    onClick: (l) => {
+      l.stopPropagation(), t(o);
     },
-    children: l
+    children: o
   },
-  l
+  o
 )) }), rs = (t) => {
-  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: u, negative: x } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, S] = w(""), [D, j] = w(!1), [L, $] = w(!1);
+  const [s, r] = w(!1), [o, l] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: u, negative: x } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
   E(() => {
     const { value: y, unit: v } = Jr(a);
     if (v === "") {
-      o(y), m(n != null && n.toLowerCase().includes("width") ? "%" : u[0]);
+      l(y), m(n != null && n.toLowerCase().includes("width") ? "%" : u[0]);
       return;
     }
-    m(v), o(v === "class" || b(y) ? "" : y);
+    m(v), l(v === "class" || b(y) ? "" : y);
   }, [a, n, u]);
   const N = me(
     (y) => {
@@ -1558,25 +1560,25 @@ const zr = ({ property: t, onChange: s }) => {
     200
   ), F = A(
     (y = !1) => {
-      const v = Ie(`${l}`, u);
+      const v = Ie(`${o}`, u);
       if (p(v, "error", !1)) {
         g(!0);
         return;
       }
-      const T = p(v, "unit") !== "" ? p(v, "unit") : c;
-      if (T === "auto" || T === "none") {
-        N(`${i}${T}`);
+      const S = p(v, "unit") !== "" ? p(v, "unit") : c;
+      if (S === "auto" || S === "none") {
+        N(`${i}${S}`);
         return;
       }
       if (p(v, "value") === "")
         return;
-      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       y ? I(K) : N(K);
     },
-    [N, I, l, c, i, u]
-  ), oe = A(
+    [N, I, o, c, i, u]
+  ), le = A(
     (y) => {
-      const v = Ie(`${l}`, u);
+      const v = Ie(`${o}`, u);
       if (p(v, "error", !1)) {
         g(!0);
         return;
@@ -1587,10 +1589,10 @@ const zr = ({ property: t, onChange: s }) => {
       }
       if (p(v, "value") === "")
         return;
-      const T = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const S = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(K);
     },
-    [N, l, i, u]
+    [N, o, i, u]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
@@ -1610,25 +1612,25 @@ const zr = ({ property: t, onChange: s }) => {
           onKeyDown: (y) => {
             if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
-            y.preventDefault(), $(!0);
+            y.preventDefault(), P(!0);
             const v = bt(y.target.value);
-            let T = _e(v) ? 0 : v;
-            y.keyCode === 38 && (T += 1), y.keyCode === 40 && (T -= 1);
-            const _ = `${T}`, at = `${_.startsWith("-") ? "-" : ""}${i}[${_.replace("-", "")}${c === "-" ? "" : c}]`;
+            let S = _e(v) ? 0 : v;
+            y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
+            const _ = `${S}`, at = `${_.startsWith("-") ? "-" : ""}${i}[${_.replace("-", "")}${c === "-" ? "" : c}]`;
             I(at);
           },
           onKeyUp: (y) => {
-            L && (y.preventDefault(), $(!1));
+            L && (y.preventDefault(), P(!1));
           },
           onBlur: () => F(),
           onChange: (y) => {
-            g(!1), o(y.target.value);
+            g(!1), l(y.target.value);
           },
           onClick: (y) => {
             var v;
             (v = y == null ? void 0 : y.target) == null || v.select(), r(!1);
           },
-          value: D ? f : l,
+          value: D ? f : o,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -1648,13 +1650,13 @@ const zr = ({ property: t, onChange: s }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ e.jsx(Qt, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
           ts,
           {
             units: u,
             current: c,
             onSelect: (y) => {
-              r(!1), m(y), oe(y);
+              r(!1), m(y), le(y);
             }
           }
         ) }) })
@@ -1665,7 +1667,7 @@ const zr = ({ property: t, onChange: s }) => {
       {
         onDragStart: () => j(!0),
         onDragEnd: (y) => {
-          if (S(() => ""), j(!1), b(y))
+          if (T(() => ""), j(!1), b(y))
             return;
           const v = `${y}`, _ = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
           N(_);
@@ -1673,18 +1675,18 @@ const zr = ({ property: t, onChange: s }) => {
         onDrag: (y) => {
           if (b(y))
             return;
-          S(y);
+          T(y);
           const v = `${y}`, _ = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
           I(_);
         },
-        currentValue: l,
+        currentValue: o,
         unit: c,
         negative: x,
         cssProperty: n
       }
     )
   ] }) }) });
-}, le = (t) => {
+}, oe = (t) => {
   const s = pe();
   return ft(s, { property: t });
 }, ss = (t, s) => {
@@ -1697,7 +1699,7 @@ const zr = ({ property: t, onChange: s }) => {
     "2xl": 5
   };
   return r[p(t, "mq", "xs")] <= r[s];
-}, ls = {
+}, os = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1770,22 +1772,22 @@ const zr = ({ property: t, onChange: s }) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, os = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Te = (t) => {
-  const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
-  }, units: a, negative: d = !1 } = t, [i] = Zt(), [n] = Je(), [, u] = Ae(), x = le(l), c = Ge(), m = Ke(), [h] = qe(), g = k(() => p(x, "fullCls", ""), [x]), f = A(
+}, ls = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Se = (t) => {
+  const { type: s = "icons", label: r, property: o, onEmitChange: l = () => {
+  }, units: a, negative: d = !1 } = t, [i] = Rr(), [n] = Je(), [, u] = Ae(), x = oe(o), c = Ke(), m = qe(), [h] = Ue(), g = k(() => p(x, "fullCls", ""), [x]), f = A(
     (N, I = !0) => {
-      const F = { dark: i, mq: u, mod: n, cls: N, property: l, fullCls: "" };
+      const F = { dark: i, mq: u, mod: n, cls: N, property: o, fullCls: "" };
       (i || n !== "") && (F.mq = "xs");
-      const oe = Tr(F);
-      c(h, [oe], I);
+      const le = Tr(F);
+      c(h, [le], I);
     },
-    [h, i, u, n, l, c]
-  ), S = A(() => {
+    [h, i, u, n, o, c]
+  ), T = A(() => {
     m(h, [g]);
   }, [h, g, m]), D = k(() => ss(x, u), [x, u]);
   E(() => {
-    o(D, x);
-  }, [D, o, x]);
+    l(D, x);
+  }, [D, l, x]);
   const [, , j] = Ae(), L = A(
     (N) => {
       j({
@@ -1798,28 +1800,28 @@ const zr = ({ property: t, onChange: s }) => {
       }[N]);
     },
     [j]
-  ), $ = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && $, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !$ ? "text-foreground" : ""}`, children: r }) }),
+  ), P = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && P, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         s === "arbitrary" ? /* @__PURE__ */ e.jsx(
           rs,
           {
             currentClass: p(x, "cls", ""),
-            classPrefix: p(ls, l, ""),
+            classPrefix: p(os, o, ""),
             units: a || [],
             onChange: f,
             negative: d,
-            cssProperty: l
+            cssProperty: o
           }
         ) : null,
-        s === "icons" && /* @__PURE__ */ e.jsx(Ur, { property: l, onChange: f }),
-        s === "range" && /* @__PURE__ */ e.jsx(zr, { property: l, onChange: f }),
-        s === "color" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: f }),
-        s === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: r, property: l, onChange: f })
+        s === "icons" && /* @__PURE__ */ e.jsx(Ur, { property: o, onChange: f }),
+        s === "range" && /* @__PURE__ */ e.jsx(zr, { property: o, onChange: f }),
+        s === "color" && /* @__PURE__ */ e.jsx(Kr, { property: o, onChange: f }),
+        s === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: o, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: $ ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(We, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(We, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1831,7 +1833,7 @@ const zr = ({ property: t, onChange: s }) => {
         /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold ", children: [
-            os(p(x, "mq")),
+            ls(p(x, "mq")),
             i && !x.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1855,8 +1857,8 @@ const zr = ({ property: t, onChange: s }) => {
   label: t,
   options: s,
   borderB: r = !1,
-  borderT: l = !1,
-  type: o = "arbitrary",
+  borderT: o = !1,
+  type: l = "arbitrary",
   units: a = ns,
   negative: d = !1
 }) => {
@@ -1864,11 +1866,11 @@ const zr = ({ property: t, onChange: s }) => {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${l ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${o ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
             s.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
               /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
@@ -1877,10 +1879,10 @@ const zr = ({ property: t, onChange: s }) => {
                   onClick: () => n(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    P.createElement("div", {
+                    $.createElement("div", {
                       className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
+                    $.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1889,9 +1891,9 @@ const zr = ({ property: t, onChange: s }) => {
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Te,
+          Se,
           {
-            type: o,
+            type: l,
             units: [...a],
             label: "",
             property: i,
@@ -1902,25 +1904,25 @@ const zr = ({ property: t, onChange: s }) => {
     }
   );
 }, as = ({ heading: t, items: s }) => {
-  const r = pe(), l = k(() => {
-    const o = (i) => U(
+  const r = pe(), o = k(() => {
+    const l = (i) => U(
       i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
     ), a = U(
-      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+      s.map((i) => i.styleType === "accordion" ? l(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
     return Ee(a, d).length > 0;
   }, [r, s]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       t,
-      l ? /* @__PURE__ */ e.jsx(
+      o ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${o ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Te, { ...o }, o.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((l) => l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...l }, l.label) : /* @__PURE__ */ e.jsx(Se, { ...l }, l.label)) })
   ] });
 }, is = Oe({}), he = ({ section: t }) => {
   const s = pe(), r = A(
@@ -1937,7 +1939,7 @@ const zr = ({ property: t, onChange: s }) => {
       return i;
     },
     [s]
-  ), l = k(() => {
+  ), o = k(() => {
     if (s.length > 0 && t.heading === "Classes")
       return !0;
     const a = (n) => U(
@@ -1946,28 +1948,28 @@ const zr = ({ property: t, onChange: s }) => {
       t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
     ), i = C(s, "property");
     return Ee(d, i).length > 0;
-  }, [s, t.heading, t.items]), o = k(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(is.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+  }, [s, t.heading, t.items]), l = k(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(is.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${o ? "bg-blue-500" : "bg-gray-300"}` }),
       t.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      t.items.map((a) => ge(a, "component") ? P.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(as, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Te, { ...a }, a.label))
+    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      t.items.map((a) => ge(a, "component") ? $.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(as, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Se, { ...a }, a.label))
     ) })
   ] }) });
 }, ds = ({
   item: t,
   index: s,
   canDelete: r,
-  onChange: l,
-  onRemove: o
+  onChange: o,
+  onRemove: l
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (a) => l(a, s),
+      onChange: (a) => o(a, s),
       value: t.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1980,7 +1982,7 @@ const zr = ({ property: t, onChange: s }) => {
       "input",
       {
         name: "value",
-        onChange: (a) => b(t.key) ? {} : l(a, s),
+        onChange: (a) => b(t.key) ? {} : o(a, s),
         value: t.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1991,23 +1993,23 @@ const zr = ({ property: t, onChange: s }) => {
     /* @__PURE__ */ e.jsx(
       We,
       {
-        onClick: o,
+        onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
 ] }), cs = ({ section: t }) => {
   var m;
-  const { setSyncState: s } = zt(), r = G(), [l, o] = w([]), [a] = ke(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  const { setSyncState: s } = Yt(), r = G(), [o, l] = w([]), [a] = ke(), d = Ge(), i = `${p(a, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(p(r, i), (g, f) => ({ key: f, value: g }));
-    b(h) ? o([]) : o(h);
+    b(h) ? l([]) : l(h);
   }, [p(r, i)]);
-  const n = () => o([...l, { key: "", value: "" }]), u = (h) => {
-    const g = be(l, (f, S) => h !== S);
+  const n = () => l([...o, { key: "", value: "" }]), u = (h) => {
+    const g = be(o, (f, T) => h !== T);
     c(g);
   }, x = (h, g) => {
-    const f = [...l];
+    const f = [...o];
     f[g][h.target.name] = h.target.value, c(f);
   }, c = ne.useCallback(
     (h = []) => {
@@ -2029,15 +2031,15 @@ const zr = ({ property: t, onChange: s }) => {
       "Attributes"
     ] }) }),
     /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(Se, { className: "mt-2 flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ e.jsxs(Te, { className: "mt-2 flex w-full items-center justify-between", children: [
         "Add Custom attributes",
         /* @__PURE__ */ e.jsxs(
           "div",
           {
-            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(l) && b((m = ye(l)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(o) && b((m = ye(o)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
               var h;
-              !b(l) && b((h = ye(l)) == null ? void 0 : h.key) || n();
+              !b(o) && b((h = ye(o)) == null ? void 0 : h.key) || n();
             },
             children: [
               /* @__PURE__ */ e.jsx(Ce, { width: 12, height: 12 }),
@@ -2047,10 +2049,10 @@ const zr = ({ property: t, onChange: s }) => {
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        b(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         ne.Children.toArray(
-          C(l, (h, g) => {
-            const f = l.length > 0 && g < l.length - 1;
+          C(o, (h, g) => {
+            const f = o.length > 0 && g < o.length - 1;
             return /* @__PURE__ */ e.jsx(
               ds,
               {
@@ -2068,7 +2070,7 @@ const zr = ({ property: t, onChange: s }) => {
   ] });
 };
 function ps() {
-  const [t, s] = Je(), { flexChild: r, gridChild: l } = Ut(), [, o] = Cr(Gt), { t: a } = Fe(), [d] = ke();
+  const [t, s] = Je(), { flexChild: r, gridChild: o } = Xt(), [, l] = wr(Wt), { t: a } = Fe(), [d] = ke();
   return b(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
@@ -2080,9 +2082,9 @@ function ps() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-        /* @__PURE__ */ e.jsx(Se, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+        /* @__PURE__ */ e.jsx(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
         /* @__PURE__ */ e.jsxs(Hr, { defaultValue: t, onValueChange: (i) => s(i), children: [
           /* @__PURE__ */ e.jsx(Br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Ar, { placeholder: "State" }) }),
           /* @__PURE__ */ e.jsxs(Dr, { children: [
@@ -2104,7 +2106,7 @@ function ps() {
       /* @__PURE__ */ e.jsxs(Vr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
         /* @__PURE__ */ e.jsxs(tt, { type: "multiple", className: "h-full w-full", children: [
           r && /* @__PURE__ */ e.jsx(he, { section: Yr }),
-          l ? /* @__PURE__ */ e.jsx(he, { section: Xr }) : null,
+          o ? /* @__PURE__ */ e.jsx(he, { section: Xr }) : null,
           Wr.map((i) => /* @__PURE__ */ e.jsx(he, { section: i }, i.heading)),
           /* @__PURE__ */ e.jsx(cs, { section: { heading: "Attributes" } })
         ] }),
@@ -2124,8 +2126,8 @@ const us = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, ml = () => {
-  const t = G(), { t: s } = Fe(), [r, l] = P.useState(""), [o, a] = P.useState({
+}, fo = () => {
+  const t = G(), { t: s } = Fe(), [r, o] = $.useState(""), [l, a] = $.useState({
     onDrag: (n) => n,
     onDragEnd: (n) => n,
     dragStartY: 0,
@@ -2136,18 +2138,18 @@ const us = {
     cssProperty: ""
   }), d = me(
     (n) => {
-      const u = !p(o, "negative", !1), x = p(o, "cssProperty", "");
-      let c = parseFloat(o.dragStartValue);
+      const u = !p(l, "negative", !1), x = p(l, "cssProperty", "");
+      let c = parseFloat(l.dragStartValue);
       c = _e(c) ? 0 : c;
-      let m = us[o.dragUnit];
+      let m = us[l.dragUnit];
       (z(x, "scale") || x === "opacity") && (m = 10);
-      let g = (o.dragStartY - n.pageY) / m + c;
-      u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), o.onDrag(`${g}`), l(`${g}`);
+      let g = (l.dragStartY - n.pageY) / m + c;
+      u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), o(`${g}`);
     },
-    [o],
+    [l],
     50
   ), i = A(() => {
-    setTimeout(() => o.onDragEnd(`${r}`), 100), a({
+    setTimeout(() => l.onDragEnd(`${r}`), 100), a({
       onDrag: (n) => n,
       onDragEnd: (n) => n,
       dragStartY: 0,
@@ -2157,12 +2159,12 @@ const us = {
       negative: !1,
       cssProperty: ""
     });
-  }, [o, r, a]);
+  }, [l, r, a]);
   return vt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: a }, children: [
-    o.dragging ? /* @__PURE__ */ e.jsx(
+  ] }) }) : /* @__PURE__ */ e.jsxs(lt.Provider, { value: { setDragData: a }, children: [
+    l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2188,5 +2190,5 @@ const us = {
   ] });
 };
 export {
-  ml as default
+  fo as default
 };