@chaibuilder/sdk 1.1.2 → 1.1.4

package/dist/{Settings-4v3M1bRS.js → Settings-zzs6KaRd.js}

@@ -1,22 +1,22 @@
 import { j as e } from "./jsx-runtime-NV737rRe.js";
 import * as ne from "react";
-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 I, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as dt, createContext as Ee, useContext as re } from "react";
 import { useThrottledCallback as be } from "@react-hookz/web";
-import { forEach as Ce, isArray as ae, omit as ct, truncate as pt, includes as M, get as u, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as fe, filter as ve, set as Ee, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Ve, 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 { forEach as Ce, isArray as ae, omit as ct, truncate as pt, includes as E, get as u, first as pe, split as ut, startCase as Y, toLower as te, isEmpty as b, map as C, find as xt, last as fe, filter as ve, set as Me, keys as gt, cloneDeep as ht, each as mt, capitalize as yt, reject as bt, nth as Ve, 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 ke, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as He, 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 It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as Ne, 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 sr, aH as W, aI as X, aK as Z, ak as lr, be as or, bf as nr, bg as ar, bh as ir, bi as dr, bj as cr, p as ze, ac as Ue, i as pr, bk as Ge, bl as ie, bm as de, bn as ce, aj as Te, P as Ke, a3 as qe, j as Je, aM as Se, bo as ur, bp as xr, a4 as xe, W as gr, a9 as Qe, R as Be, ag as hr, ad as mr, bq as yr, au as br, av as fr, aw as vr, ax as jr, ay as H, br as wr, aB as Cr, aC as kr, aD as Ae, aE as De } from "./index-ORFlyrBx.js";
-import Nr from "@rjsf/core";
-import Tr from "@rjsf/validator-ajv8";
-import { u as Sr } from "./controls-G0puEH71.js";
-import { Check as Rr, EditIcon as Vr, TrashIcon as Hr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Br } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-HjvZqhVh.js";
-import { useAtom as Ar } from "jotai";
-import Dr from "react-autosuggest";
-import Ir from "fuse.js";
-import { A as Pr, C as ge, d as $r } from "./utils-PPBbw5bk.js";
-import { a as Lr } from "./MODIFIERS-MLfpKQY1.js";
+import { PlusIcon as ke, Cross2Icon as We, EyeOpenIcon as Ct, EyeClosedIcon as He, 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 It, LetterCaseUppercaseIcon as Pt, Cross1Icon as $t, InfoCircledIcon as Ne, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Et, CrossCircledIcon as Mt, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b0 as Ft, b1 as Yt, B as ue, b2 as Wt, b3 as Xt, b4 as Zt, b5 as zt, b6 as Ut, b7 as Gt, b8 as Kt, a6 as G, am as qt, an as Jt, ao as Qt, b9 as er, ak as tr, ba as rr, al as lr, aD as W, aE as X, aG as Z, bb as sr, bc as or, bd as nr, be as ar, bf as ir, bg as dr, p as ze, ac as Ue, i as cr, bh as Ge, bi as ie, bj as de, bk as ce, aj as Te, P as Ke, a3 as qe, j as Je, aI as Se, bl as pr, bm as ur, a4 as xe, W as xr, a9 as Qe, R as Be, ag as gr, ad as hr, bn as mr, aq as yr, ar as br, as as fr, at as vr, au as H, bo as jr, ax as wr, ay as Cr, az as Ae, aA as De } from "./index-pJPfM9Bm.js";
+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-K_TiChPs.js";
+import Vr from "@rjsf/core";
+import Hr from "@rjsf/validator-ajv8";
+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 Or = I.lazy(() => import("react-json-view"));
-function Mr(t) {
-  const s = [], r = {};
-  function l(o, n) {
+const Lr = I.lazy(() => import("react-json-view"));
+function Or(t) {
+  const l = [], r = {};
+  function s(o, n) {
     Ce(n, (d, i) => {
       const a = o ? `${o}.${i}` : i, p = ae(d) ? "list" : typeof d;
-      s.push(a), r[a] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && l(a, d);
+      l.push(a), r[a] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && s(a, d);
     });
   }
-  return l("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
+  return s("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: r };
 }
-const je = ({ data: t, fullView: s }) => {
+const je = ({ data: t, fullView: l }) => {
   if (!t)
     return null;
   const r = typeof t;
-  return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  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(
-      Or,
+      Lr,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -97,19 +97,19 @@ const je = ({ data: t, fullView: s }) => {
   ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: pt(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
 }, Ie = ({
   type: t,
-  value: s = "",
+  value: l = "",
   setValue: r,
-  data: l,
+  data: s,
   onChange: o,
   dataType: n,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: a } = Mr(l), p = t === "PROP" ? et(l == null ? void 0 : l._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (x) => !M(d, x) && u(p, `props.${pe(ut(x, "."))}.binding`)
+  const { paths: i, pathsType: a } = Or(s), p = t === "PROP" ? et(s == null ? void 0 : s._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+    (x) => !E(d, x) && u(p, `props.${pe(ut(x, "."))}.binding`)
   ) : i.filter((x) => n === u(a, x, "")), [t, i, d, n, p]);
   return _(() => {
-    s && o(s);
-  }, [s, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    l && o(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(Ft, { open: c, onOpenChange: m, children: [
@@ -118,11 +118,11 @@ const je = ({ data: t, fullView: s }) => {
           {
             variant: "outline",
             size: "sm",
-            className: ` ${b(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
-            children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            className: ` ${b(l) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
+            children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
                 g && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(n) }),
-                s
+                l
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
@@ -145,10 +145,10 @@ const je = ({ data: t, fullView: s }) => {
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Rr, { className: `w-4 h-4 text-green-500 ${s === x ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Nr, { className: `w-4 h-4 text-green-500 ${l === x ? "" : "opacity-0"}` }),
                     x
                   ] }),
-                  g ? /* @__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(u(a, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: u(l, x) }) })
+                  g ? /* @__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(u(a, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: u(s, x) }) })
                 ]
               },
               x
@@ -157,15 +157,15 @@ const je = ({ data: t, fullView: s }) => {
         ] }) })
       ] })
     ] }),
-    !g && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: u(l, s, ""), fullView: !0 }) })
+    !g && !b(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: u(s, l, ""), fullView: !0 }) })
   ] });
 }, Er = ({
   appliedBindings: t = [],
-  onAddBinding: s,
+  onAddBinding: l,
   editMode: r,
-  item: l
+  item: s
 }) => {
-  const [o, n] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), a = G(), [p] = rt(), g = A(
+  const [o, n] = w(r ? s.key : ""), [d, i] = w(r ? s.value : ""), a = G(), [p] = rt(), g = A(
     (h, x) => {
       if (b(h))
         return "";
@@ -178,7 +178,7 @@ const je = ({ data: t, fullView: s }) => {
       }
     },
     [a, p]
-  ), [c, m] = w(r ? g(l.key, "PROP") : "");
+  ), [c, m] = w(r ? g(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(qt, { children: [
       /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
@@ -227,32 +227,32 @@ const je = ({ data: t, fullView: s }) => {
         type: "submit",
         className: "mt-4",
         disabled: b(o) && b(d),
-        onClick: () => s({ key: o, value: d }),
+        onClick: () => l({ key: o, value: d }),
         children: "Save"
       }
     ) })
   ] });
-}, st = ({ disabled: t, children: s, onAddBinding: r, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
+}, lt = ({ disabled: t, children: l, onAddBinding: r, appliedBindings: s, editMode: o = !0, item: n = {} }) => {
   const [d, i] = w(!1);
   return /* @__PURE__ */ e.jsxs(tr, { children: [
-    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: s }),
-    d && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: l }),
+    d && /* @__PURE__ */ e.jsx(lr, { children: /* @__PURE__ */ e.jsx(
       Er,
       {
         item: n,
         editMode: o,
-        appliedBindings: l,
+        appliedBindings: s,
         onAddBinding: (a) => {
           r(a), i(!1);
         }
       }
     ) })
   ] });
-}, _r = ({
+}, Mr = ({
   item: t,
-  onAddBinding: s,
+  onAddBinding: l,
   onRemove: r,
-  selectedBlock: l,
+  selectedBlock: s,
   dataProvider: o,
   appliedBindings: n
 }) => {
@@ -260,7 +260,7 @@ const je = ({ data: t, fullView: s }) => {
     if (b(p))
       return "";
     {
-      const c = u(g === "PROP" ? l : o, p, "");
+      const c = u(g === "PROP" ? s : o, p, "");
       if (ae(c))
         return "list";
       const m = typeof c;
@@ -272,9 +272,9 @@ const je = ({ data: t, fullView: s }) => {
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
     /* @__PURE__ */ e.jsx(je, { data: u(o, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: n, item: t, children: /* @__PURE__ */ e.jsx(Vr, { 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: n, 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(
-        Hr,
+        Sr,
         {
           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,21 +283,21 @@ const je = ({ data: t, fullView: s }) => {
     ] }),
     !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) })
   ] });
-}, Fr = ({ bindingData: t, onChange: s }) => {
-  const r = G(), [l] = rt(), o = Br(), [n, d] = w(
+}, _r = ({ bindingData: t, onChange: l }) => {
+  const r = G(), [s] = rt(), o = Rr(), [n, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
     d(C(t, (c, m) => ({ key: m, value: c })));
   }, [r == null ? void 0 : r._id]);
   const i = N(() => {
-    if (b(l))
+    if (b(s))
       return !0;
     if (b(n))
       return !1;
     const c = fe(n);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [l, n]), a = (c) => {
+  }, [s, n]), a = (c) => {
     const m = ve(n, (h) => h.key !== c.key);
     d([...m, c]), g([...m, c]);
   }, p = (c) => {
@@ -306,15 +306,15 @@ const je = ({ data: t, fullView: s }) => {
   }, g = A(
     (c = []) => {
       if (d(c), b(c)) {
-        s({});
+        l({});
         return;
       }
       const m = {};
       Ce(c, (h) => {
-        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Ee(m, h.key, h.value);
-      }), s(m);
+        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Me(m, h.key, h.value);
+      }), l(m);
     },
-    [s]
+    [l]
   );
   return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
@@ -322,20 +322,20 @@ const je = ({ data: t, fullView: s }) => {
     /* @__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(n, (c, m) => /* @__PURE__ */ e.jsx(
-      _r,
+      Mr,
       {
         item: c,
         onAddBinding: a,
         onRemove: () => p(m),
         selectedBlock: r,
-        dataProvider: l,
+        dataProvider: s,
         appliedBindings: C(n, "key")
       },
       c.key
     )),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 200, children: [
       /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
-        st,
+        lt,
         {
           disabled: i,
           appliedBindings: C(n, "key"),
@@ -344,70 +344,61 @@ const je = ({ data: t, fullView: s }) => {
             "span",
             {
               className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
+              children: b(s) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
       ) }),
-      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+      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" })
     ] })
   ] });
-}, Yr = () => /* @__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 = dt(
-  ({
-    createHistorySnapshot: t,
-    properties: s,
-    formData: r,
-    onChange: l
-  }) => {
-    const [o] = lr(), n = { type: "object", properties: {} }, d = {};
-    return Object.keys(s).forEach((i) => {
-      const a = s[i];
-      if (M(["slot", "styles"], a.type))
-        return;
-      const p = u(a, "i18n", !1) ? `${i}-${o}` : i;
-      n.properties[p] = or(a, o), d[p] = nr(a, o);
-    }), /* @__PURE__ */ e.jsx(
-      Nr,
-      {
-        widgets: {
-          binding: Yr,
-          richtext: ar,
-          icon: ir,
-          image: dr
-        },
-        fields: {
-          link: cr
-        },
-        idSeparator: ".",
-        autoComplete: "off",
-        omitExtraData: !1,
-        liveOmit: !1,
-        liveValidate: !0,
-        validator: Tr,
-        uiSchema: d,
-        onBlur: t,
-        schema: n,
-        formData: r,
-        onChange: l
-      }
-    );
-  }
-);
-function Wr() {
-  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = et(t._type), o = { ...t }, n = pr("dataBindingSupport", !1), d = () => s(), i = ({ formData: c }, m) => {
+}, 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" }), me = dt(({ createHistorySnapshot: t, properties: l, formData: r, onChange: s }) => {
+  const o = { type: "object", properties: {} }, n = {};
+  return Object.keys(l).forEach((d) => {
+    const i = l[d];
+    if (E(["slot", "styles"], i.type))
+      return;
+    const a = d;
+    o.properties[a] = sr(i), n[a] = or(i);
+  }), /* @__PURE__ */ e.jsx(
+    Vr,
+    {
+      widgets: {
+        binding: Fr,
+        richtext: nr,
+        icon: ar,
+        image: ir
+      },
+      fields: { link: dr },
+      idSeparator: ".",
+      autoComplete: "off",
+      omitExtraData: !1,
+      liveOmit: !1,
+      liveValidate: !0,
+      validator: Hr,
+      uiSchema: n,
+      onBlur: t,
+      schema: o,
+      formData: r,
+      onChange: s
+    }
+  );
+});
+function Yr() {
+  const t = G(), { createSnapshot: l } = ze(), r = Ue(), s = et(t._type), o = { ...t }, n = cr("dataBindingSupport", !1), d = () => l(), i = ({ formData: c }, m) => {
     if (m) {
       const h = m.replace("root.", "");
       r([t._id], { [h]: u(c, h) });
     }
   }, a = {
-    _name: Sr({
+    _name: kr({
       title: "Name",
       default: u(t, "_name", t._type)
     })
   }, p = gt(u(o, "_bindings", {})), g = N(() => {
-    const c = ht(u(l, "props", {}));
+    const c = ht(u(s, "props", {}));
     return n && mt(p, (m) => delete c[m]), c;
-  }, [l, p, n]);
+  }, [s, p, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
       me,
@@ -431,7 +422,7 @@ function Wr() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Fr,
+          _r,
           {
             bindingData: u(o, "_bindings", {}),
             onChange: (c) => {
@@ -476,15 +467,15 @@ function Wr() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Ir(Pr, {
+const Pe = new Dr(Ir, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Xr() {
+function Wr() {
   var D;
-  const [t] = Te(), s = G(), r = Ke(), l = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = bt((u(s, i, "").replace(Lr, "").split(",").pop() || "").split(" "), b), p = () => {
+  const [t] = Te(), l = G(), r = Ke(), s = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = bt((u(l, i, "").replace($r, "").split(",").pop() || "").split(" "), b), p = () => {
     const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     r(o, j, !0), d("");
   }, [g, c] = w([]), m = ({ value: j }) => {
@@ -522,7 +513,7 @@ function Xr() {
         /* @__PURE__ */ e.jsx(Se, { 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(
-            Dr,
+            Ar,
             {
               suggestions: g,
               onSuggestionsFetchRequested: m,
@@ -564,7 +555,7 @@ function Xr() {
                   /* @__PURE__ */ e.jsx(
                     We,
                     {
-                      onClick: () => l(o, [j]),
+                      onClick: () => s(o, [j]),
                       className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
                     }
                   )
@@ -578,7 +569,7 @@ function Xr() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   heading: "Flex Child",
   items: [
     { type: "arbitrary", label: "Basis", units: B, property: "flexBasis" },
@@ -587,7 +578,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
     { type: "dropdown", label: "Grow", property: "flexGrow" },
     { type: "dropdown", label: "Shrink", property: "flexShrink" }
   ]
-}, zr = {
+}, Zr = {
   heading: "Grid Child",
   items: [
     { type: "range", label: "Col Span", property: "gridColSpan" },
@@ -598,7 +589,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
     { type: "range", label: "Row End", property: "gridRowEnd" },
     { type: "range", label: "Order", property: "order" }
   ]
-}, Ur = [
+}, zr = [
   {
     heading: "Layout",
     items: [
@@ -1000,9 +991,9 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
   },
   {
     heading: "Classes",
-    items: [{ component: Xr }]
+    items: [{ component: Wr }]
   }
-], lt = {
+], 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" }) }),
   // visibility
   visible: Ct,
@@ -1196,13 +1187,13 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
     )
   ] }),
   static: $t
-}, se = Me({ canReset: !1, canChange: !0 }), Gr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
+}, le = Ee({ 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(se.Provider, { value: { canReset: s, canChange: r }, children: t })
-), ot = ({ label: t, property: s, onChange: r }) => {
-  const l = N(() => u(ge, `${s}.classes`, [""]), [s]), o = le(s), n = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(n);
+  /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: l, canChange: r }, children: t })
+), ot = ({ label: t, property: l, onChange: r }) => {
+  const s = N(() => u(ge, `${l}.classes`, [""]), [l]), o = se(l), n = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(le), i = /\[.*\]/g.test(n);
   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(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsx(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__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(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1211,21 +1202,21 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
     we,
     {
       rounded: t,
-      onChange: (a) => r(a, s),
+      onChange: (a) => r(a, l),
       selected: n,
-      options: l,
+      options: s,
       disabled: !d
     }
   ) });
 };
-function we({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
+function we({ selected: t, onChange: l, rounded: r = !1, options: s, disabled: o = !1 }) {
   const n = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
-      disabled: !l.length || o,
+      disabled: !s.length || o,
       className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (a) => s(a.target.value),
+      onChange: (a) => l(a.target.value),
       onKeyDown: (a) => {
         a.ctrlKey && (a.key === "z" && d(), a.key === "y" && i());
       },
@@ -1233,63 +1224,63 @@ function we({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         I.Children.toArray(
-          l.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
+          s.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
         )
       ]
     }
   );
 }
-const Kr = ({ property: t, onChange: s }) => {
-  const { canReset: r, canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]), d = N(() => u(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/g.test(n);
+const Gr = ({ property: t, onChange: l }) => {
+  const { canReset: r, canChange: s } = re(le), o = se(t), n = N(() => u(o, "cls", ""), [o]), d = N(() => u(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/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: a ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!r || i - 1 < 0),
-        onClick: () => s(Ve(d, i - 1), t),
+        disabled: !s && (!r || i - 1 < 0),
+        onClick: () => l(Ve(d, i - 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           Lt,
           {
-            className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            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: s }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ot, { label: !1, property: t, onChange: l }) }),
     /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!r || i + 1 >= d.length),
-        onClick: () => s(Ve(d, i + 1), t),
+        disabled: !s && (!r || i + 1 >= d.length),
+        onClick: () => l(Ve(d, i + 1), t),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
           ke,
           {
-            className: !l && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !s && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
     )
   ] }) });
-}, qr = ({ property: t, onChange: s }) => {
-  const r = N(() => u(ge, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]);
+}, Kr = ({ property: t, onChange: l }) => {
+  const r = N(() => u(ge, `${t}.classes`, [""]), [t]), { canChange: s } = re(le), o = se(t), n = N(() => u(o, "cls", ""), [o]);
   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",
       {
         type: "button",
-        disabled: !l,
-        onClick: () => s(d, t),
+        disabled: !s,
+        onClick: () => l(d, t),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: I.createElement(u(lt, d, Xe))
+        children: I.createElement(u(st, d, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(te(d)) })
   ] })) });
-}, Jr = {
+}, qr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1301,8 +1292,8 @@ const Kr = ({ property: t, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Qr = ({ property: t, onChange: s }) => {
-  const r = le(t), l = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(se), [n, d] = w([]), [i, a] = w({ color: "", shade: "" }), p = l.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
+}, Jr = ({ property: t, onChange: l }) => {
+  const r = se(t), s = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(le), [n, d] = w([]), [i, a] = w({ color: "", shade: "" }), p = s.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
     (x) => {
       ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), a({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), a((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
@@ -1324,9 +1315,9 @@ const Kr = ({ property: t, onChange: s }) => {
   return _(() => {
     a({ color: "", shade: "" });
   }, [r]), _(() => {
-    const f = `${u(Jr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(u(ge, `${t}.regExp`, ""))) && s(f, t);
-  }, [i, s, t]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    const f = `${u(qr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(u(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(
       we,
       {
@@ -1368,18 +1359,18 @@ const Kr = ({ property: t, onChange: s }) => {
     ) }),
     /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(we, { rounded: !0, selected: c, disabled: !g || !o, onChange: h, options: n }) })
   ] });
-}, $e = (t, s) => {
+}, $e = (t, l) => {
   t = t.toLowerCase();
   let r = t.trim().replace(/ |\+/g, "");
-  if ((r === "auto" || r === "none") && s.includes(r))
+  if ((r === "auto" || r === "none") && l.includes(r))
     return { value: "", unit: r };
-  const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
-  r = r.replace(l, "");
-  const o = t.match(l), n = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  const s = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
+  r = r.replace(s, "");
+  const o = t.match(s), n = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
   return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
 };
-const es = (t) => {
-  const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
+const Qr = (t) => {
+  const l = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
   if (["auto", "none"].includes(r))
     return { value: "", unit: r };
   if (r === "px")
@@ -1388,22 +1379,22 @@ const es = (t) => {
     return { value: "100", unit: t.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (r === "full")
     return { value: "100", unit: "%" };
-  if (M(t, "skew-"))
-    return { value: `${s}${r}`, unit: "deg" };
-  if (M(t, "rotate-"))
-    return { value: `${s}${r}`, unit: "deg" };
-  if (M(t, "opacity-"))
+  if (E(t, "skew-"))
+    return { value: `${l}${r}`, unit: "deg" };
+  if (E(t, "rotate-"))
+    return { value: `${l}${r}`, unit: "deg" };
+  if (E(t, "opacity-"))
     return { value: `${r / 100}`, unit: "-" };
-  if (M(t, "duration-") || M(t, "delay-"))
+  if (E(t, "duration-") || E(t, "delay-"))
     return { value: `${r}`, unit: "ms" };
-  if (M(t, "translate-") && !r.includes("/"))
-    return { value: `${s}${`${r / 4}`}`, unit: "rem" };
-  if (M(t, "scale-"))
-    return { value: `${s}${`${r / 100}`}`, unit: "-" };
+  if (E(t, "translate-") && !r.includes("/"))
+    return { value: `${l}${`${r / 4}`}`, unit: "rem" };
+  if (E(t, "scale-"))
+    return { value: `${l}${`${r / 100}`}`, unit: "-" };
   if (z(t, "border")) {
-    const l = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (l)
-      return { value: l[0].split("-").pop(), unit: "px" };
+    const s = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (s)
+      return { value: s[0].split("-").pop(), unit: "px" };
     if (t.match(/border-?(x|y|t|r|b|l)?/g))
       return { value: "1", unit: "px" };
   }
@@ -1502,27 +1493,27 @@ const es = (t) => {
   if (["max", "min", "fit"].includes(r))
     return { value: t, unit: "class" };
   if (r.includes("/")) {
-    const [l, o] = C(r.split("/"), (n) => parseInt(n, 10));
-    return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
+    const [s, o] = C(r.split("/"), (n) => parseInt(n, 10));
+    return { value: l + (s / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return ft(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
+  return ft(parseFloat(r)) ? { value: `${l + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 };
-const ts = (t) => {
+const el = (t) => {
   if (b(t))
     return { value: "", unit: "" };
-  const s = t.match(/\[.*\]/g);
-  if (s === null)
-    return rs(t);
-  const r = u(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = pe(r.match(/\d+.\d+|\d+/g));
-  return { value: `${l}${o}`, unit: r.replace(o, "") };
-}, rs = (t) => b(t) ? { value: "", unit: "" } : es(t), nt = I.createContext({
+  const l = t.match(/\[.*\]/g);
+  if (l === null)
+    return tl(t);
+  const r = u(l, "0", "").replace(/\[|\]/g, ""), s = t.startsWith("-") ? "-" : "", o = pe(r.match(/\d+.\d+|\d+/g));
+  return { value: `${s}${o}`, unit: r.replace(o, "") };
+}, tl = (t) => b(t) ? { value: "", unit: "" } : Qr(t), nt = I.createContext({
   setDragData: () => {
   }
-}), ss = ({
+}), rl = ({
   unit: t,
-  currentValue: s,
+  currentValue: l,
   onDrag: r,
-  onDragEnd: l,
+  onDragEnd: s,
   onDragStart: o,
   negative: n,
   cssProperty: d
@@ -1535,10 +1526,10 @@ const ts = (t) => {
       onMouseDown: (a) => {
         const p = {
           onDrag: r,
-          onDragEnd: l,
+          onDragEnd: s,
           dragging: !0,
           dragStartY: a.pageY,
-          dragStartValue: `${s}`,
+          dragStartValue: `${l}`,
           dragUnit: t,
           negative: n,
           cssProperty: d
@@ -1550,22 +1541,22 @@ const ts = (t) => {
       children: /* @__PURE__ */ e.jsx(Ot, {})
     }
   );
-}, ls = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((l) => /* @__PURE__ */ e.jsx(
+}, 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: s === l ? "primary" : void 0,
+    color: l === s ? "primary" : void 0,
     size: "sm",
     onClick: (o) => {
-      o.stopPropagation(), t(l);
+      o.stopPropagation(), t(s);
     },
-    children: l
+    children: s
   },
-  l
-)) }), Le = 50, os = (t) => {
-  const [s, r] = w(!1), [l, o] = w(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: p, negative: g } = t, [c, m] = w(a != null && a.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
+  s
+)) }), Le = 50, sl = (t) => {
+  const [l, r] = w(!1), [s, o] = w(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: p, negative: g } = t, [c, m] = w(a != null && a.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
   _(() => {
-    const { value: y, unit: v } = ts(n);
+    const { value: y, unit: v } = el(n);
     if (v === "") {
       o(y), m(a != null && a.toLowerCase().includes("width") ? "%" : pe(p));
       return;
@@ -1574,7 +1565,7 @@ const ts = (t) => {
   }, [n, a, p]);
   const k = be((y) => d(y), [d], Le), $ = be((y) => d(y, !1), [d], Le), F = A(
     (y = !1) => {
-      const v = $e(`${l}`, p);
+      const v = $e(`${s}`, p);
       if (u(v, "error", !1)) {
         x(!0);
         return;
@@ -1589,10 +1580,10 @@ const ts = (t) => {
       const K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       y ? $(K) : k(K);
     },
-    [k, $, l, c, i, p]
+    [k, $, s, c, i, p]
   ), oe = A(
     (y) => {
-      const v = $e(`${l}`, p);
+      const v = $e(`${s}`, p);
       if (u(v, "error", !1)) {
         x(!0);
         return;
@@ -1606,7 +1597,7 @@ const ts = (t) => {
       const S = u(v, "unit") !== "" ? u(v, "unit") : y, K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       k(K);
     },
-    [k, l, i, p]
+    [k, s, i, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
@@ -1630,7 +1621,7 @@ const ts = (t) => {
             const v = vt(y.target.value);
             let S = _e(v) ? 0 : v;
             y.keyCode === 38 && (S += 1), y.keyCode === 40 && (S -= 1);
-            const E = `${S}`, it = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
+            const M = `${S}`, it = `${M.startsWith("-") ? "-" : ""}${i}[${M.replace("-", "")}${c === "-" ? "" : c}]`;
             $(it);
           },
           onKeyUp: (y) => {
@@ -1644,28 +1635,28 @@ const ts = (t) => {
             var v;
             (v = y == null ? void 0 : y.target) == null || v.select(), r(!1);
           },
-          value: D ? f : l,
+          value: D ? f : s,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
-      /* @__PURE__ */ e.jsxs(W, { open: s, delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsxs(W, { open: l, delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => r(!s),
+            onClick: () => r(!l),
             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 ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Et, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(xr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ls,
+        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ll,
           {
             units: p,
             current: c,
@@ -1677,33 +1668,33 @@ const ts = (t) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      ss,
+      rl,
       {
         onDragStart: () => j(!0),
         onDragEnd: (y) => {
           if (T(() => ""), j(!1), b(y))
             return;
-          const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          k(E);
+          const v = `${y}`, M = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
+          k(M);
         },
         onDrag: (y) => {
           if (b(y))
             return;
           T(y);
-          const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          $(E);
+          const v = `${y}`, M = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
+          $(M);
         },
-        currentValue: l,
+        currentValue: s,
         unit: c,
         negative: g,
         cssProperty: a
       }
     )
   ] }) }) });
-}, le = (t) => {
-  const s = xe();
-  return jt(s, { property: t });
-}, ns = (t, s) => {
+}, se = (t) => {
+  const l = xe();
+  return jt(l, { property: t });
+}, ol = (t, l) => {
   const r = {
     xs: 0,
     sm: 1,
@@ -1712,8 +1703,8 @@ const ts = (t) => {
     xl: 4,
     "2xl": 5
   };
-  return r[u(t, "mq", "xs")] <= r[s];
-}, as = {
+  return r[u(t, "mq", "xs")] <= r[l];
+}, nl = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1786,19 +1777,19 @@ const ts = (t) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, is = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
-  const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
-  }, units: n, negative: d = !1 } = t, [i] = gr(), [a] = Qe(), [, p] = Be(), g = le(l), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
+}, al = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
+  const { type: l = "icons", label: r, property: s, onEmitChange: o = () => {
+  }, units: n, negative: d = !1 } = t, [i] = xr(), [a] = Qe(), [, p] = Be(), g = se(s), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
     (k, $ = !0) => {
-      const F = { dark: i, mq: p, mod: a, cls: k, property: l, fullCls: "" };
+      const F = { dark: i, mq: p, mod: a, cls: k, property: s, fullCls: "" };
       (i || a !== "") && (F.mq = "xs");
-      const oe = $r(F);
+      const oe = Pr(F);
       c(h, [oe], $);
     },
-    [h, i, p, a, l, c]
+    [h, i, p, a, s, c]
   ), T = A(() => {
     m(h, [x]);
-  }, [h, x, m]), D = N(() => ns(g, p), [g, p]);
+  }, [h, x, m]), D = N(() => ol(g, p), [g, p]);
   _(() => {
     o(D, g);
   }, [D, o, g]);
@@ -1815,27 +1806,27 @@ const ts = (t) => {
     },
     [j]
   ), P = u(g, "dark", null) === i && u(g, "mod", null) === a && u(g, "mq", null) === p;
-  return /* @__PURE__ */ e.jsx(Gr, { canChange: D, canReset: g && P, 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(Ur, { canChange: D, canReset: g && 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] ${g && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          os,
+        l === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          sl,
           {
             currentClass: u(g, "cls", ""),
-            classPrefix: u(as, l, ""),
+            classPrefix: u(nl, s, ""),
             units: n || [],
             onChange: f,
             negative: d,
-            cssProperty: l
+            cssProperty: s
           }
         ) : null,
-        s === "icons" && /* @__PURE__ */ e.jsx(qr, { property: l, onChange: f }),
-        s === "range" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: f }),
-        s === "color" && /* @__PURE__ */ e.jsx(Qr, { property: l, onChange: f }),
-        s === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: r, property: l, 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 ${x ? "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 && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "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(Mt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1847,7 +1838,7 @@ const ts = (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: [
-            is(u(g, "mq")),
+            al(u(g, "mq")),
             i && !g.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1867,25 +1858,25 @@ const ts = (t) => {
       ] }) : null })
     ] })
   ] }) });
-}, ds = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
+}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], at = ({
   label: t,
-  options: s,
+  options: l,
   borderB: r = !1,
-  borderT: l = !1,
+  borderT: s = !1,
   type: o = "arbitrary",
-  units: n = ds,
+  units: n = il,
   negative: d = !1
 }) => {
-  const [i, a] = w(s[0].key), p = xe(), g = A((c) => C(p, "property").includes(c), [p]);
+  const [i, a] = w(l[0].key), p = xe(), g = A((c) => C(p, "property").includes(c), [p]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${l ? "border-t" : ""}`,
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${s ? "border-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: I.Children.toArray(
-            s.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
+            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",
                 {
@@ -1896,7 +1887,7 @@ const ts = (t) => {
                     I.createElement("div", {
                       className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    I.createElement(u(lt, m, Xe), { className: "text-inherit w-3 h-3" })
+                    I.createElement(u(st, m, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1917,33 +1908,33 @@ const ts = (t) => {
       ]
     }
   );
-}, cs = ({ heading: t, items: s }) => {
-  const r = xe(), l = N(() => {
+}, dl = ({ heading: t, items: l }) => {
+  const r = xe(), s = N(() => {
     const o = (i) => U(
       i.map((a) => a.styleType === "multiple" ? C(a.options, "key") : a.property)
     ), n = U(
-      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+      l.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
     return Fe(n, d).length > 0;
-  }, [r, s]);
+  }, [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: [
       t,
-      l ? /* @__PURE__ */ e.jsx(
+      s ? /* @__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 ${s ? "bg-blue-500" : "bg-gray-300"}`
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Re, { ...o }, o.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Re, { ...o }, o.label)) })
   ] });
-}, ps = Me({}), ye = ({ section: t }) => {
-  const s = xe(), r = A(
+}, cl = Ee({}), ye = ({ section: t }) => {
+  const l = xe(), r = A(
     (n = []) => {
       const d = {};
-      for (let a = 0; a < s.length; a++)
-        d[s[a].property] = s[a].cls;
+      for (let a = 0; a < l.length; a++)
+        d[l[a].property] = l[a].cls;
       let i = !0;
       for (const a in n)
         if (!he(d, a) || d[a] !== n[a]) {
@@ -1952,38 +1943,38 @@ const ts = (t) => {
         }
       return i;
     },
-    [s]
-  ), l = N(() => {
-    if (s.length > 0 && t.heading === "Classes")
+    [l]
+  ), s = N(() => {
+    if (l.length > 0 && t.heading === "Classes")
       return !0;
     const n = (a) => U(
       a.map((p) => p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
     ), d = U(
       t.items.map((a) => a.styleType === "accordion" ? n(a.items) : a.styleType === "multiple" ? U(C(a.options, "key")) : a.property)
-    ), i = C(s, "property");
+    ), i = C(l, "property");
     return Fe(d, i).length > 0;
-  }, [s, t.heading, t.items]), o = N(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(ps.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
+  }, [l, t.heading, t.items]), o = N(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(cl.Provider, { value: o, 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 ${l ? "bg-blue-500" : "bg-gray-300"}` }),
+      /* @__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: I.Children.toArray(
-      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(cs, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
+      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
     ) })
   ] }) });
-}, us = ({
+}, pl = ({
   item: t,
-  index: s,
+  index: l,
   canDelete: r,
-  onChange: l,
+  onChange: s,
   onRemove: o
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
   /* @__PURE__ */ e.jsx(
     "input",
     {
       name: "key",
-      onChange: (n) => l(n, s),
+      onChange: (n) => s(n, l),
       value: t.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1996,7 +1987,7 @@ const ts = (t) => {
       "input",
       {
         name: "value",
-        onChange: (n) => b(t.key) ? {} : l(n, s),
+        onChange: (n) => b(t.key) ? {} : s(n, l),
         value: t.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -2012,27 +2003,27 @@ const ts = (t) => {
       }
     )
   ] })
-] }), xs = ({ section: t }) => {
+] }), ul = ({ section: t }) => {
   var m;
-  const { setSyncState: s } = hr(), r = G(), [l, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
+  const { setSyncState: l } = gr(), r = G(), [s, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(u(r, i), (x, f) => ({ key: f, value: x }));
     b(h) ? o([]) : o(h);
   }, [u(r, i)]);
-  const a = () => o([...l, { key: "", value: "" }]), p = (h) => {
-    const x = ve(l, (f, T) => h !== T);
+  const a = () => o([...s, { key: "", value: "" }]), p = (h) => {
+    const x = ve(s, (f, T) => h !== T);
     c(x);
   }, g = (h, x) => {
-    const f = [...l];
+    const f = [...s];
     f[x][h.target.name] = h.target.value, c(f);
   }, c = ne.useCallback(
     (h = []) => {
       const x = {};
       Ce(h, (f) => {
-        b(f.key) || Ee(x, f.key, f.value);
-      }), d([u(r, "_id")], { [i]: x }), s("UNSAVED");
+        b(f.key) || Me(x, f.key, f.value);
+      }), d([u(r, "_id")], { [i]: x }), l("UNSAVED");
     },
-    [r, s, d, i]
+    [r, l, d, i]
   );
   return /* @__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: [
@@ -2050,10 +2041,10 @@ const ts = (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(l) && b((m = fe(l)) == 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 = fe(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(l) && b((h = fe(l)) == null ? void 0 : h.key) || a();
+              !b(s) && b((h = fe(s)) == null ? void 0 : h.key) || a();
             },
             children: [
               /* @__PURE__ */ e.jsx(ke, { width: 12, height: 12 }),
@@ -2063,12 +2054,12 @@ const ts = (t) => {
         )
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        b(s) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         ne.Children.toArray(
-          C(l, (h, x) => {
-            const f = l.length > 0 && x < l.length - 1;
+          C(s, (h, x) => {
+            const f = s.length > 0 && x < s.length - 1;
             return /* @__PURE__ */ e.jsx(
-              us,
+              pl,
               {
                 item: h,
                 index: x,
@@ -2083,8 +2074,8 @@ const ts = (t) => {
     ] }) })
   ] });
 };
-function gs() {
-  const [t, s] = Qe(), { flexChild: r, gridChild: l } = mr(), [, o] = Ar(yr), { t: n } = Ye(), [d] = Te();
+function xl() {
+  const [t, l] = Qe(), { flexChild: r, gridChild: s } = hr(), [, o] = Br(mr), { t: n } = Ye(), [d] = Te();
   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: n("no_styling_block_selected") }),
@@ -2099,9 +2090,9 @@ function gs() {
     /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!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(Se, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(br, { defaultValue: t, onValueChange: (i) => s(i), children: [
-          /* @__PURE__ */ e.jsx(fr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(vr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(jr, { 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" }),
@@ -2117,19 +2108,19 @@ function gs() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsxs(wr, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+      /* @__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(ye, { section: Zr }),
-          l ? /* @__PURE__ */ e.jsx(ye, { section: zr }) : null,
-          Ur.map((i) => /* @__PURE__ */ e.jsx(ye, { section: i }, i.heading)),
-          /* @__PURE__ */ e.jsx(xs, { section: { heading: "Attributes" } })
+          r && /* @__PURE__ */ e.jsx(ye, { section: Xr }),
+          s ? /* @__PURE__ */ e.jsx(ye, { section: Zr }) : null,
+          zr.map((i) => /* @__PURE__ */ e.jsx(ye, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "h-60" })
       ] })
     ] })
   );
 }
-const hs = {
+const gl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2140,8 +2131,8 @@ const hs = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Nl = () => {
-  const t = G(), { t: s } = Ye(), [r, l] = I.useState(""), [o, n] = I.useState({
+}, ks = () => {
+  const t = G(), { t: l } = Ye(), [r, s] = I.useState(""), [o, n] = I.useState({
     onDrag: (a) => a,
     onDragEnd: (a) => a,
     dragStartY: 0,
@@ -2155,10 +2146,10 @@ const hs = {
       const p = !u(o, "negative", !1), g = u(o, "cssProperty", "");
       let c = parseFloat(o.dragStartValue);
       c = _e(c) ? 0 : c;
-      let m = hs[o.dragUnit];
+      let m = gl[o.dragUnit];
       (z(g, "scale") || g === "opacity") && (m = 10);
       let x = (o.dragStartY - a.pageY) / m + c;
-      p && x < 0 && (x = 0), g === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
+      p && x < 0 && (x = 0), g === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), s(`${x}`);
     },
     [o],
     50
@@ -2176,7 +2167,7 @@ const hs = {
   }, [o, r, n]);
   return wt(t) ? /* @__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: s("no_block_selected_for_styling") })
+    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
   ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: n }, children: [
     o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
@@ -2186,8 +2177,8 @@ const hs = {
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
       }
     ) : null,
-    /* @__PURE__ */ e.jsxs(Cr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(kr, { 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(Ae, { value: "settings", children: "Settings" }),
         /* @__PURE__ */ e.jsx(Ae, { value: "styling", children: "Styling" })
       ] }),
@@ -2196,13 +2187,13 @@ const hs = {
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(Wr, {})
+          children: /* @__PURE__ */ e.jsx(Yr, {})
         }
       ),
-      /* @__PURE__ */ e.jsx(De, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(gs, {}) })
+      /* @__PURE__ */ e.jsx(De, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })
     ] })
   ] }) });
 };
 export {
-  Nl as default
+  ks as default
 };