@seams/wallet 0.24.0 → 0.26.0

package/dist/esm/react/components/ShowQRCode.css

@@ -1,9 +1,100 @@
-.qr-code-container {
-  padding-top: 0.25rem;
+[data-seams-root].seams-theme-provider .qr-code-container {
+  box-sizing: border-box;
+  width: min(100%, 420px);
+  padding: 24px;
+  border-radius: var(--seams-shape-card, 24px);
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+}
+
+[data-seams-root].seams-theme-provider .seams-otp-prompt {
+  display: grid;
+  justify-items: center;
+  gap: 16px;
+  width: 100%;
+}
+[data-seams-root].seams-theme-provider .seams-otp-prompt-copy {
+  display: grid;
+  gap: 8px;
+  text-align: center;
+}
+[data-seams-root].seams-theme-provider .seams-otp-title {
+  margin: 0;
+  font: 600 21px / 1.25 var(--seams-font-family, system-ui, sans-serif);
+  color: var(--seams-colors-textPrimary);
+}
+[data-seams-root].seams-theme-provider .seams-otp-description,
+[data-seams-root].seams-theme-provider .seams-otp-helper {
+  margin: 0;
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+[data-seams-root].seams-theme-provider .seams-field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--seams-colors-textSecondary);
+}
+[data-seams-root].seams-theme-provider .seams-otp-code-field {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 320px);
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider input.seams-otp-input {
+  grid-column: 1;
+  grid-row: 2;
+  z-index: 1;
+  width: 100%;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px;
+}
+[data-seams-root].seams-theme-provider .seams-otp-slots {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 6px;
+  pointer-events: none;
+}
+[data-seams-root].seams-theme-provider .seams-otp-slot {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  height: 44px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 6px;
+  background: var(--seams-colors-surface);
+  color: var(--seams-colors-textPrimary);
+  font-size: 20px;
+  font-variant-numeric: tabular-nums;
+}
+[data-seams-root].seams-theme-provider .seams-otp-code-field:focus-within .seams-otp-slot {
+  outline: 2px solid var(--seams-colors-focus);
+  outline-offset: 1px;
+}
+[data-seams-root].seams-theme-provider .seams-otp-error {
+  margin: 0;
+  color: var(--seams-colors-error);
+  font-size: 13px;
+  line-height: 1.5;
+}
+[data-seams-root].seams-theme-provider button.seams-otp-resend {
+  padding: 8px;
+  color: var(--seams-colors-primary);
+  font: inherit;
+  cursor: pointer;
 }
 
 /* Modal Header */
-.qr-header {
+[data-seams-root].seams-theme-provider .qr-header {
   position: relative;
   display: grid;
   place-content: center;
@@ -13,7 +104,7 @@
 /* Sized off the auth menu's own title (21px) rather than louder than it: this
    heading sits inside the same card, so a heavier scale reads as a second,
    competing header. */
-.qr-title {
+[data-seams-root].seams-theme-provider .qr-title {
   font-size: 1.3125rem;
   font-weight: 600;
   letter-spacing: -0.01em;
@@ -24,7 +115,7 @@
   text-wrap: balance;
 }
 
-.qr-body {
+[data-seams-root].seams-theme-provider .qr-body {
   padding: 0rem;
   flex: 1;
   display: flex;
@@ -32,14 +123,14 @@
   align-items: center;
 }
 
-.seams-device-link-email-field {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field {
   display: grid;
   width: min(100%, 320px);
   gap: 0.4rem;
   margin-top: 0.25rem;
 }
 
-.seams-device-link-factor-options {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-options {
   box-sizing: border-box;
   display: grid;
   width: min(100%, 320px);
@@ -49,11 +140,11 @@
   border: 0;
 }
 
-.seams-device-link-factor-options > legend {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-options > legend {
   margin-bottom: 0.25rem;
 }
 
-.seams-device-link-factor-option {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -67,51 +158,53 @@
   cursor: pointer;
 }
 
-.seams-device-link-factor-option:has(input:checked) {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option:has(input:checked) {
   border-color: var(--seams-colors-textPrimary, #1e293b);
   background: var(--seams-colors-surface2, #f1f5f9);
 }
 
-.seams-device-link-factor-icon {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-icon {
   display: grid;
   flex: 0 0 22px;
   place-items: center;
   color: var(--seams-colors-textSecondary, #64748b);
 }
 
-.seams-device-link-factor-icon svg {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-icon svg {
   display: block;
+  width: 22px;
+  height: 22px;
 }
 
-.seams-device-link-factor-label {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-label {
   flex: 1;
   text-align: start;
 }
 
-.seams-device-link-factor-label span {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-label span {
   color: var(--seams-colors-textSecondary, #64748b);
   font-size: 0.8125rem;
 }
 
-.seams-device-link-factor-option input {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option input {
   flex: 0 0 auto;
   width: 1rem;
   height: 1rem;
   margin: 0 0 0 auto;
 }
 
-.seams-device-link-factor-option input:focus-visible {
+[data-seams-root].seams-theme-provider .seams-device-link-factor-option input:focus-visible {
   outline: 2px solid var(--seams-colors-primary, #3b82f6);
   outline-offset: 3px;
 }
 
-.seams-device-link-email-field .seams-field-label {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field .seams-field-label {
   color: var(--seams-colors-textSecondary, #64748b);
   font-size: 0.8125rem;
   font-weight: 600;
 }
 
-.seams-device-link-email-field input {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field input {
   box-sizing: border-box;
   width: 100%;
   min-height: 44px;
@@ -123,7 +216,7 @@
   font: inherit;
 }
 
-.seams-device-link-email-field input:focus-visible {
+[data-seams-root].seams-theme-provider .seams-device-link-email-field input:focus-visible {
   outline: none;
   border-color: transparent;
   background:
@@ -139,7 +232,7 @@
       border-box;
 }
 
-.qr-code-section {
+[data-seams-root].seams-theme-provider .qr-code-section {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -151,7 +244,7 @@
    so on a dark theme an unbacked image reads as a raw white rectangle. The
    plate is a fixed square in both states — the placeholder below occupies the
    same box, so nothing under it moves when the image arrives. */
-.qr-code-display {
+[data-seams-root].seams-theme-provider .qr-code-display {
   display: grid;
   place-items: center;
   width: min(100%, 232px);
@@ -164,7 +257,7 @@
     0 14px 28px -20px rgba(15, 23, 42, 0.45);
 }
 
-.qr-code-placeholder {
+[data-seams-root].seams-theme-provider .qr-code-placeholder {
   display: grid;
   place-items: center;
   width: 100%;
@@ -176,7 +269,7 @@
 
 /* On the white plate a translucent-white spinner track is invisible; state the
    track against the plate rather than the card. */
-.qr-code-placeholder .seams-spinner {
+[data-seams-root].seams-theme-provider .qr-code-placeholder .seams-spinner {
   width: 28px;
   height: 28px;
   border-radius: 999px;
@@ -207,13 +300,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-code-placeholder {
+  [data-seams-root].seams-theme-provider .qr-code-placeholder {
     animation: none;
   }
 }
 
-.qr-instruction,
-.qr-status {
+[data-seams-root].seams-theme-provider .qr-instruction,
+[data-seams-root].seams-theme-provider .qr-status {
   margin: 0;
   font-weight: 500;
   color: var(--seams-colors-textSecondary, #1e293b);
@@ -221,7 +314,7 @@
   text-wrap: pretty;
 }
 
-.qr-instruction {
+[data-seams-root].seams-theme-provider .qr-instruction {
   max-width: 34ch;
   font-size: 0.95rem;
   line-height: 1.45;
@@ -230,20 +323,20 @@
 /* The status is a running commentary on the pairing, not a peer of the
    instruction — one step quieter and smaller so the two lines stack as a
    hierarchy instead of a paragraph. */
-.qr-status {
+[data-seams-root].seams-theme-provider .qr-status {
   margin-bottom: 0.25rem;
   color: color-mix(in srgb, var(--seams-colors-textSecondary, #64748b), transparent 25%);
   font-size: 0.8125rem;
   line-height: 1.4;
 }
 
-.animated-ellipsis {
+[data-seams-root].seams-theme-provider .animated-ellipsis {
   display: inline-block;
   width: 1.2em;
   text-align: left;
 }
 
-.animated-ellipsis::after {
+[data-seams-root].seams-theme-provider .animated-ellipsis::after {
   content: '...';
   animation: ellipsis 1.5s infinite;
 }
@@ -266,7 +359,7 @@
   }
 }
 
-.qr-code-image {
+[data-seams-root].seams-theme-provider .qr-code-image {
   width: 100%;
   max-width: 200px;
   height: auto;
@@ -276,7 +369,7 @@
 /* Failure view. Same skeleton as the link-device confirmation — badge, title,
    copy, one control. Styles are restated here because ShowQRCode is also
    shared by device-linking surfaces. */
-.seams-link-device-failure {
+[data-seams-root].seams-theme-provider .seams-link-device-failure {
   min-height: 300px;
   width: min(100%, 360px);
   margin-inline: auto;
@@ -289,7 +382,7 @@
   text-align: center;
 }
 
-.seams-link-device-failure-icon {
+[data-seams-root].seams-theme-provider .seams-link-device-failure-icon {
   width: 56px;
   height: 56px;
   display: grid;
@@ -299,11 +392,15 @@
   background: color-mix(in srgb, var(--seams-colors-error, #ef4444), transparent 88%);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--seams-colors-error, #ef4444), transparent 80%);
 }
+[data-seams-root].seams-theme-provider .seams-link-device-failure-icon > svg {
+  width: 26px;
+  height: 26px;
+}
 
 /* The detail is a raw error string, so it is sized and coloured as evidence
    rather than as prose: quiet, tight, and allowed to break mid-token so a long
    technical message wraps instead of forcing the card wider. */
-.seams-link-device-failure-detail {
+[data-seams-root].seams-theme-provider .seams-link-device-failure-detail {
   max-width: 34ch;
   margin: 0;
   color: color-mix(in srgb, var(--seams-colors-textSecondary, #64748b), transparent 15%);
@@ -314,9 +411,8 @@
   overflow-wrap: anywhere;
 }
 
-/* Device-linking button styling keeps the button looking
-   the same whether or not that sheet is loaded alongside this one. */
-.seams-link-device-failure .seams-link-device-btn {
+/* Every device-link step uses the same action control. */
+[data-seams-root].seams-theme-provider button.seams-link-device-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -325,7 +421,7 @@
   margin-top: 0.25rem;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  height: calc(var(--seams-shape-controlHeight, 44px) - 4px);
+  min-height: var(--seams-shape-controlHeight, 44px);
   background: var(--seams-colors-surface, #f8fafc);
   border: 1px solid var(--seams-colors-borderPrimary, #e2e8f0);
   border-radius: var(--seams-shape-control, 10px);
@@ -336,7 +432,16 @@
   font-size: 0.875rem;
 }
 
-.seams-link-device-failure .seams-link-device-btn:hover,
-.seams-link-device-failure .seams-link-device-btn:focus-visible {
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:hover:not(:disabled) {
   background: var(--seams-colors-surface2, #f1f5f9);
 }
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:focus-visible,
+[data-seams-root].seams-theme-provider button.seams-otp-resend:focus-visible {
+  outline: 2px solid var(--seams-colors-focus);
+  outline-offset: 3px;
+}
+[data-seams-root].seams-theme-provider button.seams-link-device-btn:disabled,
+[data-seams-root].seams-theme-provider button.seams-otp-resend:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -4,6 +4,8 @@ import { isLinkedDeviceTargetEmailAddressV1, normalizeLinkedDeviceTargetEmailAdd
 import { walletText } from "../../core/ui/messages.js";
 import { WalletText, useWalletLocale } from "../context/WalletLocale.js";
 import { useSeams } from "../context/index.js";
+import { Theme, useTheme } from "./theme/ThemeProvider.js";
+import { lucideIconSvg } from "./AccountMenuButton/icons/lucideIcon.js";
 import FingerprintIcon from "./FingerprintIcon.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,25 +13,16 @@ import "./ShowQRCode.css";
 //#region src/react/components/ShowQRCode.tsx
 const DEFAULT_TARGET_FACTOR = { kind: "passkey_prf" };
 function EmailOtpMethodIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "22",
-		height: "22",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.75",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: [/* @__PURE__ */ jsx("rect", {
-			x: "2.75",
-			y: "5",
-			width: "18.5",
-			height: "14",
-			rx: "2.75"
-		}), /* @__PURE__ */ jsx("path", { d: "m3.75 7.75 6.94 4.86a2.25 2.25 0 0 0 2.62 0l6.94-4.86" })]
-	});
+	return lucideIconSvg("mail", {
+		size: 22,
+		strokeWidth: 1.75
+	}, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "2.75",
+		y: "5",
+		width: "18.5",
+		height: "14",
+		rx: "2.75"
+	}), /* @__PURE__ */ jsx("path", { d: "m3.75 7.75 6.94 4.86a2.25 2.25 0 0 0 2.62 0l6.94-4.86" })] }));
 }
 function targetFactorFromSelection(value) {
 	switch (value) {
@@ -76,7 +69,15 @@ function reconcileActiveLinkedDevice(runtime, event, walletId) {
 	runtime.onClose();
 	Promise.all([runtime.refreshSession(walletId), runtime.refreshAccountData()]).catch(warnLinkedDeviceMenuRefresh);
 }
-function ShowQRCode({ isOpen, onClose, onEvent, onError }) {
+function ShowQRCode(props) {
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(DeviceLinkQRCode, { ...props })
+	});
+}
+function DeviceLinkQRCode({ isOpen, onClose, onEvent, onError }) {
 	const { startLinking, cancelLinking, refreshSession, refreshAccountData, setAccountName, accountInputState, loginState } = useSeams();
 	const [deviceLinkingState, setDeviceLinkingState] = useState({
 		kind: "select_factor",
@@ -770,23 +771,12 @@ function FailureView({ message, onChooseAnother }) {
 	});
 }
 function LinkFailedIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "26",
-		height: "26",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M9 17H7A5 5 0 1 1 7 7h2" }),
-			/* @__PURE__ */ jsx("path", { d: "M15 7h2a5 5 0 0 1 3.54 8.54" }),
-			/* @__PURE__ */ jsx("path", { d: "m2 2 20 20" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 12h3" })
-		]
-	});
+	return lucideIconSvg("link-failed", { size: 26 }, /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M9 17H7A5 5 0 1 1 7 7h2" }),
+		/* @__PURE__ */ jsx("path", { d: "M15 7h2a5 5 0 0 1 3.54 8.54" }),
+		/* @__PURE__ */ jsx("path", { d: "m2 2 20 20" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 12h3" })
+	] }));
 }
 //#endregion
 export { ShowQRCode };

package/dist/esm/react/components/theme/Theme.css

@@ -0,0 +1,67 @@
+/* Reset controls only inside SDK-owned surfaces. Theme can also wrap app content.
+   Native control selectors add their element type above this baseline. */
+[data-seams-root].seams-theme-provider {
+  display: revert;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(.seams-profile-button-morphable, .seams-settings-page, .qr-code-container) {
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button, input, select, textarea, a) {
+  box-sizing: border-box;
+  appearance: auto;
+  display: inline-block;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-decoration: none;
+  white-space: normal;
+  vertical-align: middle;
+  box-shadow: none;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button) {
+  appearance: none;
+}

package/dist/esm/react/components/theme/ThemeProvider.js

@@ -3,6 +3,7 @@ import { DARK_TOKENS, LIGHT_TOKENS } from "./design-tokens.js";
 import { createCSSVariables, mergeTokens } from "./utils.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
+import "./Theme.css";
 //#region src/react/components/theme/ThemeProvider.tsx
 const ThemeContext = React.createContext(null);
 const useThemeContext = () => {
@@ -36,16 +37,15 @@ function useTheme() {
 const ThemeScope = ({ tag = "main", className, style, dataAttr = "data-seams-theme", children }) => {
 	const { theme, vars } = useThemeContext();
 	const locale = useWalletLocale();
-	const Comp = tag;
-	const attrs = { [dataAttr]: theme };
-	return /* @__PURE__ */ jsx(Comp, {
+	return /* @__PURE__ */ jsx(tag, {
+		[dataAttr]: theme,
+		"data-seams-root": "",
 		lang: locale,
-		className,
+		className: `seams-theme-provider${className ? ` ${className}` : ""}`,
 		style: {
 			...vars,
 			...style
 		},
-		...attrs,
 		children
 	});
 };
@@ -84,7 +84,7 @@ const ThemeProvider = ({ children, theme, tokens, prefix = "--seams", setTheme }
 		children
 	});
 };
-const Theme = ({ children, tag = "main", className = "seams-theme-provider", style, dataAttr, theme, tokens, prefix, setTheme }) => {
+const Theme = ({ children, tag = "main", className, style, dataAttr, theme, tokens, prefix, setTheme }) => {
 	return /* @__PURE__ */ jsx(ThemeProvider, {
 		theme,
 		tokens,

package/dist/esm/react/externalEvm.js

@@ -1,5 +1,7 @@
+import { Theme, useTheme } from "./components/theme/ThemeProvider.js";
 import { Component, useEffect, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./externalWalletPicker.css";
 //#region src/react/externalEvm.tsx
 /** Subscribe to a host-owned controller and mount its browser discovery lifecycle. */
 function useExternalEvm(controller) {
@@ -7,9 +9,14 @@ function useExternalEvm(controller) {
 	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
 }
 function ExternalEvmWalletPicker({ controller, snapshot }) {
-	return /* @__PURE__ */ jsx(WalletPicker, {
-		controller,
-		snapshot
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(WalletPicker, {
+			controller,
+			snapshot
+		})
 	});
 }
 var WalletPicker = class extends Component {
@@ -59,7 +66,7 @@ var WalletPicker = class extends Component {
 		const selectedChainId = connection.kind === "connected" && connection.network.kind === "configured" ? connection.chainId : controller.chains[0]?.chainId;
 		return /* @__PURE__ */ jsxs("section", {
 			"aria-label": "External EVM wallet",
-			className: "seams-external-evm",
+			className: "seams-wallet-picker seams-external-evm",
 			children: [
 				/* @__PURE__ */ jsxs("form", {
 					onSubmit: this.connect,

package/dist/esm/react/externalNear.js

@@ -1,12 +1,21 @@
 import { nearWalletName } from "../externalNear/wallets.js";
+import { Theme, useTheme } from "./components/theme/ThemeProvider.js";
 import { Component, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "./externalNear.css";
+import "./externalWalletPicker.css";
 //#region src/react/externalNear.tsx
 function useExternalNear(controller) {
 	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
 }
-var ExternalNearWalletPicker = class extends Component {
+function ExternalNearWalletPicker({ controller }) {
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(NearWalletPicker, { controller })
+	});
+}
+var NearWalletPicker = class extends Component {
 	state = {
 		snapshot: this.props.controller.getSnapshot(),
 		message: ""
@@ -41,7 +50,7 @@ var ExternalNearWalletPicker = class extends Component {
 		}, wallet));
 		return /* @__PURE__ */ jsxs("section", {
 			"aria-label": "Choose your NEAR wallet",
-			className: "seams-near-picker",
+			className: "seams-wallet-picker",
 			children: [
 				/* @__PURE__ */ jsx("h2", { children: "Choose your NEAR wallet" }),
 				/* @__PURE__ */ jsxs("p", {
@@ -49,7 +58,7 @@ var ExternalNearWalletPicker = class extends Component {
 					children: ["NEAR ", this.props.controller.network]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "seams-near-wallets",
+					className: "seams-wallet-picker-options",
 					children: choices
 				}),
 				wallets.length === 0 && /* @__PURE__ */ jsx("p", { children: "No NEAR wallets are enabled." }),