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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/components/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" })] }) })),
-};