@cymbal/atoms-email-renderer 0.0.2 → 0.1.0

package/dist/index.mjs

@@ -1,8 +1,9 @@
-import { render, Html, Head, Body, Container, Section, Text, Link, Img, Column, Row, Heading, Button, Hr } from '@react-email/components';
+import { Mjml, MjmlHead, MjmlStyle, MjmlBody, MjmlSection, MjmlColumn, MjmlText, MjmlRaw, MjmlGroup, MjmlDivider, MjmlImage, MjmlButton } from '@faire/mjml-react';
+import { renderToMjml } from '@faire/mjml-react/utils/renderToMjml';
+import mjml2html from 'mjml';
 import React from 'react';
 
 const MIN_LAYOUT_BASIS = 1;
-const DEFAULT_LAYOUT_BASIS = 100;
 
 function resolveLayoutVisualStyleValue({
   override,
@@ -29,31 +30,10 @@ function mergeResolvedLayoutWidth(overrides, global) {
   if (widthOverride === void 0 || widthOverride === null) {
     return { ...global.width };
   }
-  if (widthOverride && typeof widthOverride === "object" && "type" in widthOverride && widthOverride.type === "max") {
-    const legacyMaxWidth = widthOverride;
-    return {
-      basis: global.width.basis,
-      max: legacyMaxWidth.max ?? 200
-    };
-  }
-  if (widthOverride && typeof widthOverride === "object" && "type" in widthOverride && widthOverride.type === "maxWidth") {
-    const legacyMaxWidth = widthOverride;
-    return {
-      basis: global.width.basis,
-      max: legacyMaxWidth.maxWidth ?? 200
-    };
-  }
-  if (widthOverride && typeof widthOverride === "object" && "type" in widthOverride && widthOverride.type === "basis") {
-    const legacyBasis = widthOverride;
-    return {
-      basis: legacyBasis.basis ?? DEFAULT_LAYOUT_BASIS,
-      max: "none"
-    };
-  }
-  const normalizedWidth = widthOverride;
   return {
-    basis: normalizedWidth.basis ?? global.width.basis,
-    max: normalizedWidth.max !== void 0 ? normalizedWidth.max : global.width.max
+    basis: widthOverride.basis ?? global.width.basis,
+    max: widthOverride.max ?? global.width.max,
+    type: widthOverride.type ?? global.width.type
   };
 }
 function resolveTextStyles(overrides, global) {
@@ -90,8 +70,9 @@ function resolveColumnsStyles(overrides, global) {
   }
   return {
     gap: overrides.gap ?? global.gap,
-    verticalAlign: overrides.verticalAlign ?? global.verticalAlign,
-    horizontalAlign: overrides.horizontalAlign ?? global.horizontalAlign,
+    verticalGap: overrides.verticalGap ?? global.verticalGap,
+    contentVerticalAlign: overrides.contentVerticalAlign ?? global.contentVerticalAlign,
+    contentHorizontalAlign: overrides.contentHorizontalAlign ?? global.contentHorizontalAlign,
     format: overrides.format ?? global.format
   };
 }
@@ -113,7 +94,7 @@ function resolveRowsStyles(overrides, global) {
   }
   return {
     gap: overrides.gap ?? global.gap,
-    horizontalAlign: overrides.horizontalAlign ?? global.horizontalAlign
+    contentHorizontalAlign: overrides.contentHorizontalAlign ?? global.contentHorizontalAlign
   };
 }
 function resolvePadding(overrides, global) {
@@ -235,31 +216,54 @@ function calculateRowChildWidth({
   globalAtomStyles
 }) {
   const resolved = resolveAtomLayoutStyles(child, globalAtomStyles);
-  const cap = resolved.width.max;
-  if (cap === "none") {
-    return contentWidth;
+  if (resolved.width.type === "content") {
+    return Math.min(estimateContentWidthForAtom({ atom: child, globalAtomStyles }) ?? contentWidth, contentWidth);
+  }
+  if (resolved.width.type === "max") {
+    return Math.min(resolved.width.max, contentWidth);
   }
-  return Math.min(cap, contentWidth);
+  return contentWidth;
+}
+function estimateContentWidthForAtom({
+  atom,
+  globalAtomStyles
+}) {
+  if (atom.type === "image" && atom.width > 0) {
+    return atom.width;
+  }
+  if (atom.type === "button") {
+    const resolvedText = resolveTextStyles(atom.textStyles, globalAtomStyles.buttonStyles.textStyles);
+    const resolvedPadding = resolvePadding(atom.innerPadding, globalAtomStyles.buttonStyles.innerPadding);
+    const textLength = Math.max(1, atom.text.replace(/<[^>]*>/g, "").length);
+    const averageCharacterWidth = resolvedText.fontSizePx * 0.55;
+    return Math.ceil(textLength * averageCharacterWidth + resolvedPadding.left + resolvedPadding.right);
+  }
+  return null;
 }
 const COLUMN_WIDTH_SPLIT_EPS = 1e-6;
-function calculateColumnChildWidths({
+function calculateColumnChildWidthAllocationFromSpecs({
   contentWidth,
-  children,
   gap,
-  globalAtomStyles
+  widthSpecs
 }) {
-  const childCount = children.length;
+  const childCount = widthSpecs.length;
   if (childCount === 0) {
-    return [];
+    return {
+      allocatedPercents: [],
+      distributableWidthPx: 0,
+      isCappedByMax: [],
+      minimumFeasiblePercents: [],
+      widthsPx: []
+    };
   }
   const totalGap = gap * (childCount - 1);
   const distributable = Math.max(0, contentWidth - totalGap);
-  const resolvedLayouts = children.map((child) => resolveAtomLayoutStyles(child, globalAtomStyles));
-  const bases = resolvedLayouts.map((layoutStyles) => layoutStyles.width.basis);
-  const caps = resolvedLayouts.map(
-    (layoutStyles) => layoutStyles.width.max === "none" ? Number.POSITIVE_INFINITY : layoutStyles.width.max
+  const bases = widthSpecs.map((widthSpec) => widthSpec.basis);
+  const caps = widthSpecs.map(
+    (widthSpec) => widthSpec.type === "max" ? widthSpec.max : Number.POSITIVE_INFINITY
   );
   const widths = Array(childCount).fill(0);
+  const isCappedByMax = Array(childCount).fill(false);
   const active = new Set(Array.from({ length: childCount }, (_, index) => index));
   let remaining = distributable;
   let guard = 0;
@@ -288,6 +292,7 @@ function calculateColumnChildWidths({
     for (const index of clampedIndices) {
       const assigned = caps[index];
       widths[index] = assigned;
+      isCappedByMax[index] = true;
       remaining -= assigned;
       active.delete(index);
     }
@@ -301,564 +306,956 @@ function calculateColumnChildWidths({
       break;
     }
   }
-  return widths;
+  const allocatedPercents = widths.map((width) => {
+    if (distributable <= 0) {
+      return 0;
+    }
+    return Math.round(width / distributable * 100);
+  });
+  const uncappedIndices = widthSpecs.map((widthSpec, index) => widthSpec.type !== "max" ? index : null).filter((index) => index !== null);
+  const minimumFeasiblePercents = allocatedPercents.map((allocatedPercent, index) => {
+    if (widthSpecs[index]?.type !== "max" && uncappedIndices.length === 1) {
+      return allocatedPercent;
+    }
+    return distributable > 0 ? 1 : 0;
+  });
+  return {
+    allocatedPercents,
+    distributableWidthPx: distributable,
+    isCappedByMax,
+    minimumFeasiblePercents,
+    widthsPx: widths
+  };
+}
+function calculateColumnChildWidthAllocation({
+  contentWidth,
+  children,
+  gap,
+  globalAtomStyles
+}) {
+  const widthSpecs = children.map((child) => resolveAtomLayoutStyles(child, globalAtomStyles).width);
+  return calculateColumnChildWidthAllocationFromSpecs({ contentWidth, gap, widthSpecs });
 }
 function ensureUrlHasProtocolForPreview(url) {
   const trimmed = url.trim();
   if (trimmed === "") {
     return "";
   }
-  if (/^https?:\/\//i.test(trimmed)) {
+  if (/^\$[a-z-]+:[a-zA-Z0-9-]+\$$/.test(trimmed)) {
     return trimmed;
   }
-  if (trimmed.startsWith("mailto:")) {
+  if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(trimmed)) {
+    return trimmed;
+  }
+  if (/^(?:https?:\/\/|mailto:|tel:)/i.test(trimmed)) {
     return trimmed;
   }
   return `https://${trimmed}`;
 }
 
-const atomBorderToReactStyle = (border) => {
-  const side = border.side;
-  const spec = `${border.width}px ${border.style} ${border.color}`;
-  const none = "none";
-  if (side === "all") {
-    return { border: spec };
-  }
-  if (side === "top") {
-    return { borderTop: spec, borderRight: none, borderBottom: none, borderLeft: none };
-  }
-  if (side === "right") {
-    return { borderTop: none, borderRight: spec, borderBottom: none, borderLeft: none };
+const ZWNJ_PADDING = "&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;";
+const COMMON_CSS = `
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+a.inherit-color {
+    color: inherit !important;
+}
+
+.display-link-block a {
+    display: block !important;
+}
+
+.table-min-width-100 table {
+    min-width: 100% !important;
+}`;
+function roundWidth(width) {
+  return Math.max(0, Math.round(width));
+}
+function boxOuterWidth(availableWidth, layoutStyles) {
+  if (layoutStyles.width.type === "max") {
+    return roundWidth(Math.min(layoutStyles.width.max, availableWidth));
   }
-  if (side === "bottom") {
-    return { borderTop: none, borderRight: none, borderBottom: spec, borderLeft: none };
+  return roundWidth(availableWidth);
+}
+function isTransparentColor(color) {
+  if (!color) {
+    return true;
   }
-  return { borderTop: none, borderRight: none, borderBottom: none, borderLeft: spec };
-};
-
-const SYSTEM_SAFE_FONTS = /* @__PURE__ */ new Set([
-  "Arial",
-  "Arial Black",
-  "Arial Narrow",
-  "Calibri",
-  "Consolas",
-  "Courier",
-  "Courier New",
-  "Franklin Gothic",
-  "Garamond",
-  "Georgia",
-  "Helvetica",
-  "Lucida Console",
-  "Lucida Grande",
-  "Tahoma",
-  "Times New Roman",
-  "Trebuchet MS",
-  "Verdana"
-]);
-function collectFontFamilies(doc) {
-  const families = /* @__PURE__ */ new Set();
-  const rootStyles = doc.globalAtomStyles;
-  const addFromTextStyles = (ts) => {
-    if (!ts) {
-      return;
-    }
-    if (ts.fontFamily) {
-      families.add(ts.fontFamily);
-    }
-  };
-  addFromTextStyles(rootStyles.titleStyles.textStyles);
-  addFromTextStyles(rootStyles.subtitleStyles.textStyles);
-  addFromTextStyles(rootStyles.headingStyles.textStyles);
-  addFromTextStyles(rootStyles.subheadingStyles.textStyles);
-  addFromTextStyles(rootStyles.sectionStyles.textStyles);
-  addFromTextStyles(rootStyles.bodyStyles.textStyles);
-  addFromTextStyles(rootStyles.accentStyles.textStyles);
-  addFromTextStyles(rootStyles.captionStyles.textStyles);
-  addFromTextStyles(rootStyles.promoStyles.textStyles);
-  addFromTextStyles(rootStyles.inputStyles.textStyles);
-  addFromTextStyles(rootStyles.optionStyles.textStyles);
-  const walkAtom = (atom) => {
-    if (atom.type === "text" || atom.type === "button" || atom.type === "input" || atom.type === "contest" || atom.type === "option") {
-      addFromTextStyles(atom.textStyles);
-    }
-    if ("children" in atom && atom.children) {
-      atom.children.forEach(walkAtom);
-    }
-  };
-  walkAtom(doc.rootRow);
-  return [...families].filter((f) => !SYSTEM_SAFE_FONTS.has(f));
+  const normalized = color.trim().toLowerCase();
+  return normalized === "transparent" || normalized === "rgba(0,0,0,0)" || normalized === "#00000000";
 }
 function backgroundColorFromAtomBg(bg) {
-  if (bg === "none") {
+  if (bg === "none" || isTransparentColor(bg.color)) {
     return void 0;
   }
-  if (bg.color) {
-    return bg.color;
-  }
-  return void 0;
+  return bg.color;
+}
+function isImageBackground(bg) {
+  return bg !== "none" && bg.type === "image" && bg.imageUrl.trim() !== "";
 }
 function cornerRadiusToCssValue(radius) {
+  if (radius.topLeft === 0 && radius.topRight === 0 && radius.bottomRight === 0 && radius.bottomLeft === 0) {
+    return void 0;
+  }
   return `${radius.topLeft}px ${radius.topRight}px ${radius.bottomRight}px ${radius.bottomLeft}px`;
 }
-function layoutHorizontalBlockStyle(horizontalAlign) {
+function paddingToCss(padding) {
+  return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+}
+function layoutPaddingToCss(ls) {
+  return `${(ls.padding?.top ?? 0) + (ls.margin?.top ?? 0)}px ${ls.padding?.right ?? 0}px ${(ls.padding?.bottom ?? 0) + (ls.margin?.bottom ?? 0)}px ${ls.padding?.left ?? 0}px`;
+}
+function rowChildSectionPadding(ls, index, count, gap) {
+  const top = (index === 0 ? (ls.padding?.top ?? 0) + (ls.margin?.top ?? 0) : 0) + (index > 0 ? gap : 0);
+  const bottom = index === count - 1 ? (ls.padding?.bottom ?? 0) + (ls.margin?.bottom ?? 0) : 0;
+  return `${top}px ${ls.padding?.right ?? 0}px ${bottom}px ${ls.padding?.left ?? 0}px`;
+}
+function atomBorderToCss(border) {
+  const spec = `${border.width}px ${border.style} ${border.color}`;
+  if (border.side === "all") {
+    return { border: spec };
+  }
   return {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: horizontalAlign === "left" ? "flex-start" : horizontalAlign === "center" ? "center" : "flex-end",
-    width: "100%"
+    borderTop: border.side === "top" ? spec : "none",
+    borderRight: border.side === "right" ? spec : "none",
+    borderBottom: border.side === "bottom" ? spec : "none",
+    borderLeft: border.side === "left" ? spec : "none"
   };
 }
-function layoutToWrapperStyle(ls, parentRowBlockHorizontalAlign, forceBlockHorizontalAlign) {
-  const paddingTop = (ls.padding?.top ?? 0) + (ls.margin?.top ?? 0);
-  const paddingBottom = (ls.padding?.bottom ?? 0) + (ls.margin?.bottom ?? 0);
-  const paddingLeft = ls.padding?.left ?? 0;
-  const paddingRight = ls.padding?.right ?? 0;
-  const hasPadding = paddingTop > 0 || paddingRight > 0 || paddingBottom > 0 || paddingLeft > 0;
-  const blockAlign = forceBlockHorizontalAlign !== void 0 ? forceBlockHorizontalAlign : effectiveBlockHorizontalAlign({
-    layoutHorizontalAlign: ls.horizontalAlign,
-    parentRowBlockHorizontalAlign
+function mjmlLayoutProps(ls) {
+  const backgroundColor = backgroundColorFromAtomBg(ls.background);
+  const backgroundImageProps = isImageBackground(ls.background) ? {
+    backgroundUrl: ls.background.imageUrl,
+    backgroundSize: ls.background.imageSize,
+    backgroundRepeat: ls.background.imageRepeat ? "repeat" : "no-repeat"
+  } : {};
+  return compactRecord({
+    padding: layoutPaddingToCss(ls),
+    backgroundColor,
+    borderRadius: cornerRadiusToCssValue(ls.borderRadius),
+    ...ls.border !== "none" ? atomBorderToCss(ls.border) : {},
+    ...backgroundImageProps
   });
+}
+function suppressLayoutBackground(layoutStyles) {
   return {
-    ...hasPadding ? { padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px` } : {},
-    ...backgroundColorFromAtomBg(ls.background) ? { backgroundColor: backgroundColorFromAtomBg(ls.background) } : {},
-    ...ls.border !== "none" ? atomBorderToReactStyle(ls.border) : {},
-    ...ls.borderRadius ? { borderRadius: cornerRadiusToCssValue(ls.borderRadius) } : {},
-    ...layoutHorizontalBlockStyle(blockAlign)
+    ...layoutStyles,
+    background: "none"
   };
 }
+function textStyleToMjmlProps(styles) {
+  return compactRecord({
+    color: styles.color,
+    fontWeight: Number(styles.fontWeight),
+    fontStyle: styles.fontStyle === "normal" ? void 0 : styles.fontStyle,
+    textTransform: styles.textTransform === "none" ? void 0 : styles.textTransform,
+    textDecoration: styles.textDecoration === "none" ? void 0 : styles.textDecoration,
+    fontSize: `${styles.fontSizePx}px`,
+    fontFamily: styles.fontFamily,
+    align: styles.align,
+    lineHeight: lineHeightToCss(styles.lineHeight),
+    letterSpacing: styles.letterSpacingEm === 0 ? void 0 : `${styles.letterSpacingEm}em`
+  });
+}
 function textStyleToCss(styles) {
-  return {
+  return compactRecord({
     color: styles.color,
     fontWeight: Number(styles.fontWeight),
-    fontStyle: styles.fontStyle,
-    textTransform: styles.textTransform,
-    textDecoration: styles.textDecoration,
-    fontSize: styles.fontSizePx,
+    fontStyle: styles.fontStyle === "normal" ? void 0 : styles.fontStyle,
+    textTransform: styles.textTransform === "none" ? void 0 : styles.textTransform,
+    textDecoration: styles.textDecoration === "none" ? void 0 : styles.textDecoration,
+    fontSize: `${styles.fontSizePx}px`,
     fontFamily: styles.fontFamily,
     textAlign: styles.align,
-    lineHeight: styles.lineHeight,
-    letterSpacing: `${styles.letterSpacingEm}em`,
+    lineHeight: lineHeightToCss(styles.lineHeight),
+    letterSpacing: styles.letterSpacingEm === 0 ? void 0 : `${styles.letterSpacingEm}em`,
     margin: 0
-  };
+  });
 }
-function headingLevel(textType) {
-  switch (textType) {
-    case "title":
-      return "h1";
-    case "subtitle":
-      return "h2";
-    case "heading":
-      return "h3";
-    default:
-      return "h1";
+function lineHeightToCss(lineHeight) {
+  if (typeof lineHeight === "number") {
+    return `${lineHeight * 100}%`;
+  }
+  const trimmed = lineHeight.trim();
+  if (/^\d*\.?\d+$/.test(trimmed)) {
+    return `${Number(trimmed) * 100}%`;
   }
+  return trimmed;
+}
+function compactRecord(record) {
+  return Object.fromEntries(
+    Object.entries(record).filter(([, value]) => value !== void 0 && value !== null && value !== "")
+  );
+}
+function alignAttr(align) {
+  return align;
 }
-const EmailTextAtom = ({ atom, ctx }) => {
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function cssStyle(style) {
+  return Object.entries(style).filter(([, value]) => value !== void 0 && value !== "").map(([key, value]) => `${key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}:${value}`).join(";");
+}
+function textHtmlWithLineBreaks(html, underlineLinks, linkColor) {
+  return paragraphAwareLineBreaks(
+    emailTransformHtml(
+      markdownLinksToAnchors(html, underlineLinks, linkColor),
+      underlineLinks,
+      linkColor
+    )
+  );
+}
+function paragraphAwareLineBreaks(html) {
+  const normalizedHtml = html.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const paragraphTagRegex = /<p\b([^>]*)>/gi;
+  let currentIndex = 0;
+  let output = "";
+  let match = paragraphTagRegex.exec(normalizedHtml);
+  while (match) {
+    let plainSegment = normalizedHtml.slice(currentIndex, match.index);
+    if (plainSegment.endsWith("\n")) {
+      plainSegment = plainSegment.slice(0, -1);
+    }
+    output += lineBreaksForPlainTextSegment(plainSegment);
+    const contentStartIndex = paragraphTagRegex.lastIndex;
+    const closingIndex = normalizedHtml.toLowerCase().indexOf("</p>", contentStartIndex);
+    if (closingIndex === -1) {
+      output += lineBreaksForPlainTextSegment(normalizedHtml.slice(match.index));
+      currentIndex = normalizedHtml.length;
+      break;
+    }
+    output += emailParagraphHtml(match[1] ?? "", normalizedHtml.slice(contentStartIndex, closingIndex));
+    currentIndex = closingIndex + "</p>".length;
+    if (normalizedHtml[currentIndex] === "\n") {
+      currentIndex += 1;
+    }
+    paragraphTagRegex.lastIndex = currentIndex;
+    match = paragraphTagRegex.exec(normalizedHtml);
+  }
+  if (currentIndex < normalizedHtml.length) {
+    output += lineBreaksForPlainTextSegment(normalizedHtml.slice(currentIndex));
+  }
+  return output;
+}
+function lineBreaksForPlainTextSegment(segment) {
+  return segment.replace(/\n/g, "<br />");
+}
+function emailParagraphHtml(attrs, content) {
+  const textAlign = extractTextAlignFromAttributes(attrs);
+  const style = textAlign ? `margin:0;text-align:${escapeHtml(textAlign)};` : "margin:0;";
+  return `<p style="${style}">${lineBreaksForPlainTextSegment(content)}</p>`;
+}
+function extractTextAlignFromAttributes(attrs) {
+  const styleMatch = attrs.match(/style=(["'])(.*?)\1/i);
+  const style = styleMatch?.[2];
+  if (!style) {
+    return null;
+  }
+  const textAlignMatch = style.match(/(?:^|;)\s*text-align\s*:\s*(left|right|center|justify)\s*(?:;|$)/i);
+  return textAlignMatch?.[1]?.toLowerCase() ?? null;
+}
+function markdownLinksToAnchors(html, underlineLinks, linkColor) {
+  return html.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_match, label, rawHref, offset) => {
+    const href = ensureUrlHasProtocolForPreview(rawHref);
+    const textDecoration = getActiveSpanTextDecorationAtOffset(html, offset) ?? defaultLinkTextDecoration(underlineLinks);
+    const color = getActiveSpanColorAtOffset(html, offset) ?? defaultLinkColor(linkColor);
+    return `<a class="inherit-color" style="color: ${escapeHtml(color)} !important; text-decoration: ${escapeHtml(
+      textDecoration
+    )};" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`;
+  });
+}
+function emailTransformHtml(html, underlineLinks, linkColor) {
+  html = html.replace(/style="([^"]*font-size:\s*(\d+)px[^"]*)"/gi, (fullMatch, styleContent, fontSize) => {
+    if (/line-height\s*:/i.test(styleContent)) {
+      return fullMatch;
+    }
+    return `style="${styleContent}; line-height: ${textPixelLineHeight(Number(fontSize))};"`;
+  });
+  html = html.replace(
+    /(<span[^>]*>)?<a([^>]*)style="([^"]*?)"([^>]*)>(.*?)<\/a>/gi,
+    (_match, span, aAttrsStart, aStyle, aAttrsEnd, aContent) => {
+      const nextStyle = appendAnchorEmailStyle(
+        aStyle,
+        extractTextDecorationFromSpanTag(span) ?? defaultLinkTextDecoration(underlineLinks),
+        extractColorFromSpanTag(span) ?? defaultLinkColor(linkColor)
+      );
+      return `${span ?? ""}<a${ensureClassAttr(`${aAttrsStart}${aAttrsEnd}`, "inherit-color")} style="${nextStyle}">${aContent}</a>`;
+    }
+  );
+  html = html.replace(/(<span[^>]*>)?<a((?:(?!style=)[^>])*)>(.*?)<\/a>/gi, (_match, span, attrs, content) => {
+    const textDecoration = extractTextDecorationFromSpanTag(span) ?? defaultLinkTextDecoration(underlineLinks);
+    const color = extractColorFromSpanTag(span) ?? defaultLinkColor(linkColor);
+    return `${span ?? ""}<a${ensureClassAttr(attrs, "inherit-color")} style="${appendAnchorEmailStyle("", textDecoration, color)}">${content}</a>`;
+  });
+  return html;
+}
+function defaultLinkColor(linkColor) {
+  return linkColor.trim() === "" ? "inherit" : linkColor;
+}
+function defaultLinkTextDecoration(underlineLinks) {
+  return underlineLinks ? "underline" : "none";
+}
+function extractTextDecorationFromSpanTag(spanTag) {
+  if (!spanTag) {
+    return null;
+  }
+  const match = spanTag.match(/text-decoration\s*:\s*([^;"]+)/i);
+  return match?.[1]?.trim() ?? null;
+}
+function extractColorFromSpanTag(spanTag) {
+  if (!spanTag) {
+    return null;
+  }
+  const match = spanTag.match(/(?:^|[;"\s])color\s*:\s*([^;"]+)/i);
+  const color = match?.[1]?.trim();
+  if (!color || color === "undefined") {
+    return null;
+  }
+  return color;
+}
+function getActiveSpanTextDecorationAtOffset(html, offset) {
+  const spanStack = [];
+  const spanTagRegex = /<span[^>]*>|<\/span>/gi;
+  const prefix = html.slice(0, offset);
+  let match = spanTagRegex.exec(prefix);
+  while (match) {
+    if (match[0].startsWith("</")) {
+      spanStack.pop();
+    } else {
+      spanStack.push(extractTextDecorationFromSpanTag(match[0]));
+    }
+    match = spanTagRegex.exec(prefix);
+  }
+  for (let i = spanStack.length - 1; i >= 0; i -= 1) {
+    if (spanStack[i] !== null) {
+      return spanStack[i];
+    }
+  }
+  return null;
+}
+function getActiveSpanColorAtOffset(html, offset) {
+  const spanStack = [];
+  const spanTagRegex = /<span[^>]*>|<\/span>/gi;
+  const prefix = html.slice(0, offset);
+  let match = spanTagRegex.exec(prefix);
+  while (match) {
+    if (match[0].startsWith("</")) {
+      spanStack.pop();
+    } else {
+      spanStack.push(extractColorFromSpanTag(match[0]));
+    }
+    match = spanTagRegex.exec(prefix);
+  }
+  for (let i = spanStack.length - 1; i >= 0; i -= 1) {
+    if (spanStack[i] !== null) {
+      return spanStack[i];
+    }
+  }
+  return null;
+}
+function ensureClassAttr(attrs, className) {
+  if (/class="/i.test(attrs)) {
+    return attrs.replace(
+      /class="([^"]*)"/i,
+      (_match, classes) => classes.split(/\s+/).includes(className) ? `class="${classes}"` : `class="${classes} ${className}"`
+    );
+  }
+  return `${attrs} class="${className}"`;
+}
+function appendAnchorEmailStyle(style, textDecoration, color) {
+  const withColor = /color\s*:/i.test(style) ? style : `${style} color: ${color} !important;`;
+  return /text-decoration\s*:/i.test(withColor) ? withColor.trim() : `${withColor} text-decoration: ${textDecoration};`.trim();
+}
+function textPixelLineHeight(fontSize) {
+  if (fontSize < 12) {
+    return `${Math.round(1.5 * fontSize)}px`;
+  }
+  const t = (fontSize - 12) / (40 - 12);
+  const factor = 1.5 - 0.5 * t;
+  return `${Math.round(fontSize * factor)}px`;
+}
+function rawTableStyle(width, extra) {
+  return cssStyle({
+    borderCollapse: "collapse",
+    borderSpacing: 0,
+    margin: 0,
+    padding: 0,
+    tableLayout: "fixed",
+    width: `${width}px`,
+    ...extra
+  });
+}
+function rawCellStyle(width, extra) {
+  return cssStyle({
+    margin: 0,
+    padding: 0,
+    width: `${width}px`,
+    ...extra
+  });
+}
+function rawLayoutStyle(ls, extra) {
+  return cssStyle({
+    padding: layoutPaddingToCss(ls),
+    backgroundColor: backgroundColorFromAtomBg(ls.background),
+    backgroundImage: isImageBackground(ls.background) ? `url("${ls.background.imageUrl}")` : void 0,
+    backgroundSize: isImageBackground(ls.background) ? ls.background.imageSize : void 0,
+    backgroundRepeat: isImageBackground(ls.background) ? ls.background.imageRepeat ? "repeat" : "no-repeat" : void 0,
+    backgroundPosition: isImageBackground(ls.background) ? "center" : void 0,
+    ...ls.border !== "none" ? atomBorderToCss(ls.border) : {},
+    borderRadius: cornerRadiusToCssValue(ls.borderRadius),
+    boxSizing: "border-box",
+    ...extra
+  });
+}
+function renderRawWrappedBox(html, width, layout) {
+  const hasLayout = layoutPaddingToCss(layout) !== "0px 0px 0px 0px" || backgroundColorFromAtomBg(layout.background) || isImageBackground(layout.background) || layout.border !== "none" || cornerRadiusToCssValue(layout.borderRadius);
+  if (!hasLayout) {
+    return html;
+  }
+  return `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${width}" style="${rawTableStyle(
+    width
+  )}"><tr><td width="${width}" style="${rawCellStyle(width, { padding: 0 })};${rawLayoutStyle(layout)}">${html}</td></tr></table>`;
+}
+const RawHtml = ({ html }) => /* @__PURE__ */ React.createElement(MjmlRaw, { dangerouslySetInnerHTML: { __html: html } });
+function renderTextAtom(atom, ctx) {
   const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
   const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
   const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const cssStyles = textStyleToCss(resolvedText);
-  const inner = /* @__PURE__ */ React.createElement("span", { dangerouslySetInnerHTML: { __html: atom.text } });
-  if (atom.textType === "title" || atom.textType === "subtitle" || atom.textType === "heading") {
-    return /* @__PURE__ */ React.createElement(Heading, { as: headingLevel(atom.textType), style: { ...wrapperStyle, ...cssStyles, width: "100%" } }, inner);
-  }
-  return /* @__PURE__ */ React.createElement(Text, { style: { ...wrapperStyle, ...cssStyles, width: "100%" } }, inner);
-};
-const EmailButtonAtom = ({ atom, ctx }) => {
+  return /* @__PURE__ */ React.createElement(
+    MjmlText,
+    {
+      ...textStyleToMjmlProps(resolvedText),
+      ...mjmlLayoutProps(resolvedLayout),
+      cssClass: "atoms-text",
+      dangerouslySetInnerHTML: { __html: textHtmlWithLineBreaks(atom.text, ctx.underlineLinks, ctx.linkColor) }
+    }
+  );
+}
+function renderButtonAtom(atom, ctx) {
   const resolvedText = resolveTextStyles(atom.textStyles, ctx.globalAtomStyles.buttonStyles.textStyles);
   const resolvedInnerPadding = resolvePadding(atom.innerPadding, ctx.globalAtomStyles.buttonStyles.innerPadding);
   const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const cssStyles = textStyleToCss(resolvedText);
-  const buttonStyle = {
-    ...cssStyles,
-    display: "block",
-    width: "100%",
-    boxSizing: "border-box",
-    textDecoration: "none",
-    padding: `${resolvedInnerPadding.top}px ${resolvedInnerPadding.right}px ${resolvedInnerPadding.bottom}px ${resolvedInnerPadding.left}px`,
-    maxWidth: "100%"
-  };
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement(Button, { href: atom.href || "#", style: buttonStyle }, /* @__PURE__ */ React.createElement("span", { dangerouslySetInnerHTML: { __html: atom.text } })));
-};
-const EmailImageAtom = ({ atom, ctx }) => {
+  const href = atom.href ? ensureUrlHasProtocolForPreview(atom.href) : "#";
+  const width = roundWidth(ctx.contentWidthPx);
+  const widthProp = resolvedLayout.width.type === "content" ? void 0 : `${width}px`;
+  return /* @__PURE__ */ React.createElement(
+    MjmlButton,
+    {
+      ...textStyleToMjmlProps(resolvedText),
+      ...mjmlLayoutProps(resolvedLayout),
+      cssClass: "display-link-block",
+      href,
+      width: widthProp,
+      padding: layoutPaddingToCss(resolvedLayout),
+      innerPadding: paddingToCss(resolvedInnerPadding),
+      backgroundColor: backgroundColorFromAtomBg(resolvedLayout.background),
+      borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
+      dangerouslySetInnerHTML: { __html: atom.text }
+    }
+  );
+}
+function renderImageAtom(atom, ctx) {
   const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const imgStyle = {
-    width: "100%",
-    display: "block",
-    ...resolvedLayout.borderRadius ? { borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius) } : {}
-  };
-  const img = /* @__PURE__ */ React.createElement(Img, { src: atom.src, alt: "", style: imgStyle });
-  if (atom.href) {
-    return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement(Link, { href: ensureUrlHasProtocolForPreview(atom.href), style: { display: "inline-block", width: "100%" } }, img));
+  const width = roundWidth(ctx.contentWidthPx);
+  const height = scaledImageHeight(atom, width);
+  return /* @__PURE__ */ React.createElement(
+    MjmlImage,
+    {
+      ...mjmlLayoutProps(resolvedLayout),
+      src: atom.src,
+      href: atom.href ? ensureUrlHasProtocolForPreview(atom.href) : void 0,
+      alt: "",
+      width: `${width}px`,
+      height: height === void 0 ? void 0 : `${height}px`,
+      padding: layoutPaddingToCss(resolvedLayout),
+      borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius)
+    }
+  );
+}
+function scaledImageHeight(atom, width) {
+  if (atom.width <= 0 || atom.height <= 0) {
+    return void 0;
   }
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, img);
-};
-const EmailDividerAtom = ({ atom, ctx }) => {
+  return Math.max(1, Math.round(width * atom.height / atom.width));
+}
+function renderDividerAtom(atom, ctx) {
   const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
   const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
   return /* @__PURE__ */ React.createElement(
-    Hr,
+    MjmlDivider,
     {
-      style: {
-        ...wrapperStyle,
-        ...atomBorderToReactStyle(resolvedDivider)
-      }
+      ...mjmlLayoutProps(resolvedLayout),
+      borderColor: resolvedDivider.color,
+      borderStyle: resolvedDivider.style,
+      borderWidth: `${resolvedDivider.width}px`,
+      padding: layoutPaddingToCss(resolvedLayout)
     }
   );
-};
-const fieldBoxStyle = {
-  border: "1px solid #555",
-  borderRadius: 8,
-  boxSizing: "border-box",
-  color: "#999",
-  fontSize: 14,
-  minHeight: 40,
-  padding: "10px 12px",
-  width: "100%"
-};
-const EmailInputAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const resolvedText = resolveTextStyles(atom.textStyles, ctx.globalAtomStyles.inputStyles.textStyles);
-  const resolvedInnerPadding = resolvePadding(atom.innerPadding, ctx.globalAtomStyles.inputStyles.innerPadding);
-  const fieldStyle = {
-    ...fieldBoxStyle,
-    ...textStyleToCss(resolvedText),
-    backgroundColor: backgroundColorFromAtomBg(resolvedLayout.background),
-    border: resolvedLayout.border !== "none" ? `${resolvedLayout.border.width}px ${resolvedLayout.border.style} ${resolvedLayout.border.color}` : fieldBoxStyle.border,
-    borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
-    padding: `${resolvedInnerPadding.top}px ${resolvedInnerPadding.right}px ${resolvedInnerPadding.bottom}px ${resolvedInnerPadding.left}px`
-  };
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement("div", { style: fieldStyle }, atom.placeholder || "Text input"));
-};
-const EmailQuestionAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const resolvedInnerPadding = resolvePadding(atom.innerPadding, ctx.globalAtomStyles.questionStyles.innerPadding);
-  const dropdownStyle = {
-    ...fieldBoxStyle,
-    padding: `${resolvedInnerPadding.top}px ${resolvedInnerPadding.right}px ${resolvedInnerPadding.bottom}px ${resolvedInnerPadding.left}px`
-  };
-  const optionNodes = atom.children.map((option) => /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      key: option.id,
-      style: {
-        ...textStyleToCss(resolveTextStyles(option.textStyles, ctx.globalAtomStyles.optionStyles.textStyles)),
-        margin: "0 0 6px 0"
-      }
-    },
-    "[ ] ",
-    option.text
-  ));
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, atom.questionType === "dropdown" ? /* @__PURE__ */ React.createElement("div", { style: dropdownStyle }, "Select an option") : optionNodes);
-};
-const EmailOptionAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const resolvedText = resolveTextStyles(atom.textStyles, ctx.globalAtomStyles.optionStyles.textStyles);
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement(Text, { style: { ...textStyleToCss(resolvedText), margin: 0 } }, atom.text));
-};
-const EmailContestAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign);
-  const resolvedText = resolveTextStyles(atom.textStyles, ctx.globalAtomStyles.buttonStyles.textStyles);
-  const resolvedButtonLayout = resolvedLayout;
-  const resolvedInnerPadding = resolvePadding(atom.innerPadding, ctx.globalAtomStyles.buttonStyles.innerPadding);
-  const buttonBackground = resolvedButtonLayout.background !== "none" ? backgroundColorFromAtomBg(resolvedButtonLayout.background) : void 0;
-  const buttonStyle = {
-    ...textStyleToCss(resolvedText),
-    backgroundColor: buttonBackground,
-    borderRadius: cornerRadiusToCssValue(resolvedButtonLayout.borderRadius),
-    boxSizing: "border-box",
-    display: "block",
-    minHeight: Math.max(42, resolvedText.fontSizePx * 2.5),
-    padding: `${resolvedInnerPadding.top}px ${resolvedInnerPadding.right}px ${resolvedInnerPadding.bottom}px ${resolvedInnerPadding.left}px`,
-    textDecoration: "none",
-    width: "100%"
-  };
-  const label = atom.contestType === "facebook" ? "Share link on Facebook" : atom.contestType === "instagram" ? `Follow ${atom.identifier}` : "Share this contest";
-  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React.createElement(Button, { href: "#", style: buttonStyle }, label, " +", atom.entriesPerSubmission));
-};
-const EmailAutomationUpcomingEventsAtom = ({
-  atom,
-  ctx
-}) => {
-  return null;
-};
-const EmailAutomationTriggeredEventAtom = ({
-  atom,
-  ctx
-}) => {
-  return null;
-};
-const EmailFormAtom = ({ atom, ctx }) => {
-  const rowsAtom = {
-    atomKey: atom.atomKey,
-    type: "rows",
-    source: null,
-    children: atom.children,
-    rowsStyles: atom.rowsStyles,
-    layoutStyles: atom.layoutStyles
-  };
-  const belowSubmitRowsAtom = {
-    atomKey: atom.atomKey,
-    type: "rows",
-    source: null,
-    children: atom.belowSubmitChildren,
-    rowsStyles: null,
-    layoutStyles: null
-  };
-  return /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: rowsAtom, ctx }), atom.belowSubmitChildren.length > 0 && /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: belowSubmitRowsAtom, ctx }));
-};
-const EmailAtom = ({ atom, ctx }) => {
+}
+function renderColumnContentAtom(atom, ctx) {
   switch (atom.type) {
     case "text":
-      return /* @__PURE__ */ React.createElement(EmailTextAtom, { atom, ctx });
+      return React.cloneElement(renderTextAtom(atom, ctx), { key: ctx.keyPrefix });
     case "button":
-      return /* @__PURE__ */ React.createElement(EmailButtonAtom, { atom, ctx });
+      return React.cloneElement(renderButtonAtom(atom, ctx), { key: ctx.keyPrefix });
     case "image":
-      return /* @__PURE__ */ React.createElement(EmailImageAtom, { atom, ctx });
+      return React.cloneElement(renderImageAtom(atom, ctx), { key: ctx.keyPrefix });
     case "divider":
-      return /* @__PURE__ */ React.createElement(EmailDividerAtom, { atom, ctx });
-    case "option":
-      return /* @__PURE__ */ React.createElement(EmailOptionAtom, { atom, ctx });
+      return React.cloneElement(renderDividerAtom(atom, ctx), { key: ctx.keyPrefix });
     case "rows":
-      return /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom, ctx });
+      return renderRowsAsColumnContent(atom, ctx);
     case "columns":
-      return /* @__PURE__ */ React.createElement(EmailColumnsAtom, { atom, ctx });
-    case "input":
-      return /* @__PURE__ */ React.createElement(EmailInputAtom, { atom, ctx });
+      return /* @__PURE__ */ React.createElement(RawHtml, { key: ctx.keyPrefix, html: renderRawColumnsAtom(atom, ctx) });
+    case "automation-upcoming-events":
+    case "automation-triggered-event":
+    case "form":
     case "question":
-      return /* @__PURE__ */ React.createElement(EmailQuestionAtom, { atom, ctx });
+    case "input":
+    case "option":
     case "contest":
-      return /* @__PURE__ */ React.createElement(EmailContestAtom, { atom, ctx });
-    case "form":
-      return /* @__PURE__ */ React.createElement(EmailFormAtom, { atom, ctx });
+      return null;
+  }
+}
+function renderChildrenAsColumnContent({
+  children,
+  resolvedRows,
+  ctx
+}) {
+  const gap = resolvedRows.gap;
+  const nodes = [];
+  children.forEach((child, index) => {
+    if (index > 0 && gap > 0) {
+      nodes.push(
+        /* @__PURE__ */ React.createElement(
+          RawHtml,
+          {
+            key: `${ctx.keyPrefix}-gap-${index}`,
+            html: `<div style="height:${gap}px;line-height:${gap}px">&nbsp;</div>`
+          }
+        )
+      );
+    }
+    const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
+    const childOuterWidth = roundWidth(
+      calculateRowChildWidth({
+        contentWidth: ctx.contentWidthPx,
+        child,
+        globalAtomStyles: ctx.globalAtomStyles
+      })
+    );
+    const childContentWidth = roundWidth(computeAtomContentWidth(childOuterWidth, childLayout));
+    const childCtx = {
+      ...ctx,
+      contentWidthPx: childContentWidth,
+      parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign,
+      keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
+    };
+    nodes.push(renderColumnContentAtom(child, childCtx));
+  });
+  return nodes;
+}
+function renderRowsAsColumnContent(atom, ctx) {
+  const resolvedRows = resolveRowsStyles(atom.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles);
+  return renderChildrenAsColumnContent({ children: atom.children, resolvedRows, ctx });
+}
+function renderBodyAtom(atom, ctx) {
+  switch (atom.type) {
+    case "rows":
+      return renderRowsAsBodySections(atom, ctx);
+    case "columns":
+      return renderColumnsAsBodySection(atom, ctx);
+    case "text":
+    case "button":
+    case "image":
+    case "divider":
+      return renderLeafAsBodySection(atom, ctx);
     case "automation-upcoming-events":
-      return /* @__PURE__ */ React.createElement(EmailAutomationUpcomingEventsAtom, { atom, ctx });
     case "automation-triggered-event":
-      return /* @__PURE__ */ React.createElement(EmailAutomationTriggeredEventAtom, { atom, ctx });
+    case "form":
+    case "question":
+    case "input":
+    case "option":
+    case "contest":
+      return null;
   }
-};
-const EmailRowsAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+}
+function renderRowsAsBodySections(atom, ctx) {
+  const resolvedLayoutBase = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const resolvedLayout = ctx.suppressRowsBackgroundAtomKey === atom.atomKey ? suppressLayoutBackground(resolvedLayoutBase) : resolvedLayoutBase;
   const resolvedRows = resolveRowsStyles(atom.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign, "left");
-  const gap = resolvedRows.gap;
-  const innerWidth = computeAtomContentWidth(ctx.contentWidthPx, resolvedLayout);
-  const rowCrossAlign = resolvedRows.horizontalAlign === "left" ? "flex-start" : resolvedRows.horizontalAlign === "center" ? "center" : "flex-end";
-  const widthStyle = {
-    width: "100%",
-    ...resolvedLayout.width.max !== "none" ? { maxWidth: resolvedLayout.width.max } : {}
-  };
-  return /* @__PURE__ */ React.createElement(Section, { style: { ...wrapperStyle, ...widthStyle } }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: rowCrossAlign
-      }
-    },
-    atom.children.map((child, i) => {
-      const childResolved = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
-      const childMaxWidth = childResolved.width.max;
-      const slotOuterWidth = calculateRowChildWidth({
+  const outerWidth = boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
+  const innerWidth = roundWidth(computeAtomContentWidth(outerWidth, resolvedLayout));
+  if (atom.children.length === 0) {
+    return [
+      /* @__PURE__ */ React.createElement(MjmlSection, { key: `${ctx.keyPrefix}-empty`, ...mjmlLayoutProps(resolvedLayout) }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${innerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(MjmlText, { padding: "0" }, "\xA0")))
+    ];
+  }
+  return atom.children.map((child, index) => {
+    const childResolved = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
+    const childOuterWidth = roundWidth(
+      calculateRowChildWidth({
         contentWidth: innerWidth,
         child,
         globalAtomStyles: ctx.globalAtomStyles
+      })
+    );
+    const childContentWidth = roundWidth(computeAtomContentWidth(childOuterWidth, childResolved));
+    const childHorizontalAlign = effectiveBlockHorizontalAlign({
+      layoutHorizontalAlign: childResolved.horizontalAlign,
+      parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign
+    });
+    const childCtx = {
+      ...ctx,
+      contentWidthPx: childContentWidth,
+      parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign,
+      keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
+    };
+    if (child.type === "columns") {
+      return renderColumnsAsBodySection(child, childCtx, {
+        key: `${ctx.keyPrefix}-${child.atomKey}-${index}`,
+        paddingTop: index > 0 ? resolvedRows.gap : 0,
+        padding: rowChildSectionPadding(resolvedLayout, index, atom.children.length, resolvedRows.gap),
+        width: childOuterWidth,
+        align: childHorizontalAlign});
+    }
+    if (child.type === "rows") {
+      return renderLeafAsBodySection(child, childCtx, {
+        key: `${ctx.keyPrefix}-${child.atomKey}-${index}`,
+        paddingTop: index > 0 ? resolvedRows.gap : 0,
+        padding: rowChildSectionPadding(resolvedLayout, index, atom.children.length, resolvedRows.gap),
+        width: childOuterWidth,
+        align: childHorizontalAlign,
+        parentLayout: resolvedLayout
       });
-      const childContentWidthPx = computeAtomContentWidth(slotOuterWidth, childResolved);
-      const childWidthStyle = {
-        width: "100%",
-        ...childMaxWidth !== "none" ? { maxWidth: childMaxWidth } : {}
-      };
-      const gapStyle = i > 0 && gap > 0 ? { paddingTop: gap } : {};
-      const childCtx = {
-        ...ctx,
-        contentWidthPx: childContentWidthPx,
-        parentRowBlockHorizontalAlign: resolvedRows.horizontalAlign
-      };
-      return /* @__PURE__ */ React.createElement("div", { key: child.atomKey, style: { ...gapStyle, ...childWidthStyle } }, /* @__PURE__ */ React.createElement(EmailAtom, { atom: child, ctx: childCtx }));
-    })
-  ));
-};
-const EmailColumnsAtom = ({ atom, ctx }) => {
-  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+    }
+    return renderLeafAsBodySection(child, childCtx, {
+      key: `${ctx.keyPrefix}-${child.atomKey}-${index}`,
+      paddingTop: index > 0 ? resolvedRows.gap : 0,
+      padding: rowChildSectionPadding(resolvedLayout, index, atom.children.length, resolvedRows.gap),
+      width: childOuterWidth,
+      align: childHorizontalAlign,
+      parentLayout: resolvedLayout
+    });
+  });
+}
+function renderLeafAsBodySection(atom, ctx, opts) {
+  const width = opts?.width ?? ctx.contentWidthPx;
+  const sectionPaddingTop = opts?.paddingTop ?? 0;
+  const sectionLayout = opts?.parentLayout;
+  const sectionProps = compactRecord({
+    ...sectionLayout ? mjmlLayoutProps(sectionLayout) : {},
+    padding: opts?.padding ?? `${sectionPaddingTop}px 0 0 0`,
+    textAlign: opts?.align
+  });
+  return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${width}px`, padding: "0" }, renderColumnContentAtom(atom, { ...ctx, contentWidthPx: width })));
+}
+function renderColumnsAsBodySection(atom, ctx, opts) {
   const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
-  const wrapperStyle = layoutToWrapperStyle(resolvedLayout, ctx.parentRowBlockHorizontalAlign, "left");
-  const gap = resolvedCols.gap;
-  const gapPx = Math.max(0, Math.round(gap));
-  const innerWidth = computeAtomContentWidth(ctx.contentWidthPx, resolvedLayout);
-  const innerWidthPx = Math.max(0, Math.round(innerWidth));
-  const resolvedChildLayouts = atom.children.map(
-    (child) => resolveAtomLayoutStyles(child, ctx.globalAtomStyles)
-  );
-  const verticalAlignMap = {
-    top: "top",
-    middle: "middle",
-    bottom: "bottom"
-  };
-  const vAlign = verticalAlignMap[resolvedCols.verticalAlign] ?? "top";
-  const childCount = atom.children.length;
-  const totalGapPx = childCount > 1 ? gapPx * (childCount - 1) : 0;
-  const rawColumnWidths = childCount === 0 ? [] : calculateColumnChildWidths({
-    contentWidth: innerWidthPx,
+  if (resolvedCols.format === "table") {
+    return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0` }, /* @__PURE__ */ React.createElement(MjmlColumn, { padding: "0" }, /* @__PURE__ */ React.createElement(RawHtml, { html: renderRawColumnsAtom(atom, ctx) })));
+  }
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const outerWidth = opts?.width ?? boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
+  const innerWidth = roundWidth(computeAtomContentWidth(outerWidth, resolvedLayout));
+  const gapPx = Math.max(0, Math.round(resolvedCols.gap));
+  const columnWidths = calculateColumnChildWidthAllocation({
+    contentWidth: innerWidth,
     children: atom.children,
     gap: gapPx,
     globalAtomStyles: ctx.globalAtomStyles
+  }).widthsPx.map(roundWidth);
+  const groupWidth = roundWidth(
+    columnWidths.reduce((sum, width) => sum + width, 0) + gapPx * Math.max(0, atom.children.length - 1)
+  );
+  const vAlign = resolvedCols.contentVerticalAlign === "middle" ? "middle" : resolvedCols.contentVerticalAlign;
+  const sectionProps = compactRecord({
+    ...mjmlLayoutProps(resolvedLayout),
+    padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0`,
+    textAlign: opts?.align ?? resolvedCols.contentHorizontalAlign
   });
-  const columnWidthsPx = rawColumnWidths.map((w) => Math.round(w));
-  const columnsWidthSum = columnWidthsPx.reduce((a, b) => a + b, 0);
-  const totalTableWidth = columnsWidthSum + totalGapPx;
-  const horizontalAlign = resolvedCols.horizontalAlign;
-  const narrowColumnsMargins = horizontalAlign === "center" ? { marginLeft: "auto", marginRight: "auto" } : horizontalAlign === "right" ? { marginLeft: "auto", marginRight: "0" } : { marginLeft: "0", marginRight: "auto" };
-  const outerTableStyle = {
-    ...wrapperStyle,
-    width: totalTableWidth,
-    ...narrowColumnsMargins,
-    ...resolvedLayout.width.max !== "none" ? { maxWidth: resolvedLayout.width.max } : {}
-  };
-  const innerRowStyle = {
-    width: totalTableWidth,
-    tableLayout: "fixed"
-  };
-  const spacerStyle = {
-    width: gapPx,
-    padding: 0,
-    verticalAlign: vAlign,
-    lineHeight: 0,
-    fontSize: 0
-  };
-  const cells = [];
-  atom.children.forEach((child, i) => {
-    if (i > 0 && gapPx > 0) {
-      cells.push(
-        /* @__PURE__ */ React.createElement(Column, { key: `${atom.atomKey}-gap-${i}`, style: spacerStyle }, "\xA0")
-      );
-    }
-    const wPx = columnWidthsPx[i] ?? 0;
-    const childResolved = resolvedChildLayouts[i];
-    const childContentWidthPx = computeAtomContentWidth(wPx, childResolved);
-    const columnStyle = {
-      width: wPx,
-      verticalAlign: vAlign
-    };
+  return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(MjmlGroup, { width: `${groupWidth}px` }, atom.children.map((child, index) => {
+    const childWidth = columnWidths[index] ?? 0;
+    const gapBefore = index === 0 ? 0 : gapPx;
+    const columnWidth = childWidth + gapBefore;
+    const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
     const childCtx = {
       ...ctx,
-      contentWidthPx: childContentWidthPx,
-      parentRowBlockHorizontalAlign: null
+      contentWidthPx: roundWidth(computeAtomContentWidth(childWidth, childLayout)),
+      parentRowBlockHorizontalAlign: null,
+      keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
     };
-    cells.push(
-      /* @__PURE__ */ React.createElement(Column, { key: child.atomKey, style: columnStyle }, /* @__PURE__ */ React.createElement(EmailAtom, { atom: child, ctx: childCtx }))
-    );
-  });
-  return /* @__PURE__ */ React.createElement(Section, { style: outerTableStyle }, /* @__PURE__ */ React.createElement(Row, { style: innerRowStyle }, cells));
-};
-const hiddenPreheaderStyle = {
-  display: "none",
-  fontSize: "1px",
-  lineHeight: "1px",
-  maxHeight: 0,
-  maxWidth: 0,
-  opacity: 0,
-  overflow: "hidden"
-};
-const TopUnsubscribeBar = ({ unsubscribeLink }) => /* @__PURE__ */ React.createElement(
-  "table",
-  {
-    align: "center",
-    border: 0,
-    cellPadding: "0",
-    cellSpacing: "0",
-    role: "presentation",
-    style: { background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }
-  },
-  /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    "table",
-    {
-      align: "center",
-      border: 0,
-      cellPadding: "0",
-      cellSpacing: "0",
-      role: "presentation",
-      style: { width: "100%" }
-    },
-    /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-      "td",
+    return /* @__PURE__ */ React.createElement(
+      MjmlColumn,
       {
-        className: "top-unsubscribe",
-        style: {
-          fontSize: 0,
-          paddingTop: "16px",
-          paddingBottom: "16px",
-          textAlign: "left"
-        }
+        key: `${child.atomKey}-${index}`,
+        width: `${columnWidth}px`,
+        verticalAlign: vAlign,
+        padding: gapBefore === 0 ? "0" : `0 0 0 ${gapBefore}px`
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            fontFamily: "'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif",
-            fontSize: "14px",
-            fontWeight: "500",
-            lineHeight: "1",
-            textAlign: "left",
-            color: "#3771e0"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          "a",
-          {
-            style: { color: "#3771e0", textDecoration: "none" },
-            href: unsubscribeLink,
-            target: "_blank",
-            rel: "noopener noreferrer"
-          },
-          "Unsubscribe"
-        )
-      )
-    )))
-  )))))
-);
-const AtomDocumentContentsEmail = ({
-  document: doc,
-  options
-}) => {
-  const webFonts = collectFontFamilies(doc);
+      renderColumnContentAtom(child, childCtx)
+    );
+  })));
+}
+function renderRawAtom(atom, ctx) {
+  switch (atom.type) {
+    case "text":
+      return renderRawTextAtom(atom, ctx);
+    case "button":
+      return renderRawButtonAtom(atom, ctx);
+    case "image":
+      return renderRawImageAtom(atom, ctx);
+    case "divider":
+      return renderRawDividerAtom(atom, ctx);
+    case "rows":
+      return renderRawRowsAtom(atom, ctx);
+    case "columns":
+      return renderRawColumnsAtom(atom, ctx);
+    case "automation-upcoming-events":
+    case "automation-triggered-event":
+    case "form":
+    case "question":
+    case "input":
+    case "option":
+    case "contest":
+      return "";
+  }
+}
+function renderRawTextAtom(atom, ctx) {
+  const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
+  const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const width = roundWidth(ctx.contentWidthPx);
+  const html = `<div style="${cssStyle({ ...textStyleToCss(resolvedText), width: `${width}px`, wordBreak: "break-word" })}">${textHtmlWithLineBreaks(
+    atom.text,
+    ctx.underlineLinks,
+    ctx.linkColor
+  )}</div>`;
+  return renderRawWrappedBox(html, width, resolvedLayout);
+}
+function renderRawButtonAtom(atom, ctx) {
+  const resolvedText = resolveTextStyles(atom.textStyles, ctx.globalAtomStyles.buttonStyles.textStyles);
+  const resolvedInnerPadding = resolvePadding(atom.innerPadding, ctx.globalAtomStyles.buttonStyles.innerPadding);
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const width = roundWidth(ctx.contentWidthPx);
+  const href = atom.href ? ensureUrlHasProtocolForPreview(atom.href) : "#";
+  const backgroundColor = backgroundColorFromAtomBg(resolvedLayout.background);
+  const borderRadius = cornerRadiusToCssValue(resolvedLayout.borderRadius);
+  const isContentWidth = resolvedLayout.width.type === "content";
+  const linkStyle = cssStyle({
+    ...textStyleToCss(resolvedText),
+    backgroundColor,
+    borderRadius,
+    display: isContentWidth ? "inline-block" : "block",
+    padding: paddingToCss(resolvedInnerPadding),
+    textDecoration: "none",
+    width: isContentWidth ? void 0 : `${width}px`,
+    maxWidth: isContentWidth ? `${width}px` : void 0,
+    boxSizing: "border-box"
+  });
+  const tableWidthAttribute = isContentWidth ? "" : ` width="${width}"`;
+  const tableStyle = isContentWidth ? cssStyle({ borderCollapse: "separate" }) : rawTableStyle(width, { borderCollapse: "separate" });
+  const cellStyle = isContentWidth ? cssStyle({ backgroundColor, borderRadius }) : rawCellStyle(width, { backgroundColor, borderRadius });
+  const html = `<table class="display-link-block" role="presentation" border="0" cellpadding="0" cellspacing="0"${tableWidthAttribute} style="${tableStyle}"><tr><td align="center" bgcolor="${escapeHtml(backgroundColor ?? "")}" style="${cellStyle}"><a href="${escapeHtml(href)}" target="_blank" style="${linkStyle}">${atom.text}</a></td></tr></table>`;
+  return renderRawWrappedBox(html, width, resolvedLayout);
+}
+function renderRawImageAtom(atom, ctx) {
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const width = roundWidth(ctx.contentWidthPx);
+  const height = scaledImageHeight(atom, width);
+  const imageStyle = cssStyle({
+    borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
+    display: "block",
+    width: `${width}px`,
+    height: height === void 0 ? void 0 : `${height}px`
+  });
+  const heightAttribute = height === void 0 ? "" : ` height="${height}"`;
+  const image = `<img src="${escapeHtml(atom.src)}" alt="" width="${width}"${heightAttribute} style="${imageStyle}">`;
+  const html = atom.href ? `<a href="${escapeHtml(ensureUrlHasProtocolForPreview(atom.href))}" target="_blank" style="${cssStyle({
+    display: "inline-block",
+    width: `${width}px`
+  })}">${image}</a>` : image;
+  return renderRawWrappedBox(html, width, resolvedLayout);
+}
+function renderRawDividerAtom(atom, ctx) {
+  const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const width = roundWidth(ctx.contentWidthPx);
+  const dividerStyle = cssStyle({
+    borderTop: `${resolvedDivider.width}px ${resolvedDivider.style} ${resolvedDivider.color}`,
+    width: `${width}px`,
+    margin: 0
+  });
+  return renderRawWrappedBox(`<div style="${dividerStyle}"></div>`, width, resolvedLayout);
+}
+function renderRawChildrenRows({
+  children,
+  resolvedLayout,
+  resolvedRows,
+  ctx
+}) {
+  const outerWidth = boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
+  const innerWidth = roundWidth(computeAtomContentWidth(outerWidth, resolvedLayout));
+  const rows = children.map((child, index) => {
+    const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
+    const childOuterWidth = roundWidth(
+      calculateRowChildWidth({
+        contentWidth: innerWidth,
+        child,
+        globalAtomStyles: ctx.globalAtomStyles
+      })
+    );
+    const childContentWidth = roundWidth(computeAtomContentWidth(childOuterWidth, childLayout));
+    const childAlign = effectiveBlockHorizontalAlign({
+      layoutHorizontalAlign: childLayout.horizontalAlign,
+      parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign
+    });
+    const childHtml = renderRawAtom(child, {
+      ...ctx,
+      contentWidthPx: childContentWidth,
+      parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign,
+      keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
+    });
+    return `<tr><td width="${innerWidth}" align="${childAlign}" style="${rawCellStyle(innerWidth, {
+      paddingTop: index > 0 && resolvedRows.gap > 0 ? `${resolvedRows.gap}px` : void 0
+    })}">${childHtml}</td></tr>`;
+  }).join("");
+  const table = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${innerWidth}" style="${rawTableStyle(
+    innerWidth
+  )}">${rows}</table>`;
+  return renderRawWrappedBox(table, outerWidth, resolvedLayout);
+}
+function renderRawRowsAtom(atom, ctx) {
+  return renderRawChildrenRows({
+    children: atom.children,
+    resolvedLayout: resolveAtomLayoutStyles(atom, ctx.globalAtomStyles),
+    resolvedRows: resolveRowsStyles(atom.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles),
+    ctx
+  });
+}
+function renderRawColumnsAtom(atom, ctx) {
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
+  const gapPx = Math.max(0, Math.round(resolvedCols.gap));
+  const verticalGapPx = Math.max(0, Math.round(resolvedCols.verticalGap));
+  const outerWidth = boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
+  const innerWidth = roundWidth(computeAtomContentWidth(outerWidth, resolvedLayout));
+  const columnWidths = calculateColumnChildWidthAllocation({
+    contentWidth: innerWidth,
+    children: atom.children,
+    gap: gapPx,
+    globalAtomStyles: ctx.globalAtomStyles
+  }).widthsPx.map(roundWidth);
+  const maxRows = Math.max(1, ...atom.children.map((child) => child.type === "rows" ? child.children.length : 1));
+  const vAlign = resolvedCols.contentVerticalAlign === "middle" ? "middle" : resolvedCols.contentVerticalAlign;
+  const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
+    const cells = atom.children.map((child, columnIndex) => {
+      const columnWidth = columnWidths[columnIndex] ?? 0;
+      const rowChild = child.type === "rows" ? child.children[rowIndex] : rowIndex === 0 ? child : null;
+      const rowStyles = child.type === "rows" ? resolveRowsStyles(child.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles) : ctx.globalAtomStyles.rowsStyles.rowsStyles;
+      const cellHtml = rowChild ? (() => {
+        const rowChildLayout = resolveAtomLayoutStyles(rowChild, ctx.globalAtomStyles);
+        const rowChildOuterWidth = roundWidth(
+          calculateRowChildWidth({
+            contentWidth: columnWidth,
+            child: rowChild,
+            globalAtomStyles: ctx.globalAtomStyles
+          })
+        );
+        const rowChildContentWidth = roundWidth(
+          computeAtomContentWidth(rowChildOuterWidth, rowChildLayout)
+        );
+        return renderRawAtom(rowChild, {
+          ...ctx,
+          contentWidthPx: rowChildContentWidth,
+          parentRowBlockHorizontalAlign: rowStyles.contentHorizontalAlign,
+          keyPrefix: `${ctx.keyPrefix}-${rowChild.atomKey}-${rowIndex}-${columnIndex}`
+        });
+      })() : "&nbsp;";
+      const gapCell = columnIndex > 0 && gapPx > 0 ? `<td width="${gapPx}" valign="${vAlign}" style="${rawCellStyle(gapPx, {
+        fontSize: 0,
+        lineHeight: 0,
+        verticalAlign: vAlign
+      })}">&nbsp;</td>` : "";
+      const cellVerticalAlign = rowChild?.type === "image" ? "middle" : vAlign;
+      return `${gapCell}<td width="${columnWidth}" valign="${cellVerticalAlign}" style="${rawCellStyle(columnWidth, {
+        paddingTop: rowIndex > 0 && verticalGapPx > 0 ? `${verticalGapPx}px` : void 0,
+        verticalAlign: cellVerticalAlign
+      })}">${cellHtml}</td>`;
+    }).join("");
+    return `<tr>${cells}</tr>`;
+  }).join("");
+  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0) + gapPx * Math.max(0, atom.children.length - 1);
+  const table = `<div class="table-min-width-100"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${totalWidth}" align="${alignAttr(
+    resolvedCols.contentHorizontalAlign
+  )}" style="${rawTableStyle(totalWidth)}">${rows}</table></div>`;
+  return renderRawWrappedBox(table, outerWidth, resolvedLayout);
+}
+function topUnsubscribeHtml(unsubscribeLink) {
+  return `<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fff;background-color:#fff;width:100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"><tr><td class="top-unsubscribe" style="font-size:0;padding-top:16px;padding-bottom:16px;text-align:left"><div style="font-family:'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;line-height:1;text-align:left;color:#3771e0"><a style="color:#3771e0;text-decoration:none" href="${escapeHtml(
+    unsubscribeLink
+  )}" target="_blank" rel="noopener noreferrer">Unsubscribe</a></div></td></tr></table></td></tr></table>`;
+}
+function preheaderHtml(text) {
+  return `<div class="preview-text" style="display:none!important;overflow:hidden;max-width:0;max-height:0;font-size:1px;line-height:1px;opacity:0">${escapeHtml(
+    text
+  )}${ZWNJ_PADDING.repeat(10)}</div>`;
+}
+const AtomDocumentContentsEmail = ({ document: doc, options }) => {
+  const rootLayout = resolveAtomLayoutStyles(doc.rootRow, doc.globalAtomStyles);
+  const canvasBackground = doc.canvasBackground;
+  const bodyBackground = isImageBackground(canvasBackground) || canvasBackground === "none" && isImageBackground(rootLayout.background) ? canvasBackground === "none" ? rootLayout.background : canvasBackground : rootLayout.background;
+  const shouldSuppressRootRowsBackground = canvasBackground === "none" && isImageBackground(rootLayout.background);
+  const bodyBackgroundColor = backgroundColorFromAtomBg(bodyBackground);
+  const bodyBackgroundCss = isImageBackground(bodyBackground) ? `
+            .atoms-body > div {
+                background-image: url("${bodyBackground.imageUrl}");
+                background-size: ${bodyBackground.imageSize};
+                background-repeat: ${bodyBackground.imageRepeat ? "repeat" : "no-repeat"};
+                background-position: center;
+            }
+        ` : "";
   const ctx = {
     globalAtomStyles: doc.globalAtomStyles,
+    linkColor: doc.linkColor,
+    underlineLinks: doc.underlineLinks,
     contentWidthPx: doc.maxWidth,
-    parentRowBlockHorizontalAlign: null
+    parentRowBlockHorizontalAlign: null,
+    keyPrefix: "root",
+    suppressRowsBackgroundAtomKey: shouldSuppressRootRowsBackground ? doc.rootRow.atomKey : void 0
   };
-  const resolvedRootLayoutStyles = resolveAtomLayoutStyles(doc.rootRow, doc.globalAtomStyles);
-  const bodyBackgroundColor = resolvedRootLayoutStyles.background === "none" ? void 0 : backgroundColorFromAtomBg(resolvedRootLayoutStyles.background);
-  return /* @__PURE__ */ React.createElement(Html, { lang: "en", dir: "ltr" }, /* @__PURE__ */ React.createElement(Head, null, webFonts.map((fontFamily) => /* @__PURE__ */ React.createElement(
-    "link",
-    {
-      key: fontFamily,
-      rel: "stylesheet",
-      href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@100;200;300;400;500;600;700;800;900&display=swap`
-    }
-  ))), /* @__PURE__ */ React.createElement(Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.topUnsubscribeLink ? /* @__PURE__ */ React.createElement(TopUnsubscribeBar, { unsubscribeLink: options.topUnsubscribeLink }) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
-    Img,
+  return /* @__PURE__ */ React.createElement(Mjml, null, /* @__PURE__ */ React.createElement(MjmlHead, null, /* @__PURE__ */ React.createElement(MjmlStyle, null, `
+                    ${COMMON_CSS}
+                    @media screen and (max-width:600px) {
+                        .top-unsubscribe {
+                            padding-left: 22px;
+                            padding-right: 22px;
+                        }
+                    }
+                    .atoms-text div {
+                        white-space: normal;
+                        word-break: break-word;
+                    }
+                    ${bodyBackgroundCss}
+                `)), /* @__PURE__ */ React.createElement(MjmlBody, { width: doc.maxWidth, backgroundColor: bodyBackgroundColor, cssClass: "atoms-body" }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement(RawHtml, { html: preheaderHtml(options.emailPreviewText) }) : null, options?.topUnsubscribeLink ? /* @__PURE__ */ React.createElement(RawHtml, { html: topUnsubscribeHtml(options.topUnsubscribeLink) }) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement(RawHtml, { html: options.automationPreviewHeaderHtml }) : null, renderBodyAtom(doc.rootRow, ctx), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(MjmlSection, { padding: "0" }, /* @__PURE__ */ React.createElement(MjmlColumn, null, /* @__PURE__ */ React.createElement(MjmlText, { color: "#999999", fontSize: "12px", align: "center", padding: "0" }, "Powered by", " ", /* @__PURE__ */ React.createElement("a", { href: options.cymbalBrandingUrl, target: "_blank", style: { color: "#999999" } }, "Cymbal")))) : null, options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
+    RawHtml,
     {
-      src: options.trackingPixelUrl,
-      width: "1",
-      height: "1",
-      style: { display: "none", height: 1, width: 1 },
-      alt: ""
+      html: `<img src="${escapeHtml(
+        options.trackingPixelUrl
+      )}" width="1" height="1" style="display:none;height:1px;width:1px" alt="">`
     }
   ) : null));
 };
 async function renderAtomDocumentToHtml(doc, options) {
-  return render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc, options }));
+  const mjml = renderToMjml(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc, options }));
+  const result = await mjml2html(mjml, { keepComments: false, beautify: false, minify: true });
+  if (typeof result === "string") {
+    return result;
+  }
+  const errors = result.errors ?? [];
+  if (errors.length > 0) {
+    throw new Error(`MJML render failed: ${errors.map((error) => error.formattedMessage).join("; ")}`);
+  }
+  return result.html;
 }
 
 export { renderAtomDocumentToHtml };