@chaibuilder/sdk 1.0.23 → 1.1.0

package/dist/{Settings-lxTrbI-C.js → Settings-xkL3U3Y-.js}

@@ -1,22 +1,22 @@
 import { j as e } from "./jsx-runtime-NV737rRe.js";
 import * as ne from "react";
-import P, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Oe, useContext as re } from "react";
-import { useThrottledCallback as me } from "@react-hookz/web";
-import { forEach as je, isArray as ae, omit as ct, truncate as pt, includes as M, get as p, first as we, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as ye, filter as be, set as Me, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Re, startsWith as z, isNumber as ft, parseInt as vt, isNaN as Ee, findLast as jt, flatten as U, intersection as _e, has as ge, isNull as wt } from "lodash";
-import { useTranslation as Fe } from "react-i18next";
-import { PlusIcon as Ce, Cross2Icon as Ye, EyeOpenIcon as Ct, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as R, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as St, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as Pt, LetterCaseUppercaseIcon as $t, Cross1Icon as It, InfoCircledIcon as ke, MinusIcon as Lt, BoxIcon as We, RowSpacingIcon as Ot, TriangleDownIcon as Mt, TrashIcon as Xe, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b1 as Et, b2 as _t, B as pe, b3 as Ft, b4 as Yt, b5 as Wt, b6 as Xt, b7 as Zt, b8 as zt, b9 as Ut, a6 as G, aq as Gt, ar as Kt, as as qt, ba as Jt, ao as Qt, bb as er, ap as tr, aH as W, aI as X, aK as Z, ak as rr, bc as lr, bd as sr, be as or, bf as nr, bg as ar, bh as ir, p as ze, ac as Ue, bi as Ge, bj as ie, bk as de, bl as ce, aj as Ne, P as Ke, a3 as qe, j as Je, aM as Te, bm as dr, bn as cr, a4 as ue, W as pr, a9 as Qe, R as He, ag as ur, ad as xr, bo as gr, au as hr, av as mr, aw as yr, ax as br, ay as H, bp as fr, aB as vr, aC as jr, aD as Be, aE as Ae } from "./index-Vx4ctSV6.js";
-import wr from "@rjsf/core";
-import Cr from "@rjsf/validator-ajv8";
-import { u as kr } from "./controls-G0puEH71.js";
-import { Check as Nr, EditIcon as Tr, TrashIcon as Sr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Rr } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-WPlT_Q87.js";
-import { useAtom as Vr } from "jotai";
-import Hr from "react-autosuggest";
-import Br from "fuse.js";
-import { A as Ar, C as xe, d as Dr } from "./utils-PPBbw5bk.js";
-import { a as Pr } from "./MODIFIERS-MLfpKQY1.js";
+import I, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Me, useContext as re } from "react";
+import { useThrottledCallback as ye } from "@react-hookz/web";
+import { forEach as we, isArray as ae, omit as ct, truncate as pt, includes as M, get as p, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as be, filter as fe, set as Ee, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Se, startsWith as z, isNumber as ft, parseInt as vt, isNaN as _e, findLast as jt, flatten as U, intersection as Fe, has as he, isNull as wt } from "lodash";
+import { useTranslation as Ye } from "react-i18next";
+import { PlusIcon as Ce, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as Ve, BorderAllIcon as O, WidthIcon as S, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as Rt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as ke, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Mt, CrossCircledIcon as Et, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b3 as Ft, b4 as Yt, B as ue, b5 as Wt, b6 as Xt, b7 as Zt, b8 as zt, b9 as Ut, ba as Gt, bb as Kt, a6 as G, aq as qt, ar as Jt, as as Qt, bc as er, ao as tr, bd as rr, ap as lr, aH as W, aI as X, aK as Z, ak as sr, be as or, bf as nr, bg as ar, bh as ir, bi as dr, bj as cr, p as ze, ac as Ue, bk as Ge, bl as ie, bm as de, bn as ce, aj as Ne, P as Ke, a3 as qe, j as Je, aM as Te, bo as pr, bp as ur, a4 as xe, W as xr, a9 as Qe, R as He, ag as gr, ad as hr, bq as mr, au as yr, av as br, aw as fr, ax as vr, ay as H, br as jr, aB as wr, aC as Cr, aD as Be, aE as Ae } from "./index-ORFlyrBx.js";
+import kr from "@rjsf/core";
+import Nr from "@rjsf/validator-ajv8";
+import { u as Tr } from "./controls-G0puEH71.js";
+import { Check as Rr, EditIcon as Sr, TrashIcon as Vr } from "lucide-react";
+import { getBlockComponent as et, getChaiDataProviders as Hr } from "@chaibuilder/runtime";
+import { E as tt, u as rt } from "./index-N3mTbV2j.js";
+import { useAtom as Br } from "jotai";
+import Ar from "react-autosuggest";
+import Dr from "fuse.js";
+import { A as Ir, C as ge, d as Pr } from "./utils-PPBbw5bk.js";
+import { a as $r } from "./MODIFIERS-MLfpKQY1.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -62,25 +62,25 @@ import "./tailwind-config-d1VL1lzE.js";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "sonner";
-const $r = P.lazy(() => import("react-json-view"));
-function Ir(t) {
+const Lr = I.lazy(() => import("react-json-view"));
+function Or(t) {
   const l = [], r = {};
   function s(n, a) {
-    je(a, (d, i) => {
+    we(a, (d, i) => {
       const o = n ? `${n}.${i}` : i, u = ae(d) ? "list" : typeof d;
       l.push(o), r[o] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ae(d) && s(o, d);
     });
   }
   return s("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
 }
-const fe = ({ data: t, fullView: l }) => {
+const ve = ({ data: t, fullView: l }) => {
   if (!t)
     return null;
   const r = typeof t;
   return l ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
-      $r,
+      Lr,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -104,17 +104,17 @@ const fe = ({ data: t, fullView: l }) => {
   dataType: a,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: o } = Ir(s), u = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (g) => !M(d, g) && p(u, `props.${we(ut(g, "."))}.binding`)
+  const { paths: i, pathsType: o } = Or(s), u = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, x = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (g) => !M(d, g) && p(u, `props.${pe(ut(g, "."))}.binding`)
   ) : i.filter((g) => a === p(o, g, "")), [t, i, d, a, u]);
   return _(() => {
     l && n(l);
   }, [l, t]), /* @__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(te(t)) }),
-      /* @__PURE__ */ e.jsxs(Et, { open: c, onOpenChange: m, children: [
-        /* @__PURE__ */ e.jsx(_t, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          pe,
+      /* @__PURE__ */ e.jsxs(Ft, { open: c, onOpenChange: m, children: [
+        /* @__PURE__ */ e.jsx(Yt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          ue,
           {
             variant: "outline",
             size: "sm",
@@ -131,12 +131,12 @@ const fe = ({ data: t, fullView: l }) => {
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Ft, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Yt, { children: [
-          /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${te(t)}...` }),
-          /* @__PURE__ */ e.jsxs(Xt, { children: [
-            /* @__PURE__ */ e.jsx(Zt, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(zt, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
-              Ut,
+        /* @__PURE__ */ e.jsx(Wt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Xt, { children: [
+          /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${te(t)}...` }),
+          /* @__PURE__ */ e.jsxs(zt, { children: [
+            /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(Gt, { children: C(h, (g) => /* @__PURE__ */ e.jsxs(
+              Kt,
               {
                 value: g,
                 className: `cursor-pointer ${x ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
@@ -145,10 +145,10 @@ const fe = ({ data: t, fullView: l }) => {
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Nr, { className: `w-4 h-4 text-green-500 ${l === g ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Rr, { className: `w-4 h-4 text-green-500 ${l === g ? "" : "opacity-0"}` }),
                     g
                   ] }),
-                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(fe, { data: p(s, g) }) })
+                  x ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(p(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(ve, { data: p(s, g) }) })
                 ]
               },
               g
@@ -157,9 +157,9 @@ const fe = ({ data: t, fullView: l }) => {
         ] }) })
       ] })
     ] }),
-    !x && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(fe, { data: p(s, l, ""), fullView: !0 }) })
+    !x && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(ve, { data: p(s, l, ""), fullView: !0 }) })
   ] });
-}, Lr = ({
+}, Mr = ({
   appliedBindings: t = [],
   onAddBinding: l,
   editMode: r,
@@ -180,9 +180,9 @@ const fe = ({ data: t, fullView: l }) => {
     [o, u]
   ), [c, m] = w(r ? x(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(Gt, { children: [
-      /* @__PURE__ */ e.jsx(Kt, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(qt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(qt, { children: [
+      /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(Qt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
       /* @__PURE__ */ e.jsx(
@@ -221,8 +221,8 @@ const fe = ({ data: t, fullView: l }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(Jt, { children: /* @__PURE__ */ e.jsx(
-      pe,
+    /* @__PURE__ */ e.jsx(er, { children: /* @__PURE__ */ e.jsx(
+      ue,
       {
         type: "submit",
         className: "mt-4",
@@ -234,10 +234,10 @@ const fe = ({ data: t, fullView: l }) => {
   ] });
 }, lt = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: n = !0, item: a = {} }) => {
   const [d, i] = w(!1);
-  return /* @__PURE__ */ e.jsxs(Qt, { children: [
-    /* @__PURE__ */ e.jsx(er, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
-    d && /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
-      Lr,
+  return /* @__PURE__ */ e.jsxs(tr, { children: [
+    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
+    d && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
+      Mr,
       {
         item: a,
         editMode: n,
@@ -248,7 +248,7 @@ const fe = ({ data: t, fullView: l }) => {
       }
     ) })
   ] });
-}, Or = ({
+}, Er = ({
   item: t,
   onAddBinding: l,
   onRemove: r,
@@ -270,11 +270,11 @@ const fe = ({ data: t, fullView: l }) => {
   return _(() => i(() => o(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
-    /* @__PURE__ */ e.jsx(fe, { data: p(n, t.value, "") }),
+    /* @__PURE__ */ e.jsx(ve, { data: p(n, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Tr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Sr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
-        Sr,
+        Vr,
         {
           onClick: () => r(),
           className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
@@ -283,8 +283,8 @@ const fe = ({ data: t, fullView: l }) => {
     ] }),
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
-}, Mr = ({ bindingData: t, onChange: l }) => {
-  const r = G(), [s] = rt(), n = Rr(), [a, d] = w(
+}, _r = ({ bindingData: t, onChange: l }) => {
+  const r = G(), [s] = rt(), n = Hr(), [a, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
@@ -295,13 +295,13 @@ const fe = ({ data: t, fullView: l }) => {
       return !0;
     if (b(a))
       return !1;
-    const c = ye(a);
+    const c = be(a);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
   }, [s, a]), o = (c) => {
-    const m = be(a, (h) => h.key !== c.key);
+    const m = fe(a, (h) => h.key !== c.key);
     d([...m, c]), x([...m, c]);
   }, u = (c) => {
-    const m = be(a, (h, g) => c !== g);
+    const m = fe(a, (h, g) => c !== g);
     x([...m]);
   }, x = A(
     (c = []) => {
@@ -310,8 +310,8 @@ const fe = ({ data: t, fullView: l }) => {
         return;
       }
       const m = {};
-      je(c, (h) => {
-        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Me(m, h.key, h.value);
+      we(c, (h) => {
+        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Ee(m, h.key, h.value);
       }), l(m);
     },
     [l]
@@ -322,7 +322,7 @@ const fe = ({ data: t, fullView: l }) => {
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
     C(a, (c, m) => /* @__PURE__ */ e.jsx(
-      Or,
+      Er,
       {
         item: c,
         onAddBinding: o,
@@ -352,38 +352,38 @@ const fe = ({ data: t, fullView: l }) => {
       i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, Er = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), Pe = dt(
+}, Fr = () => /* @__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" }), Ie = dt(
   ({
     createHistorySnapshot: t,
     properties: l,
     formData: r,
     onChange: s
   }) => {
-    const [n] = rr(), a = { type: "object", properties: {} }, d = {};
+    const [n] = sr(), a = { type: "object", properties: {} }, d = {};
     return Object.keys(l).forEach((i) => {
       const o = l[i];
       if (M(["slot", "styles"], o.type))
         return;
       const u = p(o, "i18n", !1) ? `${i}-${n}` : i;
-      a.properties[u] = lr(o, n), d[u] = sr(o, n);
+      a.properties[u] = or(o, n), d[u] = nr(o, n);
     }), /* @__PURE__ */ e.jsx(
-      wr,
+      kr,
       {
         widgets: {
-          binding: Er,
-          richtext: or,
-          icon: nr,
-          image: ar
+          binding: Fr,
+          richtext: ar,
+          icon: ir,
+          image: dr
         },
         fields: {
-          link: ir
+          link: cr
         },
         idSeparator: ".",
         autoComplete: "off",
         omitExtraData: !1,
         liveOmit: !1,
         liveValidate: !0,
-        validator: Cr,
+        validator: Nr,
         uiSchema: d,
         onBlur: t,
         schema: a,
@@ -393,14 +393,14 @@ const fe = ({ data: t, fullView: l }) => {
     );
   }
 );
-function _r() {
+function Yr() {
   const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), n = { ...t }, a = () => l(), d = ({ formData: x }, c) => {
     if (c) {
       const m = c.replace("root.", "");
       r([t._id], { [m]: p(x, m) });
     }
   }, i = {
-    _name: kr({
+    _name: Tr({
       title: "Name",
       default: p(t, "_name", t._type)
     })
@@ -412,7 +412,7 @@ function _r() {
   }, [s, o]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
-      Pe,
+      Ie,
       {
         onChange: d,
         createHistorySnapshot: a,
@@ -433,7 +433,7 @@ function _r() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Mr,
+          _r,
           {
             bindingData: p(n, "_bindings", {}),
             onChange: (x) => {
@@ -456,7 +456,7 @@ function _r() {
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ e.jsx(
-            Pe,
+            Ie,
             {
               onChange: d,
               createHistorySnapshot: a,
@@ -470,28 +470,28 @@ function _r() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const $e = new Br(Ar, {
+const Pe = new Dr(Ir, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Fr() {
+function Wr() {
   var D;
-  const [t] = Ne(), l = G(), r = Ke(), s = qe(), [n] = Je(), [a, d] = w(""), i = (D = we(t)) == null ? void 0 : D.prop, o = bt((p(l, i, "").replace(Pr, "").split(",").pop() || "").split(" "), b), u = () => {
+  const [t] = Ne(), l = G(), r = Ke(), s = qe(), [n] = Je(), [a, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, o = bt((p(l, i, "").replace($r, "").split(",").pop() || "").split(" "), b), u = () => {
     const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     r(n, j, !0), d("");
   }, [x, c] = w([]), m = ({ value: j }) => {
-    const L = j.trim().toLowerCase(), $ = L.match(/.+:/g);
+    const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
     let k = [];
-    if ($ && $.length > 0) {
-      const [I] = $, F = L.replace(I, "");
-      k = $e.search(F).map((y) => ({
+    if (P && P.length > 0) {
+      const [$] = P, F = L.replace($, "");
+      k = Pe.search(F).map((y) => ({
         ...y,
-        item: { ...y.item, name: I + y.item.name }
+        item: { ...y.item, name: $ + y.item.name }
       }));
     } else
-      k = $e.search(L);
+      k = Pe.search(L);
     c(C(k, "item"));
   }, h = () => {
     c([]);
@@ -516,7 +516,7 @@ function Fr() {
         /* @__PURE__ */ e.jsx(Te, { 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(
-            Hr,
+            Ar,
             {
               suggestions: x,
               onSuggestionsFetchRequested: m,
@@ -535,7 +535,7 @@ function Fr() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            pe,
+            ue,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
@@ -556,7 +556,7 @@ function Fr() {
                 children: [
                   j,
                   /* @__PURE__ */ e.jsx(
-                    Ye,
+                    We,
                     {
                       onClick: () => s(n, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
@@ -572,7 +572,7 @@ function Fr() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   heading: "Flex Child",
   items: [
     { type: "arbitrary", label: "Basis", units: B, property: "flexBasis" },
@@ -581,7 +581,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, Wr = {
+}, Zr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -592,70 +592,12 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, Xr = [
-  {
-    heading: "Display",
-    items: [
-      { type: "dropdown", label: "Display", property: "display", units: B },
-      {
-        styleType: "accordion",
-        heading: "Flex options",
-        items: [
-          { type: "dropdown", label: "Direction", property: "flexDirection" },
-          { type: "dropdown", label: "Wrap", property: "flexWrap" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" }
-            ]
-          }
-        ],
-        conditions: { display: "flex" }
-      },
-      {
-        styleType: "accordion",
-        heading: "Grid options",
-        items: [
-          { type: "range", label: "Columns", property: "gridColumns" },
-          { type: "range", label: "Rows", property: "gridRows" },
-          { type: "dropdown", label: "Auto Flow", property: "gridAutoFlow" },
-          { type: "dropdown", label: "Auto Cols", property: "gridAutoColumns" },
-          { type: "dropdown", label: "Auto Rows", property: "gridAutoRows" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            units: ["px", "rem"],
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" }
-            ]
-          }
-        ],
-        conditions: { display: "grid" }
-      },
-      {
-        styleType: "accordion",
-        heading: "Visibility & Opacity",
-        items: [
-          { type: "dropdown", label: "Visibility", property: "visibility", units: B },
-          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
-        ]
-      }
-    ]
-  },
+}, zr = [
   {
-    heading: "Spacing",
+    heading: "Layout",
     items: [
+      { type: "arbitrary", label: "Width", units: B.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "Height", units: B.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "Margin",
@@ -686,7 +628,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       },
       {
         styleType: "multiple",
-        label: "Space Between",
+        label: "Space Bt.",
         options: [
           { key: "spaceX", label: "Left-Right" },
           { key: "spaceY", label: "Top-Bottom" }
@@ -697,8 +639,6 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   {
     heading: "Size",
     items: [
-      { type: "arbitrary", label: "Width", units: B.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "Height", units: B.concat("auto"), property: "height" },
       {
         styleType: "accordion",
         heading: "Min width & height",
@@ -726,6 +666,66 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       }
     ]
   },
+  {
+    heading: "Display",
+    items: [
+      { type: "dropdown", label: "Display", property: "display", units: B },
+      {
+        styleType: "accordion",
+        heading: "Flex options",
+        items: [
+          { type: "dropdown", label: "Direction", property: "flexDirection" },
+          { type: "dropdown", label: "Wrap", property: "flexWrap" },
+          { type: "dropdown", label: "Justify", property: "justifyContent" },
+          { type: "dropdown", label: "Content", property: "alignContent" },
+          { type: "dropdown", label: "Items", property: "alignItems" },
+          {
+            styleType: "multiple",
+            label: "Gap",
+            options: [
+              { key: "gap", label: "All" },
+              { key: "gapX", label: "Left-Right" },
+              { key: "gapY", label: "Top-Bottom" }
+            ]
+          }
+        ],
+        conditions: { display: "flex" }
+      },
+      {
+        styleType: "accordion",
+        heading: "Grid options",
+        items: [
+          { type: "range", label: "Columns", property: "gridColumns" },
+          { type: "range", label: "Rows", property: "gridRows" },
+          { type: "dropdown", label: "Auto Flow", property: "gridAutoFlow" },
+          { type: "dropdown", label: "Auto Cols", property: "gridAutoColumns" },
+          { type: "dropdown", label: "Auto Rows", property: "gridAutoRows" },
+          { type: "dropdown", label: "Justify", property: "justifyContent" },
+          { type: "dropdown", label: "Content", property: "alignContent" },
+          { type: "dropdown", label: "Items", property: "alignItems" },
+          {
+            styleType: "multiple",
+            label: "Gap",
+            units: ["px", "rem"],
+            options: [
+              { key: "gap", label: "All" },
+              { key: "gapX", label: "Left-Right" },
+              { key: "gapY", label: "Top-Bottom" }
+            ]
+          }
+        ],
+        conditions: { display: "grid" }
+      },
+      {
+        styleType: "accordion",
+        heading: "Visibility & Opacity",
+        items: [
+          { type: "dropdown", label: "Visibility", property: "visibility", units: B },
+          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
+        ]
+      }
+    ]
+  },
   {
     heading: "Position",
     items: [
@@ -994,7 +994,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   },
   {
     heading: "Classes",
-    items: [{ component: Fr }]
+    items: [{ component: Wr }]
   }
 ], st = {
   "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" }) }),
@@ -1004,32 +1004,32 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   // display
   hidden: Ve,
   gap: O,
-  gapX: R,
+  gapX: S,
   gapY: V,
-  spaceX: R,
+  spaceX: S,
   spaceY: V,
   overscroll: O,
-  overscrollX: R,
+  overscrollX: S,
   overscrollY: V,
   overflow: O,
-  overflowX: R,
+  overflowX: S,
   overflowY: V,
   top: q,
   right: J,
   bottom: Q,
   left: ee,
   inset: O,
-  insetX: R,
+  insetX: S,
   insetY: V,
   border: O,
-  borderX: R,
+  borderX: S,
   borderY: V,
   borderTop: q,
   borderRight: J,
   borderBottom: Q,
   borderLeft: ee,
   borderRadius: O,
-  borderRadiusX: R,
+  borderRadiusX: S,
   borderRadiusY: V,
   borderRadiusTop: q,
   borderRadiusRight: J,
@@ -1038,19 +1038,19 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   borderRadiusTopLeft: kt,
   borderRadiusTopRight: Nt,
   borderRadiusBottomRight: Tt,
-  borderRadiusBottomLeft: St,
-  divideXWidth: R,
+  borderRadiusBottomLeft: Rt,
+  divideXWidth: S,
   divideYWidth: V,
   scale: O,
-  scaleX: R,
+  scaleX: S,
   scaleY: V,
-  skewX: R,
+  skewX: S,
   skewY: V,
-  translateX: R,
+  translateX: S,
   translateY: V,
   // padding
   padding: O,
-  paddingX: R,
+  paddingX: S,
   paddingY: V,
   paddingTop: q,
   paddingRight: J,
@@ -1058,14 +1058,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   paddingLeft: ee,
   // margin
   margin: O,
-  marginX: R,
+  marginX: S,
   marginY: V,
   marginTop: q,
   marginRight: J,
   marginBottom: Q,
   marginLeft: ee,
   // text-align
-  textLeft: Rt,
+  textLeft: St,
   textCenter: Vt,
   textRight: Ht,
   textJustify: Bt,
@@ -1074,9 +1074,9 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
   // "not-italic": "",
   // decoration
   underline: Dt,
-  overline: Pt,
+  overline: It,
   // transform
-  uppercase: $t,
+  uppercase: Pt,
   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",
@@ -1117,7 +1117,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       }
     )
   ] }),
-  "float-none": Ye,
+  "float-none": We,
   // 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(
@@ -1189,20 +1189,20 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
       }
     )
   ] }),
-  static: It
-}, le = Oe({ canReset: !1, canChange: !0 }), Zr = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
+  static: $t
+}, le = Me({ canReset: !1, canChange: !0 }), Ur = ({ children: t, canReset: l = !1, canChange: r = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: l, canChange: r }, children: t })
 ), ot = ({ label: t, property: l, onChange: r }) => {
-  const s = N(() => p(xe, `${l}.classes`, [""]), [l]), n = se(l), a = N(() => p(n, "cls", ""), [n]), { canChange: d } = re(le), i = /\[.*\]/g.test(a);
+  const s = N(() => p(ge, `${l}.classes`, [""]), [l]), n = se(l), a = N(() => p(n, "cls", ""), [n]), { canChange: d } = re(le), i = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(dr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
     /* @__PURE__ */ e.jsxs(W, { 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(ke, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
-    ve,
+    je,
     {
       rounded: t,
       onChange: (o) => r(o, l),
@@ -1212,7 +1212,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
     }
   ) });
 };
-function ve({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: n = !1 }) {
+function je({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: n = !1 }) {
   const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
@@ -1226,15 +1226,15 @@ function ve({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: n
       value: a,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
+        I.Children.toArray(
           s.map((o) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: o, children: o }))
         )
       ]
     }
   );
 }
-const zr = ({ property: t, onChange: l }) => {
-  const { canReset: r, canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]), d = N(() => p(xe, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, o = /\[.*\]/g.test(a);
+const Gr = ({ property: t, onChange: l }) => {
+  const { canReset: r, canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]), d = N(() => p(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, o = /\[.*\]/g.test(a);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1242,8 +1242,13 @@ const zr = ({ property: t, onChange: l }) => {
         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 && (!r || i - 1 < 0),
-        onClick: () => l(Re(d, i - 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(Lt, { className: !s && (!r || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+        onClick: () => l(Se(d, i - 1), t),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
+          Lt,
+          {
+            className: !s && (!r || i - 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: t, onChange: l }) }),
@@ -1253,18 +1258,18 @@ const zr = ({ property: t, onChange: l }) => {
         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 && (!r || i + 1 >= d.length),
-        onClick: () => l(Re(d, i + 1), t),
+        onClick: () => l(Se(d, i + 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Ce,
           {
-            className: !s && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+            className: !s && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, Ur = ({ property: t, onChange: l }) => {
-  const r = N(() => p(xe, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]);
+}, Kr = ({ property: t, onChange: l }) => {
+  const r = N(() => p(ge, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), n = se(t), a = N(() => p(n, "cls", ""), [n]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1273,12 +1278,12 @@ const zr = ({ property: t, onChange: l }) => {
         disabled: !s,
         onClick: () => l(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(p(st, d, We))
+        children: I.createElement(p(st, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
   ] })) });
-}, Gr = {
+}, qr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1290,7 +1295,7 @@ const zr = ({ property: t, onChange: l }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Kr = ({ property: t, onChange: l }) => {
+}, Jr = ({ property: t, onChange: l }) => {
   const r = se(t), s = N(() => p(r, "cls", ""), [r]), { canChange: n } = re(le), [a, d] = w([]), [i, o] = w({ color: "", shade: "" }), u = s.split("-"), x = p(u, "1", ""), c = p(u, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
     (g) => {
@@ -1313,11 +1318,11 @@ const zr = ({ property: t, onChange: l }) => {
   return _(() => {
     o({ color: "", shade: "" });
   }, [r]), _(() => {
-    const f = `${p(Gr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(p(xe, `${t}.regExp`, ""))) && l(f, t);
+    const f = `${p(qr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(p(ge, `${t}.regExp`, ""))) && l(f, t);
   }, [i, l, t]), /* @__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(
-      ve,
+      je,
       {
         disabled: !n,
         rounded: !0,
@@ -1355,9 +1360,9 @@ const zr = ({ property: t, onChange: l }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(ve, { rounded: !0, selected: c, disabled: !x || !n, onChange: h, options: a }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(je, { rounded: !0, selected: c, disabled: !x || !n, onChange: h, options: a }) })
   ] });
-}, Ie = (t, l) => {
+}, $e = (t, l) => {
   t = t.toLowerCase();
   let r = t.trim().replace(/ |\+/g, "");
   if ((r === "auto" || r === "none") && l.includes(r))
@@ -1367,7 +1372,7 @@ const zr = ({ property: t, onChange: l }) => {
   const n = t.match(s), a = n && n.length > 1, d = !b(r) && Number.isNaN(Number(r));
   return a || d ? { error: "Invalid value" } : n && (n[0] === "auto" || n[0] === "none") ? { value: n[0], unit: "" } : { value: r, unit: n ? n[0] : "" };
 };
-const qr = (t) => {
+const Qr = (t) => {
   const l = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
   if (["auto", "none"].includes(r))
     return { value: "", unit: r };
@@ -1496,18 +1501,18 @@ const qr = (t) => {
   }
   return ft(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 };
-const Jr = (t) => {
+const el = (t) => {
   if (b(t))
     return { value: "", unit: "" };
   const l = t.match(/\[.*\]/g);
   if (l === null)
-    return Qr(t);
-  const r = p(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", n = we(r.match(/\d+.\d+|\d+/g));
+    return tl(t);
+  const r = p(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", n = pe(r.match(/\d+.\d+|\d+/g));
   return { value: `${s}${n}`, unit: r.replace(n, "") };
-}, Qr = (t) => b(t) ? { value: "", unit: "" } : qr(t), nt = P.createContext({
+}, tl = (t) => b(t) ? { value: "", unit: "" } : Qr(t), nt = I.createContext({
   setDragData: () => {
   }
-}), el = ({
+}), rl = ({
   unit: t,
   currentValue: l,
   onDrag: r,
@@ -1539,8 +1544,8 @@ const Jr = (t) => {
       children: /* @__PURE__ */ e.jsx(Ot, {})
     }
   );
-}, tl = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
-  pe,
+}, ll = ({ onSelect: t, current: l, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((s) => /* @__PURE__ */ e.jsx(
+  ue,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
     color: l === s ? "primary" : void 0,
@@ -1551,49 +1556,37 @@ const Jr = (t) => {
     children: s
   },
   s
-)) }), rl = (t) => {
-  const [l, r] = w(!1), [s, n] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: o, units: u, negative: x } = t, [c, m] = w(o != null && o.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, $] = w(!1);
+)) }), Le = 50, sl = (t) => {
+  const [l, r] = w(!1), [s, n] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: o, units: u, negative: x } = t, [c, m] = w(o != null && o.toLowerCase().includes("width") ? "%" : u[0]), [h, g] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
   _(() => {
-    const { value: y, unit: v } = Jr(a);
+    const { value: y, unit: v } = el(a);
     if (v === "") {
-      n(y), m(o != null && o.toLowerCase().includes("width") ? "%" : u[0]);
+      n(y), m(o != null && o.toLowerCase().includes("width") ? "%" : pe(u));
       return;
     }
     m(v), n(v === "class" || b(y) ? "" : y);
   }, [a, o, u]);
-  const k = me(
-    (y) => {
-      d(y);
-    },
-    [d],
-    200
-  ), I = me(
-    (y) => {
-      d(y, !1);
-    },
-    [d],
-    200
-  ), F = A(
+  const k = ye((y) => d(y), [d], Le), $ = ye((y) => d(y, !1), [d], Le), F = A(
     (y = !1) => {
-      const v = Ie(`${s}`, u);
+      const v = $e(`${s}`, u);
       if (p(v, "error", !1)) {
         g(!0);
         return;
       }
-      const S = p(v, "unit") !== "" ? p(v, "unit") : c;
-      if (S === "auto" || S === "none") {
-        k(`${i}${S}`);
+      const R = p(v, "unit") !== "" ? p(v, "unit") : c;
+      if (R === "auto" || R === "none") {
+        k(`${i}${R}`);
         return;
       }
       if (p(v, "value") === "")
         return;
-      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      y ? I(K) : k(K);
+      const K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      y ? $(K) : k(K);
     },
-    [k, I, s, c, i, u]
+    [k, $, s, c, i, u]
   ), oe = A(
     (y) => {
-      const v = Ie(`${s}`, u);
+      const v = $e(`${s}`, u);
       if (p(v, "error", !1)) {
         g(!0);
         return;
@@ -1604,7 +1597,7 @@ const Jr = (t) => {
       }
       if (p(v, "value") === "")
         return;
-      const S = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      const R = p(v, "unit") !== "" ? p(v, "unit") : y, K = `${p(v, "value", "").startsWith("-") ? "-" : ""}${i}[${p(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
       k(K);
     },
     [k, s, i, u]
@@ -1627,15 +1620,15 @@ const Jr = (t) => {
           onKeyDown: (y) => {
             if (y.keyCode !== 38 && y.keyCode !== 40)
               return;
-            y.preventDefault(), $(!0);
+            y.preventDefault(), P(!0);
             const v = vt(y.target.value);
-            let S = Ee(v) ? 0 : v;
-            y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
-            const E = `${S}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
-            I(it);
+            let R = _e(v) ? 0 : v;
+            y.keyCode === 38 && (R += 1), y.keyCode === 40 && (R -= 1);
+            const E = `${R}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
+            $(it);
           },
           onKeyUp: (y) => {
-            L && (y.preventDefault(), $(!1));
+            L && (y.preventDefault(), P(!1));
           },
           onBlur: () => F(),
           onChange: (y) => {
@@ -1665,8 +1658,8 @@ const Jr = (t) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(cr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          tl,
+        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ll,
           {
             units: u,
             current: c,
@@ -1678,7 +1671,7 @@ const Jr = (t) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      el,
+      rl,
       {
         onDragStart: () => j(!0),
         onDragEnd: (y) => {
@@ -1692,7 +1685,7 @@ const Jr = (t) => {
             return;
           T(y);
           const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          I(E);
+          $(E);
         },
         currentValue: s,
         unit: c,
@@ -1702,9 +1695,9 @@ const Jr = (t) => {
     )
   ] }) }) });
 }, se = (t) => {
-  const l = ue();
+  const l = xe();
   return jt(l, { property: t });
-}, ll = (t, l) => {
+}, ol = (t, l) => {
   const r = {
     xs: 0,
     sm: 1,
@@ -1714,7 +1707,7 @@ const Jr = (t) => {
     "2xl": 5
   };
   return r[p(t, "mq", "xs")] <= r[l];
-}, sl = {
+}, nl = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1780,26 +1773,26 @@ const Jr = (t) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Le = {
+}, Oe = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, ol = (t) => `${t.toUpperCase()} ${Le[t] ? `(${Le[t]} & up)` : ""}`, Se = (t) => {
+}, al = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
   const { type: l = "icons", label: r, property: s, onEmitChange: n = () => {
-  }, units: a, negative: d = !1 } = t, [i] = pr(), [o] = Qe(), [, u] = He(), x = se(s), c = Ke(), m = qe(), [h] = Je(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
-    (k, I = !0) => {
+  }, units: a, negative: d = !1 } = t, [i] = xr(), [o] = Qe(), [, u] = He(), x = se(s), c = Ke(), m = qe(), [h] = Je(), g = N(() => p(x, "fullCls", ""), [x]), f = A(
+    (k, $ = !0) => {
       const F = { dark: i, mq: u, mod: o, cls: k, property: s, fullCls: "" };
       (i || o !== "") && (F.mq = "xs");
-      const oe = Dr(F);
-      c(h, [oe], I);
+      const oe = Pr(F);
+      c(h, [oe], $);
     },
     [h, i, u, o, s, c]
   ), T = A(() => {
     m(h, [g]);
-  }, [h, g, m]), D = N(() => ll(x, u), [x, u]);
+  }, [h, g, m]), D = N(() => ol(x, u), [x, u]);
   _(() => {
     n(D, x);
   }, [D, n, x]);
@@ -1815,28 +1808,28 @@ const Jr = (t) => {
       }[k]);
     },
     [j]
-  ), $ = p(x, "dark", null) === i && p(x, "mod", null) === o && p(x, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(Zr, { canChange: D, canReset: x && $, 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] ${x && !$ ? "text-foreground" : ""}`, children: r }) }),
+  ), P = p(x, "dark", null) === i && p(x, "mod", null) === o && p(x, "mq", null) === u;
+  return /* @__PURE__ */ e.jsx(Ur, { canChange: D, canReset: x && P, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${x && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         l === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          rl,
+          sl,
           {
             currentClass: p(x, "cls", ""),
-            classPrefix: p(sl, s, ""),
+            classPrefix: p(nl, s, ""),
             units: a || [],
             onChange: f,
             negative: d,
             cssProperty: s
           }
         ) : null,
-        l === "icons" && /* @__PURE__ */ e.jsx(Ur, { property: s, onChange: f }),
-        l === "range" && /* @__PURE__ */ e.jsx(zr, { property: s, onChange: f }),
-        l === "color" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: f }),
+        l === "icons" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: f }),
+        l === "range" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: f }),
+        l === "color" && /* @__PURE__ */ e.jsx(Jr, { property: s, onChange: f }),
         l === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: s, onChange: f })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: $ ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Xe, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: P ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Et, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && x ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1848,7 +1841,7 @@ const Jr = (t) => {
         /* @__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: [
-            ol(p(x, "mq")),
+            al(p(x, "mq")),
             i && !x.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1868,16 +1861,16 @@ const Jr = (t) => {
       ] }) : null })
     ] })
   ] }) });
-}, nl = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
+}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
   label: t,
   options: l,
   borderB: r = !1,
   borderT: s = !1,
   type: n = "arbitrary",
-  units: a = nl,
+  units: a = il,
   negative: d = !1
 }) => {
-  const [i, o] = w(l[0].key), u = ue(), x = A((c) => C(u, "property").includes(c), [u]);
+  const [i, o] = w(l[0].key), u = xe(), x = A((c) => C(u, "property").includes(c), [u]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1885,7 +1878,7 @@ const Jr = (t) => {
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
             l.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
               /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
@@ -1894,10 +1887,10 @@ const Jr = (t) => {
                   onClick: () => o(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    P.createElement("div", {
+                    I.createElement("div", {
                       className: x(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    P.createElement(p(st, m, We), { className: "text-inherit w-3 h-3" })
+                    I.createElement(p(st, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1906,7 +1899,7 @@ const Jr = (t) => {
           ) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Se,
+          Re,
           {
             type: n,
             units: [...a],
@@ -1918,14 +1911,14 @@ const Jr = (t) => {
       ]
     }
   );
-}, al = ({ heading: t, items: l }) => {
-  const r = ue(), s = N(() => {
+}, dl = ({ heading: t, items: l }) => {
+  const r = xe(), s = N(() => {
     const n = (i) => U(
       i.map((o) => o.styleType === "multiple" ? C(o.options, "key") : o.property)
     ), a = U(
       l.map((i) => i.styleType === "accordion" ? n(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
-    return _e(a, d).length > 0;
+    return Fe(a, d).length > 0;
   }, [r, l]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
@@ -1937,17 +1930,17 @@ const Jr = (t) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Se, { ...n }, n.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label)) })
   ] });
-}, il = Oe({}), he = ({ section: t }) => {
-  const l = ue(), r = A(
+}, cl = Me({}), me = ({ section: t }) => {
+  const l = xe(), r = A(
     (a = []) => {
       const d = {};
       for (let o = 0; o < l.length; o++)
         d[l[o].property] = l[o].cls;
       let i = !0;
       for (const o in a)
-        if (!ge(d, o) || d[o] !== a[o]) {
+        if (!he(d, o) || d[o] !== a[o]) {
           i = !1;
           break;
         }
@@ -1962,18 +1955,18 @@ const Jr = (t) => {
     ), d = U(
       t.items.map((o) => o.styleType === "accordion" ? a(o.items) : o.styleType === "multiple" ? U(C(o.options, "key")) : o.property)
     ), i = C(l, "property");
-    return _e(d, i).length > 0;
+    return Fe(d, i).length > 0;
   }, [l, t.heading, t.items]), n = N(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(il.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+  return /* @__PURE__ */ e.jsx(cl.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
     /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}` }),
       t.heading
     ] }) }),
-    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      t.items.map((a) => ge(a, "component") ? P.createElement(a.component, { key: a.label }) : ge(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(al, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Se, { ...a }, a.label))
+    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
+      t.items.map((a) => he(a, "component") ? I.createElement(a.component, { key: a.label }) : he(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
     ) })
   ] }) });
-}, dl = ({
+}, pl = ({
   item: t,
   index: l,
   canDelete: r,
@@ -2006,22 +1999,22 @@ const Jr = (t) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      Xe,
+      _t,
       {
         onClick: n,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), cl = ({ section: t }) => {
+] }), ul = ({ section: t }) => {
   var m;
-  const { setSyncState: l } = ur(), r = G(), [s, n] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
+  const { setSyncState: l } = gr(), r = G(), [s, n] = w([]), [a] = Ne(), d = Ue(), i = `${p(a, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(p(r, i), (g, f) => ({ key: f, value: g }));
     b(h) ? n([]) : n(h);
   }, [p(r, i)]);
   const o = () => n([...s, { key: "", value: "" }]), u = (h) => {
-    const g = be(s, (f, T) => h !== T);
+    const g = fe(s, (f, T) => h !== T);
     c(g);
   }, x = (h, g) => {
     const f = [...s];
@@ -2029,8 +2022,8 @@ const Jr = (t) => {
   }, c = ne.useCallback(
     (h = []) => {
       const g = {};
-      je(h, (f) => {
-        b(f.key) || Me(g, f.key, f.value);
+      we(h, (f) => {
+        b(f.key) || Ee(g, f.key, f.value);
       }), d([p(r, "_id")], { [i]: g }), l("UNSAVED");
     },
     [r, l, d, i]
@@ -2051,10 +2044,10 @@ const Jr = (t) => {
         /* @__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 ${!b(s) && b((m = ye(s)) == null ? void 0 : m.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 ${!b(s) && b((m = be(s)) == null ? void 0 : m.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 h;
-              !b(s) && b((h = ye(s)) == null ? void 0 : h.key) || o();
+              !b(s) && b((h = be(s)) == null ? void 0 : h.key) || o();
             },
             children: [
               /* @__PURE__ */ e.jsx(Ce, { width: 12, height: 12 }),
@@ -2069,7 +2062,7 @@ const Jr = (t) => {
           C(s, (h, g) => {
             const f = s.length > 0 && g < s.length - 1;
             return /* @__PURE__ */ e.jsx(
-              dl,
+              pl,
               {
                 item: h,
                 index: g,
@@ -2084,8 +2077,8 @@ const Jr = (t) => {
     ] }) })
   ] });
 };
-function pl() {
-  const [t, l] = Qe(), { flexChild: r, gridChild: s } = xr(), [, n] = Vr(gr), { t: a } = Fe(), [d] = Ne();
+function xl() {
+  const [t, l] = Qe(), { flexChild: r, gridChild: s } = hr(), [, n] = Br(mr), { t: a } = Ye(), [d] = Ne();
   return b(d) ? /* @__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: a("no_styling_block_selected") }),
@@ -2100,9 +2093,9 @@ function pl() {
     /* @__PURE__ */ e.jsxs("div", { onClick: () => n(!1), className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b border-border px-4 py-2", 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(hr, { defaultValue: t, onValueChange: (i) => l(i), children: [
-          /* @__PURE__ */ e.jsx(mr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(yr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(br, { children: [
+        /* @__PURE__ */ e.jsxs(yr, { defaultValue: t, onValueChange: (i) => l(i), children: [
+          /* @__PURE__ */ e.jsx(br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(vr, { children: [
             /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
             /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
             /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
@@ -2118,19 +2111,19 @@ function pl() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(fr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
-        /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", className: "h-full w-full", children: [
-          r && /* @__PURE__ */ e.jsx(he, { section: Yr }),
-          s ? /* @__PURE__ */ e.jsx(he, { section: Wr }) : null,
-          Xr.map((i) => /* @__PURE__ */ e.jsx(he, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(cl, { section: { heading: "Attributes" } })
+      /* @__PURE__ */ e.jsxs(jr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+        /* @__PURE__ */ e.jsxs(Ge, { defaultValue: ["Layout"], type: "multiple", className: "h-full w-full", children: [
+          r && /* @__PURE__ */ e.jsx(me, { section: Xr }),
+          s ? /* @__PURE__ */ e.jsx(me, { section: Zr }) : null,
+          zr.map((i) => /* @__PURE__ */ e.jsx(me, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const ul = {
+const gl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2141,8 +2134,8 @@ const ul = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, ws = () => {
-  const t = G(), { t: l } = Fe(), [r, s] = P.useState(""), [n, a] = P.useState({
+}, ks = () => {
+  const t = G(), { t: l } = Ye(), [r, s] = I.useState(""), [n, a] = I.useState({
     onDrag: (o) => o,
     onDragEnd: (o) => o,
     dragStartY: 0,
@@ -2151,12 +2144,12 @@ const ul = {
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), d = me(
+  }), d = ye(
     (o) => {
       const u = !p(n, "negative", !1), x = p(n, "cssProperty", "");
       let c = parseFloat(n.dragStartValue);
-      c = Ee(c) ? 0 : c;
-      let m = ul[n.dragUnit];
+      c = _e(c) ? 0 : c;
+      let m = gl[n.dragUnit];
       (z(x, "scale") || x === "opacity") && (m = 10);
       let g = (n.dragStartY - o.pageY) / m + c;
       u && g < 0 && (g = 0), x === "opacity" && g > 1 && (g = 1), n.onDrag(`${g}`), s(`${g}`);
@@ -2187,8 +2180,8 @@ const ul = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(vr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(jr, { className: "mx-1 grid grid-cols-2", children: [
+    /* @__PURE__ */ e.jsxs(wr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(Cr, { className: "mx-1 grid grid-cols-2", children: [
         /* @__PURE__ */ e.jsx(Be, { value: "settings", children: "Settings" }),
         /* @__PURE__ */ e.jsx(Be, { value: "styling", children: "Styling" })
       ] }),
@@ -2197,13 +2190,13 @@ const ul = {
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(_r, {})
+          children: /* @__PURE__ */ e.jsx(Yr, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(Ae, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(pl, {}) })
+      /* @__PURE__ */ e.jsx(Ae, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })
     ] })
   ] }) });
 };
 export {
-  ws as default
+  ks as default
 };