@chaibuilder/sdk 1.2.23 → 1.2.25

package/dist/{Settings-FZWm8Fc3.js → Settings-jCcd-VE6.js}

@@ -1,78 +1,86 @@
-import { j as e } from "./jsx-runtime-WbnYoNE9.js";
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
 import * as de from "react";
-import $, { useState as w, useMemo as _, useEffect as L, useCallback as V, memo as mt, createContext as Ke, useContext as oe } from "react";
-import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as Re, isArray as pe, omit as bt, truncate as ft, includes as M, get as x, first as ae, split as vt, startCase as E, toLower as le, isEmpty as b, map as k, find as jt, last as wt, filter as ve, set as Ge, debounce as Ct, keys as je, cloneDeep as kt, each as Nt, capitalize as we, reject as _t, nth as $e, startsWith as G, isNumber as Tt, parseInt as St, isNaN as qe, findLast as Rt, flatten as q, intersection as Je, has as ce, kebabCase as Vt, isNull as Ht } from "lodash-es";
-import { useTranslation as z } from "react-i18next";
-import { PlusIcon as Ve, Cross2Icon as Qe, EyeOpenIcon as Dt, EyeClosedIcon as Ae, BorderAllIcon as A, WidthIcon as S, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as Bt, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as It, ArrowBottomLeftIcon as $t, AlignLeftIcon as At, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Et, StretchHorizontallyIcon as Lt, FontItalicIcon as Ot, UnderlineIcon as Ft, OverlineIcon as Yt, LetterCaseUppercaseIcon as zt, Cross1Icon as Xt, InfoCircledIcon as He, MinusIcon as Zt, BoxIcon as et, RowSpacingIcon as Wt, TriangleDownIcon as Ut, CrossCircledIcon as Kt, CaretDownIcon as Gt, MixerHorizontalIcon as tt } from "@radix-ui/react-icons";
-import { aV as qt, aW as Jt, B as U, aX as Qt, aY as er, aZ as tr, a_ as rr, a$ as sr, b0 as lr, b1 as or, a1 as K, af as ar, ag as nr, ah as ir, b2 as dr, ad as cr, ao as pr, ae as ur, ap as O, aq as F, ar as Y, b3 as xr, b4 as gr, b5 as hr, b6 as yr, b7 as mr, b8 as br, a6 as rt, a5 as st, h as fr, b9 as lt, ba as Ce, bb as ke, bc as Ne, ac as ue, M as De, _ as ot, r as at, aB as nt, bd as _e, v as vr, be as jr, $ as xe, V as wr, a4 as it, N as Me, aG as Cr, aH as kr, aI as Nr, bf as Be, aJ as Ee, aK as Le, bg as Oe, bh as Fe, bi as Ye, a7 as _r, aj as Tr, ak as Sr, al as Rr, am as Vr, an as H, au as Hr, av as Dr, aw as he, ax as ye } from "./index-HD1UKc4P.js";
-import { u as Br } from "./controls-OfJWSEqC.js";
-import { Check as Pr, EditIcon as Ir, TrashIcon as $r, BrushIcon as Ar, DeleteIcon as Mr } from "lucide-react";
-import { getBlockComponent as Pe, getChaiDataProviders as Er, useGlobalStylingPresets as Lr } from "@chaibuilder/runtime";
-import { E as dt, u as ct } from "./index-uLtBNl55.js";
-import { J as Or, a as Fr, d as Yr } from "./index-e0c8PmRQ.js";
-import zr from "@rjsf/core";
-import Xr from "@rjsf/validator-ajv8";
-import Zr from "react-autosuggest";
-import Wr from "fuse.js";
-import { A as Ur, C as ge, g as Kr } from "./Class-lGzsNBOK.js";
-import { a as Gr } from "./STRINGS--j49GZJP.js";
-import "./_commonjsHelpers-UyOWmZb0.js";
-import "./Functions-7jnEwJyw.js";
+import $, { useState as w, useEffect as E, useMemo as _, useCallback as V, memo as mt, createContext as Ke, useContext as le } from "react";
+import { useThrottledCallback as be } from "@react-hookz/web";
+import { map as k, isEmpty as f, last as ft, forEach as Re, set as Ge, get as x, startCase as L, filter as ve, truncate as bt, isArray as pe, includes as M, first as ae, split as vt, toLower as oe, find as jt, omit as wt, debounce as Ct, keys as je, cloneDeep as kt, each as Nt, capitalize as we, reject as _t, nth as $e, startsWith as G, isNumber as St, parseInt as Tt, isNaN as qe, findLast as Rt, has as ce, flatten as q, intersection as Je, kebabCase as Vt, isNull as Ht } from "lodash-es";
+import { useTranslation as Y } from "react-i18next";
+import { PlusIcon as Ve, Cross2Icon as Qe, EyeOpenIcon as Dt, EyeClosedIcon as Ae, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as ee, ArrowRightIcon as te, ArrowDownIcon as re, ArrowLeftIcon as se, ArrowTopLeftIcon as Bt, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as It, ArrowBottomLeftIcon as $t, AlignLeftIcon as At, AlignCenterHorizontallyIcon as Mt, AlignRightIcon as Lt, StretchHorizontallyIcon as Et, FontItalicIcon as Ot, UnderlineIcon as Ft, OverlineIcon as zt, LetterCaseUppercaseIcon as Yt, Cross1Icon as Xt, InfoCircledIcon as He, MinusIcon as Zt, BoxIcon as et, TriangleDownIcon as Wt, RowSpacingIcon as Ut, CrossCircledIcon as Kt, CaretDownIcon as Gt, MixerHorizontalIcon as tt } from "@radix-ui/react-icons";
+import { S as De } from "./scroll-area-ewXbxc3n.js";
+import { D as qt, a as Jt, b as Qt, c as er, e as tr, f as rr, d as sr, T as or, g as lr, h as he, i as ye } from "./tabs-yQ3oGziM.js";
+import { k as K, E as rt, n as ue, j as st, b as ar, l as nr } from "./ChaiBuilderEditor-vP4at00I.js";
+import { a as ot, u as lt } from "./useUpdateBlocksProps-vWcDp-P9.js";
+import { T as O, a as F, c as z, B as U, u as ir, e as dr } from "./skeleton-lu8e7q2y.js";
+import { u as cr } from "./controls-IS5qnRce.js";
+import { EditIcon as pr, TrashIcon as ur, Check as xr, BrushIcon as gr, DeleteIcon as hr } from "lucide-react";
+import { P as yr, a as mr, b as fr } from "./popover-a84pbVhQ.js";
+import { C as br, b as vr, c as jr, d as wr, e as Cr, f as kr, I as Ce } from "./command-Pn3HKDuV.js";
+import { getChaiDataProviders as Nr, getBlockComponent as Be, useGlobalStylingPresets as _r } from "@chaibuilder/runtime";
+import { u as at } from "./useChaiExternalData-fkFgoS80.js";
+import { J as Sr, a as Tr, d as Rr } from "./index-lDTsQp7h.js";
+import { A as nt, a as ke, b as Ne, c as _e } from "./accordion-oPUeqPCZ.js";
+import { g as Vr, a as Hr } from "./Controls-3Cc1XYXg.js";
+import Dr from "@rjsf/core";
+import Br from "@rjsf/validator-ajv8";
+import { R as Pr, I as Ir, a as $r, L as Ar } from "./link-xuhP-4dN.js";
+import { u as Pe, a as it, d as dt, b as xe } from "./useStylingState-Iuj84yvc.js";
+import Mr from "react-autosuggest";
+import Lr from "fuse.js";
+import { A as Er, C as ge, g as Or } from "./Class-ahc3NIbq.js";
+import { L as ct } from "./label-KaP7MRrs.js";
+import { S as Fr } from "./STRINGS-b432aBJJ.js";
+import { a as zr, u as Me } from "./useDarkMode-8VHJlYyE.js";
+import { S as Yr, c as Xr, b as Zr, d as Wr, f as H } from "./select-POGdEDHT.js";
+import { D as Ur, a as Kr, b as Gr, f as Le, g as Ee, i as Oe, c as Fe, h as ze } from "./dropdown-menu-El86_9Uo.js";
+import "@radix-ui/react-scroll-area";
+import "./utils-dze1SGvB.js";
 import "clsx";
 import "tailwind-merge";
-import "jotai";
-import "./MODIFIERS-dytZ-osO.js";
-import "@radix-ui/react-toggle";
-import "class-variance-authority";
-import "@radix-ui/react-switch";
-import "@radix-ui/react-slot";
-import "@radix-ui/react-accordion";
-import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-dialog";
-import "@radix-ui/react-label";
-import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-tabs";
+import "./MODIFIERS-CNqNUapY.js";
+import "react-dom";
+import "@floating-ui/react-dom";
+import "jotai";
+import "i18next";
+import "flagged";
+import "./Functions-NzT2Six_.js";
+import "react-hotkeys-hook";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
 import "@radix-ui/react-tooltip";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-menubar";
-import "@radix-ui/react-hover-card";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dropdown-menu";
-import "@radix-ui/react-separator";
 import "@radix-ui/react-toast";
+import "@radix-ui/react-popover";
 import "cmdk";
-import "@radix-ui/react-context-menu";
+import "@radix-ui/react-accordion";
 import "react-icons-picker";
-import "react-dom";
+import "./ImagesPanel-Wb0GF_NA.js";
 import "react-quill";
-import "i18next";
-import "@floating-ui/react-dom";
-import "flagged";
-import "react-hotkeys-hook";
+import "@radix-ui/react-label";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dropdown-menu";
 function qr(r) {
   const s = [], t = {};
-  function d(l, n) {
-    Re(n, (o, p) => {
-      const i = l ? `${l}.${p}` : p, c = pe(o) ? "list" : typeof o;
-      s.push(i), t[i] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !pe(o) && d(i, o);
+  function d(o, n) {
+    Re(n, (l, p) => {
+      const i = o ? `${o}.${p}` : p, c = pe(l) ? "list" : typeof l;
+      s.push(i), t[i] = c === "string" ? "text" : c === "object" ? "model" : c, c === "object" && !pe(l) && d(i, l);
     });
   }
-  return d("", bt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
+  return d("", wt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: t };
 }
-const Te = ({ data: r, fullView: s }) => {
+const Se = ({ data: r, fullView: s }) => {
   if (!r)
     return null;
   const t = typeof r;
   return s ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsx(
-      Or,
+    /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
+      Sr,
       {
         data: r,
-        shouldExpandNode: Fr,
+        shouldExpandNode: Tr,
         style: {
-          ...Yr,
+          ...Rr,
           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"
@@ -82,61 +90,61 @@ const Te = ({ data: r, fullView: s }) => {
   ] }) : /* @__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: ft(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, ze = ({
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: bt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+}, Ye = ({
   type: r,
   value: s = "",
   setValue: t,
   data: d,
-  onChange: l,
+  onChange: o,
   dataType: n,
-  appliedBindings: o
+  appliedBindings: l
 }) => {
-  const { paths: p, pathsType: i } = qr(d), c = r === "PROP" ? Pe(d == null ? void 0 : d._type) : {}, h = r === "PROP", [a, g] = w(!1), y = _(() => r === "PROP" ? p.filter(
-    (u) => !M(o, u) && x(c, `props.${ae(vt(u, "."))}.binding`)
-  ) : p.filter((u) => n === x(i, u, "")), [r, p, o, n, c]);
-  return L(() => {
-    s && l(s);
+  const { paths: p, pathsType: i } = qr(d), c = r === "PROP" ? Be(d == null ? void 0 : d._type) : {}, h = r === "PROP", [a, g] = w(!1), y = _(() => r === "PROP" ? p.filter(
+    (u) => !M(l, u) && x(c, `props.${ae(vt(u, "."))}.binding`)
+  ) : p.filter((u) => n === x(i, u, "")), [r, p, l, n, c]);
+  return E(() => {
+    s && o(s);
   }, [s, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: E(le(r)) }),
-      /* @__PURE__ */ e.jsxs(qt, { open: a, onOpenChange: g, children: [
-        /* @__PURE__ */ e.jsx(Jt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: L(oe(r)) }),
+      /* @__PURE__ */ e.jsxs(yr, { open: a, onOpenChange: g, children: [
+        /* @__PURE__ */ e.jsx(mr, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           U,
           {
             variant: "outline",
             size: "sm",
-            className: ` ${b(s) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
+            className: ` ${f(s) ? "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: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: E(n) }),
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: L(n) }),
                 s
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              E(le(r))
+              L(oe(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Qt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(er, { children: [
-          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${le(r)}...` }),
-          /* @__PURE__ */ e.jsxs(rr, { children: [
-            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(lr, { children: k(y, (u) => /* @__PURE__ */ e.jsxs(
-              or,
+        /* @__PURE__ */ e.jsx(fr, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(br, { children: [
+          /* @__PURE__ */ e.jsx(vr, { placeholder: `Choose ${oe(r)}...` }),
+          /* @__PURE__ */ e.jsxs(jr, { children: [
+            /* @__PURE__ */ e.jsx(wr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(Cr, { children: k(y, (u) => /* @__PURE__ */ e.jsxs(
+              kr,
               {
                 value: u,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (f) => {
-                  t(jt(y, (j) => j === f) || null), g(!1);
+                onSelect: (b) => {
+                  t(jt(y, (j) => j === b) || null), g(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Pr, { className: `h-4 w-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(xr, { className: `h-4 w-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
                     u
                   ] }),
-                  h ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: E(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Te, { data: x(d, u) }) })
+                  h ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: L(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Se, { data: x(d, u) }) })
                 ]
               },
               u
@@ -145,7 +153,7 @@ const Te = ({ data: r, fullView: s }) => {
         ] }) })
       ] })
     ] }),
-    !h && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Te, { data: x(d, s, ""), fullView: !0 }) })
+    !h && !f(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Se, { data: x(d, s, ""), fullView: !0 }) })
   ] });
 }, Jr = ({
   appliedBindings: r = [],
@@ -153,33 +161,33 @@ const Te = ({ data: r, fullView: s }) => {
   editMode: t,
   item: d
 }) => {
-  const [l, n] = w(t ? d.key : ""), [o, p] = w(t ? d.value : ""), i = K(), [c] = ct(), h = V(
+  const [o, n] = w(t ? d.key : ""), [l, p] = w(t ? d.value : ""), i = K(), [c] = at(), h = V(
     (y, u) => {
-      if (b(y))
+      if (f(y))
         return "";
       {
-        const f = x(u === "PROP" ? i : c, y, "");
-        if (pe(f))
+        const b = x(u === "PROP" ? i : c, y, "");
+        if (pe(b))
           return "list";
-        const j = typeof f;
+        const j = typeof b;
         return j === "string" ? "text" : j === "object" ? "model" : j;
       }
     },
     [i, c]
   ), [a, g] = w(t ? h(d.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(ar, { children: [
-      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(ir, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(er, { children: [
+      /* @__PURE__ */ e.jsx(tr, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(rr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
-        ze,
+        Ye,
         {
           type: "PROP",
           isDisabled: !1,
           placeholder: "Enter prop key",
-          value: l,
+          value: o,
           setValue: n,
           onChange: (y) => {
             const u = h(y, "PROP");
@@ -192,12 +200,12 @@ const Te = ({ data: r, fullView: s }) => {
       ),
       /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
       /* @__PURE__ */ e.jsx(
-        ze,
+        Ye,
         {
           type: "PATH",
-          isDisabled: b(l),
+          isDisabled: f(o),
           placeholder: "Enter data path",
-          value: o,
+          value: l,
           setValue: p,
           onChange: (y) => {
             const u = h(y, "PATH");
@@ -209,26 +217,26 @@ const Te = ({ data: r, fullView: s }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
       U,
       {
         type: "submit",
         className: "mt-4",
-        disabled: b(l) && b(o),
-        onClick: () => s({ key: l, value: o }),
+        disabled: f(o) && f(l),
+        onClick: () => s({ key: o, value: l }),
         children: "Save"
       }
     ) })
   ] });
-}, pt = ({ disabled: r, children: s, onAddBinding: t, appliedBindings: d, editMode: l = !0, item: n = {} }) => {
-  const [o, p] = w(!1);
-  return /* @__PURE__ */ e.jsxs(cr, { children: [
-    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => p(!0), children: s }),
-    o && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
+}, pt = ({ disabled: r, children: s, onAddBinding: t, appliedBindings: d, editMode: o = !0, item: n = {} }) => {
+  const [l, p] = w(!1);
+  return /* @__PURE__ */ e.jsxs(qt, { children: [
+    /* @__PURE__ */ e.jsx(Jt, { disabled: r, asChild: !0, onClick: () => p(!0), children: s }),
+    l && /* @__PURE__ */ e.jsx(Qt, { children: /* @__PURE__ */ e.jsx(
       Jr,
       {
         item: n,
-        editMode: l,
+        editMode: o,
         appliedBindings: d,
         onAddBinding: (i) => {
           t(i), p(!1);
@@ -241,70 +249,70 @@ const Te = ({ data: r, fullView: s }) => {
   onAddBinding: s,
   onRemove: t,
   selectedBlock: d,
-  dataProvider: l,
+  dataProvider: o,
   appliedBindings: n
 }) => {
-  const [o, p] = w("string"), i = (c, h) => {
-    if (b(c))
+  const [l, p] = w("string"), i = (c, h) => {
+    if (f(c))
       return "";
     {
-      const a = x(h === "PROP" ? d : l, c, "");
+      const a = x(h === "PROP" ? d : o, c, "");
       if (pe(a))
         return "list";
       const g = typeof a;
       return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
-  return L(() => p(() => i(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+  return E(() => p(() => i(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(Te, { data: x(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(Se, { data: x(o, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: s, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Ir, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
+      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: s, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(pr, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
-        $r,
+        ur,
         {
           onClick: () => t(),
           className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
         }
       )
     ] }),
-    !b(o) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: E(o) })
+    !f(l) && !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: L(l) })
   ] });
 }, es = ({ bindingData: r, onChange: s }) => {
-  const t = K(), [d] = ct(), l = Er(), [n, o] = w(
+  const t = K(), [d] = at(), o = Nr(), [n, l] = w(
     k(r, (a, g) => ({ key: g, value: a }))
   );
-  L(() => {
-    o(k(r, (a, g) => ({ key: g, value: a })));
+  E(() => {
+    l(k(r, (a, g) => ({ key: g, value: a })));
   }, [t == null ? void 0 : t._id, r]);
   const p = _(() => {
-    if (b(d))
+    if (f(d))
       return !0;
-    if (b(n))
+    if (f(n))
       return !1;
-    const a = wt(n);
-    return b(a == null ? void 0 : a.key) || b(a == null ? void 0 : a.value);
+    const a = ft(n);
+    return f(a == null ? void 0 : a.key) || f(a == null ? void 0 : a.value);
   }, [d, n]), i = (a) => {
     const g = ve(n, (y) => y.key !== a.key);
-    o([...g, a]), h([...g, a]);
+    l([...g, a]), h([...g, a]);
   }, c = (a) => {
     const g = ve(n, (y, u) => a !== u);
     h([...g]);
   }, h = V(
     (a = []) => {
-      if (o(a), b(a)) {
+      if (l(a), f(a)) {
         s({});
         return;
       }
       const g = {};
       Re(a, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && Ge(g, y.key, y.value);
+        !f(y == null ? void 0 : y.key) && !f(y == null ? void 0 : y.value) && Ge(g, y.key, y.value);
       }), s(g);
     },
     [s]
   );
-  return b(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: [
+  return f(o) ? /* @__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" })
@@ -322,7 +330,7 @@ const Te = ({ data: r, fullView: s }) => {
       a.key
     )),
     /* @__PURE__ */ e.jsxs(O, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(F, { disabled: b(d), className: "w-full", children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx(F, { disabled: f(d), className: "w-full", children: /* @__PURE__ */ e.jsx(
         pt,
         {
           disabled: p,
@@ -332,90 +340,90 @@ const Te = ({ data: r, fullView: s }) => {
             "span",
             {
               className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${p ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(d) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              children: f(d) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      p && /* @__PURE__ */ e.jsx(Y, { sideOffset: -55, className: "text-[11px]", children: b(d) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      p && /* @__PURE__ */ e.jsx(z, { sideOffset: -55, className: "text-[11px]", children: f(d) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, ts = () => /* @__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" }), me = mt(({ id: r, properties: s, formData: t, onChange: d }) => {
-  const [l, n] = w(t), o = { type: "object", properties: {} }, p = {};
+}, ts = es, rs = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), me = mt(({ id: r, properties: s, formData: t, onChange: d }) => {
+  const [o, n] = w(t), l = { type: "object", properties: {} }, p = {};
   return Object.keys(s).forEach((i) => {
     const c = s[i];
     if (M(["slot", "styles"], c.type))
       return;
     const h = i;
-    o.properties[h] = xr(c), p[h] = gr(c);
-  }), L(() => {
+    l.properties[h] = Vr(c), p[h] = Hr(c);
+  }), E(() => {
     n(t);
   }, [r]), /* @__PURE__ */ e.jsx(
-    zr,
+    Dr,
     {
       widgets: {
-        binding: ts,
-        richtext: hr,
-        icon: yr,
-        image: mr
+        binding: rs,
+        richtext: Pr,
+        icon: Ir,
+        image: $r
       },
-      fields: { link: br },
+      fields: { link: Ar },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Xr,
+      validator: Br,
       uiSchema: p,
-      schema: o,
-      formData: l,
+      schema: l,
+      formData: o,
       onChange: ({ formData: i }, c) => {
         c && (n(i), d({ formData: i }, c));
       }
     }
   );
 });
-function rs() {
-  const r = K(), s = rt(), t = st(), d = Pe(r._type), l = { ...r }, [n, o] = w(l), p = fr("dataBindingSupport", !1), i = ({ formData: u }, f, j) => {
-    if (f && (n == null ? void 0 : n._id) === r._id) {
-      const B = f.replace("root.", "");
+function ss() {
+  const r = K(), s = ot(), t = lt(), d = Be(r._type), o = { ...r }, [n, l] = w(o), p = ir("dataBindingSupport", !1), i = ({ formData: u }, b, j) => {
+    if (b && (n == null ? void 0 : n._id) === r._id) {
+      const B = b.replace("root.", "");
       t([r._id], { [B]: x(u, B) }, j);
     }
   }, c = V(
-    Ct(({ formData: u }, f, j) => {
-      i({ formData: u }, f, j), o(u);
+    Ct(({ formData: u }, b, j) => {
+      i({ formData: u }, b, j), l(u);
     }, 1500),
     [r == null ? void 0 : r._id]
-  ), h = ({ formData: u }, f) => {
-    if (f) {
-      const j = f.replace("root.", "");
-      s([r._id], { [j]: x(u, j) }), c({ formData: u }, f, { [j]: x(n, j) });
+  ), h = ({ formData: u }, b) => {
+    if (b) {
+      const j = b.replace("root.", "");
+      s([r._id], { [j]: x(u, j) }), c({ formData: u }, b, { [j]: x(n, j) });
     }
   }, a = {
-    _name: Br({
+    _name: cr({
       title: "Name",
       default: x(r, "_name", r._type)
     })
-  }, g = je(x(l, "_bindings", {})), y = _(() => {
+  }, g = je(x(o, "_bindings", {})), y = _(() => {
     const u = kt(x(d, "props", {}));
-    return p && Nt(g, (f) => delete u[f]), u;
+    return p && Nt(g, (b) => delete u[b]), u;
   }, [d, g, p]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(me, { id: r == null ? void 0 : r._id, onChange: h, formData: l, properties: a }),
+    /* @__PURE__ */ e.jsx(me, { id: r == null ? void 0 : r._id, onChange: h, formData: o, properties: a }),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    p ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(Ce, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(ke, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+    p ? /* @__PURE__ */ e.jsxs(nt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(ke, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(Ne, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${b(x(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${f(x(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
         ] }) }),
-        /* @__PURE__ */ e.jsx(Ne, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          es,
+        /* @__PURE__ */ e.jsx(_e, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
+          ts,
           {
             bindingData: x(r, "_bindings", {}),
             onChange: (u) => {
@@ -424,13 +432,13 @@ function rs() {
           }
         ) })
       ] }),
-      /* @__PURE__ */ e.jsxs(Ce, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(ke, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e.jsxs(ke, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(Ne, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx("div", { className: "h-[8px] w-[8px] rounded-full bg-blue-500" }),
           "Static Content"
         ] }) }),
-        /* @__PURE__ */ e.jsxs(Ne, { className: "pt-4", children: [
-          b(g) ? 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(_e, { className: "pt-4", children: [
+          f(g) ? 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(g, we).join(", ") }),
             " ",
@@ -442,7 +450,7 @@ function rs() {
             {
               id: r == null ? void 0 : r._id,
               onChange: h,
-              formData: l,
+              formData: o,
               properties: y
             }
           )
@@ -453,24 +461,24 @@ function rs() {
       {
         id: r == null ? void 0 : r._id,
         onChange: h,
-        formData: l,
+        formData: o,
         properties: y
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Xe = new Wr(Ur, {
+const Xe = new Lr(Er, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function ss() {
+function os() {
   var B;
-  const [r] = ue(), s = K(), t = De(), d = ot(), [l] = at(), [n, o] = w(""), p = (B = ae(r)) == null ? void 0 : B.prop, i = _t((x(s, p, "").replace(Gr, "").split(",").pop() || "").split(" "), b), c = () => {
+  const [r] = ue(), s = K(), t = Pe(), d = it(), [o] = st(), [n, l] = w(""), p = (B = ae(r)) == null ? void 0 : B.prop, i = _t((x(s, p, "").replace(Fr, "").split(",").pop() || "").split(" "), f), c = () => {
     const C = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    t(l, C, !0), o("");
+    t(o, C, !0), l("");
   }, [h, a] = w([]), g = ({ value: C }) => {
     const I = C.trim().toLowerCase(), X = I.match(/.+:/g);
     let N = [];
@@ -485,7 +493,7 @@ function ss() {
     a(k(N, "item"));
   }, y = () => {
     a([]);
-  }, u = (C) => C.name, f = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), j = {
+  }, u = (C) => C.name, b = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), j = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -495,7 +503,7 @@ function ss() {
     onKeyDown: (C) => {
       C.key === "Enter" && n.trim() !== "" && c();
     },
-    onChange: (C, { newValue: I }) => o(I),
+    onChange: (C, { newValue: I }) => l(I),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   };
   return /* @__PURE__ */ e.jsxs(
@@ -503,16 +511,16 @@ function ss() {
     {
       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(nt, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__PURE__ */ e.jsx(ct, { 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(
-            Zr,
+            Mr,
             {
               suggestions: h,
               onSuggestionsFetchRequested: g,
               onSuggestionsClearRequested: y,
               getSuggestionValue: u,
-              renderSuggestion: f,
+              renderSuggestion: b,
               inputProps: j,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
@@ -537,7 +545,7 @@ function ss() {
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(i) && /* @__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" }),
+          f(i) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
           de.Children.toArray(
             i.map((C) => /* @__PURE__ */ e.jsxs(
               "div",
@@ -548,7 +556,7 @@ function ss() {
                   /* @__PURE__ */ e.jsx(
                     Qe,
                     {
-                      onClick: () => d(l, [C]),
+                      onClick: () => d(o, [C]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -571,7 +579,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, os = {
+}, as = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -582,7 +590,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, as = [
+}, ns = [
   {
     heading: "layout.heading",
     items: [
@@ -984,7 +992,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: ss }]
+    items: [{ component: os }]
   }
 ], ut = {
   "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" }) }),
@@ -994,32 +1002,32 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   // display
   hidden: Ae,
   gap: A,
-  gapX: S,
+  gapX: T,
   gapY: R,
-  spaceX: S,
+  spaceX: T,
   spaceY: R,
   overscroll: A,
-  overscrollX: S,
+  overscrollX: T,
   overscrollY: R,
   overflow: A,
-  overflowX: S,
+  overflowX: T,
   overflowY: R,
   top: ee,
   right: te,
   bottom: re,
   left: se,
   inset: A,
-  insetX: S,
+  insetX: T,
   insetY: R,
   border: A,
-  borderX: S,
+  borderX: T,
   borderY: R,
   borderTop: ee,
   borderRight: te,
   borderBottom: re,
   borderLeft: se,
   borderRadius: A,
-  borderRadiusX: S,
+  borderRadiusX: T,
   borderRadiusY: R,
   borderRadiusTop: ee,
   borderRadiusRight: te,
@@ -1029,18 +1037,18 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   borderRadiusTopRight: Pt,
   borderRadiusBottomRight: It,
   borderRadiusBottomLeft: $t,
-  divideXWidth: S,
+  divideXWidth: T,
   divideYWidth: R,
   scale: A,
-  scaleX: S,
+  scaleX: T,
   scaleY: R,
-  skewX: S,
+  skewX: T,
   skewY: R,
-  translateX: S,
+  translateX: T,
   translateY: R,
   // padding
   padding: A,
-  paddingX: S,
+  paddingX: T,
   paddingY: R,
   paddingTop: ee,
   paddingRight: te,
@@ -1048,7 +1056,7 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   paddingLeft: se,
   // margin
   margin: A,
-  marginX: S,
+  marginX: T,
   marginY: R,
   marginTop: ee,
   marginRight: te,
@@ -1057,16 +1065,16 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
   // text-align
   textLeft: At,
   textCenter: Mt,
-  textRight: Et,
-  textJustify: Lt,
+  textRight: Lt,
+  textJustify: Et,
   // font style
   italic: Ot,
   // "not-italic": "",
   // decoration
   underline: Ft,
-  overline: Yt,
+  overline: zt,
   // transform
-  uppercase: zt,
+  uppercase: Yt,
   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",
@@ -1180,38 +1188,38 @@ const D = ["px", "%", "em", "rem", "ch", "vh", "vw"], ls = {
     )
   ] }),
   static: Xt
-}, ne = Ke({ canReset: !1, canChange: !0 }), ns = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
+}, ne = Ke({ canReset: !1, canChange: !0 }), is = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(ne.Provider, { value: { canReset: s, canChange: t }, children: r })
 ), xt = ({ label: r, property: s, onChange: t }) => {
-  const d = _(() => x(ge, `${s}.classes`, [""]), [s]), l = ie(s), n = _(() => x(l, "cls", ""), [l]), { canChange: o } = oe(ne), p = /\[.*\]/g.test(n);
+  const d = _(() => x(ge, `${s}.classes`, [""]), [s]), o = ie(s), n = _(() => x(o, "cls", ""), [o]), { canChange: l } = le(ne), p = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(_e, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsx(Ce, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(He, {}) }) }),
-      /* @__PURE__ */ e.jsx(Y, { children: "Current value is using a Tailwind arbitrary value." })
+      /* @__PURE__ */ e.jsx(z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    Se,
+    Te,
     {
       rounded: r,
       onChange: (i) => t(i, s),
       selected: n,
       options: d,
-      disabled: !o
+      disabled: !l
     }
   ) });
 };
-function Se({ selected: r, onChange: s, rounded: t = !1, options: d, disabled: l = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: o, redo: p } = vr();
+function Te({ selected: r, onChange: s, rounded: t = !1, options: d, disabled: o = !1 }) {
+  const n = r.replace(/.*:/g, "").trim(), { undo: l, redo: p } = ar();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !d.length || l,
+      disabled: !d.length || o,
       className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
       onChange: (i) => s(i.target.value),
       onKeyDown: (i) => {
-        i.ctrlKey && (i.key === "z" && o(), i.key === "y" && p());
+        i.ctrlKey && (i.key === "z" && l(), i.key === "y" && p());
       },
       value: n,
       children: [
@@ -1223,8 +1231,8 @@ function Se({ selected: r, onChange: s, rounded: t = !1, options: d, disabled: l
     }
   );
 }
-const is = ({ property: r, onChange: s }) => {
-  const { canReset: t, canChange: d } = oe(ne), l = ie(r), n = _(() => x(l, "cls", ""), [l]), o = _(() => x(ge, `${r}.classes`, [""]), [r]), p = o.indexOf(n) > -1 ? o.indexOf(n) : 0, i = /\[.*\]/g.test(n);
+const ds = ({ property: r, onChange: s }) => {
+  const { canReset: t, canChange: d } = le(ne), o = ie(r), n = _(() => x(o, "cls", ""), [o]), l = _(() => x(ge, `${r}.classes`, [""]), [r]), p = l.indexOf(n) > -1 ? l.indexOf(n) : 0, i = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1232,7 +1240,7 @@ const is = ({ property: r, onChange: s }) => {
         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: !d && (!t || p - 1 < 0),
-        onClick: () => s($e(o, p - 1), r),
+        onClick: () => s($e(l, p - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Zt,
           {
@@ -1247,33 +1255,33 @@ const is = ({ property: r, onChange: s }) => {
       {
         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: !d && (!t || p + 1 >= o.length),
-        onClick: () => s($e(o, p + 1), r),
+        disabled: !d && (!t || p + 1 >= l.length),
+        onClick: () => s($e(l, p + 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ve,
           {
-            className: !d && (!t || p + 1 >= o.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !d && (!t || p + 1 >= l.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, ds = ({ property: r, onChange: s }) => {
-  const t = _(() => x(ge, `${r}.classes`, [""]), [r]), { canChange: d } = oe(ne), l = ie(r), n = _(() => x(l, "cls", ""), [l]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (o) => /* @__PURE__ */ e.jsxs(O, { children: [
+}, cs = ({ property: r, onChange: s }) => {
+  const t = _(() => x(ge, `${r}.classes`, [""]), [r]), { canChange: d } = le(ne), o = ie(r), n = _(() => x(o, "cls", ""), [o]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (l) => /* @__PURE__ */ e.jsxs(O, { children: [
     /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !d,
-        onClick: () => s(o, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === o ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(x(ut, o, et))
+        onClick: () => s(l, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === l ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(x(ut, l, et))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(Y, { children: E(le(o)) })
+    /* @__PURE__ */ e.jsx(z, { children: L(oe(l)) })
   ] })) });
-}, cs = {
+}, ps = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1285,18 +1293,18 @@ const is = ({ property: r, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, ps = ({ property: r, onChange: s }) => {
-  const t = ie(r), d = _(() => x(t, "cls", ""), [t]), { canChange: l } = oe(ne), [n, o] = w([]), [p, i] = w({ color: "", shade: "" }), c = d.split("-"), h = x(c, "1", ""), a = x(c, "2", ""), g = V(
+}, us = ({ property: r, onChange: s }) => {
+  const t = ie(r), d = _(() => x(t, "cls", ""), [t]), { canChange: o } = le(ne), [n, l] = w([]), [p, i] = w({ color: "", shade: "" }), c = d.split("-"), h = x(c, "1", ""), a = x(c, "2", ""), g = V(
     // eslint-disable-next-line no-shadow
     (u) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (o([]), i({ color: u })) : (o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (l([]), i({ color: u })) : (l(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((b) => ({ ...b, color: u, shade: b.shade ? b.shade : "500" })));
     },
-    [o, i]
+    [l, i]
   );
-  L(() => {
+  E(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(h))
-      return o([]);
-    o(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+      return l([]);
+    l(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [h]);
   const y = V(
     // eslint-disable-next-line no-shadow
@@ -1305,16 +1313,16 @@ const is = ({ property: r, onChange: s }) => {
     },
     [h]
   );
-  return L(() => {
+  return E(() => {
     i({ color: "", shade: "" });
-  }, [t]), L(() => {
-    const f = `${x(cs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
-    f.match(new RegExp(x(ge, `${r}.regExp`, ""))) && s(f, r);
+  }, [t]), E(() => {
+    const b = `${x(ps, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
+    b.match(new RegExp(x(ge, `${r}.regExp`, ""))) && s(b, r);
   }, [p, s, 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(
-      Se,
+      Te,
       {
-        disabled: !l,
+        disabled: !o,
         rounded: !0,
         selected: h,
         onChange: g,
@@ -1350,7 +1358,7 @@ const is = ({ property: r, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Se, { rounded: !0, selected: a, disabled: !h || !l, onChange: y, options: n }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Te, { rounded: !0, selected: a, disabled: !h || !o, onChange: y, options: n }) })
   ] });
 }, Ze = (r, s) => {
   r = r.toLowerCase();
@@ -1359,10 +1367,9 @@ const is = ({ property: r, onChange: s }) => {
     return { value: "", unit: t };
   const d = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
   t = t.replace(d, "");
-  const l = r.match(d), n = l && l.length > 1, o = !b(t) && Number.isNaN(Number(t));
-  return n || o ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
-};
-const us = (r) => {
+  const o = r.match(d), n = o && o.length > 1, l = !f(t) && Number.isNaN(Number(t));
+  return n || l ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
+}, xs = (r) => {
   const s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1486,32 +1493,31 @@ const us = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [d, l] = k(t.split("/"), (n) => parseInt(n, 10));
-    return { value: s + (d / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [d, o] = k(t.split("/"), (n) => parseInt(n, 10));
+    return { value: s + (d / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Tt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-};
-const xs = (r) => {
-  if (b(r))
+  return St(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+}, gs = (r) => {
+  if (f(r))
     return { value: "", unit: "" };
   const s = r.match(/\[.*\]/g);
   if (s === null)
-    return gs(r);
-  const t = x(s, "0", "").replace(/\[|\]/g, ""), d = r.startsWith("-") ? "-" : "", l = ae(t.match(/\d+.\d+|\d+/g));
-  return { value: `${d}${l}`, unit: t.replace(l, "") };
-}, gs = (r) => b(r) ? { value: "", unit: "" } : us(r), gt = $.createContext({
+    return hs(r);
+  const t = x(s, "0", "").replace(/\[|\]/g, ""), d = r.startsWith("-") ? "-" : "", o = ae(t.match(/\d+.\d+|\d+/g));
+  return { value: `${d}${o}`, unit: t.replace(o, "") };
+}, hs = (r) => f(r) ? { value: "", unit: "" } : xs(r), gt = $.createContext({
   setDragData: () => {
   }
-}), hs = ({
+}), ys = ({
   unit: r,
   currentValue: s,
   onDrag: t,
   onDragEnd: d,
-  onDragStart: l,
+  onDragStart: o,
   negative: n,
-  cssProperty: o
+  cssProperty: l
 }) => {
-  const { setDragData: p } = oe(gt);
+  const { setDragData: p } = le(gt);
   return /* @__PURE__ */ e.jsx(
     "button",
     {
@@ -1525,52 +1531,52 @@ const xs = (r) => {
           dragStartValue: `${s}`,
           dragUnit: r,
           negative: n,
-          cssProperty: o
+          cssProperty: l
         };
-        l(c), p(c);
+        o(c), p(c);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Wt, {})
+      children: /* @__PURE__ */ e.jsx(Ut, {})
     }
   );
-}, ys = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((d) => /* @__PURE__ */ e.jsx(
+}, ms = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((d) => /* @__PURE__ */ e.jsx(
   U,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
     color: s === d ? "primary" : void 0,
     size: "sm",
-    onClick: (l) => {
-      l.stopPropagation(), r(d);
+    onClick: (o) => {
+      o.stopPropagation(), r(d);
     },
     children: d
   },
   d
-)) }), We = 50, ms = (r) => {
-  const [s, t] = w(!1), [d, l] = w(""), { currentClass: n, onChange: o, classPrefix: p, cssProperty: i, units: c, negative: h } = r, [a, g] = w(i != null && i.toLowerCase().includes("width") ? "%" : c[0]), [y, u] = w(!1), [f, j] = w(""), [B, C] = w(!1), [I, X] = w(!1);
-  L(() => {
-    const { value: m, unit: v } = xs(n);
+)) }), We = 50, fs = (r) => {
+  const [s, t] = w(!1), [d, o] = w(""), { currentClass: n, onChange: l, classPrefix: p, cssProperty: i, units: c, negative: h } = r, [a, g] = w(i != null && i.toLowerCase().includes("width") ? "%" : c[0]), [y, u] = w(!1), [b, j] = w(""), [B, C] = w(!1), [I, X] = w(!1);
+  E(() => {
+    const { value: m, unit: v } = gs(n);
     if (v === "") {
-      l(m), g(i != null && i.toLowerCase().includes("width") ? "%" : ae(c));
+      o(m), g(i != null && i.toLowerCase().includes("width") ? "%" : ae(c));
       return;
     }
-    g(v), l(v === "class" || b(m) ? "" : m);
+    g(v), o(v === "class" || f(m) ? "" : m);
   }, [n, i, c]);
-  const N = fe((m) => o(m), [o], We), P = fe((m) => o(m, !1), [o], We), W = V(
+  const N = be((m) => l(m), [l], We), P = be((m) => l(m, !1), [l], We), W = V(
     (m = !1) => {
       const v = Ze(`${d}`, c);
       if (x(v, "error", !1)) {
         u(!0);
         return;
       }
-      const T = x(v, "unit") !== "" ? x(v, "unit") : a;
-      if (T === "auto" || T === "none") {
-        N(`${p}${T}`);
+      const S = x(v, "unit") !== "" ? x(v, "unit") : a;
+      if (S === "auto" || S === "none") {
+        N(`${p}${S}`);
         return;
       }
       if (x(v, "value") === "")
         return;
-      const Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       m ? P(Q) : N(Q);
     },
     [N, P, d, a, p, c]
@@ -1587,7 +1593,7 @@ const xs = (r) => {
       }
       if (x(v, "value") === "")
         return;
-      const T = x(v, "unit") !== "" ? x(v, "unit") : m, Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const S = x(v, "unit") !== "" ? x(v, "unit") : m, Q = `${x(v, "value", "").startsWith("-") ? "-" : ""}${p}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(Q);
     },
     [N, d, p, c]
@@ -1596,7 +1602,7 @@ const xs = (r) => {
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(O, { children: [
       /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(He, {}) }) }),
-      /* @__PURE__ */ e.jsx(Y, { children: "Current value is using a Tailwind preset class." })
+      /* @__PURE__ */ e.jsx(z, { children: "Current value is using a Tailwind preset class." })
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
@@ -1611,10 +1617,10 @@ const xs = (r) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
             m.preventDefault(), X(!0);
-            const v = St(m.target.value);
-            let T = qe(v) ? 0 : v;
-            m.keyCode === 38 && (T += 1), m.keyCode === 40 && (T -= 1);
-            const Z = `${T}`, yt = `${Z.startsWith("-") ? "-" : ""}${p}[${Z.replace("-", "")}${a === "-" ? "" : a}]`;
+            const v = Tt(m.target.value);
+            let S = qe(v) ? 0 : v;
+            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
+            const Z = `${S}`, yt = `${Z.startsWith("-") ? "-" : ""}${p}[${Z.replace("-", "")}${a === "-" ? "" : a}]`;
             P(yt);
           },
           onKeyUp: (m) => {
@@ -1622,13 +1628,13 @@ const xs = (r) => {
           },
           onBlur: () => W(),
           onChange: (m) => {
-            u(!1), l(m.target.value);
+            u(!1), o(m.target.value);
           },
           onClick: (m) => {
             var v;
             (v = m == null ? void 0 : m.target) == null || v.select(), t(!1);
           },
-          value: B ? f : d,
+          value: B ? b : d,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             y ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -1644,12 +1650,12 @@ const xs = (r) => {
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${c.length === 1 ? "px-2 font-semibold" : ""}`, children: a }),
-              c.length > 1 ? /* @__PURE__ */ e.jsx(Ut, {}) : null
+              c.length > 1 ? /* @__PURE__ */ e.jsx(Wt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(jr, { children: /* @__PURE__ */ e.jsx(Y, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ys,
+        /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ms,
           {
             units: c,
             current: a,
@@ -1661,17 +1667,17 @@ const xs = (r) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(a) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
-      hs,
+      ys,
       {
         onDragStart: () => C(!0),
         onDragEnd: (m) => {
-          if (j(() => ""), C(!1), b(m))
+          if (j(() => ""), C(!1), f(m))
             return;
           const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${p}[${v.replace("-", "")}${a === "-" ? "" : a}]`;
           N(Z);
         },
         onDrag: (m) => {
-          if (b(m))
+          if (f(m))
             return;
           j(m);
           const v = `${m}`, Z = `${v.startsWith("-") ? "-" : ""}${p}[${v.replace("-", "")}${a === "-" ? "" : a}]`;
@@ -1697,7 +1703,7 @@ const xs = (r) => {
     "2xl": 5
   };
   return t[x(r, "mq", "xs")] <= t[s];
-}, fs = {
+}, vs = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1770,20 +1776,20 @@ const xs = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, vs = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
-  const { t: s } = z(), { type: t = "icons", label: d, property: l, onEmitChange: n = () => {
-  }, units: o, negative: p = !1 } = r, [i] = wr(), [c] = it(), [, h] = Me(), a = ie(l), g = De(), y = ot(), [u] = at(), f = _(() => x(a, "fullCls", ""), [a]), j = V(
+}, js = (r) => `${r.toUpperCase()} ${Ue[r] ? `(${Ue[r]} & up)` : ""}`, Ie = (r) => {
+  const { t: s } = Y(), { type: t = "icons", label: d, property: o, onEmitChange: n = () => {
+  }, units: l, negative: p = !1 } = r, [i] = zr(), [c] = dt(), [, h] = Me(), a = ie(o), g = Pe(), y = it(), [u] = st(), b = _(() => x(a, "fullCls", ""), [a]), j = V(
     (P, W = !0) => {
-      const J = { dark: i, mq: h, mod: c, cls: P, property: l, fullCls: "" };
+      const J = { dark: i, mq: h, mod: c, cls: P, property: o, fullCls: "" };
       (i || c !== "") && (J.mq = "xs");
-      const m = Kr(J);
+      const m = Or(J);
       g(u, [m], W);
     },
-    [u, i, h, c, l, g]
+    [u, i, h, c, o, g]
   ), B = V(() => {
-    y(u, [f]);
-  }, [u, f, y]), C = _(() => bs(a, h), [a, h]);
-  L(() => {
+    y(u, [b]);
+  }, [u, b, y]), C = _(() => bs(a, h), [a, h]);
+  E(() => {
     n(C, a);
   }, [C, n, a]);
   const [, , I] = Me(), X = V(
@@ -1799,27 +1805,27 @@ const xs = (r) => {
     },
     [I]
   ), N = x(a, "dark", null) === i && x(a, "mod", null) === c && x(a, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(ns, { canChange: C, canReset: a && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ e.jsx(is, { canChange: C, canReset: a && 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] ${a && !N ? "text-foreground" : ""}`, children: s(d) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ms,
+          fs,
           {
             currentClass: x(a, "cls", ""),
-            classPrefix: x(fs, l, ""),
-            units: o || [],
+            classPrefix: x(vs, o, ""),
+            units: l || [],
             onChange: j,
             negative: p,
-            cssProperty: l
+            cssProperty: o
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(ds, { property: l, onChange: j }),
-        t === "range" && /* @__PURE__ */ e.jsx(is, { property: l, onChange: j }),
-        t === "color" && /* @__PURE__ */ e.jsx(ps, { property: l, onChange: j }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: d, property: l, onChange: j })
+        t === "icons" && /* @__PURE__ */ e.jsx(cs, { property: o, onChange: j }),
+        t === "range" && /* @__PURE__ */ e.jsx(ds, { property: o, onChange: j }),
+        t === "color" && /* @__PURE__ */ e.jsx(us, { property: o, onChange: j }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: d, property: o, onChange: j })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Kt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && a ? /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Kt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && a ? /* @__PURE__ */ e.jsxs(O, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1828,10 +1834,10 @@ const xs = (r) => {
             children: /* @__PURE__ */ e.jsx(He, {})
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Y, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx(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: [
-            vs(x(a, "mq")),
+            js(x(a, "mq")),
             i && !a.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1851,16 +1857,16 @@ const xs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, js = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
+}, ws = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
   label: r,
   options: s,
   borderB: t = !1,
   borderT: d = !1,
-  type: l = "arbitrary",
-  units: n = js,
-  negative: o = !1
+  type: o = "arbitrary",
+  units: n = ws,
+  negative: l = !1
 }) => {
-  const { t: p } = z(), [i, c] = w(s[0].key), h = xe(), a = V((g) => k(h, "property").includes(g), [h]);
+  const { t: p } = Y(), [i, c] = w(s[0].key), h = xe(), a = V((g) => k(h, "property").includes(g), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1884,127 +1890,127 @@ const xs = (r) => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Y, { children: E(le(g)) })
+              /* @__PURE__ */ e.jsx(z, { children: L(oe(g)) })
             ] }) }))
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
           Ie,
           {
-            type: l,
+            type: o,
             units: [...n],
             label: "",
             property: i,
-            negative: o
+            negative: l
           }
         ) })
       ]
     }
   );
-}, ws = ({ heading: r, items: s }) => {
-  const { t } = z(), d = xe(), l = _(() => {
+}, Cs = ({ heading: r, items: s }) => {
+  const { t } = Y(), d = xe(), o = _(() => {
     const n = (i) => q(
       i.map((c) => c.styleType === "multiple" ? k(c.options, "key") : c.property)
-    ), o = q(
+    ), l = q(
       s.map((i) => i.styleType === "accordion" ? n(i.items) : i.styleType === "multiple" ? k(i.options, "key") : i.property)
     ), p = k(d, "property");
-    return Je(o, p).length > 0;
+    return Je(l, p).length > 0;
   }, [d, s]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
       t(r),
-      l ? /* @__PURE__ */ e.jsx(
+      o ? /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${o ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Ie, { ...n }, n.label)) })
   ] });
-}, Cs = Ke({}), be = ({ section: r }) => {
-  const { t: s } = z(), t = xe(), d = V(
-    (o = []) => {
+}, ks = Ke({}), fe = ({ section: r }) => {
+  const { t: s } = Y(), t = xe(), d = V(
+    (l = []) => {
       const p = {};
       for (let c = 0; c < t.length; c++)
         p[t[c].property] = t[c].cls;
       let i = !0;
-      for (const c in o)
-        if (!ce(p, c) || p[c] !== o[c]) {
+      for (const c in l)
+        if (!ce(p, c) || p[c] !== l[c]) {
           i = !1;
           break;
         }
       return i;
     },
     [t]
-  ), l = _(() => {
+  ), o = _(() => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
-    const o = (c) => q(
+    const l = (c) => q(
       c.map((h) => h.styleType === "multiple" ? q(k(h.options, "key")) : h.property)
     ), p = q(
-      r.items.map((c) => c.styleType === "accordion" ? o(c.items) : c.styleType === "multiple" ? q(k(c.options, "key")) : c.property)
+      r.items.map((c) => c.styleType === "accordion" ? l(c.items) : c.styleType === "multiple" ? q(k(c.options, "key")) : c.property)
     ), i = k(t, "property");
     return Je(p, i).length > 0;
   }, [t, r.heading, r.items]), n = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Cs.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(Ce, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ke, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+  return /* @__PURE__ */ e.jsx(ks.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(ke, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(Ne, { 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 ${o ? "bg-blue-500" : "bg-gray-300"}` }),
       s(r.heading)
     ] }) }),
-    /* @__PURE__ */ e.jsx(Ne, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((o) => ce(o, "component") ? $.createElement(o.component, { key: o.label }) : ce(o, "styleType") ? o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...o }, o.label) : o.styleType === "accordion" && d(o == null ? void 0 : o.conditions) ? /* @__PURE__ */ e.jsx(ws, { ...o }, o.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...o }, o.label))
+    /* @__PURE__ */ e.jsx(_e, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      r.items.map((l) => ce(l, "component") ? $.createElement(l.component, { key: l.label }) : ce(l, "styleType") ? l.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...l }, l.label) : l.styleType === "accordion" && d(l == null ? void 0 : l.conditions) ? /* @__PURE__ */ e.jsx(Cs, { ...l }, l.label) : null : /* @__PURE__ */ e.jsx(Ie, { ...l }, l.label))
     ) })
   ] }) });
-}, ks = () => {
-  const r = K(), [s] = ue(), { t } = z(), d = Lr(), l = De(), n = Pe(r._type), o = x(ae(s), "prop"), p = x(n.props, `${o}.presets`, {});
-  if (b(d) && (!ce(n, "props") || b(p)))
+}, Ns = () => {
+  const r = K(), [s] = ue(), { t } = Y(), d = _r(), o = Pe(), n = Be(r._type), l = x(ae(s), "prop"), p = x(n.props, `${l}.presets`, {});
+  if (f(d) && (!ce(n, "props") || f(p)))
     return null;
   const i = (c) => {
     const h = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([r._id], h, !0);
+    o([r._id], h, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Cr, { children: [
-    /* @__PURE__ */ e.jsx(kr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(U, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Ur, { children: [
+    /* @__PURE__ */ e.jsx(Kr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(U, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
       /* @__PURE__ */ e.jsx(Gt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Nr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Be, { className: "no-scrollbar h-full", children: [
-      b(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(Ee, { children: [
+    /* @__PURE__ */ e.jsx(Gr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(De, { className: "no-scrollbar h-full", children: [
+      f(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(Le, { children: [
           n.type,
           " ",
           t("presets")
         ] }),
-        /* @__PURE__ */ e.jsx(Le, {}),
+        /* @__PURE__ */ e.jsx(Ee, {}),
         /* @__PURE__ */ e.jsx(Oe, { children: je(p).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => i(p[c]), children: [
-          we(E(t(c))),
-          /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+          we(L(t(c))),
+          /* @__PURE__ */ e.jsx(ze, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
-      b(d) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(Ee, { children: t("Global presets") }),
-        /* @__PURE__ */ e.jsx(Le, {}),
+      f(d) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(Le, { children: t("Global presets") }),
+        /* @__PURE__ */ e.jsx(Ee, {}),
         /* @__PURE__ */ e.jsx(Oe, { children: je(d).map((c) => /* @__PURE__ */ e.jsxs(Fe, { className: "group text-xs", onClick: () => i(d[c]), children: [
-          we(E(t(c))),
-          /* @__PURE__ */ e.jsx(Ye, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
+          we(L(t(c))),
+          /* @__PURE__ */ e.jsx(ze, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Ns() {
-  const [r, s] = it(), { flexChild: t, gridChild: d } = _r(), { t: l } = z(), [n] = ue();
-  return b(n) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+function _s() {
+  const [r, s] = dt(), { flexChild: t, gridChild: d } = nr(), { t: o } = Y(), [n] = ue();
+  return f(n) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(tt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: l("no_styling_block_selected") })
+    /* @__PURE__ */ e.jsx("h1", { children: o("no_styling_block_selected") })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(ks, {}),
+    /* @__PURE__ */ e.jsx(Ns, {}),
     /* @__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(nt, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-      /* @__PURE__ */ e.jsxs(Tr, { defaultValue: r, onValueChange: (o) => s(o), children: [
-        /* @__PURE__ */ e.jsx(Sr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Rr, { placeholder: "State" }) }),
-        /* @__PURE__ */ e.jsxs(Vr, { children: [
+      /* @__PURE__ */ e.jsx(ct, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+      /* @__PURE__ */ e.jsxs(Yr, { defaultValue: r, onValueChange: (l) => s(l), children: [
+        /* @__PURE__ */ e.jsx(Xr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Zr, { placeholder: "State" }) }),
+        /* @__PURE__ */ e.jsxs(Wr, { children: [
           /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
           /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
           /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
@@ -2021,23 +2027,23 @@ function Ns() {
       ] })
     ] }) }),
     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(Ar, { className: "w-3" }),
-      /* @__PURE__ */ e.jsx("span", { children: l(`Styles will be applied for (:${r}) state`) })
+      /* @__PURE__ */ e.jsx(gr, { className: "w-3" }),
+      /* @__PURE__ */ e.jsx("span", { children: o(`Styles will be applied for (:${r}) state`) })
     ] }) : null,
-    /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-      t && /* @__PURE__ */ e.jsx(be, { section: ls }),
-      d ? /* @__PURE__ */ e.jsx(be, { section: os }) : null,
-      as.map((o) => /* @__PURE__ */ e.jsx(be, { section: o }, o.heading))
+    /* @__PURE__ */ e.jsx(De, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(nt, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+      t && /* @__PURE__ */ e.jsx(fe, { section: ls }),
+      d ? /* @__PURE__ */ e.jsx(fe, { section: as }) : null,
+      ns.map((l) => /* @__PURE__ */ e.jsx(fe, { section: l }, l.heading))
     ] }) })
   ] });
 }
-const _s = ({ onAdd: r }) => {
-  const { t: s } = z(), [t, d] = w({ key: "", value: "" }), l = () => {
-    b(t.key) || (r({ ...t, key: Vt(t.key) }), d({ key: "", value: "" }));
+const Ss = ({ onAdd: r }) => {
+  const { t: s } = Y(), [t, d] = w({ key: "", value: "" }), o = () => {
+    f(t.key) || (r({ ...t, key: Vt(t.key) }), d({ key: "", value: "" }));
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200 px-1", children: [
     /* @__PURE__ */ e.jsx(
-      _e,
+      Ce,
       {
         name: "key",
         onChange: (n) => d({ ...t, key: n.target.value }),
@@ -2046,12 +2052,12 @@ const _s = ({ onAdd: r }) => {
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || l());
+          n.key === "Enter" && (n.preventDefault(), f(t.key) || o());
         }
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-1.5", children: /* @__PURE__ */ e.jsx(
-      _e,
+      Ce,
       {
         name: "value",
         onChange: (n) => d({ ...t, value: n.target.value }),
@@ -2060,26 +2066,26 @@ const _s = ({ onAdd: r }) => {
         autoComplete: "off",
         autoCapitalize: "off",
         onKeyDown: (n) => {
-          n.key === "Enter" && (n.preventDefault(), b(t.key) || l());
+          n.key === "Enter" && (n.preventDefault(), f(t.key) || o());
         }
       }
     ) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsxs(U, { disabled: b(t.key), onClick: l, size: "sm", className: "flex items-center", children: [
+      /* @__PURE__ */ e.jsxs(U, { disabled: f(t.key), onClick: o, size: "sm", className: "flex items-center", children: [
         /* @__PURE__ */ e.jsxs("span", { children: [
           s("Add"),
           " "
         ] }),
         /* @__PURE__ */ e.jsx(Ve, {})
       ] }),
-      b(t.key) ? null : /* @__PURE__ */ e.jsx(U, { variant: "ghost", onClick: () => d({ key: "", value: "" }), children: s("Cancel") })
+      f(t.key) ? null : /* @__PURE__ */ e.jsx(U, { variant: "ghost", onClick: () => d({ key: "", value: "" }), children: s("Cancel") })
     ] })
   ] });
 }, Ts = () => {
-  const r = K(), [s, t] = w([]), [d] = ue(), l = rt(), n = st(), { t: o } = z(), p = `${x(d, "0.prop")}_attrs`;
+  const r = K(), [s, t] = w([]), [d] = ue(), o = ot(), n = lt(), { t: l } = Y(), p = `${x(d, "0.prop")}_attrs`;
   de.useEffect(() => {
     const a = k(x(r, p), (g, y) => ({ key: y, value: g }));
-    b(a) ? t([]) : t(a);
+    f(a) ? t([]) : t(a);
   }, [x(r, p)]);
   const i = (a) => {
     const g = ve(s, (y, u) => a !== u);
@@ -2091,14 +2097,14 @@ const _s = ({ onAdd: r }) => {
     (a = []) => {
       const g = {};
       Re(a, (y) => {
-        b(y.key) || Ge(g, y.key, y.value);
+        f(y.key) || Ge(g, y.key, y.value);
       }), n([x(r, "_id")], { [p]: g });
     },
-    [r, l, p]
+    [r, o, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "px-2", children: /* @__PURE__ */ e.jsx("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 p-2 text-xs text-gray-700", children: [
-      b(s) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-16 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: o("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: o("Custom attributes") }) }),
+      f(s) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-16 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: l("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: l("Custom attributes") }) }),
       de.Children.toArray(
         k(s, (a) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
           /* @__PURE__ */ e.jsxs(O, { delayDuration: 1e3, children: [
@@ -2109,14 +2115,14 @@ const _s = ({ onAdd: r }) => {
               " ",
               a.value
             ] }) }),
-            /* @__PURE__ */ e.jsxs(Y, { className: "max-w-[200px]", children: [
+            /* @__PURE__ */ e.jsxs(z, { className: "max-w-[200px]", children: [
               /* @__PURE__ */ e.jsxs("div", { children: [
-                o("Name"),
+                l("Name"),
                 ": ",
                 a.key
               ] }),
               /* @__PURE__ */ e.jsxs("div", { children: [
-                o("Value"),
+                l("Value"),
                 ": ",
                 a.value
               ] })
@@ -2128,18 +2134,18 @@ const _s = ({ onAdd: r }) => {
               {
                 className: "invisible group-hover:visible",
                 onClick: () => i(s.indexOf(a)),
-                children: /* @__PURE__ */ e.jsx(Mr, { className: "w-4 text-gray-500" })
+                children: /* @__PURE__ */ e.jsx(hr, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(Y, { className: "max-w-[200px]", children: o("Remove attribute") })
+            /* @__PURE__ */ e.jsx(z, { className: "max-w-[200px]", children: l("Remove attribute") })
           ] })
         ] }))
       )
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(_s, { onAdd: (a) => c(a) })
+    /* @__PURE__ */ e.jsx(Ss, { onAdd: (a) => c(a) })
   ] }) }) });
-}, Ss = {
+}, Rs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2150,8 +2156,8 @@ const _s = ({ onAdd: r }) => {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, _l = () => {
-  const r = K(), { t: s } = z(), [t, d] = $.useState(""), [l, n] = $.useState({
+}, $o = () => {
+  const r = K(), { t: s } = Y(), [t, d] = $.useState(""), [o, n] = $.useState({
     onDrag: (i) => i,
     onDragEnd: (i) => i,
     dragStartY: 0,
@@ -2160,20 +2166,20 @@ const _s = ({ onAdd: r }) => {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), o = fe(
+  }), l = be(
     (i) => {
-      const c = !x(l, "negative", !1), h = x(l, "cssProperty", "");
-      let a = parseFloat(l.dragStartValue);
+      const c = !x(o, "negative", !1), h = x(o, "cssProperty", "");
+      let a = parseFloat(o.dragStartValue);
       a = qe(a) ? 0 : a;
-      let g = Ss[l.dragUnit];
+      let g = Rs[o.dragUnit];
       (G(h, "scale") || h === "opacity") && (g = 10);
-      let u = (l.dragStartY - i.pageY) / g + a;
-      c && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), d(`${u}`);
+      let u = (o.dragStartY - i.pageY) / g + a;
+      c && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), o.onDrag(`${u}`), d(`${u}`);
     },
-    [l],
+    [o],
     50
   ), p = V(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), n({
+    setTimeout(() => o.onDragEnd(`${t}`), 100), n({
       onDrag: (i) => i,
       onDragEnd: (i) => i,
       dragStartY: 0,
@@ -2183,31 +2189,31 @@ const _s = ({ onAdd: r }) => {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, n]);
+  }, [o, t, n]);
   return Ht(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(tt, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsxs(gt.Provider, { value: { setDragData: n }, children: [
-    l.dragging ? /* @__PURE__ */ e.jsx(
+  ] }) }) : /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsxs(gt.Provider, { value: { setDragData: n }, children: [
+    o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        onMouseMove: o,
+        onMouseMove: l,
         onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(Hr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
-      /* @__PURE__ */ e.jsxs(Dr, { className: "mx-1 grid grid-cols-3", children: [
+    /* @__PURE__ */ e.jsxs(or, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1 text-xs", children: [
+      /* @__PURE__ */ e.jsxs(lr, { className: "mx-1 grid grid-cols-3", children: [
         /* @__PURE__ */ e.jsx(he, { value: "settings", children: s("settings") }),
         /* @__PURE__ */ e.jsx(he, { value: "styling", children: s("styling") }),
         /* @__PURE__ */ e.jsx(he, { value: "attrs", children: s("Attributes") })
       ] }),
-      /* @__PURE__ */ e.jsx(ye, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Be, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(rs, {}) }) }),
-      /* @__PURE__ */ e.jsx(ye, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ns, {}) }),
+      /* @__PURE__ */ e.jsx(ye, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(De, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(ss, {}) }) }),
+      /* @__PURE__ */ e.jsx(ye, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(_s, {}) }),
       /* @__PURE__ */ e.jsx(ye, { value: "attrs", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Ts, {}) })
     ] })
   ] }) });
 };
 export {
-  _l as default
+  $o as default
 };