@chaibuilder/sdk 1.0.22 → 1.0.23

package/dist/{Settings-MbtN9j5p.js → Settings-lxTrbI-C.js}

@@ -1,22 +1,22 @@
 import { j as e } from "./jsx-runtime-NV737rRe.js";
 import * as ne from "react";
-import P, { useState as w, useMemo as N, useEffect as _, useCallback as A, createContext as Oe, useContext as re } from "react";
+import P, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Oe, useContext as re } from "react";
 import { useThrottledCallback as me } from "@react-hookz/web";
-import { forEach as je, isArray as ae, omit as it, truncate as dt, includes as M, get as p, first as we, split as ct, startCase as Y, toLower as te, isEmpty as b, map as C, find as pt, last as ye, filter as be, set as Me, 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 Ee, findLast as ft, flatten as U, intersection as _e, has as ge, isNull as vt } from "lodash";
+import { forEach as je, isArray as ae, omit as ct, truncate as pt, includes as M, get as p, first as we, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as ye, filter as be, set as Me, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Re, startsWith as z, isNumber as ft, parseInt as vt, isNaN as Ee, findLast as jt, flatten as U, intersection as _e, has as ge, isNull as wt } 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 kt, ArrowBottomLeftIcon as Nt, 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 Pt, InfoCircledIcon as ke, MinusIcon as $t, BoxIcon as We, RowSpacingIcon as It, TriangleDownIcon as Lt, TrashIcon as Xe, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b1 as Ot, b2 as Mt, B as pe, b3 as Et, b4 as _t, b5 as Ft, b6 as Yt, b7 as Wt, b8 as Xt, b9 as Zt, a6 as G, aq as zt, ar as Ut, as as Gt, ba as Kt, ao as qt, bb as Jt, ap as Qt, aH as W, aI as X, aK as Z, ak as er, bc as tr, bd as rr, be as lr, bf as sr, bg as or, bh as nr, p as ze, ac as Ue, bi as Ge, bj as ie, bk as de, bl as ce, aj as Ne, P as Ke, a3 as qe, j as Je, aM as Te, bm as ar, bn as ir, a4 as ue, W as dr, a9 as Qe, R as He, ag as cr, ad as pr, bo as ur, au as xr, av as gr, aw as hr, ax as mr, ay as H, bp as yr, aB as br, aC as fr, aD as Be, aE as Ae } from "./index-pgz9p5Yh.js";
-import vr from "@rjsf/core";
-import jr from "@rjsf/validator-ajv8";
-import { u as wr } from "./controls-G0puEH71.js";
-import { Check as Cr, EditIcon as kr, TrashIcon as Nr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Tr } from "@chaibuilder/runtime";
-import { E as Sr, u as tt } from "./index-UPQtDmUs.js";
-import { useAtom as Rr } from "jotai";
-import Vr from "react-autosuggest";
-import Hr from "fuse.js";
-import { A as Br, C as xe, d as Ar } from "./utils-PPBbw5bk.js";
-import { a as Dr } from "./MODIFIERS-MLfpKQY1.js";
+import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as Ct, 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 kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as St, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as Pt, LetterCaseUppercaseIcon as $t, Cross1Icon as It, InfoCircledIcon as ke, MinusIcon as Lt, BoxIcon as We, RowSpacingIcon as Ot, TriangleDownIcon as Mt, TrashIcon as Xe, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b1 as Et, b2 as _t, B as pe, b3 as Ft, b4 as Yt, b5 as Wt, b6 as Xt, b7 as Zt, b8 as zt, b9 as Ut, a6 as G, aq as Gt, ar as Kt, as as qt, ba as Jt, ao as Qt, bb as er, ap as tr, aH as W, aI as X, aK as Z, ak as rr, bc as lr, bd as sr, be as or, bf as nr, bg as ar, bh as ir, p as ze, ac as Ue, bi as Ge, bj as ie, bk as de, bl as ce, aj as Ne, P as Ke, a3 as qe, j as Je, aM as Te, bm as dr, bn as cr, a4 as ue, W as pr, a9 as Qe, R as He, ag as ur, ad as xr, bo as gr, au as hr, av as mr, aw as yr, ax as br, ay as H, bp as fr, aB as vr, aC as jr, aD as Be, aE as Ae } from "./index-Vx4ctSV6.js";
+import wr from "@rjsf/core";
+import Cr from "@rjsf/validator-ajv8";
+import { u as kr } from "./controls-G0puEH71.js";
+import { Check as Nr, EditIcon as Tr, TrashIcon as Sr } from "lucide-react";
+import { getBlockComponent as et, getChaiDataProviders as Rr } from "@chaibuilder/runtime";
+import { E as tt, u as rt } from "./index-WPlT_Q87.js";
+import { useAtom as Vr } from "jotai";
+import Hr from "react-autosuggest";
+import Br from "fuse.js";
+import { A as Ar, C as xe, d as Dr } from "./utils-PPBbw5bk.js";
+import { a as Pr } from "./MODIFIERS-MLfpKQY1.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -62,16 +62,16 @@ import "./tailwind-config-d1VL1lzE.js";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "sonner";
-const Pr = P.lazy(() => import("react-json-view"));
-function $r(t) {
+const $r = P.lazy(() => import("react-json-view"));
+function Ir(t) {
   const l = [], r = {};
-  function s(o, a) {
+  function s(n, a) {
     je(a, (d, i) => {
-      const n = o ? `${o}.${i}` : i, u = ae(d) ? "list" : typeof d;
-      l.push(n), r[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && s(n, d);
+      const o = n ? `${n}.${i}` : i, u = ae(d) ? "list" : typeof d;
+      l.push(o), r[o] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && s(o, d);
     });
   }
-  return s("", it(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
+  return s("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
 }
 const fe = ({ data: t, fullView: l }) => {
   if (!t)
@@ -79,8 +79,8 @@ const fe = ({ data: t, fullView: l }) => {
   const r = typeof t;
   return l ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(Sr, { children: /* @__PURE__ */ e.jsx(
-      Pr,
+    /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
+      $r,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -94,26 +94,26 @@ const fe = ({ data: t, fullView: l }) => {
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: "text-gray-800/50 text-[12px] leading-4 w-full max-h-36 overflow-x-hidden overflow-y-auto", children: [
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     t
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: dt(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: pt(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
 }, De = ({
   type: t,
   value: l = "",
   setValue: r,
   data: s,
-  onChange: o,
+  onChange: n,
   dataType: a,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: n } = $r(s), u = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (g) => !M(d, g) && p(u, `props.${we(ct(g, "."))}.binding`)
-  ) : i.filter((g) => a === p(n, g, "")), [t, i, d, a, u]);
+  const { paths: i, pathsType: o } = Ir(s), u = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (g) => !M(d, g) && p(u, `props.${we(ut(g, "."))}.binding`)
+  ) : i.filter((g) => a === p(o, g, "")), [t, i, d, a, u]);
   return _(() => {
-    l && o(l);
+    l && n(l);
   }, [l, 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(Ot, { open: c, onOpenChange: m, children: [
-        /* @__PURE__ */ e.jsx(Mt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsxs(Et, { open: c, onOpenChange: m, children: [
+        /* @__PURE__ */ e.jsx(_t, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           pe,
           {
             variant: "outline",
@@ -131,24 +131,24 @@ const fe = ({ data: t, fullView: l }) => {
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Et, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(_t, { children: [
-          /* @__PURE__ */ e.jsx(Ft, { placeholder: `Choose ${te(t)}...` }),
-          /* @__PURE__ */ e.jsxs(Yt, { children: [
-            /* @__PURE__ */ e.jsx(Wt, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(Xt, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
-              Zt,
+        /* @__PURE__ */ e.jsx(Ft, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Yt, { children: [
+          /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${te(t)}...` }),
+          /* @__PURE__ */ e.jsxs(Xt, { children: [
+            /* @__PURE__ */ e.jsx(Zt, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(zt, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
+              Ut,
               {
                 value: g,
                 className: `cursor-pointer ${x ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
-                  r(pt(h, (T) => T === f) || null), m(!1);
+                  r(xt(h, (T) => T === f) || null), m(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Cr, { className: `w-4 h-4 text-green-500 ${l === g ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Nr, { className: `w-4 h-4 text-green-500 ${l === 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(s, 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(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(fe, { data: p(s, g) }) })
                 ]
               },
               g
@@ -159,30 +159,30 @@ const fe = ({ data: t, fullView: l }) => {
     ] }),
     !x && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(fe, { data: p(s, l, ""), fullView: !0 }) })
   ] });
-}, Ir = ({
+}, Lr = ({
   appliedBindings: t = [],
   onAddBinding: l,
   editMode: r,
   item: s
 }) => {
-  const [o, a] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), n = G(), [u] = tt(), x = A(
+  const [n, a] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), o = G(), [u] = rt(), x = A(
     (h, g) => {
       if (b(h))
         return "";
       {
-        const f = p(g === "PROP" ? n : u, h, "");
+        const f = p(g === "PROP" ? o : u, h, "");
         if (ae(f))
           return "list";
         const T = typeof f;
         return T === "string" ? "text" : T === "object" ? "model" : T;
       }
     },
-    [n, u]
+    [o, u]
   ), [c, m] = w(r ? x(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(zt, { children: [
-      /* @__PURE__ */ e.jsx(Ut, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(Gt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(Gt, { children: [
+      /* @__PURE__ */ e.jsx(Kt, { 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("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
@@ -191,13 +191,13 @@ const fe = ({ data: t, fullView: l }) => {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: o,
+          value: n,
           setValue: a,
           onChange: (h) => {
             const g = x(h, "PROP");
             a(h), c !== g && i(""), m(g);
           },
-          data: n,
+          data: o,
           dataType: c,
           appliedBindings: t
         }
@@ -207,7 +207,7 @@ const fe = ({ data: t, fullView: l }) => {
         De,
         {
           type: "PATH",
-          isDisabled: b(o),
+          isDisabled: b(n),
           placeholder: "Enter data path",
           value: d,
           setValue: i,
@@ -221,60 +221,60 @@ const fe = ({ data: t, fullView: l }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(Kt, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(Jt, { children: /* @__PURE__ */ e.jsx(
       pe,
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(o) && b(d),
-        onClick: () => l({ key: o, value: d }),
+        disabled: b(n) && b(d),
+        onClick: () => l({ key: n, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, rt = ({ children: t, onAddBinding: l, appliedBindings: r, editMode: s = !0, item: o = {} }) => {
-  const [a, d] = w(!1);
-  return /* @__PURE__ */ e.jsxs(qt, { children: [
-    /* @__PURE__ */ e.jsx(Jt, { asChild: !0, onClick: () => d(!0), children: t }),
-    a && /* @__PURE__ */ e.jsx(Qt, { children: /* @__PURE__ */ e.jsx(
-      Ir,
+}, lt = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: n = !0, item: a = {} }) => {
+  const [d, i] = w(!1);
+  return /* @__PURE__ */ e.jsxs(Qt, { children: [
+    /* @__PURE__ */ e.jsx(er, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
+    d && /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
+      Lr,
       {
-        item: o,
-        editMode: s,
-        appliedBindings: r,
-        onAddBinding: (i) => {
-          l(i), d(!1);
+        item: a,
+        editMode: n,
+        appliedBindings: s,
+        onAddBinding: (o) => {
+          r(o), i(!1);
         }
       }
     ) })
   ] });
-}, Lr = ({
+}, Or = ({
   item: t,
   onAddBinding: l,
   onRemove: r,
   selectedBlock: s,
-  dataProvider: o,
+  dataProvider: n,
   appliedBindings: a
 }) => {
-  const [d, i] = w("string"), n = (u, x) => {
+  const [d, i] = w("string"), o = (u, x) => {
     if (b(u))
       return "";
     {
-      const c = p(x === "PROP" ? s : o, u, "");
+      const c = p(x === "PROP" ? s : n, u, "");
       if (ae(c))
         return "list";
       const m = typeof c;
       return m === "string" ? "text" : m === "object" ? "model" : m;
     }
   };
-  return _(() => 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: [
+  return _(() => i(() => o(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__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(n, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(rt, { editMode: !0, onAddBinding: l, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(kr, { 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(lt, { editMode: !0, onAddBinding: l, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Tr, { 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(
-        Nr,
+        Sr,
         {
           onClick: () => r(),
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
@@ -283,8 +283,8 @@ const fe = ({ data: t, fullView: l }) => {
     ] }),
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
-}, Or = ({ bindingData: t, onChange: l }) => {
-  const r = G(), [s] = tt(), o = Tr(), [a, d] = w(
+}, Mr = ({ bindingData: t, onChange: l }) => {
+  const r = G(), [s] = rt(), n = Rr(), [a, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
@@ -297,7 +297,7 @@ const fe = ({ data: t, fullView: l }) => {
       return !1;
     const c = ye(a);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [s, a]), n = (c) => {
+  }, [s, a]), o = (c) => {
     const m = be(a, (h) => h.key !== c.key);
     d([...m, c]), x([...m, c]);
   }, u = (c) => {
@@ -316,16 +316,16 @@ const fe = ({ data: t, fullView: l }) => {
     },
     [l]
   );
-  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(n) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
     C(a, (c, m) => /* @__PURE__ */ e.jsx(
-      Lr,
+      Or,
       {
         item: c,
-        onAddBinding: n,
+        onAddBinding: o,
         onRemove: () => u(m),
         selectedBlock: r,
         dataProvider: s,
@@ -334,80 +334,89 @@ const fe = ({ data: t, fullView: l }) => {
       c.key
     )),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(rt, { appliedBindings: C(a, "key"), onAddBinding: n, children: /* @__PURE__ */ e.jsx(
-        "button",
+      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+        lt,
         {
           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(s) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+          appliedBindings: C(a, "key"),
+          onAddBinding: o,
+          children: /* @__PURE__ */ e.jsx(
+            "span",
+            {
+              className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: b(s) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+            }
+          )
         }
-      ) }) }),
+      ) }),
       i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, 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" }), Pe = ({
-  createHistorySnapshot: t,
-  properties: l,
-  formData: r,
-  onChange: s
-}) => {
-  const [o] = er(), a = { type: "object", properties: {} }, d = {};
-  return Object.keys(l).forEach((i) => {
-    const n = l[i];
-    if (M(["slot", "styles"], n.type))
-      return;
-    const u = p(n, "i18n", !1) ? `${i}-${o}` : i;
-    a.properties[u] = tr(n, o), d[u] = rr(n, o);
-  }), /* @__PURE__ */ e.jsx(
-    vr,
-    {
-      widgets: {
-        binding: Mr,
-        richtext: lr,
-        icon: sr,
-        image: or
-      },
-      fields: {
-        link: nr
-      },
-      idSeparator: ".",
-      autoComplete: "off",
-      omitExtraData: !1,
-      liveOmit: !1,
-      liveValidate: !0,
-      validator: jr,
-      uiSchema: d,
-      onBlur: t,
-      schema: a,
-      formData: r,
-      onChange: s
-    }
-  );
-};
-function Er() {
-  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), o = { ...t }, a = () => l(), d = ({ formData: x }, c) => {
+}, Er = () => /* @__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 = dt(
+  ({
+    createHistorySnapshot: t,
+    properties: l,
+    formData: r,
+    onChange: s
+  }) => {
+    const [n] = rr(), a = { type: "object", properties: {} }, d = {};
+    return Object.keys(l).forEach((i) => {
+      const o = l[i];
+      if (M(["slot", "styles"], o.type))
+        return;
+      const u = p(o, "i18n", !1) ? `${i}-${n}` : i;
+      a.properties[u] = lr(o, n), d[u] = sr(o, n);
+    }), /* @__PURE__ */ e.jsx(
+      wr,
+      {
+        widgets: {
+          binding: Er,
+          richtext: or,
+          icon: nr,
+          image: ar
+        },
+        fields: {
+          link: ir
+        },
+        idSeparator: ".",
+        autoComplete: "off",
+        omitExtraData: !1,
+        liveOmit: !1,
+        liveValidate: !0,
+        validator: Cr,
+        uiSchema: d,
+        onBlur: t,
+        schema: a,
+        formData: r,
+        onChange: s
+      }
+    );
+  }
+);
+function _r() {
+  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), n = { ...t }, a = () => l(), d = ({ formData: x }, c) => {
     if (c) {
       const m = c.replace("root.", "");
       r([t._id], { [m]: p(x, m) });
     }
   }, i = {
-    _name: wr({
+    _name: kr({
       title: "Name",
       default: p(t, "_name", t._type)
     })
-  }, n = ut(p(o, "_bindings", {})), u = N(() => {
-    const x = xt(p(s, "props", {}));
-    return gt(n, (c) => {
+  }, o = gt(p(n, "_bindings", {})), u = N(() => {
+    const x = ht(p(s, "props", {}));
+    return mt(o, (c) => {
       delete x[c];
     }), x;
-  }, [s, n]);
+  }, [s, o]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
       Pe,
       {
         onChange: d,
         createHistorySnapshot: a,
-        formData: o,
+        formData: n,
         properties: i
       }
     ),
@@ -424,11 +433,11 @@ function Er() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Or,
+          Mr,
           {
-            bindingData: p(o, "_bindings", {}),
+            bindingData: p(n, "_bindings", {}),
             onChange: (x) => {
-              d({ formData: { ...o, _bindings: x } }, "root._bindings");
+              d({ formData: { ...n, _bindings: x } }, "root._bindings");
             }
           }
         ) })
@@ -439,11 +448,11 @@ function Er() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(ce, { className: "pt-4", children: [
-          b(n) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
+          b(o) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(n, ht).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(o, yt).join(", ") }),
             " ",
-            n.length === 1 ? "property" : "properties",
+            o.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
@@ -451,7 +460,7 @@ function Er() {
             {
               onChange: d,
               createHistorySnapshot: a,
-              formData: o,
+              formData: n,
               properties: u
             }
           )
@@ -461,17 +470,17 @@ function Er() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const $e = new Hr(Br, {
+const $e = new Br(Ar, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function _r() {
+function Fr() {
   var D;
-  const [t] = Ne(), l = G(), r = Ke(), s = qe(), [o] = Je(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(l, i, "").replace(Dr, "").split(",").pop() || "").split(" "), b), u = () => {
+  const [t] = Ne(), l = G(), r = Ke(), s = qe(), [n] = Je(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, o = bt((p(l, i, "").replace(Pr, "").split(",").pop() || "").split(" "), b), u = () => {
     const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    r(o, j, !0), d("");
+    r(n, j, !0), d("");
   }, [x, c] = w([]), m = ({ value: j }) => {
     const L = j.trim().toLowerCase(), $ = L.match(/.+:/g);
     let k = [];
@@ -507,7 +516,7 @@ function _r() {
         /* @__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(
-            Vr,
+            Hr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: m,
@@ -538,9 +547,9 @@ function _r() {
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
+          b(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
           ne.Children.toArray(
-            n.map((j) => /* @__PURE__ */ e.jsxs(
+            o.map((j) => /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: "group relative flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
@@ -549,7 +558,7 @@ function _r() {
                   /* @__PURE__ */ e.jsx(
                     Ye,
                     {
-                      onClick: () => s(o, [j]),
+                      onClick: () => s(n, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -563,7 +572,7 @@ function _r() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   heading: "Flex Child",
   items: [
     { type: "arbitrary", label: "Basis", units: B, property: "flexBasis" },
@@ -572,7 +581,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, Yr = {
+}, Wr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -583,7 +592,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, Wr = [
+}, Xr = [
   {
     heading: "Display",
     items: [
@@ -985,12 +994,12 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
   },
   {
     heading: "Classes",
-    items: [{ component: _r }]
+    items: [{ component: Fr }]
   }
-], lt = {
+], st = {
   "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: jt,
+  visible: Ct,
   invisible: Ve,
   // display
   hidden: Ve,
@@ -1026,10 +1035,10 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
   borderRadiusRight: J,
   borderRadiusBottom: Q,
   borderRadiusLeft: ee,
-  borderRadiusTopLeft: wt,
-  borderRadiusTopRight: Ct,
-  borderRadiusBottomRight: kt,
-  borderRadiusBottomLeft: Nt,
+  borderRadiusTopLeft: kt,
+  borderRadiusTopRight: Nt,
+  borderRadiusBottomRight: Tt,
+  borderRadiusBottomLeft: St,
   divideXWidth: R,
   divideYWidth: V,
   scale: O,
@@ -1056,18 +1065,18 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
   marginBottom: Q,
   marginLeft: ee,
   // text-align
-  textLeft: Tt,
-  textCenter: St,
-  textRight: Rt,
-  textJustify: Vt,
+  textLeft: Rt,
+  textCenter: Vt,
+  textRight: Ht,
+  textJustify: Bt,
   // font style
-  italic: Ht,
+  italic: At,
   // "not-italic": "",
   // decoration
-  underline: Bt,
-  overline: At,
+  underline: Dt,
+  overline: Pt,
   // transform
-  uppercase: Dt,
+  uppercase: $t,
   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",
@@ -1180,14 +1189,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
       }
     )
   ] }),
-  static: Pt
-}, le = Oe({ canReset: !1, canChange: !0 }), Xr = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
+  static: It
+}, le = Oe({ canReset: !1, canChange: !0 }), Zr = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: l, canChange: r }, children: t })
-), st = ({ label: t, property: l, onChange: r }) => {
-  const s = N(() => p(xe, `${l}.classes`, [""]), [l]), o = se(l), a = N(() => p(o, "cls", ""), [o]), { canChange: d } = re(le), i = /\[.*\]/g.test(a);
+), ot = ({ label: t, property: l, onChange: r }) => {
+  const s = N(() => p(xe, `${l}.classes`, [""]), [l]), n = se(l), a = N(() => p(n, "cls", ""), [n]), { canChange: d } = re(le), 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(ar, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx(dr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(ke, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1196,37 +1205,37 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Fr = {
     ve,
     {
       rounded: t,
-      onChange: (n) => r(n, l),
+      onChange: (o) => r(o, l),
       selected: a,
       options: s,
       disabled: !d
     }
   ) });
 };
-function ve({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: o = !1 }) {
+function ve({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: n = !1 }) {
   const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !s.length || o,
+      disabled: !s.length || n,
       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) => l(n.target.value),
-      onKeyDown: (n) => {
-        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
+      onChange: (o) => l(o.target.value),
+      onKeyDown: (o) => {
+        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && i());
       },
       value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         P.Children.toArray(
-          s.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
+          s.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
         )
       ]
     }
   );
 }
-const Zr = ({ property: t, onChange: l }) => {
-  const { canReset: r, canChange: s } = re(le), o = se(t), a = N(() => p(o, "cls", ""), [o]), d = N(() => 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: [
+const zr = ({ property: t, onChange: l }) => {
+  const { canReset: r, canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]), d = N(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, o = /\[.*\]/g.test(a);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1234,10 +1243,10 @@ const Zr = ({ property: t, onChange: l }) => {
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !s && (!r || i - 1 < 0),
         onClick: () => l(Re(d, i - 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx($t, { className: !s && (!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(Lt, { className: !s && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(st, { label: !1, property: t, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: t, onChange: l }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1254,8 +1263,8 @@ const Zr = ({ property: t, onChange: l }) => {
       }
     )
   ] }) });
-}, zr = ({ property: t, onChange: l }) => {
-  const r = N(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), o = se(t), a = N(() => p(o, "cls", ""), [o]);
+}, Ur = ({ property: t, onChange: l }) => {
+  const r = N(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1264,12 +1273,12 @@ const Zr = ({ property: t, onChange: l }) => {
         disabled: !s,
         onClick: () => l(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(p(lt, d, We))
+        children: P.createElement(p(st, d, We))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
   ] })) });
-}, Ur = {
+}, Gr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1281,13 +1290,13 @@ const Zr = ({ property: t, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Gr = ({ property: t, onChange: l }) => {
-  const r = se(t), s = N(() => p(r, "cls", ""), [r]), { canChange: o } = re(le), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = s.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
+}, Kr = ({ property: t, onChange: l }) => {
+  const r = se(t), s = N(() => p(r, "cls", ""), [r]), { canChange: n } = re(le), [a, d] = w([]), [i, o] = w({ color: "", shade: "" }), u = s.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
     // 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" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), o({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((f) => ({ ...f, color: g, shade: f.shade ? f.shade : "500" })));
     },
-    [d, n]
+    [d, o]
   );
   _(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(x))
@@ -1297,20 +1306,20 @@ const Zr = ({ property: t, onChange: l }) => {
   const h = A(
     // eslint-disable-next-line no-shadow
     (g) => {
-      n({ color: x, shade: g });
+      o({ color: x, shade: g });
     },
     [x]
   );
   return _(() => {
-    n({ color: "", shade: "" });
+    o({ color: "", shade: "" });
   }, [r]), _(() => {
-    const f = `${p(Ur, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    const f = `${p(Gr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
     f.match(new RegExp(p(xe, `${t}.regExp`, ""))) && l(f, t);
   }, [i, l, t]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       ve,
       {
-        disabled: !o,
+        disabled: !n,
         rounded: !0,
         selected: x,
         onChange: m,
@@ -1346,7 +1355,7 @@ const Zr = ({ property: t, onChange: l }) => {
         ]
       }
     ) }),
-    /* @__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 || !n, onChange: h, options: a }) })
   ] });
 }, Ie = (t, l) => {
   t = t.toLowerCase();
@@ -1355,10 +1364,10 @@ const Zr = ({ property: t, onChange: l }) => {
     return { value: "", unit: r };
   const s = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
   r = r.replace(s, "");
-  const o = t.match(s), 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 n = t.match(s), a = n && n.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  return a || d ? { error: "Invalid value" } : n && (n[0] === "auto" || n[0] === "none") ? { value: n[0], unit: "" } : { value: r, unit: n ? n[0] : "" };
 };
-const Kr = (t) => {
+const qr = (t) => {
   const l = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
   if (["auto", "none"].includes(r))
     return { value: "", unit: r };
@@ -1482,76 +1491,76 @@ const Kr = (t) => {
   if (["max", "min", "fit"].includes(r))
     return { value: t, unit: "class" };
   if (r.includes("/")) {
-    const [s, o] = C(r.split("/"), (a) => parseInt(a, 10));
-    return { value: l + (s / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [s, n] = C(r.split("/"), (a) => parseInt(a, 10));
+    return { value: l + (s / n * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return yt(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
+  return ft(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 };
-const qr = (t) => {
+const Jr = (t) => {
   if (b(t))
     return { value: "", unit: "" };
   const l = t.match(/\[.*\]/g);
   if (l === null)
-    return Jr(t);
-  const r = p(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", o = we(r.match(/\d+.\d+|\d+/g));
-  return { value: `${s}${o}`, unit: r.replace(o, "") };
-}, Jr = (t) => b(t) ? { value: "", unit: "" } : Kr(t), ot = P.createContext({
+    return Qr(t);
+  const r = p(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", n = we(r.match(/\d+.\d+|\d+/g));
+  return { value: `${s}${n}`, unit: r.replace(n, "") };
+}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), nt = P.createContext({
   setDragData: () => {
   }
-}), Qr = ({
+}), el = ({
   unit: t,
   currentValue: l,
   onDrag: r,
   onDragEnd: s,
-  onDragStart: o,
+  onDragStart: n,
   negative: a,
   cssProperty: d
 }) => {
-  const { setDragData: i } = re(ot);
+  const { setDragData: i } = re(nt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (n) => {
+      onMouseDown: (o) => {
         const u = {
           onDrag: r,
           onDragEnd: s,
           dragging: !0,
-          dragStartY: n.pageY,
+          dragStartY: o.pageY,
           dragStartValue: `${l}`,
           dragUnit: t,
           negative: a,
           cssProperty: d
         };
-        o(u), i(u);
+        n(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(It, {})
+      children: /* @__PURE__ */ e.jsx(Ot, {})
     }
   );
-}, el = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
+}, tl = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
   pe,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
     color: l === s ? "primary" : void 0,
     size: "sm",
-    onClick: (o) => {
-      o.stopPropagation(), t(s);
+    onClick: (n) => {
+      n.stopPropagation(), t(s);
     },
     children: s
   },
   s
-)) }), tl = (t) => {
-  const [l, r] = w(!1), [s, 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, T] = w(""), [D, j] = w(!1), [L, $] = w(!1);
+)) }), rl = (t) => {
+  const [l, r] = w(!1), [s, n] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: o, units: u, negative: x } = t, [c, m] = w(o != null && o.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, $] = w(!1);
   _(() => {
-    const { value: y, unit: v } = qr(a);
+    const { value: y, unit: v } = Jr(a);
     if (v === "") {
-      o(y), m(n != null && n.toLowerCase().includes("width") ? "%" : u[0]);
+      n(y), m(o != null && o.toLowerCase().includes("width") ? "%" : u[0]);
       return;
     }
-    m(v), o(v === "class" || b(y) ? "" : y);
-  }, [a, n, u]);
+    m(v), n(v === "class" || b(y) ? "" : y);
+  }, [a, o, u]);
   const k = me(
     (y) => {
       d(y);
@@ -1619,18 +1628,18 @@ const qr = (t) => {
             if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
             y.preventDefault(), $(!0);
-            const v = bt(y.target.value);
+            const v = vt(y.target.value);
             let S = Ee(v) ? 0 : v;
             y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
-            const E = `${S}`, at = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
-            I(at);
+            const E = `${S}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
+            I(it);
           },
           onKeyUp: (y) => {
             L && (y.preventDefault(), $(!1));
           },
           onBlur: () => F(),
           onChange: (y) => {
-            g(!1), o(y.target.value);
+            g(!1), n(y.target.value);
           },
           onClick: (y) => {
             var v;
@@ -1652,12 +1661,12 @@ const qr = (t) => {
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              u.length > 1 ? /* @__PURE__ */ e.jsx(Lt, {}) : null
+              u.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          el,
+        /* @__PURE__ */ e.jsx(cr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          tl,
           {
             units: u,
             current: c,
@@ -1669,7 +1678,7 @@ const qr = (t) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      Qr,
+      el,
       {
         onDragStart: () => j(!0),
         onDragEnd: (y) => {
@@ -1688,14 +1697,14 @@ const qr = (t) => {
         currentValue: s,
         unit: c,
         negative: x,
-        cssProperty: n
+        cssProperty: o
       }
     )
   ] }) }) });
 }, se = (t) => {
   const l = ue();
-  return ft(l, { property: t });
-}, rl = (t, l) => {
+  return jt(l, { property: t });
+}, ll = (t, l) => {
   const r = {
     xs: 0,
     sm: 1,
@@ -1705,7 +1714,7 @@ const qr = (t) => {
     "2xl": 5
   };
   return r[p(t, "mq", "xs")] <= r[l];
-}, ll = {
+}, sl = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1778,22 +1787,22 @@ const qr = (t) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, sl = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Se = (t) => {
-  const { type: l = "icons", label: r, property: s, onEmitChange: o = () => {
-  }, units: a, negative: d = !1 } = t, [i] = dr(), [n] = Qe(), [, u] = He(), x = se(s), c = Ke(), m = qe(), [h] = Je(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
+}, ol = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Se = (t) => {
+  const { type: l = "icons", label: r, property: s, onEmitChange: n = () => {
+  }, units: a, negative: d = !1 } = t, [i] = pr(), [o] = Qe(), [, u] = He(), x = se(s), c = Ke(), m = qe(), [h] = Je(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
     (k, I = !0) => {
-      const F = { dark: i, mq: u, mod: n, cls: k, property: s, fullCls: "" };
-      (i || n !== "") && (F.mq = "xs");
-      const oe = Ar(F);
+      const F = { dark: i, mq: u, mod: o, cls: k, property: s, fullCls: "" };
+      (i || o !== "") && (F.mq = "xs");
+      const oe = Dr(F);
       c(h, [oe], I);
     },
-    [h, i, u, n, s, c]
+    [h, i, u, o, s, c]
   ), T = A(() => {
     m(h, [g]);
-  }, [h, g, m]), D = N(() => rl(x, u), [x, u]);
+  }, [h, g, m]), D = N(() => ll(x, u), [x, u]);
   _(() => {
-    o(D, x);
-  }, [D, o, x]);
+    n(D, x);
+  }, [D, n, x]);
   const [, , j] = He(), L = A(
     (k) => {
       j({
@@ -1806,26 +1815,26 @@ const qr = (t) => {
       }[k]);
     },
     [j]
-  ), $ = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(Xr, { 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: [
+  ), $ = p(x, "dark", null) === i && p(x, "mod", null) === o && 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 }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         l === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          tl,
+          rl,
           {
             currentClass: p(x, "cls", ""),
-            classPrefix: p(ll, s, ""),
+            classPrefix: p(sl, s, ""),
             units: a || [],
             onChange: f,
             negative: d,
             cssProperty: s
           }
         ) : null,
-        l === "icons" && /* @__PURE__ */ e.jsx(zr, { property: s, onChange: f }),
-        l === "range" && /* @__PURE__ */ e.jsx(Zr, { property: s, onChange: f }),
-        l === "color" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: f }),
-        l === "dropdown" && /* @__PURE__ */ e.jsx(st, { label: r, property: s, onChange: f })
+        l === "icons" && /* @__PURE__ */ e.jsx(Ur, { property: s, onChange: f }),
+        l === "range" && /* @__PURE__ */ e.jsx(zr, { property: s, onChange: f }),
+        l === "color" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: f }),
+        l === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: s, onChange: f })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: $ ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Xe, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
@@ -1839,7 +1848,7 @@ const qr = (t) => {
         /* @__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: [
-            sl(p(x, "mq")),
+            ol(p(x, "mq")),
             i && !x.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1859,16 +1868,16 @@ const qr = (t) => {
       ] }) : null })
     ] })
   ] }) });
-}, ol = ["px", "%", "em", "rem", "ch", "vh", "vw"], nt = ({
+}, nl = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
   label: t,
   options: l,
   borderB: r = !1,
   borderT: s = !1,
-  type: o = "arbitrary",
-  units: a = ol,
+  type: n = "arbitrary",
+  units: a = nl,
   negative: d = !1
 }) => {
-  const [i, n] = w(l[0].key), u = ue(), x = A((c) => C(u, "property").includes(c), [u]);
+  const [i, o] = w(l[0].key), u = ue(), x = A((c) => C(u, "property").includes(c), [u]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1882,13 +1891,13 @@ const qr = (t) => {
                 "button",
                 {
                   type: "button",
-                  onClick: () => n(m),
+                  onClick: () => o(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", {
                       className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(p(lt, m, We), { className: "text-inherit w-3 h-3" })
+                    P.createElement(p(st, m, We), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1899,7 +1908,7 @@ const qr = (t) => {
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           Se,
           {
-            type: o,
+            type: n,
             units: [...a],
             label: "",
             property: i,
@@ -1909,12 +1918,12 @@ const qr = (t) => {
       ]
     }
   );
-}, nl = ({ heading: t, items: l }) => {
+}, al = ({ heading: t, items: l }) => {
   const r = ue(), s = N(() => {
-    const o = (i) => U(
-      i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
+    const n = (i) => U(
+      i.map((o) => o.styleType === "multiple" ? C(o.options, "key") : o.property)
     ), a = U(
-      l.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+      l.map((i) => i.styleType === "accordion" ? n(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
     return _e(a, d).length > 0;
   }, [r, l]);
@@ -1928,17 +1937,17 @@ const qr = (t) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Se, { ...o }, o.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Se, { ...n }, n.label)) })
   ] });
-}, al = Oe({}), he = ({ section: t }) => {
+}, il = Oe({}), he = ({ section: t }) => {
   const l = ue(), r = A(
     (a = []) => {
       const d = {};
-      for (let n = 0; n < l.length; n++)
-        d[l[n].property] = l[n].cls;
+      for (let o = 0; o < l.length; o++)
+        d[l[o].property] = l[o].cls;
       let i = !0;
-      for (const n in a)
-        if (!ge(d, n) || d[n] !== a[n]) {
+      for (const o in a)
+        if (!ge(d, o) || d[o] !== a[o]) {
           i = !1;
           break;
         }
@@ -1948,28 +1957,28 @@ const qr = (t) => {
   ), s = N(() => {
     if (l.length > 0 && t.heading === "Classes")
       return !0;
-    const a = (n) => U(
-      n.map((u) => u.styleType === "multiple" ? U(C(u.options, "key")) : u.property)
+    const a = (o) => U(
+      o.map((u) => u.styleType === "multiple" ? U(C(u.options, "key")) : u.property)
     ), d = U(
-      t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
+      t.items.map((o) => o.styleType === "accordion" ? a(o.items) : o.styleType === "multiple" ? U(C(o.options, "key")) : o.property)
     ), i = C(l, "property");
     return _e(d, i).length > 0;
-  }, [l, t.heading, t.items]), o = N(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(al.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+  }, [l, t.heading, t.items]), n = N(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(il.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}` }),
       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(nl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Se, { ...a }, a.label))
+      t.items.map((a) => ge(a, "component") ? P.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(al, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Se, { ...a }, a.label))
     ) })
   ] }) });
-}, il = ({
+}, dl = ({
   item: t,
   index: l,
   canDelete: r,
   onChange: s,
-  onRemove: o
+  onRemove: n
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
@@ -1999,19 +2008,19 @@ const qr = (t) => {
     /* @__PURE__ */ e.jsx(
       Xe,
       {
-        onClick: o,
+        onClick: n,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), dl = ({ section: t }) => {
+] }), cl = ({ section: t }) => {
   var m;
-  const { setSyncState: l } = cr(), r = G(), [s, o] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  const { setSyncState: l } = ur(), r = G(), [s, n] = w([]), [a] = Ne(), d = Ue(), 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) ? n([]) : n(h);
   }, [p(r, i)]);
-  const n = () => o([...s, { key: "", value: "" }]), u = (h) => {
+  const o = () => n([...s, { key: "", value: "" }]), u = (h) => {
     const g = be(s, (f, T) => h !== T);
     c(g);
   }, x = (h, g) => {
@@ -2045,7 +2054,7 @@ const qr = (t) => {
             className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(s) && b((m = ye(s)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
               var h;
-              !b(s) && b((h = ye(s)) == null ? void 0 : h.key) || n();
+              !b(s) && b((h = ye(s)) == null ? void 0 : h.key) || o();
             },
             children: [
               /* @__PURE__ */ e.jsx(Ce, { width: 12, height: 12 }),
@@ -2060,7 +2069,7 @@ const qr = (t) => {
           C(s, (h, g) => {
             const f = s.length > 0 && g < s.length - 1;
             return /* @__PURE__ */ e.jsx(
-              il,
+              dl,
               {
                 item: h,
                 index: g,
@@ -2075,8 +2084,8 @@ const qr = (t) => {
     ] }) })
   ] });
 };
-function cl() {
-  const [t, l] = Qe(), { flexChild: r, gridChild: s } = pr(), [, o] = Rr(ur), { t: a } = Fe(), [d] = Ne();
+function pl() {
+  const [t, l] = Qe(), { flexChild: r, gridChild: s } = xr(), [, n] = Vr(gr), { t: a } = Fe(), [d] = Ne();
   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") }),
@@ -2088,12 +2097,12 @@ function cl() {
     ] })
   ] }) }) : (
     // 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: () => n(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
         /* @__PURE__ */ e.jsx(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(xr, { defaultValue: t, onValueChange: (i) => l(i), children: [
-          /* @__PURE__ */ e.jsx(gr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(hr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(mr, { children: [
+        /* @__PURE__ */ e.jsxs(hr, { defaultValue: t, onValueChange: (i) => l(i), children: [
+          /* @__PURE__ */ e.jsx(mr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(yr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(br, { children: [
             /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
             /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
@@ -2109,19 +2118,19 @@ function cl() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(yr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+      /* @__PURE__ */ e.jsxs(fr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
         /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", className: "h-full w-full", children: [
-          r && /* @__PURE__ */ e.jsx(he, { section: Fr }),
-          s ? /* @__PURE__ */ e.jsx(he, { section: Yr }) : null,
-          Wr.map((i) => /* @__PURE__ */ e.jsx(he, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(dl, { section: { heading: "Attributes" } })
+          r && /* @__PURE__ */ e.jsx(he, { section: Yr }),
+          s ? /* @__PURE__ */ e.jsx(he, { section: Wr }) : null,
+          Xr.map((i) => /* @__PURE__ */ e.jsx(he, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(cl, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const pl = {
+const ul = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2132,10 +2141,10 @@ const pl = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, js = () => {
-  const t = G(), { t: l } = Fe(), [r, s] = P.useState(""), [o, a] = P.useState({
-    onDrag: (n) => n,
-    onDragEnd: (n) => n,
+}, ws = () => {
+  const t = G(), { t: l } = Fe(), [r, s] = P.useState(""), [n, a] = P.useState({
+    onDrag: (o) => o,
+    onDragEnd: (o) => o,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2143,21 +2152,21 @@ const pl = {
     negative: !1,
     cssProperty: ""
   }), d = me(
-    (n) => {
-      const u = !p(o, "negative", !1), x = p(o, "cssProperty", "");
-      let c = parseFloat(o.dragStartValue);
+    (o) => {
+      const u = !p(n, "negative", !1), x = p(n, "cssProperty", "");
+      let c = parseFloat(n.dragStartValue);
       c = Ee(c) ? 0 : c;
-      let m = pl[o.dragUnit];
+      let m = ul[n.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}`), s(`${g}`);
+      let g = (n.dragStartY - o.pageY) / m + c;
+      u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), n.onDrag(`${g}`), s(`${g}`);
     },
-    [o],
+    [n],
     50
   ), i = A(() => {
-    setTimeout(() => o.onDragEnd(`${r}`), 100), a({
-      onDrag: (n) => n,
-      onDragEnd: (n) => n,
+    setTimeout(() => n.onDragEnd(`${r}`), 100), a({
+      onDrag: (o) => o,
+      onDragEnd: (o) => o,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2165,12 +2174,12 @@ const pl = {
       negative: !1,
       cssProperty: ""
     });
-  }, [o, 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: [
+  }, [n, r, a]);
+  return wt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: a }, children: [
-    o.dragging ? /* @__PURE__ */ e.jsx(
+  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: a }, children: [
+    n.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2178,8 +2187,8 @@ const pl = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(br, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(fr, { className: "mx-1 grid grid-cols-2", children: [
+    /* @__PURE__ */ e.jsxs(vr, { 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(Be, { value: "settings", children: "Settings" }),
         /* @__PURE__ */ e.jsx(Be, { value: "styling", children: "Styling" })
       ] }),
@@ -2188,13 +2197,13 @@ const pl = {
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(Er, {})
+          children: /* @__PURE__ */ e.jsx(_r, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(Ae, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(cl, {}) })
+      /* @__PURE__ */ e.jsx(Ae, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(pl, {}) })
     ] })
-  ] });
+  ] }) });
 };
 export {
-  js as default
+  ws as default
 };