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

package/lib/__stories__/examples/CustomBackgroundForFooter.stories.d.ts

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

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__/examples/CustomNestedFooterTheme.stories.d.ts

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

package/lib/__stories__/examples/CustomNestedFooterTheme.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 { createTheme } from "../../theme/createTheme.js";
+import { ThemeProvider } from "../../theme/ThemeProvider.js";
+const config = {
+    title: "Examples/CustomNestedFooterTheme",
+    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(ThemeProvider, { theme: footerTheme, 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__/examples/NotificationEmail.stories.d.ts

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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, 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 { createTheme } from "../../theme/createTheme.js";
+const config = {
+    title: "Examples/NotificationEmail",
+    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" },
+                },
+            },
+        });
+        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 })] }) })] }));
+    },
+};

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/inlineLink/HtmlInlineLink.d.ts

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

package/lib/components/inlineLink/HtmlInlineLink.js

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

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HtmlInlineLink } from "../HtmlInlineLink.js";
+type Story = StoryObj<typeof HtmlInlineLink>;
+declare const config: Meta<typeof HtmlInlineLink>;
+export default config;
+export declare const InText: Story;
+/**
+ * Using `!important` overrides the component's responsive `inherit !important`
+ * reset, ensuring the custom color persists on both desktop and mobile.
+ */
+export declare const CustomColorOverride: Story;
+export declare const WithTextVariants: Story;