@comet/mail-react 9.0.0-beta.1 → 9.0.0-beta.3

package/lib/components/text/__tests__/HtmlText.test.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { createTheme } from "../../../theme/createTheme.js";
+import { ThemeProvider } from "../../../theme/ThemeProvider.js";
+import { HtmlText } from "../HtmlText.js";
+// Type-level tests — validated by tsc, not at runtime.
+// An unused @ts-expect-error directive causes a compile error if the overloads
+// stop rejecting the invalid usage, so these act as regression guards.
+// @ts-expect-error href is not valid on the default <td>
+void (_jsx(HtmlText, { href: "/foo", children: "text" }));
+void ((
+// @ts-expect-error colSpan is not valid on <a>
+_jsx(HtmlText, { element: "a", colSpan: 2, children: "text" })));
+// Own props are always accepted regardless of element — no error expected
+void (_jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, children: "text" }));
+void (_jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "text" }));
+function renderHtmlText(element) {
+    return renderToStaticMarkup(element);
+}
+describe("HtmlText", () => {
+    it("renders a <td> with base theme styles as inline styles", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
+        expect(html).toContain("<td");
+        expect(html).toContain("Hello");
+        expect(html).toContain("font-family:Arial, sans-serif");
+        expect(html).toContain("font-size:16px");
+        expect(html).toContain("line-height:20px");
+    });
+    it("applies variant styles over base styles", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: { default: "32px", mobile: "24px" }, fontWeight: 700 },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("font-size:32px");
+        expect(html).toContain("font-weight:700");
+    });
+    it("inherits base styles not overridden by variant", () => {
+        const theme = createTheme({
+            text: {
+                fontFamily: "Georgia, serif",
+                variants: {
+                    heading: { fontSize: "32px" },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("font-family:Georgia, serif");
+        expect(html).toContain("font-size:32px");
+    });
+    it("applies defaultVariant when no variant prop is specified", () => {
+        const theme = createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px" },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
+        expect(html).toContain("font-size:14px");
+    });
+    it("applies bottomSpacing as padding-bottom", () => {
+        const theme = createTheme({ text: { bottomSpacing: "16px" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
+        expect(html).toContain("padding-bottom:16px");
+    });
+    it("uses variant bottomSpacing over base", () => {
+        const theme = createTheme({
+            text: {
+                bottomSpacing: "16px",
+                variants: {
+                    heading: { bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Title" }) }));
+        expect(html).toContain("padding-bottom:24px");
+    });
+    it("does not apply padding-bottom when bottomSpacing is not set", () => {
+        const theme = createTheme({ text: { bottomSpacing: "16px" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
+        expect(html).not.toContain("padding-bottom");
+    });
+    it("always applies the htmlText base class", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
+        expect(html).toContain('class="htmlText"');
+    });
+    it("applies variant modifier class", () => {
+        const theme = createTheme({
+            text: { variants: { heading: { fontSize: "32px" } } },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("htmlText--heading");
+    });
+    it("applies bottomSpacing modifier class", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
+        expect(html).toContain("htmlText--bottomSpacing");
+    });
+    it("merges consumer className", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { className: "custom", children: "Text" }) }));
+        expect(html).toContain("htmlText");
+        expect(html).toContain("custom");
+    });
+    it("lets user style prop override theme styles", () => {
+        const theme = createTheme({ text: { fontFamily: "Arial, sans-serif" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { style: { fontFamily: "Georgia" }, children: "Hello" }) }));
+        expect(html).toContain("font-family:Georgia");
+    });
+    it("forwards standard td attributes", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { colSpan: 2, align: "center", children: "Hello" }) }));
+        expect(html).toContain('colSpan="2"');
+        expect(html).toContain('align="center"');
+    });
+    it("renders a <div> when element is 'div'", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", children: "Hello" }) }));
+        expect(html).toContain("<div");
+        expect(html).not.toContain("<td");
+        expect(html).toContain("Hello");
+        expect(html).toContain("font-family:Arial, sans-serif");
+    });
+    it("renders an <a> with href when element is 'a'", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "a", href: "/link", children: "Click" }) }));
+        expect(html).toContain("<a");
+        expect(html).not.toContain("<td");
+        expect(html).toContain('href="/link"');
+        expect(html).toContain("Click");
+    });
+    it("applies theme styles and CSS classes to non-td elements", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700 },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, className: "custom", children: "Title" }) }));
+        expect(html).toContain("<div");
+        expect(html).toContain("font-size:32px");
+        expect(html).toContain("font-weight:700");
+        expect(html).toContain("htmlText");
+        expect(html).toContain("htmlText--heading");
+        expect(html).toContain("htmlText--bottomSpacing");
+        expect(html).toContain("custom");
+    });
+});

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

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

package/lib/components/text/__tests__/MjmlText.test.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { describe, expect, it } from "vitest";
+import { renderMailHtml } from "../../../server/renderMailHtml.js";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlMailRoot } from "../../mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { generateTextStyles, MjmlText } from "../MjmlText.js";
+describe("MjmlText integration", () => {
+    // Full render pipeline: mjml2html must report no errors for this MjmlText + theme setup.
+    it("produces no MJML warnings with a variant theme", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        fontWeight: 700,
+                        lineHeight: { default: "40px", mobile: "30px" },
+                    },
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                },
+            },
+        });
+        const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { theme: theme, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading" }), _jsx(MjmlText, { variant: "body", children: "Body text" }), _jsx(MjmlText, { children: "Base text" })] }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+    });
+});
+describe("generateTextStyles", () => {
+    it("returns empty CSS when no variants are defined", () => {
+        const theme = createTheme();
+        const result = generateTextStyles(theme);
+        expect(result).toBe("");
+    });
+    it("emits style overrides with correct selector for a variant", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).toContain(".mjmlText--heading > div");
+        expect(result).toContain("font-size: 24px !important");
+    });
+    it("groups multiple properties into a single media query per breakpoint", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        const mobileMediaQuery = `@media (max-width: ${theme.breakpoints.mobile.value - 1}px)`;
+        expect(result).toContain(mobileMediaQuery);
+        // Both declarations should appear within the same media query block
+        const mediaBlockStart = result.indexOf(mobileMediaQuery);
+        const blockContent = result.slice(mediaBlockStart);
+        expect(blockContent).toContain("font-size: 24px !important");
+        expect(blockContent).toContain("line-height: 30px !important");
+    });
+    it("uses compound selector for responsive bottomSpacing", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        bottomSpacing: { default: "24px", mobile: "16px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
+        expect(result).toContain("padding-bottom: 16px !important");
+    });
+    it("emits no media queries for non-responsive variant", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).not.toContain("@media");
+    });
+    it("keeps style and bottomSpacing overrides separate", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        bottomSpacing: { default: "24px", mobile: "16px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        // Style overrides use "> div" selector
+        expect(result).toContain(".mjmlText--heading > div");
+        expect(result).toContain("font-size: 24px !important");
+        // Spacing overrides use compound selector (no "> div")
+        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
+        expect(result).toContain("padding-bottom: 16px !important");
+    });
+});

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

@@ -0,0 +1,12 @@
+import type { TextVariantStyles, Theme } from "../../theme/themeTypes.js";
+type StylePropertyKey = Exclude<keyof TextVariantStyles, "bottomSpacing">;
+export declare const textStyleCssProperties: ReadonlyArray<[StylePropertyKey, string]>;
+interface GenerateResponsiveTextCssOptions {
+    /** Selector for text style overrides, given a variant name. */
+    styleSelector: (variantName: string) => string;
+    /** Selector for bottomSpacing overrides, given a variant name. */
+    spacingSelector: (variantName: string) => string;
+}
+/** Generates responsive CSS media queries for text variant overrides. */
+export declare function generateResponsiveTextCss(theme: Theme, options: GenerateResponsiveTextCssOptions): string;
+export {};

package/lib/components/text/textStyles.js

@@ -0,0 +1,74 @@
+import { getResponsiveOverrides } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+export const textStyleCssProperties = [
+    ["fontFamily", "font-family"],
+    ["fontSize", "font-size"],
+    ["fontWeight", "font-weight"],
+    ["fontStyle", "font-style"],
+    ["lineHeight", "line-height"],
+    ["letterSpacing", "letter-spacing"],
+    ["textDecoration", "text-decoration"],
+    ["textTransform", "text-transform"],
+    ["color", "color"],
+];
+/** Generates responsive CSS media queries for text variant overrides. */
+export function generateResponsiveTextCss(theme, options) {
+    const { variants } = theme.text;
+    if (!variants) {
+        return css ``;
+    }
+    const cssChunks = [];
+    for (const [variantName, variantStyles] of Object.entries(variants)) {
+        if (!variantStyles) {
+            continue;
+        }
+        const styleOverrides = new Map();
+        const spacingOverrides = new Map();
+        for (const [themeKey, cssProperty] of textStyleCssProperties) {
+            const value = variantStyles[themeKey];
+            if (value === undefined) {
+                continue;
+            }
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
+                const declarations = styleOverrides.get(breakpointKey) ?? [];
+                declarations.push(`${cssProperty}: ${String(breakpointValue)} !important`);
+                styleOverrides.set(breakpointKey, declarations);
+            }
+        }
+        const bottomSpacingValue = variantStyles.bottomSpacing;
+        if (bottomSpacingValue !== undefined) {
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(bottomSpacingValue)) {
+                const declarations = spacingOverrides.get(breakpointKey) ?? [];
+                declarations.push(`padding-bottom: ${String(breakpointValue)} !important`);
+                spacingOverrides.set(breakpointKey, declarations);
+            }
+        }
+        for (const [breakpointKey, declarations] of styleOverrides) {
+            const breakpoint = theme.breakpoints[breakpointKey];
+            if (!breakpoint) {
+                continue;
+            }
+            cssChunks.push(css `
+                ${breakpoint.belowMediaQuery} {
+                    ${options.styleSelector(variantName)} {
+                        ${declarations.join(";\n")}
+                    }
+                }
+            `);
+        }
+        for (const [breakpointKey, declarations] of spacingOverrides) {
+            const breakpoint = theme.breakpoints[breakpointKey];
+            if (!breakpoint) {
+                continue;
+            }
+            cssChunks.push(css `
+                ${breakpoint.belowMediaQuery} {
+                    ${options.spacingSelector(variantName)} {
+                        ${declarations.join(";\n")}
+                    }
+                }
+            `);
+        }
+    }
+    return cssChunks.join("\n");
+}

package/lib/components/wrapper/InsideMjmlWrapperContext.d.ts

@@ -0,0 +1,3 @@
+export declare const InsideMjmlWrapperContext: import("react").Context<boolean>;
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export declare function useIsInsideMjmlWrapper(): boolean;

package/lib/components/wrapper/InsideMjmlWrapperContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const InsideMjmlWrapperContext = createContext(false);
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export function useIsInsideMjmlWrapper() {
+    return useContext(InsideMjmlWrapperContext);
+}

package/lib/components/wrapper/MjmlWrapper.d.ts

@@ -0,0 +1,7 @@
+import { type IMjmlWrapperProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlWrapperProps = IMjmlWrapperProps;
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of MjmlBody.
+ */
+export declare function MjmlWrapper({ children, ...restProps }: MjmlWrapperProps): ReactNode;

package/lib/components/wrapper/MjmlWrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlWrapper as BaseMjmlWrapper } from "@faire/mjml-react";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { InsideMjmlWrapperContext } from "./InsideMjmlWrapperContext.js";
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of MjmlBody.
+ */
+export function MjmlWrapper({ children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themeBackgroundProps = theme ? { backgroundColor: theme.colors.background.content } : {};
+    return (_jsx(BaseMjmlWrapper, { ...themeBackgroundProps, ...restProps, children: _jsx(InsideMjmlWrapperContext.Provider, { value: true, children: children }) }));
+}

package/lib/components/wrapper/__stories__/MjmlWrapper.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlWrapper } from "../MjmlWrapper.js";
+type Story = StoryObj<typeof MjmlWrapper>;
+declare const config: Meta<typeof MjmlWrapper>;
+export default config;
+export declare const Primary: Story;
+export declare const ExplicitBackgroundColor: Story;
+export declare const MultipleWrappersWithDifferentBackgrounds: Story;
+export declare const TransparentBackground: Story;
+export declare const FullWidth: Story;

package/lib/components/wrapper/__stories__/MjmlWrapper.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlText } from "../../text/MjmlText.js";
+import { MjmlWrapper } from "../MjmlWrapper.js";
+const config = {
+    title: "Components/MjmlWrapper",
+    component: MjmlWrapper,
+    tags: ["autodocs"],
+};
+export default config;
+export const Primary = {
+    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with the default theme background" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "A second section; both share the wrapper's background" }) }) })] })),
+};
+export const ExplicitBackgroundColor = {
+    args: {
+        backgroundColor: "#2d4a6e",
+    },
+    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { color: "#ffffff", bottomSpacing: true, children: "Explicit wrapper background; sections inside do not paint over it" }), _jsx(MjmlText, { color: "#ffffff", children: "A second section shares the wrapper background" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
+};
+export const MultipleWrappersWithDifferentBackgrounds = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsxs(MjmlWrapper, { ...args, backgroundColor: "#8fa5bf", children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #1" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) })] }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#c0c1c4", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #2" }), _jsx(MjmlSpacer, { height: 20 })] }) }) }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#ffffff", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #3" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })] })),
+};
+export const TransparentBackground = {
+    args: {
+        backgroundColor: "transparent",
+    },
+    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Transparent wrapper; the body background shows through" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
+};
+export const FullWidth = {
+    args: {
+        fullWidth: true,
+        backgroundColor: "#2d4a6e",
+    },
+    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "Full-width wrapper background extends edge-to-edge" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "The section inside does not override the wrapper's background" }) }) })] })),
+};

package/lib/index.d.ts

@@ -4,17 +4,25 @@ export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
 export type { SupportedBlocks } from "./blocks/factories/types.js";
 export type { PropsWithData } from "./blocks/helpers/PropsWithData.js";
+export type { HtmlInlineLinkProps } from "./components/inlineLink/HtmlInlineLink.js";
+export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
 export type { MjmlSectionProps } from "./components/section/MjmlSection.js";
 export { MjmlSection } from "./components/section/MjmlSection.js";
+export type { HtmlTextProps } from "./components/text/HtmlText.js";
+export { HtmlText } from "./components/text/HtmlText.js";
+export type { MjmlTextProps } from "./components/text/MjmlText.js";
+export { MjmlText } from "./components/text/MjmlText.js";
+export type { MjmlWrapperProps } from "./components/wrapper/MjmlWrapper.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 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 { Theme, ThemeBreakpoint, ThemeBreakpoints, ThemeSizes } from "./theme/themeTypes.js";
+export type { TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeColors, 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, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlDivider, type IMjmlDividerProps as MjmlDividerProps, 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, MjmlImage, type IMjmlImageProps as MjmlImageProps, 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, MjmlText, type IMjmlTextProps as MjmlTextProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, MjmlWrapper, type IMjmlWrapperProps as MjmlWrapperProps, } from "@faire/mjml-react";
+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, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlDivider, type IMjmlDividerProps as MjmlDividerProps, 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, MjmlImage, type IMjmlImageProps as MjmlImageProps, 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";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/index.js

@@ -2,14 +2,18 @@ export { BlocksBlock } from "./blocks/factories/BlocksBlock.js";
 export { ListBlock } from "./blocks/factories/ListBlock.js";
 export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
+export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
 export { MjmlSection } from "./components/section/MjmlSection.js";
+export { HtmlText } from "./components/text/HtmlText.js";
+export { MjmlText } from "./components/text/MjmlText.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 export { createTheme } from "./theme/createTheme.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { css } from "./utils/css.js";
-export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlDivider, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlImage, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlText, MjmlTitle, MjmlWrapper, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlDivider, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlImage, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/server/renderMailHtml.d.ts

@@ -1,5 +1,5 @@
 import mjml2html from "mjml";
-import { type ReactElement } from "react";
+import type { ReactElement } from "react";
 type MjmlOptions = Parameters<typeof mjml2html>[1];
 type MjmlWarning = ReturnType<typeof mjml2html>["errors"][number];
 export declare function renderMailHtml(element: ReactElement, options?: MjmlOptions): {

package/lib/storybook/MailRendererDecorator.d.ts

@@ -1 +1,7 @@
-export declare function MailRendererDecorator(Story: () => React.JSX.Element): import("react/jsx-runtime").JSX.Element;
+import type { Theme } from "../theme/themeTypes.js";
+export declare function MailRendererDecorator(Story: () => React.JSX.Element, context: {
+    parameters: {
+        mailRoot?: boolean;
+        theme?: Theme;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/lib/storybook/MailRendererDecorator.js

@@ -4,10 +4,10 @@ import { renderMailHtml } from "../client/renderMailHtml.js";
 import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
 import { replaceImagesWithPublicUrl } from "./replaceImagesWithPublicUrl.js";
 const RENDER_RESULT_EVENT = "comet-mail-render-result";
-export function MailRendererDecorator(Story) {
+export function MailRendererDecorator(Story, context) {
     const [globals] = useGlobals();
     const emit = useChannel({});
-    const { html: rawHtml, mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(Story, {}) }));
+    const { html: rawHtml, mjmlWarnings } = renderMailHtml(context.parameters.mailRoot === false ? (_jsx(Story, {})) : (_jsx(MjmlMailRoot, { theme: context.parameters.theme, children: _jsx(Story, {}) })));
     for (const warning of mjmlWarnings) {
         console.warn("MJML warning:", warning);
     }

package/lib/storybook/preview.d.ts

@@ -3,3 +3,37 @@ export declare const decorators: (typeof MailRendererDecorator)[];
 export declare const initialGlobals: {
     usePublicImageUrls: boolean;
 };
+export declare const parameters: {
+    viewport: {
+        options: {
+            mobile: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            tablet: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            emailWidth: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            desktop: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+};

package/lib/storybook/preview.js

@@ -3,3 +3,25 @@ export const decorators = [MailRendererDecorator];
 export const initialGlobals = {
     usePublicImageUrls: false,
 };
+export const parameters = {
+    viewport: {
+        options: {
+            mobile: {
+                name: "Mobile (375px)",
+                styles: { width: "375px", height: "1024px" },
+            },
+            tablet: {
+                name: "Tablet (500px)",
+                styles: { width: "500px", height: "1024px" },
+            },
+            emailWidth: {
+                name: "Email max-width (600px)",
+                styles: { width: "600px", height: "1024px" },
+            },
+            desktop: {
+                name: "Desktop (768px)",
+                styles: { width: "768px", height: "1024px" },
+            },
+        },
+    },
+};

package/lib/theme/__stories__/ThemeProvider.stories.js

@@ -11,7 +11,7 @@ const config = {
 };
 export default config;
 export const Basic = {
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Using the default theme from the decorator." }) }) })),
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Using the default theme from the decorator." }) }) })),
 };
 const narrowTheme = createTheme({
     sizes: { bodyWidth: 400 },
@@ -19,5 +19,5 @@ const narrowTheme = createTheme({
 });
 export const CustomTheme = {
     parameters: { theme: narrowTheme },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "This email uses a 400px body width and 360px mobile breakpoint." }) }) })),
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "This email uses a 400px body width and 360px mobile breakpoint." }) }) })),
 };

package/lib/theme/createTheme.d.ts

@@ -1,7 +1,11 @@
-import type { Theme, ThemeBreakpoints, ThemeSizes } from "./themeTypes.js";
+import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeColors, ThemeSizes, ThemeText } from "./themeTypes.js";
 type CreateThemeOverrides = {
     sizes?: Partial<ThemeSizes>;
     breakpoints?: Partial<ThemeBreakpoints>;
+    text?: Partial<ThemeText>;
+    colors?: {
+        background?: Partial<ThemeBackgroundColors>;
+    } & Partial<Omit<ThemeColors, "background">>;
 };
 /**
  * Creates a complete theme by merging optional overrides onto the default