@chaibuilder/sdk 1.1.18 → 1.2.0

package/dist/{Settings-5uDMY9SU.js → Settings-28A7R61i.js}

@@ -1,22 +1,23 @@
-import { j as e } from "./jsx-runtime-NV737rRe.js";
+import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
-import $, { useState as j, useMemo as _, useEffect as M, useCallback as B, memo as ct, createContext as Oe, useContext as le } from "react";
-import { useThrottledCallback as ve } from "@react-hookz/web";
-import { f as ue, L as ie, o as pt, M as ut, c as A, g, h as ge, N as gt, O as Y, P as se, a as m, d as C, j as xt, l as we, b as je, s as Me, k as yt, Q as ht, u as bt, R as mt, S as Ve, e as W, T as ft, p as vt, U as ze, V as wt, n as U, W as Ye, t as be, A as jt } from "./lodash-3gkdNK5u.js";
+import $, { useState as j, useMemo as _, useEffect as M, useCallback as B, memo as ct, createContext as Oe, useContext as se } from "react";
+import { useThrottledCallback as fe } from "@react-hookz/web";
+import { forEach as ke, isArray as ie, omit as pt, truncate as ut, includes as A, get as g, first as ue, split as gt, startCase as Y, toLower as le, isEmpty as m, map as C, find as xt, last as ve, filter as we, set as Me, keys as yt, cloneDeep as ht, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as ze, findLast as jt, flatten as U, intersection as Ye, has as he, isNull as Ct } from "lodash-es";
 import { useTranslation as K } from "react-i18next";
-import { PlusIcon as Ne, Cross2Icon as Xe, EyeOpenIcon as Ct, EyeClosedIcon as He, BorderAllIcon as P, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as _t, ArrowBottomLeftIcon as St, AlignLeftIcon as Tt, AlignCenterHorizontallyIcon as Rt, AlignRightIcon as Vt, StretchHorizontallyIcon as Ht, FontItalicIcon as Bt, UnderlineIcon as Dt, OverlineIcon as $t, LetterCaseUppercaseIcon as It, Cross1Icon as Pt, InfoCircledIcon as _e, MinusIcon as At, BoxIcon as Fe, RowSpacingIcon as Lt, TriangleDownIcon as Et, CrossCircledIcon as Ot, TrashIcon as Mt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b0 as zt, b1 as Yt, B as xe, b2 as Xt, b3 as Ft, b4 as Zt, b5 as Wt, b6 as Ut, b7 as Kt, b8 as qt, a6 as q, am as Gt, an as Jt, ao as Qt, b9 as er, ak as tr, ba as rr, al as sr, aD as X, aE as F, aG as Z, bb as lr, bc as or, bd as ar, be as nr, bf as ir, bg as dr, p as We, ac as Ue, i as cr, bh as Ke, bi as de, bj as ce, bk as pe, aj as Se, P as qe, a3 as Ge, j as Je, aI as Te, bl as pr, bm as ur, a4 as ye, W as gr, a9 as Qe, R as Be, ag as xr, ad as yr, bn as hr, aq as br, ar as mr, as as fr, at as vr, au as V, bo as et, ax as wr, ay as jr, az as De, aA as $e } from "./index-0OqmBgqo.js";
-import { R as Cr } from "./controls-kEuiMMDf.js";
-import { Check as kr, EditIcon as Nr, TrashIcon as _r } from "lucide-react";
-import { getBlockComponent as tt, getChaiDataProviders as Sr } from "@chaibuilder/runtime";
-import { E as rt, u as st } from "./index-qEix1meh.js";
-import Tr from "@rjsf/core";
-import Rr from "@rjsf/validator-ajv8";
-import { useAtom as Vr } from "jotai";
-import Hr from "react-autosuggest";
-import Br from "fuse.js";
-import { A as Dr, C as he, e as $r } from "./utils-XsPKXMVo.js";
-import { a as Ir } from "./MODIFIERS-MLfpKQY1.js";
+import { PlusIcon as Ne, Cross2Icon as Fe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as P, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as At, InfoCircledIcon as _e, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Et, TriangleDownIcon as Ot, CrossCircledIcon as Mt, TrashIcon as zt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { a$ as Yt, b0 as Ft, B as ge, b1 as Xt, b2 as Zt, b3 as Wt, b4 as Ut, b5 as Kt, b6 as qt, b7 as Gt, a6 as q, am as Jt, an as Qt, ao as er, b8 as tr, ak as rr, b9 as lr, al as sr, aC as F, aD as X, aF as Z, ba as or, bb as ar, bc as nr, bd as ir, be as dr, bf as cr, p as We, ac as Ue, i as pr, bg as Ke, bh as de, bi as ce, bj as pe, aj as Se, P as qe, a3 as Ge, j as Je, aH as Te, bk as ur, bl as gr, a4 as xe, W as xr, a9 as Qe, R as Be, ag as yr, ad as hr, bm as br, aq as mr, ar as fr, as as vr, at as wr, au as V, bn as et, aw as jr, ax as Cr, ay as De, az as $e } from "./index-_OgCuSUz.js";
+import { u as kr } from "./controls-XPXGHKht.js";
+import { Check as Nr, EditIcon as _r, TrashIcon as Sr } from "lucide-react";
+import { getBlockComponent as tt, getChaiDataProviders as Tr } from "@chaibuilder/runtime";
+import { E as rt, u as lt } from "./index-QEchoZ98.js";
+import Rr from "@rjsf/core";
+import Vr from "@rjsf/validator-ajv8";
+import { useAtom as Hr } from "jotai";
+import Br from "react-autosuggest";
+import Dr from "fuse.js";
+import { A as $r, C as ye, g as Ir } from "./utils-AvyFzbPC.js";
+import { a as Pr } from "./MODIFIERS-RiXS5Mn1.js";
+import "./_commonjsHelpers-UyOWmZb0.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -41,9 +42,11 @@ import "react-icons-picker";
 import "react-dom";
 import "react-quill";
 import "flat-to-nested";
+import "./Functions-7jnEwJyw.js";
+import "clsx";
+import "tailwind-merge";
 import "redux-undo";
 import "i18next";
-import "clsx";
 import "@floating-ui/react-dom";
 import "react-textarea-autosize";
 import "flagged";
@@ -51,28 +54,28 @@ import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "sonner";
-import "./html-to-json-wmbV9eZP.js";
+import "./html-to-json-xKBERAI1.js";
 import "himalaya";
-import "tailwind-merge";
-const Pr = $.lazy(() => import("react-json-view"));
-function Ar(r) {
-  const l = [], t = {};
-  function o(s, d) {
-    ue(d, (a, c) => {
-      const i = s ? `${s}.${c}` : c, p = ie(a) ? "list" : typeof a;
-      l.push(i), t[i] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ie(a) && o(i, a);
+import "lodash";
+const Ar = $.lazy(() => import("react-json-view"));
+function Lr(r) {
+  const s = [], t = {};
+  function o(l, d) {
+    ke(d, (a, c) => {
+      const i = l ? `${l}.${c}` : c, p = ie(a) ? "list" : typeof a;
+      s.push(i), t[i] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ie(a) && o(i, a);
     });
   }
-  return o("", pt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
+  return o("", pt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
 }
-const Ce = ({ data: r, fullView: l }) => {
+const je = ({ data: r, fullView: s }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return l ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return s ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
-      Pr,
+      Ar,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -89,46 +92,46 @@ const Ce = ({ data: r, fullView: l }) => {
   ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: ut(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
 }, Ie = ({
   type: r,
-  value: l = "",
+  value: s = "",
   setValue: t,
   data: o,
-  onChange: s,
+  onChange: l,
   dataType: d,
   appliedBindings: a
 }) => {
-  const { paths: c, pathsType: i } = Ar(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, h = r === "PROP", [n, y] = j(!1), x = _(() => r === "PROP" ? c.filter(
-    (u) => !A(a, u) && g(p, `props.${ge(gt(u, "."))}.binding`)
+  const { paths: c, pathsType: i } = Lr(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, h = r === "PROP", [n, y] = j(!1), x = _(() => r === "PROP" ? c.filter(
+    (u) => !A(a, u) && g(p, `props.${ue(gt(u, "."))}.binding`)
   ) : c.filter((u) => d === g(i, u, "")), [r, c, a, d, p]);
   return M(() => {
-    l && s(l);
-  }, [l, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    s && l(s);
+  }, [s, 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: Y(se(r)) }),
-      /* @__PURE__ */ e.jsxs(zt, { open: n, onOpenChange: y, children: [
-        /* @__PURE__ */ e.jsx(Yt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          xe,
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(le(r)) }),
+      /* @__PURE__ */ e.jsxs(Yt, { open: n, onOpenChange: y, children: [
+        /* @__PURE__ */ e.jsx(Ft, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          ge,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${m(l) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
-            children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${m(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
+            children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
                 h && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(d) }),
-                l
+                s
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              Y(se(r))
+              Y(le(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Xt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Ft, { children: [
-          /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${se(r)}...` }),
-          /* @__PURE__ */ e.jsxs(Wt, { children: [
-            /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(Kt, { children: C(x, (u) => /* @__PURE__ */ e.jsxs(
-              qt,
+        /* @__PURE__ */ e.jsx(Xt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Zt, { children: [
+          /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${le(r)}...` }),
+          /* @__PURE__ */ e.jsxs(Ut, { children: [
+            /* @__PURE__ */ e.jsx(Kt, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(qt, { children: C(x, (u) => /* @__PURE__ */ e.jsxs(
+              Gt,
               {
                 value: u,
                 className: `cursor-pointer ${h ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
@@ -137,10 +140,10 @@ const Ce = ({ data: r, fullView: l }) => {
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(kr, { className: `w-4 h-4 text-green-500 ${l === u ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Nr, { className: `w-4 h-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
                     u
                   ] }),
-                  h ? /* @__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(g(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Ce, { data: g(o, u) }) })
+                  h ? /* @__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(g(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: g(o, u) }) })
                 ]
               },
               u
@@ -149,15 +152,15 @@ const Ce = ({ data: r, fullView: l }) => {
         ] }) })
       ] })
     ] }),
-    !h && !m(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Ce, { data: g(o, l, ""), fullView: !0 }) })
+    !h && !m(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: g(o, s, ""), fullView: !0 }) })
   ] });
-}, Lr = ({
+}, Er = ({
   appliedBindings: r = [],
-  onAddBinding: l,
+  onAddBinding: s,
   editMode: t,
   item: o
 }) => {
-  const [s, d] = j(t ? o.key : ""), [a, c] = j(t ? o.value : ""), i = q(), [p] = st(), h = B(
+  const [l, d] = j(t ? o.key : ""), [a, c] = j(t ? o.value : ""), i = q(), [p] = lt(), h = B(
     (x, u) => {
       if (m(x))
         return "";
@@ -172,9 +175,9 @@ const Ce = ({ data: r, fullView: l }) => {
     [i, p]
   ), [n, y] = j(t ? h(o.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(Gt, { children: [
-      /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(Qt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(Jt, { children: [
+      /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(er, { 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(
@@ -183,7 +186,7 @@ const Ce = ({ data: r, fullView: l }) => {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: s,
+          value: l,
           setValue: d,
           onChange: (x) => {
             const u = h(x, "PROP");
@@ -199,7 +202,7 @@ const Ce = ({ data: r, fullView: l }) => {
         Ie,
         {
           type: "PATH",
-          isDisabled: m(s),
+          isDisabled: m(l),
           placeholder: "Enter data path",
           value: a,
           setValue: c,
@@ -213,26 +216,26 @@ const Ce = ({ data: r, fullView: l }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(er, { children: /* @__PURE__ */ e.jsx(
-      xe,
+    /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
+      ge,
       {
         type: "submit",
         className: "mt-4",
-        disabled: m(s) && m(a),
-        onClick: () => l({ key: s, value: a }),
+        disabled: m(l) && m(a),
+        onClick: () => s({ key: l, value: a }),
         children: "Save"
       }
     ) })
   ] });
-}, lt = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: o, editMode: s = !0, item: d = {} }) => {
+}, st = ({ disabled: r, children: s, onAddBinding: t, appliedBindings: o, editMode: l = !0, item: d = {} }) => {
   const [a, c] = j(!1);
-  return /* @__PURE__ */ e.jsxs(tr, { children: [
-    /* @__PURE__ */ e.jsx(rr, { disabled: r, asChild: !0, onClick: () => c(!0), children: l }),
+  return /* @__PURE__ */ e.jsxs(rr, { children: [
+    /* @__PURE__ */ e.jsx(lr, { disabled: r, asChild: !0, onClick: () => c(!0), children: s }),
     a && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
-      Lr,
+      Er,
       {
         item: d,
-        editMode: s,
+        editMode: l,
         appliedBindings: o,
         onAddBinding: (i) => {
           t(i), c(!1);
@@ -240,19 +243,19 @@ const Ce = ({ data: r, fullView: l }) => {
       }
     ) })
   ] });
-}, Er = ({
+}, Or = ({
   item: r,
-  onAddBinding: l,
+  onAddBinding: s,
   onRemove: t,
   selectedBlock: o,
-  dataProvider: s,
+  dataProvider: l,
   appliedBindings: d
 }) => {
   const [a, c] = j("string"), i = (p, h) => {
     if (m(p))
       return "";
     {
-      const n = g(h === "PROP" ? o : s, p, "");
+      const n = g(h === "PROP" ? o : l, p, "");
       if (ie(n))
         return "list";
       const y = typeof n;
@@ -262,11 +265,11 @@ const Ce = ({ data: r, fullView: l }) => {
   return M(() => c(() => i(r.key, "PROP")), [r.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: r.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
-    /* @__PURE__ */ e.jsx(Ce, { data: g(s, r.value, "") }),
+    /* @__PURE__ */ e.jsx(je, { data: g(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(Nr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(_r, { 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(
-        _r,
+        Sr,
         {
           onClick: () => t(),
           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"
@@ -275,8 +278,8 @@ const Ce = ({ data: r, fullView: l }) => {
     ] }),
     !m(a) && !m(r.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(a) })
   ] });
-}, Or = ({ bindingData: r, onChange: l }) => {
-  const t = q(), [o] = st(), s = Sr(), [d, a] = j(
+}, Mr = ({ bindingData: r, onChange: s }) => {
+  const t = q(), [o] = lt(), l = Tr(), [d, a] = j(
     C(r, (n, y) => ({ key: y, value: n }))
   );
   M(() => {
@@ -287,34 +290,34 @@ const Ce = ({ data: r, fullView: l }) => {
       return !0;
     if (m(d))
       return !1;
-    const n = we(d);
+    const n = ve(d);
     return m(n == null ? void 0 : n.key) || m(n == null ? void 0 : n.value);
   }, [o, d]), i = (n) => {
-    const y = je(d, (x) => x.key !== n.key);
+    const y = we(d, (x) => x.key !== n.key);
     a([...y, n]), h([...y, n]);
   }, p = (n) => {
-    const y = je(d, (x, u) => n !== u);
+    const y = we(d, (x, u) => n !== u);
     h([...y]);
   }, h = B(
     (n = []) => {
       if (a(n), m(n)) {
-        l({});
+        s({});
         return;
       }
       const y = {};
-      ue(n, (x) => {
+      ke(n, (x) => {
         !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && Me(y, x.key, x.value);
-      }), l(y);
+      }), s(y);
     },
-    [l]
+    [s]
   );
-  return m(s) ? /* @__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 m(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" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
     C(d, (n, y) => /* @__PURE__ */ e.jsx(
-      Er,
+      Or,
       {
         item: n,
         onAddBinding: i,
@@ -325,9 +328,9 @@ const Ce = ({ data: r, fullView: l }) => {
       },
       n.key
     )),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(F, { className: "w-full", children: /* @__PURE__ */ e.jsx(
-        lt,
+    /* @__PURE__ */ e.jsxs(F, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+        st,
         {
           disabled: c,
           appliedBindings: C(d, "key"),
@@ -344,60 +347,60 @@ const Ce = ({ data: r, fullView: l }) => {
       c && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: m(o) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Mr = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), me = ct(({ createHistorySnapshot: r, properties: l, formData: t, onChange: o }) => {
-  const s = { type: "object", properties: {} }, d = {};
-  return Object.keys(l).forEach((a) => {
-    const c = l[a];
+}, zr = () => /* @__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" }), be = ct(({ createHistorySnapshot: r, properties: s, formData: t, onChange: o }) => {
+  const l = { type: "object", properties: {} }, d = {};
+  return Object.keys(s).forEach((a) => {
+    const c = s[a];
     if (A(["slot", "styles"], c.type))
       return;
     const i = a;
-    s.properties[i] = lr(c), d[i] = or(c);
+    l.properties[i] = or(c), d[i] = ar(c);
   }), /* @__PURE__ */ e.jsx(
-    Tr,
+    Rr,
     {
       widgets: {
-        binding: Mr,
-        richtext: ar,
-        icon: nr,
-        image: ir
+        binding: zr,
+        richtext: nr,
+        icon: ir,
+        image: dr
       },
-      fields: { link: dr },
+      fields: { link: cr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
-      liveValidate: !0,
-      validator: Rr,
+      liveValidate: !1,
+      validator: Vr,
       uiSchema: d,
       onBlur: r,
-      schema: s,
+      schema: l,
       formData: t,
       onChange: o
     }
   );
 });
-function zr() {
-  const r = q(), { createSnapshot: l } = We(), t = Ue(), o = tt(r._type), s = { ...r }, d = cr("dataBindingSupport", !1), a = () => l(), c = ({ formData: n }, y) => {
+function Yr() {
+  const r = q(), { createSnapshot: s } = We(), t = Ue(), o = tt(r._type), l = { ...r }, d = pr("dataBindingSupport", !1), a = () => s(), c = ({ formData: n }, y) => {
     if (y) {
       const x = y.replace("root.", "");
       t([r._id], { [x]: g(n, x) });
     }
   }, i = {
-    _name: Cr({
+    _name: kr({
       title: "Name",
       default: g(r, "_name", r._type)
     })
-  }, p = yt(g(s, "_bindings", {})), h = _(() => {
+  }, p = yt(g(l, "_bindings", {})), h = _(() => {
     const n = ht(g(o, "props", {}));
-    return d && ue(p, (y) => delete n[y]), n;
+    return d && bt(p, (y) => delete n[y]), n;
   }, [o, p, d]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      me,
+      be,
       {
         onChange: c,
         createHistorySnapshot: a,
-        formData: s,
+        formData: l,
         properties: i
       }
     ),
@@ -414,11 +417,11 @@ function zr() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(pe, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Or,
+          Mr,
           {
-            bindingData: g(s, "_bindings", {}),
+            bindingData: g(l, "_bindings", {}),
             onChange: (n) => {
-              c({ formData: { ...s, _bindings: n } }, "root._bindings");
+              c({ formData: { ...l, _bindings: n } }, "root._bindings");
             }
           }
         ) })
@@ -429,47 +432,47 @@ function zr() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(pe, { className: "pt-4", children: [
-          m(p) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
+          m(p) ? null : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(p, bt).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(p, mt).join(", ") }),
             " ",
             p.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            me,
+            be,
             {
               onChange: c,
               createHistorySnapshot: a,
-              formData: s,
+              formData: l,
               properties: h
             }
           )
         ] })
       ] })
     ] }) : /* @__PURE__ */ e.jsx(
-      me,
+      be,
       {
         onChange: c,
         createHistorySnapshot: a,
-        formData: s,
+        formData: l,
         properties: h
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Br(Dr, {
+const Pe = new Dr($r, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Yr() {
+function Fr() {
   var L;
-  const [r] = Se(), l = q(), t = qe(), o = Ge(), [s] = Je(), [d, a] = j(""), c = (L = ge(r)) == null ? void 0 : L.prop, i = mt((g(l, c, "").replace(Ir, "").split(",").pop() || "").split(" "), m), p = () => {
+  const [r] = Se(), s = q(), t = qe(), o = Ge(), [l] = Je(), [d, a] = j(""), c = (L = ue(r)) == null ? void 0 : L.prop, i = ft((g(s, c, "").replace(Pr, "").split(",").pop() || "").split(" "), m), p = () => {
     const w = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(s, w, !0), a("");
+    t(l, w, !0), a("");
   }, [h, n] = j([]), y = ({ value: w }) => {
     const I = w.trim().toLowerCase(), E = I.match(/.+:/g);
     let N = [];
@@ -505,7 +508,7 @@ function Yr() {
         /* @__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(
-            Hr,
+            Br,
             {
               suggestions: h,
               onSuggestionsFetchRequested: y,
@@ -524,7 +527,7 @@ function Yr() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            xe,
+            ge,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
@@ -545,9 +548,9 @@ function Yr() {
                 children: [
                   w,
                   /* @__PURE__ */ e.jsx(
-                    Xe,
+                    Fe,
                     {
-                      onClick: () => o(s, [w]),
+                      onClick: () => o(l, [w]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -570,7 +573,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, Fr = {
+}, Zr = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -581,7 +584,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, Zr = [
+}, Wr = [
   {
     heading: "layout.heading",
     items: [
@@ -983,12 +986,12 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: Yr }]
+    items: [{ component: Fr }]
   }
 ], ot = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
-  visible: Ct,
+  visible: kt,
   invisible: He,
   // display
   hidden: He,
@@ -1024,10 +1027,10 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   borderRadiusRight: ee,
   borderRadiusBottom: te,
   borderRadiusLeft: re,
-  borderRadiusTopLeft: kt,
-  borderRadiusTopRight: Nt,
-  borderRadiusBottomRight: _t,
-  borderRadiusBottomLeft: St,
+  borderRadiusTopLeft: Nt,
+  borderRadiusTopRight: _t,
+  borderRadiusBottomRight: St,
+  borderRadiusBottomLeft: Tt,
   divideXWidth: T,
   divideYWidth: R,
   scale: P,
@@ -1054,18 +1057,18 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   marginBottom: te,
   marginLeft: re,
   // text-align
-  textLeft: Tt,
-  textCenter: Rt,
-  textRight: Vt,
-  textJustify: Ht,
+  textLeft: Rt,
+  textCenter: Vt,
+  textRight: Ht,
+  textJustify: Bt,
   // font style
-  italic: Bt,
+  italic: Dt,
   // "not-italic": "",
   // decoration
-  underline: Dt,
-  overline: $t,
+  underline: $t,
+  overline: It,
   // transform
-  uppercase: It,
+  uppercase: Pt,
   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",
@@ -1106,7 +1109,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
       }
     )
   ] }),
-  "float-none": Xe,
+  "float-none": Fe,
   // 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(
@@ -1178,37 +1181,37 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
       }
     )
   ] }),
-  static: Pt
-}, oe = Oe({ canReset: !1, canChange: !0 }), Wr = ({ children: r, canReset: l = !1, canChange: t = !0 }) => (
+  static: At
+}, oe = Oe({ canReset: !1, canChange: !0 }), Ur = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: l, canChange: t }, children: r })
-), at = ({ label: r, property: l, onChange: t }) => {
-  const o = _(() => g(he, `${l}.classes`, [""]), [l]), s = ae(l), d = _(() => g(s, "cls", ""), [s]), { canChange: a } = le(oe), c = /\[.*\]/g.test(d);
+  /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: s, canChange: t }, children: r })
+), at = ({ label: r, property: s, onChange: t }) => {
+  const o = _(() => g(ye, `${s}.classes`, [""]), [s]), l = ae(s), d = _(() => g(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(d);
   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(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
+    /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
+    /* @__PURE__ */ e.jsxs(F, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    ke,
+    Ce,
     {
       rounded: r,
-      onChange: (i) => t(i, l),
+      onChange: (i) => t(i, s),
       selected: d,
       options: o,
       disabled: !a
     }
   ) });
 };
-function ke({ selected: r, onChange: l, rounded: t = !1, options: o, disabled: s = !1 }) {
+function Ce({ selected: r, onChange: s, rounded: t = !1, options: o, disabled: l = !1 }) {
   const d = r.replace(/.*:/g, "").trim(), { undo: a, redo: c } = We();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !o.length || s,
+      disabled: !o.length || l,
       className: `${t ? "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: (i) => l(i.target.value),
+      onChange: (i) => s(i.target.value),
       onKeyDown: (i) => {
         i.ctrlKey && (i.key === "z" && a(), i.key === "y" && c());
       },
@@ -1222,8 +1225,8 @@ function ke({ selected: r, onChange: l, rounded: t = !1, options: o, disabled: s
     }
   );
 }
-const Ur = ({ property: r, onChange: l }) => {
-  const { canReset: t, canChange: o } = le(oe), s = ae(r), d = _(() => g(s, "cls", ""), [s]), a = _(() => g(he, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
+const Kr = ({ property: r, onChange: s }) => {
+  const { canReset: t, canChange: o } = se(oe), l = ae(r), d = _(() => g(l, "cls", ""), [l]), a = _(() => g(ye, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1231,23 +1234,23 @@ const Ur = ({ property: r, onChange: l }) => {
         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: !o && (!t || c - 1 < 0),
-        onClick: () => l(Ve(a, c - 1), r),
+        onClick: () => s(Ve(a, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          At,
+          Lt,
           {
             className: !o && (!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(at, { label: !1, property: r, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(at, { label: !1, property: r, 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: !o && (!t || c + 1 >= a.length),
-        onClick: () => l(Ve(a, c + 1), r),
+        onClick: () => s(Ve(a, c + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ne,
           {
@@ -1257,22 +1260,22 @@ const Ur = ({ property: r, onChange: l }) => {
       }
     )
   ] }) });
-}, Kr = ({ property: r, onChange: l }) => {
-  const t = _(() => g(he, `${r}.classes`, [""]), [r]), { canChange: o } = le(oe), s = ae(r), d = _(() => g(s, "cls", ""), [s]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs(X, { children: [
-    /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, qr = ({ property: r, onChange: s }) => {
+  const t = _(() => g(ye, `${r}.classes`, [""]), [r]), { canChange: o } = se(oe), l = ae(r), d = _(() => g(l, "cls", ""), [l]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs(F, { children: [
+    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !o,
-        onClick: () => l(a, r),
+        onClick: () => s(a, r),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${d === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(g(ot, a, Fe))
+        children: $.createElement(g(ot, a, Xe))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(Z, { children: Y(se(a)) })
+    /* @__PURE__ */ e.jsx(Z, { children: Y(le(a)) })
   ] })) });
-}, qr = {
+}, Gr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1284,8 +1287,8 @@ const Ur = ({ property: r, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Gr = ({ property: r, onChange: l }) => {
-  const t = ae(r), o = _(() => g(t, "cls", ""), [t]), { canChange: s } = le(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), h = g(p, "1", ""), n = g(p, "2", ""), y = B(
+}, Jr = ({ property: r, onChange: s }) => {
+  const t = ae(r), o = _(() => g(t, "cls", ""), [t]), { canChange: l } = se(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), h = g(p, "1", ""), n = g(p, "2", ""), y = B(
     // eslint-disable-next-line no-shadow
     (u) => {
       ["current", "inherit", "transparent", "black", "white"].includes(u) ? (a([]), i({ color: u })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
@@ -1307,13 +1310,13 @@ const Ur = ({ property: r, onChange: l }) => {
   return M(() => {
     i({ color: "", shade: "" });
   }, [t]), M(() => {
-    const f = `${g(qr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    f.match(new RegExp(g(he, `${r}.regExp`, ""))) && l(f, r);
-  }, [c, l, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const f = `${g(Gr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    f.match(new RegExp(g(ye, `${r}.regExp`, ""))) && s(f, r);
+  }, [c, s, 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,
+      Ce,
       {
-        disabled: !s,
+        disabled: !l,
         rounded: !0,
         selected: h,
         onChange: y,
@@ -1349,20 +1352,20 @@ const Ur = ({ property: r, onChange: l }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ke, { rounded: !0, selected: n, disabled: !h || !s, onChange: x, options: d }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: n, disabled: !h || !l, onChange: x, options: d }) })
   ] });
-}, Ae = (r, l) => {
+}, Ae = (r, s) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && l.includes(t))
+  if ((t === "auto" || t === "none") && s.includes(t))
     return { value: "", unit: t };
-  const o = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
+  const o = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
   t = t.replace(o, "");
-  const s = r.match(o), d = s && s.length > 1, a = !m(t) && Number.isNaN(Number(t));
-  return d || a ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
+  const l = r.match(o), d = l && l.length > 1, a = !m(t) && Number.isNaN(Number(t));
+  return d || a ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const Jr = (r) => {
-  const l = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const Qr = (r) => {
+  const s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1372,17 +1375,17 @@ const Jr = (r) => {
   if (t === "full")
     return { value: "100", unit: "%" };
   if (A(r, "skew-"))
-    return { value: `${l}${t}`, unit: "deg" };
+    return { value: `${s}${t}`, unit: "deg" };
   if (A(r, "rotate-"))
-    return { value: `${l}${t}`, unit: "deg" };
+    return { value: `${s}${t}`, unit: "deg" };
   if (A(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
   if (A(r, "duration-") || A(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
   if (A(r, "translate-") && !t.includes("/"))
-    return { value: `${l}${`${t / 4}`}`, unit: "rem" };
+    return { value: `${s}${`${t / 4}`}`, unit: "rem" };
   if (A(r, "scale-"))
-    return { value: `${l}${`${t / 100}`}`, unit: "-" };
+    return { value: `${s}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
     const o = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
     if (o)
@@ -1485,32 +1488,32 @@ const Jr = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [o, s] = C(t.split("/"), (d) => parseInt(d, 10));
-    return { value: l + (o / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [o, l] = C(t.split("/"), (d) => parseInt(d, 10));
+    return { value: s + (o / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return ft(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return vt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const Qr = (r) => {
+const el = (r) => {
   if (m(r))
     return { value: "", unit: "" };
-  const l = r.match(/\[.*\]/g);
-  if (l === null)
-    return es(r);
-  const t = g(l, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", s = ge(t.match(/\d+.\d+|\d+/g));
-  return { value: `${o}${s}`, unit: t.replace(s, "") };
-}, es = (r) => m(r) ? { value: "", unit: "" } : Jr(r), nt = $.createContext({
+  const s = r.match(/\[.*\]/g);
+  if (s === null)
+    return tl(r);
+  const t = g(s, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
+  return { value: `${o}${l}`, unit: t.replace(l, "") };
+}, tl = (r) => m(r) ? { value: "", unit: "" } : Qr(r), nt = $.createContext({
   setDragData: () => {
   }
-}), ts = ({
+}), rl = ({
   unit: r,
-  currentValue: l,
+  currentValue: s,
   onDrag: t,
   onDragEnd: o,
-  onDragStart: s,
+  onDragStart: l,
   negative: d,
   cssProperty: a
 }) => {
-  const { setDragData: c } = le(nt);
+  const { setDragData: c } = se(nt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
@@ -1521,41 +1524,41 @@ const Qr = (r) => {
           onDragEnd: o,
           dragging: !0,
           dragStartY: i.pageY,
-          dragStartValue: `${l}`,
+          dragStartValue: `${s}`,
           dragUnit: r,
           negative: d,
           cssProperty: a
         };
-        s(p), c(p);
+        l(p), c(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Lt, {})
+      children: /* @__PURE__ */ e.jsx(Et, {})
     }
   );
-}, rs = ({ onSelect: r, current: l, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
-  xe,
+}, ll = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
+  ge,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: l === o ? "primary" : void 0,
+    color: s === o ? "primary" : void 0,
     size: "sm",
-    onClick: (s) => {
-      s.stopPropagation(), r(o);
+    onClick: (l) => {
+      l.stopPropagation(), r(o);
     },
     children: o
   },
   o
-)) }), Le = 50, ss = (r) => {
-  const [l, t] = j(!1), [o, s] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: h } = r, [n, y] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
+)) }), Le = 50, sl = (r) => {
+  const [s, t] = j(!1), [o, l] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: h } = r, [n, y] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
   M(() => {
-    const { value: b, unit: v } = Qr(d);
+    const { value: b, unit: v } = el(d);
     if (v === "") {
-      s(b), y(i != null && i.toLowerCase().includes("width") ? "%" : ge(p));
+      l(b), y(i != null && i.toLowerCase().includes("width") ? "%" : ue(p));
       return;
     }
-    y(v), s(v === "class" || m(b) ? "" : b);
+    y(v), l(v === "class" || m(b) ? "" : b);
   }, [d, i, p]);
-  const N = ve((b) => a(b), [a], Le), D = ve((b) => a(b, !1), [a], Le), z = B(
+  const N = fe((b) => a(b), [a], Le), D = fe((b) => a(b, !1), [a], Le), z = B(
     (b = !1) => {
       const v = Ae(`${o}`, p);
       if (g(v, "error", !1)) {
@@ -1593,8 +1596,8 @@ const Qr = (r) => {
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: n === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: d }),
-    /* @__PURE__ */ e.jsxs(X, { children: [
-      /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
+    /* @__PURE__ */ e.jsxs(F, { children: [
+      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${L ? "z-auto" : ""}`, children: [
@@ -1610,7 +1613,7 @@ const Qr = (r) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
             b.preventDefault(), E(!0);
-            const v = vt(b.target.value);
+            const v = wt(b.target.value);
             let S = ze(v) ? 0 : v;
             b.keyCode === 38 && (S += 1), b.keyCode === 40 && (S -= 1);
             const O = `${S}`, dt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${n === "-" ? "" : n}]`;
@@ -1621,7 +1624,7 @@ const Qr = (r) => {
           },
           onBlur: () => z(),
           onChange: (b) => {
-            u(!1), s(b.target.value);
+            u(!1), l(b.target.value);
           },
           onClick: (b) => {
             var v;
@@ -1634,21 +1637,21 @@ const Qr = (r) => {
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(X, { open: l, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(F, { open: s, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!l),
+            onClick: () => t(!s),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: n }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Et, {}) : null
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Ot, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          rs,
+        /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ll,
           {
             units: p,
             current: n,
@@ -1660,7 +1663,7 @@ const Qr = (r) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(n) !== -1 || L ? null : /* @__PURE__ */ e.jsx(
-      ts,
+      rl,
       {
         onDragStart: () => w(!0),
         onDragEnd: (b) => {
@@ -1684,9 +1687,9 @@ const Qr = (r) => {
     )
   ] }) }) });
 }, ae = (r) => {
-  const l = ye();
-  return wt(l, { property: r });
-}, ls = (r, l) => {
+  const s = xe();
+  return jt(s, { property: r });
+}, ol = (r, s) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1695,8 +1698,8 @@ const Qr = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[g(r, "mq", "xs")] <= t[l];
-}, os = {
+  return t[g(r, "mq", "xs")] <= t[s];
+}, al = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1769,19 +1772,19 @@ const Qr = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, as = (r) => `${r.toUpperCase()} ${Ee[r] ? `(${Ee[r]} & up)` : ""}`, Re = (r) => {
-  const { t: l } = K(), { type: t = "icons", label: o, property: s, onEmitChange: d = () => {
-  }, units: a, negative: c = !1 } = r, [i] = gr(), [p] = Qe(), [, h] = Be(), n = ae(s), y = qe(), x = Ge(), [u] = Je(), f = _(() => g(n, "fullCls", ""), [n]), k = B(
+}, nl = (r) => `${r.toUpperCase()} ${Ee[r] ? `(${Ee[r]} & up)` : ""}`, Re = (r) => {
+  const { t: s } = K(), { type: t = "icons", label: o, property: l, onEmitChange: d = () => {
+  }, units: a, negative: c = !1 } = r, [i] = xr(), [p] = Qe(), [, h] = Be(), n = ae(l), y = qe(), x = Ge(), [u] = Je(), f = _(() => g(n, "fullCls", ""), [n]), k = B(
     (D, z = !0) => {
-      const G = { dark: i, mq: h, mod: p, cls: D, property: s, fullCls: "" };
+      const G = { dark: i, mq: h, mod: p, cls: D, property: l, fullCls: "" };
       (i || p !== "") && (G.mq = "xs");
-      const b = $r(G);
+      const b = Ir(G);
       y(u, [b], z);
     },
-    [u, i, h, p, s, y]
+    [u, i, h, p, l, y]
   ), L = B(() => {
     x(u, [f]);
-  }, [u, f, x]), w = _(() => ls(n, h), [n, h]);
+  }, [u, f, x]), w = _(() => ol(n, h), [n, h]);
   M(() => {
     d(w, n);
   }, [w, d, n]);
@@ -1798,28 +1801,28 @@ const Qr = (r) => {
     },
     [I]
   ), N = g(n, "dark", null) === i && g(n, "mod", null) === p && g(n, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(Wr, { canChange: w, canReset: n && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${n && !N ? "text-foreground" : ""}`, children: l(o) }) }),
+  return /* @__PURE__ */ e.jsx(Ur, { canChange: w, canReset: n && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${n && !N ? "text-foreground" : ""}`, children: s(o) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ss,
+          sl,
           {
             currentClass: g(n, "cls", ""),
-            classPrefix: g(os, s, ""),
+            classPrefix: g(al, l, ""),
             units: a || [],
             onChange: k,
             negative: c,
-            cssProperty: s
+            cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: k }),
-        t === "range" && /* @__PURE__ */ e.jsx(Ur, { property: s, onChange: k }),
-        t === "color" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: k }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(at, { label: o, property: s, onChange: k })
+        t === "icons" && /* @__PURE__ */ e.jsx(qr, { property: l, onChange: k }),
+        t === "range" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: k }),
+        t === "color" && /* @__PURE__ */ e.jsx(Jr, { property: l, onChange: k }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(at, { label: o, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && n ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Mt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && n ? /* @__PURE__ */ e.jsxs(F, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
@@ -1830,7 +1833,7 @@ const Qr = (r) => {
         /* @__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: [
-            as(g(n, "mq")),
+            nl(g(n, "mq")),
             i && !n.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1850,16 +1853,16 @@ const Qr = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
+}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
   label: r,
-  options: l,
+  options: s,
   borderB: t = !1,
   borderT: o = !1,
-  type: s = "arbitrary",
-  units: d = ns,
+  type: l = "arbitrary",
+  units: d = il,
   negative: a = !1
 }) => {
-  const { t: c } = K(), [i, p] = j(l[0].key), h = ye(), n = B((y) => C(h, "property").includes(y), [h]);
+  const { t: c } = K(), [i, p] = j(s[0].key), h = xe(), n = B((y) => C(h, "property").includes(y), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1868,8 +1871,8 @@ const Qr = (r) => {
         /* @__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: $.Children.toArray(
-            l.map(({ label: y, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
-              /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+            s.map(({ label: y, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(F, { children: [
+              /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
@@ -1879,18 +1882,18 @@ const Qr = (r) => {
                     $.createElement("div", {
                       className: n(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(g(ot, x, Fe), { className: "text-inherit w-3 h-3" })
+                    $.createElement(g(ot, x, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Z, { children: Y(se(y)) })
+              /* @__PURE__ */ e.jsx(Z, { children: Y(le(y)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           Re,
           {
-            type: s,
+            type: l,
             units: [...d],
             label: "",
             property: i,
@@ -1900,43 +1903,43 @@ const Qr = (r) => {
       ]
     }
   );
-}, is = ({ heading: r, items: l }) => {
-  const { t } = K(), o = ye(), s = _(() => {
+}, dl = ({ heading: r, items: s }) => {
+  const { t } = K(), o = xe(), l = _(() => {
     const d = (i) => U(
       i.map((p) => p.styleType === "multiple" ? C(p.options, "key") : p.property)
     ), a = U(
-      l.map((i) => i.styleType === "accordion" ? d(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+      s.map((i) => i.styleType === "accordion" ? d(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), c = C(o, "property");
     return Ye(a, c).length > 0;
-  }, [o, l]);
+  }, [o, 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(r),
-      s ? /* @__PURE__ */ e.jsx(
+      l ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
   ] });
-}, ds = Oe({}), fe = ({ section: r }) => {
-  const { t: l } = K(), t = ye(), o = B(
+}, cl = Oe({}), me = ({ section: r }) => {
+  const { t: s } = K(), t = xe(), o = B(
     (a = []) => {
       const c = {};
       for (let p = 0; p < t.length; p++)
         c[t[p].property] = t[p].cls;
       let i = !0;
       for (const p in a)
-        if (!be(c, p) || c[p] !== a[p]) {
+        if (!he(c, p) || c[p] !== a[p]) {
           i = !1;
           break;
         }
       return i;
     },
     [t]
-  ), s = _(() => {
+  ), l = _(() => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
     const a = (p) => U(
@@ -1946,27 +1949,27 @@ const Qr = (r) => {
     ), i = C(t, "property");
     return Ye(c, i).length > 0;
   }, [t, r.heading, r.items]), d = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(ds.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
+  return /* @__PURE__ */ e.jsx(cl.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}` }),
-      l(r.heading)
+      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+      s(r.heading)
     ] }) }),
     /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((a) => be(a, "component") ? $.createElement(a.component, { key: a.label }) : be(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(is, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+      r.items.map((a) => he(a, "component") ? $.createElement(a.component, { key: a.label }) : he(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
     ) })
   ] }) });
-}, cs = ({
+}, pl = ({
   item: r,
-  index: l,
+  index: s,
   canDelete: t,
   onChange: o,
-  onRemove: s
+  onRemove: l
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${t ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (d) => o(d, l),
+      onChange: (d) => o(d, s),
       value: r.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1979,7 +1982,7 @@ const Qr = (r) => {
       "input",
       {
         name: "value",
-        onChange: (d) => m(r.key) ? {} : o(d, l),
+        onChange: (d) => m(r.key) ? {} : o(d, s),
         value: r.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1988,22 +1991,22 @@ const Qr = (r) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Mt,
+      zt,
       {
-        onClick: s,
+        onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), ps = ({ section: r }) => {
+] }), ul = ({ section: r }) => {
   var y;
-  const { setSyncState: l } = xr(), t = q(), [o, s] = j([]), [d] = Se(), a = Ue(), c = `${g(d, "0.prop")}_attrs`;
+  const { setSyncState: s } = yr(), t = q(), [o, l] = j([]), [d] = Se(), a = Ue(), c = `${g(d, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const x = C(g(t, c), (u, f) => ({ key: f, value: u }));
-    m(x) ? s([]) : s(x);
+    m(x) ? l([]) : l(x);
   }, [g(t, c)]);
-  const i = () => s([...o, { key: "", value: "" }]), p = (x) => {
-    const u = je(o, (f, k) => x !== k);
+  const i = () => l([...o, { key: "", value: "" }]), p = (x) => {
+    const u = we(o, (f, k) => x !== k);
     n(u);
   }, h = (x, u) => {
     const f = [...o];
@@ -2011,11 +2014,11 @@ const Qr = (r) => {
   }, n = ne.useCallback(
     (x = []) => {
       const u = {};
-      ue(x, (f) => {
+      ke(x, (f) => {
         m(f.key) || Me(u, f.key, f.value);
-      }), a([g(t, "_id")], { [c]: u }), l("UNSAVED");
+      }), a([g(t, "_id")], { [c]: u }), s("UNSAVED");
     },
-    [t, l, a, c]
+    [t, s, a, c]
   );
   return /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
@@ -2033,10 +2036,10 @@ const Qr = (r) => {
         /* @__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 ${!m(o) && m((y = we(o)) == null ? void 0 : y.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 ${!m(o) && m((y = ve(o)) == null ? void 0 : y.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 x;
-              !m(o) && m((x = we(o)) == null ? void 0 : x.key) || i();
+              !m(o) && m((x = ve(o)) == null ? void 0 : x.key) || i();
             },
             children: [
               /* @__PURE__ */ e.jsx(Ne, { width: 12, height: 12 }),
@@ -2051,7 +2054,7 @@ const Qr = (r) => {
           C(o, (x, u) => {
             const f = o.length > 0 && u < o.length - 1;
             return /* @__PURE__ */ e.jsx(
-              cs,
+              pl,
               {
                 item: x,
                 index: u,
@@ -2066,8 +2069,8 @@ const Qr = (r) => {
     ] }) })
   ] });
 };
-function us() {
-  const [r, l] = Qe(), { flexChild: t, gridChild: o } = yr(), [, s] = Vr(hr), { t: d } = K(), [a] = Se();
+function gl() {
+  const [r, s] = Qe(), { flexChild: t, gridChild: o } = hr(), [, l] = Hr(br), { t: d } = K(), [a] = Se();
   return m(a) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: d("no_styling_block_selected") }),
@@ -2079,12 +2082,12 @@ function us() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => s(!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 h-12 border-border px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
         /* @__PURE__ */ e.jsx(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(br, { defaultValue: r, onValueChange: (c) => l(c), children: [
-          /* @__PURE__ */ e.jsx(mr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(vr, { children: [
+        /* @__PURE__ */ e.jsxs(mr, { defaultValue: r, onValueChange: (c) => s(c), children: [
+          /* @__PURE__ */ e.jsx(fr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(vr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(wr, { children: [
             /* @__PURE__ */ e.jsx(V, { value: "", children: "Normal" }),
             /* @__PURE__ */ e.jsx(V, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(V, { value: "active", children: "Active" }),
@@ -2101,15 +2104,15 @@ function us() {
         ] })
       ] }) }),
       /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsxs(Ke, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-        t && /* @__PURE__ */ e.jsx(fe, { section: Xr }),
-        o ? /* @__PURE__ */ e.jsx(fe, { section: Fr }) : null,
-        Zr.map((c) => /* @__PURE__ */ e.jsx(fe, { section: c }, c.heading)),
-        /* @__PURE__ */ e.jsx(ps, { section: { heading: "Attributes" } })
+        t && /* @__PURE__ */ e.jsx(me, { section: Xr }),
+        o ? /* @__PURE__ */ e.jsx(me, { section: Zr }) : null,
+        Wr.map((c) => /* @__PURE__ */ e.jsx(me, { section: c }, c.heading)),
+        /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
       ] }) })
     ] })
   );
 }
-const gs = {
+const xl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2120,8 +2123,8 @@ const gs = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, yl = () => {
-  const r = q(), { t: l } = K(), [t, o] = $.useState(""), [s, d] = $.useState({
+}, fs = () => {
+  const r = q(), { t: s } = K(), [t, o] = $.useState(""), [l, d] = $.useState({
     onDrag: (i) => i,
     onDragEnd: (i) => i,
     dragStartY: 0,
@@ -2130,20 +2133,20 @@ const gs = {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), a = ve(
+  }), a = fe(
     (i) => {
-      const p = !g(s, "negative", !1), h = g(s, "cssProperty", "");
-      let n = parseFloat(s.dragStartValue);
+      const p = !g(l, "negative", !1), h = g(l, "cssProperty", "");
+      let n = parseFloat(l.dragStartValue);
       n = ze(n) ? 0 : n;
-      let y = gs[s.dragUnit];
+      let y = xl[l.dragUnit];
       (W(h, "scale") || h === "opacity") && (y = 10);
-      let u = (s.dragStartY - i.pageY) / y + n;
-      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), s.onDrag(`${u}`), o(`${u}`);
+      let u = (l.dragStartY - i.pageY) / y + n;
+      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), o(`${u}`);
     },
-    [s],
+    [l],
     50
   ), c = B(() => {
-    setTimeout(() => s.onDragEnd(`${t}`), 100), d({
+    setTimeout(() => l.onDragEnd(`${t}`), 100), d({
       onDrag: (i) => i,
       onDragEnd: (i) => i,
       dragStartY: 0,
@@ -2153,12 +2156,12 @@ const gs = {
       negative: !1,
       cssProperty: ""
     });
-  }, [s, t, d]);
-  return jt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  }, [l, t, d]);
+  return Ct(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(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
+    /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
   ] }) }) : /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: d }, children: [
-    s.dragging ? /* @__PURE__ */ e.jsx(
+    l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: a,
@@ -2166,23 +2169,23 @@ const gs = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(wr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(jr, { className: "mx-1 grid grid-cols-2", children: [
-        /* @__PURE__ */ e.jsx(De, { value: "settings", children: l("settings") }),
-        /* @__PURE__ */ e.jsx(De, { value: "styling", children: l("styling") })
+    /* @__PURE__ */ e.jsxs(jr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(Cr, { className: "mx-1 grid grid-cols-2", children: [
+        /* @__PURE__ */ e.jsx(De, { value: "settings", children: s("settings") }),
+        /* @__PURE__ */ e.jsx(De, { value: "styling", children: s("styling") })
       ] }),
       /* @__PURE__ */ e.jsx(
         $e,
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(zr, {}) })
+          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
         }
       ),
-      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(us, {}) })
+      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(gl, {}) })
     ] })
   ] }) });
 };
 export {
-  yl as default
+  fs as default
 };