@chaibuilder/sdk 1.2.16 → 1.2.18

package/dist/{Settings-ZNxfF14G.js → Settings-IhWI1ice.js}

@@ -2,22 +2,22 @@ import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
 import P, { useState as C, useMemo as _, useEffect as O, useCallback as V, memo as dt, createContext as Me, useContext as se } from "react";
 import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as ke, isArray as ie, omit as ct, truncate as pt, includes as E, get as x, first as ue, split as ut, startCase as Y, toLower as le, isEmpty as f, map as k, find as xt, last as ve, filter as we, set as Oe, debounce as gt, keys as ht, cloneDeep as yt, each as mt, capitalize as bt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as Fe, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
+import { forEach as ke, isArray as ie, omit as ct, truncate as pt, includes as E, get as x, first as ue, split as ut, startCase as Y, toLower as le, isEmpty as f, map as k, find as xt, last as ve, filter as we, set as Oe, debounce as gt, keys as ht, cloneDeep as yt, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as Fe, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
 import { useTranslation as K } from "react-i18next";
-import { PlusIcon as Ne, Cross2Icon as Xe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as S, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as St, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as At, InfoCircledIcon as _e, MinusIcon as Et, BoxIcon as ze, RowSpacingIcon as Lt, TriangleDownIcon as Mt, CrossCircledIcon as Ot, TrashIcon as Ft, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { aT as Yt, aU as Xt, B as xe, aV as zt, aW as Zt, aX as Wt, aY as Ut, aZ as Kt, a_ as qt, a$ as Gt, a0 as q, af as Jt, ag as Qt, ah as er, b0 as tr, ad as rr, b1 as lr, ae as sr, av as X, aw as z, ax as Z, b2 as or, b3 as ar, b4 as nr, b5 as ir, b6 as dr, b7 as cr, a5 as We, a4 as pr, i as ur, b8 as Ue, b9 as de, ba as ce, bb as pe, ac as Te, L as Ke, Z as qe, j as Ge, az as Se, bc as xr, m as gr, bd as hr, _ as ge, U as yr, a3 as Je, M as Be, a9 as mr, a6 as br, be as fr, aj as vr, ak as wr, al as jr, am as Cr, an as H, bf as Qe, ap as kr, aq as Nr, ar as De, as as $e } from "./index-QGA4ayU7.js";
-import { u as _r } from "./empty-slot-5FRrRq1E.js";
-import { Check as Tr, EditIcon as Sr, TrashIcon as Rr } from "lucide-react";
-import { getBlockComponent as et, getChaiDataProviders as Vr } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-rktN6W1Y.js";
-import { J as Hr, a as Br, d as Dr } from "./index-e0c8PmRQ.js";
-import $r from "@rjsf/core";
-import Ir from "@rjsf/validator-ajv8";
-import { useAtom as Pr } from "jotai";
-import Ar from "react-autosuggest";
-import Er from "fuse.js";
-import { A as Lr, C as he, g as Mr } from "./Class-17XFhL48.js";
-import { a as Or } from "./MODIFIERS-RiXS5Mn1.js";
+import { PlusIcon as Ne, Cross2Icon as Xe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as Pt, Cross1Icon as At, InfoCircledIcon as _e, MinusIcon as Et, BoxIcon as ze, RowSpacingIcon as Lt, TriangleDownIcon as Mt, CrossCircledIcon as Ot, TrashIcon as Ft, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { aV as Yt, aW as Xt, B as xe, aX as zt, aY as Zt, aZ as Wt, a_ as Ut, a$ as Kt, b0 as qt, b1 as Gt, a1 as q, af as Jt, ag as Qt, ah as er, b2 as tr, ad as rr, ao as lr, ae as sr, ap as X, aq as z, ar as Z, b3 as or, b4 as ar, b5 as nr, b6 as ir, b7 as dr, b8 as cr, a6 as We, a5 as pr, h as ur, b9 as Ue, ba as de, bb as ce, bc as pe, ac as Se, M as Ke, _ as qe, r as Ge, aB as Te, bd as xr, v as gr, be as hr, $ as ge, V as yr, a4 as Je, N as Be, z as br, a7 as mr, bf as fr, aj as vr, ak as wr, al as jr, am as Cr, an as H, bg as Qe, au as kr, av as Nr, aw as De, ax as $e } from "./index-ZBqiaKhx.js";
+import { u as _r } from "./controls-XPXGHKht.js";
+import { Check as Sr, EditIcon as Tr, TrashIcon as Rr, BrushIcon as Vr } from "lucide-react";
+import { getBlockComponent as et, getChaiDataProviders as Hr } from "@chaibuilder/runtime";
+import { E as tt, u as rt } from "./index-LF3KXx4u.js";
+import { J as Br, a as Dr, d as $r } from "./index-e0c8PmRQ.js";
+import Ir from "@rjsf/core";
+import Pr from "@rjsf/validator-ajv8";
+import { useAtom as Ar } from "jotai";
+import Er from "react-autosuggest";
+import Lr from "fuse.js";
+import { A as Mr, C as he, g as Or } from "./Class-3k8xjeiM.js";
+import { a as Fr } from "./MODIFIERS-WQdaNvb8.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "./Functions-7jnEwJyw.js";
 import "clsx";
@@ -53,14 +53,10 @@ import "flagged";
 import "react-dnd";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
-import "sonner";
-import "./html-to-json-57841sEK.js";
-import "himalaya";
-import "./web-blocks.js";
-function Fr(r) {
+function Yr(r) {
   const o = [], t = {};
-  function s(l, d) {
-    ke(d, (a, c) => {
+  function s(l, i) {
+    ke(i, (a, c) => {
       const n = l ? `${l}.${c}` : c, u = ie(a) ? "list" : typeof a;
       o.push(n), t[n] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !ie(a) && s(n, a);
     });
@@ -74,12 +70,12 @@ const je = ({ data: r, fullView: o }) => {
   return o ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsx(
-      Hr,
+      Br,
       {
         data: r,
-        shouldExpandNode: Br,
+        shouldExpandNode: Dr,
         style: {
-          ...Dr,
+          ...$r,
           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"
@@ -96,18 +92,18 @@ const je = ({ data: r, fullView: o }) => {
   setValue: t,
   data: s,
   onChange: l,
-  dataType: d,
+  dataType: i,
   appliedBindings: a
 }) => {
-  const { paths: c, pathsType: n } = Fr(s), u = r === "PROP" ? et(s == null ? void 0 : s._type) : {}, y = r === "PROP", [i, h] = C(!1), g = _(() => r === "PROP" ? c.filter(
+  const { paths: c, pathsType: n } = Yr(s), u = r === "PROP" ? et(s == null ? void 0 : s._type) : {}, y = r === "PROP", [d, h] = C(!1), g = _(() => r === "PROP" ? c.filter(
     (p) => !E(a, p) && x(u, `props.${ue(ut(p, "."))}.binding`)
-  ) : c.filter((p) => d === x(n, p, "")), [r, c, a, d, u]);
+  ) : c.filter((p) => i === x(n, p, "")), [r, c, a, i, u]);
   return O(() => {
     o && l(o);
   }, [o, r]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: Y(le(r)) }),
-      /* @__PURE__ */ e.jsxs(Yt, { open: i, onOpenChange: h, children: [
+      /* @__PURE__ */ e.jsxs(Yt, { open: d, onOpenChange: h, children: [
         /* @__PURE__ */ e.jsx(Xt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           xe,
           {
@@ -116,7 +112,7 @@ const je = ({ data: r, fullView: o }) => {
             className: ` ${f(o) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
             children: o ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__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) }),
+                y && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(i) }),
                 o
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
@@ -135,12 +131,12 @@ const je = ({ data: r, fullView: o }) => {
               {
                 value: p,
                 className: `cursor-pointer ${y ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (b) => {
-                  t(xt(g, (w) => w === b) || null), h(!1);
+                onSelect: (m) => {
+                  t(xt(g, (w) => w === m) || null), h(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Tr, { className: `h-4 w-4 text-green-500 ${o === p ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Sr, { className: `h-4 w-4 text-green-500 ${o === p ? "" : "opacity-0"}` }),
                     p
                   ] }),
                   y ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(x(n, p, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: x(s, p) }) })
@@ -154,26 +150,26 @@ const je = ({ data: r, fullView: o }) => {
     ] }),
     !y && !f(o) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: x(s, o, ""), fullView: !0 }) })
   ] });
-}, Yr = ({
+}, Xr = ({
   appliedBindings: r = [],
   onAddBinding: o,
   editMode: t,
   item: s
 }) => {
-  const [l, d] = C(t ? s.key : ""), [a, c] = C(t ? s.value : ""), n = q(), [u] = rt(), y = V(
+  const [l, i] = C(t ? s.key : ""), [a, c] = C(t ? s.value : ""), n = q(), [u] = rt(), y = V(
     (g, p) => {
       if (f(g))
         return "";
       {
-        const b = x(p === "PROP" ? n : u, g, "");
-        if (ie(b))
+        const m = x(p === "PROP" ? n : u, g, "");
+        if (ie(m))
           return "list";
-        const w = typeof b;
+        const w = typeof m;
         return w === "string" ? "text" : w === "object" ? "model" : w;
       }
     },
     [n, u]
-  ), [i, h] = C(t ? y(s.key, "PROP") : "");
+  ), [d, h] = C(t ? y(s.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(Jt, { children: [
       /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
@@ -187,13 +183,13 @@ const je = ({ data: r, fullView: o }) => {
           isDisabled: !1,
           placeholder: "Enter prop key",
           value: l,
-          setValue: d,
+          setValue: i,
           onChange: (g) => {
             const p = y(g, "PROP");
-            d(g), i !== p && c(""), h(p);
+            i(g), d !== p && c(""), h(p);
           },
           data: n,
-          dataType: i,
+          dataType: d,
           appliedBindings: r
         }
       ),
@@ -208,10 +204,10 @@ const je = ({ data: r, fullView: o }) => {
           setValue: c,
           onChange: (g) => {
             const p = y(g, "PATH");
-            c(i === p ? g : "");
+            c(d === p ? g : "");
           },
           data: u,
-          dataType: i,
+          dataType: d,
           appliedBindings: r
         }
       )
@@ -227,14 +223,14 @@ const je = ({ data: r, fullView: o }) => {
       }
     ) })
   ] });
-}, lt = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: s, editMode: l = !0, item: d = {} }) => {
+}, lt = ({ disabled: r, children: o, onAddBinding: t, appliedBindings: s, editMode: l = !0, item: i = {} }) => {
   const [a, c] = C(!1);
   return /* @__PURE__ */ e.jsxs(rr, { children: [
     /* @__PURE__ */ e.jsx(lr, { disabled: r, asChild: !0, onClick: () => c(!0), children: o }),
     a && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
-      Yr,
+      Xr,
       {
-        item: d,
+        item: i,
         editMode: l,
         appliedBindings: s,
         onAddBinding: (n) => {
@@ -243,22 +239,22 @@ const je = ({ data: r, fullView: o }) => {
       }
     ) })
   ] });
-}, Xr = ({
+}, zr = ({
   item: r,
   onAddBinding: o,
   onRemove: t,
   selectedBlock: s,
   dataProvider: l,
-  appliedBindings: d
+  appliedBindings: i
 }) => {
   const [a, c] = C("string"), n = (u, y) => {
     if (f(u))
       return "";
     {
-      const i = x(y === "PROP" ? s : l, u, "");
-      if (ie(i))
+      const d = x(y === "PROP" ? s : l, u, "");
+      if (ie(d))
         return "list";
-      const h = typeof i;
+      const h = typeof d;
       return h === "string" ? "text" : h === "object" ? "model" : h;
     }
   };
@@ -267,7 +263,7 @@ const je = ({ data: r, fullView: o }) => {
     /* @__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(lt, { editMode: !0, onAddBinding: o, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(Sr, { 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(lt, { editMode: !0, onAddBinding: o, appliedBindings: i, item: r, children: /* @__PURE__ */ e.jsx(Tr, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
       /* @__PURE__ */ e.jsx(
         Rr,
         {
@@ -278,34 +274,34 @@ const je = ({ data: r, fullView: o }) => {
     ] }),
     !f(a) && !f(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(a) })
   ] });
-}, zr = ({ bindingData: r, onChange: o }) => {
-  const t = q(), [s] = rt(), l = Vr(), [d, a] = C(
-    k(r, (i, h) => ({ key: h, value: i }))
+}, Zr = ({ bindingData: r, onChange: o }) => {
+  const t = q(), [s] = rt(), l = Hr(), [i, a] = C(
+    k(r, (d, h) => ({ key: h, value: d }))
   );
   O(() => {
-    a(k(r, (i, h) => ({ key: h, value: i })));
+    a(k(r, (d, h) => ({ key: h, value: d })));
   }, [t == null ? void 0 : t._id, r]);
   const c = _(() => {
     if (f(s))
       return !0;
-    if (f(d))
+    if (f(i))
       return !1;
-    const i = ve(d);
-    return f(i == null ? void 0 : i.key) || f(i == null ? void 0 : i.value);
-  }, [s, d]), n = (i) => {
-    const h = we(d, (g) => g.key !== i.key);
-    a([...h, i]), y([...h, i]);
-  }, u = (i) => {
-    const h = we(d, (g, p) => i !== p);
+    const d = ve(i);
+    return f(d == null ? void 0 : d.key) || f(d == null ? void 0 : d.value);
+  }, [s, i]), n = (d) => {
+    const h = we(i, (g) => g.key !== d.key);
+    a([...h, d]), y([...h, d]);
+  }, u = (d) => {
+    const h = we(i, (g, p) => d !== p);
     y([...h]);
   }, y = V(
-    (i = []) => {
-      if (a(i), f(i)) {
+    (d = []) => {
+      if (a(d), f(d)) {
         o({});
         return;
       }
       const h = {};
-      ke(i, (g) => {
+      ke(d, (g) => {
         !f(g == null ? void 0 : g.key) && !f(g == null ? void 0 : g.value) && Oe(h, g.key, g.value);
       }), o(h);
     },
@@ -316,24 +312,24 @@ const je = ({ data: r, fullView: o }) => {
     /* @__PURE__ */ e.jsx("br", {}),
     /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    k(d, (i, h) => /* @__PURE__ */ e.jsx(
-      Xr,
+    k(i, (d, h) => /* @__PURE__ */ e.jsx(
+      zr,
       {
-        item: i,
+        item: d,
         onAddBinding: n,
         onRemove: () => u(h),
         selectedBlock: t,
         dataProvider: s,
-        appliedBindings: k(d, "key")
+        appliedBindings: k(i, "key")
       },
-      i.key
+      d.key
     )),
     /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
       /* @__PURE__ */ e.jsx(z, { disabled: f(s), className: "w-full", children: /* @__PURE__ */ e.jsx(
         lt,
         {
           disabled: c,
-          appliedBindings: k(d, "key"),
+          appliedBindings: k(i, "key"),
           onAddBinding: n,
           children: /* @__PURE__ */ e.jsx(
             "span",
@@ -347,19 +343,19 @@ const je = ({ data: r, fullView: o }) => {
       c && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: f(s) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, 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" }), me = dt(({ properties: r, formData: o, onChange: t }) => {
+}, Wr = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), be = dt(({ properties: r, formData: o, onChange: t }) => {
   const s = { type: "object", properties: {} }, l = {};
-  return Object.keys(r).forEach((d) => {
-    const a = r[d];
+  return Object.keys(r).forEach((i) => {
+    const a = r[i];
     if (E(["slot", "styles"], a.type))
       return;
-    const c = d;
+    const c = i;
     s.properties[c] = or(a), l[c] = ar(a);
   }), /* @__PURE__ */ e.jsx(
-    $r,
+    Ir,
     {
       widgets: {
-        binding: Zr,
+        binding: Wr,
         richtext: nr,
         icon: ir,
         image: dr
@@ -370,7 +366,7 @@ const je = ({ data: r, fullView: o }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Ir,
+      validator: Pr,
       uiSchema: l,
       schema: s,
       formData: o,
@@ -378,33 +374,33 @@ const je = ({ data: r, fullView: o }) => {
     }
   );
 });
-function Wr() {
-  const r = q(), o = We(), t = pr(), s = et(r._type), l = { ...r }, [d, a] = C(l), c = ur("dataBindingSupport", !1), n = ({ formData: p }, b, w) => {
-    if (b) {
-      const D = b.replace("root.", "");
+function Ur() {
+  const r = q(), o = We(), t = pr(), s = et(r._type), l = { ...r }, [i, a] = C(l), c = ur("dataBindingSupport", !1), n = ({ formData: p }, m, w) => {
+    if (m) {
+      const D = m.replace("root.", "");
       t([r._id], { [D]: x(p, D) }, w);
     }
   }, u = V(
-    gt(({ formData: p }, b, w) => {
-      n({ formData: p }, b, w), a(p);
+    gt(({ formData: p }, m, w) => {
+      n({ formData: p }, m, w), a(p);
     }, 1500),
     []
-  ), y = ({ formData: p }, b) => {
-    if (b) {
-      const w = b.replace("root.", "");
-      o([r._id], { [w]: x(p, w) }), u({ formData: p }, b, { [w]: x(d, w) });
+  ), y = ({ formData: p }, m) => {
+    if (m) {
+      const w = m.replace("root.", "");
+      o([r._id], { [w]: x(p, w) }), u({ formData: p }, m, { [w]: x(i, w) });
     }
-  }, i = {
+  }, d = {
     _name: _r({
       title: "Name",
       default: x(r, "_name", r._type)
     })
   }, h = ht(x(l, "_bindings", {})), g = _(() => {
     const p = yt(x(s, "props", {}));
-    return c && mt(h, (b) => delete p[b]), p;
+    return c && bt(h, (m) => delete p[m]), p;
   }, [s, h, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(me, { onChange: y, formData: l, properties: i }),
+    /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: d }),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
     c ? /* @__PURE__ */ e.jsxs(Ue, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(de, { value: "BINDING", children: [
@@ -418,7 +414,7 @@ function Wr() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(pe, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          zr,
+          Zr,
           {
             bindingData: x(r, "_bindings", {}),
             onChange: (p) => {
@@ -435,52 +431,52 @@ function Wr() {
         /* @__PURE__ */ e.jsxs(pe, { className: "pt-4", children: [
           f(h) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: k(h, bt).join(", ") }),
+            /* @__PURE__ */ e.jsx("b", { children: k(h, mt).join(", ") }),
             " ",
             h.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
-          /* @__PURE__ */ e.jsx(me, { onChange: y, formData: l, properties: g })
+          /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: g })
         ] })
       ] })
-    ] }) : /* @__PURE__ */ e.jsx(me, { onChange: y, formData: l, properties: g }),
+    ] }) : /* @__PURE__ */ e.jsx(be, { onChange: y, formData: l, properties: g }),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Er(Lr, {
+const Pe = new Lr(Mr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
   keys: ["name"]
 });
-function Ur() {
+function Kr() {
   var D;
-  const [r] = Te(), o = q(), t = Ke(), s = qe(), [l] = Ge(), [d, a] = C(""), c = (D = ue(r)) == null ? void 0 : D.prop, n = ft((x(o, c, "").replace(Or, "").split(",").pop() || "").split(" "), f), u = () => {
-    const j = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+  const [r] = Se(), o = q(), t = Ke(), s = qe(), [l] = Ge(), [i, a] = C(""), c = (D = ue(r)) == null ? void 0 : D.prop, n = ft((x(o, c, "").replace(Fr, "").split(",").pop() || "").split(" "), f), u = () => {
+    const j = i.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     t(l, j, !0), a("");
-  }, [y, i] = C([]), h = ({ value: j }) => {
+  }, [y, d] = C([]), h = ({ value: j }) => {
     const I = j.trim().toLowerCase(), L = I.match(/.+:/g);
     let N = [];
     if (L && L.length > 0) {
       const [$] = L, F = I.replace($, "");
-      N = Pe.search(F).map((m) => ({
-        ...m,
-        item: { ...m.item, name: $ + m.item.name }
+      N = Pe.search(F).map((b) => ({
+        ...b,
+        item: { ...b.item, name: $ + b.item.name }
       }));
     } else
       N = Pe.search(I);
-    i(k(N, "item"));
+    d(k(N, "item"));
   }, g = () => {
-    i([]);
-  }, p = (j) => j.name, b = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), w = {
+    d([]);
+  }, p = (j) => j.name, m = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), w = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: d,
+    value: i,
     onKeyDown: (j) => {
-      j.key === "Enter" && d.trim() !== "" && u();
+      j.key === "Enter" && i.trim() !== "" && u();
     },
     onChange: (j, { newValue: I }) => a(I),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -490,16 +486,16 @@ function Ur() {
     {
       className: `no-scrollbar flex ${y.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
       children: [
-        /* @__PURE__ */ e.jsx(Se, { className: "mt-2", children: "Add Tailwind classes" }),
+        /* @__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(
-            Ar,
+            Er,
             {
               suggestions: y,
               onSuggestionsFetchRequested: h,
               onSuggestionsClearRequested: g,
               getSuggestionValue: p,
-              renderSuggestion: b,
+              renderSuggestion: m,
               inputProps: w,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
@@ -517,7 +513,7 @@ function Ur() {
               variant: "outline",
               className: "h-6 border-gray-700",
               onClick: u,
-              disabled: d.trim() === "",
+              disabled: i.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(Ne, {})
             }
@@ -549,7 +545,7 @@ function Ur() {
     }
   );
 }
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
+const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], qr = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: B, property: "flexBasis" },
@@ -558,7 +554,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, qr = {
+}, Gr = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -569,7 +565,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, Gr = [
+}, Jr = [
   {
     heading: "layout.heading",
     items: [
@@ -971,7 +967,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
   },
   {
     heading: "classes.heading",
-    items: [{ component: Ur }]
+    items: [{ component: Kr }]
   }
 ], 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" }) }),
@@ -981,32 +977,32 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
   // display
   hidden: He,
   gap: A,
-  gapX: S,
+  gapX: T,
   gapY: R,
-  spaceX: S,
+  spaceX: T,
   spaceY: R,
   overscroll: A,
-  overscrollX: S,
+  overscrollX: T,
   overscrollY: R,
   overflow: A,
-  overflowX: S,
+  overflowX: T,
   overflowY: R,
   top: Q,
   right: ee,
   bottom: te,
   left: re,
   inset: A,
-  insetX: S,
+  insetX: T,
   insetY: R,
   border: A,
-  borderX: S,
+  borderX: T,
   borderY: R,
   borderTop: Q,
   borderRight: ee,
   borderBottom: te,
   borderLeft: re,
   borderRadius: A,
-  borderRadiusX: S,
+  borderRadiusX: T,
   borderRadiusY: R,
   borderRadiusTop: Q,
   borderRadiusRight: ee,
@@ -1014,20 +1010,20 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
   borderRadiusLeft: re,
   borderRadiusTopLeft: Nt,
   borderRadiusTopRight: _t,
-  borderRadiusBottomRight: Tt,
-  borderRadiusBottomLeft: St,
-  divideXWidth: S,
+  borderRadiusBottomRight: St,
+  borderRadiusBottomLeft: Tt,
+  divideXWidth: T,
   divideYWidth: R,
   scale: A,
-  scaleX: S,
+  scaleX: T,
   scaleY: R,
-  skewX: S,
+  skewX: T,
   skewY: R,
-  translateX: S,
+  translateX: T,
   translateY: R,
   // padding
   padding: A,
-  paddingX: S,
+  paddingX: T,
   paddingY: R,
   paddingTop: Q,
   paddingRight: ee,
@@ -1035,7 +1031,7 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
   paddingLeft: re,
   // margin
   margin: A,
-  marginX: S,
+  marginX: T,
   marginY: R,
   marginTop: Q,
   marginRight: ee,
@@ -1167,13 +1163,13 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
     )
   ] }),
   static: At
-}, oe = Me({ canReset: !1, canChange: !0 }), Jr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+}, oe = Me({ canReset: !1, canChange: !0 }), Qr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: o, canChange: t }, children: r })
 ), ot = ({ label: r, property: o, onChange: t }) => {
-  const s = _(() => x(he, `${o}.classes`, [""]), [o]), l = ae(o), d = _(() => x(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(d);
+  const s = _(() => x(he, `${o}.classes`, [""]), [o]), l = ae(o), i = _(() => x(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(i);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(xr, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
+    /* @__PURE__ */ e.jsx(xr, { className: "w-[70%] rounded py-1", readOnly: !0, value: i }),
     /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1183,14 +1179,14 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Kr = {
     {
       rounded: r,
       onChange: (n) => t(n, o),
-      selected: d,
+      selected: i,
       options: s,
       disabled: !a
     }
   ) });
 };
 function Ce({ selected: r, onChange: o, rounded: t = !1, options: s, disabled: l = !1 }) {
-  const d = r.replace(/.*:/g, "").trim(), { undo: a, redo: c } = gr();
+  const i = r.replace(/.*:/g, "").trim(), { undo: a, redo: c } = gr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
@@ -1200,7 +1196,7 @@ function Ce({ selected: r, onChange: o, rounded: t = !1, options: s, disabled: l
       onKeyDown: (n) => {
         n.ctrlKey && (n.key === "z" && a(), n.key === "y" && c());
       },
-      value: d,
+      value: i,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         P.Children.toArray(
@@ -1210,9 +1206,9 @@ function Ce({ selected: r, onChange: o, rounded: t = !1, options: s, disabled: l
     }
   );
 }
-const Qr = ({ property: r, onChange: o }) => {
-  const { canReset: t, canChange: s } = 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, n = /\[.*\]/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: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+const el = ({ property: r, onChange: o }) => {
+  const { canReset: t, canChange: s } = se(oe), l = ae(r), i = _(() => x(l, "cls", ""), [l]), a = _(() => x(he, `${r}.classes`, [""]), [r]), c = a.indexOf(i) > -1 ? a.indexOf(i) : 0, n = /\[.*\]/g.test(i);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1245,8 +1241,8 @@ const Qr = ({ property: r, onChange: o }) => {
       }
     )
   ] }) });
-}, el = ({ property: r, onChange: o }) => {
-  const t = _(() => x(he, `${r}.classes`, [""]), [r]), { canChange: s } = se(oe), l = ae(r), d = _(() => x(l, "cls", ""), [l]);
+}, tl = ({ property: r, onChange: o }) => {
+  const t = _(() => x(he, `${r}.classes`, [""]), [r]), { canChange: s } = se(oe), l = ae(r), i = _(() => x(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: k(t, (a) => /* @__PURE__ */ e.jsxs(X, { children: [
     /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1254,13 +1250,13 @@ const Qr = ({ property: r, onChange: o }) => {
         type: "button",
         disabled: !s,
         onClick: () => o(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"}`,
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${i === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
         children: P.createElement(x(st, a, ze))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(le(a)) })
   ] })) });
-}, tl = {
+}, rl = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1272,11 +1268,11 @@ const Qr = ({ property: r, onChange: o }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, rl = ({ property: r, onChange: o }) => {
-  const t = ae(r), s = _(() => x(t, "cls", ""), [t]), { canChange: l } = se(oe), [d, a] = C([]), [c, n] = C({ color: "", shade: "" }), u = s.split("-"), y = x(u, "1", ""), i = x(u, "2", ""), h = V(
+}, ll = ({ property: r, onChange: o }) => {
+  const t = ae(r), s = _(() => x(t, "cls", ""), [t]), { canChange: l } = se(oe), [i, a] = C([]), [c, n] = C({ color: "", shade: "" }), u = s.split("-"), y = x(u, "1", ""), d = x(u, "2", ""), h = V(
     // eslint-disable-next-line no-shadow
     (p) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(p) ? (a([]), n({ color: p })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((b) => ({ ...b, color: p, shade: b.shade ? b.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(p) ? (a([]), n({ color: p })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((m) => ({ ...m, color: p, shade: m.shade ? m.shade : "500" })));
     },
     [a, n]
   );
@@ -1295,8 +1291,8 @@ const Qr = ({ property: r, onChange: o }) => {
   return O(() => {
     n({ color: "", shade: "" });
   }, [t]), O(() => {
-    const b = `${x(tl, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    b.match(new RegExp(x(he, `${r}.regExp`, ""))) && o(b, r);
+    const m = `${x(rl, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    m.match(new RegExp(x(he, `${r}.regExp`, ""))) && o(m, r);
   }, [c, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       Ce,
@@ -1337,7 +1333,7 @@ const Qr = ({ property: r, onChange: o }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: i, disabled: !y || !l, onChange: g, options: d }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: d, disabled: !y || !l, onChange: g, options: i }) })
   ] });
 }, Ae = (r, o) => {
   r = r.toLowerCase();
@@ -1346,10 +1342,10 @@ const Qr = ({ property: r, onChange: o }) => {
     return { value: "", unit: t };
   const s = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
   t = t.replace(s, "");
-  const l = r.match(s), d = l && l.length > 1, a = !f(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 l = r.match(s), i = l && l.length > 1, a = !f(t) && Number.isNaN(Number(t));
+  return i || a ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const ll = (r) => {
+const sl = (r) => {
   const o = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1473,29 +1469,29 @@ const ll = (r) => {
   if (["max", "min", "fit"].includes(t))
     return { value: r, unit: "class" };
   if (t.includes("/")) {
-    const [s, l] = k(t.split("/"), (d) => parseInt(d, 10));
+    const [s, l] = k(t.split("/"), (i) => parseInt(i, 10));
     return { value: o + (s / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
   return vt(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const sl = (r) => {
+const ol = (r) => {
   if (f(r))
     return { value: "", unit: "" };
   const o = r.match(/\[.*\]/g);
   if (o === null)
-    return ol(r);
+    return al(r);
   const t = x(o, "0", "").replace(/\[|\]/g, ""), s = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
   return { value: `${s}${l}`, unit: t.replace(l, "") };
-}, ol = (r) => f(r) ? { value: "", unit: "" } : ll(r), at = P.createContext({
+}, al = (r) => f(r) ? { value: "", unit: "" } : sl(r), at = P.createContext({
   setDragData: () => {
   }
-}), al = ({
+}), nl = ({
   unit: r,
   currentValue: o,
   onDrag: t,
   onDragEnd: s,
   onDragStart: l,
-  negative: d,
+  negative: i,
   cssProperty: a
 }) => {
   const { setDragData: c } = se(at);
@@ -1511,7 +1507,7 @@ const sl = (r) => {
           dragStartY: n.pageY,
           dragStartValue: `${o}`,
           dragUnit: r,
-          negative: d,
+          negative: i,
           cssProperty: a
         };
         l(u), c(u);
@@ -1521,7 +1517,7 @@ const sl = (r) => {
       children: /* @__PURE__ */ e.jsx(Lt, {})
     }
   );
-}, nl = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((s) => /* @__PURE__ */ e.jsx(
+}, il = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((s) => /* @__PURE__ */ e.jsx(
   xe,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1533,89 +1529,89 @@ const sl = (r) => {
     children: s
   },
   s
-)) }), Ee = 50, il = (r) => {
-  const [o, t] = C(!1), [s, l] = C(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: n, units: u, negative: y } = r, [i, h] = C(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [g, p] = C(!1), [b, w] = C(""), [D, j] = C(!1), [I, L] = C(!1);
+)) }), Ee = 50, dl = (r) => {
+  const [o, t] = C(!1), [s, l] = C(""), { currentClass: i, onChange: a, classPrefix: c, cssProperty: n, units: u, negative: y } = r, [d, h] = C(n != null && n.toLowerCase().includes("width") ? "%" : u[0]), [g, p] = C(!1), [m, w] = C(""), [D, j] = C(!1), [I, L] = C(!1);
   O(() => {
-    const { value: m, unit: v } = sl(d);
+    const { value: b, unit: v } = ol(i);
     if (v === "") {
-      l(m), h(n != null && n.toLowerCase().includes("width") ? "%" : ue(u));
+      l(b), h(n != null && n.toLowerCase().includes("width") ? "%" : ue(u));
       return;
     }
-    h(v), l(v === "class" || f(m) ? "" : m);
-  }, [d, n, u]);
-  const N = fe((m) => a(m), [a], Ee), $ = fe((m) => a(m, !1), [a], Ee), F = V(
-    (m = !1) => {
+    h(v), l(v === "class" || f(b) ? "" : b);
+  }, [i, n, u]);
+  const N = fe((b) => a(b), [a], Ee), $ = fe((b) => a(b, !1), [a], Ee), F = V(
+    (b = !1) => {
       const v = Ae(`${s}`, u);
       if (x(v, "error", !1)) {
         p(!0);
         return;
       }
-      const T = x(v, "unit") !== "" ? x(v, "unit") : i;
-      if (T === "auto" || T === "none") {
-        N(`${c}${T}`);
+      const S = x(v, "unit") !== "" ? x(v, "unit") : d;
+      if (S === "auto" || S === "none") {
+        N(`${c}${S}`);
         return;
       }
       if (x(v, "value") === "")
         return;
-      const J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
-      m ? $(J) : N(J);
+      const J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      b ? $(J) : N(J);
     },
-    [N, $, s, i, c, u]
+    [N, $, s, d, c, u]
   ), G = V(
-    (m) => {
+    (b) => {
       const v = Ae(`${s}`, u);
       if (x(v, "error", !1)) {
         p(!0);
         return;
       }
-      if (m === "auto" || m === "none") {
-        N(`${c}${m}`);
+      if (b === "auto" || b === "none") {
+        N(`${c}${b}`);
         return;
       }
       if (x(v, "value") === "")
         return;
-      const T = x(v, "unit") !== "" ? x(v, "unit") : m, J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${T === "-" ? "" : T}]`;
+      const S = x(v, "unit") !== "" ? x(v, "unit") : b, J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(J);
     },
     [N, s, c, u]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: i === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: d }),
+  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: d === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
     /* @__PURE__ */ e.jsxs(X, { children: [
       /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(_e, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
     ] })
   ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
+      ["none", "auto"].indexOf(d) !== -1 ? null : /* @__PURE__ */ e.jsx(
         "input",
         {
-          readOnly: i === "class",
-          onKeyPress: (m) => {
-            m.key === "Enter" && F();
+          readOnly: d === "class",
+          onKeyPress: (b) => {
+            b.key === "Enter" && F();
           },
-          onKeyDown: (m) => {
-            if (m.keyCode !== 38 && m.keyCode !== 40)
+          onKeyDown: (b) => {
+            if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            m.preventDefault(), L(!0);
-            const v = wt(m.target.value);
-            let T = Fe(v) ? 0 : v;
-            m.keyCode === 38 && (T += 1), m.keyCode === 40 && (T -= 1);
-            const M = `${T}`, it = `${M.startsWith("-") ? "-" : ""}${c}[${M.replace("-", "")}${i === "-" ? "" : i}]`;
+            b.preventDefault(), L(!0);
+            const v = wt(b.target.value);
+            let S = Fe(v) ? 0 : v;
+            b.keyCode === 38 && (S += 1), b.keyCode === 40 && (S -= 1);
+            const M = `${S}`, it = `${M.startsWith("-") ? "-" : ""}${c}[${M.replace("-", "")}${d === "-" ? "" : d}]`;
             $(it);
           },
-          onKeyUp: (m) => {
-            I && (m.preventDefault(), L(!1));
+          onKeyUp: (b) => {
+            I && (b.preventDefault(), L(!1));
           },
           onBlur: () => F(),
-          onChange: (m) => {
-            p(!1), l(m.target.value);
+          onChange: (b) => {
+            p(!1), l(b.target.value);
           },
-          onClick: (m) => {
+          onClick: (b) => {
             var v;
-            (v = m == null ? void 0 : m.target) == null || v.select(), t(!1);
+            (v = b == null ? void 0 : b.target) == null || v.select(), t(!1);
           },
-          value: D ? b : s,
+          value: D ? m : s,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
             g ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -1630,42 +1626,42 @@ const sl = (r) => {
             onClick: () => t(!o),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
+              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: d }),
               u.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ e.jsx(hr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          nl,
+          il,
           {
             units: u,
-            current: i,
-            onSelect: (m) => {
-              t(!1), h(m), G(m);
+            current: d,
+            onSelect: (b) => {
+              t(!1), h(b), G(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(i) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      al,
+    ["none", "auto"].indexOf(d) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
+      nl,
       {
         onDragStart: () => j(!0),
-        onDragEnd: (m) => {
-          if (w(() => ""), j(!1), f(m))
+        onDragEnd: (b) => {
+          if (w(() => ""), j(!1), f(b))
             return;
-          const v = `${m}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${i === "-" ? "" : i}]`;
+          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
           N(M);
         },
-        onDrag: (m) => {
-          if (f(m))
+        onDrag: (b) => {
+          if (f(b))
             return;
-          w(m);
-          const v = `${m}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${i === "-" ? "" : i}]`;
+          w(b);
+          const v = `${b}`, M = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${d === "-" ? "" : d}]`;
           $(M);
         },
         currentValue: s,
-        unit: i,
+        unit: d,
         negative: y,
         cssProperty: n
       }
@@ -1674,7 +1670,7 @@ const sl = (r) => {
 }, ae = (r) => {
   const o = ge();
   return jt(o, { property: r });
-}, dl = (r, o) => {
+}, cl = (r, o) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1684,7 +1680,7 @@ const sl = (r) => {
     "2xl": 5
   };
   return t[x(r, "mq", "xs")] <= t[o];
-}, cl = {
+}, pl = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -1757,22 +1753,22 @@ const sl = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, pl = (r) => `${r.toUpperCase()} ${Le[r] ? `(${Le[r]} & up)` : ""}`, Re = (r) => {
-  const { t: o } = K(), { type: t = "icons", label: s, property: l, onEmitChange: d = () => {
-  }, units: a, negative: c = !1 } = r, [n] = yr(), [u] = Je(), [, y] = Be(), i = ae(l), h = Ke(), g = qe(), [p] = Ge(), b = _(() => x(i, "fullCls", ""), [i]), w = V(
+}, ul = (r) => `${r.toUpperCase()} ${Le[r] ? `(${Le[r]} & up)` : ""}`, Re = (r) => {
+  const { t: o } = K(), { type: t = "icons", label: s, property: l, onEmitChange: i = () => {
+  }, units: a, negative: c = !1 } = r, [n] = yr(), [u] = Je(), [, y] = Be(), d = ae(l), h = Ke(), g = qe(), [p] = Ge(), m = _(() => x(d, "fullCls", ""), [d]), w = V(
     ($, F = !0) => {
       const G = { dark: n, mq: y, mod: u, cls: $, property: l, fullCls: "" };
       (n || u !== "") && (G.mq = "xs");
-      const m = Mr(G);
-      h(p, [m], F);
+      const b = Or(G);
+      h(p, [b], F);
     },
     [p, n, y, u, l, h]
   ), D = V(() => {
-    g(p, [b]);
-  }, [p, b, g]), j = _(() => dl(i, y), [i, y]);
+    g(p, [m]);
+  }, [p, m, g]), j = _(() => cl(d, y), [d, y]);
   O(() => {
-    d(j, i);
-  }, [j, d, i]);
+    i(j, d);
+  }, [j, i, d]);
   const [, , I] = Be(), L = V(
     ($) => {
       I({
@@ -1785,28 +1781,28 @@ const sl = (r) => {
       }[$]);
     },
     [I]
-  ), N = x(i, "dark", null) === n && x(i, "mod", null) === u && x(i, "mq", null) === y;
-  return /* @__PURE__ */ e.jsx(Jr, { canChange: j, canReset: i && 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] ${i && !N ? "text-foreground" : ""}`, children: o(s) }) }),
+  ), N = x(d, "dark", null) === n && x(d, "mod", null) === u && x(d, "mq", null) === y;
+  return /* @__PURE__ */ e.jsx(Qr, { canChange: j, canReset: d && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${d && !N ? "text-foreground" : ""}`, children: o(s) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          il,
+          dl,
           {
-            currentClass: x(i, "cls", ""),
-            classPrefix: x(cl, l, ""),
+            currentClass: x(d, "cls", ""),
+            classPrefix: x(pl, l, ""),
             units: a || [],
             onChange: w,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(el, { property: l, onChange: w }),
-        t === "range" && /* @__PURE__ */ e.jsx(Qr, { property: l, onChange: w }),
-        t === "color" && /* @__PURE__ */ e.jsx(rl, { property: l, onChange: w }),
+        t === "icons" && /* @__PURE__ */ e.jsx(tl, { property: l, onChange: w }),
+        t === "range" && /* @__PURE__ */ e.jsx(el, { property: l, onChange: w }),
+        t === "color" && /* @__PURE__ */ e.jsx(ll, { property: l, onChange: w }),
         t === "dropdown" && /* @__PURE__ */ e.jsx(ot, { label: s, property: l, onChange: w })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => D(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && i ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${m ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => D(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && d ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -1818,19 +1814,19 @@ const sl = (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: [
-            pl(x(i, "mq")),
-            n && !i.dark ? "(Light mode)" : ""
+            ul(x(d, "mq")),
+            n && !d.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
           /* @__PURE__ */ e.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => L(x(i, "mq")),
+              onClick: () => L(x(d, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                x(i, "mq").toUpperCase()
+                x(d, "mq").toUpperCase()
               ]
             }
           )
@@ -1838,16 +1834,16 @@ const sl = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, ul = ["px", "%", "em", "rem", "ch", "vh", "vw"], nt = ({
+}, xl = ["px", "%", "em", "rem", "ch", "vh", "vw"], nt = ({
   label: r,
   options: o,
   borderB: t = !1,
   borderT: s = !1,
   type: l = "arbitrary",
-  units: d = ul,
+  units: i = xl,
   negative: a = !1
 }) => {
-  const { t: c } = K(), [n, u] = C(o[0].key), y = ge(), i = V((h) => k(y, "property").includes(h), [y]);
+  const { t: c } = K(), [n, u] = C(o[0].key), y = ge(), d = V((h) => k(y, "property").includes(h), [y]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1865,7 +1861,7 @@ const sl = (r) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === n ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     P.createElement("div", {
-                      className: i(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: d(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     P.createElement(x(st, g, ze), { className: "text-inherit w-3 h-3" })
                   ]
@@ -1879,7 +1875,7 @@ const sl = (r) => {
           Re,
           {
             type: l,
-            units: [...d],
+            units: [...i],
             label: "",
             property: n,
             negative: a
@@ -1888,12 +1884,12 @@ const sl = (r) => {
       ]
     }
   );
-}, xl = ({ heading: r, items: o }) => {
+}, gl = ({ heading: r, items: o }) => {
   const { t } = K(), s = ge(), l = _(() => {
-    const d = (n) => U(
+    const i = (n) => U(
       n.map((u) => u.styleType === "multiple" ? k(u.options, "key") : u.property)
     ), a = U(
-      o.map((n) => n.styleType === "accordion" ? d(n.items) : n.styleType === "multiple" ? k(n.options, "key") : n.property)
+      o.map((n) => n.styleType === "accordion" ? i(n.items) : n.styleType === "multiple" ? k(n.options, "key") : n.property)
     ), c = k(s, "property");
     return Ye(a, c).length > 0;
   }, [s, o]);
@@ -1907,9 +1903,9 @@ const sl = (r) => {
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: o.map((i) => i.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...i }, i.label) : /* @__PURE__ */ e.jsx(Re, { ...i }, i.label)) })
   ] });
-}, gl = Me({}), be = ({ section: r }) => {
+}, hl = Me({}), me = ({ section: r }) => {
   const { t: o } = K(), t = ge(), s = V(
     (a = []) => {
       const c = {};
@@ -1933,17 +1929,17 @@ const sl = (r) => {
       r.items.map((u) => u.styleType === "accordion" ? a(u.items) : u.styleType === "multiple" ? U(k(u.options, "key")) : u.property)
     ), n = k(t, "property");
     return Ye(c, n).length > 0;
-  }, [t, r.heading, r.items]), d = _(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(gl.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
+  }, [t, r.heading, r.items]), i = _(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(hl.Provider, { value: i, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(ce, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
       o(r.heading)
     ] }) }),
     /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      r.items.map((a) => ye(a, "component") ? P.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && s(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(xl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+      r.items.map((a) => ye(a, "component") ? P.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(nt, { ...a }, a.label) : a.styleType === "accordion" && s(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(gl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
     ) })
   ] }) });
-}, hl = ({
+}, yl = ({
   item: r,
   index: o,
   canDelete: t,
@@ -1954,7 +1950,7 @@ const sl = (r) => {
     "input",
     {
       name: "key",
-      onChange: (d) => s(d, o),
+      onChange: (i) => s(i, o),
       value: r.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1967,7 +1963,7 @@ const sl = (r) => {
       "input",
       {
         name: "value",
-        onChange: (d) => f(r.key) ? {} : s(d, o),
+        onChange: (i) => f(r.key) ? {} : s(i, o),
         value: r.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1983,24 +1979,24 @@ const sl = (r) => {
       }
     )
   ] })
-] }), yl = ({ section: r }) => {
+] }), bl = ({ section: r }) => {
   var h;
-  const { setSyncState: o } = mr(), t = q(), [s, l] = C([]), [d] = Te(), a = We(), c = `${x(d, "0.prop")}_attrs`;
+  const { setSyncState: o } = br(), t = q(), [s, l] = C([]), [i] = Se(), a = We(), c = `${x(i, "0.prop")}_attrs`;
   ne.useEffect(() => {
-    const g = k(x(t, c), (p, b) => ({ key: b, value: p }));
+    const g = k(x(t, c), (p, m) => ({ key: m, value: p }));
     f(g) ? l([]) : l(g);
   }, [x(t, c)]);
   const n = () => l([...s, { key: "", value: "" }]), u = (g) => {
-    const p = we(s, (b, w) => g !== w);
-    i(p);
+    const p = we(s, (m, w) => g !== w);
+    d(p);
   }, y = (g, p) => {
-    const b = [...s];
-    b[p][g.target.name] = g.target.value, i(b);
-  }, i = ne.useCallback(
+    const m = [...s];
+    m[p][g.target.name] = g.target.value, d(m);
+  }, d = ne.useCallback(
     (g = []) => {
       const p = {};
-      ke(g, (b) => {
-        f(b.key) || Oe(p, b.key, b.value);
+      ke(g, (m) => {
+        f(m.key) || Oe(p, m.key, m.value);
       }), a([x(t, "_id")], { [c]: p }), o("UNSAVED");
     },
     [t, o, a, c]
@@ -2016,7 +2012,7 @@ const sl = (r) => {
       "Attributes"
     ] }) }),
     /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(Se, { className: "mt-2 flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ e.jsxs(Te, { className: "mt-2 flex w-full items-center justify-between", children: [
         "Add Custom attributes",
         /* @__PURE__ */ e.jsxs(
           "div",
@@ -2037,13 +2033,13 @@ const sl = (r) => {
         f(s) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         ne.Children.toArray(
           k(s, (g, p) => {
-            const b = s.length > 0 && p < s.length - 1;
+            const m = s.length > 0 && p < s.length - 1;
             return /* @__PURE__ */ e.jsx(
-              hl,
+              yl,
               {
                 item: g,
                 index: p,
-                canDelete: b,
+                canDelete: m,
                 onChange: y,
                 onRemove: () => u(p)
               }
@@ -2055,15 +2051,15 @@ const sl = (r) => {
   ] });
 };
 function ml() {
-  const [r, o] = Je(), { flexChild: t, gridChild: s } = br(), [, l] = Pr(fr), { t: d } = K(), [a] = Te();
+  const [r, o] = Je(), { flexChild: t, gridChild: s } = mr(), [, l] = Ar(fr), { t: i } = K(), [a] = Se();
   return f(a) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: d("no_styling_block_selected") })
+    /* @__PURE__ */ e.jsx("h1", { children: i("no_styling_block_selected") })
   ] }) }) : (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ e.jsxs("div", { onClick: () => l(!1), className: "flex h-full flex-col", children: [
-      /* @__PURE__ */ e.jsx("div", { className: "flex h-12 flex-col space-x-4 space-y-3 border-b border-border px-4 py-1", 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.jsx("div", { className: "flex h-12 flex-col space-x-4 px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
+        /* @__PURE__ */ e.jsx(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
         /* @__PURE__ */ e.jsxs(vr, { defaultValue: r, onValueChange: (c) => o(c), children: [
           /* @__PURE__ */ e.jsx(wr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(jr, { placeholder: "State" }) }),
           /* @__PURE__ */ e.jsxs(Cr, { children: [
@@ -2082,16 +2078,20 @@ function ml() {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden", children: /* @__PURE__ */ e.jsxs(Ue, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-        t && /* @__PURE__ */ e.jsx(be, { section: Kr }),
-        s ? /* @__PURE__ */ e.jsx(be, { section: qr }) : null,
-        Gr.map((c) => /* @__PURE__ */ e.jsx(be, { section: c }, c.heading)),
-        /* @__PURE__ */ e.jsx(yl, { section: { heading: "Attributes" } })
+      r !== "" ? /* @__PURE__ */ e.jsxs("div", { className: "m-1 flex items-center space-x-1 rounded border border-orange-500 bg-orange-200 p-px px-2 text-xs text-orange-900", children: [
+        /* @__PURE__ */ e.jsx(Vr, { className: "w-3" }),
+        /* @__PURE__ */ e.jsx("span", { children: i(`Styles will be applied for (:${r}) state`) })
+      ] }) : null,
+      /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar -mx-1 max-h-full flex-1 overflow-x-hidden overflow-y-hidden border-t border-border", children: /* @__PURE__ */ e.jsxs(Ue, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+        t && /* @__PURE__ */ e.jsx(me, { section: qr }),
+        s ? /* @__PURE__ */ e.jsx(me, { section: Gr }) : null,
+        Jr.map((c) => /* @__PURE__ */ e.jsx(me, { section: c }, c.heading)),
+        /* @__PURE__ */ e.jsx(bl, { section: { heading: "Attributes" } })
       ] }) })
     ] })
   );
 }
-const bl = {
+const fl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2102,8 +2102,8 @@ const bl = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Cs = () => {
-  const r = q(), { t: o } = K(), [t, s] = P.useState(""), [l, d] = P.useState({
+}, vs = () => {
+  const r = q(), { t: o } = K(), [t, s] = P.useState(""), [l, i] = P.useState({
     onDrag: (n) => n,
     onDragEnd: (n) => n,
     dragStartY: 0,
@@ -2115,17 +2115,17 @@ const bl = {
   }), a = fe(
     (n) => {
       const u = !x(l, "negative", !1), y = x(l, "cssProperty", "");
-      let i = parseFloat(l.dragStartValue);
-      i = Fe(i) ? 0 : i;
-      let h = bl[l.dragUnit];
+      let d = parseFloat(l.dragStartValue);
+      d = Fe(d) ? 0 : d;
+      let h = fl[l.dragUnit];
       (W(y, "scale") || y === "opacity") && (h = 10);
-      let p = (l.dragStartY - n.pageY) / h + i;
+      let p = (l.dragStartY - n.pageY) / h + d;
       u && p < 0 && (p = 0), y === "opacity" && p > 1 && (p = 1), l.onDrag(`${p}`), s(`${p}`);
     },
     [l],
     50
   ), c = V(() => {
-    setTimeout(() => l.onDragEnd(`${t}`), 100), d({
+    setTimeout(() => l.onDragEnd(`${t}`), 100), i({
       onDrag: (n) => n,
       onDragEnd: (n) => n,
       dragStartY: 0,
@@ -2135,11 +2135,11 @@ const bl = {
       negative: !1,
       cssProperty: ""
     });
-  }, [l, t, d]);
+  }, [l, t, i]);
   return Ct(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(at.Provider, { value: { setDragData: d }, children: [
+  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(at.Provider, { value: { setDragData: i }, children: [
     l.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -2153,11 +2153,11 @@ const bl = {
         /* @__PURE__ */ e.jsx(De, { value: "settings", children: o("settings") }),
         /* @__PURE__ */ e.jsx(De, { value: "styling", children: o("styling") })
       ] }),
-      /* @__PURE__ */ e.jsx($e, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(Wr, {}) }) }),
+      /* @__PURE__ */ e.jsx($e, { value: "settings", className: "no-scrollbar h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Qe, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden pb-5", children: /* @__PURE__ */ e.jsx(Ur, {}) }) }),
       /* @__PURE__ */ e.jsx($e, { value: "styling", className: "h-full flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(ml, {}) })
     ] })
   ] }) });
 };
 export {
-  Cs as default
+  vs as default
 };