@swype-org/react-sdk 0.1.190 → 0.1.192

package/dist/index.cjs

@@ -2288,18 +2288,30 @@ function StepProgress({ phase }) {
     return /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-end"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-start"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
+    ] })
   ] });
 }
 var containerStyle3 = {
   display: "flex",
   alignItems: "center",
-  gap: 6
+  gap: 6,
+  width: "100%"
 };
+var sectionStyle = (justify) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: justify,
+  gap: 6
+});
 var dotStyle = (color) => ({
   width: 8,
   height: 8,
@@ -2456,19 +2468,16 @@ var badgeStyle = (color) => ({
 });
 function PoweredByFooter() {
   const { tokens } = useSwypeConfig();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.textMuted), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
-          fill: "currentColor"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle5(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
+        fill: "currentColor"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
+  ] }) });
 }
 var containerStyle5 = (color) => ({
   display: "flex",
@@ -2485,14 +2494,6 @@ var rowStyle = {
   alignItems: "center",
   gap: 6
 };
-var pillStyle = (color, border) => ({
-  fontSize: "0.65rem",
-  fontWeight: 600,
-  padding: "2px 8px",
-  borderRadius: 999,
-  border: `1px solid ${border}`,
-  color
-});
 function PrimaryButton({ children, onClick, disabled, loading, icon }) {
   const { tokens } = useSwypeConfig();
   const isDisabled = disabled || loading;
@@ -2512,7 +2513,7 @@ function PrimaryButton({ children, onClick, disabled, loading, icon }) {
 }
 var buttonStyle = (tokens, disabled) => ({
   width: "100%",
-  padding: "16px 24px",
+  padding: "18px 24px",
   background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
   color: tokens.accentText,
   border: "none",
@@ -2523,7 +2524,7 @@ var buttonStyle = (tokens, disabled) => ({
   opacity: disabled ? 0.5 : 1,
   transition: "filter 0.15s ease, transform 0.15s ease",
   fontFamily: "inherit",
-  boxShadow: "0 8px 18px rgba(178, 255, 147, 0.35)",
+  boxShadow: "0 6px 20px rgba(178, 255, 147, 0.25)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3101,6 +3102,7 @@ function PasskeyScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error })
         ] })
       ]
@@ -3122,6 +3124,12 @@ var headingStyle3 = (color) => ({
   color,
   margin: "24px 0 8px"
 });
+var subtitleStyle2 = (color) => ({
+  fontSize: "0.86rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
 var errorBannerStyle2 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
@@ -3259,7 +3267,7 @@ function WalletPickerScreen({
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
         hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(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;
@@ -3363,7 +3371,7 @@ var headingStyle4 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle2 = (color) => ({
+var subtitleStyle3 = (color) => ({
   fontSize: "0.88rem",
   color,
   margin: "0 0 24px"
@@ -3765,7 +3773,7 @@ function SetupStatusScreen({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
         /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
       ] })
     ] });
   }
@@ -3804,7 +3812,7 @@ var headingStyle6 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle3 = (color) => ({
+var subtitleStyle4 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 28px",
@@ -4381,14 +4389,14 @@ function SuccessScreen({
               amount.toFixed(2),
               " deposited"
             ] }),
-            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle4(tokens.textSecondary), children: [
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle5(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: subtitleStyle4(tokens.error), children: error })
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -4434,7 +4442,7 @@ var headingStyle7 = (color) => ({
   color,
   margin: "20px 0 4px"
 });
-var subtitleStyle4 = (color) => ({
+var subtitleStyle5 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 20px"
@@ -4542,7 +4550,7 @@ function SelectSourceScreen({
             onLogout
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textMuted), children: "Choose which chain and token to pay from." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Chain" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
           const isSelected = chain.chainName === selectedChainName;
@@ -4599,7 +4607,7 @@ function SelectSourceScreen({
     }
   );
 }
-var subtitleStyle5 = (color) => ({
+var subtitleStyle6 = (color) => ({
   fontSize: "0.85rem",
   color,
   margin: "0 0 20px",
@@ -4715,7 +4723,7 @@ function AdvancedSourceScreen({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Select tokens to approve" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
           const isExpanded = expandedChain === chain.chainName;
@@ -4785,7 +4793,7 @@ var headingStyle8 = (color) => ({
   color,
   margin: "8px 0 4px"
 });
-var subtitleStyle6 = (color) => ({
+var subtitleStyle7 = (color) => ({
   fontSize: "0.86rem",
   color,
   margin: "0 0 20px",
@@ -5019,7 +5027,7 @@ function OpenWalletScreen({
               displayName,
               "..."
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
               /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -5048,7 +5056,7 @@ function OpenWalletScreen({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(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..." })
@@ -5095,7 +5103,7 @@ var headingStyle10 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle7 = (color) => ({
+var subtitleStyle8 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -5147,7 +5155,7 @@ function ConfirmSignScreen({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle8(tokens.textSecondary), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
             displayName,
             " approved the connection. Tap below to confirm your payment."
           ] }),
@@ -5182,7 +5190,7 @@ var headingStyle11 = (color) => ({
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",