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

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

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
-import { MjmlSection } from "../../components/section/MjmlSection.js";
-import { MjmlText } from "../../components/text/MjmlText.js";
-import { registerStyles } from "../../styles/registerStyles.js";
-import { createTheme } from "../../theme/createTheme.js";
-import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
-import { css } from "../../utils/css.js";
-const config = {
-    title: "Layout Patterns/Symmetric Three-Column Layout",
-};
-export default config;
-const theme = createTheme({
-    text: {
-        defaultVariant: "body",
-        variants: {
-            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
-            subheading: { fontSize: "16px", lineHeight: "22px", fontWeight: "bold" },
-            body: { fontSize: "14px", lineHeight: "20px" },
-        },
-    },
-});
-registerStyles((theme) => css `
-        ${theme.breakpoints.default.belowMediaQuery} {
-            .symmetricThreeColumnsSection > table > tbody > tr > td {
-                display: flex !important;
-                gap: 20px !important;
-            }
-
-            .symmetricThreeColumnsSection__column {
-                flex: 1 1 0% !important;
-                width: auto !important;
-                max-width: none !important;
-                display: block !important;
-            }
-
-            .symmetricThreeColumnsSection__column > table > tbody > tr > td {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-        }
-
-        ${theme.breakpoints.mobile.belowMediaQuery} {
-            .symmetricThreeColumnsSection > table > tbody > tr > td {
-                flex-direction: column !important;
-            }
-
-            .symmetricThreeColumnsSection__column {
-                flex: none !important;
-                width: 100% !important;
-                max-width: 100% !important;
-            }
-        }
-    `);
-export const Default = {
-    parameters: { theme },
-    render: () => {
-        const SymmetricThreeColumnSection = () => {
-            const columnGap = 20;
-            const halfColumnGap = columnGap / 2;
-            const availableContentWidth = theme.sizes.bodyWidth - 2 * getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
-            const contentWidthPerColumn = (availableContentWidth - 2 * columnGap) / 3;
-            const outerColumnWidth = `${((contentWidthPerColumn + halfColumnGap) / availableContentWidth) * 100}%`;
-            const innerColumnWidth = `${((contentWidthPerColumn + columnGap) / availableContentWidth) * 100}%`;
-            return (_jsxs(MjmlSection, { indent: true, className: "symmetricThreeColumnsSection", children: [_jsxs(MjmlColumn, { width: outerColumnWidth, paddingRight: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "First column" }), _jsx(MjmlText, { children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur. Ratione perferendis distinctio sapiente est." })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Second column" }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus quis soluta. Est recusandae delectus." })] }), _jsxs(MjmlColumn, { width: outerColumnWidth, paddingLeft: halfColumnGap, className: "symmetricThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Third column" }), _jsx(MjmlText, { children: "Occaecati vel possimus similique reiciendis iure rerum sit architecto. Voluptas laudantium cupiditate aut repudiandae iste." })] })] }));
-        };
-        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Three column layout" }), _jsx(MjmlText, { children: "Three columns require explicit width compensation. Inner columns have padding on both sides while outer columns only have it on one side, so inner columns are given a wider width to keep all content areas equal. On mobile, a flex reset neutralizes the desktop widths so columns can size equally and then stack." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(SymmetricThreeColumnSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
-    },
-};
-registerStyles((theme) => css `
-        ${theme.breakpoints.default.belowMediaQuery} {
-            .neverStackingThreeColumnsSection > table > tbody > tr > td > div {
-                display: flex !important;
-                gap: 20px !important;
-            }
-
-            .neverStackingThreeColumnsSection__column {
-                flex: 1 1 0% !important;
-                width: auto !important;
-                max-width: none !important;
-                display: block !important;
-            }
-
-            .neverStackingThreeColumnsSection__column > table > tbody > tr > td {
-                padding-left: 0 !important;
-                padding-right: 0 !important;
-            }
-        }
-    `);
-export const NeverStacks = {
-    parameters: { theme },
-    render: () => {
-        const NeverStackingThreeColumnSection = () => {
-            const columnGap = 20;
-            const halfColumnGap = columnGap / 2;
-            const availableContentWidth = theme.sizes.bodyWidth - 2 * getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
-            const contentWidthPerColumn = (availableContentWidth - 2 * columnGap) / 3;
-            const outerColumnWidth = `${((contentWidthPerColumn + halfColumnGap) / availableContentWidth) * 100}%`;
-            const innerColumnWidth = `${((contentWidthPerColumn + columnGap) / availableContentWidth) * 100}%`;
-            return (_jsxs(MjmlSection, { indent: true, disableResponsiveBehavior: true, className: "neverStackingThreeColumnsSection", children: [_jsxs(MjmlColumn, { width: outerColumnWidth, paddingRight: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Foo" }), _jsx(MjmlText, { children: "Lorem" })] }), _jsxs(MjmlColumn, { width: innerColumnWidth, paddingLeft: halfColumnGap, paddingRight: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Bar" }), _jsx(MjmlText, { children: "Ipsum" })] }), _jsxs(MjmlColumn, { width: outerColumnWidth, paddingLeft: halfColumnGap, className: "neverStackingThreeColumnsSection__column", children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Baz" }), _jsx(MjmlText, { children: "Dolor" })] })] }));
-        };
-        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Three columns that never stack" }), _jsx(MjmlText, { bottomSpacing: true, children: "Same width compensation and flex-reset mechanic as the default three-column layout, without the mobile stacking override so columns stay side-by-side at every viewport." }), _jsxs(MjmlText, { bottomSpacing: true, children: [_jsx("code", { children: "disableResponsiveBehavior" }), " wraps the columns in an ", _jsx("code", { children: "MjmlGroup" }), " internally so MJML's own mobile auto-stack is suppressed even in clients that ignore the flex CSS. Because of that wrapper, the flex reset targets one level deeper (", _jsx("code", { children: "\u2026 > td > div" }), ") than in the default layout."] }), _jsx(MjmlText, { children: "Suitable for short, fixed-value rows \u2014 metrics, numeric summaries, icon strips \u2014 that remain readable even when narrow." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(NeverStackingThreeColumnSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
-    },
-};

package/lib/__stories__/layout-patterns/SymmetricTwoColumnLayout.stories.d.ts

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

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

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
-import { MjmlSection } from "../../components/section/MjmlSection.js";
-import { MjmlText } from "../../components/text/MjmlText.js";
-import { registerStyles } from "../../styles/registerStyles.js";
-import { createTheme } from "../../theme/createTheme.js";
-import { css } from "../../utils/css.js";
-const config = {
-    title: "Layout Patterns/Symmetric Two-Column Layout",
-};
-export default config;
-const theme = createTheme({
-    text: {
-        defaultVariant: "body",
-        variants: {
-            heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
-            subheading: { fontSize: "16px", lineHeight: "22px", fontWeight: "bold" },
-            body: { fontSize: "14px", lineHeight: "20px" },
-        },
-    },
-});
-registerStyles((theme) => css `
-        ${theme.breakpoints.mobile.belowMediaQuery} {
-            .twoColumnsSection__leftColumn > table > tbody > tr > td {
-                padding-right: 0 !important;
-            }
-
-            .twoColumnsSection__rightColumn > table > tbody > tr > td {
-                padding-left: 0 !important;
-            }
-
-            .twoColumnsSection__leftColumn {
-                margin-bottom: 20px;
-            }
-        }
-    `);
-export const Default = {
-    parameters: { theme },
-    render: () => {
-        const TwoColumnsSection = () => {
-            const columnGap = 20;
-            const halfGap = columnGap / 2;
-            return (_jsxs(MjmlSection, { indent: true, className: "twoColumnsSection", children: [_jsxs(MjmlColumn, { className: "twoColumnsSection__leftColumn", paddingRight: halfGap, children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Left column" }), _jsx(MjmlText, { children: "Minima ea distinctio quisquam. Illo reiciendis non officiis consectetur. Ratione perferendis distinctio sapiente est. Dolor consequatur qui excepturi natus." })] }), _jsxs(MjmlColumn, { className: "twoColumnsSection__rightColumn", paddingLeft: halfGap, children: [_jsx(MjmlText, { variant: "subheading", bottomSpacing: true, children: "Right column" }), _jsx(MjmlText, { children: "Numquam aut voluptas numquam aspernatur. Consequatur quidem omnis dolorem natus quis soluta. Est recusandae delectus sed sed deserunt velit quia." })] })] }));
-        };
-        return (_jsxs(_Fragment, { children: [_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 30 }), _jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Two column layout" }), _jsx(MjmlText, { children: "Two columns with equal widths split evenly by MJML. Each column gets half-gap padding on its inner side to create the 20px gap. No explicit width calculation is needed." }), _jsx(MjmlSpacer, { height: 30 })] }) }), _jsx(TwoColumnsSection, {}), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
-    },
-};

package/lib/blocks/pixelImage/__stories__/HtmlPixelImageBlock.stories.d.ts

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

package/lib/blocks/pixelImage/__stories__/HtmlPixelImageBlock.stories.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
-import { MjmlMailRoot } from "../../../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../../../components/section/MjmlSection.js";
-import { HtmlPixelImageBlock } from "../HtmlPixelImageBlock.js";
-import { exampleBlockData } from "./exampleBlockData.js";
-const config = {
-    title: "Components/Blocks/HtmlPixelImageBlock",
-    component: HtmlPixelImageBlock,
-    tags: ["autodocs"],
-    parameters: {
-        mailRoot: false,
-        docs: {
-            description: {
-                component: "Renders a pixel-image from the DAM as a raw `<img>` tag, for use in HTML-only emails or inside MJML ending tags such as `MjmlRaw`.\n\n_Note: this story may fail to load the actual image when the API fixtures don't include the referenced DAM file._",
-            },
-        },
-    },
-    argTypes: {
-        data: { control: false },
-        aspectRatio: {
-            control: "select",
-            options: ["inherit", "16x9", "4x3", "3x2", "3x1", "2x1", "1x1", "1x2", "1x3", "2x3", "3x4", "9x16"],
-        },
-    },
-    args: {
-        data: exampleBlockData,
-        width: 600,
-    },
-};
-export default config;
-export const Default = {
-    render: (args) => (_jsx(MjmlMailRoot, { config: {
-            pixelImageBlock: {
-                validSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560, 3200, 3840],
-                baseUrl: "",
-            },
-        }, children: _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlPixelImageBlock, { ...args }) }) }) }) })),
-};
-export const AspectRatioOverride = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Renders the same DAM image at its native aspect ratio and overridden to `16x9`, demonstrating how the `aspectRatio` prop reframes the rendered image without changing the source DAM record.",
-            },
-        },
-    },
-    render: (args) => (_jsx(MjmlMailRoot, { config: {
-            pixelImageBlock: {
-                validSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560, 3200, 3840],
-                baseUrl: "",
-            },
-        }, children: _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsxs(MjmlRaw, { children: [_jsx(HtmlPixelImageBlock, { ...args }), _jsx(HtmlPixelImageBlock, { ...args, aspectRatio: "16x9" })] }) }) }) })),
-};

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

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

package/lib/blocks/pixelImage/__stories__/MjmlPixelImageBlock.stories.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn } from "@faire/mjml-react";
-import { MjmlMailRoot } from "../../../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../../../components/section/MjmlSection.js";
-import { MjmlPixelImageBlock } from "../MjmlPixelImageBlock.js";
-import { exampleBlockData } from "./exampleBlockData.js";
-const config = {
-    title: "Components/Blocks/MjmlPixelImageBlock",
-    component: MjmlPixelImageBlock,
-    tags: ["autodocs"],
-    parameters: {
-        mailRoot: false,
-        docs: {
-            description: {
-                component: "Renders a pixel-image from the DAM as `MjmlImage`. Must be placed within an `MjmlColumn`.\n\n_Note: this story may fail to load the actual image when the API fixtures don't include the referenced DAM file._",
-            },
-        },
-    },
-    argTypes: {
-        data: { control: false },
-        aspectRatio: {
-            control: "select",
-            options: ["inherit", "16x9", "4x3", "3x2", "3x1", "2x1", "1x1", "1x2", "1x3", "2x3", "3x4", "9x16"],
-        },
-    },
-    args: {
-        data: exampleBlockData,
-        width: 600,
-    },
-};
-export default config;
-export const Default = {
-    render: (args) => (_jsx(MjmlMailRoot, { config: {
-            pixelImageBlock: {
-                validSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560, 3200, 3840],
-                baseUrl: "",
-            },
-        }, children: _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlPixelImageBlock, { ...args }) }) }) })),
-};
-export const AspectRatioOverride = {
-    parameters: {
-        docs: {
-            description: {
-                story: "Renders the same DAM image at its native aspect ratio and overridden to `16x9`, demonstrating how the `aspectRatio` prop reframes the rendered image without changing the source DAM record.",
-            },
-        },
-    },
-    render: (args) => (_jsx(MjmlMailRoot, { config: {
-            pixelImageBlock: {
-                validSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560, 3200, 3840],
-                baseUrl: "",
-            },
-        }, children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlPixelImageBlock, { ...args }), _jsx(MjmlPixelImageBlock, { ...args, aspectRatio: "16x9" })] }) }) })),
-};

package/lib/blocks/pixelImage/__stories__/exampleBlockData.d.ts

@@ -1,2 +0,0 @@
-import type { PixelImageBlockData } from "../../../blocks.generated.js";
-export declare const exampleBlockData: PixelImageBlockData;

package/lib/blocks/pixelImage/__stories__/exampleBlockData.js

@@ -1,19 +0,0 @@
-export const exampleBlockData = {
-    damFile: {
-        id: "example-image",
-        name: "example-image.jpg",
-        size: 1000000,
-        mimetype: "image/jpeg",
-        contentHash: "example-hash",
-        archived: false,
-        scope: { domain: "at" },
-        fileUrl: "https://picsum.photos/seed/comet-pixel-image/1000/1000",
-        image: {
-            width: 1000,
-            height: 1000,
-            cropArea: { focalPoint: "SMART" },
-            dominantColor: "#000000",
-        },
-    },
-    urlTemplate: "https://picsum.photos/seed/comet-pixel-image/$resizeWidth/$resizeHeight",
-};

package/lib/blocks/pixelImage/__tests__/usePixelImageBlockConfig.test.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { ConfigProvider } from "../../../config/ConfigProvider.js";
-import { usePixelImageBlockConfig } from "../usePixelImageBlockConfig.js";
-function ConfigProbe() {
-    usePixelImageBlockConfig();
-    return null;
-}
-describe("usePixelImageBlockConfig", () => {
-    it("throws when config.pixelImageBlock is unset", () => {
-        expect(() => renderToStaticMarkup(_jsx(ConfigProbe, {}))).toThrowError(/`pixelImageBlock` must be set/);
-    });
-    it("error message points at MjmlMailRoot and ConfigProvider", () => {
-        expect(() => renderToStaticMarkup(_jsx(ConfigProbe, {}))).toThrowError(/MjmlMailRoot/);
-        expect(() => renderToStaticMarkup(_jsx(ConfigProbe, {}))).toThrowError(/ConfigProvider/);
-    });
-    it("does not throw when config.pixelImageBlock is provided", () => {
-        expect(() => renderToStaticMarkup(_jsx(ConfigProvider, { config: { pixelImageBlock: { validSizes: [640, 1280], baseUrl: "http://localhost:3000" } }, children: _jsx(ConfigProbe, {}) }))).not.toThrow();
-    });
-});

package/lib/blocks/pixelImage/__tests__/usePixelImageBlockData.test.d.ts

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

package/lib/blocks/pixelImage/__tests__/usePixelImageBlockData.test.js

@@ -1,205 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { ConfigProvider } from "../../../config/ConfigProvider.js";
-import { createTheme } from "../../../theme/createTheme.js";
-import { ThemeProvider } from "../../../theme/ThemeProvider.js";
-import { usePixelImageBlockData } from "../usePixelImageBlockData.js";
-function captureUsePixelImageData({ data, defaultRenderWidth, largestPossibleRenderWidth, aspectRatio, config }) {
-    const captured = { value: undefined };
-    function Probe() {
-        captured.value = usePixelImageBlockData({ data, defaultRenderWidth, largestPossibleRenderWidth, aspectRatio });
-        return null;
-    }
-    renderToStaticMarkup(_jsx(ThemeProvider, { theme: createTheme(), children: _jsx(ConfigProvider, { config: config, children: _jsx(Probe, {}) }) }));
-    if (captured.value === undefined) {
-        throw new Error("Probe did not run");
-    }
-    return captured.value;
-}
-function expectNonNull(value) {
-    if (value === null) {
-        throw new Error("Expected non-null result from usePixelImageBlockData");
-    }
-    return value;
-}
-const validSizes = [320, 640, 1280, 2048];
-const baseUrl = "http://localhost:3000";
-const config = { pixelImageBlock: { validSizes, baseUrl } };
-const smartUrlTemplate = "/dam/images/abc/resize:$resizeWidth:$resizeHeight/photo.jpg";
-const smartImageData = {
-    damFile: {
-        id: "id-1",
-        name: "photo.jpg",
-        size: 1000,
-        mimetype: "image/jpeg",
-        contentHash: "hash",
-        archived: false,
-        fileUrl: "/dam/files/id-1.jpg",
-        image: {
-            width: 4000,
-            height: 2000,
-            cropArea: { focalPoint: "SMART" },
-        },
-    },
-    urlTemplate: smartUrlTemplate,
-};
-describe("usePixelImageBlockData — width selection", () => {
-    it("picks the smallest validSizes entry >= defaultRenderWidth × 2", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, config }));
-        expect(result.imageUrl).toContain(":640:");
-    });
-    it("picks an exact validSizes match when present", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 320, config }));
-        expect(result.imageUrl).toContain(":640:");
-    });
-    it("falls back to the largest validSizes entry when none qualifies", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 2000, config }));
-        expect(result.imageUrl).toContain(":2048:");
-    });
-    it("uses largestPossibleRenderWidth × 2 when defaultRenderWidth equals largestPossibleRenderWidth", () => {
-        const result = expectNonNull(captureUsePixelImageData({
-            data: smartImageData,
-            defaultRenderWidth: 600,
-            largestPossibleRenderWidth: 600,
-            config,
-        }));
-        expect(result.imageUrl).toContain(":1200:");
-    });
-    it("defaults largestPossibleRenderWidth to theme.sizes.bodyWidth (600) and triggers DPR-2 fixed path at width 600", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 600, config }));
-        expect(result.imageUrl).toContain(":1200:");
-    });
-});
-describe("usePixelImageBlockData — URL prefixing", () => {
-    it("prefixes a relative URL with config.pixelImageBlock.baseUrl", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, config }));
-        expect(result.imageUrl.startsWith(`${baseUrl}/dam/images/abc/`)).toBe(true);
-    });
-    it("does not prefix an absolute URL", () => {
-        const absoluteData = {
-            ...smartImageData,
-            urlTemplate: "https://cdn.example.com/$resizeWidth/$resizeHeight/photo.jpg",
-        };
-        const result = expectNonNull(captureUsePixelImageData({ data: absoluteData, defaultRenderWidth: 200, config }));
-        expect(result.imageUrl.startsWith("https://cdn.example.com/")).toBe(true);
-        expect(result.imageUrl.includes(baseUrl)).toBe(false);
-    });
-});
-describe("usePixelImageBlockData — aspect ratio", () => {
-    it("uses the natural image aspect ratio for SMART crop areas", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, config }));
-        expect(result.desktopImageHeight).toBe(100);
-        expect(result.imageUrl).toContain(":640:320/");
-    });
-    it("derives aspect ratio from crop dimensions for non-SMART crop areas", () => {
-        const nonSmartData = {
-            damFile: {
-                id: "id-2",
-                name: "photo2.jpg",
-                size: 1000,
-                mimetype: "image/jpeg",
-                contentHash: "hash",
-                archived: false,
-                fileUrl: "/dam/files/id-2.jpg",
-                image: {
-                    width: 4000,
-                    height: 2000,
-                    cropArea: { focalPoint: "CENTER", width: 50, height: 100, x: 25, y: 0 },
-                },
-            },
-            urlTemplate: smartUrlTemplate,
-        };
-        const result = expectNonNull(captureUsePixelImageData({ data: nonSmartData, defaultRenderWidth: 200, config }));
-        expect(result.desktopImageHeight).toBe(200);
-        expect(result.imageUrl).toContain(":640:640/");
-    });
-    it("throws when crop dimensions are missing on a non-SMART crop area", () => {
-        const malformedData = {
-            damFile: {
-                id: "id-3",
-                name: "photo3.jpg",
-                size: 1000,
-                mimetype: "image/jpeg",
-                contentHash: "hash",
-                archived: false,
-                fileUrl: "/dam/files/id-3.jpg",
-                image: {
-                    width: 4000,
-                    height: 2000,
-                    cropArea: { focalPoint: "CENTER" },
-                },
-            },
-            urlTemplate: smartUrlTemplate,
-        };
-        expect(() => captureUsePixelImageData({ data: malformedData, defaultRenderWidth: 200, config })).toThrow(/Missing crop dimensions/);
-    });
-});
-describe("usePixelImageBlockData — aspectRatio override", () => {
-    it("uses a numeric aspectRatio in place of the cropArea-derived ratio", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, aspectRatio: 16 / 9, config }));
-        expect(result.imageUrl).toContain(":640:360/");
-        expect(result.desktopImageHeight).toBe(113);
-    });
-    it.each([
-        ["WxH", "16x9"],
-        ["W:H", "16:9"],
-        ["W/H", "16/9"],
-    ])("parses string aspectRatio in %s form", (_label, value) => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, aspectRatio: value, config }));
-        expect(result.imageUrl).toContain(":640:360/");
-        expect(result.desktopImageHeight).toBe(113);
-    });
-    it("treats a single-token string as `width / 1`", () => {
-        const result = expectNonNull(captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, aspectRatio: "2", config }));
-        expect(result.imageUrl).toContain(":640:320/");
-        expect(result.desktopImageHeight).toBe(100);
-    });
-    it("overrides a non-SMART cropArea ratio", () => {
-        const nonSmartData = {
-            damFile: {
-                id: "id-override",
-                name: "photo.jpg",
-                size: 1000,
-                mimetype: "image/jpeg",
-                contentHash: "hash",
-                archived: false,
-                fileUrl: "/dam/files/id-override.jpg",
-                image: {
-                    width: 4000,
-                    height: 2000,
-                    cropArea: { focalPoint: "CENTER", width: 50, height: 100, x: 25, y: 0 },
-                },
-            },
-            urlTemplate: smartUrlTemplate,
-        };
-        const result = expectNonNull(captureUsePixelImageData({ data: nonSmartData, defaultRenderWidth: 200, aspectRatio: "16x9", config }));
-        expect(result.imageUrl).toContain(":640:360/");
-        expect(result.desktopImageHeight).toBe(113);
-    });
-    it("throws when the aspectRatio string is malformed", () => {
-        expect(() => captureUsePixelImageData({ data: smartImageData, defaultRenderWidth: 200, aspectRatio: "not-a-ratio", config })).toThrow(/An error occurred while parsing the aspect ratio: not-a-ratio/);
-    });
-});
-describe("usePixelImageBlockData — incomplete data", () => {
-    it("returns null when damFile is absent", () => {
-        const result = captureUsePixelImageData({ data: { urlTemplate: smartUrlTemplate }, defaultRenderWidth: 200, config });
-        expect(result).toBeNull();
-    });
-    it("returns null when damFile.image is absent", () => {
-        const noImageData = {
-            damFile: {
-                id: "id-4",
-                name: "no-image.jpg",
-                size: 0,
-                mimetype: "image/jpeg",
-                contentHash: "hash",
-                archived: false,
-                fileUrl: "/dam/files/id-4.jpg",
-            },
-            urlTemplate: smartUrlTemplate,
-        };
-        const result = captureUsePixelImageData({ data: noImageData, defaultRenderWidth: 200, config });
-        expect(result).toBeNull();
-    });
-});

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

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

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

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