@chaibuilder/sdk 0.1.30 → 0.1.32

package/dist/{Settings-8b2a5a12.js → Settings-ad55d8cb.js}

@@ -1,29 +1,31 @@
 import { j as e } from "./jsx-runtime-944c88e2.js";
-import * as se from "react";
-import P, { useState as k, useEffect as M, useMemo as R, useCallback as L, createContext as Pe, useContext as ee } from "react";
-import { useThrottledCallback as xe } from "@react-hookz/web";
-import { map as N, isEmpty as b, last as he, forEach as be, set as Le, startCase as Q, filter as Oe, get as u, isArray as me, omit as at, includes as O, toLower as ne, first as fe, split as Ne, truncate as it, keys as dt, cloneDeep as ct, each as pt, capitalize as ut, reject as gt, nth as Se, startsWith as Z, isNumber as xt, parseInt as ht, isNaN as Me, findLast as mt, has as ue, flatten as z, intersection as _e, isNull as yt } from "lodash";
-import { useTranslation as Ee } from "react-i18next";
-import { PlusIcon as ve, Cross2Icon as Fe, EyeOpenIcon as bt, EyeClosedIcon as Te, BorderAllIcon as E, WidthIcon as H, HeightIcon as V, ArrowUpIcon as G, ArrowRightIcon as K, ArrowDownIcon as q, ArrowLeftIcon as J, ArrowTopLeftIcon as ft, ArrowTopRightIcon as vt, ArrowBottomRightIcon as wt, ArrowBottomLeftIcon as jt, AlignLeftIcon as Ct, AlignCenterHorizontallyIcon as kt, AlignRightIcon as Nt, StretchHorizontallyIcon as St, FontItalicIcon as Tt, UnderlineIcon as Rt, OverlineIcon as Ht, LetterCaseUppercaseIcon as Vt, Cross1Icon as Bt, InfoCircledIcon as we, MinusIcon as At, BoxIcon as Ye, TriangleDownIcon as Dt, RowSpacingIcon as $t, TrashIcon as Xe, MixerHorizontalIcon as We } from "@radix-ui/react-icons";
-import { T as It, a as Pt, b as Re, c as He } from "./tabs-85caa1e8.js";
-import Lt from "@rjsf/core";
-import Ot from "@rjsf/validator-ajv8";
-import { D as te, d as Ze, G as ze, H as Mt, I as _t, J as Et, j as je, K as Ue, L as Ge, i as Ke, e as Ft, M as qe, f as Ve, N as ce, c as Yt, O as Xt, P as Wt } from "./index-91c0470a.js";
-import { getChaiDataProviders as Zt, getBlockComponent as Je, SingleLineText as zt } from "@chaibuilder/blocks";
-import { TrashIcon as Ut, ChevronRight as Gt } from "lucide-react";
-import Qe from "react-autosuggest";
-import { u as Kt } from "./useChaiExternalData-192c7896.js";
-import { d as Y, e as X, f as W, B as et, g as qt } from "./useBuilderProp-81a14920.js";
-import { A as tt, a as ae, b as ie, c as de } from "./accordion-c0176dc5.js";
-import { R as Jt, I as Qt, a as er, L as tr } from "./link-2af5de8b.js";
-import { useAtom as rr } from "jotai";
-import lr from "fuse.js";
-import { A as or, C as pe, d as sr } from "./html-to-json-45e0e3b5.js";
-import { L as Ce } from "./label-e770a087.js";
-import { S as nr } from "./MODIFIERS-2f19c314.js";
-import { I as ar } from "./input-a0ea2bc7.js";
-import { S as ir } from "./scroll-area-83bd9e8f.js";
-import { S as dr, c as cr, b as pr, d as ur, f as A } from "./select-7fddd7c3.js";
+import * as ne from "react";
+import $, { useState as w, useEffect as E, useMemo as N, useCallback as A, createContext as Oe, useContext as re } from "react";
+import { useThrottledCallback as me } from "@react-hookz/web";
+import { map as C, isEmpty as b, last as ye, forEach as je, set as Me, get as p, startCase as Y, filter as be, truncate as it, isArray as ae, includes as M, first as we, split as dt, toLower as te, find as ct, omit as pt, keys as ut, cloneDeep as xt, each as gt, capitalize as ht, reject as mt, nth as Re, startsWith as z, isNumber as yt, parseInt as bt, isNaN as _e, findLast as ft, has as ge, flatten as U, intersection as Ee, isNull as vt } from "lodash";
+import { useTranslation as Fe } from "react-i18next";
+import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as jt, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as wt, ArrowTopRightIcon as Ct, ArrowBottomRightIcon as kt, ArrowBottomLeftIcon as Nt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Tt, AlignRightIcon as Rt, StretchHorizontallyIcon as Vt, FontItalicIcon as Ht, UnderlineIcon as Bt, OverlineIcon as At, LetterCaseUppercaseIcon as Dt, Cross1Icon as $t, InfoCircledIcon as ke, MinusIcon as Pt, BoxIcon as Xe, TriangleDownIcon as It, RowSpacingIcon as Lt, TrashIcon as We, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { T as Ot, a as Mt, b as He, c as Be } from "./tabs-85caa1e8.js";
+import _t from "@rjsf/core";
+import Et from "@rjsf/validator-ajv8";
+import { D as G, E as Ft, d as ze, G as Ue, H as Yt, I as Xt, J as Wt, j as Ne, K as Ge, L as Ke, i as qe, e as Zt, M as Je, f as Ae, N as pe, c as zt, O as Ut, P as Gt } from "./index-370ce00c.js";
+import { getChaiDataProviders as Kt, getBlockComponent as Qe, SingleLineText as qt } from "@chaibuilder/blocks";
+import { EditIcon as Jt, TrashIcon as Qt, Check as er } from "lucide-react";
+import { u as et } from "./useChaiExternalData-192c7896.js";
+import { d as X, e as W, f as Z, B as ue, g as tr } from "./useBuilderProp-81a14920.js";
+import { D as rr, a as sr, b as lr, c as or, e as nr, f as ar, d as ir } from "./dialog-18207bef.js";
+import { P as dr, a as cr, b as pr } from "./popover-f7addcf4.js";
+import { C as ur, b as xr, c as gr, d as hr, e as mr, f as yr, I as br } from "./command-6f260f61.js";
+import { A as tt, a as ie, b as de, c as ce } from "./accordion-c0176dc5.js";
+import { R as fr, I as vr, a as jr, L as wr } from "./link-e3a788f7.js";
+import { useAtom as Cr } from "jotai";
+import kr from "react-autosuggest";
+import Nr from "fuse.js";
+import { A as Sr, C as xe, d as Tr } from "./html-to-json-45e0e3b5.js";
+import { L as Se } from "./label-e770a087.js";
+import { S as Rr } from "./MODIFIERS-2f19c314.js";
+import { S as Vr } from "./scroll-area-83bd9e8f.js";
+import { S as Hr, c as Br, b as Ar, d as Dr, f as H } from "./select-7fddd7c3.js";
 import "@radix-ui/react-tabs";
 import "./utils-ac68b2c8.js";
 import "clsx";
@@ -43,340 +45,405 @@ import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
 import "@radix-ui/react-toast";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-popover";
+import "cmdk";
 import "@radix-ui/react-accordion";
 import "react-icons-picker";
-import "./dialog-3d4e82ed.js";
-import "@radix-ui/react-dialog";
-import "./ImagesPanel-38c44785.js";
+import "./ImagesPanel-3fb8087f.js";
 import "react-quill";
 import "himalaya";
 import "@radix-ui/react-label";
 import "@radix-ui/react-select";
-function gr(r) {
-  const o = [], t = {};
-  function a(l, s) {
-    be(s, (d, i) => {
-      const n = l ? `${l}.${i}` : i, p = me(d) ? "list" : typeof d;
-      o.push(n), t[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !me(d) && a(n, d);
+const $r = $.lazy(() => import("react-json-view"));
+function Pr(t) {
+  const s = [], r = {};
+  function l(o, a) {
+    je(a, (d, i) => {
+      const n = o ? `${o}.${i}` : i, u = ae(d) ? "list" : typeof d;
+      s.push(n), r[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && l(n, d);
     });
   }
-  return a("", at(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
+  return l("", pt(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
 }
-const xr = ({ data: r }) => {
-  if (!r)
+const fe = ({ data: t, fullView: s }) => {
+  if (!t)
     return null;
-  const o = typeof r;
-  return /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: it(o === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, Be = ({
-  type: r,
-  isDisabled: o = !1,
-  placeholder: t,
-  defaultValue: a = "",
-  data: l,
-  onChange: s,
-  dataType: d,
-  appliedBindings: i
-}) => {
-  const [n, p] = k(!1), [c, h] = k(a), { paths: g, pathsType: y } = gr(l), x = r === "PROP" ? Je(l == null ? void 0 : l._type) : {};
-  M(() => {
-    b(c) && s("");
-  }, [c]), M(() => h(a), [a]);
-  const f = () => g.filter((v) => {
-    const C = b(c) || O(ne(v), ne(c));
-    return r === "PATH" ? C && d === u(y, v, "") : C && !O(i, v) && u(x, `props.${fe(Ne(v, "."))}.binding`);
-  }), [$, S] = k(() => f());
-  M(() => S(() => f()), [d]);
-  const j = r === "PATH" && b($) && n && !b(d), I = {
-    autoComplete: "off",
-    autoCorrect: "on",
-    autoCapitalize: "off",
-    spellCheck: !1,
-    placeholder: j ? "No available options" : t,
-    value: c,
-    disabled: o,
-    onFocus: () => p(r === "PATH"),
-    onBlur: () => {
-      p(!1), g.includes(c) ? s(c) : (h(""), s(""));
-    },
-    onChange: (v, { newValue: C }) => h(j ? "" : C),
-    className: `chai-input w-full ${o ? "cursor-not-allowed" : ""} ${j ? "placeholder-red-400" : ""}`
-  }, B = (v) => /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: "rounded-md px-1 py-1.5 flex items-center justify-between space-x-2 font-light relative",
-      "data-suggest": v,
-      children: [
-        /* @__PURE__ */ e.jsx("div", { className: "-mt-1 w-full h-full absolute opacity-0 z-20", children: v }),
-        /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ e.jsx("div", { className: "leading-4 text-xs flex items-center text-gray-800", children: P.Children.toArray(
-            N(Ne(v, "."), (C, _) => /* @__PURE__ */ e.jsxs("span", { className: "flex items-end", children: [
-              _ > 0 && /* @__PURE__ */ e.jsx(Gt, { size: 14, className: "h-full text-gray-400" }),
-              Q(C)
-            ] }))
-          ) }),
-          r === "PATH" && /* @__PURE__ */ e.jsx(xr, { data: u(l, v) })
-        ] }),
-        r === "PROP" && /* @__PURE__ */ e.jsx("div", { className: "bg-purple-100 text-purple-400 text-[9px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(u(y, v, "")) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ e.jsx(
-    Qe,
-    {
-      suggestions: $,
-      onSuggestionsFetchRequested: () => S(() => f()),
-      onSuggestionsClearRequested: () => S([]),
-      onSuggestionSelected: (v) => {
-        if (v.type === "click") {
-          const C = u(v.target, "childNodes[0].data", "");
-          g.includes(C) && s(C);
-        } else
-          s(v.target.value);
-      },
-      getSuggestionValue: (v) => v,
-      renderSuggestion: B,
-      shouldRenderSuggestions: () => !0,
-      inputProps: I,
-      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"
+  const r = typeof t;
+  return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
+    /* @__PURE__ */ e.jsx(Ft, { children: /* @__PURE__ */ e.jsx(
+      $r,
+      {
+        style: { maxHeight: "40vh", overflowY: "auto" },
+        name: "Content",
+        enableClipboard: !1,
+        displayObjectSize: !1,
+        displayDataTypes: !1,
+        src: t,
+        collapsed: !0
       }
-    }
-  );
-}, hr = ({
-  item: r,
+    ) })
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: "text-gray-800/50 text-[12px] leading-4 w-full max-h-36 overflow-x-hidden overflow-y-auto", children: [
+    /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
+    t
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: it(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
+}, De = ({
+  type: t,
+  value: s = "",
+  setValue: r,
+  data: l,
   onChange: o,
-  onRemove: t,
-  selectedBlock: a,
-  dataProvider: l,
-  appliedBindings: s
+  dataType: a,
+  appliedBindings: d
 }) => {
-  const [d, i] = k("string"), n = (p, c) => {
-    if (b(p))
-      return "";
-    {
-      const h = u(c === "PROP" ? a : l, p, "");
-      if (me(h))
-        return "list";
-      const g = typeof h;
-      return g === "string" ? "text" : g === "object" ? "model" : g;
-    }
-  };
-  return M(() => i(() => n(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border border-gray-200 relative rounded-md p-2", children: [
-    !b(d) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-2 top-4 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Q(d) }),
-    /* @__PURE__ */ e.jsx(
-      Be,
+  const { paths: i, pathsType: n } = Pr(l), u = t === "PROP" ? Qe(l == null ? void 0 : l._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (g) => !M(d, g) && p(u, `props.${we(dt(g, "."))}.binding`)
+  ) : i.filter((g) => a === p(n, g, "")), [t, i, d, a, u]);
+  return E(() => {
+    s && o(s);
+  }, [s, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(te(t)) }),
+      /* @__PURE__ */ e.jsxs(dr, { open: c, onOpenChange: m, children: [
+        /* @__PURE__ */ e.jsx(cr, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          ue,
+          {
+            variant: "outline",
+            size: "sm",
+            className: ` ${b(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
+            children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
+                x && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(a) }),
+                s
+              ] }),
+              /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
+            ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              "+ Set ",
+              Y(te(t))
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(pr, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(ur, { children: [
+          /* @__PURE__ */ e.jsx(xr, { placeholder: `Choose ${te(t)}...` }),
+          /* @__PURE__ */ e.jsxs(gr, { children: [
+            /* @__PURE__ */ e.jsx(hr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(mr, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
+              yr,
+              {
+                value: g,
+                className: `cursor-pointer ${x ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
+                onSelect: (f) => {
+                  r(ct(h, (S) => S === f) || null), m(!1);
+                },
+                children: [
+                  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+                    /* @__PURE__ */ e.jsx(er, { className: `w-4 h-4 text-green-500 ${s === g ? "" : "opacity-0"}` }),
+                    g
+                  ] }),
+                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(n, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(fe, { data: p(l, g) }) })
+                ]
+              },
+              g
+            )) })
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    !x && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(fe, { data: p(l, s, ""), fullView: !0 }) })
+  ] });
+}, Ir = ({
+  appliedBindings: t = [],
+  onAddBinding: s,
+  editMode: r,
+  item: l
+}) => {
+  const [o, a] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), n = G(), [u] = et(), x = A(
+    (h, g) => {
+      if (b(h))
+        return "";
       {
-        type: "PROP",
-        isDisabled: !1,
-        placeholder: "Enter prop key",
-        defaultValue: r.key,
-        onChange: (p) => {
-          const c = n(p, "PROP");
-          o({ target: { name: "key", value: p } }), d !== c && o({ target: { name: "value", value: "" } }), i(c);
-        },
-        data: a,
-        dataType: d,
-        appliedBindings: s
+        const f = p(g === "PROP" ? n : u, h, "");
+        if (ae(f))
+          return "list";
+        const S = typeof f;
+        return S === "string" ? "text" : S === "object" ? "model" : S;
       }
-    ),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-start justify-between gap-x-1.5 w-full relative", children: [
+    },
+    [n, u]
+  ), [c, m] = w(r ? x(l.key, "PROP") : "");
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(or, { children: [
+      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(ar, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
-        Be,
+        De,
+        {
+          type: "PROP",
+          isDisabled: !1,
+          placeholder: "Enter prop key",
+          value: o,
+          setValue: a,
+          onChange: (h) => {
+            const g = x(h, "PROP");
+            a(h), c !== g && i(""), m(g);
+          },
+          data: n,
+          dataType: c,
+          appliedBindings: t
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
+      /* @__PURE__ */ e.jsx(
+        De,
         {
           type: "PATH",
-          isDisabled: b(r.key),
+          isDisabled: b(o),
           placeholder: "Enter data path",
-          defaultValue: r.value,
-          onChange: (p) => {
-            const c = n(p, "PATH");
-            o(d !== c ? { target: { name: "value", value: "" } } : { target: { name: "value", value: p } });
+          value: d,
+          setValue: i,
+          onChange: (h) => {
+            const g = x(h, "PATH");
+            i(c === g ? h : "");
           },
-          data: l,
-          dataType: d,
-          appliedBindings: s
+          data: u,
+          dataType: c,
+          appliedBindings: t
         }
-      ),
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
+      ue,
+      {
+        type: "submit",
+        className: "mt-4",
+        disabled: b(o) && b(d),
+        onClick: () => s({ key: o, value: d }),
+        children: "Save"
+      }
+    ) })
+  ] });
+}, rt = ({ children: t, onAddBinding: s, appliedBindings: r, editMode: l = !0, item: o = {} }) => {
+  const [a, d] = w(!1);
+  return /* @__PURE__ */ e.jsxs(rr, { children: [
+    /* @__PURE__ */ e.jsx(sr, { asChild: !0, onClick: () => d(!0), children: t }),
+    a && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
+      Ir,
+      {
+        item: o,
+        editMode: l,
+        appliedBindings: r,
+        onAddBinding: (i) => {
+          s(i), d(!1);
+        }
+      }
+    ) })
+  ] });
+}, Lr = ({
+  item: t,
+  onAddBinding: s,
+  onRemove: r,
+  selectedBlock: l,
+  dataProvider: o,
+  appliedBindings: a
+}) => {
+  const [d, i] = w("string"), n = (u, x) => {
+    if (b(u))
+      return "";
+    {
+      const c = p(x === "PROP" ? l : o, u, "");
+      if (ae(c))
+        return "list";
+      const m = typeof c;
+      return m === "string" ? "text" : m === "object" ? "model" : m;
+    }
+  };
+  return E(() => i(() => n(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
+    /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
+    /* @__PURE__ */ e.jsx(fe, { data: p(o, t.value, "") }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ e.jsx(rt, { editMode: !0, onAddBinding: s, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Jt, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
-        Ut,
+        Qt,
         {
-          onClick: t,
+          onClick: () => r(),
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
         }
       )
-    ] })
+    ] }),
+    !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
-}, mr = ({ bindingData: r, onChange: o }) => {
-  const t = te(), [a] = Kt(), l = Zt(), [s, d] = k(N(r, (g, y) => ({ key: y, value: g })));
-  M(() => {
-    d(N(r, (g, y) => ({ key: y, value: g })));
-  }, [t == null ? void 0 : t._id]);
-  const i = R(() => {
-    if (b(s))
+}, Or = ({ bindingData: t, onChange: s }) => {
+  const r = G(), [l] = et(), o = Kt(), [a, d] = w(
+    C(t, (c, m) => ({ key: m, value: c }))
+  );
+  E(() => {
+    d(C(t, (c, m) => ({ key: m, value: c })));
+  }, [r == null ? void 0 : r._id]);
+  const i = N(() => {
+    if (b(a))
       return !1;
-    const g = he(s);
-    return b(g == null ? void 0 : g.key) || b(g == null ? void 0 : g.value);
-  }, [s]), n = () => {
-    d([...s, { key: "", value: "" }]);
-  }, p = (g) => {
-    const y = Oe(s, (x, f) => g !== f);
-    h([...y]);
-  }, c = (g, y) => {
-    const x = [...s];
-    x[y][g.target.name] = g.target.value, h(x);
-  }, h = L(
-    (g = []) => {
-      if (d(g), b(g)) {
-        o({});
+    const c = ye(a);
+    return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
+  }, [a]), n = (c) => {
+    const m = be(a, (h) => h.key !== c.key);
+    d([...m, c]), x([...m, c]);
+  }, u = (c) => {
+    const m = be(a, (h, g) => c !== g);
+    x([...m]);
+  }, x = A(
+    (c = []) => {
+      if (d(c), b(c)) {
+        s({});
         return;
       }
-      const y = {};
-      be(g, (x) => {
-        !b(x == null ? void 0 : x.key) && !b(x == null ? void 0 : x.value) && Le(y, x.key, x.value);
-      }), o(y);
+      const m = {};
+      je(c, (h) => {
+        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Me(m, h.key, h.value);
+      }), s(m);
     },
-    [t]
+    [r]
   );
-  return b(l) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
+  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    N(s, (g, y) => /* @__PURE__ */ e.jsx(
-      hr,
+    C(a, (c, m) => /* @__PURE__ */ e.jsx(
+      Lr,
       {
-        item: g,
-        onChange: (x) => c(x, y),
-        onRemove: () => p(y),
-        selectedBlock: t,
-        dataProvider: a,
-        appliedBindings: N(s, "key")
+        item: c,
+        onAddBinding: n,
+        onRemove: () => u(m),
+        selectedBlock: r,
+        dataProvider: l,
+        appliedBindings: C(a, "key")
       },
-      g.key
+      c.key
     )),
-    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(W, { className: "w-full", children: /* @__PURE__ */ e.jsx(rt, { appliedBindings: C(a, "key"), onAddBinding: n, children: /* @__PURE__ */ e.jsx(
         "button",
         {
-          onClick: n,
           disabled: i,
-          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${b(s) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30 " : ""} ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : b(s) ? "" : "bg-gray-700/20 text-gray-800 hover:bg-blue-700/30"}`,
+          className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${b(a) ? "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30" : ""} ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : b(a) ? "" : "bg-blue-700/20 text-blue-800  hover:bg-blue-700/30"}`,
           children: "+ Add Data Binding"
         }
-      ) }),
-      i && /* @__PURE__ */ e.jsx(W, { sideOffset: -55, className: "text-[11px]", children: "Complete last added data binding to add more" })
+      ) }) }),
+      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: "Complete last added data binding to add more" })
     ] })
   ] });
-}, yr = mr, br = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), Ae = ({
-  createHistorySnapshot: r,
-  properties: o,
-  formData: t,
-  onChange: a
+}, Mr = Or, _r = () => /* @__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" }), $e = ({
+  createHistorySnapshot: t,
+  properties: s,
+  formData: r,
+  onChange: l
 }) => {
-  const [l] = Mt(), s = { type: "object", properties: {} }, d = {};
-  return Object.keys(o).forEach((i) => {
-    const n = o[i];
-    if (O(["slot", "styles"], n.type))
+  const [o] = Yt(), a = { type: "object", properties: {} }, d = {};
+  return Object.keys(s).forEach((i) => {
+    const n = s[i];
+    if (M(["slot", "styles"], n.type))
       return;
-    const p = u(n, "i18n", !1) ? `${i}-${l}` : i;
-    s.properties[p] = _t(n, l), d[p] = Et(n, l);
+    const u = p(n, "i18n", !1) ? `${i}-${o}` : i;
+    a.properties[u] = Xt(n, o), d[u] = Wt(n, o);
   }), /* @__PURE__ */ e.jsx(
-    Lt,
+    _t,
     {
       widgets: {
-        binding: br,
-        richtext: Jt,
-        icon: Qt,
-        image: er
+        binding: _r,
+        richtext: fr,
+        icon: vr,
+        image: jr
       },
       fields: {
-        link: tr
+        link: wr
       },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !0,
-      validator: Ot,
+      validator: Et,
       uiSchema: d,
-      onBlur: r,
-      schema: s,
-      formData: t,
-      onChange: a
+      onBlur: t,
+      schema: a,
+      formData: r,
+      onChange: l
     }
   );
 };
-function fr() {
-  const r = te(), { createSnapshot: o } = Ze(), t = ze(), a = Je(r._type), l = { ...r }, s = () => o(), d = ({ formData: c }, h) => {
-    if (h) {
-      const g = h.replace("root.", "");
-      t([r._id], { [g]: u(c, g) });
+function Er() {
+  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = Qe(t._type), o = { ...t }, a = () => s(), d = ({ formData: x }, c) => {
+    if (c) {
+      const m = c.replace("root.", "");
+      r([t._id], { [m]: p(x, m) });
     }
   }, i = {
-    _name: zt({
+    _name: qt({
       title: "Name",
-      default: u(r, "_name", r._type)
+      default: p(t, "_name", t._type)
     })
-  }, n = dt(u(l, "_bindings", {})), p = R(() => {
-    const c = ct(u(a, "props", {}));
-    return pt(n, (h) => {
-      delete c[h];
-    }), c;
-  }, [a, n]);
+  }, n = ut(p(o, "_bindings", {})), u = N(() => {
+    const x = xt(p(l, "props", {}));
+    return gt(n, (c) => {
+      delete x[c];
+    }), x;
+  }, [l, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      Ae,
+      $e,
       {
         onChange: d,
-        createHistorySnapshot: s,
-        formData: l,
+        createHistorySnapshot: a,
+        formData: o,
         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.jsxs(ie, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(de, { 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(u(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${b(p(t, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
-        /* @__PURE__ */ e.jsx(de, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          yr,
+        /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
+          Mr,
           {
-            bindingData: u(l, "_bindings", {}),
-            onChange: (c) => {
-              d({ formData: { ...l, _bindings: c } }, "root._bindings");
+            bindingData: p(o, "_bindings", {}),
+            onChange: (x) => {
+              d({ formData: { ...o, _bindings: x } }, "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.jsxs(ie, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(de, { 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: [
+        /* @__PURE__ */ e.jsxs(ce, { className: "pt-4", children: [
           b(n) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: N(n, ut).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(n, ht).join(", ") }),
             " ",
             n.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            Ae,
+            $e,
             {
               onChange: d,
-              createHistorySnapshot: s,
-              formData: l,
-              properties: p
+              createHistorySnapshot: a,
+              formData: o,
+              properties: u
             }
           )
         ] })
@@ -385,60 +452,60 @@ function fr() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const De = new lr(or, {
+const Pe = new Nr(Sr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function vr() {
-  var S;
-  const [r] = je(), o = te(), t = Ue(), a = Ge(), [l] = Ke(), [s, d] = k(""), i = (S = fe(r)) == null ? void 0 : S.prop, n = gt((u(o, i, "").replace(nr, "").split(",").pop() || "").split(" "), b), p = () => {
-    const j = s.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(l, j, !0), d("");
-  }, [c, h] = k([]), g = ({ value: j }) => {
-    const I = j.trim().toLowerCase(), B = I.match(/.+:/g);
-    let v = [];
-    if (B && B.length > 0) {
-      const [C] = B, _ = I.replace(C, "");
-      v = De.search(_).map((m) => ({
-        ...m,
-        item: { ...m.item, name: C + m.item.name }
+function Fr() {
+  var D;
+  const [t] = Ne(), s = G(), r = Ge(), l = Ke(), [o] = qe(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, n = mt((p(s, i, "").replace(Rr, "").split(",").pop() || "").split(" "), b), u = () => {
+    const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    r(o, j, !0), d("");
+  }, [x, c] = w([]), m = ({ value: j }) => {
+    const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
+    let k = [];
+    if (P && P.length > 0) {
+      const [I] = P, F = L.replace(I, "");
+      k = Pe.search(F).map((y) => ({
+        ...y,
+        item: { ...y.item, name: I + y.item.name }
       }));
     } else
-      v = De.search(I);
-    h(N(v, "item"));
-  }, y = () => {
-    h([]);
-  }, x = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), $ = {
+      k = Pe.search(L);
+    c(C(k, "item"));
+  }, h = () => {
+    c([]);
+  }, g = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), S = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: s,
+    value: a,
     onKeyDown: (j) => {
-      j.key === "Enter" && s.trim() !== "" && p();
+      j.key === "Enter" && a.trim() !== "" && u();
     },
-    onChange: (j, { newValue: I }) => d(I),
+    onChange: (j, { newValue: L }) => d(L),
     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 ${c.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 ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
-        /* @__PURE__ */ e.jsx(Ce, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(Se, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Qe,
+            kr,
             {
-              suggestions: c,
-              onSuggestionsFetchRequested: g,
-              onSuggestionsClearRequested: y,
-              getSuggestionValue: x,
+              suggestions: x,
+              onSuggestionsFetchRequested: m,
+              onSuggestionsClearRequested: h,
+              getSuggestionValue: g,
               renderSuggestion: f,
-              inputProps: $,
+              inputProps: S,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -450,20 +517,20 @@ function vr() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            et,
+            ue,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: p,
-              disabled: s.trim() === "",
+              onClick: u,
+              disabled: a.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(ve, {})
+              children: /* @__PURE__ */ e.jsx(Ce, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
           b(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
-          se.Children.toArray(
+          ne.Children.toArray(
             n.map((j) => /* @__PURE__ */ e.jsxs(
               "div",
               {
@@ -471,9 +538,9 @@ function vr() {
                 children: [
                   j,
                   /* @__PURE__ */ e.jsx(
-                    Fe,
+                    Ye,
                     {
-                      onClick: () => a(l, [j]),
+                      onClick: () => l(o, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -487,16 +554,16 @@ function vr() {
     }
   );
 }
-const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   heading: "Flex Child",
   items: [
-    { type: "arbitrary", label: "Basis", units: D, property: "flexBasis" },
+    { type: "arbitrary", label: "Basis", units: B, 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" }
   ]
-}, jr = {
+}, Xr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -507,11 +574,11 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, Cr = [
+}, Wr = [
   {
     heading: "Display",
     items: [
-      { type: "dropdown", label: "Display", property: "display", units: D },
+      { type: "dropdown", label: "Display", property: "display", units: B },
       {
         styleType: "accordion",
         heading: "Flex options",
@@ -562,7 +629,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
         styleType: "accordion",
         heading: "Visibility & Opacity",
         items: [
-          { type: "dropdown", label: "Visibility", property: "visibility", units: D },
+          { type: "dropdown", label: "Visibility", property: "visibility", units: B },
           { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -575,7 +642,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
         styleType: "multiple",
         label: "Margin",
         negative: !0,
-        units: [...D, "auto"],
+        units: [...B, "auto"],
         options: [
           { key: "margin", label: "All" },
           { key: "marginX", label: "Left-Right" },
@@ -612,22 +679,22 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   {
     heading: "Size",
     items: [
-      { type: "arbitrary", label: "Width", units: D.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "Height", units: D.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "Width", units: B.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "Height", units: B.concat("auto"), property: "height" },
       {
         styleType: "accordion",
         heading: "Min width & height",
         items: [
-          { type: "arbitrary", label: "Min Width", units: D.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "Min Height", units: D.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "Min Width", units: B.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "Min Height", units: B.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "Max width & height",
         items: [
-          { type: "arbitrary", label: "Max Width", units: D.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "Max Height", units: D.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "Max Width", units: B.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "Max Height", units: B.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -711,8 +778,8 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
     heading: "Typography",
     items: [
       { type: "dropdown", property: "fontFamily", label: "Font" },
-      { type: "arbitrary", property: "fontSize", label: "Size", units: D },
-      { type: "arbitrary", property: "lineHeight", label: "Height", units: D.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "Size", units: B },
+      { type: "arbitrary", property: "lineHeight", label: "Height", units: B.concat("-") },
       { type: "range", property: "fontWeight", label: "Weight" },
       { type: "color", property: "textColor", label: "Color" },
       {
@@ -909,89 +976,89 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
   },
   {
     heading: "Classes",
-    items: [{ component: vr }]
+    items: [{ component: Fr }]
   }
-], rt = {
+], st = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
-  visible: bt,
-  invisible: Te,
+  visible: jt,
+  invisible: Ve,
   // display
-  hidden: Te,
-  gap: E,
-  gapX: H,
+  hidden: Ve,
+  gap: O,
+  gapX: R,
   gapY: V,
-  spaceX: H,
+  spaceX: R,
   spaceY: V,
-  overscroll: E,
-  overscrollX: H,
+  overscroll: O,
+  overscrollX: R,
   overscrollY: V,
-  overflow: E,
-  overflowX: H,
+  overflow: O,
+  overflowX: R,
   overflowY: V,
-  top: G,
-  right: K,
-  bottom: q,
-  left: J,
-  inset: E,
-  insetX: H,
+  top: q,
+  right: J,
+  bottom: Q,
+  left: ee,
+  inset: O,
+  insetX: R,
   insetY: V,
-  border: E,
-  borderX: H,
+  border: O,
+  borderX: R,
   borderY: V,
-  borderTop: G,
-  borderRight: K,
-  borderBottom: q,
-  borderLeft: J,
-  borderRadius: E,
-  borderRadiusX: H,
+  borderTop: q,
+  borderRight: J,
+  borderBottom: Q,
+  borderLeft: ee,
+  borderRadius: O,
+  borderRadiusX: R,
   borderRadiusY: V,
-  borderRadiusTop: G,
-  borderRadiusRight: K,
-  borderRadiusBottom: q,
-  borderRadiusLeft: J,
-  borderRadiusTopLeft: ft,
-  borderRadiusTopRight: vt,
-  borderRadiusBottomRight: wt,
-  borderRadiusBottomLeft: jt,
-  divideXWidth: H,
+  borderRadiusTop: q,
+  borderRadiusRight: J,
+  borderRadiusBottom: Q,
+  borderRadiusLeft: ee,
+  borderRadiusTopLeft: wt,
+  borderRadiusTopRight: Ct,
+  borderRadiusBottomRight: kt,
+  borderRadiusBottomLeft: Nt,
+  divideXWidth: R,
   divideYWidth: V,
-  scale: E,
-  scaleX: H,
+  scale: O,
+  scaleX: R,
   scaleY: V,
-  skewX: H,
+  skewX: R,
   skewY: V,
-  translateX: H,
+  translateX: R,
   translateY: V,
   // padding
-  padding: E,
-  paddingX: H,
+  padding: O,
+  paddingX: R,
   paddingY: V,
-  paddingTop: G,
-  paddingRight: K,
-  paddingBottom: q,
-  paddingLeft: J,
+  paddingTop: q,
+  paddingRight: J,
+  paddingBottom: Q,
+  paddingLeft: ee,
   // margin
-  margin: E,
-  marginX: H,
+  margin: O,
+  marginX: R,
   marginY: V,
-  marginTop: G,
-  marginRight: K,
-  marginBottom: q,
-  marginLeft: J,
+  marginTop: q,
+  marginRight: J,
+  marginBottom: Q,
+  marginLeft: ee,
   // text-align
-  textLeft: Ct,
-  textCenter: kt,
-  textRight: Nt,
-  textJustify: St,
+  textLeft: St,
+  textCenter: Tt,
+  textRight: Rt,
+  textJustify: Vt,
   // font style
-  italic: Tt,
+  italic: Ht,
   // "not-italic": "",
   // decoration
-  underline: Rt,
-  overline: Ht,
+  underline: Bt,
+  overline: At,
   // transform
-  uppercase: Vt,
+  uppercase: Dt,
   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",
@@ -1032,7 +1099,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
       }
     )
   ] }),
-  "float-none": Fe,
+  "float-none": Ye,
   // 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(
@@ -1104,96 +1171,96 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], wr = {
       }
     )
   ] }),
-  static: Bt
-}, re = Pe({ canReset: !1, canChange: !0 }), kr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  static: $t
+}, se = Oe({ canReset: !1, canChange: !0 }), Zr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(re.Provider, { value: { canReset: o, canChange: t }, children: r })
-), lt = ({ label: r, property: o, onChange: t }) => {
-  const a = R(() => u(pe, `${o}.classes`, [""]), [o]), l = le(o), s = R(() => u(l, "cls", ""), [l]), { canChange: d } = ee(re), i = /\[.*\]/g.test(s);
-  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(ar, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
-    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(we, {}) }) }),
-      /* @__PURE__ */ e.jsx(W, { children: "Current value is using a Tailwind arbitrary value." })
+  /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
+), lt = ({ label: t, property: s, onChange: r }) => {
+  const l = N(() => p(xe, `${s}.classes`, [""]), [s]), o = le(s), a = N(() => p(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
+  return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e.jsx(br, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    ye,
+    ve,
     {
-      rounded: r,
-      onChange: (n) => t(n, o),
-      selected: s,
-      options: a,
+      rounded: t,
+      onChange: (n) => r(n, s),
+      selected: a,
+      options: l,
       disabled: !d
     }
   ) });
 };
-function ye({ selected: r, onChange: o, rounded: t = !1, options: a, disabled: l = !1 }) {
-  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = Ze();
+function ve({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
+  const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !a.length || l,
-      className: `${t ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (n) => o(n.target.value),
+      disabled: !l.length || o,
+      className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
+      onChange: (n) => s(n.target.value),
       onKeyDown: (n) => {
         n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
       },
-      value: s,
+      value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
-          a.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
+        $.Children.toArray(
+          l.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
-const Nr = ({ property: r, onChange: o }) => {
-  const { canReset: t, canChange: a } = ee(re), l = le(r), s = R(() => u(l, "cls", ""), [l]), d = R(() => u(pe, `${r}.classes`, [""]), [r]), i = d.indexOf(s) > -1 ? d.indexOf(s) : 0, n = /\[.*\]/g.test(s);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const zr = ({ property: t, onChange: s }) => {
+  const { canReset: r, canChange: l } = re(se), o = le(t), a = N(() => p(o, "cls", ""), [o]), d = N(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!t || i - 1 < 0),
-        onClick: () => o(Se(d, i - 1), r),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(At, { className: !a && (!t || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        disabled: !l && (!r || i - 1 < 0),
+        onClick: () => s(Re(d, i - 1), t),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(Pt, { className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: r, onChange: o }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(lt, { label: !1, property: t, 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: !a && (!t || i + 1 >= d.length),
-        onClick: () => o(Se(d, i + 1), r),
+        disabled: !l && (!r || i + 1 >= d.length),
+        onClick: () => s(Re(d, i + 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          ve,
+          Ce,
           {
-            className: !a && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+            className: !l && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, Sr = ({ property: r, onChange: o }) => {
-  const t = R(() => u(pe, `${r}.classes`, [""]), [r]), { canChange: a } = ee(re), l = le(r), s = R(() => u(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: N(t, (d) => /* @__PURE__ */ e.jsxs(Y, { children: [
-    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, Ur = ({ property: t, onChange: s }) => {
+  const r = N(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = N(() => p(o, "cls", ""), [o]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(X, { children: [
+    /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
-        disabled: !a,
-        onClick: () => o(d, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${s === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(u(rt, d, Ye))
+        disabled: !l,
+        onClick: () => s(d, t),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(p(st, d, Xe))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(W, { children: Q(ne(d)) })
+    /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
   ] })) });
-}, Tr = {
+}, Gr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1205,39 +1272,39 @@ const Nr = ({ property: r, onChange: o }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Rr = ({ property: r, onChange: o }) => {
-  const t = le(r), a = R(() => u(t, "cls", ""), [t]), { canChange: l } = ee(re), [s, d] = k([]), [i, n] = k({ color: "", shade: "" }), p = a.split("-"), c = u(p, "1", ""), h = u(p, "2", ""), g = L(
+}, Kr = ({ property: t, onChange: s }) => {
+  const r = le(t), l = N(() => p(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), u = l.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), n({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
+    (g) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), n({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: g, shade: f.shade ? f.shade : "500" })));
     },
     [d, n]
   );
-  M(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(c))
+  E(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(x))
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [c]);
-  const y = L(
+  }, [x]);
+  const h = A(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      n({ color: c, shade: x });
+    (g) => {
+      n({ color: x, shade: g });
     },
-    [c]
+    [x]
   );
-  return M(() => {
+  return E(() => {
     n({ color: "", shade: "" });
-  }, [t]), M(() => {
-    const f = `${u(Tr, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(u(pe, `${r}.regExp`, ""))) && o(f, r);
-  }, [i, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+  }, [r]), E(() => {
+    const f = `${p(Gr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(p(xe, `${t}.regExp`, ""))) && s(f, t);
+  }, [i, s, t]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      ye,
+      ve,
       {
-        disabled: !l,
+        disabled: !o,
         rounded: !0,
-        selected: c,
-        onChange: g,
+        selected: x,
+        onChange: m,
         options: [
           "current",
           "transparent",
@@ -1270,355 +1337,355 @@ const Nr = ({ property: r, onChange: o }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ye, { rounded: !0, selected: h, disabled: !c || !l, onChange: y, options: s }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ve, { rounded: !0, selected: c, disabled: !x || !o, onChange: h, options: a }) })
   ] });
-}, $e = (r, o) => {
-  r = r.toLowerCase();
-  let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && o.includes(t))
-    return { value: "", unit: t };
-  const a = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(a, "");
-  const l = r.match(a), s = l && l.length > 1, d = !b(t) && Number.isNaN(Number(t));
-  return s || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
-}, Hr = (r) => {
-  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
-  if (["auto", "none"].includes(t))
-    return { value: "", unit: t };
-  if (t === "px")
+}, Ie = (t, s) => {
+  t = t.toLowerCase();
+  let r = t.trim().replace(/ |\+/g, "");
+  if ((r === "auto" || r === "none") && s.includes(r))
+    return { value: "", unit: r };
+  const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
+  r = r.replace(l, "");
+  const o = t.match(l), a = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  return a || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
+}, qr = (t) => {
+  const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
+  if (["auto", "none"].includes(r))
+    return { value: "", unit: r };
+  if (r === "px")
     return { value: "1", unit: "px" };
-  if (t === "screen")
-    return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
-  if (t === "full")
+  if (r === "screen")
+    return { value: "100", unit: t.indexOf("w-") !== -1 ? "vw" : "vh" };
+  if (r === "full")
     return { value: "100", unit: "%" };
-  if (O(r, "skew-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (O(r, "rotate-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (O(r, "opacity-"))
-    return { value: `${t / 100}`, unit: "-" };
-  if (O(r, "duration-") || O(r, "delay-"))
-    return { value: `${t}`, unit: "ms" };
-  if (O(r, "translate-") && !t.includes("/"))
-    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
-  if (O(r, "scale-"))
-    return { value: `${o}${`${t / 100}`}`, unit: "-" };
-  if (Z(r, "border")) {
-    const a = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (a)
-      return { value: a[0].split("-").pop(), unit: "px" };
-    if (r.match(/border-?(x|y|t|r|b|l)?/g))
+  if (M(t, "skew-"))
+    return { value: `${s}${r}`, unit: "deg" };
+  if (M(t, "rotate-"))
+    return { value: `${s}${r}`, unit: "deg" };
+  if (M(t, "opacity-"))
+    return { value: `${r / 100}`, unit: "-" };
+  if (M(t, "duration-") || M(t, "delay-"))
+    return { value: `${r}`, unit: "ms" };
+  if (M(t, "translate-") && !r.includes("/"))
+    return { value: `${s}${`${r / 4}`}`, unit: "rem" };
+  if (M(t, "scale-"))
+    return { value: `${s}${`${r / 100}`}`, unit: "-" };
+  if (z(t, "border")) {
+    const l = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (l)
+      return { value: l[0].split("-").pop(), unit: "px" };
+    if (t.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (Z(r, "max-w-")) {
-    if (r === "max-w-screen-sm")
+  if (z(t, "max-w-")) {
+    if (t === "max-w-screen-sm")
       return { value: "640", unit: "px" };
-    if (r === "max-w-screen-md")
+    if (t === "max-w-screen-md")
       return { value: "768", unit: "px" };
-    if (r === "max-w-screen-lg")
+    if (t === "max-w-screen-lg")
       return { value: "1024", unit: "px" };
-    if (r === "max-w-screen-xl")
+    if (t === "max-w-screen-xl")
       return { value: "1280", unit: "px" };
-    if (r === "max-w-screen-2xl")
+    if (t === "max-w-screen-2xl")
       return { value: "1536", unit: "px" };
-    if (t === "xs")
+    if (r === "xs")
       return { value: "320", unit: "px" };
-    if (t === "sm")
+    if (r === "sm")
       return { value: "384", unit: "px" };
-    if (t === "md")
+    if (r === "md")
       return { value: "448", unit: "px" };
-    if (t === "lg")
+    if (r === "lg")
       return { value: "512", unit: "px" };
-    if (t === "xl")
+    if (r === "xl")
       return { value: "576", unit: "px" };
-    if (t === "2xl")
+    if (r === "2xl")
       return { value: "672", unit: "px" };
-    if (t === "3xl")
+    if (r === "3xl")
       return { value: "768", unit: "px" };
-    if (t === "4xl")
+    if (r === "4xl")
       return { value: "896", unit: "px" };
-    if (t === "5xl")
+    if (r === "5xl")
       return { value: "1024", unit: "px" };
-    if (t === "6xl")
+    if (r === "6xl")
       return { value: "1152", unit: "px" };
-    if (t === "7xl")
+    if (r === "7xl")
       return { value: "1280", unit: "px" };
-    if (t === "prose")
+    if (r === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (Z(r, "text-")) {
-    if (t === "xs")
+  if (z(t, "text-")) {
+    if (r === "xs")
       return { value: "12", unit: "px" };
-    if (t === "sm")
+    if (r === "sm")
       return { value: "14", unit: "px" };
-    if (t === "base")
+    if (r === "base")
       return { value: "16", unit: "px" };
-    if (t === "lg")
+    if (r === "lg")
       return { value: "18", unit: "px" };
-    if (t === "xl")
+    if (r === "xl")
       return { value: "20", unit: "px" };
-    if (t === "2xl")
+    if (r === "2xl")
       return { value: "24", unit: "px" };
-    if (t === "3xl")
+    if (r === "3xl")
       return { value: "30", unit: "px" };
-    if (t === "4xl")
+    if (r === "4xl")
       return { value: "36", unit: "px" };
-    if (t === "5xl")
+    if (r === "5xl")
       return { value: "48", unit: "px" };
-    if (t === "6xl")
+    if (r === "6xl")
       return { value: "60", unit: "px" };
-    if (t === "7xl")
+    if (r === "7xl")
       return { value: "72", unit: "px" };
-    if (t === "8xl")
+    if (r === "8xl")
       return { value: "96", unit: "px" };
-    if (t === "9xl")
+    if (r === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (Z(r, "leading-")) {
-    if (t === "none")
+  if (z(t, "leading-")) {
+    if (r === "none")
       return { value: "1", unit: "-" };
-    if (t === "tight")
+    if (r === "tight")
       return { value: "1.25", unit: "-" };
-    if (t === "snug")
+    if (r === "snug")
       return { value: "1.375", unit: "-" };
-    if (t === "normal")
+    if (r === "normal")
       return { value: "1.5", unit: "-" };
-    if (t === "relaxed")
+    if (r === "relaxed")
       return { value: "1.625", unit: "-" };
-    if (t === "loose")
+    if (r === "loose")
       return { value: "2", unit: "-" };
   }
-  if (Z(r, "tracking-")) {
-    if (t === "tighter")
+  if (z(t, "tracking-")) {
+    if (r === "tighter")
       return { value: "-0.05", unit: "em" };
-    if (t === "tight")
+    if (r === "tight")
       return { value: "-0.025", unit: "em" };
-    if (t === "normal")
+    if (r === "normal")
       return { value: "0", unit: "em" };
-    if (t === "wide")
+    if (r === "wide")
       return { value: "0.025", unit: "em" };
-    if (t === "wider")
+    if (r === "wider")
       return { value: "0.05", unit: "em" };
-    if (t === "widest")
+    if (r === "widest")
       return { value: "0.1", unit: "em" };
   }
-  if (["max", "min", "fit"].includes(t))
-    return { value: r, unit: "class" };
-  if (t.includes("/")) {
-    const [a, l] = N(t.split("/"), (s) => parseInt(s, 10));
-    return { value: o + (a / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+  if (["max", "min", "fit"].includes(r))
+    return { value: t, unit: "class" };
+  if (r.includes("/")) {
+    const [l, o] = C(r.split("/"), (a) => parseInt(a, 10));
+    return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return xt(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-}, Vr = (r) => {
-  if (b(r))
+  return yt(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
+}, Jr = (t) => {
+  if (b(t))
     return { value: "", unit: "" };
-  const o = r.match(/\[.*\]/g);
-  if (o === null)
-    return Br(r);
-  const t = u(o, "0", "").replace(/\[|\]/g, ""), a = r.startsWith("-") ? "-" : "", l = fe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${a}${l}`, unit: t.replace(l, "") };
-}, Br = (r) => b(r) ? { value: "", unit: "" } : Hr(r), ot = P.createContext({
+  const s = t.match(/\[.*\]/g);
+  if (s === null)
+    return Qr(t);
+  const r = p(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = we(r.match(/\d+.\d+|\d+/g));
+  return { value: `${l}${o}`, unit: r.replace(o, "") };
+}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), ot = $.createContext({
   setDragData: () => {
   }
-}), Ar = ({
-  unit: r,
-  currentValue: o,
-  onDrag: t,
-  onDragEnd: a,
-  onDragStart: l,
-  negative: s,
+}), es = ({
+  unit: t,
+  currentValue: s,
+  onDrag: r,
+  onDragEnd: l,
+  onDragStart: o,
+  negative: a,
   cssProperty: d
 }) => {
-  const { setDragData: i } = ee(ot);
+  const { setDragData: i } = re(ot);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
       onMouseDown: (n) => {
-        const p = {
-          onDrag: t,
-          onDragEnd: a,
+        const u = {
+          onDrag: r,
+          onDragEnd: l,
           dragging: !0,
           dragStartY: n.pageY,
-          dragStartValue: `${o}`,
-          dragUnit: r,
-          negative: s,
+          dragStartValue: `${s}`,
+          dragUnit: t,
+          negative: a,
           cssProperty: d
         };
-        l(p), i(p);
+        o(u), i(u);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx($t, {})
+      children: /* @__PURE__ */ e.jsx(Lt, {})
     }
   );
-}, Dr = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((a) => /* @__PURE__ */ e.jsx(
-  et,
+}, ts = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((l) => /* @__PURE__ */ e.jsx(
+  ue,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: o === a ? "primary" : void 0,
+    color: s === l ? "primary" : void 0,
     size: "sm",
-    onClick: (l) => {
-      l.stopPropagation(), r(a);
+    onClick: (o) => {
+      o.stopPropagation(), t(l);
     },
-    children: a
+    children: l
   },
-  a
-)) }), $r = (r) => {
-  const [o, t] = k(!1), [a, l] = k(""), { currentClass: s, onChange: d, classPrefix: i, cssProperty: n, units: p, negative: c } = r, [h, g] = k(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [y, x] = k(!1), [f, $] = k(""), [S, j] = k(!1), [I, B] = k(!1);
-  M(() => {
-    const { value: m, unit: w } = Vr(s);
-    if (w === "") {
-      l(m), g(n != null && n.toLowerCase().includes("width") ? "%" : p[0]);
+  l
+)) }), rs = (t) => {
+  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: u, negative: x } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, S] = w(""), [D, j] = w(!1), [L, P] = w(!1);
+  E(() => {
+    const { value: y, unit: v } = Jr(a);
+    if (v === "") {
+      o(y), m(n != null && n.toLowerCase().includes("width") ? "%" : u[0]);
       return;
     }
-    g(w), l(w === "class" || b(m) ? "" : m);
-  }, [s, n, p]);
-  const v = xe(
-    (m) => {
-      d(m);
+    m(v), o(v === "class" || b(y) ? "" : y);
+  }, [a, n, u]);
+  const k = me(
+    (y) => {
+      d(y);
     },
     [d],
     200
-  ), C = xe(
-    (m) => {
-      d(m, !1);
+  ), I = me(
+    (y) => {
+      d(y, !1);
     },
     [d],
     200
-  ), _ = L(
-    (m = !1) => {
-      const w = $e(`${a}`, p);
-      if (u(w, "error", !1)) {
-        x(!0);
+  ), F = A(
+    (y = !1) => {
+      const v = Ie(`${l}`, u);
+      if (p(v, "error", !1)) {
+        g(!0);
         return;
       }
-      const T = u(w, "unit") !== "" ? u(w, "unit") : h;
+      const T = p(v, "unit") !== "" ? p(v, "unit") : c;
       if (T === "auto" || T === "none") {
-        v(`${i}${T}`);
+        k(`${i}${T}`);
         return;
       }
-      if (u(w, "value") === "")
+      if (p(v, "value") === "")
         return;
-      const U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      m ? C(U) : v(U);
+      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      y ? I(K) : k(K);
     },
-    [v, C, a, h, i, p]
-  ), oe = L(
-    (m) => {
-      const w = $e(`${a}`, p);
-      if (u(w, "error", !1)) {
-        x(!0);
+    [k, I, l, c, i, u]
+  ), oe = A(
+    (y) => {
+      const v = Ie(`${l}`, u);
+      if (p(v, "error", !1)) {
+        g(!0);
         return;
       }
-      if (m === "auto" || m === "none") {
-        v(`${i}${m}`);
+      if (y === "auto" || y === "none") {
+        k(`${i}${y}`);
         return;
       }
-      if (u(w, "value") === "")
+      if (p(v, "value") === "")
         return;
-      const T = u(w, "unit") !== "" ? u(w, "unit") : m, U = `${u(w, "value", "").startsWith("-") ? "-" : ""}${i}[${u(w, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      v(U);
+      const T = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      k(K);
     },
-    [v, a, i, p]
+    [k, l, i, u]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: s }),
-    /* @__PURE__ */ e.jsxs(Y, { children: [
-      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(we, {}) }) }),
-      /* @__PURE__ */ e.jsx(W, { children: "Current value is using a Tailwind preset class." })
+  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(W, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(ke, {}) }) }),
+      /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(c) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: h === "class",
-          onKeyPress: (m) => {
-            m.key === "Enter" && _();
+          readOnly: c === "class",
+          onKeyPress: (y) => {
+            y.key === "Enter" && F();
           },
-          onKeyDown: (m) => {
-            if (m.keyCode !== 38 && m.keyCode !== 40)
+          onKeyDown: (y) => {
+            if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
-            m.preventDefault(), B(!0);
-            const w = ht(m.target.value);
-            let T = Me(w) ? 0 : w;
-            m.keyCode === 38 && (T += 1), m.keyCode === 40 && (T -= 1);
-            const F = `${T}`, nt = `${F.startsWith("-") ? "-" : ""}${i}[${F.replace("-", "")}${h === "-" ? "" : h}]`;
-            C(nt);
+            y.preventDefault(), P(!0);
+            const v = bt(y.target.value);
+            let T = _e(v) ? 0 : v;
+            y.keyCode === 38 && (T += 1), y.keyCode === 40 && (T -= 1);
+            const _ = `${T}`, at = `${_.startsWith("-") ? "-" : ""}${i}[${_.replace("-", "")}${c === "-" ? "" : c}]`;
+            I(at);
           },
-          onKeyUp: (m) => {
-            I && (m.preventDefault(), B(!1));
+          onKeyUp: (y) => {
+            L && (y.preventDefault(), P(!1));
           },
-          onBlur: () => _(),
-          onChange: (m) => {
-            x(!1), l(m.target.value);
+          onBlur: () => F(),
+          onChange: (y) => {
+            g(!1), o(y.target.value);
           },
-          onClick: (m) => {
-            var w;
-            (w = m == null ? void 0 : m.target) == null || w.select(), t(!1);
+          onClick: (y) => {
+            var v;
+            (v = y == null ? void 0 : y.target) == null || v.select(), r(!1);
           },
-          value: S ? f : a,
+          value: D ? f : l,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
-            y ? "border-red-500 text-red-500" : "border-foreground/20"
+            h ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(Y, { open: o, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(X, { open: s, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(W, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!o),
+            onClick: () => r(!s),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Dt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
+              u.length > 1 ? /* @__PURE__ */ e.jsx(It, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(qt, { children: /* @__PURE__ */ e.jsx(W, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          Dr,
+        /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ts,
           {
-            units: p,
-            current: h,
-            onSelect: (m) => {
-              t(!1), g(m), oe(m);
+            units: u,
+            current: c,
+            onSelect: (y) => {
+              r(!1), m(y), oe(y);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || S ? null : /* @__PURE__ */ e.jsx(
-      Ar,
+    ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
+      es,
       {
         onDragStart: () => j(!0),
-        onDragEnd: (m) => {
-          if ($(() => ""), j(!1), b(m))
+        onDragEnd: (y) => {
+          if (S(() => ""), j(!1), b(y))
             return;
-          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
-          v(F);
+          const v = `${y}`, _ = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
+          k(_);
         },
-        onDrag: (m) => {
-          if (b(m))
+        onDrag: (y) => {
+          if (b(y))
             return;
-          $(m);
-          const w = `${m}`, F = `${w.startsWith("-") ? "-" : ""}${i}[${w.replace("-", "")}${h === "-" ? "" : h}]`;
-          C(F);
+          S(y);
+          const v = `${y}`, _ = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
+          I(_);
         },
-        currentValue: a,
-        unit: h,
-        negative: c,
+        currentValue: l,
+        unit: c,
+        negative: x,
         cssProperty: n
       }
     )
   ] }) }) });
-}, le = (r) => {
-  const o = ce();
-  return mt(o, { property: r });
-}, Ir = (r, o) => {
-  const t = {
+}, le = (t) => {
+  const s = pe();
+  return ft(s, { property: t });
+}, ss = (t, s) => {
+  const r = {
     xs: 0,
     sm: 1,
     md: 2,
@@ -1626,8 +1693,8 @@ const Nr = ({ property: r, onChange: o }) => {
     xl: 4,
     "2xl": 5
   };
-  return t[u(r, "mq", "xs")] <= t[o];
-}, Pr = {
+  return r[p(t, "mq", "xs")] <= r[s];
+}, ls = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1693,31 +1760,31 @@ const Nr = ({ property: r, onChange: o }) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Ie = {
+}, Le = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Lr = (r) => `${r.toUpperCase()} ${Ie[r] ? `(${Ie[r]} & up)` : ""}`, ke = (r) => {
-  const { type: o = "icons", label: t, property: a, onEmitChange: l = () => {
-  }, units: s, negative: d = !1 } = r, [i] = Ft(), [n] = qe(), [, p] = Ve(), c = le(a), h = Ue(), g = Ge(), [y] = Ke(), x = R(() => u(c, "fullCls", ""), [c]), f = L(
-    (v, C = !0) => {
-      const _ = { dark: i, mq: p, mod: n, cls: v, property: a, fullCls: "" };
-      (i || n !== "") && (_.mq = "xs");
-      const oe = sr(_);
-      h(y, [oe], C);
+}, os = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Te = (t) => {
+  const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
+  }, units: a, negative: d = !1 } = t, [i] = Zt(), [n] = Je(), [, u] = Ae(), x = le(l), c = Ge(), m = Ke(), [h] = qe(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
+    (k, I = !0) => {
+      const F = { dark: i, mq: u, mod: n, cls: k, property: l, fullCls: "" };
+      (i || n !== "") && (F.mq = "xs");
+      const oe = Tr(F);
+      c(h, [oe], I);
     },
-    [y, i, p, n, a, h]
-  ), $ = L(() => {
-    g(y, [x]);
-  }, [y, x, g]), S = R(() => Ir(c, p), [c, p]);
-  M(() => {
-    l(S, c);
-  }, [S, l, c]);
-  const [, , j] = Ve(), I = L(
-    (v) => {
+    [h, i, u, n, l, c]
+  ), S = A(() => {
+    m(h, [g]);
+  }, [h, g, m]), D = N(() => ss(x, u), [x, u]);
+  E(() => {
+    o(D, x);
+  }, [D, o, x]);
+  const [, , j] = Ae(), L = A(
+    (k) => {
       j({
         xs: 400,
         sm: 640,
@@ -1725,55 +1792,55 @@ const Nr = ({ property: r, onChange: o }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[v]);
+      }[k]);
     },
     [j]
-  ), B = u(c, "dark", null) === i && u(c, "mod", null) === n && u(c, "mq", null) === p;
-  return /* @__PURE__ */ e.jsx(kr, { canChange: S, canReset: c && B, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${c && !B ? "text-foreground" : ""}`, children: t }) }),
+  ), P = p(x, "dark", null) === i && p(x, "mod", null) === n && p(x, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && P, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        o === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          $r,
+        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          rs,
           {
-            currentClass: u(c, "cls", ""),
-            classPrefix: u(Pr, a, ""),
-            units: s || [],
+            currentClass: p(x, "cls", ""),
+            classPrefix: p(ls, l, ""),
+            units: a || [],
             onChange: f,
             negative: d,
-            cssProperty: a
+            cssProperty: l
           }
         ) : null,
-        o === "icons" && /* @__PURE__ */ e.jsx(Sr, { property: a, onChange: f }),
-        o === "range" && /* @__PURE__ */ e.jsx(Nr, { property: a, onChange: f }),
-        o === "color" && /* @__PURE__ */ e.jsx(Rr, { property: a, onChange: f }),
-        o === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: t, property: a, onChange: f })
+        s === "icons" && /* @__PURE__ */ e.jsx(Ur, { property: l, onChange: f }),
+        s === "range" && /* @__PURE__ */ e.jsx(zr, { property: l, onChange: f }),
+        s === "color" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: f }),
+        s === "dropdown" && /* @__PURE__ */ e.jsx(lt, { label: r, property: l, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => $(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Xe, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && c ? /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(We, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(W, { 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(we, {})
+            children: /* @__PURE__ */ e.jsx(ke, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(W, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold ", children: [
-            Lr(u(c, "mq")),
-            i && !c.dark ? "(Light mode)" : ""
+            os(p(x, "mq")),
+            i && !x.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => I(u(c, "mq")),
+              onClick: () => L(p(x, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                u(c, "mq").toUpperCase()
+                p(x, "mq").toUpperCase()
               ]
             }
           )
@@ -1781,48 +1848,48 @@ const Nr = ({ property: r, onChange: o }) => {
       ] }) : null })
     ] })
   ] }) });
-}, Or = ["px", "%", "em", "rem", "ch", "vh", "vw"], st = ({
-  label: r,
-  options: o,
-  borderB: t = !1,
-  borderT: a = !1,
-  type: l = "arbitrary",
-  units: s = Or,
+}, ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], nt = ({
+  label: t,
+  options: s,
+  borderB: r = !1,
+  borderT: l = !1,
+  type: o = "arbitrary",
+  units: a = ns,
   negative: d = !1
 }) => {
-  const [i, n] = k(o[0].key), p = ce(), c = L((h) => N(p, "property").includes(h), [p]);
+  const [i, n] = w(s[0].key), u = pe(), x = A((c) => C(u, "property").includes(c), [u]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${a ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${l ? "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: P.Children.toArray(
-            o.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(Y, { children: [
-              /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
+          /* @__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(W, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => n(g),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => n(m),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    P.createElement("div", {
-                      className: c(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    $.createElement("div", {
+                      className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(u(rt, g, Ye), { className: "text-inherit w-3 h-3" })
+                    $.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(W, { children: Q(ne(h)) })
+              /* @__PURE__ */ e.jsx(Z, { children: Y(te(c)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          ke,
+          Te,
           {
-            type: l,
-            units: [...s],
+            type: o,
+            units: [...a],
             label: "",
             property: i,
             negative: d
@@ -1831,74 +1898,74 @@ const Nr = ({ property: r, onChange: o }) => {
       ]
     }
   );
-}, Mr = ({ heading: r, items: o }) => {
-  const t = ce(), a = R(() => {
-    const l = (i) => z(
-      i.map((n) => n.styleType === "multiple" ? N(n.options, "key") : n.property)
-    ), s = z(
-      o.map((i) => i.styleType === "accordion" ? l(i.items) : i.styleType === "multiple" ? N(i.options, "key") : i.property)
-    ), d = N(t, "property");
-    return _e(s, d).length > 0;
-  }, [t, o]);
+}, as = ({ heading: t, items: s }) => {
+  const r = pe(), l = N(() => {
+    const o = (i) => U(
+      i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
+    ), a = U(
+      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+    ), d = C(r, "property");
+    return Ee(a, d).length > 0;
+  }, [r, 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,
-      a ? /* @__PURE__ */ e.jsx(
+      t,
+      l ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${a ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((l) => l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...l }, l.label) : /* @__PURE__ */ e.jsx(ke, { ...l }, l.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Te, { ...o }, o.label)) })
   ] });
-}, _r = Pe({}), ge = ({ section: r }) => {
-  const o = ce(), t = L(
-    (s = []) => {
+}, is = Oe({}), he = ({ section: t }) => {
+  const s = pe(), r = A(
+    (a = []) => {
       const d = {};
-      for (let n = 0; n < o.length; n++)
-        d[o[n].property] = o[n].cls;
+      for (let n = 0; n < s.length; n++)
+        d[s[n].property] = s[n].cls;
       let i = !0;
-      for (const n in s)
-        if (!ue(d, n) || d[n] !== s[n]) {
+      for (const n in a)
+        if (!ge(d, n) || d[n] !== a[n]) {
           i = !1;
           break;
         }
       return i;
     },
-    [o]
-  ), a = R(() => {
-    if (o.length > 0 && r.heading === "Classes")
+    [s]
+  ), l = N(() => {
+    if (s.length > 0 && t.heading === "Classes")
       return !0;
-    const s = (n) => z(
-      n.map((p) => p.styleType === "multiple" ? z(N(p.options, "key")) : p.property)
-    ), d = z(
-      r.items.map((n) => n.styleType === "accordion" ? s(n.items) : n.styleType === "multiple" ? z(N(n.options, "key")) : n.property)
-    ), i = N(o, "property");
-    return _e(d, i).length > 0;
-  }, [o, r.heading, r.items]), l = R(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(_r.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ie, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${a ? "bg-blue-500" : "bg-gray-300"}` }),
-      r.heading
+    const a = (n) => U(
+      n.map((u) => u.styleType === "multiple" ? U(C(u.options, "key")) : u.property)
+    ), d = U(
+      t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
+    ), i = C(s, "property");
+    return Ee(d, i).length > 0;
+  }, [s, t.heading, t.items]), o = N(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(is.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+    /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+      t.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(de, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      r.items.map((s) => ue(s, "component") ? P.createElement(s.component, { key: s.label }) : ue(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(st, { ...s }, s.label) : s.styleType === "accordion" && t(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Mr, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(ke, { ...s }, s.label))
+    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      t.items.map((a) => ge(a, "component") ? $.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(as, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Te, { ...a }, a.label))
     ) })
   ] }) });
-}, Er = ({
-  item: r,
-  index: o,
-  canDelete: t,
-  onChange: a,
-  onRemove: l
-}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${t ? "border-b" : ""}`, children: [
+}, ds = ({
+  item: t,
+  index: s,
+  canDelete: r,
+  onChange: l,
+  onRemove: o
+}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (s) => a(s, o),
-      value: r.key,
+      onChange: (a) => l(a, s),
+      value: t.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
       autoComplete: "off",
@@ -1910,8 +1977,8 @@ const Nr = ({ property: r, onChange: o }) => {
       "input",
       {
         name: "value",
-        onChange: (s) => b(r.key) ? {} : a(s, o),
-        value: r.value,
+        onChange: (a) => b(t.key) ? {} : l(a, s),
+        value: t.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
         autoComplete: "off",
@@ -1919,76 +1986,76 @@ const Nr = ({ property: r, onChange: o }) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Xe,
+      We,
       {
-        onClick: l,
+        onClick: o,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), Fr = ({ section: r }) => {
-  var g;
-  const { setSyncState: o } = Yt(), t = te(), [a, l] = k([]), [s] = je(), d = ze(), i = `${u(s, "0.prop")}_attrs`;
-  se.useEffect(() => {
-    const y = N(u(t, i), (x, f) => ({ key: f, value: x }));
-    b(y) ? l([]) : l(y);
-  }, [u(t, i)]);
-  const n = () => l([...a, { key: "", value: "" }]), p = (y) => {
-    const x = Oe(a, (f, $) => y !== $);
-    h(x);
-  }, c = (y, x) => {
-    const f = [...a];
-    f[x][y.target.name] = y.target.value, h(f);
-  }, h = se.useCallback(
-    (y = []) => {
-      const x = {};
-      be(y, (f) => {
-        b(f.key) || Le(x, f.key, f.value);
-      }), d([u(t, "_id")], { [i]: x }), o("UNSAVED");
+] }), cs = ({ section: t }) => {
+  var m;
+  const { setSyncState: s } = zt(), r = G(), [l, o] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  ne.useEffect(() => {
+    const h = C(p(r, i), (g, f) => ({ key: f, value: g }));
+    b(h) ? o([]) : o(h);
+  }, [p(r, i)]);
+  const n = () => o([...l, { key: "", value: "" }]), u = (h) => {
+    const g = be(l, (f, S) => h !== S);
+    c(g);
+  }, x = (h, g) => {
+    const f = [...l];
+    f[g][h.target.name] = h.target.value, c(f);
+  }, c = ne.useCallback(
+    (h = []) => {
+      const g = {};
+      je(h, (f) => {
+        b(f.key) || Me(g, f.key, f.value);
+      }), d([p(r, "_id")], { [i]: g }), s("UNSAVED");
     },
-    [t, o, d, i]
+    [r, s, d, i]
   );
-  return /* @__PURE__ */ e.jsxs(ae, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ie, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+  return /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+    /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `h-[8px] w-[8px] rounded-full ${b(u(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${b(p(r, i)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
     ] }) }),
-    /* @__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: [
+    /* @__PURE__ */ e.jsx(ce, { 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(Se, { 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 ${!b(a) && b((g = he(a)) == null ? void 0 : g.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(l) && b((m = ye(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"}`,
             onClick: () => {
-              var y;
-              !b(a) && b((y = he(a)) == null ? void 0 : y.key) || n();
+              var h;
+              !b(l) && b((h = ye(l)) == null ? void 0 : h.key) || n();
             },
             children: [
-              /* @__PURE__ */ e.jsx(ve, { width: 12, height: 12 }),
+              /* @__PURE__ */ e.jsx(Ce, { width: 12, height: 12 }),
               " Add"
             ]
           }
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(a) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
-        se.Children.toArray(
-          N(a, (y, x) => {
-            const f = a.length > 0 && x < a.length - 1;
+        b(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        ne.Children.toArray(
+          C(l, (h, g) => {
+            const f = l.length > 0 && g < l.length - 1;
             return /* @__PURE__ */ e.jsx(
-              Er,
+              ds,
               {
-                item: y,
-                index: x,
+                item: h,
+                index: g,
                 canDelete: f,
-                onChange: c,
-                onRemove: () => p(x)
+                onChange: x,
+                onRemove: () => u(g)
               }
             );
           })
@@ -1997,11 +2064,11 @@ const Nr = ({ property: r, onChange: o }) => {
     ] }) })
   ] });
 };
-function Yr() {
-  const [r, o] = qe(), { flexChild: t, gridChild: a } = Xt(), [, l] = rr(Wt), { t: s } = Ee(), [d] = je();
+function ps() {
+  const [t, s] = Je(), { flexChild: r, gridChild: l } = Ut(), [, o] = Cr(Gt), { t: a } = Fe(), [d] = Ne();
   return b(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(We, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: s("no_styling_block_selected") }),
+    /* @__PURE__ */ e.jsx(Ze, { 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",
       " ",
@@ -2010,40 +2077,40 @@ function Yr() {
     ] })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-        /* @__PURE__ */ e.jsx(Ce, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(dr, { defaultValue: r, onValueChange: (i) => o(i), children: [
-          /* @__PURE__ */ e.jsx(cr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(pr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(ur, { children: [
-            /* @__PURE__ */ e.jsx(A, { value: "", children: "Normal" }),
-            /* @__PURE__ */ e.jsx(A, { value: "hover", children: "Hover" }),
-            /* @__PURE__ */ e.jsx(A, { value: "active", children: "Active" }),
-            /* @__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.jsx(Se, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+        /* @__PURE__ */ e.jsxs(Hr, { defaultValue: t, onValueChange: (i) => s(i), children: [
+          /* @__PURE__ */ e.jsx(Br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Ar, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(Dr, { children: [
+            /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
+            /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
+            /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
+            /* @__PURE__ */ e.jsx(H, { value: "focus", children: "Focus" }),
+            /* @__PURE__ */ e.jsx(H, { value: "before", children: "Before" }),
+            /* @__PURE__ */ e.jsx(H, { value: "after", children: "After" }),
+            /* @__PURE__ */ e.jsx(H, { value: "only", children: "Only" }),
+            /* @__PURE__ */ e.jsx(H, { value: "first", children: "First" }),
+            /* @__PURE__ */ e.jsx(H, { value: "last", children: "Last" }),
+            /* @__PURE__ */ e.jsx(H, { value: "first-letter", children: "First Letter" }),
+            /* @__PURE__ */ e.jsx(H, { value: "first-line", children: "First Line" }),
+            /* @__PURE__ */ e.jsx(H, { value: "disabled", children: "Disabled" })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(ir, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+      /* @__PURE__ */ e.jsxs(Vr, { 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: wr }),
-          a ? /* @__PURE__ */ e.jsx(ge, { section: jr }) : null,
-          Cr.map((i) => /* @__PURE__ */ e.jsx(ge, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(Fr, { section: { heading: "Attributes" } })
+          r && /* @__PURE__ */ e.jsx(he, { section: Yr }),
+          l ? /* @__PURE__ */ e.jsx(he, { section: Xr }) : null,
+          Wr.map((i) => /* @__PURE__ */ e.jsx(he, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(cs, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const Xr = {
+const us = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2054,8 +2121,8 @@ const Xr = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Xl = () => {
-  const r = te(), { t: o } = Ee(), [t, a] = P.useState(""), [l, s] = P.useState({
+}, hl = () => {
+  const t = G(), { t: s } = Fe(), [r, l] = $.useState(""), [o, a] = $.useState({
     onDrag: (n) => n,
     onDragEnd: (n) => n,
     dragStartY: 0,
@@ -2064,20 +2131,20 @@ const Xr = {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = xe(
+  }), d = me(
     (n) => {
-      const p = !u(l, "negative", !1), c = u(l, "cssProperty", "");
-      let h = parseFloat(l.dragStartValue);
-      h = Me(h) ? 0 : h;
-      let g = Xr[l.dragUnit];
-      (Z(c, "scale") || c === "opacity") && (g = 10);
-      let x = (l.dragStartY - n.pageY) / g + h;
-      p && x < 0 && (x = 0), c === "opacity" && x > 1 && (x = 1), l.onDrag(`${x}`), a(`${x}`);
+      const u = !p(o, "negative", !1), x = p(o, "cssProperty", "");
+      let c = parseFloat(o.dragStartValue);
+      c = _e(c) ? 0 : c;
+      let m = us[o.dragUnit];
+      (z(x, "scale") || x === "opacity") && (m = 10);
+      let g = (o.dragStartY - n.pageY) / m + c;
+      u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), o.onDrag(`${g}`), l(`${g}`);
     },
-    [l],
+    [o],
     50
-  ), i = L(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
+  ), i = A(() => {
+    setTimeout(() => o.onDragEnd(`${r}`), 100), a({
       onDrag: (n) => n,
       onDragEnd: (n) => n,
       dragStartY: 0,
@@ -2087,12 +2154,12 @@ const Xr = {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, s]);
-  return yt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(We, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsxs(ot.Provider, { value: { setDragData: s }, children: [
-    l.dragging ? /* @__PURE__ */ e.jsx(
+  }, [o, r, a]);
+  return vt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+    /* @__PURE__ */ e.jsx(Ze, { 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: [
+    o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
         onMouseMove: d,
@@ -2100,23 +2167,23 @@ const Xr = {
         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(Pt, { className: "mx-1 grid grid-cols-2", children: [
-        /* @__PURE__ */ e.jsx(Re, { value: "settings", children: "Settings" }),
-        /* @__PURE__ */ e.jsx(Re, { value: "styling", children: "Styling" })
+    /* @__PURE__ */ e.jsxs(Ot, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(Mt, { className: "mx-1 grid grid-cols-2", children: [
+        /* @__PURE__ */ e.jsx(He, { value: "settings", children: "Settings" }),
+        /* @__PURE__ */ e.jsx(He, { value: "styling", children: "Styling" })
       ] }),
       /* @__PURE__ */ e.jsx(
-        He,
+        Be,
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(fr, {})
+          children: /* @__PURE__ */ e.jsx(Er, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(He, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
+      /* @__PURE__ */ e.jsx(Be, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(ps, {}) })
     ] })
   ] });
 };
 export {
-  Xl as default
+  hl as default
 };