@seams/wallet 0.17.0 → 0.19.0

package/dist/esm/react/components/AccountMenuButton/AuthenticationMethodsView.js

@@ -1,12 +1,15 @@
+import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
+import { useWalletLocale } from "../../context/WalletLocale.js";
 import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/AuthenticationMethodsView.tsx
 /** Shared presentation; callers own enrollment data and authenticated actions. */
 function AuthenticationMethodsView({ walletLabel, status, children }) {
+	const locale = useWalletLocale();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
-		title: walletLabel,
-		description: "This wallet",
+		title: walletDisplayText(locale, walletLabel),
+		description: walletText(locale, "This wallet"),
 		details: [{
 			label: "Status",
 			value: status

package/dist/esm/react/components/AccountMenuButton/ExportKeysScreen.js

@@ -1,3 +1,5 @@
+import { walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { AccountMenuScreen } from "./AccountMenuScreen.js";
 import { ExportKeysSection } from "./ExportKeysSection.js";
 import "react";
@@ -6,12 +8,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** Shared key selection; the connected caller owns the authenticated export. */
 function ExportKeysScreen({ onBack, ...selection }) {
 	return /* @__PURE__ */ jsxs(AccountMenuScreen, {
-		title: "Export keys",
+		title: walletText(useWalletLocale(), "Export keys"),
 		onBack,
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "seams-account-description",
-				children: "Choose the signing key to export. Your wallet will ask you to authenticate."
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Choose the signing key to export. Your wallet will ask you to authenticate." })
 			}),
 			/* @__PURE__ */ jsx(ExportKeysSection, {
 				...selection,
@@ -19,7 +21,7 @@ function ExportKeysScreen({ onBack, ...selection }) {
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "seams-account-note",
-				children: "Keep exported keys private. Anyone with a signing key can control its accounts."
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Keep exported keys private. Anyone with a signing key can control its accounts." })
 			})
 		]
 	});

package/dist/esm/react/components/AccountMenuButton/ExportKeysSection.css

@@ -100,3 +100,23 @@
   width: 100%;
   height: 100%;
 }
+
+/* A phone-width menu left the description beside the label only a few
+   characters, so it moves to a line of its own under the label. */
+@media (max-width: 480px) {
+  .seams-account-screen .seams-export-keys-row {
+    flex-wrap: wrap;
+    row-gap: 2px;
+  }
+
+  .seams-account-screen .seams-export-keys-row-spinner {
+    margin-left: auto;
+  }
+
+  .seams-account-screen .seams-export-keys-row-description {
+    flex-basis: 100%;
+    order: 1;
+    white-space: normal;
+    text-align: left;
+  }
+}

package/dist/esm/react/components/AccountMenuButton/ExportKeysSection.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import { KeyIcon } from "./icons/KeyIcon.js";
 import SpinnerIcon from "./icons/SpinnerIcon.js";
 import "react";
@@ -48,15 +49,15 @@ const ExportKeysSection = ({ isOpen = false, presentation = "menu", loadingChain
 						}) : null,
 						/* @__PURE__ */ jsx("span", {
 							className: "seams-export-keys-row-label",
-							children: row.label
+							children: /* @__PURE__ */ jsx(WalletText, { copy: row.label })
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "seams-export-keys-row-description",
-							children: row.description
+							children: /* @__PURE__ */ jsx(WalletText, { copy: row.description })
 						}),
 						presentation === "page" ? /* @__PURE__ */ jsxs("span", {
 							className: "seams-export-keys-action",
-							children: [loadingChain === row.chain ? "Preparing export…" : "Export key", /* @__PURE__ */ jsx("span", {
+							children: [loadingChain === row.chain ? /* @__PURE__ */ jsx(WalletText, { message: "Preparing export…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Export key" }), /* @__PURE__ */ jsx("span", {
 								"aria-hidden": "true",
 								children: "→"
 							})]

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal.css

@@ -548,8 +548,10 @@
   margin-bottom: 1.5rem;
   font-size: 0.875rem;
 }
+/* The body scrolls, so the last action needs its own room above the card edge. */
 .seams-auth-methods-modal-content .seams-linked-devices-modal-body {
   gap: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 /* A method's icon sits on a tile, like the recovery-code row. */
 .seams-auth-methods-modal-content .seams-linked-devices-modal-item--row {
@@ -585,12 +587,16 @@
   font-size: 0.8125rem;
 }
 .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form button {
-  background: var(--seams-colors-primary);
+  background: var(--seams-colors-textPrimary);
   border-color: transparent;
-  color: var(--seams-colors-textButton);
+  color: var(--seams-colors-colorBackground);
 }
 .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form button:hover:not(:disabled) {
-  background: var(--seams-colors-buttonHoverBackground);
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textPrimary) 84%,
+    var(--seams-colors-colorBackground)
+  );
 }
 @media (max-width: 480px) {
   .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form {

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal.js

@@ -1,3 +1,5 @@
+import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
 import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
@@ -107,15 +109,15 @@ function deviceStateAttr(view) {
 	return view.kind === "owner" ? "active" : view.device.state;
 }
 /** "today" / "yesterday" / a plain date — never a timestamp with seconds. */
-function friendlyDay(value, now) {
+function friendlyDay(value, now, locale) {
 	const then = new Date(value);
 	const startOfToday = new Date(now);
 	startOfToday.setHours(0, 0, 0, 0);
 	const daysAgo = Math.floor((startOfToday.getTime() - then.setHours(0, 0, 0, 0)) / (1440 * 60 * 1e3));
-	if (daysAgo <= 0) return "today";
-	if (daysAgo === 1) return "yesterday";
-	if (daysAgo < 7) return `${daysAgo} days ago`;
-	return new Date(value).toLocaleDateString(void 0, {
+	if (daysAgo <= 0) return walletText(locale, "today");
+	if (daysAgo === 1) return walletText(locale, "yesterday");
+	if (daysAgo < 7) return walletText(locale, "{value0} days ago", { value0: daysAgo });
+	return new Date(value).toLocaleDateString(locale, {
 		month: "short",
 		day: "numeric",
 		year: "numeric"
@@ -138,16 +140,16 @@ function credentialDescription(credential) {
 * row's title collides with another visible row, the created-at day is
 * appended as a second human disambiguator.
 */
-function deviceMetaLine(view, deviceNumber, titleCollides, now) {
+function deviceMetaLine(view, deviceNumber, titleCollides, now, locale) {
 	const credential = viewCredential(view);
-	const parts = [`Device ${deviceNumber}`];
+	const parts = [walletText(locale, "Device {value0}", { value0: deviceNumber })];
 	if (credential.kind === "passkey") {
-		parts.push(credential.device.synced ? "Synced passkey" : "Passkey");
+		parts.push(walletText(locale, credential.device.synced ? "Synced passkey" : "Passkey"));
 		const provider = credential.device.providerLabel ?? credential.device.provider;
 		if (provider) parts.push(provider);
 	} else parts.push(String(credential.email));
-	if (titleCollides) parts.push(`Added ${friendlyDay(viewCreatedAtMs(view), now)}`);
-	parts.push(`Last used ${friendlyDay(viewLastActivityAtMs(view), now)}`);
+	if (titleCollides) parts.push(walletText(locale, "Added {value0}", { value0: friendlyDay(viewCreatedAtMs(view), now, locale) }));
+	parts.push(walletText(locale, "Last used {value0}", { value0: friendlyDay(viewLastActivityAtMs(view), now, locale) }));
 	return parts.join(" · ");
 }
 /** Icon for the row: what kind of thing holds this credential. */
@@ -165,18 +167,21 @@ function credentialIcon(credential) {
 	});
 }
 /** "sign in with ___ first" — names the actual sibling instead of "the sibling method". */
-function siblingMethodName(siblings) {
+function siblingMethodName(siblings, locale) {
 	if (siblings.length === 1) {
 		const credential = viewCredential(siblings[0]);
-		return credential.kind === "email_otp" ? "your email code" : `your "${credential.device.label}" passkey`;
+		return credential.kind === "email_otp" ? walletText(locale, "your email code") : walletText(locale, "your \"{value0}\" passkey", { value0: credential.device.label });
 	}
-	if (siblings.every((view) => viewCredential(view).kind === "email_otp")) return "your email code";
-	return "another sign-in method";
+	if (siblings.every((view) => viewCredential(view).kind === "email_otp")) return walletText(locale, "your email code");
+	return walletText(locale, "another sign-in method");
 }
-function selectedMethodRemovalHint(target, devices) {
+function selectedMethodRemovalHint(target, devices, locale) {
 	const targetMethodId = String(viewCredential(target).walletAuthMethodId);
 	const siblings = devices.map(({ view }) => view).filter((view) => isActiveWalletMethod(view) && String(viewCredential(view).walletAuthMethodId) !== targetMethodId);
-	return `You're signed in with ${viewCredential(target).kind === "email_otp" ? "your email code" : "this passkey"}. To remove it, sign in with ${siblingMethodName(siblings)} first.`;
+	return walletText(locale, "You're signed in with {value0}. To remove it, sign in with {value1} first.", {
+		value0: walletText(locale, viewCredential(target).kind === "email_otp" ? "your email code" : "this passkey"),
+		value1: siblingMethodName(siblings, locale)
+	});
 }
 function deviceDescription(view, deviceNumber) {
 	return `Device ${deviceNumber}, ${credentialDescription(viewCredential(view))} (ID ${shortDisplayId(viewDisplayId(view))})`;
@@ -201,6 +206,7 @@ function withLinkedDevicesLoadTimeout(promise) {
 	});
 }
 const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
+	const locale = useWalletLocale();
 	const { seams, loginState } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });
 	const [revokeState, setRevokeState] = React.useState({ kind: "idle" });
@@ -292,38 +298,42 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 		dialogRef,
 		contentClassName: "seams-linked-devices-inventory-content",
 		titleId: "seams-linked-devices-modal-title",
-		title: selectedDevice ? "Device details" : "Linked devices",
+		title: walletDisplayText(locale, selectedDevice ? "Device details" : "Linked devices"),
 		children: [selectedDevice ? /* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
-			title: credentialDescription(viewCredential(selectedDevice.view)),
-			description: deviceMetaLine(selectedDevice.view, selectedDevice.deviceNumber, false, Date.now()),
+			title: walletDisplayText(locale, credentialDescription(viewCredential(selectedDevice.view))),
+			description: walletDisplayText(locale, deviceMetaLine(selectedDevice.view, selectedDevice.deviceNumber, false, Date.now(), locale)),
 			details: [{
 				label: "Status",
 				value: deviceStateAttr(selectedDevice.view)
 			}]
 		}) : /* @__PURE__ */ jsx("p", {
 			className: "seams-linked-devices-modal-subtitle",
-			children: "Anything listed here can unlock this wallet."
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Anything listed here can unlock this wallet." })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "seams-linked-devices-modal-body",
 			children: [
 				loadState.kind === "loading" || loadState.kind === "idle" ? /* @__PURE__ */ jsx("div", {
 					className: "seams-linked-devices-modal-placeholder",
 					role: "status",
-					children: "Checking your devices…"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Checking your devices…" })
 				}) : null,
 				loadState.kind === "error" ? /* @__PURE__ */ jsxs("div", {
 					className: "seams-linked-devices-modal-placeholder",
 					role: "alert",
-					children: [/* @__PURE__ */ jsxs("span", { children: ["Unable to load your devices: ", loadState.message] }), /* @__PURE__ */ jsx("button", {
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx(WalletText, { message: "Unable to load your devices:" }),
+						" ",
+						/* @__PURE__ */ jsx(WalletText, { copy: loadState.message })
+					] }), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: "seams-linked-devices-modal-secondary",
 						onClick: () => void loadDevices(),
-						children: "Try again"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Try again" })
 					})]
 				}) : null,
 				showEmpty ? /* @__PURE__ */ jsx("div", {
 					className: "seams-linked-devices-modal-placeholder",
-					children: "No other devices are using this wallet."
+					children: /* @__PURE__ */ jsx(WalletText, { message: "No other devices are using this wallet." })
 				}) : null,
 				devices.length > 0 ? /* @__PURE__ */ jsx("ul", {
 					className: "seams-linked-devices-modal-list seams-linked-devices-modal-list--grouped",
@@ -342,8 +352,8 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 						if (presentation === "embedded" && !selectedDevice) return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
 							kind: viewCredential(view).kind,
 							icon: credentialIcon(viewCredential(view)),
-							title,
-							description: deviceMetaLine(view, deviceNumber, titleCollides, Date.now()),
+							title: walletDisplayText(locale, title),
+							description: walletDisplayText(locale, deviceMetaLine(view, deviceNumber, titleCollides, Date.now(), locale)),
 							onSelect: setSelectedDeviceId.bind(null, cardId)
 						}, cardId);
 						return /* @__PURE__ */ jsxs("li", {
@@ -364,41 +374,40 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 											className: "seams-linked-devices-modal-item-main",
 											children: [/* @__PURE__ */ jsx("span", {
 												className: "seams-linked-devices-modal-item-name",
-												children: title
+												children: /* @__PURE__ */ jsx(WalletText, { copy: title })
 											}), chip ? /* @__PURE__ */ jsx("span", {
 												className: `seams-linked-devices-modal-standing tone-${chip.tone}`,
-												children: chip.label
+												children: /* @__PURE__ */ jsx(WalletText, { copy: chip.label })
 											}) : null]
 										}),
 										/* @__PURE__ */ jsx("div", {
 											className: "seams-linked-devices-modal-item-detail",
-											children: deviceMetaLine(view, deviceNumber, titleCollides, Date.now())
+											children: /* @__PURE__ */ jsx(WalletText, { copy: deviceMetaLine(view, deviceNumber, titleCollides, Date.now(), locale) })
 										}),
 										isSelectedMethod && hasRemovableSibling ? /* @__PURE__ */ jsxs("div", {
 											className: "seams-linked-devices-modal-hint",
 											children: [/* @__PURE__ */ jsx(LockIcon, {
 												size: 15,
 												strokeWidth: 1.75
-											}), /* @__PURE__ */ jsx("span", { children: selectedMethodRemovalHint(view, devices) })]
+											}), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: selectedMethodRemovalHint(view, devices, locale) }) })]
 										}) : null,
 										confirming ? /* @__PURE__ */ jsxs("div", {
 											className: "seams-linked-devices-modal-confirm",
-											children: [/* @__PURE__ */ jsxs("span", { children: [
-												"Remove ",
-												title,
-												"? It will lose access right away."
-											] }), /* @__PURE__ */ jsxs("div", {
+											children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, {
+												message: "Remove {value0}? It will lose access right away.",
+												values: { value0: title }
+											}) }), /* @__PURE__ */ jsxs("div", {
 												className: "seams-linked-devices-modal-confirm-actions",
 												children: [/* @__PURE__ */ jsx("button", {
 													type: "button",
 													className: "seams-linked-devices-modal-secondary",
 													onClick: () => setRevokeState({ kind: "idle" }),
-													children: "Keep it"
+													children: /* @__PURE__ */ jsx(WalletText, { message: "Keep it" })
 												}), /* @__PURE__ */ jsx("button", {
 													type: "button",
 													className: "seams-linked-devices-modal-danger",
 													onClick: () => void revokeMethod(view, deviceNumber),
-													children: "Yes, remove"
+													children: /* @__PURE__ */ jsx(WalletText, { message: "Yes, remove" })
 												})]
 											})]
 										}) : null
@@ -408,12 +417,12 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 									type: "button",
 									className: "seams-linked-devices-modal-secondary seams-linked-devices-modal-remove",
 									disabled: revocationInProgress,
-									"aria-label": `Remove ${deviceDescription(view, deviceNumber)}`,
+									"aria-label": walletDisplayText(locale, `Remove ${deviceDescription(view, deviceNumber)}`),
 									onClick: () => setRevokeState({
 										kind: "confirming",
 										walletAuthMethodId
 									}),
-									children: working ? "Removing…" : "Remove"
+									children: working ? /* @__PURE__ */ jsx(WalletText, { message: "Removing…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Remove" })
 								}) : null
 							]
 						}, cardId);
@@ -422,13 +431,13 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation }) => {
 				revokeState.kind === "error" ? /* @__PURE__ */ jsx("div", {
 					className: "seams-linked-devices-modal-error",
 					role: "alert",
-					children: revokeState.message
+					children: /* @__PURE__ */ jsx(WalletText, { copy: revokeState.message })
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-linked-devices-modal-live",
 					role: "status",
 					"aria-live": "polite",
-					children: announcement
+					children: /* @__PURE__ */ jsx(WalletText, { copy: announcement })
 				})
 			]
 		})]

package/dist/esm/react/components/AccountMenuButton/LockMenuItem.js

@@ -1,4 +1,5 @@
 import { blinkMenuItem } from "../../../utils/menuItemBlink.js";
+import { WalletText } from "../../context/WalletLocale.js";
 import LogOutIcon from "./icons/LogOutIcon2.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ const LockMenuItem = memo(({ onLock, className, style }) => {
 			className: "seams-dropdown-menu-item-content",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "seams-dropdown-menu-item-label",
-				children: "Lock Wallet"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Lock Wallet" })
 			})
 		})]
 	});

package/dist/esm/react/components/AccountMenuButton/MenuItem.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import { HoverArrowIcon } from "./icons/HoverArrowIcon.js";
 import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -30,10 +31,10 @@ const MenuItem = memo(forwardRef(({ item, onClose, className, style, isHighlight
 				className: "seams-dropdown-menu-item-content",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "seams-dropdown-menu-item-label",
-					children: item.label
+					children: /* @__PURE__ */ jsx(WalletText, { copy: item.label })
 				}), /* @__PURE__ */ jsx("div", {
 					className: "seams-dropdown-menu-item-description",
-					children: item.description
+					children: /* @__PURE__ */ jsx(WalletText, { copy: item.description })
 				})]
 			}),
 			!item.disabled ? /* @__PURE__ */ jsx(HoverArrowIcon, {}) : null

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown.js

@@ -1,3 +1,5 @@
+import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { MenuItem } from "./MenuItem.js";
 import { LockMenuItem } from "./LockMenuItem.js";
 import "react";
@@ -23,10 +25,11 @@ function storeMenuRef(refs, index, element) {
 	refs.current[index] = element;
 }
 function MenuGroup({ label, items, props }) {
+	const locale = useWalletLocale();
 	return /* @__PURE__ */ jsxs("section", {
 		className: "seams-account-menu-group",
-		"aria-label": label,
-		children: [/* @__PURE__ */ jsx("h3", { children: label }), items.map(renderItem.bind(null, props))]
+		"aria-label": walletDisplayText(locale, label),
+		children: [/* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(WalletText, { copy: label }) }), items.map(renderItem.bind(null, props))]
 	});
 }
 function renderItem(props, item) {
@@ -39,17 +42,18 @@ function renderItem(props, item) {
 	}, item.id);
 }
 function ProfileDropdown(props) {
+	const locale = useWalletLocale();
 	props.menuItemsRef.current.length = props.menuItems.length;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "seams-profile-dropdown-menu",
 		children: [
 			/* @__PURE__ */ jsx(MenuGroup, {
-				label: "Addresses",
+				label: walletText(locale, "Addresses"),
 				items: props.menuItems.filter(isAccountItem),
 				props
 			}),
 			/* @__PURE__ */ jsx(MenuGroup, {
-				label: "Security & devices",
+				label: walletText(locale, "Security & devices"),
 				items: props.menuItems.filter(isSecurityItem).sort(compareSecurityItems),
 				props
 			}),

package/dist/esm/react/components/AccountMenuButton/RecoveryCodeAcknowledgement.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/RecoveryCodeAcknowledgement.tsx
@@ -12,13 +13,13 @@ function RecoveryCodeAcknowledgement({ onDone }) {
 			type: "checkbox",
 			checked: acknowledged,
 			onChange: updateAcknowledgement.bind(null, setAcknowledged)
-		}), /* @__PURE__ */ jsx("span", { children: "I’ve saved these codes. They won’t be shown again." })]
+		}), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "I’ve saved these codes. They won’t be shown again." }) })]
 	}), /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: "seams-account-action primary",
 		disabled: !acknowledged,
 		onClick: onDone,
-		children: "Done"
+		children: /* @__PURE__ */ jsx(WalletText, { message: "Done" })
 	})] });
 }
 //#endregion

package/dist/esm/react/components/AccountMenuButton/RecoveryCodeActions.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/RecoveryCodeActions.tsx
@@ -33,18 +34,18 @@ function RecoveryCodeActions({ codes }) {
 			type: "button",
 			className: "seams-account-action",
 			onClick: copyCodes.bind(null, codes, setFeedback),
-			children: "Copy all"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Copy all" })
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "seams-account-action",
 			onClick: downloadCodes.bind(null, codes, setFeedback),
-			children: "Download all"
+			children: /* @__PURE__ */ jsx(WalletText, { message: "Download all" })
 		})]
 	}), /* @__PURE__ */ jsx("p", {
 		className: "seams-recovery-code-action-status",
 		role: "status",
 		"aria-live": "polite",
-		children: feedback
+		children: /* @__PURE__ */ jsx(WalletText, { copy: feedback })
 	})] });
 }
 //#endregion

package/dist/esm/react/components/AccountMenuButton/SegmentedControl.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/SegmentedControl.tsx
@@ -64,7 +65,7 @@ const SegmentedControl = ({ items, value, onValueChange, activeBg, height, radiu
 					disabled: !!item.disabled,
 					onClick: () => onValueChange(item.value),
 					style: itemStyle,
-					children: item.label ?? String(item.value)
+					children: typeof item.label === "string" ? /* @__PURE__ */ jsx(WalletText, { copy: item.label }) : item.label ?? String(item.value)
 				}, String(item.value));
 			})
 		})]

package/dist/esm/react/components/AccountMenuButton/TransactionSettingsSection.js

@@ -1,3 +1,4 @@
+import { WalletText } from "../../context/WalletLocale.js";
 import SegmentedControl from "./SegmentedControl.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -26,8 +27,8 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 			className: "seams-transaction-group",
 			disabled: disableAll,
 			children: [
-				/* @__PURE__ */ jsx("legend", { children: "Review appearance" }),
-				/* @__PURE__ */ jsx("p", { children: "Choose where transaction details appear before signing." }),
+				/* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(WalletText, { message: "Review appearance" }) }),
+				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Choose where transaction details appear before signing." }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-transaction-choices",
 					children: UI_CHOICES.map(renderUiChoice.bind(null, currentConfirmConfig.uiMode ?? "modal", onSetUiMode))
@@ -37,8 +38,8 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 			className: "seams-transaction-group",
 			disabled: disableAll || disableRequireClick,
 			children: [
-				/* @__PURE__ */ jsx("legend", { children: "Confirmation step" }),
-				/* @__PURE__ */ jsx("p", { children: disableRequireClick ? "Choose Modal or Drawer to configure the confirmation step." : "Choose whether to click Continue before authentication starts." }),
+				/* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation step" }) }),
+				/* @__PURE__ */ jsx("p", { children: disableRequireClick ? /* @__PURE__ */ jsx(WalletText, { message: "Choose Modal or Drawer to configure the confirmation step." }) : /* @__PURE__ */ jsx(WalletText, { message: "Choose whether to click Continue before authentication starts." }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-transaction-choices seams-transaction-choices--two",
 					children: BEHAVIOR_CHOICES.map(renderBehaviorChoice.bind(null, currentConfirmConfig, onSetDelay, onToggleSkipClick))
@@ -65,7 +66,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 					},
 					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 						className: "seams-confirmation-options",
-						children: "Confirmer UI"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmer UI" })
 					}), /* @__PURE__ */ jsx("div", {
 						style: { width: "100%" },
 						children: /* @__PURE__ */ jsx(SegmentedControl, {
@@ -107,7 +108,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 						},
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "seams-confirmation-options",
-							children: "Confirmation Options"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation Options" })
 						}), /* @__PURE__ */ jsx("div", {
 							style: { width: "100%" },
 							children: /* @__PURE__ */ jsx(SegmentedControl, {
@@ -183,8 +184,8 @@ function renderUiChoice(selected, onSelect, choice) {
 				className: "seams-transaction-choice-indicator",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ jsx("strong", { children: choice.label }),
-			/* @__PURE__ */ jsx("span", { children: choice.description })
+			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
 		]
 	}, choice.value);
 }
@@ -204,8 +205,8 @@ function renderBehaviorChoice(config, setDelay, toggle, choice) {
 				className: "seams-transaction-choice-indicator",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ jsx("strong", { children: choice.label }),
-			/* @__PURE__ */ jsx("span", { children: choice.description })
+			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
+			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
 		]
 	}, choice.value);
 }

package/dist/esm/react/components/AccountMenuButton/UserAccountButton.css

@@ -15,6 +15,7 @@
   padding: 4px 12px 4px 4px;
   border-radius: 6px;
   width: fit-content;
+  cursor: pointer;
 }
 
 .seams-user-account-button-trigger .hide-username {

package/dist/esm/react/components/AccountMenuButton/UserAccountButton.js

@@ -1,8 +1,11 @@
+import { walletDisplayText } from "../../../core/ui/messages.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/UserAccountButton.tsx
 const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAccountId, emailAddress, isOpen, onClick, onMouseEnter, onMouseLeave, theme = "dark", menuId, triggerId }) => {
+	const locale = useWalletLocale();
 	const onKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -33,7 +36,7 @@ const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAcc
 						strokeWidth: 1.4
 					})
 				}), !hideWhenClosed && /* @__PURE__ */ jsx(UserAccountId, {
-					label,
+					label: walletDisplayText(locale, label),
 					username,
 					fullAccountId,
 					emailAddress,
@@ -45,23 +48,24 @@ const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAcc
 	});
 };
 const UserAccountId = ({ label, username, fullAccountId, emailAddress, isOpen }) => {
+	const locale = useWalletLocale();
 	const displayAccountId = (fullAccountId || username || "").trim();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "seams-user-account--user-details",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "seams-user-account--username",
-				children: label
+				children: /* @__PURE__ */ jsx(WalletText, { copy: label })
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": !isOpen,
-				title: displayAccountId || void 0,
+				title: walletDisplayText(locale, displayAccountId || void 0),
 				className: `seams-user-account--account-id ${isOpen ? "visible" : "hidden"}`,
 				children: displayAccountId
 			}),
 			emailAddress && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": !isOpen,
-				title: emailAddress,
+				title: walletDisplayText(locale, emailAddress),
 				className: `seams-user-account--email ${isOpen ? "visible" : "hidden"}`,
 				children: emailAddress
 			})