@comet/mail-react 9.4.0-canary-20260810072652 → 9.4.0-canary-20260810073530

package/lib/blocks/richText/RichTextList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { generateResponsiveTextCss } from "../../components/text/generateResponsiveTextCss.js";
 import { useOutlookTextStyle } from "../../components/text/OutlookTextStyleContext.js";
-import { generateResponsiveTextCss } from "../../components/text/textStyles.js";
 import { generateResponsiveTokenCss } from "../../styles/generateResponsiveVariantCss.js";
 import { registerStyles } from "../../styles/registerStyles.js";
 import { defaultTheme } from "../../theme/defaultTheme.js";

package/lib/components/section/MjmlSection.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { MjmlGroup, MjmlSection as BaseMjmlSection } from "@faire/mjml-react";
 import clsx from "clsx";
+import { generateResponsiveTokenCss } from "../../styles/generateResponsiveVariantCss.js";
 import { registerStyles } from "../../styles/registerStyles.js";
-import { getDefaultFromResponsiveValue, getResponsiveOverrides } from "../../theme/responsiveValue.js";
+import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
-import { css } from "../../utils/css.js";
 import { useIsInsideMjmlWrapper } from "../wrapper/InsideMjmlWrapperContext.js";
 /** A section wrapper for email layouts. Must be a direct child of `MjmlBody` or `MjmlWrapper`. */
 export function MjmlSection({ children, indent, disableResponsiveBehavior, slotProps, className, ...restProps }) {
@@ -24,25 +24,11 @@ function getIndentProps(theme) {
         paddingRight: getDefaultFromResponsiveValue(theme.sizes.contentIndentation),
     };
 }
-registerStyles((theme) => {
-    const overrides = getResponsiveOverrides(theme.sizes.contentIndentation);
-    if (overrides.length === 0) {
-        return css ``;
-    }
-    return overrides
-        .map((override) => {
-        const breakpoint = theme.breakpoints[override.breakpointKey];
-        if (!breakpoint) {
-            return "";
-        }
-        return css `
-                ${breakpoint.belowMediaQuery} {
-                    .mjmlSection--indented > table > tbody > tr > td {
-                        padding-left: ${override.value}px !important;
-                        padding-right: ${override.value}px !important;
-                    }
-                }
-            `;
-    })
-        .join("\n");
-});
+registerStyles((theme) => generateResponsiveTokenCss({
+    breakpoints: theme.breakpoints,
+    selector: ".mjmlSection--indented > table > tbody > tr > td",
+    tokens: [
+        { value: theme.sizes.contentIndentation, cssProperty: "padding-left", unit: "px" },
+        { value: theme.sizes.contentIndentation, cssProperty: "padding-right", unit: "px" },
+    ],
+}));

package/lib/components/text/HtmlText.js

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { registerStyles } from "../../styles/registerStyles.js";
 import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { generateResponsiveTextCss } from "./generateResponsiveTextCss.js";
 import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
-import { generateResponsiveTextCss } from "./textStyles.js";
 export function HtmlText({ element: Element = "td", variant: variantProp, bottomSpacing, className, style, children, ...restProps }) {
     const theme = useTheme();
     const { defaultVariant, variants, ...baseStyles } = theme.text;

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

@@ -37,4 +37,4 @@ export type MjmlTextProps = IMjmlTextProps & {
  * The `variant` and `bottomSpacing` props require a `ThemeProvider` (or `MjmlMailRoot`).
  */
 export declare function MjmlText({ variant: variantProp, bottomSpacing, className, children, ...restProps }: MjmlTextProps): ReactNode;
-export declare function generateTextStyles(theme: Theme): string;
+export declare function generateMjmlTextStyles(theme: Theme): string;

package/lib/components/text/MjmlText.js

@@ -4,8 +4,8 @@ import clsx from "clsx";
 import { registerStyles } from "../../styles/registerStyles.js";
 import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { generateResponsiveTextCss } from "./generateResponsiveTextCss.js";
 import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
-import { generateResponsiveTextCss } from "./textStyles.js";
 /**
  * Text component that can be styled using the theme, optionally using a variant.
  *
@@ -56,10 +56,10 @@ function getThemedProps(theme, variantProp, bottomSpacing, explicitProps) {
         },
     };
 }
-export function generateTextStyles(theme) {
+export function generateMjmlTextStyles(theme) {
     return generateResponsiveTextCss(theme, {
         styleSelector: (variantName) => `.mjmlText--${variantName} > div`,
         spacingSelector: (variantName) => `.mjmlText--bottomSpacing.mjmlText--${variantName}`,
     });
 }
-registerStyles(generateTextStyles);
+registerStyles(generateMjmlTextStyles);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.4.0-canary-20260810072652",
+  "version": "9.4.0-canary-20260810073530",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -48,8 +48,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.1.8",
-    "@comet/cli": "9.4.0-canary-20260810072652",
-    "@comet/eslint-config": "9.4.0-canary-20260810072652"
+    "@comet/cli": "9.4.0-canary-20260810073530",
+    "@comet/eslint-config": "9.4.0-canary-20260810073530"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",