@chaibuilder/sdk 0.1.22 → 0.1.24

package/dist/{Settings-a2638a6e.js → Settings-a3117310.js}

@@ -1,29 +1,29 @@
 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 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 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 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 { 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 Xt, O as Yt, P as Wt } from "./index-e6e838ec.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 Ve, N as ce, c as Yt, O as Xt, P as Wt } from "./index-088a9534.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,90 +52,91 @@ import "react-quill";
 import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
-function ur(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 gr(r) {
+  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 n("", 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 gr = ({ data: r }) => {
+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: n = "",
+  defaultValue: a = "",
   data: l,
-  onChange: a,
+  onChange: s,
   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 [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(() => {
-    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]);
-  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: o,
-    disabled: s,
+    placeholder: j ? "No available options" : t,
+    value: c,
+    disabled: o,
+    onFocus: () => p(r === "PATH"),
     onBlur: () => {
-      u.includes(o) ? a(o) : (p(""), a(""));
+      p(!1), g.includes(c) ? s(c) : (h(""), s(""));
     },
-    onChange: (f, { newValue: j }) => p(j),
-    className: `chai-input w-full ${s ? "cursor-not-allowed" : ""}`
-  }, R = (f) => /* @__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": f,
+      "data-suggest": v,
       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: 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(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" }),
-              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(gr, { data: g(l, f) })
+          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(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(y, v, "")) })
       ]
     }
   );
   return /* @__PURE__ */ e.jsx(
     Qe,
     {
-      suggestions: m,
-      onSuggestionsFetchRequested: () => v(() => x()),
-      onSuggestionsClearRequested: () => v([]),
-      onSuggestionSelected: (f) => {
-        if (f.type === "click") {
-          const j = g(f.target, "childNodes[0].data", "");
-          u.includes(j) && a(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
-          a(f.target.value);
+          s(v.target.value);
       },
-      getSuggestionValue: (f) => f,
-      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",
@@ -144,26 +145,26 @@ const gr = ({ data: r }) => {
       }
     }
   );
-}, xr = ({
+}, hr = ({
   item: r,
-  onChange: s,
+  onChange: o,
   onRemove: t,
-  selectedBlock: n,
+  selectedBlock: a,
   dataProvider: l,
-  appliedBindings: a
+  appliedBindings: s
 }) => {
-  const [d, i] = k("string"), o = (p, u) => {
+  const [d, i] = k("string"), n = (p, c) => {
     if (b(p))
       return "";
     {
-      const c = g(u === "PROP" ? n : l, p, "");
-      if (ye(c))
+      const h = u(c === "PROP" ? a : l, p, "");
+      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: [
+  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,
@@ -173,12 +174,12 @@ const gr = ({ data: r }) => {
         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);
+          const c = n(p, "PROP");
+          o({ target: { name: "key", value: p } }), d !== c && o({ target: { name: "value", value: "" } }), i(c);
         },
-        data: n,
+        data: a,
         dataType: d,
-        appliedBindings: a
+        appliedBindings: s
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-x-1.5 w-full relative", children: [
@@ -190,16 +191,16 @@ const gr = ({ data: r }) => {
           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 } });
+            const c = n(p, "PATH");
+            o(d !== c ? { target: { name: "value", value: "" } } : { target: { name: "value", value: p } });
           },
           data: l,
           dataType: d,
-          appliedBindings: a
+          appliedBindings: s
         }
       ),
       /* @__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 +208,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: o }) => {
+  const t = te(), [a] = Kt(), l = Zt(), [s, d] = k(N(r, (g, y) => ({ key: y, value: g })));
   M(() => {
-    a(C(r, (c, y) => ({ key: y, value: c })));
+    d(N(r, (g, y) => ({ key: y, value: g })));
   }, [t == null ? void 0 : t._id]);
-  const d = T(() => {
-    if (b(l))
+  const i = R(() => {
+    if (b(s))
       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)) {
-        s({});
+    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]);
+  }, c = (g, y) => {
+    const x = [...s];
+    x[y][g.target.name] = g.target.value, h(x);
+  }, h = L(
+    (g = []) => {
+      if (d(g), b(g)) {
+        o({});
         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);
-      }), s(y);
+      be(g, (x) => {
+        !b(x == null ? void 0 : x.key) && !b(x == null ? void 0 : x.value) && Le(y, x.key, x.value);
+      }), o(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 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: [
+    N(s, (g, y) => /* @__PURE__ */ e.jsx(
+      hr,
       {
-        item: c,
-        onChange: (x) => p(x, y),
-        onRemove: () => o(y),
+        item: g,
+        onChange: (x) => c(x, y),
+        onRemove: () => p(y),
         selectedBlock: t,
-        dataProvider: n,
-        appliedBindings: C(l, "key")
+        dataProvider: a,
+        appliedBindings: N(s, "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: n,
+          disabled: i,
+          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"
         }
       ) }),
-      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: -55, 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,
+  properties: o,
   formData: t,
-  onChange: n
+  onChange: a
 }) => {
-  const [l] = Mt(), a = { type: "object", properties: {} }, d = {};
-  return Object.keys(s).forEach((i) => {
-    const o = s[i];
-    if (O(["slot", "styles"], o.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 p = g(o, "i18n", !1) ? `${i}-${l}` : i;
-    a.properties[p] = _t(o, l), d[p] = Et(o, l);
+    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: mr,
-        richtext: qt,
-        icon: Jt,
-        image: Qt
+        binding: br,
+        richtext: Jt,
+        icon: Qt,
+        image: er
       },
       fields: {
-        link: er
+        link: tr
       },
       idSeparator: ".",
       autoComplete: "off",
@@ -297,35 +302,35 @@ const gr = ({ data: r }) => {
       validator: Ot,
       uiSchema: d,
       onBlur: r,
-      schema: a,
+      schema: s,
       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: 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(c, 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]);
+  }, 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: a,
+        createHistorySnapshot: s,
         formData: l,
         properties: i
       }
@@ -337,7 +342,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 ${b(u(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
@@ -345,9 +350,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(l, "_bindings", {}),
+            onChange: (c) => {
+              d({ formData: { ...l, _bindings: c } }, "root._bindings");
             }
           }
         ) })
@@ -358,18 +363,18 @@ 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: [
+          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(o, ut).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: N(n, ut).join(", ") }),
             " ",
-            o.length === 1 ? "property" : "properties",
+            n.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
             Ae,
             {
               onChange: d,
-              createHistorySnapshot: a,
+              createHistorySnapshot: s,
               formData: l,
               properties: p
             }
@@ -380,60 +385,60 @@ 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() {
-  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);
-    let N = [];
+function vr() {
+  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((h) => ({
-        ...h,
-        item: { ...h.item, name: P + h.item.name }
+      const [C] = B, _ = I.replace(C, "");
+      v = De.search(_).map((m) => ({
+        ...m,
+        item: { ...m.item, name: C + 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 = {
+      v = De.search(I);
+    h(N(v, "item"));
+  }, y = () => {
+    h([]);
+  }, 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: a,
-    onKeyDown: (f) => {
-      f.key === "Enter" && a.trim() !== "" && p();
+    value: s,
+    onKeyDown: (j) => {
+      j.key === "Enter" && s.trim() !== "" && p();
     },
-    onChange: (f, { 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 ${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 ${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: u,
-              onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: x,
-              getSuggestionValue: m,
-              renderSuggestion: v,
-              inputProps: L,
+              suggestions: c,
+              onSuggestionsFetchRequested: g,
+              onSuggestionsClearRequested: y,
+              getSuggestionValue: x,
+              renderSuggestion: f,
+              inputProps: $,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -450,31 +455,31 @@ function br() {
               variant: "outline",
               className: "h-6 border-gray-700",
               onClick: p,
-              disabled: a.trim() === "",
+              disabled: s.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" }),
+          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(
-            o.map((f) => /* @__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: [
-                  f,
+                  j,
                   /* @__PURE__ */ e.jsx(
                     Fe,
                     {
-                      onClick: () => n(l, [f]),
+                      onClick: () => a(l, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              f
+              j
             ))
           )
         ] })
@@ -482,7 +487,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 +496,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 +507,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,72 +909,72 @@ 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,
-  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,
   borderRadiusLeft: J,
-  borderRadiusTopLeft: bt,
+  borderRadiusTopLeft: ft,
   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,
@@ -984,9 +989,9 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
   // "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",
@@ -1100,95 +1105,95 @@ 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 = 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 n = T(() => g(pe, `${s}.classes`, [""]), [s]), l = le(s), a = T(() => g(l, "cls", ""), [l]), { canChange: d } = ee(re), i = /\[.*\]/g.test(a);
+  /* @__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(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: 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." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    me,
+    ye,
     {
       rounded: r,
-      onChange: (o) => t(o, s),
-      selected: a,
-      options: n,
+      onChange: (n) => t(n, o),
+      selected: s,
+      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: 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: !n.length || l,
+      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: (o) => s(o.target.value),
-      onKeyDown: (o) => {
-        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && i());
+      onChange: (n) => o(n.target.value),
+      onKeyDown: (n) => {
+        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
       },
-      value: a,
+      value: s,
       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 }))
+        P.Children.toArray(
+          a.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
-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: 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: !n && (!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" }) })
+        disabled: !a && (!t || i - 1 < 0),
+        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: !n && (!t || i + 1 >= d.length),
-        onClick: () => s(Se(d, i + 1), r),
+        disabled: !a && (!t || i + 1 >= d.length),
+        onClick: () => o(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: 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: !n,
-        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))
+        disabled: !a,
+        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)) })
   ] })) });
-}, Sr = {
+}, Tr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1200,39 +1205,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: 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
-    (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([]), 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, o]
+    [d, n]
   );
   M(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(u))
+    if (["current", "inherit", "transparent", "black", "white"].includes(c))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [u]);
-  const x = I(
+  }, [c]);
+  const y = L(
     // eslint-disable-next-line no-shadow
-    (m) => {
-      o({ color: u, shade: m });
+    (x) => {
+      n({ color: c, shade: x });
     },
-    [u]
+    [c]
   );
   return M(() => {
-    o({ color: "", shade: "" });
+    n({ 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);
-  }, [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(
-      me,
+      ye,
       {
         disabled: !l,
         rounded: !0,
-        selected: u,
-        onChange: y,
+        selected: c,
+        onChange: g,
         options: [
           "current",
           "transparent",
@@ -1265,19 +1270,19 @@ 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: !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 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 s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+  const a = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(a, "");
+  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")
@@ -1287,21 +1292,21 @@ const kr = ({ 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 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 +1405,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, 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" };
+  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)
-    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({
+  const o = r.match(/\[.*\]/g);
+  if (o === null)
+    return Br(r);
+  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: () => {
   }
-}), Br = ({
+}), Ar = ({
   unit: r,
-  currentValue: s,
+  currentValue: o,
   onDrag: t,
-  onDragEnd: n,
+  onDragEnd: a,
   onDragStart: l,
-  negative: a,
+  negative: s,
   cssProperty: d
 }) => {
   const { setDragData: i } = ee(ot);
@@ -1429,15 +1434,15 @@ const kr = ({ property: r, onChange: s }) => {
     "button",
     {
       type: "button",
-      onMouseDown: (o) => {
+      onMouseDown: (n) => {
         const p = {
           onDrag: t,
-          onDragEnd: n,
+          onDragEnd: a,
           dragging: !0,
-          dragStartY: o.pageY,
-          dragStartValue: `${s}`,
+          dragStartY: n.pageY,
+          dragStartValue: `${o}`,
           dragUnit: r,
-          negative: a,
+          negative: s,
           cssProperty: d
         };
         l(p), i(p);
@@ -1447,172 +1452,172 @@ const kr = ({ property: r, onChange: s }) => {
       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: 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 === n ? "primary" : void 0,
+    color: o === a ? "primary" : void 0,
     size: "sm",
     onClick: (l) => {
-      l.stopPropagation(), r(n);
+      l.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 [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: h, unit: w } = Vr(a);
+    const { value: m, unit: w } = Vr(s);
     if (w === "") {
-      l(h), y(o != null && o.toLowerCase().includes("width") ? "%" : p[0]);
+      l(m), g(n != null && n.toLowerCase().includes("width") ? "%" : p[0]);
       return;
     }
-    y(w), l(w === "class" || b(h) ? "" : h);
-  }, [a, o, p]);
-  const N = xe(
-    (h) => {
-      d(h);
+    g(w), l(w === "class" || b(m) ? "" : m);
+  }, [s, n, p]);
+  const v = xe(
+    (m) => {
+      d(m);
     },
     [d],
     200
-  ), P = xe(
-    (h) => {
-      d(h, !1);
+  ), C = xe(
+    (m) => {
+      d(m, !1);
     },
     [d],
     200
-  ), F = I(
-    (h = !1) => {
-      const w = $e(`${n}`, p);
-      if (g(w, "error", !1)) {
-        m(!0);
+  ), _ = L(
+    (m = !1) => {
+      const w = $e(`${a}`, p);
+      if (u(w, "error", !1)) {
+        x(!0);
         return;
       }
-      const S = g(w, "unit") !== "" ? g(w, "unit") : c;
-      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 (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("-", "")}${T === "-" ? "" : T}]`;
+      m ? C(U) : v(U);
     },
-    [N, P, n, c, i, p]
-  ), oe = I(
-    (h) => {
-      const w = $e(`${n}`, p);
-      if (g(w, "error", !1)) {
-        m(!0);
+    [v, C, a, h, i, p]
+  ), oe = L(
+    (m) => {
+      const w = $e(`${a}`, p);
+      if (u(w, "error", !1)) {
+        x(!0);
         return;
       }
-      if (h === "auto" || h === "none") {
-        N(`${i}${h}`);
+      if (m === "auto" || m === "none") {
+        v(`${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}]`;
-      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, n, i, p]
+    [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: 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: 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(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" && _();
           },
-          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);
-            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}]`;
-            P(nt);
+            m.preventDefault(), B(!0);
+            const w = ht(m.target.value);
+            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: (h) => {
-            j && (h.preventDefault(), B(!1));
+          onKeyUp: (m) => {
+            I && (m.preventDefault(), B(!1));
           },
-          onBlur: () => F(),
-          onChange: (h) => {
-            m(!1), l(h.target.value);
+          onBlur: () => _(),
+          onChange: (m) => {
+            x(!1), l(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: S ? f : 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: 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 ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
+              /* @__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(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);
+            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 || S ? null : /* @__PURE__ */ e.jsx(
+      Ar,
       {
-        onDragStart: () => f(!0),
-        onDragEnd: (h) => {
-          if (L(() => ""), f(!1), b(h))
+        onDragStart: () => j(!0),
+        onDragEnd: (m) => {
+          if ($(() => ""), j(!1), b(m))
             return;
-          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
-          N(E);
+          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
+          v(F);
         },
-        onDrag: (h) => {
-          if (b(h))
+        onDrag: (m) => {
+          if (b(m))
             return;
-          L(h);
-          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
-          P(E);
+          $(m);
+          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
+          C(F);
         },
-        currentValue: n,
-        unit: c,
-        negative: u,
-        cssProperty: o
+        currentValue: a,
+        unit: h,
+        negative: c,
+        cssProperty: n
       }
     )
   ] }) }) });
 }, le = (r) => {
-  const s = ce();
-  return yt(s, { property: r });
-}, $r = (r, s) => {
+  const o = ce();
+  return mt(o, { property: r });
+}, Ir = (r, o) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1621,8 +1626,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[o];
+}, Pr = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1696,56 +1701,56 @@ const kr = ({ property: r, onChange: s }) => {
   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(
-    (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 { 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);
     },
-    [x, i, p, o, n, c]
-  ), L = I(() => {
-    y(x, [m]);
-  }, [x, m, y]), R = T(() => $r(u, p), [u, p]);
+    [y, i, p, n, a, h]
+  ), $ = L(() => {
+    g(y, [x]);
+  }, [y, x, g]), S = R(() => Ir(c, p), [c, p]);
   M(() => {
-    l(R, u);
-  }, [R, l, u]);
-  const [, , f] = He(), j = I(
-    (N) => {
-      f({
+    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]);
     },
-    [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 }) }),
+    [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(
-          Dr,
+        o === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          $r,
           {
-            currentClass: g(u, "cls", ""),
-            classPrefix: g(Ir, n, ""),
-            units: a || [],
-            onChange: v,
+            currentClass: u(c, "cls", ""),
+            classPrefix: u(Pr, a, ""),
+            units: s || [],
+            onChange: f,
             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 })
+        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 ${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: () => $(), 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",
           {
             type: "button",
@@ -1756,19 +1761,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)" : ""
+            Lr(u(c, "mq")),
+            i && !c.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => j(g(u, "mq")),
+              onClick: () => I(u(c, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                g(u, "mq").toUpperCase()
+                u(c, "mq").toUpperCase()
               ]
             }
           )
@@ -1776,40 +1781,40 @@ 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,
+  options: o,
   borderB: t = !1,
-  borderT: n = !1,
+  borderT: a = !1,
   type: l = "arbitrary",
-  units: a = Pr,
+  units: s = Or,
   negative: d = !1
 }) => {
-  const [i, o] = k(s[0].key), p = ce(), u = I((c) => C(p, "property").includes(c), [p]);
+  const [i, n] = k(o[0].key), p = ce(), c = L((h) => N(p, "property").includes(h), [p]);
   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(
+          /* @__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: () => 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: () => 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: u(y) ? "-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(g(rt, y, Xe), { className: "text-inherit w-3 h-3" })
+                    P.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)) })
             ] }) }))
           ) })
         ] }),
@@ -1817,7 +1822,7 @@ const kr = ({ property: r, onChange: s }) => {
           ke,
           {
             type: l,
-            units: [...a],
+            units: [...s],
             label: "",
             property: i,
             negative: d
@@ -1826,73 +1831,73 @@ const kr = ({ property: r, onChange: s }) => {
       ]
     }
   );
-}, Or = ({ heading: r, items: s }) => {
-  const t = ce(), n = T(() => {
+}, Mr = ({ heading: r, items: o }) => {
+  const t = ce(), a = R(() => {
     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)
-    ), d = C(t, "property");
-    return _e(a, d).length > 0;
-  }, [t, s]);
+      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,
-      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: o.map((l) => l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...l }, l.label) : /* @__PURE__ */ e.jsx(ke, { ...l }, l.label)) })
   ] });
-}, Mr = Le({}), ge = ({ section: r }) => {
-  const s = ce(), t = I(
-    (a = []) => {
+}, _r = Pe({}), ge = ({ section: r }) => {
+  const o = ce(), t = L(
+    (s = []) => {
       const d = {};
-      for (let o = 0; o < s.length; o++)
-        d[s[o].property] = s[o].cls;
+      for (let n = 0; n < o.length; n++)
+        d[o[n].property] = o[n].cls;
       let i = !0;
-      for (const o in a)
-        if (!ue(d, o) || d[o] !== a[o]) {
+      for (const n in s)
+        if (!ue(d, n) || d[n] !== s[n]) {
           i = !1;
           break;
         }
       return i;
     },
-    [s]
-  ), n = T(() => {
-    if (s.length > 0 && r.heading === "Classes")
+    [o]
+  ), a = R(() => {
+    if (o.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 s = (n) => z(
+      n.map((p) => p.styleType === "multiple" ? z(N(p.options, "key")) : p.property)
     ), d = z(
-      r.items.map((o) => o.styleType === "accordion" ? a(o.items) : o.styleType === "multiple" ? z(C(o.options, "key")) : o.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]), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Mr.Provider, { value: l, 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 ${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))
+    /* @__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))
     ) })
   ] }) });
-}, _r = ({
+}, Er = ({
   item: r,
-  index: s,
+  index: o,
   canDelete: t,
-  onChange: n,
+  onChange: a,
   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: (a) => n(a, 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",
@@ -1905,7 +1910,7 @@ const kr = ({ property: r, onChange: s }) => {
       "input",
       {
         name: "value",
-        onChange: (a) => b(r.key) ? {} : n(a, 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",
@@ -1914,41 +1919,41 @@ const kr = ({ property: r, onChange: s }) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Ye,
+      Xe,
       {
         onClick: l,
         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: o } = Yt(), t = te(), [a, l] = k([]), [s] = je(), d = ze(), i = `${u(s, "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 = N(u(t, i), (x, f) => ({ key: f, value: x }));
+    b(y) ? l([]) : l(y);
+  }, [u(t, i)]);
+  const n = () => l([...a, { key: "", value: "" }]), p = (y) => {
+    const x = Oe(a, (f, $) => y !== $);
+    h(x);
+  }, c = (y, x) => {
+    const f = [...a];
+    f[x][y.target.name] = y.target.value, h(f);
+  }, h = se.useCallback(
+    (y = []) => {
+      const x = {};
+      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 ${b(g(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"
@@ -1959,10 +1964,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 ${!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 x;
-              !b(n) && b((x = he(n)) == null ? void 0 : x.key) || o();
+              var y;
+              !b(a) && b((y = he(a)) == null ? void 0 : y.key) || n();
             },
             children: [
               /* @__PURE__ */ e.jsx(ve, { width: 12, height: 12 }),
@@ -1972,18 +1977,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" }),
+        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(n, (x, m) => {
-            const v = n.length > 0 && m < n.length - 1;
+          N(a, (y, x) => {
+            const f = a.length > 0 && x < a.length - 1;
             return /* @__PURE__ */ e.jsx(
-              _r,
+              Er,
               {
-                item: x,
-                index: m,
-                canDelete: v,
-                onChange: u,
-                onRemove: () => p(m)
+                item: y,
+                index: x,
+                canDelete: f,
+                onChange: c,
+                onRemove: () => p(x)
               }
             );
           })
@@ -1992,11 +1997,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();
+function Yr() {
+  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: a("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",
       " ",
@@ -2008,9 +2013,9 @@ function Fr() {
     /* @__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(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) => 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" }),
             /* @__PURE__ */ e.jsx(A, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(A, { value: "active", children: "Active" }),
@@ -2026,12 +2031,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 +2055,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: o } = Ee(), [t, a] = P.useState(""), [l, s] = P.useState({
+    onDrag: (n) => n,
+    onDragEnd: (n) => n,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2060,21 +2065,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}`);
+    (n) => {
+      const p = !u(l, "negative", !1), c = u(l, "cssProperty", "");
+      let h = parseFloat(l.dragStartValue);
+      h = Me(h) ? 0 : h;
+      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}`);
     },
     [l],
     50
-  ), i = I(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), a({
-      onDrag: (o) => o,
-      onDragEnd: (o) => o,
+  ), i = L(() => {
+    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
+      onDrag: (n) => n,
+      onDragEnd: (n) => n,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2082,11 +2087,11 @@ 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: [
+  }, [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: a }, children: [
+    /* @__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",
       {
@@ -2096,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(Fr, {}) })
+      /* @__PURE__ */ e.jsx(He, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
     ] })
   ] });
 };