@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/email/email.js

@@ -1,6 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Body, Button, Column, Container, Head, Heading, Hr, Html, Link, Preview, Row, Section, Tailwind, Text, pixelBasedPreset } from "react-email";
 //#region src/email/email.tsx
+const physicalSides = {
+	ltr: {
+		start: "left",
+		end: "right"
+	},
+	rtl: {
+		start: "right",
+		end: "left"
+	}
+};
+function emailSides(dir = "ltr") {
+	return physicalSides[dir];
+}
 function surfaceColors(theme, variant) {
 	if (variant === "contained") return theme.colors;
 	return {
@@ -73,8 +86,9 @@ const alignClasses = {
 	center: "text-center",
 	right: "text-right"
 };
-function alignClass(align) {
-	return align ? alignClasses[align] : "";
+function emailAlignClass(align, dir = "ltr") {
+	if (!align) return "";
+	return alignClasses[align === "center" ? "center" : emailSides(dir)[align]];
 }
 const headingSizeClasses = {
 	display: "text-display",
@@ -89,21 +103,21 @@ const headingSizeForTag = {
 	h3: "heading-3",
 	h4: "heading-4"
 };
-function EmailHeading({ as = "h1", size, align, className = "", ...props }) {
+function EmailHeading({ as = "h1", size, align, dir, className = "", ...props }) {
 	const sizeClass = headingSizeClasses[size ?? headingSizeForTag[as]];
 	return /* @__PURE__ */ jsx(Heading, {
 		...props,
 		as,
-		className: `mb-4 mt-0 font-display text-card-foreground ${sizeClass} ${alignClass(align)} ${className}`
+		className: `mb-4 mt-0 font-display text-card-foreground ${sizeClass} ${emailAlignClass(align, dir)} ${className}`
 	});
 }
-function EmailSection({ align, className = "", ...props }) {
+function EmailSection({ align, dir, className = "", ...props }) {
 	return /* @__PURE__ */ jsx(Section, {
 		...props,
-		className: `${alignClass(align)} ${className}`
+		className: `${emailAlignClass(align, dir)} ${className}`
 	});
 }
-function EmailText({ tone = "default", align, className = "", style, ...props }) {
+function EmailText({ tone = "default", align, dir, className = "", style, ...props }) {
 	const textColor = tone === "muted" ? "text-muted-foreground" : "text-card-foreground";
 	return /* @__PURE__ */ jsx(Text, {
 		...props,
@@ -111,7 +125,7 @@ function EmailText({ tone = "default", align, className = "", style, ...props })
 			overflowWrap: "break-word",
 			...style
 		},
-		className: `mb-4 mt-0 font-body text-body ${textColor} ${alignClass(align)} ${className}`
+		className: `mb-4 mt-0 font-body text-body ${textColor} ${emailAlignClass(align, dir)} ${className}`
 	});
 }
 function EmailButton({ width = "auto", className = "", ...props }) {
@@ -127,11 +141,11 @@ function EmailLink({ className = "", ...props }) {
 		className: `font-body text-primary-text underline ${className}`
 	});
 }
-function EmailCaption({ className = "", ...props }) {
+function EmailCaption({ eyebrow = false, className = "", ...props }) {
 	return /* @__PURE__ */ jsx(EmailText, {
 		tone: "muted",
 		...props,
-		className: `text-caption ${className}`
+		className: `text-caption ${eyebrow ? "uppercase tracking-[0.08em]" : ""} ${className}`
 	});
 }
 function EmailMutedLink({ className = "", ...props }) {
@@ -161,33 +175,43 @@ function EmailOneTimeCode({ children, className = "" }) {
 		})
 	});
 }
-function EmailBulletList({ items, className = "" }) {
+const listIndentClasses = {
+	left: "pl-5",
+	right: "pr-5"
+};
+function EmailBulletList({ items, dir, className = "" }) {
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
-		className: `mb-4 mt-0 list-disc pl-5 font-body text-body text-card-foreground ${className}`,
+		className: `mb-4 mt-0 list-disc ${listIndentClasses[emailSides(dir).start]} font-body text-body text-card-foreground ${className}`,
 		children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
 			className: "mb-1 font-body text-body text-card-foreground",
 			children: item
 		}, index))
 	});
 }
-function EmailColumns({ children, widths, gap = 20, verticalAlign = "top", className = "" }) {
+function EmailColumns({ children, widths, gap = 20, verticalAlign = "top", dir, className = "" }) {
+	const sides = emailSides(dir);
 	if (children.length === 0) return null;
 	const evenWidth = `${(100 / children.length).toFixed(4)}%`;
 	return /* @__PURE__ */ jsx(Row, {
 		className: `mb-6 table-fixed ${className}`,
-		children: children.map((child, index) => /* @__PURE__ */ jsx(Column, {
-			width: widths?.[index] ?? evenWidth,
-			className: `max-[480px]:block max-[480px]:w-full max-[480px]:pl-0 ${index === 0 ? "" : `max-[480px]:pt-[${gap}px]`}`,
-			style: {
-				verticalAlign,
-				paddingLeft: index === 0 ? 0 : gap
-			},
-			children: child
-		}, index))
+		children: children.map((child, index) => {
+			const inset = index === 0 ? 0 : gap;
+			return /* @__PURE__ */ jsx(Column, {
+				width: widths?.[index] ?? evenWidth,
+				className: `max-[480px]:block max-[480px]:w-full max-[480px]:px-0 ${index === 0 ? "" : `max-[480px]:pt-[${gap}px]`}`,
+				style: {
+					verticalAlign,
+					...sides.start === "left" ? { paddingLeft: inset } : { paddingRight: inset }
+				},
+				children: child
+			}, index);
+		})
 	});
 }
-function EmailDetailRow({ label, value, emphasis = false }) {
+function EmailDetailRow({ label, value, emphasis = false, dir }) {
+	const sides = emailSides(dir);
+	const valueWeight = emphasis ? "font-semibold" : "";
 	return /* @__PURE__ */ jsxs(Row, {
 		className: "table-fixed",
 		children: [/* @__PURE__ */ jsx(Column, {
@@ -197,14 +221,14 @@ function EmailDetailRow({ label, value, emphasis = false }) {
 				children: label
 			})
 		}), /* @__PURE__ */ jsx(Column, {
-			align: "right",
+			align: sides.end,
 			className: "align-top",
 			children: /* @__PURE__ */ jsx(EmailText, {
-				className: `mb-2 ${emphasis ? "font-semibold" : ""}`,
+				className: `mb-2 ${valueWeight}`,
 				children: value
 			})
 		})]
 	});
 }
 //#endregion
-export { EmailBulletList, EmailButton, EmailCaption, EmailColumns, EmailDetailRow, EmailDivider, EmailHeading, EmailLayout, EmailLink, EmailMutedLink, EmailOneTimeCode, EmailPanel, EmailSection, EmailText, surfaceColors };
+export { EmailBulletList, EmailButton, EmailCaption, EmailColumns, EmailDetailRow, EmailDivider, EmailHeading, EmailLayout, EmailLink, EmailMutedLink, EmailOneTimeCode, EmailPanel, EmailSection, EmailText, emailAlignClass, emailSides, surfaceColors };

package/dist/email/templates.d.ts

@@ -1,5 +1,5 @@
 import { EmailTheme } from "./theme.js";
-import { EmailVariant } from "./email.js";
+import { EmailDirection, EmailVariant } from "./email.js";
 import { EmailBrand, EmailFooterContent } from "./email-brand.js";
 import { ReactNode } from "react";
 import { PrismLanguage } from "react-email";
@@ -10,6 +10,7 @@ type EmailMessageProps = {
   footer: EmailFooterContent;
   variant?: EmailVariant;
   head?: ReactNode;
+  dir?: EmailDirection;
 };
 type EmailBrandProps = EmailMessageProps & {
   browserUrl?: string;
@@ -18,12 +19,12 @@ export type EmailHighlight = {
   title: string;
   description: string;
 };
-export declare function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, inviter, workspace, inviteUrl }: EmailBrandProps & {
+export declare function InvitationEmail({ theme, variant, head, dir, brand, browserUrl, footer, inviter, workspace, inviteUrl }: EmailBrandProps & {
   inviter: string;
   workspace: string;
   inviteUrl: string;
 }): import("react").JSX.Element;
-export declare function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights, actionUrl }: EmailBrandProps & {
+export declare function ProductEmail({ theme, variant, head, dir, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights, actionUrl }: EmailBrandProps & {
   title: string;
   description: string;
   imageUrl: string;
@@ -31,7 +32,7 @@ export declare function ProductEmail({ theme, variant, head, brand, browserUrl,
   highlights?: EmailHighlight[];
   actionUrl: string;
 }): import("react").JSX.Element;
-export declare function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }: EmailBrandProps & {
+export declare function EditorialEmail({ theme, variant, head, dir, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }: EmailBrandProps & {
   title: string;
   description: string;
   imageUrl: string;
@@ -45,10 +46,10 @@ export type EmailArticle = {
   imageUrl: string;
   imageAlt: string;
 };
-export declare function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, articles }: EmailBrandProps & {
+export declare function NewsletterEmail({ theme, variant, head, dir, brand, browserUrl, footer, articles }: EmailBrandProps & {
   articles: EmailArticle[];
 }): import("react").JSX.Element;
-export declare function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period, metrics, details, dashboardUrl }: EmailBrandProps & {
+export declare function SummaryEmail({ theme, variant, head, dir, brand, browserUrl, footer, period, metrics, details, dashboardUrl }: EmailBrandProps & {
   period: string;
   metrics: {
     label: string;
@@ -60,7 +61,7 @@ export declare function SummaryEmail({ theme, variant, head, brand, browserUrl,
   }[];
   dashboardUrl: string;
 }): import("react").JSX.Element;
-export declare function VerificationEmail({ theme, variant, head, brand, footer, code, expiresInMinutes, supportUrl }: EmailMessageProps & {
+export declare function VerificationEmail({ theme, variant, head, dir, brand, footer, code, expiresInMinutes, supportUrl }: EmailMessageProps & {
   code: string;
   expiresInMinutes: number;
   supportUrl: string;
@@ -69,7 +70,7 @@ export type EmailReceiptLine = {
   label: string;
   value: string;
 };
-export declare function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }: EmailMessageProps & {
+export declare function ReceiptEmail({ theme, variant, head, dir, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }: EmailMessageProps & {
   orderNumber: string;
   orderDate: string;
   lines: EmailReceiptLine[];
@@ -81,7 +82,7 @@ export type EmailReleaseSection = {
   title: string;
   changes: string[];
 };
-export declare function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }: EmailBrandProps & {
+export declare function ReleaseNotesEmail({ theme, variant, head, dir, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }: EmailBrandProps & {
   version: string;
   summary: string;
   sections: EmailReleaseSection[];

package/dist/email/templates.js

@@ -4,12 +4,16 @@ import { EmailCodeBlock, EmailInlineCode, EmailMarkdown } from "./email-code.js"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Column, Img, Row } from "react-email";
 //#region src/email/templates.tsx
-function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, inviter, workspace, inviteUrl }) {
+function InvitationEmail({ theme, variant, head, dir, brand, browserUrl, footer, inviter, workspace, inviteUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -17,6 +21,7 @@ function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, invi
 		preview: `${inviter} invited you to ${workspace}`,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme
@@ -43,12 +48,16 @@ function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, invi
 		]
 	});
 }
-function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights = [], actionUrl }) {
+function ProductEmail({ theme, variant, head, dir, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights = [], actionUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -56,15 +65,17 @@ function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title,
 		preview: title,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme,
 				align: "center"
 			}),
 			/* @__PURE__ */ jsx(EmailCaption, {
+				eyebrow: true,
 				align: "center",
 				className: "mb-6",
-				children: "ANNOUNCEMENT"
+				children: "Announcement"
 			}),
 			/* @__PURE__ */ jsx(Img, {
 				src: imageUrl,
@@ -81,19 +92,22 @@ function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title,
 				align: "center",
 				children: description
 			}),
-			/* @__PURE__ */ jsx(EmailColumns, { children: highlights.map((highlight) => /* @__PURE__ */ jsxs(EmailSection, {
-				align: "center",
-				children: [/* @__PURE__ */ jsx(EmailHeading, {
-					as: "h4",
+			/* @__PURE__ */ jsx(EmailColumns, {
+				dir,
+				children: highlights.map((highlight) => /* @__PURE__ */ jsxs(EmailSection, {
 					align: "center",
-					className: "mb-1",
-					children: highlight.title
-				}), /* @__PURE__ */ jsx(EmailCaption, {
-					align: "center",
-					className: "mb-0",
-					children: highlight.description
-				})]
-			}, highlight.title)) }),
+					children: [/* @__PURE__ */ jsx(EmailHeading, {
+						as: "h4",
+						align: "center",
+						className: "mb-1",
+						children: highlight.title
+					}), /* @__PURE__ */ jsx(EmailCaption, {
+						align: "center",
+						className: "mb-0",
+						children: highlight.description
+					})]
+				}, highlight.title))
+			}),
 			/* @__PURE__ */ jsx(EmailSection, {
 				align: "center",
 				children: /* @__PURE__ */ jsx(EmailButton, {
@@ -104,12 +118,16 @@ function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title,
 		]
 	});
 }
-function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }) {
+function EditorialEmail({ theme, variant, head, dir, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -117,19 +135,22 @@ function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title
 		preview: title,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme
 			}),
 			/* @__PURE__ */ jsx(EmailCaption, {
+				eyebrow: true,
 				className: "mb-6",
-				children: "IN GOOD COMPANY"
+				children: "In good company"
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, {
 				size: "heading-2",
 				children: "Fresh perspectives."
 			}),
 			/* @__PURE__ */ jsxs(EmailColumns, {
+				dir,
 				widths: ["36%", "64%"],
 				children: [/* @__PURE__ */ jsx(Img, {
 					src: imageUrl,
@@ -143,21 +164,29 @@ function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title
 						children: title
 					}),
 					/* @__PURE__ */ jsx(EmailText, { children: description }),
-					/* @__PURE__ */ jsx(EmailLink, {
+					/* @__PURE__ */ jsxs(EmailLink, {
 						href: articleUrl,
-						children: "Read the story"
+						children: [
+							"Read “",
+							title,
+							"”"
+						]
 					})
 				] })]
 			})
 		]
 	});
 }
-function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, articles }) {
+function NewsletterEmail({ theme, variant, head, dir, brand, browserUrl, footer, articles }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -165,15 +194,17 @@ function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, arti
 		preview: "A few things worth making time for.",
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme,
 				align: "center"
 			}),
 			/* @__PURE__ */ jsx(EmailCaption, {
+				eyebrow: true,
 				align: "center",
 				className: "mb-6",
-				children: "THE WEEKLY EDIT"
+				children: "The weekly edit"
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, {
 				align: "center",
@@ -199,21 +230,29 @@ function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, arti
 						children: article.title
 					}),
 					/* @__PURE__ */ jsx(EmailText, { children: article.description }),
-					/* @__PURE__ */ jsx(EmailLink, {
+					/* @__PURE__ */ jsxs(EmailLink, {
 						href: article.href,
-						children: "Read the story"
+						children: [
+							"Read “",
+							article.title,
+							"”"
+						]
 					})
 				]
 			}, article.href))
 		]
 	});
 }
-function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period, metrics, details, dashboardUrl }) {
+function SummaryEmail({ theme, variant, head, dir, brand, browserUrl, footer, period, metrics, details, dashboardUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -221,6 +260,7 @@ function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period,
 		preview: `Your team’s progress · ${period}`,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme
@@ -253,6 +293,7 @@ function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period,
 				})
 			}),
 			details.map((detail) => /* @__PURE__ */ jsx(EmailDetailRow, {
+				dir,
 				label: detail.label,
 				value: detail.value
 			}, detail.label)),
@@ -264,12 +305,16 @@ function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period,
 		]
 	});
 }
-function VerificationEmail({ theme, variant, head, brand, footer, code, expiresInMinutes, supportUrl }) {
+function VerificationEmail({ theme, variant, head, dir, brand, footer, code, expiresInMinutes, supportUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -277,6 +322,7 @@ function VerificationEmail({ theme, variant, head, brand, footer, code, expiresI
 		preview: `${code} is your verification code`,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				colorScheme: theme.colorScheme,
 				align: "center"
@@ -315,12 +361,16 @@ function VerificationEmail({ theme, variant, head, brand, footer, code, expiresI
 		]
 	});
 }
-function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }) {
+function ReceiptEmail({ theme, variant, head, dir, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -328,12 +378,14 @@ function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderD
 		preview: `Receipt ${orderNumber} · ${total}`,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				colorScheme: theme.colorScheme
 			}),
 			/* @__PURE__ */ jsx(EmailCaption, {
+				eyebrow: true,
 				className: "mb-6",
-				children: "RECEIPT"
+				children: "Receipt"
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, {
 				size: "heading-3",
@@ -348,11 +400,13 @@ function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderD
 			] }),
 			/* @__PURE__ */ jsxs(EmailPanel, { children: [
 				lines.map((line) => /* @__PURE__ */ jsx(EmailDetailRow, {
+					dir,
 					label: line.label,
 					value: line.value
 				}, line.label)),
 				/* @__PURE__ */ jsx(EmailDivider, { className: "my-3" }),
 				/* @__PURE__ */ jsx(EmailDetailRow, {
+					dir,
 					label: "Total",
 					value: total,
 					emphasis: true
@@ -373,12 +427,16 @@ function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderD
 		]
 	});
 }
-function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }) {
+function ReleaseNotesEmail({ theme, variant, head, dir, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }) {
 	const layout = {
 		theme,
 		variant,
 		head,
-		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		dir,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, {
+			footer,
+			dir
+		}),
 		footerPlacement: footer.placement
 	};
 	return /* @__PURE__ */ jsxs(EmailLayout, {
@@ -386,13 +444,15 @@ function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, ve
 		preview: `What shipped in ${version}`,
 		children: [
 			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				dir,
 				brand,
 				browserUrl,
 				colorScheme: theme.colorScheme
 			}),
 			/* @__PURE__ */ jsxs(EmailCaption, {
+				eyebrow: true,
 				className: "mb-6",
-				children: ["RELEASE ", version]
+				children: ["Release ", version]
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, {
 				size: "heading-2",
@@ -404,11 +464,15 @@ function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, ve
 				children: [/* @__PURE__ */ jsx(EmailHeading, {
 					as: "h3",
 					children: section.title
-				}), /* @__PURE__ */ jsx(EmailBulletList, { items: section.changes })]
+				}), /* @__PURE__ */ jsx(EmailBulletList, {
+					dir,
+					items: section.changes
+				})]
 			}, section.title)),
 			migration ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EmailMarkdown, {
 				theme,
 				variant,
+				dir,
 				children: migration.notes
 			}), /* @__PURE__ */ jsx(EmailCodeBlock, {
 				theme,

package/dist/email/theme.js

@@ -1,5 +1,5 @@
-import { emailLengthPixels } from "./length.js";
 import { composite, resolveColor, tokenMaps } from "../scripts/contrast-eval.js";
+import { emailLengthPixels } from "./length.js";
 //#region src/email/theme.ts
 function resolveVariables(value, tokens, chain = []) {
 	if (chain.length > 16) throw new Error(`Email theme: token chain exceeds 16 references (${chain.join(" → ")}).`);

package/dist/environment-variables.d.ts

@@ -23,11 +23,12 @@ export type EnvironmentVariablesRootProps<TRow extends EnvironmentVariableRow =
   keyPlaceholder?: string;
   valuePlaceholder?: string;
   duplicateKeyMessage?: ReactNode;
+  revealValueLabel?: (key: string) => string;
   onSubmit?: (payload: EnvironmentVariablesSubmitPayload<TRow>) => void | Promise<void>;
 } & {
   style?: CSSProperties & EnvironmentVariablesKnobStyle;
 };
-export declare function EnvironmentVariablesRoot<TRow extends EnvironmentVariableRow = EnvironmentVariableRow>({ editor, disabled, readOnly, rowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, onSubmit, className, children, ...props }: EnvironmentVariablesRootProps<TRow>): import("react").JSX.Element;
+export declare function EnvironmentVariablesRoot<TRow extends EnvironmentVariableRow = EnvironmentVariableRow>({ editor, disabled, readOnly, rowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, revealValueLabel, onSubmit, className, children, ...props }: EnvironmentVariablesRootProps<TRow>): import("react").JSX.Element;
 export type EnvironmentVariablesProps<TRow extends EnvironmentVariableRow = EnvironmentVariableRow> = Omit<EnvironmentVariablesRootProps<TRow>, "editor"> & UseEnvironmentVariablesOptions<TRow> & {
   editor?: EnvironmentVariablesController<TRow>;
   title?: ReactNode;
@@ -100,9 +101,10 @@ export type EnvironmentVariablesReadOnlyItemProps = Omit<ComponentProps<"div">,
   name: ReactNode;
   value?: ReactNode;
   revealed?: boolean;
+  hiddenValueLabel?: string;
   style?: CSSProperties & EnvironmentVariablesKnobStyle;
 };
-export declare function EnvironmentVariablesReadOnlyItem({ name, value, revealed, className, ...props }: EnvironmentVariablesReadOnlyItemProps): import("react").JSX.Element;
+export declare function EnvironmentVariablesReadOnlyItem({ name, value, revealed, hiddenValueLabel, className, ...props }: EnvironmentVariablesReadOnlyItemProps): import("react").JSX.Element;
 export declare const EnvironmentVariables: typeof EnvironmentVariablesComponent & {
   Root: typeof EnvironmentVariablesRoot;
   Header: typeof EnvironmentVariablesHeader;