@seams/wallet 0.15.6 → 0.18.0

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/PasskeyRegistrationContent.js

@@ -1,3 +1,5 @@
+import { walletText } from "../../../../ui/messages.js";
+import { WalletLocaleContext, WalletText } from "./WalletLocale.js";
 import { PasskeyHaloLoading } from "./PasskeyHaloLoading.js";
 import { PasskeyRegistrationDetails } from "./PasskeyRegistrationDetails.js";
 import { Component } from "preact";
@@ -5,15 +7,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 //#region src/core/signingEngine/uiConfirm/ui/preact/PasskeyRegistrationContent.tsx
 /** @jsxImportSource preact */
 var PasskeyRegistrationContent = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.confirm = () => {
-			if (this.props.decision.kind === "ready") this.props.decision.onConfirm();
-		};
-		this.cancel = () => {
-			this.props.onCancel();
-		};
-	}
+	static contextType = WalletLocaleContext;
+	confirm = () => {
+		if (this.props.decision.kind === "ready") this.props.decision.onConfirm();
+	};
+	cancel = () => {
+		this.props.onCancel();
+	};
 	render() {
 		const creating = this.props.decision.kind === "creating";
 		return /* @__PURE__ */ jsxs("div", {
@@ -31,16 +31,16 @@ var PasskeyRegistrationContent = class extends Component {
 						class: "hero-container passkey-registration-confirm__hero-copy",
 						children: [/* @__PURE__ */ jsx("h2", {
 							class: "hero-heading",
-							children: this.props.heading
+							children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.heading })
 						}), /* @__PURE__ */ jsx("p", {
 							class: "passkey-registration-confirm__body",
-							children: this.props.body
+							children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.body })
 						})]
 					})]
 				}),
 				this.props.errorMessage && /* @__PURE__ */ jsx("div", {
 					class: "error-banner",
-					children: this.props.errorMessage
+					children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.errorMessage })
 				}),
 				/* @__PURE__ */ jsx(PasskeyRegistrationDetails, { display: this.props.display }),
 				/* @__PURE__ */ jsxs("div", {
@@ -49,7 +49,7 @@ var PasskeyRegistrationContent = class extends Component {
 						type: "button",
 						class: "btn btn-cancel",
 						onClick: this.cancel,
-						children: this.props.cancelText
+						children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.cancelText })
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						class: "btn btn-confirm",
@@ -58,11 +58,11 @@ var PasskeyRegistrationContent = class extends Component {
 						children: creating ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 							class: "loading-indicator passkey-registration-confirm__spinner",
 							role: "progressbar",
-							"aria-label": "Creating passkey"
+							"aria-label": walletText(this.context, "Creating passkey")
 						}), /* @__PURE__ */ jsx("span", {
 							class: "passkey-registration-confirm__busy-label",
-							children: "Creating passkey..."
-						})] }) : "Create passkey"
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Creating passkey..." })
+						})] }) : /* @__PURE__ */ jsx(WalletText, { message: "Create passkey" })
 					})]
 				})
 			]

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/PasskeyRegistrationDetails.js

@@ -1,27 +1,31 @@
+import { walletDisplayText, walletText } from "../../../../ui/messages.js";
+import { WalletText, useWalletLocale } from "./WalletLocale.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
 //#region src/core/signingEngine/uiConfirm/ui/preact/PasskeyRegistrationDetails.tsx
+/** @jsxImportSource preact */
 function PasskeyRegistrationDetails(props) {
+	const locale = useWalletLocale();
 	return /* @__PURE__ */ jsxs("div", {
 		class: "passkey-registration-confirm__identity",
-		"aria-label": "Passkey registration details",
+		"aria-label": walletText(locale, "Passkey registration details"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			class: "passkey-registration-confirm__row",
 			children: [/* @__PURE__ */ jsx("span", {
 				class: "passkey-registration-confirm__label",
-				children: "Account"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Account" })
 			}), /* @__PURE__ */ jsx("span", {
 				class: "passkey-registration-confirm__value",
-				title: props.display.intendedUserName,
+				title: walletDisplayText(locale, props.display.intendedUserName),
 				children: props.display.intendedUserName
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			class: "passkey-registration-confirm__row",
 			children: [/* @__PURE__ */ jsx("span", {
 				class: "passkey-registration-confirm__label",
-				children: "Website"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Website" })
 			}), /* @__PURE__ */ jsx("span", {
 				class: "passkey-registration-confirm__value",
-				title: props.display.rpId,
+				title: walletDisplayText(locale, props.display.rpId),
 				children: props.display.rpId
 			})]
 		})]

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/RecoveryCodeBackupSurface.js

@@ -1,3 +1,5 @@
+import { walletText } from "../../../../ui/messages.js";
+import { WalletLocaleContext, WalletText } from "./WalletLocale.js";
 import { Component, createRef } from "preact";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 //#region src/core/signingEngine/uiConfirm/ui/preact/RecoveryCodeBackupSurface.tsx
@@ -119,109 +121,13 @@ function renderRecoveryCodeItem(code, index) {
 	}, `${index}-${code}`);
 }
 var RecoveryCodeBackupSurface = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.state = initialState(this.props.experience);
-		this.root = createRef();
-		this.active = false;
-		this.loadGeneration = 0;
-		this.copiedResetTimer = null;
-		this.focusFrame = null;
-		this.retryStatus = () => {
-			const experience = this.props.experience;
-			if (experience.kind !== "account_menu") return;
-			const current = this.state.viewState;
-			if (current.kind !== "summary") return;
-			const generation = ++this.loadGeneration;
-			this.setState({ viewState: {
-				...current,
-				loadState: { kind: "loading" },
-				actionError: null
-			} });
-			this.loadSummaryStatus(experience, generation);
-		};
-		this.openRecoveryCodes = async () => {
-			const experience = this.props.experience;
-			const current = this.state.viewState;
-			if (experience.kind !== "account_menu" || current.kind !== "summary") return;
-			const generation = this.loadGeneration;
-			this.setState({ viewState: {
-				...current,
-				kind: "opening",
-				actionError: null
-			} });
-			try {
-				const request = await experience.loadPendingBackup();
-				if (!this.active || generation !== this.loadGeneration) return;
-				if (!request) {
-					this.setState({ viewState: {
-						...current,
-						actionError: "Recovery codes are no longer available on this device."
-					} });
-					return;
-				}
-				this.setState({ viewState: {
-					kind: "recovery_codes",
-					request
-				} });
-			} catch (error) {
-				if (!this.active || generation !== this.loadGeneration) return;
-				this.setState({ viewState: {
-					...current,
-					actionError: errorMessage(error, "Could not open recovery codes")
-				} });
-			}
-		};
-		this.closeSummary = () => {
-			this.props.onClose({ kind: "dismissed" });
-		};
-		this.closeRecoveryCodes = () => {
-			this.props.onClose({
-				kind: "recovery_codes",
-				acknowledged: this.state.acknowledged
-			});
-		};
-		this.onAcknowledgementChange = (event) => {
-			if (!(event.currentTarget instanceof HTMLInputElement)) return;
-			this.setState({ acknowledged: event.currentTarget.checked });
-		};
-		this.download = () => {
-			const viewState = this.state.viewState;
-			if (viewState.kind !== "recovery_codes") return;
-			const view = this.root.current?.ownerDocument.defaultView;
-			if (!view) return;
-			const { walletId, recoveryCodes } = viewState.request;
-			try {
-				const url = view.URL.createObjectURL(new view.Blob([backupText(walletId, recoveryCodes)], { type: "text/plain;charset=utf-8" }));
-				const anchor = view.document.createElement("a");
-				anchor.href = url;
-				anchor.download = `seams-wallet-recovery-codes-${safeWalletId(walletId)}.txt`;
-				try {
-					anchor.click();
-				} finally {
-					view.setTimeout(() => view.URL.revokeObjectURL(url), 0);
-				}
-				this.setState({ statusMessage: "Recovery codes downloaded." });
-			} catch {
-				this.setState({ statusMessage: "Unable to download the codes. Copy them or try again." });
-			}
-		};
-		this.copy = async () => {
-			const viewState = this.state.viewState;
-			if (viewState.kind !== "recovery_codes" || !this.active) return;
-			const { walletId, recoveryCodes } = viewState.request;
-			const generation = this.loadGeneration;
-			try {
-				await navigator.clipboard.writeText(backupText(walletId, recoveryCodes));
-				if (!this.active || generation !== this.loadGeneration) return;
-				this.setState({ statusMessage: "Recovery codes copied." });
-				this.flashCopied();
-			} catch {
-				if (!this.active || generation !== this.loadGeneration) return;
-				this.setState({ statusMessage: "Unable to copy the codes. Download them or try again." });
-			}
-		};
-	}
+	static contextType = WalletLocaleContext;
+	state = initialState(this.props.experience);
+	root = createRef();
+	active = false;
+	loadGeneration = 0;
+	copiedResetTimer = null;
+	focusFrame = null;
 	componentDidMount() {
 		this.active = true;
 		this.loadGeneration += 1;
@@ -288,6 +194,100 @@ var RecoveryCodeBackupSurface = class extends Component {
 			loadState
 		} });
 	}
+	retryStatus = () => {
+		const experience = this.props.experience;
+		if (experience.kind !== "account_menu") return;
+		const current = this.state.viewState;
+		if (current.kind !== "summary") return;
+		const generation = ++this.loadGeneration;
+		this.setState({ viewState: {
+			...current,
+			loadState: { kind: "loading" },
+			actionError: null
+		} });
+		this.loadSummaryStatus(experience, generation);
+	};
+	openRecoveryCodes = async () => {
+		const experience = this.props.experience;
+		const current = this.state.viewState;
+		if (experience.kind !== "account_menu" || current.kind !== "summary") return;
+		const generation = this.loadGeneration;
+		this.setState({ viewState: {
+			...current,
+			kind: "opening",
+			actionError: null
+		} });
+		try {
+			const request = await experience.loadPendingBackup();
+			if (!this.active || generation !== this.loadGeneration) return;
+			if (!request) {
+				this.setState({ viewState: {
+					...current,
+					actionError: "Recovery codes are no longer available on this device."
+				} });
+				return;
+			}
+			this.setState({ viewState: {
+				kind: "recovery_codes",
+				request
+			} });
+		} catch (error) {
+			if (!this.active || generation !== this.loadGeneration) return;
+			this.setState({ viewState: {
+				...current,
+				actionError: errorMessage(error, "Could not open recovery codes")
+			} });
+		}
+	};
+	closeSummary = () => {
+		this.props.onClose({ kind: "dismissed" });
+	};
+	closeRecoveryCodes = () => {
+		this.props.onClose({
+			kind: "recovery_codes",
+			acknowledged: this.state.acknowledged
+		});
+	};
+	onAcknowledgementChange = (event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		this.setState({ acknowledged: event.currentTarget.checked });
+	};
+	download = () => {
+		const viewState = this.state.viewState;
+		if (viewState.kind !== "recovery_codes") return;
+		const view = this.root.current?.ownerDocument.defaultView;
+		if (!view) return;
+		const { walletId, recoveryCodes } = viewState.request;
+		try {
+			const url = view.URL.createObjectURL(new view.Blob([backupText(walletId, recoveryCodes)], { type: "text/plain;charset=utf-8" }));
+			const anchor = view.document.createElement("a");
+			anchor.href = url;
+			anchor.download = `seams-wallet-recovery-codes-${safeWalletId(walletId)}.txt`;
+			try {
+				anchor.click();
+			} finally {
+				view.setTimeout(() => view.URL.revokeObjectURL(url), 0);
+			}
+			this.setState({ statusMessage: "Recovery codes downloaded." });
+		} catch {
+			this.setState({ statusMessage: "Unable to download the codes. Copy them or try again." });
+		}
+	};
+	copy = async () => {
+		const viewState = this.state.viewState;
+		if (viewState.kind !== "recovery_codes" || !this.active) return;
+		const { walletId, recoveryCodes } = viewState.request;
+		const generation = this.loadGeneration;
+		try {
+			await navigator.clipboard.writeText(backupText(walletId, recoveryCodes));
+			if (!this.active || generation !== this.loadGeneration) return;
+			this.setState({ statusMessage: "Recovery codes copied." });
+			this.flashCopied();
+		} catch {
+			if (!this.active || generation !== this.loadGeneration) return;
+			this.setState({ statusMessage: "Unable to copy the codes. Download them or try again." });
+		}
+	};
 	flashCopied() {
 		const view = this.root.current?.ownerDocument.defaultView;
 		if (!view) return;
@@ -325,7 +325,7 @@ var RecoveryCodeBackupSurface = class extends Component {
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				class: "recovery-summary-close",
-				"aria-label": "Close recovery codes",
+				"aria-label": walletText(this.context, "Close recovery codes"),
 				onClick: this.closeSummary,
 				children: /* @__PURE__ */ jsx("svg", {
 					"aria-hidden": "true",
@@ -339,19 +339,19 @@ var RecoveryCodeBackupSurface = class extends Component {
 				id: "seams-wallet-recovery-title",
 				class: "recovery-backup-title",
 				tabIndex: -1,
-				children: "Wallet recovery codes"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet recovery codes" })
 			}),
 			/* @__PURE__ */ jsx("p", {
 				id: "seams-wallet-recovery-description",
 				class: "recovery-backup-description",
-				children: "View and save the recovery codes retained by this wallet after registration."
+				children: /* @__PURE__ */ jsx(WalletText, { message: "View and save the recovery codes retained by this wallet after registration." })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				class: "recovery-summary-body",
 				children: [
 					/* @__PURE__ */ jsx("h2", {
 						class: "recovery-summary-section-label",
-						children: "Security"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Security" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						class: "recovery-summary-item",
@@ -365,15 +365,15 @@ var RecoveryCodeBackupSurface = class extends Component {
 								class: "recovery-summary-item-text",
 								children: [/* @__PURE__ */ jsx("span", {
 									class: "recovery-summary-item-title",
-									children: "Recovery codes"
+									children: /* @__PURE__ */ jsx(WalletText, { message: "Recovery codes" })
 								}), /* @__PURE__ */ jsx("span", {
 									class: "recovery-summary-item-detail",
-									children: activeCodesDetail(state.loadState)
+									children: /* @__PURE__ */ jsx(WalletText, { copy: activeCodesDetail(state.loadState) })
 								})]
 							}),
 							/* @__PURE__ */ jsx("span", {
 								class: "recovery-summary-badge",
-								children: statusValue(state.loadState)
+								children: /* @__PURE__ */ jsx(WalletText, { copy: statusValue(state.loadState) })
 							})
 						]
 					}),
@@ -387,7 +387,7 @@ var RecoveryCodeBackupSurface = class extends Component {
 							class: "recovery-summary-item-text",
 							children: [/* @__PURE__ */ jsx("span", {
 								class: "recovery-summary-item-title",
-								children: "Wallet"
+								children: /* @__PURE__ */ jsx(WalletText, { message: "Wallet" })
 							}), /* @__PURE__ */ jsx("span", {
 								class: "recovery-summary-item-detail",
 								children: state.walletId
@@ -399,7 +399,7 @@ var RecoveryCodeBackupSurface = class extends Component {
 						class: "recovery-backup-button secondary recovery-summary-open",
 						disabled: opening,
 						onClick: this.openRecoveryCodes,
-						children: opening ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Opening recovery codes", /* @__PURE__ */ jsxs("span", {
+						children: opening ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(WalletText, { message: "Opening recovery codes" }), /* @__PURE__ */ jsxs("span", {
 							class: "recovery-summary-ellipsis",
 							"aria-hidden": "true",
 							children: [
@@ -407,29 +407,29 @@ var RecoveryCodeBackupSurface = class extends Component {
 								/* @__PURE__ */ jsx("span", { children: "." }),
 								/* @__PURE__ */ jsx("span", { children: "." })
 							]
-						})] }) : "View recovery codes"
+						})] }) : /* @__PURE__ */ jsx(WalletText, { message: "View recovery codes" })
 					}),
 					/* @__PURE__ */ jsx("p", {
 						class: "recovery-summary-live-status",
 						role: "status",
 						"aria-live": "polite",
-						children: state.loadState.kind === "loading" ? "Loading recovery-code status…" : ""
+						children: state.loadState.kind === "loading" ? /* @__PURE__ */ jsx(WalletText, { message: "Loading recovery-code status…" }) : ""
 					}),
 					statusFailure && /* @__PURE__ */ jsx("p", {
 						class: "recovery-summary-error",
 						role: "alert",
-						children: statusFailure
+						children: /* @__PURE__ */ jsx(WalletText, { copy: statusFailure })
 					}),
 					state.actionError && /* @__PURE__ */ jsx("p", {
 						class: "recovery-summary-error",
 						role: "alert",
-						children: state.actionError
+						children: /* @__PURE__ */ jsx(WalletText, { copy: state.actionError })
 					}),
 					state.loadState.kind === "error" && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						class: "recovery-backup-button secondary",
 						onClick: this.retryStatus,
-						children: "Retry status"
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Retry status" })
 					})
 				]
 			})
@@ -442,18 +442,21 @@ var RecoveryCodeBackupSurface = class extends Component {
 				id: "seams-wallet-recovery-title",
 				class: "recovery-backup-title",
 				tabIndex: -1,
-				children: "Save your recovery codes"
+				children: /* @__PURE__ */ jsx(WalletText, { message: "Save your recovery codes" })
 			}),
 			/* @__PURE__ */ jsx("p", {
 				id: "seams-wallet-recovery-description",
 				class: "recovery-backup-description",
-				children: description
+				children: /* @__PURE__ */ jsx(WalletText, { copy: description })
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				class: "recovery-code-sheet",
 				children: [/* @__PURE__ */ jsxs("div", {
 					class: "recovery-code-sheet-heading",
-					children: [/* @__PURE__ */ jsx("span", { children: "Recovery codes" }), /* @__PURE__ */ jsxs("span", { children: [request.recoveryCodes.length, " single-use codes"] })]
+					children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Recovery codes" }) }), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, {
+						message: "{value0} single-use codes",
+						values: { value0: request.recoveryCodes.length }
+					}) })]
 				}), /* @__PURE__ */ jsx("ol", {
 					class: "recovery-code-list",
 					children: request.recoveryCodes.map(renderRecoveryCodeItem)
@@ -465,12 +468,12 @@ var RecoveryCodeBackupSurface = class extends Component {
 					type: "button",
 					class: "recovery-backup-button primary",
 					onClick: this.download,
-					children: "Download codes"
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Download codes" })
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					class: `recovery-backup-button secondary recovery-backup-copy${this.state.copied ? " copied" : ""}`,
 					onClick: this.copy,
-					children: [/* @__PURE__ */ jsx(CopyIcon, {}), "Copy codes"]
+					children: [/* @__PURE__ */ jsx(CopyIcon, {}), /* @__PURE__ */ jsx(WalletText, { message: "Copy codes" })]
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -482,19 +485,19 @@ var RecoveryCodeBackupSurface = class extends Component {
 						"data-seams-wallet-recovery-backup-acknowledgement": true,
 						checked: this.state.acknowledged,
 						onChange: this.onAcknowledgementChange
-					}), /* @__PURE__ */ jsxs("span", { children: ["I saved these recovery codes somewhere safe.", /* @__PURE__ */ jsx("small", { children: "They won’t be shown again after you finish." })] })]
+					}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(WalletText, { message: "I saved these recovery codes somewhere safe." }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { message: "They won’t be shown again after you finish." }) })] })]
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					class: `recovery-backup-button ${this.state.acknowledged ? "primary" : "secondary"}`,
 					"data-seams-wallet-recovery-backup-close": true,
 					onClick: this.closeRecoveryCodes,
-					children: recoveryCloseLabel(request, this.state.acknowledged)
+					children: /* @__PURE__ */ jsx(WalletText, { copy: recoveryCloseLabel(request, this.state.acknowledged) })
 				})]
 			}),
 			/* @__PURE__ */ jsx("p", {
 				class: "recovery-backup-status",
 				role: "status",
-				children: this.state.statusMessage
+				children: /* @__PURE__ */ jsx(WalletText, { copy: this.state.statusMessage })
 			})
 		] });
 	}

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/ReviewDisclosure.js

@@ -1,3 +1,4 @@
+import { WalletText } from "./WalletLocale.js";
 import { announceClampedSurfaceResize } from "../confirm-surface-resize.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { Component, createRef } from "preact";
@@ -6,82 +7,12 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 /** @jsxImportSource preact */
 let nextDisclosureId = 0;
 var ReviewDisclosure = class extends Component {
-	constructor(..._args) {
-		super(..._args);
-		this.root = createRef();
-		this.id = `seams-review-disclosure-${++nextDisclosureId}`;
-		this.motion = null;
-		this.setHeight = (height) => {
-			const details = this.root.current;
-			if (!details) return;
-			confirmationDocumentStyles(details.ownerDocument).setDynamicDeclarations(this.id, `#${this.id}`, { "--seams-review-disclosure-height": `${height}px` });
-		};
-		this.finish = () => {
-			if (this.root.current && this.motion) {
-				this.root.current.open = this.motion.opening;
-				this.root.current.removeAttribute("data-closing");
-			}
-			this.clearMotion();
-		};
-		this.toggle = (event) => {
-			const details = this.root.current;
-			if (!details) return;
-			event.preventDefault();
-			if (this.motion?.kind === "hosted") return;
-			const opening = this.motion ? !this.motion.opening : !details.open;
-			const body = details.lastElementChild;
-			if (!(body instanceof HTMLElement)) return;
-			const height = details.open ? body.getBoundingClientRect().height : 0;
-			this.clearMotion();
-			details.toggleAttribute("data-closing", !opening);
-			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !details.animate) {
-				details.open = opening;
-				details.removeAttribute("data-closing");
-				return;
-			}
-			details.open = true;
-			details.setAttribute("data-resizing", "");
-			const target = opening ? body.scrollHeight : 0;
-			this.motion = {
-				kind: "hosted",
-				opening
-			};
-			if (announceClampedSurfaceResize({
-				element: body,
-				reason: "review-details",
-				fromCssPx: height,
-				toCssPx: target,
-				drivenClasses: ["seams-review-disclosure-driven"],
-				setHeightCssPx: this.setHeight,
-				onSettled: this.finish
-			})) return;
-			const size = body.animate([{
-				height: `${height}px`,
-				overflow: "hidden"
-			}, {
-				height: `${target}px`,
-				overflow: "hidden"
-			}], {
-				duration: opening ? 220 : 180,
-				easing: "cubic-bezier(.2,0,0,1)",
-				fill: "both"
-			});
-			this.motion = {
-				kind: "local",
-				opening,
-				size,
-				fade: body.animate(opening ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
-					duration: opening ? 180 : 100,
-					easing: "ease-out",
-					fill: "both"
-				})
-			};
-			size.onfinish = this.finish;
-		};
-	}
+	root = createRef();
+	id = `seams-review-disclosure-${++nextDisclosureId}`;
 	componentDidMount() {
 		if (this.root.current) this.root.current.open = this.props.initiallyOpen ?? false;
 	}
+	motion = null;
 	componentWillUnmount() {
 		this.clearMotion();
 		if (this.root.current) confirmationDocumentStyles(this.root.current.ownerDocument).deleteDynamicRule(this.id);
@@ -96,13 +27,80 @@ var ReviewDisclosure = class extends Component {
 		this.motion = null;
 		this.root.current?.removeAttribute("data-resizing");
 	}
+	setHeight = (height) => {
+		const details = this.root.current;
+		if (!details) return;
+		confirmationDocumentStyles(details.ownerDocument).setDynamicDeclarations(this.id, `#${this.id}`, { "--seams-review-disclosure-height": `${height}px` });
+	};
+	finish = () => {
+		if (this.root.current && this.motion) {
+			this.root.current.open = this.motion.opening;
+			this.root.current.removeAttribute("data-closing");
+		}
+		this.clearMotion();
+	};
+	toggle = (event) => {
+		const details = this.root.current;
+		if (!details) return;
+		event.preventDefault();
+		if (this.motion?.kind === "hosted") return;
+		const opening = this.motion ? !this.motion.opening : !details.open;
+		const body = details.lastElementChild;
+		if (!(body instanceof HTMLElement)) return;
+		const height = details.open ? body.getBoundingClientRect().height : 0;
+		this.clearMotion();
+		details.toggleAttribute("data-closing", !opening);
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !details.animate) {
+			details.open = opening;
+			details.removeAttribute("data-closing");
+			return;
+		}
+		details.open = true;
+		details.setAttribute("data-resizing", "");
+		const target = opening ? body.scrollHeight : 0;
+		this.motion = {
+			kind: "hosted",
+			opening
+		};
+		if (announceClampedSurfaceResize({
+			element: body,
+			reason: "review-details",
+			fromCssPx: height,
+			toCssPx: target,
+			drivenClasses: ["seams-review-disclosure-driven"],
+			setHeightCssPx: this.setHeight,
+			onSettled: this.finish
+		})) return;
+		const size = body.animate([{
+			height: `${height}px`,
+			overflow: "hidden"
+		}, {
+			height: `${target}px`,
+			overflow: "hidden"
+		}], {
+			duration: opening ? 220 : 180,
+			easing: "cubic-bezier(.2,0,0,1)",
+			fill: "both"
+		});
+		this.motion = {
+			kind: "local",
+			opening,
+			size,
+			fade: body.animate(opening ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+				duration: opening ? 180 : 100,
+				easing: "ease-out",
+				fill: "both"
+			})
+		};
+		size.onfinish = this.finish;
+	};
 	render() {
 		return /* @__PURE__ */ jsxs("details", {
 			ref: this.root,
 			class: `seams-review-${this.props.kind ?? "technical"}`,
 			children: [/* @__PURE__ */ jsxs("summary", {
 				onClick: this.toggle,
-				children: [this.props.label, /* @__PURE__ */ jsx("svg", {
+				children: [/* @__PURE__ */ jsx(WalletText, { copy: this.props.label }), /* @__PURE__ */ jsx("svg", {
 					class: "seams-review-caret",
 					viewBox: "0 0 20 20",
 					width: "16",