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

package/lib/components/image/MjmlImage.d.ts

@@ -0,0 +1,10 @@
+import { type IMjmlImageProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlImageProps = IMjmlImageProps;
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export declare function MjmlImage({ className, ...restProps }: MjmlImageProps): ReactNode;

package/lib/components/image/MjmlImage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlImage as BaseMjmlImage } from "@faire/mjml-react";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+/**
+ * Renders an MJML image that adapts to the viewport width below the default breakpoint.
+ *
+ * Must be placed within an `MjmlColumn`. For raw HTML context (e.g. inside `MjmlRaw`),
+ * use `HtmlImage` instead.
+ */
+export function MjmlImage({ className, ...restProps }) {
+    return _jsx(BaseMjmlImage, { className: clsx("mjmlImage", className), ...restProps });
+}
+// MJML inlines a fixed `height` on the inner <img>; !important overrides it for responsive scaling.
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .mjmlImage img {
+                height: auto !important;
+            }
+        }
+    `);

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

@@ -1,5 +1,12 @@
 import type { ComponentProps, ReactNode } from "react";
-export type HtmlInlineLinkProps = ComponentProps<"a">;
+export type HtmlInlineLinkProps = Omit<ComponentProps<"a">, "target"> & {
+    /**
+     * Where to open the linked document.
+     *
+     * @defaultValue `"_blank"`
+     */
+    target?: ComponentProps<"a">["target"];
+};
 /**
  * Inline link styled to match the surrounding text, for use inside `HtmlText` or `MjmlText`.
  *

package/lib/components/mailRoot/MjmlMailRoot.d.ts

@@ -3,8 +3,9 @@ import { type Config } from "../../config/ConfigProvider.js";
 import type { Theme } from "../../theme/themeTypes.js";
 type MjmlMailRootProps = PropsWithChildren<{
     /**
-     * Theme to use for the email. When omitted, the default theme
-     * (equivalent to `createTheme()`) is used.
+     * Theme to use for the email.
+     *
+     * @defaultValue `createTheme()`
      */
     theme?: Theme;
     /** Extra content appended inside the built-in `<MjmlAttributes>`, after the default `<MjmlAll>`. */

package/lib/components/section/MjmlSection.d.ts

@@ -1,6 +1,12 @@
 import { type IMjmlGroupProps, type IMjmlSectionProps } from "@faire/mjml-react";
 import type { ReactNode } from "react";
-export type MjmlSectionProps = IMjmlSectionProps & {
+export type MjmlSectionProps = Omit<IMjmlSectionProps, "backgroundColor"> & {
+    /**
+     * Background color of the section.
+     *
+     * @defaultValue The theme's `colors.background.content`, unless inside an `MjmlWrapper`
+     */
+    backgroundColor?: IMjmlSectionProps["backgroundColor"];
     /** Applies theme-based content indentation with responsive overrides. */
     indent?: boolean;
     /** When true, child columns remain side-by-side on mobile instead of stacking vertically. */

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

@@ -21,6 +21,9 @@ interface HtmlTextOwnProps {
      *         },
      *     },
      * });
+     * ```
+     *
+     * @defaultValue The theme's `text.defaultVariant`, when set
      */
     variant?: VariantName;
     /** When true, applies spacing below the text. */

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

@@ -22,6 +22,9 @@ export type MjmlTextProps = IMjmlTextProps & {
      *         },
      *     },
      * });
+     * ```
+     *
+     * @defaultValue The theme's `text.defaultVariant`, when set
      */
     variant?: VariantName;
     /** When true, applies spacing below the text. */

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

@@ -1,6 +1,4 @@
-import type { TextVariantStyles, Theme } from "../../theme/themeTypes.js";
-type StylePropertyKey = Exclude<keyof TextVariantStyles, "bottomSpacing">;
-export declare const textStyleCssProperties: ReadonlyArray<[StylePropertyKey, string]>;
+import type { Theme } from "../../theme/themeTypes.js";
 interface GenerateResponsiveTextCssOptions {
     /** Selector for text style overrides, given a variant name. */
     styleSelector: (variantName: string) => string;

package/lib/components/text/textStyles.js

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

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

@@ -1,7 +1,14 @@
 import { type IMjmlWrapperProps } from "@faire/mjml-react";
 import type { ReactNode } from "react";
-export type MjmlWrapperProps = IMjmlWrapperProps;
+export type MjmlWrapperProps = Omit<IMjmlWrapperProps, "backgroundColor"> & {
+    /**
+     * Background color of the wrapper.
+     *
+     * @defaultValue The theme's `colors.background.content`
+     */
+    backgroundColor?: IMjmlWrapperProps["backgroundColor"];
+};
 /**
- * A wrapper that groups multiple sections sharing a background. Must be a direct child of MjmlBody.
+ * 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

@@ -3,7 +3,7 @@ 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.
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of `MjmlBody`.
  */
 export function MjmlWrapper({ children, ...restProps }) {
     const theme = useOptionalTheme();

package/lib/index.d.ts

@@ -8,6 +8,18 @@ export type { HtmlPixelImageBlockProps } from "./blocks/pixelImage/HtmlPixelImag
 export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
 export type { MjmlPixelImageBlockProps } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
 export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export type { HtmlButtonProps } from "./components/button/HtmlButton.js";
+export { HtmlButton } from "./components/button/HtmlButton.js";
+export type { MjmlButtonProps } from "./components/button/MjmlButton.js";
+export { MjmlButton } from "./components/button/MjmlButton.js";
+export type { HtmlDividerProps } from "./components/divider/HtmlDivider.js";
+export { HtmlDivider } from "./components/divider/HtmlDivider.js";
+export type { MjmlDividerProps } from "./components/divider/MjmlDivider.js";
+export { MjmlDivider } from "./components/divider/MjmlDivider.js";
+export type { HtmlImageProps } from "./components/image/HtmlImage.js";
+export { HtmlImage } from "./components/image/HtmlImage.js";
+export type { MjmlImageProps } from "./components/image/MjmlImage.js";
+export { MjmlImage } from "./components/image/MjmlImage.js";
 export type { HtmlInlineLinkProps } from "./components/inlineLink/HtmlInlineLink.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
@@ -26,8 +38,8 @@ export { createTheme } from "./theme/createTheme.js";
 export type { ResponsiveValue } from "./theme/responsiveValue.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
-export type { TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeColors, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
+export type { ButtonStyles, ButtonVariants, ButtonVariantStyles, DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, 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, } 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, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, 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, 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

@@ -4,6 +4,12 @@ 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";
+export { MjmlImage } from "./components/image/MjmlImage.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
 export { MjmlSection } from "./components/section/MjmlSection.js";
@@ -17,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, 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 { 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,8 +1,10 @@
-import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeColors, 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

@@ -21,6 +21,8 @@ export function createTheme(overrides) {
             ...overrides?.breakpoints,
         },
         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,5 @@
+import { defaultButtonStyles } from "../components/button/defaultButtonStyles.js";
+import { defaultDividerStyles } from "../components/divider/defaultDividerStyles.js";
 import { createBreakpoint } from "./createBreakpoint.js";
 export const defaultTheme = {
     sizes: {
@@ -14,6 +16,8 @@ export const defaultTheme = {
         lineHeight: "20px",
         bottomSpacing: "16px",
     },
+    divider: defaultDividerStyles,
+    button: defaultButtonStyles,
     colors: {
         background: {
             body: "#F2F2F2",

package/lib/theme/themeTypes.d.ts

@@ -46,6 +46,102 @@ export interface ThemeText extends TextStyles {
     defaultVariant?: VariantName;
     variants?: VariantsRecord;
 }
+/**
+ * Single source of truth for divider style property names and their value types.
+ * Both `DividerStyles` and `DividerVariantStyles` are derived from this interface.
+ */
+interface DividerStyleMap {
+    height: number;
+    backgroundColor: string;
+    backgroundImage: string;
+}
+/** Base divider styles where each property holds a plain value. */
+export type DividerStyles = {
+    [K in keyof DividerStyleMap]?: DividerStyleMap[K];
+};
+/** Variant divider styles where each property supports responsive values. */
+export type DividerVariantStyles = {
+    [K in keyof DividerStyleMap]?: ResponsiveValue<DividerStyleMap[K]>;
+};
+/**
+ * Defines the variants available on the `MjmlDivider` and `HtmlDivider` components.
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface DividerVariants {
+ *         thin: true;
+ *         thick: true;
+ *     }
+ * }
+ * ```
+ */
+export interface DividerVariants {
+}
+type DividerVariantsRecord = keyof DividerVariants extends never ? Record<string, DividerVariantStyles> : {
+    [K in keyof DividerVariants]?: DividerVariantStyles;
+};
+export type DividerVariantName = keyof DividerVariants extends never ? string : keyof DividerVariants;
+/** Theme configuration for divider styles, variants, and default variant. */
+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.
@@ -101,6 +197,8 @@ export interface Theme {
     sizes: ThemeSizes;
     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.4",
+  "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.14",
+    "@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/cli": "9.0.0-beta.4",
-    "@comet/eslint-config": "9.0.0-beta.4"
+    "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 })] }) })] })] }));
-    },
-};