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

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/inlineLink/__stories__/HtmlInlineLink.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HtmlInlineLink } from "../HtmlInlineLink.js";
-type Story = StoryObj<typeof HtmlInlineLink>;
-declare const config: Meta<typeof HtmlInlineLink>;
-export default config;
-export declare const InText: Story;
-/**
- * Using `!important` overrides the component's responsive `inherit !important`
- * reset, ensuring the custom color persists on both desktop and mobile.
- */
-export declare const CustomColorOverride: Story;
-export declare const WithTextVariants: Story;

package/lib/components/inlineLink/__stories__/HtmlInlineLink.stories.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn } from "@faire/mjml-react";
-import { createTheme } from "../../../theme/createTheme.js";
-import { MjmlSection } from "../../section/MjmlSection.js";
-import { MjmlText } from "../../text/MjmlText.js";
-import { HtmlInlineLink } from "../HtmlInlineLink.js";
-const config = {
-    title: "Components/HtmlInlineLink",
-    component: HtmlInlineLink,
-    tags: ["autodocs"],
-};
-export default config;
-export const InText = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                fontFamily: "Arial, sans-serif",
-                fontSize: "16px",
-                lineHeight: "24px",
-                color: "#333333",
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsxs(MjmlText, { children: ["Visit our ", _jsx(HtmlInlineLink, { href: "https://example.com", children: "website" }), " for more information."] }) }) })),
-};
-/**
- * Using `!important` overrides the component's responsive `inherit !important`
- * reset, ensuring the custom color persists on both desktop and mobile.
- */
-export const CustomColorOverride = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                fontFamily: "Arial, sans-serif",
-                fontSize: "16px",
-                color: "#333333",
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsxs(MjmlText, { children: ["Click", " ", _jsx(HtmlInlineLink, { href: "https://example.com", style: { color: "#0066cc !important" }, children: "here" }), " ", "to continue."] }) }) })),
-};
-export const WithTextVariants = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                fontFamily: "Arial, sans-serif",
-                color: "#333333",
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
-                    body: { fontSize: "16px", lineHeight: "24px" },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsxs(MjmlText, { variant: "heading", bottomSpacing: true, children: ["Welcome to ", _jsx(HtmlInlineLink, { href: "https://example.com", children: "our platform" })] }), _jsxs(MjmlText, { variant: "body", children: ["Explore our ", _jsx(HtmlInlineLink, { href: "https://example.com/features", children: "features" }), " and start building today."] })] }) })),
-};

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

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

package/lib/components/mailRoot/__stories__/MjmlMailRoot.stories.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
-import { createTheme } from "../../../theme/createTheme.js";
-import { MjmlSection } from "../../section/MjmlSection.js";
-import { MjmlMailRoot } from "../MjmlMailRoot.js";
-const config = {
-    title: "Components/MjmlMailRoot",
-    component: MjmlMailRoot,
-    tags: ["autodocs"],
-    parameters: { mailRoot: false },
-};
-export default config;
-export const Basic = {
-    render: () => (_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello from MjmlMailRoot" }) }) }) })),
-};
-export const CustomBodyBackground = {
-    render: () => (_jsx(MjmlMailRoot, { theme: createTheme({ colors: { background: { body: "#EAEAEA" } } }), children: _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Custom body background color" }) }) }) })),
-};

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

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { MjmlSection } from "../MjmlSection.js";
-type Story = StoryObj<typeof MjmlSection>;
-declare const config: Meta<typeof MjmlSection>;
-export default config;
-export declare const Primary: Story;
-export declare const Indented: Story;
-export declare const ExplicitBackgroundColor: Story;
-export declare const DisabledResponsiveBehavior: Story;

package/lib/components/section/__stories__/MjmlSection.stories.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
-import { MjmlSection } from "../MjmlSection.js";
-const config = {
-    title: "Components/MjmlSection",
-    component: MjmlSection,
-    tags: ["autodocs"],
-};
-export default config;
-export const Primary = {
-    render: (args) => (_jsx(MjmlSection, { ...args, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content" }) }) })),
-};
-export const Indented = {
-    args: {
-        indent: true,
-    },
-    render: (args) => (_jsx(MjmlSection, { ...args, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Indented section content" }) }) })),
-};
-export const ExplicitBackgroundColor = {
-    args: {
-        backgroundColor: "#FF0000",
-    },
-    render: (args) => (_jsx(MjmlSection, { ...args, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Explicit backgroundColor overrides theme default" }) }) })),
-};
-export const DisabledResponsiveBehavior = {
-    args: {
-        disableResponsiveBehavior: true,
-    },
-    render: (args) => (_jsxs(MjmlSection, { ...args, children: [_jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "First column" }) }), _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Second column" }) })] })),
-};

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

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HtmlText } from "../HtmlText.js";
-type Story = StoryObj<typeof HtmlText>;
-declare const config: Meta<typeof HtmlText>;
-export default config;
-export declare const Default: Story;
-export declare const WithVariants: Story;
-export declare const ResponsiveVariants: Story;
-export declare const BottomSpacing: Story;
-export declare const DefaultVariant: Story;
-export declare const ElementPropAsDiv: Story;
-export declare const ElementPropAsAnchor: Story;

package/lib/components/text/__stories__/HtmlText.stories.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
-import { createTheme } from "../../../theme/createTheme.js";
-import { MjmlSection } from "../../section/MjmlSection.js";
-import { HtmlText } from "../HtmlText.js";
-const config = {
-    title: "Components/HtmlText",
-    component: HtmlText,
-    tags: ["autodocs"],
-};
-export default config;
-export const Default = {
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { children: "Default text with base theme styles" }) }) }) }) }) })),
-};
-export const WithVariants = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
-                    body: { fontSize: "16px", lineHeight: "24px" },
-                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Heading variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "body", children: "Body variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "caption", children: "Caption variant" }) })] }) }) }) })),
-};
-export const ResponsiveVariants = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                        lineHeight: { default: "40px", mobile: "30px" },
-                        fontWeight: 700,
-                    },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) }) }) }) })),
-};
-export const BottomSpacing = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                bottomSpacing: "20px",
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { children: "Text without bottom spacing" }) })] }) }) }) })),
-};
-export const DefaultVariant = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                defaultVariant: "body",
-                variants: {
-                    body: { fontSize: "14px", lineHeight: "22px" },
-                    heading: { fontSize: "28px", fontWeight: 700 },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { children: "Uses the default \"body\" variant automatically" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Explicit heading variant" }) })] }) }) }) })),
-};
-export const ElementPropAsDiv = {
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "div", children: "Rendered as a div with theme styles" }) }) }) })),
-};
-export const ElementPropAsAnchor = {
-    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "a", href: "https://example.com", style: { textDecoration: "underline" }, children: "Rendered as an anchor with href" }) }) }) })),
-};

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

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

package/lib/components/text/__stories__/MjmlText.stories.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn } from "@faire/mjml-react";
-import { createTheme } from "../../../theme/createTheme.js";
-import { MjmlSection } from "../../section/MjmlSection.js";
-import { MjmlText } from "../MjmlText.js";
-const config = {
-    title: "Components/MjmlText",
-    component: MjmlText,
-    tags: ["autodocs"],
-};
-export default config;
-export const Default = {
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Default text with base theme styles" }) }) })),
-};
-export const WithVariants = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
-                    body: { fontSize: "16px", lineHeight: "24px" },
-                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", children: "Heading variant" }), _jsx(MjmlText, { variant: "body", children: "Body variant" }), _jsx(MjmlText, { variant: "caption", children: "Caption variant" })] }) })),
-};
-export const ResponsiveVariants = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                variants: {
-                    heading: {
-                        fontSize: { default: "32px", mobile: "24px" },
-                        lineHeight: { default: "40px", mobile: "30px" },
-                        fontWeight: 700,
-                    },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) })),
-};
-export const BottomSpacing = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                bottomSpacing: "20px",
-                variants: {
-                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }), _jsx(MjmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }), _jsx(MjmlText, { children: "Text without bottom spacing" })] }) })),
-};
-export const DefaultVariant = {
-    parameters: {
-        theme: createTheme({
-            text: {
-                defaultVariant: "body",
-                variants: {
-                    body: { fontSize: "14px", lineHeight: "22px" },
-                    heading: { fontSize: "28px", fontWeight: 700 },
-                },
-            },
-        }),
-    },
-    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { children: "Uses the default \"body\" variant automatically" }), _jsx(MjmlText, { variant: "heading", children: "Explicit heading variant" })] }) })),
-};

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

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