@chaibuilder/sdk 1.2.6 → 1.2.7

package/dist/{Settings-t0I7LKxe.js → Settings-Na0NVS-E.js}

@@ -1,22 +1,23 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
-import $, { useState as j, useMemo as _, useEffect as M, useCallback as B, memo as ct, createContext as Oe, useContext as se } from "react";
+import I, { useState as j, useMemo as _, useEffect as O, useCallback as B, memo as ct, createContext as Me, useContext as se } from "react";
 import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as ke, isArray as ie, omit as pt, truncate as ut, includes as P, get as x, first as ue, split as xt, startCase as Y, toLower as le, isEmpty as m, map as C, find as gt, last as ve, filter as we, set as Me, keys as ht, cloneDeep as yt, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as ze, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
+import { forEach as ke, isArray as ie, omit as pt, truncate as ut, includes as P, get as x, first as ue, split as xt, startCase as Y, toLower as le, isEmpty as m, map as C, find as gt, last as ve, filter as we, set as Oe, keys as ht, cloneDeep as yt, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as Xe, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
 import { useTranslation as K } from "react-i18next";
-import { PlusIcon as Ne, Cross2Icon as Fe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as At, Cross1Icon as Pt, InfoCircledIcon as _e, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Et, TriangleDownIcon as Ot, CrossCircledIcon as Mt, TrashIcon as zt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { a$ as Yt, b0 as Ft, B as xe, b1 as Xt, b2 as Zt, b3 as Wt, b4 as Ut, b5 as Kt, b6 as qt, b7 as Gt, a6 as q, am as Jt, an as Qt, ao as er, b8 as tr, ak as rr, b9 as lr, al as sr, aC as F, aD as X, aF as Z, ba as or, bb as ar, bc as nr, bd as ir, be as dr, bf as cr, p as We, ac as Ue, i as pr, bg as Ke, bh as de, bi as ce, bj as pe, aj as Se, P as qe, a3 as Ge, j as Je, aH as Te, bk as ur, bl as xr, a4 as ge, W as gr, a9 as Qe, R as Be, ag as hr, ad as yr, bm as br, aq as mr, ar as fr, as as vr, at as wr, au as V, bn as et, aw as jr, ax as Cr, ay as De, az as $e } from "./index-_OgCuSUz.js";
-import { u as kr } from "./controls-XPXGHKht.js";
+import { PlusIcon as Ne, Cross2Icon as Fe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as At, Cross1Icon as Pt, InfoCircledIcon as _e, MinusIcon as Et, BoxIcon as ze, RowSpacingIcon as Lt, TriangleDownIcon as Mt, CrossCircledIcon as Ot, TrashIcon as Xt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { a$ as Yt, b0 as Ft, B as xe, b1 as zt, b2 as Zt, b3 as Wt, b4 as Ut, b5 as Kt, b6 as qt, b7 as Gt, a7 as q, an as Jt, ao as Qt, ap as er, b8 as tr, al as rr, b9 as lr, am as sr, aD as F, aE as z, aG as Z, ba as or, bb as ar, bc as nr, bd as ir, be as dr, bf as cr, p as We, ad as Ue, i as pr, bg as Ke, bh as de, bi as ce, bj as pe, ak as Se, Q as qe, a4 as Ge, j as Je, aI as Te, bk as ur, bl as xr, a5 as ge, X as gr, aa as Qe, U as Be, ah as hr, ae as yr, bm as br, ar as mr, as as fr, at as vr, au as wr, av as V, bn as et, ax as jr, ay as Cr, az as De, aA as $e } from "./index-WKIG_VPl.js";
+import { u as kr } from "./controls-QGClapUl.js";
 import { Check as Nr, EditIcon as _r, TrashIcon as Sr } from "lucide-react";
 import { getBlockComponent as tt, getChaiDataProviders as Tr } from "@chaibuilder/runtime";
-import { E as rt, u as lt } from "./index-482XFRhB.js";
-import Rr from "@rjsf/core";
-import Vr from "@rjsf/validator-ajv8";
-import { useAtom as Hr } from "jotai";
-import Br from "react-autosuggest";
-import Dr from "fuse.js";
-import { A as $r, C as he, g as Ir } from "./utils-AvyFzbPC.js";
-import { a as Ar } from "./MODIFIERS-RiXS5Mn1.js";
+import { E as rt, u as lt } from "./index-7vwIQQ-T.js";
+import { J as Rr, a as Vr, d as Hr } from "./index-e0c8PmRQ.js";
+import Br from "@rjsf/core";
+import Dr from "@rjsf/validator-ajv8";
+import { useAtom as $r } from "jotai";
+import Ir from "react-autosuggest";
+import Ar from "fuse.js";
+import { A as Pr, C as he, e as Er } from "./utils-Jw11nj1S.js";
+import { a as Lr } from "./MODIFIERS-RiXS5Mn1.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
@@ -42,11 +43,10 @@ import "react-icons-picker";
 import "react-dom";
 import "react-quill";
 import "flat-to-nested";
-import "./Functions-7jnEwJyw.js";
-import "clsx";
-import "tailwind-merge";
 import "redux-undo";
+import "lodash";
 import "i18next";
+import "clsx";
 import "@floating-ui/react-dom";
 import "react-textarea-autosize";
 import "flagged";
@@ -54,12 +54,11 @@ import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "sonner";
-import "./html-to-json-yjzEN9OX.js";
+import "./html-to-json-lNLC8Y7D.js";
 import "himalaya";
-import "lodash";
 import "./web-blocks.js";
-const Pr = $.lazy(() => import("react-json-view"));
-function Lr(r) {
+import "tailwind-merge";
+function Mr(r) {
   const s = [], t = {};
   function o(l, d) {
     ke(d, (a, c) => {
@@ -76,21 +75,22 @@ const je = ({ data: r, fullView: s }) => {
   return s ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
-      Pr,
+      Rr,
       {
-        style: { maxHeight: "40vh", overflowY: "auto" },
-        name: "Content",
-        enableClipboard: !1,
-        displayObjectSize: !1,
-        displayDataTypes: !1,
-        src: r,
-        collapsed: !0
+        data: r,
+        shouldExpandNode: Vr,
+        style: {
+          ...Hr,
+          container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
+          stringValue: "text-orange-600",
+          label: "text-green-900 font-semibold pr-1 tracking-wider"
+        }
       }
     ) })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: "text-gray-800/50 text-[12px] leading-4 w-full max-h-36 overflow-x-hidden overflow-y-auto", children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: "max-h-36 w-full overflow-y-auto overflow-x-hidden text-[12px] leading-4 text-gray-800/50", children: [
     /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
     r
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: ut(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: ut(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
 }, Ie = ({
   type: r,
   value: s = "",
@@ -100,10 +100,10 @@ const je = ({ data: r, fullView: s }) => {
   dataType: d,
   appliedBindings: a
 }) => {
-  const { paths: c, pathsType: i } = Lr(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, y = r === "PROP", [n, h] = j(!1), g = _(() => r === "PROP" ? c.filter(
+  const { paths: c, pathsType: i } = Mr(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, y = r === "PROP", [n, h] = j(!1), g = _(() => r === "PROP" ? c.filter(
     (u) => !P(a, u) && x(p, `props.${ue(xt(u, "."))}.binding`)
   ) : c.filter((u) => d === x(i, u, "")), [r, c, a, d, p]);
-  return M(() => {
+  return O(() => {
     s && l(s);
   }, [s, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
@@ -114,20 +114,20 @@ const je = ({ data: r, fullView: s }) => {
           {
             variant: "outline",
             size: "sm",
-            className: ` ${m(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"}`,
+            className: ` ${m(s) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
             children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
-                y && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(d) }),
+              /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
+                y && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(d) }),
                 s
               ] }),
-              /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
+              /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
               Y(le(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Xt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Zt, { children: [
+        /* @__PURE__ */ e.jsx(zt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Zt, { children: [
           /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${le(r)}...` }),
           /* @__PURE__ */ e.jsxs(Ut, { children: [
             /* @__PURE__ */ e.jsx(Kt, { children: "No results found." }),
@@ -135,16 +135,16 @@ const je = ({ data: r, fullView: s }) => {
               Gt,
               {
                 value: u,
-                className: `cursor-pointer ${y ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
+                className: `cursor-pointer ${y ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
                   t(gt(g, (k) => k === f) || null), h(!1);
                 },
                 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 ${s === u ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Nr, { className: `h-4 w-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
                     u
                   ] }),
-                  y ? /* @__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(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: x(o, u) }) })
+                  y ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: x(o, u) }) })
                 ]
               },
               u
@@ -155,7 +155,7 @@ const je = ({ data: r, fullView: s }) => {
     ] }),
     !y && !m(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: x(o, s, ""), fullView: !0 }) })
   ] });
-}, Er = ({
+}, Or = ({
   appliedBindings: r = [],
   onAddBinding: s,
   editMode: t,
@@ -180,7 +180,7 @@ const je = ({ data: r, fullView: s }) => {
       /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
       /* @__PURE__ */ e.jsx(er, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
         Ie,
         {
@@ -233,7 +233,7 @@ const je = ({ data: r, fullView: s }) => {
   return /* @__PURE__ */ e.jsxs(rr, { children: [
     /* @__PURE__ */ e.jsx(lr, { disabled: r, asChild: !0, onClick: () => c(!0), children: s }),
     a && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
-      Er,
+      Or,
       {
         item: d,
         editMode: l,
@@ -244,7 +244,7 @@ const je = ({ data: r, fullView: s }) => {
       }
     ) })
   ] });
-}, Or = ({
+}, Xr = ({
   item: r,
   onAddBinding: s,
   onRemove: t,
@@ -263,27 +263,27 @@ const je = ({ data: r, fullView: s }) => {
       return h === "string" ? "text" : h === "object" ? "model" : h;
     }
   };
-  return M(() => c(() => i(r.key, "PROP")), [r.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: r.key }),
+  return O(() => c(() => i(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "text-sm font-normal text-gray-500", children: r.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
     /* @__PURE__ */ e.jsx(je, { data: x(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(_r, { 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(st, { editMode: !0, onAddBinding: s, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(_r, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
         Sr,
         {
           onClick: () => t(),
-          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"
+          className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
         }
       )
     ] }),
-    !m(a) && !m(r.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(a) })
+    !m(a) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(a) })
   ] });
-}, Mr = ({ bindingData: r, onChange: s }) => {
+}, Yr = ({ bindingData: r, onChange: s }) => {
   const t = q(), [o] = lt(), l = Tr(), [d, a] = j(
     C(r, (n, h) => ({ key: h, value: n }))
   );
-  M(() => {
+  O(() => {
     a(C(r, (n, h) => ({ key: h, value: n })));
   }, [t == null ? void 0 : t._id]);
   const c = _(() => {
@@ -307,18 +307,18 @@ const je = ({ data: r, fullView: s }) => {
       }
       const h = {};
       ke(n, (g) => {
-        !m(g == null ? void 0 : g.key) && !m(g == null ? void 0 : g.value) && Me(h, g.key, g.value);
+        !m(g == null ? void 0 : g.key) && !m(g == null ? void 0 : g.value) && Oe(h, g.key, g.value);
       }), s(h);
     },
     [s]
   );
-  return m(l) ? /* @__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: [
+  return m(l) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
     "You have no data providers registered. Please add a data provider to your project. ",
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
     C(d, (n, h) => /* @__PURE__ */ e.jsx(
-      Or,
+      Xr,
       {
         item: n,
         onAddBinding: i,
@@ -330,7 +330,7 @@ const je = ({ data: r, fullView: s }) => {
       n.key
     )),
     /* @__PURE__ */ e.jsxs(F, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx(z, { className: "w-full", children: /* @__PURE__ */ e.jsx(
         st,
         {
           disabled: c,
@@ -339,8 +339,8 @@ const je = ({ data: r, fullView: s }) => {
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
-              className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: m(o) ? /* @__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"
+              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: m(o) ? /* @__PURE__ */ e.jsx("small", { className: "text-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
             }
           )
         }
@@ -348,7 +348,7 @@ const je = ({ data: r, fullView: s }) => {
       c && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: m(o) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, zr = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), be = ct(({ createHistorySnapshot: r, properties: s, formData: t, onChange: o }) => {
+}, 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" }), be = ct(({ createHistorySnapshot: r, properties: s, formData: t, onChange: o }) => {
   const l = { type: "object", properties: {} }, d = {};
   return Object.keys(s).forEach((a) => {
     const c = s[a];
@@ -357,10 +357,10 @@ const je = ({ data: r, fullView: s }) => {
     const i = a;
     l.properties[i] = or(c), d[i] = ar(c);
   }), /* @__PURE__ */ e.jsx(
-    Rr,
+    Br,
     {
       widgets: {
-        binding: zr,
+        binding: Fr,
         richtext: nr,
         icon: ir,
         image: dr
@@ -371,7 +371,7 @@ const je = ({ data: r, fullView: s }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Vr,
+      validator: Dr,
       uiSchema: d,
       onBlur: r,
       schema: l,
@@ -380,7 +380,7 @@ const je = ({ data: r, fullView: s }) => {
     }
   );
 });
-function Yr() {
+function zr() {
   const r = q(), { createSnapshot: s } = We(), t = Ue(), o = tt(r._type), l = { ...r }, d = pr("dataBindingSupport", !1), a = () => s(), c = ({ formData: n }, h) => {
     if (h) {
       const g = h.replace("root.", "");
@@ -418,7 +418,7 @@ function Yr() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(pe, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Mr,
+          Yr,
           {
             bindingData: x(l, "_bindings", {}),
             onChange: (n) => {
@@ -463,28 +463,28 @@ function Yr() {
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Ae = new Dr($r, {
+const Ae = new Ar(Pr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Fr() {
-  var L;
-  const [r] = Se(), s = q(), t = qe(), o = Ge(), [l] = Je(), [d, a] = j(""), c = (L = ue(r)) == null ? void 0 : L.prop, i = ft((x(s, c, "").replace(Ar, "").split(",").pop() || "").split(" "), m), p = () => {
+function Zr() {
+  var E;
+  const [r] = Se(), s = q(), t = qe(), o = Ge(), [l] = Je(), [d, a] = j(""), c = (E = ue(r)) == null ? void 0 : E.prop, i = ft((x(s, c, "").replace(Lr, "").split(",").pop() || "").split(" "), m), p = () => {
     const w = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     t(l, w, !0), a("");
   }, [y, n] = j([]), h = ({ value: w }) => {
-    const I = w.trim().toLowerCase(), E = I.match(/.+:/g);
+    const $ = w.trim().toLowerCase(), L = $.match(/.+:/g);
     let N = [];
-    if (E && E.length > 0) {
-      const [D] = E, z = I.replace(D, "");
-      N = Ae.search(z).map((b) => ({
+    if (L && L.length > 0) {
+      const [D] = L, X = $.replace(D, "");
+      N = Ae.search(X).map((b) => ({
         ...b,
         item: { ...b.item, name: D + b.item.name }
       }));
     } else
-      N = Ae.search(I);
+      N = Ae.search($);
     n(C(N, "item"));
   }, g = () => {
     n([]);
@@ -498,7 +498,7 @@ function Fr() {
     onKeyDown: (w) => {
       w.key === "Enter" && d.trim() !== "" && p();
     },
-    onChange: (w, { newValue: I }) => a(I),
+    onChange: (w, { newValue: $ }) => a($),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   };
   return /* @__PURE__ */ e.jsxs(
@@ -509,7 +509,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(
-            Br,
+            Ir,
             {
               suggestions: y,
               onSuggestionsFetchRequested: h,
@@ -565,7 +565,7 @@ function Fr() {
     }
   );
 }
-const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
+const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Wr = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: H, property: "flexBasis" },
@@ -574,7 +574,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, Zr = {
+}, Ur = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -585,7 +585,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, Wr = [
+}, Kr = [
   {
     heading: "layout.heading",
     items: [
@@ -987,7 +987,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: Fr }]
+    items: [{ component: Zr }]
   }
 ], ot = {
   "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" }) }),
@@ -1183,7 +1183,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
     )
   ] }),
   static: Pt
-}, oe = Oe({ canReset: !1, canChange: !0 }), Ur = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
+}, oe = Me({ canReset: !1, canChange: !0 }), qr = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: s, canChange: t }, children: r })
 ), at = ({ label: r, property: s, onChange: t }) => {
@@ -1191,7 +1191,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded " : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
     /* @__PURE__ */ e.jsxs(F, { 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(_e, {}) }) }),
+      /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
     ] })
   ] }) : /* @__PURE__ */ e.jsx(
@@ -1219,14 +1219,14 @@ function Ce({ selected: r, onChange: s, rounded: t = !1, options: o, disabled: l
       value: d,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        $.Children.toArray(
+        I.Children.toArray(
           o.map((i) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: i, children: i }))
         )
       ]
     }
   );
 }
-const Kr = ({ property: r, onChange: s }) => {
+const Gr = ({ property: r, onChange: s }) => {
   const { canReset: t, canChange: o } = se(oe), l = ae(r), d = _(() => x(l, "cls", ""), [l]), a = _(() => x(he, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
@@ -1237,7 +1237,7 @@ const Kr = ({ property: r, onChange: s }) => {
         disabled: !o && (!t || c - 1 < 0),
         onClick: () => s(Ve(a, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Lt,
+          Et,
           {
             className: !o && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
@@ -1261,22 +1261,22 @@ const Kr = ({ property: r, onChange: s }) => {
       }
     )
   ] }) });
-}, qr = ({ property: r, onChange: s }) => {
+}, Jr = ({ property: r, onChange: s }) => {
   const t = _(() => x(he, `${r}.classes`, [""]), [r]), { canChange: o } = se(oe), l = ae(r), d = _(() => x(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs(F, { children: [
-    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
       {
         type: "button",
         disabled: !o,
         onClick: () => s(a, r),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${d === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(x(ot, a, Xe))
+        children: I.createElement(x(ot, a, ze))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(le(a)) })
   ] })) });
-}, Gr = {
+}, Qr = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1288,7 +1288,7 @@ const Kr = ({ property: r, onChange: s }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, Jr = ({ property: r, onChange: s }) => {
+}, el = ({ property: r, onChange: s }) => {
   const t = ae(r), o = _(() => x(t, "cls", ""), [t]), { canChange: l } = se(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), y = x(p, "1", ""), n = x(p, "2", ""), h = B(
     // eslint-disable-next-line no-shadow
     (u) => {
@@ -1296,7 +1296,7 @@ const Kr = ({ property: r, onChange: s }) => {
     },
     [a, i]
   );
-  M(() => {
+  O(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(y))
       return a([]);
     a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
@@ -1308,10 +1308,10 @@ const Kr = ({ property: r, onChange: s }) => {
     },
     [y]
   );
-  return M(() => {
+  return O(() => {
     i({ color: "", shade: "" });
-  }, [t]), M(() => {
-    const f = `${x(Gr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+  }, [t]), O(() => {
+    const f = `${x(Qr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
     f.match(new RegExp(x(he, `${r}.regExp`, ""))) && s(f, r);
   }, [c, s, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
@@ -1365,7 +1365,7 @@ const Kr = ({ property: r, onChange: s }) => {
   const l = r.match(o), d = l && l.length > 1, a = !m(t) && Number.isNaN(Number(t));
   return d || a ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const Qr = (r) => {
+const tl = (r) => {
   const s = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1494,18 +1494,18 @@ const Qr = (r) => {
   }
   return vt(parseFloat(t)) ? { value: `${s + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const el = (r) => {
+const rl = (r) => {
   if (m(r))
     return { value: "", unit: "" };
   const s = r.match(/\[.*\]/g);
   if (s === null)
-    return tl(r);
+    return ll(r);
   const t = x(s, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
   return { value: `${o}${l}`, unit: t.replace(l, "") };
-}, tl = (r) => m(r) ? { value: "", unit: "" } : Qr(r), nt = $.createContext({
+}, ll = (r) => m(r) ? { value: "", unit: "" } : tl(r), nt = I.createContext({
   setDragData: () => {
   }
-}), rl = ({
+}), sl = ({
   unit: r,
   currentValue: s,
   onDrag: t,
@@ -1534,10 +1534,10 @@ const el = (r) => {
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Et, {})
+      children: /* @__PURE__ */ e.jsx(Lt, {})
     }
   );
-}, ll = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
+}, ol = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
   xe,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1549,17 +1549,17 @@ const el = (r) => {
     children: o
   },
   o
-)) }), Le = 50, sl = (r) => {
-  const [s, t] = j(!1), [o, l] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: y } = r, [n, h] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [g, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
-  M(() => {
-    const { value: b, unit: v } = el(d);
+)) }), Ee = 50, al = (r) => {
+  const [s, t] = j(!1), [o, l] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: y } = r, [n, h] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [g, u] = j(!1), [f, k] = j(""), [E, w] = j(!1), [$, L] = j(!1);
+  O(() => {
+    const { value: b, unit: v } = rl(d);
     if (v === "") {
       l(b), h(i != null && i.toLowerCase().includes("width") ? "%" : ue(p));
       return;
     }
     h(v), l(v === "class" || m(b) ? "" : b);
   }, [d, i, p]);
-  const N = fe((b) => a(b), [a], Le), D = fe((b) => a(b, !1), [a], Le), z = B(
+  const N = fe((b) => a(b), [a], Ee), D = fe((b) => a(b, !1), [a], Ee), X = B(
     (b = !1) => {
       const v = Pe(`${o}`, p);
       if (x(v, "error", !1)) {
@@ -1598,32 +1598,32 @@ const el = (r) => {
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: n === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: d }),
     /* @__PURE__ */ e.jsxs(F, { 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(_e, {}) }) }),
+      /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${L ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${E ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(n) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
           readOnly: n === "class",
           onKeyPress: (b) => {
-            b.key === "Enter" && z();
+            b.key === "Enter" && X();
           },
           onKeyDown: (b) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            b.preventDefault(), E(!0);
+            b.preventDefault(), L(!0);
             const v = wt(b.target.value);
-            let S = ze(v) ? 0 : v;
+            let S = Xe(v) ? 0 : v;
             b.keyCode === 38 && (S += 1), b.keyCode === 40 && (S -= 1);
-            const O = `${S}`, dt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${n === "-" ? "" : n}]`;
+            const M = `${S}`, dt = `${M.startsWith("-") ? "-" : ""}${c}[${M.replace("-", "")}${n === "-" ? "" : n}]`;
             D(dt);
           },
           onKeyUp: (b) => {
-            I && (b.preventDefault(), E(!1));
+            $ && (b.preventDefault(), L(!1));
           },
-          onBlur: () => z(),
+          onBlur: () => X(),
           onChange: (b) => {
             u(!1), l(b.target.value);
           },
@@ -1631,7 +1631,7 @@ const el = (r) => {
             var v;
             (v = b == null ? void 0 : b.target) == null || v.select(), t(!1);
           },
-          value: L ? f : o,
+          value: E ? f : o,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             g ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -1639,7 +1639,7 @@ const el = (r) => {
         }
       ),
       /* @__PURE__ */ e.jsxs(F, { open: s, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
@@ -1647,12 +1647,12 @@ const el = (r) => {
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: n }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Ot, {}) : null
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ e.jsx(xr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          ll,
+          ol,
           {
             units: p,
             current: n,
@@ -1663,22 +1663,22 @@ const el = (r) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(n) !== -1 || L ? null : /* @__PURE__ */ e.jsx(
-      rl,
+    ["none", "auto"].indexOf(n) !== -1 || E ? null : /* @__PURE__ */ e.jsx(
+      sl,
       {
         onDragStart: () => w(!0),
         onDragEnd: (b) => {
           if (k(() => ""), w(!1), m(b))
             return;
-          const v = `${b}`, O = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
-          N(O);
+          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
+          N(M);
         },
         onDrag: (b) => {
           if (m(b))
             return;
           k(b);
-          const v = `${b}`, O = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
-          D(O);
+          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
+          D(M);
         },
         currentValue: o,
         unit: n,
@@ -1690,7 +1690,7 @@ const el = (r) => {
 }, ae = (r) => {
   const s = ge();
   return jt(s, { property: r });
-}, ol = (r, s) => {
+}, nl = (r, s) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1700,7 +1700,7 @@ const el = (r) => {
     "2xl": 5
   };
   return t[x(r, "mq", "xs")] <= t[s];
-}, al = {
+}, il = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1766,32 +1766,32 @@ const el = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Ee = {
+}, Le = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, nl = (r) => `${r.toUpperCase()} ${Ee[r] ? `(${Ee[r]} & up)` : ""}`, Re = (r) => {
+}, dl = (r) => `${r.toUpperCase()} ${Le[r] ? `(${Le[r]} & up)` : ""}`, Re = (r) => {
   const { t: s } = K(), { type: t = "icons", label: o, property: l, onEmitChange: d = () => {
   }, units: a, negative: c = !1 } = r, [i] = gr(), [p] = Qe(), [, y] = Be(), n = ae(l), h = qe(), g = Ge(), [u] = Je(), f = _(() => x(n, "fullCls", ""), [n]), k = B(
-    (D, z = !0) => {
+    (D, X = !0) => {
       const G = { dark: i, mq: y, mod: p, cls: D, property: l, fullCls: "" };
       (i || p !== "") && (G.mq = "xs");
-      const b = Ir(G);
-      h(u, [b], z);
+      const b = Er(G);
+      h(u, [b], X);
     },
     [u, i, y, p, l, h]
-  ), L = B(() => {
+  ), E = B(() => {
     g(u, [f]);
-  }, [u, f, g]), w = _(() => ol(n, y), [n, y]);
-  M(() => {
+  }, [u, f, g]), w = _(() => nl(n, y), [n, y]);
+  O(() => {
     d(w, n);
   }, [w, d, n]);
-  const [, , I] = Be(), E = B(
+  const [, , $] = Be(), L = B(
     (D) => {
-      I({
+      $({
         xs: 400,
         sm: 640,
         md: 800,
@@ -1800,30 +1800,30 @@ const el = (r) => {
         "2xl": 1920
       }[D]);
     },
-    [I]
+    [$]
   ), N = x(n, "dark", null) === i && x(n, "mod", null) === p && x(n, "mq", null) === y;
-  return /* @__PURE__ */ e.jsx(Ur, { canChange: w, canReset: n && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ e.jsx(qr, { canChange: w, canReset: n && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${n && !N ? "text-foreground" : ""}`, children: s(o) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          sl,
+          al,
           {
             currentClass: x(n, "cls", ""),
-            classPrefix: x(al, l, ""),
+            classPrefix: x(il, l, ""),
             units: a || [],
             onChange: k,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(qr, { property: l, onChange: k }),
-        t === "range" && /* @__PURE__ */ e.jsx(Kr, { property: l, onChange: k }),
-        t === "color" && /* @__PURE__ */ e.jsx(Jr, { property: l, onChange: k }),
+        t === "icons" && /* @__PURE__ */ e.jsx(Jr, { property: l, onChange: k }),
+        t === "range" && /* @__PURE__ */ e.jsx(Gr, { property: l, onChange: k }),
+        t === "color" && /* @__PURE__ */ e.jsx(el, { property: l, onChange: k }),
         t === "dropdown" && /* @__PURE__ */ e.jsx(at, { label: o, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), 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" }) }) : w && n ? /* @__PURE__ */ e.jsxs(F, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => E(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && n ? /* @__PURE__ */ e.jsxs(F, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
             type: "button",
@@ -1834,7 +1834,7 @@ const el = (r) => {
         /* @__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: [
-            nl(x(n, "mq")),
+            dl(x(n, "mq")),
             i && !n.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1842,7 +1842,7 @@ const el = (r) => {
             "button",
             {
               type: "button",
-              onClick: () => E(x(n, "mq")),
+              onClick: () => L(x(n, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -1854,13 +1854,13 @@ const el = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, il = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
+}, cl = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
   label: r,
   options: s,
   borderB: t = !1,
   borderT: o = !1,
   type: l = "arbitrary",
-  units: d = il,
+  units: d = cl,
   negative: a = !1
 }) => {
   const { t: c } = K(), [i, p] = j(s[0].key), y = ge(), n = B((h) => C(y, "property").includes(h), [y]);
@@ -1871,19 +1871,19 @@ const el = (r) => {
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: I.Children.toArray(
             s.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(F, { children: [
-              /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+              /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => p(g),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
-                    $.createElement("div", {
+                    I.createElement("div", {
                       className: n(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(x(ot, g, Xe), { className: "text-inherit w-3 h-3" })
+                    I.createElement(x(ot, g, ze), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -1904,7 +1904,7 @@ const el = (r) => {
       ]
     }
   );
-}, dl = ({ heading: r, items: s }) => {
+}, pl = ({ heading: r, items: s }) => {
   const { t } = K(), o = ge(), l = _(() => {
     const d = (i) => U(
       i.map((p) => p.styleType === "multiple" ? C(p.options, "key") : p.property)
@@ -1925,7 +1925,7 @@ const el = (r) => {
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
   ] });
-}, cl = Oe({}), me = ({ section: r }) => {
+}, ul = Me({}), me = ({ section: r }) => {
   const { t: s } = K(), t = ge(), o = B(
     (a = []) => {
       const c = {};
@@ -1950,16 +1950,16 @@ const el = (r) => {
     ), i = C(t, "property");
     return Ye(c, i).length > 0;
   }, [t, r.heading, r.items]), d = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(cl.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
+  return /* @__PURE__ */ e.jsx(ul.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
       s(r.heading)
     ] }) }),
-    /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((a) => ye(a, "component") ? $.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+    /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
+      r.items.map((a) => ye(a, "component") ? I.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(pl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
     ) })
   ] }) });
-}, pl = ({
+}, xl = ({
   item: r,
   index: s,
   canDelete: t,
@@ -1992,14 +1992,14 @@ const el = (r) => {
       }
     ),
     /* @__PURE__ */ e.jsx(
-      zt,
+      Xt,
       {
         onClick: l,
         className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
       }
     )
   ] })
-] }), ul = ({ section: r }) => {
+] }), gl = ({ section: r }) => {
   var h;
   const { setSyncState: s } = hr(), t = q(), [o, l] = j([]), [d] = Se(), a = Ue(), c = `${x(d, "0.prop")}_attrs`;
   ne.useEffect(() => {
@@ -2016,7 +2016,7 @@ const el = (r) => {
     (g = []) => {
       const u = {};
       ke(g, (f) => {
-        m(f.key) || Me(u, f.key, f.value);
+        m(f.key) || Oe(u, f.key, f.value);
       }), a([x(t, "_id")], { [c]: u }), s("UNSAVED");
     },
     [t, s, a, c]
@@ -2055,7 +2055,7 @@ const el = (r) => {
           C(o, (g, u) => {
             const f = o.length > 0 && u < o.length - 1;
             return /* @__PURE__ */ e.jsx(
-              pl,
+              xl,
               {
                 item: g,
                 index: u,
@@ -2070,8 +2070,8 @@ const el = (r) => {
     ] }) })
   ] });
 };
-function xl() {
-  const [r, s] = Qe(), { flexChild: t, gridChild: o } = yr(), [, l] = Hr(br), { t: d } = K(), [a] = Se();
+function hl() {
+  const [r, s] = Qe(), { flexChild: t, gridChild: o } = yr(), [, l] = $r(br), { t: d } = K(), [a] = Se();
   return m(a) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: d("no_styling_block_selected") }),
@@ -2105,15 +2105,15 @@ function xl() {
         ] })
       ] }) }),
       /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsxs(Ke, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-        t && /* @__PURE__ */ e.jsx(me, { section: Xr }),
-        o ? /* @__PURE__ */ e.jsx(me, { section: Zr }) : null,
-        Wr.map((c) => /* @__PURE__ */ e.jsx(me, { section: c }, c.heading)),
-        /* @__PURE__ */ e.jsx(ul, { section: { heading: "Attributes" } })
+        t && /* @__PURE__ */ e.jsx(me, { section: Wr }),
+        o ? /* @__PURE__ */ e.jsx(me, { section: Ur }) : null,
+        Kr.map((c) => /* @__PURE__ */ e.jsx(me, { section: c }, c.heading)),
+        /* @__PURE__ */ e.jsx(gl, { section: { heading: "Attributes" } })
       ] }) })
     ] })
   );
 }
-const gl = {
+const yl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2124,8 +2124,8 @@ const gl = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, vs = () => {
-  const r = q(), { t: s } = K(), [t, o] = $.useState(""), [l, d] = $.useState({
+}, js = () => {
+  const r = q(), { t: s } = K(), [t, o] = I.useState(""), [l, d] = I.useState({
     onDrag: (i) => i,
     onDragEnd: (i) => i,
     dragStartY: 0,
@@ -2138,8 +2138,8 @@ const gl = {
     (i) => {
       const p = !x(l, "negative", !1), y = x(l, "cssProperty", "");
       let n = parseFloat(l.dragStartValue);
-      n = ze(n) ? 0 : n;
-      let h = gl[l.dragUnit];
+      n = Xe(n) ? 0 : n;
+      let h = yl[l.dragUnit];
       (W(y, "scale") || y === "opacity") && (h = 10);
       let u = (l.dragStartY - i.pageY) / h + n;
       p && u < 0 && (u = 0), y === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), o(`${u}`);
@@ -2180,13 +2180,13 @@ const gl = {
         {
           value: "settings",
           className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
+          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(zr, {}) })
         }
       ),
-      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })
+      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(hl, {}) })
     ] })
   ] }) });
 };
 export {
-  vs as default
+  js as default
 };