@chaibuilder/sdk 1.2.19 → 1.2.20

package/dist/{Settings-XtAatoiu.js → Settings-HgGe1ANj.js}

@@ -1,28 +1,28 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
-import * as ne from "react";
-import P, { useState as C, useMemo as _, useEffect as O, useCallback as V, memo as dt, createContext as Me, useContext as se } from "react";
-import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as ke, isArray as ie, omit as ct, truncate as pt, includes as E, get as x, first as ue, split as ut, startCase as Y, toLower as le, isEmpty as f, map as k, find as xt, last as ve, filter as we, set as Oe, debounce as gt, keys as ht, cloneDeep as yt, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as Fe, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
-import { useTranslation as K } from "react-i18next";
-import { PlusIcon as Ne, Cross2Icon as Xe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as At, InfoCircledIcon as _e, MinusIcon as Et, BoxIcon as ze, RowSpacingIcon as Lt, TriangleDownIcon as Mt, CrossCircledIcon as Ot, TrashIcon as Ft, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { aV as Yt, aW as Xt, B as xe, aX as zt, aY as Zt, aZ as Wt, a_ as Ut, a$ as Kt, b0 as qt, b1 as Gt, a1 as q, af as Jt, ag as Qt, ah as er, b2 as tr, ad as rr, ao as lr, ae as sr, ap as X, aq as z, ar as Z, b3 as or, b4 as ar, b5 as nr, b6 as ir, b7 as dr, b8 as cr, a6 as We, a5 as pr, h as ur, b9 as Ue, ba as de, bb as ce, bc as pe, ac as Se, M as Ke, _ as qe, r as Ge, aB as Te, bd as xr, v as gr, be as hr, $ as ge, V as yr, a4 as Je, N as Be, z as br, a7 as mr, bf as fr, aj as vr, ak as wr, al as jr, am as Cr, an as H, bg as Qe, au as kr, av as Nr, aw as De, ax as $e } from "./index-WP7IRkij.js";
-import { u as _r } from "./controls-XPXGHKht.js";
-import { Check as Sr, EditIcon as Tr, TrashIcon as Rr, BrushIcon as Vr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Hr } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-yILWlilS.js";
-import { J as Br, a as Dr, d as $r } from "./index-e0c8PmRQ.js";
-import Ir from "@rjsf/core";
-import Pr from "@rjsf/validator-ajv8";
-import { useAtom as Ar } from "jotai";
-import Er from "react-autosuggest";
-import Lr from "fuse.js";
-import { A as Mr, C as he, g as Or } from "./Class-3k8xjeiM.js";
-import { a as Fr } from "./MODIFIERS-WQdaNvb8.js";
+import * as de from "react";
+import I, { useState as C, useMemo as _, useEffect as O, useCallback as V, memo as ft, createContext as Qe, useContext as le } from "react";
+import { useThrottledCallback as je } from "@react-hookz/web";
+import { forEach as _e, isArray as ce, omit as vt, truncate as jt, includes as M, get as x, first as ge, split as wt, startCase as z, toLower as se, isEmpty as f, map as k, find as Ct, last as we, filter as Ce, set as et, debounce as kt, keys as Nt, cloneDeep as _t, each as St, capitalize as Tt, reject as Rt, nth as $e, startsWith as G, isNumber as Vt, parseInt as Ht, isNaN as tt, findLast as Dt, flatten as K, intersection as rt, has as me, isNull as Bt } from "lodash-es";
+import { useTranslation as W } from "react-i18next";
+import { PlusIcon as Se, Cross2Icon as st, EyeOpenIcon as $t, EyeClosedIcon as Pe, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as It, ArrowBottomRightIcon as At, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Et, AlignCenterHorizontallyIcon as Lt, AlignRightIcon as Ot, StretchHorizontallyIcon as Ft, FontItalicIcon as zt, UnderlineIcon as Yt, OverlineIcon as Xt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as Te, MinusIcon as Ut, BoxIcon as lt, RowSpacingIcon as Gt, TriangleDownIcon as Kt, CrossCircledIcon as qt, TrashIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as ot } from "@radix-ui/react-icons";
+import { aV as er, aW as tr, B as oe, aX as rr, aY as sr, aZ as lr, a_ as or, a$ as ar, b0 as nr, b1 as ir, a1 as U, af as dr, ag as cr, ah as pr, b2 as ur, ad as xr, ao as gr, ae as hr, ap as Y, aq as X, ar as Z, b3 as yr, b4 as br, b5 as mr, b6 as fr, b7 as vr, b8 as jr, a6 as at, a5 as wr, h as Cr, b9 as nt, ba as pe, bb as ue, bc as xe, ac as he, M as Re, _ as it, r as dt, aB as Ve, bd as kr, v as Nr, be as _r, $ as ye, V as Sr, a4 as ct, N as Ie, z as Tr, aG as Rr, aH as Vr, aI as Hr, bf as He, aJ as Ae, aK as Me, bg as Ee, bh as Le, bi as Oe, a7 as Dr, aj as Br, ak as $r, al as Pr, am as Ir, an as H, au as Ar, av as Mr, aw as Fe, ax as ze } from "./index-la4rqGKN.js";
+import { u as Er } from "./controls-OfJWSEqC.js";
+import { Check as Lr, EditIcon as Or, TrashIcon as Fr, BrushIcon as zr } from "lucide-react";
+import { getBlockComponent as De, getChaiDataProviders as Yr, useGlobalStylingPresets as Xr } from "@chaibuilder/runtime";
+import { E as pt, u as ut } from "./index-QIbDWoML.js";
+import { J as Zr, a as Wr, d as Ur } from "./index-e0c8PmRQ.js";
+import Gr from "@rjsf/core";
+import Kr from "@rjsf/validator-ajv8";
+import qr from "react-autosuggest";
+import Jr from "fuse.js";
+import { A as Qr, C as be, g as es } from "./Class-3k8xjeiM.js";
+import { a as ts } from "./MODIFIERS-WQdaNvb8.js";
+import { get as Ye, first as rs, isEmpty as ie, has as ss, keys as Xe, capitalize as Ze, startCase as We } from "lodash";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "./Functions-7jnEwJyw.js";
 import "clsx";
 import "tailwind-merge";
-import "flat-to-nested";
+import "jotai";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -46,37 +46,35 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-dom";
 import "react-quill";
-import "lodash";
 import "i18next";
 import "@floating-ui/react-dom";
-import "react-textarea-autosize";
 import "flagged";
 import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
-function Yr(r) {
-  const o = [], t = {};
+function ls(r) {
+  const a = [], t = {};
   function s(l, i) {
-    ke(i, (a, c) => {
-      const n = l ? `${l}.${c}` : c, u = ie(a) ? "list" : typeof a;
-      o.push(n), t[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ie(a) && s(n, a);
+    _e(i, (o, c) => {
+      const n = l ? `${l}.${c}` : c, p = ce(o) ? "list" : typeof o;
+      a.push(n), t[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ce(o) && s(n, o);
     });
   }
-  return s("", ct(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: o, pathsType: t };
+  return s("", vt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
 }
-const je = ({ data: r, fullView: o }) => {
+const ke = ({ data: r, fullView: a }) => {
   if (!r)
     return null;
   const t = typeof r;
-  return o ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
-      Br,
+    /* @__PURE__ */ e.jsx(pt, { children: /* @__PURE__ */ e.jsx(
+      Zr,
       {
         data: r,
-        shouldExpandNode: Dr,
+        shouldExpandNode: Wr,
         style: {
-          ...$r,
+          ...Ur,
           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"
@@ -86,99 +84,99 @@ const je = ({ data: r, fullView: o }) => {
   ] }) : /* @__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: pt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, Ie = ({
+  ] }) : /* @__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 }) });
+}, Ue = ({
   type: r,
-  value: o = "",
+  value: a = "",
   setValue: t,
   data: s,
   onChange: l,
   dataType: i,
-  appliedBindings: a
+  appliedBindings: o
 }) => {
-  const { paths: c, pathsType: n } = Yr(s), u = r === "PROP" ? et(s == null ? void 0 : s._type) : {}, y = r === "PROP", [d, h] = C(!1), g = _(() => r === "PROP" ? c.filter(
-    (p) => !E(a, p) && x(u, `props.${ue(ut(p, "."))}.binding`)
-  ) : c.filter((p) => i === x(n, p, "")), [r, c, a, i, u]);
+  const { paths: c, pathsType: n } = ls(s), p = r === "PROP" ? De(s == null ? void 0 : s._type) : {}, h = r === "PROP", [d, y] = C(!1), g = _(() => r === "PROP" ? c.filter(
+    (u) => !M(o, u) && x(p, `props.${ge(wt(u, "."))}.binding`)
+  ) : c.filter((u) => i === x(n, u, "")), [r, c, o, i, p]);
   return O(() => {
-    o && l(o);
-  }, [o, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    a && l(a);
+  }, [a, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(le(r)) }),
-      /* @__PURE__ */ e.jsxs(Yt, { open: d, onOpenChange: h, children: [
-        /* @__PURE__ */ e.jsx(Xt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          xe,
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: z(se(r)) }),
+      /* @__PURE__ */ e.jsxs(er, { open: d, onOpenChange: y, children: [
+        /* @__PURE__ */ e.jsx(tr, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          oe,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${f(o) ? "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: o ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${f(a) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
+            children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                y && /* @__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) }),
-                o
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: z(i) }),
+                a
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              Y(le(r))
+              z(se(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(zt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Zt, { children: [
-          /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${le(r)}...` }),
-          /* @__PURE__ */ e.jsxs(Ut, { children: [
-            /* @__PURE__ */ e.jsx(Kt, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(qt, { children: k(g, (p) => /* @__PURE__ */ e.jsxs(
-              Gt,
+        /* @__PURE__ */ e.jsx(rr, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(sr, { children: [
+          /* @__PURE__ */ e.jsx(lr, { placeholder: `Choose ${se(r)}...` }),
+          /* @__PURE__ */ e.jsxs(or, { children: [
+            /* @__PURE__ */ e.jsx(ar, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(nr, { children: k(g, (u) => /* @__PURE__ */ e.jsxs(
+              ir,
               {
-                value: p,
-                className: `cursor-pointer ${y ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
+                value: u,
+                className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (m) => {
-                  t(xt(g, (w) => w === m) || null), h(!1);
+                  t(Ct(g, (j) => j === m) || null), y(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Sr, { className: `h-4 w-4 text-green-500 ${o === p ? "" : "opacity-0"}` }),
-                    p
+                    /* @__PURE__ */ e.jsx(Lr, { className: `h-4 w-4 text-green-500 ${a === u ? "" : "opacity-0"}` }),
+                    u
                   ] }),
-                  y ? /* @__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(x(n, p, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: x(s, p) }) })
+                  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: z(x(n, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(ke, { data: x(s, u) }) })
                 ]
               },
-              p
+              u
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !y && !f(o) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: x(s, o, ""), fullView: !0 }) })
+    !h && !f(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(ke, { data: x(s, a, ""), fullView: !0 }) })
   ] });
-}, Xr = ({
+}, os = ({
   appliedBindings: r = [],
-  onAddBinding: o,
+  onAddBinding: a,
   editMode: t,
   item: s
 }) => {
-  const [l, i] = C(t ? s.key : ""), [a, c] = C(t ? s.value : ""), n = q(), [u] = rt(), y = V(
-    (g, p) => {
+  const [l, i] = C(t ? s.key : ""), [o, c] = C(t ? s.value : ""), n = U(), [p] = ut(), h = V(
+    (g, u) => {
       if (f(g))
         return "";
       {
-        const m = x(p === "PROP" ? n : u, g, "");
-        if (ie(m))
+        const m = x(u === "PROP" ? n : p, g, "");
+        if (ce(m))
           return "list";
-        const w = typeof m;
-        return w === "string" ? "text" : w === "object" ? "model" : w;
+        const j = typeof m;
+        return j === "string" ? "text" : j === "object" ? "model" : j;
       }
     },
-    [n, u]
-  ), [d, h] = C(t ? y(s.key, "PROP") : "");
+    [n, p]
+  ), [d, y] = C(t ? h(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(Jt, { children: [
-      /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(er, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(dr, { children: [
+      /* @__PURE__ */ e.jsx(cr, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(pr, { 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(
-        Ie,
+        Ue,
         {
           type: "PROP",
           isDisabled: !1,
@@ -186,8 +184,8 @@ const je = ({ data: r, fullView: o }) => {
           value: l,
           setValue: i,
           onChange: (g) => {
-            const p = y(g, "PROP");
-            i(g), d !== p && c(""), h(p);
+            const u = h(g, "PROP");
+            i(g), d !== u && c(""), y(u);
           },
           data: n,
           dataType: d,
@@ -196,40 +194,40 @@ const je = ({ data: r, fullView: o }) => {
       ),
       /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
       /* @__PURE__ */ e.jsx(
-        Ie,
+        Ue,
         {
           type: "PATH",
           isDisabled: f(l),
           placeholder: "Enter data path",
-          value: a,
+          value: o,
           setValue: c,
           onChange: (g) => {
-            const p = y(g, "PATH");
-            c(d === p ? g : "");
+            const u = h(g, "PATH");
+            c(d === u ? g : "");
           },
-          data: u,
+          data: p,
           dataType: d,
           appliedBindings: r
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
-      xe,
+    /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
+      oe,
       {
         type: "submit",
         className: "mt-4",
-        disabled: f(l) && f(a),
-        onClick: () => o({ key: l, value: a }),
+        disabled: f(l) && f(o),
+        onClick: () => a({ key: l, value: o }),
         children: "Save"
       }
     ) })
   ] });
-}, lt = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: s, editMode: l = !0, item: i = {} }) => {
-  const [a, c] = C(!1);
-  return /* @__PURE__ */ e.jsxs(rr, { children: [
-    /* @__PURE__ */ e.jsx(lr, { disabled: r, asChild: !0, onClick: () => c(!0), children: o }),
-    a && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
-      Xr,
+}, xt = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: s, editMode: l = !0, item: i = {} }) => {
+  const [o, c] = C(!1);
+  return /* @__PURE__ */ e.jsxs(xr, { children: [
+    /* @__PURE__ */ e.jsx(gr, { disabled: r, asChild: !0, onClick: () => c(!0), children: a }),
+    o && /* @__PURE__ */ e.jsx(hr, { children: /* @__PURE__ */ e.jsx(
+      os,
       {
         item: i,
         editMode: l,
@@ -240,94 +238,94 @@ const je = ({ data: r, fullView: o }) => {
       }
     ) })
   ] });
-}, zr = ({
+}, as = ({
   item: r,
-  onAddBinding: o,
+  onAddBinding: a,
   onRemove: t,
   selectedBlock: s,
   dataProvider: l,
   appliedBindings: i
 }) => {
-  const [a, c] = C("string"), n = (u, y) => {
-    if (f(u))
+  const [o, c] = C("string"), n = (p, h) => {
+    if (f(p))
       return "";
     {
-      const d = x(y === "PROP" ? s : l, u, "");
-      if (ie(d))
+      const d = x(h === "PROP" ? s : l, p, "");
+      if (ce(d))
         return "list";
-      const h = typeof d;
-      return h === "string" ? "text" : h === "object" ? "model" : h;
+      const y = typeof d;
+      return y === "string" ? "text" : y === "object" ? "model" : y;
     }
   };
   return O(() => c(() => n(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(je, { data: x(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(ke, { data: x(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: o, appliedBindings: i, item: r, children: /* @__PURE__ */ e.jsx(Tr, { 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: a, appliedBindings: i, item: r, children: /* @__PURE__ */ e.jsx(Or, { 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(
-        Rr,
+        Fr,
         {
           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"
         }
       )
     ] }),
-    !f(a) && !f(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) })
+    !f(o) && !f(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: z(o) })
   ] });
-}, Zr = ({ bindingData: r, onChange: o }) => {
-  const t = q(), [s] = rt(), l = Hr(), [i, a] = C(
-    k(r, (d, h) => ({ key: h, value: d }))
+}, ns = ({ bindingData: r, onChange: a }) => {
+  const t = U(), [s] = ut(), l = Yr(), [i, o] = C(
+    k(r, (d, y) => ({ key: y, value: d }))
   );
   O(() => {
-    a(k(r, (d, h) => ({ key: h, value: d })));
+    o(k(r, (d, y) => ({ key: y, value: d })));
   }, [t == null ? void 0 : t._id, r]);
   const c = _(() => {
     if (f(s))
       return !0;
     if (f(i))
       return !1;
-    const d = ve(i);
+    const d = we(i);
     return f(d == null ? void 0 : d.key) || f(d == null ? void 0 : d.value);
   }, [s, i]), n = (d) => {
-    const h = we(i, (g) => g.key !== d.key);
-    a([...h, d]), y([...h, d]);
-  }, u = (d) => {
-    const h = we(i, (g, p) => d !== p);
-    y([...h]);
-  }, y = V(
+    const y = Ce(i, (g) => g.key !== d.key);
+    o([...y, d]), h([...y, d]);
+  }, p = (d) => {
+    const y = Ce(i, (g, u) => d !== u);
+    h([...y]);
+  }, h = V(
     (d = []) => {
-      if (a(d), f(d)) {
-        o({});
+      if (o(d), f(d)) {
+        a({});
         return;
       }
-      const h = {};
-      ke(d, (g) => {
-        !f(g == null ? void 0 : g.key) && !f(g == null ? void 0 : g.value) && Oe(h, g.key, g.value);
-      }), o(h);
+      const y = {};
+      _e(d, (g) => {
+        !f(g == null ? void 0 : g.key) && !f(g == null ? void 0 : g.value) && et(y, g.key, g.value);
+      }), a(y);
     },
-    [o]
+    [a]
   );
   return f(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    k(i, (d, h) => /* @__PURE__ */ e.jsx(
-      zr,
+    k(i, (d, y) => /* @__PURE__ */ e.jsx(
+      as,
       {
         item: d,
         onAddBinding: n,
-        onRemove: () => u(h),
+        onRemove: () => p(y),
         selectedBlock: t,
         dataProvider: s,
         appliedBindings: k(i, "key")
       },
       d.key
     )),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(z, { disabled: f(s), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        lt,
+    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(X, { disabled: f(s), className: "w-full", children: /* @__PURE__ */ e.jsx(
+        xt,
         {
           disabled: c,
           appliedBindings: k(i, "key"),
@@ -344,68 +342,68 @@ const je = ({ data: r, fullView: o }) => {
       c && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: f(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Wr = () => /* @__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" }), be = dt(({ properties: r, formData: o, onChange: t }) => {
+}, is = () => /* @__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" }), fe = ft(({ properties: r, formData: a, onChange: t }) => {
   const s = { type: "object", properties: {} }, l = {};
   return Object.keys(r).forEach((i) => {
-    const a = r[i];
-    if (E(["slot", "styles"], a.type))
+    const o = r[i];
+    if (M(["slot", "styles"], o.type))
       return;
     const c = i;
-    s.properties[c] = or(a), l[c] = ar(a);
+    s.properties[c] = yr(o), l[c] = br(o);
   }), /* @__PURE__ */ e.jsx(
-    Ir,
+    Gr,
     {
       widgets: {
-        binding: Wr,
-        richtext: nr,
-        icon: ir,
-        image: dr
+        binding: is,
+        richtext: mr,
+        icon: fr,
+        image: vr
       },
-      fields: { link: cr },
+      fields: { link: jr },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Pr,
+      validator: Kr,
       uiSchema: l,
       schema: s,
-      formData: o,
+      formData: a,
       onChange: t
     }
   );
 });
-function Ur() {
-  const r = q(), o = We(), t = pr(), s = et(r._type), l = { ...r }, [i, a] = C(l), c = ur("dataBindingSupport", !1), n = ({ formData: p }, m, w) => {
+function ds() {
+  const r = U(), a = at(), t = wr(), s = De(r._type), l = { ...r }, [i, o] = C(l), c = Cr("dataBindingSupport", !1), n = ({ formData: u }, m, j) => {
     if (m) {
-      const D = m.replace("root.", "");
-      t([r._id], { [D]: x(p, D) }, w);
+      const B = m.replace("root.", "");
+      t([r._id], { [B]: x(u, B) }, j);
     }
-  }, u = V(
-    gt(({ formData: p }, m, w) => {
-      n({ formData: p }, m, w), a(p);
+  }, p = V(
+    kt(({ formData: u }, m, j) => {
+      n({ formData: u }, m, j), o(u);
     }, 1500),
     []
-  ), y = ({ formData: p }, m) => {
+  ), h = ({ formData: u }, m) => {
     if (m) {
-      const w = m.replace("root.", "");
-      o([r._id], { [w]: x(p, w) }), u({ formData: p }, m, { [w]: x(i, w) });
+      const j = m.replace("root.", "");
+      a([r._id], { [j]: x(u, j) }), p({ formData: u }, m, { [j]: x(i, j) });
     }
   }, d = {
-    _name: _r({
+    _name: Er({
       title: "Name",
       default: x(r, "_name", r._type)
     })
-  }, h = ht(x(l, "_bindings", {})), g = _(() => {
-    const p = yt(x(s, "props", {}));
-    return c && bt(h, (m) => delete p[m]), p;
-  }, [s, h, c]);
+  }, y = Nt(x(l, "_bindings", {})), g = _(() => {
+    const u = _t(x(s, "props", {}));
+    return c && St(y, (m) => delete u[m]), u;
+  }, [s, y, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: d }),
+    /* @__PURE__ */ e.jsx(fe, { onChange: h, formData: l, properties: d }),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    c ? /* @__PURE__ */ e.jsxs(Ue, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(de, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(ce, { 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: [
+    c ? /* @__PURE__ */ e.jsxs(nt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(pe, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(ue, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
@@ -414,90 +412,90 @@ function Ur() {
           ),
           "Data Binding"
         ] }) }),
-        /* @__PURE__ */ e.jsx(pe, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          Zr,
+        /* @__PURE__ */ e.jsx(xe, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
+          ns,
           {
             bindingData: x(r, "_bindings", {}),
-            onChange: (p) => {
-              n({ formData: { _bindings: p } }, "root._bindings");
+            onChange: (u) => {
+              n({ formData: { _bindings: u } }, "root._bindings");
             }
           }
         ) })
       ] }),
-      /* @__PURE__ */ e.jsxs(de, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e.jsxs(pe, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(ue, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-blue-500" }),
           "Static Content"
         ] }) }),
-        /* @__PURE__ */ e.jsxs(pe, { className: "pt-4", children: [
-          f(h) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
+        /* @__PURE__ */ e.jsxs(xe, { className: "pt-4", children: [
+          f(y) ? 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(h, mt).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: k(y, Tt).join(", ") }),
             " ",
-            h.length === 1 ? "property" : "properties",
+            y.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
-          /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: g })
+          /* @__PURE__ */ e.jsx(fe, { onChange: h, formData: l, properties: g })
         ] })
       ] })
-    ] }) : /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: g }),
+    ] }) : /* @__PURE__ */ e.jsx(fe, { onChange: h, formData: l, properties: g }),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Lr(Mr, {
+const Ge = new Jr(Qr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Kr() {
-  var D;
-  const [r] = Se(), o = q(), t = Ke(), s = qe(), [l] = Ge(), [i, a] = C(""), c = (D = ue(r)) == null ? void 0 : D.prop, n = ft((x(o, c, "").replace(Fr, "").split(",").pop() || "").split(" "), f), u = () => {
-    const j = i.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(l, j, !0), a("");
-  }, [y, d] = C([]), h = ({ value: j }) => {
-    const I = j.trim().toLowerCase(), L = I.match(/.+:/g);
+function cs() {
+  var B;
+  const [r] = he(), a = U(), t = Re(), s = it(), [l] = dt(), [i, o] = C(""), c = (B = ge(r)) == null ? void 0 : B.prop, n = Rt((x(a, c, "").replace(ts, "").split(",").pop() || "").split(" "), f), p = () => {
+    const w = i.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    t(l, w, !0), o("");
+  }, [h, d] = C([]), y = ({ value: w }) => {
+    const P = w.trim().toLowerCase(), E = P.match(/.+:/g);
     let N = [];
-    if (L && L.length > 0) {
-      const [$] = L, F = I.replace($, "");
-      N = Pe.search(F).map((b) => ({
+    if (E && E.length > 0) {
+      const [$] = E, F = P.replace($, "");
+      N = Ge.search(F).map((b) => ({
         ...b,
         item: { ...b.item, name: $ + b.item.name }
       }));
     } else
-      N = Pe.search(I);
+      N = Ge.search(P);
     d(k(N, "item"));
   }, g = () => {
     d([]);
-  }, p = (j) => j.name, m = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), w = {
+  }, u = (w) => w.name, m = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), j = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
     value: i,
-    onKeyDown: (j) => {
-      j.key === "Enter" && i.trim() !== "" && u();
+    onKeyDown: (w) => {
+      w.key === "Enter" && i.trim() !== "" && p();
     },
-    onChange: (j, { newValue: I }) => a(I),
+    onChange: (w, { newValue: P }) => o(P),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   };
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${y.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 ${h.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(Te, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(Ve, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Er,
+            qr,
             {
-              suggestions: y,
-              onSuggestionsFetchRequested: h,
+              suggestions: h,
+              onSuggestionsFetchRequested: y,
               onSuggestionsClearRequested: g,
-              getSuggestionValue: p,
+              getSuggestionValue: u,
               renderSuggestion: m,
-              inputProps: w,
+              inputProps: j,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
               },
@@ -509,36 +507,36 @@ function Kr() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            xe,
+            oe,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: u,
+              onClick: p,
               disabled: i.trim() === "",
               size: "sm",
-              children: /* @__PURE__ */ e.jsx(Ne, {})
+              children: /* @__PURE__ */ e.jsx(Se, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
           f(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
-          ne.Children.toArray(
-            n.map((j) => /* @__PURE__ */ e.jsxs(
+          de.Children.toArray(
+            n.map((w) => /* @__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: [
-                  j,
+                  w,
                   /* @__PURE__ */ e.jsx(
-                    Xe,
+                    st,
                     {
-                      onClick: () => s(l, [j]),
+                      onClick: () => s(l, [w]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
                 ]
               },
-              j
+              w
             ))
           )
         ] })
@@ -546,16 +544,16 @@ function Kr() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
+const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ps = {
   heading: "flex.heading",
   items: [
-    { type: "arbitrary", label: "flex.basis", units: B, property: "flexBasis" },
+    { type: "arbitrary", label: "flex.basis", units: D, 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" }
   ]
-}, Gr = {
+}, us = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -566,17 +564,17 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, Jr = [
+}, xs = [
   {
     heading: "layout.heading",
     items: [
-      { type: "arbitrary", label: "layout.width", units: B.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: B.concat("auto"), property: "height" },
+      { type: "arbitrary", label: "layout.width", units: D.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: D.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "layout.margin",
         negative: !0,
-        units: [...B, "auto"],
+        units: [...D, "auto"],
         options: [
           { key: "margin", label: "layout.margin_all" },
           { key: "marginX", label: "layout.margin_lr" },
@@ -617,16 +615,16 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
         styleType: "accordion",
         heading: "size.min_width_height",
         items: [
-          { type: "arbitrary", label: "size.min_width", units: B.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "size.min_height", units: B.concat("auto"), property: "minHeight" }
+          { type: "arbitrary", label: "size.min_width", units: D.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "size.min_height", units: D.concat("auto"), property: "minHeight" }
         ]
       },
       {
         styleType: "accordion",
         heading: "size.max_width_height",
         items: [
-          { type: "arbitrary", label: "size.max_width", units: B.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "size.max_height", units: B.concat("auto"), property: "maxHeight" }
+          { type: "arbitrary", label: "size.max_width", units: D.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "size.max_height", units: D.concat("auto"), property: "maxHeight" }
         ]
       },
       {
@@ -643,7 +641,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
   {
     heading: "display.heading",
     items: [
-      { type: "dropdown", label: "display.display", property: "display", units: B },
+      { type: "dropdown", label: "display.display", property: "display", units: D },
       {
         styleType: "accordion",
         heading: "display.flex_options",
@@ -694,7 +692,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
         styleType: "accordion",
         heading: "display.visibility_opacity",
         items: [
-          { type: "dropdown", label: "display.visibility", property: "visibility", units: B },
+          { type: "dropdown", label: "display.visibility", property: "visibility", units: D },
           { type: "arbitrary", label: "display.opacity", property: "opacity", units: ["-"] }
         ]
       }
@@ -770,8 +768,8 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
     heading: "typography.heading",
     items: [
       { type: "dropdown", property: "fontFamily", label: "typography.font" },
-      { type: "arbitrary", property: "fontSize", label: "typography.size", units: B },
-      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: B.concat("-") },
+      { type: "arbitrary", property: "fontSize", label: "typography.size", units: D },
+      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: D.concat("-") },
       { type: "range", property: "fontWeight", label: "typography.weight" },
       { type: "color", property: "textColor", label: "typography.color" },
       {
@@ -968,15 +966,15 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: Kr }]
+    items: [{ component: cs }]
   }
-], st = {
+], 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: kt,
-  invisible: He,
+  visible: $t,
+  invisible: Pe,
   // display
-  hidden: He,
+  hidden: Pe,
   gap: A,
   gapX: T,
   gapY: R,
@@ -1009,10 +1007,10 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
   borderRadiusRight: ee,
   borderRadiusBottom: te,
   borderRadiusLeft: re,
-  borderRadiusTopLeft: Nt,
-  borderRadiusTopRight: _t,
-  borderRadiusBottomRight: St,
-  borderRadiusBottomLeft: Tt,
+  borderRadiusTopLeft: Pt,
+  borderRadiusTopRight: It,
+  borderRadiusBottomRight: At,
+  borderRadiusBottomLeft: Mt,
   divideXWidth: T,
   divideYWidth: R,
   scale: A,
@@ -1039,18 +1037,18 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
   marginBottom: te,
   marginLeft: re,
   // text-align
-  textLeft: Rt,
-  textCenter: Vt,
-  textRight: Ht,
-  textJustify: Bt,
+  textLeft: Et,
+  textCenter: Lt,
+  textRight: Ot,
+  textJustify: Ft,
   // font style
-  italic: Dt,
+  italic: zt,
   // "not-italic": "",
   // decoration
-  underline: $t,
-  overline: It,
+  underline: Yt,
+  overline: Xt,
   // transform
-  uppercase: Pt,
+  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",
@@ -1091,7 +1089,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
       }
     )
   ] }),
-  "float-none": Xe,
+  "float-none": st,
   // position
   fixed: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
@@ -1163,52 +1161,52 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
       }
     )
   ] }),
-  static: At
-}, oe = Me({ canReset: !1, canChange: !0 }), Qr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  static: Wt
+}, ae = Qe({ canReset: !1, canChange: !0 }), gs = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: o, canChange: t }, children: r })
-), ot = ({ label: r, property: o, onChange: t }) => {
-  const s = _(() => x(he, `${o}.classes`, [""]), [o]), l = ae(o), i = _(() => x(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(i);
+  /* @__PURE__ */ e.jsx(ae.Provider, { value: { canReset: a, canChange: t }, children: r })
+), ht = ({ label: r, property: a, onChange: t }) => {
+  const s = _(() => x(be, `${a}.classes`, [""]), [a]), l = ne(a), i = _(() => x(l, "cls", ""), [l]), { canChange: o } = le(ae), c = /\[.*\]/g.test(i);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(xr, { className: "w-[70%] rounded py-1", readOnly: !0, value: i }),
-    /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
+    /* @__PURE__ */ e.jsx(kr, { className: "w-[70%] rounded py-1", readOnly: !0, value: i }),
+    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Te, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    Ce,
+    Ne,
     {
       rounded: r,
-      onChange: (n) => t(n, o),
+      onChange: (n) => t(n, a),
       selected: i,
       options: s,
-      disabled: !a
+      disabled: !o
     }
   ) });
 };
-function Ce({ selected: r, onChange: o, rounded: t = !1, options: s, disabled: l = !1 }) {
-  const i = r.replace(/.*:/g, "").trim(), { undo: a, redo: c } = gr();
+function Ne({ selected: r, onChange: a, rounded: t = !1, options: s, disabled: l = !1 }) {
+  const i = r.replace(/.*:/g, "").trim(), { undo: o, redo: c } = Nr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
       disabled: !s.length || l,
       className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (n) => o(n.target.value),
+      onChange: (n) => a(n.target.value),
       onKeyDown: (n) => {
-        n.ctrlKey && (n.key === "z" && a(), n.key === "y" && c());
+        n.ctrlKey && (n.key === "z" && o(), n.key === "y" && c());
       },
       value: i,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
+        I.Children.toArray(
           s.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
         )
       ]
     }
   );
 }
-const el = ({ property: r, onChange: o }) => {
-  const { canReset: t, canChange: s } = se(oe), l = ae(r), i = _(() => x(l, "cls", ""), [l]), a = _(() => x(he, `${r}.classes`, [""]), [r]), c = a.indexOf(i) > -1 ? a.indexOf(i) : 0, n = /\[.*\]/g.test(i);
+const hs = ({ property: r, onChange: a }) => {
+  const { canReset: t, canChange: s } = le(ae), l = ne(r), i = _(() => x(l, "cls", ""), [l]), o = _(() => x(be, `${r}.classes`, [""]), [r]), c = o.indexOf(i) > -1 ? o.indexOf(i) : 0, n = /\[.*\]/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: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1216,48 +1214,48 @@ const el = ({ property: r, onChange: o }) => {
         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: !s && (!t || c - 1 < 0),
-        onClick: () => o(Ve(a, c - 1), r),
+        onClick: () => a($e(o, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Et,
+          Ut,
           {
             className: !s && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: r, onChange: o }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ht, { label: !1, property: r, onChange: a }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !s && (!t || c + 1 >= a.length),
-        onClick: () => o(Ve(a, c + 1), r),
+        disabled: !s && (!t || c + 1 >= o.length),
+        onClick: () => a($e(o, c + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ne,
+          Se,
           {
-            className: !s && (!t || c + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !s && (!t || c + 1 >= o.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, tl = ({ property: r, onChange: o }) => {
-  const t = _(() => x(he, `${r}.classes`, [""]), [r]), { canChange: s } = se(oe), l = ae(r), i = _(() => x(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (a) => /* @__PURE__ */ e.jsxs(X, { children: [
-    /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+}, ys = ({ property: r, onChange: a }) => {
+  const t = _(() => x(be, `${r}.classes`, [""]), [r]), { canChange: s } = le(ae), l = ne(r), i = _(() => x(l, "cls", ""), [l]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (o) => /* @__PURE__ */ e.jsxs(Y, { children: [
+    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !s,
-        onClick: () => o(a, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${i === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(x(st, a, ze))
+        onClick: () => a(o, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${i === o ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: I.createElement(x(gt, o, lt))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(Z, { children: Y(le(a)) })
+    /* @__PURE__ */ e.jsx(Z, { children: z(se(o)) })
   ] })) });
-}, rl = {
+}, bs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1269,39 +1267,39 @@ const el = ({ property: r, onChange: o }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, ll = ({ property: r, onChange: o }) => {
-  const t = ae(r), s = _(() => x(t, "cls", ""), [t]), { canChange: l } = se(oe), [i, a] = C([]), [c, n] = C({ color: "", shade: "" }), u = s.split("-"), y = x(u, "1", ""), d = x(u, "2", ""), h = V(
+}, ms = ({ property: r, onChange: a }) => {
+  const t = ne(r), s = _(() => x(t, "cls", ""), [t]), { canChange: l } = le(ae), [i, o] = C([]), [c, n] = C({ color: "", shade: "" }), p = s.split("-"), h = x(p, "1", ""), d = x(p, "2", ""), y = V(
     // eslint-disable-next-line no-shadow
-    (p) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(p) ? (a([]), n({ color: p })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((m) => ({ ...m, color: p, shade: m.shade ? m.shade : "500" })));
+    (u) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (o([]), n({ color: u })) : (o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((m) => ({ ...m, color: u, shade: m.shade ? m.shade : "500" })));
     },
-    [a, n]
+    [o, n]
   );
   O(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(y))
-      return a([]);
-    a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [y]);
+    if (["current", "inherit", "transparent", "black", "white"].includes(h))
+      return o([]);
+    o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [h]);
   const g = V(
     // eslint-disable-next-line no-shadow
-    (p) => {
-      n({ color: y, shade: p });
+    (u) => {
+      n({ color: h, shade: u });
     },
-    [y]
+    [h]
   );
   return O(() => {
     n({ color: "", shade: "" });
   }, [t]), O(() => {
-    const m = `${x(rl, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    m.match(new RegExp(x(he, `${r}.regExp`, ""))) && o(m, r);
-  }, [c, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const m = `${x(bs, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    m.match(new RegExp(x(be, `${r}.regExp`, ""))) && a(m, r);
+  }, [c, a, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      Ce,
+      Ne,
       {
         disabled: !l,
         rounded: !0,
-        selected: y,
-        onChange: h,
+        selected: h,
+        onChange: y,
         options: [
           "current",
           "transparent",
@@ -1334,20 +1332,20 @@ const el = ({ property: r, onChange: o }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: d, disabled: !y || !l, onChange: g, options: i }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ne, { rounded: !0, selected: d, disabled: !h || !l, onChange: g, options: i }) })
   ] });
-}, Ae = (r, o) => {
+}, Ke = (r, a) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && o.includes(t))
+  if ((t === "auto" || t === "none") && a.includes(t))
     return { value: "", unit: t };
-  const s = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
+  const s = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
   t = t.replace(s, "");
-  const l = r.match(s), i = l && l.length > 1, a = !f(t) && Number.isNaN(Number(t));
-  return i || a ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
+  const l = r.match(s), i = l && l.length > 1, o = !f(t) && Number.isNaN(Number(t));
+  return i || o ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const sl = (r) => {
-  const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
+const fs = (r) => {
+  const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
   if (t === "px")
@@ -1356,26 +1354,26 @@ const sl = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (E(r, "skew-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (E(r, "rotate-"))
-    return { value: `${o}${t}`, unit: "deg" };
-  if (E(r, "opacity-"))
+  if (M(r, "skew-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (M(r, "rotate-"))
+    return { value: `${a}${t}`, unit: "deg" };
+  if (M(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (E(r, "duration-") || E(r, "delay-"))
+  if (M(r, "duration-") || M(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (E(r, "translate-") && !t.includes("/"))
-    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
-  if (E(r, "scale-"))
-    return { value: `${o}${`${t / 100}`}`, unit: "-" };
-  if (W(r, "border")) {
+  if (M(r, "translate-") && !t.includes("/"))
+    return { value: `${a}${`${t / 4}`}`, unit: "rem" };
+  if (M(r, "scale-"))
+    return { value: `${a}${`${t / 100}`}`, unit: "-" };
+  if (G(r, "border")) {
     const s = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
     if (s)
       return { value: s[0].split("-").pop(), unit: "px" };
     if (r.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
-  if (W(r, "max-w-")) {
+  if (G(r, "max-w-")) {
     if (r === "max-w-screen-sm")
       return { value: "640", unit: "px" };
     if (r === "max-w-screen-md")
@@ -1411,7 +1409,7 @@ const sl = (r) => {
     if (t === "prose")
       return { value: "65", unit: "ch" };
   }
-  if (W(r, "text-")) {
+  if (G(r, "text-")) {
     if (t === "xs")
       return { value: "12", unit: "px" };
     if (t === "sm")
@@ -1439,7 +1437,7 @@ const sl = (r) => {
     if (t === "9xl")
       return { value: "128", unit: "px" };
   }
-  if (W(r, "leading-")) {
+  if (G(r, "leading-")) {
     if (t === "none")
       return { value: "1", unit: "-" };
     if (t === "tight")
@@ -1453,7 +1451,7 @@ const sl = (r) => {
     if (t === "loose")
       return { value: "2", unit: "-" };
   }
-  if (W(r, "tracking-")) {
+  if (G(r, "tracking-")) {
     if (t === "tighter")
       return { value: "-0.05", unit: "em" };
     if (t === "tight")
@@ -1471,58 +1469,58 @@ const sl = (r) => {
     return { value: r, unit: "class" };
   if (t.includes("/")) {
     const [s, l] = k(t.split("/"), (i) => parseInt(i, 10));
-    return { value: o + (s / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    return { value: a + (s / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return vt(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Vt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const ol = (r) => {
+const vs = (r) => {
   if (f(r))
     return { value: "", unit: "" };
-  const o = r.match(/\[.*\]/g);
-  if (o === null)
-    return al(r);
-  const t = x(o, "0", "").replace(/\[|\]/g, ""), s = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
+  const a = r.match(/\[.*\]/g);
+  if (a === null)
+    return js(r);
+  const t = x(a, "0", "").replace(/\[|\]/g, ""), s = r.startsWith("-") ? "-" : "", l = ge(t.match(/\d+.\d+|\d+/g));
   return { value: `${s}${l}`, unit: t.replace(l, "") };
-}, al = (r) => f(r) ? { value: "", unit: "" } : sl(r), at = P.createContext({
+}, js = (r) => f(r) ? { value: "", unit: "" } : fs(r), yt = I.createContext({
   setDragData: () => {
   }
-}), nl = ({
+}), ws = ({
   unit: r,
-  currentValue: o,
+  currentValue: a,
   onDrag: t,
   onDragEnd: s,
   onDragStart: l,
   negative: i,
-  cssProperty: a
+  cssProperty: o
 }) => {
-  const { setDragData: c } = se(at);
+  const { setDragData: c } = le(yt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
       onMouseDown: (n) => {
-        const u = {
+        const p = {
           onDrag: t,
           onDragEnd: s,
           dragging: !0,
           dragStartY: n.pageY,
-          dragStartValue: `${o}`,
+          dragStartValue: `${a}`,
           dragUnit: r,
           negative: i,
-          cssProperty: a
+          cssProperty: o
         };
-        l(u), c(u);
+        l(p), c(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Lt, {})
+      children: /* @__PURE__ */ e.jsx(Gt, {})
     }
   );
-}, il = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((s) => /* @__PURE__ */ e.jsx(
-  xe,
+}, Cs = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((s) => /* @__PURE__ */ e.jsx(
+  oe,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: o === s ? "primary" : void 0,
+    color: a === s ? "primary" : void 0,
     size: "sm",
     onClick: (l) => {
       l.stopPropagation(), r(s);
@@ -1530,21 +1528,21 @@ const ol = (r) => {
     children: s
   },
   s
-)) }), Ee = 50, dl = (r) => {
-  const [o, t] = C(!1), [s, l] = C(""), { currentClass: i, onChange: a, classPrefix: c, cssProperty: n, units: u, negative: y } = r, [d, h] = C(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [g, p] = C(!1), [m, w] = C(""), [D, j] = C(!1), [I, L] = C(!1);
+)) }), qe = 50, ks = (r) => {
+  const [a, t] = C(!1), [s, l] = C(""), { currentClass: i, onChange: o, classPrefix: c, cssProperty: n, units: p, negative: h } = r, [d, y] = C(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [g, u] = C(!1), [m, j] = C(""), [B, w] = C(!1), [P, E] = C(!1);
   O(() => {
-    const { value: b, unit: v } = ol(i);
+    const { value: b, unit: v } = vs(i);
     if (v === "") {
-      l(b), h(n != null && n.toLowerCase().includes("width") ? "%" : ue(u));
+      l(b), y(n != null && n.toLowerCase().includes("width") ? "%" : ge(p));
       return;
     }
-    h(v), l(v === "class" || f(b) ? "" : b);
-  }, [i, n, u]);
-  const N = fe((b) => a(b), [a], Ee), $ = fe((b) => a(b, !1), [a], Ee), F = V(
+    y(v), l(v === "class" || f(b) ? "" : b);
+  }, [i, n, p]);
+  const N = je((b) => o(b), [o], qe), $ = je((b) => o(b, !1), [o], qe), F = V(
     (b = !1) => {
-      const v = Ae(`${s}`, u);
+      const v = Ke(`${s}`, p);
       if (x(v, "error", !1)) {
-        p(!0);
+        u(!0);
         return;
       }
       const S = x(v, "unit") !== "" ? x(v, "unit") : d;
@@ -1557,12 +1555,12 @@ const ol = (r) => {
       const J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       b ? $(J) : N(J);
     },
-    [N, $, s, d, c, u]
-  ), G = V(
+    [N, $, s, d, c, p]
+  ), q = V(
     (b) => {
-      const v = Ae(`${s}`, u);
+      const v = Ke(`${s}`, p);
       if (x(v, "error", !1)) {
-        p(!0);
+        u(!0);
         return;
       }
       if (b === "auto" || b === "none") {
@@ -1574,15 +1572,15 @@ const ol = (r) => {
       const S = x(v, "unit") !== "" ? x(v, "unit") : b, J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(J);
     },
-    [N, s, c, u]
+    [N, s, c, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: d === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
-    /* @__PURE__ */ e.jsxs(X, { children: [
-      /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
+    /* @__PURE__ */ e.jsxs(Y, { children: [
+      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Te, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(d) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
@@ -1594,84 +1592,84 @@ const ol = (r) => {
           onKeyDown: (b) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            b.preventDefault(), L(!0);
-            const v = wt(b.target.value);
-            let S = Fe(v) ? 0 : v;
+            b.preventDefault(), E(!0);
+            const v = Ht(b.target.value);
+            let S = tt(v) ? 0 : v;
             b.keyCode === 38 && (S += 1), b.keyCode === 40 && (S -= 1);
-            const M = `${S}`, it = `${M.startsWith("-") ? "-" : ""}${c}[${M.replace("-", "")}${d === "-" ? "" : d}]`;
-            $(it);
+            const L = `${S}`, mt = `${L.startsWith("-") ? "-" : ""}${c}[${L.replace("-", "")}${d === "-" ? "" : d}]`;
+            $(mt);
           },
           onKeyUp: (b) => {
-            I && (b.preventDefault(), L(!1));
+            P && (b.preventDefault(), E(!1));
           },
           onBlur: () => F(),
           onChange: (b) => {
-            p(!1), l(b.target.value);
+            u(!1), l(b.target.value);
           },
           onClick: (b) => {
             var v;
             (v = b == null ? void 0 : b.target) == null || v.select(), t(!1);
           },
-          value: D ? m : s,
+          value: B ? m : s,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             g ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(X, { open: o, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsxs(Y, { open: a, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => t(!o),
+            onClick: () => t(!a),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: d }),
-              u.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: d }),
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Kt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(hr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          il,
+        /* @__PURE__ */ e.jsx(_r, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          Cs,
           {
-            units: u,
+            units: p,
             current: d,
             onSelect: (b) => {
-              t(!1), h(b), G(b);
+              t(!1), y(b), q(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(d) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      nl,
+    ["none", "auto"].indexOf(d) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
+      ws,
       {
-        onDragStart: () => j(!0),
+        onDragStart: () => w(!0),
         onDragEnd: (b) => {
-          if (w(() => ""), j(!1), f(b))
+          if (j(() => ""), w(!1), f(b))
             return;
-          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
-          N(M);
+          const v = `${b}`, L = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
+          N(L);
         },
         onDrag: (b) => {
           if (f(b))
             return;
-          w(b);
-          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
-          $(M);
+          j(b);
+          const v = `${b}`, L = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
+          $(L);
         },
         currentValue: s,
         unit: d,
-        negative: y,
+        negative: h,
         cssProperty: n
       }
     )
   ] }) }) });
-}, ae = (r) => {
-  const o = ge();
-  return jt(o, { property: r });
-}, cl = (r, o) => {
+}, ne = (r) => {
+  const a = ye();
+  return Dt(a, { property: r });
+}, Ns = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1680,8 +1678,8 @@ const ol = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[x(r, "mq", "xs")] <= t[o];
-}, pl = {
+  return t[x(r, "mq", "xs")] <= t[a];
+}, _s = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1747,32 +1745,32 @@ const ol = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Le = {
+}, Je = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, ul = (r) => `${r.toUpperCase()} ${Le[r] ? `(${Le[r]} & up)` : ""}`, Re = (r) => {
-  const { t: o } = K(), { type: t = "icons", label: s, property: l, onEmitChange: i = () => {
-  }, units: a, negative: c = !1 } = r, [n] = yr(), [u] = Je(), [, y] = Be(), d = ae(l), h = Ke(), g = qe(), [p] = Ge(), m = _(() => x(d, "fullCls", ""), [d]), w = V(
+}, Ss = (r) => `${r.toUpperCase()} ${Je[r] ? `(${Je[r]} & up)` : ""}`, Be = (r) => {
+  const { t: a } = W(), { type: t = "icons", label: s, property: l, onEmitChange: i = () => {
+  }, units: o, negative: c = !1 } = r, [n] = Sr(), [p] = ct(), [, h] = Ie(), d = ne(l), y = Re(), g = it(), [u] = dt(), m = _(() => x(d, "fullCls", ""), [d]), j = V(
     ($, F = !0) => {
-      const G = { dark: n, mq: y, mod: u, cls: $, property: l, fullCls: "" };
-      (n || u !== "") && (G.mq = "xs");
-      const b = Or(G);
-      h(p, [b], F);
+      const q = { dark: n, mq: h, mod: p, cls: $, property: l, fullCls: "" };
+      (n || p !== "") && (q.mq = "xs");
+      const b = es(q);
+      y(u, [b], F);
     },
-    [p, n, y, u, l, h]
-  ), D = V(() => {
-    g(p, [m]);
-  }, [p, m, g]), j = _(() => cl(d, y), [d, y]);
+    [u, n, h, p, l, y]
+  ), B = V(() => {
+    g(u, [m]);
+  }, [u, m, g]), w = _(() => Ns(d, h), [d, h]);
   O(() => {
-    i(j, d);
-  }, [j, i, d]);
-  const [, , I] = Be(), L = V(
+    i(w, d);
+  }, [w, i, d]);
+  const [, , P] = Ie(), E = V(
     ($) => {
-      I({
+      P({
         xs: 400,
         sm: 640,
         md: 800,
@@ -1781,41 +1779,41 @@ const ol = (r) => {
         "2xl": 1920
       }[$]);
     },
-    [I]
-  ), N = x(d, "dark", null) === n && x(d, "mod", null) === u && x(d, "mq", null) === y;
-  return /* @__PURE__ */ e.jsx(Qr, { canChange: j, canReset: d && 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] ${d && !N ? "text-foreground" : ""}`, children: o(s) }) }),
+    [P]
+  ), N = x(d, "dark", null) === n && x(d, "mod", null) === p && x(d, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(gs, { canChange: w, canReset: d && 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] ${d && !N ? "text-foreground" : ""}`, children: a(s) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          dl,
+          ks,
           {
             currentClass: x(d, "cls", ""),
-            classPrefix: x(pl, l, ""),
-            units: a || [],
-            onChange: w,
+            classPrefix: x(_s, l, ""),
+            units: o || [],
+            onChange: j,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(tl, { property: l, onChange: w }),
-        t === "range" && /* @__PURE__ */ e.jsx(el, { property: l, onChange: w }),
-        t === "color" && /* @__PURE__ */ e.jsx(ll, { property: l, onChange: w }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: s, property: l, onChange: w })
+        t === "icons" && /* @__PURE__ */ e.jsx(ys, { property: l, onChange: j }),
+        t === "range" && /* @__PURE__ */ e.jsx(hs, { property: l, onChange: j }),
+        t === "color" && /* @__PURE__ */ e.jsx(ms, { property: l, onChange: j }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(ht, { label: s, property: l, onChange: j })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${m ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => D(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && d ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${m ? "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(qt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && d ? /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
             className: "invisible ml-3 mt-1 rounded-full bg-blue-500 text-white group-hover:visible",
-            children: /* @__PURE__ */ e.jsx(_e, {})
+            children: /* @__PURE__ */ e.jsx(Te, {})
           }
         ) }),
         /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold", children: [
-            ul(x(d, "mq")),
+            Ss(x(d, "mq")),
             n && !d.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1823,7 +1821,7 @@ const ol = (r) => {
             "button",
             {
               type: "button",
-              onClick: () => L(x(d, "mq")),
+              onClick: () => E(x(d, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -1835,16 +1833,16 @@ const ol = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, xl = ["px", "%", "em", "rem", "ch", "vh", "vw"], nt = ({
+}, Ts = ["px", "%", "em", "rem", "ch", "vh", "vw"], bt = ({
   label: r,
-  options: o,
+  options: a,
   borderB: t = !1,
   borderT: s = !1,
   type: l = "arbitrary",
-  units: i = xl,
-  negative: a = !1
+  units: i = Ts,
+  negative: o = !1
 }) => {
-  const { t: c } = K(), [n, u] = C(o[0].key), y = ge(), d = V((h) => k(y, "property").includes(h), [y]);
+  const { t: c } = W(), [n, p] = C(a[0].key), h = ye(), d = V((y) => k(h, "property").includes(y), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1852,48 +1850,48 @@ const ol = (r) => {
       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: c(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
-            o.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
-              /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
+            a.map(({ label: y, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(Y, { children: [
+              /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(g),
+                  onClick: () => p(g),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === n ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    P.createElement("div", {
+                    I.createElement("div", {
                       className: d(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(x(st, g, ze), { className: "text-inherit w-3 h-3" })
+                    I.createElement(x(gt, g, lt), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Z, { children: Y(le(h)) })
+              /* @__PURE__ */ e.jsx(Z, { children: z(se(y)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Re,
+          Be,
           {
             type: l,
             units: [...i],
             label: "",
             property: n,
-            negative: a
+            negative: o
           }
         ) })
       ]
     }
   );
-}, gl = ({ heading: r, items: o }) => {
-  const { t } = K(), s = ge(), l = _(() => {
-    const i = (n) => U(
-      n.map((u) => u.styleType === "multiple" ? k(u.options, "key") : u.property)
-    ), a = U(
-      o.map((n) => n.styleType === "accordion" ? i(n.items) : n.styleType === "multiple" ? k(n.options, "key") : n.property)
+}, Rs = ({ heading: r, items: a }) => {
+  const { t } = W(), s = ye(), l = _(() => {
+    const i = (n) => K(
+      n.map((p) => p.styleType === "multiple" ? k(p.options, "key") : p.property)
+    ), o = K(
+      a.map((n) => n.styleType === "accordion" ? i(n.items) : n.styleType === "multiple" ? k(n.options, "key") : n.property)
     ), c = k(s, "property");
-    return Ye(a, c).length > 0;
-  }, [s, o]);
+    return rt(o, c).length > 0;
+  }, [s, a]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       t(r),
@@ -1904,17 +1902,17 @@ const ol = (r) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((i) => i.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...i }, i.label) : /* @__PURE__ */ e.jsx(Re, { ...i }, i.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((i) => i.styleType === "multiple" ? /* @__PURE__ */ e.jsx(bt, { ...i }, i.label) : /* @__PURE__ */ e.jsx(Be, { ...i }, i.label)) })
   ] });
-}, hl = Me({}), me = ({ section: r }) => {
-  const { t: o } = K(), t = ge(), s = V(
-    (a = []) => {
+}, Vs = Qe({}), ve = ({ section: r }) => {
+  const { t: a } = W(), t = ye(), s = V(
+    (o = []) => {
       const c = {};
-      for (let u = 0; u < t.length; u++)
-        c[t[u].property] = t[u].cls;
+      for (let p = 0; p < t.length; p++)
+        c[t[p].property] = t[p].cls;
       let n = !0;
-      for (const u in a)
-        if (!ye(c, u) || c[u] !== a[u]) {
+      for (const p in o)
+        if (!me(c, p) || c[p] !== o[p]) {
           n = !1;
           break;
         }
@@ -1924,25 +1922,25 @@ const ol = (r) => {
   ), l = _(() => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
-    const a = (u) => U(
-      u.map((y) => y.styleType === "multiple" ? U(k(y.options, "key")) : y.property)
-    ), c = U(
-      r.items.map((u) => u.styleType === "accordion" ? a(u.items) : u.styleType === "multiple" ? U(k(u.options, "key")) : u.property)
+    const o = (p) => K(
+      p.map((h) => h.styleType === "multiple" ? K(k(h.options, "key")) : h.property)
+    ), c = K(
+      r.items.map((p) => p.styleType === "accordion" ? o(p.items) : p.styleType === "multiple" ? K(k(p.options, "key")) : p.property)
     ), n = k(t, "property");
-    return Ye(c, n).length > 0;
+    return rt(c, n).length > 0;
   }, [t, r.heading, r.items]), i = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(hl.Provider, { value: i, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+  return /* @__PURE__ */ e.jsx(Vs.Provider, { value: i, children: /* @__PURE__ */ e.jsxs(pe, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(ue, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
-      o(r.heading)
+      a(r.heading)
     ] }) }),
-    /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      r.items.map((a) => ye(a, "component") ? P.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && s(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(gl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+    /* @__PURE__ */ e.jsx(xe, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
+      r.items.map((o) => me(o, "component") ? I.createElement(o.component, { key: o.label }) : me(o, "styleType") ? o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(bt, { ...o }, o.label) : o.styleType === "accordion" && s(o == null ? void 0 : o.conditions) ? /* @__PURE__ */ e.jsx(Rs, { ...o }, o.label) : null : /* @__PURE__ */ e.jsx(Be, { ...o }, o.label))
     ) })
   ] }) });
-}, yl = ({
+}, Hs = ({
   item: r,
-  index: o,
+  index: a,
   canDelete: t,
   onChange: s,
   onRemove: l
@@ -1951,7 +1949,7 @@ const ol = (r) => {
     "input",
     {
       name: "key",
-      onChange: (i) => s(i, o),
+      onChange: (i) => s(i, a),
       value: r.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1964,7 +1962,7 @@ const ol = (r) => {
       "input",
       {
         name: "value",
-        onChange: (i) => f(r.key) ? {} : s(i, o),
+        onChange: (i) => f(r.key) ? {} : s(i, a),
         value: r.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1973,37 +1971,37 @@ const ol = (r) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Ft,
+      Jt,
       {
         onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), bl = ({ section: r }) => {
-  var h;
-  const { setSyncState: o } = br(), t = q(), [s, l] = C([]), [i] = Se(), a = We(), c = `${x(i, "0.prop")}_attrs`;
-  ne.useEffect(() => {
-    const g = k(x(t, c), (p, m) => ({ key: m, value: p }));
+] }), Ds = ({ section: r }) => {
+  var y;
+  const { setSyncState: a } = Tr(), t = U(), [s, l] = C([]), [i] = he(), o = at(), c = `${x(i, "0.prop")}_attrs`;
+  de.useEffect(() => {
+    const g = k(x(t, c), (u, m) => ({ key: m, value: u }));
     f(g) ? l([]) : l(g);
   }, [x(t, c)]);
-  const n = () => l([...s, { key: "", value: "" }]), u = (g) => {
-    const p = we(s, (m, w) => g !== w);
-    d(p);
-  }, y = (g, p) => {
+  const n = () => l([...s, { key: "", value: "" }]), p = (g) => {
+    const u = Ce(s, (m, j) => g !== j);
+    d(u);
+  }, h = (g, u) => {
     const m = [...s];
-    m[p][g.target.name] = g.target.value, d(m);
-  }, d = ne.useCallback(
+    m[u][g.target.name] = g.target.value, d(m);
+  }, d = de.useCallback(
     (g = []) => {
-      const p = {};
-      ke(g, (m) => {
-        f(m.key) || Oe(p, m.key, m.value);
-      }), a([x(t, "_id")], { [c]: p }), o("UNSAVED");
+      const u = {};
+      _e(g, (m) => {
+        f(m.key) || et(u, m.key, m.value);
+      }), o([x(t, "_id")], { [c]: u }), a("UNSAVED");
     },
-    [t, o, a, c]
+    [t, a, o, c]
   );
-  return /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+  return /* @__PURE__ */ e.jsxs(pe, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(ue, { 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",
         {
@@ -2012,19 +2010,19 @@ const ol = (r) => {
       ),
       "Attributes"
     ] }) }),
-    /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(Te, { className: "mt-2 flex w-full items-center justify-between", children: [
+    /* @__PURE__ */ e.jsx(xe, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
+      /* @__PURE__ */ e.jsxs(Ve, { className: "mt-2 flex w-full items-center justify-between", children: [
         "Add Custom attributes",
         /* @__PURE__ */ e.jsxs(
           "div",
           {
-            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!f(s) && f((h = ve(s)) == null ? void 0 : h.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!f(s) && f((y = we(s)) == null ? void 0 : y.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
               var g;
-              !f(s) && f((g = ve(s)) == null ? void 0 : g.key) || n();
+              !f(s) && f((g = we(s)) == null ? void 0 : g.key) || n();
             },
             children: [
-              /* @__PURE__ */ e.jsx(Ne, { width: 12, height: 12 }),
+              /* @__PURE__ */ e.jsx(Se, { width: 12, height: 12 }),
               " Add"
             ]
           }
@@ -2032,17 +2030,17 @@ const ol = (r) => {
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
         f(s) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
-        ne.Children.toArray(
-          k(s, (g, p) => {
-            const m = s.length > 0 && p < s.length - 1;
+        de.Children.toArray(
+          k(s, (g, u) => {
+            const m = s.length > 0 && u < s.length - 1;
             return /* @__PURE__ */ e.jsx(
-              yl,
+              Hs,
               {
                 item: g,
-                index: p,
+                index: u,
                 canDelete: m,
-                onChange: y,
-                onRemove: () => u(p)
+                onChange: h,
+                onRemove: () => p(u)
               }
             );
           })
@@ -2050,49 +2048,83 @@ const ol = (r) => {
       ] })
     ] }) })
   ] });
+}, Bs = () => {
+  const r = U(), [a] = he(), { t } = W(), s = Xr(), l = Re(), i = De(r._type), o = Ye(rs(a), "prop"), c = Ye(i.props, `${o}.presets`, {});
+  if (ie(s) && (!ss(i, "props") || ie(c)))
+    return null;
+  const n = (p) => {
+    const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l([r._id], h, !0);
+  };
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Rr, { children: [
+    /* @__PURE__ */ e.jsx(Vr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(oe, { variant: "default", className: "w-full", size: "sm", children: [
+      t("Apply Presets"),
+      /* @__PURE__ */ e.jsx(Qt, {})
+    ] }) }) }),
+    /* @__PURE__ */ e.jsx(Hr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(He, { className: "no-scrollbar h-full", children: [
+      ie(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(Ae, { children: [
+          i.type,
+          " ",
+          t("presets")
+        ] }),
+        /* @__PURE__ */ e.jsx(Me, {}),
+        /* @__PURE__ */ e.jsx(Ee, { children: Xe(c).map((p) => /* @__PURE__ */ e.jsxs(Le, { className: "group text-xs", onClick: () => n(c[p]), children: [
+          Ze(We(t(p))),
+          /* @__PURE__ */ e.jsx(Oe, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+        ] })) })
+      ] }),
+      ie(s) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(Ae, { children: t("Global presets") }),
+        /* @__PURE__ */ e.jsx(Me, {}),
+        /* @__PURE__ */ e.jsx(Ee, { children: Xe(s).map((p) => /* @__PURE__ */ e.jsxs(Le, { className: "group text-xs", onClick: () => n(s[p]), children: [
+          Ze(We(t(p))),
+          /* @__PURE__ */ e.jsx(Oe, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+        ] })) })
+      ] })
+    ] }) })
+  ] }) });
 };
-function ml() {
-  const [r, o] = Je(), { flexChild: t, gridChild: s } = mr(), [, l] = Ar(fr), { t: i } = K(), [a] = Se();
-  return f(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(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: i("no_styling_block_selected") })
-  ] }) }) : (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
-      /* @__PURE__ */ e.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(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(vr, { defaultValue: r, onValueChange: (c) => o(c), children: [
-          /* @__PURE__ */ e.jsx(wr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(jr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(Cr, { children: [
-            /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
-            /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
-            /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
-            /* @__PURE__ */ e.jsx(H, { value: "focus", children: "Focus" }),
-            /* @__PURE__ */ e.jsx(H, { value: "before", children: "Before" }),
-            /* @__PURE__ */ e.jsx(H, { value: "after", children: "After" }),
-            /* @__PURE__ */ e.jsx(H, { value: "only", children: "Only" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first", children: "First" }),
-            /* @__PURE__ */ e.jsx(H, { value: "last", children: "Last" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first-letter", children: "First Letter" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first-line", children: "First Line" }),
-            /* @__PURE__ */ e.jsx(H, { value: "disabled", children: "Disabled" })
-          ] })
+function $s() {
+  const [r, a] = ct(), { flexChild: t, gridChild: s } = Dr(), { t: l } = W(), [i] = he();
+  return f(i) ? /* @__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(ot, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: l("no_styling_block_selected") })
+  ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ e.jsx(Bs, {}),
+    /* @__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(Ve, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+      /* @__PURE__ */ e.jsxs(Br, { defaultValue: r, onValueChange: (o) => a(o), children: [
+        /* @__PURE__ */ e.jsx($r, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Pr, { placeholder: "State" }) }),
+        /* @__PURE__ */ e.jsxs(Ir, { children: [
+          /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
+          /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
+          /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
+          /* @__PURE__ */ e.jsx(H, { value: "focus", children: "Focus" }),
+          /* @__PURE__ */ e.jsx(H, { value: "before", children: "Before" }),
+          /* @__PURE__ */ e.jsx(H, { value: "after", children: "After" }),
+          /* @__PURE__ */ e.jsx(H, { value: "only", children: "Only" }),
+          /* @__PURE__ */ e.jsx(H, { value: "first", children: "First" }),
+          /* @__PURE__ */ e.jsx(H, { value: "last", children: "Last" }),
+          /* @__PURE__ */ e.jsx(H, { value: "first-letter", children: "First Letter" }),
+          /* @__PURE__ */ e.jsx(H, { value: "first-line", children: "First Line" }),
+          /* @__PURE__ */ e.jsx(H, { value: "disabled", children: "Disabled" })
         ] })
-      ] }) }),
-      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(Vr, { className: "w-3" }),
-        /* @__PURE__ */ e.jsx("span", { children: i(`Styles will be applied for (:${r}) state`) })
-      ] }) : null,
-      /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(Ue, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-        t && /* @__PURE__ */ e.jsx(me, { section: qr }),
-        s ? /* @__PURE__ */ e.jsx(me, { section: Gr }) : null,
-        Jr.map((c) => /* @__PURE__ */ e.jsx(me, { section: c }, c.heading)),
-        /* @__PURE__ */ e.jsx(bl, { section: { heading: "Attributes" } })
-      ] }) })
-    ] })
-  );
+      ] })
+    ] }) }),
+    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(zr, { className: "w-3" }),
+      /* @__PURE__ */ e.jsx("span", { children: l(`Styles will be applied for (:${r}) state`) })
+    ] }) : null,
+    /* @__PURE__ */ e.jsx(He, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(nt, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+      t && /* @__PURE__ */ e.jsx(ve, { section: ps }),
+      s ? /* @__PURE__ */ e.jsx(ve, { section: us }) : null,
+      xs.map((o) => /* @__PURE__ */ e.jsx(ve, { section: o }, o.heading)),
+      /* @__PURE__ */ e.jsx(Ds, { section: { heading: "Attributes" } })
+    ] }) })
+  ] });
 }
-const fl = {
+const Ps = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2103,8 +2135,8 @@ const fl = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, ws = () => {
-  const r = q(), { t: o } = K(), [t, s] = P.useState(""), [l, i] = P.useState({
+}, Pl = () => {
+  const r = U(), { t: a } = W(), [t, s] = I.useState(""), [l, i] = I.useState({
     onDrag: (n) => n,
     onDragEnd: (n) => n,
     dragStartY: 0,
@@ -2113,15 +2145,15 @@ const fl = {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), a = fe(
+  }), o = je(
     (n) => {
-      const u = !x(l, "negative", !1), y = x(l, "cssProperty", "");
+      const p = !x(l, "negative", !1), h = x(l, "cssProperty", "");
       let d = parseFloat(l.dragStartValue);
-      d = Fe(d) ? 0 : d;
-      let h = fl[l.dragUnit];
-      (W(y, "scale") || y === "opacity") && (h = 10);
-      let p = (l.dragStartY - n.pageY) / h + d;
-      u && p < 0 && (p = 0), y === "opacity" && p > 1 && (p = 1), l.onDrag(`${p}`), s(`${p}`);
+      d = tt(d) ? 0 : d;
+      let y = Ps[l.dragUnit];
+      (G(h, "scale") || h === "opacity") && (y = 10);
+      let u = (l.dragStartY - n.pageY) / y + d;
+      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), s(`${u}`);
     },
     [l],
     50
@@ -2137,28 +2169,28 @@ const fl = {
       cssProperty: ""
     });
   }, [l, t, i]);
-  return Ct(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(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(at.Provider, { value: { setDragData: i }, children: [
+  return Bt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+    /* @__PURE__ */ e.jsx(ot, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(pt, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: i }, children: [
     l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        onMouseMove: a,
+        onMouseMove: o,
         onMouseUp: () => c(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(kr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(Nr, { className: "mx-1 grid grid-cols-2", children: [
-        /* @__PURE__ */ e.jsx(De, { value: "settings", children: o("settings") }),
-        /* @__PURE__ */ e.jsx(De, { value: "styling", children: o("styling") })
+    /* @__PURE__ */ e.jsxs(Ar, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(Mr, { className: "mx-1 grid grid-cols-2", children: [
+        /* @__PURE__ */ e.jsx(Fe, { value: "settings", children: a("settings") }),
+        /* @__PURE__ */ e.jsx(Fe, { value: "styling", children: a("styling") })
       ] }),
-      /* @__PURE__ */ e.jsx($e, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(Ur, {}) }) }),
-      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(ml, {}) })
+      /* @__PURE__ */ e.jsx(ze, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(He, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(ds, {}) }) }),
+      /* @__PURE__ */ e.jsx(ze, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx($s, {}) })
     ] })
   ] }) });
 };
 export {
-  ws as default
+  Pl as default
 };