monto-email-builder 1.4.7 → 1.4.8

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;AAWtC,OAAO,EAUL,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;AA4+BD,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;AAWtC,OAAO,EAUL,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;AA6/BD,QAAA,MAAM,mBAAmB,uFAevB,CAAC;AAGH,eAAe,mBAAmB,CAAC"}

package/dist/html-editor.js

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

package/package.json

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