@chaibuilder/sdk 0.1.16 → 0.1.18

package/dist/{Settings-1e6e0534.js → Settings-c347533e.js}

@@ -1,31 +1,37 @@
 import { j as e } from "./jsx-runtime-944c88e2.js";
-import * as le from "react";
-import L, { useState as S, createContext as Ne, useMemo as H, useContext as Q, useCallback as I, useEffect as J } from "react";
-import { useThrottledCallback as de } from "@react-hookz/web";
-import { get as c, includes as P, first as Se, reject as qe, isEmpty as w, map as V, nth as he, startCase as Re, toLower as Te, startsWith as X, isNumber as Je, parseInt as Qe, isNaN as Ve, findLast as et, has as ne, flatten as Y, intersection as He, forEach as tt, set as rt, last as me, filter as lt, isNull as ot } from "lodash";
-import { useTranslation as Be } from "react-i18next";
-import { PlusIcon as pe, Cross2Icon as Ae, EyeOpenIcon as st, EyeClosedIcon as be, BorderAllIcon as M, WidthIcon as k, HeightIcon as N, ArrowUpIcon as U, ArrowRightIcon as G, ArrowDownIcon as K, ArrowLeftIcon as q, ArrowTopLeftIcon as at, ArrowTopRightIcon as nt, ArrowBottomRightIcon as it, ArrowBottomLeftIcon as dt, AlignLeftIcon as ct, AlignCenterHorizontallyIcon as pt, AlignRightIcon as ut, StretchHorizontallyIcon as gt, FontItalicIcon as xt, UnderlineIcon as yt, OverlineIcon as ht, LetterCaseUppercaseIcon as mt, Cross1Icon as bt, InfoCircledIcon as ue, MinusIcon as ft, BoxIcon as $e, TriangleDownIcon as vt, RowSpacingIcon as wt, TrashIcon as Le, MixerHorizontalIcon as Ie } from "@radix-ui/react-icons";
-import { T as Ct, a as jt, b as fe, c as ve } from "./tabs-85caa1e8.js";
-import kt from "@rjsf/core";
-import Nt from "@rjsf/validator-ajv8";
-import { A as oe, c as De, C as Me, D as St, F as Rt, G as Tt, i as ge, H as Oe, I as Ee, h as Pe, d as Vt, J as Fe, e as we, K as se, u as Ht, L as Bt, M as At } from "./index-8a7a37ce.js";
-import { getBlockComponent as $t } from "@chaibuilder/blocks";
-import { R as Lt, I as It, a as Dt, L as Mt } from "./link-6467eda6.js";
-import { useAtom as Ot } from "jotai";
-import Et from "react-autosuggest";
-import Pt from "fuse.js";
-import { A as Ft, C as ae, d as Xt } from "./html-to-json-8397fab5.js";
-import { B as Xe, d as W, e as Z, f as _, g as Yt } from "./useBuilderProp-81a14920.js";
-import { L as xe } from "./label-e770a087.js";
-import { S as Wt } from "./MODIFIERS-c2e02614.js";
-import { I as Zt } from "./input-a0ea2bc7.js";
-import { a as Ye, b as We, c as Ze, A as _t } from "./accordion-c0176dc5.js";
-import { S as zt } from "./scroll-area-9f64a082.js";
-import { S as Ut, c as Gt, b as Kt, d as qt, f as R } from "./select-7fddd7c3.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 me, 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 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 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-f8a2f8ef.js";
+import { getBlockComponent as Je, SingleLineText as Zt } from "@chaibuilder/blocks";
+import { TrashIcon as zt, ChevronRight as Ut } 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 { 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-8397fab5.js";
+import { L as Ce } from "./label-e770a087.js";
+import { S as sr } from "./MODIFIERS-c2e02614.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 "@radix-ui/react-tabs";
 import "./utils-ac68b2c8.js";
 import "clsx";
 import "tailwind-merge";
+import "./_commonjsHelpers-10dfc225.js";
+import "@radix-ui/react-scroll-area";
+import "react-dom";
+import "@floating-ui/react-dom";
 import "i18next";
 import "flagged";
 import "react-dnd";
@@ -33,131 +39,402 @@ import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
 import "redux-undo";
-import "lucide-react";
 import "sonner";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "@radix-ui/react-accordion";
 import "react-icons-picker";
-import "react-dom";
 import "./dialog-3d4e82ed.js";
 import "@radix-ui/react-dialog";
-import "./ImagesPanel-996761b1.js";
+import "./ImagesPanel-38c44785.js";
 import "react-quill";
 import "himalaya";
-import "@radix-ui/react-slot";
-import "class-variance-authority";
-import "@radix-ui/react-tooltip";
-import "@radix-ui/react-toast";
 import "@radix-ui/react-label";
-import "@radix-ui/react-accordion";
-import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-select";
-function Jt() {
-  const r = oe(), { createSnapshot: o } = De(), t = Me(), [l] = St(), s = $t(r._type), n = c(s, "props", {}), d = {
-    type: "object",
-    properties: {
-      _name: {
-        title: "Name",
-        type: "string",
-        default: c(r, "_name", r._type)
+function ur(r) {
+  const s = [], t = {};
+  function n(l, a) {
+    fe(a, (d, i) => {
+      const o = l ? `${l}.${i}` : i, p = me(d) ? "list" : typeof d;
+      s.push(o), t[o] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !me(d) && n(o, d);
+    });
+  }
+  return n("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
+}
+const gr = ({ 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 }) });
+}, Be = ({
+  type: r,
+  isDisabled: s = !1,
+  placeholder: t,
+  defaultValue: n = "",
+  data: l,
+  onChange: a,
+  dataType: d,
+  appliedBindings: i
+}) => {
+  const [o, p] = k(n), { paths: u, pathsType: c } = ur(l), m = 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(m, `props.${be(Ne(f, "."))}.binding`);
+  }), [y, v] = k(() => x());
+  M(() => v(() => x()), [d]);
+  const L = {
+    autoComplete: "off",
+    autoCorrect: "on",
+    autoCapitalize: "off",
+    spellCheck: !1,
+    placeholder: t,
+    value: o,
+    disabled: s,
+    onBlur: () => {
+      u.includes(o) ? a(o) : (p(""), a(""));
+    },
+    onChange: (f, { newValue: j }) => p(j),
+    className: `chai-input w-full ${s ? "cursor-not-allowed" : ""}`
+  }, R = (f) => /* @__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,
+      children: [
+        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: f }),
+        /* @__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)
+            ] }))
+          ) }),
+          r === "PATH" && /* @__PURE__ */ e.jsx(gr, { data: g(l, 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(g(c, f, "")) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e.jsx(
+    Qe,
+    {
+      suggestions: y,
+      onSuggestionsFetchRequested: () => v(() => x()),
+      onSuggestionsClearRequested: () => v([]),
+      onSuggestionSelected: (f) => {
+        if (f.type === "click") {
+          const j = g(f.target, "childNodes[0].data", "");
+          u.includes(j) && a(j);
+        } else
+          a(f.target.value);
+      },
+      getSuggestionValue: (f) => f,
+      renderSuggestion: R,
+      shouldRenderSuggestions: () => !0,
+      inputProps: L,
+      containerProps: { className: "w-full" },
+      theme: {
+        suggestion: "text-gray-500 border-b overflow-hidden text-ellipsis",
+        suggestionHighlighted: "bg-blue-100 text-blue-800 font-normal cursor-pointer",
+        suggestionsContainerOpen: "bg-white border border-gray-300 z-50 max-h-52 left-2 overflow-y-auto w-full rounded-md shadow-2xl text-sm font-light w-full"
       }
     }
-  }, i = {};
-  Object.keys(n).forEach((u) => {
-    const m = n[u];
-    if (P(["slot", "styles"], m.type))
-      return;
-    const h = c(m, "i18n", !1) ? `${u}-${l}` : u;
-    d.properties[h] = Rt(m, l), i[h] = Tt(m, l);
-  });
-  const a = { ...r }, x = ({ formData: u }, m) => {
-    if (m) {
-      const h = m.replace("root.", "");
-      t([r._id], { [h]: c(u, h) });
+  );
+}, xr = ({
+  item: r,
+  onChange: s,
+  onRemove: t,
+  selectedBlock: n,
+  dataProvider: l,
+  appliedBindings: a
+}) => {
+  const [d, i] = k("string"), o = (p, u) => {
+    if (b(p))
+      return "";
+    {
+      const c = g(u === "PROP" ? n : l, p, "");
+      if (me(c))
+        return "list";
+      const m = typeof c;
+      return m === "string" ? "text" : m === "object" ? "model" : m;
     }
-  }, g = () => {
-    o();
   };
-  return /* @__PURE__ */ e.jsxs("div", { children: [
+  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) }),
     /* @__PURE__ */ e.jsx(
-      kt,
+      Be,
       {
-        widgets: {
-          richtext: Lt,
-          icon: It,
-          image: Dt
-        },
-        fields: {
-          link: Mt
+        type: "PROP",
+        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);
         },
-        idSeparator: ".",
-        autoComplete: "off",
-        omitExtraData: !1,
-        liveOmit: !1,
-        liveValidate: !0,
-        uiSchema: i,
-        onBlur: g,
-        schema: d,
-        formData: a,
-        validator: Nt,
-        onChange: x
+        data: n,
+        dataType: d,
+        appliedBindings: a
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-x-1.5 w-full relative", children: [
+      /* @__PURE__ */ e.jsx(
+        Be,
+        {
+          type: "PATH",
+          isDisabled: b(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 } });
+          },
+          data: l,
+          dataType: d,
+          appliedBindings: a
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        zt,
+        {
+          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"
+        }
+      )
+    ] })
+  ] });
+}, hr = ({ bindingData: r, onChange: s }) => {
+  const t = te(), [n] = Gt(), [l, a] = k(C(r, (c, m) => ({ key: m, value: c })));
+  M(() => {
+    a(C(r, (c, m) => ({ key: m, value: c })));
+  }, [t == null ? void 0 : t._id]);
+  const d = T(() => {
+    if (b(l))
+      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 m = Oe(l, (x, y) => c !== y);
+    u([...m]);
+  }, p = (c, m) => {
+    const x = [...l];
+    x[m][c.target.name] = c.target.value, u(x);
+  }, u = I(
+    (c = []) => {
+      if (a(c), b(c)) {
+        s({});
+        return;
+      }
+      const m = {};
+      fe(c, (x) => {
+        !b(x == null ? void 0 : x.key) && !b(x == null ? void 0 : x.value) && Pe(m, x.key, x.value);
+      }), s(m);
+    },
+    [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, m) => /* @__PURE__ */ e.jsx(
+      xr,
+      {
+        item: c,
+        onChange: (x) => p(x, m),
+        onRemove: () => o(m),
+        selectedBlock: t,
+        dataProvider: n,
+        appliedBindings: C(l, "key")
+      },
+      c.key
+    )),
+    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(Y, { 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"}`,
+          children: "+ Add Data Binding"
+        }
+      ) }),
+      d && /* @__PURE__ */ e.jsx(W, { sideOffset: 10, className: "text-[11px]", children: "Complete last added data binding to add more" })
+    ] })
+  ] });
+}, mr = hr, yr = () => /* @__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
+}) => {
+  const [l] = Mt(), a = { type: "object", properties: {} }, d = {};
+  return Object.keys(s).forEach((i) => {
+    const o = s[i];
+    if (O(["slot", "styles"], o.type))
+      return;
+    const p = g(o, "i18n", !1) ? `${i}-${l}` : i;
+    a.properties[p] = _t(o, l), d[p] = Et(o, l);
+  }), /* @__PURE__ */ e.jsx(
+    Pt,
+    {
+      widgets: {
+        binding: yr,
+        richtext: qt,
+        icon: Jt,
+        image: Qt
+      },
+      fields: {
+        link: er
+      },
+      idSeparator: ".",
+      autoComplete: "off",
+      omitExtraData: !1,
+      liveOmit: !1,
+      liveValidate: !0,
+      validator: Ot,
+      uiSchema: d,
+      onBlur: r,
+      schema: a,
+      formData: t,
+      onChange: n
+    }
+  );
+};
+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 m = c.replace("root.", "");
+      t([r._id], { [m]: g(u, m) });
+    }
+  }, i = {
+    _name: Zt({
+      title: "Name",
+      default: g(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]);
+  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
+    /* @__PURE__ */ e.jsx(
+      Ae,
+      {
+        onChange: d,
+        createHistorySnapshot: a,
+        formData: l,
+        properties: i
       }
     ),
+    /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
+    /* @__PURE__ */ e.jsxs(tt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(ae, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(ie, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", 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(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+            }
+          ),
+          "Data Binding"
+        ] }) }),
+        /* @__PURE__ */ e.jsx(de, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
+          mr,
+          {
+            bindingData: g(l, "_bindings", {}),
+            onChange: (u) => {
+              d({ formData: { ...l, _bindings: u } }, "root._bindings");
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e.jsxs(ae, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(ie, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-blue-500" }),
+          "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: [
+            "Data binding is set for ",
+            /* @__PURE__ */ e.jsx("b", { children: C(o, ut).join(", ") }),
+            " ",
+            o.length === 1 ? "property" : "properties",
+            ". Remove data binding to edit static content."
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            Ae,
+            {
+              onChange: d,
+              createHistorySnapshot: a,
+              formData: l,
+              properties: p
+            }
+          )
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Ce = new Pt(Ft, {
+const De = new rr(lr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Qt() {
-  var B;
-  const [r] = ge(), o = oe(), t = Oe(), l = Ee(), [s] = Pe(), [n, d] = S(""), i = (B = Se(r)) == null ? void 0 : B.prop, a = qe((c(o, i, "").replace(Wt, "").split(",").pop() || "").split(" "), w), x = () => {
-    const v = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(s, v, !0), d("");
-  }, [g, u] = S([]), m = ({ value: v }) => {
-    const D = v.trim().toLowerCase(), A = D.match(/.+:/g);
-    let C = [];
-    if (A && A.length > 0) {
-      const [$] = A, F = D.replace($, "");
-      C = Ce.search(F).map((p) => ({
-        ...p,
-        item: { ...p.item, name: $ + p.item.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([]), m = ({ value: f }) => {
+    const j = f.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 }
       }));
     } else
-      C = Ce.search(D);
-    u(V(C, "item"));
-  }, h = () => {
-    u([]);
-  }, y = (v) => v.name, f = (v) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: v.name }), O = {
+      N = De.search(j);
+    c(C(N, "item"));
+  }, x = () => {
+    c([]);
+  }, y = (f) => f.name, v = (f) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: f.name }), L = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: n,
-    onKeyDown: (v) => {
-      v.key === "Enter" && n.trim() !== "" && x();
+    value: a,
+    onKeyDown: (f) => {
+      f.key === "Enter" && a.trim() !== "" && p();
     },
-    onChange: (v, { newValue: D }) => d(D),
+    onChange: (f, { 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 ${g.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 ${u.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(xe, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__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(
-            Et,
+            Qe,
             {
-              suggestions: g,
+              suggestions: u,
               onSuggestionsFetchRequested: m,
-              onSuggestionsClearRequested: h,
+              onSuggestionsClearRequested: x,
               getSuggestionValue: y,
-              renderSuggestion: f,
-              inputProps: O,
+              renderSuggestion: v,
+              inputProps: L,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -169,36 +446,36 @@ function Qt() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            Xe,
+            et,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: x,
-              disabled: n.trim() === "",
+              onClick: p,
+              disabled: a.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(pe, {})
+              children: /* @__PURE__ */ e.jsx(ve, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          w(a) && /* @__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" }),
-          le.Children.toArray(
-            a.map((v) => /* @__PURE__ */ e.jsxs(
+          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" }),
+          se.Children.toArray(
+            o.map((f) => /* @__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: [
-                  v,
+                  f,
                   /* @__PURE__ */ e.jsx(
-                    Ae,
+                    Fe,
                     {
-                      onClick: () => l(s, [v]),
+                      onClick: () => n(l, [f]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              v
+              f
             ))
           )
         ] })
@@ -206,16 +483,16 @@ function Qt() {
     }
   );
 }
-const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
+const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], vr = {
   heading: "Flex Child",
   items: [
-    { type: "arbitrary", label: "Basis", units: T, property: "flexBasis" },
+    { type: "arbitrary", label: "Basis", units: D, property: "flexBasis" },
     { type: "range", label: "Order", property: "order" },
     { type: "dropdown", label: "Flex", property: "flexGrowShrink" },
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, tr = {
+}, wr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -226,11 +503,11 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, rr = [
+}, jr = [
   {
     heading: "Display",
     items: [
-      { type: "dropdown", label: "Display", property: "display", units: T },
+      { type: "dropdown", label: "Display", property: "display", units: D },
       {
         styleType: "accordion",
         heading: "Flex options",
@@ -281,7 +558,7 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
         styleType: "accordion",
         heading: "Visibility & Opacity",
         items: [
-          { type: "dropdown", label: "Visibility", property: "visibility", units: T },
+          { type: "dropdown", label: "Visibility", property: "visibility", units: D },
           { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -294,7 +571,7 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
         styleType: "multiple",
         label: "Margin",
         negative: !0,
-        units: [...T, "auto"],
+        units: [...D, "auto"],
         options: [
           { key: "margin", label: "All" },
           { key: "marginX", label: "Left-Right" },
@@ -331,22 +608,22 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
   {
     heading: "Size",
     items: [
-      { type: "arbitrary", label: "Width", units: T.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "Height", units: T.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "Width", units: D.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "Height", units: D.concat("auto"), property: "height" },
       {
         styleType: "accordion",
         heading: "Min width & height",
         items: [
-          { type: "arbitrary", label: "Min Width", units: T.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "Min Height", units: T.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "Min Width", units: D.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "Min Height", units: D.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "Max width & height",
         items: [
-          { type: "arbitrary", label: "Max Width", units: T.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "Max Height", units: T.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "Max Width", units: D.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "Max Height", units: D.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -430,8 +707,8 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
     heading: "Typography",
     items: [
       { type: "dropdown", property: "fontFamily", label: "Font" },
-      { type: "arbitrary", property: "fontSize", label: "Size", units: T },
-      { type: "arbitrary", property: "lineHeight", label: "Height", units: T.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "Size", units: D },
+      { type: "arbitrary", property: "lineHeight", label: "Height", units: D.concat("-") },
       { type: "range", property: "fontWeight", label: "Weight" },
       { type: "color", property: "textColor", label: "Color" },
       {
@@ -628,89 +905,89 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
   },
   {
     heading: "Classes",
-    items: [{ component: Qt }]
+    items: [{ component: br }]
   }
-], _e = {
+], 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: st,
-  invisible: be,
+  visible: ft,
+  invisible: Te,
   // display
-  hidden: be,
-  gap: M,
-  gapX: k,
-  gapY: N,
-  spaceX: k,
-  spaceY: N,
-  overscroll: M,
-  overscrollX: k,
-  overscrollY: N,
-  overflow: M,
-  overflowX: k,
-  overflowY: N,
-  top: U,
-  right: G,
-  bottom: K,
-  left: q,
-  inset: M,
-  insetX: k,
-  insetY: N,
-  border: M,
-  borderX: k,
-  borderY: N,
-  borderTop: U,
-  borderRight: G,
-  borderBottom: K,
-  borderLeft: q,
-  borderRadius: M,
-  borderRadiusX: k,
-  borderRadiusY: N,
-  borderRadiusTop: U,
-  borderRadiusRight: G,
-  borderRadiusBottom: K,
-  borderRadiusLeft: q,
-  borderRadiusTopLeft: at,
-  borderRadiusTopRight: nt,
-  borderRadiusBottomRight: it,
-  borderRadiusBottomLeft: dt,
-  divideXWidth: k,
-  divideYWidth: N,
-  scale: M,
-  scaleX: k,
-  scaleY: N,
-  skewX: k,
-  skewY: N,
-  translateX: k,
-  translateY: N,
+  hidden: Te,
+  gap: _,
+  gapX: V,
+  gapY: H,
+  spaceX: V,
+  spaceY: H,
+  overscroll: _,
+  overscrollX: V,
+  overscrollY: H,
+  overflow: _,
+  overflowX: V,
+  overflowY: H,
+  top: G,
+  right: K,
+  bottom: q,
+  left: J,
+  inset: _,
+  insetX: V,
+  insetY: H,
+  border: _,
+  borderX: V,
+  borderY: H,
+  borderTop: G,
+  borderRight: K,
+  borderBottom: q,
+  borderLeft: J,
+  borderRadius: _,
+  borderRadiusX: V,
+  borderRadiusY: H,
+  borderRadiusTop: G,
+  borderRadiusRight: K,
+  borderRadiusBottom: q,
+  borderRadiusLeft: J,
+  borderRadiusTopLeft: bt,
+  borderRadiusTopRight: vt,
+  borderRadiusBottomRight: wt,
+  borderRadiusBottomLeft: jt,
+  divideXWidth: V,
+  divideYWidth: H,
+  scale: _,
+  scaleX: V,
+  scaleY: H,
+  skewX: V,
+  skewY: H,
+  translateX: V,
+  translateY: H,
   // padding
-  padding: M,
-  paddingX: k,
-  paddingY: N,
-  paddingTop: U,
-  paddingRight: G,
-  paddingBottom: K,
-  paddingLeft: q,
+  padding: _,
+  paddingX: V,
+  paddingY: H,
+  paddingTop: G,
+  paddingRight: K,
+  paddingBottom: q,
+  paddingLeft: J,
   // margin
-  margin: M,
-  marginX: k,
-  marginY: N,
-  marginTop: U,
-  marginRight: G,
-  marginBottom: K,
-  marginLeft: q,
+  margin: _,
+  marginX: V,
+  marginY: H,
+  marginTop: G,
+  marginRight: K,
+  marginBottom: q,
+  marginLeft: J,
   // text-align
-  textLeft: ct,
-  textCenter: pt,
-  textRight: ut,
-  textJustify: gt,
+  textLeft: Ct,
+  textCenter: kt,
+  textRight: Nt,
+  textJustify: St,
   // font style
-  italic: xt,
+  italic: Tt,
   // "not-italic": "",
   // decoration
-  underline: yt,
-  overline: ht,
+  underline: Rt,
+  overline: Vt,
   // transform
-  uppercase: mt,
+  uppercase: Ht,
   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",
@@ -751,7 +1028,7 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
       }
     )
   ] }),
-  "float-none": Ae,
+  "float-none": Fe,
   // position
   fixed: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
@@ -823,96 +1100,96 @@ const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
       }
     )
   ] }),
-  static: bt
-}, ee = Ne({ canReset: !1, canChange: !0 }), lr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  static: Bt
+}, re = Le({ canReset: !1, canChange: !0 }), Cr = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(ee.Provider, { value: { canReset: o, canChange: t }, children: r })
-), ze = ({ label: r, property: o, onChange: t }) => {
-  const l = H(() => c(ae, `${o}.classes`, [""]), [o]), s = te(o), n = H(() => c(s, "cls", ""), [s]), { canChange: d } = Q(ee), i = /\[.*\]/g.test(n);
+  /* @__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);
   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(Zt, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
-    /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(Z, { 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(ue, {}) }) }),
-      /* @__PURE__ */ e.jsx(_, { children: "Current value is using a Tailwind arbitrary value." })
+    /* @__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(W, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    ce,
+    ye,
     {
       rounded: r,
-      onChange: (a) => t(a, o),
-      selected: n,
-      options: l,
+      onChange: (o) => t(o, s),
+      selected: a,
+      options: n,
       disabled: !d
     }
   ) });
 };
-function ce({ selected: r, onChange: o, rounded: t = !1, options: l, disabled: s = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = De();
+function ye({ selected: r, onChange: s, rounded: t = !1, options: n, disabled: l = !1 }) {
+  const a = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = Ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !l.length || s,
+      disabled: !n.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: (a) => o(a.target.value),
-      onKeyDown: (a) => {
-        a.ctrlKey && (a.key === "z" && d(), a.key === "y" && i());
+      onChange: (o) => s(o.target.value),
+      onKeyDown: (o) => {
+        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && i());
       },
-      value: n,
+      value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        L.Children.toArray(
-          l.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
+        $.Children.toArray(
+          n.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
         )
       ]
     }
   );
 }
-const or = ({ property: r, onChange: o }) => {
-  const { canReset: t, canChange: l } = Q(ee), s = te(r), n = H(() => c(s, "cls", ""), [s]), d = H(() => c(ae, `${r}.classes`, [""]), [r]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/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: a ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+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: [
     /* @__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: !l && (!t || i - 1 < 0),
-        onClick: () => o(he(d, i - 1), r),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(ft, { className: !l && (!t || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        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" }) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ze, { label: !1, property: r, onChange: o }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: r, onChange: s }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!t || i + 1 >= d.length),
-        onClick: () => o(he(d, i + 1), r),
+        disabled: !n && (!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(
-          pe,
+          ve,
           {
-            className: !l && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+            className: !n && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, sr = ({ property: r, onChange: o }) => {
-  const t = H(() => c(ae, `${r}.classes`, [""]), [r]), { canChange: l } = Q(ee), s = te(r), n = H(() => c(s, "cls", ""), [s]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: V(t, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
-    /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, 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(
       "button",
       {
         type: "button",
-        disabled: !l,
-        onClick: () => o(d, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: L.createElement(c(_e, d, $e))
+        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))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(_, { children: Re(Te(d)) })
+    /* @__PURE__ */ e.jsx(W, { children: Q(ne(d)) })
   ] })) });
-}, ar = {
+}, Sr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -924,38 +1201,38 @@ const or = ({ property: r, onChange: o }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, nr = ({ property: r, onChange: o }) => {
-  const t = te(r), l = H(() => c(t, "cls", ""), [t]), { canChange: s } = Q(ee), [n, d] = S([]), [i, a] = S({ color: "", shade: "" }), x = l.split("-"), g = c(x, "1", ""), u = c(x, "2", ""), m = I(
+}, 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", ""), m = I(
     // eslint-disable-next-line no-shadow
     (y) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (d([]), a({ color: y })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), a((f) => ({ ...f, color: y, shade: f.shade ? f.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (d([]), o({ color: y })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: y, shade: v.shade ? v.shade : "500" })));
     },
-    [d, a]
+    [d, o]
   );
-  J(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(g))
+  M(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(u))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [g]);
-  const h = I(
+  }, [u]);
+  const x = I(
     // eslint-disable-next-line no-shadow
     (y) => {
-      a({ color: g, shade: y });
+      o({ color: u, shade: y });
     },
-    [g]
+    [u]
   );
-  return J(() => {
-    a({ color: "", shade: "" });
-  }, [t]), J(() => {
-    const f = `${c(ar, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(c(ae, `${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: [
+  return M(() => {
+    o({ 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: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      ce,
+      ye,
       {
-        disabled: !s,
+        disabled: !l,
         rounded: !0,
-        selected: g,
+        selected: u,
         onChange: m,
         options: [
           "current",
@@ -989,19 +1266,19 @@ const or = ({ property: r, onChange: o }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ce, { rounded: !0, selected: u, disabled: !g || !s, onChange: h, options: n }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ye, { rounded: !0, selected: c, disabled: !u || !l, onChange: x, options: a }) })
   ] });
-}, je = (r, o) => {
+}, $e = (r, s) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && o.includes(t))
+  if ((t === "auto" || t === "none") && s.includes(t))
     return { value: "", unit: t };
-  const l = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(l, "");
-  const s = r.match(l), n = s && s.length > 1, d = !w(t) && Number.isNaN(Number(t));
-  return n || d ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
-}, ir = (r) => {
-  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+  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();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1010,26 +1287,26 @@ const or = ({ property: r, onChange: o }) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (P(r, "skew-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (P(r, "rotate-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (P(r, "opacity-"))
+  if (O(r, "skew-"))
+    return { value: `${s}${t}`, unit: "deg" };
+  if (O(r, "rotate-"))
+    return { value: `${s}${t}`, unit: "deg" };
+  if (O(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (P(r, "duration-") || P(r, "delay-"))
+  if (O(r, "duration-") || O(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (P(r, "translate-") && !t.includes("/"))
-    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
-  if (P(r, "scale-"))
-    return { value: `${o}${`${t / 100}`}`, unit: "-" };
-  if (X(r, "border")) {
-    const l = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (l)
-      return { value: l[0].split("-").pop(), unit: "px" };
+  if (O(r, "translate-") && !t.includes("/"))
+    return { value: `${s}${`${t / 4}`}`, unit: "rem" };
+  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" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (X(r, "max-w-")) {
+  if (Z(r, "max-w-")) {
     if (r === "max-w-screen-sm")
       return { value: "640", unit: "px" };
     if (r === "max-w-screen-md")
@@ -1065,7 +1342,7 @@ const or = ({ property: r, onChange: o }) => {
     if (t === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (X(r, "text-")) {
+  if (Z(r, "text-")) {
     if (t === "xs")
       return { value: "12", unit: "px" };
     if (t === "sm")
@@ -1093,7 +1370,7 @@ const or = ({ property: r, onChange: o }) => {
     if (t === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (X(r, "leading-")) {
+  if (Z(r, "leading-")) {
     if (t === "none")
       return { value: "1", unit: "-" };
     if (t === "tight")
@@ -1107,7 +1384,7 @@ const or = ({ property: r, onChange: o }) => {
     if (t === "loose")
       return { value: "2", unit: "-" };
   }
-  if (X(r, "tracking-")) {
+  if (Z(r, "tracking-")) {
     if (t === "tighter")
       return { value: "-0.05", unit: "em" };
     if (t === "tight")
@@ -1124,219 +1401,219 @@ const or = ({ property: r, onChange: o }) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [l, s] = V(t.split("/"), (n) => parseInt(n, 10));
-    return { value: o + (l / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [n, l] = C(t.split("/"), (a) => parseInt(a, 10));
+    return { value: s + (n / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Je(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-}, dr = (r) => {
-  if (w(r))
+  return xt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+}, Vr = (r) => {
+  if (b(r))
     return { value: "", unit: "" };
-  const o = r.match(/\[.*\]/g);
-  if (o === null)
-    return cr(r);
-  const t = c(o, "0", "").replace(/\[|\]/g, ""), l = r.startsWith("-") ? "-" : "", s = Se(t.match(/\d+.\d+|\d+/g));
-  return { value: `${l}${s}`, unit: t.replace(s, "") };
-}, cr = (r) => w(r) ? { value: "", unit: "" } : ir(r), Ue = L.createContext({
+  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({
   setDragData: () => {
   }
-}), pr = ({
+}), Br = ({
   unit: r,
-  currentValue: o,
+  currentValue: s,
   onDrag: t,
-  onDragEnd: l,
-  onDragStart: s,
-  negative: n,
+  onDragEnd: n,
+  onDragStart: l,
+  negative: a,
   cssProperty: d
 }) => {
-  const { setDragData: i } = Q(Ue);
+  const { setDragData: i } = ee(ot);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      onMouseDown: (a) => {
-        const x = {
+      onMouseDown: (o) => {
+        const p = {
           onDrag: t,
-          onDragEnd: l,
+          onDragEnd: n,
           dragging: !0,
-          dragStartY: a.pageY,
-          dragStartValue: `${o}`,
+          dragStartY: o.pageY,
+          dragStartValue: `${s}`,
           dragUnit: r,
-          negative: n,
+          negative: a,
           cssProperty: d
         };
-        s(x), i(x);
+        l(p), i(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(wt, {})
+      children: /* @__PURE__ */ e.jsx($t, {})
     }
   );
-}, ur = ({ 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((l) => /* @__PURE__ */ e.jsx(
-  Xe,
+}, 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(
+  et,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: o === l ? "primary" : void 0,
+    color: s === n ? "primary" : void 0,
     size: "sm",
-    onClick: (s) => {
-      s.stopPropagation(), r(l);
+    onClick: (l) => {
+      l.stopPropagation(), r(n);
     },
-    children: l
+    children: n
   },
-  l
-)) }), gr = (r) => {
-  const [o, t] = S(!1), [l, s] = S(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: x, negative: g } = r, [u, m] = S(a != null && a.toLowerCase().includes("width") ? "%" : x[0]), [h, y] = S(!1), [f, O] = S(""), [B, v] = S(!1), [D, A] = S(!1);
-  J(() => {
-    const { value: p, unit: b } = dr(n);
-    if (b === "") {
-      s(p), m(a != null && a.toLowerCase().includes("width") ? "%" : x[0]);
+  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, m] = k(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, y] = k(!1), [v, L] = k(""), [R, f] = k(!1), [j, B] = k(!1);
+  M(() => {
+    const { value: h, unit: w } = Vr(a);
+    if (w === "") {
+      l(h), m(o != null && o.toLowerCase().includes("width") ? "%" : p[0]);
       return;
     }
-    m(b), s(b === "class" || w(p) ? "" : p);
-  }, [n, a, x]);
-  const C = de(
-    (p) => {
-      d(p);
+    m(w), l(w === "class" || b(h) ? "" : h);
+  }, [a, o, p]);
+  const N = xe(
+    (h) => {
+      d(h);
     },
     [d],
     200
-  ), $ = de(
-    (p) => {
-      d(p, !1);
+  ), P = xe(
+    (h) => {
+      d(h, !1);
     },
     [d],
     200
   ), F = I(
-    (p = !1) => {
-      const b = je(`${l}`, x);
-      if (c(b, "error", !1)) {
+    (h = !1) => {
+      const w = $e(`${n}`, p);
+      if (g(w, "error", !1)) {
         y(!0);
         return;
       }
-      const j = c(b, "unit") !== "" ? c(b, "unit") : u;
-      if (j === "auto" || j === "none") {
-        C(`${i}${j}`);
+      const S = g(w, "unit") !== "" ? g(w, "unit") : c;
+      if (S === "auto" || S === "none") {
+        N(`${i}${S}`);
         return;
       }
-      if (c(b, "value") === "")
+      if (g(w, "value") === "")
         return;
-      const z = `${c(b, "value", "").startsWith("-") ? "-" : ""}${i}[${c(b, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      p ? $(z) : C(z);
+      const U = `${g(w, "value", "").startsWith("-") ? "-" : ""}${i}[${g(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      h ? P(U) : N(U);
     },
-    [C, $, l, u, i, x]
-  ), re = I(
-    (p) => {
-      const b = je(`${l}`, x);
-      if (c(b, "error", !1)) {
+    [N, P, n, c, i, p]
+  ), oe = I(
+    (h) => {
+      const w = $e(`${n}`, p);
+      if (g(w, "error", !1)) {
         y(!0);
         return;
       }
-      if (p === "auto" || p === "none") {
-        C(`${i}${p}`);
+      if (h === "auto" || h === "none") {
+        N(`${i}${h}`);
         return;
       }
-      if (c(b, "value") === "")
+      if (g(w, "value") === "")
         return;
-      const j = c(b, "unit") !== "" ? c(b, "unit") : p, z = `${c(b, "value", "").startsWith("-") ? "-" : ""}${i}[${c(b, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      C(z);
+      const S = g(w, "unit") !== "" ? g(w, "unit") : h, U = `${g(w, "value", "").startsWith("-") ? "-" : ""}${i}[${g(w, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      N(U);
     },
-    [C, l, i, x]
+    [N, n, 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: u === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
-    /* @__PURE__ */ e.jsxs(W, { children: [
-      /* @__PURE__ */ e.jsx(Z, { 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(ue, {}) }) }),
-      /* @__PURE__ */ e.jsx(_, { children: "Current value is using a Tailwind preset class." })
+  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, {}) }) }),
+      /* @__PURE__ */ e.jsx(W, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
+  ] }) : /* @__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(u) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(c) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: u === "class",
-          onKeyPress: (p) => {
-            p.key === "Enter" && F();
+          readOnly: c === "class",
+          onKeyPress: (h) => {
+            h.key === "Enter" && F();
           },
-          onKeyDown: (p) => {
-            if (p.keyCode !== 38 && p.keyCode !== 40)
+          onKeyDown: (h) => {
+            if (h.keyCode !== 38 && h.keyCode !== 40)
               return;
-            p.preventDefault(), A(!0);
-            const b = Qe(p.target.value);
-            let j = Ve(b) ? 0 : b;
-            p.keyCode === 38 && (j += 1), p.keyCode === 40 && (j -= 1);
-            const E = `${j}`, Ke = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${u === "-" ? "" : u}]`;
-            $(Ke);
+            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);
           },
-          onKeyUp: (p) => {
-            D && (p.preventDefault(), A(!1));
+          onKeyUp: (h) => {
+            j && (h.preventDefault(), B(!1));
           },
           onBlur: () => F(),
-          onChange: (p) => {
-            y(!1), s(p.target.value);
+          onChange: (h) => {
+            y(!1), l(h.target.value);
           },
-          onClick: (p) => {
-            var b;
-            (b = p == null ? void 0 : p.target) == null || b.select(), t(!1);
+          onClick: (h) => {
+            var w;
+            (w = h == null ? void 0 : h.target) == null || w.select(), t(!1);
           },
-          value: B ? f : l,
+          value: R ? v : n,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
-            h ? "border-red-500 text-red-500" : "border-foreground/20"
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(W, { open: o, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(X, { open: s, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(Y, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!o),
+            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 ${x.length === 1 ? "px-2 font-semibold" : ""}`, children: u }),
-              x.length > 1 ? /* @__PURE__ */ e.jsx(vt, {}) : null
+              /* @__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(Yt, { children: /* @__PURE__ */ e.jsx(_, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ur,
+        /* @__PURE__ */ e.jsx(Kt, { children: /* @__PURE__ */ e.jsx(W, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          Ar,
           {
-            units: x,
-            current: u,
-            onSelect: (p) => {
-              t(!1), m(p), re(p);
+            units: p,
+            current: c,
+            onSelect: (h) => {
+              t(!1), m(h), oe(h);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(u) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
-      pr,
+    ["none", "auto"].indexOf(c) !== -1 || R ? null : /* @__PURE__ */ e.jsx(
+      Br,
       {
-        onDragStart: () => v(!0),
-        onDragEnd: (p) => {
-          if (O(() => ""), v(!1), w(p))
+        onDragStart: () => f(!0),
+        onDragEnd: (h) => {
+          if (L(() => ""), f(!1), b(h))
             return;
-          const b = `${p}`, E = `${b.startsWith("-") ? "-" : ""}${i}[${b.replace("-", "")}${u === "-" ? "" : u}]`;
-          C(E);
+          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
+          N(E);
         },
-        onDrag: (p) => {
-          if (w(p))
+        onDrag: (h) => {
+          if (b(h))
             return;
-          O(p);
-          const b = `${p}`, E = `${b.startsWith("-") ? "-" : ""}${i}[${b.replace("-", "")}${u === "-" ? "" : u}]`;
-          $(E);
+          L(h);
+          const w = `${h}`, E = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${c === "-" ? "" : c}]`;
+          P(E);
         },
-        currentValue: l,
-        unit: u,
-        negative: g,
-        cssProperty: a
+        currentValue: n,
+        unit: c,
+        negative: u,
+        cssProperty: o
       }
     )
   ] }) }) });
-}, te = (r) => {
-  const o = se();
-  return et(o, { property: r });
-}, xr = (r, o) => {
+}, le = (r) => {
+  const s = ce();
+  return mt(s, { property: r });
+}, $r = (r, s) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1345,8 +1622,8 @@ const or = ({ property: r, onChange: o }) => {
     xl: 4,
     "2xl": 5
   };
-  return t[c(r, "mq", "xs")] <= t[o];
-}, yr = {
+  return t[g(r, "mq", "xs")] <= t[s];
+}, Ir = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1412,87 +1689,87 @@ const or = ({ property: r, onChange: o }) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, ke = {
+}, Ie = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, hr = (r) => `${r.toUpperCase()} ${ke[r] ? `(${ke[r]} & up)` : ""}`, ye = (r) => {
-  const { type: o = "icons", label: t, property: l, onEmitChange: s = () => {
-  }, units: n, negative: d = !1 } = r, [i] = Vt(), [a] = Fe(), [, x] = we(), g = te(l), u = Oe(), m = Ee(), [h] = Pe(), y = H(() => c(g, "fullCls", ""), [g]), f = I(
-    (C, $ = !0) => {
-      const F = { dark: i, mq: x, mod: a, cls: C, property: l, fullCls: "" };
-      (i || a !== "") && (F.mq = "xs");
-      const re = Xt(F);
-      u(h, [re], $);
+}, 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(), m = Ge(), [x] = Ke(), y = 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);
     },
-    [h, i, x, a, l, u]
-  ), O = I(() => {
-    m(h, [y]);
-  }, [h, y, m]), B = H(() => xr(g, x), [g, x]);
-  J(() => {
-    s(B, g);
-  }, [B, s, g]);
-  const [, , v] = we(), D = I(
-    (C) => {
-      v({
+    [x, i, p, o, n, c]
+  ), L = I(() => {
+    m(x, [y]);
+  }, [x, y, m]), R = T(() => $r(u, p), [u, p]);
+  M(() => {
+    l(R, u);
+  }, [R, l, u]);
+  const [, , f] = He(), j = I(
+    (N) => {
+      f({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[N]);
     },
-    [v]
-  ), A = c(g, "dark", null) === i && c(g, "mod", null) === a && c(g, "mq", null) === x;
-  return /* @__PURE__ */ e.jsx(lr, { canChange: B, canReset: g && A, 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] ${g && !A ? "text-foreground" : ""}`, children: t }) }),
+    [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 }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        o === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          gr,
+        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          Dr,
           {
-            currentClass: c(g, "cls", ""),
-            classPrefix: c(yr, l, ""),
-            units: n || [],
-            onChange: f,
+            currentClass: g(u, "cls", ""),
+            classPrefix: g(Ir, n, ""),
+            units: a || [],
+            onChange: v,
             negative: d,
-            cssProperty: l
+            cssProperty: n
           }
         ) : null,
-        o === "icons" && /* @__PURE__ */ e.jsx(sr, { property: l, onChange: f }),
-        o === "range" && /* @__PURE__ */ e.jsx(or, { property: l, onChange: f }),
-        o === "color" && /* @__PURE__ */ e.jsx(nr, { property: l, onChange: f }),
-        o === "dropdown" && /* @__PURE__ */ e.jsx(ze, { label: t, property: l, onChange: f })
+        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 })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => O(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Le, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${y ? "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(
           "button",
           {
             type: "button",
             className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
-            children: /* @__PURE__ */ e.jsx(ue, {})
+            children: /* @__PURE__ */ e.jsx(we, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(_, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__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: [
-            hr(c(g, "mq")),
-            i && !g.dark ? "(Light mode)" : ""
+            Lr(g(u, "mq")),
+            i && !u.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => D(c(g, "mq")),
+              onClick: () => j(g(u, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                c(g, "mq").toUpperCase()
+                g(u, "mq").toUpperCase()
               ]
             }
           )
@@ -1500,48 +1777,48 @@ const or = ({ property: r, onChange: o }) => {
       ] }) : null })
     ] })
   ] }) });
-}, mr = ["px", "%", "em", "rem", "ch", "vh", "vw"], Ge = ({
+}, Pr = ["px", "%", "em", "rem", "ch", "vh", "vw"], st = ({
   label: r,
-  options: o,
+  options: s,
   borderB: t = !1,
-  borderT: l = !1,
-  type: s = "arbitrary",
-  units: n = mr,
+  borderT: n = !1,
+  type: l = "arbitrary",
+  units: a = Pr,
   negative: d = !1
 }) => {
-  const [i, a] = S(o[0].key), x = se(), g = I((u) => V(x, "property").includes(u), [x]);
+  const [i, o] = k(s[0].key), p = ce(), u = I((c) => C(p, "property").includes(c), [p]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${l ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${n ? "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: L.Children.toArray(
-            o.map(({ label: u, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
-              /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
+            s.map(({ label: c, key: m }) => /* @__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(
                 "button",
                 {
                   type: "button",
-                  onClick: () => a(m),
+                  onClick: () => o(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    L.createElement("div", {
-                      className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    $.createElement("div", {
+                      className: u(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    L.createElement(c(_e, m, $e), { className: "text-inherit w-3 h-3" })
+                    $.createElement(g(rt, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(_, { children: Re(Te(u)) })
+              /* @__PURE__ */ e.jsx(W, { children: Q(ne(c)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          ye,
+          ke,
           {
-            type: s,
-            units: [...n],
+            type: l,
+            units: [...a],
             label: "",
             property: i,
             negative: d
@@ -1550,73 +1827,73 @@ const or = ({ property: r, onChange: o }) => {
       ]
     }
   );
-}, br = ({ heading: r, items: o }) => {
-  const t = se(), l = H(() => {
-    const s = (i) => Y(
-      i.map((a) => a.styleType === "multiple" ? V(a.options, "key") : a.property)
-    ), n = Y(
-      o.map((i) => i.styleType === "accordion" ? s(i.items) : i.styleType === "multiple" ? V(i.options, "key") : i.property)
-    ), d = V(t, "property");
-    return He(n, d).length > 0;
-  }, [t, o]);
+}, 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)
+    ), d = C(t, "property");
+    return _e(a, 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,
-      l ? /* @__PURE__ */ e.jsx(
+      n ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${n ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(Ge, { ...s }, s.label) : /* @__PURE__ */ e.jsx(ye, { ...s }, s.label)) })
+    /* @__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)) })
   ] });
-}, fr = Ne({}), ie = ({ section: r }) => {
-  const o = se(), t = I(
-    (n = []) => {
+}, Mr = Le({}), ge = ({ section: r }) => {
+  const s = ce(), t = I(
+    (a = []) => {
       const d = {};
-      for (let a = 0; a < o.length; a++)
-        d[o[a].property] = o[a].cls;
+      for (let o = 0; o < s.length; o++)
+        d[s[o].property] = s[o].cls;
       let i = !0;
-      for (const a in n)
-        if (!ne(d, a) || d[a] !== n[a]) {
+      for (const o in a)
+        if (!ue(d, o) || d[o] !== a[o]) {
           i = !1;
           break;
         }
       return i;
     },
-    [o]
-  ), l = H(() => {
-    if (o.length > 0 && r.heading === "Classes")
+    [s]
+  ), n = T(() => {
+    if (s.length > 0 && r.heading === "Classes")
       return !0;
-    const n = (a) => Y(
-      a.map((x) => x.styleType === "multiple" ? Y(V(x.options, "key")) : x.property)
-    ), d = Y(
-      r.items.map((a) => a.styleType === "accordion" ? n(a.items) : a.styleType === "multiple" ? Y(V(a.options, "key")) : a.property)
-    ), i = V(o, "property");
-    return He(d, i).length > 0;
-  }, [o, r.heading, r.items]), s = H(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(fr.Provider, { value: s, children: /* @__PURE__ */ e.jsxs(Ye, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(We, { 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 ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+    const a = (o) => z(
+      o.map((p) => p.styleType === "multiple" ? z(C(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");
+    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: [
+    /* @__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"}` }),
       r.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(Ze, { className: "bg-gray-100 px-3.5 py-2", children: L.Children.toArray(
-      r.items.map((n) => ne(n, "component") ? L.createElement(n.component, { key: n.label }) : ne(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(Ge, { ...n }, n.label) : n.styleType === "accordion" && t(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(br, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(ye, { ...n }, n.label))
+    /* @__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))
     ) })
   ] }) });
-}, vr = ({
+}, _r = ({
   item: r,
-  index: o,
+  index: s,
   canDelete: t,
-  onChange: l,
-  onRemove: s
+  onChange: n,
+  onRemove: l
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${t ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (n) => l(n, o),
+      onChange: (a) => n(a, 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",
@@ -1629,7 +1906,7 @@ const or = ({ property: r, onChange: o }) => {
       "input",
       {
         name: "value",
-        onChange: (n) => w(r.key) ? {} : l(n, o),
+        onChange: (a) => b(r.key) ? {} : n(a, 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",
@@ -1638,76 +1915,76 @@ const or = ({ property: r, onChange: o }) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Le,
+      Ye,
       {
-        onClick: s,
+        onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), wr = ({ section: r }) => {
+] }), Er = ({ section: r }) => {
   var m;
-  const { setSyncState: o } = Ht(), t = oe(), [l, s] = S([]), [n] = ge(), d = Me(), i = `${c(n, "0.prop")}_attrs`;
-  le.useEffect(() => {
-    const h = V(c(t, i), (y, f) => ({ key: f, value: y }));
-    w(h) ? s([]) : s(h);
-  }, [c(t, i)]);
-  const a = () => s([...l, { key: "", value: "" }]), x = (h) => {
-    const y = lt(l, (f, O) => h !== O);
-    u(y);
-  }, g = (h, y) => {
-    const f = [...l];
-    f[y][h.target.name] = h.target.value, u(f);
-  }, u = le.useCallback(
-    (h = []) => {
+  const { setSyncState: s } = Xt(), t = te(), [n, l] = k([]), [a] = je(), d = ze(), i = `${g(a, "0.prop")}_attrs`;
+  se.useEffect(() => {
+    const x = C(g(t, i), (y, v) => ({ key: v, value: y }));
+    b(x) ? l([]) : l(x);
+  }, [g(t, i)]);
+  const o = () => l([...n, { key: "", value: "" }]), p = (x) => {
+    const y = Oe(n, (v, L) => x !== L);
+    c(y);
+  }, u = (x, y) => {
+    const v = [...n];
+    v[y][x.target.name] = x.target.value, c(v);
+  }, c = se.useCallback(
+    (x = []) => {
       const y = {};
-      tt(h, (f) => {
-        w(f.key) || rt(y, f.key, f.value);
-      }), d([c(t, "_id")], { [i]: y }), o("UNSAVED");
+      fe(x, (v) => {
+        b(v.key) || Pe(y, v.key, v.value);
+      }), d([g(t, "_id")], { [i]: y }), s("UNSAVED");
     },
-    [t, o, d, i]
+    [t, s, d, i]
   );
-  return /* @__PURE__ */ e.jsxs(Ye, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(We, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+  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 ${w(c(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${b(g(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
     ] }) }),
-    /* @__PURE__ */ e.jsx(Ze, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(xe, { className: "mt-2 flex w-full items-center justify-between", children: [
+    /* @__PURE__ */ e.jsx(de, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
+      /* @__PURE__ */ e.jsxs(Ce, { className: "mt-2 flex w-full items-center justify-between", children: [
         "Add Custom attributes",
         /* @__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 ${!w(l) && w((m = me(l)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            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((m = he(n)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
-              var h;
-              !w(l) && w((h = me(l)) == null ? void 0 : h.key) || a();
+              var x;
+              !b(n) && b((x = he(n)) == null ? void 0 : x.key) || o();
             },
             children: [
-              /* @__PURE__ */ e.jsx(pe, { width: 12, height: 12 }),
+              /* @__PURE__ */ e.jsx(ve, { width: 12, height: 12 }),
               " Add"
             ]
           }
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        w(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
-        le.Children.toArray(
-          V(l, (h, y) => {
-            const f = l.length > 0 && y < l.length - 1;
+        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" }),
+        se.Children.toArray(
+          C(n, (x, y) => {
+            const v = n.length > 0 && y < n.length - 1;
             return /* @__PURE__ */ e.jsx(
-              vr,
+              _r,
               {
-                item: h,
+                item: x,
                 index: y,
-                canDelete: f,
-                onChange: g,
-                onRemove: () => x(y)
+                canDelete: v,
+                onChange: u,
+                onRemove: () => p(y)
               }
             );
           })
@@ -1716,11 +1993,11 @@ const or = ({ property: r, onChange: o }) => {
     ] }) })
   ] });
 };
-function Cr() {
-  const [r, o] = Fe(), { flexChild: t, gridChild: l } = Bt(), [, s] = Ot(At), { t: n } = Be(), [d] = ge();
-  return w(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(Ie, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: n("no_styling_block_selected") }),
+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: [
+    /* @__PURE__ */ e.jsx(We, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
     /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
       "Hint: Styling allowed blocks are highlighted with",
       " ",
@@ -1729,40 +2006,40 @@ function Cr() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => s(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b 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(xe, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(Ut, { defaultValue: r, onValueChange: (i) => o(i), children: [
-          /* @__PURE__ */ e.jsx(Gt, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Kt, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(qt, { children: [
-            /* @__PURE__ */ e.jsx(R, { value: "", children: "Normal" }),
-            /* @__PURE__ */ e.jsx(R, { value: "hover", children: "Hover" }),
-            /* @__PURE__ */ e.jsx(R, { value: "active", children: "Active" }),
-            /* @__PURE__ */ e.jsx(R, { value: "focus", children: "Focus" }),
-            /* @__PURE__ */ e.jsx(R, { value: "before", children: "Before" }),
-            /* @__PURE__ */ e.jsx(R, { value: "after", children: "After" }),
-            /* @__PURE__ */ e.jsx(R, { value: "only", children: "Only" }),
-            /* @__PURE__ */ e.jsx(R, { value: "first", children: "First" }),
-            /* @__PURE__ */ e.jsx(R, { value: "last", children: "Last" }),
-            /* @__PURE__ */ e.jsx(R, { value: "first-letter", children: "First Letter" }),
-            /* @__PURE__ */ e.jsx(R, { value: "first-line", children: "First Line" }),
-            /* @__PURE__ */ e.jsx(R, { value: "disabled", children: "Disabled" })
+        /* @__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.jsx(A, { value: "", children: "Normal" }),
+            /* @__PURE__ */ e.jsx(A, { value: "hover", children: "Hover" }),
+            /* @__PURE__ */ e.jsx(A, { value: "active", children: "Active" }),
+            /* @__PURE__ */ e.jsx(A, { value: "focus", children: "Focus" }),
+            /* @__PURE__ */ e.jsx(A, { value: "before", children: "Before" }),
+            /* @__PURE__ */ e.jsx(A, { value: "after", children: "After" }),
+            /* @__PURE__ */ e.jsx(A, { value: "only", children: "Only" }),
+            /* @__PURE__ */ e.jsx(A, { value: "first", children: "First" }),
+            /* @__PURE__ */ e.jsx(A, { value: "last", children: "Last" }),
+            /* @__PURE__ */ e.jsx(A, { value: "first-letter", children: "First Letter" }),
+            /* @__PURE__ */ e.jsx(A, { value: "first-line", children: "First Line" }),
+            /* @__PURE__ */ e.jsx(A, { value: "disabled", children: "Disabled" })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(zt, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
-        /* @__PURE__ */ e.jsxs(_t, { type: "multiple", className: "h-full w-full", children: [
-          t && /* @__PURE__ */ e.jsx(ie, { section: er }),
-          l ? /* @__PURE__ */ e.jsx(ie, { section: tr }) : null,
-          rr.map((i) => /* @__PURE__ */ e.jsx(ie, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(wr, { section: { heading: "Attributes" } })
+      /* @__PURE__ */ e.jsxs(ar, { 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" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const jr = {
+const Xr = {
   px: 1,
   "%": 1,
   em: 100,
@@ -1773,32 +2050,32 @@ const jr = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, wl = () => {
-  const r = oe(), { t: o } = Be(), [t, l] = L.useState(""), [s, n] = L.useState({
-    onDrag: (a) => a,
-    onDragEnd: (a) => a,
+}, Yl = () => {
+  const r = te(), { t: s } = Ee(), [t, n] = $.useState(""), [l, a] = $.useState({
+    onDrag: (o) => o,
+    onDragEnd: (o) => o,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = de(
-    (a) => {
-      const x = !c(s, "negative", !1), g = c(s, "cssProperty", "");
-      let u = parseFloat(s.dragStartValue);
-      u = Ve(u) ? 0 : u;
-      let m = jr[s.dragUnit];
-      (X(g, "scale") || g === "opacity") && (m = 10);
-      let y = (s.dragStartY - a.pageY) / m + u;
-      x && y < 0 && (y = 0), g === "opacity" && y > 1 && (y = 1), s.onDrag(`${y}`), l(`${y}`);
+  }), d = xe(
+    (o) => {
+      const p = !g(l, "negative", !1), u = g(l, "cssProperty", "");
+      let c = parseFloat(l.dragStartValue);
+      c = Me(c) ? 0 : c;
+      let m = Xr[l.dragUnit];
+      (Z(u, "scale") || u === "opacity") && (m = 10);
+      let y = (l.dragStartY - o.pageY) / m + c;
+      p && y < 0 && (y = 0), u === "opacity" && y > 1 && (y = 1), l.onDrag(`${y}`), n(`${y}`);
     },
-    [s],
+    [l],
     50
   ), i = I(() => {
-    setTimeout(() => s.onDragEnd(`${t}`), 100), n({
-      onDrag: (a) => a,
-      onDragEnd: (a) => a,
+    setTimeout(() => l.onDragEnd(`${t}`), 100), a({
+      onDrag: (o) => o,
+      onDragEnd: (o) => o,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -1806,44 +2083,36 @@ const jr = {
       negative: !1,
       cssProperty: ""
     });
-  }, [s, t, n]);
-  return ot(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(Ie, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
-  ] }) }) : (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    /* @__PURE__ */ e.jsxs(Ue.Provider, { value: { setDragData: n }, children: [
-      s.dragging ? (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            onMouseMove: d,
-            onMouseUp: () => {
-              i();
-            },
-            className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
-          }
-        )
-      ) : null,
-      /* @__PURE__ */ e.jsxs(Ct, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-        /* @__PURE__ */ e.jsxs(jt, { className: "mx-1 grid grid-cols-2", children: [
-          /* @__PURE__ */ e.jsx(fe, { value: "settings", children: "Settings" }),
-          /* @__PURE__ */ e.jsx(fe, { value: "styling", children: "Styling" })
-        ] }),
-        /* @__PURE__ */ e.jsx(
-          ve,
-          {
-            value: "settings",
-            className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-            children: /* @__PURE__ */ e.jsx(Jt, {})
-          }
-        ),
-        /* @__PURE__ */ e.jsx(ve, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Cr, {}) })
-      ] })
+  }, [l, t, a]);
+  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(
+      "div",
+      {
+        onMouseMove: d,
+        onMouseUp: () => i(),
+        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
+      }
+    ) : 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.jsx(Re, { value: "settings", children: "Settings" }),
+        /* @__PURE__ */ e.jsx(Re, { value: "styling", children: "Styling" })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        Ve,
+        {
+          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, {}) })
     ] })
-  );
+  ] });
 };
 export {
-  wl as default
+  Yl as default
 };