@seams/wallet 0.6.2 → 0.7.1

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

@@ -1,8 +1,8 @@
 import { parseWalletAuthMethodId, parseWalletId } from "../../shared-ts/src/utils/domainIds.js";
-import { computeWalletAuthMethodRevokeOperationFingerprintV1 } from "../../shared-ts/src/utils/registrationIntent.js";
 import { WALLET_EMAIL_OTP_TRANSACTION_SIGN_OPERATION } from "../../shared-ts/src/utils/emailOtpDomain.js";
+import { computeWalletAuthMethodRevokeOperationFingerprintV1 } from "../../shared-ts/src/utils/walletAuthMethodRecord.js";
 import { useSeams } from "../../context/index.js";
-import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { AccountMenuDialogFrame, useAccountMenuDialogKeyboard } from "./AccountMenuDialog.js";
 import LaptopIcon from "./icons/LaptopIcon.js";
 import LockIcon from "./icons/LockIcon.js";
 import MailIcon from "./icons/MailIcon.js";
@@ -226,9 +226,7 @@ function withLinkedDevicesLoadTimeout(promise) {
 		});
 	});
 }
-function focusableDialogElements(dialog) {
-	return Array.from(dialog.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"));
-}
+const FOCUSABLE_DIALOG_ELEMENTS = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal" }) => {
 	const { seams, loginState } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });
@@ -239,9 +237,6 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 	const dialogRef = React.useRef(null);
 	const otpInputRef = React.useRef(null);
 	const otpInputId = React.useId();
-	const previousFocusRef = React.useRef(null);
-	const { theme, tokens } = useTheme();
-	const scopedTokens = React.useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]);
 	seamsRef.current = seams;
 	const loadDevices = React.useCallback(async () => {
 		const seq = loadSeq.current + 1;
@@ -271,44 +266,13 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 			});
 		}
 	}, [walletId]);
-	const handleDialogKeyDown = React.useCallback((event) => {
-		if (event.key === "Escape" || event.key === "Esc") {
-			event.preventDefault();
-			onClose();
-			return;
-		}
-		if (event.key !== "Tab" || !dialogRef.current) return;
-		const focusable = focusableDialogElements(dialogRef.current);
-		if (focusable.length === 0) {
-			event.preventDefault();
-			dialogRef.current.focus();
-			return;
-		}
-		const first = focusable[0];
-		const last = focusable[focusable.length - 1];
-		if (event.shiftKey && document.activeElement === first) {
-			event.preventDefault();
-			last.focus();
-		} else if (!event.shiftKey && document.activeElement === last) {
-			event.preventDefault();
-			first.focus();
-		}
-	}, [onClose]);
-	useEffect(() => {
-		if (!isOpen || presentation === "page") return;
-		previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		dialogRef.current?.focus({ preventScroll: true });
-		window.addEventListener("keydown", handleDialogKeyDown);
-		return () => {
-			window.removeEventListener("keydown", handleDialogKeyDown);
-			previousFocusRef.current?.focus();
-			previousFocusRef.current = null;
-		};
-	}, [
-		handleDialogKeyDown,
+	useAccountMenuDialogKeyboard({
 		isOpen,
-		presentation
-	]);
+		presentation,
+		onClose,
+		dialogRef,
+		focusableSelector: FOCUSABLE_DIALOG_ELEMENTS
+	});
 	useEffect(() => {
 		if (!isOpen) {
 			loadSeq.current += 1;
@@ -443,221 +407,195 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 	const devices = loadState.kind === "loaded" ? loadState.devices : [];
 	const showEmpty = loadState.kind === "loaded" && devices.length === 0;
 	const selectedWalletAuthMethodId = loginState.isLoggedIn && loginState.currentAuthMethod.kind === "selected" ? String(loginState.currentAuthMethod.binding.walletAuthMethodId) : null;
-	return /* @__PURE__ */ jsx(Theme, {
-		theme,
-		tokens: scopedTokens,
-		children: /* @__PURE__ */ jsx("div", {
-			className: `seams-linked-devices-modal-backdrop theme-${theme}`,
-			"data-presentation": presentation,
-			role: "presentation",
-			onMouseDown: (event) => {
-				if (presentation === "modal" && event.target === event.currentTarget) onClose();
-			},
-			children: /* @__PURE__ */ jsxs("div", {
-				ref: dialogRef,
-				className: "seams-linked-devices-modal-content seams-linked-devices-inventory-content",
-				role: presentation === "modal" ? "dialog" : "region",
-				"aria-modal": presentation === "modal" ? true : void 0,
-				"aria-labelledby": "seams-linked-devices-modal-title",
-				tabIndex: -1,
-				children: [
-					presentation === "modal" ? /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs(AccountMenuDialogFrame, {
+		presentation,
+		onClose,
+		dialogRef,
+		contentClassName: "seams-linked-devices-inventory-content",
+		titleId: "seams-linked-devices-modal-title",
+		title: "Your devices",
+		closeLabel: "Close linked devices",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "seams-linked-devices-modal-subtitle",
+			children: "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…"
+				}) : 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", {
 						type: "button",
-						className: "seams-linked-devices-modal-close",
-						onClick: onClose,
-						"aria-label": "Close linked devices",
-						children: "✕"
-					}) : null,
-					/* @__PURE__ */ jsx("h2", {
-						id: "seams-linked-devices-modal-title",
-						className: "seams-linked-devices-modal-title",
-						children: "Your devices"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "seams-linked-devices-modal-subtitle",
-						children: "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…"
-							}) : 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", {
-									type: "button",
-									className: "seams-linked-devices-modal-secondary",
-									onClick: () => void loadDevices(),
-									children: "Try again"
-								})]
-							}) : null,
-							showEmpty ? /* @__PURE__ */ jsx("div", {
-								className: "seams-linked-devices-modal-placeholder",
-								children: "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",
-								children: devices.map(({ view, deviceNumber }) => {
-									const cardId = viewId(view);
-									const title = credentialDescription(viewCredential(view));
-									const titleCollides = devices.some((other) => viewId(other.view) !== cardId && credentialDescription(viewCredential(other.view)) === title);
-									const walletAuthMethodId = String(viewCredential(view).walletAuthMethodId);
-									const isSelectedMethod = walletAuthMethodId === selectedWalletAuthMethodId;
-									const chip = standingChip(view, isSelectedMethod);
-									const hasRemovableSibling = canRemoveWalletMethod(view, devices);
-									const confirming = revokeState.kind === "confirming" && revokeState.walletAuthMethodId === walletAuthMethodId;
-									const working = revokeState.kind === "working" && revokeState.walletAuthMethodId === walletAuthMethodId;
-									const awaitingEmailOtp = revokeState.kind === "email_otp" && revokeState.walletAuthMethodId === walletAuthMethodId;
-									const revocationInProgress = revokeState.kind === "working" || revokeState.kind === "email_otp";
-									const showRemoveButton = hasRemovableSibling && !isSelectedMethod && !confirming && !awaitingEmailOtp;
-									return /* @__PURE__ */ jsxs("li", {
-										className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
-										"data-device-kind": view.kind,
-										"data-device-state": deviceStateAttr(view),
-										children: [
-											/* @__PURE__ */ jsx("span", {
-												className: "seams-linked-devices-modal-item-icon",
-												"aria-hidden": "true",
-												children: credentialIcon(viewCredential(view))
-											}),
-											/* @__PURE__ */ jsxs("div", {
-												className: "seams-linked-devices-modal-item-content",
-												children: [
-													/* @__PURE__ */ jsxs("div", {
-														className: "seams-linked-devices-modal-item-main",
-														children: [/* @__PURE__ */ jsx("span", {
-															className: "seams-linked-devices-modal-item-name",
-															children: title
-														}), chip ? /* @__PURE__ */ jsx("span", {
-															className: `seams-linked-devices-modal-standing tone-${chip.tone}`,
-															children: chip.label
-														}) : null]
-													}),
-													/* @__PURE__ */ jsx("div", {
-														className: "seams-linked-devices-modal-item-detail",
-														children: deviceMetaLine(view, deviceNumber, titleCollides, Date.now())
-													}),
-													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) })]
-													}) : null,
-													awaitingEmailOtp && revokeState.kind === "email_otp" ? /* @__PURE__ */ jsxs("form", {
-														className: "seams-linked-devices-modal-otp-form",
-														onSubmit: (event) => {
-															event.preventDefault();
-															submitEmailOtpRevocation();
-														},
-														children: [
-															/* @__PURE__ */ jsx("label", {
-																htmlFor: otpInputId,
-																children: "Verification code"
-															}),
-															revokeState.emailHint ? /* @__PURE__ */ jsxs("span", {
-																className: "seams-linked-devices-modal-item-detail",
-																children: ["Sent to ", revokeState.emailHint]
-															}) : null,
-															/* @__PURE__ */ jsx("input", {
-																ref: otpInputRef,
-																id: otpInputId,
-																className: "seams-linked-devices-modal-otp-input",
-																type: "text",
-																inputMode: "numeric",
-																autoComplete: "one-time-code",
-																pattern: "[0-9]*",
-																maxLength: 10,
-																value: revokeState.otpCode,
-																disabled: revokeState.submitting,
-																"aria-invalid": revokeState.error ? "true" : void 0,
-																"aria-describedby": revokeState.error ? `${otpInputId}-error` : void 0,
-																onChange: (event) => setRevokeState({
-																	...revokeState,
-																	otpCode: event.currentTarget.value,
-																	error: null
-																})
-															}),
-															revokeState.error ? /* @__PURE__ */ jsx("span", {
-																id: `${otpInputId}-error`,
-																className: "seams-linked-devices-modal-error",
-																role: "alert",
-																children: revokeState.error
-															}) : null,
-															/* @__PURE__ */ jsxs("div", {
-																className: "seams-linked-devices-modal-confirm-actions",
-																children: [/* @__PURE__ */ jsx("button", {
-																	type: "button",
-																	className: "seams-linked-devices-modal-secondary",
-																	disabled: revokeState.submitting,
-																	onClick: () => setRevokeState({ kind: "idle" }),
-																	children: "Keep it"
-																}), /* @__PURE__ */ jsx("button", {
-																	type: "submit",
-																	className: "seams-linked-devices-modal-danger",
-																	disabled: revokeState.submitting,
-																	children: revokeState.submitting ? "Removing…" : "Verify and remove"
-																})]
-															})
-														]
-													}) : 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", {
-															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"
-															}), /* @__PURE__ */ jsx("button", {
-																type: "button",
-																className: "seams-linked-devices-modal-danger",
-																onClick: () => void revokeMethod(view, deviceNumber),
-																children: "Yes, remove"
-															})]
-														})]
-													}) : null
-												]
-											}),
-											showRemoveButton ? /* @__PURE__ */ jsx("button", {
-												type: "button",
-												className: "seams-linked-devices-modal-secondary seams-linked-devices-modal-remove",
-												disabled: revocationInProgress,
-												"aria-label": `Remove ${deviceDescription(view, deviceNumber)}`,
-												onClick: () => setRevokeState({
-													kind: "confirming",
-													walletAuthMethodId
+						className: "seams-linked-devices-modal-secondary",
+						onClick: () => void loadDevices(),
+						children: "Try again"
+					})]
+				}) : null,
+				showEmpty ? /* @__PURE__ */ jsx("div", {
+					className: "seams-linked-devices-modal-placeholder",
+					children: "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",
+					children: devices.map(({ view, deviceNumber }) => {
+						const cardId = viewId(view);
+						const title = credentialDescription(viewCredential(view));
+						const titleCollides = devices.some((other) => viewId(other.view) !== cardId && credentialDescription(viewCredential(other.view)) === title);
+						const walletAuthMethodId = String(viewCredential(view).walletAuthMethodId);
+						const isSelectedMethod = walletAuthMethodId === selectedWalletAuthMethodId;
+						const chip = standingChip(view, isSelectedMethod);
+						const hasRemovableSibling = canRemoveWalletMethod(view, devices);
+						const confirming = revokeState.kind === "confirming" && revokeState.walletAuthMethodId === walletAuthMethodId;
+						const working = revokeState.kind === "working" && revokeState.walletAuthMethodId === walletAuthMethodId;
+						const awaitingEmailOtp = revokeState.kind === "email_otp" && revokeState.walletAuthMethodId === walletAuthMethodId;
+						const revocationInProgress = revokeState.kind === "working" || revokeState.kind === "email_otp";
+						const showRemoveButton = hasRemovableSibling && !isSelectedMethod && !confirming && !awaitingEmailOtp;
+						return /* @__PURE__ */ jsxs("li", {
+							className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
+							"data-device-kind": view.kind,
+							"data-device-state": deviceStateAttr(view),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "seams-linked-devices-modal-item-icon",
+									"aria-hidden": "true",
+									children: credentialIcon(viewCredential(view))
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "seams-linked-devices-modal-item-content",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "seams-linked-devices-modal-item-main",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "seams-linked-devices-modal-item-name",
+												children: title
+											}), chip ? /* @__PURE__ */ jsx("span", {
+												className: `seams-linked-devices-modal-standing tone-${chip.tone}`,
+												children: chip.label
+											}) : null]
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "seams-linked-devices-modal-item-detail",
+											children: deviceMetaLine(view, deviceNumber, titleCollides, Date.now())
+										}),
+										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) })]
+										}) : null,
+										awaitingEmailOtp && revokeState.kind === "email_otp" ? /* @__PURE__ */ jsxs("form", {
+											className: "seams-linked-devices-modal-otp-form",
+											onSubmit: (event) => {
+												event.preventDefault();
+												submitEmailOtpRevocation();
+											},
+											children: [
+												/* @__PURE__ */ jsx("label", {
+													htmlFor: otpInputId,
+													children: "Verification code"
+												}),
+												revokeState.emailHint ? /* @__PURE__ */ jsxs("span", {
+													className: "seams-linked-devices-modal-item-detail",
+													children: ["Sent to ", revokeState.emailHint]
+												}) : null,
+												/* @__PURE__ */ jsx("input", {
+													ref: otpInputRef,
+													id: otpInputId,
+													className: "seams-linked-devices-modal-otp-input",
+													type: "text",
+													inputMode: "numeric",
+													autoComplete: "one-time-code",
+													pattern: "[0-9]*",
+													maxLength: 10,
+													value: revokeState.otpCode,
+													disabled: revokeState.submitting,
+													"aria-invalid": revokeState.error ? "true" : void 0,
+													"aria-describedby": revokeState.error ? `${otpInputId}-error` : void 0,
+													onChange: (event) => setRevokeState({
+														...revokeState,
+														otpCode: event.currentTarget.value,
+														error: null
+													})
 												}),
-												children: working ? "Removing…" : "Remove"
-											}) : null
-										]
-									}, cardId);
-								})
-							}) : null,
-							revokeState.kind === "error" ? /* @__PURE__ */ jsx("div", {
-								className: "seams-linked-devices-modal-error",
-								role: "alert",
-								children: revokeState.message
-							}) : null,
-							/* @__PURE__ */ jsx("div", {
-								className: "seams-linked-devices-modal-live",
-								role: "status",
-								"aria-live": "polite",
-								children: announcement
-							})
-						]
+												revokeState.error ? /* @__PURE__ */ jsx("span", {
+													id: `${otpInputId}-error`,
+													className: "seams-linked-devices-modal-error",
+													role: "alert",
+													children: revokeState.error
+												}) : null,
+												/* @__PURE__ */ jsxs("div", {
+													className: "seams-linked-devices-modal-confirm-actions",
+													children: [/* @__PURE__ */ jsx("button", {
+														type: "button",
+														className: "seams-linked-devices-modal-secondary",
+														disabled: revokeState.submitting,
+														onClick: () => setRevokeState({ kind: "idle" }),
+														children: "Keep it"
+													}), /* @__PURE__ */ jsx("button", {
+														type: "submit",
+														className: "seams-linked-devices-modal-danger",
+														disabled: revokeState.submitting,
+														children: revokeState.submitting ? "Removing…" : "Verify and remove"
+													})]
+												})
+											]
+										}) : 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", {
+												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"
+												}), /* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "seams-linked-devices-modal-danger",
+													onClick: () => void revokeMethod(view, deviceNumber),
+													children: "Yes, remove"
+												})]
+											})]
+										}) : null
+									]
+								}),
+								showRemoveButton ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "seams-linked-devices-modal-secondary seams-linked-devices-modal-remove",
+									disabled: revocationInProgress,
+									"aria-label": `Remove ${deviceDescription(view, deviceNumber)}`,
+									onClick: () => setRevokeState({
+										kind: "confirming",
+										walletAuthMethodId
+									}),
+									children: working ? "Removing…" : "Remove"
+								}) : null
+							]
+						}, cardId);
 					})
-				]
-			})
-		})
+				}) : null,
+				revokeState.kind === "error" ? /* @__PURE__ */ jsx("div", {
+					className: "seams-linked-devices-modal-error",
+					role: "alert",
+					children: revokeState.message
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "seams-linked-devices-modal-live",
+					role: "status",
+					"aria-live": "polite",
+					children: announcement
+				})
+			]
+		})]
 	});
 };
 //#endregion

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

@@ -8,7 +8,7 @@ import { Fragment, forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "../../../components/AccountMenuButton/ProfileDropdown.css";
 //#region src/react/components/AccountMenuButton/ProfileDropdown.tsx
-const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLock, onClose, menuItemsRef, toggleColors, currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, transactionSettingsOpen = false, accountsRows, accountsOpen = false, exportKeysOpen = false, exportLoadingChain = null, canExportNearKey, canExportEvmKeys, onExportChain, walletId, theme = "dark", highlightedMenuItemId }, ref) => {
+const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLock, onClose, menuItemsRef, currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, transactionSettingsOpen = false, accountsRows, accountsOpen = false, exportKeysOpen = false, exportLoadingChain = null, canExportNearKey, canExportEvmKeys, onExportChain, theme = "dark", highlightedMenuItemId }, ref) => {
 	const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;
 	menuItemsRef.current.length = menuItems.length;
 	const highlightedIndex = useMemo(() => {

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

@@ -3,7 +3,7 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/TransactionSettingsSection.tsx
 const TRANSACTION_SETTINGS_ACTIVE_BACKGROUND = "var(--seams-colors-buttonBackground, var(--seams-colors-primary))";
-const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, className, style, isOpen = true, theme = "dark", presentation = "menu" }) => {
+const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggleSkipClick, onSetDelay, className, style, isOpen = true, presentation = "menu" }) => {
 	React.useEffect(() => {
 		if (!isOpen) return;
 		if (currentConfirmConfig?.behavior !== "skipClick") return;

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

@@ -43,7 +43,7 @@ const UserAccountButton = ({ username, hideUsername, fullAccountId, emailAddress
 		})
 	});
 };
-const UserAccountId = ({ username, fullAccountId, emailAddress, isOpen, theme = "dark" }) => {
+const UserAccountId = ({ username, fullAccountId, emailAddress, isOpen }) => {
 	const displayAccountId = (fullAccountId || username || "").trim();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "seams-user-account--user-details",

package/dist/esm/react/components/AccountMenuButton/icons/MoonIcon.js

@@ -1,46 +1,11 @@
-import React from "react";
+import { useDrawInStrokeIcon } from "./strokeIcon.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/icons/MoonIcon.tsx
-const MoonIcon = ({ size = 24, className, strokeWidth = 2, animate = true, style, ...rest }) => {
-	const [mounted, setMounted] = React.useState(false);
-	React.useEffect(() => {
-		if (!animate) return;
-		const id = requestAnimationFrame(() => setMounted(true));
-		return () => cancelAnimationFrame(id);
-	}, [animate]);
-	const animationDuration = "900ms";
-	const fromColor = "#7C3AED";
-	const dash = 100;
-	const dashProps = animate ? {
-		pathLength: dash,
-		strokeDasharray: dash,
-		strokeDashoffset: mounted ? 0 : dash,
-		style: {
-			stroke: mounted ? "currentColor" : fromColor,
-			transition: `stroke-dashoffset ${animationDuration} cubic-bezier(0.22, 1, 0.36, 1), stroke ${animationDuration} ease`,
-			...style
-		}
-	} : { style };
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: size,
-		height: size,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		className: `lucide lucide-moon-icon lucide-moon${className ? ` ${className}` : ""}`,
-		"aria-hidden": "true",
-		focusable: "false",
-		...rest,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
-			...dashProps
-		})
-	});
-};
+const MoonIcon = (props) => useDrawInStrokeIcon(props, "moon", "#7C3AED", (drawIn) => /* @__PURE__ */ jsx("path", {
+	d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+	...drawIn
+}));
 //#endregion
 export { MoonIcon as default };