@swype-org/react-sdk 0.1.93 → 0.1.95

package/dist/index.cjs

@@ -3187,72 +3187,6 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
-function VerifyPasskeyScreen({
-  onVerify,
-  onBack,
-  verifying,
-  error
-}) {
-  const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScreenLayout,
-    {
-      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
-        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
-      ] }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Verify your passkey" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Your browser requires a separate window to verify your passkey. Tap the button below to continue." }),
-          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
-        ] })
-      ]
-    }
-  );
-}
-var contentStyle4 = {
-  textAlign: "center",
-  flex: 1,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  paddingTop: 32
-};
-var headingStyle4 = (color) => ({
-  fontSize: "1.45rem",
-  fontWeight: 700,
-  letterSpacing: "-0.02em",
-  color,
-  margin: "24px 0 8px"
-});
-var subtitleStyle4 = (color) => ({
-  fontSize: "0.9rem",
-  color,
-  margin: "0 0 28px",
-  lineHeight: 1.5,
-  maxWidth: 280
-});
-var errorBannerStyle3 = (tokens) => ({
-  background: tokens.errorBg,
-  border: `1px solid ${tokens.error}66`,
-  borderRadius: 16,
-  padding: "11px 14px",
-  color: tokens.error,
-  fontSize: "0.84rem",
-  marginBottom: 14,
-  lineHeight: 1.5,
-  width: "100%",
-  textAlign: "left"
-});
 var WALLET_EMOJIS = {
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
@@ -3295,8 +3229,8 @@ function WalletPickerScreen({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack }),
         hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
             const wallet = acct.wallets[0];
             const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -3336,8 +3270,8 @@ function WalletPickerScreen({
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
         ] }),
         !hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Where are your stablecoins?" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: gridStyle, children: [
           displayProviders.map((p) => {
@@ -3390,14 +3324,14 @@ function WalletPickerScreen({
     }
   );
 }
-var headingStyle5 = (color) => ({
+var headingStyle4 = (color) => ({
   fontSize: "1.35rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle5 = (color) => ({
+var subtitleStyle4 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3573,9 +3507,9 @@ function SetupScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceRowStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceLeftStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
@@ -3653,20 +3587,20 @@ function SetupScreen({
     }
   );
 }
-var headingStyle6 = (color) => ({
+var headingStyle5 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 24px",
   lineHeight: 1.5
 });
-var errorBannerStyle4 = (tokens) => ({
+var errorBannerStyle3 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -3934,7 +3868,7 @@ function DepositScreen({
             "%)"
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error })
       ]
     }
   );
@@ -4002,7 +3936,7 @@ var detailRowStyle = (color) => ({
   color,
   marginBottom: 4
 });
-var errorBannerStyle5 = (tokens) => ({
+var errorBannerStyle4 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4101,22 +4035,22 @@ function SuccessScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
           succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", 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: tokens.success }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle7(tokens.text), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
               "$",
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
               "to ",
               merchantName
             ] })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
-            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.error), children: error })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -4148,21 +4082,21 @@ function SuccessScreen({
     }
   );
 }
-var contentStyle5 = {
+var contentStyle4 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   paddingTop: 16
 };
-var headingStyle7 = (color) => ({
+var headingStyle6 = (color) => ({
   fontSize: "1.5rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -4268,7 +4202,7 @@ function SelectSourceScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -4325,7 +4259,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle8 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -4440,8 +4374,8 @@ function AdvancedSourceScreen({
             right: /* @__PURE__ */ jsxRuntime.jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4504,14 +4438,14 @@ var advancedBadgeStyle = (color) => ({
   padding: "3px 10px",
   letterSpacing: "0.02em"
 });
-var headingStyle8 = (color) => ({
+var headingStyle7 = (color) => ({
   fontSize: "1.3rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle9 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -4639,16 +4573,16 @@ function TransferStatusScreen({
   const steps = buildSteps(phase);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
     ] })
   ] });
 }
-var contentStyle6 = {
+var contentStyle5 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4657,14 +4591,14 @@ var contentStyle6 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var headingStyle9 = (color) => ({
+var headingStyle8 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 16px"
 });
-var errorBannerStyle6 = (tokens) => ({
+var errorBannerStyle5 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
   borderRadius: 16,
@@ -4724,10 +4658,10 @@ function OpenWalletScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -4737,7 +4671,7 @@ function OpenWalletScreen({
     }
   );
 }
-var contentStyle7 = {
+var contentStyle6 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4757,14 +4691,14 @@ var logoStyle = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle10 = (color) => ({
+var headingStyle9 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle10 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -4808,10 +4742,10 @@ function ConfirmSignScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -4824,7 +4758,7 @@ function ConfirmSignScreen({
     }
   );
 }
-var contentStyle8 = {
+var contentStyle7 = {
   flex: 1,
   display: "flex",
   flexDirection: "column",
@@ -4839,14 +4773,14 @@ var logoStyle2 = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle11 = (color) => ({
+var headingStyle10 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle11 = (color) => ({
+var subtitleStyle10 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -4948,20 +4882,6 @@ function StepRenderer({
       }
     );
   }
-  if ((step === "login" || step === "otp-verify") && authenticated) {
-    return /* @__PURE__ */ jsxRuntime.jsx(CenteredSpinner, { label: "Verifying your passkey...test2" });
-  }
-  if (step === "verify-passkey") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      VerifyPasskeyScreen,
-      {
-        onVerify: handlers.onVerifyPasskeyViaPopup,
-        onBack: handlers.onLogout,
-        verifying: state.verifyingPasskeyPopup,
-        error: state.error
-      }
-    );
-  }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CreatePasskeyScreen,
@@ -5142,7 +5062,7 @@ var PaymentErrorBoundary = class extends react.Component {
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle12, children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
     ] });
@@ -5162,7 +5082,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle12 = {
+var headingStyle11 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -5237,6 +5157,8 @@ function SwypePaymentInner({
   const onCompleteRef = react.useRef(onComplete);
   onCompleteRef.current = onComplete;
   const pollingRef = react.useRef(null);
+  const getAccessTokenRef = react.useRef(getAccessToken);
+  getAccessTokenRef.current = getAccessToken;
   const handleAuthorizedMobileReturnRef = react.useRef(
     null
   );
@@ -5924,7 +5846,7 @@ function SwypePaymentInner({
       try {
         let token = null;
         for (let attempt = 0; attempt < 3; attempt++) {
-          token = await getAccessToken();
+          token = await getAccessTokenRef.current();
           if (token || cancelled) break;
           await new Promise((r) => setTimeout(r, 1e3));
         }
@@ -5950,12 +5872,18 @@ function SwypePaymentInner({
           return;
         }
         if (cancelled) return;
+        const credentialIds = allPasskeys.map((p) => p.credentialId);
+        let matched = null;
         if (isSafari() && isInCrossOriginIframe()) {
-          dispatch({ type: "NAVIGATE", step: "verify-passkey" });
-          return;
+          matched = await findDevicePasskeyViaPopup({
+            credentialIds,
+            rpId: resolvePasskeyRpId(),
+            authToken: token ?? void 0,
+            apiBaseUrl
+          });
+        } else {
+          matched = await findDevicePasskey(credentialIds);
         }
-        const credentialIds = allPasskeys.map((p) => p.credentialId);
-        const matched = await findDevicePasskey(credentialIds);
         if (cancelled) return;
         if (matched) {
           dispatch({ type: "PASSKEY_ACTIVATED", credentialId: matched });
@@ -5974,7 +5902,7 @@ function SwypePaymentInner({
     return () => {
       cancelled = true;
     };
-  }, [ready, authenticated, state.step, apiBaseUrl, getAccessToken, state.activeCredentialId]);
+  }, [ready, authenticated, state.step, apiBaseUrl, state.activeCredentialId]);
   react.useEffect(() => {
     const loadAction = resolveDataLoadAction({
       authenticated,