@dextinity/mail-react 2.0.0-canary-20260806092023 → 10.0.0-beta.0

package/lib/blocks/pixelImage/HtmlPixelImageBlock.d.ts

@@ -6,6 +6,7 @@ export type HtmlPixelImageBlockProps = Omit<ComponentProps<"img">, "src" | "widt
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlPixelImageBlock` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlPixelImageBlock`.
  */
 export declare function HtmlPixelImageBlock({ data, width, largestPossibleRenderWidth, aspectRatio, className, ...imgProps }: HtmlPixelImageBlockProps): ReactNode;

package/lib/blocks/pixelImage/HtmlPixelImageBlock.js

@@ -7,6 +7,7 @@ import { usePixelImageBlockData } from "./usePixelImageBlockData.js";
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlPixelImageBlock` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlPixelImageBlock`.
  */
 export function HtmlPixelImageBlock({ data, width, largestPossibleRenderWidth, aspectRatio, className, ...imgProps }) {

package/lib/blocks/richText/RichTextList.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { Theme, VariantName } from "../../theme/themeTypes.js";
+interface RichTextListItem {
+    key: string;
+    content: ReactNode;
+}
+interface RichTextListProps {
+    ordered?: boolean;
+    variant?: VariantName;
+    /** When true, the variant's spacing below the block applies below the last item. */
+    bottomSpacing?: boolean;
+    /** The nesting level the theme's marker receives. Zero for a list that is not nested. */
+    depth: number;
+    items: RichTextListItem[];
+}
+/** Renders one draft-js list as a table, because cell padding is the only list indent Outlook applies reliably. */
+export declare function RichTextList({ ordered, variant, bottomSpacing, depth, items }: RichTextListProps): ReactNode;
+export declare function generateRichTextListStyles(theme: Theme): string;
+export {};

package/lib/blocks/richText/RichTextList.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { generateResponsiveTextCss } from "../../components/text/generateResponsiveTextCss.js";
+import { useOutlookTextStyle } from "../../components/text/OutlookTextStyleContext.js";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { generateResponsiveTokenCss } from "../../styles/responsiveCss.js";
+import { defaultTheme } from "../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue, getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+function resolveMarker(marker, options) {
+    return typeof marker === "function" ? marker(options) : marker;
+}
+// Variant names come from the consumer, so the `variant` prefix keeps them apart from the package's own modifiers.
+function variantModifier(variantName) {
+    return `richTextBlock__list--variant${variantName.charAt(0).toUpperCase()}${variantName.slice(1)}`;
+}
+/** Renders one draft-js list as a table, because cell padding is the only list indent Outlook applies reliably. */
+export function RichTextList({ ordered, variant, bottomSpacing, depth, items }) {
+    const theme = useOptionalTheme();
+    const outlookTextStyle = useOutlookTextStyle();
+    const list = theme?.list ?? defaultTheme.list;
+    const themeText = theme?.text ?? {};
+    const { defaultVariant, variants, ...baseTextStyles } = themeText;
+    const activeVariant = variant ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = { ...baseTextStyles, ...variantStyles };
+    // The HTML parser can move a raw-HTML block's text element out of the table, so spacing set
+    // there would not apply to the list. The last row carries it instead.
+    const blockSpacing = bottomSpacing ? getDefaultOrUndefined(mergedStyles.bottomSpacing) : undefined;
+    // The cells cannot inherit the text styles: once the parser has moved the text element away,
+    // the nearest ancestor with a font size is MJML's column, whose font size is zero.
+    const fontStyle = {
+        ...outlookTextStyle,
+        ...(outlookTextStyle?.lineHeight !== undefined && { msoLineHeightRule: "exactly" }),
+    };
+    const itemSpacing = getDefaultFromResponsiveValue(list.itemSpacing);
+    const markerCellPadding = {
+        paddingLeft: getDefaultFromResponsiveValue(list.indent),
+        paddingRight: getDefaultFromResponsiveValue(list.markerGap),
+    };
+    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: "100%", className: clsx("richTextBlock__list", ordered ? "richTextBlock__list--ordered" : "richTextBlock__list--unordered", activeVariant && variantModifier(activeVariant)), style: { borderCollapse: "collapse" }, children: _jsx("tbody", { children: items.map((item, index) => {
+                const isLastItem = index === items.length - 1;
+                const spacingBelow = isLastItem ? blockSpacing : itemSpacing;
+                const cellStyle = { ...fontStyle, ...(spacingBelow !== undefined && { paddingBottom: spacingBelow }) };
+                return (_jsxs("tr", { className: clsx("richTextBlock__listItem", !isLastItem && "richTextBlock__listItem--itemSpacing", isLastItem && blockSpacing !== undefined && "richTextBlock__listItem--blockSpacing"), children: [_jsx("td", { className: "richTextBlock__listItemMarker", align: ordered ? "right" : "left", valign: "top", style: {
+                                ...cellStyle,
+                                ...markerCellPadding,
+                                whiteSpace: "nowrap", // The full-width text cell squeezes this column, so markers such as `10.` must stay on one line.
+                            }, children: resolveMarker(ordered ? list.orderedMarker : list.unorderedMarker, { index, depth }) }), _jsx("td", { className: "richTextBlock__listItemText", width: "100%", valign: "top", style: cellStyle, children: item.content })] }, item.key));
+            }) }) }));
+}
+export function generateRichTextListStyles(theme) {
+    return [
+        generateResponsiveListSpacingCss(theme),
+        generateResponsiveTextCss(theme, {
+            styleSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItemMarker, .${variantModifier(variantName)} .richTextBlock__listItemText`,
+            spacingSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItem--blockSpacing > td`,
+        }),
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+function generateResponsiveListSpacingCss(theme) {
+    return [
+        generateResponsiveTokenCss({
+            breakpoints: theme.breakpoints,
+            selector: ".richTextBlock__listItemMarker",
+            tokens: [
+                { value: theme.list.indent, cssProperty: "padding-left", unit: "px" },
+                { value: theme.list.markerGap, cssProperty: "padding-right", unit: "px" },
+            ],
+        }),
+        generateResponsiveTokenCss({
+            breakpoints: theme.breakpoints,
+            selector: ".richTextBlock__listItem--itemSpacing > td",
+            tokens: [{ value: theme.list.itemSpacing, cssProperty: "padding-bottom", unit: "px" }],
+        }),
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+registerStyles(generateRichTextListStyles);

package/lib/blocks/richText/createRichTextBlock.d.ts

@@ -11,7 +11,9 @@ import type { CreateRichTextBlockOptions, RichTextBlockProps } from "./common.js
  *
  * `MjmlRichTextBlock` renders each draft block as `MjmlText` and must be
  * placed within an `MjmlColumn`. `HtmlRichTextBlock` renders each draft block
- * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`).
+ * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`); inside
+ * `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and
+ * `<td>` of its own.
  *
  * ```ts
  * export const { MjmlRichTextBlock, HtmlRichTextBlock } = createRichTextBlock({
@@ -25,6 +27,6 @@ import type { CreateRichTextBlockOptions, RichTextBlockProps } from "./common.js
 export declare function createRichTextBlock<TLinkTypes extends Record<string, unknown> = Record<string, unknown>>(options?: CreateRichTextBlockOptions<TLinkTypes>): {
     /** Renders CMS RichText block data (draft-js raw content) as one `MjmlText` per draft block. Must be placed within an `MjmlColumn`. */
     MjmlRichTextBlock: (props: RichTextBlockProps) => ReactNode;
-    /** Renders CMS RichText block data (draft-js raw content) as one `HtmlText` div per draft block, for raw-HTML contexts such as `MjmlRaw`. */
+    /** Renders CMS RichText block data (draft-js raw content) as one `HtmlText` div per draft block, for raw-HTML contexts such as `MjmlRaw`. Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and `<td>` of its own. */
     HtmlRichTextBlock: (props: RichTextBlockProps) => ReactNode;
 };

package/lib/blocks/richText/createRichTextBlock.js

@@ -50,7 +50,9 @@ function renderRichTextContent({ draftContent, blockTypes, linkTypes, inline, bl
  *
  * `MjmlRichTextBlock` renders each draft block as `MjmlText` and must be
  * placed within an `MjmlColumn`. `HtmlRichTextBlock` renders each draft block
- * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`).
+ * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`); inside
+ * `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and
+ * `<td>` of its own.
  *
  * ```ts
  * export const { MjmlRichTextBlock, HtmlRichTextBlock } = createRichTextBlock({

package/lib/blocks/richText/createRichTextRenderers.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HtmlInlineLink } from "../../components/inlineLink/HtmlInlineLink.js";
+import { RichTextList } from "./RichTextList.js";
 const inlineStyleRenderers = {
     // The explicit styles back up the semantic tags in rendering engines that don't apply their default styling.
     BOLD: (children, { key }) => (_jsx("strong", { style: { fontWeight: "bold" }, children: children }, key)),
@@ -42,8 +43,8 @@ function renderWithLineBreaks(node) {
 function createTextBlockRenderFn({ blockTextComponent: BlockText, blockTypeProps, lastBlockKey }) {
     return (children, { keys }) => children.map((child, index) => (_jsx(BlockText, { bottomSpacing: keys[index] !== lastBlockKey, ...blockTypeProps, children: renderWithLineBreaks(child) }, keys[index])));
 }
-function createListBlockRenderFn({ listElement: ListElement, blockTextComponent: BlockText, blockTypeProps, lastBlockKey, }) {
-    return (children, { keys }) => (_jsx(BlockText, { bottomSpacing: !keys.includes(lastBlockKey), ...blockTypeProps, children: _jsx(ListElement, { className: "richTextBlock__list", style: { marginTop: 0, marginBottom: 0 }, children: children.map((child, index) => (_jsx("li", { className: "richTextBlock__listItem", children: renderWithLineBreaks(child) }, keys[index]))) }) }, keys.join("-")));
+function createListBlockRenderFn({ ordered, blockTextComponent: BlockText, blockTypeProps, lastBlockKey, }) {
+    return (children, { keys, depth }) => (_jsx(BlockText, { bottomSpacing: false, ...blockTypeProps, children: _jsx(RichTextList, { ordered: ordered, variant: blockTypeProps.variant, bottomSpacing: !keys.includes(lastBlockKey), depth: depth, items: children.map((child, index) => ({ key: keys[index], content: renderWithLineBreaks(child) })) }) }, keys.join("-")));
 }
 const listBlockTypes = ["unordered-list-item", "ordered-list-item"];
 export function createRichTextRenderers({ blockTypes, linkTypes, inline, blockTextComponent, lastBlockKey, }) {
@@ -57,7 +58,7 @@ export function createRichTextRenderers({ blockTypes, linkTypes, inline, blockTe
     }
     for (const listBlockType of listBlockTypes) {
         blocks[listBlockType] = createListBlockRenderFn({
-            listElement: listBlockType === "unordered-list-item" ? "ul" : "ol",
+            ordered: listBlockType === "ordered-list-item",
             blockTextComponent,
             blockTypeProps: blockTypes[listBlockType] ?? {},
             lastBlockKey,

package/lib/components/button/HtmlButton.d.ts

@@ -4,6 +4,8 @@ import type { ButtonProps } from "./buttonProps.js";
 export type HtmlButtonProps = ButtonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonProps>;
 /**
  * Themed button for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlButton` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlButton`.
  */
 export declare function HtmlButton({ variant: variantProp, fullWidth, target, href, className, style, children, ...restProps }: HtmlButtonProps): ReactNode;
 export declare function generateHtmlButtonStyles(theme: Theme): string;

package/lib/components/button/HtmlButton.js

@@ -8,6 +8,8 @@ import { defaultButtonStyles } from "./defaultButtonStyles.js";
 import { generateResponsiveButtonCss } from "./generateResponsiveButtonCss.js";
 /**
  * Themed button for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlButton` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlButton`.
  */
 export function HtmlButton({ variant: variantProp, fullWidth, target = "_blank", href = "#", className, style, children, ...restProps }) {
     const theme = useOptionalTheme();
@@ -31,8 +33,6 @@ export function HtmlButton({ variant: variantProp, fullWidth, target = "_blank",
     };
     const anchorStyle = {
         display: fullWidth ? "block" : "inline-block",
-        boxSizing: fullWidth ? "border-box" : undefined,
-        width: fullWidth ? "100%" : undefined,
         backgroundColor,
         backgroundImage: getDefaultOrUndefined(mergedStyles.backgroundImage),
         color: getDefaultOrUndefined(mergedStyles.color),

package/lib/components/button/MjmlButton.js

@@ -84,8 +84,6 @@ registerStyles(generateMjmlButtonStyles);
 registerStyles(css `
         .mjmlButton--fullWidth a {
             display: block !important;
-            width: 100% !important;
-            box-sizing: border-box !important;
             text-align: center !important;
         }
     `, { inline: true });

package/lib/components/button/generateResponsiveButtonCss.js

@@ -1,4 +1,4 @@
-import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+import { generateResponsiveVariantCss } from "../../styles/responsiveCss.js";
 const buttonProperties = [
     "color",
     "backgroundColor",

package/lib/components/divider/HtmlDivider.d.ts

@@ -4,6 +4,8 @@ import type { DividerProps } from "./dividerProps.js";
 export type HtmlDividerProps = DividerProps;
 /**
  * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlDivider` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlDivider`.
  */
 export declare function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }: HtmlDividerProps): ReactNode;
 export declare function generateHtmlDividerStyles(theme: Theme): string;

package/lib/components/divider/HtmlDivider.js

@@ -10,6 +10,8 @@ import { generateResponsiveDividerCss } from "./generateResponsiveDividerCss.js"
 const zeroWidthSpace = String.fromCharCode(0x200b);
 /**
  * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlDivider` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlDivider`.
  */
 export function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }) {
     const theme = useOptionalTheme();

package/lib/components/divider/MjmlDivider.d.ts

@@ -2,6 +2,9 @@ import type { ReactNode } from "react";
 import type { DividerProps } from "./dividerProps.js";
 export type MjmlDividerProps = DividerProps;
 /**
- * Themed divider for use inside an `MjmlColumn`.
+ * Themed divider.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlDivider` instead.
  */
 export declare function MjmlDivider({ variant, height, backgroundColor, backgroundImage, className, style }: MjmlDividerProps): ReactNode;

package/lib/components/divider/MjmlDivider.js

@@ -4,10 +4,13 @@ import clsx from "clsx";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
 import { HtmlDivider } from "./HtmlDivider.js";
 /**
- * Themed divider for use inside an `MjmlColumn`.
+ * Themed divider.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlDivider` instead.
  */
 export function MjmlDivider({ variant, height, backgroundColor, backgroundImage, className, style }) {
     const theme = useOptionalTheme();
     const activeVariant = variant ?? theme?.divider.defaultVariant;
-    return (_jsx(MjmlRaw, { children: _jsx(HtmlDivider, { variant: variant, height: height, backgroundColor: backgroundColor, backgroundImage: backgroundImage, className: clsx("mjmlDivider", activeVariant && `mjmlDivider--${activeVariant}`, className), style: style }) }));
+    return (_jsx(MjmlRaw, { children: _jsx("tr", { children: _jsx("td", { style: { padding: 0, fontSize: 0, lineHeight: 0, msoLineHeightRule: "exactly" }, children: _jsx(HtmlDivider, { variant: variant, height: height, backgroundColor: backgroundColor, backgroundImage: backgroundImage, className: clsx("mjmlDivider", activeVariant && `mjmlDivider--${activeVariant}`, className), style: style }) }) }) }));
 }

package/lib/components/divider/generateResponsiveDividerCss.js

@@ -1,4 +1,4 @@
-import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+import { generateResponsiveVariantCss } from "../../styles/responsiveCss.js";
 const dividerProperties = [
     // line-height matches height so Outlook honors the declared cell height.
     { themeKey: "height", cssProperties: ["height", "line-height"], unit: "px" },

package/lib/components/image/HtmlImage.d.ts

@@ -6,6 +6,7 @@ export type HtmlImageProps = ComponentProps<"img">;
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlImage` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlImage`.
  */
 export declare function HtmlImage({ className, ...restProps }: HtmlImageProps): ReactNode;

package/lib/components/image/HtmlImage.js

@@ -8,6 +8,7 @@ import { css } from "../../utils/css.js";
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlImage` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlImage`.
  */
 export function HtmlImage({ className, ...restProps }) {

package/lib/components/section/MjmlSection.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { MjmlGroup, MjmlSection as BaseMjmlSection } from "@faire/mjml-react";
 import clsx from "clsx";
 import { registerStyles } from "../../styles/registerStyles.js";
-import { getDefaultFromResponsiveValue, getResponsiveOverrides } from "../../theme/responsiveValue.js";
+import { generateResponsiveTokenCss } from "../../styles/responsiveCss.js";
+import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
-import { css } from "../../utils/css.js";
 import { useIsInsideMjmlWrapper } from "../wrapper/InsideMjmlWrapperContext.js";
 /** A section wrapper for email layouts. Must be a direct child of `MjmlBody` or `MjmlWrapper`. */
 export function MjmlSection({ children, indent, disableResponsiveBehavior, slotProps, className, ...restProps }) {
@@ -24,25 +24,11 @@ function getIndentProps(theme) {
         paddingRight: getDefaultFromResponsiveValue(theme.sizes.contentIndentation),
     };
 }
-registerStyles((theme) => {
-    const overrides = getResponsiveOverrides(theme.sizes.contentIndentation);
-    if (overrides.length === 0) {
-        return css ``;
-    }
-    return overrides
-        .map((override) => {
-        const breakpoint = theme.breakpoints[override.breakpointKey];
-        if (!breakpoint) {
-            return "";
-        }
-        return css `
-                ${breakpoint.belowMediaQuery} {
-                    .mjmlSection--indented > table > tbody > tr > td {
-                        padding-left: ${override.value}px !important;
-                        padding-right: ${override.value}px !important;
-                    }
-                }
-            `;
-    })
-        .join("\n");
-});
+registerStyles((theme) => generateResponsiveTokenCss({
+    breakpoints: theme.breakpoints,
+    selector: ".mjmlSection--indented > table > tbody > tr > td",
+    tokens: [
+        { value: theme.sizes.contentIndentation, cssProperty: "padding-left", unit: "px" },
+        { value: theme.sizes.contentIndentation, cssProperty: "padding-right", unit: "px" },
+    ],
+}));

package/lib/components/text/HtmlText.d.ts

@@ -43,6 +43,8 @@ export type HtmlTextProps<E extends keyof JSX.IntrinsicElements = "td"> = HtmlTe
 } & Omit<ComponentPropsWithoutRef<E>, keyof HtmlTextOwnProps | "element">;
 /**
  * Themed text component for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlText` in a `<tr>` of its own,
+ * and in a `<td>` too when `element` is not the default `td`.
  */
 export declare function HtmlText<E extends keyof JSX.IntrinsicElements>(props: HtmlTextOwnProps & {
     element: E;

package/lib/components/text/HtmlText.js

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { registerStyles } from "../../styles/registerStyles.js";
 import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { generateResponsiveTextCss } from "./generateResponsiveTextCss.js";
 import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
-import { generateResponsiveTextCss } from "./textStyles.js";
 export function HtmlText({ element: Element = "td", variant: variantProp, bottomSpacing, className, style, children, ...restProps }) {
     const theme = useTheme();
     const { defaultVariant, variants, ...baseStyles } = theme.text;

package/lib/components/text/MjmlText.d.ts

@@ -37,4 +37,4 @@ export type MjmlTextProps = IMjmlTextProps & {
  * The `variant` and `bottomSpacing` props require a `ThemeProvider` (or `MjmlMailRoot`).
  */
 export declare function MjmlText({ variant: variantProp, bottomSpacing, className, children, ...restProps }: MjmlTextProps): ReactNode;
-export declare function generateTextStyles(theme: Theme): string;
+export declare function generateMjmlTextStyles(theme: Theme): string;

package/lib/components/text/MjmlText.js

@@ -4,8 +4,8 @@ import clsx from "clsx";
 import { registerStyles } from "../../styles/registerStyles.js";
 import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { generateResponsiveTextCss } from "./generateResponsiveTextCss.js";
 import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
-import { generateResponsiveTextCss } from "./textStyles.js";
 /**
  * Text component that can be styled using the theme, optionally using a variant.
  *
@@ -56,10 +56,10 @@ function getThemedProps(theme, variantProp, bottomSpacing, explicitProps) {
         },
     };
 }
-export function generateTextStyles(theme) {
+export function generateMjmlTextStyles(theme) {
     return generateResponsiveTextCss(theme, {
         styleSelector: (variantName) => `.mjmlText--${variantName} > div`,
         spacingSelector: (variantName) => `.mjmlText--bottomSpacing.mjmlText--${variantName}`,
     });
 }
-registerStyles(generateTextStyles);
+registerStyles(generateMjmlTextStyles);

package/lib/components/text/{textStyles.js → generateResponsiveTextCss.js}

@@ -1,4 +1,4 @@
-import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+import { generateResponsiveVariantCss } from "../../styles/responsiveCss.js";
 const textStyleProperties = [
     "fontFamily",
     "fontSize",

package/lib/index.d.ts

@@ -40,7 +40,7 @@ export { createTheme } from "./theme/createTheme.js";
 export type { ResponsiveValue } from "./theme/responsiveValue.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
-export type { ButtonStyles, ButtonVariants, ButtonVariantStyles, DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
+export type { ButtonStyles, ButtonVariants, ButtonVariantStyles, DividerStyles, DividerVariants, DividerVariantStyles, ListMarker, ListMarkerOptions, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeList, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
 export { css } from "./utils/css.js";
 export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";

package/lib/styles/{generateResponsiveVariantCss.d.ts → responsiveCss.d.ts}

@@ -23,4 +23,18 @@ interface GenerateResponsiveVariantCssOptions<TVariantStyles> {
  * Returns an empty string when no variant has breakpoint overrides.
  */
 export declare function generateResponsiveVariantCss<TVariantStyles extends VariantStylesConstraint>({ breakpoints, variants, groups, }: GenerateResponsiveVariantCssOptions<TVariantStyles>): string;
+interface ResponsiveToken {
+    value: ResponsiveValue<string | number>;
+    cssProperty: string;
+    unit?: string;
+}
+/**
+ * Generates `max-width` media-query CSS for theme tokens that are not keyed by variant name.
+ * Returns an empty string when no token has breakpoint overrides.
+ */
+export declare function generateResponsiveTokenCss({ breakpoints, selector, tokens, }: {
+    breakpoints: ThemeBreakpoints;
+    selector: string;
+    tokens: readonly ResponsiveToken[];
+}): string;
 export {};

package/lib/styles/{generateResponsiveVariantCss.js → responsiveCss.js}

@@ -21,6 +21,21 @@ export function generateResponsiveVariantCss({ breakpoints, variants, groups, })
     }
     return cssChunks.filter(Boolean).join("\n");
 }
+/**
+ * Generates `max-width` media-query CSS for theme tokens that are not keyed by variant name.
+ * Returns an empty string when no token has breakpoint overrides.
+ */
+export function generateResponsiveTokenCss({ breakpoints, selector, tokens, }) {
+    const overridesByBreakpoint = new Map();
+    for (const token of tokens) {
+        for (const { breakpointKey, value } of getResponsiveOverrides(token.value)) {
+            const declarations = overridesByBreakpoint.get(breakpointKey) ?? [];
+            declarations.push(formatDeclaration({ cssProperty: token.cssProperty, value, unit: token.unit }));
+            overridesByBreakpoint.set(breakpointKey, declarations);
+        }
+    }
+    return renderMediaQueries({ breakpoints, selector, overridesByBreakpoint });
+}
 function collectOverridesByBreakpoint(variantStyles, properties) {
     const overridesByBreakpoint = new Map();
     for (const entry of properties) {

package/lib/theme/createTheme.d.ts

@@ -1,8 +1,9 @@
-import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeSizes, ThemeText } from "./themeTypes.js";
+import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeList, ThemeSizes, ThemeText } from "./themeTypes.js";
 type CreateThemeOverrides = {
     sizes?: Partial<ThemeSizes>;
     breakpoints?: Partial<ThemeBreakpoints>;
     text?: Partial<ThemeText>;
+    list?: Partial<ThemeList>;
     divider?: Partial<ThemeDivider>;
     button?: Partial<ThemeButton>;
     colors?: {

package/lib/theme/createTheme.js

@@ -21,6 +21,7 @@ export function createTheme(overrides) {
             ...overrides?.breakpoints,
         },
         text: { ...defaultTheme.text, ...overrides?.text },
+        list: { ...defaultTheme.list, ...overrides?.list },
         divider: { ...defaultTheme.divider, ...overrides?.divider },
         button: { ...defaultTheme.button, ...overrides?.button },
         colors: {

package/lib/theme/defaultTheme.js

@@ -15,6 +15,14 @@ export const defaultTheme = {
         fontSize: "16px",
         lineHeight: "20px",
         bottomSpacing: "16px",
+        color: "#000000",
+    },
+    list: {
+        indent: 8,
+        markerGap: 12,
+        itemSpacing: 8,
+        unorderedMarker: "•",
+        orderedMarker: ({ index }) => `${index + 1}.`,
     },
     divider: defaultDividerStyles,
     button: defaultButtonStyles,

package/lib/theme/themeTypes.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { ResponsiveValue } from "./responsiveValue.js";
 /**
  * Single source of truth for text style property names and their value types.
@@ -46,6 +47,31 @@ export interface ThemeText extends TextStyles {
     defaultVariant?: VariantName;
     variants?: VariantsRecord;
 }
+/** The position of the item a marker belongs to. */
+export interface ListMarkerOptions {
+    /** The item's position in its own list, counting from zero. */
+    index: number;
+    /** The nesting level of the item's list, zero when it is not nested. */
+    depth: number;
+}
+/**
+ * A list item's marker content: a fixed node, or a function of the item's position.
+ * Use plain HTML elements, not MJML components.
+ */
+export type ListMarker = ReactNode | ((options: ListMarkerOptions) => ReactNode);
+/** Spacing tokens in pixels and marker content, applying to lists the RichText block renders. */
+export interface ThemeList {
+    /** The space before the marker, measured from the list's left edge. */
+    indent: ResponsiveValue;
+    /** The space between the marker and the item's text. */
+    markerGap: ResponsiveValue;
+    /** The space between items. The space below the last one comes from the text variant's `bottomSpacing`. */
+    itemSpacing: ResponsiveValue;
+    /** The marker of every item of an unordered list. */
+    unorderedMarker: ListMarker;
+    /** The marker of every item of an ordered list. */
+    orderedMarker: ListMarker;
+}
 /**
  * Single source of truth for divider style property names and their value types.
  * Both `DividerStyles` and `DividerVariantStyles` are derived from this interface.
@@ -197,6 +223,7 @@ export interface Theme {
     sizes: ThemeSizes;
     breakpoints: ThemeBreakpoints;
     text: ThemeText;
+    list: ThemeList;
     divider: ThemeDivider;
     button: ThemeButton;
     colors: ThemeColors;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dextinity/mail-react",
-  "version": "2.0.0-canary-20260806092023",
+  "version": "10.0.0-beta.0",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
   "repository": {
     "directory": "packages/mail-react",
     "type": "git",
-    "url": "https://github.com/vivid-planet/comet"
+    "url": "https://github.com/vivid-planet/dextinity"
   },
   "exports": {
     ".": "./lib/index.js",
@@ -39,7 +39,7 @@
     "chokidar-cli": "^3.0.0",
     "eslint": "^9.39.4",
     "npm-run-all2": "^8.0.4",
-    "playwright": "^1.49.1",
+    "playwright": "^1.62.0",
     "prettier": "^3.6.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -48,8 +48,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.1.8",
-    "@dextinity/cli": "2.0.0-canary-20260806092023",
-    "@dextinity/eslint-config": "2.0.0-canary-20260806092023"
+    "@dextinity/cli": "10.0.0-beta.0",
+    "@dextinity/eslint-config": "10.0.0-beta.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",