@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/react/components/AccountMenuButton/hooks/useProfileState.js

@@ -1,66 +1,79 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 //#region src/react/components/AccountMenuButton/hooks/useProfileState.ts
-const useProfileState = (options) => {
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-	const isControlled = typeof options?.open === "boolean";
-	const isOpen = isControlled ? options?.open : uncontrolledOpen;
-	const onOpenChange = options?.onOpenChange;
+function profileOpenControl(props, initialOpen) {
+	if (props.isMenuOpen !== void 0) return {
+		kind: "controlled",
+		open: props.isMenuOpen,
+		onOpenChange: props.onMenuOpenChange
+	};
+	return {
+		kind: "uncontrolled",
+		initialOpen,
+		onOpenChange: props.onMenuOpenChange
+	};
+}
+function changeOpen(control, setUncontrolledOpen, open) {
+	switch (control.kind) {
+		case "uncontrolled":
+			setUncontrolledOpen(open);
+			control.onOpenChange?.(open);
+			return;
+		case "controlled":
+			control.onOpenChange(open);
+			return;
+		default: return assertNever(control);
+	}
+}
+function currentOpen(control, uncontrolledOpen) {
+	switch (control.kind) {
+		case "controlled": return control.open;
+		case "uncontrolled": return uncontrolledOpen;
+		default: return assertNever(control);
+	}
+}
+function assertNever(value) {
+	throw new Error(`Unknown account menu control: ${String(value)}`);
+}
+function closeOutside(buttonRef, close, event) {
+	for (const target of event.composedPath()) {
+		if (target === buttonRef.current) return;
+		if (target instanceof HTMLElement && target.matches("[data-seams-root].seams-wallet-overlay-dialog, .seams-linked-devices-modal-backdrop, .qr-scanner-modal")) return;
+	}
+	close();
+}
+function observeOutside(presentation, isOpen, buttonRef, close) {
+	if (presentation !== "dropdown" || !isOpen) return;
+	const root = buttonRef.current?.getRootNode();
+	if (!root) return;
+	const listener = closeOutside.bind(null, buttonRef, close);
+	root.addEventListener("click", listener, true);
+	return root.removeEventListener.bind(root, "click", listener, true);
+}
+function useProfileState(presentation, control) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(control.kind === "uncontrolled" ? control.initialOpen : false);
+	const isOpen = currentOpen(control, uncontrolledOpen);
 	const buttonRef = useRef(null);
-	const dropdownRef = useRef(null);
 	const refs = {
 		buttonRef,
-		dropdownRef,
+		dropdownRef: useRef(null),
 		menuItemsRef: useRef([])
 	};
-	useEffect(() => {
-		const handleClickOutside = (event) => {
-			const target = event.target;
-			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
-			const isInPath = (el) => {
-				if (!el) return false;
-				if (el.contains(target)) return true;
-				return path.includes(el);
-			};
-			const clickedInsideButton = isInPath(buttonRef.current);
-			const clickedInsideDropdown = isInPath(dropdownRef.current);
-			if (clickedInsideButton || clickedInsideDropdown) return;
-			const pathEls = path.filter((n) => n instanceof HTMLElement);
-			if (pathEls.some((el) => Array.from(el.classList ?? []).some((c) => c.startsWith("seams-access-keys-modal") || c.startsWith("seams-export-key-type-modal") || c.startsWith("seams-linked-devices-modal")))) return;
-			if (pathEls.some((el) => el.classList?.contains("qr-scanner-modal") || el.classList?.contains("qr-scanner-panel") || el.classList?.contains("qr-scanner-linking-toast"))) return;
-			if (!isControlled) setUncontrolledOpen(false);
-			onOpenChange?.(false);
-		};
-		const root = buttonRef.current?.getRootNode?.() || document;
-		root.addEventListener("click", handleClickOutside, true);
-		return () => {
-			try {
-				root.removeEventListener("click", handleClickOutside, true);
-			} catch {}
-		};
-	}, [isControlled, onOpenChange]);
-	const setOpen = useCallback((next) => {
-		const resolved = typeof next === "function" ? next(isOpen) : next;
-		if (!isControlled) setUncontrolledOpen(resolved);
-		onOpenChange?.(resolved);
-	}, [
-		isControlled,
+	const handleClose = changeOpen.bind(null, control, setUncontrolledOpen, false);
+	const handleToggle = changeOpen.bind(null, control, setUncontrolledOpen, !isOpen);
+	useEffect(observeOutside.bind(null, presentation, isOpen, buttonRef, handleClose), [
+		presentation,
 		isOpen,
-		onOpenChange
+		buttonRef,
+		handleClose
 	]);
-	const handleToggle = () => {
-		setOpen((prev) => !prev);
-	};
-	const handleClose = () => {
-		setOpen(false);
-	};
 	return {
 		isOpen,
 		refs,
 		handleToggle,
 		handleClose
 	};
-};
+}
 //#endregion
-export { useProfileState };
+export { profileOpenControl, useProfileState };
 
 //# sourceMappingURL=useProfileState.js.map

package/dist/esm/react/components/AccountMenuButton/icons/HoverArrowIcon.css

@@ -1,7 +1,7 @@
 /* HoverArrowIcon: a chevron that grows a shaft (">" to "->") when its
    direct parent is hovered or focused from the keyboard. */
 
-.seams-hover-arrow {
+[data-seams-root].seams-theme-provider .seams-hover-arrow {
   flex: 0 0 auto;
   fill: none;
   stroke: currentColor;
@@ -9,7 +9,13 @@
   color: var(--seams-colors-textSecondary);
   transition: color 140ms ease;
 }
-.seams-hover-arrow-line {
+[data-seams-root].seams-theme-provider .seams-hover-arrow--left {
+  transform: rotate(180deg);
+}
+[data-seams-root].seams-theme-provider .seams-hover-arrow--up-right {
+  transform: rotate(-45deg);
+}
+[data-seams-root].seams-theme-provider .seams-hover-arrow-line {
   opacity: 0;
   filter: blur(2px);
   transform: scaleX(0.45);
@@ -19,27 +25,45 @@
     filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
     transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-.seams-hover-arrow-tip {
+[data-seams-root].seams-theme-provider .seams-hover-arrow-tip {
   transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-:hover > .seams-hover-arrow,
-:focus-visible > .seams-hover-arrow {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow {
   color: var(--seams-colors-textPrimary);
 }
-:hover > .seams-hover-arrow .seams-hover-arrow-line,
-:focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
   opacity: 1;
   filter: blur(0);
   transform: scaleX(1);
 }
-:hover > .seams-hover-arrow .seams-hover-arrow-tip,
-:focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
+[data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
   transform: translateX(3px);
 }
+@media (hover: hover) and (pointer: fine) {
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow {
+    color: var(--seams-colors-textPrimary);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-line {
+    opacity: 1;
+    filter: blur(0);
+    transform: scaleX(1);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-tip {
+    transform: translateX(3px);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
-  .seams-hover-arrow,
-  .seams-hover-arrow-line,
-  .seams-hover-arrow-tip {
+  [data-seams-root].seams-theme-provider .seams-hover-arrow,
+  [data-seams-root].seams-theme-provider .seams-hover-arrow-line,
+  [data-seams-root].seams-theme-provider .seams-hover-arrow-tip {
     transition: none;
   }
 }

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

@@ -1,14 +1,22 @@
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import "./Icon.css";
 import "./HoverArrowIcon.css";
 //#region src/react/components/AccountMenuButton/icons/HoverArrowIcon.tsx
 /** A chevron that grows a shaft on its parent's hover (">" to "->"). Place it
 * as a direct child of the row that triggers it (HoverArrowIcon.css). */
-function HoverArrowIcon({ size = 12 }) {
+function HoverArrowIcon({ size = 12, direction = "right" }) {
+	const style = {
+		"--seams-icon-width": `${size}px`,
+		"--seams-icon-height": `${size}px`,
+		"--seams-icon-stroke-width": 1.5
+	};
 	return /* @__PURE__ */ jsxs("svg", {
-		className: "seams-hover-arrow",
+		"data-seams-root": "",
+		className: `seams-icon seams-hover-arrow seams-hover-arrow--${direction}`,
 		width: size,
 		height: size,
+		style,
 		viewBox: "0 0 10 10",
 		"aria-hidden": "true",
 		focusable: "false",

package/dist/esm/react/components/AccountMenuButton/icons/Icon.css

@@ -0,0 +1,10 @@
+svg[data-seams-root].seams-icon[viewBox],
+[data-seams-root].seams-theme-provider svg.seams-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--seams-icon-width, 24px);
+  height: var(--seams-icon-height, 24px);
+  fill: var(--seams-icon-fill, none);
+  stroke: var(--seams-icon-stroke, currentColor);
+  stroke-width: var(--seams-icon-stroke-width, 2);
+}

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

@@ -1,22 +1,21 @@
+import { lucideIconSvg } from "./lucideIcon.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/icons/LogOutIcon2.tsx
-const LogOutIcon = ({ className, width, height, style }) => /* @__PURE__ */ jsx("svg", {
-	className: `${className || ""}`,
-	style: { ...style },
-	width: width || "20",
-	height: height || "20",
+const LogOutIcon = ({ className, width = "20px", height = "20px", style }) => lucideIconSvg("log-out", {
+	width,
+	height,
+	className,
+	style,
 	viewBox: "0 0 20 20",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	children: /* @__PURE__ */ jsx("path", {
-		d: "M15.0003 6.66667L18.3337 10M18.3337 10L15.0003 13.3333M18.3337 10H7.50033M12.5003 3.50337C11.438 2.86523 10.2047 2.5 8.88922 2.5C4.90049 2.5 1.66699 5.85786 1.66699 10C1.66699 14.1421 4.90049 17.5 8.88922 17.5C10.2047 17.5 11.438 17.1348 12.5003 16.4966",
-		stroke: "currentColor",
-		strokeWidth: "1.67",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})
-});
+	strokeWidth: 1.67
+}, /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", {
+	d: "M15.0003 6.66667L18.3337 10M18.3337 10L15.0003 13.3333M18.3337 10H7.50033M12.5003 3.50337C11.438 2.86523 10.2047 2.5 8.88922 2.5C4.90049 2.5 1.66699 5.85786 1.66699 10C1.66699 14.1421 4.90049 17.5 8.88922 17.5C10.2047 17.5 11.438 17.1348 12.5003 16.4966",
+	stroke: "currentColor",
+	strokeWidth: "1.67",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}) }));
 //#endregion
 export { LogOutIcon as default };
 

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

@@ -1,23 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { lucideIconSvg } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/icons/SpinnerIcon.tsx
 const SpinnerIcon = ({ className }) => {
-	return /* @__PURE__ */ jsxs("svg", {
-		className: ["seams-menu-spinner-icon", className].filter(Boolean).join(" "),
-		viewBox: "0 0 24 24",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ jsx("circle", {
-			cx: "12",
-			cy: "12",
-			r: "8.5",
-			className: "seams-menu-spinner-icon-track"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M20.5 12A8.5 8.5 0 0 0 12 3.5",
-			className: "seams-menu-spinner-icon-head",
-			strokeLinecap: "round"
-		})]
-	});
+	return lucideIconSvg("spinner", { className: ["seams-menu-spinner-icon", className].filter(Boolean).join(" ") }, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "8.5",
+		className: "seams-menu-spinner-icon-track"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M20.5 12A8.5 8.5 0 0 0 12 3.5",
+		className: "seams-menu-spinner-icon-head",
+		strokeLinecap: "round"
+	})] }));
 };
 //#endregion
 export { SpinnerIcon as default };

package/dist/esm/react/components/AccountMenuButton/icons/TouchIcon.css

@@ -1,11 +1,11 @@
 /* TouchIcon specific styles and animations */
 
-.seams-fingerprint-icon path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon path {
   /* Normalize path length so dash animations are simple */
   stroke: currentColor;
 }
 
-.seams-fingerprint-icon.open path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon.open path {
   /* Draw the fingerprint when expanding/opening */
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
@@ -13,7 +13,7 @@
 }
 
 /* Animate when closing the menu */
-.seams-fingerprint-icon.closed path {
+[data-seams-root].seams-theme-provider .seams-fingerprint-icon.closed path {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   animation: seams-fp-close 1.6s ease-out 0.1s both;

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

@@ -1,12 +1,18 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
+import "./Icon.css";
 import "./TouchIcon.css";
 //#region src/react/components/AccountMenuButton/icons/TouchIcon.tsx
-const TouchIcon = ({ className, strokeWidth, width, height, style }) => /* @__PURE__ */ jsx("svg", {
-	className: `seams-fingerprint-icon ${className || ""}`,
-	style: { ...style },
-	width: width || 24,
-	height: height || 24,
+const TouchIcon = ({ className, strokeWidth, width = 24, height = 24, style }) => /* @__PURE__ */ jsx("svg", {
+	"data-seams-root": "",
+	className: `seams-icon seams-fingerprint-icon ${className || ""}`,
+	style: {
+		"--seams-icon-width": `${width}px`,
+		"--seams-icon-height": `${height}px`,
+		...style
+	},
+	width,
+	height,
 	viewBox: "0 0 24 24",
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg",

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

@@ -1,20 +1,34 @@
 import { jsx } from "react/jsx-runtime";
+import "./Icon.css";
 //#region src/react/components/AccountMenuButton/icons/lucideIcon.tsx
-function lucideIconSvg(name, { size = 24, className, strokeWidth = 2, ...rest }, shapes) {
+function iconDimension(value) {
+	if (typeof value === "number" || /^\d+(?:\.\d+)?$/.test(value)) return `${value}px`;
+	return value;
+}
+function lucideIconSvg(name, { size = 24, width = size, height = size, className, fill = "none", stroke = "currentColor", strokeWidth = 2, style, ...rest }, shapes) {
 	return /* @__PURE__ */ jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		width: size,
-		height: size,
+		width,
+		height,
+		style: {
+			"--seams-icon-width": iconDimension(width),
+			"--seams-icon-height": iconDimension(height),
+			"--seams-icon-fill": fill,
+			"--seams-icon-stroke": stroke,
+			"--seams-icon-stroke-width": strokeWidth,
+			...style
+		},
 		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
+		fill,
+		stroke,
 		strokeWidth,
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		className: `lucide lucide-${name}-icon lucide-${name}${className ? ` ${className}` : ""}`,
+		className: `seams-icon seams-icon-${name}${className ? ` ${className}` : ""}`,
 		"aria-hidden": "true",
 		focusable: "false",
 		...rest,
+		"data-seams-root": "",
 		children: shapes
 	});
 }

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

@@ -18,7 +18,7 @@ import SpinnerIcon from "./icons/SpinnerIcon.js";
 import { AccountMenuScreen } from "./AccountMenuScreen.js";
 import TouchIcon from "./icons/TouchIcon.js";
 import { AccountMenuButtonView } from "./AccountMenuButtonView.js";
-import { useProfileState } from "./hooks/useProfileState.js";
+import { profileOpenControl, useProfileState } from "./hooks/useProfileState.js";
 import { PROFILE_MENU_ITEM_IDS } from "./types.js";
 import QRCodeScanner from "../QRCodeScanner.js";
 import LinkedDevicesModal from "./LinkedDevicesModal.js";
@@ -87,38 +87,8 @@ async function resolveNearAccountIdForExport(input) {
 	if (state?.status === "near_failed_retryable") throw new Error(`NEAR signer provisioning must be retried (${state.errorCode}).`);
 	throw new Error("Ed25519 export requires an active NEAR signer.");
 }
-/**
-* Account Menu Button Component
-* Provides user settings, account management, and the device-link scanner shell.
-* **Important:** This component should be used inside a SeamsWeb context.
-* Wrap your app with PasskeyProvider or ensure SeamsWeb is available in context via useSeams.
-*
-* @example
-* ```tsx
-* import { PasskeyProvider } from '@seams/wallet/react';
-* import { AccountMenuButton } from '@seams/wallet/react';
-*
-* function App() {
-*   return (
-*     <PasskeyProvider configs={passkeyConfigs}>
-*       <AccountMenuButton
-*         username="alice"
-*         onLock={() => console.log('Wallet locked')}
-*         deviceLinkingScannerParams={{
-*           onError: (error) => console.error('Error:', error),
-*           onClose: () => console.log('Scanner closed'),
-*           // Flow events can carry sensitive data (e.g. demo OTP codes).
-*           // Forward phases, never whole event payloads.
-*           onEvent: (event) => trackScannerPhase(event.phase),
-*           fundingAmount: '0.05'
-*         }}
-*       />
-*     </PasskeyProvider>
-*   );
-* }
-* ```
-*/
-const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp, nearExplorerBaseUrl = "https://nearblocks.io", username: usernameProp, hideUsername = false, onLock, onExportKeyError, onExportKeyEvent, deviceLinkingScannerParams, toggleColors, style, className, isMenuOpen, onMenuOpenChange, highlightedMenuItem }) => {
+const AccountMenuButtonInner = (props) => {
+	const { layout, presentation = "dropdown", nearAccountId: nearAccountIdProp, nearExplorerBaseUrl = "https://nearblocks.io", username: usernameProp, hideUsername = false, onLock, onExportKeyError, onExportKeyEvent, deviceLinkingScannerParams, toggleColors, style, className, highlightedMenuItem } = props;
 	const locale = useWalletLocale();
 	const { accountInputState, loginState, seams, lock } = useSeams();
 	const recovery = useMemo(() => seams.recovery, [seams]);
@@ -139,10 +109,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 	const [exportLoadingChain, setExportLoadingChain] = useState(null);
 	const [currentConfirmConfig, setCurrentConfirmConfig] = useState(null);
 	const [settingsError, setSettingsError] = useState(null);
-	const { isOpen, refs, handleToggle, handleClose } = useProfileState({
-		open: typeof isMenuOpen === "boolean" ? isMenuOpen : void 0,
-		onOpenChange: onMenuOpenChange
-	});
+	const { isOpen, refs, handleToggle, handleClose } = useProfileState(layout === "page" ? "page" : presentation, profileOpenControl(props, false));
 	useEffect(resetNavigation.bind(null, isOpen, setScreen), [isOpen]);
 	const { theme } = useTheme();
 	const accountMenuCapabilities = accountMenuCapabilitiesForLoginState(loginState);
@@ -384,7 +351,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 				keepOpenOnClick: true
 			});
 		}
-		if (presentation === "page") items.push({
+		if (layout === "page") items.push({
 			id: PROFILE_MENU_ITEM_IDS.WALLET_REGION,
 			icon: /* @__PURE__ */ jsx(MapPinIcon, {}),
 			label: "Wallet region",
@@ -403,7 +370,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		return items;
 	}, [
 		accountsRows.length,
-		presentation,
+		layout,
 		accountMenuCapabilities,
 		canShowRecoveryCodes,
 		exportLoadingChain,
@@ -523,7 +490,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 			onEvent: deviceLinkingScannerParams?.onEvent
 		})
 	};
-	if (presentation === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
+	if (layout === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
 		walletId: toWalletId(walletId),
 		placement: seams.placement,
 		menuItems: MENU_ITEMS,
@@ -586,6 +553,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		onError: closeSettingsScanner.bind(null, setShowQRScanner, setSettingsError)
 	})] });
 	return /* @__PURE__ */ jsx(AccountMenuButtonView, {
+		presentation,
 		buttonRef: refs.buttonRef,
 		dropdownRef: refs.dropdownRef,
 		className,
@@ -624,17 +592,25 @@ const AccountMenuButton = (props) => {
 		tokens: useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]),
 		children: /* @__PURE__ */ jsx(AccountMenuButtonInner, {
 			...props,
-			presentation: "menu"
+			layout: "menu"
 		})
 	});
 };
 const ProfileSettingsButton = AccountMenuButton;
 /** Full-page wallet settings, mounted inside SeamsWebProvider. */
 function WalletSettingsPage(props) {
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(WalletSettingsContent, { ...props })
+	});
+}
+function WalletSettingsContent(props) {
 	const { loginState, refreshSession } = useSeams();
 	const [error, setError] = useState("");
 	if (loginState.isLoggedIn) return /* @__PURE__ */ jsx(AccountMenuButtonInner, {
-		presentation: "page",
+		layout: "page",
 		nearAccountId: loginState.nearAccountId
 	});
 	return /* @__PURE__ */ jsxs("div", {

package/dist/esm/react/components/ExternalNearWalletIcon.js

@@ -0,0 +1,32 @@
+import { WalletIcon } from "./AccountMenuButton/icons/WalletIcon.js";
+import { hotWalletIcon, meteorWalletIcon } from "./externalWalletBrandImages.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/ExternalNearWalletIcon.tsx
+function ExternalNearWalletIcon({ wallet }) {
+	switch (wallet) {
+		case "meteor": return /* @__PURE__ */ jsx("img", {
+			src: meteorWalletIcon,
+			width: 32,
+			height: 32,
+			alt: ""
+		});
+		case "hot": return /* @__PURE__ */ jsx("img", {
+			src: hotWalletIcon,
+			width: 32,
+			height: 32,
+			alt: ""
+		});
+		case "intear": return /* @__PURE__ */ jsx(WalletIcon, {
+			width: 28,
+			height: 28
+		});
+		default: {
+			const exhaustive = wallet;
+			throw new Error(`Unknown external wallet icon: ${String(exhaustive)}`);
+		}
+	}
+}
+//#endregion
+export { ExternalNearWalletIcon };
+
+//# sourceMappingURL=ExternalNearWalletIcon.js.map

package/dist/esm/react/components/FingerprintIcon.js

@@ -1,28 +1,22 @@
+import { lucideIconSvg } from "./AccountMenuButton/icons/lucideIcon.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/FingerprintIcon.tsx
 const FingerprintIcon = ({ size = 24, className = "", color = "currentColor", strokeWidth = 1.5, style }) => {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: size,
-		height: size,
-		viewBox: "0 0 24 24",
-		fill: "none",
+	return lucideIconSvg("fingerprint", {
+		size,
 		stroke: color,
 		strokeWidth,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
 		className,
-		style,
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M6.405 19.048c.184-.443.353-.894.507-1.351" }),
-			/* @__PURE__ */ jsx("path", { d: "M14.343 20.693c.266-.751.502-1.516.707-2.294.186-.706.346-1.422.478-2.147" }),
-			/* @__PURE__ */ jsx("path", { d: "M19.448 17.058c.364-1.964.555-3.989.555-6.058 0-4.418-3.582-8-8-8-1.255 0-2.443.289-3.501.805" }),
-			/* @__PURE__ */ jsx("path", { d: "M3.523 15.025c.314-1.29.48-2.638.48-4.025 0-1.74.556-3.351 1.499-4.664" }),
-			/* @__PURE__ */ jsx("path", { d: "M12.003 11c0 2.76-.447 5.416-1.273 7.899-.213.639-.451 1.266-.712 1.881" }),
-			/* @__PURE__ */ jsx("path", { d: "M7.712 14.5c.191-1.138.291-2.308.291-3.5 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .617-.02 1.229-.058 1.836" })
-		]
-	});
+		style
+	}, /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M6.405 19.048c.184-.443.353-.894.507-1.351" }),
+		/* @__PURE__ */ jsx("path", { d: "M14.343 20.693c.266-.751.502-1.516.707-2.294.186-.706.346-1.422.478-2.147" }),
+		/* @__PURE__ */ jsx("path", { d: "M19.448 17.058c.364-1.964.555-3.989.555-6.058 0-4.418-3.582-8-8-8-1.255 0-2.443.289-3.501.805" }),
+		/* @__PURE__ */ jsx("path", { d: "M3.523 15.025c.314-1.29.48-2.638.48-4.025 0-1.74.556-3.351 1.499-4.664" }),
+		/* @__PURE__ */ jsx("path", { d: "M12.003 11c0 2.76-.447 5.416-1.273 7.899-.213.639-.451 1.266-.712 1.881" }),
+		/* @__PURE__ */ jsx("path", { d: "M7.712 14.5c.191-1.138.291-2.308.291-3.5 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .617-.02 1.229-.058 1.836" })
+	] }));
 };
 //#endregion
 export { FingerprintIcon as default };

package/dist/esm/react/components/HostedSeamsAuthMenu/SeamsAuthMenuMock.js

@@ -11,20 +11,31 @@ const shellStyle = {
 	border: "1px solid var(--seams-colors-borderPrimary, #ddd8d1)",
 	background: "var(--seams-colors-colorBackground, #fffdf9)",
 	color: "var(--seams-colors-textPrimary, #292524)",
-	pointerEvents: "none"
+	pointerEvents: "none",
+	margin: 0,
+	minWidth: 0,
+	font: "14px / 1.5 system-ui, sans-serif",
+	letterSpacing: "normal",
+	textTransform: "none"
 };
 const rowStyle = {
 	display: "block",
 	height: 48,
 	borderRadius: 12,
 	background: "currentColor",
-	opacity: .08
+	opacity: .08,
+	width: "100%",
+	margin: 0,
+	padding: 0,
+	border: 0
 };
 /** Inert artwork for loading and previews; contains no auth controls or wallet logic. */
 function SeamsAuthMenuMock({ initialMode = "login", locale = "en" }) {
 	return /* @__PURE__ */ jsx(WalletLocaleContext.Provider, {
 		value: locale,
 		children: /* @__PURE__ */ jsxs("span", {
+			"data-seams-root": "",
+			className: "seams-auth-menu-mock",
 			"data-seams-auth-menu-mock": "true",
 			"aria-hidden": "true",
 			style: shellStyle,