@chaibuilder/sdk 1.2.55 → 1.2.57

package/dist/{Settings-RLDTFFf8.js → Settings-b1ZuIn4y.js}

@@ -1,33 +1,24 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ie from "react";
-import $, { useState as j, useMemo as R, useEffect as A, useCallback as B, memo as ft, useRef as ye, createContext as Ze, useContext as se } from "react";
+import $, { useState as j, useMemo as T, useEffect as I, useCallback as B, memo as ft, useRef as ye, createContext as We, useContext as se } from "react";
 import { useThrottledCallback as ce } from "@react-hookz/web";
-import { forEach as ke, isArray as pe, omit as vt, truncate as wt, includes as z, get as g, first as oe, split as jt, startCase as Y, toLower as re, isEmpty as b, map as T, find as Ct, last as kt, filter as Re, set as We, debounce as Nt, keys as he, cloneDeep as _t, each as St, capitalize as me, reject as Tt, nth as Ve, startsWith as q, isNumber as Rt, parseInt as Vt, isNaN as Ue, findLast as Ht, flatten as He, intersection as Dt, has as de, isNull as Bt } from "lodash-es";
-import { useTranslation as F } from "react-i18next";
-import { CopyIcon as It, PlusIcon as Ke, Cross2Icon as Ge, EyeOpenIcon as At, EyeClosedIcon as De, BorderAllIcon as O, WidthIcon as H, HeightIcon as D, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as $t, ArrowBottomRightIcon as Et, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Ot, AlignRightIcon as zt, StretchHorizontallyIcon as Yt, FontItalicIcon as Ft, UnderlineIcon as Xt, OverlineIcon as Zt, LetterCaseUppercaseIcon as Wt, Cross1Icon as Ut, InfoCircledIcon as Ne, MinusIcon as Kt, BoxIcon as qe, RowSpacingIcon as Gt, TriangleDownIcon as qt, CrossCircledIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as er } from "@radix-ui/react-icons";
-import { a2 as Je, aQ as Qe, aR as et, B as P, aS as tt, aT as tr, aU as rr, aV as sr, aW as or, aX as lr, aY as ar, M as X, aL as rt, $ as nr, a0 as ir, a1 as dr, aZ as cr, Z as pr, ab as ur, _ as gr, ac as U, ad as K, ae as G, i as xr, a_ as yr, a$ as hr, b0 as mr, b1 as br, b2 as fr, b3 as vr, b4 as wr, R as st, Q as ot, h as lt, b5 as jr, b6 as at, b7 as be, b8 as fe, b9 as ve, ba as Cr, bb as nt, ah as kr, bc as Nr, Y as le, o as _e, I as it, L as dt, bd as _r, aD as Be, be as ct, k as Sr, bf as Tr, J as ue, w as Rr, P as Vr, p as Ie, av as Hr, aw as Dr, ax as Br, bg as pt, ay as Ae, az as Pe, bh as $e, bi as Ee, bj as Me, S as Ir } from "./ChaiBuilderEditor-tkzS851D.js";
-import { Check as Ar, EditIcon as Pr, TrashIcon as $r, Loader as Er, SparklesIcon as Mr, Edit2 as Lr, X as Or } from "lucide-react";
-import { getBlockComponent as Se, getChaiDataProviders as zr, useGlobalStylingPresets as Yr } from "@chaibuilder/runtime";
-import { J as Fr, a as Xr, d as Zr } from "./index-e0c8PmRQ.js";
-import Wr from "@rjsf/core";
-import Ur from "@rjsf/validator-ajv8";
-import { u as Kr } from "./useCanvasSettings-rEZHbw3s.js";
-import Gr from "react-autosuggest";
-import qr from "fuse.js";
-import { A as Jr, C as ge, g as Qr } from "./utils-VpVqnC9m.js";
-import { a as es } from "./MODIFIERS-fd5XOmum.js";
-import { get as Le, isEmpty as ts } from "lodash";
+import { forEach as ke, isArray as pe, omit as vt, truncate as wt, includes as X, get as g, first as oe, split as jt, startCase as Y, toLower as re, isEmpty as b, map as R, find as Ct, last as kt, filter as Ve, set as Ue, debounce as Nt, keys as he, cloneDeep as _t, each as St, capitalize as me, reject as Tt, nth as He, startsWith as q, isNumber as Rt, parseInt as Vt, isNaN as Ke, findLast as Ht, flatten as De, intersection as Dt, has as de, isNull as Bt } from "lodash-es";
+import { useTranslation as E } from "react-i18next";
+import { CopyIcon as At, PlusIcon as Ge, Cross2Icon as qe, EyeOpenIcon as It, EyeClosedIcon as Be, BorderAllIcon as F, WidthIcon as H, HeightIcon as D, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as $t, ArrowBottomRightIcon as Et, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Ot, AlignRightIcon as zt, StretchHorizontallyIcon as Ft, FontItalicIcon as Xt, UnderlineIcon as Yt, OverlineIcon as Zt, LetterCaseUppercaseIcon as Wt, Cross1Icon as Ut, InfoCircledIcon as Ne, MinusIcon as Kt, BoxIcon as Je, RowSpacingIcon as Gt, TriangleDownIcon as qt, CrossCircledIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as er } from "@radix-ui/react-icons";
+import { b8 as Qe, b9 as et, B as P, ba as tt, bb as tr, bc as rr, bd as sr, be as or, bf as lr, bg as ar, ai as M, aw as nr, ax as ir, ay as dr, bh as cr, au as pr, aE as ur, av as gr, aF as U, aG as K, aH as G, $ as xr, bi as yr, bj as hr, bk as mr, bl as br, bm as fr, bn as vr, b4 as wr, r as _e, aR as jr, aX as be, an as rt, am as st, h as ot, bo as Cr, L as lt, M as fe, N as ve, O as we, T as at, S as kr, at as le, a3 as Se, af as nt, K as Nr, bp as it, v as _r, bq as Sr, ag as ue, aa as Tr, al as Rr, a4 as Ae, E as Vr, F as Hr, G as Dr, br as dt, H as Ie, I as Pe, bs as $e, J as Ee, bt as Me, ao as Br } from "./index-uLn8W3eR.js";
+import { Check as Ar, EditIcon as Ir, TrashIcon as Pr, Loader as $r, SparklesIcon as Er, Edit2 as Mr, X as Lr } from "lucide-react";
+import { getBlockComponent as Te, getChaiDataProviders as Or, useGlobalStylingPresets as zr } from "@chaibuilder/runtime";
+import { E as ct, u as pt, b as Fr, c as Xr } from "./index-IgLSTkN6.js";
+import { J as Yr, a as Zr, d as Wr } from "./index-e0c8PmRQ.js";
+import Ur from "@rjsf/core";
+import Kr from "@rjsf/validator-ajv8";
+import { useAtom as Gr } from "jotai";
+import qr from "react-autosuggest";
+import Jr from "fuse.js";
+import { A as Qr, C as ge, g as es } from "./utils-VpVqnC9m.js";
+import { a as ts } from "./MODIFIERS-fd5XOmum.js";
+import { get as Le, isEmpty as rs } from "lodash";
 import "./_commonjsHelpers-UyOWmZb0.js";
-import "clsx";
-import "react-dom";
-import "@radix-ui/react-scroll-area";
-import "@floating-ui/react-dom";
-import "jotai";
-import "i18next";
-import "flagged";
-import "./Functions-7jnEwJyw.js";
-import "tailwind-merge";
-import "tree-model";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -36,6 +27,7 @@ import "@radix-ui/react-accordion";
 import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-dialog";
 import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-tabs";
 import "@radix-ui/react-tooltip";
 import "@radix-ui/react-popover";
@@ -48,32 +40,40 @@ import "@radix-ui/react-toast";
 import "cmdk";
 import "@radix-ui/react-context-menu";
 import "react-icons-picker";
+import "react-dom";
 import "react-quill";
+import "./Functions-7jnEwJyw.js";
+import "clsx";
+import "tailwind-merge";
+import "tree-model";
+import "i18next";
+import "@floating-ui/react-dom";
+import "flagged";
 import "react-hotkeys-hook";
 import "./index-VBXQixVm.js";
-function rs(r) {
+function ss(r) {
   const a = [], t = {};
   function l(o, n) {
-    ke(n, (d, p) => {
-      const s = o ? `${o}.${p}` : p, c = pe(d) ? "list" : typeof d;
-      a.push(s), t[s] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !pe(d) && l(s, d);
+    ke(n, (c, p) => {
+      const s = o ? `${o}.${p}` : p, d = pe(c) ? "list" : typeof c;
+      a.push(s), t[s] = d === "string" ? "text" : d === "object" ? "model" : d, d === "object" && !pe(c) && l(s, c);
     });
   }
   return l("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
 }
-const we = ({ data: r, fullView: a }) => {
+const je = ({ data: r, fullView: a }) => {
   if (!r)
     return null;
   const t = typeof r;
   return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsx(
-      Fr,
+    /* @__PURE__ */ e.jsx(ct, { children: /* @__PURE__ */ e.jsx(
+      Yr,
       {
         data: r,
-        shouldExpandNode: Xr,
+        shouldExpandNode: Zr,
         style: {
-          ...Zr,
+          ...Wr,
           container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
           stringValue: "text-orange-600",
           label: "text-green-900 font-semibold pr-1 tracking-wider"
@@ -91,12 +91,12 @@ const we = ({ data: r, fullView: a }) => {
   data: l,
   onChange: o,
   dataType: n,
-  appliedBindings: d
+  appliedBindings: c
 }) => {
-  const { paths: p, pathsType: s } = rs(l), c = r === "PROP" ? Se(l == null ? void 0 : l._type) : {}, u = r === "PROP", [i, h] = j(!1), y = R(() => r === "PROP" ? p.filter(
-    (x) => !z(d, x) && g(c, `props.${oe(jt(x, "."))}.binding`)
-  ) : p.filter((x) => n === g(s, x, "")), [r, p, d, n, c]);
-  return A(() => {
+  const { paths: p, pathsType: s } = ss(l), d = r === "PROP" ? Te(l == null ? void 0 : l._type) : {}, u = r === "PROP", [i, h] = j(!1), y = T(() => r === "PROP" ? p.filter(
+    (x) => !X(c, x) && g(d, `props.${oe(jt(x, "."))}.binding`)
+  ) : p.filter((x) => n === g(s, x, "")), [r, p, c, n, d]);
+  return I(() => {
     a && o(a);
   }, [a, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
@@ -124,7 +124,7 @@ const we = ({ data: r, fullView: a }) => {
           /* @__PURE__ */ e.jsx(rr, { placeholder: `Choose ${re(r)}...` }),
           /* @__PURE__ */ e.jsxs(sr, { children: [
             /* @__PURE__ */ e.jsx(or, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(lr, { children: T(y, (x) => /* @__PURE__ */ e.jsxs(
+            /* @__PURE__ */ e.jsx(lr, { children: R(y, (x) => /* @__PURE__ */ e.jsxs(
               ar,
               {
                 value: x,
@@ -137,7 +137,7 @@ const we = ({ data: r, fullView: a }) => {
                     /* @__PURE__ */ e.jsx(Ar, { className: `h-4 w-4 text-green-500 ${a === x ? "" : "opacity-0"}` }),
                     x
                   ] }),
-                  u ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(g(s, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: g(l, x) }) })
+                  u ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(g(s, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: g(l, x) }) })
                 ]
               },
               x
@@ -146,27 +146,27 @@ const we = ({ data: r, fullView: a }) => {
         ] }) })
       ] })
     ] }),
-    !u && !b(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: g(l, a, ""), fullView: !0 }) })
+    !u && !b(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: g(l, a, ""), fullView: !0 }) })
   ] });
-}, ss = ({
+}, os = ({
   appliedBindings: r = [],
   onAddBinding: a,
   editMode: t,
   item: l
 }) => {
-  const [o, n] = j(t ? l.key : ""), [d, p] = j(t ? l.value : ""), s = X(), [c] = rt(), u = B(
+  const [o, n] = j(t ? l.key : ""), [c, p] = j(t ? l.value : ""), s = M(), [d] = pt(), u = B(
     (y, x) => {
       if (b(y))
         return "";
       {
-        const v = g(x === "PROP" ? s : c, y, "");
+        const v = g(x === "PROP" ? s : d, y, "");
         if (pe(v))
           return "list";
         const k = typeof v;
         return k === "string" ? "text" : k === "object" ? "model" : k;
       }
     },
-    [s, c]
+    [s, d]
   ), [i, h] = j(t ? u(l.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(nr, { children: [
@@ -198,13 +198,13 @@ const we = ({ data: r, fullView: a }) => {
           type: "PATH",
           isDisabled: b(o),
           placeholder: "Enter data path",
-          value: d,
+          value: c,
           setValue: p,
           onChange: (y) => {
             const x = u(y, "PATH");
             p(i === x ? y : "");
           },
-          data: c,
+          data: d,
           dataType: i,
           appliedBindings: r
         }
@@ -215,18 +215,18 @@ const we = ({ data: r, fullView: a }) => {
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(o) && b(d),
-        onClick: () => a({ key: o, value: d }),
+        disabled: b(o) && b(c),
+        onClick: () => a({ key: o, value: c }),
         children: "Save"
       }
     ) })
   ] });
 }, ut = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
-  const [d, p] = j(!1);
+  const [c, p] = j(!1);
   return /* @__PURE__ */ e.jsxs(pr, { children: [
     /* @__PURE__ */ e.jsx(ur, { disabled: r, asChild: !0, onClick: () => p(!0), children: a }),
-    d && /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(
-      ss,
+    c && /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(
+      os,
       {
         item: n,
         editMode: o,
@@ -237,7 +237,7 @@ const we = ({ data: r, fullView: a }) => {
       }
     ) })
   ] });
-}, os = ({
+}, ls = ({
   item: r,
   onAddBinding: a,
   onRemove: t,
@@ -245,41 +245,41 @@ const we = ({ data: r, fullView: a }) => {
   dataProvider: o,
   appliedBindings: n
 }) => {
-  const [d, p] = j("string"), s = (c, u) => {
-    if (b(c))
+  const [c, p] = j("string"), s = (d, u) => {
+    if (b(d))
       return "";
     {
-      const i = g(u === "PROP" ? l : o, c, "");
+      const i = g(u === "PROP" ? l : o, d, "");
       if (pe(i))
         return "list";
       const h = typeof i;
       return h === "string" ? "text" : h === "object" ? "model" : h;
     }
   };
-  return A(() => p(() => s(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return I(() => p(() => s(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-sm font-normal text-gray-500", children: r.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
-    /* @__PURE__ */ e.jsx(we, { data: g(o, r.value, "") }),
+    /* @__PURE__ */ e.jsx(je, { data: g(o, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(ut, { editMode: !0, onAddBinding: a, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Pr, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
+      /* @__PURE__ */ e.jsx(ut, { editMode: !0, onAddBinding: a, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Ir, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
-        $r,
+        Pr,
         {
           onClick: () => t(),
           className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
         }
       )
     ] }),
-    !b(d) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(d) })
+    !b(c) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(c) })
   ] });
-}, ls = ({ bindingData: r, onChange: a }) => {
-  const t = X(), [l] = rt(), o = zr(), [n, d] = j(
-    T(r, (i, h) => ({ key: h, value: i }))
+}, as = ({ bindingData: r, onChange: a }) => {
+  const t = M(), [l] = pt(), o = Or(), [n, c] = j(
+    R(r, (i, h) => ({ key: h, value: i }))
   );
-  A(() => {
-    d(T(r, (i, h) => ({ key: h, value: i })));
+  I(() => {
+    c(R(r, (i, h) => ({ key: h, value: i })));
   }, [t == null ? void 0 : t._id, r]);
-  const p = R(() => {
+  const p = T(() => {
     if (b(l))
       return !0;
     if (b(n))
@@ -287,20 +287,20 @@ const we = ({ data: r, fullView: a }) => {
     const i = kt(n);
     return b(i == null ? void 0 : i.key) || b(i == null ? void 0 : i.value);
   }, [l, n]), s = (i) => {
-    const h = Re(n, (y) => y.key !== i.key);
-    d([...h, i]), u([...h, i]);
-  }, c = (i) => {
-    const h = Re(n, (y, x) => i !== x);
+    const h = Ve(n, (y) => y.key !== i.key);
+    c([...h, i]), u([...h, i]);
+  }, d = (i) => {
+    const h = Ve(n, (y, x) => i !== x);
     u([...h]);
   }, u = B(
     (i = []) => {
-      if (d(i), b(i)) {
+      if (c(i), b(i)) {
         a({});
         return;
       }
       const h = {};
       ke(i, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && We(h, y.key, y.value);
+        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && Ue(h, y.key, y.value);
       }), a(h);
     },
     [a]
@@ -310,15 +310,15 @@ const we = ({ data: r, fullView: a }) => {
     /* @__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: [
-    T(n, (i, h) => /* @__PURE__ */ e.jsx(
-      os,
+    R(n, (i, h) => /* @__PURE__ */ e.jsx(
+      ls,
       {
         item: i,
         onAddBinding: s,
-        onRemove: () => c(h),
+        onRemove: () => d(h),
         selectedBlock: t,
         dataProvider: l,
-        appliedBindings: T(n, "key")
+        appliedBindings: R(n, "key")
       },
       i.key
     )),
@@ -327,7 +327,7 @@ const we = ({ data: r, fullView: a }) => {
         ut,
         {
           disabled: p,
-          appliedBindings: T(n, "key"),
+          appliedBindings: R(n, "key"),
           onAddBinding: s,
           children: /* @__PURE__ */ e.jsx(
             "span",
@@ -341,13 +341,13 @@ const we = ({ data: r, fullView: a }) => {
       p && /* @__PURE__ */ e.jsx(G, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, as = () => /* @__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" }), ns = ({ id: r, placeholder: a }) => {
-  const { t } = F(), [, l] = xr(), o = X();
+}, ns = () => /* @__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" }), is = ({ id: r, placeholder: a }) => {
+  const { t } = E(), [, l] = xr(), o = M();
   if (typeof window > "u")
     return null;
-  const n = r.replace("root.", ""), d = g(o, n, ""), p = () => {
+  const n = r.replace("root.", ""), c = g(o, n, ""), p = () => {
     const s = o == null ? void 0 : o._id;
-    l({ blockId: s, blockProp: n, placeholder: a, initialCode: g(o, n, d) });
+    l({ blockId: s, blockProp: n, placeholder: a, initialCode: g(o, n, c) });
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ e.jsx(
@@ -355,39 +355,39 @@ const we = ({ data: r, fullView: a }) => {
       {
         onClick: p,
         className: "text-pretty w-[90%] max-w-full cursor-default truncate rounded border bg-white p-2 text-left text-[10px]",
-        children: d.trim().length > 0 ? d.substring(0, 46) : a || "Eg: <script>console.log('Hello, world!');<\/script>"
+        children: c.trim().length > 0 ? c.substring(0, 46) : a || "Eg: <script>console.log('Hello, world!');<\/script>"
       }
     ),
     /* @__PURE__ */ e.jsx(P, { onClick: p, size: "sm", variant: "outline", className: "w-fit", children: t("Open code editor") })
   ] });
-}, je = ft(({ id: r, properties: a, formData: t, onChange: l }) => {
-  const [o, n] = j(t), d = { type: "object", properties: {} }, p = {};
-  Object.keys(a).forEach((c) => {
-    const u = a[c];
-    if (z(["slot", "styles"], u.type))
+}, ze = ft(({ id: r, properties: a, formData: t, onChange: l }) => {
+  const [o, n] = j(t), c = { type: "object", properties: {} }, p = {};
+  Object.keys(a).forEach((d) => {
+    const u = a[d];
+    if (X(["slot", "styles"], u.type))
       return;
-    const i = c;
-    d.properties[i] = yr(u), p[i] = hr(u);
-  }), A(() => {
+    const i = d;
+    c.properties[i] = yr(u), p[i] = hr(u);
+  }), I(() => {
     n(t);
   }, [r]);
   const s = ce(
-    async ({ formData: c }, u) => {
-      l({ formData: c }, u);
+    async ({ formData: d }, u) => {
+      l({ formData: d }, u);
     },
     [l],
     1e3
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Wr,
+    Ur,
     {
       widgets: {
-        binding: as,
+        binding: ns,
         richtext: mr,
         icon: br,
         image: fr,
-        code: ns
+        code: is
       },
       fields: { link: vr },
       idSeparator: ".",
@@ -395,47 +395,50 @@ const we = ({ data: r, fullView: a }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Ur,
+      validator: Kr,
       uiSchema: p,
-      schema: d,
+      schema: c,
       formData: o,
-      onChange: ({ formData: c }, u) => {
-        u && (n(c), s({ formData: c }, u));
+      onChange: ({ formData: d }, u) => {
+        u && (n(d), s({ formData: d }, u));
       }
     }
   );
-}), is = () => {
-  const [r, a] = Kr(), t = wr(), l = (d, p) => {
-    a((s) => ({ ...s, [d]: p }));
-  };
-  if (b(t))
+}), ds = () => {
+  const [r, a] = Gr(wr), t = M(), [, l] = _e(), { t: o } = E(), n = T(() => (t ? JSON.stringify(t) : "").includes('"x-show"'), [t]);
+  if (!t || !n)
     return null;
-  const { block: o, settings: n } = t;
-  return /* @__PURE__ */ e.jsxs("div", { className: "text-xs hover:no-underline", children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2 bg-gray-100 px-4 py-2", children: [
-      t.block._type,
-      " settings"
+  const c = r.includes(t._id);
+  return /* @__PURE__ */ e.jsxs("div", { className: "py-2 text-xs hover:no-underline", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2 border-b border-border bg-gray-200 px-4 py-2 font-normal", children: [
+      t._name || t._type,
+      "  ",
+      o("visibility settings")
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "bg-white pb-2", children: /* @__PURE__ */ e.jsx(
-      je,
-      {
-        id: o == null ? void 0 : o._id,
-        onChange: ({ formData: d }) => l(o._id, d),
-        formData: g(r, o._id, {}),
-        properties: n
-      }
-    ) })
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2 px-2 pt-2", children: [
+      /* @__PURE__ */ e.jsx(
+        jr,
+        {
+          id: "show-on-canvas",
+          checked: c,
+          onCheckedChange: (p) => {
+            p ? (a((s) => [...s, t._id]), l([t._id])) : a((s) => s.filter((d) => d !== t._id));
+          }
+        }
+      ),
+      /* @__PURE__ */ e.jsx(be, { htmlFor: "show-on-canvas", children: o("Show on canvas") })
+    ] })
   ] });
 };
-function ds() {
-  const r = X(), a = st(), t = ot(), l = Se(r._type), o = { ...r }, [n, d] = j(o), p = lt("dataBindingSupport", !1), s = ({ formData: y }, x, v) => {
+function cs() {
+  const r = M(), a = rt(), t = st(), l = Te(r._type), o = { ...r }, [n, c] = j(o), p = ot("dataBindingSupport", !1), s = ({ formData: y }, x, v) => {
     if (x && (n == null ? void 0 : n._id) === r._id) {
       const k = x.replace("root.", "");
       t([r._id], { [k]: g(y, k) }, v);
     }
-  }, c = B(
+  }, d = B(
     Nt(({ formData: y }, x, v) => {
-      s({ formData: y }, x, v), d(y);
+      s({ formData: y }, x, v), c(y);
     }, 1500),
     [r == null ? void 0 : r._id]
   ), u = ({ formData: y }, x) => {
@@ -443,18 +446,17 @@ function ds() {
       const v = x.replace("root.", "");
       a(
         [r._id],
-        jr(v, g(y, v.split(".")))
-      ), c({ formData: y }, x, { [v]: g(n, v) });
+        Cr(v, g(y, v.split(".")))
+      ), d({ formData: y }, x, { [v]: g(n, v) });
     }
-  }, i = he(g(o, "_bindings", {})), h = R(() => {
+  }, i = he(g(o, "_bindings", {})), h = T(() => {
     const y = _t(g(l, "props", {}));
     return p && St(i, (x) => delete y[x]), y;
   }, [l, i, p]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(is, {}),
-    p ? /* @__PURE__ */ e.jsxs(at, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(be, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+    p ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(fe, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 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",
             {
@@ -463,8 +465,8 @@ function ds() {
           ),
           "Data Binding"
         ] }) }),
-        /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          ls,
+        /* @__PURE__ */ e.jsx(we, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
+          as,
           {
             bindingData: g(r, "_bindings", {}),
             onChange: (y) => {
@@ -473,21 +475,21 @@ function ds() {
           }
         ) })
       ] }),
-      /* @__PURE__ */ e.jsxs(be, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e.jsxs(fe, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 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 bg-blue-500" }),
           "Static Content"
         ] }) }),
-        /* @__PURE__ */ e.jsxs(ve, { className: "pt-4", children: [
+        /* @__PURE__ */ e.jsxs(we, { className: "pt-4", children: [
           b(i) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: T(i, me).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: R(i, me).join(", ") }),
             " ",
             i.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            je,
+            ze,
             {
               id: r == null ? void 0 : r._id,
               onChange: u,
@@ -498,38 +500,39 @@ function ds() {
         ] })
       ] })
     ] }) : /* @__PURE__ */ e.jsx(
-      je,
+      ze,
       {
         id: r == null ? void 0 : r._id,
         onChange: u,
         formData: o,
         properties: h
       }
-    )
+    ),
+    /* @__PURE__ */ e.jsx(ds, {})
   ] });
 }
-const cs = ({ blockId: r }) => {
-  const { t: a } = F(), { askAi: t, loading: l, error: o } = Cr(), [n, d] = j(""), p = ye(null);
-  A(() => {
-    var c;
-    (c = p.current) == null || c.focus();
+const ps = ({ blockId: r }) => {
+  const { t: a } = E(), { askAi: t, loading: l, error: o } = Fr(), [n, c] = j(""), p = ye(null);
+  I(() => {
+    var d;
+    (d = p.current) == null || d.focus();
   }, []);
   const s = () => {
-    o || d("");
+    o || c("");
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "", children: [
     /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: a("Ask AI") }),
     /* @__PURE__ */ e.jsx(
-      nt,
+      at,
       {
         ref: p,
         value: n,
-        onChange: (c) => d(c.target.value),
+        onChange: (d) => c(d.target.value),
         placeholder: a("Ask AI to edit styles"),
         className: "w-full border border-gray-400 focus:border-0",
         rows: 3,
-        onKeyDown: (c) => {
-          c.key === "Enter" && (c.preventDefault(), t("styles", r, n, s));
+        onKeyDown: (d) => {
+          d.key === "Enter" && (d.preventDefault(), t("styles", r, n, s));
         }
       }
     ),
@@ -543,14 +546,14 @@ const cs = ({ blockId: r }) => {
           className: "w-fit",
           size: "sm",
           children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx(Er, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ e.jsx($r, { className: "w-5 h-5 animate-spin" }),
             a("Generating... Please wait")
           ] }) : a("Edit with AI")
         }
       ),
       l ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ e.jsxs(kr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
-          /* @__PURE__ */ e.jsx(Nr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
+          /* @__PURE__ */ e.jsx(Xr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
           /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
         ] }),
         /* @__PURE__ */ e.jsx(P, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
@@ -558,7 +561,7 @@ const cs = ({ blockId: r }) => {
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: o && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: o.message }) })
   ] });
-}, ze = new qr(Jr, {
+}, Fe = new Jr(Qr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -566,7 +569,7 @@ const cs = ({ blockId: r }) => {
 });
 function gt() {
   var N;
-  const { t: r } = F(), [a] = le(), t = X(), l = _e(), o = it(), [n] = dt(), d = lt("askAiCallBack", null), [p, s] = j(""), { toast: c } = _r(), u = (N = oe(a)) == null ? void 0 : N.prop, i = Tt((g(t, u, "").replace(es, "").split(",").pop() || "").split(" "), b), h = () => {
+  const { t: r } = E(), [a] = le(), t = M(), l = Se(), o = nt(), [n] = _e(), c = ot("askAiCallBack", null), [p, s] = j(""), { toast: d } = Nr(), u = (N = oe(a)) == null ? void 0 : N.prop, i = Tt((g(t, u, "").replace(ts, "").split(",").pop() || "").split(" "), b), h = () => {
     const C = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(n, C, !0), s("");
   }, [y, x] = j([]), v = ({ value: C }) => {
@@ -574,16 +577,16 @@ function gt() {
     let m = [];
     if (W && W.length > 0) {
       const [f] = W, S = V.replace(f, "");
-      m = ze.search(S).map((L) => ({
-        ...L,
-        item: { ...L.item, name: f + L.item.name }
+      m = Fe.search(S).map((z) => ({
+        ...z,
+        item: { ...z.item, name: f + z.item.name }
       }));
     } else
-      m = ze.search(V);
-    return x(T(m, "item"));
+      m = Fe.search(V);
+    return x(R(m, "item"));
   }, k = () => {
     x([]);
-  }, E = (C) => C.name, I = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), Z = {
+  }, L = (C) => C.name, A = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), Z = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -597,14 +600,14 @@ function gt() {
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, w = () => {
     if (navigator.clipboard === void 0) {
-      c({
+      d({
         title: "Clipboard not supported",
         description: "Please use Chrome, Firefox or Safari",
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(i.join(" ")), c({
+    navigator.clipboard.writeText(i.join(" ")), d({
       title: "Copied",
       description: "Classes copied to clipboard"
     });
@@ -618,27 +621,27 @@ function gt() {
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
             /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ e.jsxs(U, { children: [
-              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(It, { onClick: w, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(At, { onClick: w, className: "cursor-pointer" }) }),
               /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
-          d ? /* @__PURE__ */ e.jsxs(Qe, { children: [
+          c ? /* @__PURE__ */ e.jsxs(Qe, { children: [
             /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-              /* @__PURE__ */ e.jsx(Mr, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e.jsx(Er, { className: "h-4 w-4" }),
               /* @__PURE__ */ e.jsx("span", { className: "ml-2", children: r("Ask AI") })
             ] }) }),
-            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(cs, { blockId: t == null ? void 0 : t._id }) })
+            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(ps, { blockId: t == null ? void 0 : t._id }) })
           ] }) : null
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative 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(
-            Gr,
+            qr,
             {
               suggestions: y,
               onSuggestionsFetchRequested: v,
               onSuggestionsClearRequested: k,
-              getSuggestionValue: E,
-              renderSuggestion: I,
+              getSuggestionValue: L,
+              renderSuggestion: A,
               inputProps: Z,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
@@ -658,7 +661,7 @@ function gt() {
               onClick: h,
               disabled: p.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(Ke, {})
+              children: /* @__PURE__ */ e.jsx(Ge, {})
             }
           )
         ] }),
@@ -670,7 +673,7 @@ function gt() {
               children: [
                 C,
                 /* @__PURE__ */ e.jsx(
-                  Ge,
+                  qe,
                   {
                     onClick: () => o(n, [C]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
@@ -685,11 +688,11 @@ function gt() {
     }
   );
 }
-const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t }) {
-  const [l, o] = j([]), [n, d] = j(""), [p, s] = j(""), [c, u] = j(null), [i, h] = j(""), y = ye(null), x = ye(null);
-  A(() => {
+const us = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t }) {
+  const [l, o] = j([]), [n, c] = j(""), [p, s] = j(""), [d, u] = j(null), [i, h] = j(""), y = ye(null), x = ye(null);
+  I(() => {
     y.current && y.current.focus();
-  }, [l]), A(() => {
+  }, [l]), I(() => {
     o(a);
   }, [a]);
   const v = () => {
@@ -699,54 +702,60 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
     }
     if (n) {
       const w = [...l, { key: n, value: p }];
-      t(w), o(l), d(""), s(""), h("");
+      t(w), o(l), c(""), s(""), h("");
     }
   }, k = (w) => {
     const N = l.filter((C, V) => V !== w);
     t(N), o(N);
-  }, E = (w) => {
-    u(w), d(l[w].key), s(l[w].value);
-  }, I = () => {
+  }, L = (w) => {
+    u(w), c(l[w].key), s(l[w].value);
+  }, A = () => {
     if (n.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
-    if (c !== null && n) {
+    if (d !== null && n) {
       const w = [...l];
-      w[c] = { key: n, value: p }, t(w), o(w), u(null), d(""), s(""), h("");
+      w[d] = { key: n, value: p }, t(w), o(w), u(null), c(""), s(""), h("");
     }
   }, Z = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), c !== null ? I() : v());
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), d !== null ? A() : v());
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "px-1", children: [
     /* @__PURE__ */ e.jsxs(
       "form",
       {
         onSubmit: (w) => {
-          w.preventDefault(), c !== null ? I() : v();
+          w.preventDefault(), d !== null ? A() : v();
         },
         className: "space-y-3",
         children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ e.jsx(Be, { htmlFor: "attrKey", className: "text-xs", children: "Key" }),
+              /* @__PURE__ */ e.jsx(be, { htmlFor: "attrKey", className: "text-xs", children: "Key" }),
               /* @__PURE__ */ e.jsx(
-                ct,
+                it,
                 {
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: "false",
                   id: "attrKey",
                   ref: y,
                   value: n,
-                  onChange: (w) => d(w.target.value),
+                  onChange: (w) => c(w.target.value),
                   placeholder: "Key",
                   className: "h-8 text-sm"
                 }
               )
             ] }),
             /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ e.jsx(Be, { htmlFor: "attrValue", className: "text-xs", children: "Value" }),
+              /* @__PURE__ */ e.jsx(be, { htmlFor: "attrValue", className: "text-xs", children: "Value" }),
               /* @__PURE__ */ e.jsx(
-                nt,
+                at,
                 {
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
                   ref: x,
@@ -759,7 +768,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
               )
             ] })
           ] }),
-          /* @__PURE__ */ e.jsx(P, { type: "submit", className: "h-8 w-full text-sm", children: c !== null ? "Save" : "Add" }),
+          /* @__PURE__ */ e.jsx(P, { type: "submit", className: "h-8 w-full text-sm", children: d !== null ? "Save" : "Add" }),
           i && /* @__PURE__ */ e.jsx("p", { className: "text-xs text-red-500", children: i })
         ]
       }
@@ -767,37 +776,37 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
     /* @__PURE__ */ e.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: l.map((w, N) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "mr-2 flex flex-col", children: [
         /* @__PURE__ */ e.jsx("span", { className: "truncate font-semibold", children: w.key }),
-        /* @__PURE__ */ e.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value })
+        /* @__PURE__ */ e.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value.toString() })
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(N), children: [
-          /* @__PURE__ */ e.jsx(Lr, { className: "h-3 w-3" }),
+        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => L(N), children: [
+          /* @__PURE__ */ e.jsx(Mr, { className: "h-3 w-3" }),
           /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
         /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(N), children: [
-          /* @__PURE__ */ e.jsx(Or, { className: "h-3 w-3" }),
+          /* @__PURE__ */ e.jsx(Lr, { className: "h-3 w-3" }),
           /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
     ] }, N)) })
   ] });
-}), us = ie.memo(() => {
-  const r = X(), [a, t] = j([]), [l] = le(), o = st(), n = ot(), d = `${g(l, "0.prop")}_attrs`;
+}), gs = ie.memo(() => {
+  const r = M(), [a, t] = j([]), [l] = le(), o = rt(), n = st(), c = `${g(l, "0.prop")}_attrs`;
   ie.useEffect(() => {
-    const s = T(g(r, d), (c, u) => ({ key: u, value: c }));
+    const s = R(g(r, c), (d, u) => ({ key: u, value: d }));
     b(s) ? t([]) : t(s);
-  }, [g(r, d)]);
+  }, [g(r, c)]);
   const p = ie.useCallback(
     (s = []) => {
-      const c = {};
+      const d = {};
       ke(s, (u) => {
-        b(u.key) || We(c, u.key, u.value);
-      }), n([g(r, "_id")], { [d]: c });
+        b(u.key) || Ue(d, u.key, u.value);
+      }), n([g(r, "_id")], { [c]: d });
     },
-    [r, o, d]
+    [r, o, c]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(ps, { preloadedAttributes: a, onAttributesChange: p }) }) }) });
-}), _ = ["px", "%", "em", "rem", "ch", "vh", "vw"], gs = {
+  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(us, { preloadedAttributes: a, onAttributesChange: p }) }) }) });
+}), _ = ["px", "%", "em", "rem", "ch", "vh", "vw"], xs = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: _, property: "flexBasis" },
@@ -806,7 +815,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, xs = {
+}, ys = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -817,7 +826,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ys = [
+}, hs = [
   {
     heading: "Styles",
     items: [
@@ -881,9 +890,9 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
   },
   {
     heading: "Attributes",
-    items: [{ component: us }]
+    items: [{ component: gs }]
   }
-], Ao = [
+], Po = [
   {
     heading: "layout.heading",
     items: [
@@ -1290,36 +1299,36 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
 ], xt = {
   "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: At,
-  invisible: De,
+  visible: It,
+  invisible: Be,
   // display
-  hidden: De,
-  gap: O,
+  hidden: Be,
+  gap: F,
   gapX: H,
   gapY: D,
   spaceX: H,
   spaceY: D,
-  overscroll: O,
+  overscroll: F,
   overscrollX: H,
   overscrollY: D,
-  overflow: O,
+  overflow: F,
   overflowX: H,
   overflowY: D,
   top: J,
   right: Q,
   bottom: ee,
   left: te,
-  inset: O,
+  inset: F,
   insetX: H,
   insetY: D,
-  border: O,
+  border: F,
   borderX: H,
   borderY: D,
   borderTop: J,
   borderRight: Q,
   borderBottom: ee,
   borderLeft: te,
-  borderRadius: O,
+  borderRadius: F,
   borderRadiusX: H,
   borderRadiusY: D,
   borderRadiusTop: J,
@@ -1332,7 +1341,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
   borderRadiusBottomLeft: Mt,
   divideXWidth: H,
   divideYWidth: D,
-  scale: O,
+  scale: F,
   scaleX: H,
   scaleY: D,
   skewX: H,
@@ -1340,7 +1349,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
   translateX: H,
   translateY: D,
   // padding
-  padding: O,
+  padding: F,
   paddingX: H,
   paddingY: D,
   paddingTop: J,
@@ -1348,7 +1357,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
   paddingBottom: ee,
   paddingLeft: te,
   // margin
-  margin: O,
+  margin: F,
   marginX: H,
   marginY: D,
   marginTop: J,
@@ -1359,12 +1368,12 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
   textLeft: Lt,
   textCenter: Ot,
   textRight: zt,
-  textJustify: Yt,
+  textJustify: Ft,
   // font style
-  italic: Ft,
+  italic: Xt,
   // "not-italic": "",
   // decoration
-  underline: Xt,
+  underline: Yt,
   overline: Zt,
   // transform
   uppercase: Wt,
@@ -1408,7 +1417,7 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
       }
     )
   ] }),
-  "float-none": Ge,
+  "float-none": qe,
   // 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(
@@ -1481,13 +1490,13 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
     )
   ] }),
   static: Ut
-}, ae = Ze({ canReset: !1, canChange: !0 }), hs = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
+}, ae = We({ canReset: !1, canChange: !0 }), ms = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(ae.Provider, { value: { canReset: a, canChange: t }, children: r })
 ), yt = ({ label: r, property: a, onChange: t }) => {
-  const l = R(() => g(ge, `${a}.classes`, [""]), [a]), o = ne(a), n = R(() => g(o, "cls", ""), [o]), { canChange: d } = se(ae), p = /\[.*\]/g.test(n);
+  const l = T(() => g(ge, `${a}.classes`, [""]), [a]), o = ne(a), n = T(() => g(o, "cls", ""), [o]), { canChange: c } = se(ae), p = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(ct, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsx(it, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(K, { 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(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(G, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1499,12 +1508,12 @@ const ps = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t
       onChange: (s) => t(s, a),
       selected: n,
       options: l,
-      disabled: !d
+      disabled: !c
     }
   ) });
 };
 function Ce({ selected: r, onChange: a, rounded: t = !1, options: l, disabled: o = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: p } = Sr();
+  const n = r.replace(/.*:/g, "").trim(), { undo: c, redo: p } = _r();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
@@ -1512,7 +1521,7 @@ function Ce({ selected: r, onChange: a, rounded: t = !1, options: l, disabled: o
       className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
       onChange: (s) => a(s.target.value),
       onKeyDown: (s) => {
-        s.ctrlKey && (s.key === "z" && d(), s.key === "y" && p());
+        s.ctrlKey && (s.key === "z" && c(), s.key === "y" && p());
       },
       value: n,
       children: [
@@ -1524,8 +1533,8 @@ function Ce({ selected: r, onChange: a, rounded: t = !1, options: l, disabled: o
     }
   );
 }
-const ms = ({ property: r, onChange: a }) => {
-  const { canReset: t, canChange: l } = se(ae), o = ne(r), n = R(() => g(o, "cls", ""), [o]), d = R(() => g(ge, `${r}.classes`, [""]), [r]), p = d.indexOf(n) > -1 ? d.indexOf(n) : 0, s = /\[.*\]/g.test(n);
+const bs = ({ property: r, onChange: a }) => {
+  const { canReset: t, canChange: l } = se(ae), o = ne(r), n = T(() => g(o, "cls", ""), [o]), c = T(() => g(ge, `${r}.classes`, [""]), [r]), p = c.indexOf(n) > -1 ? c.indexOf(n) : 0, s = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: s ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1533,7 +1542,7 @@ const ms = ({ property: r, onChange: a }) => {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !l && (!t || p - 1 < 0),
-        onClick: () => a(Ve(d, p - 1), r),
+        onClick: () => a(He(c, p - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Kt,
           {
@@ -1548,33 +1557,33 @@ const ms = ({ property: r, onChange: a }) => {
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!t || p + 1 >= d.length),
-        onClick: () => a(Ve(d, p + 1), r),
+        disabled: !l && (!t || p + 1 >= c.length),
+        onClick: () => a(He(c, p + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ke,
+          Ge,
           {
-            className: !l && (!t || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !l && (!t || p + 1 >= c.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, bs = ({ property: r, onChange: a }) => {
-  const t = R(() => g(ge, `${r}.classes`, [""]), [r]), { canChange: l } = se(ae), o = ne(r), n = R(() => g(o, "cls", ""), [o]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: T(t, (d) => /* @__PURE__ */ e.jsxs(U, { children: [
+}, fs = ({ property: r, onChange: a }) => {
+  const t = T(() => g(ge, `${r}.classes`, [""]), [r]), { canChange: l } = se(ae), o = ne(r), n = T(() => g(o, "cls", ""), [o]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: R(t, (c) => /* @__PURE__ */ e.jsxs(U, { children: [
     /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !l,
-        onClick: () => a(d, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(g(xt, d, qe))
+        onClick: () => a(c, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === c ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(g(xt, c, Je))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(G, { children: Y(re(d)) })
+    /* @__PURE__ */ e.jsx(G, { children: Y(re(c)) })
   ] })) });
-}, fs = {
+}, vs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1586,18 +1595,18 @@ const ms = ({ property: r, onChange: a }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, vs = ({ property: r, onChange: a }) => {
-  const t = ne(r), l = R(() => g(t, "cls", ""), [t]), { canChange: o } = se(ae), [n, d] = j([]), [p, s] = j({ color: "", shade: "" }), c = l.split("-"), u = g(c, "1", ""), i = g(c, "2", ""), h = B(
+}, ws = ({ property: r, onChange: a }) => {
+  const t = ne(r), l = T(() => g(t, "cls", ""), [t]), { canChange: o } = se(ae), [n, c] = j([]), [p, s] = j({ color: "", shade: "" }), d = l.split("-"), u = g(d, "1", ""), i = g(d, "2", ""), h = B(
     // eslint-disable-next-line no-shadow
     (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), s({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), s((v) => ({ ...v, color: x, shade: v.shade ? v.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (c([]), s({ color: x })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), s((v) => ({ ...v, color: x, shade: v.shade ? v.shade : "500" })));
     },
-    [d, s]
+    [c, s]
   );
-  A(() => {
+  I(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(u))
-      return d([]);
-    d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+      return c([]);
+    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [u]);
   const y = B(
     // eslint-disable-next-line no-shadow
@@ -1606,10 +1615,10 @@ const ms = ({ property: r, onChange: a }) => {
     },
     [u]
   );
-  return A(() => {
+  return I(() => {
     s({ color: "", shade: "" });
-  }, [t]), A(() => {
-    const v = `${g(fs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
+  }, [t]), I(() => {
+    const v = `${g(vs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
     v.match(new RegExp(g(ge, `${r}.regExp`, ""))) && a(v, r);
   }, [p, a, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
@@ -1653,17 +1662,17 @@ const ms = ({ property: r, onChange: a }) => {
     ) }),
     /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: i, disabled: !u || !o, onChange: y, options: n }) })
   ] });
-}, Ye = (r, a) => {
+}, Xe = (r, a) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
   if ((t === "auto" || t === "none") && a.includes(t))
     return { value: "", unit: t };
   const l = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
   t = t.replace(l, "");
-  const o = r.match(l), n = o && o.length > 1, d = !b(t) && Number.isNaN(Number(t));
-  return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
+  const o = r.match(l), n = o && o.length > 1, c = !b(t) && Number.isNaN(Number(t));
+  return n || c ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
 };
-const ws = (r) => {
+const js = (r) => {
   const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1673,17 +1682,17 @@ const ws = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (z(r, "skew-"))
+  if (X(r, "skew-"))
     return { value: `${a}${t}`, unit: "deg" };
-  if (z(r, "rotate-"))
+  if (X(r, "rotate-"))
     return { value: `${a}${t}`, unit: "deg" };
-  if (z(r, "opacity-"))
+  if (X(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (z(r, "duration-") || z(r, "delay-"))
+  if (X(r, "duration-") || X(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (z(r, "translate-") && !t.includes("/"))
+  if (X(r, "translate-") && !t.includes("/"))
     return { value: `${a}${`${t / 4}`}`, unit: "rem" };
-  if (z(r, "scale-"))
+  if (X(r, "scale-"))
     return { value: `${a}${`${t / 100}`}`, unit: "-" };
   if (q(r, "border")) {
     const l = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
@@ -1787,30 +1796,30 @@ const ws = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [l, o] = T(t.split("/"), (n) => parseInt(n, 10));
+    const [l, o] = R(t.split("/"), (n) => parseInt(n, 10));
     return { value: a + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
   return Rt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const js = (r) => {
+const Cs = (r) => {
   if (b(r))
     return { value: "", unit: "" };
   const a = r.match(/\[.*\]/g);
   if (a === null)
-    return Cs(r);
+    return ks(r);
   const t = g(a, "0", "").replace(/\[|\]/g, ""), l = r.startsWith("-") ? "-" : "", o = oe(t.match(/\d+.\d+|\d+/g));
   return { value: `${l}${o}`, unit: t.replace(o, "") };
-}, Cs = (r) => b(r) ? { value: "", unit: "" } : ws(r), ht = $.createContext({
+}, ks = (r) => b(r) ? { value: "", unit: "" } : js(r), ht = $.createContext({
   setDragData: () => {
   }
-}), ks = ({
+}), Ns = ({
   unit: r,
   currentValue: a,
   onDrag: t,
   onDragEnd: l,
   onDragStart: o,
   negative: n,
-  cssProperty: d
+  cssProperty: c
 }) => {
   const { setDragData: p } = se(ht);
   return /* @__PURE__ */ e.jsx(
@@ -1818,7 +1827,7 @@ const js = (r) => {
     {
       type: "button",
       onMouseDown: (s) => {
-        const c = {
+        const d = {
           onDrag: t,
           onDragEnd: l,
           dragging: !0,
@@ -1826,16 +1835,16 @@ const js = (r) => {
           dragStartValue: `${a}`,
           dragUnit: r,
           negative: n,
-          cssProperty: d
+          cssProperty: c
         };
-        o(c), p(c);
+        o(d), p(d);
       },
       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(Gt, {})
     }
   );
-}, Ns = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((l) => /* @__PURE__ */ e.jsx(
+}, _s = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((l) => /* @__PURE__ */ e.jsx(
   P,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1847,19 +1856,19 @@ const js = (r) => {
     children: l
   },
   l
-)) }), Fe = 50, _s = (r) => {
-  const [a, t] = j(!1), [l, o] = j(""), { currentClass: n, onChange: d, classPrefix: p, cssProperty: s, units: c, negative: u } = r, [i, h] = j(s != null && s.toLowerCase().includes("width") ? "%" : c[0]), [y, x] = j(!1), [v, k] = j(""), [E, I] = j(!1), [Z, w] = j(!1);
-  A(() => {
-    const { value: m, unit: f } = js(n);
+)) }), Ye = 50, Ss = (r) => {
+  const [a, t] = j(!1), [l, o] = j(""), { currentClass: n, onChange: c, classPrefix: p, cssProperty: s, units: d, negative: u } = r, [i, h] = j(s != null && s.toLowerCase().includes("width") ? "%" : d[0]), [y, x] = j(!1), [v, k] = j(""), [L, A] = j(!1), [Z, w] = j(!1);
+  I(() => {
+    const { value: m, unit: f } = Cs(n);
     if (f === "") {
-      o(m), h(s != null && s.toLowerCase().includes("width") ? "%" : oe(c));
+      o(m), h(s != null && s.toLowerCase().includes("width") ? "%" : oe(d));
       return;
     }
     h(f), o(f === "class" || b(m) ? "" : m);
-  }, [n, s, c]);
-  const N = ce((m) => d(m), [d], Fe), C = ce((m) => d(m, !1), [d], Fe), V = B(
+  }, [n, s, d]);
+  const N = ce((m) => c(m), [c], Ye), C = ce((m) => c(m, !1), [c], Ye), V = B(
     (m = !1) => {
-      const f = Ye(`${l}`, c);
+      const f = Xe(`${l}`, d);
       if (g(f, "error", !1)) {
         x(!0);
         return;
@@ -1871,13 +1880,13 @@ const js = (r) => {
       }
       if (g(f, "value") === "")
         return;
-      const L = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      m ? C(L) : N(L);
+      const z = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      m ? C(z) : N(z);
     },
-    [N, C, l, i, p, c]
+    [N, C, l, i, p, d]
   ), W = B(
     (m) => {
-      const f = Ye(`${l}`, c);
+      const f = Xe(`${l}`, d);
       if (g(f, "error", !1)) {
         x(!0);
         return;
@@ -1888,10 +1897,10 @@ const js = (r) => {
       }
       if (g(f, "value") === "")
         return;
-      const S = g(f, "unit") !== "" ? g(f, "unit") : m, L = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      N(L);
+      const S = g(f, "unit") !== "" ? g(f, "unit") : m, z = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      N(z);
     },
-    [N, l, p, c]
+    [N, l, p, d]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: i === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
@@ -1899,7 +1908,7 @@ const js = (r) => {
       /* @__PURE__ */ e.jsx(K, { 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(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(G, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${E ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${L ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
@@ -1913,9 +1922,9 @@ const js = (r) => {
               return;
             m.preventDefault(), w(!0);
             const f = Vt(m.target.value);
-            let S = Ue(f) ? 0 : f;
+            let S = Ke(f) ? 0 : f;
             m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
-            const M = `${S}`, bt = `${M.startsWith("-") ? "-" : ""}${p}[${M.replace("-", "")}${i === "-" ? "" : i}]`;
+            const O = `${S}`, bt = `${O.startsWith("-") ? "-" : ""}${p}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
             C(bt);
           },
           onKeyUp: (m) => {
@@ -1929,7 +1938,7 @@ const js = (r) => {
             var f;
             (f = m == null ? void 0 : m.target) == null || f.select(), t(!1);
           },
-          value: E ? v : l,
+          value: L ? v : 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"
@@ -1944,15 +1953,15 @@ const js = (r) => {
             onClick: () => t(!a),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
-              c.length > 1 ? /* @__PURE__ */ e.jsx(qt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${d.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
+              d.length > 1 ? /* @__PURE__ */ e.jsx(qt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Tr, { children: /* @__PURE__ */ e.jsx(G, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          Ns,
+        /* @__PURE__ */ e.jsx(Sr, { children: /* @__PURE__ */ e.jsx(G, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          _s,
           {
-            units: c,
+            units: d,
             current: i,
             onSelect: (m) => {
               t(!1), h(m), W(m);
@@ -1961,22 +1970,22 @@ const js = (r) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(i) !== -1 || E ? null : /* @__PURE__ */ e.jsx(
-      ks,
+    ["none", "auto"].indexOf(i) !== -1 || L ? null : /* @__PURE__ */ e.jsx(
+      Ns,
       {
-        onDragStart: () => I(!0),
+        onDragStart: () => A(!0),
         onDragEnd: (m) => {
-          if (k(() => ""), I(!1), b(m))
+          if (k(() => ""), A(!1), b(m))
             return;
-          const f = `${m}`, M = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          N(M);
+          const f = `${m}`, O = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          N(O);
         },
         onDrag: (m) => {
           if (b(m))
             return;
           k(m);
-          const f = `${m}`, M = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          C(M);
+          const f = `${m}`, O = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          C(O);
         },
         currentValue: l,
         unit: i,
@@ -1988,7 +1997,7 @@ const js = (r) => {
 }, ne = (r) => {
   const a = ue();
   return Ht(a, { property: r });
-}, Ss = (r, a) => {
+}, Ts = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1998,7 +2007,7 @@ const js = (r) => {
     "2xl": 5
   };
   return t[g(r, "mq", "xs")] <= t[a];
-}, Ts = {
+}, Rs = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2064,30 +2073,30 @@ const js = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Xe = {
+}, Ze = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Rs = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Te = (r) => {
-  const { t: a } = F(), { type: t = "icons", label: l, property: o, onEmitChange: n = () => {
-  }, units: d, negative: p = !1 } = r, [s] = Rr(), [c] = Vr(), [, u] = Ie(), i = ne(o), h = _e(), y = it(), [x] = dt(), v = R(() => g(i, "fullCls", ""), [i]), k = B(
+}, Vs = (r) => `${r.toUpperCase()} ${Ze[r] ? `(${Ze[r]} & up)` : ""}`, Re = (r) => {
+  const { t: a } = E(), { type: t = "icons", label: l, property: o, onEmitChange: n = () => {
+  }, units: c, negative: p = !1 } = r, [s] = Tr(), [d] = Rr(), [, u] = Ae(), i = ne(o), h = Se(), y = nt(), [x] = _e(), v = T(() => g(i, "fullCls", ""), [i]), k = B(
     (C, V = !0) => {
-      const W = { dark: s, mq: u, mod: c, cls: C, property: o, fullCls: "" };
-      (s || c !== "") && (W.mq = "xs");
-      const m = Qr(W);
+      const W = { dark: s, mq: u, mod: d, cls: C, property: o, fullCls: "" };
+      (s || d !== "") && (W.mq = "xs");
+      const m = es(W);
       h(x, [m], V);
     },
-    [x, s, u, c, o, h]
-  ), E = B(() => {
+    [x, s, u, d, o, h]
+  ), L = B(() => {
     y(x, [v]);
-  }, [x, v, y]), I = R(() => Ss(i, u), [i, u]);
-  A(() => {
-    n(I, i);
-  }, [I, n, i]);
-  const [, , Z] = Ie(), w = B(
+  }, [x, v, y]), A = T(() => Ts(i, u), [i, u]);
+  I(() => {
+    n(A, i);
+  }, [A, n, i]);
+  const [, , Z] = Ae(), w = B(
     (C) => {
       Z({
         xs: 400,
@@ -2099,28 +2108,28 @@ const js = (r) => {
       }[C]);
     },
     [Z]
-  ), N = g(i, "dark", null) === s && g(i, "mod", null) === c && g(i, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(hs, { canChange: I, canReset: i && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  ), N = g(i, "dark", null) === s && g(i, "mod", null) === d && g(i, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(ms, { canChange: A, canReset: i && N, 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] ${i && !N ? "text-foreground" : ""}`, children: a(l) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          _s,
+          Ss,
           {
             currentClass: g(i, "cls", ""),
-            classPrefix: g(Ts, o, ""),
-            units: d || [],
+            classPrefix: g(Rs, o, ""),
+            units: c || [],
             onChange: k,
             negative: p,
             cssProperty: o
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(bs, { property: o, onChange: k }),
-        t === "range" && /* @__PURE__ */ e.jsx(ms, { property: o, onChange: k }),
-        t === "color" && /* @__PURE__ */ e.jsx(vs, { property: o, onChange: k }),
+        t === "icons" && /* @__PURE__ */ e.jsx(fs, { property: o, onChange: k }),
+        t === "range" && /* @__PURE__ */ e.jsx(bs, { property: o, onChange: k }),
+        t === "color" && /* @__PURE__ */ e.jsx(ws, { property: o, onChange: k }),
         t === "dropdown" && /* @__PURE__ */ e.jsx(yt, { label: l, property: o, onChange: k })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => E(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Jt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : I && i ? /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Jt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && i ? /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -2132,7 +2141,7 @@ const js = (r) => {
         /* @__PURE__ */ e.jsx(G, { 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: [
-            Rs(g(i, "mq")),
+            Vs(g(i, "mq")),
             s && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -2152,16 +2161,16 @@ const js = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, Vs = ["px", "%", "em", "rem", "ch", "vh", "vw"], mt = ({
+}, Hs = ["px", "%", "em", "rem", "ch", "vh", "vw"], mt = ({
   label: r,
   options: a,
   borderB: t = !1,
   borderT: l = !1,
   type: o = "arbitrary",
-  units: n = Vs,
-  negative: d = !1
+  units: n = Hs,
+  negative: c = !1
 }) => {
-  const { t: p } = F(), [s, c] = j(a[0].key), u = ue(), i = B((h) => T(u, "property").includes(h), [u]);
+  const { t: p } = E(), [s, d] = j(a[0].key), u = ue(), i = B((h) => R(u, "property").includes(h), [u]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -2175,13 +2184,13 @@ const js = (r) => {
                 "button",
                 {
                   type: "button",
-                  onClick: () => c(y),
+                  onClick: () => d(y),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === s ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     $.createElement("div", {
                       className: i(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(g(xt, y, qe), { className: "text-inherit w-3 h-3" })
+                    $.createElement(g(xt, y, Je), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -2190,26 +2199,26 @@ const js = (r) => {
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Te,
+          Re,
           {
             type: o,
             units: [...n],
             label: "",
             property: s,
-            negative: d
+            negative: c
           }
         ) })
       ]
     }
   );
-}, Hs = ({ heading: r, items: a }) => {
-  const { t } = F(), l = ue(), o = R(() => {
-    const n = (s) => He(
-      s.map((c) => c.styleType === "multiple" ? T(c.options, "key") : c.property)
-    ), d = He(
-      a.map((s) => s.styleType === "accordion" ? n(s.items) : s.styleType === "multiple" ? T(s.options, "key") : s.property)
-    ), p = T(l, "property");
-    return Dt(d, p).length > 0;
+}, Ds = ({ heading: r, items: a }) => {
+  const { t } = E(), l = ue(), o = T(() => {
+    const n = (s) => De(
+      s.map((d) => d.styleType === "multiple" ? R(d.options, "key") : d.property)
+    ), c = De(
+      a.map((s) => s.styleType === "accordion" ? n(s.items) : s.styleType === "multiple" ? R(s.options, "key") : s.property)
+    ), p = R(l, "property");
+    return Dt(c, p).length > 0;
   }, [l, a]);
   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: [
@@ -2221,67 +2230,67 @@ const js = (r) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Te, { ...n }, n.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label)) })
   ] });
-}, Ds = Ze({}), xe = ({ section: r }) => {
-  const { t: a } = F(), t = ue(), l = X(), o = B(
+}, Bs = We({}), xe = ({ section: r }) => {
+  const { t: a } = E(), t = ue(), l = M(), o = B(
     (s = []) => {
-      const c = {};
+      const d = {};
       for (let i = 0; i < t.length; i++)
-        c[t[i].property] = t[i].cls;
+        d[t[i].property] = t[i].cls;
       let u = !0;
       for (const i in s)
-        if (!de(c, i) || c[i] !== s[i]) {
+        if (!de(d, i) || d[i] !== s[i]) {
           u = !1;
           break;
         }
       return u;
     },
     [t]
-  ), n = R(() => ({}), []), [d] = le(), p = R(() => {
-    const s = `${Le(d, "0.prop")}_attrs`;
-    return !ts(Le(l, s, {}));
-  }, [d]);
-  return /* @__PURE__ */ e.jsx(Ds.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(be, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(fe, { className: "border-b border-gray-300 bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+  ), n = T(() => ({}), []), [c] = le(), p = T(() => {
+    const s = `${Le(c, "0.prop")}_attrs`;
+    return !rs(Le(l, s, {}));
+  }, [c]);
+  return /* @__PURE__ */ e.jsx(Bs.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(fe, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(ve, { className: "border-b border-gray-300 bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
       r.heading === "Attributes" && p ? /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-block h-[8px] w-[8px] rounded-full bg-blue-600" }) : null,
       /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: a(r.heading) })
     ] }) }),
-    /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((s) => de(s, "component") ? $.createElement(s.component, { key: s.label }) : de(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...s }, s.label) : s.styleType === "accordion" && o(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Hs, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Te, { ...s }, s.label))
+    /* @__PURE__ */ e.jsx(we, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      r.items.map((s) => de(s, "component") ? $.createElement(s.component, { key: s.label }) : de(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...s }, s.label) : s.styleType === "accordion" && o(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ds, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Re, { ...s }, s.label))
     ) })
   ] }) });
-}, Bs = () => {
-  const r = X(), [a] = le(), { t } = F(), l = Yr(), o = _e(), n = Se(r._type), d = g(oe(a), "prop"), p = g(n.props, `${d}.presets`, {});
+}, As = () => {
+  const r = M(), [a] = le(), { t } = E(), l = zr(), o = Se(), n = Te(r._type), c = g(oe(a), "prop"), p = g(n.props, `${c}.presets`, {});
   if (b(l) && (!de(n, "props") || b(p)))
     return null;
-  const s = (c) => {
-    const u = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+  const s = (d) => {
+    const u = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     o([r._id], u, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Hr, { children: [
-    /* @__PURE__ */ e.jsx(Dr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Vr, { children: [
+    /* @__PURE__ */ e.jsx(Hr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
       /* @__PURE__ */ e.jsx(Qt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Br, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(pt, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Dr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar h-full", children: [
       b(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(Ae, { children: [
+        /* @__PURE__ */ e.jsxs(Ie, { children: [
           n.type,
           " ",
           t("presets")
         ] }),
         /* @__PURE__ */ e.jsx(Pe, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(p).map((c) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(p[c]), children: [
-          me(Y(t(c))),
+        /* @__PURE__ */ e.jsx($e, { children: he(p).map((d) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(p[d]), children: [
+          me(Y(t(d))),
           /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
       b(l) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(Ae, { children: t("Global presets") }),
+        /* @__PURE__ */ e.jsx(Ie, { children: t("Global presets") }),
         /* @__PURE__ */ e.jsx(Pe, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(l).map((c) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(l[c]), children: [
-          me(Y(t(c))),
+        /* @__PURE__ */ e.jsx($e, { children: he(l).map((d) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(l[d]), children: [
+          me(Y(t(d))),
           /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
@@ -2289,17 +2298,17 @@ const js = (r) => {
   ] }) });
 };
 function Is() {
-  const { flexChild: r, gridChild: a } = Ir(), [t] = le();
+  const { flexChild: r, gridChild: a } = Br(), [t] = le();
   return b(t) ? null : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Bs, {}),
-    /* @__PURE__ */ e.jsxs(at, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: gs }),
-      a ? /* @__PURE__ */ e.jsx(xe, { section: xs }) : null,
-      ys.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
+    /* @__PURE__ */ e.jsx(As, {}),
+    /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+      r && /* @__PURE__ */ e.jsx(xe, { section: xs }),
+      a ? /* @__PURE__ */ e.jsx(xe, { section: ys }) : null,
+      hs.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
     ] })
   ] });
 }
-const As = {
+const Ps = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2310,8 +2319,8 @@ const As = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Po = () => {
-  const r = X(), { t: a } = F(), [t, l] = $.useState(""), [o, n] = $.useState({
+}, $o = () => {
+  const r = M(), { t: a } = E(), [t, l] = $.useState(""), [o, n] = $.useState({
     onDrag: (s) => s,
     onDragEnd: (s) => s,
     dragStartY: 0,
@@ -2320,15 +2329,15 @@ const As = {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = ce(
+  }), c = ce(
     (s) => {
-      const c = !g(o, "negative", !1), u = g(o, "cssProperty", "");
+      const d = !g(o, "negative", !1), u = g(o, "cssProperty", "");
       let i = parseFloat(o.dragStartValue);
-      i = Ue(i) ? 0 : i;
-      let h = As[o.dragUnit];
+      i = Ke(i) ? 0 : i;
+      let h = Ps[o.dragUnit];
       (q(u, "scale") || u === "opacity") && (h = 10);
       let x = (o.dragStartY - s.pageY) / h + i;
-      c && x < 0 && (x = 0), u === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
+      d && x < 0 && (x = 0), u === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
     },
     [o],
     50
@@ -2347,17 +2356,17 @@ const As = {
   return Bt(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(er, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(ht.Provider, { value: { setDragData: n }, children: [
+  ] }) }) : /* @__PURE__ */ e.jsx(ct, { children: /* @__PURE__ */ e.jsxs(ht.Provider, { value: { setDragData: n }, children: [
     o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        onMouseMove: d,
+        onMouseMove: c,
         onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(pt, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
-      /* @__PURE__ */ e.jsx(ds, {}),
+    /* @__PURE__ */ e.jsxs(dt, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
+      /* @__PURE__ */ e.jsx(cs, {}),
       /* @__PURE__ */ e.jsx(Is, {}),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx("br", {}),
@@ -2366,5 +2375,5 @@ const As = {
   ] }) });
 };
 export {
-  Po as default
+  $o as default
 };