@templatical/editor 0.34.2 → 0.35.0

package/dist/cdn/chunks/{src-CX_VHu8r.js → src-BC-eolWY.js}

@@ -1,10 +1,10 @@
-import { $ as e, G as t, H as n, J as r, K as i, Q as a, U as o, W as s, X as c, Y as l, Z as u, et as d, nt as f, q as p, rt as m, v as h, y as g } from "./src-CLoCCDfs.js";
+import { $ as e, G as t, J as n, K as r, Q as i, R as a, U as o, W as s, X as c, Y as l, Z as u, et as d, it as f, q as p, rt as m, tt as h, v as g, y as _ } from "./src-Dwgq7hf4.js";
 //#endregion
 //#region ../renderer/src/render-context.ts
-var _ = `https://cdn.jsdelivr.net/npm/@templatical/renderer@${{
+var v = `https://cdn.jsdelivr.net/npm/@templatical/renderer@${{
 	name: "@templatical/renderer",
 	description: "Render Templatical email templates to MJML",
-	version: "0.34.2",
+	version: "0.35.0",
 	bugs: "https://github.com/templatical/sdk/issues",
 	dependencies: { "@templatical/types": "workspace:*" },
 	devDependencies: {
@@ -42,7 +42,7 @@ var _ = `https://cdn.jsdelivr.net/npm/@templatical/renderer@${{
 	},
 	type: "module",
 	types: "./dist/index.d.ts"
-}.version}/assets/social`, v = {
+}.version}/assets/social`, y = {
 	arial: "Arial, sans-serif",
 	helvetica: "Helvetica, sans-serif",
 	georgia: "Georgia, serif",
@@ -51,7 +51,7 @@ var _ = `https://cdn.jsdelivr.net/npm/@templatical/renderer@${{
 	"trebuchet ms": "'Trebuchet MS', sans-serif",
 	"courier new": "'Courier New', monospace",
 	tahoma: "Tahoma, sans-serif"
-}, y = class e {
+}, b = class e {
 	containerWidth;
 	customFonts;
 	defaultFallbackFont;
@@ -59,31 +59,32 @@ var _ = `https://cdn.jsdelivr.net/npm/@templatical/renderer@${{
 	customBlockHtml;
 	socialIconsBaseUrl;
 	blockRenderers;
-	constructor(e, t, n, r, i = /* @__PURE__ */ new Map(), a = _, o = {}) {
-		this.containerWidth = e, this.customFonts = t, this.defaultFallbackFont = n, this.allowHtmlBlocks = r, this.customBlockHtml = i, this.socialIconsBaseUrl = a, this.blockRenderers = o;
+	contentDirection;
+	constructor(e, t, n, r, i = /* @__PURE__ */ new Map(), a = v, o = {}, s = "ltr") {
+		this.containerWidth = e, this.customFonts = t, this.defaultFallbackFont = n, this.allowHtmlBlocks = r, this.customBlockHtml = i, this.socialIconsBaseUrl = a, this.blockRenderers = o, this.contentDirection = s;
 	}
 	withContainerWidth(t) {
-		return new e(t, this.customFonts, this.defaultFallbackFont, this.allowHtmlBlocks, this.customBlockHtml, this.socialIconsBaseUrl, this.blockRenderers);
+		return new e(t, this.customFonts, this.defaultFallbackFont, this.allowHtmlBlocks, this.customBlockHtml, this.socialIconsBaseUrl, this.blockRenderers, this.contentDirection);
 	}
 	resolveFontFamily(e) {
 		for (let t of this.customFonts) if (t.name.toLowerCase() === e.toLowerCase()) {
 			let e = t.fallback ?? this.defaultFallbackFont;
 			return `'${t.name}', ${e}`;
 		}
-		return v[e.toLowerCase()] || e;
+		return y[e.toLowerCase()] || e;
 	}
 };
 //#endregion
 //#region ../renderer/src/visibility.ts
-function b(e) {
+function x(e) {
 	let t = e.visibility;
 	return t ? !t.desktop && !t.mobile : !1;
 }
-function x(e, t = []) {
-	let n = [S(e), ...t].filter((e) => e !== "").join(" ");
+function S(e, t = []) {
+	let n = [C(e), ...t].filter((e) => e !== "").join(" ");
 	return n === "" ? "" : ` css-class="${n}"`;
 }
-function S(e) {
+function C(e) {
 	let t = e.visibility;
 	if (!t) return "";
 	let n = [];
@@ -91,33 +92,33 @@ function S(e) {
 }
 //#endregion
 //#region ../renderer/src/unrenderable.ts
-var C = "templatical:unrenderable-block";
-function w(e) {
+var w = "templatical:unrenderable-block";
+function T(e) {
 	return e.replace(/[<>]/g, "").replace(/-{2,}/g, "-");
 }
-function T(e) {
-	return console.warn(`[Templatical] No renderer for block type "${e.type}" (id: ${e.id}). A placeholder comment was emitted in its place. Pass a \`blockRenderers\` entry for this type to render it.`), `<mj-raw><!-- ${C} type="${w(e.type)}" id="${w(e.id)}" --></mj-raw>`;
+function E(e) {
+	return console.warn(`[Templatical] No renderer for block type "${e.type}" (id: ${e.id}). A placeholder comment was emitted in its place. Pass a \`blockRenderers\` entry for this type to render it.`), `<mj-raw><!-- ${w} type="${T(e.type)}" id="${T(e.id)}" --></mj-raw>`;
 }
 //#endregion
 //#region ../renderer/src/escape.ts
-var E = {
+var D = {
 	"&": "&amp;",
 	"<": "&lt;",
 	">": "&gt;",
 	"\"": "&quot;",
 	"'": "&#039;"
-}, D = /[&<>"']/g;
-function O(e) {
-	return e === "" ? "" : e.replace(D, (e) => E[e] ?? e);
-}
+}, O = /[&<>"']/g;
 function k(e) {
-	return e === "" ? "" : e.replace(D, (e) => E[e] ?? e);
+	return e === "" ? "" : e.replace(O, (e) => D[e] ?? e);
 }
 function A(e) {
-	return e === "" ? "" : k(e).replace(/[;{}\r\n]/g, "");
+	return e === "" ? "" : e.replace(O, (e) => D[e] ?? e);
 }
 function j(e) {
-	return e === "" ? "" : ee(e, (e) => M(e, "data-merge-tag") ?? M(e, "data-logic-merge-tag"));
+	return e === "" ? "" : A(e).replace(/[;{}\r\n]/g, "");
+}
+function M(e) {
+	return e === "" ? "" : ee(e, (e) => N(e, "data-merge-tag") ?? N(e, "data-logic-merge-tag"));
 }
 function ee(e, t) {
 	let n = "", r = 0;
@@ -132,7 +133,7 @@ function ee(e, t) {
 			n += e.substring(r, i + 5), r = i + 5;
 			continue;
 		}
-		let o = h(e, i + 5);
+		let o = g(e, i + 5);
 		if (o === -1) {
 			n += e.substring(r);
 			break;
@@ -151,45 +152,45 @@ function ee(e, t) {
 	}
 	return n;
 }
-function M(e, t) {
-	return g(e, t);
+function N(e, t) {
+	return _(e, t);
 }
 //#endregion
 //#region ../renderer/src/padding.ts
-function N(e) {
+function P(e) {
 	return `${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`;
 }
 //#endregion
 //#region ../renderer/src/utils.ts
-function P(e, t) {
+function F(e, t) {
 	return e ? ` ${t === "native" ? "background-color" : "container-background-color"}="${e}"` : "";
 }
-function F(e) {
+function I(e) {
 	return typeof e != "number" || !Number.isFinite(e) || e <= 0 ? "" : ` height="${e}px"`;
 }
 //#endregion
 //#region ../renderer/src/rich-text.ts
-var I = "tpl-rich-text";
-function L(e) {
-	return `${I}-${e}`;
+var L = "tpl-rich-text";
+function R(e) {
+	return `${L}-${e}`;
 }
-function te(e) {
-	let t = m, n = `.${I}`;
+function te(e, t = "ltr") {
+	let n = f, r = `.${L}`, i = [...new Set(e)].sort((e, t) => e - t).flatMap((e) => {
+		let t = `.${R(e)}`;
+		return [`${t} p { margin: 0 0 ${e}px; }`, `${t} p:last-child { margin-bottom: 0; }`];
+	}), a = t === "rtl" ? "padding-right" : "padding-left";
 	return [
-		...[...new Set(e)].sort((e, t) => e - t).flatMap((e) => {
-			let t = `.${L(e)}`;
-			return [`${t} p { margin: 0 0 ${e}px; }`, `${t} p:last-child { margin-bottom: 0; }`];
-		}),
-		`${n} ul, ${n} ol { margin: ${t.listMarginY}px 0; padding-left: ${t.listPaddingLeft}px; }`,
-		`${n} li { margin: ${t.listItemMarginY}px 0; }`
+		...i,
+		`${r} ul, ${r} ol { margin: ${n.listMarginY}px 0; ${a}: ${n.listPaddingLeft}px; }`,
+		`${r} li { margin: ${n.listItemMarginY}px 0; }`
 	].join("\n      ");
 }
-function R(e) {
-	return e ?? m.paragraphGap;
+function z(e) {
+	return e ?? f.paragraphGap;
 }
 function ne(e) {
-	let t = [m.paragraphGap], n = (e) => {
-		if (e.type === "paragraph" && t.push(R(e.paragraphSpacing)), l(e)) for (let t of e.children) for (let e of t) n(e);
+	let t = [f.paragraphGap], n = (e) => {
+		if (e.type === "paragraph" && t.push(z(e.paragraphSpacing)), c(e)) for (let t of e.children) for (let e of t) n(e);
 	};
 	for (let t of e) n(t);
 	return t;
@@ -197,8 +198,8 @@ function ne(e) {
 //#endregion
 //#region ../renderer/src/renderers/title.ts
 function re(e, t) {
-	if (b(e)) return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = ie(j(e.content)), a = f[e.level] ?? f[2], o = e.color ? `\n  color="${k(e.color)}"` : "", s = e.textAlign, c = ae(e.fontFamily, t), l = x(e, [I, L(R(void 0))]), u = `h${f[e.level] ? e.level : 2}`;
+	if (x(e)) return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = ie(M(e.content)), a = m[e.level] ?? m[2], o = e.color ? `\n  color="${A(e.color)}"` : "", s = e.textAlign, c = ae(e.fontFamily, t), l = S(e, [L, R(z(void 0))]), u = `h${m[e.level] ? e.level : 2}`;
 	return `<mj-text
   font-size="${a}px"${o}
   align="${s}"
@@ -216,23 +217,23 @@ function ae(e, t) {
 //#endregion
 //#region ../renderer/src/renderers/paragraph.ts
 function oe(e, t) {
-	if (b(e) || e.content.replace(/<\/?p\b[^<>]*>/gi, "").trim() === "") return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = j(e.content);
+	if (x(e) || e.content.replace(/<\/?p\b[^<>]*>/gi, "").trim() === "") return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = M(e.content), a = S(e, [L, R(z(e.paragraphSpacing))]);
 	return `<mj-text
-  line-height="1.5"
-  padding="${n}"${r}${x(e, [I, L(R(e.paragraphSpacing))])}
+  line-height="1.5"${t.contentDirection === "rtl" ? "\n  align=\"right\"" : ""}
+  padding="${n}"${r}${a}
 >${i}</mj-text>`;
 }
 //#endregion
 //#region ../renderer/src/renderers/image.ts
-function z(e, t) {
-	if (b(e) || e.src === "") return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = e.width === "full" ? t.containerWidth + "px" : e.width + "px", a = F(e.height), o = x(e), s = e.borderRadius && e.borderRadius > 0 ? ` border-radius="${e.borderRadius}px"` : "", c = "";
-	e.linkUrl && (c = ` href="${k(e.linkUrl)}"`, e.linkOpenInNewTab && (c += " target=\"_blank\" rel=\"noopener\""));
-	let l = k(e.src), u = e.decorative === !0;
+function B(e, t) {
+	if (x(e) || e.src === "") return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = e.width === "full" ? t.containerWidth + "px" : e.width + "px", a = I(e.height), o = S(e), s = e.borderRadius && e.borderRadius > 0 ? ` border-radius="${e.borderRadius}px"` : "", c = "";
+	e.linkUrl && (c = ` href="${A(e.linkUrl)}"`, e.linkOpenInNewTab && (c += " target=\"_blank\" rel=\"noopener\""));
+	let l = A(e.src), u = e.decorative === !0;
 	return `<mj-image
   src="${l}"
-  alt="${u ? "" : k(e.alt)}"
+  alt="${u ? "" : A(e.alt)}"
   width="${i}"${a}
   align="${e.align}"
   padding="${n}"${r}${s}${c}${o}${u ? " role=\"presentation\"" : ""}
@@ -240,9 +241,9 @@ function z(e, t) {
 }
 //#endregion
 //#region ../renderer/src/renderers/button.ts
-function B(e, t) {
-	if (b(e)) return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = N(e.buttonPadding), a = e.url === "" ? "" : k(e.url), o = a === "" ? "" : ` href="${a}"`, s = k(e.backgroundColor), c = k(e.textColor), l = e.fontSize, u = e.borderRadius, d = O(e.text), f = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", p = V(e.fontFamily, t), m = H(e.width), h = x(e);
+function V(e, t) {
+	if (x(e)) return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = P(e.buttonPadding), a = e.url === "" ? "" : A(e.url), o = a === "" ? "" : ` href="${a}"`, s = A(e.backgroundColor), c = A(e.textColor), l = e.fontSize, u = e.borderRadius, d = k(e.text), f = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", p = H(e.fontFamily, t), m = U(e.width), h = S(e);
 	return `<mj-button${o}${f}
   background-color="${s}"
   color="${c}"
@@ -254,48 +255,48 @@ function B(e, t) {
   padding="${n}"${r}${p}${m}${h}
 >${d}</mj-button>`;
 }
-function V(e, t) {
+function H(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
-function H(e) {
+function U(e) {
 	return e === void 0 ? "" : ` width="${e === "full" ? "100%" : `${e}px`}"`;
 }
 //#endregion
 //#region ../renderer/src/renderers/divider.ts
-function U(e, t) {
-	if (b(e)) return "";
-	let n = N(e.styles.padding), r = e.styles.backgroundColor ? ` container-background-color="${k(e.styles.backgroundColor)}"` : "", i = e.width === "full" ? "100%" : e.width + "px";
+function W(e, t) {
+	if (x(e)) return "";
+	let n = P(e.styles.padding), r = e.styles.backgroundColor ? ` container-background-color="${A(e.styles.backgroundColor)}"` : "", i = e.width === "full" ? "100%" : e.width + "px";
 	return `<mj-divider
   border-width="${e.thickness}px"
   border-style="${e.lineStyle}"
-  border-color="${k(e.color)}"
+  border-color="${A(e.color)}"
   width="${i}"
-  padding="${n}"${r}${x(e)}
+  padding="${n}"${r}${S(e)}
 />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/spacer.ts
-function W(e, t) {
-	return b(e) ? "" : `<mj-spacer height="${e.height}px" padding="0"${e.styles.backgroundColor ? ` container-background-color="${k(e.styles.backgroundColor)}"` : ""}${x(e)} />`;
+function G(e, t) {
+	return x(e) ? "" : `<mj-spacer height="${e.height}px" padding="0"${e.styles.backgroundColor ? ` container-background-color="${A(e.styles.backgroundColor)}"` : ""}${S(e)} />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/html.ts
-function G(e, t) {
-	if (b(e) || !t.allowHtmlBlocks) return "";
+function K(e, t) {
+	if (x(e) || !t.allowHtmlBlocks) return "";
 	let n = e.content;
 	if (n === "") return "";
-	let r = x(e);
-	return `<mj-text padding="${N(e.styles.padding)}"${P(e.styles.backgroundColor, "container")}${r}>
+	let r = S(e);
+	return `<mj-text padding="${P(e.styles.padding)}"${F(e.styles.backgroundColor, "container")}${r}>
 ${n}
 </mj-text>`;
 }
 //#endregion
 //#region ../renderer/src/renderers/social.ts
-function K(e, t) {
-	if (b(e)) return "";
+function q(e, t) {
+	if (x(e)) return "";
 	let n = e.icons;
 	if (n.length === 0) return "";
-	let r = N(e.styles.padding), i = e.styles.backgroundColor ? ` container-background-color="${k(e.styles.backgroundColor)}"` : "", a = x(e), o = e.align, s = e.iconSize, c = e.iconStyle, l = e.spacing, u;
+	let r = P(e.styles.padding), i = e.styles.backgroundColor ? ` container-background-color="${A(e.styles.backgroundColor)}"` : "", a = S(e), o = e.align, s = e.iconSize, c = e.iconStyle, l = e.spacing, u;
 	switch (s) {
 		case "small":
 			u = 24;
@@ -326,77 +327,77 @@ function K(e, t) {
   padding="${r}"${i}${a}
 >
 ${n.map((e, n) => {
-		let r = e.platform, i = k(e.url), a = `${t.socialIconsBaseUrl}/${c}/${r}.png`, o = n === f - 1 ? 0 : l;
+		let r = e.platform, i = A(e.url), a = `${t.socialIconsBaseUrl}/${c}/${r}.png`, o = n === f - 1 ? 0 : l;
 		return `<mj-social-element src="${a}" href="${i}" icon-size="${u}px" padding="0 ${o}px 0 0" border-radius="${d}" background-color="transparent"></mj-social-element>`;
 	}).join("\n")}
 </mj-social>`;
 }
 //#endregion
 //#region ../renderer/src/renderers/menu.ts
-function q(e, t) {
-	if (b(e) || e.items.length === 0) return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = x(e), a = le(e.fontFamily, t), o = e.textAlign;
+function se(e, t) {
+	if (x(e) || e.items.length === 0) return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = S(e), a = ue(e.fontFamily, t), o = e.textAlign;
 	return `<mj-text
-  font-size="${e.fontSize}px"${e.color ? `\n  color="${k(e.color)}"` : ""}
+  font-size="${e.fontSize}px"${e.color ? `\n  color="${A(e.color)}"` : ""}
   align="${o}"
   line-height="1.5"
   padding="${n}"${r}${a}${i}
->${se(e)}</mj-text>`;
+>${ce(e)}</mj-text>`;
 }
-function se(e) {
-	let t = e.items, n = O(e.separator), r = A(e.separatorColor), i = e.spacing, a = e.linkColor ?? e.color, o = [], s = t.length;
-	for (let e = 0; e < s; e++) o.push(ce(t[e], a)), e < s - 1 && o.push(`<span style="color: ${r}; padding: 0 ${i}px;">${n}</span>`);
+function ce(e) {
+	let t = e.items, n = k(e.separator), r = j(e.separatorColor), i = e.spacing, a = e.linkColor ?? e.color, o = [], s = t.length;
+	for (let e = 0; e < s; e++) o.push(le(t[e], a)), e < s - 1 && o.push(`<span style="color: ${r}; padding: 0 ${i}px;">${n}</span>`);
 	return o.join("");
 }
-function ce(e, t) {
-	let n = O(e.text), r = k(e.url), i = e.color ?? t, a = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", o = ["text-decoration: none"];
-	return i && o.unshift(`color: ${A(i)}`), e.bold && o.push("font-weight: bold"), e.underline && o.push("text-decoration: underline"), `<a href="${r}" style="${o.join("; ")}"${a}>${n}</a>`;
-}
 function le(e, t) {
+	let n = k(e.text), r = A(e.url), i = e.color ?? t, a = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", o = ["text-decoration: none"];
+	return i && o.unshift(`color: ${j(i)}`), e.bold && o.push("font-weight: bold"), e.underline && o.push("text-decoration: underline"), `<a href="${r}" style="${o.join("; ")}"${a}>${n}</a>`;
+}
+function ue(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/table.ts
-function ue(e, t) {
-	if (b(e) || e.rows.length === 0) return "";
-	let n = N(e.styles.padding), r = P(e.styles.backgroundColor, "container"), i = x(e), a = me(e.fontFamily, t);
+function de(e, t) {
+	if (x(e) || e.rows.length === 0) return "";
+	let n = P(e.styles.padding), r = F(e.styles.backgroundColor, "container"), i = S(e), a = he(e.fontFamily, t);
 	return `<mj-text
-  font-size="${e.fontSize}px"${e.color ? `\n  color="${k(e.color)}"` : ""}
+  font-size="${e.fontSize}px"${e.color ? `\n  color="${A(e.color)}"` : ""}
   align="${e.textAlign}"
   line-height="1.5"
   padding="${n}"${r}${a}${i}
->${de(e)}</mj-text>`;
+>${fe(e)}</mj-text>`;
 }
-function de(e) {
-	let t = A(e.borderColor), n = e.borderWidth, r = "";
+function fe(e) {
+	let t = j(e.borderColor), n = e.borderWidth, r = "";
 	for (let i = 0; i < e.rows.length; i++) {
 		let a = e.rows[i];
-		r += fe(a, e, e.hasHeaderRow && i === 0, t, n);
+		r += pe(a, e, e.hasHeaderRow && i === 0, t, n);
 	}
 	return `<table style="width: 100%; border-collapse: collapse;">${r}</table>`;
 }
-function fe(e, t, n, r, i) {
+function pe(e, t, n, r, i) {
 	let a = "";
-	for (let o of e.cells) a += pe(o, t, n, r, i);
+	for (let o of e.cells) a += me(o, t, n, r, i);
 	return `<tr>${a}</tr>`;
 }
-function pe(e, t, n, r, i) {
+function me(e, t, n, r, i) {
 	let a = t.cellPadding, o = [`border: ${i}px solid ${r}`, `padding: ${a}px`];
-	n && (o.push("font-weight: bold"), t.headerBackgroundColor && o.push(`background-color: ${A(t.headerBackgroundColor)}`));
-	let s = o.join("; "), c = O(j(e.content)), l = n ? "th" : "td";
+	n && (o.push("font-weight: bold"), t.headerBackgroundColor && o.push(`background-color: ${j(t.headerBackgroundColor)}`));
+	let s = o.join("; "), c = k(M(e.content)), l = n ? "th" : "td";
 	return `<${l} style="${s}">${c}</${l}>`;
 }
-function me(e, t) {
+function he(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/custom.ts
-function he(e, t) {
-	if (b(e)) return "";
+function ge(e, t) {
+	if (x(e)) return "";
 	let n = t.customBlockHtml.get(e.id) ?? e.renderedHtml;
 	if (!n || n === "") return "";
-	let r = x(e);
-	return `<mj-text padding="${N(e.styles.padding)}"${P(e.styles.backgroundColor, "container")}${r}>
+	let r = S(e);
+	return `<mj-text padding="${P(e.styles.padding)}"${F(e.styles.backgroundColor, "container")}${r}>
 ${n}
 </mj-text>`;
 }
@@ -439,28 +440,28 @@ function X(e, t) {
 }
 //#endregion
 //#region ../renderer/src/renderers/section.ts
-function ge(e, t, n) {
-	if (b(e)) return "";
-	let r = e.columns, i = J(r), a = Y(r, t.containerWidth), o = N(e.styles.padding), s = P(e.styles.backgroundColor, "native"), c = x(e), u = e.borderRadius && e.borderRadius > 0 ? ` border-radius="${e.borderRadius}px"` : "", d = e.children, f = [];
+function _e(e, t, n) {
+	if (x(e)) return "";
+	let r = e.columns, i = J(r), a = Y(r, t.containerWidth), o = P(e.styles.padding), s = F(e.styles.backgroundColor, "native"), l = S(e), u = e.borderRadius && e.borderRadius > 0 ? ` border-radius="${e.borderRadius}px"` : "", d = e.children, f = [];
 	for (let e = 0; e < d.length; e++) {
-		let r = d[e], o = i[e] ?? "100%", s = Math.floor(a[e] ?? t.containerWidth), c = _e(r, t.allowHtmlBlocks).filter((e) => !l(e)), u = t.withContainerWidth(s), p = c.map((e) => X(e, n(e, u))).filter((e) => e !== "").join("\n");
+		let r = d[e], o = i[e] ?? "100%", s = Math.floor(a[e] ?? t.containerWidth), l = ve(r, t.allowHtmlBlocks).filter((e) => !c(e)), u = t.withContainerWidth(s), p = l.map((e) => X(e, n(e, u))).filter((e) => e !== "").join("\n");
 		f.push(`<mj-column width="${o}">
 ${p === "" ? "<mj-text>&nbsp;</mj-text>" : p}
 </mj-column>`);
 	}
-	let p = f.join("\n");
-	return `<mj-section${s} padding="${o}"${u}${c}>
-${e.stackOnMobile === !1 && f.length > 1 ? `<mj-group>
+	let p = f.join("\n"), m = t.contentDirection === "rtl" ? " direction=\"rtl\"" : "";
+	return `<mj-section${s} padding="${o}"${u}${l}${m}>
+${e.stackOnMobile === !1 && f.length > 1 ? `<mj-group${m}>
 ${p}
 </mj-group>` : p}
 </mj-section>`;
 }
-function _e(e, t) {
+function ve(e, t) {
 	return t ? e : e.filter((e) => e.type !== "html");
 }
 //#endregion
 //#region ../renderer/src/renderers/video.ts
-function ve(e, t) {
+function ye(e, t) {
 	if (t) return t;
 	if (!e) return null;
 	for (let t of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/, /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]) {
@@ -470,93 +471,93 @@ function ve(e, t) {
 	let n = e.match(/vimeo\.com\/(?:video\/)?(\d+)/);
 	return n ? `https://vumbnail.com/${n[1]}.jpg` : null;
 }
-function ye(e, t) {
-	if (b(e)) return "";
-	let n = ve(e.url, e.thumbnailUrl);
+function be(e, t) {
+	if (x(e)) return "";
+	let n = ye(e.url, e.thumbnailUrl);
 	if (!n) return "";
-	let r = N(e.styles.padding), i = P(e.styles.backgroundColor, "container"), a = e.width === "full" ? t.containerWidth + "px" : e.width + "px", o = F(e.height), s = x(e);
+	let r = P(e.styles.padding), i = F(e.styles.backgroundColor, "container"), a = e.width === "full" ? t.containerWidth + "px" : e.width + "px", o = I(e.height), s = S(e);
 	return `<mj-image
-  src="${k(n)}"
-  alt="${k(e.alt)}"
+  src="${A(n)}"
+  alt="${A(e.alt)}"
   width="${a}"${o}
   align="${e.align}"
   padding="${r}"
-  href="${k(e.url)}"
+  href="${A(e.url)}"
   target="_blank"
   rel="noopener"${i}${s}
 />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/index.ts
-function Z(f, m) {
-	let h = m.blockRenderers[f.type];
-	return h ? h(f, m) : l(f) ? ge(f, m, Z) : e(f) ? re(f, m) : r(f) ? oe(f, m) : i(f) ? z(f, m) : n(f) ? B(f, m) : s(f) ? U(f, m) : u(f) ? W(f, m) : t(f) ? G(f, m) : c(f) ? K(f, m) : p(f) ? q(f, m) : a(f) ? ue(f, m) : d(f) ? ye(f, m) : o(f) ? he(f, m) : b(f) ? "" : T(f);
+function Z(a, f) {
+	let m = f.blockRenderers[a.type];
+	return m ? m(a, f) : c(a) ? _e(a, f, Z) : d(a) ? re(a, f) : l(a) ? oe(a, f) : p(a) ? B(a, f) : o(a) ? V(a, f) : t(a) ? W(a, f) : i(a) ? G(a, f) : r(a) ? K(a, f) : u(a) ? q(a, f) : n(a) ? se(a, f) : e(a) ? de(a, f) : h(a) ? be(a, f) : s(a) ? ge(a, f) : x(a) ? "" : E(a);
 }
 //#endregion
 //#region ../renderer/src/index.ts
-async function be(e, t) {
-	let n = t?.customFonts ?? [], r = t?.defaultFallbackFont ?? "Arial, sans-serif", i = t?.allowHtmlBlocks ?? !0, a = Ce(t?.socialIconsBaseUrl ?? _), o = await De(e, t?.renderCustomBlock), s = Oe(e, t?.getCustomBlockStylesheet), c = new y(e.settings.width, n, r, i, o, a, t?.blockRenderers ?? {}), l = Ee(e.blocks, i), u = c.resolveFontFamily(e.settings.fontFamily), d = e.settings.backgroundColor, f = e.settings.textColor ? ` color="${k(e.settings.textColor)}"` : "", p = e.settings.linkColor ? A(e.settings.linkColor) : "inherit", m = e.settings.linkUnderline ? "underline" : "none", h = l.map((e) => xe(e, c)).filter((e) => e !== "").join("\n"), g = Te(n), v = we(e.settings.preheaderText);
-	return `<mjml lang="${k(e.settings.locale)}">
-  <mj-head>${v}
+async function xe(e, t) {
+	let n = t?.customFonts ?? [], r = t?.defaultFallbackFont ?? "Arial, sans-serif", i = t?.allowHtmlBlocks ?? !0, o = we(t?.socialIconsBaseUrl ?? v), s = await Oe(e, t?.renderCustomBlock), c = ke(e, t?.getCustomBlockStylesheet), l = a(e.settings), u = new b(e.settings.width, n, r, i, s, o, t?.blockRenderers ?? {}, l), d = De(e.blocks, i), f = u.resolveFontFamily(e.settings.fontFamily), p = e.settings.backgroundColor, m = e.settings.textColor ? ` color="${A(e.settings.textColor)}"` : "", h = e.settings.linkColor ? j(e.settings.linkColor) : "inherit", g = e.settings.linkUnderline ? "underline" : "none", _ = d.map((e) => Q(e, u)).filter((e) => e !== "").join("\n"), y = Ee(n), x = Te(e.settings.preheaderText);
+	return `<mjml lang="${A(e.settings.locale)}" dir="${A(l)}">
+  <mj-head>${x}
     <mj-attributes>
-      <mj-all font-family="${u}" />
-      <mj-text font-size="14px"${f} />
+      <mj-all font-family="${f}" />
+      <mj-text font-size="14px"${m} />
       <mj-section padding="0" />
       <mj-column padding="0" />
       <mj-image fluid-on-mobile="true" />
-    </mj-attributes>${g}
+    </mj-attributes>${y}
     <mj-style inline="inline">
-      ${te(ne(l))}
+      ${te(ne(d), l)}
     </mj-style>
     <mj-style>
-      a { color: ${p}; text-decoration: ${m}; }
+      a { color: ${h}; text-decoration: ${g}; }
       @media only screen and (max-width: 480px) {
         .tpl-hide-mobile { display: none !important; mso-hide: all !important; }
       }
       @media only screen and (min-width: 481px) {
         .tpl-hide-desktop { display: none !important; mso-hide: all !important; }
       }
-    </mj-style>${ke(s)}
+    </mj-style>${Ae(c)}
   </mj-head>
-  <mj-body width="${c.containerWidth}px" background-color="${d}">
-${h}
+  <mj-body width="${u.containerWidth}px" background-color="${p}">
+${_}
   </mj-body>
 </mjml>`;
 }
-function xe(e, t) {
-	if (l(e)) {
+function Q(e, t) {
+	if (c(e)) {
 		let n = Z(e, t);
-		return X(e, e.wrapper && n !== "" ? Q(n, e.wrapper) : n);
+		return X(e, e.wrapper && n !== "" ? Se(n, e.wrapper) : n);
 	}
-	return X(e, Se(Z(e, t)));
+	return X(e, Ce(Z(e, t), t.contentDirection));
 }
-function Q(e, t) {
-	return `<mj-wrapper${P(t.backgroundColor, "native")}${` padding="${t.padding ? N(t.padding) : "0"}"`}${t.borderRadius && t.borderRadius > 0 ? ` border-radius="${t.borderRadius}px"` : ""}>
+function Se(e, t) {
+	return `<mj-wrapper${F(t.backgroundColor, "native")}${` padding="${t.padding ? P(t.padding) : "0"}"`}${t.borderRadius && t.borderRadius > 0 ? ` border-radius="${t.borderRadius}px"` : ""}>
 ${e}
 </mj-wrapper>`;
 }
-function Se(e) {
-	return e === "" ? "" : `<mj-section>
+function Ce(e, t) {
+	return e === "" ? "" : `<mj-section${t === "rtl" ? " direction=\"rtl\"" : ""}>
   <mj-column>
 ${e}
   </mj-column>
 </mj-section>`;
 }
-function Ce(e) {
+function we(e) {
 	return e.endsWith("/") ? e.slice(0, -1) : e;
 }
-function we(e) {
+function Te(e) {
 	if (!e) return "";
 	let t = e.trim();
-	return t === "" ? "" : `\n    <mj-preview>${O(t)}</mj-preview>`;
+	return t === "" ? "" : `\n    <mj-preview>${k(t)}</mj-preview>`;
 }
-function Te(e) {
-	return e.length === 0 ? "" : e.map((e) => `\n    <mj-font name="${k(e.name)}" href="${k(e.url)}" />`).join("");
+function Ee(e) {
+	return e.length === 0 ? "" : e.map((e) => `\n    <mj-font name="${A(e.name)}" href="${A(e.url)}" />`).join("");
 }
-function Ee(e, t) {
+function De(e, t) {
 	return t ? e : e.filter((e) => e.type !== "html");
 }
-async function De(e, t) {
+async function Oe(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	if (!t) return n;
 	let r = [];
@@ -567,14 +568,14 @@ async function De(e, t) {
 }
 function $(e, t) {
 	for (let n of e) {
-		if (o(n)) {
+		if (s(n)) {
 			t.push(n);
 			continue;
 		}
-		if (l(n)) for (let e of n.children) $(e, t);
+		if (c(n)) for (let e of n.children) $(e, t);
 	}
 }
-function Oe(e, t) {
+function ke(e, t) {
 	if (!t) return [];
 	let n = [];
 	if ($(e.blocks, n), n.length === 0) return [];
@@ -589,10 +590,10 @@ function Oe(e, t) {
 	}
 	return a;
 }
-function ke(e) {
+function Ae(e) {
 	return e.length === 0 ? "" : e.map((e) => `\n    <mj-style>\n${e}\n    </mj-style>`).join("");
 }
 //#endregion
-export { _ as DEFAULT_SOCIAL_ICONS_BASE_URL, I as RICH_TEXT_CSS_CLASS, y as RenderContext, C as UNRENDERABLE_MARKER_PREFIX, j as convertMergeTagsToValues, k as escapeAttr, O as escapeHtml, x as getCssClassAttr, S as getCssClasses, J as getWidthPercentages, Y as getWidthPixels, b as isHiddenOnAll, Z as renderBlock, be as renderToMjml, T as renderUnrenderableBlock, R as resolveParagraphGap, L as richTextGapClass, N as toPaddingString };
+export { v as DEFAULT_SOCIAL_ICONS_BASE_URL, L as RICH_TEXT_CSS_CLASS, b as RenderContext, w as UNRENDERABLE_MARKER_PREFIX, M as convertMergeTagsToValues, A as escapeAttr, k as escapeHtml, S as getCssClassAttr, C as getCssClasses, J as getWidthPercentages, Y as getWidthPixels, x as isHiddenOnAll, Z as renderBlock, xe as renderToMjml, E as renderUnrenderableBlock, z as resolveParagraphGap, R as richTextGapClass, P as toPaddingString };
 
-//# sourceMappingURL=src-CX_VHu8r.js.map
+//# sourceMappingURL=src-BC-eolWY.js.map