@getpara/react-common 2.0.0-alpha.7 → 2.0.0-alpha.71

package/dist/components/RampEmbed.js

@@ -1,28 +1,23 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
-import { Network, OnRampAsset, OnRampProvider, getPortalBaseURL } from "@getpara/web-sdk";
-import {
-  getChainId,
-  getContractAddressFromAsset,
-  getCurrencyCodes,
-  reverseCurrencyLookup,
-  offRampSend
-} from "../utils/index.js";
+import { OnRampProvider } from "@getpara/web-sdk";
+import { getChainId, getContractAddressFromAsset, getCurrencyCodes, reverseCurrencyLookup } from "../utils/index.js";
 const TEST_MODE_FORBIDDEN = ["ETH_ETH", "ETH_USDC"];
 const RampEmbed = ({
-  para,
   appName,
+  email,
   onRampConfig,
   onRampPurchase,
   isEmbedded,
   apiKey,
   onClose,
-  setOnRampPurchase
+  onUpdate,
+  onDepositRequest
 }) => {
   const { currencyCodes } = getCurrencyCodes(onRampConfig, {
     provider: OnRampProvider.RAMP,
@@ -38,10 +33,10 @@ const RampEmbed = ({
           swapAsset: currencyCodes.filter((code) => !onRampPurchase.testMode || !TEST_MODE_FORBIDDEN.includes(code)).join(","),
           fiatValue: onRampPurchase.fiatQuantity,
           fiatCurrency: onRampPurchase.fiat,
-          hostLogoUrl: `${getPortalBaseURL(para.ctx)}/wordmark_black.svg`,
+          hostLogoUrl: `${window.location.hostname}/wordmark_black.svg`,
           hostApiKey: apiKey,
           userAddress: onRampPurchase.address,
-          userEmailAddress: para.getEmail(),
+          userEmailAddress: email,
           url: (onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? "https://app.demo.ramp.network" : "https://app.ramp.network",
           enabledFlows: [onRampPurchase.type === "BUY" ? "ONRAMP" : "OFFRAMP"],
           useSendCryptoCallback: true,
@@ -49,22 +44,15 @@ const RampEmbed = ({
           containerNode: document.getElementById("ramp-container")
         }).on("PURCHASE_CREATED", (e) => __async(void 0, null, function* () {
           const p = e.payload.purchase;
-          const [network, asset] = onRampPurchase.testMode ? [Network.ETHEREUM, OnRampAsset.ETHEREUM] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
-          const updated = yield para.ctx.client.updateOnRampPurchase({
-            userId: para.getUserId(),
-            walletId: onRampPurchase.walletId,
-            externalWalletAddress: onRampPurchase.externalWalletAddress,
-            purchaseId: onRampPurchase.id,
-            updates: {
-              providerKey: p.id,
-              fiatQuantity: p.fiatValue,
-              fiat: p.fiatCurrency,
-              assetQuantity: p.cryptoAmount,
-              asset,
-              network
-            }
+          const [network, asset] = onRampPurchase.testMode ? ["ETHEREUM", "ETHEREUM"] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
+          onUpdate({
+            providerKey: p.id,
+            fiatQuantity: p.fiatValue,
+            fiat: p.fiatCurrency,
+            assetQuantity: p.cryptoAmount,
+            asset,
+            network
           });
-          setOnRampPurchase(updated);
         })).on("WIDGET_CLOSE", () => __async(void 0, null, function* () {
           onClose == null ? void 0 : onClose();
           if (!isEmbedded) {
@@ -77,7 +65,7 @@ const RampEmbed = ({
         })).onSendCrypto((assetInfo, amount, address) => __async(void 0, null, function* () {
           try {
             const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, assetInfo.symbol);
-            const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
+            const txHash = yield onDepositRequest({
               assetQuantity: amount,
               destinationAddress: address,
               contractAddress: getContractAddressFromAsset(network, asset),

package/dist/components/UserIdentifier.d.ts

@@ -1,4 +1,12 @@
+import { IconType } from '@getpara/react-components';
 import { CoreAuthInfo } from '@getpara/web-sdk';
+export declare function getAuthDisplay(authInfo: CoreAuthInfo, { withAddress }?: {
+    withAddress?: boolean;
+}): {
+    name: string | null;
+    icon?: IconType;
+    src?: string;
+};
 export declare const UserIdentifier: ({ authInfo }: {
     authInfo?: CoreAuthInfo;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/UserIdentifier.js

@@ -1,39 +1,46 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import {
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-import { displayPhoneNumber } from "@getpara/web-sdk";
-import { getExternalWalletDisplayName } from "../utils/index.js";
-function defaultDisplay(authInfo) {
-  const { authType, identifier, externalWallet } = authInfo;
+import { displayPhoneNumber, truncateAddress } from "@getpara/web-sdk";
+import { getExternalWalletDisplayName, getExternalWalletIcon, safeStyled } from "../utils/index.js";
+function getAuthDisplay(authInfo, { withAddress = false } = {}) {
+  var _a;
+  const { authType, displayName, identifier, pfpUrl, externalWallet } = authInfo;
   switch (authType) {
     case "email":
-      return { defaultName: identifier.toLowerCase(), defaultIcon: "mail" };
+      return { name: identifier.toLowerCase(), icon: "mail" };
     case "phone":
-      return { defaultName: displayPhoneNumber(identifier), defaultIcon: "phone" };
+      return { name: displayPhoneNumber(identifier), icon: "phone" };
     case "farcaster":
-      return { defaultName: `@${identifier}`, defaultIcon: "farcasterBrand" };
+      return __spreadValues({ name: displayName != null ? displayName : `@${identifier}` }, pfpUrl ? { src: pfpUrl } : { icon: "farcasterBrand" });
     case "telegram":
-      return { defaultName: `Telegram User @${identifier}`, defaultIcon: "telegramBrand" };
+      return __spreadValues({
+        name: displayName != null ? displayName : `Telegram User @${identifier}`
+      }, pfpUrl ? { src: pfpUrl } : { icon: "telegramBrand" });
     case "externalWallet":
-      return { defaultName: getExternalWalletDisplayName(externalWallet), defaultIcon: "wallet" };
+      return {
+        name: externalWallet ? getExternalWalletDisplayName(externalWallet, { withAddress }) : truncateAddress(identifier, "EVM"),
+        icon: (_a = getExternalWalletIcon(externalWallet == null ? void 0 : externalWallet.providerId)) != null ? _a : "wallet02"
+      };
     default:
-      return { defaultName: null, defaultIcon: null };
+      return { name: null, icon: null };
   }
 }
 const UserIdentifier = ({ authInfo }) => {
   if (!authInfo) {
     return null;
   }
-  const { authType, displayName, pfpUrl } = authInfo;
-  const { defaultName, defaultIcon } = defaultDisplay(authInfo);
+  const { authType } = authInfo;
+  const { name, icon, src } = getAuthDisplay(authInfo, { withAddress: true });
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(IconContainer, { children: pfpUrl ? /* @__PURE__ */ jsx(Avatar, { src: pfpUrl, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon: defaultIcon, size: authType === "telegram" ? "20px" : "13px" }) }),
-    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultName })
+    /* @__PURE__ */ jsx(IconContainer, { children: src ? /* @__PURE__ */ jsx(Avatar, { src, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon, size: authType === "telegram" ? "20px" : "13px" }) }),
+    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: name })
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   padding: 8px 12px 8px 8px;
   border-radius: 1000px;
   background-color: var(--cpsl-color-background-4);
@@ -42,10 +49,10 @@ const Container = styled.div`
   justify-content: flex-start;
   gap: 4px;
 `;
-const IdentifierText = styled(CpslText)`
+const IdentifierText = safeStyled(CpslText)`
   --color-override: var(--cpsl-color-background-96);
 `;
-const IconContainer = styled.div`
+const IconContainer = safeStyled.div`
   display: flex;
   background: var(--cpsl-color-background-0);
   align-items: center;
@@ -54,13 +61,14 @@ const IconContainer = styled.div`
   width: 20px;
   height: 20px;
 `;
-const Icon = styled(CpslIcon)`
+const Icon = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-primary);
 `;
-const Avatar = styled(CpslAvatar)`
+const Avatar = safeStyled(CpslAvatar)`
   --container-border-width: 0;
   --container-padding: 0;
 `;
 export {
-  UserIdentifier
+  UserIdentifier,
+  getAuthDisplay
 };

package/dist/components/WalletSelect.d.ts

@@ -0,0 +1,33 @@
+import { AvailableWallet, TWalletType, TExternalWallet } from '@getpara/web-sdk';
+type EntryProps = {
+    name?: string;
+    type?: TWalletType;
+    externalWallet?: TExternalWallet | string;
+    withCopy?: boolean;
+    withIcon?: boolean;
+    copyValue?: string;
+};
+export declare const WalletSelect: ({ isDark, style, className, value, onChange, options, getEntryProps, getSelectValue, helperText, }: {
+    isDark: any;
+    style?: React.CSSProperties;
+    className?: string;
+    value: AvailableWallet;
+    onChange: (_: AvailableWallet) => void;
+    options: AvailableWallet[];
+    getEntryProps: (wallet: AvailableWallet) => EntryProps;
+    getSelectValue: (wallet: AvailableWallet) => `${string}~${TWalletType}`;
+    helperText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: 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?: import("react").Ref<any>;
+}, {
+    $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 SelectItem: 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?: import("react").Ref<any>;
+}, {
+    isMultiOption?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContainer: 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/components/WalletSelect.js

@@ -0,0 +1,171 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useDropdownPosition, useCopyToClipboard } from "../hooks/index.js";
+import { safeStyled } from "../utils/index.js";
+import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
+import { WalletTypeIcon as WalletTypeIconBase } from "./WalletTypeIcon.js";
+const Entry = ({
+  isDark = false,
+  withCopy,
+  slot,
+  withIcon,
+  name,
+  type,
+  externalWallet,
+  copyValue,
+  isMultiOption
+}) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: { flex: "1" }, isMultiOption, children: [
+    withIcon && /* @__PURE__ */ jsx(WalletTypeIcon, { isDark, externalWallet, walletType: type, size: "32px", inset: "6px" }),
+    /* @__PURE__ */ jsx(
+      CpslText,
+      {
+        variant: "bodyM",
+        color: "contrast",
+        style: { flex: "1", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "clip" },
+        children: name
+      }
+    ),
+    withCopy && copyValue && /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        id: "ignore-click",
+        size: "small",
+        variant: "ghost",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          copy(copyValue);
+        },
+        children: /* @__PURE__ */ jsx(CpslIcon, { id: "ignore-click", slot: "start", icon: isCopied ? "check" : "copy" })
+      }
+    )
+  ] });
+};
+const WalletSelect = ({
+  isDark = false,
+  style,
+  className,
+  value,
+  onChange,
+  options,
+  getEntryProps,
+  getSelectValue,
+  helperText
+}) => {
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const isMulti = options.length > 1;
+  const ActiveEntry = value ? /* @__PURE__ */ jsx(Entry, __spreadProps(__spreadValues({ isDark, withCopy: true, slot: "selected-item" }, getEntryProps(value)), { isMultiOption: isMulti })) : null;
+  useEffect(() => {
+    if (dropdownMaxHeight && (value == null ? void 0 : value.address)) {
+      resize();
+    }
+  }, [value, options, dropdownMaxHeight]);
+  return /* @__PURE__ */ jsxs(Container, { className, style, children: [
+    isMulti && helperText && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: helperText }),
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        selectedValue: getSelectValue(value),
+        onCpslSelectValueChange: (e) => {
+          const [id, type] = e.detail.split("~");
+          onChange(options.find((o) => o.id === id && o.type === type));
+        },
+        showFormattedSelectedItem: true,
+        placeholder: "Choose wallet...",
+        anchorElId: "addressInputContainer",
+        dropdownMaxHeight,
+        $width: dropdownWidth != null ? dropdownWidth : 0,
+        $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+        selectedItemVariant: "bodyXS",
+        icon: isMulti ? "chevronUp" : null,
+        disabled: !isMulti,
+        isMultiOption: isMulti,
+        children: [
+          value && ActiveEntry,
+          (options || []).map((wallet) => {
+            const key = getSelectValue(wallet);
+            return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Entry, __spreadValues({ isDark }, getEntryProps(wallet))) }, key);
+          })
+        ]
+      }
+    ) })
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+const WalletContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding-inline-end: ${({ isMultiOption }) => isMultiOption ? "40px" : "0px"};
+`;
+const Select = safeStyled(CpslSelect)`
+  --icon-width: 32px;
+  --icon-height: 32px;
+  --container-border-color: var(--cpsl-color-background-16);
+  --container-background-color-disabled: var(--container-background-color);
+  width: 100%;
+  position: relative;
+
+  &::part(selected-text) {
+    white-space: nowrap;
+  }
+
+  &::part(dropdown) {
+    min-width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(icon) {
+    --icon-color: var(--cpsl-color-text-primary);
+    position: absolute;
+    right: 12px;
+  }
+`;
+const SelectItem = safeStyled(CpslSelectItem)`
+  --outer-container-padding-start: 0px;
+  --outer-container-padding-end: 0px;
+  --outer-container-padding-top: 0px;
+  --outer-container-padding-bottom: 0px;
+  --container-padding-start: 12px;
+  --container-padding-end: ${({ isMultiOption }) => isMultiOption ? "40px" : "12px"};
+  --container-padding-top: 8px;
+  --container-padding-bottom: 8px;
+`;
+const SelectContainer = safeStyled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--cpsl-border-radius-tile-button);
+  background-color: var(--cpsl-color-background-4);
+`;
+const WalletTypeIcon = safeStyled(WalletTypeIconBase)`
+  --border: 1px solid var(--cpsl-color-background-8);
+  --border-radius: 4px;
+`;
+const CopyButton = safeStyled(CpslButton)`
+  cpsl-icon {
+    --height: 24px;
+    --width: 24px;
+  }
+`;
+export {
+  Select,
+  SelectContainer,
+  SelectItem,
+  WalletSelect
+};

package/dist/components/WalletTypeIcon.d.ts

@@ -0,0 +1,9 @@
+import { CpslIcon } from '@getpara/react-components';
+import { TExternalWallet, TWalletType } from '@getpara/web-sdk';
+import { CommonWallet } from '../types/index.js';
+export declare function WalletTypeIcon({ className, walletType, externalWallet, isDark, ...props }: {
+    className?: string;
+    walletType: TWalletType;
+    isDark?: boolean;
+    externalWallet?: TExternalWallet | CommonWallet | string;
+} & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;

package/dist/components/WalletTypeIcon.js

@@ -0,0 +1,45 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { CpslIcon } from "@getpara/react-components";
+import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
+import { WALLET_TYPES_METADATA } from "../constants/index.js";
+function WalletTypeIcon(_a) {
+  var _b = _a, {
+    className,
+    walletType,
+    externalWallet,
+    isDark = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "walletType",
+    "externalWallet",
+    "isDark"
+  ]);
+  var _a2, _b2;
+  if (typeof externalWallet === "object" && "iconUrl" in externalWallet) {
+    return /* @__PURE__ */ jsx(CpslIcon, __spreadProps(__spreadValues({ className, src: externalWallet.iconUrl }, props), { inset: (_a2 = props.inset) != null ? _a2 : "10%" }));
+  }
+  const data = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
+    icon: "wallet02",
+    isDark: true
+  };
+  props.size;
+  return /* @__PURE__ */ jsx(
+    CpslIcon,
+    __spreadProps(__spreadValues({
+      className,
+      icon: data.icon,
+      invert: isDark && data.isDark
+    }, props), {
+      inset: (_b2 = props.inset) != null ? _b2 : "10%"
+    })
+  );
+}
+export {
+  WalletTypeIcon
+};

package/dist/components/WarningBanner.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface WarningBannerProps {
+    children: ReactNode;
+    onClose?: () => void;
+}
+export declare const WarningBanner: ({ children, onClose }: WarningBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WarningBanner.js

@@ -0,0 +1,60 @@
+"use client";
+import "../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CpslIcon } from "@getpara/react-components";
+import { safeStyled } from "../utils/index.js";
+const BannerContainer = safeStyled.div`
+  background: #fffcec;
+  border: 2px solid var(--cpsl-color-utility-yellow);
+  border-radius: 4px;
+  padding: 8px 8px;
+`;
+const Content = safeStyled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: relative;
+`;
+const Text = safeStyled.div`
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--cpsl-color-black);
+  font-weight: 400;
+`;
+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;
+  margin-top: 1px;
+`;
+const CloseIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --height: 20px;
+  --width: 20px;
+`;
+const WarningBanner = ({ children, onClose }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose == null ? void 0 : onClose();
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BannerContainer, { children: /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, "aria-label": "Close warning", children: /* @__PURE__ */ jsx(CloseIcon, { icon: "x" }) }),
+    /* @__PURE__ */ jsx(Text, { children })
+  ] }) });
+};
+export {
+  WarningBanner
+};

package/dist/components/common.d.ts

@@ -1,9 +1,9 @@
 import { CpslInput, CpslText } from '@getpara/react-components';
-export declare const SpinnerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CenteredColumnContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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 CenteredColumnContainer: 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 HeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+export declare const HeaderButton: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: import("react").Ref<any>;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common.js

@@ -1,13 +1,13 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { CpslButton, CpslInput, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-const SpinnerContainer = styled.div`
+import { safeStyled } from "../utils/index.js";
+const SpinnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-const CenteredColumnContainer = styled.div`
+const CenteredColumnContainer = safeStyled.div`
   width: 100%;
   height: 100%;
   align-self: center;
@@ -16,21 +16,21 @@ const CenteredColumnContainer = styled.div`
   align-items: center;
   gap: 8px;
 `;
-const FilledDisabledInput = styled(CpslInput)`
+const FilledDisabledInput = safeStyled(CpslInput)`
   --container-border-color: var(--cpsl-color-input-border-placeholder);
   --container-background-color: var(--cpsl-color-background-0);
   --input-background-color: transparent;
   --input-font-weight: 500;
   --input-color: var(--cpsl-color-text-secondary) !important;
 `;
-const FullWidthFilledDisabledInput = styled(FilledDisabledInput)`
+const FullWidthFilledDisabledInput = safeStyled(FilledDisabledInput)`
   width: 100%;
 `;
-const CenteredText = styled(CpslText)`
+const CenteredText = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
 `;
-const HeaderButton = styled(CpslButton)`
+const HeaderButton = safeStyled(CpslButton)`
   flex: 0;
   --button-padding-top: 2px;
   --button-padding-bottom: 2px;

package/dist/components/index.d.ts

@@ -1,9 +1,11 @@
 export * from './MoonPayEmbed.js';
 export * from './RampEmbed.js';
-export * from './StripeEmbed.js';
 export * from './common.js';
 export * from './HeroSpinner.js';
 export * from './KnownDevices.js';
 export * from './QRCode.js';
 export * from './UserIdentifier.js';
 export * from './NetworkSpeedBanner.js';
+export * from './WarningBanner.js';
+export * from './WalletSelect.js';
+export * from './WalletTypeIcon.js';

package/dist/components/index.js

@@ -1,10 +1,12 @@
 "use client";
 export * from "./MoonPayEmbed.js";
 export * from "./RampEmbed.js";
-export * from "./StripeEmbed.js";
 export * from "./common.js";
 export * from "./HeroSpinner.js";
 export * from "./KnownDevices.js";
 export * from "./QRCode.js";
 export * from "./UserIdentifier.js";
 export * from "./NetworkSpeedBanner.js";
+export * from "./WarningBanner.js";
+export * from "./WalletSelect.js";
+export * from "./WalletTypeIcon.js";

package/dist/constants/aaguiMetadata.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const aaguidMetadata = {
   "ea9b8d66-4d01-1d21-3ce4-b6b48cb575d4": {
     name: "Google Password Manager",