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

package/dist/components/HeroSpinner.js

@@ -2,7 +2,7 @@
 import "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "../utils/index.js";
 function HeroSpinner({
   icon,
   status = "inactive",
@@ -19,7 +19,7 @@ function HeroSpinner({
     ] })
   ] });
 }
-const Root = styled.div`
+const Root = safeStyled.div`
   height: 276px;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ const Root = styled.div`
   align-items: center;
   gap: 16px;
 `;
-const Hero = styled.div`
+const Hero = safeStyled.div`
   width: 150px;
   height: 150px;
   margin: 16px 0;
@@ -36,13 +36,13 @@ const Hero = styled.div`
   align-items: center;
   position: relative;
 `;
-const Text = styled.div`
+const Text = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
   color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : "auto"};
 `;
-const Spinner = styled(CpslSpinner)`
+const Spinner = safeStyled(CpslSpinner)`
   position: absolute;
   width: 150px;
   height: 150px;

package/dist/components/KnownDevices.js

@@ -2,10 +2,9 @@
 import "../chunk-GOCCUU3Z.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
 import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";
 import { QRCode } from "./QRCode.js";
-import { getDeviceLogo, getDeviceModelName } from "../utils/index.js";
+import { getDeviceLogo, getDeviceModelName, safeStyled } from "../utils/index.js";
 import { useCopyToClipboard } from "../hooks/index.js";
 const KnownDevices = ({ hints, link, showCurrentDevice }) => {
   const [isCopied, copy] = useCopyToClipboard();
@@ -33,10 +32,10 @@ const KnownDevices = ({ hints, link, showCurrentDevice }) => {
     ] })
   ] });
 };
-const Container = styled(CenteredColumnContainer)`
+const Container = safeStyled(CenteredColumnContainer)`
   gap: 16px;
 `;
-const DevicesContainer = styled.div`
+const DevicesContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -45,12 +44,12 @@ const DevicesContainer = styled.div`
   width: 100%;
   border-radius: 16px;
 `;
-const DeviceListItem = styled.div`
+const DeviceListItem = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
 `;
-const DeviceLogo = styled(CpslIcon)`
+const DeviceLogo = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-contrast);
   --height: 16px;
   --width: 16px;

package/dist/components/MoonPayEmbed.js

@@ -5,8 +5,7 @@ import {
 import { jsx } from "react/jsx-runtime";
 import { getNetworkPrefix, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
 import { lazy, useCallback, useEffect, useMemo, useState } from "react";
-import { reverseCurrencyLookup, offRampSend, getCurrencyCode } from "../utils/index.js";
-import styled from "styled-components";
+import { reverseCurrencyLookup, offRampSend, getCurrencyCode, safeStyled } from "../utils/index.js";
 const MOONPAY_PUBLISHABLE_KEY = "pk_live_EQva4LydtNDE0Rwd9X7SG9w58wqOzbux";
 const MOONPAY_PUBLISHABLE_KEY_TEST = "pk_test_HYobzemmTBXxcSStVA4dSED6jT";
 const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }) => {
@@ -170,7 +169,7 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
   return /* @__PURE__ */ jsx(Container, { isEmbedded, children: /* @__PURE__ */ jsx(LazyMoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: embed }) });
 };
 var MoonPayEmbed_default = MoonPayEmbed;
-const Container = styled.div`
+const Container = safeStyled.div`
   width: ${({ isEmbedded }) => isEmbedded ? "100%" : "100vw"};
   height: ${({ isEmbedded }) => isEmbedded ? "640px" : "100vh"};
 

package/dist/components/NetworkSpeedBanner.js

@@ -2,16 +2,16 @@
 import "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import styled from "styled-components";
 import { CpslIcon } from "@getpara/react-components";
-const BannerContainerWrapper = styled.div`
+import { safeStyled } from "../utils/index.js";
+const BannerContainerWrapper = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   background-color: transparent;
 `;
-const BannerContainer = styled.div`
+const BannerContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,14 +27,14 @@ const BannerContainer = styled.div`
   text-overflow: ellipsis;
   overflow: hidden;
 `;
-const WarningIcon = styled(CpslIcon)`
+const WarningIcon = safeStyled(CpslIcon)`
   --icon-color: #fbbc04;
   --width: ${({ $size }) => $size || "24px"};
   --height: ${({ $size }) => $size || "24px"};
   margin-right: 6px;
   flex-shrink: 0;
 `;
-const BannerText = styled.span`
+const BannerText = safeStyled.span`
   font-family: var(--cpsl-default-font);
   font-weight: 500;
   font-size: ${({ $fontSize }) => $fontSize || "14px"};

package/dist/components/QRCode.js

@@ -2,9 +2,9 @@
 import "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
 import { useCopyToClipboard } from "../hooks/index.js";
 import { isMobile } from "@getpara/web-sdk";
+import { safeStyled } from "../utils/index.js";
 const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
   const [isCopied, copy] = useCopyToClipboard();
   const isMobileScreen = isMobile();
@@ -23,7 +23,7 @@ const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
     ] })
   ] });
 };
-const QRContainer = styled.div`
+const QRContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -36,11 +36,11 @@ const QRContainer = styled.div`
   padding-bottom: ${({ $isMobile }) => $isMobile ? "0px" : "16px"};
   padding-top: ${({ $isMobile }) => $isMobile ? "16px" : "0px"};
 `;
-const StyledQRCode = styled(CpslQrCode)`
+const StyledQRCode = safeStyled(CpslQrCode)`
   --qr-box-shadow: none;
   --qr-border-radius: 0px;
 `;
-const CopyButton = styled(CpslButton)`
+const CopyButton = safeStyled(CpslButton)`
   --button-primary-color: var(--cpsl-color-text-contrast);
   --button-primary-background-color: var(--cpsl-color-background-4);
 
@@ -57,18 +57,18 @@ const CopyButton = styled(CpslButton)`
 
   --button-border-radius: 1000px;
 `;
-const MobileCopyButton = styled(CopyButton)`
+const MobileCopyButton = safeStyled(CopyButton)`
   --button-padding-top: 4px;
   --button-padding-bottom: 4px;
 
   padding: 0px 12px;
 `;
-const CopyIcon = styled(CpslIcon)`
+const CopyIcon = safeStyled(CpslIcon)`
   --width: 16px;
   --height: 16px;
   --icon-color: var(--cpsl-color-text-contrast);
 `;
-const LoadingContainer = styled.div`
+const LoadingContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/components/UserIdentifier.js

@@ -2,9 +2,8 @@
 import "../chunk-GOCCUU3Z.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";
+import { getExternalWalletDisplayName, safeStyled } from "../utils/index.js";
 function defaultDisplay(authInfo) {
   const { authType, identifier, externalWallet } = authInfo;
   switch (authType) {
@@ -33,7 +32,7 @@ const UserIdentifier = ({ authInfo }) => {
     /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultName })
   ] });
 };
-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 +41,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,10 +53,10 @@ 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;
 `;

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 { 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/types/externalWalletCommon.d.ts

@@ -53,7 +53,10 @@ export declare enum EvmWallet {
     WALLETCONNECT = "WALLETCONNECT",
     ZERION = "ZERION",
     SAFE = "SAFE",
-    RABBY = "RABBY"
+    RABBY = "RABBY",
+    OKX = "OKX",
+    HAHA = "HAHA",
+    BACKPACK = "BACKPACK"
 }
 export declare enum SolanaWallet {
     PHANTOM = "PHANTOM",
@@ -63,11 +66,13 @@ export declare enum SolanaWallet {
 }
 export declare enum CosmosWallet {
     KEPLR = "KEPLR",
-    LEAP = "LEAP"
+    LEAP = "LEAP",
+    COSMOSTATION = "COSMOSTATION"
 }
 export declare const ExternalWallet: {
     KEPLR: CosmosWallet.KEPLR;
     LEAP: CosmosWallet.LEAP;
+    COSMOSTATION: CosmosWallet.COSMOSTATION;
     PHANTOM: SolanaWallet.PHANTOM;
     GLOW: SolanaWallet.GLOW;
     BACKPACK: SolanaWallet.BACKPACK;
@@ -79,5 +84,7 @@ export declare const ExternalWallet: {
     ZERION: EvmWallet.ZERION;
     SAFE: EvmWallet.SAFE;
     RABBY: EvmWallet.RABBY;
+    OKX: EvmWallet.OKX;
+    HAHA: EvmWallet.HAHA;
 };
 export type TExternalWallet = keyof typeof ExternalWallet;

package/dist/types/externalWalletCommon.js

@@ -10,6 +10,9 @@ var EvmWallet = /* @__PURE__ */ ((EvmWallet2) => {
   EvmWallet2["ZERION"] = "ZERION";
   EvmWallet2["SAFE"] = "SAFE";
   EvmWallet2["RABBY"] = "RABBY";
+  EvmWallet2["OKX"] = "OKX";
+  EvmWallet2["HAHA"] = "HAHA";
+  EvmWallet2["BACKPACK"] = "BACKPACK";
   return EvmWallet2;
 })(EvmWallet || {});
 var SolanaWallet = /* @__PURE__ */ ((SolanaWallet2) => {
@@ -22,6 +25,7 @@ var SolanaWallet = /* @__PURE__ */ ((SolanaWallet2) => {
 var CosmosWallet = /* @__PURE__ */ ((CosmosWallet2) => {
   CosmosWallet2["KEPLR"] = "KEPLR";
   CosmosWallet2["LEAP"] = "LEAP";
+  CosmosWallet2["COSMOSTATION"] = "COSMOSTATION";
   return CosmosWallet2;
 })(CosmosWallet || {});
 const ExternalWallet = __spreadValues(__spreadValues(__spreadValues({}, EvmWallet), SolanaWallet), CosmosWallet);

package/dist/utils/index.d.ts

@@ -38,3 +38,4 @@ export * from './getDeviceModelName.js';
 export * from './getBrowserName.js';
 export * from './formatBiometricHints.js';
 export * from './getExternalWalletDisplayName.js';
+export * from './safeStyled.js';

package/dist/utils/index.js

@@ -108,6 +108,7 @@ export * from "./getDeviceModelName.js";
 export * from "./getBrowserName.js";
 export * from "./formatBiometricHints.js";
 export * from "./getExternalWalletDisplayName.js";
+export * from "./safeStyled.js";
 export {
   NetworkAssetAddresses,
   NetworkChainIds,

package/dist/utils/safeStyled.d.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export declare const safeStyled: typeof styled;

package/dist/utils/safeStyled.js

@@ -0,0 +1,25 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import styled from "styled-components";
+const createStubComponent = () => {
+  const StubComponent = () => null;
+  StubComponent.attrs = () => createStubComponent();
+  StubComponent.withConfig = () => createStubComponent();
+  return StubComponent;
+};
+const createStubStyled = () => {
+  const styledStub = () => createStubComponent();
+  const handler = {
+    get: (_target, _prop) => {
+      return createStubComponent;
+    },
+    apply: () => {
+      return createStubComponent();
+    }
+  };
+  return new Proxy(styledStub, handler);
+};
+const safeStyled = typeof window !== "undefined" ? styled : createStubStyled();
+export {
+  safeStyled
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.18",
-    "@getpara/web-sdk": "2.0.0-alpha.18",
+    "@getpara/react-components": "2.0.0-alpha.19",
+    "@getpara/web-sdk": "2.0.0-alpha.19",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "libphonenumber-js": "^1.11.1",
@@ -40,5 +40,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "2333bc727fe61593821d448ee12facaee230c4b0"
+  "gitHead": "80d2c5d7e1203fb12378aa29bfd4d7003c7d7075"
 }