monto-email-builder 1.4.2 → 1.4.3

package/dist/HtmlEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HtmlEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAmBlH,OAAO,EAaL,OAAO,EAIP,KAAK,EAKN,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,QAAQ,EAAK,MAAM,SAAS,CAAC;AAKtC,OAAO,EASL,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,kCAAkC,EACxC,MAAM,aAAa,CAAC;AAYrB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC;AACzD,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kCAAkC,GACnC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,sBAAsB,EAAE,CAAC;IAC9C,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,IAAI,KAAK,sBAAsB,EAAE,CAAC;IACjG,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;IAC5D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8DD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AA48BD,QAAA,MAAM,mBAAmB,uFAevB,CAAC;AAGH,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HtmlEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAmBlH,OAAO,EAaL,OAAO,EAIP,KAAK,EAKN,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,QAAQ,EAAK,MAAM,SAAS,CAAC;AAKtC,OAAO,EASL,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,kCAAkC,EACxC,MAAM,aAAa,CAAC;AAYrB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC;AACzD,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,kCAAkC,GACnC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,sBAAsB,EAAE,CAAC;IAC9C,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,IAAI,KAAK,sBAAsB,EAAE,CAAC;IACjG,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;IAC5D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8DD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAi+BD,QAAA,MAAM,mBAAmB,uFAevB,CAAC;AAGH,eAAe,mBAAmB,CAAC"}

package/dist/html-editor.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as f, Fragment as Nt } from "react/jsx-runtime";
-import { forwardRef as dt, useState as E, useRef as $, useEffect as X, useCallback as D, useMemo as J, useImperativeHandle as zt } from "react";
+import { forwardRef as dt, useState as V, useRef as $, useEffect as G, useCallback as L, useMemo as J, useImperativeHandle as zt } from "react";
 import Ot from "@uiw/react-codemirror";
 import { html as Pt } from "@codemirror/lang-html";
 import { xcodeDark as _t, tomorrowNightBlue as Wt, dracula as ut, basicDark as jt, abcdef as Gt, bbedit as Ut, noctisLilac as qt, gruvboxLight as Yt, tokyoNightDay as Kt, vscodeLight as Xt, xcodeLight as Jt } from "@uiw/codemirror-themes-all";
 import Q from "@mui/material/ToggleButton";
 import et from "@mui/material/ToggleButtonGroup";
-import { ThemeProvider as Qt, ScopedCssBaseline as Zt, useTheme as er, Box as m, Tooltip as G, FormControl as tr, InputLabel as rr, Select as or, ListSubheader as tt, MenuItem as rt, Button as ve, Tabs as ar, Tab as ot, Typography as B, Accordion as nr, AccordionSummary as ir, AccordionDetails as lr, TextField as ye, Divider as sr } from "@mui/material";
-import { alpha as ce } from "@mui/material/styles";
+import { ThemeProvider as Qt, ScopedCssBaseline as Zt, useTheme as er, Box as b, Tooltip as U, FormControl as tr, InputLabel as rr, Select as or, ListSubheader as tt, MenuItem as rt, Button as Ie, Tabs as nr, Tab as ot, Typography as A, Accordion as ar, AccordionSummary as ir, AccordionDetails as lr, TextField as Ee, Divider as sr } from "@mui/material";
+import { alpha as de } from "@mui/material/styles";
 import * as cr from "@mui/icons-material/AddOutlined";
 import * as dr from "@mui/icons-material/Code";
 import * as ur from "@mui/icons-material/DataObjectOutlined";
@@ -16,64 +16,64 @@ import * as br from "@mui/icons-material/Visibility";
 import * as pr from "@mui/icons-material/ViewColumn";
 import * as fr from "@mui/icons-material/MonitorOutlined";
 import * as xr from "@mui/icons-material/PhoneIphoneOutlined";
-import { B as gr, V as A, r as L, T as vr, t as yr } from "./chunks/chunk-ZMWDxWGX.js";
-const Ee = gr, at = "unsubscribe_link", Ve = /\{\{\s*([^{}]+?)\s*\}\}/g, nt = /\{%\s*([^{}%]+?)\s*%\}/g;
-function Te(a, n, s, d, c) {
-  return a[n - 1] !== d && a[s] !== c;
+import { B as gr, V as F, r as k, T as vr, t as yr } from "./chunks/chunk-ZMWDxWGX.js";
+const Ve = gr, nt = "unsubscribe_link", Te = /\{\{\s*([^{}]+?)\s*\}\}/g, at = /\{%\s*([^{}%]+?)\s*%\}/g;
+function Ce(n, a, s, d, c) {
+  return n[a - 1] !== d && n[s] !== c;
 }
-function mt(a, n = "user") {
-  return n === "builtin" || n === "system" ? `{%${a}%}` : `{{${a}}}`;
+function mt(n, a = "user") {
+  return a === "builtin" || a === "system" ? `{%${n}%}` : `{{${n}}}`;
 }
-function Ir(a) {
-  const n = typeof a == "string" ? a.trim() : "";
-  if (n.startsWith("{{") && n.endsWith("}}")) {
-    const s = n.slice(2, -2).trim();
-    if (A.test(s)) return { attribute: s, type: "user" };
+function Ir(n) {
+  const a = typeof n == "string" ? n.trim() : "";
+  if (a.startsWith("{{") && a.endsWith("}}")) {
+    const s = a.slice(2, -2).trim();
+    if (F.test(s)) return { attribute: s, type: "user" };
   }
-  if (n.startsWith("{%") && n.endsWith("%}")) {
-    const s = n.slice(2, -2).trim();
-    if (A.test(s)) return { attribute: s, type: "system" };
+  if (a.startsWith("{%") && a.endsWith("%}")) {
+    const s = a.slice(2, -2).trim();
+    if (F.test(s)) return { attribute: s, type: "system" };
   }
   return null;
 }
-function Er(a, n) {
-  const s = a.variable ?? a.Variable ?? a.key ?? "", d = Ir(s), x = (a.type ?? a.Type ?? (d == null ? void 0 : d.type) ?? "user") === "system" ? "system" : "user", i = a.attribute ?? a.Attribute ?? (d == null ? void 0 : d.attribute) ?? "", u = String(i).trim();
-  return !u || !A.test(u) ? null : {
-    id: Number(a.id) || n + 1,
-    variableInstanceId: a.variableInstanceId ?? a.VariableInstanceId,
-    variable: x === "system" ? `{%${u}%}` : `{{${u}}}`,
+function Er(n, a) {
+  const s = n.variable ?? n.Variable ?? n.key ?? "", d = Ir(s), x = (n.type ?? n.Type ?? (d == null ? void 0 : d.type) ?? "user") === "system" ? "system" : "user", i = n.attribute ?? n.Attribute ?? (d == null ? void 0 : d.attribute) ?? "", h = String(i).trim();
+  return !h || !F.test(h) ? null : {
+    id: Number(n.id) || a + 1,
+    variableInstanceId: n.variableInstanceId ?? n.VariableInstanceId,
+    variable: x === "system" ? `{%${h}%}` : `{{${h}}}`,
     type: x,
-    attribute: u,
-    default: String(a.default ?? a.Default ?? a.value ?? "")
+    attribute: h,
+    default: String(n.default ?? n.Default ?? n.value ?? "")
   };
 }
-function it(a) {
-  return Array.isArray(a) ? a.map((n, s) => Er(n, s)).filter((n) => !!n).map((n, s) => ({
-    ...n,
+function it(n) {
+  return Array.isArray(n) ? n.map((a, s) => Er(a, s)).filter((a) => !!a).map((a, s) => ({
+    ...a,
     id: s + 1,
-    variableInstanceId: n.variableInstanceId || we(n.type, n.attribute, s)
+    variableInstanceId: a.variableInstanceId || He(a.type, a.attribute, s)
   })) : [];
 }
-function de(a) {
-  const n = a || "", s = [], d = (i, u, p) => {
-    s.push({ attribute: i, type: u, start: p });
+function Z(n) {
+  const a = n || "", s = [], d = (i, h, p) => {
+    s.push({ attribute: i, type: h, start: p });
   };
   let c;
-  for (Ve.lastIndex = 0; c = Ve.exec(n); ) {
-    const i = c.index, u = i + c[0].length;
-    if (!Te(n, i, u, "{", "}")) continue;
+  for (Te.lastIndex = 0; c = Te.exec(a); ) {
+    const i = c.index, h = i + c[0].length;
+    if (!Ce(a, i, h, "{", "}")) continue;
     const p = c[1].trim();
-    !p || !A.test(p) || d(p, "user", i);
+    !p || !F.test(p) || d(p, "user", i);
   }
   let x;
-  for (nt.lastIndex = 0; x = nt.exec(n); ) {
-    const i = x.index, u = i + x[0].length;
-    if (!Te(n, i, u, "{", "}")) continue;
+  for (at.lastIndex = 0; x = at.exec(a); ) {
+    const i = x.index, h = i + x[0].length;
+    if (!Ce(a, i, h, "{", "}")) continue;
     const p = x[1].trim();
-    !p || !A.test(p) || d(p, "system", i);
+    !p || !F.test(p) || d(p, "system", i);
   }
-  return s.sort((i, u) => i.start - u.start), s.map((i, u) => ({
-    id: u + 1,
+  return s.sort((i, h) => i.start - h.start), s.map((i, h) => ({
+    id: h + 1,
     variableInstanceId: wr(i.type, i.attribute, i.start),
     variable: i.type === "system" ? `{%${i.attribute}%}` : `{{${i.attribute}}}`,
     type: i.type,
@@ -81,77 +81,77 @@ function de(a) {
     default: ""
   }));
 }
-function Ie(a, n) {
+function ue(n, a) {
   const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
-  return n.forEach((c) => {
+  return a.forEach((c) => {
     const x = { item: c, consumed: !1 };
     if (c.variableInstanceId) {
       const p = s.get(c.variableInstanceId) ?? [];
       p.push(x), s.set(c.variableInstanceId, p);
     }
-    const i = `${c.type}:${c.attribute}`, u = d.get(i) ?? [];
-    u.push(x), d.set(i, u);
-  }), a.map((c, x) => {
+    const i = `${c.type}:${c.attribute}`, h = d.get(i) ?? [];
+    h.push(x), d.set(i, h);
+  }), n.map((c, x) => {
     var N;
-    const i = `${c.type}:${c.attribute}`, u = c.variableInstanceId ? (N = s.get(c.variableInstanceId)) == null ? void 0 : N.find((g) => !g.consumed) : void 0, p = (d.get(i) ?? []).find((g) => !g.consumed), w = u ?? p;
-    return w && (w.consumed = !0), {
+    const i = `${c.type}:${c.attribute}`, h = c.variableInstanceId ? (N = s.get(c.variableInstanceId)) == null ? void 0 : N.find((g) => !g.consumed) : void 0, p = (d.get(i) ?? []).find((g) => !g.consumed), H = h ?? p;
+    return H && (H.consumed = !0), {
       ...c,
       id: x + 1,
-      variableInstanceId: c.variableInstanceId || we(c.type, c.attribute, x),
-      default: c.type === "system" ? "" : (w == null ? void 0 : w.item.default) ?? c.default ?? ""
+      variableInstanceId: c.variableInstanceId || He(c.type, c.attribute, x),
+      default: c.type === "system" ? "" : (H == null ? void 0 : H.item.default) ?? c.default ?? ""
     };
   });
 }
-function Vr(a) {
-  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function Vr(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function lt(a, n) {
+function lt(n, a) {
   const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
-  n.forEach((i) => {
+  a.forEach((i) => {
     i.type === "user" && (i.variableInstanceId && s.set(i.variableInstanceId, i.default ?? ""), d.has(i.attribute) || d.set(i.attribute, i.default ?? ""));
   });
-  const c = de(a), x = /* @__PURE__ */ new Map();
+  const c = Z(n), x = /* @__PURE__ */ new Map();
   return c.forEach((i) => {
-    const u = Number(String(i.variableInstanceId ?? "").split("-at-")[1]);
-    Number.isFinite(u) && x.set(u, i);
-  }), (a || "").replace(Ve, (i, u, p, w) => {
-    var Z;
+    const h = Number(String(i.variableInstanceId ?? "").split("-at-")[1]);
+    Number.isFinite(h) && x.set(h, i);
+  }), (n || "").replace(Te, (i, h, p, H) => {
+    var ee;
     const N = p + i.length;
-    if (!Te(w, p, N, "{", "}")) return i;
-    const g = String(u).trim();
-    if (!g || !A.test(g)) return i;
-    const F = (Z = x.get(p)) == null ? void 0 : Z.variableInstanceId, z = (F ? s.get(F) : void 0) ?? (n.filter((l) => l.type === "user" && l.attribute === g).length === 1 ? d.get(g) : void 0);
+    if (!Ce(H, p, N, "{", "}")) return i;
+    const g = String(h).trim();
+    if (!g || !F.test(g)) return i;
+    const R = (ee = x.get(p)) == null ? void 0 : ee.variableInstanceId, z = (R ? s.get(R) : void 0) ?? (a.filter((l) => l.type === "user" && l.attribute === g).length === 1 ? d.get(g) : void 0);
     return z === void 0 || z === "" ? i : Vr(z);
   });
 }
-function st(a, n, s = "") {
-  const d = a.trim();
-  if (!d || !A.test(d)) return null;
-  const c = n === "builtin" ? "system" : "user";
+function st(n, a, s = "") {
+  const d = n.trim();
+  if (!d || !F.test(d)) return null;
+  const c = a === "builtin" ? "system" : "user";
   return {
     id: 1,
-    variableInstanceId: we(c, d, 0),
-    variable: mt(d, n),
+    variableInstanceId: He(c, d, 0),
+    variable: mt(d, a),
     type: c,
     attribute: d,
     default: c === "system" ? "" : s
   };
 }
-function Tr(a) {
-  const n = a.trim();
-  return n ? Ee.some((s) => s.items.some((d) => d.name === n)) : !1;
+function Tr(n) {
+  const a = n.trim();
+  return a ? Ve.some((s) => s.items.some((d) => d.name === a)) : !1;
 }
-function Cr(a, n) {
-  const s = a.trim();
-  return n === "user" && s === at ? `<a href="{{${at}}}">Unsubscribe Link</a>` : mt(s, n);
+function Cr(n, a) {
+  const s = n.trim();
+  return a === "user" && s === nt ? `<a href="{{${nt}}}">Unsubscribe Link</a>` : mt(s, a);
 }
-function we(a, n, s) {
-  return `html-${a}-${n}-${s + 1}`;
+function He(n, a, s) {
+  return `html-${n}-${a}-${s + 1}`;
 }
-function wr(a, n, s) {
-  return `html-${a}-${n}-at-${s}`;
+function wr(n, a, s) {
+  return `html-${n}-${a}-at-${s}`;
 }
-const Hr = L(cr), Sr = L(dr), Mr = L(ur), Dr = L(mr), Lr = L(hr), kr = L(br), Br = L(pr), Ar = L(fr), Fr = L(xr), Ce = {
+const Hr = k(cr), Sr = k(dr), Mr = k(ur), Dr = k(mr), Lr = k(hr), kr = k(br), Br = k(pr), Ar = k(fr), Fr = k(xr), we = {
   // 浅色主题
   xcodeLight: Jt,
   vscodeLight: Xt,
@@ -179,207 +179,214 @@ const Hr = L(cr), Sr = L(dr), Mr = L(ur), Dr = L(mr), Lr = L(hr), kr = L(br), Br
   tomorrowNightBlue: "Tomorrow Night Blue (Dark)",
   xcodeDark: "Xcode Dark (Dark)"
 }, ht = "html-editor-theme", ct = "dracula";
-function Nr(a = ct) {
-  const n = a && Ce[a] ? a : ct;
-  if (typeof window > "u") return n;
+function Nr(n = ct) {
+  const a = n && we[n] ? n : ct;
+  if (typeof window > "u") return a;
   try {
     const s = localStorage.getItem(ht);
-    if (s && Ce[s]) return s;
+    if (s && we[s]) return s;
   } catch {
     console.error("Failed to get HTML Editor stored theme");
   }
-  return n;
+  return a;
 }
-function zr(a) {
+function zr(n) {
   try {
-    localStorage.setItem(ht, a);
+    localStorage.setItem(ht, n);
   } catch {
-    console.error("Failed to set HTML Editor stored theme", a);
+    console.error("Failed to set HTML Editor stored theme", n);
   }
 }
 function Or({
-  value: a,
-  onChange: n,
+  value: n,
+  onChange: a,
   language: s = "zh",
   initialMode: d = "split",
   initialDevice: c = "desktop",
   codeEditorHeight: x = "100%",
   previewHeight: i = "100%",
-  sx: u,
+  sx: h,
   showToolbar: p = !0,
-  initialTheme: w,
+  initialTheme: H,
   initialRightTab: N = "preview",
   variables: g,
-  onVariablesChange: F,
+  onVariablesChange: R,
   requireVariableDefaults: z = !0
-}, Z) {
+}, ee) {
   var Re, $e, Ne, ze, Oe, Pe, _e, We, je, Ge, Ue, qe, Ye, Ke, Xe, Je, Qe, Ze;
-  const l = (e, t) => yr(e, t, s), [H, pt] = E(d), [O, ft] = E(c), [He, xt] = E(() => Nr(w)), [T, ue] = E(a), [ee, P] = E(N), [C, Se] = E(() => it(g)), [gt, vt] = E(!1), [yt, It] = E(null), [_, Me] = E(""), [W, De] = E(""), [me, te] = E(!1), [he, re] = E(!1), U = $(null), be = $(null), R = $(C), Le = $(null), ke = $(null), pe = $(!1), oe = $(null);
-  X(() => {
-    a !== T && ue(a);
-  }, [a]), X(() => {
+  const l = (e, t) => yr(e, t, s), [S, pt] = V(d), [O, ft] = V(c), [Se, xt] = V(() => Nr(H)), [E, me] = V(n), [te, P] = V(N), [w, he] = V(() => it(g)), [gt, vt] = V(!1), [yt, It] = V(null), [_, Me] = V(""), [W, De] = V(""), [be, re] = V(!1), [pe, oe] = V(!1), q = $(null), fe = $(null), T = $(w), Le = $(null), ke = $(null), xe = $(!1), ne = $(null);
+  G(() => {
+    n !== E && me(n);
+  }, [n]), G(() => {
     if (g === void 0) return;
     const e = it(g);
-    R.current = e, Se(e);
-  }, [g]);
-  const k = D(
+    T.current = e, he(e);
+  }, [g]), G(() => {
+    if (g !== void 0) return;
+    const e = Z(E), t = ue(e, T.current);
+    (t.length !== T.current.length || t.some((u, v) => {
+      const m = T.current[v];
+      return !m || m.variableInstanceId !== u.variableInstanceId || m.attribute !== u.attribute || m.type !== u.type || m.default !== u.default;
+    })) && (T.current = t, he(t));
+  }, [E, g]);
+  const B = L(
     (e) => {
-      const t = e.map((r, h) => ({
+      const t = e.map((r, u) => ({
         ...r,
-        id: h + 1,
+        id: u + 1,
         default: r.type === "system" ? "" : r.default ?? ""
       }));
-      return R.current = t, Se(t), F == null || F(t), t;
+      return T.current = t, he(t), R == null || R(t), t;
     },
-    [F]
-  ), S = D(() => {
+    [R]
+  ), M = L(() => {
     var t, r;
-    const e = (r = (t = be.current) == null ? void 0 : t.state) == null ? void 0 : r.doc;
-    return e && typeof e.toString == "function" ? e.toString() : T;
-  }, [T]), fe = (e) => {
-    ue(e), U.current && clearTimeout(U.current), U.current = setTimeout(() => {
-      n == null || n(e);
+    const e = (r = (t = fe.current) == null ? void 0 : t.state) == null ? void 0 : r.doc;
+    return e && typeof e.toString == "function" ? e.toString() : E;
+  }, [E]), ge = (e) => {
+    me(e), q.current && clearTimeout(q.current), q.current = setTimeout(() => {
+      a == null || a(e);
     }, 300);
-  }, q = D(
+  }, Y = L(
     (e) => {
-      const t = de(e ?? S()), r = Ie(t, R.current);
-      return k(r);
+      const t = Z(e ?? M()), r = ue(t, T.current);
+      return B(r);
     },
-    [S, k]
-  ), ae = D(() => {
-    const e = S();
-    e !== T && ue(e);
-    const t = q(e), r = z ? t.filter((h) => h.type === "user" && h.default.trim() === "") : [];
+    [M, B]
+  ), ae = L(() => {
+    const e = M();
+    e !== E && me(e);
+    const t = Y(e), r = z ? t.filter((u) => u.type === "user" && u.default.trim() === "") : [];
     return vt(r.length > 0), r.length > 0 && P("variables"), {
       valid: r.length === 0,
       variables: t,
       missing: r
     };
-  }, [S, T, z, q]), Et = D(() => {
-    pe.current = !0, ae(), P("variables");
+  }, [M, E, z, Y]), Et = L(() => {
+    xe.current = !0, ae(), P("variables");
   }, [ae]);
-  X(() => {
-    if (ee !== "variables" || !pe.current) return;
+  G(() => {
+    if (te !== "variables" || !xe.current) return;
     const e = window.requestAnimationFrame(() => {
       const t = Le.current, r = ke.current;
       t && r && t.scrollTo({
         top: Math.max(r.offsetTop - 8, 0),
         behavior: "auto"
-      }), pe.current = !1;
+      }), xe.current = !1;
     });
     return () => window.cancelAnimationFrame(e);
-  }, [ee, C.length]), X(() => () => {
-    U.current && clearTimeout(U.current);
+  }, [te, w.length]), G(() => () => {
+    q.current && clearTimeout(q.current);
   }, []);
   const Vt = (e) => {
-    var y, I, Y;
+    var y, I, K;
     const t = e || "";
     let r = t;
     if (!t.trim())
       r = "<!DOCTYPE html><html><head></head><body></body></html>";
     else {
-      const M = new DOMParser().parseFromString(t, "text/html"), ge = ((y = M.documentElement) == null ? void 0 : y.tagName.toLowerCase()) === "html", Ft = ((I = M.head) == null ? void 0 : I.tagName.toLowerCase()) === "head", Rt = ((Y = M.body) == null ? void 0 : Y.tagName.toLowerCase()) === "body";
-      if (!ge || !Ft || !Rt) {
-        const $t = M.body ? M.body.innerHTML : t;
-        r = `<!DOCTYPE html><html><head>${M.head ? M.head.innerHTML : ""}</head><body>${$t}</body></html>`;
+      const D = new DOMParser().parseFromString(t, "text/html"), ye = ((y = D.documentElement) == null ? void 0 : y.tagName.toLowerCase()) === "html", Ft = ((I = D.head) == null ? void 0 : I.tagName.toLowerCase()) === "head", Rt = ((K = D.body) == null ? void 0 : K.tagName.toLowerCase()) === "body";
+      if (!ye || !Ft || !Rt) {
+        const $t = D.body ? D.body.innerHTML : t;
+        r = `<!DOCTYPE html><html><head>${D.head ? D.head.innerHTML : ""}</head><body>${$t}</body></html>`;
       } else
-        r = `<!DOCTYPE html>${M.documentElement.outerHTML}`;
+        r = `<!DOCTYPE html>${D.documentElement.outerHTML}`;
     }
-    const h = ["script", "iframe", "object", "embed", "canvas"], b = new DOMParser().parseFromString(r, "text/html");
-    return h.forEach((K) => {
-      b.querySelectorAll(K).forEach((ge) => ge.remove());
-    }), r = `<!DOCTYPE html>${b.documentElement.outerHTML}`, r;
+    const u = ["script", "iframe", "object", "embed", "canvas"], m = new DOMParser().parseFromString(r, "text/html");
+    return u.forEach((X) => {
+      m.querySelectorAll(X).forEach((ye) => ye.remove());
+    }), r = `<!DOCTYPE html>${m.documentElement.outerHTML}`, r;
   }, Be = J(
-    () => lt(T, C),
-    [C, T]
-  ), ne = J(() => Vt(Be), [Be]);
+    () => lt(E, w),
+    [w, E]
+  ), ie = J(() => Vt(Be), [Be]);
   zt(
-    Z,
+    ee,
     () => ({
-      getValue: () => S(),
-      getPreviewHtml: () => lt(S(), R.current),
-      scanVariables: () => q(S()),
+      getValue: () => M(),
+      getPreviewHtml: () => lt(M(), T.current),
+      scanVariables: () => Y(M()),
       getVariables: (e) => {
-        const t = q(S());
+        const t = Y(M());
         return e == null || e(t), t;
       },
       validateVariables: ae,
       showVariables: () => P("variables")
     }),
-    [S, q, ae]
-  ), X(() => {
-    oe.current && oe.current.srcdoc !== ne && (oe.current.srcdoc = ne);
-  }, [ne]);
+    [M, Y, ae]
+  ), G(() => {
+    ne.current && ne.current.srcdoc !== ie && (ne.current.srcdoc = ie);
+  }, [ie]);
   const Tt = (e, t) => {
     t !== null && pt(t);
   }, Ct = (e, t) => {
     (t === "desktop" || t === "mobile") && ft(t);
-  }, ie = D(
+  }, le = L(
     (e) => {
-      var h, v;
-      const t = be.current;
+      var u, v;
+      const t = fe.current;
       if (t != null && t.state && (t != null && t.dispatch)) {
-        const b = (h = t.state.selection) == null ? void 0 : h.main, y = t.state.doc.toString(), I = (b == null ? void 0 : b.from) ?? t.state.doc.length, Y = (b == null ? void 0 : b.to) ?? I, K = `${y.slice(0, I)}${e}${y.slice(Y)}`;
+        const m = (u = t.state.selection) == null ? void 0 : u.main, y = t.state.doc.toString(), I = (m == null ? void 0 : m.from) ?? t.state.doc.length, K = (m == null ? void 0 : m.to) ?? I, X = `${y.slice(0, I)}${e}${y.slice(K)}`;
         return t.dispatch({
-          changes: { from: I, to: Y, insert: e },
+          changes: { from: I, to: K, insert: e },
           selection: { anchor: I + e.length }
-        }), (v = t.focus) == null || v.call(t), fe(K), K;
+        }), (v = t.focus) == null || v.call(t), ge(X), X;
       }
-      const r = `${T}${e}`;
-      return fe(r), r;
+      const r = `${E}${e}`;
+      return ge(r), r;
     },
-    [T]
-  ), wt = D(
+    [E]
+  ), wt = L(
     (e, t) => {
-      const r = R.current;
-      k(
+      const r = T.current;
+      B(
         r.map(
-          (h) => h.variableInstanceId === e ? { ...h, default: t } : h
+          (u) => u.variableInstanceId === e ? { ...u, default: t } : u
         )
       );
     },
-    [k]
-  ), Ht = D(
+    [B]
+  ), Ht = L(
     (e, t) => {
       if (!st(e, t)) return;
-      const h = ie(Cr(e, t)), v = de(h), b = Ie(v, R.current);
-      k(b), P("variables");
+      const u = le(Cr(e, t)), v = Z(u), m = ue(v, T.current);
+      B(m), P("variables");
     },
-    [ie, k]
-  ), le = J(() => {
+    [le, B]
+  ), se = J(() => {
     const e = _.trim();
-    return e ? A.test(e) ? Tr(e) || C.some((t) => t.type === "user" && t.attribute === e) ? l("text.variables.customVariableNameDuplicate") : "" : l("text.variables.customVariableNameInvalid") : l("text.variables.customVariableNameRequired");
-  }, [_, C]), St = D(() => {
+    return e ? F.test(e) ? Tr(e) || w.some((t) => t.type === "user" && t.attribute === e) ? l("text.variables.customVariableNameDuplicate") : "" : l("text.variables.customVariableNameInvalid") : l("text.variables.customVariableNameRequired");
+  }, [_, w]), St = L(() => {
     const e = W.trim();
-    if (te(!0), re(!0), le || e === "") return;
+    if (re(!0), oe(!0), se || e === "") return;
     const t = st(_.trim(), "user", e);
     if (!t) return;
-    const r = ie(t.variable), h = de(r), v = Ie(h, R.current);
-    let b = -1;
+    const r = le(t.variable), u = Z(r), v = ue(u, T.current);
+    let m = -1;
     for (let y = v.length - 1; y >= 0; y -= 1) {
       const I = v[y];
       if (I.type === t.type && I.attribute === t.attribute && I.default === "") {
-        b = y;
+        m = y;
         break;
       }
     }
-    k(
+    B(
       v.map(
-        (y, I) => I === b ? { ...y, default: t.default } : y
+        (y, I) => I === m ? { ...y, default: t.default } : y
       )
-    ), Me(""), De(""), te(!1), re(!1), P("variables");
-  }, [W, _, le, ie, k]), Mt = J(() => {
+    ), Me(""), De(""), re(!1), oe(!1), P("variables");
+  }, [W, _, se, le, B]), Mt = J(() => {
     const e = /* @__PURE__ */ new Set();
-    return [{ id: "custom", items: C.filter((r) => r.type === "user").filter((r) => !Ee.some((h) => h.items.some((v) => v.name === r.attribute))).filter((r) => e.has(r.attribute) ? !1 : (e.add(r.attribute), !0)).map((r) => ({
+    return [{ id: "custom", items: w.filter((r) => r.type === "user").filter((r) => !Ve.some((u) => u.items.some((v) => v.name === r.attribute))).filter((r) => e.has(r.attribute) ? !1 : (e.add(r.attribute), !0)).map((r) => ({
       name: r.attribute,
       labelKey: r.attribute,
       kind: "user"
-    })) }, ...Ee];
-  }, [C]), se = J(
-    () => C.filter((e) => e.type !== "system"),
-    [C]
-  ), Dt = (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", V = er(), Lt = O === "desktop" || O === "mobile" ? O : "desktop", kt = H === "split" || H === "code" || H === "preview" ? H : "split";
-  ($e = (Re = V.palette) == null ? void 0 : Re.action) == null || $e.selected, (ze = (Ne = V.palette) == null ? void 0 : Ne.primary) == null || ze.main, (Pe = (Oe = V.palette) == null ? void 0 : Oe.action) == null || Pe.selected, (We = (_e = V.palette) == null ? void 0 : _e.background) == null || We.paper, (Ge = (je = V.palette) == null ? void 0 : je.text) == null || Ge.primary, (qe = (Ue = V.palette) == null ? void 0 : Ue.action) == null || qe.hover;
+    })) }, ...Ve];
+  }, [w]), ce = J(
+    () => w.filter((e) => e.type !== "system"),
+    [w]
+  ), Dt = (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", C = er(), Lt = O === "desktop" || O === "mobile" ? O : "desktop", kt = S === "split" || S === "code" || S === "preview" ? S : "split";
+  ($e = (Re = C.palette) == null ? void 0 : Re.action) == null || $e.selected, (ze = (Ne = C.palette) == null ? void 0 : Ne.primary) == null || ze.main, (Pe = (Oe = C.palette) == null ? void 0 : Oe.action) == null || Pe.selected, (We = (_e = C.palette) == null ? void 0 : _e.background) == null || We.paper, (Ge = (je = C.palette) == null ? void 0 : je.text) == null || Ge.primary, (qe = (Ue = C.palette) == null ? void 0 : Ue.action) == null || qe.hover;
   const j = {
     tooltip: {
       sx: {
@@ -387,14 +394,14 @@ function Or({
         fontWeight: 400,
         lineHeight: 1.45,
         maxWidth: 360,
-        backgroundColor: ce(((Ke = (Ye = V.palette) == null ? void 0 : Ye.text) == null ? void 0 : Ke.primary) ?? "#1F1F21", 0.9),
-        color: ((Je = (Xe = V.palette) == null ? void 0 : Xe.common) == null ? void 0 : Je.white) ?? "#fff"
+        backgroundColor: de(((Ke = (Ye = C.palette) == null ? void 0 : Ye.text) == null ? void 0 : Ke.primary) ?? "#1F1F21", 0.9),
+        color: ((Je = (Xe = C.palette) == null ? void 0 : Xe.common) == null ? void 0 : Je.white) ?? "#fff"
       }
     },
     arrow: {
-      sx: { color: ce(((Ze = (Qe = V.palette) == null ? void 0 : Qe.text) == null ? void 0 : Ze.primary) ?? "#1F1F21", 0.9) }
+      sx: { color: de(((Ze = (Qe = C.palette) == null ? void 0 : Qe.text) == null ? void 0 : Ze.primary) ?? "#1F1F21", 0.9) }
     }
-  }, xe = {
+  }, ve = {
     component: "div",
     sx: {
       mt: 0.5,
@@ -403,7 +410,7 @@ function Or({
       lineHeight: 1.5
     }
   }, Ae = () => /* @__PURE__ */ f(
-    m,
+    b,
     {
       sx: {
         height: x,
@@ -411,12 +418,12 @@ function Or({
         display: "flex",
         flexDirection: "column",
         position: "relative",
-        borderRight: H === "split" ? "1px solid" : "none",
+        borderRight: S === "split" ? "1px solid" : "none",
         borderColor: "divider"
       },
       children: [
         /* @__PURE__ */ o(
-          m,
+          b,
           {
             sx: {
               flex: 1,
@@ -449,13 +456,13 @@ function Or({
             children: /* @__PURE__ */ o(
               Ot,
               {
-                value: T,
+                value: E,
                 height: "100%",
                 extensions: [Pt()],
-                theme: Ce[He] || ut,
-                onChange: fe,
+                theme: we[Se] || ut,
+                onChange: ge,
                 onCreateEditor: (e) => {
-                  be.current = e;
+                  fe.current = e;
                 },
                 basicSetup: {
                   lineNumbers: !0,
@@ -468,7 +475,7 @@ function Or({
           }
         ),
         /* @__PURE__ */ o(
-          ve,
+          Ie,
           {
             size: "small",
             variant: "contained",
@@ -487,7 +494,7 @@ function Or({
         )
       ]
     }
-  ), Bt = () => /* @__PURE__ */ o(m, { sx: {
+  ), Bt = () => /* @__PURE__ */ o(b, { sx: {
     height: i,
     overflow: "auto",
     backgroundColor: "#F5F5F5",
@@ -495,7 +502,7 @@ function Or({
     display: "flex",
     justifyContent: "center"
   }, children: /* @__PURE__ */ o(
-    m,
+    b,
     {
       sx: {
         width: "100%",
@@ -507,8 +514,8 @@ function Or({
       children: /* @__PURE__ */ o(
         "iframe",
         {
-          ref: oe,
-          srcDoc: ne,
+          ref: ne,
+          srcDoc: ie,
           style: {
             width: "100%",
             height: "100%",
@@ -521,7 +528,7 @@ function Or({
       )
     }
   ) }), At = () => /* @__PURE__ */ f(
-    m,
+    b,
     {
       ref: Le,
       sx: {
@@ -535,23 +542,23 @@ function Or({
         pb: 6
       },
       children: [
-        /* @__PURE__ */ o(m, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ f(m, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ f(m, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
-            /* @__PURE__ */ o(B, { variant: "subtitle1", sx: { fontWeight: 700 }, children: l("htmlEditor.variables.title") }),
-            /* @__PURE__ */ o(G, { title: l("htmlEditor.variables.help"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(m, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ o(Lr, { fontSize: "small" }) }) })
+        /* @__PURE__ */ o(b, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ f(b, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ f(b, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ o(A, { variant: "subtitle1", sx: { fontWeight: 700 }, children: l("htmlEditor.variables.title") }),
+            /* @__PURE__ */ o(U, { title: l("htmlEditor.variables.help"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(b, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ o(Lr, { fontSize: "small" }) }) })
           ] }),
-          /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.secondary", children: l("htmlEditor.variables.scanHint") })
+          /* @__PURE__ */ o(A, { component: "div", variant: "body2", color: "text.secondary", children: l("htmlEditor.variables.scanHint") })
         ] }) }),
-        /* @__PURE__ */ o(m, { sx: { mb: 2 }, children: Mt.map((e) => {
+        /* @__PURE__ */ o(b, { sx: { mb: 2 }, children: Mt.map((e) => {
           const t = yt === e.id;
           return /* @__PURE__ */ f(
-            nr,
+            ar,
             {
               disableGutters: !0,
               square: !0,
               elevation: 0,
               expanded: t,
-              onChange: (r, h) => It(h ? e.id : null),
+              onChange: (r, u) => It(u ? e.id : null),
               sx: {
                 "&:before": { display: "none" },
                 border: 1,
@@ -569,13 +576,13 @@ function Or({
                       minHeight: 44,
                       "& .MuiAccordionSummary-content": { my: 1 }
                     },
-                    children: /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.primary", children: l(Dt(e.id)) })
+                    children: /* @__PURE__ */ o(A, { component: "div", variant: "body2", color: "text.primary", children: l(Dt(e.id)) })
                   }
                 ),
                 /* @__PURE__ */ f(lr, { sx: { pt: 0, pb: 1.25 }, children: [
-                  e.id === "custom" && /* @__PURE__ */ f(m, { sx: { mb: 1 }, children: [
+                  e.id === "custom" && /* @__PURE__ */ f(b, { sx: { mb: 1 }, children: [
                     /* @__PURE__ */ o(
-                      ye,
+                      Ee,
                       {
                         size: "small",
                         fullWidth: !0,
@@ -583,19 +590,19 @@ function Or({
                         value: _,
                         placeholder: "e.g. order_id",
                         onChange: (r) => {
-                          Me(r.target.value), !me && r.target.value.trim() !== "" && te(!0);
+                          Me(r.target.value), !be && r.target.value.trim() !== "" && re(!0);
                         },
                         onBlur: () => {
-                          _.trim() !== "" && te(!0);
+                          _.trim() !== "" && re(!0);
                         },
-                        error: me && !!le,
-                        helperText: me && le || " ",
-                        FormHelperTextProps: xe,
+                        error: be && !!se,
+                        helperText: be && se || " ",
+                        FormHelperTextProps: ve,
                         sx: { mb: 1 }
                       }
                     ),
                     /* @__PURE__ */ o(
-                      ye,
+                      Ee,
                       {
                         size: "small",
                         fullWidth: !0,
@@ -603,18 +610,18 @@ function Or({
                         value: W,
                         placeholder: l("text.variables.defaultPlaceholder"),
                         onChange: (r) => {
-                          De(r.target.value), !he && r.target.value.trim() !== "" && re(!0);
+                          De(r.target.value), !pe && r.target.value.trim() !== "" && oe(!0);
                         },
                         onBlur: () => {
-                          W.trim() !== "" && re(!0);
+                          W.trim() !== "" && oe(!0);
                         },
-                        error: he && W.trim() === "",
-                        helperText: he && W.trim() === "" ? l("text.variables.defaultRequired") : " ",
-                        FormHelperTextProps: xe
+                        error: pe && W.trim() === "",
+                        helperText: pe && W.trim() === "" ? l("text.variables.defaultRequired") : " ",
+                        FormHelperTextProps: ve
                       }
                     ),
                     /* @__PURE__ */ o(
-                      ve,
+                      Ie,
                       {
                         fullWidth: !0,
                         size: "small",
@@ -632,8 +639,8 @@ function Or({
                       }
                     )
                   ] }),
-                  e.items.length > 0 && /* @__PURE__ */ o(m, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((r) => /* @__PURE__ */ o(
-                    ve,
+                  e.items.length > 0 && /* @__PURE__ */ o(b, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((r) => /* @__PURE__ */ o(
+                    Ie,
                     {
                       size: "small",
                       variant: "outlined",
@@ -644,10 +651,10 @@ function Or({
                         color: "text.secondary",
                         textTransform: "none"
                       },
-                      children: /* @__PURE__ */ f(m, { sx: { textAlign: "left", minWidth: 0 }, children: [
-                        /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.primary", children: e.id === "custom" ? r.name : l(r.labelKey) }),
+                      children: /* @__PURE__ */ f(b, { sx: { textAlign: "left", minWidth: 0 }, children: [
+                        /* @__PURE__ */ o(A, { component: "div", variant: "body2", color: "text.primary", children: e.id === "custom" ? r.name : l(r.labelKey) }),
                         /* @__PURE__ */ o(
-                          B,
+                          A,
                           {
                             component: "div",
                             variant: "caption",
@@ -667,10 +674,10 @@ function Or({
           );
         }) }),
         /* @__PURE__ */ o(sr, { sx: { my: 2 } }),
-        /* @__PURE__ */ o(B, { component: "div", ref: ke, variant: "subtitle2", sx: { mb: 0.5 }, children: l("htmlEditor.variables.detected") }),
-        /* @__PURE__ */ o(B, { component: "div", variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: l("htmlEditor.variables.defaultHelp") }),
-        se.length === 0 ? /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ o(A, { component: "div", ref: ke, variant: "subtitle2", sx: { mb: 0.5 }, children: l("htmlEditor.variables.detected") }),
+        /* @__PURE__ */ o(A, { component: "div", variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: l("htmlEditor.variables.defaultHelp") }),
+        ce.length === 0 ? /* @__PURE__ */ o(
+          b,
           {
             sx: {
               border: "1px dashed",
@@ -683,10 +690,10 @@ function Or({
             },
             children: l("htmlEditor.variables.empty")
           }
-        ) : /* @__PURE__ */ o(m, { sx: { display: "grid", gap: 0.25 }, children: se.map((e, t) => {
-          const r = gt && e.type === "user" && e.default.trim() === "", h = se.filter((b) => b.type === e.type && b.attribute === e.attribute).length, v = se.slice(0, t + 1).filter((b) => b.type === e.type && b.attribute === e.attribute).length;
+        ) : /* @__PURE__ */ o(b, { sx: { display: "grid", gap: 0.25 }, children: ce.map((e, t) => {
+          const r = gt && e.type === "user" && e.default.trim() === "", u = ce.filter((m) => m.type === e.type && m.attribute === e.attribute).length, v = ce.slice(0, t + 1).filter((m) => m.type === e.type && m.attribute === e.attribute).length;
           return /* @__PURE__ */ f(
-            m,
+            b,
             {
               sx: {
                 display: "grid",
@@ -699,16 +706,16 @@ function Or({
                 borderColor: r ? "error.main" : "transparent",
                 borderRadius: 1,
                 borderBottomColor: r ? "error.main" : "divider",
-                backgroundColor: r ? ce(V.palette.error.main, 0.04) : "transparent",
+                backgroundColor: r ? de(C.palette.error.main, 0.04) : "transparent",
                 transition: "background-color 120ms ease, border-color 120ms ease",
                 "&:hover": {
-                  backgroundColor: r ? ce(V.palette.error.main, 0.04) : "action.hover",
+                  backgroundColor: r ? de(C.palette.error.main, 0.04) : "action.hover",
                   borderColor: r ? "error.main" : "divider"
                 }
               },
               children: [
                 /* @__PURE__ */ o(
-                  B,
+                  A,
                   {
                     component: "div",
                     variant: "body2",
@@ -719,11 +726,11 @@ function Or({
                       wordBreak: "break-all",
                       color: r ? "error.main" : "text.primary"
                     },
-                    children: h > 1 ? `${e.variable} (${v})` : e.variable
+                    children: u > 1 ? `${e.variable} (${v})` : e.variable
                   }
                 ),
                 /* @__PURE__ */ o(
-                  ye,
+                  Ee,
                   {
                     size: "small",
                     fullWidth: !0,
@@ -733,8 +740,8 @@ function Or({
                     placeholder: e.type === "system" ? l("htmlEditor.variables.systemDefault") : l("text.variables.defaultPlaceholder"),
                     error: r,
                     helperText: r ? l("text.variables.defaultRequired") : void 0,
-                    FormHelperTextProps: xe,
-                    onChange: (b) => wt(e.variableInstanceId, b.target.value),
+                    FormHelperTextProps: ve,
+                    onChange: (m) => wt(e.variableInstanceId, m.target.value),
                     sx: {
                       "& .MuiInputBase-input": {
                         py: 0.75,
@@ -750,11 +757,11 @@ function Or({
         }) })
       ]
     }
-  ), Fe = () => /* @__PURE__ */ f(m, { sx: { height: i, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+  ), Fe = () => /* @__PURE__ */ f(b, { sx: { height: i, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ f(
-      ar,
+      nr,
       {
-        value: ee,
+        value: te,
         onChange: (e, t) => P(t),
         sx: {
           minHeight: 40,
@@ -772,10 +779,10 @@ function Or({
         ]
       }
     ),
-    /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: ee === "preview" ? Bt() : At() })
+    /* @__PURE__ */ o(b, { sx: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: te === "preview" ? Bt() : At() })
   ] });
   return /* @__PURE__ */ f(
-    m,
+    b,
     {
       sx: {
         display: "flex",
@@ -784,11 +791,11 @@ function Or({
         width: "100%",
         minHeight: 0,
         minWidth: 0,
-        ...u
+        ...h
       },
       children: [
         p && /* @__PURE__ */ f(
-          m,
+          b,
           {
             sx: {
               display: "flex",
@@ -800,7 +807,7 @@ function Or({
               backgroundColor: "background.paper"
             },
             children: [
-              /* @__PURE__ */ f(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ f(b, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 /* @__PURE__ */ f(
                   et,
                   {
@@ -810,7 +817,7 @@ function Or({
                     size: "small",
                     "aria-label": l("htmlEditor.mode.split"),
                     children: [
-                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                      /* @__PURE__ */ o(U, { title: l("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
                         Q,
                         {
                           value: "split",
@@ -818,7 +825,7 @@ function Or({
                           children: /* @__PURE__ */ o(Br, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                      /* @__PURE__ */ o(U, { title: l("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
                         Q,
                         {
                           value: "code",
@@ -826,7 +833,7 @@ function Or({
                           children: /* @__PURE__ */ o(Sr, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                      /* @__PURE__ */ o(U, { title: l("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
                         Q,
                         {
                           value: "preview",
@@ -844,7 +851,7 @@ function Or({
                     {
                       labelId: "theme-select-label",
                       id: "theme-select",
-                      value: He,
+                      value: Se,
                       label: l("htmlEditor.theme"),
                       onChange: (e) => {
                         const t = e.target.value;
@@ -866,7 +873,7 @@ function Or({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ o(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: H !== "code" && /* @__PURE__ */ f(
+              /* @__PURE__ */ o(b, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: S !== "code" && /* @__PURE__ */ f(
                 et,
                 {
                   value: Lt,
@@ -875,7 +882,7 @@ function Or({
                   size: "small",
                   "aria-label": l("htmlEditor.device.desktop"),
                   children: [
-                    /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                    /* @__PURE__ */ o(U, { title: l("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
                       Q,
                       {
                         value: "desktop",
@@ -883,7 +890,7 @@ function Or({
                         children: /* @__PURE__ */ o(Ar, { fontSize: "small" })
                       }
                     ) }),
-                    /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                    /* @__PURE__ */ o(U, { title: l("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
                       Q,
                       {
                         value: "mobile",
@@ -898,7 +905,7 @@ function Or({
           }
         ),
         /* @__PURE__ */ f(
-          m,
+          b,
           {
             sx: {
               flex: 1,
@@ -908,12 +915,12 @@ function Or({
               overflow: "hidden"
             },
             children: [
-              H === "split" && /* @__PURE__ */ f(Nt, { children: [
-                /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
-                /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
+              S === "split" && /* @__PURE__ */ f(Nt, { children: [
+                /* @__PURE__ */ o(b, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
+                /* @__PURE__ */ o(b, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
               ] }),
-              H === "code" && /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
-              H === "preview" && /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
+              S === "code" && /* @__PURE__ */ o(b, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
+              S === "preview" && /* @__PURE__ */ o(b, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
             ]
           }
         )
@@ -923,7 +930,7 @@ function Or({
 }
 const bt = dt(Or);
 bt.displayName = "HtmlEditorContent";
-const Pr = dt((a, n) => /* @__PURE__ */ o(Qt, { theme: vr, children: /* @__PURE__ */ o(
+const Pr = dt((n, a) => /* @__PURE__ */ o(Qt, { theme: vr, children: /* @__PURE__ */ o(
   Zt,
   {
     sx: {
@@ -934,7 +941,7 @@ const Pr = dt((a, n) => /* @__PURE__ */ o(Qt, { theme: vr, children: /* @__PURE_
       display: "flex",
       flexDirection: "column"
     },
-    children: /* @__PURE__ */ o(bt, { ref: n, ...a })
+    children: /* @__PURE__ */ o(bt, { ref: a, ...n })
   }
 ) }));
 Pr.displayName = "HtmlEditor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monto-email-builder",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A powerful and customizable email template builder React component library with visual editing, internationalization, and image upload support",
   "keywords": [
     "email",