@getpara/react-sdk 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/modal/components/ExternalWalletVerificationStep/ExternalWalletVerificationStep.js

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslSpinner, CpslText } from "@getpara/react-components";
 import { useEffect } from "react";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { ErrorContainer, ErrorIcon, Heading, InnerStepContainer, StepContainer } from "../common.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
@@ -25,7 +25,7 @@ const ExternalWalletVerificationStep = () => {
     /* @__PURE__ */ jsx(InnerStepContainer, { children: isExternalWalletVerifying ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(CpslButton, { onClick: verifyWalletSignature, children: "Retry" }) })
   ] });
 };
-const InlineText = styled(CpslText)`
+const InlineText = safeStyled(CpslText)`
   text-align: center;
   display: inline-block;
 `;

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

@@ -3,7 +3,7 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { StyledCpslTileButton } from "../common.js";
 import { CpslButton, CpslIcon, CpslInput, CpslText } from "@getpara/react-components";
 import { useModalStore } from "../../stores/index.js";
@@ -79,7 +79,7 @@ const ExternalWallets = () => {
     showAll && /* @__PURE__ */ jsx(BlurContainer, {})
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   position: relative;
   display: flex;
   justify-content: center;
@@ -95,17 +95,17 @@ const Container = styled.div`
   -ms-overflow-style: none;
   scrollbar-width: none;
 `;
-const WalletTileButton = styled(StyledCpslTileButton)`
+const WalletTileButton = safeStyled(StyledCpslTileButton)`
   flex: 1;
 `;
-const WalletButtonOuterContainer = styled.div`
+const WalletButtonOuterContainer = safeStyled.div`
   width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: space-between;
 `;
-const WalletButtonInnerContainer = styled.div`
+const WalletButtonInnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -119,7 +119,7 @@ const WalletButtonInnerContainer = styled.div`
     }
   }
 `;
-const Badge = styled.div`
+const Badge = safeStyled.div`
   visibility: ${({ $show }) => $show ? "visible" : "hidden"};
   padding: 2px 4px;
   border-radius: 4px;
@@ -131,21 +131,21 @@ const Badge = styled.div`
     }
   }
 `;
-const InstalledIndicator = styled.span`
+const InstalledIndicator = safeStyled.span`
   width: 8px;
   height: 8px;
   border-radius: 100%;
   background-color: var(--cpsl-color-utility-green);
 `;
-const TileButtonInnerContainer = styled.div`
+const TileButtonInnerContainer = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
 `;
-const SearchIcon = styled(CpslIcon)`
+const SearchIcon = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-contrast);
 `;
-const SearchInputWrapper = styled.div`
+const SearchInputWrapper = safeStyled.div`
   width: 100%;
   background-color: var(--cpsl-color-background-0);
 
@@ -154,12 +154,12 @@ const SearchInputWrapper = styled.div`
   padding-bottom: 4px;
   margin-bottom: -4px;
 `;
-const SearchInput = styled(CpslInput)`
+const SearchInput = safeStyled(CpslInput)`
   width: 100%;
   --container-background-color: var(--cpsl-color-background-8);
   --input-background-color: var(--cpsl-color-background-8);
 `;
-const BlurContainer = styled.div`
+const BlurContainer = safeStyled.div`
   position: sticky;
   height: 56px;
   width: 100%;

package/dist/modal/components/Footer/Footer.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useModalStore } from "../../stores/index.js";
 import { PARA_CONNECT, PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
@@ -41,50 +41,50 @@ const Footer = () => {
   }
   return /* @__PURE__ */ jsx(FooterContainer, { slot: "footer", children: /* @__PURE__ */ jsx(FooterContentContainer, { children: Content }) });
 };
-const FooterContainer = styled.div`
+const FooterContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   padding: 8px 0px;
 `;
-const FooterContentContainer = styled.div`
+const FooterContentContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 `;
-const PoweredByContainer = styled.div`
+const PoweredByContainer = safeStyled.div`
   display: flex;
   gap: 5px;
   align-items: center;
   justify-content: center;
 `;
-const ConnectContainer = styled.div`
+const ConnectContainer = safeStyled.div`
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: center;
 `;
-const RightChevron = styled(CpslIcon)`
+const RightChevron = safeStyled(CpslIcon)`
   transform: rotate(90deg);
 
   /* --icon-color: var(--cpsl-color-text-tertiary); */
   --height: 24px;
   --width: 24px;
 `;
-const InlineText = styled(CpslText)`
+const InlineText = safeStyled(CpslText)`
   text-align: center;
   display: inline-block;
 `;
-const ConnectText = styled(InlineText)`
+const ConnectText = safeStyled(InlineText)`
   line-height: 20px;
 `;
-const ClickableText = styled(InlineText)`
+const ClickableText = safeStyled(InlineText)`
   cursor: pointer;
   display: inline-block;
 `;
-const ParaLogo = styled(CpslIcon)`
+const ParaLogo = safeStyled(CpslIcon)`
   display: inline-block;
   --icon-color: var(--cpsl-color-text-secondary);
   --width: 49px;

package/dist/modal/components/Header/Header.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useStepTitle } from "./hooks/useStepTitle.js";
 import { CenteredText } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
@@ -27,7 +27,7 @@ const Header = () => {
     ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
   ) });
 };
-const Container = styled(motion.div)`
+const Container = safeStyled(motion.div)`
   position: absolute;
   top: 16px;
   width: 100%;

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -30,6 +30,7 @@ const useStepTitle = () => {
       [ModalStep.WALLET_CREATION_DONE]: hideWallets ? "Account Created" : "Wallet Created",
       [ModalStep.SECRET]: isLogin ? "Login" : "Sign Up",
       [ModalStep.BIOMETRIC_LOGIN]: "Login",
+      [ModalStep.EMBEDDED_PASSWORD_LOGIN]: "Login",
       [ModalStep.AWAITING_PASSWORD_LOGIN]: "Login",
       [ModalStep.AWAITING_BIOMETRIC_LOGIN]: "Login",
       [ModalStep.LOGIN_DONE]: "",

package/dist/modal/components/Hero/Hero.js

@@ -2,7 +2,7 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslHero, CpslIcon, CpslIdenticon } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { useModalStore } from "../../stores/index.js";
 import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
@@ -74,7 +74,7 @@ const Hero = () => {
     !shouldHide && /* @__PURE__ */ jsx(Spacer, { $height: spacerHeight != null ? spacerHeight : 0 })
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   display: flex;
   position: absolute;
   justify-content: center;
@@ -83,22 +83,22 @@ const Container = styled.div`
 
   top: ${({ $top }) => `${$top}px`};
 `;
-const Spacer = styled.div`
+const Spacer = safeStyled.div`
   height: ${({ $height }) => `${$height}px`};
 `;
-const WalletLogo = styled(CpslIcon)`
+const WalletLogo = safeStyled(CpslIcon)`
   --height: 60px;
   --width: 60px;
 `;
-const Avatar = styled.img`
+const Avatar = safeStyled.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
 `;
-const IconAvatar = styled(CpslIdenticon)`
+const IconAvatar = safeStyled(CpslIdenticon)`
   border-radius: 1000px;
 `;
-const StyledHero = styled(CpslHero)`
+const StyledHero = safeStyled(CpslHero)`
   ${({ $isAccount }) => $isAccount && `
       --ring-3-size: 560px;
       --ring-2-size: 402px;

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

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModalStore } from "../../stores/index.js";
 import { IFrameSteps } from "../../utils/steps.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { SpinnerContainer } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
 import { MOBILE_SIZE } from "../../constants/constants.js";
@@ -30,7 +30,7 @@ const IFrameStep = () => {
     !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
   ] });
 };
-const OuterContainer = styled.div`
+const OuterContainer = safeStyled.div`
   height: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
   width: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
   flex: ${({ $isVisible }) => $isVisible ? 1 : "auto"};
@@ -43,7 +43,7 @@ const OuterContainer = styled.div`
     padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 16px 0px"};
   }
 `;
-const Container = styled.div`
+const Container = safeStyled.div`
   height: 100%;
   width: 100%;
   display: ${({ $isReady }) => $isReady ? "block" : "none"};

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

@@ -3,7 +3,7 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
@@ -63,13 +63,13 @@ const OAuth = ({ methods }) => {
     )
   ] });
 };
-const OAuthContainer = styled.div`
+const OAuthContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
 `;
-const OAuthButton = styled(StyledCpslTileButton)`
+const OAuthButton = safeStyled(StyledCpslTileButton)`
   flex: ${({ $index, $totalItems }) => getTileButtonFlex($index, $totalItems)};
 
   --button-icon-color: ${({ $isDark }) => $isDark ? "white" : "black"};

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

@@ -4,7 +4,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { constructUrl, getPortalBaseURL } from "@getpara/web-sdk";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useEffect, useRef, useState } from "react";
 import { HeroSpinner } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
@@ -65,14 +65,14 @@ function TelegramOAuthStep() {
     (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
   ] });
 }
-const Container = styled.div`
+const Container = safeStyled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
 `;
-const HeroContainer = styled.div`
+const HeroContainer = safeStyled.div`
   display: flex;
   min-height: 276px;
   flex-direction: column;
@@ -80,7 +80,7 @@ const HeroContainer = styled.div`
   gap: 16px;
   flex: 1;
 `;
-const IFrame = styled.iframe`
+const IFrame = safeStyled.iframe`
   width: 100%;
   height: 52px;
   border: none;

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

@@ -5,7 +5,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import { motion } from "framer-motion";
 const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
@@ -27,13 +27,13 @@ const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
     isLoading ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Chevron, { icon: "chevronUp" })
   ] }) });
 };
-const StyledButton = styled(CpslButton)`
+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 = styled(motion.div)`
+const Container = safeStyled(motion.div)`
   display: flex;
   gap: 8px;
   flex: 1;
@@ -43,18 +43,18 @@ const Container = styled(motion.div)`
     --background-color: ${({ $backgroundColor }) => `${$backgroundColor}`};
   }
 `;
-const ProviderInfoContainer = styled.div`
+const ProviderInfoContainer = safeStyled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 2px;
 `;
-const ProviderInfoInnerContainer = styled.div`
+const ProviderInfoInnerContainer = safeStyled.div`
   display: flex;
   gap: 16px;
 `;
-const IconContainer = styled.span`
+const IconContainer = safeStyled.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,12 +63,12 @@ const IconContainer = styled.span`
   height: 48px;
   width: 48px;
 `;
-const Text = styled(CpslText)`
+const Text = safeStyled(CpslText)`
   &::part(text-element) {
     color: #fff;
   }
 `;
-const Chevron = styled(CpslIcon)`
+const Chevron = safeStyled(CpslIcon)`
   transform: rotate(90deg);
   --icon-color: #fff;
 `;

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

@@ -7,7 +7,7 @@ import { CpslButton, CpslText } from "@getpara/react-components";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { getMailtoLink } from "../../utils/getMailtoLink.js";
 import { useState } from "react";
@@ -85,19 +85,19 @@ const RecoverySecretStep = () => {
     )
   ] });
 };
-const ActionButton = styled(StyledCpslTileButton)`
+const ActionButton = safeStyled(StyledCpslTileButton)`
   flex: 1;
 
   --button-icon-color: var(--cpsl-color-text-primary);
 `;
-const ButtonContainer = styled.div`
+const ButtonContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
 `;
-const InlineText = styled(CpslText)`
+const InlineText = safeStyled(CpslText)`
   text-align: center;
   display: inline-block;
 `;

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

@@ -16,7 +16,7 @@ import { useEffect, useRef, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer } from "../common.js";
 import { ModalStep } from "../../utils/steps.js";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { useEnable2fa } from "../../../provider/index.js";
 const Setup2FAStep = ({ onClose }) => {
@@ -120,10 +120,10 @@ const Setup2FAStep = ({ onClose }) => {
     ] })
   ] });
 };
-const StyledCodeInput = styled(CpslCodeInput)`
+const StyledCodeInput = safeStyled(CpslCodeInput)`
   align-self: center;
 `;
-const SkipButton = styled(CpslButton)`
+const SkipButton = safeStyled(CpslButton)`
   margin-top: 8px;
   text-decoration: underline;
 `;

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -5,7 +5,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslCodeInput, CpslSpinner, CpslText } from "@getpara/react-components";
 import { useEffect, useRef, useState } from "react";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { Heading, InnerStepContainer, StepContainer } from "../common.js";
 import { displayPhoneNumber } from "@getpara/core-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
@@ -127,14 +127,14 @@ const VerificationCodeStep = () => {
     ] }) })
   ] });
 };
-const StyledCodeInput = styled(CpslCodeInput)`
+const StyledCodeInput = safeStyled(CpslCodeInput)`
   align-self: center;
 `;
-const InlineText = styled(CpslText)`
+const InlineText = safeStyled(CpslText)`
   text-align: center;
   display: inline-block;
 `;
-const ClickableText = styled(InlineText)`
+const ClickableText = safeStyled(InlineText)`
   cursor: pointer;
   display: inline-block;
 `;

package/dist/modal/components/WalletCard/PartnerIcon.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 const PartnerIcon = ({ partner }) => {
   const { logoUrl, displayName, backgroundColor, foregroundColor } = partner;
@@ -10,7 +10,7 @@ const PartnerIcon = ({ partner }) => {
   }
   return /* @__PURE__ */ jsx(Container, { $backgroundColor: backgroundColor, children: /* @__PURE__ */ jsx(Text, { variant: "bodyXS", $color: foregroundColor, children: displayName[0] }) });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   width: 14px;
   height: 14px;
   display: flex;
@@ -19,13 +19,13 @@ const Container = styled.div`
   background-color: ${({ $backgroundColor }) => `${$backgroundColor != null ? $backgroundColor : "var(--cpsl-color-contrast)"}`};
   border-radius: 100%;
 `;
-const Text = styled(CpslText)`
+const Text = safeStyled(CpslText)`
   &::part(text-element) {
     line-height: 100%;
     color: ${({ $color }) => `${$color != null ? $color : "var(--cpsl-color-foreground-0)"}`};
   }
 `;
-const Icon = styled(CpslIcon)`
+const Icon = safeStyled(CpslIcon)`
   --height: 14px;
   --width: 14px;
 `;

package/dist/modal/components/WalletCard/WalletCard.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { CpslButton, CpslIdenticon, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
@@ -68,13 +68,13 @@ const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type
     showAddFunds && isAddFundsEnabled && /* @__PURE__ */ jsx(AddFundsButton, { onClick: handleAddFundsClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", weight: "medium", children: "Add Funds" }) })
   ] });
 };
-const WalletCards = styled.div`
+const WalletCards = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
 `;
-const Container = styled.div`
+const Container = safeStyled.div`
   width: 100%;
   padding: 24px;
   display: flex;
@@ -84,14 +84,14 @@ const Container = styled.div`
   background-color: var(--cpsl-color-background-8);
   border-radius: 16px;
 `;
-const InnerContainer = styled.div`
+const InnerContainer = safeStyled.div`
   display: flex;
   justify-content: flex-start;
   gap: 8px;
   align-items: center;
   overflow: hidden;
 `;
-const WalletNameContainer = styled.div`
+const WalletNameContainer = safeStyled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -100,7 +100,7 @@ const WalletNameContainer = styled.div`
   justify-content: center;
   overflow: hidden;
 `;
-const Name = styled(CpslText)`
+const Name = safeStyled(CpslText)`
   width: 100%;
   &::part(text-element) {
     line-height: 100%;
@@ -109,7 +109,7 @@ const Name = styled(CpslText)`
     white-space: nowrap;
   }
 `;
-const AddFundsButton = styled(CpslButton)`
+const AddFundsButton = safeStyled(CpslButton)`
   --button-primary-background-color: var(--cpsl-color-card-surface);
   --button-primary-hover-background-color: var(--cpsl-color-background-4);
   --button-primary-color: var(--cpsl-color-text-contrast);

package/dist/modal/components/WalletCreationDoneStep/WalletCreationDoneStep.js

@@ -8,7 +8,7 @@ import { StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
@@ -74,7 +74,7 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, disabled: isWaiting, children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
   ] });
 };
-const CardContainer = styled(InnerStepContainer)`
+const CardContainer = safeStyled(InnerStepContainer)`
   min-height: 196px;
   justify-content: center;
 `;