@matthesketh/utopia-email 0.0.1

package/dist/index.cjs

@@ -0,0 +1,776 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  EmailButton: () => EmailButton,
+  EmailCard: () => EmailCard,
+  EmailColumns: () => EmailColumns,
+  EmailDivider: () => EmailDivider,
+  EmailHeading: () => EmailHeading,
+  EmailImage: () => EmailImage,
+  EmailLayout: () => EmailLayout,
+  EmailSpacer: () => EmailSpacer,
+  EmailText: () => EmailText,
+  createMailer: () => createMailer,
+  htmlToText: () => htmlToText,
+  inlineCSS: () => inlineCSS,
+  renderEmail: () => renderEmail
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/render-email.ts
+var import_utopia_server = require("@matthesketh/utopia-server");
+
+// src/css-inliner.ts
+function parseCSS(css) {
+  const rules = [];
+  const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  let i = 0;
+  while (i < cleaned.length) {
+    while (i < cleaned.length && /\s/.test(cleaned[i])) i++;
+    if (i >= cleaned.length) break;
+    if (cleaned[i] === "@") {
+      let depth = 0;
+      while (i < cleaned.length) {
+        if (cleaned[i] === "{") depth++;
+        if (cleaned[i] === "}") {
+          depth--;
+          if (depth <= 0) {
+            i++;
+            break;
+          }
+        }
+        i++;
+      }
+      continue;
+    }
+    const selectorStart = i;
+    while (i < cleaned.length && cleaned[i] !== "{") i++;
+    if (i >= cleaned.length) break;
+    const selector = cleaned.slice(selectorStart, i).trim();
+    i++;
+    const declStart = i;
+    while (i < cleaned.length && cleaned[i] !== "}") i++;
+    const declarations = cleaned.slice(declStart, i).trim();
+    i++;
+    if (selector && declarations) {
+      for (const sel of selector.split(",")) {
+        const trimmed = sel.trim();
+        if (trimmed) {
+          rules.push({ selector: trimmed, declarations });
+        }
+      }
+    }
+  }
+  return rules;
+}
+function calculateSpecificity(selector) {
+  let ids = 0;
+  let classes = 0;
+  let types = 0;
+  const parts = selector.replace(/\s*>\s*/g, " ").trim();
+  const idMatches = parts.match(/#[a-zA-Z_-][\w-]*/g);
+  if (idMatches) ids = idMatches.length;
+  const classMatches = parts.match(/\.[a-zA-Z_-][\w-]*/g);
+  if (classMatches) classes += classMatches.length;
+  const attrMatches = parts.match(/\[[^\]]+\]/g);
+  if (attrMatches) classes += attrMatches.length;
+  const segments = parts.split(/[\s>+~]+/);
+  for (const seg of segments) {
+    const stripped = seg.replace(/#[a-zA-Z_-][\w-]*/g, "").replace(/\.[a-zA-Z_-][\w-]*/g, "").replace(/\[[^\]]+\]/g, "").replace(/:[\w-]+(\([^)]*\))?/g, "").trim();
+    if (stripped && stripped !== "*") {
+      types++;
+    }
+  }
+  return { ids, classes, types };
+}
+function compareSpecificity(a, b) {
+  if (a.ids !== b.ids) return a.ids - b.ids;
+  if (a.classes !== b.classes) return a.classes - b.classes;
+  return a.types - b.types;
+}
+function matchesSimpleSelector(selector, tag, classes, id, attrs) {
+  let remaining = selector;
+  const tagMatch = remaining.match(/^([a-zA-Z][\w-]*)/);
+  if (tagMatch) {
+    if (tag.toLowerCase() !== tagMatch[1].toLowerCase()) return false;
+    remaining = remaining.slice(tagMatch[1].length);
+  }
+  while (remaining.length > 0) {
+    if (remaining[0] === "#") {
+      const idMatch = remaining.match(/^#([a-zA-Z_-][\w-]*)/);
+      if (!idMatch) return false;
+      if (id !== idMatch[1]) return false;
+      remaining = remaining.slice(idMatch[0].length);
+    } else if (remaining[0] === ".") {
+      const classMatch = remaining.match(/^\.([a-zA-Z_-][\w-]*)/);
+      if (!classMatch) return false;
+      if (!classes.includes(classMatch[1])) return false;
+      remaining = remaining.slice(classMatch[0].length);
+    } else if (remaining[0] === "[") {
+      const attrMatch = remaining.match(/^\[([^\]]+)\]/);
+      if (!attrMatch) return false;
+      const attrExpr = attrMatch[1];
+      const eqIdx = attrExpr.indexOf("=");
+      if (eqIdx === -1) {
+        if (!(attrExpr.trim() in attrs)) return false;
+      } else {
+        const attrName = attrExpr.slice(0, eqIdx).replace(/[~|^$*]$/, "").trim();
+        const attrValue = attrExpr.slice(eqIdx + 1).replace(/^["']|["']$/g, "").trim();
+        if (attrs[attrName] !== attrValue) return false;
+      }
+      remaining = remaining.slice(attrMatch[0].length);
+    } else if (remaining[0] === ":") {
+      const pseudoMatch = remaining.match(/^:[\w-]+(\([^)]*\))?/);
+      if (!pseudoMatch) return false;
+      remaining = remaining.slice(pseudoMatch[0].length);
+    } else if (remaining[0] === "*") {
+      remaining = remaining.slice(1);
+    } else {
+      return false;
+    }
+  }
+  return true;
+}
+function selectorMatches(selector, element) {
+  if (selector.includes(">")) {
+    const parts2 = selector.split(/\s*>\s*/);
+    const targetSelector2 = parts2[parts2.length - 1].trim();
+    if (!matchesSimpleSelector(targetSelector2, element.tag, element.classes, element.id, element.attrs)) {
+      return false;
+    }
+    let ancestors = element.ancestors;
+    for (let i = parts2.length - 2; i >= 0; i--) {
+      const parentSelector = parts2[i].trim();
+      if (ancestors.length === 0) return false;
+      const parent = ancestors[ancestors.length - 1];
+      if (!matchesSimpleSelector(parentSelector, parent.tag, parent.classes, parent.id, parent.attrs)) {
+        return false;
+      }
+      ancestors = ancestors.slice(0, -1);
+    }
+    return true;
+  }
+  const parts = selector.split(/\s+/);
+  if (parts.length === 1) {
+    return matchesSimpleSelector(parts[0], element.tag, element.classes, element.id, element.attrs);
+  }
+  const targetSelector = parts[parts.length - 1];
+  if (!matchesSimpleSelector(targetSelector, element.tag, element.classes, element.id, element.attrs)) {
+    return false;
+  }
+  let ancestorIdx = element.ancestors.length - 1;
+  for (let i = parts.length - 2; i >= 0; i--) {
+    const ancestorSelector = parts[i];
+    let found = false;
+    while (ancestorIdx >= 0) {
+      const ancestor = element.ancestors[ancestorIdx];
+      ancestorIdx--;
+      if (matchesSimpleSelector(ancestorSelector, ancestor.tag, ancestor.classes, ancestor.id, ancestor.attrs)) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) return false;
+  }
+  return true;
+}
+function parseDeclarations(decl) {
+  const map = /* @__PURE__ */ new Map();
+  for (const part of decl.split(";")) {
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+    const colonIdx = trimmed.indexOf(":");
+    if (colonIdx === -1) continue;
+    const prop = trimmed.slice(0, colonIdx).trim();
+    const value = trimmed.slice(colonIdx + 1).trim();
+    if (prop && value) {
+      map.set(prop, value);
+    }
+  }
+  return map;
+}
+function mergeStyles(matches, existingStyle) {
+  matches.sort((a, b) => {
+    const specCmp = compareSpecificity(a.specificity, b.specificity);
+    return specCmp !== 0 ? specCmp : a.order - b.order;
+  });
+  const merged = /* @__PURE__ */ new Map();
+  for (const match of matches) {
+    const decls = parseDeclarations(match.declarations);
+    for (const [prop, value] of decls) {
+      merged.set(prop, value);
+    }
+  }
+  if (existingStyle) {
+    const existing = parseDeclarations(existingStyle);
+    for (const [prop, value] of existing) {
+      merged.set(prop, value);
+    }
+  }
+  const parts = [];
+  for (const [prop, value] of merged) {
+    parts.push(`${prop}: ${value}`);
+  }
+  return parts.join("; ");
+}
+function inlineCSS(html, css) {
+  if (!css.trim()) return html;
+  const rules = parseCSS(css);
+  if (rules.length === 0) return html;
+  const tagRegex = /<([a-zA-Z][\w-]*)(\s[^>]*?)?\s*\/?>/g;
+  const elements = [];
+  const ancestorStack = [];
+  const allTagsRegex = /<\/?([a-zA-Z][\w-]*)(\s[^>]*?)?\s*\/?>/g;
+  const voidElements = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  let match;
+  while ((match = allTagsRegex.exec(html)) !== null) {
+    const fullTag = match[0];
+    const isClosing = fullTag[1] === "/";
+    const tagName = match[1].toLowerCase();
+    const attrsStr = match[2] || "";
+    if (isClosing) {
+      for (let i = ancestorStack.length - 1; i >= 0; i--) {
+        if (ancestorStack[i].tag === tagName) {
+          ancestorStack.splice(i);
+          break;
+        }
+      }
+      continue;
+    }
+    const attrs = {};
+    const attrRegex = /([a-zA-Z_:][\w:.-]*)\s*(?:=\s*"([^"]*)")?/g;
+    let attrMatch;
+    while ((attrMatch = attrRegex.exec(attrsStr)) !== null) {
+      attrs[attrMatch[1]] = attrMatch[2] ?? "";
+    }
+    const classes = (attrs["class"] || "").split(/\s+/).filter(Boolean);
+    const id = attrs["id"] || "";
+    const existingStyle = attrs["style"] || "";
+    const element = {
+      fullTag,
+      start: match.index,
+      tag: tagName,
+      classes,
+      id,
+      attrs,
+      existingStyle,
+      ancestors: [...ancestorStack]
+    };
+    elements.push(element);
+    const isSelfClosing = fullTag.endsWith("/>") || voidElements.has(tagName);
+    if (!isSelfClosing) {
+      ancestorStack.push({ tag: tagName, classes, id, attrs });
+    }
+  }
+  const elementMatches = /* @__PURE__ */ new Map();
+  for (let ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
+    const rule = rules[ruleIdx];
+    const specificity = calculateSpecificity(rule.selector);
+    for (const element of elements) {
+      if (selectorMatches(rule.selector, element)) {
+        let matches = elementMatches.get(element);
+        if (!matches) {
+          matches = [];
+          elementMatches.set(element, matches);
+        }
+        matches.push({
+          declarations: rule.declarations,
+          specificity,
+          order: ruleIdx
+        });
+      }
+    }
+  }
+  const sortedElements = [...elementMatches.entries()].sort((a, b) => b[0].start - a[0].start);
+  let result = html;
+  for (const [element, matches] of sortedElements) {
+    const mergedStyle = mergeStyles(matches, element.existingStyle);
+    if (!mergedStyle) continue;
+    const originalTag = element.fullTag;
+    let newTag;
+    if (element.existingStyle) {
+      newTag = originalTag.replace(
+        /style="[^"]*"/,
+        `style="${mergedStyle}"`
+      );
+    } else {
+      const insertPos = originalTag.endsWith("/>") ? originalTag.length - 2 : originalTag.length - 1;
+      newTag = originalTag.slice(0, insertPos) + ` style="${mergedStyle}"` + originalTag.slice(insertPos);
+    }
+    result = result.slice(0, element.start) + newTag + result.slice(element.start + originalTag.length);
+  }
+  return result;
+}
+
+// src/html-to-text.ts
+var ENTITY_MAP = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+  "&nbsp;": " ",
+  "&ndash;": "\u2013",
+  "&mdash;": "\u2014",
+  "&copy;": "\xA9",
+  "&reg;": "\xAE",
+  "&trade;": "\u2122",
+  "&hellip;": "\u2026",
+  "&bull;": "\u2022"
+};
+function htmlToText(html) {
+  let text = html;
+  text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+  text = text.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, "");
+  text = text.replace(/<!--[\s\S]*?-->/g, "");
+  text = text.replace(/<a\s[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, (_, href, content) => {
+    const linkText = content.replace(/<[^>]+>/g, "").trim();
+    if (linkText && href && linkText !== href) {
+      return `${linkText} (${href})`;
+    }
+    return linkText || href;
+  });
+  text = text.replace(/<h[1-6][^>]*>([\s\S]*?)<\/h[1-6]>/gi, (_, content) => {
+    const headingText = content.replace(/<[^>]+>/g, "").trim();
+    return `
+
+${headingText.toUpperCase()}
+
+`;
+  });
+  text = text.replace(/<br\s*\/?>/gi, "\n");
+  text = text.replace(/<hr\s*\/?>/gi, "\n---\n");
+  text = text.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_, content) => {
+    const itemText = content.replace(/<[^>]+>/g, "").trim();
+    return `
+- ${itemText}`;
+  });
+  text = text.replace(/<\/(p|div|tr|table|blockquote)>/gi, "\n\n");
+  text = text.replace(/<\/(td|th)>/gi, "	");
+  text = text.replace(/<[^>]+>/g, "");
+  text = text.replace(/&[a-zA-Z0-9#]+;/g, (entity) => {
+    if (ENTITY_MAP[entity]) return ENTITY_MAP[entity];
+    const numMatch = entity.match(/^&#(\d+);$/);
+    if (numMatch) return String.fromCharCode(parseInt(numMatch[1], 10));
+    const hexMatch = entity.match(/^&#x([a-fA-F0-9]+);$/);
+    if (hexMatch) return String.fromCharCode(parseInt(hexMatch[1], 16));
+    return entity;
+  });
+  text = text.replace(/\t/g, "  ");
+  text = text.replace(/[^\S\n]+/g, " ");
+  text = text.replace(/\n{3,}/g, "\n\n");
+  text = text.split("\n").map((line) => line.trim()).join("\n");
+  text = text.trim();
+  return text;
+}
+
+// src/email-document.ts
+var EMAIL_RESET = `
+  body, #body-table { margin: 0; padding: 0; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+  table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+  td { border-collapse: collapse; }
+  img { border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
+  a img { border: none; }
+`.trim();
+function wrapEmailDocument(options) {
+  const { bodyHtml, css, previewText, headContent, skipStyleBlock } = options;
+  const previewHtml = previewText ? `<span style="display: none; font-size: 1px; color: #ffffff; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">${escapeHtml(previewText)}</span>` : "";
+  const styleBlock = !skipStyleBlock && css ? `<style type="text/css">
+${css}
+</style>` : "";
+  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <style type="text/css">
+  ${EMAIL_RESET}
+  </style>
+  ${styleBlock}
+  ${headContent || ""}
+</head>
+<body style="margin: 0; padding: 0;">
+  ${previewHtml}
+  <table role="presentation" id="body-table" cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%;">
+    <tr>
+      <td align="center" valign="top">
+        ${bodyHtml}
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/render-email.ts
+function renderEmail(component, props, options) {
+  const {
+    subject,
+    previewText,
+    skipInlining = false,
+    skipStyleBlock = false,
+    headContent
+  } = options ?? {};
+  const { html: bodyHtml, css } = (0, import_utopia_server.renderToString)(component, props);
+  const inlinedBody = skipInlining ? bodyHtml : inlineCSS(bodyHtml, css);
+  const fullHtml = wrapEmailDocument({
+    bodyHtml: inlinedBody,
+    css,
+    previewText,
+    headContent,
+    skipStyleBlock
+  });
+  const text = htmlToText(fullHtml);
+  return {
+    html: fullHtml,
+    text,
+    subject
+  };
+}
+
+// src/mailer.ts
+function createMailer(adapter) {
+  return {
+    async send(options) {
+      const {
+        to,
+        from,
+        subject,
+        component,
+        props,
+        renderOptions,
+        cc,
+        bcc,
+        replyTo,
+        attachments
+      } = options;
+      const rendered = renderEmail(component, props, {
+        ...renderOptions,
+        subject
+      });
+      const emailSubject = subject ?? rendered.subject ?? "";
+      return adapter.send({
+        to,
+        from,
+        subject: emailSubject,
+        html: rendered.html,
+        text: rendered.text,
+        cc,
+        bcc,
+        replyTo,
+        attachments
+      });
+    }
+  };
+}
+
+// src/components/email-layout.ts
+var import_ssr_runtime = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailLayout = {
+  setup: (props) => ({
+    width: props.width ?? 600,
+    backgroundColor: props.backgroundColor ?? "#ffffff",
+    fontFamily: props.fontFamily ?? "Arial, Helvetica, sans-serif"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime.createElement)("table");
+    (0, import_ssr_runtime.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime.setAttr)(table, "border", "0");
+    (0, import_ssr_runtime.setAttr)(table, "width", String(ctx.width));
+    (0, import_ssr_runtime.setAttr)(table, "style", `max-width: ${ctx.width}px; width: 100%; margin: 0 auto; background-color: ${ctx.backgroundColor}; font-family: ${ctx.fontFamily}`);
+    const tr = (0, import_ssr_runtime.createElement)("tr");
+    const td = (0, import_ssr_runtime.createElement)("td");
+    (0, import_ssr_runtime.setAttr)(td, "style", "padding: 0");
+    if (ctx.$slots.default) {
+      (0, import_ssr_runtime.appendChild)(td, ctx.$slots.default());
+    }
+    (0, import_ssr_runtime.appendChild)(tr, td);
+    (0, import_ssr_runtime.appendChild)(table, tr);
+    return table;
+  }
+};
+
+// src/components/email-button.ts
+var import_ssr_runtime2 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailButton = {
+  setup: (props) => ({
+    href: props.href ?? "#",
+    text: props.text ?? "Click Here",
+    color: props.color ?? "#007bff",
+    textColor: props.textColor ?? "#ffffff",
+    borderRadius: props.borderRadius ?? "4px"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime2.createElement)("table");
+    (0, import_ssr_runtime2.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime2.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime2.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime2.setAttr)(table, "border", "0");
+    const tr = (0, import_ssr_runtime2.createElement)("tr");
+    const td = (0, import_ssr_runtime2.createElement)("td");
+    (0, import_ssr_runtime2.setAttr)(td, "align", "center");
+    (0, import_ssr_runtime2.setAttr)(td, "style", `background-color: ${ctx.color}; border-radius: ${ctx.borderRadius}; padding: 12px 24px`);
+    const a = (0, import_ssr_runtime2.createElement)("a");
+    (0, import_ssr_runtime2.setAttr)(a, "href", ctx.href);
+    (0, import_ssr_runtime2.setAttr)(a, "style", `color: ${ctx.textColor}; text-decoration: none; font-size: 16px; font-weight: bold; display: inline-block`);
+    (0, import_ssr_runtime2.appendChild)(a, (0, import_ssr_runtime2.createTextNode)(ctx.text));
+    (0, import_ssr_runtime2.appendChild)(td, a);
+    (0, import_ssr_runtime2.appendChild)(tr, td);
+    (0, import_ssr_runtime2.appendChild)(table, tr);
+    return table;
+  }
+};
+
+// src/components/email-card.ts
+var import_ssr_runtime3 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailCard = {
+  setup: (props) => ({
+    backgroundColor: props.backgroundColor ?? "#ffffff",
+    padding: props.padding ?? "20px",
+    borderRadius: props.borderRadius ?? "4px",
+    borderColor: props.borderColor ?? "#e0e0e0"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime3.createElement)("table");
+    (0, import_ssr_runtime3.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime3.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime3.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime3.setAttr)(table, "border", "0");
+    (0, import_ssr_runtime3.setAttr)(table, "width", "100%");
+    const tr = (0, import_ssr_runtime3.createElement)("tr");
+    const td = (0, import_ssr_runtime3.createElement)("td");
+    (0, import_ssr_runtime3.setAttr)(td, "style", `background-color: ${ctx.backgroundColor}; padding: ${ctx.padding}; border-radius: ${ctx.borderRadius}; border: 1px solid ${ctx.borderColor}`);
+    if (ctx.$slots.default) {
+      (0, import_ssr_runtime3.appendChild)(td, ctx.$slots.default());
+    }
+    (0, import_ssr_runtime3.appendChild)(tr, td);
+    (0, import_ssr_runtime3.appendChild)(table, tr);
+    return table;
+  }
+};
+
+// src/components/email-divider.ts
+var import_ssr_runtime4 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailDivider = {
+  setup: (props) => ({
+    color: props.color ?? "#e0e0e0",
+    width: props.width ?? "100%",
+    height: props.height ?? "1px"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime4.createElement)("table");
+    (0, import_ssr_runtime4.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime4.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime4.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime4.setAttr)(table, "border", "0");
+    (0, import_ssr_runtime4.setAttr)(table, "width", ctx.width);
+    const tr = (0, import_ssr_runtime4.createElement)("tr");
+    const td = (0, import_ssr_runtime4.createElement)("td");
+    (0, import_ssr_runtime4.setAttr)(td, "style", `border-bottom: ${ctx.height} solid ${ctx.color}; font-size: 1px; line-height: 1px; height: ${ctx.height}`);
+    const nbsp = (0, import_ssr_runtime4.createElement)("span");
+    (0, import_ssr_runtime4.setAttr)(nbsp, "style", "display: block; height: 0; overflow: hidden");
+    (0, import_ssr_runtime4.appendChild)(td, nbsp);
+    (0, import_ssr_runtime4.appendChild)(tr, td);
+    (0, import_ssr_runtime4.appendChild)(table, tr);
+    return table;
+  }
+};
+
+// src/components/email-heading.ts
+var import_ssr_runtime5 = require("@matthesketh/utopia-server/ssr-runtime");
+var HEADING_SIZES = {
+  1: "28px",
+  2: "22px",
+  3: "18px"
+};
+var EmailHeading = {
+  setup: (props) => ({
+    level: Math.min(3, Math.max(1, props.level ?? 1)),
+    color: props.color ?? "#333333",
+    align: props.align ?? "left"
+  }),
+  render: (ctx) => {
+    const tag = `h${ctx.level}`;
+    const el = (0, import_ssr_runtime5.createElement)(tag);
+    const fontSize = HEADING_SIZES[ctx.level] || "28px";
+    (0, import_ssr_runtime5.setAttr)(el, "style", `margin: 0 0 10px 0; font-size: ${fontSize}; line-height: 1.3; color: ${ctx.color}; text-align: ${ctx.align}`);
+    if (ctx.$slots.default) {
+      (0, import_ssr_runtime5.appendChild)(el, ctx.$slots.default());
+    }
+    return el;
+  }
+};
+
+// src/components/email-text.ts
+var import_ssr_runtime6 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailText = {
+  setup: (props) => ({
+    color: props.color ?? "#333333",
+    fontSize: props.fontSize ?? "16px",
+    lineHeight: props.lineHeight ?? "1.5",
+    align: props.align ?? "left"
+  }),
+  render: (ctx) => {
+    const p = (0, import_ssr_runtime6.createElement)("p");
+    (0, import_ssr_runtime6.setAttr)(p, "style", `margin: 0 0 16px 0; font-size: ${ctx.fontSize}; line-height: ${ctx.lineHeight}; color: ${ctx.color}; text-align: ${ctx.align}`);
+    if (ctx.$slots.default) {
+      (0, import_ssr_runtime6.appendChild)(p, ctx.$slots.default());
+    }
+    return p;
+  }
+};
+
+// src/components/email-image.ts
+var import_ssr_runtime7 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailImage = {
+  setup: (props) => ({
+    src: props.src ?? "",
+    alt: props.alt ?? "",
+    width: props.width,
+    height: props.height,
+    align: props.align ?? "center"
+  }),
+  render: (ctx) => {
+    const img = (0, import_ssr_runtime7.createElement)("img");
+    (0, import_ssr_runtime7.setAttr)(img, "src", ctx.src);
+    (0, import_ssr_runtime7.setAttr)(img, "alt", ctx.alt);
+    let style = "display: block; border: 0; outline: none; text-decoration: none";
+    if (ctx.width) {
+      (0, import_ssr_runtime7.setAttr)(img, "width", String(ctx.width));
+      style += `; max-width: ${ctx.width}px`;
+    }
+    if (ctx.height) {
+      (0, import_ssr_runtime7.setAttr)(img, "height", String(ctx.height));
+    }
+    (0, import_ssr_runtime7.setAttr)(img, "style", style);
+    if (ctx.align !== "left") {
+      const wrapper = (0, import_ssr_runtime7.createElement)("div");
+      (0, import_ssr_runtime7.setAttr)(wrapper, "style", `text-align: ${ctx.align}`);
+      (0, import_ssr_runtime7.appendChild)(wrapper, img);
+      return wrapper;
+    }
+    return img;
+  }
+};
+
+// src/components/email-columns.ts
+var import_ssr_runtime8 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailColumns = {
+  setup: (props) => ({
+    columns: props.columns ?? 2,
+    gap: props.gap ?? "20px"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime8.createElement)("table");
+    (0, import_ssr_runtime8.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime8.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime8.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime8.setAttr)(table, "border", "0");
+    (0, import_ssr_runtime8.setAttr)(table, "width", "100%");
+    const tr = (0, import_ssr_runtime8.createElement)("tr");
+    const columnCount = Math.min(4, Math.max(1, ctx.columns));
+    const widthPercent = Math.floor(100 / columnCount);
+    for (let i = 0; i < columnCount; i++) {
+      const td = (0, import_ssr_runtime8.createElement)("td");
+      (0, import_ssr_runtime8.setAttr)(td, "width", `${widthPercent}%`);
+      (0, import_ssr_runtime8.setAttr)(td, "valign", "top");
+      const paddingLeft = i > 0 ? `padding-left: ${ctx.gap}` : "";
+      if (paddingLeft) {
+        (0, import_ssr_runtime8.setAttr)(td, "style", paddingLeft);
+      }
+      const slotName = `column-${i}`;
+      if (ctx.$slots[slotName]) {
+        (0, import_ssr_runtime8.appendChild)(td, ctx.$slots[slotName]());
+      } else if (i === 0 && ctx.$slots.default) {
+        (0, import_ssr_runtime8.appendChild)(td, ctx.$slots.default());
+      }
+      (0, import_ssr_runtime8.appendChild)(tr, td);
+    }
+    (0, import_ssr_runtime8.appendChild)(table, tr);
+    return table;
+  }
+};
+
+// src/components/email-spacer.ts
+var import_ssr_runtime9 = require("@matthesketh/utopia-server/ssr-runtime");
+var EmailSpacer = {
+  setup: (props) => ({
+    height: props.height ?? "20px"
+  }),
+  render: (ctx) => {
+    const table = (0, import_ssr_runtime9.createElement)("table");
+    (0, import_ssr_runtime9.setAttr)(table, "role", "presentation");
+    (0, import_ssr_runtime9.setAttr)(table, "cellpadding", "0");
+    (0, import_ssr_runtime9.setAttr)(table, "cellspacing", "0");
+    (0, import_ssr_runtime9.setAttr)(table, "border", "0");
+    (0, import_ssr_runtime9.setAttr)(table, "width", "100%");
+    const tr = (0, import_ssr_runtime9.createElement)("tr");
+    const td = (0, import_ssr_runtime9.createElement)("td");
+    (0, import_ssr_runtime9.setAttr)(td, "style", `height: ${ctx.height}; font-size: 1px; line-height: 1px`);
+    const span = (0, import_ssr_runtime9.createElement)("span");
+    (0, import_ssr_runtime9.setAttr)(span, "style", "display: block; height: 0; overflow: hidden");
+    (0, import_ssr_runtime9.appendChild)(td, span);
+    (0, import_ssr_runtime9.appendChild)(tr, td);
+    (0, import_ssr_runtime9.appendChild)(table, tr);
+    return table;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailButton,
+  EmailCard,
+  EmailColumns,
+  EmailDivider,
+  EmailHeading,
+  EmailImage,
+  EmailLayout,
+  EmailSpacer,
+  EmailText,
+  createMailer,
+  htmlToText,
+  inlineCSS,
+  renderEmail
+});