@getpara/react-sdk-lite 2.8.0 → 2.9.0

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -26,19 +26,35 @@ const BiometricLoginStep = () => {
       /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
     ] }),
     /* @__PURE__ */ jsxs(MainContainer, { children: [
-      (isPassword || isPIN) && /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
-        isPIN && isPassword ? "Login" : isPIN ? "Login with PIN" : "Login with Password"
-      ] }),
+      (isPassword || isPIN) && /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState),
+          "data-testid": "para-login-password",
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+            isPIN && isPassword ? "Login" : isPIN ? "Login with PIN" : "Login with Password"
+          ]
+        }
+      ),
       isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
         displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),
+          /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl, "data-testid": "para-known-devices" }),
           /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
         ] }),
-        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState), children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
-          "Login with Passkey"
-        ] }) })
+        /* @__PURE__ */ jsx(
+          CpslButton,
+          {
+            fullWidth: true,
+            onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState),
+            "data-testid": "para-login-passkey",
+            children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
+              "Login with Passkey"
+            ] })
+          }
+        )
       ] })
     ] })
   ] });

package/dist/modal/components/Body/Body.js

@@ -3,7 +3,6 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled, WarningBanner, BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "@getpara/react-common";
 import { IFrameSteps, ModalStep } from "../../utils/steps.js";
-import { CpslAlert, CpslIcon } from "@getpara/react-components";
 import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
 import { useModalStore } from "../../stores/index.js";
 import { BiometricLoginStep } from "../BiometricLoginStep/BiometricLoginStep.js";
@@ -29,7 +28,7 @@ import { AnimatedHeightWrapper } from "./AnimatedHeightWrapper.js";
 import { ChainSwitch } from "../ChainSwitch/ChainSwitch.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { Controls } from "../Controls/Controls.js";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
 import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
 import { IFrameStep } from "../IFrameStep/IFrameStep.js";
@@ -61,10 +60,8 @@ const Body = ({
   isDisconnecting
 }) => {
   const currentStep = useModalStore((state) => state.step);
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
   const stepDirection = useModalStore((state) => state.stepDirection);
   const setStepDirection = useModalStore((state) => state.setStepDirection);
-  const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
   const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
   const modalError = useModalStore((state) => state.modalError);
   const setModalError = useModalStore((state) => state.setModalError);
@@ -72,8 +69,6 @@ const Body = ({
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
   });
-  const appName = useStore((state) => state.appName);
-  const [isTestModeAlert, setIsTestModeAlert] = useState(onRampConfig == null ? void 0 : onRampConfig.testMode);
   const Content = () => {
     switch (currentStep) {
       case ModalStep.AUTH_MAIN: {
@@ -231,11 +226,6 @@ const Body = ({
       }
     }
   };
-  useEffect(() => {
-    if (!isTestModeAlert && (onRampConfig == null ? void 0 : onRampConfig.testMode)) {
-      setIsTestModeAlert(true);
-    }
-  }, [onRampConfig == null ? void 0 : onRampConfig.testMode]);
   useEffect(() => {
     switch (currentStep) {
       case ModalStep.ADD_FUNDS_BUY:
@@ -269,6 +259,7 @@ const Body = ({
           children: /* @__PURE__ */ jsxs(
             BodyContainer,
             {
+              "data-step": currentStep.toLowerCase().replace(/_/g, "-"),
               custom: stepDirection,
               variants: BODY_MOTION_VARIANTS,
               initial: "enter",
@@ -284,21 +275,7 @@ const Body = ({
                     $isIFrameStep: IFrameSteps.includes(currentStep),
                     children: [
                       !IFrameSteps.includes(currentStep) && /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
-                      Content(),
-                      (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
-                        ModalStep.ADD_FUNDS_BUY,
-                        ModalStep.ADD_FUNDS_WITHDRAW,
-                        ModalStep.ADD_FUNDS_AWAITING,
-                        ModalStep.ADD_FUNDS_FAILURE,
-                        ModalStep.ADD_FUNDS_SUCCESS
-                      ].includes(currentStep) && isTestModeAlert && accountAddFundTab !== EnabledFlow.RECEIVE && /* @__PURE__ */ jsx(TestModeAlert, { children: /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
-                        "This Para Modal is configured to run on-ramp services in ",
-                        /* @__PURE__ */ jsx("b", { children: "test mode" }),
-                        " only, for development purposes. If you are a user of ",
-                        appName,
-                        ", please contact support.",
-                        /* @__PURE__ */ jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
-                      ] }) })
+                      Content()
                     ]
                   }
                 ),
@@ -350,31 +327,6 @@ const InnerContainer = safeStyled.div`
     padding: ${({ $embeddedModal, $isIFrameStep }) => $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
-const TestModeAlert = safeStyled(CpslAlert)`
-  --container-padding-end: 40px;
-  position: absolute;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
-  z-index: 1000;
-`;
-const CloseButton = safeStyled.button`
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-`;
-const CloseX = safeStyled(CpslIcon)`
-  --icon-color: var(--cpsl-color-utility-yellow-dark, #92400e);
-  --height: 18px;
-  --width: 18px;
-`;
 export {
   Body
 };

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -73,23 +73,39 @@ const ExternalWalletMobileConnect = ({
             secondaryText: externalWalletError == null ? void 0 : externalWalletError[1]
           }
         ),
-        wallet.type === "SOLANA" && isSolanaWalletInAppBrowser(wallet.internalId) && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(CpslButton, { onClick: handleRetryClick, fullWidth: true, children: isError ? "Retry" : "Connect Wallet" }) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
-        !wallet.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_a = wallet.downloadUrl) != null ? _a : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
+        wallet.type === "SOLANA" && isSolanaWalletInAppBrowser(wallet.internalId) && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(
+          CpslButton,
+          {
+            onClick: handleRetryClick,
+            fullWidth: true,
+            "data-testid": isError ? "para-wallet-retry" : "para-wallet-connect",
+            children: isError ? "Retry" : "Connect Wallet"
+          }
+        ) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
+        !wallet.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_a = wallet.downloadUrl) != null ? _a : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", "data-testid": "para-wallet-get", children: [
           `Get ${wallet.name}`,
           /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
         ] }) })
       ] })
     ] });
   }
-  const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? () => onConnectWc(wallet) : void 0, children: [
-    `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
-    /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
-  ] });
+  const GetWalletButton = /* @__PURE__ */ jsxs(
+    ExternalButton,
+    {
+      variant: "secondary",
+      onClick: isWalletConnect ? () => onConnectWc(wallet) : void 0,
+      "data-testid": "para-wallet-get",
+      children: [
+        `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
+        /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-      /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
-      /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
+      /* @__PURE__ */ jsx(QRContainer, { "data-testid": "para-wallet-qr", children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
+      /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, "data-testid": "para-wallet-copy-link", children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
         isCopied ? "Copied" : "Copy Link"
       ] })
@@ -153,6 +169,7 @@ Please choose another wallet or continue on desktop.` }) });
             target: "_blank",
             variant: "secondary",
             onClick: handleTryAgainClick,
+            "data-testid": isInstalled ? "para-wallet-retry" : "para-wallet-get",
             children: [
               /* @__PURE__ */ jsx(CpslIcon, { fullWidth: true, slot: "start", icon: isInstalled ? "refresh" : "linkExternal" }),
               isInstalled ? "Try Again" : `Get ${wallet.name}`

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -56,7 +56,7 @@ const ExternalWallets = ({ isAddingWallets = false }) => {
       }
     }
   });
-  return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, children: [
+  return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, "data-testid": "para-external-wallets", children: [
     showAll && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SearchInputWrapper, { children: /* @__PURE__ */ jsx(
         SearchInput,
@@ -68,10 +68,11 @@ const ExternalWallets = ({ isAddingWallets = false }) => {
           }),
           value: search,
           style: { width: "100%" },
+          "data-testid": "para-wallet-search",
           children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
         }
       ) }),
-      hasEmbeddedAuth(authLayout != null ? authLayout : []) && !isAddingWallets && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+      hasEmbeddedAuth(authLayout != null ? authLayout : []) && !isAddingWallets && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, "data-testid": "para-wallet-para", children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
         /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "paraIcon" }),
           /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Para" })
@@ -80,18 +81,37 @@ const ExternalWallets = ({ isAddingWallets = false }) => {
       ] }) })
     ] }),
     walletsToShow.map(
-      (wallet) => showAll ? /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
-        /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", src: wallet.iconUrl }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: wallet.name })
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { $show: !!wallet.isMobile || !!wallet.installed, $variant: wallet.installed ? "installed" : "mobile", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: wallet.installed ? "Installed" : "Mobile" }) })
-      ] }) }, wallet.id) : /* @__PURE__ */ jsx(WalletTileButton, { src: wallet.iconUrl, onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(TileButtonInnerContainer, { children: [
-        wallet.installed && /* @__PURE__ */ jsx(InstalledIndicator, {}),
-        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: wallet.name })
-      ] }) }, wallet.id)
+      (wallet) => showAll ? /* @__PURE__ */ jsx(
+        CpslButton,
+        {
+          fullWidth: true,
+          variant: "tertiary",
+          onClick: handleWalletClick(wallet),
+          "data-testid": `para-wallet-${wallet.id.replace(/[^a-z0-9]/gi, "-").toLowerCase()}`,
+          children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+            /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
+              /* @__PURE__ */ jsx(CpslIcon, { slot: "start", src: wallet.iconUrl }),
+              /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: wallet.name })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { $show: !!wallet.isMobile || !!wallet.installed, $variant: wallet.installed ? "installed" : "mobile", children: /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", weight: "medium", children: wallet.installed ? "Installed" : "Mobile" }) })
+          ] })
+        },
+        wallet.id
+      ) : /* @__PURE__ */ jsx(
+        WalletTileButton,
+        {
+          src: wallet.iconUrl,
+          onClick: handleWalletClick(wallet),
+          "data-testid": `para-wallet-${wallet.id.replace(/[^a-z0-9]/gi, "-").toLowerCase()}`,
+          children: /* @__PURE__ */ jsxs(TileButtonInnerContainer, { children: [
+            wallet.installed && /* @__PURE__ */ jsx(InstalledIndicator, {}),
+            /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: wallet.name })
+          ] })
+        },
+        wallet.id
+      )
     ),
-    showMoreButton && /* @__PURE__ */ jsxs(CpslButton, { variant: "tertiary", fullWidth: true, onClick: handleShowAll, children: [
+    showMoreButton && /* @__PURE__ */ jsxs(CpslButton, { variant: "tertiary", fullWidth: true, onClick: handleShowAll, "data-testid": "para-more-wallets", children: [
       /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "wallet" }),
       "More Wallets"
     ] }),

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -48,7 +48,7 @@ const IFrameStep = () => {
     };
   }, [setIsReady, iFrameUrl]);
   return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, $isReady: !!isReady, children: [
-    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, $height: height, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl, ref: refs.iFrame }) }),
+    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, $height: height, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl, ref: refs.iFrame, "data-testid": "para-portal-iframe" }) }),
     !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1, position: "absolute" }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
   ] });
 };

package/dist/modal/components/OAuth/OAuth.js

@@ -38,7 +38,7 @@ const OAuth = ({ methods }) => {
   const useBrandedLogos = oAuthLogoVariant === "default";
   const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
   const showMoreButton = !showAll && hasMore;
-  return /* @__PURE__ */ jsxs(OAuthContainer, { children: [
+  return /* @__PURE__ */ jsxs(OAuthContainer, { "data-testid": "para-oauth-methods", children: [
     methodsToShow.map((method, index) => /* @__PURE__ */ jsx(
       OAuthButton,
       {
@@ -46,7 +46,8 @@ const OAuth = ({ methods }) => {
         icon: ACCOUNT_TYPES[method][useBrandedLogos ? "iconBranded" : "icon"],
         onClick: handleMethodClick(method),
         $index: index,
-        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length
+        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length,
+        "data-testid": `para-oauth-${method.toLowerCase()}`
       },
       method
     )),
@@ -57,7 +58,8 @@ const OAuth = ({ methods }) => {
         icon: "moreLoginOptions",
         onClick: handleShowAll,
         $index: HAS_MORE_LENGTH - 1,
-        $totalItems: HAS_MORE_LENGTH
+        $totalItems: HAS_MORE_LENGTH,
+        "data-testid": "para-oauth-more"
       }
     )
   ] });

package/dist/modal/components/OnRampComponents/OnRampProviderButton.js

@@ -3,44 +3,36 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { safeStyled, ON_RAMP_PROVIDERS } from "@getpara/react-common";
-import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { motion } from "framer-motion";
 const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
-  const [isLoading, setIsLoading] = useState(false);
   const provider = config.providers[index];
-  const { feeLower, feeUpper, name, icon, backgroundColors } = ON_RAMP_PROVIDERS[provider];
-  const feeString = `Fee ${feeLower}% - ${feeUpper}%`;
+  const { feeLower, name, methods, icon, backgroundColors } = ON_RAMP_PROVIDERS[provider];
+  const feeString = `Fee: ${feeLower}%`;
   const onClick = () => __async(void 0, null, function* () {
-    setIsLoading(true);
     yield _onClick();
-    setIsLoading(false);
   });
-  return /* @__PURE__ */ jsx(StyledButton, { $gradientColors: backgroundColors, fullWidth: true, onClick, children: /* @__PURE__ */ jsxs(Container, { $backgroundColor: backgroundColors[1], children: [
-    /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(CpslIcon, { icon }) }),
+  return /* @__PURE__ */ jsx(StyledButton, { variant: "tertiary", fullWidth: true, onClick, children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(CpslIcon, { icon, color: backgroundColors[0] }) }),
     /* @__PURE__ */ jsxs(ProviderInfoContainer, { children: [
       /* @__PURE__ */ jsx(Text, { variant: "bodyL", weight: "medium", children: name }),
-      /* @__PURE__ */ jsx(ProviderInfoInnerContainer, { children: /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: feeString }) })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Chevron, { icon: "chevronUp" })
+      /* @__PURE__ */ jsxs(ProviderInfoInnerContainer, { children: [
+        /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: methods.join(", ") }),
+        /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: feeString })
+      ] })
+    ] })
   ] }) });
 };
 const StyledButton = safeStyled(CpslButton)`
   width: 100%;
-  --button-primary-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[1]} 100%)`};
-  --button-primary-hover-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
-  --button-primary-active-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
 `;
 const Container = safeStyled(motion.div)`
   display: flex;
   gap: 8px;
   flex: 1;
   align-items: center;
-
-  & cpsl-spinner {
-    --background-color: ${({ $backgroundColor }) => `${$backgroundColor}`};
-  }
+  width: 100%;
 `;
 const ProviderInfoContainer = safeStyled.div`
   flex: 1;
@@ -50,27 +42,26 @@ const ProviderInfoContainer = safeStyled.div`
   gap: 2px;
 `;
 const ProviderInfoInnerContainer = safeStyled.div`
+  width: 100%;
   display: flex;
+  justify-content: space-between;
   gap: 16px;
 `;
 const IconContainer = safeStyled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: var(--cpsl-color-background-0);
   border-radius: 100%;
   height: 48px;
   width: 48px;
+  flex-shrink: 0;
 `;
 const Text = safeStyled(CpslText)`
   &::part(text-element) {
     color: #fff;
   }
 `;
-const Chevron = safeStyled(CpslIcon)`
-  transform: rotate(90deg);
-  --icon-color: #fff;
-`;
 export {
   OnRampProviderButton
 };

package/dist/modal/components/QuantityInput.js

@@ -2,21 +2,46 @@
 import "../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
+import { useEffect, useRef, useState } from "react";
 function QuantityInput({
   value,
   onChange,
   onFocus,
   onBlur,
   placeholder,
-  size = "72px",
+  size = "56px",
   symbol
 }) {
+  const measureRef = useRef(null);
+  const minWidthRef = useRef(null);
+  const displayValue = value != null ? value : "";
+  const measureText = displayValue || placeholder || "0";
+  const placeholderText = placeholder || "0";
+  const fontSize = parseFloat(size) || 56;
+  const [inputWidth, setInputWidth] = useState(
+    () => Math.max(measureText.length, placeholderText.length) * fontSize * 0.5 + 16
+  );
+  useEffect(() => {
+    if (measureRef.current && minWidthRef.current) {
+      const textWidth = measureRef.current.getBoundingClientRect().width;
+      const minWidth = minWidthRef.current.getBoundingClientRect().width;
+      if (textWidth === 0 && minWidth === 0) return;
+      const buffer = 16;
+      const width = Math.max(textWidth, minWidth) + buffer;
+      setInputWidth(width);
+    }
+  }, [displayValue, placeholderText]);
   return /* @__PURE__ */ jsxs(Container, { style: { fontSize: size, position: "relative" }, children: [
-    symbol && /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: symbol }),
+    /* @__PURE__ */ jsx(MeasureSpan, { ref: measureRef, "aria-hidden": "true", children: measureText }),
+    /* @__PURE__ */ jsx(MeasureSpan, { ref: minWidthRef, "aria-hidden": "true", children: placeholderText }),
+    symbol && /* @__PURE__ */ jsx(CurrencySign, { children: symbol }),
     /* @__PURE__ */ jsx(
       Input,
       {
-        value: value != null ? value : "",
+        type: "number",
+        inputMode: "decimal",
+        value: displayValue,
+        style: { width: `${inputWidth}px` },
         onFocus: (e) => {
           e.currentTarget.select();
           onFocus == null ? void 0 : onFocus();
@@ -32,13 +57,19 @@ function QuantityInput({
             onChange(null);
             return;
           }
-          const numericValue = rawValue.replace(/[^0-9.]/g, "");
+          let numericValue = rawValue.replace(/[^0-9.]/g, "");
           if (numericValue === "") {
             onChange(null);
             return;
           }
           const isValidNumberFormat = /^\d*\.?\d*$/.test(numericValue);
           if (isValidNumberFormat) {
+            if (symbol === "$") {
+              const parts = numericValue.split(".");
+              if (parts.length > 1 && parts[1].length > 2) {
+                numericValue = `${parts[0]}.${parts[1].slice(0, 2)}`;
+              }
+            }
             onChange(numericValue);
           } else {
             onChange(null);
@@ -51,7 +82,12 @@ function QuantityInput({
           } else {
             const parsed = parseFloat(numericValue);
             if (!isNaN(parsed)) {
-              onChange(parsed.toString());
+              if (symbol === "$") {
+                const clamped = Math.round(parsed * 100) / 100;
+                onChange(clamped.toFixed(2));
+              } else {
+                onChange(parsed.toString());
+              }
             } else {
               onChange(null);
             }
@@ -70,9 +106,17 @@ const Container = safeStyled.div`
   font-family: var(--cpsl-font-family);
   color: var(--cpsl-color-text-primary);
 `;
+const MeasureSpan = safeStyled.span`
+  position: absolute;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  white-space: pre;
+  font-family: inherit;
+  font-size: inherit;
+`;
 const CurrencySign = safeStyled.div`
-  position: relative;
-  left: 0px;
+  flex-shrink: 0;
 `;
 const Input = safeStyled.input`
   font-family: var(--cpsl-font-family);
@@ -82,9 +126,18 @@ const Input = safeStyled.input`
   height: auto;
   border-width: 0;
   text-align: center;
-  width: 100%;
   outline: none;
-  field-sizing: content;
+  min-width: 1ch;
+  padding: 0;
+  margin: 0;
+
+  /* Hide number input spinners */
+  -moz-appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 `;
 export {
   QuantityInput

package/dist/modal/components/RecoverySecretStep/RecoverySecretStep.js

@@ -41,12 +41,12 @@ const SaveRecoverySecret = ({
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { children: "Save your Recovery Secret" }),
       /* @__PURE__ */ jsxs(ButtonContainer, { children: [
-        /* @__PURE__ */ jsx(ActionButton, { icon: "download", onClick: onDownload, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Download" }) }),
-        /* @__PURE__ */ jsx(ActionButton, { icon: isCopied ? "check" : "copy", onClick: onCopy, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isCopied ? "Copied!" : "Copy" }) }),
-        /* @__PURE__ */ jsx(ActionButton, { icon: "send", onClick: onEmail, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Email" }) })
+        /* @__PURE__ */ jsx(ActionButton, { icon: "download", onClick: onDownload, "data-testid": "para-recovery-download", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Download" }) }),
+        /* @__PURE__ */ jsx(ActionButton, { icon: isCopied ? "check" : "copy", onClick: onCopy, "data-testid": "para-recovery-copy", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isCopied ? "Copied!" : "Copy" }) }),
+        /* @__PURE__ */ jsx(ActionButton, { icon: "send", onClick: onEmail, "data-testid": "para-recovery-email", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Email" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: onComplete, disabled: !isSecretSaved, children: !isSecretSaved ? "Choose an option above to continue" : "I\u2019ve saved my recovery secret" }) })
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: onComplete, disabled: !isSecretSaved, "data-testid": "para-recovery-confirm", children: !isSecretSaved ? "Choose an option above to continue" : "I\u2019ve saved my recovery secret" }) })
   ] });
 };
 const RecoverySecretStep = () => {

package/dist/modal/components/SearchableButtonList.d.ts

@@ -21,7 +21,8 @@ export declare const contentMotionProps: {
         opacity: number;
     };
 };
-export declare function SearchableButtonList<T>({ items, transformItem, searchFilter, searchPlaceholder, onSelect, }: {
+export declare function SearchableButtonList<T>({ height, items, transformItem, searchFilter, searchPlaceholder, onSelect, }: {
+    height?: number;
     items: T[];
     transformItem: (_: T) => AssetItem;
     searchFilter?: (_: {

package/dist/modal/components/SearchableButtonList.js

@@ -18,6 +18,7 @@ const contentMotionProps = {
 const ESTIMATED_ITEM_HEIGHT = 72;
 const VISIBILITY_BUFFER = 3;
 function SearchableButtonList({
+  height,
   items,
   transformItem,
   searchFilter,
@@ -105,7 +106,7 @@ function SearchableButtonList({
   }, []);
   const paddingTop = visibleRange.start * ESTIMATED_ITEM_HEIGHT;
   const paddingBottom = Math.max(0, (transformedAndFiltered.length - visibleRange.end) * ESTIMATED_ITEM_HEIGHT);
-  const MAX_CONTAINER_HEIGHT = 480;
+  const MAX_CONTAINER_HEIGHT = height || 480;
   useEffect(() => {
     var _a, _b;
     const container = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
@@ -132,6 +133,7 @@ function SearchableButtonList({
       ref: outerContainerRef,
       style: {
         display: "flex",
+        width: "100%",
         flexDirection: "column",
         height: `${outerContainerHeight}px`,
         maxHeight: `${MAX_CONTAINER_HEIGHT}px`,

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -105,20 +105,21 @@ const Setup2FAStep = ({ onClose }) => {
             length: 6,
             onKeyDown: (e) => __async(void 0, null, function* () {
               return e.key === "Enter" && (yield handleSubmitCode());
-            })
+            }),
+            "data-testid": "para-2fa-code"
           }
         )
       }
     ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app" }),
-      /* @__PURE__ */ jsx(QRContainer, { children: !(twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorStatus.uri }) })
+      /* @__PURE__ */ jsx(QRContainer, { children: !(twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorStatus.uri, "data-testid": "para-2fa-qr" }) })
     ] }) }),
     !isVerifying && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslDivider, { children: "or enter the code manually" }) }),
-      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(FilledDisabledInput, { disabled: true, value: secret != null ? secret : "", noAutoDisable: true, children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: copied ? "check" : "copy" }) }) }) }),
+      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(FilledDisabledInput, { disabled: true, value: secret != null ? secret : "", noAutoDisable: true, "data-testid": "para-2fa-secret", children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, "data-testid": "para-2fa-copy", children: /* @__PURE__ */ jsx(CpslIcon, { icon: copied ? "check" : "copy" }) }) }) }),
       /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, children: "Continue" }),
-        /* @__PURE__ */ jsx(SkipButton, { variant: "ghost", onClick: handleSkip, children: "Skip" })
+        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, "data-testid": "para-2fa-continue", children: "Continue" }),
+        /* @__PURE__ */ jsx(SkipButton, { variant: "ghost", onClick: handleSkip, "data-testid": "para-2fa-skip", children: "Skip" })
       ] })
     ] })
   ] });