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

package/lib/__stories__/examples/CustomBackgroundForFooter.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer, MjmlTable } from "@faire/mjml-react";
+import { HtmlInlineLink } from "../../components/inlineLink/HtmlInlineLink.js";
+import { MjmlMailRoot } from "../../components/mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../../components/section/MjmlSection.js";
+import { HtmlText } from "../../components/text/HtmlText.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { MjmlWrapper } from "../../components/wrapper/MjmlWrapper.js";
+import { createTheme } from "../../theme/createTheme.js";
+const config = {
+    title: "Examples/CustomBackgroundForFooter",
+    parameters: { mailRoot: false },
+};
+export default config;
+export const Default = {
+    render: () => {
+        const theme = createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
+                    body: { fontSize: "14px", lineHeight: "20px" },
+                    legal: { fontSize: "12px", lineHeight: "18px" },
+                },
+            },
+        });
+        const footerTheme = structuredClone(theme);
+        footerTheme.colors.background.content = "#2d4a6e";
+        footerTheme.text.color = "#c8d8e9";
+        return (_jsxs(MjmlMailRoot, { theme: theme, children: [_jsx(MjmlSection, { backgroundColor: "#1a1a1a", indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 15 }), _jsx(MjmlText, { color: "#ffffff", fontWeight: "bold", align: "center", children: "Company Name" }), _jsx(MjmlSpacer, { height: 15 })] }) }), _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "This is a notification email" }), _jsx(MjmlText, { bottomSpacing: true, children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur. Ratione perferendis distinctio sapiente est. Dolor consequatur qui excepturi natus." }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus quis soluta. Est recusandae delectus sed sed deserunt velit quia. Occaecati vel possimus similique reiciendis possimus iure rerum sit architecto." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsxs(MjmlWrapper, { backgroundColor: "#dddddd", children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { align: "center", bottomSpacing: true, children: "\u00A9 2026 Company Name \u2013 All rights reserved" }), _jsx(MjmlText, { variant: "legal", align: "center", bottomSpacing: true, children: "Legal text, corporis eos et quia. Assumenda eum maiores esse. Voluptas laudantium cupiditate aut repudiandae iste fugiat nam. Quas in debitis. Sed laudantium illum aut occaecati excepturi veniam harum reprehenderit." })] }) }), _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlTable, { width: "auto", align: "center", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx(HtmlText, { align: "center", children: _jsx(HtmlInlineLink, { href: "https://example.com/privacy", children: "Privacy Policy" }) }), _jsx("td", { width: "20px" }), _jsx(HtmlText, { align: "center", children: _jsx(HtmlInlineLink, { href: "https://example.com/imprint", children: "Imprint" }) }), _jsx("td", { width: "20px" }), _jsx(HtmlText, { align: "center", children: _jsx(HtmlInlineLink, { href: "https://example.com", children: "Website" }) })] }) }) }), _jsx(MjmlSpacer, { height: 20 })] }) })] })] }));
+    },
+};

package/lib/__stories__/layout-patterns/AsymmetricTwoColumnLayout.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const config: Meta;
+export default config;
+export declare const SmallColumnLeft: StoryObj;
+export declare const SmallColumnRight: StoryObj;
+export declare const ReversedMobileStackOrder: StoryObj;

package/lib/__stories__/layout-patterns/AsymmetricTwoColumnLayout.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlImage, MjmlSpacer, MjmlWrapper } from "@faire/mjml-react";
+import { MjmlSection } from "../../components/section/MjmlSection.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { createTheme } from "../../theme/createTheme.js";
+import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+const config = {
+    title: "Layout Patterns/Asymmetric Two-Column Layout",
+};
+export default config;
+const theme = createTheme({
+    text: {
+        defaultVariant: "body",
+        variants: {
+            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
+            body: { fontSize: "16px", lineHeight: "24px" },
+        },
+    },
+});
+const SMALL_COLUMN_WIDTH = 120;
+const COLUMN_GAP = 20;
+const sectionIndent = getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
+const sectionInnerWidth = theme.sizes.bodyWidth - 2 * sectionIndent;
+const fluidColumnWidth = sectionInnerWidth - SMALL_COLUMN_WIDTH;
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .asymmetricLayoutLeft__fluidColumn {
+                width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+                max-width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+            }
+        }
+
+        ${theme.breakpoints.mobile.belowMediaQuery} {
+            .asymmetricLayoutLeft__fluidColumn {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+
+            .asymmetricLayoutLeft__smallColumn {
+                margin-bottom: 10px;
+            }
+
+            .asymmetricLayoutLeft__fluidColumn > table > tbody > tr > td {
+                padding-left: 0 !important;
+            }
+        }
+    `);
+export const SmallColumnLeft = {
+    parameters: { theme },
+    render: () => (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Small column on the left" }), _jsx(MjmlText, { children: "A fixed-width column on the left with a fluid column taking the remaining space. On mobile, columns stack vertically with the small column on top." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsxs(MjmlSection, { indent: true, children: [_jsx(MjmlColumn, { className: "asymmetricLayoutLeft__smallColumn", width: `${SMALL_COLUMN_WIDTH}px`, verticalAlign: "middle", children: _jsx(MjmlImage, { src: `https://picsum.photos/seed/1/${SMALL_COLUMN_WIDTH}/150`, alt: "Placeholder", align: "center", width: SMALL_COLUMN_WIDTH }) }), _jsxs(MjmlColumn, { className: "asymmetricLayoutLeft__fluidColumn", width: `${fluidColumnWidth}px`, paddingLeft: `${COLUMN_GAP}px`, verticalAlign: "middle", children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Fluid column" }), _jsx(MjmlText, { children: "This column takes the remaining width after the fixed-width column. The gap between columns is created via padding on the fluid column's inner edge." })] })] }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] })),
+};
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .asymmetricLayoutRight__fluidColumn {
+                width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+                max-width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+            }
+        }
+
+        ${theme.breakpoints.mobile.belowMediaQuery} {
+            .asymmetricLayoutRight__fluidColumn {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+
+            .asymmetricLayoutRight__smallColumn {
+                margin-top: 10px;
+            }
+
+            .asymmetricLayoutRight__fluidColumn > table > tbody > tr > td {
+                padding-right: 0 !important;
+            }
+        }
+    `);
+export const SmallColumnRight = {
+    parameters: { theme },
+    render: () => (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Small column on the right" }), _jsx(MjmlText, { children: "A fluid column on the left with a fixed-width column on the right. On mobile, columns stack vertically with the fluid column on top." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsxs(MjmlSection, { indent: true, children: [_jsxs(MjmlColumn, { className: "asymmetricLayoutRight__fluidColumn", width: `${fluidColumnWidth}px`, paddingRight: `${COLUMN_GAP}px`, verticalAlign: "middle", children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Fluid column" }), _jsx(MjmlText, { children: "This column takes the remaining width after the fixed-width column. The gap between columns is created via padding on the fluid column's inner edge." })] }), _jsx(MjmlColumn, { className: "asymmetricLayoutRight__smallColumn", width: `${SMALL_COLUMN_WIDTH}px`, verticalAlign: "middle", children: _jsx(MjmlImage, { src: `https://picsum.photos/seed/2/${SMALL_COLUMN_WIDTH}/150`, alt: "Placeholder", align: "center", width: SMALL_COLUMN_WIDTH }) })] }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] })),
+};
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .asymmetricLayoutRtl__fluidColumn {
+                width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+                max-width: calc(100% - ${SMALL_COLUMN_WIDTH}px) !important;
+            }
+        }
+
+        ${theme.breakpoints.mobile.belowMediaQuery} {
+            .asymmetricLayoutRtl__fluidColumn {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+
+            .asymmetricLayoutRtl__smallColumn {
+                margin-bottom: 10px;
+            }
+
+            .asymmetricLayoutRtl__fluidColumn > table > tbody > tr > td {
+                padding-right: 0 !important;
+            }
+        }
+    `);
+export const ReversedMobileStackOrder = {
+    parameters: { theme },
+    render: () => (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Small column on the right, stacks on top on mobile" }), _jsxs(MjmlText, { children: ["Uses ", _jsx("code", { children: "direction=\"rtl\"" }), " on the section to visually place the small column on the right on desktop, while keeping it first in source order so it stacks on top on mobile. A wrapper handles the indentation separately to avoid a 1px line artifact in Outlook."] }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(MjmlWrapper, { padding: `0 ${sectionIndent}px`, backgroundColor: theme.colors.background.content, children: _jsxs(MjmlSection, { direction: "rtl", children: [_jsx(MjmlColumn, { className: "asymmetricLayoutRtl__smallColumn", width: `${SMALL_COLUMN_WIDTH}px`, verticalAlign: "middle", children: _jsx(MjmlImage, { src: `https://picsum.photos/seed/3/${SMALL_COLUMN_WIDTH}/150`, alt: "Placeholder", align: "center", width: SMALL_COLUMN_WIDTH }) }), _jsxs(MjmlColumn, { className: "asymmetricLayoutRtl__fluidColumn", width: `${fluidColumnWidth}px`, paddingRight: `${COLUMN_GAP}px`, verticalAlign: "middle", children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Fluid column" }), _jsxs(MjmlText, { children: ["Source order: small column first, fluid column second. On desktop, ", _jsx("code", { children: "direction=\"rtl\"" }), " flips the visual order so the fluid column appears on the left."] })] })] }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] })),
+};

package/lib/__stories__/layout-patterns/SymmetricFourColumnLayout.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const config: Meta;
+export default config;
+export declare const Default: StoryObj;

package/lib/__stories__/layout-patterns/SymmetricFourColumnLayout.stories.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { MjmlSection } from "../../components/section/MjmlSection.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { createTheme } from "../../theme/createTheme.js";
+import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+const config = {
+    title: "Layout Patterns/Symmetric Four-Column Layout",
+};
+export default config;
+const theme = createTheme({
+    text: {
+        defaultVariant: "body",
+        variants: {
+            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
+            subheading: { fontSize: "16px", lineHeight: "22px", fontWeight: "bold" },
+            body: { fontSize: "14px", lineHeight: "20px" },
+        },
+    },
+});
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .symmetricFourColumnsSection > table > tbody > tr > td {
+                display: flex !important;
+                flex-direction: column !important;
+                gap: 20px !important;
+            }
+
+            .symmetricFourColumnsSection__column {
+                flex: none !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                display: block !important;
+            }
+
+            .symmetricFourColumnsSection__column > table > tbody > tr > td {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+        }
+    `);
+export const Default = {
+    parameters: { theme },
+    render: () => {
+        const SymmetricFourColumnSection = () => {
+            const columnGap = 20;
+            const halfColumnGap = columnGap / 2;
+            const availableContentWidth = theme.sizes.bodyWidth - 2 * getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
+            const contentWidthPerColumn = (availableContentWidth - 3 * columnGap) / 4;
+            const outerColumnWidth = `${((contentWidthPerColumn + halfColumnGap) / availableContentWidth) * 100}%`;
+            const innerColumnWidth = `${((contentWidthPerColumn + columnGap) / availableContentWidth) * 100}%`;
+            return (_jsxs(MjmlSection, { indent: true, className: "symmetricFourColumnsSection", children: [_jsxs(MjmlColumn, { width: outerColumnWidth, paddingRight: halfColumnGap, className: "symmetricFourColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "First" }), _jsx(MjmlText, { children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur." })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "symmetricFourColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Second" }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus." })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "symmetricFourColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Third" }), _jsx(MjmlText, { children: "Occaecati vel possimus similique reiciendis iure rerum sit architecto." })] }), _jsxs(MjmlColumn, { width: outerColumnWidth, paddingLeft: halfColumnGap, className: "symmetricFourColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Fourth" }), _jsx(MjmlText, { children: "Voluptas laudantium cupiditate aut repudiandae iste fugiat nam quas debitis." })] })] }));
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Four column layout" }), _jsx(MjmlText, { children: "Four columns follow the same compensation pattern as three columns. The two inner columns each get a wider width to absorb their double-sided padding. On mobile, a flex reset neutralizes the desktop widths so columns can stack equally." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(SymmetricFourColumnSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
+    },
+};

package/lib/__stories__/layout-patterns/SymmetricThreeColumnLayout.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const config: Meta;
+export default config;
+export declare const Default: StoryObj;
+export declare const NeverStacks: StoryObj;

package/lib/__stories__/layout-patterns/SymmetricThreeColumnLayout.stories.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { MjmlSection } from "../../components/section/MjmlSection.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { createTheme } from "../../theme/createTheme.js";
+import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+const config = {
+    title: "Layout Patterns/Symmetric Three-Column Layout",
+};
+export default config;
+const theme = createTheme({
+    text: {
+        defaultVariant: "body",
+        variants: {
+            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
+            subheading: { fontSize: "16px", lineHeight: "22px", fontWeight: "bold" },
+            body: { fontSize: "14px", lineHeight: "20px" },
+        },
+    },
+});
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .symmetricThreeColumnsSection > table > tbody > tr > td {
+                display: flex !important;
+                gap: 20px !important;
+            }
+
+            .symmetricThreeColumnsSection__column {
+                flex: 1 1 0% !important;
+                width: auto !important;
+                max-width: none !important;
+                display: block !important;
+            }
+
+            .symmetricThreeColumnsSection__column > table > tbody > tr > td {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+        }
+
+        ${theme.breakpoints.mobile.belowMediaQuery} {
+            .symmetricThreeColumnsSection > table > tbody > tr > td {
+                flex-direction: column !important;
+            }
+
+            .symmetricThreeColumnsSection__column {
+                flex: none !important;
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+        }
+    `);
+export const Default = {
+    parameters: { theme },
+    render: () => {
+        const SymmetricThreeColumnSection = () => {
+            const columnGap = 20;
+            const halfColumnGap = columnGap / 2;
+            const availableContentWidth = theme.sizes.bodyWidth - 2 * getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
+            const contentWidthPerColumn = (availableContentWidth - 2 * columnGap) / 3;
+            const outerColumnWidth = `${((contentWidthPerColumn + halfColumnGap) / availableContentWidth) * 100}%`;
+            const innerColumnWidth = `${((contentWidthPerColumn + columnGap) / availableContentWidth) * 100}%`;
+            return (_jsxs(MjmlSection, { indent: true, className: "symmetricThreeColumnsSection", children: [_jsxs(MjmlColumn, { width: outerColumnWidth, paddingRight: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "First column" }), _jsx(MjmlText, { children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur. Ratione perferendis distinctio sapiente est." })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Second column" }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus quis soluta. Est recusandae delectus." })] }), _jsxs(MjmlColumn, { width: outerColumnWidth, paddingLeft: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Third column" }), _jsx(MjmlText, { children: "Occaecati vel possimus similique reiciendis iure rerum sit architecto. Voluptas laudantium cupiditate aut repudiandae iste." })] })] }));
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Three column layout" }), _jsx(MjmlText, { children: "Three columns require explicit width compensation. Inner columns have padding on both sides while outer columns only have it on one side, so inner columns are given a wider width to keep all content areas equal. On mobile, a flex reset neutralizes the desktop widths so columns can size equally and then stack." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(SymmetricThreeColumnSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
+    },
+};
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .neverStackingThreeColumnsSection > table > tbody > tr > td > div {
+                display: flex !important;
+                gap: 20px !important;
+            }
+
+            .neverStackingThreeColumnsSection__column {
+                flex: 1 1 0% !important;
+                width: auto !important;
+                max-width: none !important;
+                display: block !important;
+            }
+
+            .neverStackingThreeColumnsSection__column > table > tbody > tr > td {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+        }
+    `);
+export const NeverStacks = {
+    parameters: { theme },
+    render: () => {
+        const NeverStackingThreeColumnSection = () => {
+            const columnGap = 20;
+            const halfColumnGap = columnGap / 2;
+            const availableContentWidth = theme.sizes.bodyWidth - 2 * getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
+            const contentWidthPerColumn = (availableContentWidth - 2 * columnGap) / 3;
+            const outerColumnWidth = `${((contentWidthPerColumn + halfColumnGap) / availableContentWidth) * 100}%`;
+            const innerColumnWidth = `${((contentWidthPerColumn + columnGap) / availableContentWidth) * 100}%`;
+            return (_jsxs(MjmlSection, { indent: true, disableResponsiveBehavior: true, className: "neverStackingThreeColumnsSection", children: [_jsxs(MjmlColumn, { width: outerColumnWidth, paddingRight: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Foo" }), _jsx(MjmlText, { children: "Lorem" })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Bar" }), _jsx(MjmlText, { children: "Ipsum" })] }), _jsxs(MjmlColumn, { width: outerColumnWidth, paddingLeft: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Baz" }), _jsx(MjmlText, { children: "Dolor" })] })] }));
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Three columns that never stack" }), _jsx(MjmlText, { bottomSpacing: true, children: "Same width compensation and flex-reset mechanic as the default three-column layout, without the mobile stacking override so columns stay side-by-side at every viewport." }), _jsxs(MjmlText, { bottomSpacing: true, children: [_jsx("code", { children: "disableResponsiveBehavior" }), " wraps the columns in an ", _jsx("code", { children: "MjmlGroup" }), " internally so MJML's own mobile auto-stack is suppressed even in clients that ignore the flex CSS. Because of that wrapper, the flex reset targets one level deeper (", _jsx("code", { children: "\u2026 > td > div" }), ") than in the default layout."] }), _jsx(MjmlText, { children: "Suitable for short, fixed-value rows \u2014 metrics, numeric summaries, icon strips \u2014 that remain readable even when narrow." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(NeverStackingThreeColumnSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
+    },
+};

package/lib/__stories__/layout-patterns/SymmetricTwoColumnLayout.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const config: Meta;
+export default config;
+export declare const Default: StoryObj;

package/lib/__stories__/layout-patterns/SymmetricTwoColumnLayout.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { MjmlSection } from "../../components/section/MjmlSection.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { createTheme } from "../../theme/createTheme.js";
+import { css } from "../../utils/css.js";
+const config = {
+    title: "Layout Patterns/Symmetric Two-Column Layout",
+};
+export default config;
+const theme = createTheme({
+    text: {
+        defaultVariant: "body",
+        variants: {
+            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
+            subheading: { fontSize: "16px", lineHeight: "22px", fontWeight: "bold" },
+            body: { fontSize: "14px", lineHeight: "20px" },
+        },
+    },
+});
+registerStyles((theme) => css `
+        ${theme.breakpoints.mobile.belowMediaQuery} {
+            .twoColumnsSection__leftColumn > table > tbody > tr > td {
+                padding-right: 0 !important;
+            }
+
+            .twoColumnsSection__rightColumn > table > tbody > tr > td {
+                padding-left: 0 !important;
+            }
+
+            .twoColumnsSection__leftColumn {
+                margin-bottom: 20px;
+            }
+        }
+    `);
+export const Default = {
+    parameters: { theme },
+    render: () => {
+        const TwoColumnsSection = () => {
+            const columnGap = 20;
+            const halfGap = columnGap / 2;
+            return (_jsxs(MjmlSection, { indent: true, className: "twoColumnsSection", children: [_jsxs(MjmlColumn, { className: "twoColumnsSection__leftColumn", paddingRight: halfGap, children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Left column" }), _jsx(MjmlText, { children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur. Ratione perferendis distinctio sapiente est. Dolor consequatur qui excepturi natus." })] }), _jsxs(MjmlColumn, { className: "twoColumnsSection__rightColumn", paddingLeft: halfGap, children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Right column" }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus quis soluta. Est recusandae delectus sed sed deserunt velit quia." })] })] }));
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Two column layout" }), _jsx(MjmlText, { children: "Two columns with equal widths split evenly by MJML. Each column gets half-gap padding on its inner side to create the 20px gap. No explicit width calculation is needed." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(TwoColumnsSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
+    },
+};

package/lib/blocks/factories/BlocksBlock.d.ts

@@ -1,4 +1,4 @@
-import { type SupportedBlocks } from "./types.js";
+import type { SupportedBlocks } from "./types.js";
 interface Props {
     supportedBlocks: SupportedBlocks;
     data: {

package/lib/blocks/factories/OneOfBlock.d.ts

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from "react";
-import { type SupportedBlocks } from "./types.js";
+import type { PropsWithChildren } from "react";
+import type { SupportedBlocks } from "./types.js";
 interface Props extends PropsWithChildren {
     data: {
         block?: {

package/lib/blocks/factories/OptionalBlock.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 interface Props extends PropsWithChildren {
     block: (props: any) => ReactNode;
     data: {

package/lib/blocks/factories/types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface SupportedBlocks {
     [key: string]: (props: any) => ReactNode | undefined;
 }

package/lib/client/renderMailHtml.d.ts

@@ -1,5 +1,5 @@
 import mjml2html from "mjml-browser";
-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/components/section/MjmlSection.d.ts

@@ -11,5 +11,5 @@ export type MjmlSectionProps = IMjmlSectionProps & {
         group?: Partial<IMjmlGroupProps>;
     };
 };
-/** A section wrapper for email layouts. Must be a direct child of `MjmlBody`. */
+/** 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

@@ -5,12 +5,14 @@ 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";
-/** A section wrapper for email layouts. Must be a direct child of `MjmlBody`. */
+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 ? { backgroundColor: theme.colors.background.content } : {};
+    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) {
@@ -24,13 +26,15 @@ function getIndentProps(theme) {
 }
 registerStyles((theme) => {
     const overrides = getResponsiveOverrides(theme.sizes.contentIndentation);
-    if (overrides.length === 0)
+    if (overrides.length === 0) {
         return css ``;
+    }
     return overrides
         .map((override) => {
         const breakpoint = theme.breakpoints[override.breakpointKey];
-        if (!breakpoint)
+        if (!breakpoint) {
             return "";
+        }
         return css `
                 ${breakpoint.belowMediaQuery} {
                     .mjmlSection--indented > table > tbody > tr > td {

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

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type JSX, type ReactNode, type TdHTMLAttributes } from "react";
+import type { ComponentPropsWithoutRef, JSX, ReactNode, TdHTMLAttributes } from "react";
 import type { VariantName } from "../../theme/themeTypes.js";
 interface HtmlTextOwnProps {
     /**

package/lib/components/text/textStyles.js

@@ -14,18 +14,21 @@ export const textStyleCssProperties = [
 /** Generates responsive CSS media queries for text variant overrides. */
 export function generateResponsiveTextCss(theme, options) {
     const { variants } = theme.text;
-    if (!variants)
+    if (!variants) {
         return css ``;
+    }
     const cssChunks = [];
     for (const [variantName, variantStyles] of Object.entries(variants)) {
-        if (!variantStyles)
+        if (!variantStyles) {
             continue;
+        }
         const styleOverrides = new Map();
         const spacingOverrides = new Map();
         for (const [themeKey, cssProperty] of textStyleCssProperties) {
             const value = variantStyles[themeKey];
-            if (value === undefined)
+            if (value === undefined) {
                 continue;
+            }
             for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
                 const declarations = styleOverrides.get(breakpointKey) ?? [];
                 declarations.push(`${cssProperty}: ${String(breakpointValue)} !important`);
@@ -42,8 +45,9 @@ export function generateResponsiveTextCss(theme, options) {
         }
         for (const [breakpointKey, declarations] of styleOverrides) {
             const breakpoint = theme.breakpoints[breakpointKey];
-            if (!breakpoint)
+            if (!breakpoint) {
                 continue;
+            }
             cssChunks.push(css `
                 ${breakpoint.belowMediaQuery} {
                     ${options.styleSelector(variantName)} {
@@ -54,8 +58,9 @@ export function generateResponsiveTextCss(theme, options) {
         }
         for (const [breakpointKey, declarations] of spacingOverrides) {
             const breakpoint = theme.breakpoints[breakpointKey];
-            if (!breakpoint)
+            if (!breakpoint) {
                 continue;
+            }
             cssChunks.push(css `
                 ${breakpoint.belowMediaQuery} {
                     ${options.spacingSelector(variantName)} {

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

@@ -13,6 +13,8 @@ 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";
@@ -21,6 +23,6 @@ export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/r
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.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, 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

@@ -7,12 +7,13 @@ 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, 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/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/responsiveValue.js

@@ -14,8 +14,9 @@ export function getDefaultFromResponsiveValue(value) {
  * theme properties.
  */
 export function getDefaultOrUndefined(value) {
-    if (value === undefined)
+    if (value === undefined) {
         return undefined;
+    }
     return getDefaultFromResponsiveValue(value);
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.3",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -14,15 +14,15 @@
     "lib/*"
   ],
   "dependencies": {
-    "@faire/mjml-react": "^3.5.3",
+    "@faire/mjml-react": "^3.5.4",
     "clsx": "^2.1.1",
     "mjml": "^4.18.0",
     "mjml-browser": "^4.18.0"
   },
   "devDependencies": {
     "@fission-ai/openspec": "^1.2.0",
-    "@storybook/addon-docs": "^10.3.1",
-    "@storybook/react-vite": "^10.3.1",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@types/mjml": "^4.7.4",
     "@types/mjml-browser": "^4.15.0",
     "@types/react": "^19.2.10",
@@ -34,11 +34,11 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rimraf": "^6.1.2",
-    "storybook": "^10.3.1",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@comet/cli": "9.0.0-beta.2",
-    "@comet/eslint-config": "9.0.0-beta.2"
+    "@comet/cli": "9.0.0-beta.3",
+    "@comet/eslint-config": "9.0.0-beta.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/lib/__stories__/examples/TextWithImageEmail.stories.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn, MjmlImage, MjmlSpacer } from "@faire/mjml-react";
-import { MjmlMailRoot } from "../../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../../components/section/MjmlSection.js";
-import { MjmlText } from "../../components/text/MjmlText.js";
-import { registerStyles } from "../../styles/registerStyles.js";
-import { createTheme } from "../../theme/createTheme.js";
-import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
-import { css } from "../../utils/css.js";
-const config = {
-    title: "Examples/TextWithImageEmail",
-    parameters: { mailRoot: false },
-};
-export default config;
-export const Default = {
-    render: () => {
-        const theme = createTheme({
-            text: {
-                defaultVariant: "body",
-                variants: {
-                    heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
-                    body: { fontSize: "16px", lineHeight: "24px" },
-                },
-            },
-        });
-        const IMAGE_WIDTH = 120;
-        const IMAGE_TEXT_GAP = 20;
-        registerStyles((theme) => css `
-                ${theme.breakpoints.default.belowMediaQuery} {
-                    .textWithImageEmail__textColumn {
-                        width: calc(100% - ${IMAGE_WIDTH}px) !important;
-                        max-width: calc(100% - ${IMAGE_WIDTH}px) !important;
-                    }
-                }
-
-                ${theme.breakpoints.mobile.belowMediaQuery} {
-                    .textWithImageEmail__imageColumn {
-                        margin-bottom: 10px;
-                    }
-
-                    .textWithImageEmail__textColumn {
-                        width: 100% !important;
-                        max-width: 100% !important;
-                    }
-
-                    .textWithImageEmail__textColumn > table > tbody > tr > td {
-                        padding-left: 0 !important;
-                    }
-                }
-            `);
-        const sectionIndent = getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
-        const sectionInnerWidth = theme.sizes.bodyWidth - 2 * sectionIndent;
-        const textColumnWidth = sectionInnerWidth - IMAGE_WIDTH;
-        return (_jsxs(MjmlMailRoot, { theme: theme, children: [_jsx(MjmlSection, { backgroundColor: "#1a1a1a", indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 15 }), _jsx(MjmlText, { color: "#ffffff", fontWeight: "bold", align: "center", children: "Company Name" }), _jsx(MjmlSpacer, { height: 15 })] }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) }), _jsxs(MjmlSection, { indent: true, children: [_jsx(MjmlColumn, { className: "textWithImageEmail__imageColumn", width: `${IMAGE_WIDTH}px`, verticalAlign: "middle", children: _jsx(MjmlImage, { src: `https://picsum.photos/seed/1/${IMAGE_WIDTH}/150`, alt: "Featured image", align: "center", width: IMAGE_WIDTH }) }), _jsxs(MjmlColumn, { className: "textWithImageEmail__textColumn", width: `${textColumnWidth}px`, paddingLeft: `${IMAGE_TEXT_GAP}px`, verticalAlign: "middle", children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Responsive Text-Image" }), _jsx(MjmlText, { children: "Demonstrates a responsive text-image layout with a fixed-width image column and a text column taking up remaining space." })] })] }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
-    },
-};