@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/dynamic-notification.js

@@ -1,11 +1,12 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
 import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
 import { useDynamicNotification } from "./hooks/use-dynamic-notification.js";
-import { createContext, useContext, useEffect, useId, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dynamic-notification.tsx
 const DynamicNotificationShellContext = createContext(null);
 const DynamicNotificationReplyContext = createContext(null);
@@ -14,6 +15,12 @@ function resolveNotificationState(open, loading) {
 	if (loading) return "thinking";
 	return "expanded";
 }
+function resolveAnnouncement({ state, loading, replyFailed, message, thinkingLabel, replyErrorLabel }) {
+	if (replyFailed) return replyErrorLabel;
+	if (loading) return thinkingLabel;
+	if (state === "expanded") return message;
+	return "";
+}
 function useDynamicNotificationShellContext() {
 	const context = useContext(DynamicNotificationShellContext);
 	if (!context) throw new Error("DynamicNotification compound components must be rendered inside <DynamicNotification>.");
@@ -32,7 +39,7 @@ function useDynamicNotificationContext() {
 		...reply
 	};
 }
-function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant = "surface", disabled = false, className, children, ...props }) {
+function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant = "surface", disabled = false, thinkingLabel = "Assistant is thinking", replyErrorLabel = "Couldn't send your reply. Try again.", className, children, ...props }) {
 	const notification = useDynamicNotification({
 		open,
 		defaultOpen,
@@ -44,14 +51,28 @@ function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false,
 		disabled
 	});
 	const contentId = useId();
+	const [message, setMessage] = useState("");
+	const pillRef = useRef(null);
+	const focusReplyOnExpandRef = useRef(false);
 	const state = resolveNotificationState(notification.open, loading);
+	const announcement = resolveAnnouncement({
+		state,
+		loading,
+		replyFailed: notification.replyFailed,
+		message,
+		thinkingLabel,
+		replyErrorLabel
+	});
 	const shellContext = useMemo(() => ({
 		open: notification.open,
 		disabled: notification.disabled,
 		setOpen: notification.setOpen,
 		state,
 		variant,
-		contentId
+		contentId,
+		publishMessage: setMessage,
+		pillRef,
+		focusReplyOnExpandRef
 	}), [
 		notification.open,
 		notification.disabled,
@@ -65,6 +86,9 @@ function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false,
 		setReply: notification.setReply,
 		normalizedReply: notification.normalizedReply,
 		canSubmit: notification.canSubmit,
+		replyPending: notification.replyPending,
+		replyFailed: notification.replyFailed,
+		replyErrorLabel,
 		clear: notification.clear,
 		submitReply: notification.submitReply,
 		handleReplySubmit: notification.handleReplySubmit
@@ -73,6 +97,9 @@ function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false,
 		notification.setReply,
 		notification.normalizedReply,
 		notification.canSubmit,
+		notification.replyPending,
+		notification.replyFailed,
+		replyErrorLabel,
 		notification.clear,
 		notification.submitReply,
 		notification.handleReplySubmit
@@ -81,7 +108,7 @@ function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false,
 		value: shellContext,
 		children: /* @__PURE__ */ jsx(DynamicNotificationReplyContext.Provider, {
 			value: replyContext,
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				"data-control-ui": "dynamic-notification",
 				"data-control-family": "dynamic-notification",
 				"data-slot": "root",
@@ -89,7 +116,7 @@ function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false,
 				"data-variant": variant,
 				className: cn("relative flex w-full justify-center", className),
 				...props,
-				children
+				children: [/* @__PURE__ */ jsx(LiveStatus, { message: announcement }), children]
 			})
 		})
 	});
@@ -152,14 +179,32 @@ function DynamicNotificationLiquid({ className, ...props }) {
 		...props
 	});
 }
-function DynamicNotificationPill({ className, children, onClick, ...props }) {
-	const { contentId, disabled, open, setOpen } = useDynamicNotificationShellContext();
+function DynamicNotificationPill({ className, children, onClick, ref, ...props }) {
+	const { contentId, disabled, open, setOpen, pillRef, focusReplyOnExpandRef } = useDynamicNotificationShellContext();
+	useLayoutEffect(() => {
+		if (open) return;
+		focusReplyOnExpandRef.current = false;
+		const pill = pillRef.current;
+		const active = pill?.ownerDocument.activeElement;
+		if (!pill || !active || active === pill) return;
+		if (pill.closest("[data-slot=\"island\"]")?.contains(active)) pill.focus({ preventScroll: true });
+	}, [
+		open,
+		pillRef,
+		focusReplyOnExpandRef
+	]);
+	function setPillRef(node) {
+		pillRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}
 	function handleClick(event) {
 		onClick?.(event);
 		if (event.defaultPrevented) return;
-		setOpen(true, "trigger-press", event.nativeEvent, event.currentTarget);
+		if (setOpen(true, "trigger-press", event.nativeEvent, event.currentTarget)) focusReplyOnExpandRef.current = true;
 	}
 	return /* @__PURE__ */ jsx("button", {
+		ref: setPillRef,
 		type: "button",
 		"aria-expanded": open,
 		"aria-controls": contentId,
@@ -207,14 +252,18 @@ function DynamicNotificationTitle({ className, ...props }) {
 	});
 }
 function DynamicNotificationMessage({ className, children, ...props }) {
+	const { publishMessage } = useDynamicNotificationShellContext();
+	useEffect(() => {
+		publishMessage(children);
+		return () => publishMessage("");
+	}, [children, publishMessage]);
 	return /* @__PURE__ */ jsx("p", {
-		"aria-live": "polite",
 		"data-control-ui": "dynamic-notification",
 		"data-control-family": "dynamic-notification",
 		"data-slot": "message",
 		className,
 		...props,
-		children: /* @__PURE__ */ jsx(DynamicNotificationWords, { text: children }, children)
+		children: /* @__PURE__ */ jsx(DynamicNotificationWords, { text: children })
 	});
 }
 function DynamicNotificationWords({ text }) {
@@ -232,31 +281,45 @@ function DynamicNotificationWords({ text }) {
 		}, position);
 	});
 }
-function DynamicNotificationReply({ className, onSubmit, ...props }) {
-	const { handleReplySubmit } = useDynamicNotificationReplyContext();
+function DynamicNotificationReply({ className, onSubmit, children, ...props }) {
+	const { handleReplySubmit, replyPending, replyFailed, replyErrorLabel } = useDynamicNotificationReplyContext();
+	const errorId = useId();
 	function handleSubmit(event) {
 		onSubmit?.(event);
 		if (event.defaultPrevented) return;
 		handleReplySubmit(event);
 	}
-	return /* @__PURE__ */ jsx("form", {
+	return /* @__PURE__ */ jsxs("form", {
+		"aria-busy": replyPending || void 0,
+		"aria-describedby": replyFailed ? errorId : void 0,
 		"data-control-ui": "dynamic-notification",
 		"data-control-family": "dynamic-notification",
 		"data-slot": "reply",
 		onSubmit: handleSubmit,
-		className: cn("flex items-center", className),
-		...props
+		className: cn("flex flex-wrap items-center", className),
+		...props,
+		children: [children, replyFailed ? /* @__PURE__ */ jsx("p", {
+			id: errorId,
+			"data-control-ui": "dynamic-notification",
+			"data-control-family": "dynamic-notification",
+			"data-slot": "reply-error",
+			className: "basis-full",
+			children: replyErrorLabel
+		}) : null]
 	});
 }
 function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }) {
-	const { disabled: contextDisabled, state } = useDynamicNotificationShellContext();
+	const { disabled: contextDisabled, state, focusReplyOnExpandRef } = useDynamicNotificationShellContext();
 	const { reply, setReply } = useDynamicNotificationReplyContext();
 	const inputRef = useRef(null);
 	useEffect(() => {
-		if (state !== "expanded") return;
-		const frame = requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }));
+		if (state !== "expanded" || !focusReplyOnExpandRef.current) return;
+		const frame = requestAnimationFrame(() => {
+			focusReplyOnExpandRef.current = false;
+			inputRef.current?.focus({ preventScroll: true });
+		});
 		return () => cancelAnimationFrame(frame);
-	}, [state]);
+	}, [state, focusReplyOnExpandRef]);
 	function handleChange(event) {
 		onChange?.(event);
 		if (!event.defaultPrevented) setReply(event.currentTarget.value);
@@ -305,7 +368,7 @@ function DynamicNotificationReplySubmit({ className, disabled, children, ...prop
 		})
 	});
 }
-function DynamicNotificationClose({ className, children, onClick, ...props }) {
+function DynamicNotificationClose({ className, children, onClick, collapseLabel = "Collapse notification", ...props }) {
 	const { setOpen } = useDynamicNotificationShellContext();
 	function handleClick(event) {
 		onClick?.(event);
@@ -320,7 +383,7 @@ function DynamicNotificationClose({ className, children, onClick, ...props }) {
 		size: "sm",
 		iconOnly: true,
 		shape: "circle",
-		"aria-label": "Dismiss",
+		"aria-label": collapseLabel,
 		onClick: handleClick,
 		className: cn("shrink-0", className),
 		...props,

package/dist/email/email-brand.d.ts

@@ -1,5 +1,5 @@
 import { EmailColorScheme } from "./theme.js";
-import { EmailFooterPlacement } from "./email.js";
+import { EmailDirection, EmailFooterPlacement } from "./email.js";
 import { EmailFooterAlign, EmailNavLink, EmailSocialLink } from "./email-footer.js";
 import { ReactNode } from "react";
 //#region src/email/email-brand.d.ts
@@ -43,18 +43,21 @@ export declare function EmailBrowserLink({ href, children }: {
   children?: ReactNode;
 }): import("react").JSX.Element;
 export type EmailHeaderAlign = "split" | "center";
-export declare function EmailHeader({ children, aside, align }: {
+export declare function EmailHeader({ children, aside, align, dir }: {
   children: ReactNode;
   aside?: ReactNode;
   align?: EmailHeaderAlign;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
-export declare function EmailBrandHeader({ brand, browserUrl, colorScheme, align }: {
+export declare function EmailBrandHeader({ brand, browserUrl, colorScheme, align, dir }: {
   brand: EmailBrand;
   browserUrl?: string;
   colorScheme?: EmailColorScheme;
   align?: EmailHeaderAlign;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
-export declare function EmailBrandFooter({ footer }: {
+export declare function EmailBrandFooter({ footer, dir }: {
   footer: EmailFooterContent;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
 //#endregion

package/dist/email/email-brand.js

@@ -1,4 +1,4 @@
-import { EmailCaption, EmailMutedLink, EmailSection } from "./email.js";
+import { EmailCaption, EmailMutedLink, EmailSection, emailSides } from "./email.js";
 import { EmailAddress, EmailFooter, EmailFooterLegal, EmailFooterLinks, EmailSocialLinks, EmailUnsubscribe } from "./email-footer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Column, Img, Link, Row } from "react-email";
@@ -26,7 +26,7 @@ function EmailBrowserLink({ href, children = "View in browser" }) {
 		children
 	});
 }
-function EmailHeader({ children, aside, align = "split" }) {
+function EmailHeader({ children, aside, align = "split", dir }) {
 	if (align === "center") return /* @__PURE__ */ jsxs(EmailSection, {
 		align: "center",
 		className: "mb-8",
@@ -42,16 +42,17 @@ function EmailHeader({ children, aside, align = "split" }) {
 			className: "align-middle",
 			children
 		}), aside ? /* @__PURE__ */ jsx(Column, {
-			align: "right",
+			align: emailSides(dir).end,
 			className: "align-middle",
 			children: aside
 		}) : null]
 	});
 }
-function EmailBrandHeader({ brand, browserUrl, colorScheme = "light", align = "split" }) {
+function EmailBrandHeader({ brand, browserUrl, colorScheme = "light", align = "split", dir }) {
 	const logoUrl = colorScheme === "dark" ? brand.logoDarkUrl ?? brand.logoUrl : brand.logoUrl;
 	return /* @__PURE__ */ jsx(EmailHeader, {
 		align,
+		dir,
 		aside: browserUrl ? /* @__PURE__ */ jsx(EmailBrowserLink, { href: browserUrl }) : null,
 		children: /* @__PURE__ */ jsx(EmailLogo, {
 			name: brand.name,
@@ -62,14 +63,16 @@ function EmailBrandHeader({ brand, browserUrl, colorScheme = "light", align = "s
 		})
 	});
 }
-function EmailBrandFooter({ footer }) {
+function EmailBrandFooter({ footer, dir }) {
 	return /* @__PURE__ */ jsxs(EmailFooter, {
 		align: footer.align,
 		placement: footer.placement,
+		dir,
 		children: [
 			/* @__PURE__ */ jsx(EmailSocialLinks, {
 				links: footer.socialLinks,
-				iconBaseUrl: footer.socialIconBaseUrl
+				iconBaseUrl: footer.socialIconBaseUrl,
+				dir
 			}),
 			/* @__PURE__ */ jsx(EmailFooterLinks, { links: footer.helpLinks }),
 			/* @__PURE__ */ jsx(EmailCaption, {

package/dist/email/email-code.d.ts

@@ -1,5 +1,5 @@
 import { EmailTheme } from "./theme.js";
-import { EmailVariant } from "./email.js";
+import { EmailDirection, EmailVariant } from "./email.js";
 import { CodeInlineProps, PrismLanguage } from "react-email";
 //#region src/email/email-code.d.ts
 export declare function EmailInlineCode({ className, ...props }: CodeInlineProps): import("react").JSX.Element;
@@ -10,9 +10,10 @@ export declare function EmailCodeBlock({ theme, code, language, lineNumbers, cla
   lineNumbers?: boolean;
   className?: string;
 }): import("react").JSX.Element;
-export declare function EmailMarkdown({ theme, variant, children }: {
+export declare function EmailMarkdown({ theme, variant, dir, children }: {
   theme: EmailTheme;
   variant?: EmailVariant;
+  dir?: EmailDirection;
   children: string;
 }): import("react").JSX.Element;
 //#endregion

package/dist/email/email-code.js

@@ -1,4 +1,4 @@
-import { surfaceColors } from "./email.js";
+import { emailSides, surfaceColors } from "./email.js";
 import { jsx } from "react/jsx-runtime";
 import { CodeBlock, CodeInline, Markdown, Section } from "react-email";
 //#region src/email/email-code.tsx
@@ -62,7 +62,7 @@ function EmailCodeBlock({ theme, code, language, lineNumbers = false, className
 		})
 	});
 }
-function markdownStyles(theme, variant) {
+function markdownStyles(theme, variant, sides) {
 	const colors = surfaceColors(theme, variant);
 	const body = {
 		margin: "0 0 16px",
@@ -90,6 +90,8 @@ function markdownStyles(theme, variant) {
 		color: theme.code.foreground,
 		borderRadius: theme.radii.control
 	};
+	const startInset = (length) => sides.start === "left" ? { paddingLeft: length } : { paddingRight: length };
+	const startRule = `3px solid ${theme.colors.border}`;
 	return {
 		p: body,
 		li: {
@@ -98,11 +100,11 @@ function markdownStyles(theme, variant) {
 		},
 		ul: {
 			...body,
-			paddingLeft: "20px"
+			...startInset("20px")
 		},
 		ol: {
 			...body,
-			paddingLeft: "20px"
+			...startInset("20px")
 		},
 		h1: headingStyle("heading-1"),
 		h2: headingStyle("heading-2"),
@@ -129,8 +131,8 @@ function markdownStyles(theme, variant) {
 		},
 		blockQuote: {
 			...body,
-			borderLeft: `3px solid ${theme.colors.border}`,
-			paddingLeft: "16px",
+			...sides.start === "left" ? { borderLeft: startRule } : { borderRight: startRule },
+			...startInset("16px"),
 			color: colors["muted-foreground"]
 		},
 		hr: {
@@ -150,7 +152,7 @@ function markdownStyles(theme, variant) {
 		th: {
 			...body,
 			margin: "0",
-			textAlign: "left",
+			textAlign: sides.start,
 			padding: "8px 0",
 			borderBottom: `1px solid ${theme.colors.border}`
 		},
@@ -162,9 +164,9 @@ function markdownStyles(theme, variant) {
 		}
 	};
 }
-function EmailMarkdown({ theme, variant = "contained", children }) {
+function EmailMarkdown({ theme, variant = "contained", dir, children }) {
 	return /* @__PURE__ */ jsx(Markdown, {
-		markdownCustomStyles: markdownStyles(theme, variant),
+		markdownCustomStyles: markdownStyles(theme, variant, emailSides(dir)),
 		children
 	});
 }

package/dist/email/email-footer.d.ts

@@ -1,4 +1,4 @@
-import { EmailFooterPlacement } from "./email.js";
+import { EmailDirection, EmailFooterPlacement } from "./email.js";
 import { ReactNode } from "react";
 //#region src/email/email-footer.d.ts
 export type EmailNavLink = {
@@ -33,19 +33,21 @@ export type EmailSocialLink = {
   iconUrl?: string;
 });
 export type EmailFooterAlign = "start" | "center";
-export declare function EmailFooter({ children, align, placement }: {
+export declare function EmailFooter({ children, align, placement, dir }: {
   children: ReactNode;
   align?: EmailFooterAlign;
   placement?: EmailFooterPlacement;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
 export declare function EmailFooterLegal({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-export declare function EmailSocialLinks({ links, iconBaseUrl, iconSize }: {
+export declare function EmailSocialLinks({ links, iconBaseUrl, iconSize, dir }: {
   links: EmailSocialLink[];
   iconBaseUrl?: string;
   iconSize?: number;
+  dir?: EmailDirection;
 }): import("react").JSX.Element | null;
 export declare function EmailFooterLinks({ links }: {
   links: EmailNavLink[];

package/dist/email/email-footer.js

@@ -1,4 +1,4 @@
-import { EmailCaption, EmailDivider, EmailMutedLink } from "./email.js";
+import { EmailCaption, EmailDivider, EmailMutedLink, emailAlignClass, emailSides } from "./email.js";
 import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Img, Section } from "react-email";
@@ -23,9 +23,10 @@ function separatedLinks(links) {
 		children: link.label
 	})] }, link.href));
 }
-function EmailFooter({ children, align = "start", placement = "inside" }) {
+function EmailFooter({ children, align = "start", placement = "inside", dir }) {
+	const alignClass = emailAlignClass(align, dir);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [placement === "inside" ? /* @__PURE__ */ jsx(EmailDivider, {}) : null, /* @__PURE__ */ jsx(Section, {
-		className: `${placement === "inside" ? "" : "pt-6"} ${align === "center" ? "text-center" : "text-left"}`,
+		className: `${placement === "inside" ? "" : "pt-6"} ${alignClass}`,
 		children
 	})] });
 }
@@ -44,13 +45,18 @@ function resolveSocialLink(link, iconBaseUrl) {
 		alt: link.iconAlt ?? label
 	};
 }
-function EmailSocialLinks({ links, iconBaseUrl, iconSize = 24 }) {
+const socialGapClasses = {
+	left: "ml-3",
+	right: "mr-3"
+};
+function EmailSocialLinks({ links, iconBaseUrl, iconSize = 24, dir }) {
+	const sides = emailSides(dir);
 	if (links.length === 0) return null;
 	return /* @__PURE__ */ jsx(Section, {
 		className: "mb-4",
 		children: links.map((link, index) => {
 			const { label, iconUrl, alt } = resolveSocialLink(link, iconBaseUrl);
-			const spacing = index < links.length - 1 ? "mr-3" : "";
+			const spacing = index < links.length - 1 ? socialGapClasses[sides.end] : "";
 			return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx(EmailMutedLink, {
 				href: link.href,
 				className: `${iconUrl ? "no-underline" : "underline"} ${spacing}`,

package/dist/email/email.d.ts

@@ -4,6 +4,19 @@ import { ButtonProps, HeadingProps, HrProps, LinkProps, SectionProps, TextProps
 //#region src/email/email.d.ts
 export type EmailVariant = "contained" | "plain";
 export type EmailFooterPlacement = "inside" | "outside";
+export type EmailDirection = "ltr" | "rtl";
+declare const physicalSides: {
+  readonly ltr: {
+    readonly start: "left";
+    readonly end: "right";
+  };
+  readonly rtl: {
+    readonly start: "right";
+    readonly end: "left";
+  };
+};
+export type EmailSides = (typeof physicalSides)[EmailDirection];
+export declare function emailSides(dir?: EmailDirection): EmailSides;
 export declare function surfaceColors(theme: EmailTheme, variant: EmailVariant): Record<"background" | "border" | "card" | "card-foreground" | "foreground" | "muted" | "muted-foreground" | "primary" | "primary-foreground" | "primary-text", string>;
 export declare function EmailLayout({ theme, preview, children, footer, footerPlacement, head, lang, dir, variant }: {
   theme: EmailTheme;
@@ -13,10 +26,11 @@ export declare function EmailLayout({ theme, preview, children, footer, footerPl
   footerPlacement?: EmailFooterPlacement;
   head?: ReactNode;
   lang?: string;
-  dir?: "ltr" | "rtl";
+  dir?: EmailDirection;
   variant?: EmailVariant;
 }): import("react").JSX.Element;
-export type EmailAlign = "left" | "center" | "right";
+export type EmailAlign = "start" | "center" | "end";
+export declare function emailAlignClass(align: EmailAlign | undefined, dir?: EmailDirection): string;
 declare const headingSizeClasses: {
   display: string;
   "heading-1": string;
@@ -31,24 +45,29 @@ declare const headingSizeForTag: {
   readonly h3: "heading-3";
   readonly h4: "heading-4";
 };
-export declare function EmailHeading({ as, size, align, className, ...props }: Omit<HeadingProps, "as"> & {
+export declare function EmailHeading({ as, size, align, dir, className, ...props }: Omit<HeadingProps, "as" | "dir"> & {
   as?: keyof typeof headingSizeForTag;
   size?: EmailHeadingSize;
   align?: EmailAlign;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
-export declare function EmailSection({ align, className, ...props }: SectionProps & {
+export declare function EmailSection({ align, dir, className, ...props }: Omit<SectionProps, "dir"> & {
   align?: EmailAlign;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
-export declare function EmailText({ tone, align, className, style, ...props }: TextProps & {
+export declare function EmailText({ tone, align, dir, className, style, ...props }: Omit<TextProps, "dir"> & {
   tone?: "default" | "muted";
   align?: EmailAlign;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
 export declare function EmailButton({ width, className, ...props }: ButtonProps & {
   width?: "auto" | "full";
 }): import("react").JSX.Element;
 export declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
-export declare function EmailCaption({ className, ...props }: TextProps & {
+export declare function EmailCaption({ eyebrow, className, ...props }: Omit<TextProps, "dir"> & {
   align?: EmailAlign;
+  dir?: EmailDirection;
+  eyebrow?: boolean;
 }): import("react").JSX.Element;
 export declare function EmailMutedLink({ className, ...props }: LinkProps): import("react").JSX.Element;
 export declare function EmailDivider({ className, ...props }: HrProps): import("react").JSX.Element;
@@ -57,20 +76,23 @@ export declare function EmailOneTimeCode({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-export declare function EmailBulletList({ items, className }: {
+export declare function EmailBulletList({ items, dir, className }: {
   items: ReactNode[];
+  dir?: EmailDirection;
   className?: string;
 }): import("react").JSX.Element | null;
-export declare function EmailColumns({ children, widths, gap, verticalAlign, className }: {
+export declare function EmailColumns({ children, widths, gap, verticalAlign, dir, className }: {
   children: ReactNode[];
   widths?: string[];
   gap?: number;
   verticalAlign?: "top" | "middle" | "bottom";
+  dir?: EmailDirection;
   className?: string;
 }): import("react").JSX.Element | null;
-export declare function EmailDetailRow({ label, value, emphasis }: {
+export declare function EmailDetailRow({ label, value, emphasis, dir }: {
   label: ReactNode;
   value: ReactNode;
   emphasis?: boolean;
+  dir?: EmailDirection;
 }): import("react").JSX.Element;
 //#endregion