@chaibuilder/sdk 1.2.44 → 1.2.46

package/dist/{Settings-k9Ll55Wc.js → Settings-E_xif3_e.js}

@@ -5,17 +5,17 @@ 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 { 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, aq as Nr, bd as je, j as _r, be as Sr, J as ue, v as Tr, P as Rr, o as Ie, av as Vr, aw as Hr, ax as Dr, bf as ct, ay as Pe, az as Ae, bg as $e, bh as Me, bi as Ee, S as Br } from "./ChaiBuilderEditor-NnMEdW3k.js";
-import { Check as Ir, EditIcon as Pr, TrashIcon as Ar, Loader as $r, SparklesIcon as Mr, DeleteIcon as Er } from "lucide-react";
-import { getBlockComponent as Re, getChaiDataProviders as Lr, useGlobalStylingPresets as Or } from "@chaibuilder/runtime";
-import { J as zr, a as Yr, d as Xr } from "./index-e0c8PmRQ.js";
-import Fr from "@rjsf/core";
-import Zr from "@rjsf/validator-ajv8";
-import { u as Wr } from "./useCanvasSettings-QH5zCmxD.js";
-import Ur from "react-autosuggest";
-import Gr from "fuse.js";
-import { A as Kr, C as ge, g as qr } from "./utils-iMv3T4WT.js";
-import { a as Jr } from "./STRINGS--j49GZJP.js";
+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, av as Rr, aw as Vr, ax as Hr, bf as ct, ay as Pe, az as Ae, bg as $e, bh as Me, bi as Ee, S as Dr } from "./ChaiBuilderEditor-wriVkIG1.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 Fr from "@rjsf/validator-ajv8";
+import { u as Zr } from "./useCanvasSettings-L2pW5boY.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 "./_commonjsHelpers-UyOWmZb0.js";
 import "clsx";
 import "react-dom";
@@ -27,6 +27,7 @@ import "flagged";
 import "./Functions-7jnEwJyw.js";
 import "tailwind-merge";
 import "./MODIFIERS-cBT31iqE.js";
+import "tree-model";
 import "@radix-ui/react-toggle";
 import "class-variance-authority";
 import "@radix-ui/react-switch";
@@ -49,7 +50,7 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-quill";
 import "react-hotkeys-hook";
-function Qr(r) {
+function Jr(r) {
   const a = [], t = {};
   function n(l, s) {
     Ne(s, (d, c) => {
@@ -66,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(
-      zr,
+      Or,
       {
         data: r,
-        shouldExpandNode: Yr,
+        shouldExpandNode: zr,
         style: {
-          ...Xr,
+          ...Yr,
           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"
@@ -91,7 +92,7 @@ const we = ({ data: r, fullView: a }) => {
   dataType: s,
   appliedBindings: d
 }) => {
-  const { paths: c, pathsType: o } = Qr(n), p = r === "PROP" ? Re(n == null ? void 0 : n._type) : {}, h = r === "PROP", [i, g] = j(!1), x = T(() => r === "PROP" ? c.filter(
+  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]);
   return P(() => {
@@ -132,7 +133,7 @@ const we = ({ data: r, fullView: a }) => {
                 },
                 children: [
                   /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Ir, { className: `h-4 w-4 text-green-500 ${a === u ? "" : "opacity-0"}` }),
+                    /* @__PURE__ */ e.jsx(Br, { className: `h-4 w-4 text-green-500 ${a === u ? "" : "opacity-0"}` }),
                     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: F(y(o, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: y(n, u) }) })
@@ -146,7 +147,7 @@ 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 }) })
   ] });
-}, es = ({
+}, Qr = ({
   appliedBindings: r = [],
   onAddBinding: a,
   editMode: t,
@@ -224,7 +225,7 @@ const we = ({ data: r, fullView: a }) => {
   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(
-      es,
+      Qr,
       {
         item: s,
         editMode: l,
@@ -235,7 +236,7 @@ const we = ({ data: r, fullView: a }) => {
       }
     ) })
   ] });
-}, ts = ({
+}, es = ({
   item: r,
   onAddBinding: a,
   onRemove: t,
@@ -259,9 +260,9 @@ 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(Pr, { 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(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(
-        Ar,
+        Pr,
         {
           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"
@@ -270,8 +271,8 @@ const we = ({ data: r, fullView: a }) => {
     ] }),
     !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) })
   ] });
-}, rs = ({ bindingData: r, onChange: a }) => {
-  const t = G(), [n] = rt(), l = Lr(), [s, d] = j(
+}, ts = ({ bindingData: r, onChange: a }) => {
+  const t = G(), [n] = rt(), l = Er(), [s, d] = j(
     _(r, (i, g) => ({ key: g, value: i }))
   );
   P(() => {
@@ -309,7 +310,7 @@ const we = ({ data: r, fullView: a }) => {
     /* @__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(
-      ts,
+      es,
       {
         item: i,
         onAddBinding: o,
@@ -339,7 +340,7 @@ 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" })
     ] })
   ] });
-}, ss = () => /* @__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 }) => {
+}, 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 }) => {
   const [l, s] = j(t), d = { type: "object", properties: {} }, c = {};
   Object.keys(a).forEach((p) => {
     const h = a[p];
@@ -359,10 +360,10 @@ const we = ({ data: r, fullView: a }) => {
     // save only every 5 seconds
   );
   return /* @__PURE__ */ e.jsx(
-    Fr,
+    Xr,
     {
       widgets: {
-        binding: ss,
+        binding: rs,
         richtext: yr,
         icon: hr,
         image: br
@@ -373,7 +374,7 @@ const we = ({ data: r, fullView: a }) => {
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
-      validator: Zr,
+      validator: Fr,
       uiSchema: c,
       schema: d,
       formData: l,
@@ -382,8 +383,8 @@ const we = ({ data: r, fullView: a }) => {
       }
     }
   );
-}), as = () => {
-  const [r, a] = Wr(), t = fr(), n = (d, c) => {
+}), ss = () => {
+  const [r, a] = Zr(), t = fr(), n = (d, c) => {
     a((o) => ({ ...o, [d]: c }));
   };
   if (m(t))
@@ -405,7 +406,7 @@ const we = ({ data: r, fullView: a }) => {
     ) })
   ] });
 };
-function ls() {
+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.", "");
@@ -429,7 +430,7 @@ function ls() {
     return c && _t(i, (u) => delete x[u]), x;
   }, [n, i, c]);
   return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(as, {}),
+    /* @__PURE__ */ e.jsx(ss, {}),
     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: [
@@ -442,7 +443,7 @@ function ls() {
           "Data Binding"
         ] }) }),
         /* @__PURE__ */ e.jsx(ve, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          rs,
+          ts,
           {
             bindingData: y(r, "_bindings", {}),
             onChange: (x) => {
@@ -486,7 +487,7 @@ function ls() {
     )
   ] });
 }
-const os = ({ blockId: r }) => {
+const ls = ({ blockId: r }) => {
   const { t: a } = B(), { askAi: t, loading: n, error: l } = jr(), [s, d] = j(""), c = ft(null);
   P(() => {
     var p;
@@ -521,7 +522,7 @@ const os = ({ blockId: r }) => {
           className: "w-fit",
           size: "sm",
           children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx($r, { className: "h-5 w-5 animate-spin" }),
+            /* @__PURE__ */ e.jsx(Ar, { className: "h-5 w-5 animate-spin" }),
             a("Generating... Please wait")
           ] }) : a("Edit with AI")
         }
@@ -533,9 +534,10 @@ const os = ({ blockId: r }) => {
         ] }),
         /* @__PURE__ */ e.jsx(A, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
       ] }) : null
-    ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ e.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: l.message }) })
   ] });
-}, Oe = new Gr(Kr, {
+}, Oe = new Ur(Gr, {
   isCaseSensitive: !1,
   threshold: 0.2,
   minMatchCharLength: 2,
@@ -543,7 +545,7 @@ const os = ({ 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(Jr, "").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(qr, "").split(",").pop() || "").split(" "), m), g = () => {
     const w = c.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     n(s, w, !0), o("");
   }, [x, u] = j([]), v = ({ value: w }) => {
@@ -591,7 +593,7 @@ function ut() {
     {
       className: `flex ${x.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto border-b-2 bg-gray-100 pb-4`,
       children: [
-        /* @__PURE__ */ e.jsxs(Nr, { className: "flex items-center justify-between gap-x-2", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
             /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ e.jsxs($, { children: [
@@ -601,15 +603,15 @@ function ut() {
           ] }),
           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(Mr, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e.jsx($r, { 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(os, { blockId: t == null ? void 0 : t._id }) })
+            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(ls, { 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(
-            Ur,
+            Wr,
             {
               suggestions: x,
               onSuggestionsFetchRequested: v,
@@ -662,7 +664,7 @@ function ut() {
     }
   );
 }
-const ns = ({ onAdd: r }) => {
+const os = ({ onAdd: r }) => {
   const { t: a } = B(), [t, n] = j({ key: "", value: "" }), l = () => {
     m(t.key) || (r({ ...t, key: Tt(t.key) }), n({ key: "", value: "" }));
   };
@@ -708,7 +710,7 @@ const ns = ({ onAdd: r }) => {
       m(t.key) ? null : /* @__PURE__ */ e.jsx(A, { variant: "ghost", onClick: () => n({ key: "", value: "" }), children: a("Cancel") })
     ] })
   ] });
-}, is = () => {
+}, ns = () => {
   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 }));
@@ -771,7 +773,7 @@ const ns = ({ onAdd: r }) => {
                 disabled: W(g.value, "dnd-"),
                 className: "invisible group-hover:visible",
                 onClick: () => p(a.indexOf(g)),
-                children: /* @__PURE__ */ e.jsx(Er, { className: "w-4 text-gray-500" })
+                children: /* @__PURE__ */ e.jsx(Mr, { 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") })
@@ -780,9 +782,9 @@ const ns = ({ onAdd: r }) => {
       )
     ] }) }),
     /* @__PURE__ */ e.jsx("div", { className: "py-2" }),
-    /* @__PURE__ */ e.jsx(ns, { onAdd: (g) => h(g) })
+    /* @__PURE__ */ e.jsx(os, { onAdd: (g) => h(g) })
   ] }) });
-}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], ds = {
+}, k = ["px", "%", "em", "rem", "ch", "vh", "vw"], is = {
   heading: "flex.heading",
   items: [
     { type: "arbitrary", label: "flex.basis", units: k, property: "flexBasis" },
@@ -791,7 +793,7 @@ const ns = ({ onAdd: r }) => {
     { type: "dropdown", label: "flex.grow", property: "flexGrow" },
     { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
   ]
-}, cs = {
+}, ds = {
   heading: "grid.heading",
   items: [
     { type: "range", label: "grid.col_span", property: "gridColSpan" },
@@ -802,7 +804,7 @@ const ns = ({ onAdd: r }) => {
     { type: "range", label: "grid.row_end", property: "gridRowEnd" },
     { type: "range", label: "grid.order", property: "order" }
   ]
-}, ps = [
+}, cs = [
   {
     heading: "Styles",
     items: [
@@ -866,7 +868,7 @@ const ns = ({ onAdd: r }) => {
   },
   {
     heading: "Attributes",
-    items: [{ component: is }]
+    items: [{ component: ns }]
   }
 ], Ta = [
   {
@@ -1466,7 +1468,7 @@ const ns = ({ onAdd: r }) => {
     )
   ] }),
   static: Ut
-}, le = Fe({ canReset: !1, canChange: !0 }), us = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
+}, le = Fe({ canReset: !1, canChange: !0 }), ps = ({ 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 }) => {
@@ -1489,7 +1491,7 @@ const ns = ({ 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 } = _r();
+  const s = r.replace(/.*:/g, "").trim(), { undo: d, redo: c } = Nr();
   return /* @__PURE__ */ e.jsxs(
     "select",
     {
@@ -1509,7 +1511,7 @@ function ke({ selected: r, onChange: a, rounded: t = !1, options: n, disabled: l
     }
   );
 }
-const gs = ({ property: r, onChange: a }) => {
+const us = ({ 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(
@@ -1544,7 +1546,7 @@ const gs = ({ property: r, onChange: a }) => {
       }
     )
   ] }) });
-}, xs = ({ property: r, onChange: a }) => {
+}, gs = ({ 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,7 +1561,7 @@ const gs = ({ property: r, onChange: a }) => {
     ) }),
     /* @__PURE__ */ e.jsx(E, { children: F(re(d)) })
   ] })) });
-}, ys = {
+}, xs = {
   backgroundColor: "bg",
   textColor: "text",
   borderColor: "border",
@@ -1571,7 +1573,7 @@ const gs = ({ property: r, onChange: a }) => {
   toColor: "to",
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
-}, hs = ({ property: r, onChange: a }) => {
+}, 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(
     // eslint-disable-next-line no-shadow
     (u) => {
@@ -1594,7 +1596,7 @@ const gs = ({ property: r, onChange: a }) => {
   return P(() => {
     o({ color: "", shade: "" });
   }, [t]), P(() => {
-    const v = `${y(ys, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    const v = `${y(xs, 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(
@@ -1648,7 +1650,7 @@ const gs = ({ 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 bs = (r) => {
+const hs = (r) => {
   const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
   if (["auto", "none"].includes(t))
     return { value: "", unit: t };
@@ -1777,18 +1779,18 @@ const bs = (r) => {
   }
   return Rt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
 };
-const ms = (r) => {
+const bs = (r) => {
   if (m(r))
     return { value: "", unit: "" };
   const a = r.match(/\[.*\]/g);
   if (a === null)
-    return fs(r);
+    return ms(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, "") };
-}, fs = (r) => m(r) ? { value: "", unit: "" } : bs(r), yt = I.createContext({
+}, ms = (r) => m(r) ? { value: "", unit: "" } : hs(r), yt = I.createContext({
   setDragData: () => {
   }
-}), vs = ({
+}), fs = ({
   unit: r,
   currentValue: a,
   onDrag: t,
@@ -1820,7 +1822,7 @@ const ms = (r) => {
       children: /* @__PURE__ */ e.jsx(Kt, {})
     }
   );
-}, js = ({ 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(
+}, 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(
   A,
   {
     className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
@@ -1832,10 +1834,10 @@ const ms = (r) => {
     children: n
   },
   n
-)) }), Ye = 50, ws = (r) => {
+)) }), 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);
   P(() => {
-    const { value: b, unit: f } = ms(s);
+    const { value: b, unit: f } = bs(s);
     if (f === "") {
       l(b), g(o != null && o.toLowerCase().includes("width") ? "%" : ae(p));
       return;
@@ -1934,8 +1936,8 @@ const ms = (r) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(Sr, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          js,
+        /* @__PURE__ */ e.jsx(_r, { children: /* @__PURE__ */ e.jsx(E, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          vs,
           {
             units: p,
             current: i,
@@ -1947,7 +1949,7 @@ const ms = (r) => {
       ] })
     ] }),
     ["none", "auto"].indexOf(i) !== -1 || U ? null : /* @__PURE__ */ e.jsx(
-      vs,
+      fs,
       {
         onDragStart: () => L(!0),
         onDragEnd: (b) => {
@@ -1973,7 +1975,7 @@ const ms = (r) => {
 }, oe = (r) => {
   const a = ue();
   return Ht(a, { property: r });
-}, Cs = (r, a) => {
+}, ws = (r, a) => {
   const t = {
     xs: 0,
     sm: 1,
@@ -1983,7 +1985,7 @@ const ms = (r) => {
     "2xl": 5
   };
   return t[y(r, "mq", "xs")] <= t[a];
-}, ks = {
+}, Cs = {
   width: "w-",
   height: "h-",
   minWidth: "min-w-",
@@ -2056,19 +2058,19 @@ const ms = (r) => {
   lg: "1024px",
   xl: "1280px",
   "2xl": "1536px"
-}, Ns = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
+}, ks = (r) => `${r.toUpperCase()} ${Xe[r] ? `(${Xe[r]} & up)` : ""}`, Ve = (r) => {
   const { t: a } = B(), { type: t = "icons", label: n, property: l, onEmitChange: s = () => {
-  }, units: d, negative: c = !1 } = r, [o] = Tr(), [p] = Rr(), [, 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] = Sr(), [p] = Tr(), [, h] = Ie(), i = oe(l), g = Te(), x = nt(), [u] = 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 = qr(Z);
+      const b = Kr(Z);
       g(u, [b], D);
     },
     [u, o, h, p, l, g]
   ), U = H(() => {
     x(u, [v]);
-  }, [u, v, x]), L = T(() => Cs(i, h), [i, h]);
+  }, [u, v, x]), L = T(() => ws(i, h), [i, h]);
   P(() => {
     s(L, i);
   }, [L, s, i]);
@@ -2085,24 +2087,24 @@ const ms = (r) => {
     },
     [K]
   ), S = y(i, "dark", null) === o && y(i, "mod", null) === p && y(i, "mq", null) === h;
-  return /* @__PURE__ */ e.jsx(us, { 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(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: [
     /* @__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(
-          ws,
+          js,
           {
             currentClass: y(i, "cls", ""),
-            classPrefix: y(ks, l, ""),
+            classPrefix: y(Cs, l, ""),
             units: d || [],
             onChange: C,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(xs, { property: l, onChange: C }),
-        t === "range" && /* @__PURE__ */ e.jsx(gs, { property: l, onChange: C }),
-        t === "color" && /* @__PURE__ */ e.jsx(hs, { property: l, onChange: C }),
+        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 === "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: [
@@ -2117,7 +2119,7 @@ const ms = (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: [
-            Ns(y(i, "mq")),
+            ks(y(i, "mq")),
             o && !i.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ e.jsx("br", {}),
@@ -2137,13 +2139,13 @@ const ms = (r) => {
       ] }) : null })
     ] })
   ] }) });
-}, _s = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
+}, Ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
   label: r,
   options: a,
   borderB: t = !1,
   borderT: n = !1,
   type: l = "arbitrary",
-  units: s = _s,
+  units: s = Ns,
   negative: d = !1
 }) => {
   const { t: c } = B(), [o, p] = j(a[0].key), h = ue(), i = H((g) => _(h, "property").includes(g), [h]);
@@ -2187,7 +2189,7 @@ const ms = (r) => {
       ]
     }
   );
-}, Ss = ({ heading: r, items: a }) => {
+}, _s = ({ 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)
@@ -2208,7 +2210,7 @@ const ms = (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)) })
   ] });
-}, Ts = Fe({}), xe = ({ section: r }) => {
+}, Ss = Fe({}), xe = ({ section: r }) => {
   const { t: a } = B(), t = ue(), n = H(
     (s = []) => {
       const d = {};
@@ -2224,26 +2226,26 @@ const ms = (r) => {
     },
     [t]
   ), l = T(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(Ts.Provider, { value: l, children: /* @__PURE__ */ e.jsxs(me, { value: r.heading, children: [
+  return /* @__PURE__ */ e.jsx(Ss.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(Ss, { ...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(_s, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Ve, { ...s }, s.label))
     ) })
   ] }) });
-}, Rs = () => {
-  const r = G(), [a] = pe(), { t } = B(), n = Or(), l = Te(), s = Re(r._type), d = y(ae(a), "prop"), c = y(s.props, `${d}.presets`, {});
+}, 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`, {});
   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(Vr, { children: [
-    /* @__PURE__ */ e.jsx(Hr, { 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(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: [
       t("Apply Presets"),
       /* @__PURE__ */ e.jsx(Qt, {})
     ] }) }) }),
-    /* @__PURE__ */ e.jsx(Dr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(ct, { className: "no-scrollbar h-full", children: [
+    /* @__PURE__ */ e.jsx(Hr, { 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,
@@ -2267,21 +2269,21 @@ const ms = (r) => {
     ] }) })
   ] }) });
 };
-function Vs() {
-  const { flexChild: r, gridChild: a } = Br(), { t } = B(), [n] = pe();
+function Rs() {
+  const { flexChild: r, gridChild: a } = Dr(), { 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(Rs, {}),
+    /* @__PURE__ */ e.jsx(Ts, {}),
     /* @__PURE__ */ e.jsxs(ot, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: ds }),
-      a ? /* @__PURE__ */ e.jsx(xe, { section: cs }) : null,
-      ps.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
+      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))
     ] })
   ] });
 }
-const Hs = {
+const Vs = {
   px: 1,
   "%": 1,
   em: 100,
@@ -2307,7 +2309,7 @@ const Hs = {
       const p = !y(l, "negative", !1), h = y(l, "cssProperty", "");
       let i = parseFloat(l.dragStartValue);
       i = Ue(i) ? 0 : i;
-      let g = Hs[l.dragUnit];
+      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}`);
@@ -2339,8 +2341,8 @@ const Hs = {
       }
     ) : 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(ls, {}),
-      /* @__PURE__ */ e.jsx(Vs, {})
+      /* @__PURE__ */ e.jsx(as, {}),
+      /* @__PURE__ */ e.jsx(Rs, {})
     ] })
   ] }) });
 };