@chaibuilder/sdk 1.2.48 → 1.2.49

package/dist/{Settings-WcLqIeQy.js → Settings-aEcWAB0x.js}

@@ -1,21 +1,21 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
 import * as ne from "react";
-import I, { useState as j, useMemo as T, useEffect as P, useCallback as H, memo as mt, useRef as ft, createContext as Fe, useContext as se } from "react";
+import I, { useState as j, useMemo as T, useEffect as P, useCallback as H, memo as mt, useRef as ft, createContext as Xe, useContext as se } from "react";
 import { useThrottledCallback as de } from "@react-hookz/web";
-import { forEach as Ne, isArray as ce, omit as vt, truncate as jt, includes as X, get as y, first as ae, split as wt, startCase as F, toLower as re, isEmpty as m, map as _, find as Ze, last as Ct, filter as ye, set as We, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as be, reject as St, kebabCase as Tt, startsWith as W, nth as He, isNumber as Rt, parseInt as Vt, isNaN as Ue, findLast as Ht, flatten as De, intersection as Dt, has as ie, isNull as Bt } from "lodash-es";
+import { forEach as Ne, isArray as ce, omit as vt, truncate as jt, includes as F, get as y, first as ae, split as wt, startCase as X, toLower as re, isEmpty as m, map as _, find as Ze, last as Ct, filter as ye, set as We, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as be, reject as St, startsWith as W, nth as He, isNumber as Tt, parseInt as Rt, isNaN as Ue, findLast as Vt, flatten as De, intersection as Ht, has as ie, isNull as Dt } from "lodash-es";
 import { useTranslation as B } from "react-i18next";
-import { CopyIcon as It, PlusIcon as _e, Cross2Icon as Ge, EyeOpenIcon as Pt, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as At, ArrowTopRightIcon as $t, ArrowBottomRightIcon as Mt, ArrowBottomLeftIcon as Et, AlignLeftIcon as Lt, AlignCenterHorizontallyIcon as Ot, AlignRightIcon as zt, StretchHorizontallyIcon as Yt, FontItalicIcon as Xt, UnderlineIcon as Ft, OverlineIcon as Zt, LetterCaseUppercaseIcon as Wt, Cross1Icon as Ut, InfoCircledIcon as Se, MinusIcon as Gt, BoxIcon as Ke, RowSpacingIcon as Kt, TriangleDownIcon as qt, CrossCircledIcon as Jt, CaretDownIcon as Qt, MixerHorizontalIcon as qe } from "@radix-ui/react-icons";
-import { a2 as Je, aP as Qe, aQ as et, B as A, aR as tt, aS as er, aT as tr, aU as rr, aV as sr, aW as ar, aX as lr, M as G, aK as rt, $ as or, a0 as nr, a1 as ir, aY as dr, Z as cr, ab as pr, _ as ur, ac as $, ad as M, ae as E, aZ as gr, a_ as xr, a$ as yr, b0 as hr, b1 as br, b2 as mr, b3 as fr, R as st, Q as at, h as lt, b4 as vr, b5 as ot, b6 as me, b7 as fe, b8 as ve, b9 as jr, ba as wr, ah as Cr, bb as kr, Y as pe, n as Te, I as nt, L as it, bc as dt, bd as je, j as Nr, be as _r, J as ue, v as Sr, P as Tr, o as Ie, au as Rr, av as Vr, aw as Hr, bf as ct, ax as Pe, ay as Ae, bg as $e, bh as Me, bi as Ee, S as Dr } from "./ChaiBuilderEditor-dKHRL-Es.js";
-import { Check as Br, EditIcon as Ir, TrashIcon as Pr, Loader as Ar, SparklesIcon as $r, DeleteIcon as Mr } from "lucide-react";
-import { getBlockComponent as Re, getChaiDataProviders as Er, useGlobalStylingPresets as Lr } from "@chaibuilder/runtime";
-import { J as Or, a as zr, d as Yr } from "./index-e0c8PmRQ.js";
-import Xr from "@rjsf/core";
+import { CopyIcon as Bt, PlusIcon as _e, Cross2Icon as Ge, EyeOpenIcon as It, EyeClosedIcon as Be, BorderAllIcon as Y, WidthIcon as R, HeightIcon as V, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as Pt, ArrowTopRightIcon as At, ArrowBottomRightIcon as $t, ArrowBottomLeftIcon as Mt, AlignLeftIcon as Et, AlignCenterHorizontallyIcon as Lt, AlignRightIcon as Ot, StretchHorizontallyIcon as zt, FontItalicIcon as Yt, UnderlineIcon as Ft, OverlineIcon as Xt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as Se, MinusIcon as Ut, BoxIcon as Ke, RowSpacingIcon as Gt, TriangleDownIcon as Kt, CrossCircledIcon as qt, CaretDownIcon as Jt, MixerHorizontalIcon as qe } from "@radix-ui/react-icons";
+import { a2 as Je, aQ as Qe, aR as et, B as A, aS as tt, aT as Qt, aU as er, aV as tr, aW as rr, aX as sr, aY as ar, M as G, aL as rt, $ as lr, a0 as or, a1 as nr, aZ as ir, Z as dr, ab as cr, _ as pr, ac as $, ad as M, ae as E, a_ as ur, a$ as gr, b0 as xr, b1 as yr, b2 as hr, b3 as br, b4 as mr, R as st, Q as at, h as lt, b5 as fr, b6 as ot, b7 as me, b8 as fe, b9 as ve, ba as vr, bb as jr, ah as wr, bc as Cr, Y as pe, n as Te, I as nt, L as it, bd as dt, be as je, j as kr, bf as Nr, J as ue, v as _r, P as Sr, o as Ie, av as Tr, aw as Rr, ax as Vr, bg as ct, ay as Pe, az as Ae, bh as $e, bi as Me, bj as Ee, S as Hr } from "./ChaiBuilderEditor-F2yUJQdt.js";
+import { Check as Dr, EditIcon as Br, TrashIcon as Ir, Loader as Pr, SparklesIcon as Ar, DeleteIcon as $r } from "lucide-react";
+import { getBlockComponent as Re, getChaiDataProviders as Mr, useGlobalStylingPresets as Er } from "@chaibuilder/runtime";
+import { J as Lr, a as Or, d as zr } from "./index-e0c8PmRQ.js";
+import Yr from "@rjsf/core";
 import Fr from "@rjsf/validator-ajv8";
-import { u as Zr } from "./useCanvasSettings-UzjYHFG5.js";
-import Wr from "react-autosuggest";
-import Ur from "fuse.js";
-import { A as Gr, C as ge, g as Kr } from "./utils-iMv3T4WT.js";
-import { a as qr } from "./STRINGS--j49GZJP.js";
+import { u as Xr } from "./useCanvasSettings-2YhM5XKu.js";
+import Zr from "react-autosuggest";
+import Wr from "fuse.js";
+import { A as Ur, C as ge, g as Gr } from "./utils-iMv3T4WT.js";
+import { a as Kr } from "./STRINGS--j49GZJP.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -50,7 +50,7 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-function Jr(r) {
+function qr(r) {
   const a = [], t = {};
   function n(l, s) {
     Ne(s, (d, c) => {
@@ -67,12 +67,12 @@ const we = ({ data: r, fullView: a }) => {
   return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
     /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsx(
-      Or,
+      Lr,
       {
         data: r,
-        shouldExpandNode: zr,
+        shouldExpandNode: Or,
         style: {
-          ...Yr,
+          ...zr,
           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"
@@ -92,15 +92,15 @@ const we = ({ data: r, fullView: a }) => {
   dataType: s,
   appliedBindings: d
 }) => {
-  const { paths: c, pathsType: o } = Jr(n), p = r === "PROP" ? Re(n == null ? void 0 : n._type) : {}, h = r === "PROP", [i, g] = j(!1), x = T(() => r === "PROP" ? c.filter(
-    (u) => !X(d, u) && y(p, `props.${ae(wt(u, "."))}.binding`)
-  ) : c.filter((u) => s === y(o, u, "")), [r, c, d, s, p]);
+  const { paths: c, pathsType: o } = qr(n), p = r === "PROP" ? Re(n == null ? void 0 : n._type) : {}, h = r === "PROP", [i, u] = j(!1), x = T(() => r === "PROP" ? c.filter(
+    (g) => !F(d, g) && y(p, `props.${ae(wt(g, "."))}.binding`)
+  ) : c.filter((g) => s === y(o, g, "")), [r, c, d, s, p]);
   return P(() => {
     a && l(a);
   }, [a, 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: F(re(r)) }),
-      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: g, children: [
+      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: X(re(r)) }),
+      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: u, children: [
         /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           A,
           {
@@ -109,37 +109,37 @@ const we = ({ data: r, fullView: a }) => {
             className: ` ${m(a) ? "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: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: F(s) }),
+                h && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: X(s) }),
                 a
               ] }),
               /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
             ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
               "+ Set ",
-              F(re(r))
+              X(re(r))
             ] })
           }
         ) }),
-        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(er, { children: [
-          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${re(r)}...` }),
-          /* @__PURE__ */ e.jsxs(rr, { children: [
-            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(ar, { children: _(x, (u) => /* @__PURE__ */ e.jsxs(
-              lr,
+        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Qt, { children: [
+          /* @__PURE__ */ e.jsx(er, { placeholder: `Choose ${re(r)}...` }),
+          /* @__PURE__ */ e.jsxs(tr, { children: [
+            /* @__PURE__ */ e.jsx(rr, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(sr, { children: _(x, (g) => /* @__PURE__ */ e.jsxs(
+              ar,
               {
-                value: u,
+                value: g,
                 className: `cursor-pointer ${h ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (v) => {
-                  t(Ze(x, (C) => C === v) || null), g(!1);
+                  t(Ze(x, (C) => C === v) || null), u(!1);
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Br, { className: `h-4 w-4 text-green-500 ${a === u ? "" : "opacity-0"}` }),
-                    u
+                    /* @__PURE__ */ e.jsx(Dr, { className: `h-4 w-4 text-green-500 ${a === g ? "" : "opacity-0"}` }),
+                    g
                   ] }),
-                  h ? /* @__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: F(y(o, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: y(n, u) }) })
+                  h ? /* @__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: X(y(o, g, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: y(n, g) }) })
                 ]
               },
-              u
+              g
             )) })
           ] })
         ] }) })
@@ -147,18 +147,18 @@ const we = ({ data: r, fullView: a }) => {
     ] }),
     !h && !m(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: y(n, a, ""), fullView: !0 }) })
   ] });
-}, Qr = ({
+}, Jr = ({
   appliedBindings: r = [],
   onAddBinding: a,
   editMode: t,
   item: n
 }) => {
   const [l, s] = j(t ? n.key : ""), [d, c] = j(t ? n.value : ""), o = G(), [p] = rt(), h = H(
-    (x, u) => {
+    (x, g) => {
       if (m(x))
         return "";
       {
-        const v = y(u === "PROP" ? o : p, x, "");
+        const v = y(g === "PROP" ? o : p, x, "");
         if (ce(v))
           return "list";
         const C = typeof v;
@@ -166,11 +166,11 @@ const we = ({ data: r, fullView: a }) => {
       }
     },
     [o, p]
-  ), [i, g] = j(t ? h(n.key, "PROP") : "");
+  ), [i, u] = j(t ? h(n.key, "PROP") : "");
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(or, { children: [
-      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(ir, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
+    /* @__PURE__ */ e.jsxs(lr, { children: [
+      /* @__PURE__ */ e.jsx(or, { children: "Add Data Binding" }),
+      /* @__PURE__ */ e.jsx(nr, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
       /* @__PURE__ */ e.jsx(
@@ -182,8 +182,8 @@ const we = ({ data: r, fullView: a }) => {
           value: l,
           setValue: s,
           onChange: (x) => {
-            const u = h(x, "PROP");
-            s(x), i !== u && c(""), g(u);
+            const g = h(x, "PROP");
+            s(x), i !== g && c(""), u(g);
           },
           data: o,
           dataType: i,
@@ -200,8 +200,8 @@ const we = ({ data: r, fullView: a }) => {
           value: d,
           setValue: c,
           onChange: (x) => {
-            const u = h(x, "PATH");
-            c(i === u ? x : "");
+            const g = h(x, "PATH");
+            c(i === g ? x : "");
           },
           data: p,
           dataType: i,
@@ -209,7 +209,7 @@ const we = ({ data: r, fullView: a }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(ir, { children: /* @__PURE__ */ e.jsx(
       A,
       {
         type: "submit",
@@ -222,10 +222,10 @@ const we = ({ data: r, fullView: a }) => {
   ] });
 }, pt = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: n, editMode: l = !0, item: s = {} }) => {
   const [d, c] = j(!1);
-  return /* @__PURE__ */ e.jsxs(cr, { children: [
-    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => c(!0), children: a }),
-    d && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
-      Qr,
+  return /* @__PURE__ */ e.jsxs(dr, { children: [
+    /* @__PURE__ */ e.jsx(cr, { disabled: r, asChild: !0, onClick: () => c(!0), children: a }),
+    d && /* @__PURE__ */ e.jsx(pr, { children: /* @__PURE__ */ e.jsx(
+      Jr,
       {
         item: s,
         editMode: l,
@@ -236,7 +236,7 @@ const we = ({ data: r, fullView: a }) => {
       }
     ) })
   ] });
-}, es = ({
+}, Qr = ({
   item: r,
   onAddBinding: a,
   onRemove: t,
@@ -251,8 +251,8 @@ const we = ({ data: r, fullView: a }) => {
       const i = y(h === "PROP" ? n : l, p, "");
       if (ce(i))
         return "list";
-      const g = typeof i;
-      return g === "string" ? "text" : g === "object" ? "model" : g;
+      const u = typeof i;
+      return u === "string" ? "text" : u === "object" ? "model" : u;
     }
   };
   return P(() => c(() => o(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
@@ -260,23 +260,23 @@ const we = ({ data: r, fullView: a }) => {
     /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
     /* @__PURE__ */ e.jsx(we, { data: y(l, r.value, "") }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: a, appliedBindings: s, item: r, children: /* @__PURE__ */ e.jsx(Ir, { 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(pt, { editMode: !0, onAddBinding: a, appliedBindings: s, item: r, children: /* @__PURE__ */ e.jsx(Br, { 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(
-        Pr,
+        Ir,
         {
           onClick: () => t(),
           className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
         }
       )
     ] }),
-    !m(d) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: F(d) })
+    !m(d) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: X(d) })
   ] });
-}, ts = ({ bindingData: r, onChange: a }) => {
-  const t = G(), [n] = rt(), l = Er(), [s, d] = j(
-    _(r, (i, g) => ({ key: g, value: i }))
+}, es = ({ bindingData: r, onChange: a }) => {
+  const t = G(), [n] = rt(), l = Mr(), [s, d] = j(
+    _(r, (i, u) => ({ key: u, value: i }))
   );
   P(() => {
-    d(_(r, (i, g) => ({ key: g, value: i })));
+    d(_(r, (i, u) => ({ key: u, value: i })));
   }, [t == null ? void 0 : t._id, r]);
   const c = T(() => {
     if (m(n))
@@ -286,21 +286,21 @@ const we = ({ data: r, fullView: a }) => {
     const i = Ct(s);
     return m(i == null ? void 0 : i.key) || m(i == null ? void 0 : i.value);
   }, [n, s]), o = (i) => {
-    const g = ye(s, (x) => x.key !== i.key);
-    d([...g, i]), h([...g, i]);
+    const u = ye(s, (x) => x.key !== i.key);
+    d([...u, i]), h([...u, i]);
   }, p = (i) => {
-    const g = ye(s, (x, u) => i !== u);
-    h([...g]);
+    const u = ye(s, (x, g) => i !== g);
+    h([...u]);
   }, h = H(
     (i = []) => {
       if (d(i), m(i)) {
         a({});
         return;
       }
-      const g = {};
+      const u = {};
       Ne(i, (x) => {
-        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && We(g, x.key, x.value);
-      }), a(g);
+        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && We(u, x.key, x.value);
+      }), a(u);
     },
     [a]
   );
@@ -309,12 +309,12 @@ const we = ({ data: r, fullView: a }) => {
     /* @__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: [
-    _(s, (i, g) => /* @__PURE__ */ e.jsx(
-      es,
+    _(s, (i, u) => /* @__PURE__ */ e.jsx(
+      Qr,
       {
         item: i,
         onAddBinding: o,
-        onRemove: () => p(g),
+        onRemove: () => p(u),
         selectedBlock: t,
         dataProvider: n,
         appliedBindings: _(s, "key")
@@ -340,14 +340,14 @@ const we = ({ data: r, fullView: a }) => {
       c && /* @__PURE__ */ e.jsx(E, { sideOffset: -55, className: "text-[11px]", children: m(n) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
     ] })
   ] });
-}, rs = () => /* @__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" }), Ce = mt(({ id: r, properties: a, formData: t, onChange: n }) => {
+}, ts = () => /* @__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" }), Ce = mt(({ id: r, properties: a, formData: t, onChange: n }) => {
   const [l, s] = j(t), d = { type: "object", properties: {} }, c = {};
   Object.keys(a).forEach((p) => {
     const h = a[p];
-    if (X(["slot", "styles"], h.type))
+    if (F(["slot", "styles"], h.type))
       return;
     const i = p;
-    d.properties[i] = gr(h), c[i] = xr(h);
+    d.properties[i] = ur(h), c[i] = gr(h);
   }), P(() => {
     s(t);
   }, [r]);
@@ -360,15 +360,15 @@ const we = ({ data: r, fullView: a }) => {
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Xr,
+    Yr,
     {
       widgets: {
-        binding: rs,
-        richtext: yr,
-        icon: hr,
-        image: br
+        binding: ts,
+        richtext: xr,
+        icon: yr,
+        image: hr
       },
-      fields: { link: mr },
+      fields: { link: br },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
@@ -383,8 +383,8 @@ const we = ({ data: r, fullView: a }) => {
       }
     }
   );
-}), ss = () => {
-  const [r, a] = Zr(), t = fr(), n = (d, c) => {
+}), rs = () => {
+  const [r, a] = Xr(), t = mr(), n = (d, c) => {
     a((o) => ({ ...o, [d]: c }));
   };
   if (m(t))
@@ -406,31 +406,31 @@ const we = ({ data: r, fullView: a }) => {
     ) })
   ] });
 };
-function as() {
-  const r = G(), a = st(), t = at(), n = Re(r._type), l = { ...r }, [s, d] = j(l), c = lt("dataBindingSupport", !1), o = ({ formData: x }, u, v) => {
-    if (u && (s == null ? void 0 : s._id) === r._id) {
-      const C = u.replace("root.", "");
+function ss() {
+  const r = G(), a = st(), t = at(), n = Re(r._type), l = { ...r }, [s, d] = j(l), c = lt("dataBindingSupport", !1), o = ({ formData: x }, g, v) => {
+    if (g && (s == null ? void 0 : s._id) === r._id) {
+      const C = g.replace("root.", "");
       t([r._id], { [C]: y(x, C) }, v);
     }
   }, p = H(
-    kt(({ formData: x }, u, v) => {
-      o({ formData: x }, u, v), d(x);
+    kt(({ formData: x }, g, v) => {
+      o({ formData: x }, g, v), d(x);
     }, 1500),
     [r == null ? void 0 : r._id]
-  ), h = ({ formData: x }, u) => {
-    if (u) {
-      const v = u.replace("root.", "");
+  ), h = ({ formData: x }, g) => {
+    if (g) {
+      const v = g.replace("root.", "");
       a(
         [r._id],
-        vr(v, y(x, v.split(".")))
-      ), p({ formData: x }, u, { [v]: y(s, v) });
+        fr(v, y(x, v.split(".")))
+      ), p({ formData: x }, g, { [v]: y(s, v) });
     }
-  }, i = he(y(l, "_bindings", {})), g = T(() => {
+  }, i = he(y(l, "_bindings", {})), u = T(() => {
     const x = Nt(y(n, "props", {}));
-    return c && _t(i, (u) => delete x[u]), x;
+    return c && _t(i, (g) => delete x[g]), x;
   }, [n, i, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(ss, {}),
+    /* @__PURE__ */ e.jsx(rs, {}),
     c ? /* @__PURE__ */ e.jsxs(ot, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
       /* @__PURE__ */ e.jsxs(me, { value: "BINDING", children: [
         /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-100 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
@@ -443,7 +443,7 @@ function as() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          ts,
+          es,
           {
             bindingData: y(r, "_bindings", {}),
             onChange: (x) => {
@@ -471,7 +471,7 @@ function as() {
               id: r == null ? void 0 : r._id,
               onChange: h,
               formData: l,
-              properties: g
+              properties: u
             }
           )
         ] })
@@ -482,13 +482,13 @@ function as() {
         id: r == null ? void 0 : r._id,
         onChange: h,
         formData: l,
-        properties: g
+        properties: u
       }
     )
   ] });
 }
-const ls = ({ blockId: r }) => {
-  const { t: a } = B(), { askAi: t, loading: n, error: l } = jr(), [s, d] = j(""), c = ft(null);
+const as = ({ blockId: r }) => {
+  const { t: a } = B(), { askAi: t, loading: n, error: l } = vr(), [s, d] = j(""), c = ft(null);
   P(() => {
     var p;
     (p = c.current) == null || p.focus();
@@ -499,7 +499,7 @@ const ls = ({ blockId: r }) => {
   return /* @__PURE__ */ e.jsxs("div", { className: "", children: [
     /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: a("Ask AI") }),
     /* @__PURE__ */ e.jsx(
-      wr,
+      jr,
       {
         ref: c,
         value: s,
@@ -522,14 +522,14 @@ const ls = ({ blockId: r }) => {
           className: "w-fit",
           size: "sm",
           children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx(Ar, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ e.jsx(Pr, { className: "w-5 h-5 animate-spin" }),
             a("Generating... Please wait")
           ] }) : a("Edit with AI")
         }
       ),
       n ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e.jsxs(Cr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
-          /* @__PURE__ */ e.jsx(kr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
+        /* @__PURE__ */ e.jsxs(wr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
+          /* @__PURE__ */ e.jsx(Cr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
           /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
         ] }),
         /* @__PURE__ */ e.jsx(A, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
@@ -537,7 +537,7 @@ const ls = ({ blockId: r }) => {
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: l.message }) })
   ] });
-}, Oe = new Ur(Gr, {
+}, Oe = new Wr(Ur, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -545,10 +545,10 @@ const ls = ({ blockId: r }) => {
 });
 function ut() {
   var S;
-  const { t: r } = B(), [a] = pe(), t = G(), n = Te(), l = nt(), [s] = it(), d = lt("askAiCallBack", null), [c, o] = j(""), { toast: p } = dt(), h = (S = ae(a)) == null ? void 0 : S.prop, i = St((y(t, h, "").replace(qr, "").split(",").pop() || "").split(" "), m), g = () => {
+  const { t: r } = B(), [a] = pe(), t = G(), n = Te(), l = nt(), [s] = it(), d = lt("askAiCallBack", null), [c, o] = j(""), { toast: p } = dt(), h = (S = ae(a)) == null ? void 0 : S.prop, i = St((y(t, h, "").replace(Kr, "").split(",").pop() || "").split(" "), m), u = () => {
     const w = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     n(s, w, !0), o("");
-  }, [x, u] = j([]), v = ({ value: w }) => {
+  }, [x, g] = j([]), v = ({ value: w }) => {
     const D = w.trim().toLowerCase(), Z = D.match(/.+:/g);
     let b = [];
     if (Z && Z.length > 0) {
@@ -559,9 +559,9 @@ function ut() {
       }));
     } else
       b = Oe.search(D);
-    return u(_(b, "item"));
+    return g(_(b, "item"));
   }, C = () => {
-    u([]);
+    g([]);
   }, U = (w) => w.name, L = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), K = {
     autoComplete: "off",
     autoCorrect: "off",
@@ -570,7 +570,7 @@ function ut() {
     placeholder: r("Enter classes separated by space"),
     value: c,
     onKeyDown: (w) => {
-      w.key === "Enter" && c.trim() !== "" && g();
+      w.key === "Enter" && c.trim() !== "" && u();
     },
     onChange: (w, { newValue: D }) => o(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -597,21 +597,21 @@ function ut() {
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
             /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ e.jsxs($, { children: [
-              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(It, { onClick: q, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(Bt, { onClick: q, className: "cursor-pointer" }) }),
               /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
           d ? /* @__PURE__ */ e.jsxs(Qe, { children: [
             /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-              /* @__PURE__ */ e.jsx($r, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e.jsx(Ar, { className: "h-4 w-4" }),
               /* @__PURE__ */ e.jsx("span", { className: "ml-2", children: r("Ask AI") })
             ] }) }),
-            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(ls, { blockId: t == null ? void 0 : t._id }) })
+            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(as, { blockId: t == null ? void 0 : t._id }) })
           ] }) : null
         ] }),
         /* @__PURE__ */ e.jsxs("div", { className: "relative 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(
-            Wr,
+            Zr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: v,
@@ -634,7 +634,7 @@ function ut() {
             {
               variant: "outline",
               className: "h-6 border-gray-700",
-              onClick: g,
+              onClick: u,
               disabled: c.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ e.jsx(_e, {})
@@ -664,9 +664,9 @@ function ut() {
     }
   );
 }
-const os = ({ onAdd: r }) => {
+const ls = ({ onAdd: r }) => {
   const { t: a } = B(), [t, n] = j({ key: "", value: "" }), l = () => {
-    m(t.key) || (r({ ...t, key: Tt(t.key) }), n({ key: "", value: "" }));
+    m(t.key) || (r({ ...t, key: t.key }), n({ key: "", value: "" }));
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 border-gray-200", children: [
     /* @__PURE__ */ e.jsx(
@@ -710,59 +710,61 @@ const os = ({ onAdd: r }) => {
       m(t.key) ? null : /* @__PURE__ */ e.jsx(A, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: a("Cancel") })
     ] })
   ] });
-}, ns = () => {
+}, os = () => {
   const r = G(), [a, t] = j([]), [n] = pe(), l = st(), s = at(), { t: d } = B(), { toast: c } = dt(), o = `${y(n, "0.prop")}_attrs`;
   ne.useEffect(() => {
-    const g = _(y(r, o), (x, u) => ({ key: u, value: x }));
-    m(g) ? t([]) : t(g);
+    const u = _(y(r, o), (x, g) => ({ key: g, value: x }));
+    m(u) ? t([]) : t(u);
   }, [y(r, o)]);
-  const p = (g) => {
-    const x = ye(a, (u, v) => g !== v);
+  const p = (u) => {
+    const x = ye(a, (g, v) => u !== v);
     i(x);
-  }, h = (g) => {
-    const x = Ze(a, { key: g.key });
+  }, h = (u) => {
+    const x = Ze(a, { key: u.key });
     if (x && (x.value.startsWith("dnd-") || x.value.startsWith("#dnd-"))) {
       c({
         title: d("Cannot add predefined attribute"),
         variant: "destructive",
-        description: d(`"(${g.key})" cannot be added as it is a predefined attribute for this block`)
+        description: d(`"(${u.key})" cannot be added as it is a predefined attribute for this block`)
       });
       return;
     }
-    const u = [...a, g];
-    i(u);
+    const g = [...a, u];
+    i(g);
   }, i = ne.useCallback(
-    (g = []) => {
+    (u = []) => {
       const x = {};
-      Ne(g, (u) => {
-        m(u.key) || We(x, u.key, u.value);
+      Ne(u, (g) => {
+        m(g.key) || We(x, g.key, g.value);
       }), s([y(r, "_id")], { [o]: x });
     },
     [r, l, o]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 p-2 text-xs text-gray-700", children: [
-      m(a) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No custom attributes added yet") }) }) : /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsx("span", { className: "font-bold", children: d("Attributes") }) }),
+  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("ul", { className: "overflow-hidden rounded-md bg-gray-100 text-xs text-gray-700", children: [
+      m(a) ? /* @__PURE__ */ e.jsx("li", { className: "flex h-4 items-center justify-center", children: /* @__PURE__ */ e.jsx("p", { children: d("No attributes added") }) }) : null,
       ne.Children.toArray(
-        _(a, (g) => /* @__PURE__ */ e.jsxs("li", { className: "group flex max-w-full items-center justify-between", children: [
+        _(a, (u) => /* @__PURE__ */ e.jsxs("li", { className: "group flex w-full max-w-full items-center justify-between", children: [
           /* @__PURE__ */ e.jsxs($, { delayDuration: 1e3, children: [
-            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-[90%] cursor-default truncate px-1 hover:bg-gray-200", children: [
-              g.key,
-              " ",
-              /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
-              " ",
-              g.value
+            /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-[230px] cursor-default truncate px-1 hover:bg-gray-200", children: [
+              u.key,
+              u.value.trim() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                " ",
+                /* @__PURE__ */ e.jsx("span", { className: "font-bold text-orange-500", children: "=" }),
+                " ",
+                u.value.trim()
+              ] }) : null
             ] }) }),
             /* @__PURE__ */ e.jsxs(E, { className: "max-w-[200px]", children: [
               /* @__PURE__ */ e.jsxs("div", { children: [
                 d("Name"),
                 ": ",
-                g.key
+                u.key
               ] }),
               /* @__PURE__ */ e.jsxs("div", { children: [
                 d("Value"),
                 ": ",
-                g.value
+                u.value
               ] })
             ] })
           ] }),
@@ -770,21 +772,21 @@ const os = ({ onAdd: r }) => {
             /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
               "button",
               {
-                disabled: W(g.value, "dnd-"),
+                disabled: W(u.value, "dnd-"),
                 className: "invisible group-hover:visible",
-                onClick: () => p(a.indexOf(g)),
-                children: /* @__PURE__ */ e.jsx(Mr, { className: "w-4 text-gray-500" })
+                onClick: () => p(a.indexOf(u)),
+                children: /* @__PURE__ */ e.jsx($r, { className: "w-4 text-gray-500" })
               }
             ) }),
-            /* @__PURE__ */ e.jsx(E, { className: "max-w-[200px]", children: W(g.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
+            /* @__PURE__ */ e.jsx(E, { className: "max-w-[200px]", children: W(u.value, "dnd-") ? d("Predefined attribute. Cannot be deleted") : d("Remove attribute") })
           ] })
         ] }))
       )
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(os, { onAdd: (g) => h(g) })
+    /* @__PURE__ */ e.jsx(ls, { onAdd: (u) => h(u) })
   ] }) });
-}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], is = {
+}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ns = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
@@ -793,7 +795,7 @@ const os = ({ onAdd: r }) => {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, ds = {
+}, is = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -804,7 +806,7 @@ const os = ({ onAdd: r }) => {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, cs = [
+}, ds = [
   {
     heading: "Styles",
     items: [
@@ -868,9 +870,9 @@ const os = ({ onAdd: r }) => {
   },
   {
     heading: "Attributes",
-    items: [{ component: ns }]
+    items: [{ component: os }]
   }
-], Ta = [
+], Sa = [
   {
     heading: "layout.heading",
     items: [
@@ -1277,7 +1279,7 @@ const os = ({ onAdd: r }) => {
 ], gt = {
   "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
   // visibility
-  visible: Pt,
+  visible: It,
   invisible: Be,
   // display
   hidden: Be,
@@ -1313,10 +1315,10 @@ const os = ({ onAdd: r }) => {
   borderRadiusRight: Q,
   borderRadiusBottom: ee,
   borderRadiusLeft: te,
-  borderRadiusTopLeft: At,
-  borderRadiusTopRight: $t,
-  borderRadiusBottomRight: Mt,
-  borderRadiusBottomLeft: Et,
+  borderRadiusTopLeft: Pt,
+  borderRadiusTopRight: At,
+  borderRadiusBottomRight: $t,
+  borderRadiusBottomLeft: Mt,
   divideXWidth: R,
   divideYWidth: V,
   scale: Y,
@@ -1343,18 +1345,18 @@ const os = ({ onAdd: r }) => {
   marginBottom: ee,
   marginLeft: te,
   // text-align
-  textLeft: Lt,
-  textCenter: Ot,
-  textRight: zt,
-  textJustify: Yt,
+  textLeft: Et,
+  textCenter: Lt,
+  textRight: Ot,
+  textJustify: zt,
   // font style
-  italic: Xt,
+  italic: Yt,
   // "not-italic": "",
   // decoration
   underline: Ft,
-  overline: Zt,
+  overline: Xt,
   // transform
-  uppercase: Wt,
+  uppercase: Zt,
   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",
@@ -1467,8 +1469,8 @@ const os = ({ onAdd: r }) => {
       }
     )
   ] }),
-  static: Ut
-}, le = Fe({ canReset: !1, canChange: !0 }), ps = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
+  static: Wt
+}, le = Xe({ canReset: !1, canChange: !0 }), cs = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ e.jsx(le.Provider, { value: { canReset: a, canChange: t }, children: r })
 ), xt = ({ label: r, property: a, onChange: t }) => {
@@ -1491,7 +1493,7 @@ const os = ({ onAdd: r }) => {
   ) });
 };
 function ke({ selected: r, onChange: a, rounded: t = !1, options: n, disabled: l = !1 }) {
-  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = Nr();
+  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = kr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
@@ -1511,7 +1513,7 @@ function ke({ selected: r, onChange: a, rounded: t = !1, options: n, disabled: l
     }
   );
 }
-const us = ({ property: r, onChange: a }) => {
+const ps = ({ property: r, onChange: a }) => {
   const { canReset: t, canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]), d = T(() => y(ge, `${r}.classes`, [""]), [r]), c = d.indexOf(s) > -1 ? d.indexOf(s) : 0, o = /\[.*\]/g.test(s);
   return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: o ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: s }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
@@ -1522,7 +1524,7 @@ const us = ({ property: r, onChange: a }) => {
         disabled: !n && (!t || c - 1 < 0),
         onClick: () => a(He(d, c - 1), r),
         children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Gt,
+          Ut,
           {
             className: !n && (!t || c - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
@@ -1546,7 +1548,7 @@ const us = ({ property: r, onChange: a }) => {
       }
     )
   ] }) });
-}, gs = ({ property: r, onChange: a }) => {
+}, us = ({ property: r, onChange: a }) => {
   const t = T(() => y(ge, `${r}.classes`, [""]), [r]), { canChange: n } = se(le), l = oe(r), s = T(() => y(l, "cls", ""), [l]);
   return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: _(t, (d) => /* @__PURE__ */ e.jsxs($, { children: [
     /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
@@ -1559,9 +1561,9 @@ const us = ({ property: r, onChange: a }) => {
         children: I.createElement(y(gt, d, Ke))
       }
     ) }),
-    /* @__PURE__ */ e.jsx(E, { children: F(re(d)) })
+    /* @__PURE__ */ e.jsx(E, { children: X(re(d)) })
   ] })) });
-}, xs = {
+}, gs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1573,11 +1575,11 @@ const us = ({ property: r, onChange: a }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, ys = ({ property: r, onChange: a }) => {
-  const t = oe(r), n = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = j([]), [c, o] = j({ color: "", shade: "" }), p = n.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), g = H(
+}, xs = ({ property: r, onChange: a }) => {
+  const t = oe(r), n = T(() => y(t, "cls", ""), [t]), { canChange: l } = se(le), [s, d] = j([]), [c, o] = j({ color: "", shade: "" }), p = n.split("-"), h = y(p, "1", ""), i = y(p, "2", ""), u = H(
     // eslint-disable-next-line no-shadow
-    (u) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (d([]), o({ color: u })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: u, shade: v.shade ? v.shade : "500" })));
+    (g) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (d([]), o({ color: g })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), o((v) => ({ ...v, color: g, shade: v.shade ? v.shade : "500" })));
     },
     [d, o]
   );
@@ -1588,15 +1590,15 @@ const us = ({ property: r, onChange: a }) => {
   }, [h]);
   const x = H(
     // eslint-disable-next-line no-shadow
-    (u) => {
-      o({ color: h, shade: u });
+    (g) => {
+      o({ color: h, shade: g });
     },
     [h]
   );
   return P(() => {
     o({ color: "", shade: "" });
   }, [t]), P(() => {
-    const v = `${y(xs, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    const v = `${y(gs, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
     v.match(new RegExp(y(ge, `${r}.regExp`, ""))) && a(v, r);
   }, [c, a, 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(
@@ -1605,7 +1607,7 @@ const us = ({ property: r, onChange: a }) => {
         disabled: !l,
         rounded: !0,
         selected: h,
-        onChange: g,
+        onChange: u,
         options: [
           "current",
           "transparent",
@@ -1650,7 +1652,7 @@ const us = ({ property: r, onChange: a }) => {
   const l = r.match(n), s = l && l.length > 1, d = !m(t) && Number.isNaN(Number(t));
   return s || d ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: t, unit: l ? l[0] : "" };
 };
-const hs = (r) => {
+const ys = (r) => {
   const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1660,17 +1662,17 @@ const hs = (r) => {
     return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
   if (t === "full")
     return { value: "100", unit: "%" };
-  if (X(r, "skew-"))
+  if (F(r, "skew-"))
     return { value: `${a}${t}`, unit: "deg" };
-  if (X(r, "rotate-"))
+  if (F(r, "rotate-"))
     return { value: `${a}${t}`, unit: "deg" };
-  if (X(r, "opacity-"))
+  if (F(r, "opacity-"))
     return { value: `${t / 100}`, unit: "-" };
-  if (X(r, "duration-") || X(r, "delay-"))
+  if (F(r, "duration-") || F(r, "delay-"))
     return { value: `${t}`, unit: "ms" };
-  if (X(r, "translate-") && !t.includes("/"))
+  if (F(r, "translate-") && !t.includes("/"))
     return { value: `${a}${`${t / 4}`}`, unit: "rem" };
-  if (X(r, "scale-"))
+  if (F(r, "scale-"))
     return { value: `${a}${`${t / 100}`}`, unit: "-" };
   if (W(r, "border")) {
     const n = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
@@ -1777,20 +1779,20 @@ const hs = (r) => {
     const [n, l] = _(t.split("/"), (s) => parseInt(s, 10));
     return { value: a + (n / l * 100).toFixed(2).replace(".00", ""), unit: "%" };
   }
-  return Rt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+  return Tt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const bs = (r) => {
+const hs = (r) => {
   if (m(r))
     return { value: "", unit: "" };
   const a = r.match(/\[.*\]/g);
   if (a === null)
-    return ms(r);
+    return bs(r);
   const t = y(a, "0", "").replace(/\[|\]/g, ""), n = r.startsWith("-") ? "-" : "", l = ae(t.match(/\d+.\d+|\d+/g));
   return { value: `${n}${l}`, unit: t.replace(l, "") };
-}, ms = (r) => m(r) ? { value: "", unit: "" } : hs(r), yt = I.createContext({
+}, bs = (r) => m(r) ? { value: "", unit: "" } : ys(r), yt = I.createContext({
   setDragData: () => {
   }
-}), fs = ({
+}), ms = ({
   unit: r,
   currentValue: a,
   onDrag: t,
@@ -1819,10 +1821,10 @@ const bs = (r) => {
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Kt, {})
+      children: /* @__PURE__ */ e.jsx(Gt, {})
     }
   );
-}, vs = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((n) => /* @__PURE__ */ e.jsx(
+}, fs = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((n) => /* @__PURE__ */ e.jsx(
   A,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1834,21 +1836,21 @@ const bs = (r) => {
     children: n
   },
   n
-)) }), Ye = 50, js = (r) => {
-  const [a, t] = j(!1), [n, l] = j(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: o, units: p, negative: h } = r, [i, g] = j(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [v, C] = j(""), [U, L] = j(!1), [K, q] = j(!1);
+)) }), Ye = 50, vs = (r) => {
+  const [a, t] = j(!1), [n, l] = j(""), { currentClass: s, onChange: d, classPrefix: c, cssProperty: o, units: p, negative: h } = r, [i, u] = j(o != null && o.toLowerCase().includes("width") ? "%" : p[0]), [x, g] = j(!1), [v, C] = j(""), [U, L] = j(!1), [K, q] = j(!1);
   P(() => {
-    const { value: b, unit: f } = bs(s);
+    const { value: b, unit: f } = hs(s);
     if (f === "") {
-      l(b), g(o != null && o.toLowerCase().includes("width") ? "%" : ae(p));
+      l(b), u(o != null && o.toLowerCase().includes("width") ? "%" : ae(p));
       return;
     }
-    g(f), l(f === "class" || m(b) ? "" : b);
+    u(f), l(f === "class" || m(b) ? "" : b);
   }, [s, o, p]);
   const S = de((b) => d(b), [d], Ye), w = de((b) => d(b, !1), [d], Ye), D = H(
     (b = !1) => {
       const f = ze(`${n}`, p);
       if (y(f, "error", !1)) {
-        u(!0);
+        g(!0);
         return;
       }
       const N = y(f, "unit") !== "" ? y(f, "unit") : i;
@@ -1866,7 +1868,7 @@ const bs = (r) => {
     (b) => {
       const f = ze(`${n}`, p);
       if (y(f, "error", !1)) {
-        u(!0);
+        g(!0);
         return;
       }
       if (b === "auto" || b === "none") {
@@ -1899,7 +1901,7 @@ const bs = (r) => {
             if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
             b.preventDefault(), q(!0);
-            const f = Vt(b.target.value);
+            const f = Rt(b.target.value);
             let N = Ue(f) ? 0 : f;
             b.keyCode === 38 && (N += 1), b.keyCode === 40 && (N -= 1);
             const O = `${N}`, bt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
@@ -1910,7 +1912,7 @@ const bs = (r) => {
           },
           onBlur: () => D(),
           onChange: (b) => {
-            u(!1), l(b.target.value);
+            g(!1), l(b.target.value);
           },
           onClick: (b) => {
             var f;
@@ -1932,24 +1934,24 @@ const bs = (r) => {
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
               /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(qt, {}) : null
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Kt, {}) : null
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(_r, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          vs,
+        /* @__PURE__ */ e.jsx(Nr, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          fs,
           {
             units: p,
             current: i,
             onSelect: (b) => {
-              t(!1), g(b), Z(b);
+              t(!1), u(b), Z(b);
             }
           }
         ) }) })
       ] })
     ] }),
     ["none", "auto"].indexOf(i) !== -1 || U ? null : /* @__PURE__ */ e.jsx(
-      fs,
+      ms,
       {
         onDragStart: () => L(!0),
         onDragEnd: (b) => {
@@ -1974,8 +1976,8 @@ const bs = (r) => {
   ] }) }) });
 }, oe = (r) => {
   const a = ue();
-  return Ht(a, { property: r });
-}, ws = (r, a) => {
+  return Vt(a, { property: r });
+}, js = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1985,7 +1987,7 @@ const bs = (r) => {
     "2xl": 5
   };
   return t[y(r, "mq", "xs")] <= t[a];
-}, Cs = {
+}, ws = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2051,26 +2053,26 @@ const bs = (r) => {
   insetY: "inset-y-",
   opacity: "opacity-",
   flexBasis: "basis-"
-}, Xe = {
+}, Fe = {
   xs: "",
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, ks = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
+}, Cs = (r) => `${r.toUpperCase()} ${Fe[r] ? `(${Fe[r]} & up)` : ""}`, Ve = (r) => {
   const { t: a } = B(), { type: t = "icons", label: n, property: l, onEmitChange: s = () => {
-  }, units: d, negative: c = !1 } = r, [o] = Sr(), [p] = Tr(), [, h] = Ie(), i = oe(l), g = Te(), x = nt(), [u] = it(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
+  }, units: d, negative: c = !1 } = r, [o] = _r(), [p] = Sr(), [, h] = Ie(), i = oe(l), u = Te(), x = nt(), [g] = it(), v = T(() => y(i, "fullCls", ""), [i]), C = H(
     (w, D = !0) => {
       const Z = { dark: o, mq: h, mod: p, cls: w, property: l, fullCls: "" };
       (o || p !== "") && (Z.mq = "xs");
-      const b = Kr(Z);
-      g(u, [b], D);
+      const b = Gr(Z);
+      u(g, [b], D);
     },
-    [u, o, h, p, l, g]
+    [g, o, h, p, l, u]
   ), U = H(() => {
-    x(u, [v]);
-  }, [u, v, x]), L = T(() => ws(i, h), [i, h]);
+    x(g, [v]);
+  }, [g, v, x]), L = T(() => js(i, h), [i, h]);
   P(() => {
     s(L, i);
   }, [L, s, i]);
@@ -2087,27 +2089,27 @@ const bs = (r) => {
     },
     [K]
   ), S = y(i, "dark", null) === o && y(i, "mod", null) === p && y(i, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(ps, { canChange: L, canReset: i && S, children: /* @__PURE__ */ e.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ e.jsx(cs, { canChange: L, canReset: i && S, 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 && !S ? "text-foreground" : ""}`, children: a(n) }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
         t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          js,
+          vs,
           {
             currentClass: y(i, "cls", ""),
-            classPrefix: y(Cs, l, ""),
+            classPrefix: y(ws, l, ""),
             units: d || [],
             onChange: C,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(gs, { property: l, onChange: C }),
-        t === "range" && /* @__PURE__ */ e.jsx(us, { property: l, onChange: C }),
-        t === "color" && /* @__PURE__ */ e.jsx(ys, { property: l, onChange: C }),
+        t === "icons" && /* @__PURE__ */ e.jsx(us, { property: l, onChange: C }),
+        t === "range" && /* @__PURE__ */ e.jsx(ps, { property: l, onChange: C }),
+        t === "color" && /* @__PURE__ */ e.jsx(xs, { property: l, onChange: C }),
         t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: n, property: l, onChange: C })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => U(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Jt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => U(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(qt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : L && i ? /* @__PURE__ */ e.jsxs($, { delayDuration: 100, children: [
         /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsx(
           "button",
           {
@@ -2119,7 +2121,7 @@ const bs = (r) => {
         /* @__PURE__ */ e.jsx(E, { 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: [
-            ks(y(i, "mq")),
+            Cs(y(i, "mq")),
             o && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -2139,16 +2141,16 @@ const bs = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, Ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
+}, ks = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
   label: r,
   options: a,
   borderB: t = !1,
   borderT: n = !1,
   type: l = "arbitrary",
-  units: s = Ns,
+  units: s = ks,
   negative: d = !1
 }) => {
-  const { t: c } = B(), [o, p] = j(a[0].key), h = ue(), i = H((g) => _(h, "property").includes(g), [h]);
+  const { t: c } = B(), [o, p] = j(a[0].key), h = ue(), i = H((u) => _(h, "property").includes(u), [h]);
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -2157,7 +2159,7 @@ const bs = (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: I.Children.toArray(
-            a.map(({ label: g, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
+            a.map(({ label: u, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs($, { children: [
               /* @__PURE__ */ e.jsx(M, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
                 "button",
                 {
@@ -2172,7 +2174,7 @@ const bs = (r) => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e.jsx(E, { children: F(re(g)) })
+              /* @__PURE__ */ e.jsx(E, { children: X(re(u)) })
             ] }) }))
           ) })
         ] }),
@@ -2189,14 +2191,14 @@ const bs = (r) => {
       ]
     }
   );
-}, _s = ({ heading: r, items: a }) => {
+}, Ns = ({ heading: r, items: a }) => {
   const { t } = B(), n = ue(), l = T(() => {
     const s = (o) => De(
       o.map((p) => p.styleType === "multiple" ? _(p.options, "key") : p.property)
     ), d = De(
       a.map((o) => o.styleType === "accordion" ? s(o.items) : o.styleType === "multiple" ? _(o.options, "key") : o.property)
     ), c = _(n, "property");
-    return Dt(d, c).length > 0;
+    return Ht(d, c).length > 0;
   }, [n, a]);
   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: [
@@ -2210,7 +2212,7 @@ const bs = (r) => {
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label)) })
   ] });
-}, Ss = Fe({}), xe = ({ section: r }) => {
+}, _s = Xe({}), xe = ({ section: r }) => {
   const { t: a } = B(), t = ue(), n = H(
     (s = []) => {
       const d = {};
@@ -2226,26 +2228,26 @@ const bs = (r) => {
     },
     [t]
   ), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Ss.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
+  return /* @__PURE__ */ e.jsx(_s.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
     /* @__PURE__ */ e.jsx(fe, { className: "bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: a(r.heading) }) }),
     /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 px-3.5 py-2", children: I.Children.toArray(
-      r.items.map((s) => ie(s, "component") ? I.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && n(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(_s, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
+      r.items.map((s) => ie(s, "component") ? I.createElement(s.component, { key: s.label }) : ie(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && n(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ns, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
     ) })
   ] }) });
-}, Ts = () => {
-  const r = G(), [a] = pe(), { t } = B(), n = Lr(), l = Te(), s = Re(r._type), d = y(ae(a), "prop"), c = y(s.props, `${d}.presets`, {});
+}, Ss = () => {
+  const r = G(), [a] = pe(), { t } = B(), n = Er(), l = Te(), s = Re(r._type), d = y(ae(a), "prop"), c = y(s.props, `${d}.presets`, {});
   if (m(n) && (!ie(s, "props") || m(c)))
     return null;
   const o = (p) => {
     const h = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l([r._id], h, !0);
   };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Rr, { children: [
-    /* @__PURE__ */ e.jsx(Vr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "w-full", size: "sm", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Tr, { children: [
+    /* @__PURE__ */ e.jsx(Rr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(A, { variant: "default", className: "w-full", size: "sm", children: [
       t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(Qt, {})
+      /* @__PURE__ */ e.jsx(Jt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Hr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Vr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
       m(c) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsxs(Pe, { children: [
           s.type,
@@ -2254,7 +2256,7 @@ const bs = (r) => {
         ] }),
         /* @__PURE__ */ e.jsx(Ae, {}),
         /* @__PURE__ */ e.jsx($e, { children: he(c).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(c[p]), children: [
-          be(F(t(p))),
+          be(X(t(p))),
           /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] }),
@@ -2262,28 +2264,28 @@ const bs = (r) => {
         /* @__PURE__ */ e.jsx(Pe, { children: t("Global presets") }),
         /* @__PURE__ */ e.jsx(Ae, {}),
         /* @__PURE__ */ e.jsx($e, { children: he(n).map((p) => /* @__PURE__ */ e.jsxs(Me, { className: "group text-xs", onClick: () => o(n[p]), children: [
-          be(F(t(p))),
+          be(X(t(p))),
           /* @__PURE__ */ e.jsx(Ee, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
         ] })) })
       ] })
     ] }) })
   ] }) });
 };
-function Rs() {
-  const { flexChild: r, gridChild: a } = Dr(), { t } = B(), [n] = pe();
+function Ts() {
+  const { flexChild: r, gridChild: a } = Hr(), { t } = B(), [n] = pe();
   return m(n) ? /* @__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(qe, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: t("no_styling_block_selected") })
   ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(Ts, {}),
+    /* @__PURE__ */ e.jsx(Ss, {}),
     /* @__PURE__ */ e.jsxs(ot, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: is }),
-      a ? /* @__PURE__ */ e.jsx(xe, { section: ds }) : null,
-      cs.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
+      r && /* @__PURE__ */ e.jsx(xe, { section: ns }),
+      a ? /* @__PURE__ */ e.jsx(xe, { section: is }) : null,
+      ds.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
     ] })
   ] });
 }
-const Vs = {
+const Rs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2294,7 +2296,7 @@ const Vs = {
   "-": 1,
   deg: 1,
   ms: 0.1
-}, Ra = () => {
+}, Ta = () => {
   const r = G(), { t: a } = B(), [t, n] = I.useState(""), [l, s] = I.useState({
     onDrag: (o) => o,
     onDragEnd: (o) => o,
@@ -2309,10 +2311,10 @@ const Vs = {
       const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
       let i = parseFloat(l.dragStartValue);
       i = Ue(i) ? 0 : i;
-      let g = Vs[l.dragUnit];
-      (W(h, "scale") || h === "opacity") && (g = 10);
-      let u = (l.dragStartY - o.pageY) / g + i;
-      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), l.onDrag(`${u}`), n(`${u}`);
+      let u = Rs[l.dragUnit];
+      (W(h, "scale") || h === "opacity") && (u = 10);
+      let g = (l.dragStartY - o.pageY) / u + i;
+      p && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), l.onDrag(`${g}`), n(`${g}`);
     },
     [l],
     50
@@ -2328,7 +2330,7 @@ const Vs = {
       cssProperty: ""
     });
   }, [l, t, s]);
-  return Bt(r) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
+  return Dt(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(qe, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
   ] }) }) : /* @__PURE__ */ e.jsx(Je, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: s }, children: [
@@ -2341,11 +2343,14 @@ const Vs = {
       }
     ) : null,
     /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar max-h-full flex-1 overflow-x-hidden overflow-y-hidden bg-gray-100 pb-5", children: [
-      /* @__PURE__ */ e.jsx(as, {}),
-      /* @__PURE__ */ e.jsx(Rs, {})
+      /* @__PURE__ */ e.jsx(ss, {}),
+      /* @__PURE__ */ e.jsx(Ts, {}),
+      /* @__PURE__ */ e.jsx("br", {}),
+      /* @__PURE__ */ e.jsx("br", {}),
+      /* @__PURE__ */ e.jsx("br", {})
     ] })
   ] }) });
 };
 export {
-  Ra as default
+  Ta as default
 };