@chaibuilder/sdk 1.1.1 → 1.1.2

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

@@ -11,7 +11,7 @@ import Tr from "@rjsf/validator-ajv8";
 import { u as Sr } from "./controls-G0puEH71.js";
 import { Check as Rr, EditIcon as Vr, TrashIcon as Hr } from "lucide-react";
 import { getBlockComponent as et, getChaiDataProviders as Br } from "@chaibuilder/runtime";
-import { E as tt, u as rt } from "./index-aDqFUJ8v.js";
+import { E as tt, u as rt } from "./index-HjvZqhVh.js";
 import { useAtom as Ar } from "jotai";
 import Dr from "react-autosuggest";
 import Ir from "fuse.js";
@@ -65,10 +65,10 @@ import "sonner";
 const Or = I.lazy(() => import("react-json-view"));
 function Mr(t) {
   const s = [], r = {};
-  function l(o, a) {
-    Ce(a, (d, i) => {
-      const n = o ? `${o}.${i}` : i, p = ae(d) ? "list" : typeof d;
-      s.push(n), r[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && l(n, d);
+  function l(o, n) {
+    Ce(n, (d, i) => {
+      const a = o ? `${o}.${i}` : i, p = ae(d) ? "list" : typeof d;
+      s.push(a), r[a] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ae(d) && l(a, d);
     });
   }
   return l("", ct(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
@@ -101,12 +101,12 @@ const je = ({ data: t, fullView: s }) => {
   setValue: r,
   data: l,
   onChange: o,
-  dataType: a,
+  dataType: n,
   appliedBindings: d
 }) => {
-  const { paths: i, pathsType: n } = Mr(l), p = t === "PROP" ? et(l == null ? void 0 : l._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
+  const { paths: i, pathsType: a } = Mr(l), p = t === "PROP" ? et(l == null ? void 0 : l._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
     (x) => !M(d, x) && u(p, `props.${pe(ut(x, "."))}.binding`)
-  ) : i.filter((x) => a === u(n, x, "")), [t, i, d, a, p]);
+  ) : i.filter((x) => n === u(a, x, "")), [t, i, d, n, p]);
   return _(() => {
     s && o(s);
   }, [s, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
@@ -121,7 +121,7 @@ const je = ({ data: t, fullView: s }) => {
             className: ` ${b(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
             children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
-                g && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(a) }),
+                g && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(n) }),
                 s
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
@@ -148,7 +148,7 @@ const je = ({ data: t, fullView: s }) => {
                     /* @__PURE__ */ e.jsx(Rr, { className: `w-4 h-4 text-green-500 ${s === x ? "" : "opacity-0"}` }),
                     x
                   ] }),
-                  g ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(u(n, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: u(l, x) }) })
+                  g ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(u(a, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: u(l, x) }) })
                 ]
               },
               x
@@ -165,19 +165,19 @@ const je = ({ data: t, fullView: s }) => {
   editMode: r,
   item: l
 }) => {
-  const [o, a] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), n = G(), [p] = rt(), g = A(
+  const [o, n] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), a = G(), [p] = rt(), g = A(
     (h, x) => {
       if (b(h))
         return "";
       {
-        const f = u(x === "PROP" ? n : p, h, "");
+        const f = u(x === "PROP" ? a : p, h, "");
         if (ae(f))
           return "list";
         const T = typeof f;
         return T === "string" ? "text" : T === "object" ? "model" : T;
       }
     },
-    [n, p]
+    [a, p]
   ), [c, m] = w(r ? g(l.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(qt, { children: [
@@ -192,12 +192,12 @@ const je = ({ data: t, fullView: s }) => {
           isDisabled: !1,
           placeholder: "Enter prop key",
           value: o,
-          setValue: a,
+          setValue: n,
           onChange: (h) => {
             const x = g(h, "PROP");
-            a(h), c !== x && i(""), m(x);
+            n(h), c !== x && i(""), m(x);
           },
-          data: n,
+          data: a,
           dataType: c,
           appliedBindings: t
         }
@@ -232,18 +232,18 @@ const je = ({ data: t, fullView: s }) => {
       }
     ) })
   ] });
-}, st = ({ disabled: t, children: s, onAddBinding: r, appliedBindings: l, editMode: o = !0, item: a = {} }) => {
+}, st = ({ disabled: t, children: s, onAddBinding: r, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
   const [d, i] = w(!1);
   return /* @__PURE__ */ e.jsxs(tr, { children: [
     /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: s }),
     d && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
       Er,
       {
-        item: a,
+        item: n,
         editMode: o,
         appliedBindings: l,
-        onAddBinding: (n) => {
-          r(n), i(!1);
+        onAddBinding: (a) => {
+          r(a), i(!1);
         }
       }
     ) })
@@ -254,9 +254,9 @@ const je = ({ data: t, fullView: s }) => {
   onRemove: r,
   selectedBlock: l,
   dataProvider: o,
-  appliedBindings: a
+  appliedBindings: n
 }) => {
-  const [d, i] = w("string"), n = (p, g) => {
+  const [d, i] = w("string"), a = (p, g) => {
     if (b(p))
       return "";
     {
@@ -267,12 +267,12 @@ const je = ({ data: t, fullView: s }) => {
       return m === "string" ? "text" : m === "object" ? "model" : m;
     }
   };
-  return _(() => i(() => n(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
+  return _(() => i(() => a(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
     /* @__PURE__ */ e.jsx(je, { data: u(o, t.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Vr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
+      /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: n, item: t, children: /* @__PURE__ */ e.jsx(Vr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
         Hr,
         {
@@ -284,7 +284,7 @@ const je = ({ data: t, fullView: s }) => {
     !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(d) })
   ] });
 }, Fr = ({ bindingData: t, onChange: s }) => {
-  const r = G(), [l] = rt(), o = Br(), [a, d] = w(
+  const r = G(), [l] = rt(), o = Br(), [n, d] = w(
     C(t, (c, m) => ({ key: m, value: c }))
   );
   _(() => {
@@ -293,15 +293,15 @@ const je = ({ data: t, fullView: s }) => {
   const i = N(() => {
     if (b(l))
       return !0;
-    if (b(a))
+    if (b(n))
       return !1;
-    const c = fe(a);
+    const c = fe(n);
     return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [l, a]), n = (c) => {
-    const m = ve(a, (h) => h.key !== c.key);
+  }, [l, n]), a = (c) => {
+    const m = ve(n, (h) => h.key !== c.key);
     d([...m, c]), g([...m, c]);
   }, p = (c) => {
-    const m = ve(a, (h, x) => c !== x);
+    const m = ve(n, (h, x) => c !== x);
     g([...m]);
   }, g = A(
     (c = []) => {
@@ -321,15 +321,15 @@ const je = ({ data: t, fullView: s }) => {
     /* @__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(a, (c, m) => /* @__PURE__ */ e.jsx(
+    C(n, (c, m) => /* @__PURE__ */ e.jsx(
       _r,
       {
         item: c,
-        onAddBinding: n,
+        onAddBinding: a,
         onRemove: () => p(m),
         selectedBlock: r,
         dataProvider: l,
-        appliedBindings: C(a, "key")
+        appliedBindings: C(n, "key")
       },
       c.key
     )),
@@ -338,8 +338,8 @@ const je = ({ data: t, fullView: s }) => {
         st,
         {
           disabled: i,
-          appliedBindings: C(a, "key"),
-          onAddBinding: n,
+          appliedBindings: C(n, "key"),
+          onAddBinding: a,
           children: /* @__PURE__ */ e.jsx(
             "span",
             {
@@ -359,13 +359,13 @@ const je = ({ data: t, fullView: s }) => {
     formData: r,
     onChange: l
   }) => {
-    const [o] = lr(), a = { type: "object", properties: {} }, d = {};
+    const [o] = lr(), n = { type: "object", properties: {} }, d = {};
     return Object.keys(s).forEach((i) => {
-      const n = s[i];
-      if (M(["slot", "styles"], n.type))
+      const a = s[i];
+      if (M(["slot", "styles"], a.type))
         return;
-      const p = u(n, "i18n", !1) ? `${i}-${o}` : i;
-      a.properties[p] = or(n, o), d[p] = nr(n, o);
+      const p = u(a, "i18n", !1) ? `${i}-${o}` : i;
+      n.properties[p] = or(a, o), d[p] = nr(a, o);
     }), /* @__PURE__ */ e.jsx(
       Nr,
       {
@@ -386,7 +386,7 @@ const je = ({ data: t, fullView: s }) => {
         validator: Tr,
         uiSchema: d,
         onBlur: t,
-        schema: a,
+        schema: n,
         formData: r,
         onChange: l
       }
@@ -394,22 +394,20 @@ const je = ({ data: t, fullView: s }) => {
   }
 );
 function Wr() {
-  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = et(t._type), o = { ...t }, a = pr("dataBindingSupport", !1), d = () => s(), i = ({ formData: c }, m) => {
+  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = et(t._type), o = { ...t }, n = pr("dataBindingSupport", !1), d = () => s(), i = ({ formData: c }, m) => {
     if (m) {
       const h = m.replace("root.", "");
       r([t._id], { [h]: u(c, h) });
     }
-  }, n = {
+  }, a = {
     _name: Sr({
       title: "Name",
       default: u(t, "_name", t._type)
     })
   }, p = gt(u(o, "_bindings", {})), g = N(() => {
     const c = ht(u(l, "props", {}));
-    return mt(p, (m) => {
-      delete c[m];
-    }), c;
-  }, [l, p]);
+    return n && mt(p, (m) => delete c[m]), c;
+  }, [l, p, n]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
       me,
@@ -417,11 +415,11 @@ function Wr() {
         onChange: i,
         createHistorySnapshot: d,
         formData: o,
-        properties: n
+        properties: a
       }
     ),
     /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    a ? /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+    n ? /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(ie, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ e.jsx(
@@ -486,8 +484,8 @@ const Pe = new Ir(Pr, {
 });
 function Xr() {
   var D;
-  const [t] = Te(), s = G(), r = Ke(), l = qe(), [o] = Je(), [a, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, n = bt((u(s, i, "").replace(Lr, "").split(",").pop() || "").split(" "), b), p = () => {
-    const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+  const [t] = Te(), s = G(), r = Ke(), l = qe(), [o] = Je(), [n, d] = w(""), i = (D = pe(t)) == null ? void 0 : D.prop, a = bt((u(s, i, "").replace(Lr, "").split(",").pop() || "").split(" "), b), p = () => {
+    const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     r(o, j, !0), d("");
   }, [g, c] = w([]), m = ({ value: j }) => {
     const L = j.trim().toLowerCase(), P = L.match(/.+:/g);
@@ -509,9 +507,9 @@ function Xr() {
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: "Enter class name",
-    value: a,
+    value: n,
     onKeyDown: (j) => {
-      j.key === "Enter" && a.trim() !== "" && p();
+      j.key === "Enter" && n.trim() !== "" && p();
     },
     onChange: (j, { newValue: L }) => d(L),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -548,16 +546,16 @@ function Xr() {
               variant: "outline",
               className: "h-6 border-gray-700",
               onClick: p,
-              disabled: a.trim() === "",
+              disabled: n.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(ke, {})
             }
           )
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
+          b(a) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
           ne.Children.toArray(
-            n.map((j) => /* @__PURE__ */ e.jsxs(
+            a.map((j) => /* @__PURE__ */ e.jsxs(
               "div",
               {
                 className: "group relative flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
@@ -1202,9 +1200,9 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
 ), ot = ({ label: t, property: s, onChange: r }) => {
-  const l = N(() => u(ge, `${s}.classes`, [""]), [s]), o = le(s), a = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
+  const l = N(() => u(ge, `${s}.classes`, [""]), [s]), o = le(s), n = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(n);
   return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
       /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
@@ -1213,37 +1211,37 @@ const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Zr = {
     we,
     {
       rounded: t,
-      onChange: (n) => r(n, s),
-      selected: a,
+      onChange: (a) => r(a, s),
+      selected: n,
       options: l,
       disabled: !d
     }
   ) });
 };
 function we({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
-  const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
+  const n = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
       disabled: !l.length || o,
       className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (n) => s(n.target.value),
-      onKeyDown: (n) => {
-        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
+      onChange: (a) => s(a.target.value),
+      onKeyDown: (a) => {
+        a.ctrlKey && (a.key === "z" && d(), a.key === "y" && i());
       },
-      value: a,
+      value: n,
       children: [
         /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
         I.Children.toArray(
-          l.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
+          l.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
         )
       ]
     }
   );
 }
 const Kr = ({ property: t, onChange: s }) => {
-  const { canReset: r, canChange: l } = re(se), o = le(t), a = N(() => u(o, "cls", ""), [o]), d = N(() => u(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  const { canReset: r, canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]), d = N(() => u(ge, `${t}.classes`, [""]), [t]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: a ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
       {
@@ -1277,7 +1275,7 @@ const Kr = ({ property: t, onChange: s }) => {
     )
   ] }) });
 }, qr = ({ property: t, onChange: s }) => {
-  const r = N(() => u(ge, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = N(() => u(o, "cls", ""), [o]);
+  const r = N(() => u(ge, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), n = N(() => u(o, "cls", ""), [o]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1285,7 +1283,7 @@ const Kr = ({ property: t, onChange: s }) => {
         type: "button",
         disabled: !l,
         onClick: () => s(d, t),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
         children: I.createElement(u(lt, d, Xe))
       }
     ) }),
@@ -1304,12 +1302,12 @@ const Kr = ({ property: t, onChange: s }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, Qr = ({ property: t, onChange: s }) => {
-  const r = le(t), l = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), p = l.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
+  const r = le(t), l = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(se), [n, d] = w([]), [i, a] = w({ color: "", shade: "" }), p = l.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
     // eslint-disable-next-line no-shadow
     (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), n({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), a({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), a((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
     },
-    [d, n]
+    [d, a]
   );
   _(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(g))
@@ -1319,12 +1317,12 @@ const Kr = ({ property: t, onChange: s }) => {
   const h = A(
     // eslint-disable-next-line no-shadow
     (x) => {
-      n({ color: g, shade: x });
+      a({ color: g, shade: x });
     },
     [g]
   );
   return _(() => {
-    n({ color: "", shade: "" });
+    a({ color: "", shade: "" });
   }, [r]), _(() => {
     const f = `${u(Jr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
     f.match(new RegExp(u(ge, `${t}.regExp`, ""))) && s(f, t);
@@ -1368,7 +1366,7 @@ const Kr = ({ property: t, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(we, { rounded: !0, selected: c, disabled: !g || !o, onChange: h, options: a }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(we, { rounded: !0, selected: c, disabled: !g || !o, onChange: h, options: n }) })
   ] });
 }, $e = (t, s) => {
   t = t.toLowerCase();
@@ -1377,8 +1375,8 @@ const Kr = ({ property: t, onChange: s }) => {
     return { value: "", unit: r };
   const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
   r = r.replace(l, "");
-  const o = t.match(l), a = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
-  return a || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
+  const o = t.match(l), n = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
+  return n || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
 };
 const es = (t) => {
   const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
@@ -1504,7 +1502,7 @@ const es = (t) => {
   if (["max", "min", "fit"].includes(r))
     return { value: t, unit: "class" };
   if (r.includes("/")) {
-    const [l, o] = C(r.split("/"), (a) => parseInt(a, 10));
+    const [l, o] = C(r.split("/"), (n) => parseInt(n, 10));
     return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
   return ft(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
@@ -1526,7 +1524,7 @@ const ts = (t) => {
   onDrag: r,
   onDragEnd: l,
   onDragStart: o,
-  negative: a,
+  negative: n,
   cssProperty: d
 }) => {
   const { setDragData: i } = re(nt);
@@ -1534,15 +1532,15 @@ const ts = (t) => {
     "button",
     {
       type: "button",
-      onMouseDown: (n) => {
+      onMouseDown: (a) => {
         const p = {
           onDrag: r,
           onDragEnd: l,
           dragging: !0,
-          dragStartY: n.pageY,
+          dragStartY: a.pageY,
           dragStartValue: `${s}`,
           dragUnit: t,
-          negative: a,
+          negative: n,
           cssProperty: d
         };
         o(p), i(p);
@@ -1565,15 +1563,15 @@ const ts = (t) => {
   },
   l
 )) }), Le = 50, os = (t) => {
-  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: p, negative: g } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
+  const [s, r] = w(!1), [l, o] = w(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: p, negative: g } = t, [c, m] = w(a != null && a.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, P] = w(!1);
   _(() => {
-    const { value: y, unit: v } = ts(a);
+    const { value: y, unit: v } = ts(n);
     if (v === "") {
-      o(y), m(n != null && n.toLowerCase().includes("width") ? "%" : pe(p));
+      o(y), m(a != null && a.toLowerCase().includes("width") ? "%" : pe(p));
       return;
     }
     m(v), o(v === "class" || b(y) ? "" : y);
-  }, [a, n, p]);
+  }, [n, a, p]);
   const k = be((y) => d(y), [d], Le), $ = be((y) => d(y, !1), [d], Le), F = A(
     (y = !1) => {
       const v = $e(`${l}`, p);
@@ -1611,7 +1609,7 @@ const ts = (t) => {
     [k, l, i, p]
   );
   return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
     /* @__PURE__ */ e.jsxs(W, { children: [
       /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
       /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
@@ -1698,7 +1696,7 @@ const ts = (t) => {
         currentValue: l,
         unit: c,
         negative: g,
-        cssProperty: n
+        cssProperty: a
       }
     )
   ] }) }) });
@@ -1790,14 +1788,14 @@ const ts = (t) => {
   "2xl": "1536px"
 }, is = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Re = (t) => {
   const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
-  }, units: a, negative: d = !1 } = t, [i] = gr(), [n] = Qe(), [, p] = Be(), g = le(l), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
+  }, units: n, negative: d = !1 } = t, [i] = gr(), [a] = Qe(), [, p] = Be(), g = le(l), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
     (k, $ = !0) => {
-      const F = { dark: i, mq: p, mod: n, cls: k, property: l, fullCls: "" };
-      (i || n !== "") && (F.mq = "xs");
+      const F = { dark: i, mq: p, mod: a, cls: k, property: l, fullCls: "" };
+      (i || a !== "") && (F.mq = "xs");
       const oe = $r(F);
       c(h, [oe], $);
     },
-    [h, i, p, n, l, c]
+    [h, i, p, a, l, c]
   ), T = A(() => {
     m(h, [x]);
   }, [h, x, m]), D = N(() => ns(g, p), [g, p]);
@@ -1816,7 +1814,7 @@ const ts = (t) => {
       }[k]);
     },
     [j]
-  ), P = u(g, "dark", null) === i && u(g, "mod", null) === n && u(g, "mq", null) === p;
+  ), P = u(g, "dark", null) === i && u(g, "mod", null) === a && u(g, "mq", null) === p;
   return /* @__PURE__ */ e.jsx(Gr, { canChange: D, canReset: g && P, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${g && !P ? "text-foreground" : ""}`, children: r }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
@@ -1826,7 +1824,7 @@ const ts = (t) => {
           {
             currentClass: u(g, "cls", ""),
             classPrefix: u(as, l, ""),
-            units: a || [],
+            units: n || [],
             onChange: f,
             negative: d,
             cssProperty: l
@@ -1875,10 +1873,10 @@ const ts = (t) => {
   borderB: r = !1,
   borderT: l = !1,
   type: o = "arbitrary",
-  units: a = ds,
+  units: n = ds,
   negative: d = !1
 }) => {
-  const [i, n] = w(s[0].key), p = xe(), g = A((c) => C(p, "property").includes(c), [p]);
+  const [i, a] = w(s[0].key), p = xe(), g = A((c) => C(p, "property").includes(c), [p]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1892,7 +1890,7 @@ const ts = (t) => {
                 "button",
                 {
                   type: "button",
-                  onClick: () => n(m),
+                  onClick: () => a(m),
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     I.createElement("div", {
@@ -1910,7 +1908,7 @@ const ts = (t) => {
           Re,
           {
             type: o,
-            units: [...a],
+            units: [...n],
             label: "",
             property: i,
             negative: d
@@ -1922,11 +1920,11 @@ const ts = (t) => {
 }, cs = ({ heading: t, items: s }) => {
   const r = xe(), l = N(() => {
     const o = (i) => U(
-      i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
-    ), a = U(
+      i.map((a) => a.styleType === "multiple" ? C(a.options, "key") : a.property)
+    ), n = U(
       s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
     ), d = C(r, "property");
-    return Fe(a, d).length > 0;
+    return Fe(n, d).length > 0;
   }, [r, s]);
   return /* @__PURE__ */ e.jsxs("details", { children: [
     /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
@@ -1942,13 +1940,13 @@ const ts = (t) => {
   ] });
 }, ps = Me({}), ye = ({ section: t }) => {
   const s = xe(), r = A(
-    (a = []) => {
+    (n = []) => {
       const d = {};
-      for (let n = 0; n < s.length; n++)
-        d[s[n].property] = s[n].cls;
+      for (let a = 0; a < s.length; a++)
+        d[s[a].property] = s[a].cls;
       let i = !0;
-      for (const n in a)
-        if (!he(d, n) || d[n] !== a[n]) {
+      for (const a in n)
+        if (!he(d, a) || d[a] !== n[a]) {
           i = !1;
           break;
         }
@@ -1958,10 +1956,10 @@ const ts = (t) => {
   ), l = N(() => {
     if (s.length > 0 && t.heading === "Classes")
       return !0;
-    const a = (n) => U(
-      n.map((p) => p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
+    const n = (a) => U(
+      a.map((p) => p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
     ), d = U(
-      t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
+      t.items.map((a) => a.styleType === "accordion" ? n(a.items) : a.styleType === "multiple" ? U(C(a.options, "key")) : a.property)
     ), i = C(s, "property");
     return Fe(d, i).length > 0;
   }, [s, t.heading, t.items]), o = N(() => ({}), []);
@@ -1971,7 +1969,7 @@ const ts = (t) => {
       t.heading
     ] }) }),
     /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      t.items.map((a) => he(a, "component") ? I.createElement(a.component, { key: a.label }) : he(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(cs, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+      t.items.map((n) => he(n, "component") ? I.createElement(n.component, { key: n.label }) : he(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(at, { ...n }, n.label) : n.styleType === "accordion" && r(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(cs, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label))
     ) })
   ] }) });
 }, us = ({
@@ -1985,7 +1983,7 @@ const ts = (t) => {
     "input",
     {
       name: "key",
-      onChange: (a) => l(a, s),
+      onChange: (n) => l(n, s),
       value: t.key,
       placeholder: "Key",
       className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -1998,7 +1996,7 @@ const ts = (t) => {
       "input",
       {
         name: "value",
-        onChange: (a) => b(t.key) ? {} : l(a, s),
+        onChange: (n) => b(t.key) ? {} : l(n, s),
         value: t.value,
         placeholder: "Value",
         className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
@@ -2016,12 +2014,12 @@ const ts = (t) => {
   ] })
 ] }), xs = ({ section: t }) => {
   var m;
-  const { setSyncState: s } = hr(), r = G(), [l, o] = w([]), [a] = Te(), d = Ue(), i = `${u(a, "0.prop")}_attrs`;
+  const { setSyncState: s } = hr(), r = G(), [l, o] = w([]), [n] = Te(), d = Ue(), i = `${u(n, "0.prop")}_attrs`;
   ne.useEffect(() => {
     const h = C(u(r, i), (x, f) => ({ key: f, value: x }));
     b(h) ? o([]) : o(h);
   }, [u(r, i)]);
-  const n = () => o([...l, { key: "", value: "" }]), p = (h) => {
+  const a = () => o([...l, { key: "", value: "" }]), p = (h) => {
     const x = ve(l, (f, T) => h !== T);
     c(x);
   }, g = (h, x) => {
@@ -2055,7 +2053,7 @@ const ts = (t) => {
             className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(l) && b((m = fe(l)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
             onClick: () => {
               var h;
-              !b(l) && b((h = fe(l)) == null ? void 0 : h.key) || n();
+              !b(l) && b((h = fe(l)) == null ? void 0 : h.key) || a();
             },
             children: [
               /* @__PURE__ */ e.jsx(ke, { width: 12, height: 12 }),
@@ -2086,10 +2084,10 @@ const ts = (t) => {
   ] });
 };
 function gs() {
-  const [t, s] = Qe(), { flexChild: r, gridChild: l } = mr(), [, o] = Ar(yr), { t: a } = Ye(), [d] = Te();
+  const [t, s] = Qe(), { flexChild: r, gridChild: l } = mr(), [, o] = Ar(yr), { t: n } = Ye(), [d] = Te();
   return b(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
+    /* @__PURE__ */ e.jsx("h1", { children: n("no_styling_block_selected") }),
     /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
       "Hint: Styling allowed blocks are highlighted with",
       " ",
@@ -2143,9 +2141,9 @@ const hs = {
   deg: 1,
   ms: 0.1
 }, Nl = () => {
-  const t = G(), { t: s } = Ye(), [r, l] = I.useState(""), [o, a] = I.useState({
-    onDrag: (n) => n,
-    onDragEnd: (n) => n,
+  const t = G(), { t: s } = Ye(), [r, l] = I.useState(""), [o, n] = I.useState({
+    onDrag: (a) => a,
+    onDragEnd: (a) => a,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -2153,21 +2151,21 @@ const hs = {
     negative: !1,
     cssProperty: ""
   }), d = be(
-    (n) => {
+    (a) => {
       const p = !u(o, "negative", !1), g = u(o, "cssProperty", "");
       let c = parseFloat(o.dragStartValue);
       c = _e(c) ? 0 : c;
       let m = hs[o.dragUnit];
       (z(g, "scale") || g === "opacity") && (m = 10);
-      let x = (o.dragStartY - n.pageY) / m + c;
+      let x = (o.dragStartY - a.pageY) / m + c;
       p && x < 0 && (x = 0), g === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
     },
     [o],
     50
   ), i = A(() => {
-    setTimeout(() => o.onDragEnd(`${r}`), 100), a({
-      onDrag: (n) => n,
-      onDragEnd: (n) => n,
+    setTimeout(() => o.onDragEnd(`${r}`), 100), n({
+      onDrag: (a) => a,
+      onDragEnd: (a) => a,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -2175,11 +2173,11 @@ const hs = {
       negative: !1,
       cssProperty: ""
     });
-  }, [o, r, a]);
+  }, [o, r, n]);
   return wt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: a }, children: [
+  ] }) }) : /* @__PURE__ */ e.jsx(tt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: n }, children: [
     o.dragging ? /* @__PURE__ */ e.jsx(
       "div",
       {