@chaibuilder/sdk 1.2.28 → 1.2.30

package/dist/{Settings-dnO-s6x0.js → Settings-jTl7IOPc.js}

@@ -1,23 +1,23 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as de from "react";
-import $, { useState as w, useMemo as _, useEffect as L, useCallback as H, memo as bt, createContext as Ke, useContext as ae } from "react";
-import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as Re, isArray as ue, omit as ft, truncate as vt, includes as M, get as g, first as oe, split as jt, startCase as E, toLower as le, isEmpty as b, map as k, find as Ge, last as wt, filter as ve, set as qe, debounce as Ct, keys as je, cloneDeep as kt, each as Nt, capitalize as we, reject as _t, nth as $e, startsWith as W, isNumber as St, parseInt as Tt, isNaN as Je, findLast as Rt, flatten as q, intersection as Qe, has as ce, kebabCase as Vt, isNull as Ht } from "lodash-es";
-import { useTranslation as z } from "react-i18next";
-import { PlusIcon as Ve, Cross2Icon as et, EyeOpenIcon as Dt, EyeClosedIcon as Ae, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as Bt, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as It, ArrowBottomLeftIcon as $t, AlignLeftIcon as At, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Et, StretchHorizontallyIcon as Lt, FontItalicIcon as Ot, UnderlineIcon as Ft, OverlineIcon as Yt, LetterCaseUppercaseIcon as zt, Cross1Icon as Xt, InfoCircledIcon as He, MinusIcon as Zt, BoxIcon as tt, RowSpacingIcon as Wt, TriangleDownIcon as Ut, CrossCircledIcon as Kt, CaretDownIcon as Gt, MixerHorizontalIcon as rt } from "@radix-ui/react-icons";
-import { aW as qt, aX as Jt, B as K, aY as Qt, aZ as er, a_ as tr, a$ as rr, b0 as sr, b1 as lr, b2 as ar, a1 as G, af as or, ag as nr, ah as ir, b3 as dr, ad as cr, ao as pr, ae as ur, ap as O, aq as F, ar as Y, b4 as xr, b5 as gr, b6 as hr, b7 as yr, b8 as mr, b9 as br, ba as fr, a6 as st, a5 as lt, h as vr, bb as at, bc as Ce, bd as ke, be as Ne, ac as xe, M as De, _ as ot, r as nt, aB as it, bf as _e, v as jr, bg as wr, $ as ge, V as Cr, a4 as dt, N as Me, aG as kr, aH as Nr, aI as _r, bh as Be, aJ as Ee, aK as Le, bi as Oe, bj as Fe, bk as Ye, a7 as Sr, bl as Tr, aj as Rr, ak as Vr, al as Hr, am as Dr, an as V, bm as Br, au as Pr, av as Ir, aw as ye, ax as me } from "./index-UHaqEdws.js";
-import { u as $r } from "./controls-OfJWSEqC.js";
-import { Check as Ar, EditIcon as Mr, TrashIcon as Er, BrushIcon as Lr, DeleteIcon as Or } from "lucide-react";
-import { getBlockComponent as Pe, getChaiDataProviders as Fr, useGlobalStylingPresets as Yr } from "@chaibuilder/runtime";
-import { E as ct, u as pt } from "./index-0QJwevON.js";
-import { J as zr, a as Xr, d as Zr } from "./index-e0c8PmRQ.js";
-import Wr from "@rjsf/core";
-import Ur from "@rjsf/validator-ajv8";
-import { u as Kr } from "./useCanvasSettings-R6br4J9i.js";
-import Gr from "react-autosuggest";
-import qr from "fuse.js";
-import { A as Jr, C as he, g as Qr } from "./Class-6Hz2KzYb.js";
-import { a as es } from "./STRINGS--j49GZJP.js";
+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 Et, AlignCenterHorizontallyIcon as Lt, 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 { aW as Qt, aX as er, B as G, aY as tr, aZ as rr, a_ as sr, a$ as lr, b0 as ar, b1 as or, b2 as nr, a1 as q, af as ir, ag as dr, ah as cr, b3 as pr, ad as ur, ao as xr, ae as gr, ap as $, aq as A, ar as M, b4 as hr, b5 as yr, b6 as mr, b7 as br, b8 as fr, b9 as vr, ba as jr, a6 as st, a5 as lt, h as wr, bb as at, bc as Ce, bd as ke, be as Ne, ac as ge, M as De, _ as ot, r as nt, bf as it, aB as dt, bg as _e, v as Cr, bh as kr, $ as he, V as Nr, a4 as ct, N as Me, aG as _r, aH as Sr, aI as Tr, bi as Be, aJ as Ee, aK as Le, bj as Oe, bk as Fe, bl as Ye, a7 as Rr, bm as Vr, aj as Hr, ak as Dr, al as Br, am as Pr, an as V, au as Ir, av as $r, aw as me, ax as be } from "./index-HiiWSXkE.js";
+import { u as Ar } from "./controls-OfJWSEqC.js";
+import { Check as Mr, EditIcon as Er, TrashIcon as Lr, BrushIcon as Or, DeleteIcon as Fr } from "lucide-react";
+import { getBlockComponent as Pe, getChaiDataProviders as Yr, useGlobalStylingPresets as zr } from "@chaibuilder/runtime";
+import { E as pt, u as ut } from "./index-SEJRE2ab.js";
+import { J as Xr, a as Zr, d as Wr } from "./index-e0c8PmRQ.js";
+import Ur from "@rjsf/core";
+import Kr from "@rjsf/validator-ajv8";
+import { u as Gr } from "./useCanvasSettings-unTQUdlP.js";
+import qr from "react-autosuggest";
+import Jr from "fuse.js";
+import { A as Qr, C as ye, g as es } from "./Class-6Hz2KzYb.js";
+import { a as ts } from "./STRINGS--j49GZJP.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "./Functions-7jnEwJyw.js";
 import "clsx";
@@ -51,15 +51,15 @@ import "i18next";
 import "@floating-ui/react-dom";
 import "flagged";
 import "react-hotkeys-hook";
-function ts(r) {
+function rs(r) {
   const l = [], t = {};
-  function i(s, n) {
-    Re(n, (a, d) => {
-      const o = s ? `${s}.${d}` : d, c = ue(a) ? "list" : typeof a;
-      l.push(o), t[o] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !ue(a) && i(o, a);
+  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);
     });
   }
-  return i("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
+  return n("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
 }
 const Se = ({ data: r, fullView: l }) => {
   if (!r)
@@ -67,13 +67,13 @@ const Se = ({ data: r, fullView: l }) => {
   const t = typeof r;
   return l ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(ct, { children: /* @__PURE__ */ e.jsx(
-      zr,
+    /* @__PURE__ */ e.jsx(pt, { children: /* @__PURE__ */ e.jsx(
+      Xr,
       {
         data: r,
-        shouldExpandNode: Xr,
+        shouldExpandNode: Zr,
         style: {
-          ...Zr,
+          ...Wr,
           container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
           stringValue: "text-orange-600",
           label: "text-green-900 font-semibold pr-1 tracking-wider"
@@ -83,95 +83,95 @@ const Se = ({ data: r, fullView: l }) => {
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: "max-h-36 w-full overflow-y-auto overflow-x-hidden text-[12px] leading-4 text-gray-800/50", children: [
     /* @__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: vt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+  ] }) : /* @__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 = ({
   type: r,
   value: l = "",
   setValue: t,
-  data: i,
+  data: n,
   onChange: s,
-  dataType: n,
+  dataType: i,
   appliedBindings: a
 }) => {
-  const { paths: d, pathsType: o } = ts(i), c = r === "PROP" ? Pe(i == null ? void 0 : i._type) : {}, h = r === "PROP", [p, x] = w(!1), y = _(() => r === "PROP" ? d.filter(
-    (u) => !M(a, u) && g(c, `props.${oe(jt(u, "."))}.binding`)
-  ) : d.filter((u) => n === g(o, u, "")), [r, d, a, n, c]);
-  return L(() => {
+  const { paths: d, pathsType: o } = rs(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: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: E(le(r)) }),
-      /* @__PURE__ */ e.jsxs(qt, { open: p, onOpenChange: x, children: [
-        /* @__PURE__ */ e.jsx(Jt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          K,
+      /* @__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,
           {
             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: [
               /* @__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: E(n) }),
+                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
               ] }),
               /* @__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 ",
-              E(le(r))
+              Y(le(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Qt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(er, { children: [
-          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${le(r)}...` }),
-          /* @__PURE__ */ e.jsxs(rr, { children: [
-            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(lr, { children: k(y, (u) => /* @__PURE__ */ e.jsxs(
-              ar,
+        /* @__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,
               {
-                value: u,
+                value: x,
                 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), x(!1);
+                  t(Ge(y, (j) => j === f) || null), u(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Ar, { className: `h-4 w-4 text-green-500 ${l === u ? "" : "opacity-0"}` }),
-                    u
+                    /* @__PURE__ */ e.jsx(Mr, { className: `h-4 w-4 text-green-500 ${l === x ? "" : "opacity-0"}` }),
+                    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: E(g(o, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Se, { data: g(i, 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) }) })
                 ]
               },
-              u
+              x
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !h && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Se, { data: g(i, l, ""), fullView: !0 }) })
+    !h && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Se, { data: g(n, l, ""), fullView: !0 }) })
   ] });
-}, rs = ({
+}, ss = ({
   appliedBindings: r = [],
   onAddBinding: l,
   editMode: t,
-  item: i
+  item: n
 }) => {
-  const [s, n] = w(t ? i.key : ""), [a, d] = w(t ? i.value : ""), o = G(), [c] = pt(), h = H(
-    (y, u) => {
+  const [s, i] = w(t ? n.key : ""), [a, d] = w(t ? n.value : ""), o = q(), [c] = ut(), h = H(
+    (y, x) => {
       if (b(y))
         return "";
       {
-        const f = g(u === "PROP" ? o : c, y, "");
-        if (ue(f))
+        const f = g(x === "PROP" ? o : c, y, "");
+        if (xe(f))
           return "list";
         const j = typeof f;
         return j === "string" ? "text" : j === "object" ? "model" : j;
       }
     },
     [o, c]
-  ), [p, x] = w(t ? h(i.key, "PROP") : "");
+  ), [p, u] = w(t ? h(n.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(or, { children: [
-      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(ir, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__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("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
@@ -181,10 +181,10 @@ const Se = ({ data: r, fullView: l }) => {
           isDisabled: !1,
           placeholder: "Enter prop key",
           value: s,
-          setValue: n,
+          setValue: i,
           onChange: (y) => {
-            const u = h(y, "PROP");
-            n(y), p !== u && d(""), x(u);
+            const x = h(y, "PROP");
+            i(y), p !== x && d(""), u(x);
           },
           data: o,
           dataType: p,
@@ -201,8 +201,8 @@ const Se = ({ data: r, fullView: l }) => {
           value: a,
           setValue: d,
           onChange: (y) => {
-            const u = h(y, "PATH");
-            d(p === u ? y : "");
+            const x = h(y, "PATH");
+            d(p === x ? y : "");
           },
           data: c,
           dataType: p,
@@ -210,8 +210,8 @@ const Se = ({ data: r, fullView: l }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
-      K,
+    /* @__PURE__ */ e.jsx(pr, { children: /* @__PURE__ */ e.jsx(
+      G,
       {
         type: "submit",
         className: "mt-4",
@@ -221,87 +221,87 @@ const Se = ({ data: r, fullView: l }) => {
       }
     ) })
   ] });
-}, ut = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: i, editMode: s = !0, item: n = {} }) => {
+}, xt = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: n, editMode: s = !0, item: i = {} }) => {
   const [a, d] = w(!1);
-  return /* @__PURE__ */ e.jsxs(cr, { children: [
-    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => d(!0), children: l }),
-    a && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
-      rs,
+  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(
+      ss,
       {
-        item: n,
+        item: i,
         editMode: s,
-        appliedBindings: i,
+        appliedBindings: n,
         onAddBinding: (o) => {
           t(o), d(!1);
         }
       }
     ) })
   ] });
-}, ss = ({
+}, ls = ({
   item: r,
   onAddBinding: l,
   onRemove: t,
-  selectedBlock: i,
+  selectedBlock: n,
   dataProvider: s,
-  appliedBindings: n
+  appliedBindings: i
 }) => {
   const [a, d] = w("string"), o = (c, h) => {
     if (b(c))
       return "";
     {
-      const p = g(h === "PROP" ? i : s, c, "");
-      if (ue(p))
+      const p = g(h === "PROP" ? n : s, c, "");
+      if (xe(p))
         return "list";
-      const x = typeof p;
-      return x === "string" ? "text" : x === "object" ? "model" : x;
+      const u = typeof p;
+      return u === "string" ? "text" : u === "object" ? "model" : u;
     }
   };
-  return L(() => 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 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: [
     /* @__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.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(ut, { editMode: !0, onAddBinding: l, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Mr, { 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(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(
-        Er,
+        Lr,
         {
           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: E(a) })
+    !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) })
   ] });
-}, ls = ({ bindingData: r, onChange: l }) => {
-  const t = G(), [i] = pt(), s = Fr(), [n, a] = w(
-    k(r, (p, x) => ({ key: x, value: p }))
+}, as = ({ bindingData: r, onChange: l }) => {
+  const t = q(), [n] = ut(), s = Yr(), [i, a] = w(
+    C(r, (p, u) => ({ key: u, value: p }))
   );
-  L(() => {
-    a(k(r, (p, x) => ({ key: x, value: p })));
+  z(() => {
+    a(C(r, (p, u) => ({ key: u, value: p })));
   }, [t == null ? void 0 : t._id, r]);
-  const d = _(() => {
-    if (b(i))
-      return !0;
+  const d = S(() => {
     if (b(n))
+      return !0;
+    if (b(i))
       return !1;
-    const p = wt(n);
+    const p = Ct(i);
     return b(p == null ? void 0 : p.key) || b(p == null ? void 0 : p.value);
-  }, [i, n]), o = (p) => {
-    const x = ve(n, (y) => y.key !== p.key);
-    a([...x, p]), h([...x, p]);
+  }, [n, i]), o = (p) => {
+    const u = ve(i, (y) => y.key !== p.key);
+    a([...u, p]), h([...u, p]);
   }, c = (p) => {
-    const x = ve(n, (y, u) => p !== u);
-    h([...x]);
+    const u = ve(i, (y, x) => p !== x);
+    h([...u]);
   }, h = H(
     (p = []) => {
       if (a(p), b(p)) {
         l({});
         return;
       }
-      const x = {};
+      const u = {};
       Re(p, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && qe(x, y.key, y.value);
-      }), l(x);
+        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && qe(u, y.key, y.value);
+      }), l(u);
     },
     [l]
   );
@@ -310,78 +310,87 @@ const Se = ({ data: r, fullView: l }) => {
     /* @__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: [
-    k(n, (p, x) => /* @__PURE__ */ e.jsx(
-      ss,
+    C(i, (p, u) => /* @__PURE__ */ e.jsx(
+      ls,
       {
         item: p,
         onAddBinding: o,
-        onRemove: () => c(x),
+        onRemove: () => c(u),
         selectedBlock: t,
-        dataProvider: i,
-        appliedBindings: k(n, "key")
+        dataProvider: n,
+        appliedBindings: C(i, "key")
       },
       p.key
     )),
-    /* @__PURE__ */ e.jsxs(O, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(F, { disabled: b(i), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        ut,
+    /* @__PURE__ */ e.jsxs($, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(A, { disabled: b(n), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        xt,
         {
           disabled: d,
-          appliedBindings: k(n, "key"),
+          appliedBindings: C(i, "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(i) ? /* @__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"
+              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"
             }
           )
         }
       ) }),
-      d && /* @__PURE__ */ e.jsx(Y, { sideOffset: -55, className: "text-[11px]", children: b(i) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      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" })
     ] })
   ] });
-}, as = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), pe = bt(({ id: r, properties: l, formData: t, onChange: i }) => {
-  const [s, n] = w(t), a = { type: "object", properties: {} }, d = {};
-  return Object.keys(l).forEach((o) => {
-    const c = l[o];
-    if (M(["slot", "styles"], c.type))
+}, os = () => /* @__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))
       return;
-    const h = o;
-    a.properties[h] = xr(c), d[h] = gr(c);
-  }), L(() => {
-    n(t);
-  }, [r]), /* @__PURE__ */ e.jsx(
-    Wr,
+    const p = c;
+    a.properties[p] = hr(h), d[p] = yr(h);
+  }), z(() => {
+    i(t);
+  }, [r]);
+  const o = ue(
+    async ({ formData: c }, h) => {
+      n({ formData: c }, h);
+    },
+    [n],
+    1e3
+    // save only every 5 seconds
+  );
+  return /* @__PURE__ */ e.jsx(
+    Ur,
     {
       widgets: {
-        binding: as,
-        richtext: hr,
-        icon: yr,
-        image: mr
+        binding: os,
+        richtext: mr,
+        icon: br,
+        image: fr
       },
-      fields: { link: br },
+      fields: { link: vr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Ur,
+      validator: Kr,
       uiSchema: d,
       schema: a,
       formData: s,
-      onChange: ({ formData: o }, c) => {
-        c && (n(o), i({ formData: o }, c));
+      onChange: ({ formData: c }, h) => {
+        h && (i(c), o({ formData: c }, h));
       }
     }
   );
-}), os = () => {
-  const [r, l] = Kr(), t = fr(), i = (a, d) => {
+}), ns = () => {
+  const [r, l] = Gr(), t = jr(), n = (a, d) => {
     l((o) => ({ ...o, [a]: d }));
   };
   if (b(t))
     return null;
-  const { block: s, settings: n } = t;
+  const { block: s, settings: i } = 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,
@@ -391,42 +400,42 @@ const Se = ({ data: r, fullView: l }) => {
       pe,
       {
         id: s == null ? void 0 : s._id,
-        onChange: ({ formData: a }) => i(s._id, a),
+        onChange: ({ formData: a }) => n(s._id, a),
         formData: g(r, s._id, {}),
-        properties: n
+        properties: i
       }
     ) })
   ] });
 };
-function ns() {
-  const r = G(), l = st(), t = lt(), i = Pe(r._type), s = { ...r }, [n, a] = w(s), d = vr("dataBindingSupport", !1), o = ({ formData: u }, f, j) => {
-    if (f && (n == null ? void 0 : n._id) === r._id) {
-      const B = f.replace("root.", "");
-      t([r._id], { [B]: g(u, B) }, j);
+function is() {
+  const r = q(), l = st(), t = lt(), 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);
     }
   }, c = H(
-    Ct(({ formData: u }, f, j) => {
-      o({ formData: u }, f, j), a(u);
+    kt(({ formData: x }, f, j) => {
+      o({ formData: x }, f, j), a(x);
     }, 1500),
     [r == null ? void 0 : r._id]
-  ), h = ({ formData: u }, f) => {
+  ), h = ({ formData: x }, f) => {
     if (f) {
       const j = f.replace("root.", "");
-      l([r._id], { [j]: g(u, j) }), c({ formData: u }, f, { [j]: g(n, j) });
+      l([r._id], { [j]: g(x, j) }), c({ formData: x }, f, { [j]: g(i, j) });
     }
   }, p = {
-    _name: $r({
+    _name: Ar({
       title: "Name",
       default: g(r, "_name", r._type)
     })
-  }, x = je(g(s, "_bindings", {})), y = _(() => {
-    const u = kt(g(i, "props", {}));
-    return d && Nt(x, (f) => delete u[f]), u;
-  }, [i, x, d]);
+  }, 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]);
   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(os, {}),
+    /* @__PURE__ */ e.jsx(ns, {}),
     d ? /* @__PURE__ */ e.jsxs(at, { 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: [
@@ -439,11 +448,11 @@ function ns() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(Ne, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          ls,
+          as,
           {
             bindingData: g(r, "_bindings", {}),
-            onChange: (u) => {
-              o({ formData: { _bindings: u } }, "root._bindings");
+            onChange: (x) => {
+              o({ formData: { _bindings: x } }, "root._bindings");
             }
           }
         ) })
@@ -454,11 +463,11 @@ function ns() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ e.jsxs(Ne, { className: "pt-4", children: [
-          b(x) ? 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: [
+          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: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: k(x, we).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: C(u, we).join(", ") }),
             " ",
-            x.length === 1 ? "property" : "properties",
+            u.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
@@ -484,60 +493,79 @@ function ns() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Xe = new qr(Jr, {
+const Xe = new Jr(Qr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function is() {
-  var B;
-  const [r] = xe(), l = G(), t = De(), i = ot(), [s] = nt(), [n, a] = w(""), d = (B = oe(r)) == null ? void 0 : B.prop, o = _t((g(l, d, "").replace(es, "").split(",").pop() || "").split(" "), b), c = () => {
-    const C = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(s, C, !0), a("");
-  }, [h, p] = w([]), x = ({ value: C }) => {
-    const I = C.trim().toLowerCase(), X = I.match(/.+:/g);
-    let N = [];
-    if (X && X.length > 0) {
-      const [P] = X, U = I.replace(P, "");
-      N = Xe.search(U).map((m) => ({
-        ...m,
-        item: { ...m.item, name: P + m.item.name }
+function ds() {
+  var U;
+  const [r] = ge(), l = q(), t = De(), n = ot(), [s] = nt(), [i, a] = w(""), { toast: d } = it(), o = (U = oe(r)) == null ? void 0 : U.prop, c = St((g(l, o, "").replace(ts, "").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 L = [];
+    if (D && D.length > 0) {
+      const [K] = D, m = _.replace(K, "");
+      L = Xe.search(m).map((N) => ({
+        ...N,
+        item: { ...N.item, name: K + N.item.name }
       }));
     } else
-      N = Xe.search(I);
-    p(k(N, "item"));
-  }, y = () => {
-    p([]);
-  }, u = (C) => C.name, f = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), j = {
+      L = Xe.search(_);
+    u(C(L, "item"));
+  }, x = () => {
+    u([]);
+  }, f = (k) => k.name, j = (k) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: k.name }), P = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: n,
-    onKeyDown: (C) => {
-      C.key === "Enter" && n.trim() !== "" && c();
+    value: i,
+    onKeyDown: (k) => {
+      k.key === "Enter" && i.trim() !== "" && h();
     },
-    onChange: (C, { newValue: I }) => a(I),
+    onChange: (k, { newValue: _ }) => a(_),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
+  }, E = () => {
+    if (navigator.clipboard === void 0) {
+      d({
+        title: "Clipboard not supported",
+        description: "Please use Chrome, Firefox or Safari",
+        variant: "destructive"
+      });
+      return;
+    }
+    navigator.clipboard.writeText(c.join(" ")), d({
+      title: "Copied",
+      description: "Classes copied to clipboard"
+    });
   };
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${h.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
+      className: `no-scrollbar flex ${p.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
-        /* @__PURE__ */ e.jsx(it, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsxs(dt, { 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: E, className: "cursor-pointer" }) }),
+            /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx("p", { children: "Copy classes to clipboard" }) })
+          ] })
+        ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Gr,
+            qr,
             {
-              suggestions: h,
-              onSuggestionsFetchRequested: x,
-              onSuggestionsClearRequested: y,
-              getSuggestionValue: u,
-              renderSuggestion: f,
-              inputProps: j,
+              suggestions: p,
+              onSuggestionsFetchRequested: y,
+              onSuggestionsClearRequested: x,
+              getSuggestionValue: f,
+              renderSuggestion: j,
+              inputProps: P,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -549,36 +577,36 @@ function is() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            K,
+            G,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: c,
-              disabled: n.trim() === "",
+              onClick: h,
+              disabled: i.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(Ve, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
+          b(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(
-            o.map((C) => /* @__PURE__ */ e.jsxs(
+            c.map((k) => /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: "group relative flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
                 children: [
-                  C,
+                  k,
                   /* @__PURE__ */ e.jsx(
                     et,
                     {
-                      onClick: () => i(s, [C]),
+                      onClick: () => n(s, [k]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              C
+              k
             ))
           )
         ] })
@@ -586,16 +614,16 @@ function is() {
     }
   );
 }
-const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], cs = {
   heading: "flex.heading",
   items: [
-    { type: "arbitrary", label: "flex.basis", units: D, property: "flexBasis" },
+    { type: "arbitrary", label: "flex.basis", units: B, 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" }
   ]
-}, cs = {
+}, ps = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -606,17 +634,17 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ps = [
+}, us = [
   {
     heading: "layout.heading",
     items: [
-      { type: "arbitrary", label: "layout.width", units: D.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: D.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "layout.width", units: B.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: B.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "layout.margin",
         negative: !0,
-        units: [...D, "auto"],
+        units: [...B, "auto"],
         options: [
           { key: "margin", label: "layout.margin_all" },
           { key: "marginX", label: "layout.margin_lr" },
@@ -657,16 +685,16 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
         styleType: "accordion",
         heading: "size.min_width_height",
         items: [
-          { type: "arbitrary", label: "size.min_width", units: D.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "size.min_height", units: D.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "size.min_width", units: B.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "size.min_height", units: B.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "size.max_width_height",
         items: [
-          { type: "arbitrary", label: "size.max_width", units: D.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "size.max_height", units: D.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "size.max_width", units: B.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "size.max_height", units: B.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -683,7 +711,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   {
     heading: "display.heading",
     items: [
-      { type: "dropdown", label: "display.display", property: "display", units: D },
+      { type: "dropdown", label: "display.display", property: "display", units: B },
       {
         styleType: "accordion",
         heading: "display.flex_options",
@@ -734,7 +762,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
         styleType: "accordion",
         heading: "display.visibility_opacity",
         items: [
-          { type: "dropdown", label: "display.visibility", property: "visibility", units: D },
+          { type: "dropdown", label: "display.visibility", property: "visibility", units: B },
           { type: "arbitrary", label: "display.opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -810,8 +838,8 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
     heading: "typography.heading",
     items: [
       { type: "dropdown", property: "fontFamily", label: "typography.font" },
-      { type: "arbitrary", property: "fontSize", label: "typography.size", units: D },
-      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: D.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "typography.size", units: B },
+      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: B.concat("-") },
       { type: "range", property: "fontWeight", label: "typography.weight" },
       { type: "color", property: "textColor", label: "typography.color" },
       {
@@ -1008,54 +1036,54 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: is }]
+    items: [{ component: ds }]
   }
-], xt = {
+], 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: Dt,
+  visible: Pt,
   invisible: Ae,
   // display
   hidden: Ae,
-  gap: A,
+  gap: O,
   gapX: T,
   gapY: R,
   spaceX: T,
   spaceY: R,
-  overscroll: A,
+  overscroll: O,
   overscrollX: T,
   overscrollY: R,
-  overflow: A,
+  overflow: O,
   overflowX: T,
   overflowY: R,
   top: ee,
   right: te,
   bottom: re,
   left: se,
-  inset: A,
+  inset: O,
   insetX: T,
   insetY: R,
-  border: A,
+  border: O,
   borderX: T,
   borderY: R,
   borderTop: ee,
   borderRight: te,
   borderBottom: re,
   borderLeft: se,
-  borderRadius: A,
+  borderRadius: O,
   borderRadiusX: T,
   borderRadiusY: R,
   borderRadiusTop: ee,
   borderRadiusRight: te,
   borderRadiusBottom: re,
   borderRadiusLeft: se,
-  borderRadiusTopLeft: Bt,
-  borderRadiusTopRight: Pt,
-  borderRadiusBottomRight: It,
-  borderRadiusBottomLeft: $t,
+  borderRadiusTopLeft: It,
+  borderRadiusTopRight: $t,
+  borderRadiusBottomRight: At,
+  borderRadiusBottomLeft: Mt,
   divideXWidth: T,
   divideYWidth: R,
-  scale: A,
+  scale: O,
   scaleX: T,
   scaleY: R,
   skewX: T,
@@ -1063,7 +1091,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   translateX: T,
   translateY: R,
   // padding
-  padding: A,
+  padding: O,
   paddingX: T,
   paddingY: R,
   paddingTop: ee,
@@ -1071,7 +1099,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   paddingBottom: re,
   paddingLeft: se,
   // margin
-  margin: A,
+  margin: O,
   marginX: T,
   marginY: R,
   marginTop: ee,
@@ -1079,18 +1107,18 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
   marginBottom: re,
   marginLeft: se,
   // text-align
-  textLeft: At,
-  textCenter: Mt,
-  textRight: Et,
-  textJustify: Lt,
+  textLeft: Et,
+  textCenter: Lt,
+  textRight: Ot,
+  textJustify: Ft,
   // font style
-  italic: Ot,
+  italic: Yt,
   // "not-italic": "",
   // decoration
-  underline: Ft,
-  overline: Yt,
+  underline: zt,
+  overline: Xt,
   // transform
-  uppercase: zt,
+  uppercase: Zt,
   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",
@@ -1203,101 +1231,101 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
       }
     )
   ] }),
-  static: Xt
-}, ne = Ke({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: l = !1, canChange: t = !0 }) => (
+  static: Wt
+}, ne = Ke({ canReset: !1, canChange: !0 }), xs = ({ children: r, canReset: l = !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 })
-), gt = ({ label: r, property: l, onChange: t }) => {
-  const i = _(() => g(he, `${l}.classes`, [""]), [l]), s = ie(l), n = _(() => g(s, "cls", ""), [s]), { canChange: a } = ae(ne), d = /\[.*\]/g.test(n);
+), 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: n }),
-    /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(F, { 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(Y, { children: "Current value is using a Tailwind arbitrary value." })
+    /* @__PURE__ */ e.jsx(_e, { className: "w-[70%] rounded py-1", readOnly: !0, value: i }),
+    /* @__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(
     Te,
     {
       rounded: r,
       onChange: (o) => t(o, l),
-      selected: n,
-      options: i,
+      selected: i,
+      options: n,
       disabled: !a
     }
   ) });
 };
-function Te({ selected: r, onChange: l, rounded: t = !1, options: i, disabled: s = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: a, redo: d } = jr();
+function Te({ selected: r, onChange: l, rounded: t = !1, options: n, disabled: s = !1 }) {
+  const i = r.replace(/.*:/g, "").trim(), { undo: a, redo: d } = Cr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !i.length || s,
+      disabled: !n.length || s,
       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),
       onKeyDown: (o) => {
         o.ctrlKey && (o.key === "z" && a(), o.key === "y" && d());
       },
-      value: n,
+      value: i,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        $.Children.toArray(
-          i.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
+        I.Children.toArray(
+          n.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
         )
       ]
     }
   );
 }
-const xs = ({ property: r, onChange: l }) => {
-  const { canReset: t, canChange: i } = ae(ne), s = ie(r), n = _(() => g(s, "cls", ""), [s]), a = _(() => g(he, `${r}.classes`, [""]), [r]), d = a.indexOf(n) > -1 ? a.indexOf(n) : 0, o = /\[.*\]/g.test(n);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const gs = ({ 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: [
     /* @__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: !i && (!t || d - 1 < 0),
+        disabled: !n && (!t || d - 1 < 0),
         onClick: () => l($e(a, d - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Zt,
+          Ut,
           {
-            className: !i && (!t || d - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !n && (!t || d - 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(gt, { label: !1, property: r, onChange: l }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ht, { label: !1, property: r, onChange: l }) }),
     /* @__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: !i && (!t || d + 1 >= a.length),
+        disabled: !n && (!t || d + 1 >= a.length),
         onClick: () => l($e(a, d + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ve,
           {
-            className: !i && (!t || d + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !n && (!t || d + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, gs = ({ property: r, onChange: l }) => {
-  const t = _(() => g(he, `${r}.classes`, [""]), [r]), { canChange: i } = ae(ne), s = ie(r), n = _(() => g(s, "cls", ""), [s]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (a) => /* @__PURE__ */ e.jsxs(O, { children: [
-    /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, hs = ({ 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(
       "button",
       {
         type: "button",
-        disabled: !i,
+        disabled: !n,
         onClick: () => l(a, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(g(xt, a, tt))
+        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))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(Y, { children: E(le(a)) })
+    /* @__PURE__ */ e.jsx(M, { children: Y(le(a)) })
   ] })) });
-}, hs = {
+}, ys = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1309,31 +1337,31 @@ const xs = ({ property: r, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, ys = ({ property: r, onChange: l }) => {
-  const t = ie(r), i = _(() => g(t, "cls", ""), [t]), { canChange: s } = ae(ne), [n, a] = w([]), [d, o] = w({ color: "", shade: "" }), c = i.split("-"), h = g(c, "1", ""), p = g(c, "2", ""), x = H(
+}, ms = ({ 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(
     // eslint-disable-next-line no-shadow
-    (u) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (a([]), o({ color: u })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
+    (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" })));
     },
     [a, o]
   );
-  L(() => {
+  z(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
       return a([]);
     a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [h]);
   const y = H(
     // eslint-disable-next-line no-shadow
-    (u) => {
-      o({ color: h, shade: u });
+    (x) => {
+      o({ color: h, shade: x });
     },
     [h]
   );
-  return L(() => {
+  return z(() => {
     o({ color: "", shade: "" });
-  }, [t]), L(() => {
-    const f = `${g(hs, r, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    f.match(new RegExp(g(he, `${r}.regExp`, ""))) && l(f, r);
+  }, [t]), z(() => {
+    const f = `${g(ys, 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: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       Te,
@@ -1341,7 +1369,7 @@ const xs = ({ property: r, onChange: l }) => {
         disabled: !s,
         rounded: !0,
         selected: h,
-        onChange: x,
+        onChange: u,
         options: [
           "current",
           "transparent",
@@ -1374,19 +1402,19 @@ const xs = ({ 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: n }) })
+    /* @__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 }) })
   ] });
 }, Ze = (r, l) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
   if ((t === "auto" || t === "none") && l.includes(t))
     return { value: "", unit: t };
-  const i = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(i, "");
-  const s = r.match(i), n = s && s.length > 1, a = !b(t) && Number.isNaN(Number(t));
-  return n || a ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
+  const n = l.length ? new RegExp(l.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 ms = (r) => {
+const bs = (r) => {
   const l = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1396,22 +1424,22 @@ const ms = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (M(r, "skew-"))
+  if (F(r, "skew-"))
     return { value: `${l}${t}`, unit: "deg" };
-  if (M(r, "rotate-"))
+  if (F(r, "rotate-"))
     return { value: `${l}${t}`, unit: "deg" };
-  if (M(r, "opacity-"))
+  if (F(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (M(r, "duration-") || M(r, "delay-"))
+  if (F(r, "duration-") || F(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (M(r, "translate-") && !t.includes("/"))
+  if (F(r, "translate-") && !t.includes("/"))
     return { value: `${l}${`${t / 4}`}`, unit: "rem" };
-  if (M(r, "scale-"))
+  if (F(r, "scale-"))
     return { value: `${l}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
-    const i = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (i)
-      return { value: i[0].split("-").pop(), unit: "px" };
+    const n = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (n)
+      return { value: n[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1510,32 +1538,32 @@ const ms = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [i, s] = k(t.split("/"), (n) => parseInt(n, 10));
-    return { value: l + (i / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [n, s] = C(t.split("/"), (i) => parseInt(i, 10));
+    return { value: l + (n / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return St(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Tt(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const bs = (r) => {
+const fs = (r) => {
   if (b(r))
     return { value: "", unit: "" };
   const l = r.match(/\[.*\]/g);
   if (l === null)
-    return fs(r);
-  const t = g(l, "0", "").replace(/\[|\]/g, ""), i = r.startsWith("-") ? "-" : "", s = oe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${i}${s}`, unit: t.replace(s, "") };
-}, fs = (r) => b(r) ? { value: "", unit: "" } : ms(r), ht = $.createContext({
+    return vs(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, "") };
+}, vs = (r) => b(r) ? { value: "", unit: "" } : bs(r), yt = I.createContext({
   setDragData: () => {
   }
-}), vs = ({
+}), js = ({
   unit: r,
   currentValue: l,
   onDrag: t,
-  onDragEnd: i,
+  onDragEnd: n,
   onDragStart: s,
-  negative: n,
+  negative: i,
   cssProperty: a
 }) => {
-  const { setDragData: d } = ae(ht);
+  const { setDragData: d } = ae(yt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
@@ -1543,124 +1571,124 @@ const bs = (r) => {
       onMouseDown: (o) => {
         const c = {
           onDrag: t,
-          onDragEnd: i,
+          onDragEnd: n,
           dragging: !0,
           dragStartY: o.pageY,
           dragStartValue: `${l}`,
           dragUnit: r,
-          negative: n,
+          negative: i,
           cssProperty: a
         };
         s(c), d(c);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Wt, {})
+      children: /* @__PURE__ */ e.jsx(Kt, {})
     }
   );
-}, js = ({ 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((i) => /* @__PURE__ */ e.jsx(
-  K,
+}, ws = ({ 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,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: l === i ? "primary" : void 0,
+    color: l === n ? "primary" : void 0,
     size: "sm",
     onClick: (s) => {
-      s.stopPropagation(), r(i);
+      s.stopPropagation(), r(n);
     },
-    children: i
+    children: n
   },
-  i
-)) }), We = 50, ws = (r) => {
-  const [l, t] = w(!1), [i, s] = w(""), { currentClass: n, onChange: a, classPrefix: d, cssProperty: o, units: c, negative: h } = r, [p, x] = w(o != null && o.toLowerCase().includes("width") ? "%" : c[0]), [y, u] = w(!1), [f, j] = w(""), [B, C] = w(!1), [I, X] = w(!1);
-  L(() => {
-    const { value: m, unit: v } = bs(n);
+  n
+)) }), We = 50, Cs = (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, E] = w(!1), [U, k] = w(!1);
+  z(() => {
+    const { value: m, unit: v } = fs(i);
     if (v === "") {
-      s(m), x(o != null && o.toLowerCase().includes("width") ? "%" : oe(c));
+      s(m), u(o != null && o.toLowerCase().includes("width") ? "%" : oe(c));
       return;
     }
-    x(v), s(v === "class" || b(m) ? "" : m);
-  }, [n, o, c]);
-  const N = fe((m) => a(m), [a], We), P = fe((m) => a(m, !1), [a], We), U = H(
+    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), L = H(
     (m = !1) => {
-      const v = Ze(`${i}`, c);
+      const v = Ze(`${n}`, c);
       if (g(v, "error", !1)) {
-        u(!0);
+        x(!0);
         return;
       }
-      const S = g(v, "unit") !== "" ? g(v, "unit") : p;
-      if (S === "auto" || S === "none") {
-        N(`${d}${S}`);
+      const N = g(v, "unit") !== "" ? g(v, "unit") : p;
+      if (N === "auto" || N === "none") {
+        _(`${d}${N}`);
         return;
       }
       if (g(v, "value") === "")
         return;
-      const Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      m ? P(Q) : N(Q);
+      const Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      m ? D(Q) : _(Q);
     },
-    [N, P, i, p, d, c]
-  ), J = H(
+    [_, D, n, p, d, c]
+  ), K = H(
     (m) => {
-      const v = Ze(`${i}`, c);
+      const v = Ze(`${n}`, c);
       if (g(v, "error", !1)) {
-        u(!0);
+        x(!0);
         return;
       }
       if (m === "auto" || m === "none") {
-        N(`${d}${m}`);
+        _(`${d}${m}`);
         return;
       }
       if (g(v, "value") === "")
         return;
-      const S = g(v, "unit") !== "" ? g(v, "unit") : m, Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      N(Q);
+      const N = g(v, "unit") !== "" ? g(v, "unit") : m, Q = `${g(v, "value", "").startsWith("-") ? "-" : ""}${d}[${g(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      _(Q);
     },
-    [N, i, d, c]
+    [_, n, d, c]
   );
   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: n }),
-    /* @__PURE__ */ e.jsxs(O, { children: [
-      /* @__PURE__ */ e.jsx(F, { 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(Y, { children: "Current value is using a Tailwind preset class." })
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
+    /* @__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.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${P ? "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(
         "input",
         {
           readOnly: p === "class",
           onKeyPress: (m) => {
-            m.key === "Enter" && U();
+            m.key === "Enter" && L();
           },
           onKeyDown: (m) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            m.preventDefault(), X(!0);
-            const v = Tt(m.target.value);
-            let S = Je(v) ? 0 : v;
-            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
-            const Z = `${S}`, mt = `${Z.startsWith("-") ? "-" : ""}${d}[${Z.replace("-", "")}${p === "-" ? "" : p}]`;
-            P(mt);
+            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);
           },
           onKeyUp: (m) => {
-            I && (m.preventDefault(), X(!1));
+            U && (m.preventDefault(), k(!1));
           },
-          onBlur: () => U(),
+          onBlur: () => L(),
           onChange: (m) => {
-            u(!1), s(m.target.value);
+            x(!1), s(m.target.value);
           },
           onClick: (m) => {
             var v;
             (v = m == null ? void 0 : m.target) == null || v.select(), t(!1);
           },
-          value: B ? f : i,
+          value: P ? f : 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"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(O, { open: l, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs($, { open: l, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
@@ -1668,40 +1696,40 @@ const bs = (r) => {
             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(Ut, {}) : null
+              c.length > 1 ? /* @__PURE__ */ e.jsx(Gt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(wr, { children: /* @__PURE__ */ e.jsx(Y, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          js,
+        /* @__PURE__ */ e.jsx(kr, { children: /* @__PURE__ */ e.jsx(M, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ws,
           {
             units: c,
             current: p,
             onSelect: (m) => {
-              t(!1), x(m), J(m);
+              t(!1), u(m), K(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(p) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
-      vs,
+    ["none", "auto"].indexOf(p) !== -1 || P ? null : /* @__PURE__ */ e.jsx(
+      js,
       {
-        onDragStart: () => C(!0),
+        onDragStart: () => E(!0),
         onDragEnd: (m) => {
-          if (j(() => ""), C(!1), b(m))
+          if (j(() => ""), E(!1), b(m))
             return;
           const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
-          N(Z);
+          _(Z);
         },
         onDrag: (m) => {
           if (b(m))
             return;
           j(m);
           const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${p === "-" ? "" : p}]`;
-          P(Z);
+          D(Z);
         },
-        currentValue: i,
+        currentValue: n,
         unit: p,
         negative: h,
         cssProperty: o
@@ -1709,9 +1737,9 @@ const bs = (r) => {
     )
   ] }) }) });
 }, ie = (r) => {
-  const l = ge();
-  return Rt(l, { property: r });
-}, Cs = (r, l) => {
+  const l = he();
+  return Vt(l, { property: r });
+}, ks = (r, l) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1721,7 +1749,7 @@ const bs = (r) => {
     "2xl": 5
   };
   return t[g(r, "mq", "xs")] <= t[l];
-}, ks = {
+}, Ns = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1794,57 +1822,57 @@ const bs = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Ns = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
-  const { t: l } = z(), { type: t = "icons", label: i, property: s, onEmitChange: n = () => {
-  }, units: a, negative: d = !1 } = r, [o] = Cr(), [c] = dt(), [, h] = Me(), p = ie(s), x = De(), y = ot(), [u] = nt(), f = _(() => g(p, "fullCls", ""), [p]), j = H(
-    (P, U = !0) => {
-      const J = { dark: o, mq: h, mod: c, cls: P, property: s, fullCls: "" };
-      (o || c !== "") && (J.mq = "xs");
-      const m = Qr(J);
-      x(u, [m], U);
+}, _s = (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] = Nr(), [c] = ct(), [, h] = Me(), p = ie(s), u = De(), y = ot(), [x] = nt(), f = S(() => g(p, "fullCls", ""), [p]), j = H(
+    (D, L = !0) => {
+      const K = { dark: o, mq: h, mod: c, cls: D, property: s, fullCls: "" };
+      (o || c !== "") && (K.mq = "xs");
+      const m = es(K);
+      u(x, [m], L);
     },
-    [u, o, h, c, s, x]
-  ), B = H(() => {
-    y(u, [f]);
-  }, [u, f, y]), C = _(() => Cs(p, h), [p, h]);
-  L(() => {
-    n(C, p);
-  }, [C, n, p]);
-  const [, , I] = Me(), X = H(
-    (P) => {
-      I({
+    [x, o, h, c, s, u]
+  ), P = H(() => {
+    y(x, [f]);
+  }, [x, f, y]), E = S(() => ks(p, h), [p, h]);
+  z(() => {
+    i(E, p);
+  }, [E, i, p]);
+  const [, , U] = Me(), k = H(
+    (D) => {
+      U({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[P]);
+      }[D]);
     },
-    [I]
-  ), N = g(p, "dark", null) === o && g(p, "mod", null) === c && g(p, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(us, { canChange: C, canReset: p && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${p && !N ? "text-foreground" : ""}`, children: l(i) }) }),
+    [U]
+  ), _ = g(p, "dark", null) === o && g(p, "mod", null) === c && g(p, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(xs, { canChange: E, 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) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ws,
+          Cs,
           {
             currentClass: g(p, "cls", ""),
-            classPrefix: g(ks, s, ""),
+            classPrefix: g(Ns, s, ""),
             units: a || [],
             onChange: j,
             negative: d,
             cssProperty: s
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(gs, { property: s, onChange: j }),
-        t === "range" && /* @__PURE__ */ e.jsx(xs, { property: s, onChange: j }),
-        t === "color" && /* @__PURE__ */ e.jsx(ys, { property: s, onChange: j }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(gt, { label: i, property: s, onChange: j })
+        t === "icons" && /* @__PURE__ */ e.jsx(hs, { property: s, onChange: j }),
+        t === "range" && /* @__PURE__ */ e.jsx(gs, { property: s, onChange: j }),
+        t === "color" && /* @__PURE__ */ e.jsx(ms, { property: s, onChange: j }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(ht, { label: n, property: s, onChange: j })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Kt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && p ? /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__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" }) }) : E && p ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
@@ -1852,10 +1880,10 @@ const bs = (r) => {
             children: /* @__PURE__ */ e.jsx(He, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Y, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(M, { 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: [
-            Ns(g(p, "mq")),
+            _s(g(p, "mq")),
             o && !p.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1863,7 +1891,7 @@ const bs = (r) => {
             "button",
             {
               type: "button",
-              onClick: () => X(g(p, "mq")),
+              onClick: () => k(g(p, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -1875,40 +1903,40 @@ const bs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], yt = ({
+}, Ss = ["px", "%", "em", "rem", "ch", "vh", "vw"], mt = ({
   label: r,
   options: l,
   borderB: t = !1,
-  borderT: i = !1,
+  borderT: n = !1,
   type: s = "arbitrary",
-  units: n = _s,
+  units: i = Ss,
   negative: a = !1
 }) => {
-  const { t: d } = z(), [o, c] = w(l[0].key), h = ge(), p = H((x) => k(h, "property").includes(x), [h]);
+  const { t: d } = X(), [o, c] = w(l[0].key), h = he(), p = H((u) => C(h, "property").includes(u), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${i ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${n ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            l.map(({ label: x, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(O, { children: [
-              /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          /* @__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(
                 "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"}`,
                   children: [
-                    $.createElement("div", {
+                    I.createElement("div", {
                       className: p(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(g(xt, y, tt), { className: "text-inherit w-3 h-3" })
+                    I.createElement(g(gt, y, tt), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Y, { children: E(le(x)) })
+              /* @__PURE__ */ e.jsx(M, { children: Y(le(u)) })
             ] }) }))
           ) })
         ] }),
@@ -1916,7 +1944,7 @@ const bs = (r) => {
           Ie,
           {
             type: s,
-            units: [...n],
+            units: [...i],
             label: "",
             property: o,
             negative: a
@@ -1925,15 +1953,15 @@ const bs = (r) => {
       ]
     }
   );
-}, Ss = ({ heading: r, items: l }) => {
-  const { t } = z(), i = ge(), s = _(() => {
-    const n = (o) => q(
-      o.map((c) => c.styleType === "multiple" ? k(c.options, "key") : c.property)
-    ), a = q(
-      l.map((o) => o.styleType === "accordion" ? n(o.items) : o.styleType === "multiple" ? k(o.options, "key") : o.property)
-    ), d = k(i, "property");
+}, Ts = ({ 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;
-  }, [i, l]);
+  }, [n, l]);
   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),
@@ -1944,10 +1972,10 @@ const bs = (r) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Ie, { ...n }, n.label)) })
+    /* @__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)) })
   ] });
-}, Ts = Ke({}), be = ({ section: r }) => {
-  const { t: l } = z(), t = ge(), i = H(
+}, Rs = Ke({}), fe = ({ section: r }) => {
+  const { t: l } = X(), t = he(), n = H(
     (a = []) => {
       const d = {};
       for (let c = 0; c < t.length; c++)
@@ -1961,75 +1989,75 @@ const bs = (r) => {
       return o;
     },
     [t]
-  ), s = _(() => {
+  ), s = S(() => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
-    const a = (c) => q(
-      c.map((h) => h.styleType === "multiple" ? q(k(h.options, "key")) : h.property)
-    ), d = q(
-      r.items.map((c) => c.styleType === "accordion" ? a(c.items) : c.styleType === "multiple" ? q(k(c.options, "key")) : c.property)
-    ), o = k(t, "property");
+    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]), n = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Ts.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(Ce, { value: r.heading, children: [
+  }, [t, r.heading, r.items]), i = S(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(Rs.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: $.Children.toArray(
-      r.items.map((a) => ce(a, "component") ? $.createElement(a.component, { key: a.label }) : ce(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(yt, { ...a }, a.label) : a.styleType === "accordion" && i(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(Ss, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...a }, a.label))
+    /* @__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(Ts, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...a }, a.label))
     ) })
   ] }) });
-}, Rs = () => {
-  const r = G(), [l] = xe(), { t } = z(), i = Yr(), s = De(), n = Pe(r._type), a = g(oe(l), "prop"), d = g(n.props, `${a}.presets`, {});
-  if (b(i) && (!ce(n, "props") || b(d)))
+}, Vs = () => {
+  const r = q(), [l] = ge(), { t } = X(), n = zr(), 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)))
     return null;
   const o = (c) => {
     const h = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     s([r._id], h, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(kr, { children: [
-    /* @__PURE__ */ e.jsx(Nr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(K, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(_r, { children: [
+    /* @__PURE__ */ e.jsx(Sr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(G, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(Gt, {})
+      /* @__PURE__ */ e.jsx(Jt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(_r, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Be, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Tr, { 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(Ee, { children: [
-          n.type,
+          i.type,
           " ",
           t("presets")
         ] }),
         /* @__PURE__ */ e.jsx(Le, {}),
         /* @__PURE__ */ e.jsx(Oe, { children: je(d).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(d[c]), children: [
-          we(E(t(c))),
+          we(Y(t(c))),
           /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      b(i) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      b(n) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(Ee, { children: t("Global presets") }),
         /* @__PURE__ */ e.jsx(Le, {}),
-        /* @__PURE__ */ e.jsx(Oe, { children: je(i).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => o(i[c]), children: [
-          we(E(t(c))),
+        /* @__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") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Vs() {
-  const [r, l] = dt(), { flexChild: t, gridChild: i } = Sr(), { t: s } = z(), n = Tr(), [a] = xe();
+function Hs() {
+  const [r, l] = ct(), { flexChild: t, gridChild: n } = Rr(), { t: s } = X(), i = Vr(), [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") })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Rs, {}),
+    /* @__PURE__ */ e.jsx(Vs, {}),
     /* @__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(it, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-      /* @__PURE__ */ e.jsxs(Rr, { defaultValue: r, onValueChange: (d) => l(d), children: [
-        /* @__PURE__ */ e.jsx(Vr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Hr, { placeholder: s("State") }) }),
-        /* @__PURE__ */ e.jsxs(Dr, { children: [
-          k(n, (d, o) => /* @__PURE__ */ e.jsx(V, { value: o, children: s(d) }, o)),
+      /* @__PURE__ */ e.jsx(dt, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+      /* @__PURE__ */ e.jsxs(Hr, { defaultValue: r, onValueChange: (d) => l(d), children: [
+        /* @__PURE__ */ e.jsx(Dr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Br, { placeholder: s("State") }) }),
+        /* @__PURE__ */ e.jsxs(Pr, { 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") }),
@@ -2047,32 +2075,32 @@ function Vs() {
       ] })
     ] }) }),
     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(Lr, { className: "w-3" }),
+      /* @__PURE__ */ e.jsx(Or, { 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(at, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-      t && /* @__PURE__ */ e.jsx(be, { section: ds }),
-      i ? /* @__PURE__ */ e.jsx(be, { section: cs }) : null,
-      ps.map((d) => /* @__PURE__ */ e.jsx(be, { section: d }, d.heading))
+      t && /* @__PURE__ */ e.jsx(fe, { section: cs }),
+      n ? /* @__PURE__ */ e.jsx(fe, { section: ps }) : null,
+      us.map((d) => /* @__PURE__ */ e.jsx(fe, { section: d }, d.heading))
     ] }) })
   ] });
 }
-const Hs = ({ onAdd: r }) => {
-  const { t: l } = z(), [t, i] = w({ key: "", value: "" }), s = () => {
-    b(t.key) || (r({ ...t, key: Vt(t.key) }), i({ key: "", value: "" }));
+const Ds = ({ 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: (n) => i({ ...t, key: n.target.value }),
+        onChange: (i) => n({ ...t, key: i.target.value }),
         value: t.key,
         placeholder: l("Name"),
         autoComplete: "off",
         autoCapitalize: "off",
-        onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || s());
+        onKeyDown: (i) => {
+          i.key === "Enter" && (i.preventDefault(), b(t.key) || s());
         }
       }
     ),
@@ -2080,54 +2108,54 @@ const Hs = ({ onAdd: r }) => {
       _e,
       {
         name: "value",
-        onChange: (n) => i({ ...t, value: n.target.value }),
+        onChange: (i) => n({ ...t, value: i.target.value }),
         value: t.value,
         placeholder: l("Value"),
         autoComplete: "off",
         autoCapitalize: "off",
-        onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || s());
+        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(K, { disabled: b(t.key), onClick: s, size: "sm", className: "flex items-center", 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(K, { variant: "ghost", onClick: () => i({ key: "", value: "" }), children: l("Cancel") })
+      b(t.key) ? null : /* @__PURE__ */ e.jsx(G, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: l("Cancel") })
     ] })
   ] });
-}, Ds = () => {
-  const r = G(), [l, t] = w([]), [i] = xe(), s = st(), n = lt(), { t: a } = z(), { toast: d } = Br(), o = `${g(i, "0.prop")}_attrs`;
+}, Bs = () => {
+  const r = q(), [l, t] = w([]), [n] = ge(), s = st(), i = lt(), { t: a } = X(), { toast: d } = it(), o = `${g(n, "0.prop")}_attrs`;
   de.useEffect(() => {
-    const x = k(g(r, o), (y, u) => ({ key: u, value: y }));
-    b(x) ? t([]) : t(x);
+    const u = C(g(r, o), (y, x) => ({ key: x, value: y }));
+    b(u) ? t([]) : t(u);
   }, [g(r, o)]);
-  const c = (x) => {
-    const y = ve(l, (u, f) => x !== f);
+  const c = (u) => {
+    const y = ve(l, (x, f) => u !== f);
     p(y);
-  }, h = (x) => {
-    const y = Ge(l, { key: x.key });
+  }, 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(`"(${x.key})" cannot be added as it is a predefined attribute for this block`)
+        description: a(`"(${u.key})" cannot be added as it is a predefined attribute for this block`)
       });
       return;
     }
-    const u = [...l, x];
-    p(u);
+    const x = [...l, u];
+    p(x);
   }, p = de.useCallback(
-    (x = []) => {
+    (u = []) => {
       const y = {};
-      Re(x, (u) => {
-        b(u.key) || qe(y, u.key, u.value);
-      }), n([g(r, "_id")], { [o]: y });
+      Re(u, (x) => {
+        b(x.key) || qe(y, x.key, x.value);
+      }), i([g(r, "_id")], { [o]: y });
     },
     [r, s, o]
   );
@@ -2135,47 +2163,47 @@ const Hs = ({ onAdd: r }) => {
     /* @__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(
-        k(l, (x) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
-          /* @__PURE__ */ e.jsxs(O, { delayDuration: 1e3, children: [
-            /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-[90%] cursor-default truncate px-1 hover:bg-gray-200", children: [
-              x.key,
+        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: "=" }),
               " ",
-              x.value
+              u.value
             ] }) }),
-            /* @__PURE__ */ e.jsxs(Y, { className: "max-w-[200px]", children: [
+            /* @__PURE__ */ e.jsxs(M, { className: "max-w-[200px]", children: [
               /* @__PURE__ */ e.jsxs("div", { children: [
                 a("Name"),
                 ": ",
-                x.key
+                u.key
               ] }),
               /* @__PURE__ */ e.jsxs("div", { children: [
                 a("Value"),
                 ": ",
-                x.value
+                u.value
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ e.jsxs(O, { children: [
-            /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsxs($, { children: [
+            /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsx(
               "button",
               {
-                disabled: W(x.value, "dnd-"),
+                disabled: W(u.value, "dnd-"),
                 className: "invisible group-hover:visible",
-                onClick: () => c(l.indexOf(x)),
-                children: /* @__PURE__ */ e.jsx(Or, { className: "w-4 text-gray-500" })
+                onClick: () => c(l.indexOf(u)),
+                children: /* @__PURE__ */ e.jsx(Fr, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(Y, { className: "max-w-[200px]", children: W(x.value, "dnd-") ? a("Predefined attribute. Cannot be deleted") : a("Remove attribute") })
+            /* @__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(Hs, { onAdd: (x) => h(x) })
+    /* @__PURE__ */ e.jsx(Ds, { onAdd: (u) => h(u) })
   ] }) }) });
-}, Bs = {
+}, Ps = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2186,8 +2214,8 @@ const Hs = ({ onAdd: r }) => {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Dl = () => {
-  const r = G(), { t: l } = z(), [t, i] = $.useState(""), [s, n] = $.useState({
+}, Bl = () => {
+  const r = q(), { t: l } = X(), [t, n] = I.useState(""), [s, i] = I.useState({
     onDrag: (o) => o,
     onDragEnd: (o) => o,
     dragStartY: 0,
@@ -2196,20 +2224,20 @@ const Hs = ({ onAdd: r }) => {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), a = fe(
+  }), a = ue(
     (o) => {
       const c = !g(s, "negative", !1), h = g(s, "cssProperty", "");
       let p = parseFloat(s.dragStartValue);
       p = Je(p) ? 0 : p;
-      let x = Bs[s.dragUnit];
-      (W(h, "scale") || h === "opacity") && (x = 10);
-      let u = (s.dragStartY - o.pageY) / x + p;
-      c && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), s.onDrag(`${u}`), i(`${u}`);
+      let u = Ps[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}`);
     },
     [s],
     50
   ), d = H(() => {
-    setTimeout(() => s.onDragEnd(`${t}`), 100), n({
+    setTimeout(() => s.onDragEnd(`${t}`), 100), i({
       onDrag: (o) => o,
       onDragEnd: (o) => o,
       dragStartY: 0,
@@ -2219,11 +2247,11 @@ const Hs = ({ onAdd: r }) => {
       negative: !1,
       cssProperty: ""
     });
-  }, [s, t, n]);
-  return Ht(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  }, [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(ct, { children: /* @__PURE__ */ e.jsxs(ht.Provider, { value: { setDragData: n }, children: [
+  ] }) }) : /* @__PURE__ */ e.jsx(pt, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: i }, children: [
     s.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -2232,18 +2260,18 @@ const Hs = ({ onAdd: r }) => {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(Pr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
-      /* @__PURE__ */ e.jsxs(Ir, { className: "mx-1 grid grid-cols-3", children: [
-        /* @__PURE__ */ e.jsx(ye, { value: "settings", children: l("settings") }),
-        /* @__PURE__ */ e.jsx(ye, { value: "styling", children: l("styling") }),
-        /* @__PURE__ */ e.jsx(ye, { value: "attrs", children: l("Attributes") })
+    /* @__PURE__ */ e.jsxs(Ir, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
+      /* @__PURE__ */ e.jsxs($r, { 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(me, { 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(ns, {}) }) }),
-      /* @__PURE__ */ e.jsx(me, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Vs, {}) }),
-      /* @__PURE__ */ e.jsx(me, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ds, {}) })
+      /* @__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(is, {}) }) }),
+      /* @__PURE__ */ e.jsx(be, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Hs, {}) }),
+      /* @__PURE__ */ e.jsx(be, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Bs, {}) })
     ] })
   ] }) });
 };
 export {
-  Dl as default
+  Bl as default
 };