@comet/mail-react 9.0.0-beta.5 → 9.0.0-beta.6

package/lib/index.js

@@ -4,6 +4,8 @@ export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
 export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
 export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { HtmlButton } from "./components/button/HtmlButton.js";
+export { MjmlButton } from "./components/button/MjmlButton.js";
 export { HtmlDivider } from "./components/divider/HtmlDivider.js";
 export { MjmlDivider } from "./components/divider/MjmlDivider.js";
 export { HtmlImage } from "./components/image/HtmlImage.js";
@@ -21,6 +23,6 @@ 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, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, 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/styles/generateResponsiveVariantCss.d.ts

@@ -0,0 +1,26 @@
+import { type ResponsiveValue } from "../theme/responsiveValue.js";
+import type { ThemeBreakpoints } from "../theme/themeTypes.js";
+type VariantStylesConstraint = Record<string, ResponsiveValue<string | number> | undefined>;
+export interface ResponsiveVariantProperty<TVariantStyles> {
+    themeKey: keyof TVariantStyles;
+    /** CSS property name(s); defaults to the kebab-case form of `themeKey`. */
+    cssProperties?: string | readonly string[];
+    unit?: string;
+}
+/** A variant property is either a bare theme key (CSS name derived) or a descriptor for the exceptions. */
+export type ResponsiveVariantProperties<TVariantStyles> = ReadonlyArray<keyof TVariantStyles | ResponsiveVariantProperty<TVariantStyles>>;
+interface ResponsiveVariantGroup<TVariantStyles> {
+    selector: (variantName: string) => string;
+    properties: ResponsiveVariantProperties<TVariantStyles>;
+}
+interface GenerateResponsiveVariantCssOptions<TVariantStyles> {
+    breakpoints: ThemeBreakpoints;
+    variants: Record<string, TVariantStyles | undefined> | undefined;
+    groups: ReadonlyArray<ResponsiveVariantGroup<TVariantStyles>>;
+}
+/**
+ * Generates `max-width` media-query CSS for a themed component's variant overrides.
+ * Returns an empty string when no variant has breakpoint overrides.
+ */
+export declare function generateResponsiveVariantCss<TVariantStyles extends VariantStylesConstraint>({ breakpoints, variants, groups, }: GenerateResponsiveVariantCssOptions<TVariantStyles>): string;
+export {};

package/lib/styles/generateResponsiveVariantCss.js

@@ -0,0 +1,66 @@
+import { getResponsiveOverrides } from "../theme/responsiveValue.js";
+import { css } from "../utils/css.js";
+const toKebabCase = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+/**
+ * Generates `max-width` media-query CSS for a themed component's variant overrides.
+ * Returns an empty string when no variant has breakpoint overrides.
+ */
+export function generateResponsiveVariantCss({ breakpoints, variants, groups, }) {
+    if (!variants) {
+        return "";
+    }
+    const cssChunks = [];
+    for (const [variantName, variantStyles] of Object.entries(variants)) {
+        if (!variantStyles) {
+            continue;
+        }
+        for (const group of groups) {
+            const overridesByBreakpoint = collectOverridesByBreakpoint(variantStyles, group.properties);
+            cssChunks.push(renderMediaQueries({ breakpoints, selector: group.selector(variantName), overridesByBreakpoint }));
+        }
+    }
+    return cssChunks.filter(Boolean).join("\n");
+}
+function collectOverridesByBreakpoint(variantStyles, properties) {
+    const overridesByBreakpoint = new Map();
+    for (const entry of properties) {
+        const property = typeof entry === "object" ? entry : { themeKey: entry };
+        const value = variantStyles[property.themeKey];
+        if (value === undefined) {
+            continue;
+        }
+        const cssProperties = resolveCssProperties(property);
+        for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
+            const declarations = overridesByBreakpoint.get(breakpointKey) ?? [];
+            for (const cssProperty of cssProperties) {
+                declarations.push(formatDeclaration({ cssProperty, value: breakpointValue, unit: property.unit }));
+            }
+            overridesByBreakpoint.set(breakpointKey, declarations);
+        }
+    }
+    return overridesByBreakpoint;
+}
+function resolveCssProperties(property) {
+    const cssProperties = property.cssProperties ?? toKebabCase(String(property.themeKey));
+    return typeof cssProperties === "string" ? [cssProperties] : cssProperties;
+}
+function formatDeclaration({ cssProperty, value, unit }) {
+    return `${cssProperty}: ${String(value)}${unit ?? ""} !important`;
+}
+function renderMediaQueries({ breakpoints, selector, overridesByBreakpoint, }) {
+    const cssChunks = [];
+    for (const [breakpointKey, declarations] of overridesByBreakpoint) {
+        const breakpoint = breakpoints[breakpointKey];
+        if (!breakpoint) {
+            continue;
+        }
+        cssChunks.push(css `
+            ${breakpoint.belowMediaQuery} {
+                ${selector} {
+                    ${declarations.join(";\n")}
+                }
+            }
+        `);
+    }
+    return cssChunks.join("\n");
+}

package/lib/theme/createTheme.d.ts

@@ -1,9 +1,10 @@
-import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeColors, ThemeDivider, ThemeSizes, ThemeText } from "./themeTypes.js";
+import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeSizes, ThemeText } from "./themeTypes.js";
 type CreateThemeOverrides = {
     sizes?: Partial<ThemeSizes>;
     breakpoints?: Partial<ThemeBreakpoints>;
     text?: Partial<ThemeText>;
     divider?: Partial<ThemeDivider>;
+    button?: Partial<ThemeButton>;
     colors?: {
         background?: Partial<ThemeBackgroundColors>;
     } & Partial<Omit<ThemeColors, "background">>;

package/lib/theme/createTheme.js

@@ -22,6 +22,7 @@ export function createTheme(overrides) {
         },
         text: { ...defaultTheme.text, ...overrides?.text },
         divider: { ...defaultTheme.divider, ...overrides?.divider },
+        button: { ...defaultTheme.button, ...overrides?.button },
         colors: {
             ...defaultTheme.colors,
             ...overrides?.colors,

package/lib/theme/defaultTheme.js

@@ -1,3 +1,4 @@
+import { defaultButtonStyles } from "../components/button/defaultButtonStyles.js";
 import { defaultDividerStyles } from "../components/divider/defaultDividerStyles.js";
 import { createBreakpoint } from "./createBreakpoint.js";
 export const defaultTheme = {
@@ -16,6 +17,7 @@ export const defaultTheme = {
         bottomSpacing: "16px",
     },
     divider: defaultDividerStyles,
+    button: defaultButtonStyles,
     colors: {
         background: {
             body: "#F2F2F2",

package/lib/theme/themeTypes.d.ts

@@ -86,6 +86,62 @@ export interface ThemeDivider extends DividerStyles {
     defaultVariant?: DividerVariantName;
     variants?: DividerVariantsRecord;
 }
+/**
+ * Single source of truth for button style property names and their value types.
+ * Both `ButtonStyles` and `ButtonVariantStyles` are derived from this interface.
+ *
+ * `padding` is the button's inner padding (the space around the label). It is
+ * deliberately distinct from `MjmlButton`'s `padding` prop, which is the outer
+ * spacing around the button.
+ */
+interface ButtonStyleMap {
+    color: string;
+    backgroundColor: string;
+    /**
+     * A background image — typically a gradient. Rendered as progressive
+     * enhancement on top of `backgroundColor`; clients that don't render it
+     * (notably Outlook) fall back to the solid color.
+     */
+    backgroundImage: string;
+    border: string;
+    borderRadius: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string | number;
+    lineHeight: string | number;
+    padding: string;
+}
+/** Base button styles where each property holds a plain value. */
+export type ButtonStyles = {
+    [K in keyof ButtonStyleMap]?: ButtonStyleMap[K];
+};
+/** Variant button styles where each property supports responsive values. */
+export type ButtonVariantStyles = {
+    [K in keyof ButtonStyleMap]?: ResponsiveValue<ButtonStyleMap[K]>;
+};
+/**
+ * Defines the variants available on the `MjmlButton` and `HtmlButton` components.
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface ButtonVariants {
+ *         primary: true;
+ *         secondary: true;
+ *     }
+ * }
+ * ```
+ */
+export interface ButtonVariants {
+}
+type ButtonVariantsRecord = keyof ButtonVariants extends never ? Record<string, ButtonVariantStyles> : {
+    [K in keyof ButtonVariants]?: ButtonVariantStyles;
+};
+export type ButtonVariantName = keyof ButtonVariants extends never ? string : keyof ButtonVariants;
+/** Theme configuration for button styles, variants, and default variant. */
+export interface ThemeButton extends ButtonStyles {
+    defaultVariant?: ButtonVariantName;
+    variants?: ButtonVariantsRecord;
+}
 /**
  * A resolved breakpoint with its numeric value and a ready-to-use media query
  * string that targets viewports narrower than this breakpoint.
@@ -142,6 +198,7 @@ export interface Theme {
     breakpoints: ThemeBreakpoints;
     text: ThemeText;
     divider: ThemeDivider;
+    button: ThemeButton;
     colors: ThemeColors;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.6",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -27,23 +27,28 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-vitest": "10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@types/mjml": "^4.7.4",
     "@types/mjml-browser": "^4.15.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
+    "@vitest/browser": "4.1.8",
+    "@vitest/browser-playwright": "4.1.8",
     "chokidar-cli": "^3.0.0",
     "eslint": "^9.39.4",
     "npm-run-all2": "^8.0.4",
+    "playwright": "^1.49.1",
     "prettier": "^3.6.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "rimraf": "^6.1.2",
     "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16",
-    "@comet/eslint-config": "9.0.0-beta.5",
-    "@comet/cli": "9.0.0-beta.5"
+    "vite": "^7.3.1",
+    "vitest": "^4.1.8",
+    "@comet/cli": "9.0.0-beta.6",
+    "@comet/eslint-config": "9.0.0-beta.6"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -62,7 +67,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "pnpm run clean && pnpm run generate-block-types && tsc",
+    "build": "pnpm run clean && pnpm run generate-block-types && tsc -p tsconfig.build.json",
     "build-storybook": "storybook build",
     "clean": "rimraf lib 'src/**/*.generated.ts'",
     "dev": "pnpm run clean && pnpm generate-block-types && tsc --watch",
@@ -77,7 +82,9 @@
     "lint:prettier": "pnpm exec prettier --check '*.{ts,js,json,md,yml,yaml}'",
     "lint:tsc": "tsc",
     "storybook": "storybook dev -p 6066 --no-open",
-    "test": "vitest --run",
+    "test": "pnpm run test:unit && pnpm run test:storybook",
+    "test:storybook": "vitest --run --project storybook --outputFile.junit=./junit-storybook.xml",
+    "test:unit": "vitest --run --project unit --outputFile.junit=./junit-unit.xml",
     "test:watch": "vitest --watch"
   }
 }

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

@@ -1,5 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,108 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MjmlColumn, MjmlSpacer, MjmlWrapper } from "@faire/mjml-react";
-import { MjmlImage } from "../../components/image/MjmlImage.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: "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

@@ -1,4 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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;