@chaibuilder/sdk 0.1.21 → 0.1.23

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

@@ -2,28 +2,28 @@ 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 { useThrottledCallback as xe } from "@react-hookz/web";
-import { map as C, isEmpty as b, last as he, forEach as fe, set as Pe, startCase as Q, filter as Oe, get as g, isArray as ye, omit as at, includes as O, toLower as ne, first as be, 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 yt, has as ue, flatten as z, intersection as _e, isNull as mt } from "lodash";
+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 { useTranslation as Ee } from "react-i18next";
-import { PlusIcon as ve, Cross2Icon as Fe, EyeOpenIcon as ft, 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 bt, 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 Xe, TriangleDownIcon as Dt, RowSpacingIcon as $t, TrashIcon as Ye, MixerHorizontalIcon as We } from "@radix-ui/react-icons";
+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 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 Xt, O as Yt, P as Wt } from "./index-436bba3e.js";
-import { getBlockComponent as Je, SingleLineText as Zt } from "@chaibuilder/blocks";
-import { TrashIcon as zt, ChevronRight as Ut } from "lucide-react";
+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 { 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";
-import { u as Gt } from "./useChaiExternalData-192c7896.js";
-import { d as X, e as Y, f as W, B as et, g as Kt } from "./useBuilderProp-81a14920.js";
+import { u as Kt } from "./useChaiExternalData-192c7896.js";
+import { d as Y, e as X, f as W, B as et, g as qt } from "./useBuilderProp-81a14920.js";
 import { A as tt, a as ae, b as ie, c as de } from "./accordion-c0176dc5.js";
-import { R as qt, I as Jt, a as Qt, L as er } from "./link-2af5de8b.js";
-import { useAtom as tr } from "jotai";
-import rr from "fuse.js";
-import { A as lr, C as pe, d as or } from "./html-to-json-45e0e3b5.js";
+import { R as Jt, I as Qt, a as er, L as tr } from "./link-2af5de8b.js";
+import { useAtom as rr } from "jotai";
+import lr from "fuse.js";
+import { A as or, C as pe, d as sr } from "./html-to-json-45e0e3b5.js";
 import { L as Ce } from "./label-e770a087.js";
-import { S as sr } from "./MODIFIERS-2f19c314.js";
-import { I as nr } from "./input-a0ea2bc7.js";
-import { S as ar } from "./scroll-area-83bd9e8f.js";
-import { S as ir, c as dr, b as cr, d as pr, f as A } from "./select-7fddd7c3.js";
+import { S as nr } from "./MODIFIERS-2f19c314.js";
+import { I as ar } from "./input-a0ea2bc7.js";
+import { S as ir } from "./scroll-area-83bd9e8f.js";
+import { S as dr, c as cr, b as pr, d as ur, f as A } from "./select-7fddd7c3.js";
 import "@radix-ui/react-tabs";
 import "./utils-ac68b2c8.js";
 import "clsx";
@@ -52,17 +52,17 @@ import "react-quill";
 import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
-function ur(r) {
+function gr(r) {
   const s = [], t = {};
-  function n(l, a) {
-    fe(a, (d, i) => {
-      const o = l ? `${l}.${i}` : i, p = ye(d) ? "list" : typeof d;
-      s.push(o), t[o] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ye(d) && n(o, d);
+  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);
     });
   }
-  return n("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
+  return a("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
 }
-const gr = ({ data: r }) => {
+const xr = ({ data: r }) => {
   if (!r)
     return null;
   const s = typeof r;
@@ -71,68 +71,68 @@ const gr = ({ data: r }) => {
   type: r,
   isDisabled: s = !1,
   placeholder: t,
-  defaultValue: n = "",
-  data: l,
-  onChange: a,
+  defaultValue: a = "",
+  data: o,
+  onChange: n,
   dataType: d,
   appliedBindings: i
 }) => {
-  const [o, p] = k(n), { paths: u, pathsType: c } = ur(l), y = r === "PROP" ? Je(l == null ? void 0 : l._type) : {};
+  const [l, c] = k(a), { paths: p, pathsType: h } = gr(o), g = r === "PROP" ? Je(o == null ? void 0 : o._type) : {};
   M(() => {
-    b(o) && a("");
-  }, [o]), M(() => p(n), [n]);
-  const x = () => u.filter((f) => {
-    const j = b(o) || O(ne(f), ne(o));
-    return r === "PATH" ? j && d === g(c, f, "") : j && !O(i, f) && g(y, `props.${be(Ne(f, "."))}.binding`);
-  }), [m, v] = k(() => x());
-  M(() => v(() => x()), [d]);
+    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 = {
     autoComplete: "off",
     autoCorrect: "on",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: t,
-    value: o,
+    value: l,
     disabled: s,
     onBlur: () => {
-      u.includes(o) ? a(o) : (p(""), a(""));
+      p.includes(l) ? n(l) : (c(""), n(""));
     },
-    onChange: (f, { newValue: j }) => p(j),
+    onChange: (b, { newValue: j }) => c(j),
     className: `chai-input w-full ${s ? "cursor-not-allowed" : ""}`
-  }, R = (f) => /* @__PURE__ */ e.jsxs(
+  }, R = (b) => /* @__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": f,
+      "data-suggest": b,
       children: [
-        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: f }),
+        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: b }),
         /* @__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(f, "."), (j, B) => /* @__PURE__ */ e.jsxs("span", { className: "flex items-end", children: [
-              B > 0 && /* @__PURE__ */ e.jsx(Ut, { size: 14, className: "h-full text-gray-400" }),
+            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)
             ] }))
           ) }),
-          r === "PATH" && /* @__PURE__ */ e.jsx(gr, { data: g(l, f) })
+          r === "PATH" && /* @__PURE__ */ e.jsx(xr, { data: u(o, 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(g(c, f, "")) })
+        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, "")) })
       ]
     }
   );
   return /* @__PURE__ */ e.jsx(
     Qe,
     {
-      suggestions: m,
-      onSuggestionsFetchRequested: () => v(() => x()),
+      suggestions: x,
+      onSuggestionsFetchRequested: () => v(() => y()),
       onSuggestionsClearRequested: () => v([]),
-      onSuggestionSelected: (f) => {
-        if (f.type === "click") {
-          const j = g(f.target, "childNodes[0].data", "");
-          u.includes(j) && a(j);
+      onSuggestionSelected: (b) => {
+        if (b.type === "click") {
+          const j = u(b.target, "childNodes[0].data", "");
+          p.includes(j) && n(j);
         } else
-          a(f.target.value);
+          n(b.target.value);
       },
-      getSuggestionValue: (f) => f,
+      getSuggestionValue: (b) => b,
       renderSuggestion: R,
       shouldRenderSuggestions: () => !0,
       inputProps: L,
@@ -144,27 +144,27 @@ const gr = ({ data: r }) => {
       }
     }
   );
-}, xr = ({
+}, hr = ({
   item: r,
   onChange: s,
   onRemove: t,
-  selectedBlock: n,
-  dataProvider: l,
-  appliedBindings: a
+  selectedBlock: a,
+  dataProvider: o,
+  appliedBindings: n
 }) => {
-  const [d, i] = k("string"), o = (p, u) => {
-    if (b(p))
+  const [d, i] = k("string"), l = (c, p) => {
+    if (f(c))
       return "";
     {
-      const c = g(u === "PROP" ? n : l, p, "");
-      if (ye(c))
+      const h = u(p === "PROP" ? a : o, c, "");
+      if (me(h))
         return "list";
-      const y = typeof c;
-      return y === "string" ? "text" : y === "object" ? "model" : y;
+      const g = typeof h;
+      return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
-  return M(() => i(() => o(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) }),
+  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) }),
     /* @__PURE__ */ e.jsx(
       Be,
       {
@@ -172,13 +172,13 @@ const gr = ({ data: r }) => {
         isDisabled: !1,
         placeholder: "Enter prop key",
         defaultValue: r.key,
-        onChange: (p) => {
-          const u = o(p, "PROP");
-          s({ target: { name: "key", value: p } }), d !== u && s({ target: { name: "value", value: "" } }), i(u);
+        onChange: (c) => {
+          const p = l(c, "PROP");
+          s({ target: { name: "key", value: c } }), d !== p && s({ target: { name: "value", value: "" } }), i(p);
         },
-        data: n,
+        data: a,
         dataType: d,
-        appliedBindings: a
+        appliedBindings: n
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-x-1.5 w-full relative", children: [
@@ -186,20 +186,20 @@ const gr = ({ data: r }) => {
         Be,
         {
           type: "PATH",
-          isDisabled: b(r.key),
+          isDisabled: f(r.key),
           placeholder: "Enter data path",
           defaultValue: r.value,
-          onChange: (p) => {
-            const u = o(p, "PATH");
-            s(d !== u ? { target: { name: "value", value: "" } } : { target: { name: "value", value: p } });
+          onChange: (c) => {
+            const p = l(c, "PATH");
+            s(d !== p ? { target: { name: "value", value: "" } } : { target: { name: "value", value: c } });
           },
-          data: l,
+          data: o,
           dataType: d,
-          appliedBindings: a
+          appliedBindings: n
         }
       ),
       /* @__PURE__ */ e.jsx(
-        zt,
+        Ut,
         {
           onClick: t,
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
@@ -207,87 +207,91 @@ const gr = ({ data: r }) => {
       )
     ] })
   ] });
-}, hr = ({ bindingData: r, onChange: s }) => {
-  const t = te(), [n] = Gt(), [l, a] = k(C(r, (c, y) => ({ key: y, value: c })));
+}, mr = ({ bindingData: r, onChange: s }) => {
+  const t = te(), [a] = Kt(), o = Zt(), [n, d] = k(C(r, (g, y) => ({ key: y, value: g })));
   M(() => {
-    a(C(r, (c, y) => ({ key: y, value: c })));
+    d(C(r, (g, y) => ({ key: y, value: g })));
   }, [t == null ? void 0 : t._id]);
-  const d = T(() => {
-    if (b(l))
+  const i = T(() => {
+    if (f(n))
       return !1;
-    const c = he(l);
-    return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [l]), i = () => {
-    a([...l, { key: "", value: "" }]);
-  }, o = (c) => {
-    const y = Oe(l, (x, m) => c !== m);
-    u([...y]);
-  }, p = (c, y) => {
-    const x = [...l];
-    x[y][c.target.name] = c.target.value, u(x);
-  }, u = I(
-    (c = []) => {
-      if (a(c), b(c)) {
+    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);
+    h([...y]);
+  }, p = (g, y) => {
+    const x = [...n];
+    x[y][g.target.name] = g.target.value, h(x);
+  }, h = I(
+    (g = []) => {
+      if (d(g), f(g)) {
         s({});
         return;
       }
       const y = {};
-      fe(c, (x) => {
-        !b(x == null ? void 0 : x.key) && !b(x == null ? void 0 : x.value) && Pe(y, x.key, x.value);
+      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);
     },
     [t]
   );
-  return b(n) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-400", children: "No data provider selected." }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    C(l, (c, y) => /* @__PURE__ */ e.jsx(
-      xr,
+  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: [
+    "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(
+      hr,
       {
-        item: c,
+        item: g,
         onChange: (x) => p(x, y),
-        onRemove: () => o(y),
+        onRemove: () => c(y),
         selectedBlock: t,
-        dataProvider: n,
-        appliedBindings: C(l, "key")
+        dataProvider: a,
+        appliedBindings: C(n, "key")
       },
-      c.key
+      g.key
     )),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(Y, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
         "button",
         {
-          onClick: i,
-          disabled: d,
-          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${b(l) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30 " : ""} ${d ? "cursor-not-allowed bg-gray-200 text-gray-400" : b(l) ? "" : "bg-gray-700/20 text-gray-800 hover:bg-blue-700/30"}`,
+          onClick: l,
+          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"}`,
           children: "+ Add Data Binding"
         }
       ) }),
-      d && /* @__PURE__ */ e.jsx(W, { sideOffset: 10, className: "text-[11px]", children: "Complete last added data binding to add more" })
+      i && /* @__PURE__ */ e.jsx(W, { sideOffset: 10, className: "text-[11px]", children: "Complete last added data binding to add more" })
     ] })
   ] });
-}, yr = hr, 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" }), Ae = ({
+}, 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,
   formData: t,
-  onChange: n
+  onChange: a
 }) => {
-  const [l] = Mt(), a = { type: "object", properties: {} }, d = {};
+  const [o] = Mt(), n = { type: "object", properties: {} }, d = {};
   return Object.keys(s).forEach((i) => {
-    const o = s[i];
-    if (O(["slot", "styles"], o.type))
+    const l = s[i];
+    if (O(["slot", "styles"], l.type))
       return;
-    const p = g(o, "i18n", !1) ? `${i}-${l}` : i;
-    a.properties[p] = _t(o, l), d[p] = Et(o, l);
+    const c = u(l, "i18n", !1) ? `${i}-${o}` : i;
+    n.properties[c] = _t(l, o), d[c] = Et(l, o);
   }), /* @__PURE__ */ e.jsx(
     Pt,
     {
       widgets: {
-        binding: mr,
-        richtext: qt,
-        icon: Jt,
-        image: Qt
+        binding: br,
+        richtext: Jt,
+        icon: Qt,
+        image: er
       },
       fields: {
-        link: er
+        link: tr
       },
       idSeparator: ".",
       autoComplete: "off",
@@ -297,36 +301,36 @@ const gr = ({ data: r }) => {
       validator: Ot,
       uiSchema: d,
       onBlur: r,
-      schema: a,
+      schema: n,
       formData: t,
-      onChange: n
+      onChange: a
     }
   );
 };
 function fr() {
-  const r = te(), { createSnapshot: s } = Ze(), t = ze(), n = Je(r._type), l = { ...r }, a = () => s(), d = ({ formData: u }, c) => {
-    if (c) {
-      const y = c.replace("root.", "");
-      t([r._id], { [y]: g(u, y) });
+  const r = te(), { createSnapshot: s } = Ze(), t = ze(), a = Je(r._type), o = { ...r }, n = () => s(), d = ({ formData: p }, h) => {
+    if (h) {
+      const g = h.replace("root.", "");
+      t([r._id], { [g]: u(p, g) });
     }
   }, i = {
-    _name: Zt({
+    _name: zt({
       title: "Name",
-      default: g(r, "_name", r._type)
+      default: u(r, "_name", r._type)
     })
-  }, o = dt(g(l, "_bindings", {})), p = T(() => {
-    const u = ct(g(n, "props", {}));
-    return pt(o, (c) => {
-      delete u[c];
-    }), u;
-  }, [n, o]);
+  }, l = dt(u(o, "_bindings", {})), c = T(() => {
+    const p = ct(u(a, "props", {}));
+    return pt(l, (h) => {
+      delete p[h];
+    }), p;
+  }, [a, l]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
       Ae,
       {
         onChange: d,
-        createHistorySnapshot: a,
-        formData: l,
+        createHistorySnapshot: n,
+        formData: o,
         properties: i
       }
     ),
@@ -337,7 +341,7 @@ function fr() {
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${b(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${f(u(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
@@ -345,9 +349,9 @@ function fr() {
         /* @__PURE__ */ e.jsx(de, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
           yr,
           {
-            bindingData: g(l, "_bindings", {}),
-            onChange: (u) => {
-              d({ formData: { ...l, _bindings: u } }, "root._bindings");
+            bindingData: u(o, "_bindings", {}),
+            onChange: (p) => {
+              d({ formData: { ...o, _bindings: p } }, "root._bindings");
             }
           }
         ) })
@@ -358,20 +362,20 @@ function fr() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(de, { className: "pt-4", 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: [
+          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: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(o, ut).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(l, ut).join(", ") }),
             " ",
-            o.length === 1 ? "property" : "properties",
+            l.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
             Ae,
             {
               onChange: d,
-              createHistorySnapshot: a,
-              formData: l,
-              properties: p
+              createHistorySnapshot: n,
+              formData: o,
+              properties: c
             }
           )
         ] })
@@ -380,58 +384,58 @@ function fr() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const De = new rr(lr, {
+const De = new lr(or, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function br() {
+function vr() {
   var R;
-  const [r] = je(), s = te(), t = Ue(), n = Ge(), [l] = Ke(), [a, d] = k(""), i = (R = be(r)) == null ? void 0 : R.prop, o = gt((g(s, i, "").replace(sr, "").split(",").pop() || "").split(" "), b), p = () => {
-    const f = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(l, f, !0), d("");
-  }, [u, c] = k([]), y = ({ value: f }) => {
-    const j = f.trim().toLowerCase(), B = j.match(/.+:/g);
+  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 = [];
     if (B && B.length > 0) {
       const [P] = B, F = j.replace(P, "");
-      N = De.search(F).map((h) => ({
-        ...h,
-        item: { ...h.item, name: P + h.item.name }
+      N = De.search(F).map((m) => ({
+        ...m,
+        item: { ...m.item, name: P + m.item.name }
       }));
     } else
       N = De.search(j);
-    c(C(N, "item"));
-  }, x = () => {
-    c([]);
-  }, m = (f) => f.name, v = (f) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: f.name }), L = {
+    h(C(N, "item"));
+  }, y = () => {
+    h([]);
+  }, x = (b) => b.name, v = (b) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: b.name }), L = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: a,
-    onKeyDown: (f) => {
-      f.key === "Enter" && a.trim() !== "" && p();
+    value: n,
+    onKeyDown: (b) => {
+      b.key === "Enter" && n.trim() !== "" && c();
     },
-    onChange: (f, { newValue: j }) => d(j),
+    onChange: (b, { newValue: j }) => d(j),
     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 ${u.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 ${p.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: u,
-              onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: x,
-              getSuggestionValue: m,
+              suggestions: p,
+              onSuggestionsFetchRequested: g,
+              onSuggestionsClearRequested: y,
+              getSuggestionValue: x,
               renderSuggestion: v,
               inputProps: L,
               containerProps: {
@@ -449,32 +453,32 @@ function br() {
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: p,
-              disabled: a.trim() === "",
+              onClick: c,
+              disabled: n.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(ve, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          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" }),
+          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" }),
           se.Children.toArray(
-            o.map((f) => /* @__PURE__ */ e.jsxs(
+            l.map((b) => /* @__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: [
-                  f,
+                  b,
                   /* @__PURE__ */ e.jsx(
                     Fe,
                     {
-                      onClick: () => n(l, [f]),
+                      onClick: () => a(o, [b]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              f
+              b
             ))
           )
         ] })
@@ -482,7 +486,7 @@ function br() {
     }
   );
 }
-const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
+const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   heading: "Flex Child",
   items: [
     { type: "arbitrary", label: "Basis", units: D, property: "flexBasis" },
@@ -491,7 +495,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, wr = {
+}, jr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -502,7 +506,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, jr = [
+}, Cr = [
   {
     heading: "Display",
     items: [
@@ -904,12 +908,12 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
   },
   {
     heading: "Classes",
-    items: [{ component: br }]
+    items: [{ component: vr }]
   }
 ], rt = {
   "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: ft,
+  visible: bt,
   invisible: Te,
   // display
   hidden: Te,
@@ -945,7 +949,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
   borderRadiusRight: K,
   borderRadiusBottom: q,
   borderRadiusLeft: J,
-  borderRadiusTopLeft: bt,
+  borderRadiusTopLeft: ft,
   borderRadiusTopRight: vt,
   borderRadiusBottomRight: wt,
   borderRadiusBottomLeft: jt,
@@ -1100,60 +1104,60 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
     )
   ] }),
   static: Bt
-}, re = Le({ canReset: !1, canChange: !0 }), Cr = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
+}, re = Le({ canReset: !1, canChange: !0 }), kr = ({ children: r, canReset: s = !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 n = T(() => g(pe, `${s}.classes`, [""]), [s]), l = le(s), a = T(() => g(l, "cls", ""), [l]), { canChange: d } = ee(re), i = /\[.*\]/g.test(a);
+  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);
   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(nr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(Y, { 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(ar, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__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." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    me,
+    ye,
     {
       rounded: r,
-      onChange: (o) => t(o, s),
-      selected: a,
-      options: n,
+      onChange: (l) => t(l, s),
+      selected: n,
+      options: a,
       disabled: !d
     }
   ) });
 };
-function me({ selected: r, onChange: s, rounded: t = !1, options: n, disabled: l = !1 }) {
-  const a = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = Ze();
+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();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !n.length || l,
+      disabled: !a.length || o,
       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: (o) => s(o.target.value),
-      onKeyDown: (o) => {
-        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && i());
+      onChange: (l) => s(l.target.value),
+      onKeyDown: (l) => {
+        l.ctrlKey && (l.key === "z" && d(), l.key === "y" && i());
       },
-      value: a,
+      value: n,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         $.Children.toArray(
-          n.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
+          a.map((l) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: l, children: l }))
         )
       ]
     }
   );
 }
-const kr = ({ property: r, onChange: s }) => {
-  const { canReset: t, canChange: n } = ee(re), l = le(r), a = T(() => g(l, "cls", ""), [l]), d = T(() => g(pe, `${r}.classes`, [""]), [r]), 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: [
+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: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !n && (!t || i - 1 < 0),
+        disabled: !a && (!t || i - 1 < 0),
         onClick: () => s(Se(d, i - 1), r),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(At, { className: !n && (!t || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        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 }) }),
@@ -1162,33 +1166,33 @@ const kr = ({ property: r, onChange: s }) => {
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !n && (!t || i + 1 >= d.length),
+        disabled: !a && (!t || i + 1 >= d.length),
         onClick: () => s(Se(d, i + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           ve,
           {
-            className: !n && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+            className: !a && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, Nr = ({ property: r, onChange: s }) => {
-  const t = T(() => g(pe, `${r}.classes`, [""]), [r]), { canChange: n } = ee(re), l = le(r), a = T(() => g(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (d) => /* @__PURE__ */ e.jsxs(X, { children: [
-    /* @__PURE__ */ e.jsx(Y, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, 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: [
+    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !n,
+        disabled: !a,
         onClick: () => s(d, r),
-        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: $.createElement(g(rt, d, Xe))
+        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))
       }
     ) }),
     /* @__PURE__ */ e.jsx(W, { children: Q(ne(d)) })
   ] })) });
-}, Sr = {
+}, Tr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1200,39 +1204,39 @@ const kr = ({ property: r, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Tr = ({ property: r, onChange: s }) => {
-  const t = le(r), n = T(() => g(t, "cls", ""), [t]), { canChange: l } = ee(re), [a, d] = k([]), [i, o] = k({ color: "", shade: "" }), p = n.split("-"), u = g(p, "1", ""), c = g(p, "2", ""), y = I(
+}, 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(
     // eslint-disable-next-line no-shadow
-    (m) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(m) ? (d([]), o({ color: m })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: m, shade: v.shade ? v.shade : "500" })));
+    (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" })));
     },
-    [d, o]
+    [d, l]
   );
   M(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(u))
+    if (["current", "inherit", "transparent", "black", "white"].includes(p))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [u]);
-  const x = I(
+  }, [p]);
+  const y = I(
     // eslint-disable-next-line no-shadow
-    (m) => {
-      o({ color: u, shade: m });
+    (x) => {
+      l({ color: p, shade: x });
     },
-    [u]
+    [p]
   );
   return M(() => {
-    o({ color: "", shade: "" });
+    l({ color: "", shade: "" });
   }, [t]), M(() => {
-    const v = `${g(Sr, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    v.match(new RegExp(g(pe, `${r}.regExp`, ""))) && s(v, r);
+    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: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      me,
+      ye,
       {
-        disabled: !l,
+        disabled: !o,
         rounded: !0,
-        selected: u,
-        onChange: y,
+        selected: p,
+        onChange: g,
         options: [
           "current",
           "transparent",
@@ -1265,18 +1269,18 @@ const kr = ({ property: r, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(me, { rounded: !0, selected: c, disabled: !u || !l, onChange: x, options: a }) })
+    /* @__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 }) })
   ] });
 }, $e = (r, s) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
   if ((t === "auto" || t === "none") && s.includes(t))
     return { value: "", unit: t };
-  const n = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(n, "");
-  const l = r.match(n), a = l && l.length > 1, d = !b(t) && Number.isNaN(Number(t));
-  return a || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
-}, Rr = (r) => {
+  const a = s.length ? new RegExp(s.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();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1299,9 +1303,9 @@ const kr = ({ property: r, onChange: s }) => {
   if (O(r, "scale-"))
     return { value: `${s}${`${t / 100}`}`, unit: "-" };
   if (Z(r, "border")) {
-    const n = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (n)
-      return { value: n[0].split("-").pop(), unit: "px" };
+    const a = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (a)
+      return { value: a[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1400,28 +1404,28 @@ const kr = ({ property: r, onChange: s }) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [n, l] = C(t.split("/"), (a) => parseInt(a, 10));
-    return { value: s + (n / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [a, o] = C(t.split("/"), (n) => parseInt(n, 10));
+    return { value: s + (a / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
   return xt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-}, Vr = (r) => {
-  if (b(r))
+}, Hr = (r) => {
+  if (f(r))
     return { value: "", unit: "" };
   const s = r.match(/\[.*\]/g);
   if (s === null)
-    return Hr(r);
-  const t = g(s, "0", "").replace(/\[|\]/g, ""), n = r.startsWith("-") ? "-" : "", l = be(t.match(/\d+.\d+|\d+/g));
-  return { value: `${n}${l}`, unit: t.replace(l, "") };
-}, Hr = (r) => b(r) ? { value: "", unit: "" } : Rr(r), ot = $.createContext({
+    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({
   setDragData: () => {
   }
-}), Br = ({
+}), Ar = ({
   unit: r,
   currentValue: s,
   onDrag: t,
-  onDragEnd: n,
-  onDragStart: l,
-  negative: a,
+  onDragEnd: a,
+  onDragStart: o,
+  negative: n,
   cssProperty: d
 }) => {
   const { setDragData: i } = ee(ot);
@@ -1429,190 +1433,190 @@ const kr = ({ property: r, onChange: s }) => {
     "button",
     {
       type: "button",
-      onMouseDown: (o) => {
-        const p = {
+      onMouseDown: (l) => {
+        const c = {
           onDrag: t,
-          onDragEnd: n,
+          onDragEnd: a,
           dragging: !0,
-          dragStartY: o.pageY,
+          dragStartY: l.pageY,
           dragStartValue: `${s}`,
           dragUnit: r,
-          negative: a,
+          negative: n,
           cssProperty: d
         };
-        l(p), i(p);
+        o(c), i(c);
       },
       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, {})
     }
   );
-}, Ar = ({ 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((n) => /* @__PURE__ */ e.jsx(
+}, 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(
   et,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: s === n ? "primary" : void 0,
+    color: s === a ? "primary" : void 0,
     size: "sm",
-    onClick: (l) => {
-      l.stopPropagation(), r(n);
+    onClick: (o) => {
+      o.stopPropagation(), r(a);
     },
-    children: n
+    children: a
   },
-  n
-)) }), Dr = (r) => {
-  const [s, t] = k(!1), [n, l] = k(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: o, units: p, negative: u } = r, [c, y] = k(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, m] = k(!1), [v, L] = k(""), [R, f] = k(!1), [j, B] = k(!1);
+  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);
   M(() => {
-    const { value: h, unit: w } = Vr(a);
+    const { value: m, unit: w } = Hr(n);
     if (w === "") {
-      l(h), y(o != null && o.toLowerCase().includes("width") ? "%" : p[0]);
+      o(m), g(l != null && l.toLowerCase().includes("width") ? "%" : c[0]);
       return;
     }
-    y(w), l(w === "class" || b(h) ? "" : h);
-  }, [a, o, p]);
+    g(w), o(w === "class" || f(m) ? "" : m);
+  }, [n, l, c]);
   const N = xe(
-    (h) => {
-      d(h);
+    (m) => {
+      d(m);
     },
     [d],
     200
   ), P = xe(
-    (h) => {
-      d(h, !1);
+    (m) => {
+      d(m, !1);
     },
     [d],
     200
   ), F = I(
-    (h = !1) => {
-      const w = $e(`${n}`, p);
-      if (g(w, "error", !1)) {
-        m(!0);
+    (m = !1) => {
+      const w = $e(`${a}`, c);
+      if (u(w, "error", !1)) {
+        x(!0);
         return;
       }
-      const S = g(w, "unit") !== "" ? g(w, "unit") : c;
+      const S = u(w, "unit") !== "" ? u(w, "unit") : h;
       if (S === "auto" || S === "none") {
         N(`${i}${S}`);
         return;
       }
-      if (g(w, "value") === "")
+      if (u(w, "value") === "")
         return;
-      const U = `${g(w, "value", "").startsWith("-") ? "-" : ""}${i}[${g(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      h ? P(U) : N(U);
+      const U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      m ? P(U) : N(U);
     },
-    [N, P, n, c, i, p]
+    [N, P, a, h, i, c]
   ), oe = I(
-    (h) => {
-      const w = $e(`${n}`, p);
-      if (g(w, "error", !1)) {
-        m(!0);
+    (m) => {
+      const w = $e(`${a}`, c);
+      if (u(w, "error", !1)) {
+        x(!0);
         return;
       }
-      if (h === "auto" || h === "none") {
-        N(`${i}${h}`);
+      if (m === "auto" || m === "none") {
+        N(`${i}${m}`);
         return;
       }
-      if (g(w, "value") === "")
+      if (u(w, "value") === "")
         return;
-      const S = g(w, "unit") !== "" ? g(w, "unit") : h, U = `${g(w, "value", "").startsWith("-") ? "-" : ""}${i}[${g(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      const S = u(w, "unit") !== "" ? u(w, "unit") : m, U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(U);
     },
-    [N, n, i, p]
+    [N, a, i, c]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
-    /* @__PURE__ */ e.jsxs(X, { children: [
-      /* @__PURE__ */ e.jsx(Y, { 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, {}) }) }),
+  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.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: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(c) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: c === "class",
-          onKeyPress: (h) => {
-            h.key === "Enter" && F();
+          readOnly: h === "class",
+          onKeyPress: (m) => {
+            m.key === "Enter" && F();
           },
-          onKeyDown: (h) => {
-            if (h.keyCode !== 38 && h.keyCode !== 40)
+          onKeyDown: (m) => {
+            if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            h.preventDefault(), B(!0);
-            const w = ht(h.target.value);
+            m.preventDefault(), B(!0);
+            const w = ht(m.target.value);
             let S = Me(w) ? 0 : w;
-            h.keyCode === 38 && (S += 1), h.keyCode === 40 && (S -= 1);
-            const E = `${S}`, nt = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
+            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
+            const E = `${S}`, nt = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
             P(nt);
           },
-          onKeyUp: (h) => {
-            j && (h.preventDefault(), B(!1));
+          onKeyUp: (m) => {
+            j && (m.preventDefault(), B(!1));
           },
           onBlur: () => F(),
-          onChange: (h) => {
-            m(!1), l(h.target.value);
+          onChange: (m) => {
+            x(!1), o(m.target.value);
           },
-          onClick: (h) => {
+          onClick: (m) => {
             var w;
-            (w = h == null ? void 0 : h.target) == null || w.select(), t(!1);
+            (w = m == null ? void 0 : m.target) == null || w.select(), t(!1);
           },
-          value: R ? v : n,
+          value: R ? v : a,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            y ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(X, { open: s, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(Y, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(Y, { open: s, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
             onClick: () => t(!s),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Dt, {}) : null
+              /* @__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(Kt, { children: /* @__PURE__ */ e.jsx(W, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          Ar,
+        /* @__PURE__ */ e.jsx(qt, { children: /* @__PURE__ */ e.jsx(W, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          Dr,
           {
-            units: p,
-            current: c,
-            onSelect: (h) => {
-              t(!1), y(h), oe(h);
+            units: c,
+            current: h,
+            onSelect: (m) => {
+              t(!1), g(m), oe(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(c) !== -1 || R ? null : /* @__PURE__ */ e.jsx(
-      Br,
+    ["none", "auto"].indexOf(h) !== -1 || R ? null : /* @__PURE__ */ e.jsx(
+      Ar,
       {
-        onDragStart: () => f(!0),
-        onDragEnd: (h) => {
-          if (L(() => ""), f(!1), b(h))
+        onDragStart: () => b(!0),
+        onDragEnd: (m) => {
+          if (L(() => ""), b(!1), f(m))
             return;
-          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
+          const w = `${m}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
           N(E);
         },
-        onDrag: (h) => {
-          if (b(h))
+        onDrag: (m) => {
+          if (f(m))
             return;
-          L(h);
-          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
+          L(m);
+          const w = `${m}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
           P(E);
         },
-        currentValue: n,
-        unit: c,
-        negative: u,
-        cssProperty: o
+        currentValue: a,
+        unit: h,
+        negative: p,
+        cssProperty: l
       }
     )
   ] }) }) });
 }, le = (r) => {
   const s = ce();
-  return yt(s, { property: r });
-}, $r = (r, s) => {
+  return mt(s, { property: r });
+}, Ir = (r, s) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1621,8 +1625,8 @@ const kr = ({ property: r, onChange: s }) => {
     xl: 4,
     "2xl": 5
   };
-  return t[g(r, "mq", "xs")] <= t[s];
-}, Ir = {
+  return t[u(r, "mq", "xs")] <= t[s];
+}, Lr = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1695,25 +1699,25 @@ const kr = ({ property: r, onChange: s }) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Lr = (r) => `${r.toUpperCase()} ${Ie[r] ? `(${Ie[r]} & up)` : ""}`, ke = (r) => {
-  const { type: s = "icons", label: t, property: n, onEmitChange: l = () => {
-  }, units: a, negative: d = !1 } = r, [i] = Ft(), [o] = qe(), [, p] = He(), u = le(n), c = Ue(), y = Ge(), [x] = Ke(), m = T(() => g(u, "fullCls", ""), [u]), v = I(
+}, 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: p, mod: o, cls: N, property: n, fullCls: "" };
-      (i || o !== "") && (F.mq = "xs");
-      const oe = or(F);
-      c(x, [oe], P);
+      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);
     },
-    [x, i, p, o, n, c]
+    [y, i, c, l, a, h]
   ), L = I(() => {
-    y(x, [m]);
-  }, [x, m, y]), R = T(() => $r(u, p), [u, p]);
+    g(y, [x]);
+  }, [y, x, g]), R = T(() => Ir(p, c), [p, c]);
   M(() => {
-    l(R, u);
-  }, [R, l, u]);
-  const [, , f] = He(), j = I(
+    o(R, p);
+  }, [R, o, p]);
+  const [, , b] = He(), j = I(
     (N) => {
-      f({
+      b({
         xs: 400,
         sm: 640,
         md: 800,
@@ -1722,30 +1726,30 @@ const kr = ({ property: r, onChange: s }) => {
         "2xl": 1920
       }[N]);
     },
-    [f]
-  ), B = g(u, "dark", null) === i && g(u, "mod", null) === o && g(u, "mq", null) === p;
-  return /* @__PURE__ */ e.jsx(Cr, { canChange: R, canReset: u && 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] ${u && !B ? "text-foreground" : ""}`, children: t }) }),
+    [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 }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         s === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          Dr,
+          $r,
           {
-            currentClass: g(u, "cls", ""),
-            classPrefix: g(Ir, n, ""),
-            units: a || [],
+            currentClass: u(p, "cls", ""),
+            classPrefix: u(Lr, a, ""),
+            units: n || [],
             onChange: v,
             negative: d,
-            cssProperty: n
+            cssProperty: a
           }
         ) : null,
-        s === "icons" && /* @__PURE__ */ e.jsx(Nr, { property: n, onChange: v }),
-        s === "range" && /* @__PURE__ */ e.jsx(kr, { property: n, onChange: v }),
-        s === "color" && /* @__PURE__ */ e.jsx(Tr, { property: n, onChange: v }),
-        s === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: t, property: n, onChange: v })
+        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 })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${m ? "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(Ye, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : R && u ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(Y, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__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(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
@@ -1756,19 +1760,19 @@ const kr = ({ 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: [
-            Lr(g(u, "mq")),
-            i && !u.dark ? "(Light mode)" : ""
+            Pr(u(p, "mq")),
+            i && !p.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => j(g(u, "mq")),
+              onClick: () => j(u(p, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                g(u, "mq").toUpperCase()
+                u(p, "mq").toUpperCase()
               ]
             }
           )
@@ -1776,48 +1780,48 @@ const kr = ({ property: r, onChange: s }) => {
       ] }) : null })
     ] })
   ] }) });
-}, Pr = ["px", "%", "em", "rem", "ch", "vh", "vw"], st = ({
+}, Or = ["px", "%", "em", "rem", "ch", "vh", "vw"], st = ({
   label: r,
   options: s,
   borderB: t = !1,
-  borderT: n = !1,
-  type: l = "arbitrary",
-  units: a = Pr,
+  borderT: a = !1,
+  type: o = "arbitrary",
+  units: n = Or,
   negative: d = !1
 }) => {
-  const [i, o] = k(s[0].key), p = ce(), u = I((c) => C(p, "property").includes(c), [p]);
+  const [i, l] = k(s[0].key), c = ce(), p = I((h) => C(c, "property").includes(h), [c]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${n ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${a ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: r }),
           /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            s.map(({ label: c, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
-              /* @__PURE__ */ e.jsx(Y, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+            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(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => o(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => l(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: u(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: p(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(g(rt, y, Xe), { className: "text-inherit w-3 h-3" })
+                    $.createElement(u(rt, g, Ye), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(W, { children: Q(ne(c)) })
+              /* @__PURE__ */ e.jsx(W, { children: Q(ne(h)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           ke,
           {
-            type: l,
-            units: [...a],
+            type: o,
+            units: [...n],
             label: "",
             property: i,
             negative: d
@@ -1826,73 +1830,73 @@ const kr = ({ property: r, onChange: s }) => {
       ]
     }
   );
-}, Or = ({ heading: r, items: s }) => {
-  const t = ce(), n = T(() => {
-    const l = (i) => z(
-      i.map((o) => o.styleType === "multiple" ? C(o.options, "key") : o.property)
-    ), a = z(
-      s.map((i) => i.styleType === "accordion" ? l(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+}, 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(a, d).length > 0;
+    return _e(n, d).length > 0;
   }, [t, s]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       r,
-      n ? /* @__PURE__ */ e.jsx(
+      a ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${n ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${a ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((l) => l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...l }, l.label) : /* @__PURE__ */ e.jsx(ke, { ...l }, l.label)) })
+    /* @__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)) })
   ] });
-}, Mr = Le({}), ge = ({ section: r }) => {
+}, _r = Le({}), ge = ({ section: r }) => {
   const s = ce(), t = I(
-    (a = []) => {
+    (n = []) => {
       const d = {};
-      for (let o = 0; o < s.length; o++)
-        d[s[o].property] = s[o].cls;
+      for (let l = 0; l < s.length; l++)
+        d[s[l].property] = s[l].cls;
       let i = !0;
-      for (const o in a)
-        if (!ue(d, o) || d[o] !== a[o]) {
+      for (const l in n)
+        if (!ue(d, l) || d[l] !== n[l]) {
           i = !1;
           break;
         }
       return i;
     },
     [s]
-  ), n = T(() => {
+  ), a = T(() => {
     if (s.length > 0 && r.heading === "Classes")
       return !0;
-    const a = (o) => z(
-      o.map((p) => p.styleType === "multiple" ? z(C(p.options, "key")) : p.property)
+    const n = (l) => z(
+      l.map((c) => c.styleType === "multiple" ? z(C(c.options, "key")) : c.property)
     ), d = z(
-      r.items.map((o) => o.styleType === "accordion" ? a(o.items) : o.styleType === "multiple" ? z(C(o.options, "key")) : o.property)
+      r.items.map((l) => l.styleType === "accordion" ? n(l.items) : l.styleType === "multiple" ? z(C(l.options, "key")) : l.property)
     ), i = C(s, "property");
     return _e(d, i).length > 0;
-  }, [s, r.heading, r.items]), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Mr.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
+  }, [s, r.heading, r.items]), o = T(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(_r.Provider, { value: o, 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 ${n ? "bg-blue-500" : "bg-gray-300"}` }),
+      /* @__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((a) => ue(a, "component") ? $.createElement(a.component, { key: a.label }) : ue(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...a }, a.label) : a.styleType === "accordion" && t(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(Or, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(ke, { ...a }, a.label))
+      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))
     ) })
   ] }) });
-}, _r = ({
+}, Er = ({
   item: r,
   index: s,
   canDelete: t,
-  onChange: n,
-  onRemove: l
+  onChange: a,
+  onRemove: o
 }) => /* @__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: (a) => n(a, s),
+      onChange: (n) => a(n, s),
       value: r.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1905,7 +1909,7 @@ const kr = ({ property: r, onChange: s }) => {
       "input",
       {
         name: "value",
-        onChange: (a) => b(r.key) ? {} : n(a, s),
+        onChange: (n) => f(r.key) ? {} : a(n, s),
         value: r.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1914,32 +1918,32 @@ const kr = ({ property: r, onChange: s }) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Ye,
+      Xe,
       {
-        onClick: l,
+        onClick: o,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), Er = ({ section: r }) => {
-  var y;
-  const { setSyncState: s } = Xt(), t = te(), [n, l] = k([]), [a] = je(), d = ze(), i = `${g(a, "0.prop")}_attrs`;
+] }), Fr = ({ section: r }) => {
+  var g;
+  const { setSyncState: s } = Yt(), t = te(), [a, o] = k([]), [n] = je(), d = ze(), i = `${u(n, "0.prop")}_attrs`;
   se.useEffect(() => {
-    const x = C(g(t, i), (m, v) => ({ key: v, value: m }));
-    b(x) ? l([]) : l(x);
-  }, [g(t, i)]);
-  const o = () => l([...n, { key: "", value: "" }]), p = (x) => {
-    const m = Oe(n, (v, L) => x !== L);
-    c(m);
-  }, u = (x, m) => {
-    const v = [...n];
-    v[m][x.target.name] = x.target.value, c(v);
-  }, c = se.useCallback(
-    (x = []) => {
-      const m = {};
-      fe(x, (v) => {
-        b(v.key) || Pe(m, v.key, v.value);
-      }), d([g(t, "_id")], { [i]: m }), s("UNSAVED");
+    const y = C(u(t, i), (x, v) => ({ key: v, value: x }));
+    f(y) ? o([]) : o(y);
+  }, [u(t, i)]);
+  const l = () => o([...a, { key: "", value: "" }]), c = (y) => {
+    const x = Oe(a, (v, L) => y !== L);
+    h(x);
+  }, p = (y, x) => {
+    const v = [...a];
+    v[x][y.target.name] = y.target.value, h(v);
+  }, 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");
     },
     [t, s, d, i]
   );
@@ -1948,7 +1952,7 @@ const kr = ({ property: r, onChange: s }) => {
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `h-[8px] w-[8px] rounded-full ${b(g(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${f(u(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
@@ -1959,10 +1963,10 @@ const kr = ({ 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 ${!b(n) && b((y = he(n)) == null ? void 0 : y.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!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"}`,
             onClick: () => {
-              var x;
-              !b(n) && b((x = he(n)) == null ? void 0 : x.key) || o();
+              var y;
+              !f(a) && f((y = he(a)) == null ? void 0 : y.key) || l();
             },
             children: [
               /* @__PURE__ */ e.jsx(ve, { width: 12, height: 12 }),
@@ -1972,18 +1976,18 @@ const kr = ({ property: r, onChange: s }) => {
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        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" }),
         se.Children.toArray(
-          C(n, (x, m) => {
-            const v = n.length > 0 && m < n.length - 1;
+          C(a, (y, x) => {
+            const v = a.length > 0 && x < a.length - 1;
             return /* @__PURE__ */ e.jsx(
-              _r,
+              Er,
               {
-                item: x,
-                index: m,
+                item: y,
+                index: x,
                 canDelete: v,
-                onChange: u,
-                onRemove: () => p(m)
+                onChange: p,
+                onRemove: () => c(x)
               }
             );
           })
@@ -1992,11 +1996,11 @@ const kr = ({ property: r, onChange: s }) => {
     ] }) })
   ] });
 };
-function Fr() {
-  const [r, s] = qe(), { flexChild: t, gridChild: n } = Yt(), [, l] = tr(Wt), { t: a } = 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: [
+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: [
     /* @__PURE__ */ e.jsx(We, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
+    /* @__PURE__ */ e.jsx("h1", { children: n("no_styling_block_selected") }),
     /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
       "Hint: Styling allowed blocks are highlighted with",
       " ",
@@ -2005,12 +2009,12 @@ function Fr() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!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(ir, { defaultValue: r, onValueChange: (i) => s(i), children: [
-          /* @__PURE__ */ e.jsx(dr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(cr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(pr, { children: [
+        /* @__PURE__ */ e.jsxs(dr, { defaultValue: r, onValueChange: (i) => s(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" }),
             /* @__PURE__ */ e.jsx(A, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(A, { value: "active", children: "Active" }),
@@ -2026,12 +2030,12 @@ function Fr() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(ar, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+      /* @__PURE__ */ e.jsxs(ir, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
         /* @__PURE__ */ e.jsxs(tt, { type: "multiple", className: "h-full w-full", children: [
-          t && /* @__PURE__ */ e.jsx(ge, { section: vr }),
-          n ? /* @__PURE__ */ e.jsx(ge, { section: wr }) : null,
-          jr.map((i) => /* @__PURE__ */ e.jsx(ge, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(Er, { section: { heading: "Attributes" } })
+          t && /* @__PURE__ */ e.jsx(ge, { section: wr }),
+          a ? /* @__PURE__ */ e.jsx(ge, { section: jr }) : null,
+          Cr.map((i) => /* @__PURE__ */ e.jsx(ge, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(Fr, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
@@ -2050,9 +2054,9 @@ const Xr = {
   deg: 1,
   ms: 0.1
 }, Xl = () => {
-  const r = te(), { t: s } = Ee(), [t, n] = $.useState(""), [l, a] = $.useState({
-    onDrag: (o) => o,
-    onDragEnd: (o) => o,
+  const r = te(), { t: s } = Ee(), [t, a] = $.useState(""), [o, n] = $.useState({
+    onDrag: (l) => l,
+    onDragEnd: (l) => l,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2060,21 +2064,21 @@ const Xr = {
     negative: !1,
     cssProperty: ""
   }), d = xe(
-    (o) => {
-      const p = !g(l, "negative", !1), u = g(l, "cssProperty", "");
-      let c = parseFloat(l.dragStartValue);
-      c = Me(c) ? 0 : c;
-      let y = Xr[l.dragUnit];
-      (Z(u, "scale") || u === "opacity") && (y = 10);
-      let m = (l.dragStartY - o.pageY) / y + c;
-      p && m < 0 && (m = 0), u === "opacity" && m > 1 && (m = 1), l.onDrag(`${m}`), n(`${m}`);
+    (l) => {
+      const c = !u(o, "negative", !1), p = u(o, "cssProperty", "");
+      let h = parseFloat(o.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}`);
     },
-    [l],
+    [o],
     50
   ), i = I(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), a({
-      onDrag: (o) => o,
-      onDragEnd: (o) => o,
+    setTimeout(() => o.onDragEnd(`${t}`), 100), n({
+      onDrag: (l) => l,
+      onDragEnd: (l) => l,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2082,12 +2086,12 @@ const Xr = {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, a]);
-  return mt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  }, [o, t, n]);
+  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: a }, children: [
-    l.dragging ? /* @__PURE__ */ e.jsx(
+  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: n }, children: [
+    o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2108,7 +2112,7 @@ const Xr = {
           children: /* @__PURE__ */ e.jsx(fr, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(Ve, { value: "styling", className: "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, {}) })
     ] })
   ] });
 };