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

package/README.md

@@ -17,6 +17,7 @@ We extend `@faire/mjml-react` rather than fork it. A few rules keep that working
 - **Additive only.** A custom component must work everywhere the base did. Only add props — never remove or rename them, and don't require new providers or context. For theme access, prefer `useOptionalTheme()` over `useTheme()`.
 - **Wrap, don't reimplement.** Custom components delegate to `@faire/mjml-react`. Less to maintain, and we stay close to upstream behaviour.
 - **One export per name.** When we ship a custom version, it replaces the re-export. Consumers should never need to import from `@faire/mjml-react` directly.
+- **Public-facing documentation doesn't reference `@faire/mjml-react`.** TSDoc, story descriptions, and changeset entries describe behavior in terms of this package only. Internal places (feature READMEs, commit messages) can mention upstream when it adds maintainer context.
 
 ### Styling
 
@@ -24,6 +25,14 @@ We extend `@faire/mjml-react` rather than fork it. A few rules keep that working
 - **Media queries** via `registerStyles` are progressive enhancement for mobile, where modern CSS (flex, grid) is fine. Use `theme.breakpoints.*.belowMediaQuery` (max-width queries) to target viewports below a breakpoint.
 - **BEM, camelCase blocks.** Block `mjmlSection`, element `mjmlSection__item`, modifier `mjmlSection--indented`. Every component applies its block class and merges any consumer-provided `className` with `clsx`: `clsx("mjmlSection", className)`.
 
+### Theme variants
+
+Themed components expose their styling through the theme: a flat base entry and an optional, consumer-extensible variants map.
+
+- **Base theme entry covers the unstyled use.** Components render from `theme.<component>` when no variant is picked. The `variant` prop is optional; the package ships no built-in variants.
+- **Variants are declared by the consumer.** Variant names are added via TypeScript module augmentation against the variant-name type for that component. A `defaultVariant` on the theme entry makes one of them the implicit pick.
+- **Responsive values appear only inside variants.** Base entries use plain types per property. Variant entries can declare a `ResponsiveValue<T>` — a `{ default, ...overrides }` shape with override keys drawn from `theme.breakpoints`.
+
 ### File layout
 
 - **Location.** Custom components live in `src/components/<concern>/` (e.g. `src/components/section/MjmlSection.tsx`).
@@ -35,17 +44,60 @@ We extend `@faire/mjml-react` rather than fork it. A few rules keep that working
 
 Every custom component has a story in `src/components/<concern>/__stories__/<Component>.stories.tsx`. Wrap non-section stories in `<MjmlSection indent>` to show a realistic indented layout.
 
-### Changesets
+Placeholder images use the `picsum.photos` seed URL pattern — `https://picsum.photos/seed/<seed>/<width>/<height>` — so the same seed renders the same image on every build.
 
-A changeset describes what changes for the consumer. If the public API and end-user behavior are unchanged, no changeset is needed.
+### Changesets
 
 When a custom component replaces a re-export, describe the change against the previous re-export — the added props, features, or behavior. Consumers don't need to know the internal component is new; they only see what's different in the API they use.
 
-## Living document
+## Internal documentation per feature
+
+Features substantial enough to live in their own directory should have a `README.md` that describes the current state and how the feature changes it — and, when a maintainer might assume otherwise, the boundaries it deliberately doesn't cross. These READMEs are internal — written for the people (and agents) maintaining the code, not for consumers. End-user usage docs live elsewhere (see [Consumer-facing documentation](#consumer-facing-documentation)).
+
+### What is a feature
+
+A feature is any self-contained unit of behavior worth describing on its own — a component (`InlineLink`), a utility (`css` helper), an addon (the Storybook addon), or the package itself. Features nest: this README documents `@comet/mail-react` as a feature, and the components inside it are features in their own right.
+
+A feature README describes **only its own feature**. It does not describe parent features that contain it, nor sub-features it contains — each of those has its own README.
+
+### Where they live
+
+A feature that warrants a README is organized as a directory, with the README at the directory root (e.g. `src/components/inline-link/README.md`). Small features that live as a single file inside a parent don't need their own README — they're just part of the parent. Promote a file to a directory at the same time you give it a README.
+
+### What goes in a feature README
+
+**Title.** Use the exact identifier when the feature is a single component or function (e.g. `MjmlSection`); otherwise use a sentence-case name (e.g. _Inline link_).
+
+Two sections, in order. Only the intro is required.
+
+1. **Intro.** One short paragraph: the current state, and how the feature changes it. Describe the current state as plain facts — what's there, what's required, what's missing — rather than framing it as "a problem the feature solves". Maintainers read this to work on the code, not to be sold on the feature's existence.
+2. **Non-goals** (optional). Things the feature deliberately doesn't do — only when a reader would reasonably assume it does, typically because the feature's name, its domain, or a sibling feature suggests so. The test: would a maintainer look here for this and be surprised it's missing? If not, leave it out. Skip the obvious; skip future work; skip rejected alternatives — those belong in the commit that made the choice.
+
+    Write each bullet as a noun phrase naming the thing not done (`Not a heading component`, `No CSS variables`). Add a single follow-up sentence only when the reader needs to be redirected to the alternative or told why.
+
+Other sections should be rare — only when content is durable, feature-specific, and doesn't fit the two above. Specifically not warranted: no Architecture (the code shows it), no Design decisions (commits carry them), no Usage (consumer docs), no Dependencies (imports show them; non-obvious cross-feature coupling belongs in the intro).
+
+**Express the rule, not the code.** Every line should say something the code doesn't. Don't restate type signatures, prop lists, formulas, or control flow — the code already shows those.
+
+**Length.** Simple feature → one paragraph. Complex feature → one screen, no scrolling. Past a screen and you're probably duplicating commit history or describing what the code shows.
+
+### Template
+
+```md
+# <feature-name>
+
+<One short paragraph: the current state, and how the feature changes it.>
+
+## Non-goals <!-- only if any -->
+
+- <Noun phrase naming what the feature deliberately doesn't do.> <Optional follow-up sentence pointing to the alternative or stating the rationale.>
+```
+
+### Living documents
 
-If a change reverses a decision or shifts a convention recorded here, update this README in the same PR.
+Feature READMEs (this one included) should stay current. Update them in the same PR as any change that makes them inaccurate or adds context worth recording.
 
-## Consumer-facing companions
+## Consumer-facing documentation
 
 - Docs: [docs/docs/3-features-modules/13-building-html-emails/](../../docs/docs/3-features-modules/13-building-html-emails/)
 - Agent skill: [skills/comet-mail-react/SKILL.md](../../skills/comet-mail-react/SKILL.md)

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

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

package/lib/blocks/pixelImage/HtmlPixelImageBlock.js

@@ -1,7 +1,6 @@
 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 { HtmlImage } from "../../components/image/HtmlImage.js";
 import { usePixelImageBlockData } from "./usePixelImageBlockData.js";
 /**
  * Renders a pixel-image from the DAM as a raw `<img>` tag.
@@ -15,13 +14,5 @@ export function HtmlPixelImageBlock({ data, width, largestPossibleRenderWidth, a
     if (!imageData) {
         return null;
     }
-    return (_jsx("img", { src: imageData.imageUrl, width: imageData.defaultRenderWidth, height: imageData.desktopImageHeight, alt: imageData.alt, title: imageData.title, className: clsx("htmlPixelImageBlock", className), ...imgProps }));
+    return (_jsx(HtmlImage, { src: imageData.imageUrl, width: imageData.defaultRenderWidth, height: imageData.desktopImageHeight, alt: imageData.alt, title: imageData.title, className: clsx("htmlPixelImageBlock", className), ...imgProps }));
 }
-registerStyles((theme) => css `
-        ${theme.breakpoints.default.belowMediaQuery} {
-            .htmlPixelImageBlock {
-                width: 100%;
-                height: auto;
-            }
-        }
-    `);

package/lib/blocks/pixelImage/MjmlPixelImageBlock.d.ts

@@ -1,7 +1,7 @@
-import { type IMjmlImageProps } from "@faire/mjml-react";
 import type { ReactNode } from "react";
+import { type MjmlImageProps } from "../../components/image/MjmlImage.js";
 import type { PixelImageBlockBaseProps } from "./common.js";
-export type MjmlPixelImageBlockProps = Omit<IMjmlImageProps, "src" | "width" | "height"> & PixelImageBlockBaseProps;
+export type MjmlPixelImageBlockProps = Omit<MjmlImageProps, "src" | "width" | "height"> & PixelImageBlockBaseProps;
 /**
  * Renders a pixel-image from the DAM as `MjmlImage`. Must be placed within an
  * `MjmlColumn`. For raw HTML context, use `HtmlPixelImageBlock`.

package/lib/blocks/pixelImage/MjmlPixelImageBlock.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlImage } from "@faire/mjml-react";
 import clsx from "clsx";
-import { registerStyles } from "../../styles/registerStyles.js";
-import { css } from "../../utils/css.js";
+import { MjmlImage } from "../../components/image/MjmlImage.js";
 import { usePixelImageBlockData } from "./usePixelImageBlockData.js";
 /**
  * Renders a pixel-image from the DAM as `MjmlImage`. Must be placed within an
@@ -15,10 +13,3 @@ export function MjmlPixelImageBlock({ data, width, largestPossibleRenderWidth, a
     }
     return (_jsx(MjmlImage, { src: imageData.imageUrl, width: imageData.defaultRenderWidth, height: imageData.desktopImageHeight, alt: imageData.alt, title: imageData.title, className: clsx("mjmlPixelImageBlock", className), ...imageProps }));
 }
-registerStyles((theme) => css `
-        ${theme.breakpoints.default.belowMediaQuery} {
-            .mjmlPixelImageBlock img {
-                height: auto !important;
-            }
-        }
-    `);

package/lib/components/divider/HtmlDivider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { Theme } from "../../theme/themeTypes.js";
+import type { DividerProps } from "./dividerProps.js";
+export type HtmlDividerProps = DividerProps;
+/**
+ * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ */
+export declare function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }: HtmlDividerProps): ReactNode;
+export declare function generateHtmlDividerStyles(theme: Theme): string;

package/lib/components/divider/HtmlDivider.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { defaultDividerStyles } from "./defaultDividerStyles.js";
+import { generateResponsiveDividerCss } from "./generateResponsiveDividerCss.js";
+// U+200B keeps the cell from collapsing in clients that drop empty <td>s,
+// without contributing visible width.
+const zeroWidthSpace = String.fromCharCode(0x200b);
+/**
+ * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ */
+export function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }) {
+    const theme = useOptionalTheme();
+    if (theme === null && variantProp !== undefined) {
+        throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+    }
+    const themeDivider = theme?.divider ?? defaultDividerStyles;
+    const { defaultVariant, variants, ...baseStyles } = themeDivider;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = variantStyles ? { ...baseStyles, ...variantStyles } : baseStyles;
+    const height = heightProp ?? getDefaultOrUndefined(mergedStyles.height);
+    const backgroundColor = backgroundColorProp ?? getDefaultOrUndefined(mergedStyles.backgroundColor);
+    const backgroundImage = backgroundImageProp ?? getDefaultOrUndefined(mergedStyles.backgroundImage);
+    const dividerStyle = {
+        height,
+        lineHeight: height === undefined ? undefined : `${height}px`,
+        fontSize: 0,
+        backgroundColor,
+        backgroundImage,
+        ...{ msoLineHeightRule: "exactly" },
+        ...style,
+    };
+    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: "100%", className: clsx("htmlDivider", activeVariant && `htmlDivider--${activeVariant}`, className), children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { bgcolor: backgroundColor, height: height, style: dividerStyle, children: zeroWidthSpace }) }) }) }));
+}
+export function generateHtmlDividerStyles(theme) {
+    return generateResponsiveDividerCss(theme, {
+        styleSelector: (variantName) => `.htmlDivider--${variantName} td`,
+    });
+}
+registerStyles(generateHtmlDividerStyles);

package/lib/components/divider/MjmlDivider.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { DividerProps } from "./dividerProps.js";
+export type MjmlDividerProps = DividerProps;
+/**
+ * Themed divider for use inside an `MjmlColumn`.
+ */
+export declare function MjmlDivider({ variant, height, backgroundColor, backgroundImage, className, style }: MjmlDividerProps): ReactNode;

package/lib/components/divider/MjmlDivider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlRaw } from "@faire/mjml-react";
+import clsx from "clsx";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { HtmlDivider } from "./HtmlDivider.js";
+/**
+ * Themed divider for use inside an `MjmlColumn`.
+ */
+export function MjmlDivider({ variant, height, backgroundColor, backgroundImage, className, style }) {
+    const theme = useOptionalTheme();
+    const activeVariant = variant ?? theme?.divider.defaultVariant;
+    return (_jsx(MjmlRaw, { children: _jsx(HtmlDivider, { variant: variant, height: height, backgroundColor: backgroundColor, backgroundImage: backgroundImage, className: clsx("mjmlDivider", activeVariant && `mjmlDivider--${activeVariant}`, className), style: style }) }));
+}

package/lib/components/divider/__stories__/HtmlDivider.stories.d.ts

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

package/lib/components/divider/__stories__/HtmlDivider.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, MjmlRaw, MjmlSpacer } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { HtmlDivider } from "../HtmlDivider.js";
+const config = {
+    title: "Components/HtmlDivider",
+    component: HtmlDivider,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: { control: "text" },
+        height: { control: "number" },
+        backgroundColor: { control: "text" },
+        backgroundImage: { control: "text" },
+        className: { control: "text" },
+        style: { control: false },
+    },
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlRaw, { children: _jsx(HtmlDivider, { ...args }) }), _jsx(MjmlSpacer, { height: "16px" })] }) })),
+};
+export default config;
+export const Default = {};
+export const CustomHeightAndColor = {
+    args: {
+        height: 8,
+        backgroundColor: "#FF6B6B",
+    },
+};
+export const WithTheme = {
+    parameters: {
+        theme: createTheme({
+            divider: {
+                height: 2,
+                backgroundColor: "#5B4FC7",
+            },
+        }),
+    },
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            divider: {
+                defaultVariant: "thin",
+                variants: {
+                    thin: { height: 1, backgroundColor: "#999999" },
+                    thick: { height: { default: 12, mobile: 8 }, backgroundColor: "#222222" },
+                },
+            },
+        }),
+    },
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlRaw, { children: _jsx(HtmlDivider, { ...args }) }), _jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlRaw, { children: _jsx(HtmlDivider, { ...args, variant: "thick" }) }), _jsx(MjmlSpacer, { height: "16px" })] }) })),
+};
+export const GradientWithFallback = {
+    // `backgroundColor` is the solid fallback for clients that
+    // don't render `background-image` (notably older Outlook).
+    args: {
+        height: 6,
+        backgroundColor: "#5B4FC7",
+        backgroundImage: "linear-gradient(to right, #5B4FC7, #FF6B6B, #FFD166)",
+    },
+};

package/lib/components/divider/__stories__/MjmlDivider.stories.d.ts

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

package/lib/components/divider/__stories__/MjmlDivider.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlDivider } from "../MjmlDivider.js";
+const config = {
+    title: "Components/MjmlDivider",
+    component: MjmlDivider,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: { control: "text" },
+        height: { control: "number" },
+        backgroundColor: { control: "text" },
+        backgroundImage: { control: "text" },
+        className: { control: "text" },
+        style: { control: false },
+    },
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlDivider, { ...args }), _jsx(MjmlSpacer, { height: "16px" })] }) })),
+};
+export default config;
+export const Default = {};
+export const CustomHeightAndColor = {
+    args: {
+        height: 8,
+        backgroundColor: "#FF6B6B",
+    },
+};
+export const WithTheme = {
+    parameters: {
+        theme: createTheme({
+            divider: {
+                height: 2,
+                backgroundColor: "#5B4FC7",
+            },
+        }),
+    },
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            divider: {
+                defaultVariant: "thin",
+                variants: {
+                    thin: { height: 1, backgroundColor: "#999999" },
+                    thick: { height: { default: 12, mobile: 8 }, backgroundColor: "#222222" },
+                },
+            },
+        }),
+    },
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlDivider, { ...args }), _jsx(MjmlSpacer, { height: "16px" }), _jsx(MjmlDivider, { ...args, variant: "thick" }), _jsx(MjmlSpacer, { height: "16px" })] }) })),
+};
+export const GradientWithFallback = {
+    // `backgroundColor` is the solid fallback for clients that
+    // don't render `background-image` (notably older Outlook).
+    args: {
+        height: 6,
+        backgroundColor: "#5B4FC7",
+        backgroundImage: "linear-gradient(to right, #5B4FC7, #FF6B6B, #FFD166)",
+    },
+};

package/lib/components/divider/__tests__/HtmlDivider.test.d.ts

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

package/lib/components/divider/__tests__/HtmlDivider.test.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { createTheme } from "../../../theme/createTheme.js";
+import { ThemeProvider } from "../../../theme/ThemeProvider.js";
+import { generateHtmlDividerStyles, HtmlDivider } from "../HtmlDivider.js";
+function renderHtmlDivider(element) {
+    return renderToStaticMarkup(element);
+}
+describe("HtmlDivider", () => {
+    it("renders default theme styles across modern, Outlook, and legacy clients", () => {
+        const theme = createTheme();
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, {}) }));
+        // Modern clients: inline height and background color.
+        expect(html).toContain("height:4px");
+        expect(html).toContain("background-color:#000000");
+        // Outlook: mso-line-height-rule with matching line-height; font-size:0 keeps the spacer character from adding height.
+        expect(html).toContain("mso-line-height-rule:exactly");
+        expect(html).toContain("line-height:4px");
+        expect(html).toContain("font-size:0");
+        // Legacy Outlook: attribute fallbacks for clients that ignore inline CSS.
+        expect(html).toContain('bgcolor="#000000"');
+        expect(html).toContain('height="4"');
+    });
+    it("applies variant styles over base theme styles", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    thick: { height: 10, backgroundColor: "#222222" },
+                },
+            },
+        });
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, { variant: "thick" }) }));
+        expect(html).toContain("height:10px");
+        expect(html).toContain("background-color:#222222");
+        expect(html).toContain("htmlDivider--thick");
+    });
+    it("inherits base divider styles not overridden by variant", () => {
+        const theme = createTheme({
+            divider: {
+                backgroundColor: "#222222",
+                variants: {
+                    thick: { height: 10 },
+                },
+            },
+        });
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, { variant: "thick" }) }));
+        expect(html).toContain("height:10px");
+        expect(html).toContain("background-color:#222222");
+    });
+    it("applies defaultVariant when no variant prop is specified", () => {
+        const theme = createTheme({
+            divider: {
+                defaultVariant: "thin",
+                variants: {
+                    thin: { height: 1 },
+                },
+            },
+        });
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, {}) }));
+        expect(html).toContain("height:1px");
+        expect(html).toContain("htmlDivider--thin");
+    });
+    it("per-instance height prop overrides theme and variant", () => {
+        const theme = createTheme({
+            divider: {
+                height: 4,
+                variants: { thin: { height: 1 } },
+            },
+        });
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, { variant: "thin", height: 12 }) }));
+        expect(html).toContain("height:12px");
+    });
+    it("applies variant backgroundImage with the variant backgroundColor as fallback", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    gradient: {
+                        backgroundColor: "#5B4FC7",
+                        backgroundImage: "linear-gradient(to right, red, blue)",
+                    },
+                },
+            },
+        });
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, { variant: "gradient" }) }));
+        expect(html).toContain("background-color:#5B4FC7");
+        expect(html).toContain("background-image:linear-gradient(to right, red, blue)");
+    });
+    it("lets consumer style prop layer over theme styles", () => {
+        const theme = createTheme();
+        const html = renderHtmlDivider(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlDivider, { style: { backgroundImage: "linear-gradient(to right, red, blue)" } }) }));
+        // Solid color fallback stays for clients that don't render gradients.
+        expect(html).toContain("background-color:#000000");
+        expect(html).toContain("background-image:linear-gradient(to right, red, blue)");
+    });
+    it("falls back to default styles when used without a ThemeProvider", () => {
+        const html = renderHtmlDivider(_jsx(HtmlDivider, {}));
+        expect(html).toContain("height:4px");
+        expect(html).toContain("background-color:#000000");
+    });
+    it("throws when variant is set without a ThemeProvider", () => {
+        expect(() => renderHtmlDivider(_jsx(HtmlDivider, { variant: "thin" }))).toThrow();
+    });
+});
+describe("generateHtmlDividerStyles", () => {
+    it("returns empty CSS when no variants are defined", () => {
+        const theme = createTheme();
+        expect(generateHtmlDividerStyles(theme)).toBe("");
+    });
+    it("emits height and line-height together for responsive variants", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    thin: { height: { default: 4, mobile: 2 } },
+                },
+            },
+        });
+        const result = generateHtmlDividerStyles(theme);
+        expect(result).toContain(".htmlDivider--thin td");
+        expect(result).toContain("height: 2px !important");
+        expect(result).toContain("line-height: 2px !important");
+    });
+    it("emits background-color overrides for responsive variants", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    accent: { backgroundColor: { default: "#5B4FC7", mobile: "#FF6B6B" } },
+                },
+            },
+        });
+        const result = generateHtmlDividerStyles(theme);
+        expect(result).toContain("background-color: #FF6B6B !important");
+    });
+    it("emits no media queries for a non-responsive variant", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    thick: { height: 8 },
+                },
+            },
+        });
+        expect(generateHtmlDividerStyles(theme)).not.toContain("@media");
+    });
+});

package/lib/components/divider/__tests__/MjmlDivider.test.d.ts

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

package/lib/components/divider/__tests__/MjmlDivider.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { renderMailHtml } from "../../../server/renderMailHtml.js";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlMailRoot } from "../../mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlDivider } from "../MjmlDivider.js";
+describe("MjmlDivider integration", () => {
+    it("produces no MJML warnings inside an MjmlMailRoot", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    thin: { height: 1, backgroundColor: "#999999" },
+                    thick: { height: 8, backgroundColor: "#222222" },
+                },
+            },
+        });
+        const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { theme: theme, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlDivider, {}), _jsx(MjmlDivider, { variant: "thin" }), _jsx(MjmlDivider, { variant: "thick" })] }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+    });
+    it("applies a variant modifier class to both mjmlDivider and htmlDivider blocks", () => {
+        const theme = createTheme({
+            divider: {
+                variants: {
+                    thick: { height: 8 },
+                },
+            },
+        });
+        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { theme: theme, children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlDivider, { variant: "thick" }) }) }) }));
+        expect(html).toContain("mjmlDivider--thick");
+        expect(html).toContain("htmlDivider--thick");
+    });
+    it("falls back to default theme values when used without a ThemeProvider", () => {
+        const html = renderToStaticMarkup(_jsx(MjmlDivider, {}));
+        expect(html).toContain("height:4px");
+        expect(html).toContain("background-color:#000000");
+    });
+    it("throws when variant is set without a ThemeProvider", () => {
+        expect(() => renderToStaticMarkup(_jsx(MjmlDivider, { variant: "thin" }))).toThrow();
+    });
+});

package/lib/components/divider/defaultDividerStyles.d.ts

@@ -0,0 +1,2 @@
+import type { DividerStyles } from "../../theme/themeTypes.js";
+export declare const defaultDividerStyles: DividerStyles;

package/lib/components/divider/defaultDividerStyles.js

@@ -0,0 +1,4 @@
+export const defaultDividerStyles = {
+    height: 4,
+    backgroundColor: "#000000",
+};

package/lib/components/divider/dividerProps.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from "react";
+import type { DividerVariantName } from "../../theme/themeTypes.js";
+export interface DividerProps {
+    /**
+     * The component's variant to apply, as defined in the theme.
+     *
+     * Custom variants should be defined in the theme through module augmentation:
+     *
+     * ```ts
+     * declare module "@comet/mail-react" {
+     *     interface DividerVariants { thin: true; thick: true }
+     * }
+     * ```
+     *
+     * ```ts
+     * const theme = createTheme({
+     *     divider: {
+     *         variants: {
+     *             thin: { height: 1 },
+     *             thick: { height: 8 },
+     *         },
+     *     },
+     * });
+     * ```
+     */
+    variant?: DividerVariantName;
+    /** Height of the divider in pixels. */
+    height?: number;
+    /** Background color of the divider (e.g. `"#FF0000"`). */
+    backgroundColor?: string;
+    /**
+     * Background image for the divider — typically a gradient. Clients that
+     * don't render `background-image` fall back to the solid `backgroundColor`.
+     */
+    backgroundImage?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/lib/components/divider/dividerProps.js

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

package/lib/components/divider/generateResponsiveDividerCss.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from "../../theme/themeTypes.js";
+interface GenerateResponsiveDividerCssOptions {
+    /** Selector for divider style overrides, given a variant name. */
+    styleSelector: (variantName: string) => string;
+}
+/** Generates responsive CSS media queries for divider variant overrides. */
+export declare function generateResponsiveDividerCss(theme: Theme, options: GenerateResponsiveDividerCssOptions): string;
+export {};

package/lib/components/divider/generateResponsiveDividerCss.js

@@ -0,0 +1,55 @@
+import { getResponsiveOverrides } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+const colorCssProperties = [
+    ["backgroundColor", "background-color"],
+    ["backgroundImage", "background-image"],
+];
+/** Generates responsive CSS media queries for divider variant overrides. */
+export function generateResponsiveDividerCss(theme, options) {
+    const { variants } = theme.divider;
+    if (!variants) {
+        return css ``;
+    }
+    const cssChunks = [];
+    for (const [variantName, variantStyles] of Object.entries(variants)) {
+        if (!variantStyles) {
+            continue;
+        }
+        const overrides = new Map();
+        const heightValue = variantStyles.height;
+        if (heightValue !== undefined) {
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(heightValue)) {
+                const declarations = overrides.get(breakpointKey) ?? [];
+                // line-height matches height so Outlook honors the declared cell height.
+                declarations.push(`height: ${breakpointValue}px !important`);
+                declarations.push(`line-height: ${breakpointValue}px !important`);
+                overrides.set(breakpointKey, declarations);
+            }
+        }
+        for (const [themeKey, cssProperty] of colorCssProperties) {
+            const value = variantStyles[themeKey];
+            if (value === undefined) {
+                continue;
+            }
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
+                const declarations = overrides.get(breakpointKey) ?? [];
+                declarations.push(`${cssProperty}: ${breakpointValue} !important`);
+                overrides.set(breakpointKey, declarations);
+            }
+        }
+        for (const [breakpointKey, declarations] of overrides) {
+            const breakpoint = theme.breakpoints[breakpointKey];
+            if (!breakpoint) {
+                continue;
+            }
+            cssChunks.push(css `
+                ${breakpoint.belowMediaQuery} {
+                    ${options.styleSelector(variantName)} {
+                        ${declarations.join(";\n")}
+                    }
+                }
+            `);
+        }
+    }
+    return cssChunks.join("\n");
+}

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

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+export type HtmlImageProps = ComponentProps<"img">;
+/**
+ * Renders an `<img>` tag that adapts to its container width below the default
+ * breakpoint.
+ *
+ * Use within raw HTML context — HTML-only emails or
+ * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * For MJML context, use `MjmlImage`.
+ */
+export declare function HtmlImage({ className, ...restProps }: HtmlImageProps): ReactNode;

package/lib/components/image/HtmlImage.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { css } from "../../utils/css.js";
+/**
+ * Renders an `<img>` tag that adapts to its container width below the default
+ * breakpoint.
+ *
+ * Use within raw HTML context — HTML-only emails or
+ * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * For MJML context, use `MjmlImage`.
+ */
+export function HtmlImage({ className, ...restProps }) {
+    return _jsx("img", { className: clsx("htmlImage", className), ...restProps });
+}
+registerStyles((theme) => css `
+        ${theme.breakpoints.default.belowMediaQuery} {
+            .htmlImage {
+                width: 100%;
+                height: auto;
+            }
+        }
+    `);

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/image/__stories__/HtmlImage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HtmlImage } from "../HtmlImage.js";
+type Story = StoryObj<typeof HtmlImage>;
+declare const config: Meta<typeof HtmlImage>;
+export default config;
+export declare const Default: Story;
+export declare const FullWidth: Story;

package/lib/components/image/__stories__/HtmlImage.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
+import { defaultTheme } from "../../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue } from "../../../theme/responsiveValue.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { HtmlImage } from "../HtmlImage.js";
+const sectionIndent = getDefaultFromResponsiveValue(defaultTheme.sizes.contentIndentation);
+const sectionInnerWidth = defaultTheme.sizes.bodyWidth - 2 * sectionIndent;
+const config = {
+    title: "Components/HtmlImage",
+    component: HtmlImage,
+    tags: ["autodocs"],
+    args: {
+        width: sectionInnerWidth,
+        height: 268,
+        alt: "Placeholder image",
+    },
+    argTypes: {
+        src: { control: false },
+    },
+};
+export default config;
+export const Default = {
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlImage, { ...args, src: `https://picsum.photos/seed/html-image/${args.width}/${args.height}` }) }) }) })),
+};
+export const FullWidth = {
+    args: {
+        width: defaultTheme.sizes.bodyWidth,
+        height: 300,
+    },
+    render: (args) => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlImage, { ...args, src: `https://picsum.photos/seed/html-image-full-width/${args.width}/${args.height}` }) }) }) })),
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlImage } from "../MjmlImage.js";
+type Story = StoryObj<typeof MjmlImage>;
+declare const config: Meta<typeof MjmlImage>;
+export default config;
+export declare const Default: Story;
+export declare const FullWidth: Story;

package/lib/components/image/__stories__/MjmlImage.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { defaultTheme } from "../../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue } from "../../../theme/responsiveValue.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlImage } from "../MjmlImage.js";
+const sectionIndent = getDefaultFromResponsiveValue(defaultTheme.sizes.contentIndentation);
+const sectionInnerWidth = defaultTheme.sizes.bodyWidth - 2 * sectionIndent;
+const config = {
+    title: "Components/MjmlImage",
+    component: MjmlImage,
+    tags: ["autodocs"],
+    args: {
+        width: sectionInnerWidth,
+        height: 268,
+        alt: "Placeholder image",
+    },
+    argTypes: {
+        src: { control: false },
+    },
+};
+export default config;
+export const Default = {
+    render: (args) => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlImage, { ...args, src: `https://picsum.photos/seed/mjml-image/${args.width}/${args.height}` }) }) })),
+};
+export const FullWidth = {
+    args: {
+        width: defaultTheme.sizes.bodyWidth,
+        height: 300,
+    },
+    render: (args) => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlImage, { ...args, src: `https://picsum.photos/seed/mjml-image-full-width/${args.width}/${args.height}` }) }) })),
+};

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,6 +1,6 @@
 import { getResponsiveOverrides } from "../../theme/responsiveValue.js";
 import { css } from "../../utils/css.js";
-export const textStyleCssProperties = [
+const textStyleCssProperties = [
     ["fontFamily", "font-family"],
     ["fontSize", "font-size"],
     ["fontWeight", "font-weight"],

package/lib/index.d.ts

@@ -8,6 +8,14 @@ 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 { 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 +34,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 { DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, 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, 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, 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,10 @@ 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 { 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 +21,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, 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 { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/theme/createTheme.d.ts

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

package/lib/theme/createTheme.js

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

package/lib/theme/defaultTheme.js

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

package/lib/theme/themeTypes.d.ts

@@ -46,6 +46,46 @@ 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;
+}
 /**
  * A resolved breakpoint with its numeric value and a ready-to-use media query
  * string that targets viewports narrower than this breakpoint.
@@ -101,6 +141,7 @@ export interface Theme {
     sizes: ThemeSizes;
     breakpoints: ThemeBreakpoints;
     text: ThemeText;
+    divider: ThemeDivider;
     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.5",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -30,7 +30,7 @@
     "@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",
     "chokidar-cli": "^3.0.0",
     "eslint": "^9.39.4",
@@ -42,8 +42,8 @@
     "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"
+    "@comet/eslint-config": "9.0.0-beta.5",
+    "@comet/cli": "9.0.0-beta.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",