react-email 6.6.9 → 6.8.0

package/dist/components/section/index.d.cts

@@ -0,0 +1 @@
+import { Section, SectionProps } from "./section.cjs";

package/dist/components/section/index.d.mts

@@ -0,0 +1 @@
+import { Section, SectionProps } from "./section.mjs";

package/dist/components/section/section.cjs

@@ -0,0 +1,36 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/section/section.tsx
+const Section = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		align: "center",
+		width: "100%",
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		role: "presentation",
+		...props,
+		ref,
+		style: tableStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			style: tdStyle,
+			children
+		}) }) })
+	});
+});
+Section.displayName = "Section";
+require_element_marker.markAsElement(Section);
+//#endregion
+exports.Section = Section;

package/dist/components/section/section.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/section/section.d.ts
+type SectionProps = Readonly<React$1.ComponentPropsWithoutRef<'table'>>;
+declare const Section: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & React$1.RefAttributes<HTMLTableElement>>;
+//#endregion
+export { Section, SectionProps };

package/dist/components/section/section.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/section/section.d.ts
+type SectionProps = Readonly<React$1.ComponentPropsWithoutRef<'table'>>;
+declare const Section: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & React$1.RefAttributes<HTMLTableElement>>;
+//#endregion
+export { Section, SectionProps };

package/dist/components/section/section.mjs

@@ -0,0 +1,34 @@
+import { markAsElement } from "../element-marker.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/section/section.tsx
+const Section = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
+	return /* @__PURE__ */ jsx("table", {
+		align: "center",
+		width: "100%",
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		role: "presentation",
+		...props,
+		ref,
+		style: tableStyle,
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			style: tdStyle,
+			children
+		}) }) })
+	});
+});
+Section.displayName = "Section";
+markAsElement(Section);
+//#endregion
+export { Section };

package/dist/components/tailwind/hooks/use-suspended-promise.cjs

@@ -0,0 +1,15 @@
+//#region src/components/tailwind/hooks/use-suspended-promise.ts
+const promiseStates = /* @__PURE__ */ new Map();
+function useSuspensedPromise(promiseFn, key) {
+	const previousState = promiseStates.get(key);
+	if (previousState) {
+		if ("error" in previousState) throw previousState.error;
+		if ("result" in previousState) return previousState.result;
+		throw previousState.promise;
+	}
+	const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
+	promiseStates.set(key, state);
+	throw state.promise;
+}
+//#endregion
+exports.useSuspensedPromise = useSuspensedPromise;

package/dist/components/tailwind/hooks/use-suspended-promise.mjs

@@ -0,0 +1,15 @@
+//#region src/components/tailwind/hooks/use-suspended-promise.ts
+const promiseStates = /* @__PURE__ */ new Map();
+function useSuspensedPromise(promiseFn, key) {
+	const previousState = promiseStates.get(key);
+	if (previousState) {
+		if ("error" in previousState) throw previousState.error;
+		if ("result" in previousState) return previousState.result;
+		throw previousState.promise;
+	}
+	const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
+	promiseStates.set(key, state);
+	throw state.promise;
+}
+//#endregion
+export { useSuspensedPromise };

package/dist/components/tailwind/index.d.cts

@@ -0,0 +1,4 @@
+import { inlineStyles } from "./inline-styles.cjs";
+import { sanitizeStyleSheet } from "./sanitize-stylesheet.cjs";
+import { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset } from "./tailwind.cjs";
+import { TailwindSetup, setupTailwind } from "./utils/tailwindcss/setup-tailwind.cjs";

package/dist/components/tailwind/index.d.mts

@@ -0,0 +1,4 @@
+import { inlineStyles } from "./inline-styles.mjs";
+import { sanitizeStyleSheet } from "./sanitize-stylesheet.mjs";
+import { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset } from "./tailwind.mjs";
+import { TailwindSetup, setupTailwind } from "./utils/tailwindcss/setup-tailwind.mjs";

package/dist/components/tailwind/inline-styles.cjs

@@ -0,0 +1,11 @@
+const require_extract_rules_per_class = require("./utils/css/extract-rules-per-class.cjs");
+const require_get_custom_properties = require("./utils/css/get-custom-properties.cjs");
+const require_make_inline_styles_for = require("./utils/css/make-inline-styles-for.cjs");
+//#region src/components/tailwind/inline-styles.ts
+function inlineStyles(styleSheet, classes) {
+	const { inlinable: inlinableRules } = require_extract_rules_per_class.extractRulesPerClass(styleSheet, classes);
+	const customProperties = require_get_custom_properties.getCustomProperties(styleSheet);
+	return require_make_inline_styles_for.makeInlineStylesFor(Array.from(inlinableRules.values()).flat(), customProperties);
+}
+//#endregion
+exports.inlineStyles = inlineStyles;

package/dist/components/tailwind/inline-styles.d.cts

@@ -0,0 +1,6 @@
+import { StyleSheet } from "css-tree";
+
+//#region src/components/tailwind/inline-styles.d.ts
+declare function inlineStyles(styleSheet: StyleSheet, classes: string[]): Record<string, string>;
+//#endregion
+export { inlineStyles };

package/dist/components/tailwind/inline-styles.d.mts

@@ -0,0 +1,6 @@
+import { StyleSheet } from "css-tree";
+
+//#region src/components/tailwind/inline-styles.d.ts
+declare function inlineStyles(styleSheet: StyleSheet, classes: string[]): Record<string, string>;
+//#endregion
+export { inlineStyles };

package/dist/components/tailwind/inline-styles.mjs

@@ -0,0 +1,11 @@
+import { extractRulesPerClass } from "./utils/css/extract-rules-per-class.mjs";
+import { getCustomProperties } from "./utils/css/get-custom-properties.mjs";
+import { makeInlineStylesFor } from "./utils/css/make-inline-styles-for.mjs";
+//#region src/components/tailwind/inline-styles.ts
+function inlineStyles(styleSheet, classes) {
+	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
+	const customProperties = getCustomProperties(styleSheet);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()).flat(), customProperties);
+}
+//#endregion
+export { inlineStyles };

package/dist/components/tailwind/sanitize-stylesheet.cjs

@@ -0,0 +1,11 @@
+const require_resolve_all_css_variables = require("./utils/css/resolve-all-css-variables.cjs");
+const require_resolve_calc_expressions = require("./utils/css/resolve-calc-expressions.cjs");
+const require_sanitize_declarations = require("./utils/css/sanitize-declarations.cjs");
+//#region src/components/tailwind/sanitize-stylesheet.ts
+function sanitizeStyleSheet(styleSheet) {
+	require_resolve_all_css_variables.resolveAllCssVariables(styleSheet);
+	require_resolve_calc_expressions.resolveCalcExpressions(styleSheet);
+	require_sanitize_declarations.sanitizeDeclarations(styleSheet);
+}
+//#endregion
+exports.sanitizeStyleSheet = sanitizeStyleSheet;

package/dist/components/tailwind/sanitize-stylesheet.d.cts

@@ -0,0 +1,6 @@
+import { StyleSheet } from "css-tree";
+
+//#region src/components/tailwind/sanitize-stylesheet.d.ts
+declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;
+//#endregion
+export { sanitizeStyleSheet };

package/dist/components/tailwind/sanitize-stylesheet.d.mts

@@ -0,0 +1,6 @@
+import { StyleSheet } from "css-tree";
+
+//#region src/components/tailwind/sanitize-stylesheet.d.ts
+declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;
+//#endregion
+export { sanitizeStyleSheet };

package/dist/components/tailwind/sanitize-stylesheet.mjs

@@ -0,0 +1,11 @@
+import { resolveAllCssVariables } from "./utils/css/resolve-all-css-variables.mjs";
+import { resolveCalcExpressions } from "./utils/css/resolve-calc-expressions.mjs";
+import { sanitizeDeclarations } from "./utils/css/sanitize-declarations.mjs";
+//#region src/components/tailwind/sanitize-stylesheet.ts
+function sanitizeStyleSheet(styleSheet) {
+	resolveAllCssVariables(styleSheet);
+	resolveCalcExpressions(styleSheet);
+	sanitizeDeclarations(styleSheet);
+}
+//#endregion
+export { sanitizeStyleSheet };

package/dist/components/tailwind/tailwind.cjs

@@ -0,0 +1,120 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_extract_rules_per_class = require("./utils/css/extract-rules-per-class.cjs");
+const require_get_custom_properties = require("./utils/css/get-custom-properties.cjs");
+const require_sanitize_stylesheet = require("./sanitize-stylesheet.cjs");
+const require_use_suspended_promise = require("./hooks/use-suspended-promise.cjs");
+const require_downlevel_for_email_clients = require("./utils/css/downlevel-for-email-clients.cjs");
+const require_sanitize_non_inlinable_rules = require("./utils/css/sanitize-non-inlinable-rules.cjs");
+const require_map_react_tree = require("./utils/react/map-react-tree.cjs");
+const require_clone_element_with_inlined_styles = require("./utils/tailwindcss/clone-element-with-inlined-styles.cjs");
+const require_setup_tailwind = require("./utils/tailwindcss/setup-tailwind.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let css_tree = require("css-tree");
+//#region src/components/tailwind/tailwind.tsx
+const pixelBasedPreset = { theme: { extend: {
+	fontSize: {
+		xs: ["12px", { lineHeight: "16px" }],
+		sm: ["14px", { lineHeight: "20px" }],
+		base: ["16px", { lineHeight: "24px" }],
+		lg: ["18px", { lineHeight: "28px" }],
+		xl: ["20px", { lineHeight: "28px" }],
+		"2xl": ["24px", { lineHeight: "32px" }],
+		"3xl": ["30px", { lineHeight: "36px" }],
+		"4xl": ["36px", { lineHeight: "36px" }],
+		"5xl": ["48px", { lineHeight: "1" }],
+		"6xl": ["60px", { lineHeight: "1" }],
+		"7xl": ["72px", { lineHeight: "1" }],
+		"8xl": ["96px", { lineHeight: "1" }],
+		"9xl": ["144px", { lineHeight: "1" }]
+	},
+	spacing: {
+		px: "1px",
+		0: "0",
+		.5: "2px",
+		1: "4px",
+		1.5: "6px",
+		2: "8px",
+		2.5: "10px",
+		3: "12px",
+		3.5: "14px",
+		4: "16px",
+		5: "20px",
+		6: "24px",
+		7: "28px",
+		8: "32px",
+		9: "36px",
+		10: "40px",
+		11: "44px",
+		12: "48px",
+		14: "56px",
+		16: "64px",
+		20: "80px",
+		24: "96px",
+		28: "112px",
+		32: "128px",
+		36: "144px",
+		40: "160px",
+		44: "176px",
+		48: "192px",
+		52: "208px",
+		56: "224px",
+		60: "240px",
+		64: "256px",
+		72: "288px",
+		80: "320px",
+		96: "384px"
+	}
+} } };
+function Tailwind({ children, config, theme, utility }) {
+	const twConfigData = {
+		config,
+		cssConfigs: {
+			theme,
+			utility
+		}
+	};
+	const tailwindSetup = require_use_suspended_promise.useSuspensedPromise(() => require_setup_tailwind.setupTailwind(twConfigData), JSON.stringify(twConfigData, (_key, value) => typeof value === "function" ? value.toString() : value));
+	let classesUsed = [];
+	let mappedChildren = require_map_react_tree.mapReactTree(children, (node) => {
+		if (react.isValidElement(node)) {
+			if (node.props.className) {
+				const classes = node.props.className?.split(/\s+/);
+				classesUsed = [...classesUsed, ...classes];
+				tailwindSetup.addUtilities(classes);
+			}
+		}
+		return node;
+	});
+	const styleSheet = tailwindSetup.getStyleSheet();
+	require_sanitize_stylesheet.sanitizeStyleSheet(styleSheet);
+	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = require_extract_rules_per_class.extractRulesPerClass(styleSheet, classesUsed);
+	const customProperties = require_get_custom_properties.getCustomProperties(styleSheet);
+	const nonInlineStyles = {
+		type: "StyleSheet",
+		children: new css_tree.List().fromArray(Array.from(nonInlinableRules.values()).flat())
+	};
+	require_sanitize_non_inlinable_rules.sanitizeNonInlinableRules(nonInlineStyles);
+	require_downlevel_for_email_clients.downlevelForEmailClients(nonInlineStyles);
+	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+	let appliedNonInlineStyles = false;
+	mappedChildren = require_map_react_tree.mapReactTree(mappedChildren, (node) => {
+		if (react.isValidElement(node)) {
+			const elementWithInlinedStyles = require_clone_element_with_inlined_styles.cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules, customProperties);
+			if (elementWithInlinedStyles.type === "head") {
+				appliedNonInlineStyles = true;
+				const styleElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: (0, css_tree.generate)(nonInlineStyles) } });
+				return react.cloneElement(elementWithInlinedStyles, elementWithInlinedStyles.props, styleElement, elementWithInlinedStyles.props.children);
+			}
+			return elementWithInlinedStyles;
+		}
+		return node;
+	});
+	if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
+Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
+	return mappedChildren;
+}
+//#endregion
+exports.Tailwind = Tailwind;
+exports.pixelBasedPreset = pixelBasedPreset;

package/dist/components/tailwind/tailwind.d.cts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { Config } from "tailwindcss";
+
+//#region src/components/tailwind/tailwind.d.ts
+type TailwindConfig = Omit<Config, 'content'>;
+interface EmailElementProps {
+  children?: React$1.ReactNode;
+  className?: string;
+  style?: React$1.CSSProperties;
+}
+declare const pixelBasedPreset: TailwindConfig;
+interface TailwindProps {
+  children: React$1.ReactNode;
+  config?: TailwindConfig;
+  theme?: string;
+  utility?: string;
+}
+declare function Tailwind({
+  children,
+  config,
+  theme,
+  utility
+}: TailwindProps): React$1.ReactNode;
+//#endregion
+export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset };

package/dist/components/tailwind/tailwind.d.mts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { Config } from "tailwindcss";
+
+//#region src/components/tailwind/tailwind.d.ts
+type TailwindConfig = Omit<Config, 'content'>;
+interface EmailElementProps {
+  children?: React$1.ReactNode;
+  className?: string;
+  style?: React$1.CSSProperties;
+}
+declare const pixelBasedPreset: TailwindConfig;
+interface TailwindProps {
+  children: React$1.ReactNode;
+  config?: TailwindConfig;
+  theme?: string;
+  utility?: string;
+}
+declare function Tailwind({
+  children,
+  config,
+  theme,
+  utility
+}: TailwindProps): React$1.ReactNode;
+//#endregion
+export { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedPreset };

package/dist/components/tailwind/tailwind.mjs

@@ -0,0 +1,117 @@
+import { extractRulesPerClass } from "./utils/css/extract-rules-per-class.mjs";
+import { getCustomProperties } from "./utils/css/get-custom-properties.mjs";
+import { sanitizeStyleSheet } from "./sanitize-stylesheet.mjs";
+import { useSuspensedPromise } from "./hooks/use-suspended-promise.mjs";
+import { downlevelForEmailClients } from "./utils/css/downlevel-for-email-clients.mjs";
+import { sanitizeNonInlinableRules } from "./utils/css/sanitize-non-inlinable-rules.mjs";
+import { mapReactTree } from "./utils/react/map-react-tree.mjs";
+import { cloneElementWithInlinedStyles } from "./utils/tailwindcss/clone-element-with-inlined-styles.mjs";
+import { setupTailwind } from "./utils/tailwindcss/setup-tailwind.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { List, generate } from "css-tree/dist/csstree.esm";
+//#region src/components/tailwind/tailwind.tsx
+const pixelBasedPreset = { theme: { extend: {
+	fontSize: {
+		xs: ["12px", { lineHeight: "16px" }],
+		sm: ["14px", { lineHeight: "20px" }],
+		base: ["16px", { lineHeight: "24px" }],
+		lg: ["18px", { lineHeight: "28px" }],
+		xl: ["20px", { lineHeight: "28px" }],
+		"2xl": ["24px", { lineHeight: "32px" }],
+		"3xl": ["30px", { lineHeight: "36px" }],
+		"4xl": ["36px", { lineHeight: "36px" }],
+		"5xl": ["48px", { lineHeight: "1" }],
+		"6xl": ["60px", { lineHeight: "1" }],
+		"7xl": ["72px", { lineHeight: "1" }],
+		"8xl": ["96px", { lineHeight: "1" }],
+		"9xl": ["144px", { lineHeight: "1" }]
+	},
+	spacing: {
+		px: "1px",
+		0: "0",
+		.5: "2px",
+		1: "4px",
+		1.5: "6px",
+		2: "8px",
+		2.5: "10px",
+		3: "12px",
+		3.5: "14px",
+		4: "16px",
+		5: "20px",
+		6: "24px",
+		7: "28px",
+		8: "32px",
+		9: "36px",
+		10: "40px",
+		11: "44px",
+		12: "48px",
+		14: "56px",
+		16: "64px",
+		20: "80px",
+		24: "96px",
+		28: "112px",
+		32: "128px",
+		36: "144px",
+		40: "160px",
+		44: "176px",
+		48: "192px",
+		52: "208px",
+		56: "224px",
+		60: "240px",
+		64: "256px",
+		72: "288px",
+		80: "320px",
+		96: "384px"
+	}
+} } };
+function Tailwind({ children, config, theme, utility }) {
+	const twConfigData = {
+		config,
+		cssConfigs: {
+			theme,
+			utility
+		}
+	};
+	const tailwindSetup = useSuspensedPromise(() => setupTailwind(twConfigData), JSON.stringify(twConfigData, (_key, value) => typeof value === "function" ? value.toString() : value));
+	let classesUsed = [];
+	let mappedChildren = mapReactTree(children, (node) => {
+		if (React$1.isValidElement(node)) {
+			if (node.props.className) {
+				const classes = node.props.className?.split(/\s+/);
+				classesUsed = [...classesUsed, ...classes];
+				tailwindSetup.addUtilities(classes);
+			}
+		}
+		return node;
+	});
+	const styleSheet = tailwindSetup.getStyleSheet();
+	sanitizeStyleSheet(styleSheet);
+	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
+	const customProperties = getCustomProperties(styleSheet);
+	const nonInlineStyles = {
+		type: "StyleSheet",
+		children: new List().fromArray(Array.from(nonInlinableRules.values()).flat())
+	};
+	sanitizeNonInlinableRules(nonInlineStyles);
+	downlevelForEmailClients(nonInlineStyles);
+	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+	let appliedNonInlineStyles = false;
+	mappedChildren = mapReactTree(mappedChildren, (node) => {
+		if (React$1.isValidElement(node)) {
+			const elementWithInlinedStyles = cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules, customProperties);
+			if (elementWithInlinedStyles.type === "head") {
+				appliedNonInlineStyles = true;
+				const styleElement = /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: generate(nonInlineStyles) } });
+				return React$1.cloneElement(elementWithInlinedStyles, elementWithInlinedStyles.props, styleElement, elementWithInlinedStyles.props.children);
+			}
+			return elementWithInlinedStyles;
+		}
+		return node;
+	});
+	if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
+Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
+	return mappedChildren;
+}
+//#endregion
+export { Tailwind, pixelBasedPreset };

package/dist/components/tailwind/utils/compatibility/get-react-property.cjs

@@ -0,0 +1,10 @@
+const require_from_dash_case_to_camel_case = require("../text/from-dash-case-to-camel-case.cjs");
+//#region src/components/tailwind/utils/compatibility/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return require_from_dash_case_to_camel_case.fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return require_from_dash_case_to_camel_case.fromDashCaseToCamelCase(modifiedProp);
+}
+//#endregion
+exports.getReactProperty = getReactProperty;

package/dist/components/tailwind/utils/compatibility/get-react-property.mjs

@@ -0,0 +1,10 @@
+import { fromDashCaseToCamelCase } from "../text/from-dash-case-to-camel-case.mjs";
+//#region src/components/tailwind/utils/compatibility/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return fromDashCaseToCamelCase(modifiedProp);
+}
+//#endregion
+export { getReactProperty };

package/dist/components/tailwind/utils/compatibility/sanitize-class-name.cjs

@@ -0,0 +1,26 @@
+//#region src/components/tailwind/utils/compatibility/sanitize-class-name.ts
+const digitToNameMap = {
+	"0": "zero",
+	"1": "one",
+	"2": "two",
+	"3": "three",
+	"4": "four",
+	"5": "five",
+	"6": "six",
+	"7": "seven",
+	"8": "eight",
+	"9": "nine"
+};
+/**
+* Replaces special characters to avoid problems on email clients.
+*
+* @param className - This should not come with any escaped charcters, it should come the same
+* as is on the `className` attribute on React elements.
+*/
+function sanitizeClassName(className) {
+	return className.replaceAll("+", "plus").replaceAll("[", "").replaceAll("%", "pc").replaceAll("]", "").replaceAll("(", "").replaceAll(")", "").replaceAll("!", "imprtnt").replaceAll(">", "gt").replaceAll("<", "lt").replaceAll("=", "eq").replace(/^[0-9]/, (digit) => {
+		return digitToNameMap[digit];
+	}).replace(/[^a-zA-Z0-9\-_]/g, "_");
+}
+//#endregion
+exports.sanitizeClassName = sanitizeClassName;

package/dist/components/tailwind/utils/compatibility/sanitize-class-name.mjs

@@ -0,0 +1,26 @@
+//#region src/components/tailwind/utils/compatibility/sanitize-class-name.ts
+const digitToNameMap = {
+	"0": "zero",
+	"1": "one",
+	"2": "two",
+	"3": "three",
+	"4": "four",
+	"5": "five",
+	"6": "six",
+	"7": "seven",
+	"8": "eight",
+	"9": "nine"
+};
+/**
+* Replaces special characters to avoid problems on email clients.
+*
+* @param className - This should not come with any escaped charcters, it should come the same
+* as is on the `className` attribute on React elements.
+*/
+function sanitizeClassName(className) {
+	return className.replaceAll("+", "plus").replaceAll("[", "").replaceAll("%", "pc").replaceAll("]", "").replaceAll("(", "").replaceAll(")", "").replaceAll("!", "imprtnt").replaceAll(">", "gt").replaceAll("<", "lt").replaceAll("=", "eq").replace(/^[0-9]/, (digit) => {
+		return digitToNameMap[digit];
+	}).replace(/[^a-zA-Z0-9\-_]/g, "_");
+}
+//#endregion
+export { sanitizeClassName };