@chaibuilder/sdk 0.1.23 → 0.1.25

package/dist/{Settings-94b79852.js → Settings-5df6bc31.js}

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-944c88e2.js";
 import * as se from "react";
-import $, { useState as k, useEffect as M, useMemo as T, useCallback as I, createContext as Le, useContext as ee } from "react";
+import P, { useState as k, useEffect as M, useMemo as R, useCallback as L, createContext as Pe, useContext as ee } from "react";
 import { useThrottledCallback as xe } from "@react-hookz/web";
-import { map as C, isEmpty as f, last as he, forEach as be, set as Pe, startCase as Q, filter as Oe, get as u, isArray as me, omit as at, includes as O, toLower as ne, first as fe, split as Ne, truncate as it, keys as dt, cloneDeep as ct, each as pt, capitalize as ut, reject as gt, nth as Se, startsWith as Z, isNumber as xt, parseInt as ht, isNaN as Me, findLast as mt, has as ue, flatten as z, intersection as _e, isNull as yt } from "lodash";
+import { map as N, isEmpty as b, last as he, forEach as be, set as Le, startCase as Q, filter as Oe, get as u, isArray as me, omit as at, includes as O, toLower as ne, first as fe, split as Ne, truncate as it, keys as dt, cloneDeep as ct, each as pt, capitalize as ut, reject as gt, nth as Se, startsWith as Z, isNumber as xt, parseInt as ht, isNaN as Me, findLast as mt, has as ue, flatten as z, intersection as _e, isNull as yt } from "lodash";
 import { useTranslation as Ee } from "react-i18next";
-import { PlusIcon as ve, Cross2Icon as Fe, EyeOpenIcon as bt, EyeClosedIcon as Te, BorderAllIcon as _, WidthIcon as V, HeightIcon as H, ArrowUpIcon as G, ArrowRightIcon as K, ArrowDownIcon as q, ArrowLeftIcon as J, ArrowTopLeftIcon as ft, ArrowTopRightIcon as vt, ArrowBottomRightIcon as wt, ArrowBottomLeftIcon as jt, AlignLeftIcon as Ct, AlignCenterHorizontallyIcon as kt, AlignRightIcon as Nt, StretchHorizontallyIcon as St, FontItalicIcon as Tt, UnderlineIcon as Rt, OverlineIcon as Vt, LetterCaseUppercaseIcon as Ht, Cross1Icon as Bt, InfoCircledIcon as we, MinusIcon as At, BoxIcon as Ye, TriangleDownIcon as Dt, RowSpacingIcon as $t, TrashIcon as Xe, MixerHorizontalIcon as We } from "@radix-ui/react-icons";
-import { T as It, a as Lt, b as Re, c as Ve } from "./tabs-85caa1e8.js";
-import Pt from "@rjsf/core";
+import { PlusIcon as ve, Cross2Icon as Fe, EyeOpenIcon as bt, EyeClosedIcon as Te, BorderAllIcon as E, WidthIcon as H, HeightIcon as V, ArrowUpIcon as G, ArrowRightIcon as K, ArrowDownIcon as q, ArrowLeftIcon as J, ArrowTopLeftIcon as ft, ArrowTopRightIcon as vt, ArrowBottomRightIcon as wt, ArrowBottomLeftIcon as jt, AlignLeftIcon as Ct, AlignCenterHorizontallyIcon as kt, AlignRightIcon as Nt, StretchHorizontallyIcon as St, FontItalicIcon as Tt, UnderlineIcon as Rt, OverlineIcon as Ht, LetterCaseUppercaseIcon as Vt, Cross1Icon as Bt, InfoCircledIcon as we, MinusIcon as At, BoxIcon as Ye, TriangleDownIcon as Dt, RowSpacingIcon as $t, TrashIcon as Xe, MixerHorizontalIcon as We } from "@radix-ui/react-icons";
+import { T as It, a as Pt, b as Re, c as He } from "./tabs-85caa1e8.js";
+import Lt from "@rjsf/core";
 import Ot from "@rjsf/validator-ajv8";
-import { D as te, d as Ze, G as ze, H as Mt, I as _t, J as Et, j as je, K as Ue, L as Ge, i as Ke, e as Ft, M as qe, f as He, N as ce, c as Yt, O as Xt, P as Wt } from "./index-c49887fe.js";
+import { D as te, d as Ze, G as ze, H as Mt, I as _t, J as Et, j as je, K as Ue, L as Ge, i as Ke, e as Ft, M as qe, f as Ve, N as ce, c as Yt, O as Xt, P as Wt } from "./index-d1a25967.js";
 import { getChaiDataProviders as Zt, getBlockComponent as Je, SingleLineText as zt } from "@chaibuilder/blocks";
 import { TrashIcon as Ut, ChevronRight as Gt } from "lucide-react";
 import Qe from "react-autosuggest";
@@ -53,89 +53,90 @@ import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
 function gr(r) {
-  const s = [], t = {};
-  function a(o, n) {
-    be(n, (d, i) => {
-      const l = o ? `${o}.${i}` : i, c = me(d) ? "list" : typeof d;
-      s.push(l), t[l] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !me(d) && a(l, d);
+  const o = [], t = {};
+  function a(l, s) {
+    be(s, (d, i) => {
+      const n = l ? `${l}.${i}` : i, p = me(d) ? "list" : typeof d;
+      o.push(n), t[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !me(d) && a(n, d);
     });
   }
-  return a("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
+  return a("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
 }
 const xr = ({ data: r }) => {
   if (!r)
     return null;
-  const s = typeof r;
-  return /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: it(s === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+  const o = typeof r;
+  return /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: it(o === "object" ? JSON.stringify(r) : r, { length: 40 }) });
 }, Be = ({
   type: r,
-  isDisabled: s = !1,
+  isDisabled: o = !1,
   placeholder: t,
   defaultValue: a = "",
-  data: o,
-  onChange: n,
+  data: l,
+  onChange: s,
   dataType: d,
   appliedBindings: i
 }) => {
-  const [l, c] = k(a), { paths: p, pathsType: h } = gr(o), g = r === "PROP" ? Je(o == null ? void 0 : o._type) : {};
+  const [n, p] = k(!1), [c, h] = k(a), { paths: g, pathsType: y } = gr(l), x = r === "PROP" ? Je(l == null ? void 0 : l._type) : {};
   M(() => {
-    f(l) && n("");
-  }, [l]), M(() => c(a), [a]);
-  const y = () => p.filter((b) => {
-    const j = f(l) || O(ne(b), ne(l));
-    return r === "PATH" ? j && d === u(h, b, "") : j && !O(i, b) && u(g, `props.${fe(Ne(b, "."))}.binding`);
-  }), [x, v] = k(() => y());
-  M(() => v(() => y()), [d]);
-  const L = {
+    b(c) && s("");
+  }, [c]), M(() => h(a), [a]);
+  const f = () => g.filter((v) => {
+    const C = b(c) || O(ne(v), ne(c));
+    return r === "PATH" ? C && d === u(y, v, "") : C && !O(i, v) && u(x, `props.${fe(Ne(v, "."))}.binding`);
+  }), [$, S] = k(() => f());
+  M(() => S(() => f()), [d]);
+  const j = r === "PATH" && b($) && n && !b(d), I = {
     autoComplete: "off",
     autoCorrect: "on",
     autoCapitalize: "off",
     spellCheck: !1,
-    placeholder: t,
-    value: l,
-    disabled: s,
+    placeholder: j ? "No available options" : t,
+    value: c,
+    disabled: o,
+    onFocus: () => p(r === "PATH"),
     onBlur: () => {
-      p.includes(l) ? n(l) : (c(""), n(""));
+      p(!1), g.includes(c) ? s(c) : (h(""), s(""));
     },
-    onChange: (b, { newValue: j }) => c(j),
-    className: `chai-input w-full ${s ? "cursor-not-allowed" : ""}`
-  }, R = (b) => /* @__PURE__ */ e.jsxs(
+    onChange: (v, { newValue: C }) => h(j ? "" : C),
+    className: `chai-input w-full ${o ? "cursor-not-allowed" : ""} ${j ? "placeholder-red-400" : ""}`
+  }, B = (v) => /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: "rounded-md px-1 py-1.5 flex items-center justify-between space-x-2 font-light relative",
-      "data-suggest": b,
+      "data-suggest": v,
       children: [
-        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: b }),
+        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: v }),
         /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ e.jsx("div", { className: "leading-4 text-xs flex items-center text-gray-800", children: $.Children.toArray(
-            C(Ne(b, "."), (j, B) => /* @__PURE__ */ e.jsxs("span", { className: "flex items-end", children: [
-              B > 0 && /* @__PURE__ */ e.jsx(Gt, { size: 14, className: "h-full text-gray-400" }),
-              Q(j)
+          /* @__PURE__ */ e.jsx("div", { className: "leading-4 text-xs flex items-center text-gray-800", children: P.Children.toArray(
+            N(Ne(v, "."), (C, _) => /* @__PURE__ */ e.jsxs("span", { className: "flex items-end", children: [
+              _ > 0 && /* @__PURE__ */ e.jsx(Gt, { size: 14, className: "h-full text-gray-400" }),
+              Q(C)
             ] }))
           ) }),
-          r === "PATH" && /* @__PURE__ */ e.jsx(xr, { data: u(o, b) })
+          r === "PATH" && /* @__PURE__ */ e.jsx(xr, { data: u(l, v) })
         ] }),
-        r === "PROP" && /* @__PURE__ */ e.jsx("div", { className: "bg-purple-100 text-purple-400 text-[9px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(u(h, b, "")) })
+        r === "PROP" && /* @__PURE__ */ e.jsx("div", { className: "bg-purple-100 text-purple-400 text-[9px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(u(y, v, "")) })
       ]
     }
   );
   return /* @__PURE__ */ e.jsx(
     Qe,
     {
-      suggestions: x,
-      onSuggestionsFetchRequested: () => v(() => y()),
-      onSuggestionsClearRequested: () => v([]),
-      onSuggestionSelected: (b) => {
-        if (b.type === "click") {
-          const j = u(b.target, "childNodes[0].data", "");
-          p.includes(j) && n(j);
+      suggestions: $,
+      onSuggestionsFetchRequested: () => S(() => f()),
+      onSuggestionsClearRequested: () => S([]),
+      onSuggestionSelected: (v) => {
+        if (v.type === "click") {
+          const C = u(v.target, "childNodes[0].data", "");
+          g.includes(C) && s(C);
         } else
-          n(b.target.value);
+          s(v.target.value);
       },
-      getSuggestionValue: (b) => b,
-      renderSuggestion: R,
+      getSuggestionValue: (v) => v,
+      renderSuggestion: B,
       shouldRenderSuggestions: () => !0,
-      inputProps: L,
+      inputProps: I,
       containerProps: { className: "w-full" },
       theme: {
         suggestion: "text-gray-500 border-b overflow-hidden text-ellipsis",
@@ -146,25 +147,25 @@ const xr = ({ data: r }) => {
   );
 }, hr = ({
   item: r,
-  onChange: s,
+  onChange: o,
   onRemove: t,
   selectedBlock: a,
-  dataProvider: o,
-  appliedBindings: n
+  dataProvider: l,
+  appliedBindings: s
 }) => {
-  const [d, i] = k("string"), l = (c, p) => {
-    if (f(c))
+  const [d, i] = k("string"), n = (p, c) => {
+    if (b(p))
       return "";
     {
-      const h = u(p === "PROP" ? a : o, c, "");
+      const h = u(c === "PROP" ? a : l, p, "");
       if (me(h))
         return "list";
       const g = typeof h;
       return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
-  return M(() => i(() => l(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border border-gray-200 relative rounded-md p-2", children: [
-    !f(d) && !f(r.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-2 top-4 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(d) }),
+  return M(() => i(() => n(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border border-gray-200 relative rounded-md p-2", children: [
+    !b(d) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-2 top-4 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(d) }),
     /* @__PURE__ */ e.jsx(
       Be,
       {
@@ -172,13 +173,13 @@ const xr = ({ data: r }) => {
         isDisabled: !1,
         placeholder: "Enter prop key",
         defaultValue: r.key,
-        onChange: (c) => {
-          const p = l(c, "PROP");
-          s({ target: { name: "key", value: c } }), d !== p && s({ target: { name: "value", value: "" } }), i(p);
+        onChange: (p) => {
+          const c = n(p, "PROP");
+          o({ target: { name: "key", value: p } }), d !== c && o({ target: { name: "value", value: "" } }), i(c);
         },
         data: a,
         dataType: d,
-        appliedBindings: n
+        appliedBindings: s
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-x-1.5 w-full relative", children: [
@@ -186,16 +187,16 @@ const xr = ({ data: r }) => {
         Be,
         {
           type: "PATH",
-          isDisabled: f(r.key),
+          isDisabled: b(r.key),
           placeholder: "Enter data path",
           defaultValue: r.value,
-          onChange: (c) => {
-            const p = l(c, "PATH");
-            s(d !== p ? { target: { name: "value", value: "" } } : { target: { name: "value", value: c } });
+          onChange: (p) => {
+            const c = n(p, "PATH");
+            o(d !== c ? { target: { name: "value", value: "" } } : { target: { name: "value", value: p } });
           },
-          data: o,
+          data: l,
           dataType: d,
-          appliedBindings: n
+          appliedBindings: s
         }
       ),
       /* @__PURE__ */ e.jsx(
@@ -207,51 +208,51 @@ const xr = ({ data: r }) => {
       )
     ] })
   ] });
-}, mr = ({ bindingData: r, onChange: s }) => {
-  const t = te(), [a] = Kt(), o = Zt(), [n, d] = k(C(r, (g, y) => ({ key: y, value: g })));
+}, mr = ({ bindingData: r, onChange: o }) => {
+  const t = te(), [a] = Kt(), l = Zt(), [s, d] = k(N(r, (g, y) => ({ key: y, value: g })));
   M(() => {
-    d(C(r, (g, y) => ({ key: y, value: g })));
+    d(N(r, (g, y) => ({ key: y, value: g })));
   }, [t == null ? void 0 : t._id]);
-  const i = T(() => {
-    if (f(n))
+  const i = R(() => {
+    if (b(s))
       return !1;
-    const g = he(n);
-    return f(g == null ? void 0 : g.key) || f(g == null ? void 0 : g.value);
-  }, [n]), l = () => {
-    d([...n, { key: "", value: "" }]);
-  }, c = (g) => {
-    const y = Oe(n, (x, v) => g !== v);
+    const g = he(s);
+    return b(g == null ? void 0 : g.key) || b(g == null ? void 0 : g.value);
+  }, [s]), n = () => {
+    d([...s, { key: "", value: "" }]);
+  }, p = (g) => {
+    const y = Oe(s, (x, f) => g !== f);
     h([...y]);
-  }, p = (g, y) => {
-    const x = [...n];
+  }, c = (g, y) => {
+    const x = [...s];
     x[y][g.target.name] = g.target.value, h(x);
-  }, h = I(
+  }, h = L(
     (g = []) => {
-      if (d(g), f(g)) {
-        s({});
+      if (d(g), b(g)) {
+        o({});
         return;
       }
       const y = {};
       be(g, (x) => {
-        !f(x == null ? void 0 : x.key) && !f(x == null ? void 0 : x.value) && Pe(y, x.key, x.value);
-      }), s(y);
+        !b(x == null ? void 0 : x.key) && !b(x == null ? void 0 : x.value) && Le(y, x.key, x.value);
+      }), o(y);
     },
     [t]
   );
-  return f(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
+  return b(l) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    C(n, (g, y) => /* @__PURE__ */ e.jsx(
+    N(s, (g, y) => /* @__PURE__ */ e.jsx(
       hr,
       {
         item: g,
-        onChange: (x) => p(x, y),
-        onRemove: () => c(y),
+        onChange: (x) => c(x, y),
+        onRemove: () => p(y),
         selectedBlock: t,
         dataProvider: a,
-        appliedBindings: C(n, "key")
+        appliedBindings: N(s, "key")
       },
       g.key
     )),
@@ -259,30 +260,30 @@ const xr = ({ data: r }) => {
       /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
         "button",
         {
-          onClick: l,
+          onClick: n,
           disabled: i,
-          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${f(n) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30 " : ""} ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : f(n) ? "" : "bg-gray-700/20 text-gray-800 hover:bg-blue-700/30"}`,
+          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${b(s) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30 " : ""} ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : b(s) ? "" : "bg-gray-700/20 text-gray-800 hover:bg-blue-700/30"}`,
           children: "+ Add Data Binding"
         }
       ) }),
-      i && /* @__PURE__ */ e.jsx(W, { sideOffset: 10, className: "text-[11px]", children: "Complete last added data binding to add more" })
+      i && /* @__PURE__ */ e.jsx(W, { sideOffset: -55, className: "text-[11px]", children: "Complete last added data binding to add more" })
     ] })
   ] });
 }, yr = mr, br = () => /* @__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" }), Ae = ({
   createHistorySnapshot: r,
-  properties: s,
+  properties: o,
   formData: t,
   onChange: a
 }) => {
-  const [o] = Mt(), n = { type: "object", properties: {} }, d = {};
-  return Object.keys(s).forEach((i) => {
-    const l = s[i];
-    if (O(["slot", "styles"], l.type))
+  const [l] = Mt(), s = { type: "object", properties: {} }, d = {};
+  return Object.keys(o).forEach((i) => {
+    const n = o[i];
+    if (O(["slot", "styles"], n.type))
       return;
-    const c = u(l, "i18n", !1) ? `${i}-${o}` : i;
-    n.properties[c] = _t(l, o), d[c] = Et(l, o);
+    const p = u(n, "i18n", !1) ? `${i}-${l}` : i;
+    s.properties[p] = _t(n, l), d[p] = Et(n, l);
   }), /* @__PURE__ */ e.jsx(
-    Pt,
+    Lt,
     {
       widgets: {
         binding: br,
@@ -301,36 +302,36 @@ const xr = ({ data: r }) => {
       validator: Ot,
       uiSchema: d,
       onBlur: r,
-      schema: n,
+      schema: s,
       formData: t,
       onChange: a
     }
   );
 };
 function fr() {
-  const r = te(), { createSnapshot: s } = Ze(), t = ze(), a = Je(r._type), o = { ...r }, n = () => s(), d = ({ formData: p }, h) => {
+  const r = te(), { createSnapshot: o } = Ze(), t = ze(), a = Je(r._type), l = { ...r }, s = () => o(), d = ({ formData: c }, h) => {
     if (h) {
       const g = h.replace("root.", "");
-      t([r._id], { [g]: u(p, g) });
+      t([r._id], { [g]: u(c, g) });
     }
   }, i = {
     _name: zt({
       title: "Name",
       default: u(r, "_name", r._type)
     })
-  }, l = dt(u(o, "_bindings", {})), c = T(() => {
-    const p = ct(u(a, "props", {}));
-    return pt(l, (h) => {
-      delete p[h];
-    }), p;
-  }, [a, l]);
+  }, n = dt(u(l, "_bindings", {})), p = R(() => {
+    const c = ct(u(a, "props", {}));
+    return pt(n, (h) => {
+      delete c[h];
+    }), c;
+  }, [a, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
       Ae,
       {
         onChange: d,
-        createHistorySnapshot: n,
-        formData: o,
+        createHistorySnapshot: s,
+        formData: l,
         properties: i
       }
     ),
@@ -341,7 +342,7 @@ function fr() {
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${f(u(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${b(u(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
@@ -349,9 +350,9 @@ function fr() {
         /* @__PURE__ */ e.jsx(de, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
           yr,
           {
-            bindingData: u(o, "_bindings", {}),
-            onChange: (p) => {
-              d({ formData: { ...o, _bindings: p } }, "root._bindings");
+            bindingData: u(l, "_bindings", {}),
+            onChange: (c) => {
+              d({ formData: { ...l, _bindings: c } }, "root._bindings");
             }
           }
         ) })
@@ -362,20 +363,20 @@ function fr() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(de, { className: "pt-4", children: [
-          f(l) ? "" : /* @__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(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: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(l, ut).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: N(n, ut).join(", ") }),
             " ",
-            l.length === 1 ? "property" : "properties",
+            n.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
             Ae,
             {
               onChange: d,
-              createHistorySnapshot: n,
-              formData: o,
-              properties: c
+              createHistorySnapshot: s,
+              formData: l,
+              properties: p
             }
           )
         ] })
@@ -391,53 +392,53 @@ const De = new lr(or, {
   keys: ["name"]
 });
 function vr() {
-  var R;
-  const [r] = je(), s = te(), t = Ue(), a = Ge(), [o] = Ke(), [n, d] = k(""), i = (R = fe(r)) == null ? void 0 : R.prop, l = gt((u(s, i, "").replace(nr, "").split(",").pop() || "").split(" "), f), c = () => {
-    const b = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(o, b, !0), d("");
-  }, [p, h] = k([]), g = ({ value: b }) => {
-    const j = b.trim().toLowerCase(), B = j.match(/.+:/g);
-    let N = [];
+  var S;
+  const [r] = je(), o = te(), t = Ue(), a = Ge(), [l] = Ke(), [s, d] = k(""), i = (S = fe(r)) == null ? void 0 : S.prop, n = gt((u(o, i, "").replace(nr, "").split(",").pop() || "").split(" "), b), p = () => {
+    const j = s.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    t(l, j, !0), d("");
+  }, [c, h] = k([]), g = ({ value: j }) => {
+    const I = j.trim().toLowerCase(), B = I.match(/.+:/g);
+    let v = [];
     if (B && B.length > 0) {
-      const [P] = B, F = j.replace(P, "");
-      N = De.search(F).map((m) => ({
+      const [C] = B, _ = I.replace(C, "");
+      v = De.search(_).map((m) => ({
         ...m,
-        item: { ...m.item, name: P + m.item.name }
+        item: { ...m.item, name: C + m.item.name }
       }));
     } else
-      N = De.search(j);
-    h(C(N, "item"));
+      v = De.search(I);
+    h(N(v, "item"));
   }, y = () => {
     h([]);
-  }, x = (b) => b.name, v = (b) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: b.name }), L = {
+  }, x = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), $ = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: n,
-    onKeyDown: (b) => {
-      b.key === "Enter" && n.trim() !== "" && c();
+    value: s,
+    onKeyDown: (j) => {
+      j.key === "Enter" && s.trim() !== "" && p();
     },
-    onChange: (b, { newValue: j }) => d(j),
+    onChange: (j, { newValue: I }) => d(I),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   };
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${p.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
+      className: `no-scrollbar flex ${c.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
         /* @__PURE__ */ e.jsx(Ce, { 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(
             Qe,
             {
-              suggestions: p,
+              suggestions: c,
               onSuggestionsFetchRequested: g,
               onSuggestionsClearRequested: y,
               getSuggestionValue: x,
-              renderSuggestion: v,
-              inputProps: L,
+              renderSuggestion: f,
+              inputProps: $,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -453,32 +454,32 @@ function vr() {
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: c,
-              disabled: n.trim() === "",
+              onClick: p,
+              disabled: s.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(ve, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          f(l) && /* @__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(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" }),
           se.Children.toArray(
-            l.map((b) => /* @__PURE__ */ e.jsxs(
+            n.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",
                 children: [
-                  b,
+                  j,
                   /* @__PURE__ */ e.jsx(
                     Fe,
                     {
-                      onClick: () => a(o, [b]),
+                      onClick: () => a(l, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              b
+              j
             ))
           )
         ] })
@@ -917,34 +918,34 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   invisible: Te,
   // display
   hidden: Te,
-  gap: _,
-  gapX: V,
-  gapY: H,
-  spaceX: V,
-  spaceY: H,
-  overscroll: _,
-  overscrollX: V,
-  overscrollY: H,
-  overflow: _,
-  overflowX: V,
-  overflowY: H,
+  gap: E,
+  gapX: H,
+  gapY: V,
+  spaceX: H,
+  spaceY: V,
+  overscroll: E,
+  overscrollX: H,
+  overscrollY: V,
+  overflow: E,
+  overflowX: H,
+  overflowY: V,
   top: G,
   right: K,
   bottom: q,
   left: J,
-  inset: _,
-  insetX: V,
-  insetY: H,
-  border: _,
-  borderX: V,
-  borderY: H,
+  inset: E,
+  insetX: H,
+  insetY: V,
+  border: E,
+  borderX: H,
+  borderY: V,
   borderTop: G,
   borderRight: K,
   borderBottom: q,
   borderLeft: J,
-  borderRadius: _,
-  borderRadiusX: V,
-  borderRadiusY: H,
+  borderRadius: E,
+  borderRadiusX: H,
+  borderRadiusY: V,
   borderRadiusTop: G,
   borderRadiusRight: K,
   borderRadiusBottom: q,
@@ -953,27 +954,27 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   borderRadiusTopRight: vt,
   borderRadiusBottomRight: wt,
   borderRadiusBottomLeft: jt,
-  divideXWidth: V,
-  divideYWidth: H,
-  scale: _,
-  scaleX: V,
-  scaleY: H,
-  skewX: V,
-  skewY: H,
-  translateX: V,
-  translateY: H,
+  divideXWidth: H,
+  divideYWidth: V,
+  scale: E,
+  scaleX: H,
+  scaleY: V,
+  skewX: H,
+  skewY: V,
+  translateX: H,
+  translateY: V,
   // padding
-  padding: _,
-  paddingX: V,
-  paddingY: H,
+  padding: E,
+  paddingX: H,
+  paddingY: V,
   paddingTop: G,
   paddingRight: K,
   paddingBottom: q,
   paddingLeft: J,
   // margin
-  margin: _,
-  marginX: V,
-  marginY: H,
+  margin: E,
+  marginX: H,
+  marginY: V,
   marginTop: G,
   marginRight: K,
   marginBottom: q,
@@ -988,9 +989,9 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   // "not-italic": "",
   // decoration
   underline: Rt,
-  overline: Vt,
+  overline: Ht,
   // transform
-  uppercase: Ht,
+  uppercase: Vt,
   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",
@@ -1104,13 +1105,13 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
     )
   ] }),
   static: Bt
-}, re = Le({ canReset: !1, canChange: !0 }), kr = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
+}, re = Pe({ canReset: !1, canChange: !0 }), kr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(re.Provider, { value: { canReset: s, canChange: t }, children: r })
-), lt = ({ label: r, property: s, onChange: t }) => {
-  const a = T(() => u(pe, `${s}.classes`, [""]), [s]), o = le(s), n = T(() => u(o, "cls", ""), [o]), { canChange: d } = ee(re), i = /\[.*\]/g.test(n);
+  /* @__PURE__ */ e.jsx(re.Provider, { value: { canReset: o, canChange: t }, children: r })
+), lt = ({ label: r, property: o, onChange: t }) => {
+  const a = R(() => u(pe, `${o}.classes`, [""]), [o]), l = le(o), s = R(() => u(l, "cls", ""), [l]), { canChange: d } = ee(re), i = /\[.*\]/g.test(s);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "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: n }),
+    /* @__PURE__ */ e.jsx(ar, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
     /* @__PURE__ */ e.jsxs(Y, { 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(we, {}) }) }),
       /* @__PURE__ */ e.jsx(W, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1119,55 +1120,55 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
     ye,
     {
       rounded: r,
-      onChange: (l) => t(l, s),
-      selected: n,
+      onChange: (n) => t(n, o),
+      selected: s,
       options: a,
       disabled: !d
     }
   ) });
 };
-function ye({ selected: r, onChange: s, rounded: t = !1, options: a, disabled: o = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = Ze();
+function ye({ selected: r, onChange: o, rounded: t = !1, options: a, disabled: l = !1 }) {
+  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = Ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !a.length || o,
+      disabled: !a.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: (l) => s(l.target.value),
-      onKeyDown: (l) => {
-        l.ctrlKey && (l.key === "z" && d(), l.key === "y" && i());
+      onChange: (n) => o(n.target.value),
+      onKeyDown: (n) => {
+        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
       },
-      value: n,
+      value: s,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        $.Children.toArray(
-          a.map((l) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: l, children: l }))
+        P.Children.toArray(
+          a.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
-const Nr = ({ property: r, onChange: s }) => {
-  const { canReset: t, canChange: a } = ee(re), o = le(r), n = T(() => u(o, "cls", ""), [o]), d = T(() => u(pe, `${r}.classes`, [""]), [r]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, l = /\[.*\]/g.test(n);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: l ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const Nr = ({ property: r, onChange: o }) => {
+  const { canReset: t, canChange: a } = ee(re), l = le(r), s = R(() => u(l, "cls", ""), [l]), d = R(() => u(pe, `${r}.classes`, [""]), [r]), i = d.indexOf(s) > -1 ? d.indexOf(s) : 0, n = /\[.*\]/g.test(s);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !a && (!t || i - 1 < 0),
-        onClick: () => s(Se(d, i - 1), r),
+        onClick: () => o(Se(d, i - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(At, { className: !a && (!t || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: r, onChange: s }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: r, onChange: o }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !a && (!t || i + 1 >= d.length),
-        onClick: () => s(Se(d, i + 1), r),
+        onClick: () => o(Se(d, i + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           ve,
           {
@@ -1177,17 +1178,17 @@ const Nr = ({ property: r, onChange: s }) => {
       }
     )
   ] }) });
-}, Sr = ({ property: r, onChange: s }) => {
-  const t = T(() => u(pe, `${r}.classes`, [""]), [r]), { canChange: a } = ee(re), o = le(r), n = T(() => u(o, "cls", ""), [o]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (d) => /* @__PURE__ */ e.jsxs(Y, { children: [
+}, Sr = ({ property: r, onChange: o }) => {
+  const t = R(() => u(pe, `${r}.classes`, [""]), [r]), { canChange: a } = ee(re), l = le(r), s = R(() => u(l, "cls", ""), [l]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: N(t, (d) => /* @__PURE__ */ e.jsxs(Y, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !a,
-        onClick: () => s(d, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(u(rt, d, Ye))
+        onClick: () => o(d, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${s === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: P.createElement(u(rt, d, Ye))
       }
     ) }),
     /* @__PURE__ */ e.jsx(W, { children: Q(ne(d)) })
@@ -1204,38 +1205,38 @@ const Nr = ({ property: r, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Rr = ({ property: r, onChange: s }) => {
-  const t = le(r), a = T(() => u(t, "cls", ""), [t]), { canChange: o } = ee(re), [n, d] = k([]), [i, l] = k({ color: "", shade: "" }), c = a.split("-"), p = u(c, "1", ""), h = u(c, "2", ""), g = I(
+}, Rr = ({ property: r, onChange: o }) => {
+  const t = le(r), a = R(() => u(t, "cls", ""), [t]), { canChange: l } = ee(re), [s, d] = k([]), [i, n] = k({ color: "", shade: "" }), p = a.split("-"), c = u(p, "1", ""), h = u(p, "2", ""), g = L(
     // eslint-disable-next-line no-shadow
     (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), l({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), l((v) => ({ ...v, color: x, shade: v.shade ? v.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), n({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
     },
-    [d, l]
+    [d, n]
   );
   M(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(p))
+    if (["current", "inherit", "transparent", "black", "white"].includes(c))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [p]);
-  const y = I(
+  }, [c]);
+  const y = L(
     // eslint-disable-next-line no-shadow
     (x) => {
-      l({ color: p, shade: x });
+      n({ color: c, shade: x });
     },
-    [p]
+    [c]
   );
   return M(() => {
-    l({ color: "", shade: "" });
+    n({ color: "", shade: "" });
   }, [t]), M(() => {
-    const v = `${u(Tr, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    v.match(new RegExp(u(pe, `${r}.regExp`, ""))) && s(v, r);
-  }, [i, s, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const f = `${u(Tr, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(u(pe, `${r}.regExp`, ""))) && o(f, r);
+  }, [i, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       ye,
       {
-        disabled: !o,
+        disabled: !l,
         rounded: !0,
-        selected: p,
+        selected: c,
         onChange: g,
         options: [
           "current",
@@ -1269,19 +1270,19 @@ const Nr = ({ property: r, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ye, { rounded: !0, selected: h, disabled: !p || !o, onChange: y, options: n }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ye, { rounded: !0, selected: h, disabled: !c || !l, onChange: y, options: s }) })
   ] });
-}, $e = (r, s) => {
+}, $e = (r, o) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && s.includes(t))
+  if ((t === "auto" || t === "none") && o.includes(t))
     return { value: "", unit: t };
-  const a = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
+  const a = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
   t = t.replace(a, "");
-  const o = r.match(a), n = o && o.length > 1, d = !f(t) && Number.isNaN(Number(t));
-  return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
-}, Vr = (r) => {
-  const s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+  const l = r.match(a), s = l && l.length > 1, d = !b(t) && Number.isNaN(Number(t));
+  return s || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
+}, Hr = (r) => {
+  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1291,17 +1292,17 @@ const Nr = ({ property: r, onChange: s }) => {
   if (t === "full")
     return { value: "100", unit: "%" };
   if (O(r, "skew-"))
-    return { value: `${s}${t}`, unit: "deg" };
+    return { value: `${o}${t}`, unit: "deg" };
   if (O(r, "rotate-"))
-    return { value: `${s}${t}`, unit: "deg" };
+    return { value: `${o}${t}`, unit: "deg" };
   if (O(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
   if (O(r, "duration-") || O(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
   if (O(r, "translate-") && !t.includes("/"))
-    return { value: `${s}${`${t / 4}`}`, unit: "rem" };
+    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
   if (O(r, "scale-"))
-    return { value: `${s}${`${t / 100}`}`, unit: "-" };
+    return { value: `${o}${`${t / 100}`}`, unit: "-" };
   if (Z(r, "border")) {
     const a = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
     if (a)
@@ -1404,28 +1405,28 @@ const Nr = ({ property: r, onChange: s }) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [a, o] = C(t.split("/"), (n) => parseInt(n, 10));
-    return { value: s + (a / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [a, l] = N(t.split("/"), (s) => parseInt(s, 10));
+    return { value: o + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return xt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-}, Hr = (r) => {
-  if (f(r))
+  return xt(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+}, Vr = (r) => {
+  if (b(r))
     return { value: "", unit: "" };
-  const s = r.match(/\[.*\]/g);
-  if (s === null)
+  const o = r.match(/\[.*\]/g);
+  if (o === null)
     return Br(r);
-  const t = u(s, "0", "").replace(/\[|\]/g, ""), a = r.startsWith("-") ? "-" : "", o = fe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${a}${o}`, unit: t.replace(o, "") };
-}, Br = (r) => f(r) ? { value: "", unit: "" } : Vr(r), ot = $.createContext({
+  const t = u(o, "0", "").replace(/\[|\]/g, ""), a = r.startsWith("-") ? "-" : "", l = fe(t.match(/\d+.\d+|\d+/g));
+  return { value: `${a}${l}`, unit: t.replace(l, "") };
+}, Br = (r) => b(r) ? { value: "", unit: "" } : Hr(r), ot = P.createContext({
   setDragData: () => {
   }
 }), Ar = ({
   unit: r,
-  currentValue: s,
+  currentValue: o,
   onDrag: t,
   onDragEnd: a,
-  onDragStart: o,
-  negative: n,
+  onDragStart: l,
+  negative: s,
   cssProperty: d
 }) => {
   const { setDragData: i } = ee(ot);
@@ -1433,154 +1434,154 @@ const Nr = ({ property: r, onChange: s }) => {
     "button",
     {
       type: "button",
-      onMouseDown: (l) => {
-        const c = {
+      onMouseDown: (n) => {
+        const p = {
           onDrag: t,
           onDragEnd: a,
           dragging: !0,
-          dragStartY: l.pageY,
-          dragStartValue: `${s}`,
+          dragStartY: n.pageY,
+          dragStartValue: `${o}`,
           dragUnit: r,
-          negative: n,
+          negative: s,
           cssProperty: d
         };
-        o(c), i(c);
+        l(p), i(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($t, {})
     }
   );
-}, Dr = ({ 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((a) => /* @__PURE__ */ e.jsx(
+}, Dr = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((a) => /* @__PURE__ */ e.jsx(
   et,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: s === a ? "primary" : void 0,
+    color: o === a ? "primary" : void 0,
     size: "sm",
-    onClick: (o) => {
-      o.stopPropagation(), r(a);
+    onClick: (l) => {
+      l.stopPropagation(), r(a);
     },
     children: a
   },
   a
 )) }), $r = (r) => {
-  const [s, t] = k(!1), [a, o] = k(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: l, units: c, negative: p } = r, [h, g] = k(l != null && l.toLowerCase().includes("width") ? "%" : c[0]), [y, x] = k(!1), [v, L] = k(""), [R, b] = k(!1), [j, B] = k(!1);
+  const [o, t] = k(!1), [a, l] = k(""), { currentClass: s, onChange: d, classPrefix: i, cssProperty: n, units: p, negative: c } = r, [h, g] = k(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [y, x] = k(!1), [f, $] = k(""), [S, j] = k(!1), [I, B] = k(!1);
   M(() => {
-    const { value: m, unit: w } = Hr(n);
+    const { value: m, unit: w } = Vr(s);
     if (w === "") {
-      o(m), g(l != null && l.toLowerCase().includes("width") ? "%" : c[0]);
+      l(m), g(n != null && n.toLowerCase().includes("width") ? "%" : p[0]);
       return;
     }
-    g(w), o(w === "class" || f(m) ? "" : m);
-  }, [n, l, c]);
-  const N = xe(
+    g(w), l(w === "class" || b(m) ? "" : m);
+  }, [s, n, p]);
+  const v = xe(
     (m) => {
       d(m);
     },
     [d],
     200
-  ), P = xe(
+  ), C = xe(
     (m) => {
       d(m, !1);
     },
     [d],
     200
-  ), F = I(
+  ), _ = L(
     (m = !1) => {
-      const w = $e(`${a}`, c);
+      const w = $e(`${a}`, p);
       if (u(w, "error", !1)) {
         x(!0);
         return;
       }
-      const S = u(w, "unit") !== "" ? u(w, "unit") : h;
-      if (S === "auto" || S === "none") {
-        N(`${i}${S}`);
+      const T = u(w, "unit") !== "" ? u(w, "unit") : h;
+      if (T === "auto" || T === "none") {
+        v(`${i}${T}`);
         return;
       }
       if (u(w, "value") === "")
         return;
-      const U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      m ? P(U) : N(U);
+      const U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      m ? C(U) : v(U);
     },
-    [N, P, a, h, i, c]
-  ), oe = I(
+    [v, C, a, h, i, p]
+  ), oe = L(
     (m) => {
-      const w = $e(`${a}`, c);
+      const w = $e(`${a}`, p);
       if (u(w, "error", !1)) {
         x(!0);
         return;
       }
       if (m === "auto" || m === "none") {
-        N(`${i}${m}`);
+        v(`${i}${m}`);
         return;
       }
       if (u(w, "value") === "")
         return;
-      const S = u(w, "unit") !== "" ? u(w, "unit") : m, U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      N(U);
+      const T = u(w, "unit") !== "" ? u(w, "unit") : m, U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      v(U);
     },
-    [N, a, i, c]
+    [v, a, i, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: s }),
     /* @__PURE__ */ e.jsxs(Y, { 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(we, {}) }) }),
       /* @__PURE__ */ e.jsx(W, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${R ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
           readOnly: h === "class",
           onKeyPress: (m) => {
-            m.key === "Enter" && F();
+            m.key === "Enter" && _();
           },
           onKeyDown: (m) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
             m.preventDefault(), B(!0);
             const w = ht(m.target.value);
-            let S = Me(w) ? 0 : w;
-            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
-            const E = `${S}`, nt = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
-            P(nt);
+            let T = Me(w) ? 0 : w;
+            m.keyCode === 38 && (T += 1), m.keyCode === 40 && (T -= 1);
+            const F = `${T}`, nt = `${F.startsWith("-") ? "-" : ""}${i}[${F.replace("-", "")}${h === "-" ? "" : h}]`;
+            C(nt);
           },
           onKeyUp: (m) => {
-            j && (m.preventDefault(), B(!1));
+            I && (m.preventDefault(), B(!1));
           },
-          onBlur: () => F(),
+          onBlur: () => _(),
           onChange: (m) => {
-            x(!1), o(m.target.value);
+            x(!1), l(m.target.value);
           },
           onClick: (m) => {
             var w;
             (w = m == null ? void 0 : m.target) == null || w.select(), t(!1);
           },
-          value: R ? v : a,
+          value: S ? f : a,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             y ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(Y, { open: s, delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsxs(Y, { open: o, delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!s),
+            onClick: () => t(!o),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
-              c.length > 1 ? /* @__PURE__ */ e.jsx(Dt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Dt, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ e.jsx(qt, { children: /* @__PURE__ */ e.jsx(W, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
           Dr,
           {
-            units: c,
+            units: p,
             current: h,
             onSelect: (m) => {
               t(!1), g(m), oe(m);
@@ -1589,34 +1590,34 @@ const Nr = ({ property: r, onChange: s }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || R ? null : /* @__PURE__ */ e.jsx(
+    ["none", "auto"].indexOf(h) !== -1 || S ? null : /* @__PURE__ */ e.jsx(
       Ar,
       {
-        onDragStart: () => b(!0),
+        onDragStart: () => j(!0),
         onDragEnd: (m) => {
-          if (L(() => ""), b(!1), f(m))
+          if ($(() => ""), j(!1), b(m))
             return;
-          const w = `${m}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
-          N(E);
+          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
+          v(F);
         },
         onDrag: (m) => {
-          if (f(m))
+          if (b(m))
             return;
-          L(m);
-          const w = `${m}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
-          P(E);
+          $(m);
+          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
+          C(F);
         },
         currentValue: a,
         unit: h,
-        negative: p,
-        cssProperty: l
+        negative: c,
+        cssProperty: n
       }
     )
   ] }) }) });
 }, le = (r) => {
-  const s = ce();
-  return mt(s, { property: r });
-}, Ir = (r, s) => {
+  const o = ce();
+  return mt(o, { property: r });
+}, Ir = (r, o) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1625,8 +1626,8 @@ const Nr = ({ property: r, onChange: s }) => {
     xl: 4,
     "2xl": 5
   };
-  return t[u(r, "mq", "xs")] <= t[s];
-}, Lr = {
+  return t[u(r, "mq", "xs")] <= t[o];
+}, Pr = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1699,56 +1700,56 @@ const Nr = ({ property: r, onChange: s }) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Pr = (r) => `${r.toUpperCase()} ${Ie[r] ? `(${Ie[r]} & up)` : ""}`, ke = (r) => {
-  const { type: s = "icons", label: t, property: a, onEmitChange: o = () => {
-  }, units: n, negative: d = !1 } = r, [i] = Ft(), [l] = qe(), [, c] = He(), p = le(a), h = Ue(), g = Ge(), [y] = Ke(), x = T(() => u(p, "fullCls", ""), [p]), v = I(
-    (N, P = !0) => {
-      const F = { dark: i, mq: c, mod: l, cls: N, property: a, fullCls: "" };
-      (i || l !== "") && (F.mq = "xs");
-      const oe = sr(F);
-      h(y, [oe], P);
+}, Lr = (r) => `${r.toUpperCase()} ${Ie[r] ? `(${Ie[r]} & up)` : ""}`, ke = (r) => {
+  const { type: o = "icons", label: t, property: a, onEmitChange: l = () => {
+  }, units: s, negative: d = !1 } = r, [i] = Ft(), [n] = qe(), [, p] = Ve(), c = le(a), h = Ue(), g = Ge(), [y] = Ke(), x = R(() => u(c, "fullCls", ""), [c]), f = L(
+    (v, C = !0) => {
+      const _ = { dark: i, mq: p, mod: n, cls: v, property: a, fullCls: "" };
+      (i || n !== "") && (_.mq = "xs");
+      const oe = sr(_);
+      h(y, [oe], C);
     },
-    [y, i, c, l, a, h]
-  ), L = I(() => {
+    [y, i, p, n, a, h]
+  ), $ = L(() => {
     g(y, [x]);
-  }, [y, x, g]), R = T(() => Ir(p, c), [p, c]);
+  }, [y, x, g]), S = R(() => Ir(c, p), [c, p]);
   M(() => {
-    o(R, p);
-  }, [R, o, p]);
-  const [, , b] = He(), j = I(
-    (N) => {
-      b({
+    l(S, c);
+  }, [S, l, c]);
+  const [, , j] = Ve(), I = L(
+    (v) => {
+      j({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[N]);
+      }[v]);
     },
-    [b]
-  ), B = u(p, "dark", null) === i && u(p, "mod", null) === l && u(p, "mq", null) === c;
-  return /* @__PURE__ */ e.jsx(kr, { canChange: R, canReset: p && B, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${p && !B ? "text-foreground" : ""}`, children: t }) }),
+    [j]
+  ), B = u(c, "dark", null) === i && u(c, "mod", null) === n && u(c, "mq", null) === p;
+  return /* @__PURE__ */ e.jsx(kr, { canChange: S, canReset: c && B, 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] ${c && !B ? "text-foreground" : ""}`, children: t }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
+        o === "arbitrary" ? /* @__PURE__ */ e.jsx(
           $r,
           {
-            currentClass: u(p, "cls", ""),
-            classPrefix: u(Lr, a, ""),
-            units: n || [],
-            onChange: v,
+            currentClass: u(c, "cls", ""),
+            classPrefix: u(Pr, a, ""),
+            units: s || [],
+            onChange: f,
             negative: d,
             cssProperty: a
           }
         ) : null,
-        s === "icons" && /* @__PURE__ */ e.jsx(Sr, { property: a, onChange: v }),
-        s === "range" && /* @__PURE__ */ e.jsx(Nr, { property: a, onChange: v }),
-        s === "color" && /* @__PURE__ */ e.jsx(Rr, { property: a, onChange: v }),
-        s === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: t, property: a, onChange: v })
+        o === "icons" && /* @__PURE__ */ e.jsx(Sr, { property: a, onChange: f }),
+        o === "range" && /* @__PURE__ */ e.jsx(Nr, { property: a, onChange: f }),
+        o === "color" && /* @__PURE__ */ e.jsx(Rr, { property: a, onChange: f }),
+        o === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: t, property: a, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), 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" }) }) : R && p ? /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => $(), 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" }) }) : S && c ? /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1760,19 +1761,19 @@ const Nr = ({ property: r, onChange: s }) => {
         /* @__PURE__ */ e.jsx(W, { 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: [
-            Pr(u(p, "mq")),
-            i && !p.dark ? "(Light mode)" : ""
+            Lr(u(c, "mq")),
+            i && !c.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => j(u(p, "mq")),
+              onClick: () => I(u(c, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                u(p, "mq").toUpperCase()
+                u(c, "mq").toUpperCase()
               ]
             }
           )
@@ -1782,14 +1783,14 @@ const Nr = ({ property: r, onChange: s }) => {
   ] }) });
 }, Or = ["px", "%", "em", "rem", "ch", "vh", "vw"], st = ({
   label: r,
-  options: s,
+  options: o,
   borderB: t = !1,
   borderT: a = !1,
-  type: o = "arbitrary",
-  units: n = Or,
+  type: l = "arbitrary",
+  units: s = Or,
   negative: d = !1
 }) => {
-  const [i, l] = k(s[0].key), c = ce(), p = I((h) => C(c, "property").includes(h), [c]);
+  const [i, n] = k(o[0].key), p = ce(), c = L((h) => N(p, "property").includes(h), [p]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1797,19 +1798,19 @@ const Nr = ({ property: r, onChange: s }) => {
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: r }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            s.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(Y, { children: [
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
+            o.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(Y, { children: [
               /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => l(g),
+                  onClick: () => n(g),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    $.createElement("div", {
-                      className: p(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    P.createElement("div", {
+                      className: c(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(u(rt, g, Ye), { className: "text-inherit w-3 h-3" })
+                    P.createElement(u(rt, g, Ye), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1820,8 +1821,8 @@ const Nr = ({ property: r, onChange: s }) => {
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           ke,
           {
-            type: o,
-            units: [...n],
+            type: l,
+            units: [...s],
             label: "",
             property: i,
             negative: d
@@ -1830,15 +1831,15 @@ const Nr = ({ property: r, onChange: s }) => {
       ]
     }
   );
-}, Mr = ({ heading: r, items: s }) => {
-  const t = ce(), a = T(() => {
-    const o = (i) => z(
-      i.map((l) => l.styleType === "multiple" ? C(l.options, "key") : l.property)
-    ), n = z(
-      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
-    ), d = C(t, "property");
-    return _e(n, d).length > 0;
-  }, [t, s]);
+}, Mr = ({ heading: r, items: o }) => {
+  const t = ce(), a = R(() => {
+    const l = (i) => z(
+      i.map((n) => n.styleType === "multiple" ? N(n.options, "key") : n.property)
+    ), s = z(
+      o.map((i) => i.styleType === "accordion" ? l(i.items) : i.styleType === "multiple" ? N(i.options, "key") : i.property)
+    ), d = N(t, "property");
+    return _e(s, d).length > 0;
+  }, [t, o]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       r,
@@ -1849,54 +1850,54 @@ const Nr = ({ property: r, onChange: s }) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...o }, o.label) : /* @__PURE__ */ e.jsx(ke, { ...o }, o.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((l) => l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...l }, l.label) : /* @__PURE__ */ e.jsx(ke, { ...l }, l.label)) })
   ] });
-}, _r = Le({}), ge = ({ section: r }) => {
-  const s = ce(), t = I(
-    (n = []) => {
+}, _r = Pe({}), ge = ({ section: r }) => {
+  const o = ce(), t = L(
+    (s = []) => {
       const d = {};
-      for (let l = 0; l < s.length; l++)
-        d[s[l].property] = s[l].cls;
+      for (let n = 0; n < o.length; n++)
+        d[o[n].property] = o[n].cls;
       let i = !0;
-      for (const l in n)
-        if (!ue(d, l) || d[l] !== n[l]) {
+      for (const n in s)
+        if (!ue(d, n) || d[n] !== s[n]) {
           i = !1;
           break;
         }
       return i;
     },
-    [s]
-  ), a = T(() => {
-    if (s.length > 0 && r.heading === "Classes")
+    [o]
+  ), a = R(() => {
+    if (o.length > 0 && r.heading === "Classes")
       return !0;
-    const n = (l) => z(
-      l.map((c) => c.styleType === "multiple" ? z(C(c.options, "key")) : c.property)
+    const s = (n) => z(
+      n.map((p) => p.styleType === "multiple" ? z(N(p.options, "key")) : p.property)
     ), d = z(
-      r.items.map((l) => l.styleType === "accordion" ? n(l.items) : l.styleType === "multiple" ? z(C(l.options, "key")) : l.property)
-    ), i = C(s, "property");
+      r.items.map((n) => n.styleType === "accordion" ? s(n.items) : n.styleType === "multiple" ? z(N(n.options, "key")) : n.property)
+    ), i = N(o, "property");
     return _e(d, i).length > 0;
-  }, [s, r.heading, r.items]), o = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(_r.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
+  }, [o, r.heading, r.items]), l = R(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(_r.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ie, { 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 ${a ? "bg-blue-500" : "bg-gray-300"}` }),
       r.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(de, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((n) => ue(n, "component") ? $.createElement(n.component, { key: n.label }) : ue(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...n }, n.label) : n.styleType === "accordion" && t(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(Mr, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(ke, { ...n }, n.label))
+    /* @__PURE__ */ e.jsx(de, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
+      r.items.map((s) => ue(s, "component") ? P.createElement(s.component, { key: s.label }) : ue(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...s }, s.label) : s.styleType === "accordion" && t(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Mr, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(ke, { ...s }, s.label))
     ) })
   ] }) });
 }, Er = ({
   item: r,
-  index: s,
+  index: o,
   canDelete: t,
   onChange: a,
-  onRemove: o
+  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: (n) => a(n, s),
+      onChange: (s) => a(s, o),
       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",
@@ -1909,7 +1910,7 @@ const Nr = ({ property: r, onChange: s }) => {
       "input",
       {
         name: "value",
-        onChange: (n) => f(r.key) ? {} : a(n, s),
+        onChange: (s) => b(r.key) ? {} : a(s, o),
         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",
@@ -1920,39 +1921,39 @@ const Nr = ({ property: r, onChange: s }) => {
     /* @__PURE__ */ e.jsx(
       Xe,
       {
-        onClick: o,
+        onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
 ] }), Fr = ({ section: r }) => {
   var g;
-  const { setSyncState: s } = Yt(), t = te(), [a, o] = k([]), [n] = je(), d = ze(), i = `${u(n, "0.prop")}_attrs`;
+  const { setSyncState: o } = Yt(), t = te(), [a, l] = k([]), [s] = je(), d = ze(), i = `${u(s, "0.prop")}_attrs`;
   se.useEffect(() => {
-    const y = C(u(t, i), (x, v) => ({ key: v, value: x }));
-    f(y) ? o([]) : o(y);
+    const y = N(u(t, i), (x, f) => ({ key: f, value: x }));
+    b(y) ? l([]) : l(y);
   }, [u(t, i)]);
-  const l = () => o([...a, { key: "", value: "" }]), c = (y) => {
-    const x = Oe(a, (v, L) => y !== L);
+  const n = () => l([...a, { key: "", value: "" }]), p = (y) => {
+    const x = Oe(a, (f, $) => y !== $);
     h(x);
-  }, p = (y, x) => {
-    const v = [...a];
-    v[x][y.target.name] = y.target.value, h(v);
+  }, c = (y, x) => {
+    const f = [...a];
+    f[x][y.target.name] = y.target.value, h(f);
   }, h = se.useCallback(
     (y = []) => {
       const x = {};
-      be(y, (v) => {
-        f(v.key) || Pe(x, v.key, v.value);
-      }), d([u(t, "_id")], { [i]: x }), s("UNSAVED");
+      be(y, (f) => {
+        b(f.key) || Le(x, f.key, f.value);
+      }), d([u(t, "_id")], { [i]: x }), o("UNSAVED");
     },
-    [t, s, d, i]
+    [t, o, d, i]
   );
   return /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ie, { 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 ${f(u(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${b(u(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
@@ -1963,10 +1964,10 @@ const Nr = ({ property: r, onChange: s }) => {
         /* @__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 ${!f(a) && f((g = he(a)) == null ? void 0 : g.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(a) && b((g = he(a)) == null ? void 0 : g.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 y;
-              !f(a) && f((y = he(a)) == null ? void 0 : y.key) || l();
+              !b(a) && b((y = he(a)) == null ? void 0 : y.key) || n();
             },
             children: [
               /* @__PURE__ */ e.jsx(ve, { width: 12, height: 12 }),
@@ -1976,18 +1977,18 @@ const Nr = ({ property: r, onChange: s }) => {
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        f(a) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        b(a) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         se.Children.toArray(
-          C(a, (y, x) => {
-            const v = a.length > 0 && x < a.length - 1;
+          N(a, (y, x) => {
+            const f = a.length > 0 && x < a.length - 1;
             return /* @__PURE__ */ e.jsx(
               Er,
               {
                 item: y,
                 index: x,
-                canDelete: v,
-                onChange: p,
-                onRemove: () => c(x)
+                canDelete: f,
+                onChange: c,
+                onRemove: () => p(x)
               }
             );
           })
@@ -1997,10 +1998,10 @@ const Nr = ({ property: r, onChange: s }) => {
   ] });
 };
 function Yr() {
-  const [r, s] = qe(), { flexChild: t, gridChild: a } = Xt(), [, o] = rr(Wt), { t: n } = Ee(), [d] = je();
-  return f(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  const [r, o] = qe(), { flexChild: t, gridChild: a } = Xt(), [, l] = rr(Wt), { t: s } = Ee(), [d] = je();
+  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(We, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: n("no_styling_block_selected") }),
+    /* @__PURE__ */ e.jsx("h1", { children: s("no_styling_block_selected") }),
     /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
       "Hint: Styling allowed blocks are highlighted with",
       " ",
@@ -2009,10 +2010,10 @@ function Yr() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
         /* @__PURE__ */ e.jsx(Ce, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(dr, { defaultValue: r, onValueChange: (i) => s(i), children: [
+        /* @__PURE__ */ e.jsxs(dr, { defaultValue: r, onValueChange: (i) => o(i), children: [
           /* @__PURE__ */ e.jsx(cr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(pr, { placeholder: "State" }) }),
           /* @__PURE__ */ e.jsxs(ur, { children: [
             /* @__PURE__ */ e.jsx(A, { value: "", children: "Normal" }),
@@ -2054,9 +2055,9 @@ const Xr = {
   deg: 1,
   ms: 0.1
 }, Xl = () => {
-  const r = te(), { t: s } = Ee(), [t, a] = $.useState(""), [o, n] = $.useState({
-    onDrag: (l) => l,
-    onDragEnd: (l) => l,
+  const r = te(), { t: o } = Ee(), [t, a] = P.useState(""), [l, s] = P.useState({
+    onDrag: (n) => n,
+    onDragEnd: (n) => n,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2064,21 +2065,21 @@ const Xr = {
     negative: !1,
     cssProperty: ""
   }), d = xe(
-    (l) => {
-      const c = !u(o, "negative", !1), p = u(o, "cssProperty", "");
-      let h = parseFloat(o.dragStartValue);
+    (n) => {
+      const p = !u(l, "negative", !1), c = u(l, "cssProperty", "");
+      let h = parseFloat(l.dragStartValue);
       h = Me(h) ? 0 : h;
-      let g = Xr[o.dragUnit];
-      (Z(p, "scale") || p === "opacity") && (g = 10);
-      let x = (o.dragStartY - l.pageY) / g + h;
-      c && x < 0 && (x = 0), p === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), a(`${x}`);
+      let g = Xr[l.dragUnit];
+      (Z(c, "scale") || c === "opacity") && (g = 10);
+      let x = (l.dragStartY - n.pageY) / g + h;
+      p && x < 0 && (x = 0), c === "opacity" && x > 1 && (x = 1), l.onDrag(`${x}`), a(`${x}`);
     },
-    [o],
+    [l],
     50
-  ), i = I(() => {
-    setTimeout(() => o.onDragEnd(`${t}`), 100), n({
-      onDrag: (l) => l,
-      onDragEnd: (l) => l,
+  ), i = L(() => {
+    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
+      onDrag: (n) => n,
+      onDragEnd: (n) => n,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2086,12 +2087,12 @@ const Xr = {
       negative: !1,
       cssProperty: ""
     });
-  }, [o, t, n]);
+  }, [l, t, s]);
   return yt(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(We, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: n }, children: [
-    o.dragging ? /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: s }, children: [
+    l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2100,19 +2101,19 @@ const Xr = {
       }
     ) : null,
     /* @__PURE__ */ e.jsxs(It, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(Lt, { className: "mx-1 grid grid-cols-2", children: [
+      /* @__PURE__ */ e.jsxs(Pt, { className: "mx-1 grid grid-cols-2", children: [
         /* @__PURE__ */ e.jsx(Re, { value: "settings", children: "Settings" }),
         /* @__PURE__ */ e.jsx(Re, { value: "styling", children: "Styling" })
       ] }),
       /* @__PURE__ */ e.jsx(
-        Ve,
+        He,
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
           children: /* @__PURE__ */ e.jsx(fr, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(Ve, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
+      /* @__PURE__ */ e.jsx(He, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
     ] })
   ] });
 };