@chaibuilder/sdk 1.2.43 → 1.2.45

package/dist/{Settings-a7j3ihRx.js → Settings-Bj2wI1at.js}

@@ -1,22 +1,21 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
-import * as de from "react";
-import I, { useState as w, useMemo as S, useEffect as z, useCallback as H, memo as ft, createContext as Ke, useContext as ae } from "react";
-import { useThrottledCallback as ue } from "@react-hookz/web";
-import { forEach as Re, isArray as xe, omit as vt, truncate as jt, includes as F, get as g, first as oe, split as wt, startCase as Y, toLower as le, isEmpty as b, map as C, find as Ge, last as Ct, filter as ve, set as qe, debounce as kt, keys as je, cloneDeep as Nt, each as _t, capitalize as we, reject as St, nth as $e, startsWith as W, isNumber as Tt, parseInt as Rt, isNaN as Je, findLast as Vt, flatten as J, intersection as Qe, has as ce, kebabCase as Ht, isNull as Dt } from "lodash-es";
-import { useTranslation as X } from "react-i18next";
-import { CopyIcon as Bt, PlusIcon as Ve, Cross2Icon as et, EyeOpenIcon as Pt, EyeClosedIcon as Ae, BorderAllIcon as O, WidthIcon as T, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as It, ArrowTopRightIcon as $t, ArrowBottomRightIcon as At, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Et, AlignRightIcon as Ot, StretchHorizontallyIcon as Ft, FontItalicIcon as Yt, UnderlineIcon as zt, OverlineIcon as Xt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as He, MinusIcon as Ut, BoxIcon as tt, RowSpacingIcon as Kt, TriangleDownIcon as Gt, CrossCircledIcon as qt, CaretDownIcon as Jt, MixerHorizontalIcon as rt } from "@radix-ui/react-icons";
-import { a2 as st, aO as Qt, aP as er, B as G, aQ as tr, aR as rr, aS as sr, aT as lr, aU as ar, aV as or, aW as nr, M as q, aK as lt, $ as ir, a0 as dr, a1 as cr, aX as pr, Z as ur, ab as xr, _ as gr, ac as $, ad as A, ae as M, aY as hr, aZ as yr, a_ as mr, a$ as br, b0 as fr, b1 as vr, b2 as jr, R as at, Q as ot, h as wr, b3 as Cr, b4 as nt, b5 as Ce, b6 as ke, b7 as Ne, Y as ge, n as De, I as it, L as dt, b8 as ct, aq as pt, b9 as _e, j as kr, ba as Nr, J as he, v as _r, P as ut, o as Me, av as Sr, aw as Tr, ax as Rr, bb as Be, ay as Le, az as Ee, bc as Oe, bd as Fe, be as Ye, S as Vr, bf as Hr, a6 as Dr, a7 as Br, a8 as Pr, a9 as Ir, aa as V, ai as $r, aj as Ar, ak as me, al as be } from "./ChaiBuilderEditor-yf2LRjL1.js";
-import { l as Mr } from "./controls-VTdJhdSz.js";
-import { Check as Lr, EditIcon as Er, TrashIcon as Or, BrushIcon as Fr, DeleteIcon as Yr } from "lucide-react";
-import { getBlockComponent as Pe, getChaiDataProviders as zr, useGlobalStylingPresets as Xr } from "@chaibuilder/runtime";
-import { J as Zr, a as Wr, d as Ur } from "./index-e0c8PmRQ.js";
-import Kr from "@rjsf/core";
-import Gr from "@rjsf/validator-ajv8";
-import { u as qr } from "./useCanvasSettings-tkzd9Qrw.js";
-import Jr from "react-autosuggest";
-import Qr from "fuse.js";
-import { A as es, C as ye, g as ts } from "./Class-6Hz2KzYb.js";
-import { a as rs } from "./STRINGS--j49GZJP.js";
+import * as ne from "react";
+import I, { useState as j, useMemo as T, useEffect as P, useCallback as H, memo as mt, useRef as ft, createContext as Fe, useContext as se } from "react";
+import { useThrottledCallback as de } from "@react-hookz/web";
+import { forEach as Ne, isArray as ce, omit as vt, truncate as jt, includes as X, get as y, first as ae, split as wt, startCase as F, toLower as re, isEmpty as m, map as _, find as Ze, last as Ct, filter as ye, set as We, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as be, reject as St, kebabCase as Tt, startsWith as W, nth as He, isNumber as Rt, parseInt as Vt, isNaN as Ue, findLast as Ht, flatten as De, intersection as Dt, has as ie, isNull as Bt } from "lodash-es";
+import { useTranslation as B } from "react-i18next";
+import { CopyIcon as It, PlusIcon as _e, Cross2Icon as Ge, EyeOpenIcon as Pt, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as At, ArrowTopRightIcon as $t, ArrowBottomRightIcon as Mt, ArrowBottomLeftIcon as Et, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Ot, AlignRightIcon as zt, StretchHorizontallyIcon as Yt, FontItalicIcon as Xt, UnderlineIcon as Ft, OverlineIcon as Zt, LetterCaseUppercaseIcon as Wt, Cross1Icon as Ut, InfoCircledIcon as Se, MinusIcon as Gt, BoxIcon as Ke, RowSpacingIcon as Kt, TriangleDownIcon as qt, CrossCircledIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as qe } from "@radix-ui/react-icons";
+import { a2 as Je, aP as Qe, aQ as et, B as A, aR as tt, aS as er, aT as tr, aU as rr, aV as sr, aW as ar, aX as lr, M as G, aK as rt, $ as or, a0 as nr, a1 as ir, aY as dr, Z as cr, ab as pr, _ as ur, ac as $, ad as M, ae as E, aZ as gr, a_ as xr, a$ as yr, b0 as hr, b1 as br, b2 as mr, b3 as fr, R as st, Q as at, h as lt, b4 as vr, b5 as ot, b6 as me, b7 as fe, b8 as ve, b9 as jr, ba as wr, ah as Cr, bb as kr, Y as pe, n as Te, I as nt, L as it, bc as dt, bd as je, j as Nr, be as _r, J as ue, v as Sr, P as Tr, o as Ie, av as Rr, aw as Vr, ax as Hr, bf as ct, ay as Pe, az as Ae, bg as $e, bh as Me, bi as Ee, S as Dr } from "./ChaiBuilderEditor-1K-wcF5D.js";
+import { Check as Br, EditIcon as Ir, TrashIcon as Pr, Loader as Ar, SparklesIcon as $r, DeleteIcon as Mr } from "lucide-react";
+import { getBlockComponent as Re, getChaiDataProviders as Er, useGlobalStylingPresets as Lr } from "@chaibuilder/runtime";
+import { J as Or, a as zr, d as Yr } from "./index-e0c8PmRQ.js";
+import Xr from "@rjsf/core";
+import Fr from "@rjsf/validator-ajv8";
+import { u as Zr } from "./useCanvasSettings-qs-7bwyA.js";
+import Wr from "react-autosuggest";
+import Ur from "fuse.js";
+import { A as Gr, C as ge, g as Kr } from "./utils-iMv3T4WT.js";
+import { a as qr } from "./STRINGS--j49GZJP.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -28,6 +27,7 @@ import "flagged";
 import "./Functions-7jnEwJyw.js";
 import "tailwind-merge";
 import "./MODIFIERS-cBT31iqE.js";
+import "tree-model";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -50,29 +50,29 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-function ss(r) {
-  const l = [], t = {};
-  function n(s, i) {
-    Re(i, (a, d) => {
-      const o = s ? `${s}.${d}` : d, c = xe(a) ? "list" : typeof a;
-      l.push(o), t[o] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !xe(a) && n(o, a);
+function Jr(r) {
+  const a = [], t = {};
+  function n(l, s) {
+    Ne(s, (d, c) => {
+      const o = l ? `${l}.${c}` : c, p = ce(d) ? "list" : typeof d;
+      a.push(o), t[o] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ce(d) && n(o, d);
     });
   }
-  return n("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
+  return n("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
 }
-const Se = ({ data: r, fullView: l }) => {
+const we = ({ data: r, fullView: a }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return l ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(st, { children: /* @__PURE__ */ e.jsx(
-      Zr,
+    /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsx(
+      Or,
       {
         data: r,
-        shouldExpandNode: Wr,
+        shouldExpandNode: zr,
         style: {
-          ...Ur,
+          ...Yr,
           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"
@@ -83,462 +83,506 @@ const Se = ({ data: r, fullView: l }) => {
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     r
   ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: jt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, ze = ({
+}, Le = ({
   type: r,
-  value: l = "",
+  value: a = "",
   setValue: t,
   data: n,
-  onChange: s,
-  dataType: i,
-  appliedBindings: a
+  onChange: l,
+  dataType: s,
+  appliedBindings: d
 }) => {
-  const { paths: d, pathsType: o } = ss(n), c = r === "PROP" ? Pe(n == null ? void 0 : n._type) : {}, h = r === "PROP", [p, u] = w(!1), y = S(() => r === "PROP" ? d.filter(
-    (x) => !F(a, x) && g(c, `props.${oe(wt(x, "."))}.binding`)
-  ) : d.filter((x) => i === g(o, x, "")), [r, d, a, i, c]);
-  return z(() => {
-    l && s(l);
-  }, [l, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  const { paths: c, pathsType: o } = Jr(n), p = r === "PROP" ? Re(n == null ? void 0 : n._type) : {}, h = r === "PROP", [i, g] = j(!1), x = T(() => r === "PROP" ? c.filter(
+    (u) => !X(d, u) && y(p, `props.${ae(wt(u, "."))}.binding`)
+  ) : c.filter((u) => s === y(o, u, "")), [r, c, d, s, p]);
+  return P(() => {
+    a && l(a);
+  }, [a, r]), /* @__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(le(r)) }),
-      /* @__PURE__ */ e.jsxs(Qt, { open: p, onOpenChange: u, children: [
-        /* @__PURE__ */ e.jsx(er, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          G,
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: F(re(r)) }),
+      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: g, children: [
+        /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          A,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${b(l) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
-            children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${m(a) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
+            children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(i) }),
-                l
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(s) }),
+                a
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              Y(le(r))
+              F(re(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(tr, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(rr, { children: [
-          /* @__PURE__ */ e.jsx(sr, { placeholder: `Choose ${le(r)}...` }),
-          /* @__PURE__ */ e.jsxs(lr, { children: [
-            /* @__PURE__ */ e.jsx(ar, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(or, { children: C(y, (x) => /* @__PURE__ */ e.jsxs(
-              nr,
+        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(er, { children: [
+          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${re(r)}...` }),
+          /* @__PURE__ */ e.jsxs(rr, { children: [
+            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(ar, { children: _(x, (u) => /* @__PURE__ */ e.jsxs(
+              lr,
               {
-                value: x,
+                value: u,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (f) => {
-                  t(Ge(y, (j) => j === f) || null), u(!1);
+                onSelect: (v) => {
+                  t(Ze(x, (C) => C === v) || null), g(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Lr, { className: `h-4 w-4 text-green-500 ${l === x ? "" : "opacity-0"}` }),
-                    x
+                    /* @__PURE__ */ e.jsx(Br, { className: `h-4 w-4 text-green-500 ${a === u ? "" : "opacity-0"}` }),
+                    u
                   ] }),
-                  h ? /* @__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(o, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Se, { data: g(n, x) }) })
+                  h ? /* @__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: F(y(o, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: y(n, u) }) })
                 ]
               },
-              x
+              u
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !h && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Se, { data: g(n, l, ""), fullView: !0 }) })
+    !h && !m(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: y(n, a, ""), fullView: !0 }) })
   ] });
-}, ls = ({
+}, Qr = ({
   appliedBindings: r = [],
-  onAddBinding: l,
+  onAddBinding: a,
   editMode: t,
   item: n
 }) => {
-  const [s, i] = w(t ? n.key : ""), [a, d] = w(t ? n.value : ""), o = q(), [c] = lt(), h = H(
-    (y, x) => {
-      if (b(y))
+  const [l, s] = j(t ? n.key : ""), [d, c] = j(t ? n.value : ""), o = G(), [p] = rt(), h = H(
+    (x, u) => {
+      if (m(x))
         return "";
       {
-        const f = g(x === "PROP" ? o : c, y, "");
-        if (xe(f))
+        const v = y(u === "PROP" ? o : p, x, "");
+        if (ce(v))
           return "list";
-        const j = typeof f;
-        return j === "string" ? "text" : j === "object" ? "model" : j;
+        const C = typeof v;
+        return C === "string" ? "text" : C === "object" ? "model" : C;
       }
     },
-    [o, c]
-  ), [p, u] = w(t ? h(n.key, "PROP") : "");
+    [o, p]
+  ), [i, g] = j(t ? h(n.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(ir, { children: [
-      /* @__PURE__ */ e.jsx(dr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(cr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(or, { children: [
+      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(ir, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
-        ze,
+        Le,
         {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: s,
-          setValue: i,
-          onChange: (y) => {
-            const x = h(y, "PROP");
-            i(y), p !== x && d(""), u(x);
+          value: l,
+          setValue: s,
+          onChange: (x) => {
+            const u = h(x, "PROP");
+            s(x), i !== u && c(""), g(u);
           },
           data: o,
-          dataType: p,
+          dataType: i,
           appliedBindings: r
         }
       ),
       /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
       /* @__PURE__ */ e.jsx(
-        ze,
+        Le,
         {
           type: "PATH",
-          isDisabled: b(s),
+          isDisabled: m(l),
           placeholder: "Enter data path",
-          value: a,
-          setValue: d,
-          onChange: (y) => {
-            const x = h(y, "PATH");
-            d(p === x ? y : "");
+          value: d,
+          setValue: c,
+          onChange: (x) => {
+            const u = h(x, "PATH");
+            c(i === u ? x : "");
           },
-          data: c,
-          dataType: p,
+          data: p,
+          dataType: i,
           appliedBindings: r
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(pr, { children: /* @__PURE__ */ e.jsx(
-      G,
+    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
+      A,
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(s) && b(a),
-        onClick: () => l({ key: s, value: a }),
+        disabled: m(l) && m(d),
+        onClick: () => a({ key: l, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, xt = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: n, editMode: s = !0, item: i = {} }) => {
-  const [a, d] = w(!1);
-  return /* @__PURE__ */ e.jsxs(ur, { children: [
-    /* @__PURE__ */ e.jsx(xr, { disabled: r, asChild: !0, onClick: () => d(!0), children: l }),
-    a && /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(
-      ls,
+}, pt = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: n, editMode: l = !0, item: s = {} }) => {
+  const [d, c] = j(!1);
+  return /* @__PURE__ */ e.jsxs(cr, { children: [
+    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => c(!0), children: a }),
+    d && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
+      Qr,
       {
-        item: i,
-        editMode: s,
+        item: s,
+        editMode: l,
         appliedBindings: n,
         onAddBinding: (o) => {
-          t(o), d(!1);
+          t(o), c(!1);
         }
       }
     ) })
   ] });
-}, as = ({
+}, es = ({
   item: r,
-  onAddBinding: l,
+  onAddBinding: a,
   onRemove: t,
   selectedBlock: n,
-  dataProvider: s,
-  appliedBindings: i
+  dataProvider: l,
+  appliedBindings: s
 }) => {
-  const [a, d] = w("string"), o = (c, h) => {
-    if (b(c))
+  const [d, c] = j("string"), o = (p, h) => {
+    if (m(p))
       return "";
     {
-      const p = g(h === "PROP" ? n : s, c, "");
-      if (xe(p))
+      const i = y(h === "PROP" ? n : l, p, "");
+      if (ce(i))
         return "list";
-      const u = typeof p;
-      return u === "string" ? "text" : u === "object" ? "model" : u;
+      const g = typeof i;
+      return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
-  return z(() => d(() => o(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return P(() => c(() => o(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(Se, { data: g(s, r.value, "") }),
+    /* @__PURE__ */ e.jsx(we, { data: y(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(xt, { editMode: !0, onAddBinding: l, appliedBindings: i, item: r, children: /* @__PURE__ */ e.jsx(Er, { 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(pt, { editMode: !0, onAddBinding: a, appliedBindings: s, 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(
-        Or,
+        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(a) && !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(a) })
+    !m(d) && !m(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: F(d) })
   ] });
-}, os = ({ bindingData: r, onChange: l }) => {
-  const t = q(), [n] = lt(), s = zr(), [i, a] = w(
-    C(r, (p, u) => ({ key: u, value: p }))
+}, ts = ({ bindingData: r, onChange: a }) => {
+  const t = G(), [n] = rt(), l = Er(), [s, d] = j(
+    _(r, (i, g) => ({ key: g, value: i }))
   );
-  z(() => {
-    a(C(r, (p, u) => ({ key: u, value: p })));
+  P(() => {
+    d(_(r, (i, g) => ({ key: g, value: i })));
   }, [t == null ? void 0 : t._id, r]);
-  const d = S(() => {
-    if (b(n))
+  const c = T(() => {
+    if (m(n))
       return !0;
-    if (b(i))
+    if (m(s))
       return !1;
-    const p = Ct(i);
-    return b(p == null ? void 0 : p.key) || b(p == null ? void 0 : p.value);
-  }, [n, i]), o = (p) => {
-    const u = ve(i, (y) => y.key !== p.key);
-    a([...u, p]), h([...u, p]);
-  }, c = (p) => {
-    const u = ve(i, (y, x) => p !== x);
-    h([...u]);
+    const i = Ct(s);
+    return m(i == null ? void 0 : i.key) || m(i == null ? void 0 : i.value);
+  }, [n, s]), o = (i) => {
+    const g = ye(s, (x) => x.key !== i.key);
+    d([...g, i]), h([...g, i]);
+  }, p = (i) => {
+    const g = ye(s, (x, u) => i !== u);
+    h([...g]);
   }, h = H(
-    (p = []) => {
-      if (a(p), b(p)) {
-        l({});
+    (i = []) => {
+      if (d(i), m(i)) {
+        a({});
         return;
       }
-      const u = {};
-      Re(p, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && qe(u, y.key, y.value);
-      }), l(u);
+      const g = {};
+      Ne(i, (x) => {
+        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && We(g, x.key, x.value);
+      }), a(g);
     },
-    [l]
+    [a]
   );
-  return b(s) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
+  return m(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    C(i, (p, u) => /* @__PURE__ */ e.jsx(
-      as,
+    _(s, (i, g) => /* @__PURE__ */ e.jsx(
+      es,
       {
-        item: p,
+        item: i,
         onAddBinding: o,
-        onRemove: () => c(u),
+        onRemove: () => p(g),
         selectedBlock: t,
         dataProvider: n,
-        appliedBindings: C(i, "key")
+        appliedBindings: _(s, "key")
       },
-      p.key
+      i.key
     )),
     /* @__PURE__ */ e.jsxs($, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(A, { disabled: b(n), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        xt,
+      /* @__PURE__ */ e.jsx(M, { disabled: m(n), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        pt,
         {
-          disabled: d,
-          appliedBindings: C(i, "key"),
+          disabled: c,
+          appliedBindings: _(s, "key"),
           onAddBinding: o,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
-              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${d ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(n) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: m(n) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      d && /* @__PURE__ */ e.jsx(M, { sideOffset: -55, className: "text-[11px]", children: b(n) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      c && /* @__PURE__ */ e.jsx(E, { sideOffset: -55, className: "text-[11px]", children: m(n) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, 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" }), pe = ft(({ id: r, properties: l, formData: t, onChange: n }) => {
-  const [s, i] = w(t), a = { type: "object", properties: {} }, d = {};
-  Object.keys(l).forEach((c) => {
-    const h = l[c];
-    if (F(["slot", "styles"], h.type))
+}, rs = () => /* @__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" }), Ce = mt(({ id: r, properties: a, formData: t, onChange: n }) => {
+  const [l, s] = j(t), d = { type: "object", properties: {} }, c = {};
+  Object.keys(a).forEach((p) => {
+    const h = a[p];
+    if (X(["slot", "styles"], h.type))
       return;
-    const p = c;
-    a.properties[p] = hr(h), d[p] = yr(h);
-  }), z(() => {
-    i(t);
+    const i = p;
+    d.properties[i] = gr(h), c[i] = xr(h);
+  }), P(() => {
+    s(t);
   }, [r]);
-  const o = ue(
-    async ({ formData: c }, h) => {
-      n({ formData: c }, h);
+  const o = de(
+    async ({ formData: p }, h) => {
+      n({ formData: p }, h);
     },
     [n],
     1e3
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Kr,
+    Xr,
     {
       widgets: {
-        binding: ns,
-        richtext: mr,
-        icon: br,
-        image: fr
+        binding: rs,
+        richtext: yr,
+        icon: hr,
+        image: br
       },
-      fields: { link: vr },
+      fields: { link: mr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Gr,
-      uiSchema: d,
-      schema: a,
-      formData: s,
-      onChange: ({ formData: c }, h) => {
-        h && (i(c), o({ formData: c }, h));
+      validator: Fr,
+      uiSchema: c,
+      schema: d,
+      formData: l,
+      onChange: ({ formData: p }, h) => {
+        h && (s(p), o({ formData: p }, h));
       }
     }
   );
-}), is = () => {
-  const [r, l] = qr(), t = jr(), n = (a, d) => {
-    l((o) => ({ ...o, [a]: d }));
+}), ss = () => {
+  const [r, a] = Zr(), t = fr(), n = (d, c) => {
+    a((o) => ({ ...o, [d]: c }));
   };
-  if (b(t))
+  if (m(t))
     return null;
-  const { block: s, settings: i } = t;
+  const { block: l, settings: s } = 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"
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "bg-white pb-2", children: /* @__PURE__ */ e.jsx(
-      pe,
+      Ce,
       {
-        id: s == null ? void 0 : s._id,
-        onChange: ({ formData: a }) => n(s._id, a),
-        formData: g(r, s._id, {}),
-        properties: i
+        id: l == null ? void 0 : l._id,
+        onChange: ({ formData: d }) => n(l._id, d),
+        formData: y(r, l._id, {}),
+        properties: s
       }
     ) })
   ] });
 };
-function ds() {
-  const r = q(), l = at(), t = ot(), n = Pe(r._type), s = { ...r }, [i, a] = w(s), d = wr("dataBindingSupport", !1), o = ({ formData: x }, f, j) => {
-    if (f && (i == null ? void 0 : i._id) === r._id) {
-      const P = f.replace("root.", "");
-      t([r._id], { [P]: g(x, P) }, j);
+function as() {
+  const r = G(), a = st(), t = at(), n = Re(r._type), l = { ...r }, [s, d] = j(l), c = lt("dataBindingSupport", !1), o = ({ formData: x }, u, v) => {
+    if (u && (s == null ? void 0 : s._id) === r._id) {
+      const C = u.replace("root.", "");
+      t([r._id], { [C]: y(x, C) }, v);
     }
-  }, c = H(
-    kt(({ formData: x }, f, j) => {
-      o({ formData: x }, f, j), a(x);
+  }, p = H(
+    kt(({ formData: x }, u, v) => {
+      o({ formData: x }, u, v), d(x);
     }, 1500),
     [r == null ? void 0 : r._id]
-  ), h = ({ formData: x }, f) => {
-    if (f) {
-      const j = f.replace("root.", "");
-      l([r._id], Cr(j, g(x, j.split(".")))), c({ formData: x }, f, { [j]: g(i, j) });
+  ), h = ({ formData: x }, u) => {
+    if (u) {
+      const v = u.replace("root.", "");
+      a(
+        [r._id],
+        vr(v, y(x, v.split(".")))
+      ), p({ formData: x }, u, { [v]: y(s, v) });
     }
-  }, p = {
-    _name: Mr({
-      title: "Name",
-      default: g(r, "_name", r._type)
-    })
-  }, u = je(g(s, "_bindings", {})), y = S(() => {
-    const x = Nt(g(n, "props", {}));
-    return d && _t(u, (f) => delete x[f]), x;
-  }, [n, u, d]);
+  }, i = he(y(l, "_bindings", {})), g = T(() => {
+    const x = Nt(y(n, "props", {}));
+    return c && _t(i, (u) => delete x[u]), x;
+  }, [n, i, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(pe, { id: r == null ? void 0 : r._id, onChange: h, formData: s, properties: p }),
-    /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    /* @__PURE__ */ e.jsx(is, {}),
-    d ? /* @__PURE__ */ e.jsxs(nt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(Ce, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(ke, { 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(ss, {}),
+    c ? /* @__PURE__ */ e.jsxs(ot, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(me, { 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: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${b(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${m(y(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
-        /* @__PURE__ */ e.jsx(Ne, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          os,
+        /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
+          ts,
           {
-            bindingData: g(r, "_bindings", {}),
+            bindingData: y(r, "_bindings", {}),
             onChange: (x) => {
               o({ formData: { _bindings: x } }, "root._bindings");
             }
           }
         ) })
       ] }),
-      /* @__PURE__ */ e.jsxs(Ce, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(ke, { 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(me, { 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.jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-blue-500" }),
           "Static Content"
         ] }) }),
-        /* @__PURE__ */ e.jsxs(Ne, { className: "pt-4", children: [
-          b(u) ? 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: [
+        /* @__PURE__ */ e.jsxs(ve, { className: "pt-4", children: [
+          m(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: C(u, we).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: _(i, be).join(", ") }),
             " ",
-            u.length === 1 ? "property" : "properties",
+            i.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            pe,
+            Ce,
             {
               id: r == null ? void 0 : r._id,
               onChange: h,
-              formData: s,
-              properties: y
+              formData: l,
+              properties: g
             }
           )
         ] })
       ] })
     ] }) : /* @__PURE__ */ e.jsx(
-      pe,
+      Ce,
       {
         id: r == null ? void 0 : r._id,
         onChange: h,
-        formData: s,
-        properties: y
+        formData: l,
+        properties: g
       }
-    ),
-    /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
+    )
   ] });
 }
-const Xe = new Qr(es, {
+const ls = ({ blockId: r }) => {
+  const { t: a } = B(), { askAi: t, loading: n, error: l } = jr(), [s, d] = j(""), c = ft(null);
+  P(() => {
+    var p;
+    (p = c.current) == null || p.focus();
+  }, []);
+  const o = () => {
+    l || d("");
+  };
+  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(
+      wr,
+      {
+        ref: c,
+        value: s,
+        onChange: (p) => d(p.target.value),
+        placeholder: a("Ask AI to edit styles"),
+        className: "w-full border border-gray-400 focus:border-0",
+        rows: 3,
+        onKeyDown: (p) => {
+          p.key === "Enter" && (p.preventDefault(), t("styles", r, s, o));
+        }
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "my-2 flex items-center gap-2", children: [
+      n ? null : /* @__PURE__ */ e.jsx(
+        A,
+        {
+          disabled: s.trim().length < 5 || n,
+          onClick: () => t("styles", r, s, o),
+          variant: "default",
+          className: "w-fit",
+          size: "sm",
+          children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(Ar, { className: "h-5 w-5 animate-spin" }),
+            a("Generating... Please wait")
+          ] }) : a("Edit with AI")
+        }
+      ),
+      n ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ e.jsxs(Cr, { className: "flex w-full items-center space-x-1 px-4 py-1 pl-2", children: [
+          /* @__PURE__ */ e.jsx(kr, { className: "h-4 w-4 animate-spin text-gray-500" }),
+          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
+        ] }),
+        /* @__PURE__ */ e.jsx(A, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
+      ] }) : null
+    ] })
+  ] });
+}, Oe = new Ur(Gr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function cs() {
-  var U;
-  const [r] = ge(), l = q(), t = De(), n = it(), [s] = dt(), [i, a] = w(""), { toast: d } = ct(), o = (U = oe(r)) == null ? void 0 : U.prop, c = St((g(l, o, "").replace(rs, "").split(",").pop() || "").split(" "), b), h = () => {
-    const k = i.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(s, k, !0), a("");
-  }, [p, u] = w([]), y = ({ value: k }) => {
-    const _ = k.trim().toLowerCase(), D = _.match(/.+:/g);
-    let E = [];
-    if (D && D.length > 0) {
-      const [K] = D, m = _.replace(K, "");
-      E = Xe.search(m).map((N) => ({
-        ...N,
-        item: { ...N.item, name: K + N.item.name }
+function ut() {
+  var S;
+  const { t: r } = B(), [a] = pe(), t = G(), n = Te(), l = nt(), [s] = it(), d = lt("askAiCallBack", null), [c, o] = j(""), { toast: p } = dt(), h = (S = ae(a)) == null ? void 0 : S.prop, i = St((y(t, h, "").replace(qr, "").split(",").pop() || "").split(" "), m), g = () => {
+    const w = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    n(s, w, !0), o("");
+  }, [x, u] = j([]), v = ({ value: w }) => {
+    const D = w.trim().toLowerCase(), Z = D.match(/.+:/g);
+    let b = [];
+    if (Z && Z.length > 0) {
+      const [f] = Z, N = D.replace(f, "");
+      b = Oe.search(N).map((z) => ({
+        ...z,
+        item: { ...z.item, name: f + z.item.name }
       }));
     } else
-      E = Xe.search(_);
-    u(C(E, "item"));
-  }, x = () => {
+      b = Oe.search(D);
+    return u(_(b, "item"));
+  }, C = () => {
     u([]);
-  }, f = (k) => k.name, j = (k) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: k.name }), P = {
+  }, U = (w) => w.name, L = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), K = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
-    placeholder: "Enter class name",
-    value: i,
-    onKeyDown: (k) => {
-      k.key === "Enter" && i.trim() !== "" && h();
+    placeholder: r("Enter classes separated by space"),
+    value: c,
+    onKeyDown: (w) => {
+      w.key === "Enter" && c.trim() !== "" && g();
     },
-    onChange: (k, { newValue: _ }) => a(_),
+    onChange: (w, { newValue: D }) => o(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, L = () => {
+  }, q = () => {
     if (navigator.clipboard === void 0) {
-      d({
+      p({
         title: "Clipboard not supported",
         description: "Please use Chrome, Firefox or Safari",
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(c.join(" ")), d({
+    navigator.clipboard.writeText(i.join(" ")), p({
       title: "Copied",
       description: "Classes copied to clipboard"
     });
@@ -546,83 +590,209 @@ function cs() {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${p.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
+      className: `flex ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto border-b-2 bg-gray-100 pb-4`,
       children: [
-        /* @__PURE__ */ e.jsxs(pt, { className: "mt-2 flex items-center gap-x-2", children: [
-          /* @__PURE__ */ e.jsx("span", { children: "Add Tailwind classes" }),
-          /* @__PURE__ */ e.jsxs($, { children: [
-            /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(Bt, { onClick: L, className: "cursor-pointer" }) }),
-            /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("p", { children: "Copy classes to clipboard" }) })
-          ] })
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
+            /* @__PURE__ */ e.jsxs($, { children: [
+              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(It, { onClick: q, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
+            ] })
+          ] }),
+          d ? /* @__PURE__ */ e.jsxs(Qe, { children: [
+            /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
+              /* @__PURE__ */ e.jsx($r, { 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(ls, { blockId: t == null ? void 0 : t._id }) })
+          ] }) : null
         ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
+        /* @__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(
-            Jr,
+            Wr,
             {
-              suggestions: p,
-              onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: x,
-              getSuggestionValue: f,
-              renderSuggestion: j,
-              inputProps: P,
+              suggestions: x,
+              onSuggestionsFetchRequested: v,
+              onSuggestionsClearRequested: C,
+              getSuggestionValue: U,
+              renderSuggestion: L,
+              inputProps: K,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
               theme: {
                 suggestion: "bg-transparent",
-                suggestionHighlighted: "bg-gray-700 ",
+                suggestionHighlighted: "!bg-gray-300 ",
                 suggestionsContainerOpen: "absolute bg-gray-100 z-50 max-h-[230px] overflow-y-auto w-full  border border-gray-600 rounded-md"
               }
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            G,
+            A,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: h,
-              disabled: i.trim() === "",
+              onClick: g,
+              disabled: c.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(Ve, {})
+              children: /* @__PURE__ */ e.jsx(_e, {})
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(c) && /* @__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" }),
-          de.Children.toArray(
-            c.map((k) => /* @__PURE__ */ e.jsxs(
-              "div",
-              {
-                className: "group relative truncate max-w-[260px] flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
-                children: [
-                  k,
-                  /* @__PURE__ */ e.jsx(
-                    et,
-                    {
-                      onClick: () => n(s, [k]),
-                      className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer "
-                    }
-                  )
-                ]
-              },
-              k
-            ))
-          )
-        ] })
+        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ne.Children.toArray(
+          i.map((w) => /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-gray-300 bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300",
+              children: [
+                w,
+                /* @__PURE__ */ e.jsx(
+                  Ge,
+                  {
+                    onClick: () => l(s, [w]),
+                    className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
+                  }
+                )
+              ]
+            },
+            w
+          ))
+        ) })
       ]
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
+const os = ({ onAdd: r }) => {
+  const { t: a } = B(), [t, n] = j({ key: "", value: "" }), l = () => {
+    m(t.key) || (r({ ...t, key: Tt(t.key) }), n({ key: "", value: "" }));
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200", children: [
+    /* @__PURE__ */ e.jsx(
+      je,
+      {
+        name: "key",
+        className: "h-6",
+        onChange: (s) => n({ ...t, key: s.target.value }),
+        value: t.key,
+        placeholder: a("Name"),
+        autoComplete: "off",
+        autoCapitalize: "off",
+        onKeyDown: (s) => {
+          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
+        }
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-1.5", children: /* @__PURE__ */ e.jsx(
+      je,
+      {
+        className: "h-6",
+        name: "value",
+        onChange: (s) => n({ ...t, value: s.target.value }),
+        value: t.value,
+        placeholder: a("Value"),
+        autoComplete: "off",
+        autoCapitalize: "off",
+        onKeyDown: (s) => {
+          s.key === "Enter" && (s.preventDefault(), m(t.key) || l());
+        }
+      }
+    ) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e.jsxs(A, { disabled: m(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
+        /* @__PURE__ */ e.jsxs("span", { children: [
+          a("Add"),
+          " "
+        ] }),
+        /* @__PURE__ */ e.jsx(_e, {})
+      ] }),
+      m(t.key) ? null : /* @__PURE__ */ e.jsx(A, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: a("Cancel") })
+    ] })
+  ] });
+}, ns = () => {
+  const r = G(), [a, t] = j([]), [n] = pe(), l = st(), s = at(), { t: d } = B(), { toast: c } = dt(), o = `${y(n, "0.prop")}_attrs`;
+  ne.useEffect(() => {
+    const g = _(y(r, o), (x, u) => ({ key: u, value: x }));
+    m(g) ? t([]) : t(g);
+  }, [y(r, o)]);
+  const p = (g) => {
+    const x = ye(a, (u, v) => g !== v);
+    i(x);
+  }, h = (g) => {
+    const x = Ze(a, { key: g.key });
+    if (x && (x.value.startsWith("dnd-") || x.value.startsWith("#dnd-"))) {
+      c({
+        title: d("Cannot add predefined attribute"),
+        variant: "destructive",
+        description: d(`"(${g.key})" cannot be added as it is a predefined attribute for this block`)
+      });
+      return;
+    }
+    const u = [...a, g];
+    i(u);
+  }, i = ne.useCallback(
+    (g = []) => {
+      const x = {};
+      Ne(g, (u) => {
+        m(u.key) || We(x, u.key, u.value);
+      }), s([y(r, "_id")], { [o]: x });
+    },
+    [r, l, o]
+  );
+  return /* @__PURE__ */ e.jsx("div", { className: "flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 p-2 text-xs text-gray-700", children: [
+      m(a) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: d("Attributes") }) }),
+      ne.Children.toArray(
+        _(a, (g) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
+          /* @__PURE__ */ e.jsxs($, { delayDuration: 1e3, children: [
+            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-[90%] cursor-default truncate px-1 hover:bg-gray-200", children: [
+              g.key,
+              " ",
+              /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
+              " ",
+              g.value
+            ] }) }),
+            /* @__PURE__ */ e.jsxs(E, { className: "max-w-[200px]", children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                d("Name"),
+                ": ",
+                g.key
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                d("Value"),
+                ": ",
+                g.value
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs($, { children: [
+            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                disabled: W(g.value, "dnd-"),
+                className: "invisible group-hover:visible",
+                onClick: () => p(a.indexOf(g)),
+                children: /* @__PURE__ */ e.jsx(Mr, { className: "w-4 text-gray-500" })
+              }
+            ) }),
+            /* @__PURE__ */ e.jsx(E, { className: "max-w-[200px]", children: W(g.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
+          ] })
+        ] }))
+      )
+    ] }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
+    /* @__PURE__ */ e.jsx(os, { onAdd: (g) => h(g) })
+  ] }) });
+}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], is = {
   heading: "flex.heading",
   items: [
-    { type: "arbitrary", label: "flex.basis", units: B, property: "flexBasis" },
+    { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
     { type: "range", label: "flex.order", property: "order" },
     { type: "dropdown", label: "flex.flex", property: "flexGrowShrink" },
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, us = {
+}, ds = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -633,17 +803,83 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, xs = [
+}, cs = [
+  {
+    heading: "Styles",
+    items: [
+      { component: ut },
+      { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
+      {
+        styleType: "multiple",
+        label: "layout.margin",
+        negative: !0,
+        units: [...k, "auto"],
+        options: [
+          { key: "margin", label: "layout.margin_all" },
+          { key: "marginX", label: "layout.margin_lr" },
+          { key: "marginY", label: "layout.margin_tb" },
+          { key: "marginTop", label: "layout.margin_top" },
+          { key: "marginRight", label: "layout.margin_right" },
+          { key: "marginBottom", label: "layout.margin_bottom" },
+          { key: "marginLeft", label: "layout.margin_left" }
+        ]
+      },
+      {
+        styleType: "multiple",
+        label: "layout.padding",
+        options: [
+          { key: "padding", label: "layout.padding_all" },
+          { key: "paddingX", label: "layout.padding_lr" },
+          { key: "paddingY", label: "layout.padding_tb" },
+          { key: "paddingTop", label: "layout.padding_top" },
+          { key: "paddingRight", label: "layout.padding_right" },
+          { key: "paddingBottom", label: "layout.padding_bottom" },
+          { key: "paddingLeft", label: "layout.padding_left" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "Typography",
+        items: [
+          { type: "dropdown", property: "textAlign", label: "typography.align" },
+          { type: "dropdown", property: "fontFamily", label: "typography.font" },
+          { type: "arbitrary", property: "fontSize", label: "typography.size", units: k },
+          { type: "arbitrary", property: "lineHeight", label: "typography.height", units: k.concat("-") },
+          { type: "range", property: "fontWeight", label: "typography.weight" },
+          { type: "color", property: "textColor", label: "typography.color" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "Background",
+        items: [
+          { type: "color", label: "background.bgcolor", property: "backgroundColor" },
+          { type: "dropdown", label: "background.attachment", property: "backgroundAttachment" },
+          { type: "dropdown", label: "background.clipping", property: "backgroundClip" },
+          { type: "dropdown", label: "background.origin", property: "backgroundOrigin" },
+          { type: "dropdown", label: "background.position", property: "backgroundPosition" },
+          { type: "dropdown", label: "background.repeat", property: "backgroundRepeat" },
+          { type: "dropdown", label: "background.size", property: "backgroundSize" }
+        ]
+      }
+    ]
+  },
+  {
+    heading: "Attributes",
+    items: [{ component: ns }]
+  }
+], Ta = [
   {
     heading: "layout.heading",
     items: [
-      { type: "arbitrary", label: "layout.width", units: B.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: B.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "layout.width", units: k.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: k.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "layout.margin",
         negative: !0,
-        units: [...B, "auto"],
+        units: [...k, "auto"],
         options: [
           { key: "margin", label: "layout.margin_all" },
           { key: "marginX", label: "layout.margin_lr" },
@@ -684,16 +920,16 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
         styleType: "accordion",
         heading: "size.min_width_height",
         items: [
-          { type: "arbitrary", label: "size.min_width", units: B.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "size.min_height", units: B.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "size.min_width", units: k.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "size.min_height", units: k.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "size.max_width_height",
         items: [
-          { type: "arbitrary", label: "size.max_width", units: B.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "size.max_height", units: B.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "size.max_width", units: k.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "size.max_height", units: k.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -710,7 +946,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
   {
     heading: "display.heading",
     items: [
-      { type: "dropdown", label: "display.display", property: "display", units: B },
+      { type: "dropdown", label: "display.display", property: "display", units: k },
       {
         styleType: "accordion",
         heading: "display.flex_options",
@@ -761,7 +997,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
         styleType: "accordion",
         heading: "display.visibility_opacity",
         items: [
-          { type: "dropdown", label: "display.visibility", property: "visibility", units: B },
+          { type: "dropdown", label: "display.visibility", property: "visibility", units: k },
           { type: "arbitrary", label: "display.opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -837,8 +1073,8 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
     heading: "typography.heading",
     items: [
       { type: "dropdown", property: "fontFamily", label: "typography.font" },
-      { type: "arbitrary", property: "fontSize", label: "typography.size", units: B },
-      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: B.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "typography.size", units: k },
+      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: k.concat("-") },
       { type: "range", property: "fontWeight", label: "typography.weight" },
       { type: "color", property: "textColor", label: "typography.color" },
       {
@@ -1035,89 +1271,89 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: cs }]
+    items: [{ component: ut }]
   }
 ], gt = {
   "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: Pt,
-  invisible: Ae,
+  invisible: Be,
   // display
-  hidden: Ae,
-  gap: O,
-  gapX: T,
-  gapY: R,
-  spaceX: T,
-  spaceY: R,
-  overscroll: O,
-  overscrollX: T,
-  overscrollY: R,
-  overflow: O,
-  overflowX: T,
-  overflowY: R,
-  top: ee,
-  right: te,
-  bottom: re,
-  left: se,
-  inset: O,
-  insetX: T,
-  insetY: R,
-  border: O,
-  borderX: T,
-  borderY: R,
-  borderTop: ee,
-  borderRight: te,
-  borderBottom: re,
-  borderLeft: se,
-  borderRadius: O,
-  borderRadiusX: T,
-  borderRadiusY: R,
-  borderRadiusTop: ee,
-  borderRadiusRight: te,
-  borderRadiusBottom: re,
-  borderRadiusLeft: se,
-  borderRadiusTopLeft: It,
+  hidden: Be,
+  gap: Y,
+  gapX: R,
+  gapY: V,
+  spaceX: R,
+  spaceY: V,
+  overscroll: Y,
+  overscrollX: R,
+  overscrollY: V,
+  overflow: Y,
+  overflowX: R,
+  overflowY: V,
+  top: J,
+  right: Q,
+  bottom: ee,
+  left: te,
+  inset: Y,
+  insetX: R,
+  insetY: V,
+  border: Y,
+  borderX: R,
+  borderY: V,
+  borderTop: J,
+  borderRight: Q,
+  borderBottom: ee,
+  borderLeft: te,
+  borderRadius: Y,
+  borderRadiusX: R,
+  borderRadiusY: V,
+  borderRadiusTop: J,
+  borderRadiusRight: Q,
+  borderRadiusBottom: ee,
+  borderRadiusLeft: te,
+  borderRadiusTopLeft: At,
   borderRadiusTopRight: $t,
-  borderRadiusBottomRight: At,
-  borderRadiusBottomLeft: Mt,
-  divideXWidth: T,
-  divideYWidth: R,
-  scale: O,
-  scaleX: T,
-  scaleY: R,
-  skewX: T,
-  skewY: R,
-  translateX: T,
-  translateY: R,
+  borderRadiusBottomRight: Mt,
+  borderRadiusBottomLeft: Et,
+  divideXWidth: R,
+  divideYWidth: V,
+  scale: Y,
+  scaleX: R,
+  scaleY: V,
+  skewX: R,
+  skewY: V,
+  translateX: R,
+  translateY: V,
   // padding
-  padding: O,
-  paddingX: T,
-  paddingY: R,
-  paddingTop: ee,
-  paddingRight: te,
-  paddingBottom: re,
-  paddingLeft: se,
+  padding: Y,
+  paddingX: R,
+  paddingY: V,
+  paddingTop: J,
+  paddingRight: Q,
+  paddingBottom: ee,
+  paddingLeft: te,
   // margin
-  margin: O,
-  marginX: T,
-  marginY: R,
-  marginTop: ee,
-  marginRight: te,
-  marginBottom: re,
-  marginLeft: se,
+  margin: Y,
+  marginX: R,
+  marginY: V,
+  marginTop: J,
+  marginRight: Q,
+  marginBottom: ee,
+  marginLeft: te,
   // text-align
   textLeft: Lt,
-  textCenter: Et,
-  textRight: Ot,
-  textJustify: Ft,
+  textCenter: Ot,
+  textRight: zt,
+  textJustify: Yt,
   // font style
-  italic: Yt,
+  italic: Xt,
   // "not-italic": "",
   // decoration
-  underline: zt,
-  overline: Xt,
+  underline: Ft,
+  overline: Zt,
   // transform
-  uppercase: Zt,
+  uppercase: Wt,
   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",
@@ -1158,7 +1394,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
       }
     )
   ] }),
-  "float-none": et,
+  "float-none": Ge,
   // 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(
@@ -1230,41 +1466,41 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
       }
     )
   ] }),
-  static: Wt
-}, ne = Ke({ canReset: !1, canChange: !0 }), gs = ({ children: r, canReset: l = !1, canChange: t = !0 }) => (
+  static: Ut
+}, le = Fe({ canReset: !1, canChange: !0 }), ps = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(ne.Provider, { value: { canReset: l, canChange: t }, children: r })
-), ht = ({ label: r, property: l, onChange: t }) => {
-  const n = S(() => g(ye, `${l}.classes`, [""]), [l]), s = ie(l), i = S(() => g(s, "cls", ""), [s]), { canChange: a } = ae(ne), d = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: d ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(_e, { className: "w-[70%] rounded py-1", readOnly: !0, value: i }),
+  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: a, canChange: t }, children: r })
+), xt = ({ label: r, property: a, onChange: t }) => {
+  const n = T(() => y(ge, `${a}.classes`, [""]), [a]), l = oe(a), s = T(() => y(l, "cls", ""), [l]), { canChange: d } = se(le), c = /\[.*\]/g.test(s);
+  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e.jsx(je, { className: "w-[70%] rounded py-1", readOnly: !0, value: s }),
     /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(A, { 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(He, {}) }) }),
-      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind arbitrary value." })
+      /* @__PURE__ */ e.jsx(M, { 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(Se, {}) }) }),
+      /* @__PURE__ */ e.jsx(E, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    Te,
+    ke,
     {
       rounded: r,
-      onChange: (o) => t(o, l),
-      selected: i,
+      onChange: (o) => t(o, a),
+      selected: s,
       options: n,
-      disabled: !a
+      disabled: !d
     }
   ) });
 };
-function Te({ selected: r, onChange: l, rounded: t = !1, options: n, disabled: s = !1 }) {
-  const i = r.replace(/.*:/g, "").trim(), { undo: a, redo: d } = kr();
+function ke({ selected: r, onChange: a, rounded: t = !1, options: n, disabled: l = !1 }) {
+  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = Nr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !n.length || s,
+      disabled: !n.length || l,
       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: (o) => l(o.target.value),
+      onChange: (o) => a(o.target.value),
       onKeyDown: (o) => {
-        o.ctrlKey && (o.key === "z" && a(), o.key === "y" && d());
+        o.ctrlKey && (o.key === "z" && d(), o.key === "y" && c());
       },
-      value: i,
+      value: s,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         I.Children.toArray(
@@ -1274,57 +1510,57 @@ function Te({ selected: r, onChange: l, rounded: t = !1, options: n, disabled: s
     }
   );
 }
-const hs = ({ property: r, onChange: l }) => {
-  const { canReset: t, canChange: n } = ae(ne), s = ie(r), i = S(() => g(s, "cls", ""), [s]), a = S(() => g(ye, `${r}.classes`, [""]), [r]), d = a.indexOf(i) > -1 ? a.indexOf(i) : 0, o = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const us = ({ property: r, onChange: a }) => {
+  const { canReset: t, canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]), d = T(() => y(ge, `${r}.classes`, [""]), [r]), c = d.indexOf(s) > -1 ? d.indexOf(s) : 0, o = /\[.*\]/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: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !n && (!t || d - 1 < 0),
-        onClick: () => l($e(a, d - 1), r),
+        disabled: !n && (!t || c - 1 < 0),
+        onClick: () => a(He(d, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ut,
+          Gt,
           {
-            className: !n && (!t || d - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !n && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ht, { label: !1, property: r, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(xt, { label: !1, property: r, onChange: a }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !n && (!t || d + 1 >= a.length),
-        onClick: () => l($e(a, d + 1), r),
+        disabled: !n && (!t || c + 1 >= d.length),
+        onClick: () => a(He(d, c + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ve,
+          _e,
           {
-            className: !n && (!t || d + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !n && (!t || c + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, ys = ({ property: r, onChange: l }) => {
-  const t = S(() => g(ye, `${r}.classes`, [""]), [r]), { canChange: n } = ae(ne), s = ie(r), i = S(() => g(s, "cls", ""), [s]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs($, { children: [
-    /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, gs = ({ property: r, onChange: a }) => {
+  const t = T(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: _(t, (d) => /* @__PURE__ */ e.jsxs($, { children: [
+    /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !n,
-        onClick: () => l(a, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${i === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: I.createElement(g(gt, a, tt))
+        onClick: () => a(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: I.createElement(y(gt, d, Ke))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(M, { children: Y(le(a)) })
+    /* @__PURE__ */ e.jsx(E, { children: F(re(d)) })
   ] })) });
-}, ms = {
+}, xs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1336,39 +1572,39 @@ const hs = ({ property: r, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, bs = ({ property: r, onChange: l }) => {
-  const t = ie(r), n = S(() => g(t, "cls", ""), [t]), { canChange: s } = ae(ne), [i, a] = w([]), [d, o] = w({ color: "", shade: "" }), c = n.split("-"), h = g(c, "1", ""), p = g(c, "2", ""), u = H(
+}, ys = ({ property: r, onChange: a }) => {
+  const t = oe(r), n = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = j([]), [c, o] = j({ color: "", shade: "" }), p = n.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), g = H(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (a([]), o({ color: x })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
+    (u) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (d([]), o({ color: u })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: u, shade: v.shade ? v.shade : "500" })));
     },
-    [a, o]
+    [d, o]
   );
-  z(() => {
+  P(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
-      return a([]);
-    a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+      return d([]);
+    d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [h]);
-  const y = H(
+  const x = H(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      o({ color: h, shade: x });
+    (u) => {
+      o({ color: h, shade: u });
     },
     [h]
   );
-  return z(() => {
+  return P(() => {
     o({ color: "", shade: "" });
-  }, [t]), z(() => {
-    const f = `${g(ms, r, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    f.match(new RegExp(g(ye, `${r}.regExp`, ""))) && l(f, r);
-  }, [d, l, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+  }, [t]), P(() => {
+    const v = `${y(xs, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    v.match(new RegExp(y(ge, `${r}.regExp`, ""))) && a(v, r);
+  }, [c, 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(
-      Te,
+      ke,
       {
-        disabled: !s,
+        disabled: !l,
         rounded: !0,
         selected: h,
-        onChange: u,
+        onChange: g,
         options: [
           "current",
           "transparent",
@@ -1401,20 +1637,20 @@ const hs = ({ property: r, onChange: l }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Te, { rounded: !0, selected: p, disabled: !h || !s, onChange: y, options: i }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ke, { rounded: !0, selected: i, disabled: !h || !l, onChange: x, options: s }) })
   ] });
-}, Ze = (r, l) => {
+}, ze = (r, a) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && l.includes(t))
+  if ((t === "auto" || t === "none") && a.includes(t))
     return { value: "", unit: t };
-  const n = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
+  const n = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
   t = t.replace(n, "");
-  const s = r.match(n), i = s && s.length > 1, a = !b(t) && Number.isNaN(Number(t));
-  return i || a ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
+  const l = r.match(n), s = l && l.length > 1, d = !m(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] : "" };
 };
-const fs = (r) => {
-  const l = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const hs = (r) => {
+  const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1423,18 +1659,18 @@ const fs = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (F(r, "skew-"))
-    return { value: `${l}${t}`, unit: "deg" };
-  if (F(r, "rotate-"))
-    return { value: `${l}${t}`, unit: "deg" };
-  if (F(r, "opacity-"))
+  if (X(r, "skew-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (X(r, "rotate-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (X(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (F(r, "duration-") || F(r, "delay-"))
+  if (X(r, "duration-") || X(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (F(r, "translate-") && !t.includes("/"))
-    return { value: `${l}${`${t / 4}`}`, unit: "rem" };
-  if (F(r, "scale-"))
-    return { value: `${l}${`${t / 100}`}`, unit: "-" };
+  if (X(r, "translate-") && !t.includes("/"))
+    return { value: `${a}${`${t / 4}`}`, unit: "rem" };
+  if (X(r, "scale-"))
+    return { value: `${a}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
     const n = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
     if (n)
@@ -1537,208 +1773,208 @@ const fs = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [n, s] = C(t.split("/"), (i) => parseInt(i, 10));
-    return { value: l + (n / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [n, l] = _(t.split("/"), (s) => parseInt(s, 10));
+    return { value: a + (n / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Tt(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Rt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const vs = (r) => {
-  if (b(r))
+const bs = (r) => {
+  if (m(r))
     return { value: "", unit: "" };
-  const l = r.match(/\[.*\]/g);
-  if (l === null)
-    return js(r);
-  const t = g(l, "0", "").replace(/\[|\]/g, ""), n = r.startsWith("-") ? "-" : "", s = oe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${n}${s}`, unit: t.replace(s, "") };
-}, js = (r) => b(r) ? { value: "", unit: "" } : fs(r), yt = I.createContext({
+  const a = r.match(/\[.*\]/g);
+  if (a === null)
+    return ms(r);
+  const t = y(a, "0", "").replace(/\[|\]/g, ""), n = r.startsWith("-") ? "-" : "", l = ae(t.match(/\d+.\d+|\d+/g));
+  return { value: `${n}${l}`, unit: t.replace(l, "") };
+}, ms = (r) => m(r) ? { value: "", unit: "" } : hs(r), yt = I.createContext({
   setDragData: () => {
   }
-}), ws = ({
+}), fs = ({
   unit: r,
-  currentValue: l,
+  currentValue: a,
   onDrag: t,
   onDragEnd: n,
-  onDragStart: s,
-  negative: i,
-  cssProperty: a
+  onDragStart: l,
+  negative: s,
+  cssProperty: d
 }) => {
-  const { setDragData: d } = ae(yt);
+  const { setDragData: c } = se(yt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
       onMouseDown: (o) => {
-        const c = {
+        const p = {
           onDrag: t,
           onDragEnd: n,
           dragging: !0,
           dragStartY: o.pageY,
-          dragStartValue: `${l}`,
+          dragStartValue: `${a}`,
           dragUnit: r,
-          negative: i,
-          cssProperty: a
+          negative: s,
+          cssProperty: d
         };
-        s(c), d(c);
+        l(p), c(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
       children: /* @__PURE__ */ e.jsx(Kt, {})
     }
   );
-}, Cs = ({ onSelect: r, current: l, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((n) => /* @__PURE__ */ e.jsx(
-  G,
+}, vs = ({ 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((n) => /* @__PURE__ */ e.jsx(
+  A,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: l === n ? "primary" : void 0,
+    color: a === n ? "primary" : void 0,
     size: "sm",
-    onClick: (s) => {
-      s.stopPropagation(), r(n);
+    onClick: (l) => {
+      l.stopPropagation(), r(n);
     },
     children: n
   },
   n
-)) }), We = 50, ks = (r) => {
-  const [l, t] = w(!1), [n, s] = w(""), { currentClass: i, onChange: a, classPrefix: d, cssProperty: o, units: c, negative: h } = r, [p, u] = w(o != null && o.toLowerCase().includes("width") ? "%" : c[0]), [y, x] = w(!1), [f, j] = w(""), [P, L] = w(!1), [U, k] = w(!1);
-  z(() => {
-    const { value: m, unit: v } = vs(i);
-    if (v === "") {
-      s(m), u(o != null && o.toLowerCase().includes("width") ? "%" : oe(c));
+)) }), Ye = 50, js = (r) => {
+  const [a, t] = j(!1), [n, l] = j(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: o, units: p, negative: h } = r, [i, g] = j(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [v, C] = j(""), [U, L] = j(!1), [K, q] = j(!1);
+  P(() => {
+    const { value: b, unit: f } = bs(s);
+    if (f === "") {
+      l(b), g(o != null && o.toLowerCase().includes("width") ? "%" : ae(p));
       return;
     }
-    u(v), s(v === "class" || b(m) ? "" : m);
-  }, [i, o, c]);
-  const _ = ue((m) => a(m), [a], We), D = ue((m) => a(m, !1), [a], We), E = H(
-    (m = !1) => {
-      const v = Ze(`${n}`, c);
-      if (g(v, "error", !1)) {
-        x(!0);
+    g(f), l(f === "class" || m(b) ? "" : b);
+  }, [s, o, p]);
+  const S = de((b) => d(b), [d], Ye), w = de((b) => d(b, !1), [d], Ye), D = H(
+    (b = !1) => {
+      const f = ze(`${n}`, p);
+      if (y(f, "error", !1)) {
+        u(!0);
         return;
       }
-      const N = g(v, "unit") !== "" ? g(v, "unit") : p;
+      const N = y(f, "unit") !== "" ? y(f, "unit") : i;
       if (N === "auto" || N === "none") {
-        _(`${d}${N}`);
+        S(`${c}${N}`);
         return;
       }
-      if (g(v, "value") === "")
+      if (y(f, "value") === "")
         return;
-      const Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      m ? D(Q) : _(Q);
+      const z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      b ? w(z) : S(z);
     },
-    [_, D, n, p, d, c]
-  ), K = H(
-    (m) => {
-      const v = Ze(`${n}`, c);
-      if (g(v, "error", !1)) {
-        x(!0);
+    [S, w, n, i, c, p]
+  ), Z = H(
+    (b) => {
+      const f = ze(`${n}`, p);
+      if (y(f, "error", !1)) {
+        u(!0);
         return;
       }
-      if (m === "auto" || m === "none") {
-        _(`${d}${m}`);
+      if (b === "auto" || b === "none") {
+        S(`${c}${b}`);
         return;
       }
-      if (g(v, "value") === "")
+      if (y(f, "value") === "")
         return;
-      const N = g(v, "unit") !== "" ? g(v, "unit") : m, Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      _(Q);
+      const N = y(f, "unit") !== "" ? y(f, "unit") : b, z = `${y(f, "value", "").startsWith("-") ? "-" : ""}${c}[${y(f, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      S(z);
     },
-    [_, n, d, c]
+    [S, n, c, p]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: p === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
+  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: s }),
     /* @__PURE__ */ e.jsxs($, { children: [
-      /* @__PURE__ */ e.jsx(A, { 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(He, {}) }) }),
-      /* @__PURE__ */ e.jsx(M, { children: "Current value is using a Tailwind preset class." })
+      /* @__PURE__ */ e.jsx(M, { 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(Se, {}) }) }),
+      /* @__PURE__ */ e.jsx(E, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${P ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${U ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(p) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: p === "class",
-          onKeyPress: (m) => {
-            m.key === "Enter" && E();
+          readOnly: i === "class",
+          onKeyPress: (b) => {
+            b.key === "Enter" && D();
           },
-          onKeyDown: (m) => {
-            if (m.keyCode !== 38 && m.keyCode !== 40)
+          onKeyDown: (b) => {
+            if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            m.preventDefault(), k(!0);
-            const v = Rt(m.target.value);
-            let N = Je(v) ? 0 : v;
-            m.keyCode === 38 && (N += 1), m.keyCode === 40 && (N -= 1);
-            const Z = `${N}`, bt = `${Z.startsWith("-") ? "-" : ""}${d}[${Z.replace("-", "")}${p === "-" ? "" : p}]`;
-            D(bt);
+            b.preventDefault(), q(!0);
+            const f = Vt(b.target.value);
+            let N = Ue(f) ? 0 : f;
+            b.keyCode === 38 && (N += 1), b.keyCode === 40 && (N -= 1);
+            const O = `${N}`, bt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
+            w(bt);
           },
-          onKeyUp: (m) => {
-            U && (m.preventDefault(), k(!1));
+          onKeyUp: (b) => {
+            K && (b.preventDefault(), q(!1));
           },
-          onBlur: () => E(),
-          onChange: (m) => {
-            x(!1), s(m.target.value);
+          onBlur: () => D(),
+          onChange: (b) => {
+            u(!1), l(b.target.value);
           },
-          onClick: (m) => {
-            var v;
-            (v = m == null ? void 0 : m.target) == null || v.select(), t(!1);
+          onClick: (b) => {
+            var f;
+            (f = b == null ? void 0 : b.target) == null || f.select(), t(!1);
           },
-          value: P ? f : n,
+          value: U ? v : n,
           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"
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs($, { open: l, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs($, { open: a, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!l),
+            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: p }),
-              c.length > 1 ? /* @__PURE__ */ e.jsx(Gt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
+              p.length > 1 ? /* @__PURE__ */ e.jsx(qt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          Cs,
+        /* @__PURE__ */ e.jsx(_r, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          vs,
           {
-            units: c,
-            current: p,
-            onSelect: (m) => {
-              t(!1), u(m), K(m);
+            units: p,
+            current: i,
+            onSelect: (b) => {
+              t(!1), g(b), Z(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(p) !== -1 || P ? null : /* @__PURE__ */ e.jsx(
-      ws,
+    ["none", "auto"].indexOf(i) !== -1 || U ? null : /* @__PURE__ */ e.jsx(
+      fs,
       {
         onDragStart: () => L(!0),
-        onDragEnd: (m) => {
-          if (j(() => ""), L(!1), b(m))
+        onDragEnd: (b) => {
+          if (C(() => ""), L(!1), m(b))
             return;
-          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
-          _(Z);
+          const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          S(O);
         },
-        onDrag: (m) => {
-          if (b(m))
+        onDrag: (b) => {
+          if (m(b))
             return;
-          j(m);
-          const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
-          D(Z);
+          C(b);
+          const f = `${b}`, O = `${f.startsWith("-") ? "-" : ""}${c}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
+          w(O);
         },
         currentValue: n,
-        unit: p,
+        unit: i,
         negative: h,
         cssProperty: o
       }
     )
   ] }) }) });
-}, ie = (r) => {
-  const l = he();
-  return Vt(l, { property: r });
-}, Ns = (r, l) => {
+}, oe = (r) => {
+  const a = ue();
+  return Ht(a, { property: r });
+}, ws = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1747,8 +1983,8 @@ const vs = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[g(r, "mq", "xs")] <= t[l];
-}, _s = {
+  return t[y(r, "mq", "xs")] <= t[a];
+}, Cs = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1814,87 +2050,87 @@ const vs = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Ue = {
+}, Xe = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Ss = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
-  const { t: l } = X(), { type: t = "icons", label: n, property: s, onEmitChange: i = () => {
-  }, units: a, negative: d = !1 } = r, [o] = _r(), [c] = ut(), [, h] = Me(), p = ie(s), u = De(), y = it(), [x] = dt(), f = S(() => g(p, "fullCls", ""), [p]), j = H(
-    (D, E = !0) => {
-      const K = { dark: o, mq: h, mod: c, cls: D, property: s, fullCls: "" };
-      (o || c !== "") && (K.mq = "xs");
-      const m = ts(K);
-      u(x, [m], E);
+}, ks = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
+  const { t: a } = B(), { type: t = "icons", label: n, property: l, onEmitChange: s = () => {
+  }, units: d, negative: c = !1 } = r, [o] = Sr(), [p] = Tr(), [, h] = Ie(), i = oe(l), g = Te(), x = nt(), [u] = it(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
+    (w, D = !0) => {
+      const Z = { dark: o, mq: h, mod: p, cls: w, property: l, fullCls: "" };
+      (o || p !== "") && (Z.mq = "xs");
+      const b = Kr(Z);
+      g(u, [b], D);
     },
-    [x, o, h, c, s, u]
-  ), P = H(() => {
-    y(x, [f]);
-  }, [x, f, y]), L = S(() => Ns(p, h), [p, h]);
-  z(() => {
-    i(L, p);
-  }, [L, i, p]);
-  const [, , U] = Me(), k = H(
-    (D) => {
-      U({
+    [u, o, h, p, l, g]
+  ), U = H(() => {
+    x(u, [v]);
+  }, [u, v, x]), L = T(() => ws(i, h), [i, h]);
+  P(() => {
+    s(L, i);
+  }, [L, s, i]);
+  const [, , K] = Ie(), q = H(
+    (w) => {
+      K({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[D]);
+      }[w]);
     },
-    [U]
-  ), _ = g(p, "dark", null) === o && g(p, "mod", null) === c && g(p, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(gs, { canChange: L, canReset: 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] ${p && !_ ? "text-foreground" : ""}`, children: l(n) }) }),
+    [K]
+  ), S = y(i, "dark", null) === o && y(i, "mod", null) === p && y(i, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(ps, { canChange: L, canReset: i && S, 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 && !S ? "text-foreground" : ""}`, children: a(n) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ks,
+          js,
           {
-            currentClass: g(p, "cls", ""),
-            classPrefix: g(_s, s, ""),
-            units: a || [],
-            onChange: j,
-            negative: d,
-            cssProperty: s
+            currentClass: y(i, "cls", ""),
+            classPrefix: y(Cs, l, ""),
+            units: d || [],
+            onChange: C,
+            negative: c,
+            cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(ys, { property: s, onChange: j }),
-        t === "range" && /* @__PURE__ */ e.jsx(hs, { property: s, onChange: j }),
-        t === "color" && /* @__PURE__ */ e.jsx(bs, { property: s, onChange: j }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(ht, { label: n, property: s, onChange: j })
+        t === "icons" && /* @__PURE__ */ e.jsx(gs, { property: l, onChange: C }),
+        t === "range" && /* @__PURE__ */ e.jsx(us, { property: l, onChange: C }),
+        t === "color" && /* @__PURE__ */ e.jsx(ys, { property: l, onChange: C }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: n, property: l, onChange: C })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => P(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(qt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && p ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => U(), 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" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(M, { 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(He, {})
+            children: /* @__PURE__ */ e.jsx(Se, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(E, { 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: [
-            Ss(g(p, "mq")),
-            o && !p.dark ? "(Light mode)" : ""
+            ks(y(i, "mq")),
+            o && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => k(g(p, "mq")),
+              onClick: () => q(y(i, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                g(p, "mq").toUpperCase()
+                y(i, "mq").toUpperCase()
               ]
             }
           )
@@ -1902,307 +2138,151 @@ const vs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, Ts = ["px", "%", "em", "rem", "ch", "vh", "vw"], mt = ({
+}, Ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
   label: r,
-  options: l,
+  options: a,
   borderB: t = !1,
   borderT: n = !1,
-  type: s = "arbitrary",
-  units: i = Ts,
-  negative: a = !1
+  type: l = "arbitrary",
+  units: s = Ns,
+  negative: d = !1
 }) => {
-  const { t: d } = X(), [o, c] = w(l[0].key), h = he(), p = H((u) => C(h, "property").includes(u), [h]);
+  const { t: c } = B(), [o, p] = j(a[0].key), h = ue(), i = H((g) => _(h, "property").includes(g), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${n ? "border-t" : ""}`,
       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: d(r) }),
+          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(r) }),
           /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
-            l.map(({ label: u, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+            a.map(({ label: g, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
+              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => c(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === o ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => p(x),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === o ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     I.createElement("div", {
-                      className: p(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: i(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    I.createElement(g(gt, y, tt), { className: "text-inherit w-3 h-3" })
+                    I.createElement(y(gt, x, Ke), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(M, { children: Y(le(u)) })
+              /* @__PURE__ */ e.jsx(E, { children: F(re(g)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Ie,
+          Ve,
           {
-            type: s,
-            units: [...i],
+            type: l,
+            units: [...s],
             label: "",
             property: o,
-            negative: a
+            negative: d
           }
         ) })
       ]
     }
   );
-}, Rs = ({ heading: r, items: l }) => {
-  const { t } = X(), n = he(), s = S(() => {
-    const i = (o) => J(
-      o.map((c) => c.styleType === "multiple" ? C(c.options, "key") : c.property)
-    ), a = J(
-      l.map((o) => o.styleType === "accordion" ? i(o.items) : o.styleType === "multiple" ? C(o.options, "key") : o.property)
-    ), d = C(n, "property");
-    return Qe(a, d).length > 0;
-  }, [n, l]);
+}, _s = ({ heading: r, items: a }) => {
+  const { t } = B(), n = ue(), l = T(() => {
+    const s = (o) => De(
+      o.map((p) => p.styleType === "multiple" ? _(p.options, "key") : p.property)
+    ), d = De(
+      a.map((o) => o.styleType === "accordion" ? s(o.items) : o.styleType === "multiple" ? _(o.options, "key") : o.property)
+    ), c = _(n, "property");
+    return Dt(d, c).length > 0;
+  }, [n, 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: [
       t(r),
-      s ? /* @__PURE__ */ e.jsx(
+      l ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${s ? "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: l.map((i) => i.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...i }, i.label) : /* @__PURE__ */ e.jsx(Ie, { ...i }, i.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label)) })
   ] });
-}, Vs = Ke({}), fe = ({ section: r }) => {
-  const { t: l } = X(), t = he(), n = H(
-    (a = []) => {
+}, Ss = Fe({}), xe = ({ section: r }) => {
+  const { t: a } = B(), t = ue(), n = H(
+    (s = []) => {
       const d = {};
-      for (let c = 0; c < t.length; c++)
-        d[t[c].property] = t[c].cls;
-      let o = !0;
-      for (const c in a)
-        if (!ce(d, c) || d[c] !== a[c]) {
-          o = !1;
+      for (let o = 0; o < t.length; o++)
+        d[t[o].property] = t[o].cls;
+      let c = !0;
+      for (const o in s)
+        if (!ie(d, o) || d[o] !== s[o]) {
+          c = !1;
           break;
         }
-      return o;
+      return c;
     },
     [t]
-  ), s = S(() => {
-    if (t.length > 0 && r.heading === "classes.heading")
-      return !0;
-    const a = (c) => J(
-      c.map((h) => h.styleType === "multiple" ? J(C(h.options, "key")) : h.property)
-    ), d = J(
-      r.items.map((c) => c.styleType === "accordion" ? a(c.items) : c.styleType === "multiple" ? J(C(c.options, "key")) : c.property)
-    ), o = C(t, "property");
-    return Qe(d, o).length > 0;
-  }, [t, r.heading, r.items]), i = S(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Vs.Provider, { value: i, children: /* @__PURE__ */ e.jsxs(Ce, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ke, { 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 ${s ? "bg-blue-500" : "bg-gray-300"}` }),
-      l(r.heading)
-    ] }) }),
-    /* @__PURE__ */ e.jsx(Ne, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      r.items.map((a) => ce(a, "component") ? I.createElement(a.component, { key: a.label }) : ce(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(mt, { ...a }, a.label) : a.styleType === "accordion" && n(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(Rs, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...a }, a.label))
+  ), l = T(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(Ss.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__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: I.Children.toArray(
+      r.items.map((s) => ie(s, "component") ? I.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && n(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(_s, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
     ) })
   ] }) });
-}, Hs = () => {
-  const r = q(), [l] = ge(), { t } = X(), n = Xr(), s = De(), i = Pe(r._type), a = g(oe(l), "prop"), d = g(i.props, `${a}.presets`, {});
-  if (b(n) && (!ce(i, "props") || b(d)))
+}, Ts = () => {
+  const r = G(), [a] = pe(), { t } = B(), n = Lr(), l = Te(), s = Re(r._type), d = y(ae(a), "prop"), c = y(s.props, `${d}.presets`, {});
+  if (m(n) && (!ie(s, "props") || m(c)))
     return null;
-  const o = (c) => {
-    const h = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    s([r._id], h, !0);
+  const o = (p) => {
+    const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l([r._id], h, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Sr, { children: [
-    /* @__PURE__ */ e.jsx(Tr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(G, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Rr, { children: [
+    /* @__PURE__ */ e.jsx(Vr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(Jt, {})
+      /* @__PURE__ */ e.jsx(Qt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Rr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Be, { className: "no-scrollbar h-full", children: [
-      b(d) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(Le, { children: [
-          i.type,
+    /* @__PURE__ */ e.jsx(Hr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
+      m(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(Pe, { children: [
+          s.type,
           " ",
           t("presets")
         ] }),
-        /* @__PURE__ */ e.jsx(Ee, {}),
-        /* @__PURE__ */ e.jsx(Oe, { children: je(d).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(d[c]), children: [
-          we(Y(t(c))),
-          /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+        /* @__PURE__ */ e.jsx(Ae, {}),
+        /* @__PURE__ */ e.jsx($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(c[p]), children: [
+          be(F(t(p))),
+          /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      b(n) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(Le, { children: t("Global presets") }),
-        /* @__PURE__ */ e.jsx(Ee, {}),
-        /* @__PURE__ */ e.jsx(Oe, { children: je(n).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(n[c]), children: [
-          we(Y(t(c))),
-          /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+      m(n) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(Pe, { children: t("Global presets") }),
+        /* @__PURE__ */ e.jsx(Ae, {}),
+        /* @__PURE__ */ e.jsx($e, { children: he(n).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(n[p]), children: [
+          be(F(t(p))),
+          /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Ds() {
-  const [r, l] = ut(), { flexChild: t, gridChild: n } = Vr(), { t: s } = X(), i = Hr(), [a] = ge();
-  return b(a) ? /* @__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(rt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: s("no_styling_block_selected") })
+function Rs() {
+  const { flexChild: r, gridChild: a } = Dr(), { t } = B(), [n] = pe();
+  return m(n) ? /* @__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(qe, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: t("no_styling_block_selected") })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Hs, {}),
-    /* @__PURE__ */ e.jsx("div", { className: "flex h-12 flex-col space-x-4 px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-      /* @__PURE__ */ e.jsx(pt, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-      /* @__PURE__ */ e.jsxs(Dr, { defaultValue: r, onValueChange: (d) => l(d), children: [
-        /* @__PURE__ */ e.jsx(Br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Pr, { placeholder: s("State") }) }),
-        /* @__PURE__ */ e.jsxs(Ir, { children: [
-          C(i, (d, o) => /* @__PURE__ */ e.jsx(V, { value: o, children: s(d) }, o)),
-          /* @__PURE__ */ e.jsx("hr", {}),
-          /* @__PURE__ */ e.jsx(V, { value: "", children: s("Normal") }),
-          /* @__PURE__ */ e.jsx(V, { value: "hover", children: s("Hover") }),
-          /* @__PURE__ */ e.jsx(V, { value: "active", children: s("Active") }),
-          /* @__PURE__ */ e.jsx(V, { value: "focus", children: s("Focus") }),
-          /* @__PURE__ */ e.jsx(V, { value: "before", children: s("Before") }),
-          /* @__PURE__ */ e.jsx(V, { value: "after", children: s("After") }),
-          /* @__PURE__ */ e.jsx(V, { value: "only", children: s("Only") }),
-          /* @__PURE__ */ e.jsx(V, { value: "first", children: s("First") }),
-          /* @__PURE__ */ e.jsx(V, { value: "last", children: s("Last") }),
-          /* @__PURE__ */ e.jsx(V, { value: "first-letter", children: s("First Letter") }),
-          /* @__PURE__ */ e.jsx(V, { value: "first-line", children: s("First Line") }),
-          /* @__PURE__ */ e.jsx(V, { value: "disabled", children: s("Disabled") })
-        ] })
-      ] })
-    ] }) }),
-    r !== "" ? /* @__PURE__ */ e.jsxs("div", { className: "m-1 flex items-center space-x-1 rounded border border-orange-500 bg-orange-200 p-px px-2 text-xs text-orange-900", children: [
-      /* @__PURE__ */ e.jsx(Fr, { className: "w-3" }),
-      /* @__PURE__ */ e.jsx("span", { children: s(`Styles will be applied for (:${r}) state`) })
-    ] }) : null,
-    /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(nt, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-      t && /* @__PURE__ */ e.jsx(fe, { section: ps }),
-      n ? /* @__PURE__ */ e.jsx(fe, { section: us }) : null,
-      xs.map((d) => /* @__PURE__ */ e.jsx(fe, { section: d }, d.heading))
-    ] }) })
-  ] });
-}
-const Bs = ({ onAdd: r }) => {
-  const { t: l } = X(), [t, n] = w({ key: "", value: "" }), s = () => {
-    b(t.key) || (r({ ...t, key: Ht(t.key) }), n({ key: "", value: "" }));
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200 px-1", children: [
-    /* @__PURE__ */ e.jsx(
-      _e,
-      {
-        name: "key",
-        onChange: (i) => n({ ...t, key: i.target.value }),
-        value: t.key,
-        placeholder: l("Name"),
-        autoComplete: "off",
-        autoCapitalize: "off",
-        onKeyDown: (i) => {
-          i.key === "Enter" && (i.preventDefault(), b(t.key) || s());
-        }
-      }
-    ),
-    /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-1.5", children: /* @__PURE__ */ e.jsx(
-      _e,
-      {
-        name: "value",
-        onChange: (i) => n({ ...t, value: i.target.value }),
-        value: t.value,
-        placeholder: l("Value"),
-        autoComplete: "off",
-        autoCapitalize: "off",
-        onKeyDown: (i) => {
-          i.key === "Enter" && (i.preventDefault(), b(t.key) || s());
-        }
-      }
-    ) }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsxs(G, { disabled: b(t.key), onClick: s, size: "sm", className: "flex items-center", children: [
-        /* @__PURE__ */ e.jsxs("span", { children: [
-          l("Add"),
-          " "
-        ] }),
-        /* @__PURE__ */ e.jsx(Ve, {})
-      ] }),
-      b(t.key) ? null : /* @__PURE__ */ e.jsx(G, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: l("Cancel") })
+    /* @__PURE__ */ e.jsx(Ts, {}),
+    /* @__PURE__ */ e.jsxs(ot, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
+      r && /* @__PURE__ */ e.jsx(xe, { section: is }),
+      a ? /* @__PURE__ */ e.jsx(xe, { section: ds }) : null,
+      cs.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
     ] })
   ] });
-}, Ps = () => {
-  const r = q(), [l, t] = w([]), [n] = ge(), s = at(), i = ot(), { t: a } = X(), { toast: d } = ct(), o = `${g(n, "0.prop")}_attrs`;
-  de.useEffect(() => {
-    const u = C(g(r, o), (y, x) => ({ key: x, value: y }));
-    b(u) ? t([]) : t(u);
-  }, [g(r, o)]);
-  const c = (u) => {
-    const y = ve(l, (x, f) => u !== f);
-    p(y);
-  }, h = (u) => {
-    const y = Ge(l, { key: u.key });
-    if (y && (y.value.startsWith("dnd-") || y.value.startsWith("#dnd-"))) {
-      d({
-        title: a("Cannot add predefined attribute"),
-        variant: "destructive",
-        description: a(`"(${u.key})" cannot be added as it is a predefined attribute for this block`)
-      });
-      return;
-    }
-    const x = [...l, u];
-    p(x);
-  }, p = de.useCallback(
-    (u = []) => {
-      const y = {};
-      Re(u, (x) => {
-        b(x.key) || qe(y, x.key, x.value);
-      }), i([g(r, "_id")], { [o]: y });
-    },
-    [r, s, o]
-  );
-  return /* @__PURE__ */ e.jsx("div", { className: "px-2", children: /* @__PURE__ */ e.jsx("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 p-2 text-xs text-gray-700", children: [
-      b(l) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-16 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: a("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: a("Attributes") }) }),
-      de.Children.toArray(
-        C(l, (u) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
-          /* @__PURE__ */ e.jsxs($, { delayDuration: 1e3, children: [
-            /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-[90%] cursor-default truncate px-1 hover:bg-gray-200", children: [
-              u.key,
-              " ",
-              /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
-              " ",
-              u.value
-            ] }) }),
-            /* @__PURE__ */ e.jsxs(M, { className: "max-w-[200px]", children: [
-              /* @__PURE__ */ e.jsxs("div", { children: [
-                a("Name"),
-                ": ",
-                u.key
-              ] }),
-              /* @__PURE__ */ e.jsxs("div", { children: [
-                a("Value"),
-                ": ",
-                u.value
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsxs($, { children: [
-            /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-              "button",
-              {
-                disabled: W(u.value, "dnd-"),
-                className: "invisible group-hover:visible",
-                onClick: () => c(l.indexOf(u)),
-                children: /* @__PURE__ */ e.jsx(Yr, { className: "w-4 text-gray-500" })
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(M, { className: "max-w-[200px]", children: W(u.value, "dnd-") ? a("Predefined attribute. Cannot be deleted") : a("Remove attribute") })
-          ] })
-        ] }))
-      )
-    ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(Bs, { onAdd: (u) => h(u) })
-  ] }) }) });
-}, Is = {
+}
+const Vs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2213,8 +2293,8 @@ const Bs = ({ onAdd: r }) => {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Bl = () => {
-  const r = q(), { t: l } = X(), [t, n] = I.useState(""), [s, i] = I.useState({
+}, Ra = () => {
+  const r = G(), { t: a } = B(), [t, n] = I.useState(""), [l, s] = I.useState({
     onDrag: (o) => o,
     onDragEnd: (o) => o,
     dragStartY: 0,
@@ -2223,20 +2303,20 @@ const Bs = ({ onAdd: r }) => {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), a = ue(
+  }), d = de(
     (o) => {
-      const c = !g(s, "negative", !1), h = g(s, "cssProperty", "");
-      let p = parseFloat(s.dragStartValue);
-      p = Je(p) ? 0 : p;
-      let u = Is[s.dragUnit];
-      (W(h, "scale") || h === "opacity") && (u = 10);
-      let x = (s.dragStartY - o.pageY) / u + p;
-      c && x < 0 && (x = 0), h === "opacity" && x > 1 && (x = 1), s.onDrag(`${x}`), n(`${x}`);
+      const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
+      let i = parseFloat(l.dragStartValue);
+      i = Ue(i) ? 0 : i;
+      let g = Vs[l.dragUnit];
+      (W(h, "scale") || h === "opacity") && (g = 10);
+      let u = (l.dragStartY - o.pageY) / g + i;
+      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), n(`${u}`);
     },
-    [s],
+    [l],
     50
-  ), d = H(() => {
-    setTimeout(() => s.onDragEnd(`${t}`), 100), i({
+  ), c = H(() => {
+    setTimeout(() => l.onDragEnd(`${t}`), 100), s({
       onDrag: (o) => o,
       onDragEnd: (o) => o,
       dragStartY: 0,
@@ -2246,31 +2326,25 @@ const Bs = ({ onAdd: r }) => {
       negative: !1,
       cssProperty: ""
     });
-  }, [s, t, i]);
-  return Dt(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(rt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(st, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: i }, children: [
-    s.dragging ? /* @__PURE__ */ e.jsx(
+  }, [l, t, s]);
+  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(qe, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: s }, children: [
+    l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        onMouseMove: a,
-        onMouseUp: () => d(),
+        onMouseMove: d,
+        onMouseUp: () => c(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs($r, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
-      /* @__PURE__ */ e.jsxs(Ar, { className: "mx-1 grid grid-cols-3", children: [
-        /* @__PURE__ */ e.jsx(me, { value: "settings", children: l("settings") }),
-        /* @__PURE__ */ e.jsx(me, { value: "styling", children: l("styling") }),
-        /* @__PURE__ */ e.jsx(me, { value: "attrs", children: l("Attributes") })
-      ] }),
-      /* @__PURE__ */ e.jsx(be, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(ds, {}) }) }),
-      /* @__PURE__ */ e.jsx(be, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ds, {}) }),
-      /* @__PURE__ */ e.jsx(be, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ps, {}) })
+    /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
+      /* @__PURE__ */ e.jsx(as, {}),
+      /* @__PURE__ */ e.jsx(Rs, {})
     ] })
   ] }) });
 };
 export {
-  Bl as default
+  Ra as default
 };