@chaibuilder/sdk 1.2.5 → 1.2.6

package/dist/{Settings-JjYbPJrt.js → Settings-t0I7LKxe.js}

@@ -2,21 +2,21 @@ import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
 import $, { useState as j, useMemo as _, useEffect as M, useCallback as B, memo as ct, createContext as Oe, useContext as se } from "react";
 import { useThrottledCallback as fe } from "@react-hookz/web";
-import { forEach as ke, isArray as ie, omit as pt, truncate as ut, includes as A, get as g, first as ue, split as gt, startCase as Y, toLower as le, isEmpty as m, map as C, find as xt, last as ve, filter as we, set as Me, keys as yt, cloneDeep as ht, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as ze, findLast as jt, flatten as U, intersection as Ye, has as he, isNull as Ct } from "lodash-es";
+import { forEach as ke, isArray as ie, omit as pt, truncate as ut, includes as P, get as x, first as ue, split as xt, startCase as Y, toLower as le, isEmpty as m, map as C, find as gt, last as ve, filter as we, set as Me, keys as ht, cloneDeep as yt, each as bt, capitalize as mt, reject as ft, nth as Ve, startsWith as W, isNumber as vt, parseInt as wt, isNaN as ze, findLast as jt, flatten as U, intersection as Ye, has as ye, isNull as Ct } from "lodash-es";
 import { useTranslation as K } from "react-i18next";
-import { PlusIcon as Ne, Cross2Icon as Fe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as P, 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 Lt, BoxIcon as Xe, RowSpacingIcon as Et, TriangleDownIcon as Ot, CrossCircledIcon as Mt, TrashIcon as zt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { a$ as Yt, b0 as Ft, B as ge, b1 as Xt, b2 as Zt, b3 as Wt, b4 as Ut, b5 as Kt, b6 as qt, b7 as Gt, a6 as q, am as Jt, an as Qt, ao as er, b8 as tr, ak as rr, b9 as lr, al as sr, aC as F, aD as X, aF as Z, ba as or, bb as ar, bc as nr, bd as ir, be as dr, bf as cr, p as We, ac as Ue, i as pr, bg as Ke, bh as de, bi as ce, bj as pe, aj as Se, P as qe, a3 as Ge, j as Je, aH as Te, bk as ur, bl as gr, a4 as xe, W as xr, a9 as Qe, R as Be, ag as yr, ad as hr, bm as br, aq as mr, ar as fr, as as vr, at as wr, au as V, bn as et, aw as jr, ax as Cr, ay as De, az as $e } from "./index-_OgCuSUz.js";
+import { PlusIcon as Ne, Cross2Icon as Fe, EyeOpenIcon as kt, EyeClosedIcon as He, BorderAllIcon as A, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as Nt, ArrowTopRightIcon as _t, ArrowBottomRightIcon as St, ArrowBottomLeftIcon as Tt, AlignLeftIcon as Rt, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as Dt, UnderlineIcon as $t, OverlineIcon as It, LetterCaseUppercaseIcon as At, Cross1Icon as Pt, InfoCircledIcon as _e, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Et, TriangleDownIcon as Ot, CrossCircledIcon as Mt, TrashIcon as zt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { a$ as Yt, b0 as Ft, B as xe, b1 as Xt, b2 as Zt, b3 as Wt, b4 as Ut, b5 as Kt, b6 as qt, b7 as Gt, a6 as q, am as Jt, an as Qt, ao as er, b8 as tr, ak as rr, b9 as lr, al as sr, aC as F, aD as X, aF as Z, ba as or, bb as ar, bc as nr, bd as ir, be as dr, bf as cr, p as We, ac as Ue, i as pr, bg as Ke, bh as de, bi as ce, bj as pe, aj as Se, P as qe, a3 as Ge, j as Je, aH as Te, bk as ur, bl as xr, a4 as ge, W as gr, a9 as Qe, R as Be, ag as hr, ad as yr, bm as br, aq as mr, ar as fr, as as vr, at as wr, au as V, bn as et, aw as jr, ax as Cr, ay as De, az as $e } from "./index-_OgCuSUz.js";
 import { u as kr } from "./controls-XPXGHKht.js";
 import { Check as Nr, EditIcon as _r, TrashIcon as Sr } from "lucide-react";
 import { getBlockComponent as tt, getChaiDataProviders as Tr } from "@chaibuilder/runtime";
-import { E as rt, u as lt } from "./index-7mV_OcXd.js";
+import { E as rt, u as lt } from "./index-482XFRhB.js";
 import Rr from "@rjsf/core";
 import Vr from "@rjsf/validator-ajv8";
 import { useAtom as Hr } from "jotai";
 import Br from "react-autosuggest";
 import Dr from "fuse.js";
-import { A as $r, C as ye, g as Ir } from "./utils-AvyFzbPC.js";
-import { a as Pr } from "./MODIFIERS-RiXS5Mn1.js";
+import { A as $r, C as he, g as Ir } from "./utils-AvyFzbPC.js";
+import { a as Ar } from "./MODIFIERS-RiXS5Mn1.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
@@ -58,7 +58,7 @@ import "./html-to-json-yjzEN9OX.js";
 import "himalaya";
 import "lodash";
 import "./web-blocks.js";
-const Ar = $.lazy(() => import("react-json-view"));
+const Pr = $.lazy(() => import("react-json-view"));
 function Lr(r) {
   const s = [], t = {};
   function o(l, d) {
@@ -76,7 +76,7 @@ const je = ({ data: r, fullView: s }) => {
   return s ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
-      Ar,
+      Pr,
       {
         style: { maxHeight: "40vh", overflowY: "auto" },
         name: "Content",
@@ -100,24 +100,24 @@ const je = ({ data: r, fullView: s }) => {
   dataType: d,
   appliedBindings: a
 }) => {
-  const { paths: c, pathsType: i } = Lr(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, h = r === "PROP", [n, y] = j(!1), x = _(() => r === "PROP" ? c.filter(
-    (u) => !A(a, u) && g(p, `props.${ue(gt(u, "."))}.binding`)
-  ) : c.filter((u) => d === g(i, u, "")), [r, c, a, d, p]);
+  const { paths: c, pathsType: i } = Lr(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, y = r === "PROP", [n, h] = j(!1), g = _(() => r === "PROP" ? c.filter(
+    (u) => !P(a, u) && x(p, `props.${ue(xt(u, "."))}.binding`)
+  ) : c.filter((u) => d === x(i, u, "")), [r, c, a, d, p]);
   return M(() => {
     s && l(s);
   }, [s, 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: n, onOpenChange: y, children: [
+      /* @__PURE__ */ e.jsxs(Yt, { open: n, onOpenChange: h, children: [
         /* @__PURE__ */ e.jsx(Ft, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          ge,
+          xe,
           {
             variant: "outline",
             size: "sm",
             className: ` ${m(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
             children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(d) }),
+                y && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(d) }),
                 s
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
@@ -131,20 +131,20 @@ const je = ({ data: r, fullView: s }) => {
           /* @__PURE__ */ e.jsx(Wt, { placeholder: `Choose ${le(r)}...` }),
           /* @__PURE__ */ e.jsxs(Ut, { children: [
             /* @__PURE__ */ e.jsx(Kt, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(qt, { children: C(x, (u) => /* @__PURE__ */ e.jsxs(
+            /* @__PURE__ */ e.jsx(qt, { children: C(g, (u) => /* @__PURE__ */ e.jsxs(
               Gt,
               {
                 value: u,
-                className: `cursor-pointer ${h ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
+                className: `cursor-pointer ${y ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
                 onSelect: (f) => {
-                  t(xt(x, (k) => k === f) || null), y(!1);
+                  t(gt(g, (k) => k === f) || null), h(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
                     /* @__PURE__ */ e.jsx(Nr, { className: `w-4 h-4 text-green-500 ${s === u ? "" : "opacity-0"}` }),
                     u
                   ] }),
-                  h ? /* @__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(g(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: g(o, u) }) })
+                  y ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: Y(x(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: x(o, u) }) })
                 ]
               },
               u
@@ -153,7 +153,7 @@ const je = ({ data: r, fullView: s }) => {
         ] }) })
       ] })
     ] }),
-    !h && !m(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: g(o, s, ""), fullView: !0 }) })
+    !y && !m(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: x(o, s, ""), fullView: !0 }) })
   ] });
 }, Er = ({
   appliedBindings: r = [],
@@ -161,12 +161,12 @@ const je = ({ data: r, fullView: s }) => {
   editMode: t,
   item: o
 }) => {
-  const [l, d] = j(t ? o.key : ""), [a, c] = j(t ? o.value : ""), i = q(), [p] = lt(), h = B(
-    (x, u) => {
-      if (m(x))
+  const [l, d] = j(t ? o.key : ""), [a, c] = j(t ? o.value : ""), i = q(), [p] = lt(), y = B(
+    (g, u) => {
+      if (m(g))
         return "";
       {
-        const f = g(u === "PROP" ? i : p, x, "");
+        const f = x(u === "PROP" ? i : p, g, "");
         if (ie(f))
           return "list";
         const k = typeof f;
@@ -174,7 +174,7 @@ const je = ({ data: r, fullView: s }) => {
       }
     },
     [i, p]
-  ), [n, y] = j(t ? h(o.key, "PROP") : "");
+  ), [n, h] = j(t ? y(o.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs(Jt, { children: [
       /* @__PURE__ */ e.jsx(Qt, { children: "Add Data Binding" }),
@@ -189,9 +189,9 @@ const je = ({ data: r, fullView: s }) => {
           placeholder: "Enter prop key",
           value: l,
           setValue: d,
-          onChange: (x) => {
-            const u = h(x, "PROP");
-            d(x), n !== u && c(""), y(u);
+          onChange: (g) => {
+            const u = y(g, "PROP");
+            d(g), n !== u && c(""), h(u);
           },
           data: i,
           dataType: n,
@@ -207,9 +207,9 @@ const je = ({ data: r, fullView: s }) => {
           placeholder: "Enter data path",
           value: a,
           setValue: c,
-          onChange: (x) => {
-            const u = h(x, "PATH");
-            c(n === u ? x : "");
+          onChange: (g) => {
+            const u = y(g, "PATH");
+            c(n === u ? g : "");
           },
           data: p,
           dataType: n,
@@ -218,7 +218,7 @@ const je = ({ data: r, fullView: s }) => {
       )
     ] }),
     /* @__PURE__ */ e.jsx(tr, { children: /* @__PURE__ */ e.jsx(
-      ge,
+      xe,
       {
         type: "submit",
         className: "mt-4",
@@ -252,21 +252,21 @@ const je = ({ data: r, fullView: s }) => {
   dataProvider: l,
   appliedBindings: d
 }) => {
-  const [a, c] = j("string"), i = (p, h) => {
+  const [a, c] = j("string"), i = (p, y) => {
     if (m(p))
       return "";
     {
-      const n = g(h === "PROP" ? o : l, p, "");
+      const n = x(y === "PROP" ? o : l, p, "");
       if (ie(n))
         return "list";
-      const y = typeof n;
-      return y === "string" ? "text" : y === "object" ? "model" : y;
+      const h = typeof n;
+      return h === "string" ? "text" : h === "object" ? "model" : h;
     }
   };
   return M(() => c(() => i(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
     /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: r.key }),
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
-    /* @__PURE__ */ e.jsx(je, { data: g(l, r.value, "") }),
+    /* @__PURE__ */ e.jsx(je, { data: x(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
       /* @__PURE__ */ e.jsx(st, { editMode: !0, onAddBinding: s, appliedBindings: d, item: r, children: /* @__PURE__ */ e.jsx(_r, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
       /* @__PURE__ */ e.jsx(
@@ -281,10 +281,10 @@ const je = ({ data: r, fullView: s }) => {
   ] });
 }, Mr = ({ bindingData: r, onChange: s }) => {
   const t = q(), [o] = lt(), l = Tr(), [d, a] = j(
-    C(r, (n, y) => ({ key: y, value: n }))
+    C(r, (n, h) => ({ key: h, value: n }))
   );
   M(() => {
-    a(C(r, (n, y) => ({ key: y, value: n })));
+    a(C(r, (n, h) => ({ key: h, value: n })));
   }, [t == null ? void 0 : t._id]);
   const c = _(() => {
     if (m(o))
@@ -294,21 +294,21 @@ const je = ({ data: r, fullView: s }) => {
     const n = ve(d);
     return m(n == null ? void 0 : n.key) || m(n == null ? void 0 : n.value);
   }, [o, d]), i = (n) => {
-    const y = we(d, (x) => x.key !== n.key);
-    a([...y, n]), h([...y, n]);
+    const h = we(d, (g) => g.key !== n.key);
+    a([...h, n]), y([...h, n]);
   }, p = (n) => {
-    const y = we(d, (x, u) => n !== u);
-    h([...y]);
-  }, h = B(
+    const h = we(d, (g, u) => n !== u);
+    y([...h]);
+  }, y = B(
     (n = []) => {
       if (a(n), m(n)) {
         s({});
         return;
       }
-      const y = {};
-      ke(n, (x) => {
-        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && Me(y, x.key, x.value);
-      }), s(y);
+      const h = {};
+      ke(n, (g) => {
+        !m(g == null ? void 0 : g.key) && !m(g == null ? void 0 : g.value) && Me(h, g.key, g.value);
+      }), s(h);
     },
     [s]
   );
@@ -317,12 +317,12 @@ const je = ({ data: r, 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(d, (n, y) => /* @__PURE__ */ e.jsx(
+    C(d, (n, h) => /* @__PURE__ */ e.jsx(
       Or,
       {
         item: n,
         onAddBinding: i,
-        onRemove: () => p(y),
+        onRemove: () => p(h),
         selectedBlock: t,
         dataProvider: o,
         appliedBindings: C(d, "key")
@@ -352,7 +352,7 @@ const je = ({ data: r, fullView: s }) => {
   const l = { type: "object", properties: {} }, d = {};
   return Object.keys(s).forEach((a) => {
     const c = s[a];
-    if (A(["slot", "styles"], c.type))
+    if (P(["slot", "styles"], c.type))
       return;
     const i = a;
     l.properties[i] = or(c), d[i] = ar(c);
@@ -381,19 +381,19 @@ const je = ({ data: r, fullView: s }) => {
   );
 });
 function Yr() {
-  const r = q(), { createSnapshot: s } = We(), t = Ue(), o = tt(r._type), l = { ...r }, d = pr("dataBindingSupport", !1), a = () => s(), c = ({ formData: n }, y) => {
-    if (y) {
-      const x = y.replace("root.", "");
-      t([r._id], { [x]: g(n, x) });
+  const r = q(), { createSnapshot: s } = We(), t = Ue(), o = tt(r._type), l = { ...r }, d = pr("dataBindingSupport", !1), a = () => s(), c = ({ formData: n }, h) => {
+    if (h) {
+      const g = h.replace("root.", "");
+      t([r._id], { [g]: x(n, g) });
     }
   }, i = {
     _name: kr({
       title: "Name",
-      default: g(r, "_name", r._type)
+      default: x(r, "_name", r._type)
     })
-  }, p = yt(g(l, "_bindings", {})), h = _(() => {
-    const n = ht(g(o, "props", {}));
-    return d && bt(p, (y) => delete n[y]), n;
+  }, p = ht(x(l, "_bindings", {})), y = _(() => {
+    const n = yt(x(o, "props", {}));
+    return d && bt(p, (h) => delete n[h]), n;
   }, [o, p, d]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
     /* @__PURE__ */ e.jsx(
@@ -412,7 +412,7 @@ function Yr() {
           /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: `h-[8px] w-[8px] rounded-full ${m(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+              className: `h-[8px] w-[8px] rounded-full ${m(x(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
             }
           ),
           "Data Binding"
@@ -420,7 +420,7 @@ function Yr() {
         /* @__PURE__ */ e.jsx(pe, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
           Mr,
           {
-            bindingData: g(l, "_bindings", {}),
+            bindingData: x(l, "_bindings", {}),
             onChange: (n) => {
               c({ formData: { ...l, _bindings: n } }, "root._bindings");
             }
@@ -446,7 +446,7 @@ function Yr() {
               onChange: c,
               createHistorySnapshot: a,
               formData: l,
-              properties: h
+              properties: y
             }
           )
         ] })
@@ -457,13 +457,13 @@ function Yr() {
         onChange: c,
         createHistorySnapshot: a,
         formData: l,
-        properties: h
+        properties: y
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
   ] });
 }
-const Pe = new Dr($r, {
+const Ae = new Dr($r, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -471,22 +471,22 @@ const Pe = new Dr($r, {
 });
 function Fr() {
   var L;
-  const [r] = Se(), s = q(), t = qe(), o = Ge(), [l] = Je(), [d, a] = j(""), c = (L = ue(r)) == null ? void 0 : L.prop, i = ft((g(s, c, "").replace(Pr, "").split(",").pop() || "").split(" "), m), p = () => {
+  const [r] = Se(), s = q(), t = qe(), o = Ge(), [l] = Je(), [d, a] = j(""), c = (L = ue(r)) == null ? void 0 : L.prop, i = ft((x(s, c, "").replace(Ar, "").split(",").pop() || "").split(" "), m), p = () => {
     const w = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     t(l, w, !0), a("");
-  }, [h, n] = j([]), y = ({ value: w }) => {
+  }, [y, n] = j([]), h = ({ value: w }) => {
     const I = w.trim().toLowerCase(), E = I.match(/.+:/g);
     let N = [];
     if (E && E.length > 0) {
       const [D] = E, z = I.replace(D, "");
-      N = Pe.search(z).map((b) => ({
+      N = Ae.search(z).map((b) => ({
         ...b,
         item: { ...b.item, name: D + b.item.name }
       }));
     } else
-      N = Pe.search(I);
+      N = Ae.search(I);
     n(C(N, "item"));
-  }, x = () => {
+  }, g = () => {
     n([]);
   }, u = (w) => w.name, f = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), k = {
     autoComplete: "off",
@@ -504,16 +504,16 @@ function Fr() {
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: `no-scrollbar flex ${h.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
+      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(Te, { className: "mt-2", children: "Add Tailwind classes" }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
           /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
             Br,
             {
-              suggestions: h,
-              onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: x,
+              suggestions: y,
+              onSuggestionsFetchRequested: h,
+              onSuggestionsClearRequested: g,
               getSuggestionValue: u,
               renderSuggestion: f,
               inputProps: k,
@@ -528,7 +528,7 @@ function Fr() {
             }
           ) }),
           /* @__PURE__ */ e.jsx(
-            ge,
+            xe,
             {
               variant: "outline",
               className: "h-6 border-gray-700",
@@ -788,35 +788,35 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   {
     heading: "typography.heading",
     items: [
-      { type: "dropdown", property: "typography.font", label: "typography.font" },
-      { type: "arbitrary", property: "typography.size", label: "typography.size", units: H },
-      { type: "arbitrary", property: "typography.height", label: "typography.height", units: H.concat("-") },
-      { type: "range", property: "typography.weight", label: "typography.weight" },
-      { type: "color", property: "typography.color", label: "typography.color" },
+      { type: "dropdown", property: "fontFamily", label: "typography.font" },
+      { type: "arbitrary", property: "fontSize", label: "typography.size", units: H },
+      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: H.concat("-") },
+      { type: "range", property: "fontWeight", label: "typography.weight" },
+      { type: "color", property: "textColor", label: "typography.color" },
       {
         styleType: "accordion",
         heading: "typography.alignments",
         items: [
-          { type: "dropdown", property: "typography.align", label: "typography.align" },
-          { type: "dropdown", property: "typography.valign", label: "typography.valign" }
+          { type: "dropdown", property: "textAlign", label: "typography.align" },
+          { type: "dropdown", property: "verticalAlign", label: "typography.valign" }
         ]
       },
       {
         styleType: "accordion",
         heading: "typography.spacing_decoration_more",
         items: [
-          { type: "dropdown", property: "typography.spacing", label: "typography.spacing" },
-          { type: "dropdown", property: "typography.decoration", label: "typography.decoration" },
-          { type: "range", property: "typography.thickness", label: "typography.thickness" },
-          { type: "dropdown", property: "typography.transform", label: "typography.transform" }
+          { type: "dropdown", property: "letterSpacing", label: "typography.spacing" },
+          { type: "dropdown", property: "textDecoration", label: "typography.decoration" },
+          { type: "range", property: "textDecorationThickness", label: "typography.thickness" },
+          { type: "dropdown", property: "textTransform", label: "typography.transform" }
         ]
       },
       {
         styleType: "accordion",
         heading: "typography.whitespace_breaks",
         items: [
-          { type: "dropdown", property: "typography.whitespace", label: "typography.whitespace" },
-          { type: "dropdown", property: "typography.wordbreak", label: "typography.wordbreak" }
+          { type: "dropdown", property: "whitespace", label: "typography.whitespace" },
+          { type: "dropdown", property: "wordbreak", label: "typography.wordbreak" }
         ]
       }
     ]
@@ -996,32 +996,32 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   invisible: He,
   // display
   hidden: He,
-  gap: P,
+  gap: A,
   gapX: T,
   gapY: R,
   spaceX: T,
   spaceY: R,
-  overscroll: P,
+  overscroll: A,
   overscrollX: T,
   overscrollY: R,
-  overflow: P,
+  overflow: A,
   overflowX: T,
   overflowY: R,
   top: Q,
   right: ee,
   bottom: te,
   left: re,
-  inset: P,
+  inset: A,
   insetX: T,
   insetY: R,
-  border: P,
+  border: A,
   borderX: T,
   borderY: R,
   borderTop: Q,
   borderRight: ee,
   borderBottom: te,
   borderLeft: re,
-  borderRadius: P,
+  borderRadius: A,
   borderRadiusX: T,
   borderRadiusY: R,
   borderRadiusTop: Q,
@@ -1034,7 +1034,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   borderRadiusBottomLeft: Tt,
   divideXWidth: T,
   divideYWidth: R,
-  scale: P,
+  scale: A,
   scaleX: T,
   scaleY: R,
   skewX: T,
@@ -1042,7 +1042,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   translateX: T,
   translateY: R,
   // padding
-  padding: P,
+  padding: A,
   paddingX: T,
   paddingY: R,
   paddingTop: Q,
@@ -1050,7 +1050,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   paddingBottom: te,
   paddingLeft: re,
   // margin
-  margin: P,
+  margin: A,
   marginX: T,
   marginY: R,
   marginTop: Q,
@@ -1069,7 +1069,7 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
   underline: $t,
   overline: It,
   // transform
-  uppercase: Pt,
+  uppercase: At,
   block: () => /* @__PURE__ */ e.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ e.jsx(
       "path",
@@ -1182,12 +1182,12 @@ const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
       }
     )
   ] }),
-  static: At
+  static: Pt
 }, oe = Oe({ canReset: !1, canChange: !0 }), Ur = ({ children: r, canReset: s = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: s, canChange: t }, children: r })
 ), at = ({ label: r, property: s, onChange: t }) => {
-  const o = _(() => g(ye, `${s}.classes`, [""]), [s]), l = ae(s), d = _(() => g(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(d);
+  const o = _(() => x(he, `${s}.classes`, [""]), [s]), l = ae(s), d = _(() => x(l, "cls", ""), [l]), { canChange: a } = se(oe), c = /\[.*\]/g.test(d);
   return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded " : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ e.jsx(ur, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
     /* @__PURE__ */ e.jsxs(F, { delayDuration: 100, children: [
@@ -1227,7 +1227,7 @@ function Ce({ selected: r, onChange: s, rounded: t = !1, options: o, disabled: l
   );
 }
 const Kr = ({ property: r, onChange: s }) => {
-  const { canReset: t, canChange: o } = se(oe), l = ae(r), d = _(() => g(l, "cls", ""), [l]), a = _(() => g(ye, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
+  const { canReset: t, canChange: o } = se(oe), l = ae(r), d = _(() => x(l, "cls", ""), [l]), a = _(() => x(he, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: d }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "button",
@@ -1262,7 +1262,7 @@ const Kr = ({ property: r, onChange: s }) => {
     )
   ] }) });
 }, qr = ({ property: r, onChange: s }) => {
-  const t = _(() => g(ye, `${r}.classes`, [""]), [r]), { canChange: o } = se(oe), l = ae(r), d = _(() => g(l, "cls", ""), [l]);
+  const t = _(() => x(he, `${r}.classes`, [""]), [r]), { canChange: o } = se(oe), l = ae(r), d = _(() => x(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs(F, { children: [
     /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
       "button",
@@ -1271,7 +1271,7 @@ const Kr = ({ property: r, onChange: s }) => {
         disabled: !o,
         onClick: () => s(a, r),
         className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${d === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(g(ot, a, Xe))
+        children: $.createElement(x(ot, a, Xe))
       }
     ) }),
     /* @__PURE__ */ e.jsx(Z, { children: Y(le(a)) })
@@ -1289,7 +1289,7 @@ const Kr = ({ property: r, onChange: s }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, Jr = ({ property: r, onChange: s }) => {
-  const t = ae(r), o = _(() => g(t, "cls", ""), [t]), { canChange: l } = se(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), h = g(p, "1", ""), n = g(p, "2", ""), y = B(
+  const t = ae(r), o = _(() => x(t, "cls", ""), [t]), { canChange: l } = se(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), y = x(p, "1", ""), n = x(p, "2", ""), h = B(
     // eslint-disable-next-line no-shadow
     (u) => {
       ["current", "inherit", "transparent", "black", "white"].includes(u) ? (a([]), i({ color: u })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
@@ -1297,30 +1297,30 @@ const Kr = ({ property: r, onChange: s }) => {
     [a, i]
   );
   M(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(h))
+    if (["current", "inherit", "transparent", "black", "white"].includes(y))
       return a([]);
     a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [h]);
-  const x = B(
+  }, [y]);
+  const g = B(
     // eslint-disable-next-line no-shadow
     (u) => {
-      i({ color: h, shade: u });
+      i({ color: y, shade: u });
     },
-    [h]
+    [y]
   );
   return M(() => {
     i({ color: "", shade: "" });
   }, [t]), M(() => {
-    const f = `${g(Gr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    f.match(new RegExp(g(ye, `${r}.regExp`, ""))) && s(f, r);
+    const f = `${x(Gr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    f.match(new RegExp(x(he, `${r}.regExp`, ""))) && s(f, r);
   }, [c, s, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
     /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
       Ce,
       {
         disabled: !l,
         rounded: !0,
-        selected: h,
-        onChange: y,
+        selected: y,
+        onChange: h,
         options: [
           "current",
           "transparent",
@@ -1353,9 +1353,9 @@ const Kr = ({ property: r, onChange: s }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: n, disabled: !h || !l, onChange: x, options: d }) })
+    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: n, disabled: !y || !l, onChange: g, options: d }) })
   ] });
-}, Ae = (r, s) => {
+}, Pe = (r, s) => {
   r = r.toLowerCase();
   let t = r.trim().replace(/ |\+/g, "");
   if ((t === "auto" || t === "none") && s.includes(t))
@@ -1375,17 +1375,17 @@ const Qr = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (A(r, "skew-"))
+  if (P(r, "skew-"))
     return { value: `${s}${t}`, unit: "deg" };
-  if (A(r, "rotate-"))
+  if (P(r, "rotate-"))
     return { value: `${s}${t}`, unit: "deg" };
-  if (A(r, "opacity-"))
+  if (P(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (A(r, "duration-") || A(r, "delay-"))
+  if (P(r, "duration-") || P(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (A(r, "translate-") && !t.includes("/"))
+  if (P(r, "translate-") && !t.includes("/"))
     return { value: `${s}${`${t / 4}`}`, unit: "rem" };
-  if (A(r, "scale-"))
+  if (P(r, "scale-"))
     return { value: `${s}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
     const o = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
@@ -1500,7 +1500,7 @@ const el = (r) => {
   const s = r.match(/\[.*\]/g);
   if (s === null)
     return tl(r);
-  const t = g(s, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
+  const t = x(s, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", l = ue(t.match(/\d+.\d+|\d+/g));
   return { value: `${o}${l}`, unit: t.replace(l, "") };
 }, tl = (r) => m(r) ? { value: "", unit: "" } : Qr(r), nt = $.createContext({
   setDragData: () => {
@@ -1538,7 +1538,7 @@ const el = (r) => {
     }
   );
 }, ll = ({ onSelect: r, current: s, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
-  ge,
+  xe,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
     color: s === o ? "primary" : void 0,
@@ -1550,37 +1550,37 @@ const el = (r) => {
   },
   o
 )) }), Le = 50, sl = (r) => {
-  const [s, t] = j(!1), [o, l] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: h } = r, [n, y] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
+  const [s, t] = j(!1), [o, l] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: y } = r, [n, h] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [g, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
   M(() => {
     const { value: b, unit: v } = el(d);
     if (v === "") {
-      l(b), y(i != null && i.toLowerCase().includes("width") ? "%" : ue(p));
+      l(b), h(i != null && i.toLowerCase().includes("width") ? "%" : ue(p));
       return;
     }
-    y(v), l(v === "class" || m(b) ? "" : b);
+    h(v), l(v === "class" || m(b) ? "" : b);
   }, [d, i, p]);
   const N = fe((b) => a(b), [a], Le), D = fe((b) => a(b, !1), [a], Le), z = B(
     (b = !1) => {
-      const v = Ae(`${o}`, p);
-      if (g(v, "error", !1)) {
+      const v = Pe(`${o}`, p);
+      if (x(v, "error", !1)) {
         u(!0);
         return;
       }
-      const S = g(v, "unit") !== "" ? g(v, "unit") : n;
+      const S = x(v, "unit") !== "" ? x(v, "unit") : n;
       if (S === "auto" || S === "none") {
         N(`${c}${S}`);
         return;
       }
-      if (g(v, "value") === "")
+      if (x(v, "value") === "")
         return;
-      const J = `${g(v, "value", "").startsWith("-") ? "-" : ""}${c}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      const J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       b ? D(J) : N(J);
     },
     [N, D, o, n, c, p]
   ), G = B(
     (b) => {
-      const v = Ae(`${o}`, p);
-      if (g(v, "error", !1)) {
+      const v = Pe(`${o}`, p);
+      if (x(v, "error", !1)) {
         u(!0);
         return;
       }
@@ -1588,9 +1588,9 @@ const el = (r) => {
         N(`${c}${b}`);
         return;
       }
-      if (g(v, "value") === "")
+      if (x(v, "value") === "")
         return;
-      const S = g(v, "unit") !== "" ? g(v, "unit") : b, J = `${g(v, "value", "").startsWith("-") ? "-" : ""}${c}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      const S = x(v, "unit") !== "" ? x(v, "unit") : b, J = `${x(v, "value", "").startsWith("-") ? "-" : ""}${c}[${x(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
       N(J);
     },
     [N, o, c, p]
@@ -1634,7 +1634,7 @@ const el = (r) => {
           value: L ? f : o,
           className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            g ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -1651,13 +1651,13 @@ const el = (r) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(gr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ e.jsx(xr, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
           ll,
           {
             units: p,
             current: n,
             onSelect: (b) => {
-              t(!1), y(b), G(b);
+              t(!1), h(b), G(b);
             }
           }
         ) }) })
@@ -1682,13 +1682,13 @@ const el = (r) => {
         },
         currentValue: o,
         unit: n,
-        negative: h,
+        negative: y,
         cssProperty: i
       }
     )
   ] }) }) });
 }, ae = (r) => {
-  const s = xe();
+  const s = ge();
   return jt(s, { property: r });
 }, ol = (r, s) => {
   const t = {
@@ -1699,7 +1699,7 @@ const el = (r) => {
     xl: 4,
     "2xl": 5
   };
-  return t[g(r, "mq", "xs")] <= t[s];
+  return t[x(r, "mq", "xs")] <= t[s];
 }, al = {
   width: "w-",
   height: "h-",
@@ -1775,17 +1775,17 @@ const el = (r) => {
   "2xl": "1536px"
 }, nl = (r) => `${r.toUpperCase()} ${Ee[r] ? `(${Ee[r]} & up)` : ""}`, Re = (r) => {
   const { t: s } = K(), { type: t = "icons", label: o, property: l, onEmitChange: d = () => {
-  }, units: a, negative: c = !1 } = r, [i] = xr(), [p] = Qe(), [, h] = Be(), n = ae(l), y = qe(), x = Ge(), [u] = Je(), f = _(() => g(n, "fullCls", ""), [n]), k = B(
+  }, units: a, negative: c = !1 } = r, [i] = gr(), [p] = Qe(), [, y] = Be(), n = ae(l), h = qe(), g = Ge(), [u] = Je(), f = _(() => x(n, "fullCls", ""), [n]), k = B(
     (D, z = !0) => {
-      const G = { dark: i, mq: h, mod: p, cls: D, property: l, fullCls: "" };
+      const G = { dark: i, mq: y, mod: p, cls: D, property: l, fullCls: "" };
       (i || p !== "") && (G.mq = "xs");
       const b = Ir(G);
-      y(u, [b], z);
+      h(u, [b], z);
     },
-    [u, i, h, p, l, y]
+    [u, i, y, p, l, h]
   ), L = B(() => {
-    x(u, [f]);
-  }, [u, f, x]), w = _(() => ol(n, h), [n, h]);
+    g(u, [f]);
+  }, [u, f, g]), w = _(() => ol(n, y), [n, y]);
   M(() => {
     d(w, n);
   }, [w, d, n]);
@@ -1801,7 +1801,7 @@ const el = (r) => {
       }[D]);
     },
     [I]
-  ), N = g(n, "dark", null) === i && g(n, "mod", null) === p && g(n, "mq", null) === h;
+  ), N = x(n, "dark", null) === i && x(n, "mod", null) === p && x(n, "mq", null) === y;
   return /* @__PURE__ */ e.jsx(Ur, { canChange: w, canReset: n && N, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ e.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ e.jsx("span", { className: `text-[11px] ${n && !N ? "text-foreground" : ""}`, children: s(o) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
@@ -1809,8 +1809,8 @@ const el = (r) => {
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
           sl,
           {
-            currentClass: g(n, "cls", ""),
-            classPrefix: g(al, l, ""),
+            currentClass: x(n, "cls", ""),
+            classPrefix: x(al, l, ""),
             units: a || [],
             onChange: k,
             negative: c,
@@ -1834,7 +1834,7 @@ const el = (r) => {
         /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ e.jsxs("span", { className: "font-bold ", children: [
-            nl(g(n, "mq")),
+            nl(x(n, "mq")),
             i && !n.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -1842,11 +1842,11 @@ const el = (r) => {
             "button",
             {
               type: "button",
-              onClick: () => E(g(n, "mq")),
+              onClick: () => E(x(n, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                g(n, "mq").toUpperCase()
+                x(n, "mq").toUpperCase()
               ]
             }
           )
@@ -1863,7 +1863,7 @@ const el = (r) => {
   units: d = il,
   negative: a = !1
 }) => {
-  const { t: c } = K(), [i, p] = j(s[0].key), h = xe(), n = B((y) => C(h, "property").includes(y), [h]);
+  const { t: c } = K(), [i, p] = j(s[0].key), y = ge(), n = B((h) => C(y, "property").includes(h), [y]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1872,22 +1872,22 @@ const el = (r) => {
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
           r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(r) }),
           /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            s.map(({ label: y, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(F, { children: [
+            s.map(({ label: h, key: g }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(F, { children: [
               /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(x),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => p(g),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${g === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     $.createElement("div", {
-                      className: n(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: n(g) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    $.createElement(g(ot, x, Xe), { className: "text-inherit w-3 h-3" })
+                    $.createElement(x(ot, g, Xe), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(Z, { children: Y(le(y)) })
+              /* @__PURE__ */ e.jsx(Z, { children: Y(le(h)) })
             ] }) }))
           ) })
         ] }),
@@ -1905,7 +1905,7 @@ const el = (r) => {
     }
   );
 }, dl = ({ heading: r, items: s }) => {
-  const { t } = K(), o = xe(), l = _(() => {
+  const { t } = K(), o = ge(), l = _(() => {
     const d = (i) => U(
       i.map((p) => p.styleType === "multiple" ? C(p.options, "key") : p.property)
     ), a = U(
@@ -1926,14 +1926,14 @@ const el = (r) => {
     /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
   ] });
 }, cl = Oe({}), me = ({ section: r }) => {
-  const { t: s } = K(), t = xe(), o = B(
+  const { t: s } = K(), t = ge(), o = B(
     (a = []) => {
       const c = {};
       for (let p = 0; p < t.length; p++)
         c[t[p].property] = t[p].cls;
       let i = !0;
       for (const p in a)
-        if (!he(c, p) || c[p] !== a[p]) {
+        if (!ye(c, p) || c[p] !== a[p]) {
           i = !1;
           break;
         }
@@ -1944,7 +1944,7 @@ const el = (r) => {
     if (t.length > 0 && r.heading === "classes.heading")
       return !0;
     const a = (p) => U(
-      p.map((h) => h.styleType === "multiple" ? U(C(h.options, "key")) : h.property)
+      p.map((y) => y.styleType === "multiple" ? U(C(y.options, "key")) : y.property)
     ), c = U(
       r.items.map((p) => p.styleType === "accordion" ? a(p.items) : p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
     ), i = C(t, "property");
@@ -1956,7 +1956,7 @@ const el = (r) => {
       s(r.heading)
     ] }) }),
     /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((a) => he(a, "component") ? $.createElement(a.component, { key: a.label }) : he(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+      r.items.map((a) => ye(a, "component") ? $.createElement(a.component, { key: a.label }) : ye(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(dl, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
     ) })
   ] }) });
 }, pl = ({
@@ -2000,24 +2000,24 @@ const el = (r) => {
     )
   ] })
 ] }), ul = ({ section: r }) => {
-  var y;
-  const { setSyncState: s } = yr(), t = q(), [o, l] = j([]), [d] = Se(), a = Ue(), c = `${g(d, "0.prop")}_attrs`;
+  var h;
+  const { setSyncState: s } = hr(), t = q(), [o, l] = j([]), [d] = Se(), a = Ue(), c = `${x(d, "0.prop")}_attrs`;
   ne.useEffect(() => {
-    const x = C(g(t, c), (u, f) => ({ key: f, value: u }));
-    m(x) ? l([]) : l(x);
-  }, [g(t, c)]);
-  const i = () => l([...o, { key: "", value: "" }]), p = (x) => {
-    const u = we(o, (f, k) => x !== k);
+    const g = C(x(t, c), (u, f) => ({ key: f, value: u }));
+    m(g) ? l([]) : l(g);
+  }, [x(t, c)]);
+  const i = () => l([...o, { key: "", value: "" }]), p = (g) => {
+    const u = we(o, (f, k) => g !== k);
     n(u);
-  }, h = (x, u) => {
+  }, y = (g, u) => {
     const f = [...o];
-    f[u][x.target.name] = x.target.value, n(f);
+    f[u][g.target.name] = g.target.value, n(f);
   }, n = ne.useCallback(
-    (x = []) => {
+    (g = []) => {
       const u = {};
-      ke(x, (f) => {
+      ke(g, (f) => {
         m(f.key) || Me(u, f.key, f.value);
-      }), a([g(t, "_id")], { [c]: u }), s("UNSAVED");
+      }), a([x(t, "_id")], { [c]: u }), s("UNSAVED");
     },
     [t, s, a, c]
   );
@@ -2026,7 +2026,7 @@ const el = (r) => {
       /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `h-[8px] w-[8px] rounded-full ${m(g(t, c)) ? "bg-gray-300" : "bg-blue-500"}`
+          className: `h-[8px] w-[8px] rounded-full ${m(x(t, c)) ? "bg-gray-300" : "bg-blue-500"}`
         }
       ),
       "Attributes"
@@ -2037,10 +2037,10 @@ const el = (r) => {
         /* @__PURE__ */ e.jsxs(
           "div",
           {
-            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!m(o) && m((y = ve(o)) == null ? void 0 : y.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
+            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!m(o) && m((h = ve(o)) == null ? void 0 : h.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 x;
-              !m(o) && m((x = ve(o)) == null ? void 0 : x.key) || i();
+              var g;
+              !m(o) && m((g = ve(o)) == null ? void 0 : g.key) || i();
             },
             children: [
               /* @__PURE__ */ e.jsx(Ne, { width: 12, height: 12 }),
@@ -2052,15 +2052,15 @@ const el = (r) => {
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
         m(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
         ne.Children.toArray(
-          C(o, (x, u) => {
+          C(o, (g, u) => {
             const f = o.length > 0 && u < o.length - 1;
             return /* @__PURE__ */ e.jsx(
               pl,
               {
-                item: x,
+                item: g,
                 index: u,
                 canDelete: f,
-                onChange: h,
+                onChange: y,
                 onRemove: () => p(u)
               }
             );
@@ -2070,8 +2070,8 @@ const el = (r) => {
     ] }) })
   ] });
 };
-function gl() {
-  const [r, s] = Qe(), { flexChild: t, gridChild: o } = hr(), [, l] = Hr(br), { t: d } = K(), [a] = Se();
+function xl() {
+  const [r, s] = Qe(), { flexChild: t, gridChild: o } = yr(), [, l] = Hr(br), { t: d } = K(), [a] = Se();
   return m(a) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
     /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: d("no_styling_block_selected") }),
@@ -2113,7 +2113,7 @@ function gl() {
     ] })
   );
 }
-const xl = {
+const gl = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2136,13 +2136,13 @@ const xl = {
     cssProperty: ""
   }), a = fe(
     (i) => {
-      const p = !g(l, "negative", !1), h = g(l, "cssProperty", "");
+      const p = !x(l, "negative", !1), y = x(l, "cssProperty", "");
       let n = parseFloat(l.dragStartValue);
       n = ze(n) ? 0 : n;
-      let y = xl[l.dragUnit];
-      (W(h, "scale") || h === "opacity") && (y = 10);
-      let u = (l.dragStartY - i.pageY) / y + n;
-      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), o(`${u}`);
+      let h = gl[l.dragUnit];
+      (W(y, "scale") || y === "opacity") && (h = 10);
+      let u = (l.dragStartY - i.pageY) / h + n;
+      p && u < 0 && (u = 0), y === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), o(`${u}`);
     },
     [l],
     50
@@ -2183,7 +2183,7 @@ const xl = {
           children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Yr, {}) })
         }
       ),
-      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(gl, {}) })
+      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(xl, {}) })
     ] })
   ] }) });
 };