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

package/lib/components/text/__stories__/HtmlText.stories.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { HtmlText } from "../HtmlText.js";
+const config = {
+    title: "Components/HtmlText",
+    component: HtmlText,
+    tags: ["autodocs"],
+};
+export default config;
+export const Default = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { children: "Default text with base theme styles" }) }) }) }) }) })),
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
+                    body: { fontSize: "16px", lineHeight: "24px" },
+                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Heading variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "body", children: "Body variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "caption", children: "Caption variant" }) })] }) }) }) })),
+};
+export const ResponsiveVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                        fontWeight: 700,
+                    },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) }) }) }) })),
+};
+export const BottomSpacing = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                bottomSpacing: "20px",
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { children: "Text without bottom spacing" }) })] }) }) }) })),
+};
+export const DefaultVariant = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                    heading: { fontSize: "28px", fontWeight: 700 },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { children: "Uses the default \"body\" variant automatically" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Explicit heading variant" }) })] }) }) }) })),
+};
+export const ElementPropAsDiv = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "div", children: "Rendered as a div with theme styles" }) }) }) })),
+};
+export const ElementPropAsAnchor = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "a", href: "https://example.com", style: { textDecoration: "underline" }, children: "Rendered as an anchor with href" }) }) }) })),
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlText } from "../MjmlText.js";
+type Story = StoryObj<typeof MjmlText>;
+declare const config: Meta<typeof MjmlText>;
+export default config;
+export declare const Default: Story;
+export declare const WithVariants: Story;
+export declare const ResponsiveVariants: Story;
+export declare const BottomSpacing: Story;
+export declare const DefaultVariant: Story;

package/lib/components/text/__stories__/MjmlText.stories.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlText } from "../MjmlText.js";
+const config = {
+    title: "Components/MjmlText",
+    component: MjmlText,
+    tags: ["autodocs"],
+};
+export default config;
+export const Default = {
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Default text with base theme styles" }) }) })),
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
+                    body: { fontSize: "16px", lineHeight: "24px" },
+                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", children: "Heading variant" }), _jsx(MjmlText, { variant: "body", children: "Body variant" }), _jsx(MjmlText, { variant: "caption", children: "Caption variant" })] }) })),
+};
+export const ResponsiveVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                        fontWeight: 700,
+                    },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) })),
+};
+export const BottomSpacing = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                bottomSpacing: "20px",
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }), _jsx(MjmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }), _jsx(MjmlText, { children: "Text without bottom spacing" })] }) })),
+};
+export const DefaultVariant = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                    heading: { fontSize: "28px", fontWeight: 700 },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { children: "Uses the default \"body\" variant automatically" }), _jsx(MjmlText, { variant: "heading", children: "Explicit heading variant" })] }) })),
+};

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

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

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,69 @@
+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/index.d.ts

@@ -4,17 +4,23 @@ 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 { 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, MjmlWrapper, type IMjmlWrapperProps as MjmlWrapperProps, } 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,17 @@ 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 { 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, MjmlWrapper, } 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/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/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

package/lib/theme/createTheme.js

@@ -20,5 +20,11 @@ export function createTheme(overrides) {
             default: createBreakpoint(resolvedSizes.bodyWidth),
             ...overrides?.breakpoints,
         },
+        text: { ...defaultTheme.text, ...overrides?.text },
+        colors: {
+            ...defaultTheme.colors,
+            ...overrides?.colors,
+            background: { ...defaultTheme.colors.background, ...overrides?.colors?.background },
+        },
     };
 }