@cymbal/atoms-email-renderer 0.0.0

package/dist/index.mjs

@@ -0,0 +1,964 @@
+import { render, Html, Head, Body, Container, Section, Button, Text, Column, Row, Hr, Img, Link, Heading } from '@react-email/components';
+import React from 'react';
+import { defaultStyles } from '@cymbal/legos';
+import '@primer/octicons-react';
+import 'date-fns';
+import 'date-fns-tz';
+import 'slate';
+import 'date-fns/addMinutes';
+import 'date-fns/differenceInMinutes';
+import 'date-fns/format';
+import 'date-fns/addHours';
+import 'date-fns/differenceInHours';
+import 'date-fns/getHours';
+import 'date-fns/getMinutes';
+import 'date-fns/isValid';
+import 'date-fns/parse';
+import 'slate-react';
+import 'uuid';
+import '@dnd-kit/core';
+
+const envVariables = {
+  etixOAuth2Params: {
+    clientId: process.env.ETIX_OAUTH2_CLIENT_ID ?? "",
+    clientSecret: process.env.ETIX_OAUTH2_CLIENT_SECRET ?? "",
+    redirectUri: "https://manager.cymbal.co/oauth2/etix/callback"
+  },
+  eventbriteOAuth2Params: {
+    apiKey: process.env.EVENTBRITE_OAUTH2_API_KEY ?? "",
+    clientSecret: process.env.EVENTBRITE_OAUTH2_CLIENT_SECRET ?? ""
+  },
+  shopifyOAuth2Params: {
+    clientId: process.env.SHOPIFY_OAUTH2_CLIENT_ID ?? "",
+    clientSecret: process.env.SHOPIFY_OAUTH2_CLIENT_SECRET ?? ""
+  },
+  universeOAuth2Params: {
+    clientId: "26360beb48fefbbb4c45e0e4053123272a03fd4cf3eae54f5dd4620520c819d3",
+    clientSecret: "4e46048f9a7c74271b9907f25663dd5d9131159b70dea225a6808f8d2200beab",
+    redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
+  },
+  turnstileSecretKey: process.env.TURNSTILE_SECRET_KEY ?? ""
+};
+const envConfigRecord = {
+  development: {
+    ...envVariables,
+    eventbriteOAuth2Params: {
+      ...envVariables.eventbriteOAuth2Params,
+      redirectUri: "http://localhost:3031/oauth2/eventbrite/callback"
+    },
+    shopifyOAuth2Params: {
+      ...envVariables.shopifyOAuth2Params,
+      redirectUri: "http://localhost:3031/oauth2/shopify/callback"
+    },
+    universeOAuth2Params: {
+      ...envVariables.universeOAuth2Params,
+      redirectUri: "https://localhost:3031/oauth2/universe/callback"
+    },
+    showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
+    showclixEventBaseUrl: "https://www-demo.showclix.com/event"
+  },
+  staging: {
+    ...envVariables,
+    eventbriteOAuth2Params: {
+      ...envVariables.eventbriteOAuth2Params,
+      redirectUri: "https://staging-manager.cymbal.co/oauth2/eventbrite/callback"
+    },
+    shopifyOAuth2Params: {
+      ...envVariables.shopifyOAuth2Params,
+      redirectUri: "https://staging-manager.cymbal.co/oauth2/shopify/callback"
+    },
+    universeOAuth2Params: {
+      ...envVariables.universeOAuth2Params,
+      redirectUri: "https://staging-manager.cymbal.co/oauth2/universe/callback"
+    },
+    showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
+    showclixEventBaseUrl: "https://www-demo.showclix.com/event"
+  },
+  production: {
+    ...envVariables,
+    eventbriteOAuth2Params: {
+      ...envVariables.eventbriteOAuth2Params,
+      redirectUri: "https://manager.cymbal.co/oauth2/eventbrite/callback"
+    },
+    shopifyOAuth2Params: {
+      ...envVariables.shopifyOAuth2Params,
+      redirectUri: "https://manager.cymbal.co/oauth2/shopify/callback"
+    },
+    universeOAuth2Params: {
+      ...envVariables.universeOAuth2Params,
+      redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
+    },
+    showclixLoginUrl: "https://admin.showclix.com/api/registration",
+    showclixEventBaseUrl: "https://www.showclix.com/event"
+  }
+};
+const configRecord = {
+  development: {
+    env: "development",
+    host: "http://localhost:3031",
+    apiHost: "http://localhost:8080",
+    cachedApiHost: "http://localhost:8080",
+    homepageHost: "http://localhost:3029",
+    webHost: "http://localhost:3030",
+    trackingHost: "http://localhost:8081",
+    stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
+    turnstileSiteKey: "1x00000000000000000000AA"
+    // AA to always succeed, AB to always fail
+  },
+  staging: {
+    env: "staging",
+    host: "https://staging-manager.cymbal.co",
+    apiHost: "https://staging-api.cymbal.co",
+    cachedApiHost: "https://staging-cache-api.cymbal.co",
+    homepageHost: "https://staging.cymbal.co",
+    webHost: "https://staging-app.cymbal.co",
+    trackingHost: "https://staging.cy.link",
+    stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
+    turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
+  },
+  production: {
+    env: "production",
+    host: "https://manager.cymbal.co",
+    apiHost: "https://api.cymbal.co",
+    cachedApiHost: "https://cache-api.cymbal.co",
+    homepageHost: "https://cymbal.co",
+    webHost: "https://app.cymbal.co",
+    trackingHost: "https://cy.link",
+    stripeApiKey: "pk_live_51LKSx9DUFJHrciOVruTpEgzJ8HU2rnpfUoBvSFrwULMpRCzLoVaEeLI4crV4GhykMN2cgNAmmVhLbXK2rMiBIASp00HdegT6uO",
+    turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
+  }
+};
+const getEnv = () => {
+  switch (process.env.NEXT_PUBLIC_ENV) {
+    case "production":
+    case "staging":
+    case "development":
+      return process.env.NEXT_PUBLIC_ENV;
+    default:
+      return "development";
+  }
+};
+configRecord[getEnv()] ?? configRecord["development"];
+envConfigRecord[getEnv()] ?? envConfigRecord["development"];
+
+const allMarksKeys = [
+  "color",
+  "fontWeight",
+  "fontStyle",
+  "textDecoration",
+  "textTransform",
+  "fontSize",
+  "fontFamily",
+  "lineHeight",
+  "letterSpacing"
+];
+new Set(allMarksKeys);
+
+const MIN_LAYOUT_BASIS = 1;
+const DEFAULT_LAYOUT_BASIS = 100;
+
+({
+  linkColor: defaultStyles.page_style.link_color,
+  pagesMaxWidth: defaultStyles.page_style.pages_max_width,
+  underlineLinks: defaultStyles.page_style.underline_links
+});
+const zeroPadding = { top: 0, right: 0, bottom: 0, left: 0 };
+function normalizePadding(padding) {
+  if (padding === null || padding === void 0) {
+    return { ...zeroPadding };
+  }
+  return { ...zeroPadding, ...padding };
+}
+function resolveLayoutVisualStyleValue({
+  override,
+  global
+}) {
+  if (override === void 0 || override === null) {
+    return global;
+  }
+  return override;
+}
+function mergeResolvedLayoutWidth(overrides, global) {
+  if (overrides === null) {
+    return { ...global.width };
+  }
+  const widthOverride = overrides.width;
+  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
+  };
+}
+function resolveTextStyles(overrides, global) {
+  if (overrides === null) {
+    return { ...global };
+  }
+  return {
+    color: overrides.color ?? global.color,
+    fontWeight: overrides.fontWeight ?? global.fontWeight,
+    fontStyle: overrides.fontStyle ?? global.fontStyle,
+    textTransform: overrides.textTransform ?? global.textTransform,
+    textDecoration: overrides.textDecoration ?? global.textDecoration,
+    fontSizePx: overrides.fontSizePx ?? global.fontSizePx,
+    fontFamily: overrides.fontFamily ?? global.fontFamily,
+    align: overrides.align ?? global.align,
+    lineHeight: overrides.lineHeight ?? global.lineHeight,
+    letterSpacingEm: overrides.letterSpacingEm ?? global.letterSpacingEm
+  };
+}
+function resolveDividerStyles(overrides, global) {
+  if (overrides === null) {
+    return { ...global };
+  }
+  return {
+    color: overrides.color ?? global.color,
+    width: overrides.width ?? global.width,
+    style: overrides.style ?? global.style,
+    side: overrides.side ?? global.side
+  };
+}
+function resolveColumnsStyles(overrides, global) {
+  if (overrides === null) {
+    return { ...global };
+  }
+  return {
+    gap: overrides.gap ?? global.gap,
+    verticalAlign: overrides.verticalAlign ?? global.verticalAlign,
+    horizontalAlign: overrides.horizontalAlign ?? global.horizontalAlign,
+    format: overrides.format ?? global.format
+  };
+}
+function effectiveBlockHorizontalAlign({
+  layoutHorizontalAlign,
+  parentRowBlockHorizontalAlign
+}) {
+  if (layoutHorizontalAlign !== "inherit") {
+    return layoutHorizontalAlign;
+  }
+  if (parentRowBlockHorizontalAlign !== null) {
+    return parentRowBlockHorizontalAlign;
+  }
+  return "left";
+}
+function resolveRowsStyles(overrides, global) {
+  if (overrides === null) {
+    return { ...global };
+  }
+  return {
+    gap: overrides.gap ?? global.gap,
+    horizontalAlign: overrides.horizontalAlign ?? global.horizontalAlign
+  };
+}
+function resolvePadding(overrides, global) {
+  if (overrides === null) {
+    return { ...global };
+  }
+  return {
+    top: overrides.top ?? global.top,
+    right: overrides.right ?? global.right,
+    bottom: overrides.bottom ?? global.bottom,
+    left: overrides.left ?? global.left
+  };
+}
+function getRootTextStyles(textType, globalAtomStyles) {
+  switch (textType) {
+    case "title":
+      return globalAtomStyles.titleStyles;
+    case "subtitle":
+      return globalAtomStyles.subtitleStyles;
+    case "heading":
+      return globalAtomStyles.headingStyles;
+    case "subheading":
+      return globalAtomStyles.subheadingStyles;
+    case "section":
+      return globalAtomStyles.sectionStyles;
+    case "body":
+      return globalAtomStyles.bodyStyles;
+    case "accent":
+      return globalAtomStyles.accentStyles;
+    case "caption":
+      return globalAtomStyles.captionStyles;
+    case "promo":
+      return {
+        textStyles: globalAtomStyles.promoStyles.textStyles,
+        layoutStyles: {
+          ...globalAtomStyles.promoStyles.layoutStyles,
+          padding: globalAtomStyles.promoStyles.innerPadding
+        }
+      };
+  }
+}
+function getRootLayoutStyles(atom, globalAtomStyles) {
+  switch (atom.type) {
+    case "text":
+      return getRootTextStyles(atom.textType, globalAtomStyles).layoutStyles;
+    case "button":
+      return globalAtomStyles.buttonStyles.layoutStyles;
+    case "image":
+      return globalAtomStyles.imageStyles.layoutStyles;
+    case "divider":
+      return globalAtomStyles.dividerStyles.layoutStyles;
+    case "option":
+      return globalAtomStyles.optionStyles.layoutStyles;
+    case "input":
+      return globalAtomStyles.inputStyles.layoutStyles;
+    case "contest":
+      return globalAtomStyles.buttonStyles.layoutStyles;
+    case "question":
+      return globalAtomStyles.questionStyles.layoutStyles;
+    case "form":
+      return globalAtomStyles.formStyles.layoutStyles;
+    case "automation-upcoming-events":
+    case "automation-triggered-event":
+      return globalAtomStyles.rowsStyles.layoutStyles;
+    case "rows":
+      return globalAtomStyles.rowsStyles.layoutStyles;
+    case "columns":
+      return globalAtomStyles.columnsStyles.layoutStyles;
+  }
+}
+function resolveAtomLayoutStyles(atom, globalAtomStyles) {
+  const overrides = atom.layoutStyles;
+  const global = getRootLayoutStyles(atom, globalAtomStyles);
+  if (overrides === null) {
+    return { ...global };
+  }
+  const width = mergeResolvedLayoutWidth(overrides, global);
+  const background = resolveLayoutVisualStyleValue({
+    override: overrides.background,
+    global: global.background
+  });
+  const border = resolveLayoutVisualStyleValue({
+    override: overrides.border,
+    global: global.border
+  });
+  return {
+    margin: overrides.margin !== null ? overrides.margin : global.margin,
+    padding: normalizePadding(overrides.padding !== null ? overrides.padding : global.padding),
+    background,
+    border,
+    borderRadius: overrides.borderRadius ?? global.borderRadius,
+    width,
+    horizontalAlign: overrides.horizontalAlign ?? global.horizontalAlign
+  };
+}
+function horizontalBorderInsetPx(border) {
+  const borderWidth = border.width;
+  const side = border.side;
+  if (side === "all") {
+    return borderWidth * 2;
+  }
+  if (side === "left") {
+    return borderWidth;
+  }
+  if (side === "right") {
+    return borderWidth;
+  }
+  return 0;
+}
+function computeAtomContentWidth(boxWidth, layoutStyles) {
+  const borderW = layoutStyles.border !== "none" ? horizontalBorderInsetPx(layoutStyles.border) : 0;
+  const padLeft = layoutStyles.padding?.left ?? 0;
+  const padRight = layoutStyles.padding?.right ?? 0;
+  return Math.max(0, boxWidth - padLeft - padRight - borderW);
+}
+function calculateRowChildWidth({
+  contentWidth,
+  child,
+  globalAtomStyles
+}) {
+  const resolved = resolveAtomLayoutStyles(child, globalAtomStyles);
+  const cap = resolved.width.max;
+  if (cap === "none") {
+    return contentWidth;
+  }
+  return Math.min(cap, contentWidth);
+}
+const COLUMN_WIDTH_SPLIT_EPS = 1e-6;
+function calculateColumnChildWidths({
+  contentWidth,
+  children,
+  gap,
+  globalAtomStyles
+}) {
+  const childCount = children.length;
+  if (childCount === 0) {
+    return [];
+  }
+  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 widths = Array(childCount).fill(0);
+  const active = new Set(Array.from({ length: childCount }, (_, index) => index));
+  let remaining = distributable;
+  let guard = 0;
+  while (active.size > 0 && guard < childCount + 24) {
+    guard += 1;
+    const activeList = [...active].sort((indexA, indexB) => indexA - indexB);
+    const sumBasis = activeList.reduce((sum, index) => sum + bases[index], 0);
+    const denominator = sumBasis > 0 ? sumBasis : MIN_LAYOUT_BASIS;
+    const tentative = Array(childCount).fill(0);
+    for (const index of activeList) {
+      tentative[index] = bases[index] / denominator * remaining;
+    }
+    const clampedIndices = [];
+    for (const index of activeList) {
+      if (caps[index] < Number.POSITIVE_INFINITY && tentative[index] > caps[index] + COLUMN_WIDTH_SPLIT_EPS) {
+        clampedIndices.push(index);
+      }
+    }
+    if (clampedIndices.length === 0) {
+      for (const index of activeList) {
+        widths[index] = tentative[index];
+      }
+      break;
+    }
+    clampedIndices.sort((indexA, indexB) => indexA - indexB);
+    for (const index of clampedIndices) {
+      const assigned = caps[index];
+      widths[index] = assigned;
+      remaining -= assigned;
+      active.delete(index);
+    }
+    if (remaining <= COLUMN_WIDTH_SPLIT_EPS) {
+      for (const index of activeList) {
+        if (active.has(index)) {
+          widths[index] = 0;
+          active.delete(index);
+        }
+      }
+      break;
+    }
+  }
+  return widths;
+}
+
+const ATOM_SOCIAL_ORDINAL_TO_PLATFORM = {
+  facebookOrdinal: "facebook",
+  xOrdinal: "x",
+  instagramOrdinal: "instagram",
+  tiktokOrdinal: "tiktok",
+  youtubeOrdinal: "youtube",
+  websiteOrdinal: "website",
+  spotifyOrdinal: "spotify",
+  discordOrdinal: "discord",
+  soundcloudOrdinal: "soundcloud",
+  appleMusicOrdinal: "apple_music",
+  threadsOrdinal: "threads"
+};
+Object.entries(ATOM_SOCIAL_ORDINAL_TO_PLATFORM).reduce(
+  (accumulator, [ordinalKey, platform]) => {
+    accumulator[platform] = ordinalKey;
+    return accumulator;
+  },
+  {}
+);
+function ensureUrlHasProtocolForPreview(url) {
+  const trimmed = url.trim();
+  if (trimmed === "") {
+    return "";
+  }
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("mailto:")) {
+    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 };
+  }
+  if (side === "bottom") {
+    return { borderTop: none, borderRight: none, borderBottom: spec, borderLeft: none };
+  }
+  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));
+}
+function backgroundColorFromAtomBg(bg) {
+  if (bg === "none") {
+    return void 0;
+  }
+  if (bg.color) {
+    return bg.color;
+  }
+  return void 0;
+}
+function cornerRadiusToCssValue(radius) {
+  return `${radius.topLeft}px ${radius.topRight}px ${radius.bottomRight}px ${radius.bottomLeft}px`;
+}
+function layoutHorizontalBlockStyle(horizontalAlign) {
+  return {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: horizontalAlign === "left" ? "flex-start" : horizontalAlign === "center" ? "center" : "flex-end",
+    width: "100%"
+  };
+}
+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
+  });
+  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)
+  };
+}
+function textStyleToCss(styles) {
+  return {
+    color: styles.color,
+    fontWeight: Number(styles.fontWeight),
+    fontStyle: styles.fontStyle,
+    textTransform: styles.textTransform,
+    textDecoration: styles.textDecoration,
+    fontSize: styles.fontSizePx,
+    fontFamily: styles.fontFamily,
+    textAlign: styles.align,
+    lineHeight: styles.lineHeight,
+    letterSpacing: `${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";
+  }
+}
+const EmailTextAtom = ({ 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 }) => {
+  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 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));
+  }
+  return /* @__PURE__ */ React.createElement("div", { style: wrapperStyle }, img);
+};
+const EmailDividerAtom = ({ 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,
+    {
+      style: {
+        ...wrapperStyle,
+        ...atomBorderToReactStyle(resolvedDivider)
+      }
+    }
+  );
+};
+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 }) => {
+  switch (atom.type) {
+    case "text":
+      return /* @__PURE__ */ React.createElement(EmailTextAtom, { atom, ctx });
+    case "button":
+      return /* @__PURE__ */ React.createElement(EmailButtonAtom, { atom, ctx });
+    case "image":
+      return /* @__PURE__ */ React.createElement(EmailImageAtom, { atom, ctx });
+    case "divider":
+      return /* @__PURE__ */ React.createElement(EmailDividerAtom, { atom, ctx });
+    case "option":
+      return /* @__PURE__ */ React.createElement(EmailOptionAtom, { atom, ctx });
+    case "rows":
+      return /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom, ctx });
+    case "columns":
+      return /* @__PURE__ */ React.createElement(EmailColumnsAtom, { atom, ctx });
+    case "input":
+      return /* @__PURE__ */ React.createElement(EmailInputAtom, { atom, ctx });
+    case "question":
+      return /* @__PURE__ */ React.createElement(EmailQuestionAtom, { atom, ctx });
+    case "contest":
+      return /* @__PURE__ */ React.createElement(EmailContestAtom, { atom, ctx });
+    case "form":
+      return /* @__PURE__ */ React.createElement(EmailFormAtom, { atom, ctx });
+    case "automation-upcoming-events":
+      return /* @__PURE__ */ React.createElement(EmailAutomationUpcomingEventsAtom, { atom, ctx });
+    case "automation-triggered-event":
+      return /* @__PURE__ */ React.createElement(EmailAutomationTriggeredEventAtom, { atom, ctx });
+  }
+};
+const EmailRowsAtom = ({ atom, ctx }) => {
+  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
+  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({
+        contentWidth: innerWidth,
+        child,
+        globalAtomStyles: ctx.globalAtomStyles
+      });
+      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);
+  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,
+    children: atom.children,
+    gap: gapPx,
+    globalAtomStyles: ctx.globalAtomStyles
+  });
+  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
+    };
+    const childCtx = {
+      ...ctx,
+      contentWidthPx: childContentWidthPx,
+      parentRowBlockHorizontalAlign: null
+    };
+    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 AtomDocumentContentsEmail = ({ document: doc }) => {
+  const webFonts = collectFontFamilies(doc);
+  const ctx = {
+    globalAtomStyles: doc.globalAtomStyles,
+    contentWidthPx: doc.maxWidth,
+    parentRowBlockHorizontalAlign: null
+  };
+  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 } }, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }))));
+};
+async function renderAtomDocumentToHtml(doc) {
+  return render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc }));
+}
+
+export { renderAtomDocumentToHtml };