@getpara/react-sdk-lite 2.0.0-alpha.33

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

@@ -0,0 +1,5 @@
+interface TwoFactorDoneStepStep {
+    onClose: () => void;
+}
+export declare const TwoFactorDoneStep: ({ onClose }: TwoFactorDoneStepStep) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/TwoFactorDoneStep/TwoFactorDoneStep.js

@@ -0,0 +1,27 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { Heading, StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+const TwoFactorDoneStep = ({ onClose }) => {
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Success" }),
+      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
+        "Your ",
+        hideWallets ? "account" : "wallet",
+        " is now protected by 2FA"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: onClose, children: "Done" })
+  ] });
+};
+export {
+  TwoFactorDoneStep
+};

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

@@ -0,0 +1,12 @@
+import { AuthInfo } from '@getpara/user-management-client';
+import { MutationStatus } from '@tanstack/react-query';
+type Props = {
+    authInfo: AuthInfo<'email' | 'phone'>;
+    onSubmit: (_: string) => void;
+    onResend: () => void;
+    status: MutationStatus;
+    error?: Error | string | null;
+};
+export declare const VerificationCode: ({ authInfo, onResend, onSubmit, status, error }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerificationCodeStep: () => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,160 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslCodeInput, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useEffect, useRef, useState } from "react";
+import { safeStyled } from "@getpara/react-common";
+import { Heading, InnerStepContainer, StepContainer } from "../common.js";
+import { displayPhoneNumber } from "@getpara/core-sdk";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useResendVerificationCode } from "../../../provider/index.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
+  const inputRef = useRef(null);
+  const [code, setCode] = useState("");
+  const [isPending, setIsPending] = useState(status === "pending");
+  const [codeError, setCodeError] = useState(null);
+  const [resendDisabled, setResendDisabled] = useState(false);
+  const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
+  useEffect(() => {
+    setTimeout(() => {
+      var _a, _b, _c, _d;
+      (_d = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
+    }, 10);
+  }, []);
+  useEffect(() => {
+    setCodeError(null);
+    if (code.length === 6) {
+      handleSubmitCode();
+    }
+  }, [code]);
+  useEffect(() => {
+    if (status === "pending") {
+      setIsPending(true);
+    }
+  }, [status]);
+  const handleResendClick = () => __async(void 0, null, function* () {
+    if (!resendDisabled) {
+      setResendDisabled(true);
+      try {
+        onResend();
+      } finally {
+        setTimeout(() => {
+          setResendDisabled(false);
+        }, 3e3);
+      }
+    }
+  });
+  const handleCodeInput = (e) => {
+    setCode(e.detail.value.trim());
+  };
+  const handleSubmitCode = () => __async(void 0, null, function* () {
+    if (code.length === 6 && /^\d+$/.test(code)) {
+      onSubmit(code);
+    } else {
+      setCodeError("Incorrect code.");
+    }
+  });
+  useEffect(() => {
+    if (!!error) {
+      setIsPending(false);
+      const status2 = error.status;
+      switch (status2) {
+        case 429:
+          setCodeError("Too many incorrect attempts. Please try again in 10 minutes.");
+          break;
+        default:
+          setCodeError("Incorrect code.");
+          break;
+      }
+    }
+  }, [error]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsxs(Heading, { variant: "headingS", weight: "bold", children: [
+        "Verify ",
+        isEmail ? "Email" : "Phone Number"
+      ] }),
+      /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", children: [
+        "Please enter the code we sent to",
+        " ",
+        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", children: (authInfo == null ? void 0 : authInfo.authType) === "phone" ? displayPhoneNumber(authInfo.identifier) : authInfo.identifier })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          onSubmit: (e) => __async(void 0, null, function* () {
+            e.preventDefault();
+            yield handleSubmitCode();
+          }),
+          children: /* @__PURE__ */ jsx(
+            StyledCodeInput,
+            {
+              ref: inputRef,
+              length: 6,
+              type: "number",
+              code,
+              onCpslInput: handleCodeInput,
+              errorText: codeError || "",
+              onKeyDown: (e) => __async(void 0, null, function* () {
+                return e.key === "Enter" && (yield handleSubmitCode());
+              })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", children: [
+        "Didn\u2019t receive a code?",
+        " ",
+        /* @__PURE__ */ jsx(
+          ClickableText,
+          {
+            variant: "bodyS",
+            style: { cursor: resendDisabled ? "default" : "pointer" },
+            onClick: handleResendClick,
+            children: resendDisabled ? "Resent!" : "Resend."
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+const VerificationCodeStep = () => {
+  const { verifyNewAccount, verifyNewAccountStatus, verifyNewAccountError } = useAuthActions();
+  const { mutateAsync: resendVerificationCode } = useResendVerificationCode();
+  const para = useInternalClient();
+  if (!para.authInfo) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(
+    VerificationCode,
+    {
+      authInfo: para.authInfo,
+      onSubmit: verifyNewAccount,
+      onResend: () => {
+        resendVerificationCode({ type: "SIGNUP" });
+      },
+      status: verifyNewAccountStatus,
+      error: verifyNewAccountError
+    }
+  ) });
+};
+const StyledCodeInput = safeStyled(CpslCodeInput)`
+  align-self: center;
+`;
+const InlineText = safeStyled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+const ClickableText = safeStyled(InlineText)`
+  cursor: pointer;
+  display: inline-block;
+`;
+export {
+  VerificationCode,
+  VerificationCodeStep
+};

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

@@ -0,0 +1,6 @@
+interface WaitingProps {
+    heading: string;
+    subheading?: string;
+}
+export declare const Waiting: ({ heading, subheading }: WaitingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/Waiting/Waiting.js

@@ -0,0 +1,17 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslSpinner, CpslText } from "@getpara/react-components";
+import { Heading, SpinnerContainer, StepContainer, InnerStepContainer } from "../common.js";
+const Waiting = ({ heading, subheading }) => {
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
+      subheading && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
+    ] })
+  ] });
+};
+export {
+  Waiting
+};

package/dist/modal/components/WalletCard/PartnerIcon.d.ts

@@ -0,0 +1,6 @@
+import { PartnerEntity } from '@getpara/user-management-client';
+interface PartnerIconProps {
+    partner: PartnerEntity;
+}
+export declare const PartnerIcon: ({ partner }: PartnerIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,18 @@
+import { TWalletType } from '@getpara/web-sdk';
+export declare const ExternalWalletCard: ({ address, showAddFunds }: Pick<SharedWalletCardProps, "address" | "showAddFunds">) => import("react/jsx-runtime").JSX.Element | null;
+interface WalletCardProps {
+    id: string;
+    type: TWalletType;
+    showAddFunds?: boolean;
+}
+export declare const WalletCard: ({ id, type, showAddFunds }: WalletCardProps) => import("react/jsx-runtime").JSX.Element | null;
+interface SharedWalletCardProps {
+    address: string;
+    id?: string;
+    type?: TWalletType;
+    name?: string;
+    identiconHash: string;
+    showAddFunds?: boolean;
+}
+export declare const WalletCards: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

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

@@ -0,0 +1,128 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+import { ModalStep } from "../../utils/steps.js";
+import { useWalletState } from "../../../provider/index.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+const ExternalWalletCard = ({ address, showAddFunds }) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const wallet = para.externalWallets[address];
+  if (!(wallet == null ? void 0 : wallet.address) || !(wallet == null ? void 0 : wallet.type)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SharedWalletCard,
+    {
+      address: (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type),
+      identiconHash: (_b = para.getIdenticonHash(wallet.id, wallet.type)) != null ? _b : "",
+      showAddFunds
+    }
+  );
+};
+const WalletCard = ({ id, type, showAddFunds }) => {
+  var _a, _b, _c;
+  const para = useInternalClient();
+  const appName = useStore((state) => state.appName);
+  const wallet = para.findWallet(id, type);
+  if (!wallet) {
+    return null;
+  }
+  const address = para.getDisplayAddress(wallet.id, { addressType: type });
+  return /* @__PURE__ */ jsx(
+    SharedWalletCard,
+    {
+      id: wallet.id,
+      type: wallet.type,
+      address: (_a = wallet.ensName) != null ? _a : truncateAddress(address, type, { prefix: para.cosmosPrefix }),
+      name: (_b = wallet.name) != null ? _b : `${appName ? `${appName} ` : ""}Wallet`,
+      identiconHash: (_c = para.getIdenticonHash(wallet.id, type)) != null ? _c : "",
+      showAddFunds
+    }
+  );
+};
+const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type }) => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const { setSelectedWallet } = useWalletState();
+  const setStep = useModalStore((state) => state.setStep);
+  const isAddFundsEnabled = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
+  const handleAddFundsClick = () => {
+    if (id && type) {
+      setSelectedWallet({ id, type });
+      isAddFundsEnabled && setStep(onRampConfig.isBuyEnabled ? ModalStep.ADD_FUNDS_BUY : ModalStep.ADD_FUNDS_RECEIVE);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(InnerContainer, { children: [
+      /* @__PURE__ */ jsx(CpslIdenticon, { size: "48px", hash: identiconHash }),
+      /* @__PURE__ */ jsxs(WalletNameContainer, { children: [
+        !!name && /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyL", weight: "semiBold", children: name }),
+        /* @__PURE__ */ jsx(Name, { color: "secondary", variant: "bodyS", weight: "medium", children: address })
+      ] })
+    ] }),
+    showAddFunds && isAddFundsEnabled && /* @__PURE__ */ jsx(AddFundsButton, { onClick: handleAddFundsClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", weight: "medium", children: "Add Funds" }) })
+  ] });
+};
+const WalletCards = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+const Container = safeStyled.div`
+  width: 100%;
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  background-color: var(--cpsl-color-background-8);
+  border-radius: 16px;
+`;
+const InnerContainer = safeStyled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+  align-items: center;
+  overflow: hidden;
+`;
+const WalletNameContainer = safeStyled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: center;
+  overflow: hidden;
+`;
+const Name = safeStyled(CpslText)`
+  width: 100%;
+  &::part(text-element) {
+    line-height: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+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);
+  --button-primary-hover-color: var(--cpsl-color-text-contrast);
+  --button-primary-active-color: var(--cpsl-color-text-contrast);
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-border-radius: 8px;
+`;
+export {
+  ExternalWalletCard,
+  WalletCard,
+  WalletCards
+};

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

@@ -0,0 +1,6 @@
+interface WalletCreationDoneStepProps {
+    twoFactorAuthEnabled?: boolean;
+    onClose: () => void;
+}
+export declare const WalletCreationDoneStep: ({ twoFactorAuthEnabled, onClose }: WalletCreationDoneStepProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,83 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+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 { 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";
+import { useEffect, useState } from "react";
+const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
+  const { isSetup2faPending } = useAuthActions();
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
+  const setStep = useModalStore((state) => state.setStep);
+  const setFlow = useModalStore((state) => state.setFlow);
+  const isLogin = useModalStore((state) => state.isLogin());
+  const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const para = useInternalClient();
+  const [isWaiting, setIsWaiting] = useState(false);
+  const isOnRampConfigured = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isWithdrawEnabled);
+  const onBypass2fa = () => {
+    if (isLogin) {
+      setStep(ModalStep.LOGIN_DONE);
+    } else {
+      if (bareModal) {
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+      } else {
+        onClose();
+      }
+    }
+  };
+  const handleNext = () => __async(void 0, null, function* () {
+    if (!twoFactorAuthEnabled) {
+      onBypass2fa();
+    }
+    if (!twoFactorStatus) {
+      if (isSetup2faPending) {
+        setIsWaiting(true);
+      }
+    } else {
+      if (twoFactorStatus.isSetup) {
+        onBypass2fa();
+      } else {
+        setStep(ModalStep.SETUP_2FA);
+      }
+    }
+  });
+  useEffect(() => {
+    if (isWaiting && !!twoFactorStatus) {
+      setStep(ModalStep.SETUP_2FA);
+    }
+  }, [isWaiting, twoFactorStatus]);
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsx(CardContainer, { children: hideWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "medium", style: { marginTop: "16px" }, children: "Your account has been created." })
+    ] }) : /* @__PURE__ */ jsx(WalletCards, { children: para.currentWalletIdsArray.map(([id, type]) => {
+      return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: isOnRampConfigured }, id);
+    }) }) }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, disabled: isWaiting, children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
+  ] });
+};
+const CardContainer = safeStyled(InnerStepContainer)`
+  min-height: 196px;
+  justify-content: center;
+`;
+export {
+  WalletCreationDoneStep
+};

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

@@ -0,0 +1,59 @@
+import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
+import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType } from '@getpara/web-sdk';
+import { PropsWithChildren } from 'react';
+export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoBoxHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilledDisabledInput: typeof CpslInput;
+export declare const FullWidthFilledDisabledInput: typeof CpslInput;
+export declare const CenteredText: typeof CpslText;
+export declare const InnerStepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    $wide?: boolean;
+}>> & string;
+export declare const Heading: typeof CpslText;
+export declare const StyledCpslTileButton: typeof CpslTileButton;
+export declare const HeroIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderSelect: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, {
+    $width: number;
+    $top?: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderSelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderSelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare function AssetIcon({ asset, size }: {
+    asset: OnRampAsset;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NetworkIcon({ network, size }: {
+    network: Network;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare function AccountTypeIcon({ accountType, size, inset, }: {
+    accountType?: TLinkedAccountType | TExternalWallet;
+    size?: string;
+    inset?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeroAccountTypeIcon({ accountType }: {
+    accountType: TLinkedAccountType | TExternalWallet;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function HeroSuccessIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function GradientScroll({ height, gap, children }: PropsWithChildren<{
+    gap?: string;
+    height?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const HeroGenericIcon: ({ accountType }: {
+    accountType: "EMAIL" | "PHONE";
+}) => import("react/jsx-runtime").JSX.Element;