@dextinity/mail-react 2.0.0-canary-20260729062014

package/lib/components/divider/HtmlDivider.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { defaultDividerStyles } from "./defaultDividerStyles.js";
+import { generateResponsiveDividerCss } from "./generateResponsiveDividerCss.js";
+// U+200B keeps the cell from collapsing in clients that drop empty <td>s,
+// without contributing visible width.
+const zeroWidthSpace = String.fromCharCode(0x200b);
+/**
+ * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ */
+export function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }) {
+    const theme = useOptionalTheme();
+    if (theme === null && variantProp !== undefined) {
+        throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+    }
+    const themeDivider = theme?.divider ?? defaultDividerStyles;
+    const { defaultVariant, variants, ...baseStyles } = themeDivider;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = variantStyles ? { ...baseStyles, ...variantStyles } : baseStyles;
+    const height = heightProp ?? getDefaultOrUndefined(mergedStyles.height);
+    const backgroundColor = backgroundColorProp ?? getDefaultOrUndefined(mergedStyles.backgroundColor);
+    const backgroundImage = backgroundImageProp ?? getDefaultOrUndefined(mergedStyles.backgroundImage);
+    const dividerStyle = {
+        height,
+        lineHeight: height === undefined ? undefined : `${height}px`,
+        fontSize: 0,
+        backgroundColor,
+        backgroundImage,
+        ...{ msoLineHeightRule: "exactly" },
+        ...style,
+    };
+    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: "100%", className: clsx("htmlDivider", activeVariant && `htmlDivider--${activeVariant}`, className), children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { bgcolor: backgroundColor, height: height, style: dividerStyle, children: zeroWidthSpace }) }) }) }));
+}
+export function generateHtmlDividerStyles(theme) {
+    return generateResponsiveDividerCss(theme, {
+        styleSelector: (variantName) => `.htmlDivider--${variantName} td`,
+    });
+}
+registerStyles(generateHtmlDividerStyles);

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { DividerProps } from "./dividerProps.js";
+export type MjmlDividerProps = DividerProps;
+/**
+ * Themed divider for use inside an `MjmlColumn`.
+ */
+export declare function MjmlDivider({ variant, height, backgroundColor, backgroundImage, className, style }: MjmlDividerProps): ReactNode;

package/lib/components/divider/MjmlDivider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlRaw } from "@faire/mjml-react";
+import clsx from "clsx";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { HtmlDivider } from "./HtmlDivider.js";
+/**
+ * Themed divider for use inside an `MjmlColumn`.
+ */
+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 }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { DividerStyles } from "../../theme/themeTypes.js";
+export declare const defaultDividerStyles: DividerStyles;

package/lib/components/divider/defaultDividerStyles.js

@@ -0,0 +1,4 @@
+export const defaultDividerStyles = {
+    height: 4,
+    backgroundColor: "#000000",
+};

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

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+import type { DividerVariantName } from "../../theme/themeTypes.js";
+export interface DividerProps {
+    /**
+     * The component's variant to apply, as defined in the theme. Requires a
+     * theme (`ThemeProvider` or `MjmlMailRoot`) when set.
+     *
+     * Custom variants should be defined in the theme through module augmentation:
+     *
+     * ```ts
+     * declare module "@dextinity/mail-react" {
+     *     interface DividerVariants { thin: true; thick: true }
+     * }
+     * ```
+     *
+     * ```ts
+     * const theme = createTheme({
+     *     divider: {
+     *         variants: {
+     *             thin: { height: 1 },
+     *             thick: { height: 8 },
+     *         },
+     *     },
+     * });
+     * ```
+     *
+     * @defaultValue The theme's `divider.defaultVariant`, when set
+     */
+    variant?: DividerVariantName;
+    /**
+     * Height of the divider in pixels.
+     *
+     * @defaultValue The theme's `divider` height for the active variant
+     */
+    height?: number;
+    /**
+     * Background color of the divider (e.g. `"#FF0000"`).
+     *
+     * @defaultValue The theme's `divider` background color for the active variant
+     */
+    backgroundColor?: string;
+    /**
+     * Background image for the divider — typically a gradient. Clients that
+     * don't render `background-image` fall back to the solid `backgroundColor`.
+     *
+     * @defaultValue The theme's `divider` background image for the active variant
+     */
+    backgroundImage?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/lib/components/divider/dividerProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+import type { Theme } from "../../theme/themeTypes.js";
+interface GenerateResponsiveDividerCssOptions {
+    /** Selector for divider style overrides, given a variant name. */
+    styleSelector: (variantName: string) => string;
+}
+/** Generates responsive CSS media queries for divider variant overrides. */
+export declare function generateResponsiveDividerCss(theme: Theme, options: GenerateResponsiveDividerCssOptions): string;
+export {};

package/lib/components/divider/generateResponsiveDividerCss.js

@@ -0,0 +1,15 @@
+import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+const dividerProperties = [
+    // line-height matches height so Outlook honors the declared cell height.
+    { themeKey: "height", cssProperties: ["height", "line-height"], unit: "px" },
+    "backgroundColor",
+    "backgroundImage",
+];
+/** Generates responsive CSS media queries for divider variant overrides. */
+export function generateResponsiveDividerCss(theme, options) {
+    return generateResponsiveVariantCss({
+        breakpoints: theme.breakpoints,
+        variants: theme.divider.variants,
+        groups: [{ selector: options.styleSelector, properties: dividerProperties }],
+    });
+}

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

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+export type HtmlImageProps = ComponentProps<"img">;
+/**
+ * Renders an `<img>` tag that adapts to its container width below the default
+ * breakpoint.
+ *
+ * Use within raw HTML context — HTML-only emails or
+ * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * For MJML context, use `MjmlImage`.
+ */
+export declare function HtmlImage({ className, ...restProps }: HtmlImageProps): ReactNode;

package/lib/components/image/HtmlImage.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+/**
+ * Renders an `<img>` tag that adapts to its container width below the default
+ * breakpoint.
+ *
+ * Use within raw HTML context — HTML-only emails or
+ * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * For MJML context, use `MjmlImage`.
+ */
+export function HtmlImage({ className, ...restProps }) {
+    return _jsx("img", { className: clsx("htmlImage", className), ...restProps });
+}
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .htmlImage {
+                width: 100%;
+                height: auto;
+            }
+        }
+    `);

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

@@ -0,0 +1,10 @@
+import { type IMjmlImageProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlImageProps = IMjmlImageProps;
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export declare function MjmlImage({ className, ...restProps }: MjmlImageProps): ReactNode;

package/lib/components/image/MjmlImage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlImage as BaseMjmlImage } from "@faire/mjml-react";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export function MjmlImage({ className, ...restProps }) {
+    return _jsx(BaseMjmlImage, { className: clsx("mjmlImage", className), ...restProps });
+}
+// MJML inlines a fixed `height` on the inner <img>; !important overrides it for responsive scaling.
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .mjmlImage img {
+                height: auto !important;
+            }
+        }
+    `);

package/lib/components/inlineLink/HtmlInlineLink.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+export type HtmlInlineLinkProps = Omit<ComponentProps<"a">, "target"> & {
+    /**
+     * Where to open the linked document.
+     *
+     * @defaultValue `"_blank"`
+     */
+    target?: ComponentProps<"a">["target"];
+};
+/**
+ * Inline link styled to match the surrounding text, for use inside `HtmlText` or `MjmlText`.
+ *
+ * Applies explicit text styles from the parent text component's context so that
+ * Outlook Desktop (which overrides `<a>` tags with its built-in "Hyperlink" style)
+ * renders the link with the correct font and color.
+ */
+export declare function HtmlInlineLink({ className, style, target, ...restProps }: HtmlInlineLinkProps): ReactNode;

package/lib/components/inlineLink/HtmlInlineLink.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+import { useOutlookTextStyle } from "../text/OutlookTextStyleContext.js";
+/**
+ * Inline link styled to match the surrounding text, for use inside `HtmlText` or `MjmlText`.
+ *
+ * Applies explicit text styles from the parent text component's context so that
+ * Outlook Desktop (which overrides `<a>` tags with its built-in "Hyperlink" style)
+ * renders the link with the correct font and color.
+ */
+export function HtmlInlineLink({ className, style, target = "_blank", ...restProps }) {
+    const outlookTextStyle = useOutlookTextStyle();
+    const baseStyle = {
+        fontFamily: outlookTextStyle?.fontFamily ?? "inherit",
+        fontSize: outlookTextStyle?.fontSize ?? "inherit",
+        lineHeight: outlookTextStyle?.lineHeight ?? "inherit",
+        fontWeight: outlookTextStyle?.fontWeight ?? "inherit",
+        color: outlookTextStyle?.color ?? "inherit",
+        textDecoration: "underline",
+    };
+    return _jsx("a", { className: clsx("htmlInlineLink", className), style: { ...baseStyle, ...style }, target: target, ...restProps });
+}
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .htmlInlineLink {
+                font-family: inherit !important;
+                font-size: inherit !important;
+                line-height: inherit !important;
+                font-weight: inherit !important;
+                color: inherit !important;
+            }
+        }
+    `);

package/lib/components/mailRoot/MjmlMailRoot.d.ts

@@ -0,0 +1,32 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { type Config } from "../../config/ConfigProvider.js";
+import type { Theme } from "../../theme/themeTypes.js";
+type MjmlMailRootProps = PropsWithChildren<{
+    /**
+     * Theme to use for the email.
+     *
+     * @defaultValue `createTheme()`
+     */
+    theme?: Theme;
+    /** Extra content appended inside the built-in `<MjmlAttributes>`, after the default `<MjmlAll>`. */
+    attributes?: ReactNode;
+    /** Extra content appended inside `<MjmlHead>`, after the registered styles block. */
+    head?: ReactNode;
+    /**
+     * Configuration to make available to descendants via `useConfig`.
+     */
+    config?: Config;
+}>;
+/**
+ * The root element for email templates. Renders the standard MJML email skeleton
+ * (`<Mjml>`, `<MjmlHead>`, `<MjmlBody>`) with `<MjmlAll padding={0} />` as the
+ * default attribute so all components start with zero padding.
+ *
+ * Accepts an optional `theme` prop that controls the body width and responsive breakpoints. The theme is made available to all descendant components via `useTheme()`.
+ *
+ * Accepts an optional `config` prop containing configuration. When provided, the value is made available to descendants via `useConfig()`.
+ *
+ * Direct children should be section-level components (e.g. `MjmlSection`).
+ */
+export declare function MjmlMailRoot({ theme: themeProp, attributes, head, config, children }: MjmlMailRootProps): ReactNode;
+export {};

package/lib/components/mailRoot/MjmlMailRoot.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mjml, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlHead } from "@faire/mjml-react";
+import { ConfigProvider } from "../../config/ConfigProvider.js";
+import { Styles } from "../../styles/Styles.js";
+import { createTheme } from "../../theme/createTheme.js";
+import { ThemeProvider } from "../../theme/ThemeProvider.js";
+/**
+ * The root element for email templates. Renders the standard MJML email skeleton
+ * (`<Mjml>`, `<MjmlHead>`, `<MjmlBody>`) with `<MjmlAll padding={0} />` as the
+ * default attribute so all components start with zero padding.
+ *
+ * Accepts an optional `theme` prop that controls the body width and responsive breakpoints. The theme is made available to all descendant components via `useTheme()`.
+ *
+ * Accepts an optional `config` prop containing configuration. When provided, the value is made available to descendants via `useConfig()`.
+ *
+ * Direct children should be section-level components (e.g. `MjmlSection`).
+ */
+export function MjmlMailRoot({ theme: themeProp, attributes, head, config, children }) {
+    const theme = themeProp ?? createTheme();
+    const content = (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Mjml, { children: [_jsxs(MjmlHead, { children: [_jsxs(MjmlAttributes, { children: [_jsx(MjmlAll, { padding: "0", fontFamily: theme.text.fontFamily }), attributes] }), _jsx(MjmlBreakpoint, { width: `${theme.breakpoints.mobile.value}px` }), _jsx(Styles, {}), head] }), _jsx(MjmlBody, { width: theme.sizes.bodyWidth, backgroundColor: theme.colors.background.body, children: children })] }) }));
+    if (config) {
+        return _jsx(ConfigProvider, { config: config, children: content });
+    }
+    return content;
+}

package/lib/components/section/MjmlSection.d.ts

@@ -0,0 +1,21 @@
+import { type IMjmlGroupProps, type IMjmlSectionProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlSectionProps = Omit<IMjmlSectionProps, "backgroundColor"> & {
+    /**
+     * Background color of the section.
+     *
+     * @defaultValue The theme's `colors.background.content`, unless inside an `MjmlWrapper`
+     */
+    backgroundColor?: IMjmlSectionProps["backgroundColor"];
+    /** Applies theme-based content indentation with responsive overrides. */
+    indent?: boolean;
+    /** When true, child columns remain side-by-side on mobile instead of stacking vertically. */
+    disableResponsiveBehavior?: boolean;
+    /** Props forwarded to internal sub-components. */
+    slotProps?: {
+        /** Props passed to the wrapping `MjmlGroup` when `disableResponsiveBehavior` is enabled. */
+        group?: Partial<IMjmlGroupProps>;
+    };
+};
+/** A section wrapper for email layouts. Must be a direct child of `MjmlBody` or `MjmlWrapper`. */
+export declare function MjmlSection({ children, indent, disableResponsiveBehavior, slotProps, className, ...restProps }: MjmlSectionProps): ReactNode;

package/lib/components/section/MjmlSection.js

@@ -0,0 +1,48 @@
+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 { 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 }) {
+    const theme = useOptionalTheme();
+    const isInsideWrapper = useIsInsideMjmlWrapper();
+    const indentProps = indent ? getIndentProps(theme) : {};
+    const resolvedClassName = clsx("mjmlSection", indent && "mjmlSection--indented", className);
+    const themeBackgroundProps = theme && !isInsideWrapper ? { backgroundColor: theme.colors.background.content } : {};
+    return (_jsx(BaseMjmlSection, { className: resolvedClassName, ...themeBackgroundProps, ...indentProps, ...restProps, children: disableResponsiveBehavior ? _jsx(MjmlGroup, { ...slotProps?.group, children: children }) : _jsx(_Fragment, { children: children }) }));
+}
+function getIndentProps(theme) {
+    if (theme === null) {
+        throw new Error("The `indent` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+    }
+    return {
+        paddingLeft: getDefaultFromResponsiveValue(theme.sizes.contentIndentation),
+        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");
+});

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

@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef, JSX, ReactNode, TdHTMLAttributes } from "react";
+import type { VariantName } from "../../theme/themeTypes.js";
+interface HtmlTextOwnProps {
+    /**
+     * The component's variant to apply, as defined in the theme.
+     *
+     * Custom variants should be defined in the theme through module augmentation:
+     *
+     * ```ts
+     * declare module "@dextinity/mail-react" {
+     *     interface TextVariants { heading: true; body: true }
+     * }
+     * ```
+     *
+     * ```ts
+     * const theme = createTheme({
+     *     text: {
+     *         variants: {
+     *             heading: { fontSize: "24px" },
+     *             body: { fontSize: "16px" },
+     *         },
+     *     },
+     * });
+     * ```
+     *
+     * @defaultValue The theme's `text.defaultVariant`, when set
+     */
+    variant?: VariantName;
+    /** When true, applies spacing below the text. */
+    bottomSpacing?: boolean;
+}
+export type HtmlTextProps<E extends keyof JSX.IntrinsicElements = "td"> = HtmlTextOwnProps & {
+    /**
+     * The HTML element to render instead of the default `<td>`.
+     *
+     * @example
+     * ```tsx
+     * <HtmlText element="div">Rendered as a div</HtmlText>
+     * <HtmlText element="a" href="/link">Rendered as an anchor</HtmlText>
+     * ```
+     */
+    element?: E;
+} & Omit<ComponentPropsWithoutRef<E>, keyof HtmlTextOwnProps | "element">;
+/**
+ * Themed text component for use inside MJML ending tags or outside of the MJML context.
+ */
+export declare function HtmlText<E extends keyof JSX.IntrinsicElements>(props: HtmlTextOwnProps & {
+    element: E;
+} & Omit<ComponentPropsWithoutRef<E>, keyof HtmlTextOwnProps | "element">): ReactNode;
+export declare function HtmlText(props: HtmlTextOwnProps & Omit<TdHTMLAttributes<HTMLTableCellElement>, keyof HtmlTextOwnProps>): ReactNode;
+export {};

package/lib/components/text/HtmlText.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useTheme } from "../../theme/ThemeProvider.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;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = variantStyles ? { ...baseStyles, ...variantStyles } : baseStyles;
+    const themeStyle = {
+        fontFamily: getDefaultOrUndefined(mergedStyles.fontFamily),
+        fontSize: getDefaultOrUndefined(mergedStyles.fontSize),
+        fontWeight: getDefaultOrUndefined(mergedStyles.fontWeight),
+        fontStyle: getDefaultOrUndefined(mergedStyles.fontStyle),
+        lineHeight: getDefaultOrUndefined(mergedStyles.lineHeight),
+        letterSpacing: getDefaultOrUndefined(mergedStyles.letterSpacing),
+        textDecoration: getDefaultOrUndefined(mergedStyles.textDecoration),
+        textTransform: getDefaultOrUndefined(mergedStyles.textTransform),
+        color: getDefaultOrUndefined(mergedStyles.color),
+        ...(getDefaultOrUndefined(mergedStyles.lineHeight) !== undefined && { msoLineHeightRule: "exactly" }),
+        ...(bottomSpacing && { paddingBottom: getDefaultOrUndefined(mergedStyles.bottomSpacing) }),
+    };
+    const outlookTextStyleValues = {
+        fontFamily: themeStyle.fontFamily,
+        fontSize: themeStyle.fontSize,
+        lineHeight: themeStyle.lineHeight,
+        fontWeight: themeStyle.fontWeight,
+        color: themeStyle.color,
+        ...(style?.fontFamily !== undefined && { fontFamily: style.fontFamily }),
+        ...(style?.fontSize !== undefined && { fontSize: style.fontSize }),
+        ...(style?.lineHeight !== undefined && { lineHeight: style.lineHeight }),
+        ...(style?.fontWeight !== undefined && { fontWeight: style.fontWeight }),
+        ...(style?.color !== undefined && { color: style.color }),
+    };
+    return (_jsx(Element, { ...restProps, className: clsx("htmlText", activeVariant && `htmlText--${activeVariant}`, bottomSpacing && "htmlText--bottomSpacing", className), style: { ...themeStyle, ...style }, children: _jsx(OutlookTextStyleProvider, { value: outlookTextStyleValues, children: children }) }));
+}
+function generateHtmlTextStyles(theme) {
+    return generateResponsiveTextCss(theme, {
+        styleSelector: (variantName) => `.htmlText--${variantName}`,
+        spacingSelector: (variantName) => `.htmlText--bottomSpacing.htmlText--${variantName}`,
+    });
+}
+registerStyles(generateHtmlTextStyles);

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

@@ -0,0 +1,40 @@
+import { type IMjmlTextProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+import type { Theme, VariantName } from "../../theme/themeTypes.js";
+export type MjmlTextProps = IMjmlTextProps & {
+    /**
+     * The component's variant to apply, as defined in the theme.
+     *
+     * Custom variants should be defined in the theme, through module augmentation.
+     *
+     * ```ts
+     * declare module "@dextinity/mail-react" {
+     *     interface TextVariants { heading: true; body: true }
+     * }
+     * ```
+     *
+     * ```ts
+     * const theme = createTheme({
+     *     text: {
+     *         variants: {
+     *             heading: { fontSize: "24px" },
+     *             body: { fontSize: "16px" },
+     *         },
+     *     },
+     * });
+     * ```
+     *
+     * @defaultValue The theme's `text.defaultVariant`, when set
+     */
+    variant?: VariantName;
+    /** When true, applies spacing below the text. */
+    bottomSpacing?: boolean;
+};
+/**
+ * Text component that can be styled using the theme, optionally using a variant.
+ *
+ * Works without a `ThemeProvider` as a plain pass-through to the base MJML text component.
+ * 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;

package/lib/components/text/MjmlText.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlText as BaseMjmlText } from "@faire/mjml-react";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
+import { generateResponsiveTextCss } from "./textStyles.js";
+/**
+ * Text component that can be styled using the theme, optionally using a variant.
+ *
+ * Works without a `ThemeProvider` as a plain pass-through to the base MJML text component.
+ * The `variant` and `bottomSpacing` props require a `ThemeProvider` (or `MjmlMailRoot`).
+ */
+export function MjmlText({ variant: variantProp, bottomSpacing, className, children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themedProps = getThemedProps(theme, variantProp, bottomSpacing, restProps);
+    const resolvedClassName = clsx("mjmlText", themedProps.activeVariant && `mjmlText--${themedProps.activeVariant}`, bottomSpacing && "mjmlText--bottomSpacing", className);
+    return (_jsx(BaseMjmlText, { ...themedProps.baseProps, className: resolvedClassName, ...restProps, children: themedProps.outlookTextStyleValues !== null ? (_jsx(OutlookTextStyleProvider, { value: themedProps.outlookTextStyleValues, children: children })) : (children) }));
+}
+function getThemedProps(theme, variantProp, bottomSpacing, explicitProps) {
+    if (theme === null) {
+        if (variantProp !== undefined) {
+            throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+        }
+        if (bottomSpacing) {
+            throw new Error("The `bottomSpacing` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+        }
+        return { activeVariant: undefined, baseProps: {}, outlookTextStyleValues: null };
+    }
+    const { defaultVariant, variants, ...baseStyles } = theme.text;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = variantStyles ? { ...baseStyles, ...variantStyles } : baseStyles;
+    const fontWeightDefault = getDefaultOrUndefined(mergedStyles.fontWeight);
+    return {
+        activeVariant,
+        baseProps: {
+            fontFamily: getDefaultOrUndefined(mergedStyles.fontFamily),
+            fontSize: getDefaultOrUndefined(mergedStyles.fontSize),
+            fontWeight: fontWeightDefault !== undefined ? String(fontWeightDefault) : undefined,
+            fontStyle: getDefaultOrUndefined(mergedStyles.fontStyle),
+            lineHeight: getDefaultOrUndefined(mergedStyles.lineHeight),
+            letterSpacing: getDefaultOrUndefined(mergedStyles.letterSpacing),
+            textDecoration: getDefaultOrUndefined(mergedStyles.textDecoration),
+            textTransform: getDefaultOrUndefined(mergedStyles.textTransform),
+            color: getDefaultOrUndefined(mergedStyles.color),
+            paddingBottom: bottomSpacing ? getDefaultOrUndefined(mergedStyles.bottomSpacing) : undefined,
+        },
+        outlookTextStyleValues: {
+            fontFamily: explicitProps.fontFamily ?? getDefaultOrUndefined(mergedStyles.fontFamily),
+            fontSize: explicitProps.fontSize ?? getDefaultOrUndefined(mergedStyles.fontSize),
+            fontWeight: explicitProps.fontWeight ?? fontWeightDefault,
+            lineHeight: explicitProps.lineHeight ?? getDefaultOrUndefined(mergedStyles.lineHeight),
+            color: explicitProps.color ?? getDefaultOrUndefined(mergedStyles.color),
+        },
+    };
+}
+export function generateTextStyles(theme) {
+    return generateResponsiveTextCss(theme, {
+        styleSelector: (variantName) => `.mjmlText--${variantName} > div`,
+        spacingSelector: (variantName) => `.mjmlText--bottomSpacing.mjmlText--${variantName}`,
+    });
+}
+registerStyles(generateTextStyles);

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

@@ -0,0 +1,9 @@
+import { type CSSProperties, type ReactNode } from "react";
+type OutlookTextStyleValues = Pick<CSSProperties, "fontFamily" | "fontSize" | "lineHeight" | "fontWeight" | "color">;
+declare function OutlookTextStyleProvider({ value, children }: {
+    value: OutlookTextStyleValues;
+    children: ReactNode;
+}): ReactNode;
+declare function useOutlookTextStyle(): OutlookTextStyleValues | null;
+export { OutlookTextStyleProvider, useOutlookTextStyle };
+export type { OutlookTextStyleValues };

package/lib/components/text/OutlookTextStyleContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const OutlookTextStyleContext = createContext(null);
+function OutlookTextStyleProvider({ value, children }) {
+    return _jsx(OutlookTextStyleContext, { value: value, children: children });
+}
+function useOutlookTextStyle() {
+    return useContext(OutlookTextStyleContext);
+}
+export { OutlookTextStyleProvider, useOutlookTextStyle };