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

package/lib/components/text/__tests__/HtmlText.test.js

@@ -1,157 +0,0 @@
-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 { HtmlText } from "../HtmlText.js";
-// Type-level tests — validated by tsc, not at runtime.
-// An unused @ts-expect-error directive causes a compile error if the overloads
-// stop rejecting the invalid usage, so these act as regression guards.
-// @ts-expect-error href is not valid on the default <td>
-void (_jsx(HtmlText, { href: "/foo", children: "text" }));
-void ((
-// @ts-expect-error colSpan is not valid on <a>
-_jsx(HtmlText, { element: "a", colSpan: 2, children: "text" })));
-// Own props are always accepted regardless of element — no error expected
-void (_jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, children: "text" }));
-void (_jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "text" }));
-function renderHtmlText(element) {
-    return renderToStaticMarkup(element);
-}
-describe("HtmlText", () => {
-    it("renders a <td> with base theme styles as inline styles", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
-        expect(html).toContain("<td");
-        expect(html).toContain("Hello");
-        expect(html).toContain("font-family:Arial, sans-serif");
-        expect(html).toContain("font-size:16px");
-        expect(html).toContain("line-height:20px");
-    });
-    it("applies variant styles over base styles", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: { fontSize: { default: "32px", mobile: "24px" }, fontWeight: 700 },
-                },
-            },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
-        expect(html).toContain("font-size:32px");
-        expect(html).toContain("font-weight:700");
-    });
-    it("inherits base styles not overridden by variant", () => {
-        const theme = createTheme({
-            text: {
-                fontFamily: "Georgia, serif",
-                variants: {
-                    heading: { fontSize: "32px" },
-                },
-            },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
-        expect(html).toContain("font-family:Georgia, serif");
-        expect(html).toContain("font-size:32px");
-    });
-    it("applies defaultVariant when no variant prop is specified", () => {
-        const theme = createTheme({
-            text: {
-                defaultVariant: "body",
-                variants: {
-                    body: { fontSize: "14px" },
-                },
-            },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
-        expect(html).toContain("font-size:14px");
-    });
-    it("applies bottomSpacing as padding-bottom", () => {
-        const theme = createTheme({ text: { bottomSpacing: "16px" } });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
-        expect(html).toContain("padding-bottom:16px");
-    });
-    it("uses variant bottomSpacing over base", () => {
-        const theme = createTheme({
-            text: {
-                bottomSpacing: "16px",
-                variants: {
-                    heading: { bottomSpacing: { default: "24px", mobile: "16px" } },
-                },
-            },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Title" }) }));
-        expect(html).toContain("padding-bottom:24px");
-    });
-    it("does not apply padding-bottom when bottomSpacing is not set", () => {
-        const theme = createTheme({ text: { bottomSpacing: "16px" } });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
-        expect(html).not.toContain("padding-bottom");
-    });
-    it("always applies the htmlText base class", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
-        expect(html).toContain('class="htmlText"');
-    });
-    it("applies variant modifier class", () => {
-        const theme = createTheme({
-            text: { variants: { heading: { fontSize: "32px" } } },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
-        expect(html).toContain("htmlText--heading");
-    });
-    it("applies bottomSpacing modifier class", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
-        expect(html).toContain("htmlText--bottomSpacing");
-    });
-    it("merges consumer className", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { className: "custom", children: "Text" }) }));
-        expect(html).toContain("htmlText");
-        expect(html).toContain("custom");
-    });
-    it("lets user style prop override theme styles", () => {
-        const theme = createTheme({ text: { fontFamily: "Arial, sans-serif" } });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { style: { fontFamily: "Georgia" }, children: "Hello" }) }));
-        expect(html).toContain("font-family:Georgia");
-    });
-    it("forwards standard td attributes", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { colSpan: 2, align: "center", children: "Hello" }) }));
-        expect(html).toContain('colSpan="2"');
-        expect(html).toContain('align="center"');
-    });
-    it("renders a <div> when element is 'div'", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", children: "Hello" }) }));
-        expect(html).toContain("<div");
-        expect(html).not.toContain("<td");
-        expect(html).toContain("Hello");
-        expect(html).toContain("font-family:Arial, sans-serif");
-    });
-    it("renders an <a> with href when element is 'a'", () => {
-        const theme = createTheme();
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "a", href: "/link", children: "Click" }) }));
-        expect(html).toContain("<a");
-        expect(html).not.toContain("<td");
-        expect(html).toContain('href="/link"');
-        expect(html).toContain("Click");
-    });
-    it("applies theme styles and CSS classes to non-td elements", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700 },
-                },
-            },
-        });
-        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, className: "custom", children: "Title" }) }));
-        expect(html).toContain("<div");
-        expect(html).toContain("font-size:32px");
-        expect(html).toContain("font-weight:700");
-        expect(html).toContain("htmlText");
-        expect(html).toContain("htmlText--heading");
-        expect(html).toContain("htmlText--bottomSpacing");
-        expect(html).toContain("custom");
-    });
-});

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

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

package/lib/components/text/__tests__/MjmlText.test.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn } from "@faire/mjml-react";
-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 { generateTextStyles, MjmlText } from "../MjmlText.js";
-describe("MjmlText integration", () => {
-    // Full render pipeline: mjml2html must report no errors for this MjmlText + theme setup.
-    it("produces no MJML warnings with a variant theme", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                        fontWeight: 700,
-                        lineHeight: { default: "40px", mobile: "30px" },
-                    },
-                    body: { fontSize: "14px", lineHeight: "22px" },
-                },
-            },
-        });
-        const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { theme: theme, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading" }), _jsx(MjmlText, { variant: "body", children: "Body text" }), _jsx(MjmlText, { children: "Base text" })] }) }) }));
-        expect(mjmlWarnings).toEqual([]);
-    });
-});
-describe("generateTextStyles", () => {
-    it("returns empty CSS when no variants are defined", () => {
-        const theme = createTheme();
-        const result = generateTextStyles(theme);
-        expect(result).toBe("");
-    });
-    it("emits style overrides with correct selector for a variant", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                    },
-                },
-            },
-        });
-        const result = generateTextStyles(theme);
-        expect(result).toContain(".mjmlText--heading > div");
-        expect(result).toContain("font-size: 24px !important");
-    });
-    it("groups multiple properties into a single media query per breakpoint", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                        lineHeight: { default: "40px", mobile: "30px" },
-                    },
-                },
-            },
-        });
-        const result = generateTextStyles(theme);
-        const mobileMediaQuery = `@media (max-width: ${theme.breakpoints.mobile.value - 1}px)`;
-        expect(result).toContain(mobileMediaQuery);
-        // Both declarations should appear within the same media query block
-        const mediaBlockStart = result.indexOf(mobileMediaQuery);
-        const blockContent = result.slice(mediaBlockStart);
-        expect(blockContent).toContain("font-size: 24px !important");
-        expect(blockContent).toContain("line-height: 30px !important");
-    });
-    it("uses compound selector for responsive bottomSpacing", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        bottomSpacing: { default: "24px", mobile: "16px" },
-                    },
-                },
-            },
-        });
-        const result = generateTextStyles(theme);
-        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
-        expect(result).toContain("padding-bottom: 16px !important");
-    });
-    it("emits no media queries for non-responsive variant", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    body: { fontSize: "14px", lineHeight: "22px" },
-                },
-            },
-        });
-        const result = generateTextStyles(theme);
-        expect(result).not.toContain("@media");
-    });
-    it("keeps style and bottomSpacing overrides separate", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                        bottomSpacing: { default: "24px", mobile: "16px" },
-                    },
-                },
-            },
-        });
-        const result = generateTextStyles(theme);
-        // Style overrides use "> div" selector
-        expect(result).toContain(".mjmlText--heading > div");
-        expect(result).toContain("font-size: 24px !important");
-        // Spacing overrides use compound selector (no "> div")
-        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
-        expect(result).toContain("padding-bottom: 16px !important");
-    });
-});

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

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { MjmlWrapper } from "../MjmlWrapper.js";
-type Story = StoryObj<typeof MjmlWrapper>;
-declare const config: Meta<typeof MjmlWrapper>;
-export default config;
-export declare const Primary: Story;
-export declare const ExplicitBackgroundColor: Story;
-export declare const MultipleWrappersWithDifferentBackgrounds: Story;
-export declare const TransparentBackground: Story;
-export declare const FullWidth: Story;

package/lib/components/wrapper/__stories__/MjmlWrapper.stories.js

@@ -1,36 +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 "../../section/MjmlSection.js";
-import { MjmlText } from "../../text/MjmlText.js";
-import { MjmlWrapper } from "../MjmlWrapper.js";
-const config = {
-    title: "Components/MjmlWrapper",
-    component: MjmlWrapper,
-    tags: ["autodocs"],
-};
-export default config;
-export const Primary = {
-    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with the default theme background" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "A second section; both share the wrapper's background" }) }) })] })),
-};
-export const ExplicitBackgroundColor = {
-    args: {
-        backgroundColor: "#2d4a6e",
-    },
-    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { color: "#ffffff", bottomSpacing: true, children: "Explicit wrapper background; sections inside do not paint over it" }), _jsx(MjmlText, { color: "#ffffff", children: "A second section shares the wrapper background" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
-};
-export const MultipleWrappersWithDifferentBackgrounds = {
-    render: (args) => (_jsxs(_Fragment, { children: [_jsxs(MjmlWrapper, { ...args, backgroundColor: "#8fa5bf", children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #1" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) })] }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#c0c1c4", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #2" }), _jsx(MjmlSpacer, { height: 20 })] }) }) }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#ffffff", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #3" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })] })),
-};
-export const TransparentBackground = {
-    args: {
-        backgroundColor: "transparent",
-    },
-    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Transparent wrapper; the body background shows through" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
-};
-export const FullWidth = {
-    args: {
-        fullWidth: true,
-        backgroundColor: "#2d4a6e",
-    },
-    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "Full-width wrapper background extends edge-to-edge" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "The section inside does not override the wrapper's background" }) }) })] })),
-};

package/lib/config/ConfigProvider.test.d.ts

@@ -1,8 +0,0 @@
-declare module "./ConfigProvider.js" {
-    interface Config {
-        testKey?: {
-            value: string;
-        };
-    }
-}
-export {};

package/lib/config/ConfigProvider.test.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../components/section/MjmlSection.js";
-import { renderMailHtml } from "../server/renderMailHtml.js";
-import { ConfigProvider, useConfig } from "./ConfigProvider.js";
-function Probe() {
-    const config = useConfig();
-    return _jsx("span", { "data-config-value": config.testKey?.value ?? "no-config" });
-}
-describe("useConfig", () => {
-    it("returns an empty Config when no ConfigProvider is mounted", () => {
-        const html = renderToStaticMarkup(_jsx(Probe, {}));
-        expect(html).toContain('data-config-value="no-config"');
-    });
-});
-describe("MjmlMailRoot config integration", () => {
-    it("makes the config value available to descendants via useConfig", () => {
-        const { html, mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { config: { testKey: { value: "from-root" } }, children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }));
-        expect(mjmlWarnings).toEqual([]);
-        expect(html).toContain('data-config-value="from-root"');
-    });
-    it("does not shadow an outer ConfigProvider when no config prop is passed", () => {
-        const { html, mjmlWarnings } = renderMailHtml(_jsx(ConfigProvider, { config: { testKey: { value: "from-outer" } }, children: _jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }) }));
-        expect(mjmlWarnings).toEqual([]);
-        expect(html).toContain('data-config-value="from-outer"');
-    });
-});

package/lib/server/renderMailHtml.test.d.ts

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

package/lib/server/renderMailHtml.test.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlClass, MjmlColumn, MjmlText, MjmlTitle } from "@faire/mjml-react";
-import { describe, expect, it } from "vitest";
-import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../components/section/MjmlSection.js";
-import { registerStyles } from "../styles/registerStyles.js";
-import { css } from "../utils/css.js";
-import { renderMailHtml } from "./renderMailHtml.js";
-describe("server/renderMailHtml", () => {
-    it("produces HTML with a doctype", () => {
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
-        expect(html.toLowerCase()).toMatch(/^<!doctype html>/);
-    });
-    it("includes the passed-in text content", () => {
-        const textContent = "Welcome to @comet/mail-react";
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: textContent }) }) }) }));
-        expect(html).toContain(textContent);
-    });
-    it("includes registered styles in the rendered HTML", () => {
-        registerStyles(css `
-            .myComponent {
-                color: red;
-            }
-        `);
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
-        expect(html).toContain(".myComponent");
-        expect(html).toContain("color: red");
-    });
-    it("includes function-style registered styles resolved with the theme", () => {
-        registerStyles((theme) => css `
-                .themed {
-                    width: ${theme.sizes.bodyWidth}px;
-                }
-            `);
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
-        expect(html).toContain(".themed");
-        expect(html).toContain("width: 600px");
-    });
-    it("renders the head slot content inside <mj-head>", () => {
-        const titleText = "Welcome to Comet";
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { head: _jsx(MjmlTitle, { children: titleText }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
-        expect(html).toContain(`<title>${titleText}</title>`);
-    });
-    it("renders the attributes slot content inside <mj-attributes>", () => {
-        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { attributes: _jsx(MjmlClass, { name: "cta", color: "#FF0000" }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { mjmlClass: "cta", children: "Hello" }) }) }) }));
-        expect(html).toContain("color:#FF0000");
-    });
-    it("produces no MJML warnings for a valid component tree", () => {
-        const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "No warnings expected" }) }) }) }));
-        expect(mjmlWarnings).toEqual([]);
-    });
-});

package/lib/storybook/replaceImagesWithPublicUrl.test.d.ts

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

package/lib/storybook/replaceImagesWithPublicUrl.test.js

@@ -1,55 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { replaceImagesWithPublicUrl } from "./replaceImagesWithPublicUrl.js";
-describe("replaceImagesWithPublicUrl", () => {
-    it("replaces src with picsum URL using doubled dimensions", () => {
-        const html = '<img src="original.jpg" width="300" height="200" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/600/400" width="300" height="200" />');
-    });
-    it("handles height before width", () => {
-        const html = '<img src="original.jpg" height="200" width="300" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/600/400" height="200" width="300" />');
-    });
-    it("handles attributes before width and height", () => {
-        const html = '<img alt="photo" src="original.jpg" width="100" height="50" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img alt="photo" src="https://picsum.photos/seed/0/200/100" width="100" height="50" />');
-    });
-    it("handles attributes between width and height", () => {
-        const html = '<img src="original.jpg" width="100" alt="photo" height="50" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/200/100" width="100" alt="photo" height="50" />');
-    });
-    it("handles attributes after width and height", () => {
-        const html = '<img src="original.jpg" width="100" height="50" alt="photo" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/200/100" width="100" height="50" alt="photo" />');
-    });
-    it("leaves img tags without width untouched", () => {
-        const html = '<img src="original.jpg" height="200" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="original.jpg" height="200" />');
-    });
-    it("leaves img tags without height untouched", () => {
-        const html = '<img src="original.jpg" width="300" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="original.jpg" width="300" />');
-    });
-    it("increments seed for each image", () => {
-        const html = '<img src="a.jpg" width="100" height="100" /><img src="b.jpg" width="200" height="150" />';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/200/200" width="100" height="100" />' +
-            '<img src="https://picsum.photos/seed/1/400/300" width="200" height="150" />');
-    });
-    it("returns unchanged html when there are no img tags", () => {
-        const html = "<p>Hello world</p>";
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe("<p>Hello world</p>");
-    });
-    it("handles non-self-closing img tags", () => {
-        const html = '<img src="original.jpg" width="100" height="50">';
-        const result = replaceImagesWithPublicUrl(html);
-        expect(result).toBe('<img src="https://picsum.photos/seed/0/200/100" width="100" height="50">');
-    });
-});

package/lib/theme/__stories__/ThemeProvider.stories.d.ts

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

package/lib/theme/__stories__/ThemeProvider.stories.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
-import { MjmlSection } from "../../components/section/MjmlSection.js";
-import { createBreakpoint } from "../createBreakpoint.js";
-import { createTheme } from "../createTheme.js";
-import { ThemeProvider } from "../ThemeProvider.js";
-const config = {
-    title: "Components/ThemeProvider",
-    component: ThemeProvider,
-    tags: ["autodocs"],
-};
-export default config;
-export const Basic = {
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Using the default theme from the decorator." }) }) })),
-};
-const narrowTheme = createTheme({
-    sizes: { bodyWidth: 400 },
-    breakpoints: { mobile: createBreakpoint(360) },
-});
-export const CustomTheme = {
-    parameters: { theme: narrowTheme },
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "This email uses a 400px body width and 360px mobile breakpoint." }) }) })),
-};

package/lib/theme/createTheme.test.d.ts

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

package/lib/theme/createTheme.test.js

@@ -1,52 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createTheme } from "./createTheme.js";
-import { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./responsiveValue.js";
-describe("createTheme text", () => {
-    it("includes default text values when no overrides given", () => {
-        const theme = createTheme();
-        expect(theme.text.fontFamily).toBe("Arial, sans-serif");
-        expect(theme.text.fontSize).toBe("16px");
-        expect(theme.text.lineHeight).toBe("20px");
-        expect(theme.text.bottomSpacing).toBe("16px");
-    });
-    it("shallow-merges text overrides with defaults", () => {
-        const theme = createTheme({ text: { fontFamily: "Georgia, serif", fontSize: "18px" } });
-        expect(theme.text.fontFamily).toBe("Georgia, serif");
-        expect(theme.text.fontSize).toBe("18px");
-        expect(theme.text.lineHeight).toBe("20px");
-        expect(theme.text.bottomSpacing).toBe("16px");
-    });
-    it("passes through variant definitions", () => {
-        const theme = createTheme({
-            text: {
-                variants: {
-                    heading: { fontSize: { default: "32px", mobile: "24px" } },
-                },
-            },
-        });
-        expect(theme.text.variants).toBeDefined();
-        expect(theme.text.variants?.heading).toEqual({ fontSize: { default: "32px", mobile: "24px" } });
-    });
-    it("does not set defaultVariant or variants by default", () => {
-        const theme = createTheme();
-        expect(theme.text.defaultVariant).toBeUndefined();
-        expect(theme.text.variants).toBeUndefined();
-    });
-});
-describe("createTheme contentIndentation", () => {
-    it("has default contentIndentation with responsive mobile value", () => {
-        const theme = createTheme();
-        expect(getDefaultFromResponsiveValue(theme.sizes.contentIndentation)).toBe(32);
-        expect(getResponsiveOverrides(theme.sizes.contentIndentation)).toContainEqual({ breakpointKey: "mobile", value: 16 });
-    });
-    it("allows overriding contentIndentation with a plain number", () => {
-        const theme = createTheme({ sizes: { contentIndentation: 30 } });
-        expect(getDefaultFromResponsiveValue(theme.sizes.contentIndentation)).toBe(30);
-        expect(getResponsiveOverrides(theme.sizes.contentIndentation)).toEqual([]);
-    });
-    it("allows overriding contentIndentation with an object", () => {
-        const theme = createTheme({ sizes: { contentIndentation: { default: 30, mobile: 15 } } });
-        expect(getDefaultFromResponsiveValue(theme.sizes.contentIndentation)).toBe(30);
-        expect(getResponsiveOverrides(theme.sizes.contentIndentation)).toContainEqual({ breakpointKey: "mobile", value: 15 });
-    });
-});

package/lib/theme/responsiveValue.test.d.ts

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

package/lib/theme/responsiveValue.test.js

@@ -1,62 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { getDefaultFromResponsiveValue, getDefaultOrUndefined, getResponsiveOverrides } from "./responsiveValue.js";
-describe("getDefaultFromResponsiveValue", () => {
-    it("returns the value when given a plain number", () => {
-        expect(getDefaultFromResponsiveValue(20)).toBe(20);
-    });
-    it("returns the default property from an object", () => {
-        expect(getDefaultFromResponsiveValue({ default: 20, mobile: 10 })).toBe(20);
-    });
-    it("returns the default property when only default is present", () => {
-        expect(getDefaultFromResponsiveValue({ default: 42 })).toBe(42);
-    });
-    it("works with string type", () => {
-        expect(getDefaultFromResponsiveValue({ default: "24px", mobile: "20px" })).toBe("24px");
-    });
-    it("returns a plain string value", () => {
-        expect(getDefaultFromResponsiveValue("24px")).toBe("24px");
-    });
-});
-describe("getResponsiveOverrides", () => {
-    it("returns an empty array for a plain number", () => {
-        expect(getResponsiveOverrides(20)).toEqual([]);
-    });
-    it("returns an empty array for an object with only default", () => {
-        expect(getResponsiveOverrides({ default: 42 })).toEqual([]);
-    });
-    it("returns overrides for non-default keys", () => {
-        const result = getResponsiveOverrides({ default: 20, mobile: 10 });
-        expect(result).toEqual([{ breakpointKey: "mobile", value: 10 }]);
-    });
-    it("returns multiple overrides for multiple breakpoint keys", () => {
-        const value = { default: 30, mobile: 10 };
-        const result = getResponsiveOverrides(value);
-        expect(result).toContainEqual({ breakpointKey: "mobile", value: 10 });
-        expect(result).not.toContainEqual(expect.objectContaining({ breakpointKey: "default" }));
-    });
-    it("never includes the default key in overrides", () => {
-        const result = getResponsiveOverrides({ default: 20, mobile: 10 });
-        expect(result.every((o) => o.breakpointKey !== "default")).toBe(true);
-    });
-    it("works with string type", () => {
-        const result = getResponsiveOverrides({ default: "24px", mobile: "20px" });
-        expect(result).toEqual([{ breakpointKey: "mobile", value: "20px" }]);
-    });
-});
-describe("getDefaultOrUndefined", () => {
-    it("returns undefined when given undefined", () => {
-        expect(getDefaultOrUndefined(undefined)).toBeUndefined();
-    });
-    it("returns the value when given a plain value", () => {
-        expect(getDefaultOrUndefined(20)).toBe(20);
-    });
-    it("returns the default property from an object", () => {
-        expect(getDefaultOrUndefined({ default: 20, mobile: 10 })).toBe(20);
-    });
-    it("works with string type", () => {
-        expect(getDefaultOrUndefined("24px")).toBe("24px");
-    });
-    it("returns default from a string responsive object", () => {
-        expect(getDefaultOrUndefined({ default: "32px", mobile: "24px" })).toBe("32px");
-    });
-});

package/lib/utils/css.test.d.ts

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