monto-email-builder 1.4.5 → 1.4.7

package/dist/html-editor.js

@@ -1,77 +1,88 @@
-import { jsx as r, jsxs as g, Fragment as Ot } from "react/jsx-runtime";
-import { forwardRef as ut, useState as V, useRef as $, useEffect as G, useCallback as L, useMemo as J, useImperativeHandle as Pt } from "react";
+import { jsx as r, jsxs as x, Fragment as Ot } from "react/jsx-runtime";
+import { forwardRef as mt, useState as V, useRef as $, useEffect as G, useCallback as L, useMemo as Q, useImperativeHandle as Pt } from "react";
 import _t from "@uiw/react-codemirror";
 import { html as Wt } from "@codemirror/lang-html";
-import { xcodeDark as jt, tomorrowNightBlue as Gt, dracula as mt, basicDark as qt, abcdef as Ut, bbedit as Yt, noctisLilac as Kt, gruvboxLight as Xt, tokyoNightDay as Jt, vscodeLight as Qt, xcodeLight as Zt } from "@uiw/codemirror-themes-all";
-import Q from "@mui/material/ToggleButton";
-import et from "@mui/material/ToggleButtonGroup";
-import { ThemeProvider as er, ScopedCssBaseline as tr, useTheme as rr, Box as h, Tooltip as q, FormControl as or, InputLabel as ar, Select as nr, ListSubheader as tt, MenuItem as rt, Button as Ie, Tabs as ir, Tab as ot, Typography as k, Accordion as lr, AccordionSummary as sr, AccordionDetails as cr, TextField as Ee, Divider as dr } from "@mui/material";
-import { alpha as de } from "@mui/material/styles";
+import { xcodeDark as jt, tomorrowNightBlue as Gt, dracula as ht, basicDark as qt, abcdef as Ut, bbedit as Yt, noctisLilac as Kt, gruvboxLight as Xt, tokyoNightDay as Jt, vscodeLight as Qt, xcodeLight as Zt } from "@uiw/codemirror-themes-all";
+import Z from "@mui/material/ToggleButton";
+import rt from "@mui/material/ToggleButtonGroup";
+import { ThemeProvider as er, ScopedCssBaseline as tr, useTheme as rr, Box as h, Tooltip as q, FormControl as or, InputLabel as nr, Select as ar, ListSubheader as ot, MenuItem as nt, Button as Te, Tabs as ir, Tab as at, Typography as k, Accordion as lr, AccordionSummary as sr, AccordionDetails as cr, TextField as we, Divider as dr } from "@mui/material";
+import { alpha as ue } from "@mui/material/styles";
 import * as ur from "@mui/icons-material/AddOutlined";
 import * as mr from "@mui/icons-material/Code";
 import * as hr from "@mui/icons-material/DataObjectOutlined";
 import * as br from "@mui/icons-material/ExpandMoreOutlined";
 import * as pr from "@mui/icons-material/HelpOutlined";
 import * as fr from "@mui/icons-material/Visibility";
-import * as gr from "@mui/icons-material/ViewColumn";
-import * as xr from "@mui/icons-material/MonitorOutlined";
+import * as xr from "@mui/icons-material/ViewColumn";
+import * as gr from "@mui/icons-material/MonitorOutlined";
 import * as vr from "@mui/icons-material/PhoneIphoneOutlined";
-import { B as yr, V as F, i as ht, r as B, T as Ir, a as at, t as Er } from "./chunks/chunk-BN0O7D8l.js";
-const Ve = yr, nt = "unsubscribe_link", Ce = /\{\{\s*([^{}]+?)\s*\}\}/g, it = /\{%\s*([^{}%]+?)\s*%\}/g;
-function Te(a, n, l, u, d) {
-  return a[n - 1] !== u && a[l] !== d;
+import { B as yr, V as A, r as B, T as Ir, a as it, t as Er } from "./chunks/chunk-C6lRuHXq.js";
+const Ce = yr, U = "unsubscribe_link", he = /\{\{\s*([^{}]+?)\s*\}\}/g, lt = /\{%\s*([^{}%]+?)\s*%\}/g;
+function He(o) {
+  return (o || "").replace(he, (l, u, c, g) => {
+    const i = c + l.length;
+    if (!be(g, c, i, "{", "}")) return l;
+    const m = String(u).trim();
+    return !m || !A.test(m) || m !== U ? l : `{%${m}%}`;
+  });
+}
+function be(o, a, l, u, c) {
+  return o[a - 1] !== u && o[l] !== c;
 }
-function bt(a, n = "user") {
-  return n === "builtin" || n === "system" ? `{%${a}%}` : `{{${a}}}`;
+function bt(o, a = "user") {
+  return a === "builtin" || a === "system" ? `{%${o}%}` : `{{${o}}}`;
 }
-function Vr(a) {
-  const n = typeof a == "string" ? a.trim() : "";
-  if (n.startsWith("{{") && n.endsWith("}}")) {
-    const l = n.slice(2, -2).trim();
-    if (F.test(l))
-      return { attribute: l, type: ht(l) ? "system" : "user" };
+function Vr(o) {
+  const a = typeof o == "string" ? o.trim() : "";
+  if (a.startsWith("{{") && a.endsWith("}}")) {
+    const l = a.slice(2, -2).trim();
+    if (A.test(l))
+      return {
+        attribute: l,
+        type: l === U ? "system" : "user"
+      };
   }
-  if (n.startsWith("{%") && n.endsWith("%}")) {
-    const l = n.slice(2, -2).trim();
-    if (F.test(l)) return { attribute: l, type: "system" };
+  if (a.startsWith("{%") && a.endsWith("%}")) {
+    const l = a.slice(2, -2).trim();
+    if (A.test(l)) return { attribute: l, type: "system" };
   }
   return null;
 }
-function Cr(a, n) {
-  const l = a.variable ?? a.Variable ?? a.key ?? "", u = Vr(l), x = (a.type ?? a.Type ?? (u == null ? void 0 : u.type) ?? (ht(String(a.attribute ?? a.Attribute ?? (u == null ? void 0 : u.attribute) ?? "")) ? "system" : "user")) === "system" ? "system" : "user", i = a.attribute ?? a.Attribute ?? (u == null ? void 0 : u.attribute) ?? "", m = String(i).trim();
-  return !m || !F.test(m) ? null : {
-    id: Number(a.id) || n + 1,
-    variableInstanceId: a.variableInstanceId ?? a.VariableInstanceId,
-    variable: x === "system" ? `{%${m}%}` : `{{${m}}}`,
-    type: x,
-    attribute: m,
-    default: String(a.default ?? a.Default ?? a.value ?? "")
+function Tr(o, a) {
+  const l = o.variable ?? o.Variable ?? o.key ?? "", u = Vr(l), c = String(o.attribute ?? o.Attribute ?? (u == null ? void 0 : u.attribute) ?? "").trim(), g = o.type ?? o.Type ?? (u == null ? void 0 : u.type) ?? (c === U ? "system" : "user"), i = c === U || g === "system" ? "system" : "user", m = o.attribute ?? o.Attribute ?? (u == null ? void 0 : u.attribute) ?? "", b = String(m).trim();
+  return !b || !A.test(b) ? null : {
+    id: Number(o.id) || a + 1,
+    variableInstanceId: o.variableInstanceId ?? o.VariableInstanceId,
+    variable: i === "system" ? `{%${b}%}` : `{{${b}}}`,
+    type: i,
+    attribute: b,
+    default: String(o.default ?? o.Default ?? o.value ?? "")
   };
 }
-function lt(a) {
-  return Array.isArray(a) ? a.map((n, l) => Cr(n, l)).filter((n) => !!n).map((n, l) => ({
-    ...n,
+function st(o) {
+  return Array.isArray(o) ? o.map((a, l) => Tr(a, l)).filter((a) => !!a).map((a, l) => ({
+    ...a,
     id: l + 1,
-    variableInstanceId: n.variableInstanceId || He(n.type, n.attribute, l)
+    variableInstanceId: a.variableInstanceId || De(a.type, a.attribute, l)
   })) : [];
 }
-function Z(a) {
-  const n = a || "", l = [], u = (i, m, f) => {
-    l.push({ attribute: i, type: m, start: f });
+function ee(o) {
+  const a = o || "", l = [], u = (i, m, b) => {
+    l.push({ attribute: i, type: m, start: b });
   };
-  let d;
-  for (Ce.lastIndex = 0; d = Ce.exec(n); ) {
-    const i = d.index, m = i + d[0].length;
-    if (!Te(n, i, m, "{", "}")) continue;
-    const f = d[1].trim();
-    !f || !F.test(f) || u(f, "user", i);
+  let c;
+  for (he.lastIndex = 0; c = he.exec(a); ) {
+    const i = c.index, m = i + c[0].length;
+    if (!be(a, i, m, "{", "}")) continue;
+    const b = c[1].trim();
+    !b || !A.test(b) || u(b, "user", i);
   }
-  let x;
-  for (it.lastIndex = 0; x = it.exec(n); ) {
-    const i = x.index, m = i + x[0].length;
-    if (!Te(n, i, m, "{", "}")) continue;
-    const f = x[1].trim();
-    !f || !F.test(f) || u(f, "system", i);
+  let g;
+  for (lt.lastIndex = 0; g = lt.exec(a); ) {
+    const i = g.index, m = i + g[0].length;
+    if (!be(a, i, m, "{", "}")) continue;
+    const b = g[1].trim();
+    !b || !A.test(b) || u(b, "system", i);
   }
   return l.sort((i, m) => i.start - m.start), l.map((i, m) => ({
     id: m + 1,
@@ -82,77 +93,77 @@ function Z(a) {
     default: ""
   }));
 }
-function ue(a, n) {
+function me(o, a) {
   const l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
-  return n.forEach((d) => {
-    const x = { item: d, consumed: !1 };
-    if (d.variableInstanceId) {
-      const f = l.get(d.variableInstanceId) ?? [];
-      f.push(x), l.set(d.variableInstanceId, f);
+  return a.forEach((c) => {
+    const g = { item: c, consumed: !1 };
+    if (c.variableInstanceId) {
+      const b = l.get(c.variableInstanceId) ?? [];
+      b.push(g), l.set(c.variableInstanceId, b);
     }
-    const i = `${d.type}:${d.attribute}`, m = u.get(i) ?? [];
-    m.push(x), u.set(i, m);
-  }), a.map((d, x) => {
-    var N;
-    const i = `${d.type}:${d.attribute}`, m = d.variableInstanceId ? (N = l.get(d.variableInstanceId)) == null ? void 0 : N.find((v) => !v.consumed) : void 0, f = (u.get(i) ?? []).find((v) => !v.consumed), H = m ?? f;
-    return H && (H.consumed = !0), {
-      ...d,
-      id: x + 1,
-      variableInstanceId: d.variableInstanceId || He(d.type, d.attribute, x),
-      default: d.type === "system" ? "" : (H == null ? void 0 : H.item.default) ?? d.default ?? ""
+    const i = `${c.type}:${c.attribute}`, m = u.get(i) ?? [];
+    m.push(g), u.set(i, m);
+  }), o.map((c, g) => {
+    var R;
+    const i = `${c.type}:${c.attribute}`, m = c.variableInstanceId ? (R = l.get(c.variableInstanceId)) == null ? void 0 : R.find((v) => !v.consumed) : void 0, b = (u.get(i) ?? []).find((v) => !v.consumed), C = m ?? b;
+    return C && (C.consumed = !0), {
+      ...c,
+      id: g + 1,
+      variableInstanceId: c.variableInstanceId || De(c.type, c.attribute, g),
+      default: c.type === "system" ? "" : (C == null ? void 0 : C.item.default) ?? c.default ?? ""
     };
   });
 }
-function Tr(a) {
-  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function wr(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function st(a, n) {
+function ct(o, a) {
   const l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
-  n.forEach((i) => {
+  a.forEach((i) => {
     i.type === "user" && (i.variableInstanceId && l.set(i.variableInstanceId, i.default ?? ""), u.has(i.attribute) || u.set(i.attribute, i.default ?? ""));
   });
-  const d = Z(a), x = /* @__PURE__ */ new Map();
-  return d.forEach((i) => {
+  const c = ee(o), g = /* @__PURE__ */ new Map();
+  return c.forEach((i) => {
     const m = Number(String(i.variableInstanceId ?? "").split("-at-")[1]);
-    Number.isFinite(m) && x.set(m, i);
-  }), (a || "").replace(Ce, (i, m, f, H) => {
-    var ee;
-    const N = f + i.length;
-    if (!Te(H, f, N, "{", "}")) return i;
+    Number.isFinite(m) && g.set(m, i);
+  }), (o || "").replace(he, (i, m, b, C) => {
+    var te;
+    const R = b + i.length;
+    if (!be(C, b, R, "{", "}")) return i;
     const v = String(m).trim();
-    if (!v || !F.test(v)) return i;
-    const R = (ee = x.get(f)) == null ? void 0 : ee.variableInstanceId, z = (R ? l.get(R) : void 0) ?? (n.filter((s) => s.type === "user" && s.attribute === v).length === 1 ? u.get(v) : void 0);
-    return z === void 0 || z === "" ? i : Tr(z);
+    if (!v || !A.test(v)) return i;
+    const z = (te = g.get(b)) == null ? void 0 : te.variableInstanceId, N = (z ? l.get(z) : void 0) ?? (a.filter((s) => s.type === "user" && s.attribute === v).length === 1 ? u.get(v) : void 0);
+    return N === void 0 || N === "" ? i : wr(N);
   });
 }
-function ct(a, n, l = "") {
-  const u = a.trim();
-  if (!u || !F.test(u)) return null;
-  const d = n === "builtin" ? "system" : "user";
+function dt(o, a, l = "") {
+  const u = o.trim();
+  if (!u || !A.test(u)) return null;
+  const c = a === "builtin" ? "system" : "user";
   return {
     id: 1,
-    variableInstanceId: He(d, u, 0),
-    variable: bt(u, n),
-    type: d,
+    variableInstanceId: De(c, u, 0),
+    variable: bt(u, a),
+    type: c,
     attribute: u,
-    default: d === "system" ? "" : l
+    default: c === "system" ? "" : l
   };
 }
-function wr(a) {
-  const n = a.trim();
-  return n ? Ve.some((l) => l.items.some((u) => u.name === n)) : !1;
+function Hr(o) {
+  const a = o.trim();
+  return a ? Ce.some((l) => l.items.some((u) => u.name === a)) : !1;
 }
-function Hr(a, n) {
-  const l = a.trim();
-  return n === "builtin" && l === nt ? `<a href="{%${nt}%}">Unsubscribe Link</a>` : bt(l, n);
+function Cr(o, a) {
+  const l = o.trim();
+  return a === "builtin" && l === U ? `<a href="{%${U}%}">Unsubscribe Link</a>` : bt(l, a);
 }
-function He(a, n, l) {
-  return `html-${a}-${n}-${l + 1}`;
+function De(o, a, l) {
+  return `html-${o}-${a}-${l + 1}`;
 }
-function Sr(a, n, l) {
-  return `html-${a}-${n}-at-${l}`;
+function Sr(o, a, l) {
+  return `html-${o}-${a}-at-${l}`;
 }
-const Dr = B(ur), Mr = B(mr), Lr = B(hr), kr = B(br), Br = B(pr), Ar = B(fr), Fr = B(gr), Rr = B(xr), $r = B(vr), we = {
+const Dr = B(ur), Mr = B(mr), Lr = B(hr), kr = B(br), Ar = B(pr), Br = B(fr), Fr = B(xr), zr = B(gr), $r = B(vr), Se = {
   // 浅色主题
   xcodeLight: Zt,
   vscodeLight: Qt,
@@ -163,233 +174,235 @@ const Dr = B(ur), Mr = B(mr), Lr = B(hr), kr = B(br), Br = B(pr), Ar = B(fr), Fr
   // 深色主题
   abcdef: Ut,
   basicDark: qt,
-  dracula: mt,
+  dracula: ht,
   tomorrowNightBlue: Gt,
   xcodeDark: jt
-}, Nr = {
+}, Rr = {
   xcodeLight: "Xcode Light (Light)",
   vscodeLight: "VSCode Light (Light)",
   tokyoNightDay: "Tokyo Night Day (Light)",
   gruvboxLight: "Gruvbox Light (Light)",
   noctisLilac: "Noctis Lilac (Light)",
   bbedit: "BBEdit (Light)"
-}, zr = {
+}, Nr = {
   abcdef: "ABCDEF (Dark)",
   basicDark: "Basic Dark (Dark)",
   dracula: "Dracula (Dark)",
   tomorrowNightBlue: "Tomorrow Night Blue (Dark)",
   xcodeDark: "Xcode Dark (Dark)"
-}, pt = "html-editor-theme", dt = "dracula";
-function Or(a = dt) {
-  const n = a && we[a] ? a : dt;
-  if (typeof window > "u") return n;
+}, pt = "html-editor-theme", ut = "dracula";
+function Or(o = ut) {
+  const a = o && Se[o] ? o : ut;
+  if (typeof window > "u") return a;
   try {
     const l = localStorage.getItem(pt);
-    if (l && we[l]) return l;
+    if (l && Se[l]) return l;
   } catch {
     console.error("Failed to get HTML Editor stored theme");
   }
-  return n;
+  return a;
 }
-function Pr(a) {
+function Pr(o) {
   try {
-    localStorage.setItem(pt, a);
+    localStorage.setItem(pt, o);
   } catch {
-    console.error("Failed to set HTML Editor stored theme", a);
+    console.error("Failed to set HTML Editor stored theme", o);
   }
 }
 function _r({
-  value: a,
-  onChange: n,
+  value: o,
+  onChange: a,
   language: l = "zh",
   initialMode: u = "split",
-  initialDevice: d = "desktop",
-  codeEditorHeight: x = "100%",
+  initialDevice: c = "desktop",
+  codeEditorHeight: g = "100%",
   previewHeight: i = "100%",
   sx: m,
-  showToolbar: f = !0,
-  initialTheme: H,
-  initialRightTab: N = "preview",
+  showToolbar: b = !0,
+  initialTheme: C,
+  initialRightTab: R = "preview",
   variables: v,
-  onVariablesChange: R,
-  requireVariableDefaults: z = !0
-}, ee) {
-  var Re, $e, Ne, ze, Oe, Pe, _e, We, je, Ge, qe, Ue, Ye, Ke, Xe, Je, Qe, Ze;
-  const s = (e, t) => Er(e, t, l), [S, gt] = V(u), [O, xt] = V(d), [Se, vt] = V(() => Or(H)), [E, me] = V(a), [te, P] = V(N), [w, he] = V(() => lt(v)), [yt, It] = V(!1), [Et, Vt] = V(null), [_, De] = V(""), [W, Me] = V(""), [be, re] = V(!1), [pe, oe] = V(!1), U = $(null), fe = $(null), C = $(w), Le = $(null), ke = $(null), ge = $(!1), ae = $(null);
+  onVariablesChange: z,
+  requireVariableDefaults: N = !0
+}, te) {
+  var Re, Ne, Oe, Pe, _e, We, je, Ge, qe, Ue, Ye, Ke, Xe, Je, Qe, Ze, et, tt;
+  const s = (e, t) => Er(e, t, l), [S, xt] = V(u), [O, gt] = V(c), [Me, vt] = V(() => Or(C)), [I, pe] = V(() => He(o)), [re, P] = V(R), [H, fe] = V(() => st(v)), [yt, It] = V(!1), [Et, Vt] = V(null), [_, Le] = V(""), [W, ke] = V(""), [xe, oe] = V(!1), [ge, ne] = V(!1), Y = $(null), ve = $(null), T = $(H), Ae = $(null), Be = $(null), ye = $(!1), ae = $(null);
   G(() => {
-    a !== E && me(a);
-  }, [a]), G(() => {
+    const e = He(o);
+    e !== I && (pe(e), a == null || a(e));
+  }, [o, I, a]), G(() => {
     if (v === void 0) return;
-    const e = lt(v);
-    C.current = e, he(e);
+    const e = st(v);
+    T.current = e, fe(e);
   }, [v]), G(() => {
     if (v !== void 0) return;
-    const e = Z(E), t = ue(e, C.current);
-    (t.length !== C.current.length || t.some((c, y) => {
-      const b = C.current[y];
-      return !b || b.variableInstanceId !== c.variableInstanceId || b.attribute !== c.attribute || b.type !== c.type || b.default !== c.default;
-    })) && (C.current = t, he(t));
-  }, [E, v]);
-  const A = L(
+    const e = ee(I), t = me(e, T.current);
+    (t.length !== T.current.length || t.some((d, y) => {
+      const p = T.current[y];
+      return !p || p.variableInstanceId !== d.variableInstanceId || p.attribute !== d.attribute || p.type !== d.type || p.default !== d.default;
+    })) && (T.current = t, fe(t));
+  }, [I, v]);
+  const F = L(
     (e) => {
-      const t = e.map((o, c) => ({
-        ...o,
-        id: c + 1,
-        default: o.type === "system" ? "" : o.default ?? ""
+      const t = e.map((n, d) => ({
+        ...n,
+        id: d + 1,
+        default: n.type === "system" ? "" : n.default ?? ""
       }));
-      return C.current = t, he(t), R == null || R(t), t;
+      return T.current = t, fe(t), z == null || z(t), t;
     },
-    [R]
+    [z]
   ), D = L(() => {
-    var t, o;
-    const e = (o = (t = fe.current) == null ? void 0 : t.state) == null ? void 0 : o.doc;
-    return e && typeof e.toString == "function" ? e.toString() : E;
-  }, [E]), xe = (e) => {
-    me(e), U.current && clearTimeout(U.current), U.current = setTimeout(() => {
-      n == null || n(e);
+    var t, n;
+    const e = (n = (t = ve.current) == null ? void 0 : t.state) == null ? void 0 : n.doc;
+    return e && typeof e.toString == "function" ? e.toString() : I;
+  }, [I]), Ie = (e) => {
+    const t = He(e);
+    pe(t), Y.current && clearTimeout(Y.current), Y.current = setTimeout(() => {
+      a == null || a(t);
     }, 300);
-  }, Y = L(
+  }, K = L(
     (e) => {
-      const t = Z(e ?? D()), o = ue(t, C.current);
-      return A(o);
+      const t = ee(e ?? D()), n = me(t, T.current);
+      return F(n);
     },
-    [D, A]
-  ), ne = L(() => {
+    [D, F]
+  ), ie = L(() => {
     const e = D();
-    e !== E && me(e);
-    const t = Y(e), o = z ? t.filter(
-      (c) => c.type === "user" && at(c.attribute, "user") && c.default.trim() === ""
+    e !== I && pe(e);
+    const t = K(e), n = N ? t.filter(
+      (d) => d.type === "user" && it(d.attribute, "user") && d.default.trim() === ""
     ) : [];
-    return It(o.length > 0), o.length > 0 && P("variables"), {
-      valid: o.length === 0,
+    return It(n.length > 0), n.length > 0 && P("variables"), {
+      valid: n.length === 0,
       variables: t,
-      missing: o
+      missing: n
     };
-  }, [D, E, z, Y]), Ct = L(() => {
-    ge.current = !0, ne(), P("variables");
-  }, [ne]);
+  }, [D, I, N, K]), Tt = L(() => {
+    ye.current = !0, ie(), P("variables");
+  }, [ie]);
   G(() => {
-    if (te !== "variables" || !ge.current) return;
+    if (re !== "variables" || !ye.current) return;
     const e = window.requestAnimationFrame(() => {
-      const t = Le.current, o = ke.current;
-      t && o && t.scrollTo({
-        top: Math.max(o.offsetTop - 8, 0),
+      const t = Ae.current, n = Be.current;
+      t && n && t.scrollTo({
+        top: Math.max(n.offsetTop - 8, 0),
         behavior: "auto"
-      }), ge.current = !1;
+      }), ye.current = !1;
     });
     return () => window.cancelAnimationFrame(e);
-  }, [te, w.length]), G(() => () => {
-    U.current && clearTimeout(U.current);
+  }, [re, H.length]), G(() => () => {
+    Y.current && clearTimeout(Y.current);
   }, []);
-  const Tt = (e) => {
-    var p, I, K;
+  const wt = (e) => {
+    var f, E, X;
     const t = e || "";
-    let o = t;
+    let n = t;
     if (!t.trim())
-      o = "<!DOCTYPE html><html><head></head><body></body></html>";
+      n = "<!DOCTYPE html><html><head></head><body></body></html>";
     else {
-      const M = new DOMParser().parseFromString(t, "text/html"), ye = ((p = M.documentElement) == null ? void 0 : p.tagName.toLowerCase()) === "html", $t = ((I = M.head) == null ? void 0 : I.tagName.toLowerCase()) === "head", Nt = ((K = M.body) == null ? void 0 : K.tagName.toLowerCase()) === "body";
-      if (!ye || !$t || !Nt) {
-        const zt = M.body ? M.body.innerHTML : t;
-        o = `<!DOCTYPE html><html><head>${M.head ? M.head.innerHTML : ""}</head><body>${zt}</body></html>`;
+      const M = new DOMParser().parseFromString(t, "text/html"), Ve = ((f = M.documentElement) == null ? void 0 : f.tagName.toLowerCase()) === "html", $t = ((E = M.head) == null ? void 0 : E.tagName.toLowerCase()) === "head", Rt = ((X = M.body) == null ? void 0 : X.tagName.toLowerCase()) === "body";
+      if (!Ve || !$t || !Rt) {
+        const Nt = M.body ? M.body.innerHTML : t;
+        n = `<!DOCTYPE html><html><head>${M.head ? M.head.innerHTML : ""}</head><body>${Nt}</body></html>`;
       } else
-        o = `<!DOCTYPE html>${M.documentElement.outerHTML}`;
+        n = `<!DOCTYPE html>${M.documentElement.outerHTML}`;
     }
-    const c = ["script", "iframe", "object", "embed", "canvas"], b = new DOMParser().parseFromString(o, "text/html");
-    return c.forEach((X) => {
-      b.querySelectorAll(X).forEach((ye) => ye.remove());
-    }), o = `<!DOCTYPE html>${b.documentElement.outerHTML}`, o;
-  }, Be = J(
-    () => st(E, w),
-    [w, E]
-  ), ie = J(() => Tt(Be), [Be]);
+    const d = ["script", "iframe", "object", "embed", "canvas"], p = new DOMParser().parseFromString(n, "text/html");
+    return d.forEach((J) => {
+      p.querySelectorAll(J).forEach((Ve) => Ve.remove());
+    }), n = `<!DOCTYPE html>${p.documentElement.outerHTML}`, n;
+  }, Fe = Q(
+    () => ct(I, H),
+    [H, I]
+  ), le = Q(() => wt(Fe), [Fe]);
   Pt(
-    ee,
+    te,
     () => ({
       getValue: () => D(),
-      getPreviewHtml: () => st(D(), C.current),
-      scanVariables: () => Y(D()),
+      getPreviewHtml: () => ct(D(), T.current),
+      scanVariables: () => K(D()),
       getVariables: (e) => {
-        const t = Y(D());
+        const t = K(D());
         return e == null || e(t), t;
       },
-      validateVariables: ne,
+      validateVariables: ie,
       showVariables: () => P("variables")
     }),
-    [D, Y, ne]
+    [D, K, ie]
   ), G(() => {
-    ae.current && ae.current.srcdoc !== ie && (ae.current.srcdoc = ie);
-  }, [ie]);
-  const wt = (e, t) => {
-    t !== null && gt(t);
-  }, Ht = (e, t) => {
-    (t === "desktop" || t === "mobile") && xt(t);
-  }, le = L(
+    ae.current && ae.current.srcdoc !== le && (ae.current.srcdoc = le);
+  }, [le]);
+  const Ht = (e, t) => {
+    t !== null && xt(t);
+  }, Ct = (e, t) => {
+    (t === "desktop" || t === "mobile") && gt(t);
+  }, se = L(
     (e) => {
-      var c, y;
-      const t = fe.current;
+      var d, y;
+      const t = ve.current;
       if (t != null && t.state && (t != null && t.dispatch)) {
-        const b = (c = t.state.selection) == null ? void 0 : c.main, p = t.state.doc.toString(), I = (b == null ? void 0 : b.from) ?? t.state.doc.length, K = (b == null ? void 0 : b.to) ?? I, X = `${p.slice(0, I)}${e}${p.slice(K)}`;
+        const p = (d = t.state.selection) == null ? void 0 : d.main, f = t.state.doc.toString(), E = (p == null ? void 0 : p.from) ?? t.state.doc.length, X = (p == null ? void 0 : p.to) ?? E, J = `${f.slice(0, E)}${e}${f.slice(X)}`;
         return t.dispatch({
-          changes: { from: I, to: K, insert: e },
-          selection: { anchor: I + e.length }
-        }), (y = t.focus) == null || y.call(t), xe(X), X;
+          changes: { from: E, to: X, insert: e },
+          selection: { anchor: E + e.length }
+        }), (y = t.focus) == null || y.call(t), Ie(J), J;
       }
-      const o = `${E}${e}`;
-      return xe(o), o;
+      const n = `${I}${e}`;
+      return Ie(n), n;
     },
-    [E]
+    [I]
   ), St = L(
     (e, t) => {
-      const o = C.current;
-      A(
-        o.map(
-          (c) => c.variableInstanceId === e ? { ...c, default: t } : c
+      const n = T.current;
+      F(
+        n.map(
+          (d) => d.variableInstanceId === e ? { ...d, default: t } : d
         )
       );
     },
-    [A]
+    [F]
   ), Dt = L(
     (e, t) => {
-      if (!ct(e, t)) return;
-      const c = le(Hr(e, t)), y = Z(c), b = ue(y, C.current);
-      A(b), P("variables");
+      if (!dt(e, t)) return;
+      const d = se(Cr(e, t)), y = ee(d), p = me(y, T.current);
+      F(p), P("variables");
     },
-    [le, A]
-  ), se = J(() => {
+    [se, F]
+  ), ce = Q(() => {
     const e = _.trim();
-    return e ? F.test(e) ? wr(e) || w.some((t) => t.type === "user" && t.attribute === e) ? s("text.variables.customVariableNameDuplicate") : "" : s("text.variables.customVariableNameInvalid") : s("text.variables.customVariableNameRequired");
-  }, [_, w]), Mt = L(() => {
+    return e ? A.test(e) ? Hr(e) || H.some((t) => t.type === "user" && t.attribute === e) ? s("text.variables.customVariableNameDuplicate") : "" : s("text.variables.customVariableNameInvalid") : s("text.variables.customVariableNameRequired");
+  }, [_, H]), Mt = L(() => {
     const e = W.trim();
-    if (re(!0), oe(!0), se || e === "") return;
-    const t = ct(_.trim(), "user", e);
+    if (oe(!0), ne(!0), ce || e === "") return;
+    const t = dt(_.trim(), "user", e);
     if (!t) return;
-    const o = le(t.variable), c = Z(o), y = ue(c, C.current);
-    let b = -1;
-    for (let p = y.length - 1; p >= 0; p -= 1) {
-      const I = y[p];
-      if (I.type === t.type && I.attribute === t.attribute && I.default === "") {
-        b = p;
+    const n = se(t.variable), d = ee(n), y = me(d, T.current);
+    let p = -1;
+    for (let f = y.length - 1; f >= 0; f -= 1) {
+      const E = y[f];
+      if (E.type === t.type && E.attribute === t.attribute && E.default === "") {
+        p = f;
         break;
       }
     }
-    A(
+    F(
       y.map(
-        (p, I) => I === b ? { ...p, default: t.default } : p
+        (f, E) => E === p ? { ...f, default: t.default } : f
       )
-    ), De(""), Me(""), re(!1), oe(!1), P("variables");
-  }, [W, _, se, le, A]), Lt = J(() => {
+    ), Le(""), ke(""), oe(!1), ne(!1), P("variables");
+  }, [W, _, ce, se, F]), Lt = Q(() => {
     const e = /* @__PURE__ */ new Set();
-    return [{ id: "custom", items: w.filter((o) => o.type === "user").filter((o) => !Ve.some((c) => c.items.some((y) => y.name === o.attribute))).filter((o) => e.has(o.attribute) ? !1 : (e.add(o.attribute), !0)).map((o) => ({
-      name: o.attribute,
-      labelKey: o.attribute,
+    return [{ id: "custom", items: H.filter((n) => n.type === "user").filter((n) => !Ce.some((d) => d.items.some((y) => y.name === n.attribute))).filter((n) => e.has(n.attribute) ? !1 : (e.add(n.attribute), !0)).map((n) => ({
+      name: n.attribute,
+      labelKey: n.attribute,
       kind: "user"
-    })) }, ...Ve];
-  }, [w]), ce = J(
-    () => w.filter((e) => e.type !== "system"),
-    [w]
-  ), kt = (e) => e === "custom" ? "text.variables.groupCustom" : e === "contacts" ? "text.variables.groupContacts" : e === "email" ? "text.variables.groupEmail" : e === "organization" ? "text.variables.groupOrganization" : e === "date" ? "text.variables.groupDate" : "text.variables.groupLinks", T = rr(), Bt = O === "desktop" || O === "mobile" ? O : "desktop", At = S === "split" || S === "code" || S === "preview" ? S : "split";
-  ($e = (Re = T.palette) == null ? void 0 : Re.action) == null || $e.selected, (ze = (Ne = T.palette) == null ? void 0 : Ne.primary) == null || ze.main, (Pe = (Oe = T.palette) == null ? void 0 : Oe.action) == null || Pe.selected, (We = (_e = T.palette) == null ? void 0 : _e.background) == null || We.paper, (Ge = (je = T.palette) == null ? void 0 : je.text) == null || Ge.primary, (Ue = (qe = T.palette) == null ? void 0 : qe.action) == null || Ue.hover;
+    })) }, ...Ce];
+  }, [H]), de = Q(
+    () => H.filter((e) => e.type !== "system"),
+    [H]
+  ), kt = (e) => e === "custom" ? "text.variables.groupCustom" : e === "contacts" ? "text.variables.groupContacts" : e === "email" ? "text.variables.groupEmail" : e === "organization" ? "text.variables.groupOrganization" : e === "date" ? "text.variables.groupDate" : "text.variables.groupLinks", w = rr(), At = O === "desktop" || O === "mobile" ? O : "desktop", Bt = S === "split" || S === "code" || S === "preview" ? S : "split";
+  (Ne = (Re = w.palette) == null ? void 0 : Re.action) == null || Ne.selected, (Pe = (Oe = w.palette) == null ? void 0 : Oe.primary) == null || Pe.main, (We = (_e = w.palette) == null ? void 0 : _e.action) == null || We.selected, (Ge = (je = w.palette) == null ? void 0 : je.background) == null || Ge.paper, (Ue = (qe = w.palette) == null ? void 0 : qe.text) == null || Ue.primary, (Ke = (Ye = w.palette) == null ? void 0 : Ye.action) == null || Ke.hover;
   const j = {
     tooltip: {
       sx: {
@@ -397,14 +410,14 @@ function _r({
         fontWeight: 400,
         lineHeight: 1.45,
         maxWidth: 360,
-        backgroundColor: de(((Ke = (Ye = T.palette) == null ? void 0 : Ye.text) == null ? void 0 : Ke.primary) ?? "#1F1F21", 0.9),
-        color: ((Je = (Xe = T.palette) == null ? void 0 : Xe.common) == null ? void 0 : Je.white) ?? "#fff"
+        backgroundColor: ue(((Je = (Xe = w.palette) == null ? void 0 : Xe.text) == null ? void 0 : Je.primary) ?? "#1F1F21", 0.9),
+        color: ((Ze = (Qe = w.palette) == null ? void 0 : Qe.common) == null ? void 0 : Ze.white) ?? "#fff"
       }
     },
     arrow: {
-      sx: { color: de(((Ze = (Qe = T.palette) == null ? void 0 : Qe.text) == null ? void 0 : Ze.primary) ?? "#1F1F21", 0.9) }
+      sx: { color: ue(((tt = (et = w.palette) == null ? void 0 : et.text) == null ? void 0 : tt.primary) ?? "#1F1F21", 0.9) }
     }
-  }, ve = {
+  }, Ee = {
     component: "div",
     sx: {
       mt: 0.5,
@@ -412,11 +425,11 @@ function _r({
       minHeight: 18,
       lineHeight: 1.5
     }
-  }, Ae = () => /* @__PURE__ */ g(
+  }, ze = () => /* @__PURE__ */ x(
     h,
     {
       sx: {
-        height: x,
+        height: g,
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
@@ -459,13 +472,13 @@ function _r({
             children: /* @__PURE__ */ r(
               _t,
               {
-                value: E,
+                value: I,
                 height: "100%",
                 extensions: [Wt()],
-                theme: we[Se] || mt,
-                onChange: xe,
+                theme: Se[Me] || ht,
+                onChange: Ie,
                 onCreateEditor: (e) => {
-                  fe.current = e;
+                  ve.current = e;
                 },
                 basicSetup: {
                   lineNumbers: !0,
@@ -478,12 +491,12 @@ function _r({
           }
         ),
         /* @__PURE__ */ r(
-          Ie,
+          Te,
           {
             size: "small",
             variant: "contained",
             startIcon: /* @__PURE__ */ r(Lr, { fontSize: "small" }),
-            onClick: Ct,
+            onClick: Tt,
             sx: {
               position: "absolute",
               right: 16,
@@ -518,7 +531,7 @@ function _r({
         "iframe",
         {
           ref: ae,
-          srcDoc: ie,
+          srcDoc: le,
           style: {
             width: "100%",
             height: "100%",
@@ -530,10 +543,10 @@ function _r({
         }
       )
     }
-  ) }), Rt = () => /* @__PURE__ */ g(
+  ) }), zt = () => /* @__PURE__ */ x(
     h,
     {
-      ref: Le,
+      ref: Ae,
       sx: {
         flex: 1,
         height: "100%",
@@ -545,23 +558,23 @@ function _r({
         pb: 6
       },
       children: [
-        /* @__PURE__ */ r(h, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ g(h, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ g(h, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+        /* @__PURE__ */ r(h, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ x(h, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ x(h, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
             /* @__PURE__ */ r(k, { variant: "subtitle1", sx: { fontWeight: 700 }, children: s("htmlEditor.variables.title") }),
-            /* @__PURE__ */ r(q, { title: s("htmlEditor.variables.help"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(h, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ r(Br, { fontSize: "small" }) }) })
+            /* @__PURE__ */ r(q, { title: s("htmlEditor.variables.help"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(h, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ r(Ar, { fontSize: "small" }) }) })
           ] }),
           /* @__PURE__ */ r(k, { component: "div", variant: "body2", color: "text.secondary", children: s("htmlEditor.variables.scanHint") })
         ] }) }),
         /* @__PURE__ */ r(h, { sx: { mb: 2 }, children: Lt.map((e) => {
           const t = Et === e.id;
-          return /* @__PURE__ */ g(
+          return /* @__PURE__ */ x(
             lr,
             {
               disableGutters: !0,
               square: !0,
               elevation: 0,
               expanded: t,
-              onChange: (o, c) => Vt(c ? e.id : null),
+              onChange: (n, d) => Vt(d ? e.id : null),
               sx: {
                 "&:before": { display: "none" },
                 border: 1,
@@ -582,49 +595,49 @@ function _r({
                     children: /* @__PURE__ */ r(k, { component: "div", variant: "body2", color: "text.primary", children: s(kt(e.id)) })
                   }
                 ),
-                /* @__PURE__ */ g(cr, { sx: { pt: 0, pb: 1.25 }, children: [
-                  e.id === "custom" && /* @__PURE__ */ g(h, { sx: { mb: 1 }, children: [
+                /* @__PURE__ */ x(cr, { sx: { pt: 0, pb: 1.25 }, children: [
+                  e.id === "custom" && /* @__PURE__ */ x(h, { sx: { mb: 1 }, children: [
                     /* @__PURE__ */ r(
-                      Ee,
+                      we,
                       {
                         size: "small",
                         fullWidth: !0,
                         label: s("text.variables.customVariableName"),
                         value: _,
                         placeholder: "e.g. order_id",
-                        onChange: (o) => {
-                          De(o.target.value), !be && o.target.value.trim() !== "" && re(!0);
+                        onChange: (n) => {
+                          Le(n.target.value), !xe && n.target.value.trim() !== "" && oe(!0);
                         },
                         onBlur: () => {
-                          _.trim() !== "" && re(!0);
+                          _.trim() !== "" && oe(!0);
                         },
-                        error: be && !!se,
-                        helperText: be && se || " ",
-                        FormHelperTextProps: ve,
+                        error: xe && !!ce,
+                        helperText: xe && ce || " ",
+                        FormHelperTextProps: Ee,
                         sx: { mb: 1 }
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Ee,
+                      we,
                       {
                         size: "small",
                         fullWidth: !0,
                         label: s("text.variables.defaultValueLabel"),
                         value: W,
                         placeholder: s("text.variables.defaultPlaceholder"),
-                        onChange: (o) => {
-                          Me(o.target.value), !pe && o.target.value.trim() !== "" && oe(!0);
+                        onChange: (n) => {
+                          ke(n.target.value), !ge && n.target.value.trim() !== "" && ne(!0);
                         },
                         onBlur: () => {
-                          W.trim() !== "" && oe(!0);
+                          W.trim() !== "" && ne(!0);
                         },
-                        error: pe && W.trim() === "",
-                        helperText: pe && W.trim() === "" ? s("text.variables.defaultRequired") : " ",
-                        FormHelperTextProps: ve
+                        error: ge && W.trim() === "",
+                        helperText: ge && W.trim() === "" ? s("text.variables.defaultRequired") : " ",
+                        FormHelperTextProps: Ee
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Ie,
+                      Te,
                       {
                         fullWidth: !0,
                         size: "small",
@@ -642,20 +655,20 @@ function _r({
                       }
                     )
                   ] }),
-                  e.items.length > 0 && /* @__PURE__ */ r(h, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((o) => /* @__PURE__ */ r(
-                    Ie,
+                  e.items.length > 0 && /* @__PURE__ */ r(h, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((n) => /* @__PURE__ */ r(
+                    Te,
                     {
                       size: "small",
                       variant: "outlined",
-                      onClick: () => Dt(o.name, o.kind),
+                      onClick: () => Dt(n.name, n.kind),
                       sx: {
                         justifyContent: "flex-start",
                         borderColor: "divider",
                         color: "text.secondary",
                         textTransform: "none"
                       },
-                      children: /* @__PURE__ */ g(h, { sx: { textAlign: "left", minWidth: 0 }, children: [
-                        /* @__PURE__ */ r(k, { component: "div", variant: "body2", color: "text.primary", children: e.id === "custom" ? o.name : s(o.labelKey) }),
+                      children: /* @__PURE__ */ x(h, { sx: { textAlign: "left", minWidth: 0 }, children: [
+                        /* @__PURE__ */ r(k, { component: "div", variant: "body2", color: "text.primary", children: e.id === "custom" ? n.name : s(n.labelKey) }),
                         /* @__PURE__ */ r(
                           k,
                           {
@@ -663,12 +676,12 @@ function _r({
                             variant: "caption",
                             color: "text.secondary",
                             sx: { fontFamily: "monospace" },
-                            children: o.kind === "builtin" ? `{%${o.name}%}` : `{{${o.name}}}`
+                            children: n.kind === "builtin" ? `{%${n.name}%}` : `{{${n.name}}}`
                           }
                         )
                       ] })
                     },
-                    `${e.id}:${o.name}`
+                    `${e.id}:${n.name}`
                   )) })
                 ] })
               ]
@@ -677,9 +690,9 @@ function _r({
           );
         }) }),
         /* @__PURE__ */ r(dr, { sx: { my: 2 } }),
-        /* @__PURE__ */ r(k, { component: "div", ref: ke, variant: "subtitle2", sx: { mb: 0.5 }, children: s("htmlEditor.variables.detected") }),
+        /* @__PURE__ */ r(k, { component: "div", ref: Be, variant: "subtitle2", sx: { mb: 0.5 }, children: s("htmlEditor.variables.detected") }),
         /* @__PURE__ */ r(k, { component: "div", variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: s("htmlEditor.variables.defaultHelp") }),
-        ce.length === 0 ? /* @__PURE__ */ r(
+        de.length === 0 ? /* @__PURE__ */ r(
           h,
           {
             sx: {
@@ -693,27 +706,27 @@ function _r({
             },
             children: s("htmlEditor.variables.empty")
           }
-        ) : /* @__PURE__ */ r(h, { sx: { display: "grid", gap: 0.75 }, children: ce.map((e, t) => {
-          const o = e.type === "user" && at(e.attribute, "user"), c = yt && o && e.default.trim() === "", y = ce.filter((p) => p.type === e.type && p.attribute === e.attribute).length, b = ce.slice(0, t + 1).filter((p) => p.type === e.type && p.attribute === e.attribute).length;
-          return /* @__PURE__ */ g(
+        ) : /* @__PURE__ */ r(h, { sx: { display: "grid", gap: 0.75 }, children: de.map((e, t) => {
+          const n = e.type === "user" && it(e.attribute, "user"), d = yt && n && e.default.trim() === "", y = de.filter((f) => f.type === e.type && f.attribute === e.attribute).length, p = de.slice(0, t + 1).filter((f) => f.type === e.type && f.attribute === e.attribute).length;
+          return /* @__PURE__ */ x(
             h,
             {
               sx: {
                 display: "grid",
                 gridTemplateColumns: { xs: "1fr", sm: "minmax(150px, 42%) 1fr" },
-                alignItems: c ? "flex-start" : "center",
+                alignItems: d ? "flex-start" : "center",
                 gap: 1,
                 px: 1,
                 py: 0.75,
                 border: "1px solid",
-                borderColor: c ? "error.main" : "transparent",
+                borderColor: d ? "error.main" : "transparent",
                 borderRadius: 1,
-                borderBottomColor: c ? "error.main" : "divider",
-                backgroundColor: c ? de(T.palette.error.main, 0.04) : "transparent",
+                borderBottomColor: d ? "error.main" : "divider",
+                backgroundColor: d ? ue(w.palette.error.main, 0.04) : "transparent",
                 transition: "background-color 120ms ease, border-color 120ms ease",
                 "&:hover": {
-                  backgroundColor: c ? de(T.palette.error.main, 0.04) : "action.hover",
-                  borderColor: c ? "error.main" : "divider"
+                  backgroundColor: d ? ue(w.palette.error.main, 0.04) : "action.hover",
+                  borderColor: d ? "error.main" : "divider"
                 }
               },
               children: [
@@ -727,23 +740,23 @@ function _r({
                       fontSize: 13,
                       lineHeight: 1.35,
                       wordBreak: "break-all",
-                      color: c ? "error.main" : "text.primary"
+                      color: d ? "error.main" : "text.primary"
                     },
-                    children: y > 1 ? `${e.variable} (${b})` : e.variable
+                    children: y > 1 ? `${e.variable} (${p})` : e.variable
                   }
                 ),
-                o ? /* @__PURE__ */ r(
-                  Ee,
+                n ? /* @__PURE__ */ r(
+                  we,
                   {
                     size: "small",
                     fullWidth: !0,
                     value: e.default,
-                    label: c ? s("text.variables.defaultValueLabel") : void 0,
+                    label: d ? s("text.variables.defaultValueLabel") : void 0,
                     placeholder: s("text.variables.defaultPlaceholder"),
-                    error: c,
-                    helperText: c ? s("text.variables.defaultRequired") : " ",
-                    FormHelperTextProps: ve,
-                    onChange: (p) => St(e.variableInstanceId, p.target.value),
+                    error: d,
+                    helperText: d ? s("text.variables.defaultRequired") : " ",
+                    FormHelperTextProps: Ee,
+                    onChange: (f) => St(e.variableInstanceId, f.target.value),
                     sx: {
                       "& .MuiOutlinedInput-root": {
                         minHeight: 40,
@@ -763,11 +776,11 @@ function _r({
         }) })
       ]
     }
-  ), Fe = () => /* @__PURE__ */ g(h, { sx: { height: i, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ g(
+  ), $e = () => /* @__PURE__ */ x(h, { sx: { height: i, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ x(
       ir,
       {
-        value: te,
+        value: re,
         onChange: (e, t) => P(t),
         sx: {
           minHeight: 40,
@@ -780,14 +793,14 @@ function _r({
           }
         },
         children: [
-          /* @__PURE__ */ r(ot, { value: "preview", label: s("htmlEditor.tabs.preview") }),
-          /* @__PURE__ */ r(ot, { value: "variables", label: s("htmlEditor.tabs.variables") })
+          /* @__PURE__ */ r(at, { value: "preview", label: s("htmlEditor.tabs.preview") }),
+          /* @__PURE__ */ r(at, { value: "variables", label: s("htmlEditor.tabs.variables") })
         ]
       }
     ),
-    /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: te === "preview" ? Ft() : Rt() })
+    /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: re === "preview" ? Ft() : zt() })
   ] });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ x(
     h,
     {
       sx: {
@@ -800,7 +813,7 @@ function _r({
         ...m
       },
       children: [
-        f && /* @__PURE__ */ g(
+        b && /* @__PURE__ */ x(
           h,
           {
             sx: {
@@ -813,18 +826,18 @@ function _r({
               backgroundColor: "background.paper"
             },
             children: [
-              /* @__PURE__ */ g(h, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ g(
-                  et,
+              /* @__PURE__ */ x(h, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ x(
+                  rt,
                   {
-                    value: At,
+                    value: Bt,
                     exclusive: !0,
-                    onChange: wt,
+                    onChange: Ht,
                     size: "small",
                     "aria-label": s("htmlEditor.mode.split"),
                     children: [
                       /* @__PURE__ */ r(q, { title: s("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(
-                        Q,
+                        Z,
                         {
                           value: "split",
                           "aria-label": s("htmlEditor.mode.split"),
@@ -832,7 +845,7 @@ function _r({
                         }
                       ) }),
                       /* @__PURE__ */ r(q, { title: s("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(
-                        Q,
+                        Z,
                         {
                           value: "code",
                           "aria-label": s("htmlEditor.mode.code"),
@@ -840,24 +853,24 @@ function _r({
                         }
                       ) }),
                       /* @__PURE__ */ r(q, { title: s("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(
-                        Q,
+                        Z,
                         {
                           value: "preview",
                           "aria-label": s("htmlEditor.mode.preview"),
-                          children: /* @__PURE__ */ r(Ar, { fontSize: "small" })
+                          children: /* @__PURE__ */ r(Br, { fontSize: "small" })
                         }
                       ) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ g(or, { size: "small", sx: { minWidth: 140 }, children: [
-                  /* @__PURE__ */ r(ar, { id: "theme-select-label", children: s("htmlEditor.theme") }),
-                  /* @__PURE__ */ g(
-                    nr,
+                /* @__PURE__ */ x(or, { size: "small", sx: { minWidth: 140 }, children: [
+                  /* @__PURE__ */ r(nr, { id: "theme-select-label", children: s("htmlEditor.theme") }),
+                  /* @__PURE__ */ x(
+                    ar,
                     {
                       labelId: "theme-select-label",
                       id: "theme-select",
-                      value: Se,
+                      value: Me,
                       label: s("htmlEditor.theme"),
                       onChange: (e) => {
                         const t = e.target.value;
@@ -870,34 +883,34 @@ function _r({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ r(tt, { children: s("htmlEditor.lightThemes") }),
-                        Object.entries(Nr).map(([e, t]) => /* @__PURE__ */ r(rt, { value: e, children: t }, e)),
-                        /* @__PURE__ */ r(tt, { children: s("htmlEditor.darkThemes") }),
-                        Object.entries(zr).map(([e, t]) => /* @__PURE__ */ r(rt, { value: e, children: t }, e))
+                        /* @__PURE__ */ r(ot, { children: s("htmlEditor.lightThemes") }),
+                        Object.entries(Rr).map(([e, t]) => /* @__PURE__ */ r(nt, { value: e, children: t }, e)),
+                        /* @__PURE__ */ r(ot, { children: s("htmlEditor.darkThemes") }),
+                        Object.entries(Nr).map(([e, t]) => /* @__PURE__ */ r(nt, { value: e, children: t }, e))
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r(h, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: S !== "code" && /* @__PURE__ */ g(
-                et,
+              /* @__PURE__ */ r(h, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: S !== "code" && /* @__PURE__ */ x(
+                rt,
                 {
-                  value: Bt,
+                  value: At,
                   exclusive: !0,
-                  onChange: Ht,
+                  onChange: Ct,
                   size: "small",
                   "aria-label": s("htmlEditor.device.desktop"),
                   children: [
                     /* @__PURE__ */ r(q, { title: s("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(
-                      Q,
+                      Z,
                       {
                         value: "desktop",
                         "aria-label": s("htmlEditor.device.desktop"),
-                        children: /* @__PURE__ */ r(Rr, { fontSize: "small" })
+                        children: /* @__PURE__ */ r(zr, { fontSize: "small" })
                       }
                     ) }),
                     /* @__PURE__ */ r(q, { title: s("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ r(
-                      Q,
+                      Z,
                       {
                         value: "mobile",
                         "aria-label": s("htmlEditor.device.mobile"),
@@ -910,7 +923,7 @@ function _r({
             ]
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ x(
           h,
           {
             sx: {
@@ -921,12 +934,12 @@ function _r({
               overflow: "hidden"
             },
             children: [
-              S === "split" && /* @__PURE__ */ g(Ot, { children: [
-                /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
-                /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
+              S === "split" && /* @__PURE__ */ x(Ot, { children: [
+                /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ze() }),
+                /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: $e() })
               ] }),
-              S === "code" && /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
-              S === "preview" && /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
+              S === "code" && /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ze() }),
+              S === "preview" && /* @__PURE__ */ r(h, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: $e() })
             ]
           }
         )
@@ -934,9 +947,9 @@ function _r({
     }
   );
 }
-const ft = ut(_r);
+const ft = mt(_r);
 ft.displayName = "HtmlEditorContent";
-const Wr = ut((a, n) => /* @__PURE__ */ r(er, { theme: Ir, children: /* @__PURE__ */ r(
+const Wr = mt((o, a) => /* @__PURE__ */ r(er, { theme: Ir, children: /* @__PURE__ */ r(
   tr,
   {
     sx: {
@@ -947,7 +960,7 @@ const Wr = ut((a, n) => /* @__PURE__ */ r(er, { theme: Ir, children: /* @__PURE_
       display: "flex",
       flexDirection: "column"
     },
-    children: /* @__PURE__ */ r(ft, { ref: n, ...a })
+    children: /* @__PURE__ */ r(ft, { ref: a, ...o })
   }
 ) }));
 Wr.displayName = "HtmlEditor";