@janbox/storefront-builder 1.0.5 → 1.0.6

package/dist/index.js

@@ -3,12 +3,12 @@ import { A as Ga, d as _a, o as Ua, E as qa, t as $a, F as Ja, G as Xa, H as Ka,
 import { jsx as e, Fragment as le, jsxs as i } from "@emotion/react/jsx-runtime";
 import { useRef as te, useContext as no, createContext as oo, useMemo as sn, forwardRef as tt, isValidElement as an, cloneElement as ro, useEffect as fe, useCallback as Kt, Fragment as ne, useState as A } from "react";
 import { M as ln, R as K } from "./minus-C82LyzQP.js";
-import { Draggable as vt, DragDropContext as bt, Droppable as Nt } from "@hello-pangea/dnd";
-import { getGridProps as so, getCellProps as ao, GRID_MINIMUM_COLS as Yt, GRID_MAXIMUM_COLS as io, getLinkProps as lo, getButtonProps as co, getFlexboxProps as uo, getFlexItemProps as ho, getTextProps as go, getImageProps as po, getMarqueeProps as wo, MarqueeDataAttributes as wt, getTabsProps as mo, getTabPanelProps as Co, getSwiperProps as xo, getUnorderedListProps as fo, getListItemProps as vo, getIconProps as bo, getAccordionProps as No, getAccordionGroupProps as ko, getAccordionDataAttributes as $e, AccordionDataAttributes as mt, getVideoProps as Ro, getBoxProps as Lo } from "@janbox/storefront-ui";
-import { isNumber as nt, isNil as z, isFunction as To, assign as So, isUndefined as kt, get as ze, parseInt as yo, trimStart as Rt, isString as me, set as Bo } from "lodash-es";
+import { Draggable as bt, DragDropContext as Nt, Droppable as kt } from "@hello-pangea/dnd";
+import { getGridProps as so, getCellProps as ao, GRID_MINIMUM_COLS as Yt, GRID_MAXIMUM_COLS as io, getLinkProps as lo, getButtonProps as co, getFlexboxProps as uo, getFlexItemProps as ho, getTextProps as go, getImageProps as po, getMarqueeProps as wo, MarqueeDataAttributes as mt, getTabsProps as mo, getTabPanelProps as Co, getSwiperProps as xo, getUnorderedListProps as fo, getListItemProps as vo, getIconProps as bo, getAccordionProps as No, getAccordionGroupProps as ko, getAccordionDataAttributes as $e, AccordionDataAttributes as Ct, getVideoProps as Ro, getBoxProps as Lo } from "@janbox/storefront-ui";
+import { isNumber as nt, isNil as z, isFunction as To, assign as So, isUndefined as Rt, get as ze, parseInt as yo, trimStart as Lt, isString as me, set as Bo } from "lodash-es";
 import { useDebounceCallback as dn, useToggle as cn } from "usehooks-ts";
-import { v as W, h as Y, W as T, d as f, n as Po, q as Io, A as ve, L as Mo, b as Lt, w as Se, x as ye, f as Ct, y as Be, z as Pe, a as Tt, B as Ao, e as U, r as ee, g as Q, o as Re, i as j, j as F, k as S, l as Z, m as y, E as St, T as yt, F as Wo, t as I, D as un, c as hn, G as Vo } from "./index-DrJkOkbq.js";
-import { p as pi, C as wi, R as mi, U as Ci, H as xi } from "./index-DrJkOkbq.js";
+import { v as W, h as Y, W as T, d as f, n as Po, q as Io, A as ve, L as Mo, b as Tt, w as Se, x as ye, f as xt, y as Be, z as Pe, a as ot, B as Ao, e as U, r as ee, g as Q, o as Re, i as j, j as F, k as S, l as Z, m as y, E as St, T as yt, F as Wo, t as I, D as un, c as hn, G as Vo } from "./index-BU9pvpw_.js";
+import { p as pi, C as wi, R as mi, U as Ci, H as xi } from "./index-BU9pvpw_.js";
 import { useNode as re } from "@craftjs/core";
 import { useNode as vi } from "@craftjs/core";
 import { W as Ho } from "./tooltip-CqfT80iK.js";
@@ -39,12 +39,12 @@ const nr = () => W({
   defaultValue: o,
   step: a = 0,
   ref: l,
-  ...c
+  ...d
 }) => {
-  const d = te(null), [u, h] = Le({
+  const c = te(null), [u, h] = Le({
     value: n?.toString(),
     defaultValue: o?.toString() ?? ""
-  }), g = parseFloat(u), p = Fe([l, d]), w = typeof s == "number" ? s : Qt, m = (N) => {
+  }), g = parseFloat(u), p = Fe([l, c]), w = typeof s == "number" ? s : Qt, m = (N) => {
     if (N = N.replace(/e|E/g, ""), t >= 0 && (N = N.replace(/^-/, "")), s === 0)
       N = N.replace(/\.\d+$/, "");
     else {
@@ -54,23 +54,23 @@ const nr = () => W({
         N = `${B.at(0)}.${P}`;
       }
     }
-    return c.transform?.(N) ?? N;
+    return d.transform?.(N) ?? N;
   }, b = (N) => {
-    c.mode === "onBlur" && N.target.valueAsNumber < t && (N.target.value = t.toString()), h(N.target.value), c.onChange?.(N);
+    d.mode === "onBlur" && N.target.valueAsNumber < t && (N.target.value = t.toString()), h(N.target.value), d.onChange?.(N);
   }, C = (N) => {
-    (N.key === "e" || N.key === "E") && N.preventDefault(), c.onKeyDown?.(N);
+    (N.key === "e" || N.key === "E") && N.preventDefault(), d.onKeyDown?.(N);
   }, k = (N) => {
-    if (!d.current) return;
-    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(d.current, N);
+    if (!c.current) return;
+    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(c.current, N);
     const P = new Event("input", { bubbles: !0 });
-    d.current.dispatchEvent(P);
+    c.current.dispatchEvent(P);
   }, R = (N) => {
-    const B = d.current;
+    const B = c.current;
     if (z(B)) return;
     const P = B.valueAsNumber, J = Math.min(isNaN(P) ? t + a : P + a, r);
     P !== J && k(J.toString());
   }, V = (N) => {
-    const B = d.current;
+    const B = c.current;
     if (z(B)) return;
     const P = B.valueAsNumber, J = Math.max(isNaN(P) ? t : P - a, t);
     P !== J && k(J.toString());
@@ -78,7 +78,7 @@ const nr = () => W({
   return /* @__PURE__ */ e(
     Y,
     {
-      ...c,
+      ...d,
       css: {
         "::-webkit-outer-spin-button": {
           margin: 0,
@@ -89,7 +89,7 @@ const nr = () => W({
           margin: 0
         }
       },
-      prefix: c.prefix ?? (a > 0 ? /* @__PURE__ */ e(
+      prefix: d.prefix ?? (a > 0 ? /* @__PURE__ */ e(
         T,
         {
           disabled: nt(n) && n <= t,
@@ -98,7 +98,7 @@ const nr = () => W({
           children: /* @__PURE__ */ e(f, { source: ln })
         }
       ) : null),
-      suffix: c.suffix ?? (a > 0 ? /* @__PURE__ */ e(T, { onClick: R, "aria-disabled": isNaN(g) ? !1 : g <= t, children: /* @__PURE__ */ e(f, { source: je }) }) : null),
+      suffix: d.suffix ?? (a > 0 ? /* @__PURE__ */ e(T, { onClick: R, "aria-disabled": isNaN(g) ? !1 : g <= t, children: /* @__PURE__ */ e(f, { source: je }) }) : null),
       type: "number",
       value: u,
       onChange: b,
@@ -115,13 +115,13 @@ const nr = () => W({
   children: o,
   contentStyle: a = {},
   reference: l,
-  triggers: c = ["click"]
+  triggers: d = ["click"]
 }) => {
-  const [d, u] = Le({
+  const [c, u] = Le({
     defaultValue: !1,
     value: t
   }), g = Bt({
-    open: d,
+    open: c,
     onOpenChange: (N, B, P) => {
       u(N), s?.(N, B, P);
     },
@@ -140,9 +140,9 @@ const nr = () => W({
     ],
     whileElementsMounted: Pt
   }), { context: p, refs: w } = g, m = Wt(p, {
-    enabled: c.includes("click")
+    enabled: d.includes("click")
   }), b = Oo(p, {
-    enabled: c.includes("hover")
+    enabled: d.includes("hover")
   }), C = Vt(p, n), k = Ht(p), R = zt([m, C, k, b]), V = sn(
     () => ({
       ...g,
@@ -151,7 +151,7 @@ const nr = () => W({
     [g, R]
   );
   return jt(() => {
-    kt(l) || (w.setReference?.(l), p.onOpenChange(!z(l)));
+    Rt(l) || (w.setReference?.(l), p.onOpenChange(!z(l)));
   }, [l]), /* @__PURE__ */ e(mn.Provider, { value: V, children: o });
 }, de = (t) => jo() ? /* @__PURE__ */ e(en, { ...t }) : /* @__PURE__ */ e(Fo, { children: /* @__PURE__ */ e(en, { ...t }) }), ce = tt(({ children: t, ...r }, s) => {
   const { getReferenceProps: n, context: o } = Ft(), a = Fe([o.refs.setReference, ze(t, "ref"), s]);
@@ -166,14 +166,14 @@ const nr = () => W({
   ({ style: t, className: r, ...s }, n) => {
     const { getFloatingProps: o, context: a } = Ft(), l = Fe([a.refs.setFloating, n]);
     if (!a.open) return /* @__PURE__ */ e(le, {});
-    const c = o(s);
+    const d = o(s);
     return /* @__PURE__ */ e(Ot, { root: document.body, children: /* @__PURE__ */ e(
       "div",
       {
         style: { ...a.floatingStyles, ...t },
         ...o(s),
         className: L(
-          c.className,
+          d.className,
           "tw:focus-visible:outline-none tw:rounded-lg tw:p-3 tw:shadow tw:animate-fade tw:animate-duration-300 tw:bg-ic-ink-6s tw:border tw:border-ic-white-1s tw:text-ic-white-6s tw:text-sm",
           r
         ),
@@ -185,17 +185,17 @@ const nr = () => W({
 ), be = ({ event: t = "click", reason: r, className: s, ref: n, ...o }) => {
   const a = te(null), {
     context: { onOpenChange: l }
-  } = Ft(), c = Fe([n, a]);
+  } = Ft(), d = Fe([n, a]);
   return fe(() => {
-    const d = a.current;
-    if (!d) return;
+    const c = a.current;
+    if (!c) return;
     const u = function(h) {
       l?.(!1, h, r);
     };
-    return d.addEventListener(t, u), () => {
-      d.removeEventListener(t, u);
+    return c.addEventListener(t, u), () => {
+      c.removeEventListener(t, u);
     };
-  }, [t, l, r]), /* @__PURE__ */ e("div", { className: L("tw:contents", s), ...o, ref: c });
+  }, [t, l, r]), /* @__PURE__ */ e("div", { className: L("tw:contents", s), ...o, ref: d });
 }, or = ({ className: t, ...r }) => /* @__PURE__ */ e("div", { className: L("es-color-picker", t), children: /* @__PURE__ */ e(Eo, { ...r }) }), rr = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path d="M10,18a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42L10,15.59l8.29-8.3a1,1,0,1,1,1.42,1.42l-9,9A1,1,0,0,1,10,18Z"></path>
 </svg>`, sr = ({ RowComponent: t, options: r, ref: s, ...n }) => {
@@ -205,22 +205,22 @@ const nr = () => W({
       const u = o.current?.getElement()?.firstElementChild;
       return u instanceof HTMLDivElement ? u : null;
     }
-  }), c = l.getVirtualItems(), d = l.getTotalSize();
+  }), d = l.getVirtualItems(), c = l.getTotalSize();
   return /* @__PURE__ */ e(Po, { ...n, ref: a, children: /* @__PURE__ */ e(
     Io.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       style: {
-        height: d
+        height: c
       },
       children: /* @__PURE__ */ e(
         "div",
         {
           style: {
-            transform: `translateY(${c.at(0)?.start ?? 0}px)`
+            transform: `translateY(${d.at(0)?.start ?? 0}px)`
           },
-          children: c.map((u) => /* @__PURE__ */ e("div", { "data-index": u.index, ref: l.measureElement, children: /* @__PURE__ */ e(t, { row: u }) }, u.key))
+          children: d.map((u) => /* @__PURE__ */ e("div", { "data-index": u.index, ref: l.measureElement, children: /* @__PURE__ */ e(t, { row: u }) }, u.key))
         }
       )
     }
@@ -233,8 +233,8 @@ const nr = () => W({
     onOpenChange: o,
     dissmiss: a,
     searchable: l,
-    value: c,
-    optionValue: d,
+    value: d,
+    optionValue: c,
     optionLabel: u,
     defaultValue: h,
     options: g,
@@ -251,14 +251,14 @@ const nr = () => W({
   } = t, [P, J] = Le({
     defaultValue: !1,
     value: n
-  }), [Ne, dt] = Le({
+  }), [Ne, ct] = Le({
     defaultValue: h,
-    value: c
-  }), ct = (O, _, ae) => {
+    value: d
+  }), ut = (O, _, ae) => {
     !O && !ae || (J(O), o?.(O, _, ae));
-  }, { refs: _e, floatingStyles: ut, context: We } = Bt({
+  }, { refs: _e, floatingStyles: ht, context: We } = Bt({
     open: P,
-    onOpenChange: ct,
+    onOpenChange: ut,
     placement: r,
     middleware: [
       It(),
@@ -267,7 +267,7 @@ const nr = () => W({
         apply({ elements: O }) {
           const { width: _ } = O.reference.getBoundingClientRect(), ae = s === "fit-parent" ? _ : s, qe = {
             minWidth: `${ae ?? _}px`,
-            width: kt(ae) ? ae : `${ae}px`,
+            width: Rt(ae) ? ae : `${ae}px`,
             zIndex: Oe
           };
           Object.assign(O.floating.style, qe);
@@ -275,16 +275,16 @@ const nr = () => W({
       })
     ],
     whileElementsMounted: Pt
-  }), ht = Wt(We), X = Vt(We, a), ke = Ht(We), { getReferenceProps: se, getFloatingProps: gt } = zt([ht, X, ke]), Ue = Kt(
-    (O) => typeof d == "function" ? d(O) : ze(O, d ?? "value"),
-    [d]
+  }), gt = Wt(We), X = Vt(We, a), ke = Ht(We), { getReferenceProps: se, getFloatingProps: pt } = zt([gt, X, ke]), Ue = Kt(
+    (O) => typeof c == "function" ? c(O) : ze(O, c ?? "value"),
+    [c]
   ), Jt = Kt(
     (O) => typeof u == "function" ? u(O) : ze(O, u ?? "label"),
     [u]
   ), Zn = (O) => {
     const _ = Ue(O);
-    _ !== Ne && (dt(_), p?.(_, O), J(!1));
-  }, pt = sn(
+    _ !== Ne && (ct(_), p?.(_, O), J(!1));
+  }, wt = sn(
     () => g.find((O) => Ne === Ue(O)),
     [Ue, g, Ne]
   ), En = ({ row: O }) => {
@@ -331,7 +331,7 @@ const nr = () => W({
         ref: _e.setReference,
         children: [
           m,
-          /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:text-left tw:truncate", children: pt ? V?.(pt) ?? Jt(pt) : /* @__PURE__ */ e("span", { className: "tw:text-ic-white-3s", children: w }) }),
+          /* @__PURE__ */ e("div", { className: "tw:flex-1 tw:text-left tw:truncate", children: wt ? V?.(wt) ?? Jt(wt) : /* @__PURE__ */ e("span", { className: "tw:text-ic-white-3s", children: w }) }),
           b ?? /* @__PURE__ */ e(
             f,
             {
@@ -351,10 +351,10 @@ const nr = () => W({
         ref: _e.setFloating,
         className: "tw:bg-ic-ink-6s tw:rounded-lg",
         style: {
-          ...ut,
+          ...ht,
           zIndex: Oe
         },
-        ...gt(),
+        ...pt(),
         children: /* @__PURE__ */ i("div", { className: "tw:focus-visible:outline-none tw:rounded-lg tw:py-1 tw:shadow tw:animate-fade tw:animate-duration-300 tw:bg-ic-white-1s tw:text-ic-white-6s tw:text-xs", children: [
           l && /* @__PURE__ */ e("div", { className: "tw:px-2 tw:mb-2", children: /* @__PURE__ */ e(Y, { fullWidth: !0, autoFocus: !0 }) }),
           /* @__PURE__ */ e(
@@ -458,8 +458,8 @@ const nr = () => W({
     onOpenChange: o,
     dissmiss: a,
     value: l,
-    defaultValue: c,
-    onChange: d,
+    defaultValue: d,
+    onChange: c,
     placeholder: u,
     referenceProps: h,
     prefix: g,
@@ -468,7 +468,7 @@ const nr = () => W({
     showTimeInput: m = !0,
     ...b
   } = t, [C, k] = Le({
-    defaultValue: c,
+    defaultValue: d,
     value: l
   }), [R, V] = Le({
     defaultValue: !1,
@@ -484,20 +484,20 @@ const nr = () => W({
       Mt(4),
       At({
         apply({ elements: X }) {
-          const { width: ke } = X.reference.getBoundingClientRect(), se = s === "fit-parent" ? ke : s, gt = {
+          const { width: ke } = X.reference.getBoundingClientRect(), se = s === "fit-parent" ? ke : s, pt = {
             minWidth: `${se ?? ke}px`,
-            width: kt(se) ? se : `${se}px`,
+            width: Rt(se) ? se : `${se}px`,
             zIndex: Oe
           };
-          Object.assign(X.floating.style, gt);
+          Object.assign(X.floating.style, pt);
         }
       })
     ],
     whileElementsMounted: Pt
-  }), Ne = Wt(J), dt = Vt(J, a), ct = Ht(J), { getReferenceProps: _e, getFloatingProps: ut } = zt([Ne, dt, ct]), We = {
+  }), Ne = Wt(J), ct = Vt(J, a), ut = Ht(J), { getReferenceProps: _e, getFloatingProps: ht } = zt([Ne, ct, ut]), We = {
     height: Number(w)
-  }, ht = (X) => {
-    X && (k(X), d?.(X));
+  }, gt = (X) => {
+    X && (k(X), c?.(X));
   };
   return /* @__PURE__ */ i(ne, { children: [
     /* @__PURE__ */ i(
@@ -536,8 +536,8 @@ const nr = () => W({
           ...P,
           zIndex: Oe
         },
-        ...ut(),
-        children: /* @__PURE__ */ e("div", { className: "tw:focus-visible:outline-none tw:rounded-lg tw:animate-fade tw:animate-duration-300 tw:text-xs", children: /* @__PURE__ */ e($o, { showTimeInput: m, selected: C, onChange: ht, inline: !0 }) })
+        ...ht(),
+        children: /* @__PURE__ */ e("div", { className: "tw:focus-visible:outline-none tw:rounded-lg tw:animate-fade tw:animate-duration-300 tw:text-xs", children: /* @__PURE__ */ e($o, { showTimeInput: m, selected: C, onChange: gt, inline: !0 }) })
       }
     ) })
   ] });
@@ -545,7 +545,7 @@ const nr = () => W({
   const {
     queryParams: { screen: t },
     setQueryParams: r
-  } = Lt(), s = (n) => {
+  } = Tt(), s = (n) => {
     r({
       screen: n.currentTarget.getAttribute("value")
     });
@@ -553,12 +553,12 @@ const nr = () => W({
   return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(Se, { children: [
     /* @__PURE__ */ i(ye, { children: [
       /* @__PURE__ */ e("div", { className: "tw:text-shadow-red-50" }),
-      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(f, { source: Ct.find((n) => n.size === t)?.icon ?? "" }) })
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(f, { source: xt.find((n) => n.size === t)?.icon ?? "" }) })
     ] }),
-    /* @__PURE__ */ e(Be, { children: Ct.map((n) => /* @__PURE__ */ e(Pe, { isActive: n.size === t, value: n.size, onClick: s, children: /* @__PURE__ */ e(f, { source: n.icon }) }, n.size)) })
+    /* @__PURE__ */ e(Be, { children: xt.map((n) => /* @__PURE__ */ e(Pe, { isActive: n.size === t, value: n.size, onClick: s, children: /* @__PURE__ */ e(f, { source: n.icon }) }, n.size)) })
   ] }) });
 }, tn = ({ color: t, size: r = 24 }) => {
-  const [s] = Tt(), n = gn(t, s.theme.palette);
+  const s = ot(), n = gn(t, s.theme.palette);
   return /* @__PURE__ */ i(
     "div",
     {
@@ -595,7 +595,7 @@ const nr = () => W({
 }) => {
   const a = (h) => {
     r?.(nn[h.currentTarget.value]);
-  }, [l] = Tt(), c = gn(t, l.theme.palette)?.hex(), d = (h) => {
+  }, l = ot(), d = gn(t, l.theme.palette)?.hex(), c = (h) => {
     h.target.select();
   }, u = (h) => {
     r?.(h.target.value);
@@ -611,19 +611,19 @@ const nr = () => W({
             f,
             {
               className: L({
-                hidden: t === c
+                hidden: t === d
               }),
               size: 16,
               source: xn
             }
           ),
           onChange: u,
-          onFocus: d,
-          value: c,
+          onFocus: c,
+          value: d,
           size: "32"
         }
       ) }) }),
-      /* @__PURE__ */ e(or, { className: "tw:min-w-72", color: c, onChange: r }),
+      /* @__PURE__ */ e(or, { className: "tw:min-w-72", color: d, onChange: r }),
       /* @__PURE__ */ e(
         "div",
         {
@@ -650,9 +650,9 @@ const nr = () => W({
   defaultValue: o = {},
   ...a
 }) => {
-  const l = t.find((m) => s?.toString().trim().endsWith(m)) ?? t.at(0), [c, d] = A(l);
+  const l = t.find((m) => s?.toString().trim().endsWith(m)) ?? t.at(0), [d, c] = A(l);
   jt(() => {
-    d(l);
+    c(l);
   }, [l]);
   const u = ({ value: m, unit: b }) => {
     if (z(m) || z(b) || b === Ao) {
@@ -663,13 +663,13 @@ const nr = () => W({
   }, h = ur(s?.toString()), g = (m) => {
     m.stopPropagation();
     const b = m.currentTarget.value;
-    b !== c && (d(m.currentTarget.value), u({ value: o[b], unit: b }));
+    b !== d && (c(m.currentTarget.value), u({ value: o[b], unit: b }));
   }, p = (m) => {
     m.target.select(), a.onFocus?.(m);
   }, w = (m) => {
     const b = isNaN(m.target.valueAsNumber) ? void 0 : m.target.valueAsNumber;
     u({
-      unit: c,
+      unit: d,
       value: b
     });
   };
@@ -683,7 +683,7 @@ const nr = () => W({
           onClick: g,
           value: m,
           className: L("tw:text-ic-white-3s tw:hover:text-ic-white-4s", {
-            "tw:text-ic-white-6s tw:hover:text-ic-white-6s": c === m
+            "tw:text-ic-white-6s tw:hover:text-ic-white-6s": d === m
           }),
           size: "20",
           children: /* @__PURE__ */ e("span", { className: "tw:text-xs", children: m }, m)
@@ -704,11 +704,11 @@ const nr = () => W({
 <path d="M20 12V5C20 3.89543 19.1046 3 18 3H6C4.89543 3 4 3.89543 4 5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `, bn = ({ source: t, onChange: r, previewStyle: s }) => {
-  const [n, o] = A(t ?? "");
+  const [n, o] = A(t ?? ""), [a, l] = A(!1), { handlers: d } = ot(), { upload: c } = d;
   return jt(() => {
     o(t ?? "");
   }, [t]), /* @__PURE__ */ i("div", { className: "tw:rounded-lg tw:p-4 tw:bg-ic-white-1s tw:flex tw:flex-col tw:gap-2", children: [
-    /* @__PURE__ */ e(ar, { children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(ar, { isLoading: a, children: /* @__PURE__ */ e(
       Do,
       {
         accept: {
@@ -717,19 +717,29 @@ const nr = () => W({
           "image/webp": [".webp"]
         },
         multiple: !1,
-        onDrop: (d) => {
-          d.at(0);
+        onDrop: async (p) => {
+          const w = p.at(0);
+          if (w) {
+            l(!0);
+            try {
+              const m = await c(w);
+              r?.(m);
+            } finally {
+              l(!1);
+            }
+          }
         },
-        children: ({ getInputProps: d, getRootProps: u }) => /* @__PURE__ */ i(
+        children: ({ getInputProps: p, getRootProps: w }) => /* @__PURE__ */ i(
           "div",
           {
             className: L(
-              "tw:aspect-video tw:bg-ic-white-1s tw:rounded-lg tw:overflow-hidden tw:cursor-pointer tw:flex tw:items-center tw:justify-center tw:relative",
+              "tw:aspect-video tw:bg-ic-white-1s tw:rounded-lg tw:overflow-hidden tw:flex tw:items-center tw:justify-center tw:relative",
               {
-                group: !!t
+                group: !!t,
+                "tw:cursor-pointer": !0
               }
             ),
-            ...u(),
+            ...w(),
             children: [
               /* @__PURE__ */ e(
                 "div",
@@ -751,7 +761,6 @@ const nr = () => W({
                     "tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:absolute tw:inset-0 tw:bg-black tw:bg-opacity-0 tw:transition-all",
                     "tw:group-hover:bg-opacity-40 tw:group-hover:opacity-100",
                     {
-                      // hidden: uploadMutation.isPending,
                       "tw:opacity-0": !!t
                     }
                   ),
@@ -761,7 +770,7 @@ const nr = () => W({
                   ]
                 }
               ),
-              /* @__PURE__ */ e("input", { ...d() })
+              /* @__PURE__ */ e("input", { ...p() })
             ]
           }
         )
@@ -770,14 +779,14 @@ const nr = () => W({
     /* @__PURE__ */ e(
       Y,
       {
-        onChange: (d) => {
-          d.target.value = Rt(d.target.value), o(d.target.value);
+        onChange: (p) => {
+          p.target.value = Lt(p.target.value), o(p.target.value);
         },
         title: n,
         value: n,
         size: "32",
-        onBlur: (d) => {
-          d.currentTarget.value !== (t ?? "") && r?.(n);
+        onBlur: (p) => {
+          p.currentTarget.value !== (t ?? "") && r?.(n);
         },
         placeholder: "https://example.com/image.jpg"
       }
@@ -861,9 +870,9 @@ const nr = () => W({
   }), a = (() => {
     if (o.textStyle.fontSize && me(o.textStyle.fontSize))
       return xe(o.textStyle.fontSize);
-  })(), l = o.textStyle.color && me(o.textStyle.color) ? o.textStyle.color : n?.computedStyleMap().get("color")?.toString(), c = (u) => {
+  })(), l = o.textStyle.color && me(o.textStyle.color) ? o.textStyle.color : n?.computedStyleMap().get("color")?.toString(), d = (u) => {
     t.chain().focus().setColor(u).run(), s(!1);
-  }, d = (u) => {
+  }, c = (u) => {
     if (isNaN(u.target.valueAsNumber)) {
       t.chain().focus().unsetFontSize().run();
       return;
@@ -876,7 +885,7 @@ const nr = () => W({
       {
         value: a ?? "",
         placeholder: xe(n?.computedStyleMap().get("font-size")?.toString())?.toString(),
-        onChange: d,
+        onChange: c,
         debounce: 400,
         min: 10,
         className: "tw:text-center",
@@ -925,7 +934,7 @@ const nr = () => W({
         onOpenChange: s,
         placement: "bottom",
         color: l,
-        onChange: c,
+        onChange: d,
         children: /* @__PURE__ */ e(T, { size: "28", title: "Underline", children: /* @__PURE__ */ i("div", { className: "tw:relative tw:size-5 tw:flex tw:flex-col tw:items-center tw:justify-center", children: [
           /* @__PURE__ */ e(f, { size: 18, source: gr }),
           /* @__PURE__ */ e(
@@ -987,7 +996,7 @@ const nr = () => W({
     icon: mr,
     value: "justify"
   }
-].map((o) => /* @__PURE__ */ e(T, { value: o.value, children: /* @__PURE__ */ e(f, { source: o.icon }) }, o.value)) }) }), ot = ({ value: t, onChange: r, name: s, responsive: n }) => {
+].map((o) => /* @__PURE__ */ e(T, { value: o.value, children: /* @__PURE__ */ e(f, { source: o.icon }) }, o.value)) }) }), rt = ({ value: t, onChange: r, name: s, responsive: n }) => {
   const o = () => {
     r?.({
       ...t,
@@ -1064,15 +1073,15 @@ const nr = () => W({
     });
   }, value: t?.textTransform, children: o.map((l) => /* @__PURE__ */ e(T, { value: l.value, children: l.icon ? /* @__PURE__ */ e(f, { source: l.icon }) : /* @__PURE__ */ e("span", { className: "tw:text-sm tw:leading-none", children: l.example }) }, l.value)) }) });
 }, $ = ({ name: t, value: r, onChange: s, responsive: n = !0, menu: o }) => {
-  const a = te(null), [l, c] = A(!1), d = (C) => {
+  const a = te(null), [l, d] = A(!1), c = (C) => {
     s?.({
       width: C
     });
   }, u = (C) => {
-    c(!0);
+    d(!0);
   }, h = () => {
     setTimeout(() => {
-      c(!1);
+      d(!1);
     }, 100);
   }, g = [
     {
@@ -1089,9 +1098,9 @@ const nr = () => W({
     }
   ], p = g.filter((C) => C.visible), w = g.find((C) => C.value === r?.width)?.label?.toString(), m = (C) => {
     const k = C.currentTarget.getAttribute("value");
-    z(k) || d(k);
+    z(k) || c(k);
   }, b = (C) => {
-    C.stopPropagation(), d(void 0);
+    C.stopPropagation(), c(void 0);
   };
   return /* @__PURE__ */ e(v, { name: t ?? "Width", responsive: n, children: /* @__PURE__ */ i("div", { className: "tw:relative tw:w-1/2", children: [
     /* @__PURE__ */ e(
@@ -1101,7 +1110,7 @@ const nr = () => W({
         wrapRef: a,
         placeholder: w,
         value: r?.width,
-        onChange: d,
+        onChange: c,
         defaultValue: {
           "%": 100
         },
@@ -1135,7 +1144,7 @@ const nr = () => W({
   units: o = ["px", "%"],
   menu: a
 }) => {
-  const [l, c] = A(!1), d = [
+  const [l, d] = A(!1), c = [
     {
       value: "auto",
       label: "Auto",
@@ -1148,17 +1157,17 @@ const nr = () => W({
       visible: a?.fitContentOption?.visible ?? !1,
       clearable: a?.fitContentOption?.clearable ?? !1
     }
-  ], u = d.filter((C) => C.visible), h = (C) => {
+  ], u = c.filter((C) => C.visible), h = (C) => {
     s?.({
       height: C
     });
   }, g = (C) => {
-    c(!0);
+    d(!0);
   }, p = () => {
     setTimeout(() => {
-      c(!1);
+      d(!1);
     }, 100);
-  }, w = d.find((C) => C.value === r?.height)?.label, m = (C) => {
+  }, w = c.find((C) => C.value === r?.height)?.label, m = (C) => {
     const k = C.currentTarget.getAttribute("value");
     z(k) || h(k);
   }, b = (C) => {
@@ -1203,8 +1212,8 @@ const nr = () => W({
   };
   return /* @__PURE__ */ e(v, { name: t ?? "Color", responsive: r, children: /* @__PURE__ */ e(Ie, { color: s?.color, onChange: o }) });
 }, fr = ({ value: t, onChange: r }) => {
-  const [s] = Tt(), n = wn(pn), o = (() => {
-    const l = Object.keys(n).find((c) => n[c] === t?.backgroundColor);
+  const s = ot(), n = wn(pn), o = (() => {
+    const l = Object.keys(n).find((d) => n[d] === t?.backgroundColor);
     return l ? ze(s.theme.palette, l) : t?.backgroundColor;
   })();
   return /* @__PURE__ */ e(v, { name: "Color", children: /* @__PURE__ */ e(Ie, { color: o, onChange: (l) => {
@@ -1267,7 +1276,7 @@ const nr = () => W({
 <path d="M9.95966 15.4228L8.378 12.5214C8.20283 12.2 7.86604 12 7.5 12C7.13396 12 6.79717 12.2 6.622 12.5214L2 21.0001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `, yr = (t) => t?.match(/url\((['"]?)(https?:\/\/[^'")]+)\1\)/)?.at(2), Br = ({ onChange: t, value: r }) => {
-  const [s, n] = Zo(!1), o = r?.backgroundPosition ?? "center", a = r?.backgroundRepeat ?? "no-repeat", l = r?.backgroundSize ?? "cover", c = r?.backgroundAttachment ?? "scroll", d = (w) => {
+  const [s, n] = Zo(!1), o = r?.backgroundPosition ?? "center", a = r?.backgroundRepeat ?? "no-repeat", l = r?.backgroundSize ?? "cover", d = r?.backgroundAttachment ?? "scroll", c = (w) => {
     t?.({
       backgroundImage: w ? `url(${w})` : void 0,
       backgroundPosition: o,
@@ -1303,10 +1312,10 @@ const nr = () => W({
           backgroundPosition: o,
           backgroundRepeat: a,
           backgroundSize: l,
-          backgroundAttachment: c
+          backgroundAttachment: d
         },
         source: yr(r?.backgroundImage),
-        onChange: d
+        onChange: c
       }
     ),
     /* @__PURE__ */ e(
@@ -1389,7 +1398,7 @@ const nr = () => W({
         {
           onChange: p,
           className: "tw:w-1/2",
-          value: c,
+          value: d,
           options: Tr
         }
       ) })
@@ -1410,11 +1419,11 @@ const nr = () => W({
       label: "Auto",
       value: a
     }
-  ], c = () => {
+  ], d = () => {
     setTimeout(() => {
       o(!1);
     }, 100);
-  }, d = (p) => {
+  }, c = (p) => {
     o(!0), p.target.select();
   }, u = (p) => {
     const w = isNaN(p.target.valueAsNumber) ? void 0 : p.target.valueAsNumber;
@@ -1429,14 +1438,14 @@ const nr = () => W({
       M,
       {
         mode: "onBlur",
-        onFocus: d,
+        onFocus: c,
         className: "tw:text-center",
         size: "28",
         autoComplete: "off",
         fullWidth: !0,
         placeholder: r === a ? "Auto" : void 0,
         value: r ?? 0,
-        onBlur: c,
+        onBlur: d,
         name: t,
         onChange: u
       }
@@ -1463,7 +1472,7 @@ const nr = () => W({
     ] })
   ] });
 }, E = ({ value: t, onChange: r }) => {
-  const s = te(null), n = te(null), [o, a] = A(0), [l, c] = A(0);
+  const s = te(null), n = te(null), [o, a] = A(0), [l, d] = A(0);
   fe(() => {
     const u = new ResizeObserver((h) => {
       const g = h.at(0)?.target;
@@ -1474,12 +1483,12 @@ const nr = () => W({
       const p = h.at(1)?.target;
       if (p) {
         const { width: w } = p.getBoundingClientRect();
-        c(Math.floor(Math.sqrt(Math.pow(w, 2) / 2)));
+        d(Math.floor(Math.sqrt(Math.pow(w, 2) / 2)));
       }
     });
     return s.current && u.observe(s.current), n.current && u.observe(n.current), () => u.disconnect();
   }, []);
-  const d = (u, h) => {
+  const c = (u, h) => {
     r?.({
       ...t,
       [u]: h
@@ -1493,7 +1502,7 @@ const nr = () => W({
           width: o
         },
         className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
-        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-3", children: /* @__PURE__ */ e(we, { name: "marginBottom", value: t?.marginBottom, onChange: d }) }) })
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-3", children: /* @__PURE__ */ e(we, { name: "marginBottom", value: t?.marginBottom, onChange: c }) }) })
       }
     ) }),
     /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:-translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1503,7 +1512,7 @@ const nr = () => W({
           width: o
         },
         className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
-        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-3", children: /* @__PURE__ */ e(we, { name: "marginTop", value: t?.marginTop, onChange: d }) }) })
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-3", children: /* @__PURE__ */ e(we, { name: "marginTop", value: t?.marginTop, onChange: c }) }) })
       }
     ) }),
     /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1513,7 +1522,7 @@ const nr = () => W({
           width: o
         },
         className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
-        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-1.5", children: /* @__PURE__ */ e(we, { name: "marginRight", value: t?.marginRight, onChange: d }) }) })
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-1.5", children: /* @__PURE__ */ e(we, { name: "marginRight", value: t?.marginRight, onChange: c }) }) })
       }
     ) }),
     /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:-translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1523,7 +1532,7 @@ const nr = () => W({
           width: o
         },
         className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
-        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-1.5", children: /* @__PURE__ */ e("div", { className: "tw:w-10", children: /* @__PURE__ */ e(we, { name: "marginLeft", value: t?.marginLeft, onChange: d }) }) }) })
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-1.5", children: /* @__PURE__ */ e("div", { className: "tw:w-10", children: /* @__PURE__ */ e(we, { name: "marginLeft", value: t?.marginLeft, onChange: c }) }) }) })
       }
     ) }),
     /* @__PURE__ */ i("div", { className: "tw:absolute tw:w-3/5 tw:h-3/5 tw:left-1/2 tw:top-1/2 tw:-translate-x-1/2 tw:-translate-y-1/2 tw:bg-ic-white-1s tw:rounded tw:overflow-hidden", children: [
@@ -1534,7 +1543,7 @@ const nr = () => W({
             width: l
           },
           className: "tw:aspect-square tw:relative tw:pointer-events-auto",
-          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:w-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-4", children: /* @__PURE__ */ e(we, { name: "paddingBottom", value: t?.paddingBottom, onChange: d }) }) })
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:w-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-4", children: /* @__PURE__ */ e(we, { name: "paddingBottom", value: t?.paddingBottom, onChange: c }) }) })
         }
       ) }) }),
       /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:-translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1544,7 +1553,7 @@ const nr = () => W({
             width: l
           },
           className: "tw:aspect-square tw:relative tw:pointer-events-auto",
-          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-4", children: /* @__PURE__ */ e(we, { name: "paddingTop", value: t?.paddingTop, onChange: d }) }) })
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-4", children: /* @__PURE__ */ e(we, { name: "paddingTop", value: t?.paddingTop, onChange: c }) }) })
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1554,7 +1563,7 @@ const nr = () => W({
             width: l
           },
           className: "tw:aspect-square tw:relative tw:pointer-events-auto",
-          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-3", children: /* @__PURE__ */ e(we, { name: "paddingRight", value: t?.paddingRight, onChange: d }) }) })
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-3", children: /* @__PURE__ */ e(we, { name: "paddingRight", value: t?.paddingRight, onChange: c }) }) })
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:-translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
@@ -1564,7 +1573,7 @@ const nr = () => W({
             width: l
           },
           className: "tw:aspect-square tw:relative tw:pointer-events-auto",
-          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-3", children: /* @__PURE__ */ e(we, { name: "paddingLeft", value: t?.paddingLeft, onChange: d }) }) })
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-3", children: /* @__PURE__ */ e(we, { name: "paddingLeft", value: t?.paddingLeft, onChange: c }) }) })
         }
       ) })
     ] })
@@ -1581,14 +1590,14 @@ const nr = () => W({
     h.stopPropagation();
     const g = o.duplicate(t.id);
     o.selectNode(g.id);
-  }, c = () => {
-    n(!0);
   }, d = () => {
+    n(!0);
+  }, c = () => {
     n(!1);
   }, u = () => {
     Gn(t) && o.selectNode(t.id);
   };
-  return /* @__PURE__ */ e(vt, { index: r, draggableId: t.id, children: (h, g) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(bt, { index: r, draggableId: t.id, children: (h, g) => /* @__PURE__ */ e(
     "div",
     {
       ref: h.innerRef,
@@ -1603,8 +1612,8 @@ const nr = () => W({
               "tw:bg-ic-white-3s": g.isDragging
             }
           ),
-          onMouseEnter: c,
-          onMouseLeave: d,
+          onMouseEnter: d,
+          onMouseLeave: c,
           "aria-hidden": !0,
           onClick: u,
           children: [
@@ -1629,20 +1638,20 @@ const nr = () => W({
     }
   ) });
 }, Ze = ({ getNewNodeElement: t }) => {
-  const { query: r, actions: s } = oe(), { id: n } = re(), o = r.node(n).childNodes().map((c) => r.node(c).get());
+  const { query: r, actions: s } = oe(), { id: n } = re(), o = r.node(n).childNodes().map((d) => r.node(d).get());
   return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e(bt, { onDragEnd: (c) => {
-      const { source: d, destination: u } = c;
-      if (!u || d.index === u.index) return;
-      const h = o.at(d.index);
-      h && s.move({ nodeId: h.id, sourceIndex: d.index, destinationIndex: u.index });
-    }, children: /* @__PURE__ */ e(Nt, { droppableId: n, children: (c) => /* @__PURE__ */ i("div", { ref: c.innerRef, ...c.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
-      o.map((d, u) => /* @__PURE__ */ e(Ir, { node: d, nodeIndex: u }, d.id)),
-      c.placeholder
+    /* @__PURE__ */ e(Nt, { onDragEnd: (d) => {
+      const { source: c, destination: u } = d;
+      if (!u || c.index === u.index) return;
+      const h = o.at(c.index);
+      h && s.move({ nodeId: h.id, sourceIndex: c.index, destinationIndex: u.index });
+    }, children: /* @__PURE__ */ e(kt, { droppableId: n, children: (d) => /* @__PURE__ */ i("div", { ref: d.innerRef, ...d.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
+      o.map((c, u) => /* @__PURE__ */ e(Ir, { node: c, nodeIndex: u }, c.id)),
+      d.placeholder
     ] }) }) }),
     /* @__PURE__ */ e(Q, { className: "tw:mt-2", onClick: () => {
-      const c = r.parseReactElement(t()).toNodeTree();
-      s.addNodeTree(c, n);
+      const d = r.parseReactElement(t()).toNodeTree();
+      s.addNodeTree(d, n);
     }, fullWidth: !0, prefix: /* @__PURE__ */ e(f, { size: 16, source: je }), children: "Add more" })
   ] });
 }, Mr = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.25 8.96875C1.25 8.69261 1.47386 8.46875 1.75 8.46875H5.5C5.77614 8.46875 6 8.69261 6 8.96875V10.9688C6 11.2449 5.77614 11.4688 5.5 11.4688H1.75C1.47386 11.4688 1.25 11.2449 1.25 10.9688V8.96875Z" fill="currentColor"></path><path d="M7.62512 9.03125C7.62512 8.75511 7.84898 8.53125 8.12512 8.53125H11.8751C12.1513 8.53125 12.3751 8.75511 12.3751 9.03125V11.0312C12.3751 11.3074 12.1513 11.5312 11.8751 11.5312H8.12512C7.84898 11.5312 7.62512 11.3074 7.62512 11.0312V9.03125Z" fill="currentColor"></path><path d="M14 8.96875C14 8.69261 14.2239 8.46875 14.5 8.46875H18.25C18.5261 8.46875 18.75 8.69261 18.75 8.96875V10.9688C18.75 11.2449 18.5261 11.4688 18.25 11.4688H14.5C14.2239 11.4688 14 11.2449 14 10.9688V8.96875Z" fill="currentColor"></path></svg>', Ar = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.25 10C1.25 9.17157 1.92157 8.5 2.75 8.5C3.57843 8.5 4.25 9.17157 4.25 10C4.25 10.8284 3.57843 11.5 2.75 11.5C1.92157 11.5 1.25 10.8284 1.25 10Z" fill="currentColor"></path><path d="M6.08333 10C6.08333 9.17157 6.75491 8.5 7.58333 8.5C8.41176 8.5 9.08333 9.17157 9.08333 10C9.08333 10.8284 8.41176 11.5 7.58333 11.5C6.75491 11.5 6.08333 10.8284 6.08333 10Z" fill="currentColor"></path><path d="M10.9167 10C10.9167 9.17157 11.5883 8.5 12.4167 8.5C13.2451 8.5 13.9167 9.17157 13.9167 10C13.9167 10.8284 13.2451 11.5 12.4167 11.5C11.5883 11.5 10.9167 10.8284 10.9167 10Z" fill="currentColor"></path><path d="M15.75 10C15.75 9.17157 16.4216 8.5 17.25 8.5C18.0784 8.5 18.75 9.17157 18.75 10C18.75 10.8284 18.0784 11.5 17.25 11.5C16.4216 11.5 15.75 10.8284 15.75 10Z" fill="currentColor"></path></svg>', Wr = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.10547 9C1.10547 8.72386 1.32933 8.5 1.60547 8.5H18.1064C18.3826 8.5 18.6064 8.72386 18.6064 9V11C18.6064 11.2761 18.3826 11.5 18.1064 11.5H1.60547C1.32933 11.5 1.10547 11.2761 1.10547 11V9Z" fill="#currentColor"></path></svg>', Vr = [
@@ -1663,7 +1672,7 @@ const nr = () => W({
     icon: Ar
   }
 ], G = ({ responsive: t = !0, value: r, onChange: s }) => {
-  const n = r?.borderBottomWidth ?? 0, o = r?.borderTopWidth ?? 0, a = r?.borderLeftWidth ?? 0, l = r?.borderRightWidth ?? 0, c = (w = "none") => {
+  const n = r?.borderBottomWidth ?? 0, o = r?.borderTopWidth ?? 0, a = r?.borderLeftWidth ?? 0, l = r?.borderRightWidth ?? 0, d = (w = "none") => {
     s?.(
       w === "none" ? {
         borderStyle: void 0,
@@ -1681,7 +1690,7 @@ const nr = () => W({
         borderTopWidth: r?.borderTopWidth ?? 1
       }
     );
-  }, d = r?.borderStyle ?? "none", u = /* @__PURE__ */ e("span", { className: "tw:text-xs tw:text-ic-white-3s", children: "|" }), h = (w) => {
+  }, c = r?.borderStyle ?? "none", u = /* @__PURE__ */ e("span", { className: "tw:text-xs tw:text-ic-white-3s", children: "|" }), h = (w) => {
     w.target.select();
   }, g = (w) => {
     const m = isNaN(w.target.valueAsNumber) ? void 0 : w.target.valueAsNumber;
@@ -1692,15 +1701,15 @@ const nr = () => W({
   };
   return /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
     /* @__PURE__ */ e(v, { responsive: t, name: "Border", children: /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
-      d !== "none" && /* @__PURE__ */ e(Ie, { onChange: (w) => {
+      c !== "none" && /* @__PURE__ */ e(Ie, { onChange: (w) => {
         s?.({
           ...r,
           borderColor: w
         });
       }, color: r?.borderColor }),
-      /* @__PURE__ */ e(U, { value: d, onSelectionChange: c, children: Vr.map((w) => /* @__PURE__ */ e(T, { value: w.value, children: /* @__PURE__ */ e(f, { source: w.icon }) }, w.value)) })
+      /* @__PURE__ */ e(U, { value: c, onSelectionChange: d, children: Vr.map((w) => /* @__PURE__ */ e(T, { value: w.value, children: /* @__PURE__ */ e(f, { source: w.icon }) }, w.value)) })
     ] }) }),
-    d !== "none" && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-1", children: /* @__PURE__ */ i("div", { className: "tw:flex-1 tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2", children: [
+    c !== "none" && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-1", children: /* @__PURE__ */ i("div", { className: "tw:flex-1 tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2", children: [
       /* @__PURE__ */ e(
         M,
         {
@@ -1775,7 +1784,7 @@ const nr = () => W({
   <path fill="currentColor" d="M36,416H476a20.023,20.023,0,0,0,20-20V116a20.023,20.023,0,0,0-20-20H36a20.023,20.023,0,0,0-20,20V396A20.023,20.023,0,0,0,36,416ZM48,128H464V384H48Z" />
 </svg>
 `, Or = '<svg width="22" height="14" viewBox="0 0 24 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3335 1.5H4.3335C2.95278 1.5 1.8335 2.61929 1.8335 4V10C1.8335 11.3807 2.95278 12.5 4.3335 12.5H18.3335C19.7142 12.5 20.8335 11.3807 20.8335 10V4C20.8335 2.61929 19.7142 1.5 18.3335 1.5ZM4.3335 0C2.12436 0 0.333496 1.79086 0.333496 4V10C0.333496 12.2091 2.12436 14 4.3335 14H18.3335C20.5426 14 22.3335 12.2091 22.3335 10V4C22.3335 1.79086 20.5426 0 18.3335 0H4.3335Z" fill="currentColor"></path></svg>', ie = 9999, D = ({ value: t, onChange: r, name: s, responsive: n = !0 }) => {
-  const [o, a] = A(!1), l = Object.values(t ?? {}).every((g) => (g ?? 0) === 0), c = Object.values(t ?? {}).every((g) => (g ?? 0) === ie), d = !l && !c, u = (g) => {
+  const [o, a] = A(!1), l = Object.values(t ?? {}).every((g) => (g ?? 0) === 0), d = Object.values(t ?? {}).every((g) => (g ?? 0) === ie), c = !l && !d, u = (g) => {
     const p = isNaN(g.target.valueAsNumber) ? void 0 : g.target.valueAsNumber;
     r?.({
       ...t,
@@ -1802,8 +1811,8 @@ const nr = () => W({
         ),
         children: [
           /* @__PURE__ */ i("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [
-            c && /* @__PURE__ */ e(le, { children: "Full" }),
-            d && /* @__PURE__ */ e(le, { children: [
+            d && /* @__PURE__ */ e(le, { children: "Full" }),
+            c && /* @__PURE__ */ e(le, { children: [
               t?.borderTopLeftRadius ?? "-",
               t?.borderTopRightRadius ?? "-",
               t?.borderBottomLeftRadius ?? "-",
@@ -1935,7 +1944,7 @@ const nr = () => W({
             T,
             {
               onClick: h,
-              disabled: d,
+              disabled: c,
               value: JSON.stringify({
                 borderBottomLeftRadius: 8,
                 borderBottomRightRadius: 8,
@@ -1946,7 +1955,7 @@ const nr = () => W({
                 f,
                 {
                   className: L("tw:text-ic-white-3s", {
-                    "tw:text-ic-white-6s": d
+                    "tw:text-ic-white-6s": c
                   }),
                   source: Or
                 }
@@ -1957,7 +1966,7 @@ const nr = () => W({
             T,
             {
               onClick: h,
-              disabled: c,
+              disabled: d,
               value: JSON.stringify({
                 borderBottomLeftRadius: ie,
                 borderBottomRightRadius: ie,
@@ -1968,7 +1977,7 @@ const nr = () => W({
                 f,
                 {
                   className: L("tw:text-ic-white-3s", {
-                    "tw:text-ic-white-6s": c
+                    "tw:text-ic-white-6s": d
                   }),
                   source: Hr
                 }
@@ -2024,7 +2033,7 @@ const nr = () => W({
     value: "auto",
     label: "Auto"
   }
-], rt = ({ value: t, onChange: r, responsive: s = !0 }) => /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ e(v, { responsive: s, name: "Variant", children: /* @__PURE__ */ e(
+], st = ({ value: t, onChange: r, responsive: s = !0 }) => /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ e(v, { responsive: s, name: "Variant", children: /* @__PURE__ */ e(
   he,
   {
     placement: "bottom-end",
@@ -2073,7 +2082,7 @@ const nr = () => W({
     label: "Auto",
     value: "auto"
   }
-], st = ({ value: t, responsive: r, name: s, onChange: n }) => /* @__PURE__ */ e(v, { responsive: r, name: s ?? "Font weight", children: /* @__PURE__ */ e(
+], at = ({ value: t, responsive: r, name: s, onChange: n }) => /* @__PURE__ */ e(v, { responsive: r, name: s ?? "Font weight", children: /* @__PURE__ */ e(
   he,
   {
     onChange: (a) => {
@@ -2162,13 +2171,13 @@ const nr = () => W({
   max: a = Number.MAX_SAFE_INTEGER,
   adjustment: l
 }) => {
-  const c = me(n) ? Number(n) : n, d = l?.minimumUnit ?? 1, u = l?.fallback ?? 0, h = (w) => {
+  const d = me(n) ? Number(n) : n, c = l?.minimumUnit ?? 1, u = l?.fallback ?? 0, h = (w) => {
     const m = isNaN(w.target.valueAsNumber) ? void 0 : w.target.valueAsNumber;
     s?.(m);
   }, g = (w) => {
-    w.stopPropagation(), s?.(Math.min((c ?? u) + d, a));
+    w.stopPropagation(), s?.(Math.min((d ?? u) + c, a));
   }, p = (w) => {
-    w.stopPropagation(), s?.(Math.max((c ?? u) - d, o));
+    w.stopPropagation(), s?.(Math.max((d ?? u) - c, o));
   };
   return /* @__PURE__ */ e(v, { responsive: r, name: t, children: /* @__PURE__ */ e(
     M,
@@ -2276,10 +2285,10 @@ const nr = () => W({
   flexDirection: a = "row"
 }) => {
   const l = (() => {
-    let d = [];
+    let c = [];
     switch (a) {
       case "row":
-        d = [
+        c = [
           {
             label: "Top",
             value: "flex-start",
@@ -2303,7 +2312,7 @@ const nr = () => W({
         ];
         break;
       case "column":
-        d = [
+        c = [
           {
             label: "Left",
             value: "flex-start",
@@ -2327,13 +2336,13 @@ const nr = () => W({
         ];
         break;
     }
-    return o?.length && (d = d.filter((u) => !o.includes(u.value))), d;
-  })(), c = (d) => {
+    return o?.length && (c = c.filter((u) => !o.includes(u.value))), c;
+  })(), d = (c) => {
     n?.({
-      alignItems: d
+      alignItems: c
     });
   };
-  return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Align items", children: /* @__PURE__ */ e(U, { value: s?.alignItems, onSelectionChange: c, children: l.map((d) => /* @__PURE__ */ e(T, { value: d.value, children: /* @__PURE__ */ e(f, { source: d.icon }) }, d.value)) }) });
+  return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Align items", children: /* @__PURE__ */ e(U, { value: s?.alignItems, onSelectionChange: d, children: l.map((c) => /* @__PURE__ */ e(T, { value: c.value, children: /* @__PURE__ */ e(f, { source: c.icon }) }, c.value)) }) });
 }, _r = ({
   name: t,
   responsive: r = !0,
@@ -2392,12 +2401,12 @@ const nr = () => W({
       default:
         return [];
     }
-  })(), l = (c) => {
+  })(), l = (d) => {
     n?.({
-      justifyContent: c
+      justifyContent: d
     });
   };
-  return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Justify content", children: /* @__PURE__ */ e(U, { value: s?.justifyContent, onSelectionChange: l, children: a.map((c) => /* @__PURE__ */ e(T, { value: c.value, children: /* @__PURE__ */ e(f, { source: c.icon }) }, c.value)) }) });
+  return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Justify content", children: /* @__PURE__ */ e(U, { value: s?.justifyContent, onSelectionChange: l, children: a.map((d) => /* @__PURE__ */ e(T, { value: d.value, children: /* @__PURE__ */ e(f, { source: d.icon }) }, d.value)) }) });
 }, Ur = (t) => {
   const { main: r } = qo(t.value);
   return /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-2 tw:justify-between", children: [
@@ -2430,19 +2439,19 @@ const nr = () => W({
 }) => {
   const [o, a] = A(!1), l = (m) => {
     a(!0);
-  }, c = () => {
+  }, d = () => {
     setTimeout(() => {
       a(!1);
     }, 100);
-  }, d = (m) => {
+  }, c = (m) => {
     s?.(m);
   }, u = (m) => {
     const b = isNaN(m.target.valueAsNumber) ? void 0 : m.target.valueAsNumber;
-    d(b);
+    c(b);
   }, h = (m) => {
-    d(m.currentTarget.getAttribute("value"));
+    c(m.currentTarget.getAttribute("value"));
   }, g = (m) => {
-    m.stopPropagation(), d(void 0);
+    m.stopPropagation(), c(void 0);
   }, p = nt(t) ? t : void 0, w = me(t) ? r?.find((m) => m.value === t)?.label ?? t : void 0;
   return /* @__PURE__ */ i("div", { className: L("tw:relative", n), children: [
     /* @__PURE__ */ e(
@@ -2452,7 +2461,7 @@ const nr = () => W({
           input: "text-center"
         },
         onFocus: l,
-        onBlur: c,
+        onBlur: d,
         mode: "onBlur",
         placeholder: w,
         value: p ?? "",
@@ -2490,10 +2499,10 @@ const nr = () => W({
       s({});
       return;
     }
-    const c = {};
-    Bo(c, t, l), s(c);
+    const d = {};
+    Bo(d, t, l), s(d);
   };
-  return /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-3", children: Ct.map((a) => /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+  return /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-3", children: xt.map((a) => /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
     /* @__PURE__ */ e("p", { className: "tw:text-xs tw:text-ic-white-5s", children: a.name }),
     /* @__PURE__ */ e(
       q,
@@ -2579,7 +2588,7 @@ const nr = () => W({
       value: "custom"
       /* Custom */
     }
-  ], l = z(n?.aspectRatio) ? "auto" : a.find((C) => C.value === n?.aspectRatio)?.value ?? "custom", [c, d] = A(
+  ], l = z(n?.aspectRatio) ? "auto" : a.find((C) => C.value === n?.aspectRatio)?.value ?? "custom", [d, c] = A(
     l === "custom"
     /* Custom */
   ), u = (C) => {
@@ -2588,10 +2597,10 @@ const nr = () => W({
     o?.({ aspectRatio: C === "auto" ? void 0 : C });
   }, g = (C) => {
     if (C === "custom") {
-      d(!0);
+      c(!0);
       return;
     }
-    d(!1), h(C);
+    c(!1), h(C);
   }, p = n?.aspectRatio?.toString().split("/") ?? [], w = xe(p.at(0)), m = xe(p.at(1)), b = (C) => {
     const k = isNaN(C.target.valueAsNumber) ? void 0 : C.target.valueAsNumber, R = {
       x: w ?? k,
@@ -2604,13 +2613,13 @@ const nr = () => W({
     /* @__PURE__ */ e(v, { responsive: r, name: s ?? "Proportion", children: /* @__PURE__ */ e(
       he,
       {
-        value: c ? "custom" : l,
+        value: d ? "custom" : l,
         onChange: g,
         options: a,
         className: "tw:w-1/2"
       }
     ) }),
-    (l === "custom" || c) && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2 tw:w-1/2", children: [
+    (l === "custom" || d) && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ i("div", { className: "tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2 tw:w-1/2", children: [
       /* @__PURE__ */ e(
         M,
         {
@@ -2646,16 +2655,16 @@ const nr = () => W({
       )
     ] }) })
   ] });
-}, xt = ({ name: t, responsive: r = !0, value: s, onChange: n }) => {
+}, ft = ({ name: t, responsive: r = !0, value: s, onChange: n }) => {
   const [o, a] = A(!1), l = (p) => {
     const w = isNaN(p.target.valueAsNumber) ? void 0 : p.target.valueAsNumber;
     n?.({
       ...s,
       [p.target.name]: w
     });
-  }, c = (p) => {
+  }, d = (p) => {
     p.target.select();
-  }, d = s?.paddingTop ?? 0, u = s?.paddingLeft ?? 0, h = s?.paddingRight ?? 0, g = s?.paddingBottom ?? 0;
+  }, c = s?.paddingTop ?? 0, u = s?.paddingLeft ?? 0, h = s?.paddingRight ?? 0, g = s?.paddingBottom ?? 0;
   return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Padding (px)", children: /* @__PURE__ */ i(de, { open: o, onOpenChange: a, placement: "right-start", children: [
     /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ i(
       "div",
@@ -2667,7 +2676,7 @@ const nr = () => W({
           }
         ),
         children: [
-          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [d, u, h, g].join(", ") }),
+          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [c, u, h, g].join(", ") }),
           /* @__PURE__ */ e(
             f,
             {
@@ -2690,12 +2699,12 @@ const nr = () => W({
         /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(
           M,
           {
-            onFocus: c,
+            onFocus: d,
             onChange: l,
             mode: "onBlur",
             autoComplete: "off",
             name: "paddingTop",
-            value: d,
+            value: c,
             placeholder: "Top",
             className: "tw:text-center"
           }
@@ -2703,7 +2712,7 @@ const nr = () => W({
         /* @__PURE__ */ e("div", { className: "tw:col-start-1", children: /* @__PURE__ */ e(
           M,
           {
-            onFocus: c,
+            onFocus: d,
             onChange: l,
             mode: "onBlur",
             autoComplete: "off",
@@ -2717,7 +2726,7 @@ const nr = () => W({
         /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
           M,
           {
-            onFocus: c,
+            onFocus: d,
             onChange: l,
             mode: "onBlur",
             autoComplete: "off",
@@ -2730,7 +2739,7 @@ const nr = () => W({
         /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(
           M,
           {
-            onFocus: c,
+            onFocus: d,
             mode: "onBlur",
             autoComplete: "off",
             name: "paddingBottom",
@@ -2751,9 +2760,9 @@ const nr = () => W({
       l.target.select();
     },
     onChange: (l) => {
-      const c = isNaN(l.target.valueAsNumber) ? void 0 : l.target.valueAsNumber;
+      const d = isNaN(l.target.valueAsNumber) ? void 0 : l.target.valueAsNumber;
       n?.({
-        order: c ?? 0
+        order: d ?? 0
       });
     },
     value: s?.order ?? 0,
@@ -2762,7 +2771,7 @@ const nr = () => W({
     size: "32",
     min: 0
   }
-) }) }), ft = "auto", Xe = ({
+) }) }), vt = "auto", Xe = ({
   name: t,
   value: r,
   onChange: s
@@ -2770,15 +2779,15 @@ const nr = () => W({
   const [n, o] = A(!1), a = [
     {
       label: "Auto",
-      value: ft
+      value: vt
     }
   ], l = () => {
     setTimeout(() => {
       o(!1);
     }, 100);
-  }, c = (g) => {
-    o(!0), g.target.select();
   }, d = (g) => {
+    o(!0), g.target.select();
+  }, c = (g) => {
     const p = isNaN(g.target.valueAsNumber) ? void 0 : g.target.valueAsNumber;
     s?.(t, p);
   }, u = (g) => {
@@ -2791,15 +2800,15 @@ const nr = () => W({
       M,
       {
         mode: "onBlur",
-        onFocus: c,
+        onFocus: d,
         className: "tw:text-center",
         autoComplete: "off",
         fullWidth: !0,
-        placeholder: r === ft ? "Auto" : void 0,
+        placeholder: r === vt ? "Auto" : void 0,
         value: r ?? 0,
         onBlur: l,
         name: t,
-        onChange: d
+        onChange: c
       }
     ),
     /* @__PURE__ */ i(Se, { open: n, placement: "bottom-start", children: [
@@ -2829,7 +2838,7 @@ const nr = () => W({
       ...s,
       [g]: p
     });
-  }, c = s?.marginTop ?? 0, d = s?.marginLeft ?? 0, u = s?.marginRight ?? 0, h = s?.marginBottom ?? 0;
+  }, d = s?.marginTop ?? 0, c = s?.marginLeft ?? 0, u = s?.marginRight ?? 0, h = s?.marginBottom ?? 0;
   return /* @__PURE__ */ e(v, { responsive: r, name: t ?? "Margin (px)", children: /* @__PURE__ */ i(de, { open: o, onOpenChange: a, placement: "right-start", children: [
     /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ i(
       "div",
@@ -2841,7 +2850,7 @@ const nr = () => W({
           }
         ),
         children: [
-          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [c, d, u, h].map((g) => g === ft ? "Auto" : g).join(", ") }),
+          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [d, c, u, h].map((g) => g === vt ? "Auto" : g).join(", ") }),
           /* @__PURE__ */ e(
             f,
             {
@@ -2861,8 +2870,8 @@ const nr = () => W({
       ] }),
       /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-3" }),
       /* @__PURE__ */ i("div", { className: "tw:grid tw:grid-cols-3 tw:gap-2", style: { maxWidth: 256 }, children: [
-        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginTop", value: c }) }),
-        /* @__PURE__ */ e("div", { className: "tw:col-start-1", children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginLeft", value: d }) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginTop", value: d }) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-1", children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginLeft", value: c }) }),
         /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:justify-center", children: /* @__PURE__ */ e(f, { source: Dt }) }),
         /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginRight", value: u }) }),
         /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(Xe, { onChange: l, name: "marginBottom", value: h }) })
@@ -2902,7 +2911,7 @@ const nr = () => W({
     marginLeft: n(t.sx ?? {}, "marginLeft"),
     marginRight: n(t.sx ?? {}, "marginRight"),
     marginTop: n(t.sx ?? {}, "marginTop")
-  }, c = {
+  }, d = {
     backgroundColor: n(t.sx ?? {}, "backgroundColor"),
     backgroundImage: n(t.sx ?? {}, "backgroundImage"),
     backgroundPosition: n(t.sx ?? {}, "backgroundPosition"),
@@ -2910,7 +2919,7 @@ const nr = () => W({
     background: n(t.sx ?? {}, "background"),
     backgroundSize: n(t.sx ?? {}, "backgroundSize"),
     backgroundAttachment: n(t.sx ?? {}, "backgroundAttachment")
-  }, d = () => /* @__PURE__ */ e(K, { canvas: !0, is: _n }), u = {
+  }, c = () => /* @__PURE__ */ e(K, { canvas: !0, is: _n }), u = {
     columnGap: n(t.sx ?? {}, "columnGap") ?? 0
   }, h = {
     rowGap: n(t.sx ?? {}, "rowGap") ?? 0
@@ -2949,7 +2958,7 @@ const nr = () => W({
     ] }),
     /* @__PURE__ */ i(Z, { className: "tw:px-2", children: [
       /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ e(x, { name: "Cells", children: /* @__PURE__ */ e(Ze, { getNewNodeElement: d }) }),
+        /* @__PURE__ */ e(x, { name: "Cells", children: /* @__PURE__ */ e(Ze, { getNewNodeElement: c }) }),
         /* @__PURE__ */ i(x, { name: "Layout", children: [
           /* @__PURE__ */ e(v, { name: "Container", children: /* @__PURE__ */ e(q, { onChange: (N) => {
             s({
@@ -2984,7 +2993,7 @@ const nr = () => W({
           /* @__PURE__ */ e(G, { value: b, onChange: a }),
           /* @__PURE__ */ e(D, { value: C, onChange: a })
         ] }),
-        /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: c, onChange: a }) })
+        /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: d, onChange: a }) })
       ] })
     ] })
   ] });
@@ -2997,10 +3006,10 @@ const nr = () => W({
     {
       step: 1,
       onChange: (l) => {
-        const c = isNaN(l.target.valueAsNumber) ? void 0 : l.target.valueAsNumber;
+        const d = isNaN(l.target.valueAsNumber) ? void 0 : l.target.valueAsNumber;
         n(
           {
-            colSpan: c ?? o
+            colSpan: d ?? o
           },
           t
         );
@@ -3033,14 +3042,14 @@ const nr = () => W({
     marginLeft: n(t.sx ?? {}, "marginLeft"),
     marginRight: n(t.sx ?? {}, "marginRight"),
     marginTop: n(t.sx ?? {}, "marginTop")
-  }, c = {
+  }, d = {
     borderStyle: n(t.sx ?? {}, "borderStyle"),
     borderColor: n(t.sx ?? {}, "borderColor"),
     borderTopWidth: n(t.sx ?? {}, "borderTopWidth"),
     borderRightWidth: n(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: n(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: n(t.sx ?? {}, "borderLeftWidth")
-  }, d = {
+  }, c = {
     borderTopLeftRadius: n(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: n(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: n(t.sx ?? {}, "borderBottomRightRadius"),
@@ -3067,8 +3076,8 @@ const nr = () => W({
         /* @__PURE__ */ e(x, { name: "Display on", children: /* @__PURE__ */ e(pe, {}) }),
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: l, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
-          /* @__PURE__ */ e(G, { value: c, onChange: o }),
-          /* @__PURE__ */ e(D, { value: d, onChange: o })
+          /* @__PURE__ */ e(G, { value: d, onChange: o }),
+          /* @__PURE__ */ e(D, { value: c, onChange: o })
         ] }),
         /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: a, onChange: o }) })
       ] })
@@ -3119,14 +3128,14 @@ const nr = () => W({
     marginLeft: o(t.sx ?? {}, "marginLeft"),
     marginRight: o(t.sx ?? {}, "marginRight"),
     marginTop: o(t.sx ?? {}, "marginTop")
-  }, c = {
+  }, d = {
     borderStyle: o(t.sx ?? {}, "borderStyle"),
     borderColor: o(t.sx ?? {}, "borderColor"),
     borderTopWidth: o(t.sx ?? {}, "borderTopWidth"),
     borderRightWidth: o(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: o(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: o(t.sx ?? {}, "borderLeftWidth")
-  }, d = {
+  }, c = {
     borderTopLeftRadius: o(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: o(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: o(t.sx ?? {}, "borderBottomRightRadius"),
@@ -3177,14 +3186,14 @@ const nr = () => W({
         ] }),
         /* @__PURE__ */ i(x, { name: "Text", children: [
           /* @__PURE__ */ e(
-            rt,
+            st,
             {
               onChange: u,
               value: o(t, "textVariant")
             }
           ),
           /* @__PURE__ */ e(Ae, { value: h, onChange: g }),
-          /* @__PURE__ */ e(ot, { value: p, onChange: w }),
+          /* @__PURE__ */ e(rt, { value: p, onChange: w }),
           /* @__PURE__ */ e(Tn, { value: m, onChange: b }),
           /* @__PURE__ */ e(
             Et,
@@ -3196,7 +3205,7 @@ const nr = () => W({
             }
           ),
           /* @__PURE__ */ e(
-            st,
+            at,
             {
               value: {
                 fontWeight: o(t.sx ?? {}, "fontWeight")
@@ -3210,16 +3219,16 @@ const nr = () => W({
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: l, onChange: a }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
-          /* @__PURE__ */ e(G, { value: c, onChange: a }),
-          /* @__PURE__ */ e(D, { value: d, onChange: a })
+          /* @__PURE__ */ e(G, { value: d, onChange: a }),
+          /* @__PURE__ */ e(D, { value: c, onChange: a })
         ] })
       ] })
     ] })
   ] });
-}, at = () => W({
+}, it = () => W({
   transform: co
 }), ns = ({ readonlyTo: t }) => {
-  const { nodeProps: r, setNodeProps: s } = at(), n = t ?? r.anchor?.to, o = (() => {
+  const { nodeProps: r, setNodeProps: s } = it(), n = t ?? r.anchor?.to, o = (() => {
     if (!z(n))
       return me(n) ? n : Uo(n);
   })();
@@ -3249,7 +3258,7 @@ const nr = () => W({
     }
   ) });
 }, os = () => {
-  const { nodeProps: t, setNodeResponsiveProps: r } = at(), { getResponsiveProp: s, currentScreen: n } = I(), o = [
+  const { nodeProps: t, setNodeResponsiveProps: r } = it(), { getResponsiveProp: s, currentScreen: n } = I(), o = [
     {
       label: "Small",
       value: "sm"
@@ -3293,7 +3302,7 @@ const nr = () => W({
     label: "Text"
   }
 ], ss = () => {
-  const { nodeProps: t, setNodeProps: r } = at(), s = (n) => {
+  const { nodeProps: t, setNodeProps: r } = it(), s = (n) => {
     r({
       variant: n.currentTarget.value
     });
@@ -3326,17 +3335,17 @@ const nr = () => W({
     );
   }) }) });
 }, ka = ({ readonlyTo: t }) => {
-  const { nodeProps: r, setNodeProps: s } = at(), { currentScreen: n, getResponsiveProp: o } = I(), a = (h, g = n) => {
+  const { nodeProps: r, setNodeProps: s } = it(), { currentScreen: n, getResponsiveProp: o } = I(), a = (h, g = n) => {
     s({
       sx: H(h, g)
     });
   }, l = {
     width: o(r.sx ?? {}, "width")
-  }, c = (h) => {
+  }, d = (h) => {
     s({
       color: h
     });
-  }, d = (h) => {
+  }, c = (h) => {
     s({
       anchor: {
         target: h
@@ -3365,7 +3374,7 @@ const nr = () => W({
           }
         ) }) }),
         /* @__PURE__ */ i(x, { name: "Color & Variant", children: [
-          /* @__PURE__ */ e(qr, { value: r.color, onChange: c }),
+          /* @__PURE__ */ e(qr, { value: r.color, onChange: d }),
           /* @__PURE__ */ e(ss, {})
         ] }),
         /* @__PURE__ */ i(x, { name: "Size", children: [
@@ -3374,7 +3383,7 @@ const nr = () => W({
         ] }),
         /* @__PURE__ */ i(x, { name: "Link", children: [
           /* @__PURE__ */ e(ns, { readonlyTo: t }),
-          /* @__PURE__ */ e(Vn, { value: r.anchor?.target, onChange: d })
+          /* @__PURE__ */ e(Vn, { value: r.anchor?.target, onChange: c })
         ] })
       ] }),
       /* @__PURE__ */ i(y, { children: [
@@ -3457,12 +3466,12 @@ const nr = () => W({
     borderRightWidth: n(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: n(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: n(t.sx ?? {}, "borderLeftWidth")
-  }, c = {
+  }, d = {
     borderTopLeftRadius: n(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: n(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: n(t.sx ?? {}, "borderBottomRightRadius"),
     borderBottomLeftRadius: n(t.sx ?? {}, "borderBottomLeftRadius")
-  }, d = () => /* @__PURE__ */ e(K, { canvas: !0, is: Un }), u = {
+  }, c = () => /* @__PURE__ */ e(K, { canvas: !0, is: Un }), u = {
     rowGap: n(t.sx ?? {}, "rowGap") ?? 0
   }, h = {
     columnGap: n(t.sx ?? {}, "columnGap") ?? 0
@@ -3490,7 +3499,7 @@ const nr = () => W({
     ] }),
     /* @__PURE__ */ i(Z, { className: "tw:px-2", children: [
       /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ e(x, { name: "Flex items", children: /* @__PURE__ */ e(Ze, { getNewNodeElement: d }) }),
+        /* @__PURE__ */ e(x, { name: "Flex items", children: /* @__PURE__ */ e(Ze, { getNewNodeElement: c }) }),
         /* @__PURE__ */ i(x, { name: "Layout", children: [
           /* @__PURE__ */ e(v, { name: "Container", children: /* @__PURE__ */ e(q, { onChange: (R) => {
             r({
@@ -3539,7 +3548,7 @@ const nr = () => W({
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: a, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: l, onChange: o }),
-          /* @__PURE__ */ e(D, { value: c, onChange: o })
+          /* @__PURE__ */ e(D, { value: d, onChange: o })
         ] }),
         /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: C, onChange: o }) })
       ] })
@@ -3590,12 +3599,12 @@ const nr = () => W({
     borderRightWidth: n(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: n(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: n(t.sx ?? {}, "borderLeftWidth")
-  }, c = {
+  }, d = {
     borderTopLeftRadius: n(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: n(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: n(t.sx ?? {}, "borderBottomRightRadius"),
     borderBottomLeftRadius: n(t.sx ?? {}, "borderBottomLeftRadius")
-  }, d = {
+  }, c = {
     width: n(t.sx ?? {}, "width")
   }, u = {
     backgroundColor: n(t.sx ?? {}, "backgroundColor"),
@@ -3625,7 +3634,7 @@ const nr = () => W({
               fitContentOption: { visible: !0 }
             },
             onChange: o,
-            value: d
+            value: c
           }
         ),
         /* @__PURE__ */ e(
@@ -3644,7 +3653,7 @@ const nr = () => W({
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: a, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: l, onChange: o }),
-          /* @__PURE__ */ e(D, { value: c, onChange: o })
+          /* @__PURE__ */ e(D, { value: d, onChange: o })
         ] }),
         /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: u, onChange: o }) })
       ] })
@@ -3653,7 +3662,7 @@ const nr = () => W({
 }, On = ({ availableTags: t = [] }) => {
   const { setNodeProps: r, setNodeResponsiveProps: s, nodeProps: n } = W(), { currentScreen: o, getResponsiveProp: a } = I(), l = (R, V = o) => {
     r({ sx: H(R, V) });
-  }, c = a(n.sx ?? {}, "textAlign") ?? "left", d = (R) => {
+  }, d = a(n.sx ?? {}, "textAlign") ?? "left", c = (R) => {
     l({
       textAlign: R
     });
@@ -3706,15 +3715,15 @@ const nr = () => W({
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ i(x, { name: "Text", children: [
           /* @__PURE__ */ e(
-            rt,
+            st,
             {
               onChange: m,
               value: a(n, "sizeVariant")
             }
           ),
           /* @__PURE__ */ e(Ae, { value: p, onChange: w }),
-          /* @__PURE__ */ e(ot, { value: u, onChange: h }),
-          /* @__PURE__ */ e(Tn, { value: c, onChange: d }),
+          /* @__PURE__ */ e(rt, { value: u, onChange: h }),
+          /* @__PURE__ */ e(Tn, { value: d, onChange: c }),
           /* @__PURE__ */ e(
             Et,
             {
@@ -3725,7 +3734,7 @@ const nr = () => W({
             }
           ),
           /* @__PURE__ */ e(
-            st,
+            at,
             {
               responsive: !0,
               value: {
@@ -3749,21 +3758,21 @@ const nr = () => W({
     id: n,
     nodeProps: { dangerouslySetInnerHTML: o, ...a },
     setNodeProps: l
-  } = hs(), c = te(o?.__html), { isActive: d } = oe((g, p) => ({
+  } = hs(), d = te(o?.__html), { isActive: c } = oe((g, p) => ({
     isActive: p.getEvent("selected").contains(n)
   }));
   fe(() => {
-    d || z(c.current) || (l({
-      dangerouslySetInnerHTML: { __html: c.current }
-    }), c.current = void 0);
-  }, [d]);
+    c || z(d.current) || (l({
+      dangerouslySetInnerHTML: { __html: d.current }
+    }), d.current = void 0);
+  }, [c]);
   const u = dn(({ editor: g }) => {
-    c.current = g.getHTML();
+    d.current = g.getHTML();
   }), {
     queryParams: { mode: h }
-  } = Lt();
+  } = Tt();
   return /* @__PURE__ */ i(ne, { children: [
-    d && h === "full" && /* @__PURE__ */ i(ne, { children: [
+    c && h === "full" && /* @__PURE__ */ i(ne, { children: [
       /* @__PURE__ */ e(un, {}),
       /* @__PURE__ */ e(hn, {})
     ] }),
@@ -3800,21 +3809,21 @@ const nr = () => W({
     id: n,
     nodeProps: { dangerouslySetInnerHTML: o, ...a },
     setNodeProps: l
-  } = gs(), c = te(o?.__html), { isActive: d } = oe((g, p) => ({
+  } = gs(), d = te(o?.__html), { isActive: c } = oe((g, p) => ({
     isActive: p.getEvent("selected").contains(n)
   }));
   fe(() => {
-    d || z(c.current) || (l({
-      dangerouslySetInnerHTML: { __html: c.current }
-    }), c.current = void 0);
-  }, [d]);
+    c || z(d.current) || (l({
+      dangerouslySetInnerHTML: { __html: d.current }
+    }), d.current = void 0);
+  }, [c]);
   const u = dn(({ editor: g }) => {
-    c.current = g.getHTML();
+    d.current = g.getHTML();
   }), {
     queryParams: { mode: h }
-  } = Lt();
+  } = Tt();
   return /* @__PURE__ */ i(ne, { children: [
-    d && h === "full" && /* @__PURE__ */ i(ne, { children: [
+    c && h === "full" && /* @__PURE__ */ i(ne, { children: [
       /* @__PURE__ */ e(un, {}),
       /* @__PURE__ */ e(hn, {})
     ] }),
@@ -3853,7 +3862,7 @@ const nr = () => W({
       },
       onChange: (o) => {
         r({
-          alt: Rt(o.target.value)
+          alt: Lt(o.target.value)
         });
       },
       placeholder: "E.g: Classic white crewneck t-shirt with minimalist logo design, casual and versatile style",
@@ -3896,7 +3905,7 @@ const ms = [
   "custom"
   /* Custom */
 ].includes(r) ? t : `${t} (${r})`, fs = () => {
-  const { nodeProps: t, setNodeProps: r } = De(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(null), l = n(t.sx ?? {}, "aspectRatio") ?? "auto", c = Object.values(jn).find((C) => C === l) ?? "custom", d = (C) => {
+  const { nodeProps: t, setNodeProps: r } = De(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(null), l = n(t.sx ?? {}, "aspectRatio") ?? "auto", d = Object.values(jn).find((C) => C === l) ?? "custom", c = (C) => {
     C.target.select();
   }, u = (C = "auto") => {
     const k = {
@@ -3911,7 +3920,7 @@ const ms = [
       return;
     }
     a(null), u(C);
-  }, g = o ?? c, p = l.toString().split("/"), w = xe(p.at(0)), m = xe(p.at(1)), b = (C) => {
+  }, g = o ?? d, p = l.toString().split("/"), w = xe(p.at(0)), m = xe(p.at(1)), b = (C) => {
     const k = isNaN(C.target.valueAsNumber) ? void 0 : C.target.valueAsNumber, R = {
       x: w ?? k,
       y: m ?? k,
@@ -3936,7 +3945,7 @@ const ms = [
         M,
         {
           name: "x",
-          onFocus: d,
+          onFocus: c,
           classes: {
             main: "bg-transparent px-1"
           },
@@ -3957,7 +3966,7 @@ const ms = [
           value: m,
           mode: "onBlur",
           onChange: b,
-          onFocus: d,
+          onFocus: c,
           classes: {
             main: "bg-transparent px-1"
           },
@@ -3982,9 +3991,9 @@ const ms = [
     readOnly: m.dom?.getAttribute("aria-readonly") === Ce.True
   })), { nodeProps: n, setNodeProps: o } = De(), a = r(n.sx ?? {}, "aspectRatio") ?? "auto", l = (m, b = t) => {
     o({ sx: H(m, b) });
-  }, c = {
-    width: r(n.sx ?? {}, "width")
   }, d = {
+    width: r(n.sx ?? {}, "width")
+  }, c = {
     height: r(n.sx ?? {}, "height")
   }, u = {
     objectFit: r(n.sx ?? {}, "objectFit")
@@ -4030,8 +4039,8 @@ const ms = [
         ] }),
         /* @__PURE__ */ i(x, { name: "Size", children: [
           /* @__PURE__ */ e(fs, {}),
-          /* @__PURE__ */ e($, { value: c, onChange: l }),
-          a === "auto" && /* @__PURE__ */ e(Me, { value: d, onChange: l }),
+          /* @__PURE__ */ e($, { value: d, onChange: l }),
+          a === "auto" && /* @__PURE__ */ e(Me, { value: c, onChange: l }),
           /* @__PURE__ */ e(Dr, { value: u, onChange: h })
         ] }),
         /* @__PURE__ */ e(x, { name: "SEO", children: /* @__PURE__ */ e(ps, {}) })
@@ -4050,20 +4059,20 @@ const ms = [
 }), Ns = () => {
   const { nodeDOM: t } = re((a) => ({
     nodeDOM: a.dom
-  })), r = (a) => a?.getAttribute(wt.PlayState) || "on", [s, n] = A(!1), o = () => {
+  })), r = (a) => a?.getAttribute(mt.PlayState) || "on", [s, n] = A(!1), o = () => {
     const a = r(t);
-    t?.setAttribute(wt.PlayState, a === "on" ? "off" : "on");
+    t?.setAttribute(mt.PlayState, a === "on" ? "off" : "on");
   };
   return fe(() => {
     const a = new MutationObserver((l) => {
-      const c = l.at(0)?.target;
-      if (!c) return;
-      const d = r(c);
-      n(d === "on");
+      const d = l.at(0)?.target;
+      if (!d) return;
+      const c = r(d);
+      n(c === "on");
     });
     return t && a.observe(t, {
       attributes: !0,
-      attributeFilter: [wt.PlayState]
+      attributeFilter: [mt.PlayState]
     }), () => {
       a.disconnect();
     };
@@ -4085,14 +4094,14 @@ const ms = [
     marginLeft: o(t.sx ?? {}, "marginLeft"),
     marginRight: o(t.sx ?? {}, "marginRight"),
     marginTop: o(t.sx ?? {}, "marginTop")
-  }, c = {
+  }, d = {
     borderStyle: o(t.sx ?? {}, "borderStyle"),
     borderColor: o(t.sx ?? {}, "borderColor"),
     borderTopWidth: o(t.sx ?? {}, "borderTopWidth"),
     borderRightWidth: o(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: o(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: o(t.sx ?? {}, "borderLeftWidth")
-  }, d = {
+  }, c = {
     borderTopLeftRadius: o(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: o(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: o(t.sx ?? {}, "borderBottomRightRadius"),
@@ -4206,8 +4215,8 @@ const ms = [
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: l, onChange: a }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
-          /* @__PURE__ */ e(G, { value: c, onChange: a }),
-          /* @__PURE__ */ e(D, { value: d, onChange: a })
+          /* @__PURE__ */ e(G, { value: d, onChange: a }),
+          /* @__PURE__ */ e(D, { value: c, onChange: a })
         ] }),
         /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: u, onChange: a }) })
       ] })
@@ -4217,7 +4226,7 @@ const ms = [
   transform: mo,
   nodeId: t
 }), Rs = ({ tabIndex: t, tabNodeId: r }) => {
-  const [s, n] = A(!1), [o, a] = cn(t === 0), { nodeProps: l, setNodeProps: c } = Ss(r), { actions: d, query: u } = oe(), { tabNode: h, tabPanelNode: g } = re((C) => {
+  const [s, n] = A(!1), [o, a] = cn(t === 0), { nodeProps: l, setNodeProps: d } = Ss(r), { actions: c, query: u } = oe(), { tabNode: h, tabPanelNode: g } = re((C) => {
     const k = C.data.nodes.find(
       (B) => Ve(u.node(B).get()) === He.TabList
     );
@@ -4239,19 +4248,19 @@ const ms = [
       tabPanelNode: u.node(N).get()
     };
   }), p = (C) => {
-    C.stopPropagation(), d.delete(h.id), d.delete(g.id);
+    C.stopPropagation(), c.delete(h.id), c.delete(g.id);
   }, w = () => {
     n(!0);
   }, m = () => {
     n(!1);
   }, b = (C) => {
-    c({
+    d({
       dangerouslySetInnerHTML: {
         __html: C.target.value || l.dangerouslySetInnerHTML?.__html || ""
       }
     });
   };
-  return /* @__PURE__ */ e(vt, { index: t, draggableId: t.toString(), children: (C) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(bt, { index: t, draggableId: t.toString(), children: (C) => /* @__PURE__ */ i(
     "div",
     {
       className: "tw:rounded-lg tw:border tw:border-ic-white-2s tw:overflow-hidden",
@@ -4298,42 +4307,42 @@ const ms = [
     }
   ) });
 }, Ls = () => {
-  const { query: t, actions: r } = oe(), { id: s, tabListNode: n, tabContentNode: o } = re((c) => {
-    const d = c.data.nodes.find(
+  const { query: t, actions: r } = oe(), { id: s, tabListNode: n, tabContentNode: o } = re((d) => {
+    const c = d.data.nodes.find(
       (h) => Ve(t.node(h).get()) === He.TabList
     );
-    if (!d)
+    if (!c)
       throw new Error("Tab list node not found");
-    const u = c.data.nodes.find(
+    const u = d.data.nodes.find(
       (h) => Ve(t.node(h).get()) === He.TabContent
     );
     if (!u)
       throw new Error("Tab content node not found");
     return {
-      tabListNode: t.node(d).get(),
+      tabListNode: t.node(c).get(),
       tabContentNode: t.node(u).get()
     };
   });
   return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e(bt, { onDragEnd: (c) => {
-      const { source: d, destination: u } = c;
-      if (!u || d.index === u.index) return;
-      const h = n.data.nodes.at(d.index), g = o.data.nodes.at(d.index);
+    /* @__PURE__ */ e(Nt, { onDragEnd: (d) => {
+      const { source: c, destination: u } = d;
+      if (!u || c.index === u.index) return;
+      const h = n.data.nodes.at(c.index), g = o.data.nodes.at(c.index);
       h && g && (r.move({
         nodeId: h,
-        sourceIndex: d.index,
+        sourceIndex: c.index,
         destinationIndex: u.index
       }), r.move({
         nodeId: g,
-        sourceIndex: d.index,
+        sourceIndex: c.index,
         destinationIndex: u.index
       }));
-    }, children: /* @__PURE__ */ e(Nt, { droppableId: s, children: (c) => /* @__PURE__ */ i("div", { ref: c.innerRef, ...c.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
-      n.data.nodes.map((d, u) => /* @__PURE__ */ e(Rs, { tabNodeId: d, tabIndex: u }, d)),
-      c.placeholder
+    }, children: /* @__PURE__ */ e(kt, { droppableId: s, children: (d) => /* @__PURE__ */ i("div", { ref: d.innerRef, ...d.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
+      n.data.nodes.map((c, u) => /* @__PURE__ */ e(Rs, { tabNodeId: c, tabIndex: u }, c)),
+      d.placeholder
     ] }) }) }),
     /* @__PURE__ */ e(Q, { className: "tw:mt-2", onClick: () => {
-      const c = t.parseReactElement(
+      const d = t.parseReactElement(
         /* @__PURE__ */ e(
           K,
           {
@@ -4345,22 +4354,22 @@ const ms = [
           }
         )
       ).toNodeTree();
-      r.addNodeTree(c, n.id);
-      const d = t.parseReactElement(/* @__PURE__ */ e(K, { canvas: !0, is: Kn })).toNodeTree();
-      r.addNodeTree(d, o.id);
+      r.addNodeTree(d, n.id);
+      const c = t.parseReactElement(/* @__PURE__ */ e(K, { canvas: !0, is: Kn })).toNodeTree();
+      r.addNodeTree(c, o.id);
     }, fullWidth: !0, prefix: /* @__PURE__ */ e(f, { source: je }), children: "Add more" })
   ] });
 }, Ts = () => {
   const { query: t } = oe(), { nodeProps: r, setNodeProps: s } = Fn(), { selectOptions: n } = re((a) => {
     const l = a.data.nodes.find(
-      (d) => Ve(t.node(d).get()) === He.TabList
+      (c) => Ve(t.node(c).get()) === He.TabList
     );
     if (!l)
       throw new Error("Tab list node not found");
     return {
-      selectOptions: t.node(l).get().data.nodes.map((d, u) => ({
+      selectOptions: t.node(l).get().data.nodes.map((c, u) => ({
         value: u,
-        label: t.node(d).get().data.props.dangerouslySetInnerHTML?.__html.toString() ?? "Tab"
+        label: t.node(c).get().data.props.dangerouslySetInnerHTML?.__html.toString() ?? "Tab"
       }))
     };
   }), o = (a) => {
@@ -4396,12 +4405,12 @@ const ms = [
     borderRightWidth: n(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: n(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: n(t.sx ?? {}, "borderLeftWidth")
-  }, c = {
+  }, d = {
     borderTopLeftRadius: n(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: n(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: n(t.sx ?? {}, "borderBottomRightRadius"),
     borderBottomLeftRadius: n(t.sx ?? {}, "borderBottomLeftRadius")
-  }, d = {
+  }, c = {
     backgroundColor: n(t.sx ?? {}, "backgroundColor"),
     backgroundImage: n(t.sx ?? {}, "backgroundImage"),
     backgroundPosition: n(t.sx ?? {}, "backgroundPosition"),
@@ -4429,9 +4438,9 @@ const ms = [
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: a, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: l, onChange: o }),
-          /* @__PURE__ */ e(D, { value: c, onChange: o })
+          /* @__PURE__ */ e(D, { value: d, onChange: o })
         ] }),
-        /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: d, onChange: o }) })
+        /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: c, onChange: o }) })
       ] })
     ] })
   ] });
@@ -4439,10 +4448,10 @@ const ms = [
   nodeId: t
 }), Aa = () => W({
   transform: Co
-}), it = () => W({
+}), lt = () => W({
   transform: xo
 }), ys = () => {
-  const { nodeProps: t, setNodeProps: r } = it(), s = (n) => {
+  const { nodeProps: t, setNodeProps: r } = lt(), s = (n) => {
     const o = isNaN(n.target.valueAsNumber) ? void 0 : n.target.valueAsNumber;
     r({
       autoplayOptions: {
@@ -4462,7 +4471,7 @@ const ms = [
     }
   ) });
 }, Bs = () => {
-  const { nodeProps: t, setNodeProps: r } = it(), s = (n) => {
+  const { nodeProps: t, setNodeProps: r } = lt(), s = (n) => {
     r({
       autoplayOptions: {
         stopOnLastSnap: !n.target.checked
@@ -4471,7 +4480,7 @@ const ms = [
   };
   return /* @__PURE__ */ e(v, { name: "Loop", children: /* @__PURE__ */ e(q, { checked: !t.autoplayOptions?.stopOnLastSnap, onChange: s }) });
 }, Ps = () => {
-  const { getResponsiveProp: t, currentScreen: r } = I(), { nodeProps: s, setNodeResponsiveProps: n } = it(), o = t(s, "slidesPerView");
+  const { getResponsiveProp: t, currentScreen: r } = I(), { nodeProps: s, setNodeResponsiveProps: n } = lt(), o = t(s, "slidesPerView");
   return /* @__PURE__ */ e(v, { name: "Items per view", responsive: !0, children: /* @__PURE__ */ e(
     $r,
     {
@@ -4494,7 +4503,7 @@ const ms = [
     }
   ) });
 }, Wa = () => {
-  const { nodeProps: t, setNodeResponsiveProps: r, setNodeProps: s } = it(), { getResponsiveProp: n, currentScreen: o } = I(), a = (b, C = o) => {
+  const { nodeProps: t, setNodeResponsiveProps: r, setNodeProps: s } = lt(), { getResponsiveProp: n, currentScreen: o } = I(), a = (b, C = o) => {
     s({ sx: H(b, C) });
   }, l = () => /* @__PURE__ */ e(
     K,
@@ -4505,9 +4514,9 @@ const ms = [
       is: Yn,
       canvas: !0
     }
-  ), c = {
+  ), d = {
     columnGap: n(t, "spaceBetween") ?? 0
-  }, d = ({ columnGap: b }) => {
+  }, c = ({ columnGap: b }) => {
     r({ spaceBetween: nt(b) ? b : void 0 }, o);
   }, u = (b) => {
     s({
@@ -4554,7 +4563,7 @@ const ms = [
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ i(x, { name: "Display", children: [
           /* @__PURE__ */ e(Ps, {}),
-          /* @__PURE__ */ e(Gt, { value: c, onChange: d, name: "Items spacing" })
+          /* @__PURE__ */ e(Gt, { value: d, onChange: c, name: "Items spacing" })
         ] }),
         /* @__PURE__ */ e(x, { name: "Item management", children: /* @__PURE__ */ e(Ze, { getNewNodeElement: l }) }),
         /* @__PURE__ */ e(
@@ -4602,12 +4611,12 @@ const ms = [
     borderRightWidth: n(t.sx ?? {}, "borderRightWidth"),
     borderBottomWidth: n(t.sx ?? {}, "borderBottomWidth"),
     borderLeftWidth: n(t.sx ?? {}, "borderLeftWidth")
-  }, c = {
+  }, d = {
     borderTopLeftRadius: n(t.sx ?? {}, "borderTopLeftRadius"),
     borderTopRightRadius: n(t.sx ?? {}, "borderTopRightRadius"),
     borderBottomRightRadius: n(t.sx ?? {}, "borderBottomRightRadius"),
     borderBottomLeftRadius: n(t.sx ?? {}, "borderBottomLeftRadius")
-  }, d = () => /* @__PURE__ */ e(K, { canvas: !0, is: Vo }), u = {
+  }, c = () => /* @__PURE__ */ e(K, { canvas: !0, is: Vo }), u = {
     rowGap: n(t.sx ?? {}, "rowGap") ?? 0
   }, h = {
     width: n(t.sx ?? {}, "width")
@@ -4621,7 +4630,7 @@ const ms = [
     ] }),
     /* @__PURE__ */ i(Z, { className: "tw:px-2", children: [
       /* @__PURE__ */ e(y, { children: /* @__PURE__ */ i(x, { name: "Layout", children: [
-        /* @__PURE__ */ e(Ze, { getNewNodeElement: d }),
+        /* @__PURE__ */ e(Ze, { getNewNodeElement: c }),
         /* @__PURE__ */ e(Ee, { value: u, onChange: o }),
         /* @__PURE__ */ e(
           In,
@@ -4638,7 +4647,7 @@ const ms = [
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: a, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: l, onChange: o }),
-          /* @__PURE__ */ e(D, { value: c, onChange: o })
+          /* @__PURE__ */ e(D, { value: d, onChange: o })
         ] })
       ] })
     ] })
@@ -4654,9 +4663,9 @@ const ms = [
     });
   }, l = {
     color: o(t.sx ?? {}, "color", "xs")
-  }, c = (m) => {
+  }, d = (m) => {
     a(m, "xs");
-  }, d = {
+  }, c = {
     paddingBottom: o(t.sx ?? {}, "paddingBottom"),
     paddingLeft: o(t.sx ?? {}, "paddingLeft"),
     paddingRight: o(t.sx ?? {}, "paddingRight"),
@@ -4698,12 +4707,12 @@ const ms = [
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ e(x, { name: "Source", children: /* @__PURE__ */ e(Ke, { onChange: g, source: t.source }) }),
         /* @__PURE__ */ i(x, { name: "Color & Size", children: [
-          /* @__PURE__ */ e(Ae, { value: l, onChange: c }),
+          /* @__PURE__ */ e(Ae, { value: l, onChange: d }),
           /* @__PURE__ */ e(Te, { value: p, name: "Size (px)", onChange: w })
         ] })
       ] }),
       /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: d, onChange: a }) }),
+        /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: c, onChange: a }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: u, onChange: a }),
           /* @__PURE__ */ e(D, { value: h, onChange: a })
@@ -4714,10 +4723,10 @@ const ms = [
 }, As = (t) => W({
   transform: No,
   nodeId: t
-}), lt = () => W({
+}), dt = () => W({
   transform: ko
 }), Ws = ({ accordionNodeId: t, accordionIndex: r }) => {
-  const [s, n] = A(!1), [o, a] = cn(r === 0), { id: l, nodeProps: c } = lt(), { query: d, accordionNode: u, actions: h } = oe((N) => ({
+  const [s, n] = A(!1), [o, a] = cn(r === 0), { id: l, nodeProps: d } = dt(), { query: c, accordionNode: u, actions: h } = oe((N) => ({
     accordionNode: N.nodes[t]
   })), { nodeProps: g, setNodeProps: p } = As(t), [w, m] = A(
     u.dom ? $e(u.dom).openState : !1
@@ -4731,7 +4740,7 @@ const ms = [
     const N = u.dom;
     if (!N) return;
     const { openState: B } = $e(N);
-    N.setAttribute(mt.OpenState, B ? Ce.False : Ce.True);
+    N.setAttribute(Ct.OpenState, B ? Ce.False : Ce.True);
   };
   fe(() => {
     const N = new MutationObserver((B) => {
@@ -4740,7 +4749,7 @@ const ms = [
     });
     return u.dom && (m($e(u.dom).openState), N.observe(u.dom, {
       attributes: !0,
-      attributeFilter: [mt.OpenState]
+      attributeFilter: [Ct.OpenState]
     })), () => {
       N.disconnect();
     };
@@ -4748,13 +4757,13 @@ const ms = [
   const V = (N) => {
     p({
       defaultOpen: N.target.checked
-    }), c.openMode === "single" && N.target.checked && d.node(l).childNodes().forEach((B) => {
+    }), d.openMode === "single" && N.target.checked && c.node(l).childNodes().forEach((B) => {
       B !== t && h.setProp(B, (P) => {
         delete P.defaultOpen;
       });
     });
   };
-  return /* @__PURE__ */ e(vt, { index: r, draggableId: r.toString(), children: (N) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(bt, { index: r, draggableId: r.toString(), children: (N) => /* @__PURE__ */ i(
     "div",
     {
       className: "tw:rounded-lg tw:border tw:border-ic-white-2s tw:overflow-hidden",
@@ -4801,17 +4810,17 @@ const ms = [
     accordionNodeIds: l.data.nodes
   }));
   return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e(bt, { onDragEnd: (l) => {
-      const { source: c, destination: d } = l;
-      if (!d || c.index === d.index) return;
-      const u = n.at(c.index);
+    /* @__PURE__ */ e(Nt, { onDragEnd: (l) => {
+      const { source: d, destination: c } = l;
+      if (!c || d.index === c.index) return;
+      const u = n.at(d.index);
       u && r.move({
         nodeId: u,
-        sourceIndex: c.index,
-        destinationIndex: d.index
+        sourceIndex: d.index,
+        destinationIndex: c.index
       });
-    }, children: /* @__PURE__ */ e(Nt, { droppableId: s, children: (l) => /* @__PURE__ */ i("div", { ref: l.innerRef, ...l.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
-      n.map((c, d) => /* @__PURE__ */ e(Ws, { accordionNodeId: c, accordionIndex: d }, c)),
+    }, children: /* @__PURE__ */ e(kt, { droppableId: s, children: (l) => /* @__PURE__ */ i("div", { ref: l.innerRef, ...l.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
+      n.map((d, c) => /* @__PURE__ */ e(Ws, { accordionNodeId: d, accordionIndex: c }, d)),
       l.placeholder
     ] }) }) }),
     /* @__PURE__ */ e(Q, { className: "tw:mt-2", onClick: () => {
@@ -4835,7 +4844,7 @@ const ms = [
     }, fullWidth: !0, prefix: /* @__PURE__ */ e(f, { source: je }), children: "Add more" })
   ] });
 }, Hs = () => {
-  const { nodeProps: t, setNodeProps: r } = lt(), [s, n] = A(!1), o = t.accordionSummaryProps?.expandIcon, a = (h) => {
+  const { nodeProps: t, setNodeProps: r } = dt(), [s, n] = A(!1), o = t.accordionSummaryProps?.expandIcon, a = (h) => {
     r({
       accordionSummaryProps: {
         expandIcon: {
@@ -4855,7 +4864,7 @@ const ms = [
         }
       }
     });
-  }, c = (h) => {
+  }, d = (h) => {
     r({
       accordionSummaryProps: {
         expandIcon: {
@@ -4863,7 +4872,7 @@ const ms = [
         }
       }
     });
-  }, d = (h) => {
+  }, c = (h) => {
     const g = isNaN(h.target.valueAsNumber) ? void 0 : h.target.valueAsNumber;
     r({
       accordionSummaryProps: {
@@ -4920,7 +4929,7 @@ const ms = [
             name: "When collapsed"
           }
         ),
-        /* @__PURE__ */ e(v, { name: "Position", children: /* @__PURE__ */ i(U, { value: o?.position, onSelectionChange: c, children: [
+        /* @__PURE__ */ e(v, { name: "Position", children: /* @__PURE__ */ i(U, { value: o?.position, onSelectionChange: d, children: [
           /* @__PURE__ */ e(Q, { value: "left", size: "28", children: "Left" }),
           /* @__PURE__ */ e(Q, { value: "right", size: "28", children: "Right" })
         ] }) }),
@@ -4929,7 +4938,7 @@ const ms = [
           {
             mode: "onBlur",
             value: o?.size ?? 24,
-            onChange: d,
+            onChange: c,
             step: 1,
             className: "tw:text-center",
             classes: { container: "tw:w-1/2" }
@@ -4940,7 +4949,7 @@ const ms = [
     ] }) })
   ] }) });
 }, zs = () => {
-  const { id: t, nodeProps: r, setNodeProps: s } = lt(), { query: n } = oe(), o = [
+  const { id: t, nodeProps: r, setNodeProps: s } = dt(), { query: n } = oe(), o = [
     {
       value: "single",
       label: "Single"
@@ -4952,14 +4961,14 @@ const ms = [
   ], a = (l) => {
     s({
       openMode: l
-    }), l === "single" && n.node(t).childNodes().forEach((c) => {
-      const d = n.node(c).get().dom;
-      d && d.setAttribute(mt.OpenState, Ce.False);
+    }), l === "single" && n.node(t).childNodes().forEach((d) => {
+      const c = n.node(d).get().dom;
+      c && c.setAttribute(Ct.OpenState, Ce.False);
     });
   };
   return /* @__PURE__ */ e(v, { name: "Open mode", children: /* @__PURE__ */ e(U, { value: r.openMode, onSelectionChange: a, children: o.map((l) => /* @__PURE__ */ e(Q, { value: l.value, children: l.label }, l.value)) }) });
 }, Oa = () => {
-  const { nodeProps: t, setNodeProps: r } = lt(), { getResponsiveProp: s, currentScreen: n } = I(), o = (m, b = n) => {
+  const { nodeProps: t, setNodeProps: r } = dt(), { getResponsiveProp: s, currentScreen: n } = I(), o = (m, b = n) => {
     r({ sx: H(m, b) });
   }, a = {
     paddingBottom: s(t.sx ?? {}, "paddingBottom") ?? t.sx?.paddingBottom,
@@ -4972,9 +4981,9 @@ const ms = [
     marginTop: s(t.sx ?? {}, "marginTop") ?? t.sx?.marginTop
   }, l = {
     rowGap: s(t.sx ?? {}, "rowGap") ?? t.sx?.rowGap ?? 0
-  }, c = {
+  }, d = {
     width: s(t.sx ?? {}, "width") ?? t.sx?.width
-  }, d = (m, b = n) => {
+  }, c = (m, b = n) => {
     r({
       accordionSummaryProps: {
         [b]: {
@@ -5014,11 +5023,11 @@ const ms = [
           /* @__PURE__ */ e(Ee, { value: l, onChange: o })
         ] }),
         /* @__PURE__ */ i(x, { name: "Item header", children: [
-          /* @__PURE__ */ e(xt, { value: h, onChange: d }),
+          /* @__PURE__ */ e(ft, { value: h, onChange: c }),
           /* @__PURE__ */ e(Hs, {})
         ] }),
-        /* @__PURE__ */ e(x, { name: "Item content", children: /* @__PURE__ */ e(xt, { value: w, onChange: g }) }),
-        /* @__PURE__ */ e(x, { name: "Size", children: /* @__PURE__ */ e($, { value: c, onChange: o }) })
+        /* @__PURE__ */ e(x, { name: "Item content", children: /* @__PURE__ */ e(ft, { value: w, onChange: g }) }),
+        /* @__PURE__ */ e(x, { name: "Size", children: /* @__PURE__ */ e($, { value: d, onChange: o }) })
       ] }),
       /* @__PURE__ */ i(y, { children: [
         /* @__PURE__ */ e(x, { name: "Display on", children: /* @__PURE__ */ e(pe, {}) }),
@@ -5035,7 +5044,7 @@ const ms = [
     n({ sx: H(w, m) });
   }, l = {
     width: r(s.sx ?? {}, "width")
-  }, c = {
+  }, d = {
     paddingBottom: r(s.sx ?? {}, "paddingBottom"),
     paddingLeft: r(s.sx ?? {}, "paddingLeft"),
     paddingRight: r(s.sx ?? {}, "paddingRight"),
@@ -5044,7 +5053,7 @@ const ms = [
     marginLeft: r(s.sx ?? {}, "marginLeft"),
     marginRight: r(s.sx ?? {}, "marginRight"),
     marginTop: r(s.sx ?? {}, "marginTop")
-  }, d = {
+  }, c = {
     borderStyle: r(s.sx ?? {}, "borderStyle"),
     borderColor: r(s.sx ?? {}, "borderColor"),
     borderTopWidth: r(s.sx ?? {}, "borderTopWidth"),
@@ -5121,9 +5130,9 @@ const ms = [
         ] })
       ] }),
       /* @__PURE__ */ i(y, { children: [
-        /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: c, onChange: a }) }),
+        /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: d, onChange: a }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
-          /* @__PURE__ */ e(G, { value: d, onChange: a }),
+          /* @__PURE__ */ e(G, { value: c, onChange: a }),
           /* @__PURE__ */ e(D, { value: u, onChange: a })
         ] })
       ] })
@@ -5151,9 +5160,9 @@ const ms = [
     background: s(t.sx ?? {}, "background"),
     backgroundSize: s(t.sx ?? {}, "backgroundSize"),
     backgroundAttachment: s(t.sx ?? {}, "backgroundAttachment")
-  }, c = {
-    width: s(t.sx ?? {}, "width") ?? "auto"
   }, d = {
+    width: s(t.sx ?? {}, "width") ?? "auto"
+  }, c = {
     height: s(t.sx ?? {}, "height") ?? "auto"
   }, u = {
     borderStyle: s(t.sx ?? {}, "borderStyle"),
@@ -5188,11 +5197,11 @@ const ms = [
                 autoOption: { visible: !0 },
                 fitContentOption: { visible: !0 }
               },
-              value: c,
+              value: d,
               onChange: o
             }
           ),
-          /* @__PURE__ */ e(Me, { value: d, onChange: o })
+          /* @__PURE__ */ e(Me, { value: c, onChange: o })
         ] }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
           /* @__PURE__ */ e(G, { value: u, onChange: o }),
@@ -5207,7 +5216,7 @@ const ms = [
     ] })
   ] });
 }, Ge = () => W(), Fs = () => {
-  const { nodeProps: t, setNodeProps: r } = Ge(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(!1), l = t.captionProps ?? {}, c = (u) => {
+  const { nodeProps: t, setNodeProps: r } = Ge(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(!1), l = t.captionProps ?? {}, d = (u) => {
     r({
       captionProps: {
         [s]: {
@@ -5215,7 +5224,7 @@ const ms = [
         }
       }
     });
-  }, d = (u) => {
+  }, c = (u) => {
     r({
       captionProps: {
         sx: u
@@ -5246,21 +5255,21 @@ const ms = [
       /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-2" }),
       /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
         /* @__PURE__ */ e(
-          rt,
+          st,
           {
             value: n(l, "sizeVariant"),
-            onChange: c
+            onChange: d
           }
         ),
         /* @__PURE__ */ e(
           Ae,
           {
             value: { color: n(l.sx ?? {}, "color") },
-            onChange: d
+            onChange: c
           }
         ),
         /* @__PURE__ */ e(
-          ot,
+          rt,
           {
             name: "Style",
             value: {
@@ -5268,14 +5277,14 @@ const ms = [
               fontStyle: n(l.sx ?? {}, "fontStyle"),
               textDecorationLine: n(l.sx ?? {}, "textDecorationLine")
             },
-            onChange: d
+            onChange: c
           }
         ),
         /* @__PURE__ */ e(
-          st,
+          at,
           {
             value: { fontWeight: n(l.sx ?? {}, "fontWeight") },
-            onChange: d
+            onChange: c
           }
         ),
         /* @__PURE__ */ e(
@@ -5284,14 +5293,14 @@ const ms = [
             value: {
               textTransform: n(l.sx ?? {}, "textTransform") ?? "none"
             },
-            onChange: d
+            onChange: c
           }
         )
       ] })
     ] }) })
   ] }) }) });
 }, Zs = () => {
-  const { nodeProps: t, setNodeProps: r } = Ge(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(!1), l = t.timeProps ?? {}, c = (u) => {
+  const { nodeProps: t, setNodeProps: r } = Ge(), { currentScreen: s, getResponsiveProp: n } = I(), [o, a] = A(!1), l = t.timeProps ?? {}, d = (u) => {
     r({
       timeProps: s === "xs" ? {
         sizeVariant: u
@@ -5301,7 +5310,7 @@ const ms = [
         }
       }
     });
-  }, d = (u) => {
+  }, c = (u) => {
     r({
       timeProps: {
         sx: u
@@ -5332,21 +5341,21 @@ const ms = [
       /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-2" }),
       /* @__PURE__ */ i("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
         /* @__PURE__ */ e(
-          rt,
+          st,
           {
             value: n(l, "sizeVariant"),
-            onChange: c
+            onChange: d
           }
         ),
         /* @__PURE__ */ e(
           Ae,
           {
             value: { color: n(l.sx ?? {}, "color") },
-            onChange: d
+            onChange: c
           }
         ),
         /* @__PURE__ */ e(
-          ot,
+          rt,
           {
             name: "Style",
             value: {
@@ -5354,25 +5363,25 @@ const ms = [
               fontStyle: n(l.sx ?? {}, "fontStyle"),
               textDecorationLine: n(l.sx ?? {}, "textDecorationLine")
             },
-            onChange: d
+            onChange: c
           }
         ),
         /* @__PURE__ */ e(
-          st,
+          at,
           {
             value: { fontWeight: n(l.sx ?? {}, "fontWeight") },
-            onChange: d
+            onChange: c
           }
         )
       ] })
     ] }) })
   ] }) }) });
 }, Es = () => {
-  const { currentScreen: t, getResponsiveProp: r } = I(), { nodeProps: s, setNodeProps: n } = Ge(), o = (d, u = t) => {
+  const { currentScreen: t, getResponsiveProp: r } = I(), { nodeProps: s, setNodeProps: n } = Ge(), o = (c, u = t) => {
     n({
       unitItemProps: {
-        sx: u === "xs" ? d : {
-          [u]: d
+        sx: u === "xs" ? c : {
+          [u]: c
         }
       }
     });
@@ -5381,10 +5390,10 @@ const ms = [
     paddingRight: r(a.sx ?? {}, "paddingRight"),
     paddingBottom: r(a.sx ?? {}, "paddingBottom"),
     paddingLeft: r(a.sx ?? {}, "paddingLeft")
-  }, c = (d) => {
+  }, d = (c) => {
     o(
       {
-        backgroundColor: d
+        backgroundColor: c
       },
       "xs"
     );
@@ -5400,7 +5409,7 @@ const ms = [
         onChange: o
       }
     ),
-    /* @__PURE__ */ e(xt, { onChange: o, value: l }),
+    /* @__PURE__ */ e(ft, { onChange: o, value: l }),
     /* @__PURE__ */ e(
       Ee,
       {
@@ -5413,7 +5422,7 @@ const ms = [
       Ie,
       {
         color: r(a.sx ?? {}, "backgroundColor"),
-        onChange: c
+        onChange: d
       }
     ) }),
     /* @__PURE__ */ e(
@@ -5455,20 +5464,20 @@ const ms = [
       label: "Seconds",
       value: "seconds"
     }
-  ].map((c) => ({
-    ...c,
-    currentValue: t.units.find((d) => d.value === c.value)
-  })), a = (c, d) => {
-    if (c === Ce.False) {
+  ].map((d) => ({
+    ...d,
+    currentValue: t.units.find((c) => c.value === d.value)
+  })), a = (d, c) => {
+    if (d === Ce.False) {
       r((u) => {
-        u.units = u.units.filter((h) => h.value !== d.currentTarget.name);
+        u.units = u.units.filter((h) => h.value !== c.currentTarget.name);
       });
       return;
     }
     r((u) => {
       const h = [];
       o.forEach((g) => {
-        if (g.value === d.currentTarget.name) {
+        if (g.value === c.currentTarget.name) {
           h.push({
             value: g.value,
             caption: g.label
@@ -5482,9 +5491,9 @@ const ms = [
         }
       }), u.units = h;
     });
-  }, l = (c) => {
-    r((d) => {
-      d.units = d.units.map((u) => u.value === c.target.name ? { ...u, caption: c.target.value } : u);
+  }, l = (d) => {
+    r((c) => {
+      c.units = c.units.map((u) => u.value === d.target.name ? { ...u, caption: d.target.value } : u);
     });
   };
   return /* @__PURE__ */ e(v, { name: "Units", children: /* @__PURE__ */ i(de, { placement: "right", open: s, onOpenChange: n, children: [
@@ -5497,7 +5506,7 @@ const ms = [
             "tw:bg-ic-black-7s": s
           }
         ),
-        children: o.filter((c) => !!c.currentValue).map((c) => c.label).join(", ") || /* @__PURE__ */ e("span", { className: "tw:text-ic-white-3s", children: "None" })
+        children: o.filter((d) => !!d.currentValue).map((d) => d.label).join(", ") || /* @__PURE__ */ e("span", { className: "tw:text-ic-white-3s", children: "None" })
       }
     ) }),
     /* @__PURE__ */ e(ue, { style: { top: 120 }, children: /* @__PURE__ */ i("div", { style: { width: 280 }, children: [
@@ -5506,32 +5515,32 @@ const ms = [
         /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(f, { source: ee }) }) })
       ] }),
       /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-2" }),
-      /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-3", children: o.map((c) => /* @__PURE__ */ i(ne, { children: [
-        /* @__PURE__ */ e(v, { name: c.label, children: /* @__PURE__ */ i(
+      /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-3", children: o.map((d) => /* @__PURE__ */ i(ne, { children: [
+        /* @__PURE__ */ e(v, { name: d.label, children: /* @__PURE__ */ i(
           U,
           {
             onSelectionChange: a,
             className: "tw:w-1/2",
-            value: (!!c.currentValue).toString(),
+            value: (!!d.currentValue).toString(),
             children: [
-              /* @__PURE__ */ e(Q, { name: c.value, className: "tw:flex-1", value: Ce.True, size: "28", children: "Show" }),
-              /* @__PURE__ */ e(Q, { name: c.value, className: "tw:flex-1", value: Ce.False, size: "28", children: "Hide" })
+              /* @__PURE__ */ e(Q, { name: d.value, className: "tw:flex-1", value: Ce.True, size: "28", children: "Show" }),
+              /* @__PURE__ */ e(Q, { name: d.value, className: "tw:flex-1", value: Ce.False, size: "28", children: "Hide" })
             ]
           }
         ) }),
-        !!c.currentValue && /* @__PURE__ */ e(v, { name: `${c.label} caption`, children: /* @__PURE__ */ e(
+        !!d.currentValue && /* @__PURE__ */ e(v, { name: `${d.label} caption`, children: /* @__PURE__ */ e(
           Y,
           {
-            transform: Rt,
+            transform: Lt,
             debounce: 400,
-            name: c.value,
+            name: d.value,
             onChange: l,
-            value: c.currentValue.caption ?? "",
+            value: d.currentValue.caption ?? "",
             placeholder: "Caption",
             classes: { container: "tw:w-1/2" }
           }
         ) })
-      ] }, c.value)) })
+      ] }, d.value)) })
     ] }) })
   ] }) });
 }, Za = () => {
@@ -5554,9 +5563,9 @@ const ms = [
     background: s(t.sx ?? {}, "background"),
     backgroundSize: s(t.sx ?? {}, "backgroundSize"),
     backgroundAttachment: s(t.sx ?? {}, "backgroundAttachment")
-  }, c = {
-    width: s(t.sx ?? {}, "width") ?? "auto"
   }, d = {
+    width: s(t.sx ?? {}, "width") ?? "auto"
+  }, c = {
     borderStyle: s(t.sx ?? {}, "borderStyle"),
     borderColor: s(t.sx ?? {}, "borderColor"),
     borderTopWidth: s(t.sx ?? {}, "borderTopWidth"),
@@ -5604,7 +5613,7 @@ const ms = [
                 autoOption: { visible: !0 },
                 fitContentOption: { visible: !0 }
               },
-              value: c,
+              value: d,
               onChange: o
             }
           ),
@@ -5626,7 +5635,7 @@ const ms = [
         /* @__PURE__ */ e(x, { name: "Display on", children: /* @__PURE__ */ e(pe, {}) }),
         /* @__PURE__ */ e(x, { name: "Spacing (px)", children: /* @__PURE__ */ e(E, { value: a, onChange: o }) }),
         /* @__PURE__ */ i(x, { name: "Shape", children: [
-          /* @__PURE__ */ e(G, { value: d, onChange: o }),
+          /* @__PURE__ */ e(G, { value: c, onChange: o }),
           /* @__PURE__ */ e(D, { value: u, onChange: o })
         ] }),
         /* @__PURE__ */ e(x, { name: "Background", children: /* @__PURE__ */ e(ge, { value: l, onChange: o }) })
@@ -5705,10 +5714,10 @@ export {
   ui as parseSvgString,
   hi as registerNodeRelated,
   H as toResponsiveCss,
-  lt as useAccordionGroupNodeProps,
+  dt as useAccordionGroupNodeProps,
   As as useAccordionNodeProps,
   js as useBoxNodeProps,
-  at as useButtonNodeProps,
+  it as useButtonNodeProps,
   Hn as useCellNodeProps,
   oe as useComposer,
   Ge as useCountdownTimerNodeProps,
@@ -5725,7 +5734,7 @@ export {
   rn as useNodeDataAttributes,
   W as useNodeProps,
   hs as useParagraphNodeProps,
-  it as useSwiperNodeProps,
+  lt as useSwiperNodeProps,
   Ss as useTabNodeProps,
   Aa as useTabPanelNodeProps,
   Fn as useTabsNodeProps,