@swype-org/react-sdk 0.2.297 → 0.2.303

package/dist/index.cjs

@@ -65,6 +65,7 @@ var darkTheme = {
   accent: "#B2FF93",
   accentHover: "#8FD974",
   accentText: "#1B4332",
+  highlight: "#B2FF93",
   success: "#0f9d73",
   successBg: "#0f2f2a",
   error: "#d46a72",
@@ -96,6 +97,7 @@ var lightTheme = {
   accent: "#B2FF93",
   accentHover: "#8FD974",
   accentText: "#1B4332",
+  highlight: "#B2FF93",
   success: "#0f9d73",
   successBg: "#e6f7f1",
   error: "#ce6670",
@@ -137,6 +139,8 @@ var lightThemeNew = {
   accent: "#000000",
   accentHover: "#1a1a1a",
   accentText: "#fafafa",
+  // Figma `accent` token (#eaff03) — the lime "0% FEES" chip.
+  highlight: "#eaff03",
   success: "#0f9d73",
   successBg: "#e6f7f1",
   error: "#ce6670",
@@ -8417,12 +8421,32 @@ function PrimaryButton({
   icon,
   progress,
   progressText,
-  progressPaused
+  progressPaused,
+  spinnerOnly
 }) {
   const { tokens } = useBlinkConfig();
   const inProgress = progress != null;
   const isDisabled = disabled || loading || inProgress;
   const done = inProgress && progress >= 1;
+  if (spinnerOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: true,
+        "aria-label": "Please wait",
+        style: buttonStyle2(tokens, { disabled: false, loading: true }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: inlineSpinnerStyle(tokens.accentText) }),
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes blink-spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+        ]
+      }
+    );
+  }
   if (inProgress) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -8549,6 +8573,15 @@ var buttonStyle2 = (tokens, state) => {
     gap: 8
   };
 };
+var inlineSpinnerStyle = (color) => ({
+  width: 20,
+  height: 20,
+  border: `2px solid ${color}44`,
+  borderTopColor: color,
+  borderRadius: "50%",
+  animation: "blink-spin 0.9s linear infinite",
+  flexShrink: 0
+});
 var iconWrapStyle = {
   display: "flex",
   alignItems: "center"
@@ -10665,269 +10698,288 @@ var avatarStyle = (tokens) => ({
   color: tokens.textMuted,
   background: "transparent"
 });
-var LINK_ICON_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAK6ADAAQAAAABAAAAFwAAAAAKDRJ/AAADIUlEQVRIDaWXMWsVQRSFX9SABgQjRFAhRV4hPAsFLQKmVDsLhaTU0p/gb7CztfAPaJnSlBYWpgiooJIIEZMiRQoLhVh4vnXP8+6+ebsz8cB5M7t37p07996ZnTcz6MZQ4pG4JJ4XT4tt/NKLPXFHfCceijl4rEHYtT42PorbYhIzybeDAU7eFjFWik0pvBa7nMYuzqbAotdFnG/gZOPp78M9NffF+YQs59UlDboh/hZ3pygQzWvimYSceZdFAonjY7QjuyYJExkYJbUosdJUtCgNMnFVjLp6HGyIRLkL6LPAm2Jbnyy9FCvEyJL2lfo9DQ6+ELfEAxHHUyCCyD+IGMdpR8w1OS3CGlplgCBYn72xgEBgEXPiJx7sLKsi/QYRYUXTHPS4dst4HL4inq2Fi2pZcI4txjAWkC2A/lfx0M4+1IOjwWTr4nFBpJnQNTmrPhHCbi7I6mXREZ5Xf/OEfkgVD4B09NVYNbDn56fk41pTnzkcqR7VsThmttLHWUrAYEWpTWR5SYst6tBgwhKwYDa3McJZUmSUpMo6Xe2bIGTjlSIudoizF4OF76Gf2+UUeSreSSjsh3fnQj+329DH2YicHRvH07eTON0GqTS8gf2c0zb0cTY6mPr29xnt0/eG5TgsRWOBOBs3FMdFKfr0cfKJaKdL7McS3cfZeMsZlViqx74POqlSCOLibjyp9nA27ji+zaWlwBFlLKlTep5at91y9mPPqD4KTOYJqREuMyWI+uitiqULTs3Hxo0fq21/bqk7h/yC+hPXs5S18A6H0T8lsmDuBlsin97jgHJaCYqv1D+IzjLJYj2A8POx2BXjbq/FEw1jjkScBFxirouUWI6+hlUgko9EB46XbNC3dOws/c8i1zN/0Ygwq+Md+CF2RepbNepfzbJ49LGH3qyIjTZwcCguiw/EBdFoXKral28GkQIf9FaKLSXzTJwWsVuS3RX/t243ZKNx3MXISlaB+mNFRMQFXgnqHyL2RYzna5QTYeqVcc5SlPf1mZ8b18Q9JRXZaIzJOM5oIdHC2HMxByyWCwy0fluPDPGXCVLj2E/iD2Rfl2nM3a3EAAAAAElFTkSuQmCC";
+
+// src/deviceBiometricUnlockText.ts
+var FALLBACK = "Biometric verification";
+function getDeviceBiometricUnlockText() {
+  const ua = typeof navigator !== "undefined" && typeof navigator.userAgent === "string" ? navigator.userAgent : "";
+  if (/iPhone|iPad|iPod/i.test(ua)) {
+    return "Face ID";
+  }
+  if (/Android/i.test(ua)) {
+    return "Fingerprint or face unlock";
+  }
+  if (/Windows NT/i.test(ua)) {
+    return "Windows Hello";
+  }
+  if (/Macintosh|Mac OS X/i.test(ua)) {
+    return "Touch ID";
+  }
+  return FALLBACK;
+}
+var CLUSTER_LOGOS = [
+  METAMASK_LOGO,
+  PHANTOM_LOGO,
+  RABBY_LOGO,
+  OKX_WALLET_LOGO,
+  TRUST_WALLET_LOGO,
+  BASE_LOGO
+];
 function DepositOptionsScreen({
-  onFromWallet,
   onToAddress,
   onSignInWithBlink,
   onClose
 }) {
   const { tokens } = useBlinkConfig();
-  const headerRight = onClose ? /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: onClose,
-      "aria-label": "Close",
-      style: closeButtonStyle2(tokens),
-      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
+  const depositLabel = `Deposit with ${getDeviceBiometricUnlockText()}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: sheetStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerRowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle }),
+      onClose ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          d: "M6 6l12 12M18 6L6 18",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close",
+          style: closeButtonStyle2(tokens.bgRecessed, tokens.text),
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M6 6l12 12M18 6L6 18",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
         }
-      ) })
-    }
-  ) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScreenLayout,
-    {
-      footer: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onSignInWithBlink, icon: /* @__PURE__ */ jsxRuntime.jsx(FaceIdIcon2, {}), children: "Sign in with Blink" }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScreenHeader,
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_PASSKEY_ILLUSTRATION, alt: "", "aria-hidden": "true", style: heroStyle }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: stackStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositPillWrapperStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            title: "Deposit",
-            right: headerRight,
-            left: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: BLINK_WORDMARK,
-                alt: "Blink",
-                style: wordmarkStyle
-              }
-            )
+            type: "button",
+            onClick: onSignInWithBlink,
+            style: depositPillStyle(tokens.accent),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: depositPillLabelStyle(tokens.accentText), children: depositLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: clusterStyle, children: CLUSTER_LOGOS.map((logo, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: clusterChipStyle(tokens.bgInput, i === CLUSTER_LOGOS.length - 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", "aria-hidden": "true", style: clusterIconStyle })
+                },
+                logo
+              )) })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DepositTypeToggle, { tokens }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle(tokens.bgCardTranslucent), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SourceRow,
-              {
-                name: "Connect Wallet",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(WalletIcon, { color: tokens.text }),
-                onClick: onFromWallet,
-                right: /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeWithArrowStyle, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6l6 6-6 6", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SourceRow,
-              {
-                name: "Address",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(AddressIcon, { color: tokens.text }),
-                onClick: onToAddress
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SourceRow,
-              {
-                name: "Exchange",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { color: tokens.textTertiary }),
-                disabled: true,
-                disabledColor: tokens.textTertiary,
-                right: /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { tokens })
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function DepositTypeToggle({ tokens }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-}
-function ComingSoonBadge({ tokens }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: comingSoonBadgeStyle(tokens.bgRecessed, tokens.textMuted), children: "Coming soon" });
-}
-function WalletIcon({ color }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M3 9.5a3 3 0 013-3h12a3 3 0 013 3v8a3 3 0 01-3 3H6a3 3 0 01-3-3v-8z",
-        stroke: color,
-        strokeWidth: "1.6"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M16 4.5l-9 2",
-        stroke: color,
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17.25", cy: "13.5", r: "1.1", fill: color })
-  ] });
-}
-function AddressIcon({ color }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: feesBadgeStyle(tokens.highlight, tokens.text), children: "0% FEES" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerRowStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerRuleStyle(tokens.textTertiary) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerLabelStyle(tokens.textTertiary), children: "OR" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerRuleStyle(tokens.textTertiary) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onToAddress,
+          style: manualRowStyle(tokens.bgCardTranslucent),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: manualLabelStyle(tokens.text), children: "Send Crypto Manually" }),
+            /* @__PURE__ */ jsxRuntime.jsx(QrIcon, { color: tokens.text })
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
 }
-function LinkIcon({ color }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+function QrIcon({ color }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
     {
-      src: LINK_ICON_DATA_URI,
-      alt: "",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
       "aria-hidden": "true",
-      style: linkIconImageStyle(color)
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
+      ]
     }
   );
 }
-function FaceIdIcon2() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M3 8V6a3 3 0 013-3h2",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M16 3h2a3 3 0 013 3v2",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M21 16v2a3 3 0 01-3 3h-2",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M8 21H6a3 3 0 01-3-3v-2",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M9 10v1.5",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M15 10v1.5",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M12 10v3.5",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M9.5 16.25c.7.6 1.55.95 2.5.95s1.8-.35 2.5-.95",
-        stroke: "currentColor",
-        strokeWidth: "1.6",
-        strokeLinecap: "round"
-      }
-    )
-  ] });
-}
-var wordmarkStyle = {
-  height: 20,
+var sheetStyle = {
+  position: "relative",
+  minHeight: "100%",
+  display: "flex",
+  flexDirection: "column",
+  boxSizing: "border-box"
+};
+var contentStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 32,
+  padding: "32px 8px"
+};
+var headerRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  minHeight: 44
+};
+var wordmarkImgStyle = {
+  height: 31,
   width: "auto",
+  display: "block"
+};
+var heroStyle = {
+  width: 253,
+  height: 253,
+  maxWidth: "100%",
   objectFit: "contain",
   display: "block"
 };
-var contentStyle2 = {
+var stackStyle = {
   display: "flex",
   flexDirection: "column",
-  gap: 24,
-  paddingTop: 24
+  gap: 16,
+  width: "100%"
 };
-var cardStyle = (bg) => ({
+var depositPillWrapperStyle = {
+  position: "relative",
+  width: "100%",
+  height: 71
+};
+var depositPillStyle = (bg) => ({
   display: "flex",
-  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  height: 56,
+  padding: "12px 12px 12px 24px",
   background: bg,
+  border: "none",
   borderRadius: 28,
-  padding: "8px 8px 8px 20px"
+  cursor: "pointer",
+  boxSizing: "border-box",
+  fontFamily: "inherit"
+});
+var depositPillLabelStyle = (color) => ({
+  color,
+  fontSize: 16,
+  fontWeight: 500,
+  whiteSpace: "nowrap"
 });
-var comingSoonBadgeStyle = (bg, color) => ({
+var clusterStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  isolation: "isolate"
+};
+var clusterChipStyle = (bg, last) => ({
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  background: bg,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: last ? 0 : -12,
+  filter: "drop-shadow(0 0 2px rgba(0, 0, 0, 0.24))",
+  flexShrink: 0
+});
+var clusterIconStyle = {
+  width: 24,
+  height: 24,
+  borderRadius: "50%",
+  objectFit: "cover",
+  display: "block"
+};
+var feesBadgeStyle = (bg, color) => ({
+  position: "absolute",
+  left: 131,
+  top: 45,
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
   background: bg,
   color,
-  fontSize: 10,
+  fontSize: 12,
   fontWeight: 500,
   lineHeight: 1,
   padding: "4px 8px",
-  borderRadius: 8,
-  marginRight: 8,
-  whiteSpace: "nowrap"
+  borderRadius: 6,
+  whiteSpace: "nowrap",
+  transform: "rotate(-6.75deg)",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.16)",
+  pointerEvents: "none"
 });
-var badgeWithArrowStyle = {
+var dividerRowStyle = {
   display: "flex",
-  alignItems: "center"
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 10,
+  padding: "0 16px",
+  width: "100%",
+  boxSizing: "border-box"
 };
-var linkIconImageStyle = (color) => ({
-  width: 24,
-  height: 24,
-  objectFit: "contain",
-  display: "block",
-  opacity: color.includes("rgba") ? 0.3 : 1
+var dividerRuleStyle = (color) => ({
+  flex: 1,
+  height: 1,
+  background: color
 });
-var closeButtonStyle2 = (tokens) => ({
-  width: 40,
-  height: 40,
+var dividerLabelStyle = (color) => ({
+  color,
+  fontSize: 12,
+  fontWeight: 500,
+  whiteSpace: "nowrap"
+});
+var manualRowStyle = (bg) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  height: 56,
+  padding: "12px 24px",
+  background: bg,
+  border: "none",
+  borderRadius: 28,
+  cursor: "pointer",
+  boxSizing: "border-box",
+  fontFamily: "inherit"
+});
+var manualLabelStyle = (color) => ({
+  flex: 1,
+  minWidth: 0,
+  color,
+  fontSize: 16,
+  fontWeight: 400
+});
+var closeButtonStyle2 = (bg, color) => ({
+  flexShrink: 0,
+  width: 44,
+  height: 44,
   borderRadius: "50%",
   border: "none",
-  background: tokens.bgRecessed,
-  color: tokens.text,
+  background: bg,
+  color,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -11283,7 +11335,7 @@ function PasskeyPopupWelcomeScreen({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lockupStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "", "aria-hidden": true, style: lockupMarkStyle }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: wordmarkStyle2(tokens.text), children: "Blink" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: wordmarkStyle(tokens.text), children: "Blink" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: illustrationFrameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
             "img",
@@ -11340,7 +11392,7 @@ var lockupMarkStyle = {
   height: 24,
   display: "block"
 };
-var wordmarkStyle2 = (color) => ({
+var wordmarkStyle = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 500,
   letterSpacing: "-0.03em",
@@ -11789,7 +11841,7 @@ function WalletPickerScreen({
     ),
     /* @__PURE__ */ jsxRuntime.jsx("h1", { style: titleStyle3(tokens.text), children: "Link wallet" }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: sheetStackStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle2(tokens.bgCardTranslucent), children: showOtherWallets ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: sheetStackStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle(tokens.bgCardTranslucent), children: showOtherWallets ? /* @__PURE__ */ jsxRuntime.jsx(
       OtherWalletsPanel,
       {
         wallets: filteredReownWallets,
@@ -12012,7 +12064,7 @@ var sheetStackStyle = {
   flexDirection: "column",
   gap: 16
 };
-var cardStyle2 = (bg) => ({
+var cardStyle = (bg) => ({
   display: "flex",
   flexDirection: "column",
   background: bg,
@@ -12165,7 +12217,7 @@ function LinkTokensScreen({
           {
             onBack,
             onLogout,
-            center: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle })
+            center: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle2 })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
@@ -12231,7 +12283,7 @@ var contentStyle9 = {
   minHeight: 0,
   width: "100%"
 };
-var wordmarkImgStyle = {
+var wordmarkImgStyle2 = {
   height: 22,
   width: "auto",
   display: "block",
@@ -12555,7 +12607,7 @@ function SelectDepositSourceScreen({
                 label: "Send manually",
                 color: tokens.text,
                 onClick: onSendManually,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(QrIcon, { color: tokens.text })
+                icon: /* @__PURE__ */ jsxRuntime.jsx(QrIcon2, { color: tokens.text })
               }
             ),
             onAddProvider && /* @__PURE__ */ jsxRuntime.jsx(
@@ -12564,7 +12616,7 @@ function SelectDepositSourceScreen({
                 label: "Link Wallet",
                 color: tokens.text,
                 onClick: onAddProvider,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(WalletIcon2, {})
+                icon: /* @__PURE__ */ jsxRuntime.jsx(WalletIcon, {})
               }
             )
           ] })
@@ -12649,12 +12701,23 @@ function ActionRow({
   onClick,
   icon
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick, style: actionRowStyle(color), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: actionIconSlotStyle, children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: actionLabelStyle, children: label })
-  ] });
+  const [hovered, setHovered] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: actionRowStyle(color, hovered),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: actionIconSlotStyle, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: actionLabelStyle, children: label })
+      ]
+    }
+  );
 }
-function QrIcon({ color }) {
+function QrIcon2({ color }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
@@ -12668,7 +12731,7 @@ function QrIcon({ color }) {
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
   ] });
 }
-function WalletIcon2() {
+function WalletIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -12686,13 +12749,13 @@ function WalletIcon2() {
     )
   ] });
 }
-var actionRowStyle = (color) => ({
+var actionRowStyle = (color, hovered) => ({
   display: "flex",
   alignItems: "center",
   gap: 8,
   width: "100%",
   padding: 4,
-  background: "transparent",
+  background: hovered ? "rgba(255,255,255,0.24)" : "transparent",
   border: "none",
   borderRadius: 56,
   color,
@@ -12700,6 +12763,7 @@ var actionRowStyle = (color) => ({
   fontFamily: "inherit",
   textAlign: "left",
   outline: "none",
+  transition: "background 0.15s ease",
   boxSizing: "border-box"
 });
 var actionIconSlotStyle = {
@@ -12874,7 +12938,7 @@ function DepositScreen({
         onClick: () => onDeposit(amount),
         disabled: !canDeposit,
         loading: processing,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(FaceIdIcon3, {}),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(FaceIdIcon2, {}),
         children: "Deposit"
       }
     );
@@ -13022,7 +13086,7 @@ function DepositScreen({
       ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: redesignNoFeesStyle(tokens.text), children: "No fees" }) }),
       showHeroPresets && presetsRow
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: bannerSlotStyle2, children: showLowFunds ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: bannerSlotStyle2, children: mobileEntryWithKeypad ? null : showLowFunds ? /* @__PURE__ */ jsxRuntime.jsx(
       NotificationBanner,
       {
         variant: "negative",
@@ -13044,7 +13108,7 @@ function DepositScreen({
     ) : error ? /* @__PURE__ */ jsxRuntime.jsx(NotificationBanner, { title: "Something went wrong", description: error }) : null })
   ] });
 }
-function FaceIdIcon3() {
+function FaceIdIcon2() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8V6a3 3 0 013-3h2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3h2a3 3 0 013 3v2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
@@ -14784,30 +14848,102 @@ var closeButtonStyle5 = (bg, color) => ({
   padding: 0
 });
 var DELAYED_RETRY_VISIBLE_MS = 2e4;
+var SPIN_KEYFRAMES_CSS2 = `
+@keyframes blink-approving-spin {
+  to { transform: rotate(360deg); }
+}`;
 function ApprovingInWalletScreen({
   tokenSymbol,
   chainName,
   step,
   error,
-  onRetry
+  onRetry,
+  onBack,
+  onLogout
 }) {
-  const { tokens } = useBlinkConfig();
+  const { tokens: t } = useBlinkConfig();
   const showDelayedRetry = useDelayedRetry(error == null && onRetry != null);
   const retryVisible = onRetry != null && (error != null || showDelayedRetry);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const token = tokenSymbol ?? "token";
+  const steps = buildSteps(step, tokenSymbol, chainName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
-      footer: retryVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStackStyle4, children: [
-        error && /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
-        /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetry, children: "Retry" })
-      ] }) : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle15, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lockupStyle2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_LOGO, alt: "", "aria-hidden": true, style: lockupMarkStyle2 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: wordmarkStyle3(tokens.text), children: "Blink" })
+      scrollableBody: false,
+      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStackStyle4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lockBannerStyle2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: lockIconWrapStyle2(t.text), children: /* @__PURE__ */ jsxRuntime.jsx(LockIcon3, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: lockBannerTextStyle2(t.text), children: "Your passkey is required each time you deposit. Funds cannot move without your approval." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsFrameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps: buildSteps(step, tokenSymbol, chainName), activeIndicator: "spinner", size: "lg" }) })
-      ] })
+        retryVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: retryStackStyle, children: [
+          error && /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
+          /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetry, children: "Retry" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { spinnerOnly: true })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            onBack,
+            onLogout,
+            center: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle3 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle15, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle13(t.text), children: `Authorizing ${token} for passkey deposits` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle2(t.bgRecessed, t.radiusLg), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_KEYFRAMES_CSS2 }),
+            steps.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(ChecklistRow, { step: s }, i))
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ChecklistRow({ step }) {
+  const { tokens: t } = useBlinkConfig();
+  const isComplete = step.status === "complete";
+  const isActive = step.status === "active";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle6, children: [
+    isComplete ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: completeBadgeStyle(t.accent), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+        fill: t.accentText
+      }
+    ) }) }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx(RowSpinner, { color: t.accent }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: pendingBadgeStyle(t.bgRecessed) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle7(isComplete || isActive ? t.text : t.textMuted), children: step.label })
+  ] });
+}
+function RowSpinner({ color }) {
+  const size = 24;
+  const stroke = 2;
+  const r = (size - stroke) / 2;
+  const c = size / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      style: {
+        width: size,
+        height: size,
+        flexShrink: 0,
+        animation: "blink-approving-spin 0.9s linear infinite"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: c,
+          cy: c,
+          r,
+          stroke: color,
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: `${circumference * 0.25} ${circumference}`
+        }
+      ) })
     }
   );
 }
@@ -14836,50 +14972,124 @@ function useDelayedRetry(enabled) {
   }, [enabled]);
   return visible;
 }
+function LockIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M7 10V8a5 5 0 0 1 10 0v2m-12 0h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var wordmarkImgStyle3 = {
+  height: 22,
+  width: "auto",
+  display: "block",
+  pointerEvents: "none",
+  userSelect: "none"
+};
 var contentStyle15 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  paddingTop: 8,
   flex: 1,
   minHeight: 0,
+  width: "100%"
+};
+var headingStyle13 = (color) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  lineHeight: "normal",
+  letterSpacing: 0,
+  color,
+  margin: 0,
+  textAlign: "center"
+});
+var cardStyle2 = (bg, radius) => ({
+  background: bg,
+  borderRadius: radius,
+  padding: 8,
+  width: "100%",
+  boxSizing: "border-box",
   display: "flex",
   flexDirection: "column",
+  gap: 4
+});
+var rowStyle6 = {
+  display: "flex",
   alignItems: "center",
+  gap: 16,
+  padding: "12px 16px 12px 12px",
+  borderRadius: 16,
   width: "100%",
-  // ScreenLayout body already applies 24px side padding; +8px here reaches the
-  // 32px Figma gutter, with 32px above the logo and a 32px gap to the checklist.
-  padding: "32px 8px 0",
-  gap: 32
+  boxSizing: "border-box"
 };
-var lockupStyle2 = {
-  display: "flex",
+var completeBadgeStyle = (color) => ({
+  width: 24,
+  height: 24,
+  borderRadius: "50%",
+  background: color,
+  display: "inline-flex",
   alignItems: "center",
-  gap: 6,
+  justifyContent: "center",
   flexShrink: 0
-};
-var lockupMarkStyle2 = {
+});
+var pendingBadgeStyle = (color) => ({
   width: 24,
   height: 24,
-  display: "block"
-};
-var wordmarkStyle3 = (color) => ({
-  fontSize: "1.45rem",
-  fontWeight: 500,
-  letterSpacing: "-0.03em",
-  lineHeight: 1,
+  borderRadius: "50%",
+  background: color,
+  flexShrink: 0
+});
+var labelStyle7 = (color) => ({
+  fontSize: "1rem",
+  fontWeight: 400,
+  lineHeight: 1.25,
   color
 });
-var stepsFrameStyle = {
-  flex: 1,
-  minHeight: 0,
+var footerStackStyle4 = {
   display: "flex",
   flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
+  gap: 16,
   width: "100%"
 };
-var footerStackStyle4 = {
+var retryStackStyle = {
   display: "flex",
   flexDirection: "column",
-  gap: 8
+  gap: 8,
+  width: "100%"
 };
+var lockBannerStyle2 = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 16,
+  padding: "12px 16px 12px 12px",
+  borderRadius: 16,
+  width: "100%",
+  boxSizing: "border-box"
+};
+var lockIconWrapStyle2 = (color) => ({
+  flexShrink: 0,
+  width: 24,
+  height: 24,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color
+});
+var lockBannerTextStyle2 = (color) => ({
+  margin: 0,
+  flex: 1,
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: "normal",
+  color
+});
 function ConfirmSignScreen({
   walletName,
   chainFamily,
@@ -14908,7 +15118,7 @@ function ConfirmSignScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle16, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle13(tokens.text), children: heading }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle14(tokens.text), children: heading }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: subtitle }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: successBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: checkmarkStyle, children: "\u2713" }),
@@ -14934,7 +15144,7 @@ var logoStyle3 = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle13 = (color) => ({
+var headingStyle14 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -15296,10 +15506,10 @@ function GuestTokenPickerScreen({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle17, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle14(tokens.text), children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle15(tokens.text), children: title }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle8(tokens), children: error }),
           entries2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle11(tokens.textMuted), children: emptyMessage ?? "No tokens available." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle7(tokens.textSecondary), children: "Token" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle8(tokens.textSecondary), children: "Token" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -15379,7 +15589,7 @@ var contentStyle17 = {
   padding: "0 20px 16px",
   gap: 12
 };
-var headingStyle14 = (color) => ({
+var headingStyle15 = (color) => ({
   fontSize: "1.25rem",
   fontWeight: 700,
   color,
@@ -15391,7 +15601,7 @@ var subtitleStyle11 = (color) => ({
   color,
   textAlign: "center"
 });
-var labelStyle7 = (color) => ({
+var labelStyle8 = (color) => ({
   fontSize: "0.75rem",
   fontWeight: 600,
   color,
@@ -15524,7 +15734,7 @@ function ManualTransferFlow({
     screenContent = /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onBack, children: "Back" }), children: [
       /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle18, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle15(tokens.text), children: "Manual transfer unavailable" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle16(tokens.text), children: "Manual transfer unavailable" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: bodyStyle5(tokens.textMuted), children: "merchantAuthorization is required." })
       ] })
     ] });
@@ -15603,7 +15813,7 @@ var contentStyle18 = {
   paddingBottom: 24,
   width: "100%"
 };
-var headingStyle15 = (color) => ({
+var headingStyle16 = (color) => ({
   color,
   fontSize: "2rem",
   lineHeight: 1.05,
@@ -15628,7 +15838,7 @@ function GenericLoadingShimmer() {
       role: "status",
       "aria-label": "Loading payment flow",
       "aria-busy": "true",
-      style: sheetStyle(tokens),
+      style: sheetStyle2(tokens),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes blink-loading-shimmer {
@@ -15674,7 +15884,7 @@ function ShimmerBlock2({
     }
   );
 }
-var sheetStyle = (tokens) => ({
+var sheetStyle2 = (tokens) => ({
   display: "flex",
   flexDirection: "column",
   height: "100%",
@@ -15721,12 +15931,12 @@ function buildLoginScreenProps({ flow, handlers }) {
 }
 function buildDepositOptionsScreenProps({ flow, handlers }) {
   return {
-    // "From Wallet" routes through REQUEST_LOGIN (handlers.onLogin) so the
-    // existing login path runs unchanged.
-    onFromWallet: handlers.onLogin,
-    // "To Address" navigates to the manual-transfer flow.
+    // "Send Crypto Manually" navigates to the manual-transfer flow.
     onToAddress: () => handlers.onSetPhase({ step: "manual-transfer" }),
-    onSignInWithBlink: handlers.onLoginWithPasskey,
+    // The primary CTA routes to the login screen (credential selection) rather
+    // than prompting for a passkey directly, matching the connect-wallet entry
+    // point. onLogin dispatches REQUEST_LOGIN → step 'login' → LoginScreen.
+    onSignInWithBlink: handlers.onLogin,
     // Deposit-options is the root screen for the full-widget flow, so the
     // top-right (X) closes the widget through the same `onBack` the host
     // provides. Falling back to `undefined` hides the close button when the
@@ -15818,7 +16028,8 @@ function buildApprovingInWalletScreenProps({
     chainName: setupToken?.chainName ?? null,
     step,
     error: flow.state.error || remote.authExecutorError,
-    onRetry: handlers.onRetryAuthorization
+    onRetry: handlers.onRetryAuthorization,
+    onLogout: flow.isDesktop ? handlers.onLogout : void 0
   };
 }
 function buildLinkTokensScreenProps({
@@ -19580,25 +19791,6 @@ function BlinkPaymentInner({
   ) });
 }
 
-// src/deviceBiometricUnlockText.ts
-var FALLBACK = "Biometric verification";
-function getDeviceBiometricUnlockText() {
-  const ua = typeof navigator !== "undefined" && typeof navigator.userAgent === "string" ? navigator.userAgent : "";
-  if (/iPhone|iPad|iPod/i.test(ua)) {
-    return "Face ID";
-  }
-  if (/Android/i.test(ua)) {
-    return "Fingerprint or face unlock";
-  }
-  if (/Windows NT/i.test(ua)) {
-    return "Windows Hello";
-  }
-  if (/Macintosh|Mac OS X/i.test(ua)) {
-    return "Touch ID";
-  }
-  return FALLBACK;
-}
-
 exports.ACCOUNT_SWITCH_CONFLICT_MESSAGE = ACCOUNT_SWITCH_CONFLICT_MESSAGE;
 exports.AdvancedSourceScreen = AdvancedSourceScreen;
 exports.ApprovingInWalletScreen = ApprovingInWalletScreen;
@@ -19615,6 +19807,7 @@ exports.BlinkPayment = BlinkPayment;
 exports.BlinkProvider = BlinkProvider;
 exports.ConfirmSignScreen = ConfirmSignScreen;
 exports.DepositCompleteScreen = DepositCompleteScreen;
+exports.DepositOptionsScreen = DepositOptionsScreen;
 exports.DepositScreen = DepositScreen;
 exports.DepositTransferStatusScreen = DepositTransferStatusScreen;
 exports.GuestTokenPickerScreen = GuestTokenPickerScreen;