@funkit/connect 5.0.8 → 5.0.10

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  darkTheme
-} from "./chunk-W45X55GI.js";
 import {
   lightTheme
 } from "./chunk-N7ULOOYE.js";
+import {
+  darkTheme
+} from "./chunk-W45X55GI.js";
 import {
   systemFontStack
 } from "./chunk-2T4ZDGAO.js";
@@ -105,10 +105,10 @@ var __private__ = {
 };
 
 // src/components/Avatar/Avatar.tsx
-import React7, { useContext as useContext2 } from "react";
+import React7, { useContext } from "react";
 
 // src/providers/AvatarContext.ts
-import { createContext as createContext2 } from "react";
+import { createContext } from "react";
 
 // src/components/Avatar/EmojiAvatar.tsx
 import React5, { useEffect, useState } from "react";
@@ -116,165 +116,41 @@ import React5, { useEffect, useState } from "react";
 // src/components/Icons/SpinnerIcon.tsx
 import React3 from "react";
 
-// src/consts/customers.ts
-import {
-  DYDX_API_KEY,
-  POLYMARKET_API_KEY,
-  VERTEX_API_KEY
-} from "@funkit/api-base";
-function isDydxCustomer(apiKey) {
-  return apiKey === DYDX_API_KEY;
-}
-function isPolymarketCustomer(apiKey) {
-  return apiKey === POLYMARKET_API_KEY;
-}
-function isVertexCustomer(apiKey) {
-  return apiKey === VERTEX_API_KEY;
-}
-
-// src/providers/FunkitConfigContext.tsx
-import { createContext, useContext, useMemo } from "react";
-
-// src/consts/funkit.ts
-import { CheckoutState } from "@funkit/api-base";
-import { FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS } from "@funkit/chains";
-var NATIVE_TOKEN = FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS;
-var FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
-var RESERVED_GROUP_NAME = "funkit-web2";
-var DEFAULT_FUNWALLET_INDEX = 0;
-var FUN_WORKER_EOA_ADDR = "0x1881ad6e231a14A8Be0f9AE6f9EFd8f3CFb09919";
-var FUN_ORG_NAME = "Fun.xyz";
-var FROM_PROGRESS_CHECKOUT_STATES = [
-  CheckoutState.FROM_UNFUNDED,
-  CheckoutState.FROM_FUNDED,
-  CheckoutState.FROM_POOLED
-];
-var TO_PROGRESS_CHECKOUT_STATES = [
-  CheckoutState.TO_UNFUNDED,
-  CheckoutState.TO_FUNDED,
-  CheckoutState.TO_POOLED,
-  CheckoutState.TO_READY,
-  CheckoutState.PENDING_RECEIVAL
-];
-var IN_PROGRESS_CHECKOUT_STATES = [
-  ...TO_PROGRESS_CHECKOUT_STATES,
-  ...FROM_PROGRESS_CHECKOUT_STATES
-];
-var TERMINAL_CHECKOUT_STATES = [
-  CheckoutState.EXPIRED,
-  CheckoutState.CHECKOUT_ERROR,
-  CheckoutState.COMPLETED,
-  CheckoutState.CANCELLED
-];
-var FunkitSocialLoginMethod = /* @__PURE__ */ ((FunkitSocialLoginMethod2) => {
-  FunkitSocialLoginMethod2["GOOGLE"] = "google_oauth" /* google_oauth */;
-  FunkitSocialLoginMethod2["TWITTER"] = "twitter_oauth" /* twitter_oauth */;
-  FunkitSocialLoginMethod2["APPLE"] = "apple_oauth" /* apple_oauth */;
-  FunkitSocialLoginMethod2["FARCASTER"] = "farcaster" /* farcaster */;
-  return FunkitSocialLoginMethod2;
-})(FunkitSocialLoginMethod || {});
-var PLACEHOLDER_FUNKIT_USER_INFO = {
-  id: "0x",
-  address: "0x",
-  name: "Guest",
-  nameTruncated: "Guest",
-  type: "unknown",
-  typeLabel: "",
-  iconSrc: ""
-};
-
-// src/providers/FunkitConfigContext.tsx
-var DEFAULT_TEXT_CUSTOMIZATIONS = {
-  brokerageOrExchange: "Connect Exchange",
-  debitOrCredit: "Use card",
-  accountBalance: "Wallet",
-  selectAccount: "Select an exchange",
-  sourceMethodTitle: "Your source",
-  transferTokens: "Transfer Crypto",
-  confirmationScreen: {
-    payAmountLabel: "You send",
-    receiveAmountLabel: "You receive"
-  }
-};
-var DEFAULT_FUNKIT_CONFIG = {
-  apiKey: "",
-  appName: "",
-  allowBackgroundScroll: false,
-  textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
-  loginConfig: {
-    web2: false,
-    web3: false,
-    prioritizedLogin: "none",
-    web2SocialLogins: {
-      ["google_oauth" /* GOOGLE */]: false,
-      ["twitter_oauth" /* TWITTER */]: false,
-      ["apple_oauth" /* APPLE */]: false
-    }
-  }
-};
-var FunkitConfigContext = createContext(
-  DEFAULT_FUNKIT_CONFIG
-);
-function useFunkitConfig() {
-  const originalFunkitConfig = useContext(FunkitConfigContext);
-  const finalFunkitConfig = useMemo(() => {
-    return {
-      ...DEFAULT_FUNKIT_CONFIG,
-      ...originalFunkitConfig,
-      loginConfig: {
-        ...DEFAULT_FUNKIT_CONFIG.loginConfig,
-        ...originalFunkitConfig.loginConfig,
-        web2SocialLogins: {
-          ...DEFAULT_FUNKIT_CONFIG.loginConfig.web2SocialLogins,
-          ...originalFunkitConfig.loginConfig.web2SocialLogins
-        }
-      },
-      textCustomizations: {
-        ...DEFAULT_FUNKIT_CONFIG.textCustomizations,
-        ...originalFunkitConfig.textCustomizations
-      }
-    };
-  }, [originalFunkitConfig]);
-  return finalFunkitConfig;
-}
-
 // src/components/Icons/Icons.css.ts
 var SpinnerIconClassName = "qe221a2";
 
 // src/components/Icons/SpinnerIcon.tsx
 var SpinnerIcon = ({ size = 21 }) => {
-  const { apiKey } = useFunkitConfig();
-  const isVertex = isVertexCustomer(apiKey);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(Box, { color: "strokeColor" }, /* @__PURE__ */ React3.createElement(
     "svg",
     {
-      className: SpinnerIconClassName,
-      xmlns: "http://www.w3.org/2000/svg",
-      height: size,
       width: size,
+      height: size,
+      className: SpinnerIconClassName,
       viewBox: "0 0 14 14",
-      fill: "none"
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
     },
     /* @__PURE__ */ React3.createElement(
       "path",
       {
         opacity: "0.3",
-        d: "M13.3438 7C13.3438 8.66748 12.7013 10.1834 11.6491 11.3162C11.091 11.917 10.4183 12.4092 9.66627 12.7581C8.85649 13.1337 7.95367 13.3438 7 13.3438C3.49644 13.3438 0.65625 10.5036 0.65625 7C0.65625 3.49644 3.49644 0.65625 7 0.65625C10.5036 0.65625 13.3438 3.49644 13.3438 7Z",
+        d: "M13.25 7C13.25 8.64289 12.6171 10.1363 11.5804 11.2524C11.0305 11.8444 10.3677 12.3293 9.62682 12.673C8.82915 13.0431 7.93977 13.25 7 13.25C3.54822 13.25 0.75 10.4518 0.75 7C0.75 3.54822 3.54822 0.75 7 0.75C10.4518 0.75 13.25 3.54822 13.25 7Z",
         stroke: "white",
         strokeOpacity: "0.5",
-        strokeWidth: "1.3125"
+        strokeWidth: "1.5"
       }
     ),
     /* @__PURE__ */ React3.createElement(
       "path",
       {
-        d: "M6.91235 13.2504C10.3968 13.2504 13.2214 10.4257 13.2214 6.94133C13.2214 5.63413 12.8239 4.41978 12.1431 3.4126",
-        stroke: isVertex ? "#fff8" : "#333333",
-        strokeLinecap: "round",
-        strokeWidth: "1.3125"
+        d: "M6.91211 13.2504C10.3965 13.2504 13.2212 10.4257 13.2212 6.94133C13.2212 5.63413 12.8236 4.41978 12.1428 3.4126",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
       }
     )
-  );
+  ));
 };
 
 // src/components/Avatar/MarbleAvatar.tsx
@@ -395,7 +271,6 @@ var FunCustomAvatar = ({
         alignItems: "center",
         backgroundSize: "cover",
         borderRadius: "full",
-        color: "primaryText",
         display: "flex",
         justifyContent: "center",
         position: "absolute",
@@ -448,7 +323,6 @@ var EmojiAvatar = ({
       alignItems: "center",
       backgroundSize: "cover",
       borderRadius: "full",
-      color: "primaryText",
       display: "flex",
       justifyContent: "center",
       position: "absolute",
@@ -476,11 +350,11 @@ var EmojiAvatar = ({
 
 // src/providers/AvatarContext.ts
 var defaultAvatar = EmojiAvatar;
-var AvatarContext = createContext2(defaultAvatar);
+var AvatarContext = createContext(defaultAvatar);
 
 // src/components/Avatar/Avatar.tsx
 function Avatar({ address, imageUrl, loading, size }) {
-  const AvatarComponent = useContext2(AvatarContext);
+  const AvatarComponent = useContext(AvatarContext);
   return /* @__PURE__ */ React7.createElement(
     Box,
     {
@@ -516,22 +390,12 @@ function Avatar({ address, imageUrl, loading, size }) {
       },
       /* @__PURE__ */ React7.createElement(AvatarComponent, { address, ensImage: imageUrl, size })
     ),
-    loading && /* @__PURE__ */ React7.createElement(
-      Box,
-      {
-        color: "accentColor",
-        display: "flex",
-        height: "full",
-        position: "absolute",
-        width: "full"
-      },
-      /* @__PURE__ */ React7.createElement(SpinnerIcon, { size: "100%" })
-    )
+    loading && /* @__PURE__ */ React7.createElement(Box, { display: "flex", height: "full", position: "absolute", width: "full" }, /* @__PURE__ */ React7.createElement(SpinnerIcon, { size: "100%" }))
   );
 }
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React219, { useEffect as useEffect46, useState as useState67 } from "react";
+import React218, { useEffect as useEffect46, useState as useState66 } from "react";
 
 // src/css/touchableStyles.css.ts
 var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -559,18 +423,18 @@ import { useAccount as useAccount11 } from "wagmi";
 
 // src/providers/AuthenticationContext.tsx
 import React8, {
-  createContext as createContext3,
+  createContext as createContext2,
   useCallback,
-  useContext as useContext3,
+  useContext as useContext2,
   useEffect as useEffect2,
-  useMemo as useMemo2,
+  useMemo,
   useState as useState2
 } from "react";
 import { useAccount, useAccountEffect } from "wagmi";
 function createAuthenticationAdapter(adapter) {
   return adapter;
 }
-var AuthenticationContext = createContext3(
+var AuthenticationContext = createContext2(
   null
 );
 function FunkitConnectAuthenticationProvider({
@@ -616,7 +480,7 @@ function FunkitConnectAuthenticationProvider({
   return /* @__PURE__ */ React8.createElement(
     AuthenticationContext.Provider,
     {
-      value: useMemo2(
+      value: useMemo(
         () => enabled ? { adapter, status } : null,
         [enabled, adapter, status]
       )
@@ -625,7 +489,7 @@ function FunkitConnectAuthenticationProvider({
   );
 }
 function useAuthenticationStatus() {
-  const contextValue = useContext3(AuthenticationContext);
+  const contextValue = useContext2(AuthenticationContext);
   return contextValue?.status ?? null;
 }
 
@@ -635,13 +499,13 @@ import PrivyJS, {
   getUserEmbeddedWallet,
   LocalStorage
 } from "@privy-io/js-sdk-core";
-import React216, {
+import React215, {
   createContext as createContext18,
   useCallback as useCallback42,
   useContext as useContext18,
   useEffect as useEffect44,
   useMemo as useMemo39,
-  useState as useState64
+  useState as useState63
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
 
@@ -661,6 +525,55 @@ function formatAccountName(accountName, isEmail) {
   return `${prefixName.substring(0, leadingChars - 3)}...`;
 }
 
+// src/consts/funkit.ts
+import { CheckoutState } from "@funkit/api-base";
+import { FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS } from "@funkit/chains";
+var NATIVE_TOKEN = FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS;
+var FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
+var RESERVED_GROUP_NAME = "funkit-web2";
+var DEFAULT_FUNWALLET_INDEX = 0;
+var FUN_WORKER_EOA_ADDR = "0x1881ad6e231a14A8Be0f9AE6f9EFd8f3CFb09919";
+var FUN_ORG_NAME = "Fun.xyz";
+var FUN_TERMS_URL = "https://fun.xyz/terms";
+var FROM_PROGRESS_CHECKOUT_STATES = [
+  CheckoutState.FROM_UNFUNDED,
+  CheckoutState.FROM_FUNDED,
+  CheckoutState.FROM_POOLED
+];
+var TO_PROGRESS_CHECKOUT_STATES = [
+  CheckoutState.TO_UNFUNDED,
+  CheckoutState.TO_FUNDED,
+  CheckoutState.TO_POOLED,
+  CheckoutState.TO_READY,
+  CheckoutState.PENDING_RECEIVAL
+];
+var IN_PROGRESS_CHECKOUT_STATES = [
+  ...TO_PROGRESS_CHECKOUT_STATES,
+  ...FROM_PROGRESS_CHECKOUT_STATES
+];
+var TERMINAL_CHECKOUT_STATES = [
+  CheckoutState.EXPIRED,
+  CheckoutState.CHECKOUT_ERROR,
+  CheckoutState.COMPLETED,
+  CheckoutState.CANCELLED
+];
+var FunkitSocialLoginMethod = /* @__PURE__ */ ((FunkitSocialLoginMethod2) => {
+  FunkitSocialLoginMethod2["GOOGLE"] = "google_oauth" /* google_oauth */;
+  FunkitSocialLoginMethod2["TWITTER"] = "twitter_oauth" /* twitter_oauth */;
+  FunkitSocialLoginMethod2["APPLE"] = "apple_oauth" /* apple_oauth */;
+  FunkitSocialLoginMethod2["FARCASTER"] = "farcaster" /* farcaster */;
+  return FunkitSocialLoginMethod2;
+})(FunkitSocialLoginMethod || {});
+var PLACEHOLDER_FUNKIT_USER_INFO = {
+  id: "0x",
+  address: "0x",
+  name: "Guest",
+  nameTruncated: "Guest",
+  type: "unknown",
+  typeLabel: "",
+  iconSrc: ""
+};
+
 // src/utils/funLogger.ts
 import { datadogLogs } from "@datadog/browser-logs";
 import { DEV_API_KEY } from "@funkit/api-base";
@@ -839,6 +752,62 @@ import React9, {
 } from "react";
 import { useConfig } from "wagmi";
 
+// src/providers/FunkitConfigContext.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
+var DEFAULT_TEXT_CUSTOMIZATIONS = {
+  brokerageOrExchange: "Connect Exchange",
+  debitOrCredit: "Use card",
+  accountBalance: "Wallet",
+  selectAccount: "Select an exchange",
+  sourceMethodTitle: "Your source",
+  transferTokens: "Transfer Crypto",
+  confirmationScreen: {
+    payAmountLabel: "You send",
+    receiveAmountLabel: "You receive"
+  }
+};
+var DEFAULT_FUNKIT_CONFIG = {
+  apiKey: "",
+  appName: "",
+  allowBackgroundScroll: false,
+  textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
+  loginConfig: {
+    web2: false,
+    web3: false,
+    prioritizedLogin: "none",
+    web2SocialLogins: {
+      ["google_oauth" /* GOOGLE */]: false,
+      ["twitter_oauth" /* TWITTER */]: false,
+      ["apple_oauth" /* APPLE */]: false
+    }
+  }
+};
+var FunkitConfigContext = createContext3(
+  DEFAULT_FUNKIT_CONFIG
+);
+function useFunkitConfig() {
+  const originalFunkitConfig = useContext3(FunkitConfigContext);
+  const finalFunkitConfig = useMemo2(() => {
+    return {
+      ...DEFAULT_FUNKIT_CONFIG,
+      ...originalFunkitConfig,
+      loginConfig: {
+        ...DEFAULT_FUNKIT_CONFIG.loginConfig,
+        ...originalFunkitConfig.loginConfig,
+        web2SocialLogins: {
+          ...DEFAULT_FUNKIT_CONFIG.loginConfig.web2SocialLogins,
+          ...originalFunkitConfig.loginConfig.web2SocialLogins
+        }
+      },
+      textCustomizations: {
+        ...DEFAULT_FUNKIT_CONFIG.textCustomizations,
+        ...originalFunkitConfig.textCustomizations
+      }
+    };
+  }, [originalFunkitConfig]);
+  return finalFunkitConfig;
+}
+
 // src/providers/provideFunkitConnectChains.ts
 import { DYDX_MAINNET_CHAIN_ID } from "@funkit/chains";
 import { isNotNullish } from "@funkit/utils";
@@ -1053,13 +1022,13 @@ var useFunkitConnectChainsById = () => groupChainsById(useFunkitConnectChains())
 var useInitialChainId = () => useContext4(FunkitConnectChainContext).initialChainId;
 
 // src/providers/ModalContext.tsx
-import React215, {
+import React214, {
   createContext as createContext17,
   useCallback as useCallback41,
   useContext as useContext17,
   useEffect as useEffect43,
   useMemo as useMemo38,
-  useState as useState63
+  useState as useState62
 } from "react";
 import { useAccount as useAccount10, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
 
@@ -1090,6 +1059,22 @@ import React56, {
 import { createPortal } from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
 
+// src/consts/customers.ts
+import {
+  DYDX_API_KEY,
+  POLYMARKET_API_KEY,
+  VERTEX_API_KEY
+} from "@funkit/api-base";
+function isDydxCustomer(apiKey) {
+  return apiKey === DYDX_API_KEY;
+}
+function isPolymarketCustomer(apiKey) {
+  return apiKey === POLYMARKET_API_KEY;
+}
+function isVertexCustomer(apiKey) {
+  return apiKey === VERTEX_API_KEY;
+}
+
 // src/hooks/useAnimatedNavigation.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
 
@@ -5391,7 +5376,7 @@ var useActivityTraversal = () => {
 };
 
 // src/modals/ProfileDetails/ProfileDetails.tsx
-import React122, { useCallback as useCallback22, useState as useState31 } from "react";
+import React122, { useCallback as useCallback22, useState as useState30 } from "react";
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryContent.tsx
 import React109 from "react";
@@ -5607,6 +5592,9 @@ var useFunkitPostCheckoutInternal = (depositAddress) => {
   }
   useEffect11(() => {
     const setupCheckoutHistory = async () => {
+      if (depositAddress === "0x") {
+        return;
+      }
       try {
         setIsLoading(true);
         let checkoutHistory;
@@ -7247,10 +7235,11 @@ var SearchIcon = () => {
 };
 
 // src/components/FunInput/FunInput.css.ts
-var inputClass = "zue0i62 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1c3";
-var inputClassDisabled = "zue0i64 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1dl";
-var inputClassError = "zue0i66 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f18f";
-var numberInputResetStyle = "zue0i60";
+var baseWrapperStyles = "zue0i60";
+var inputClass = "zue0i63 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1c3";
+var inputClassDisabled = "zue0i65 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f1dl";
+var inputClassError = "zue0i67 _1rsrm2fe2 _1rsrm2fbt _1rsrm2fck _1rsrm2fdb _1rsrm2f18f";
+var numberInputResetStyle = "zue0i61";
 
 // src/components/FunInput/FunInput.tsx
 var DEFAULT_ICON_FONT_SIZE = "57px";
@@ -7316,7 +7305,8 @@ var FunInput = forwardRef2(
           borderStyle: "solid",
           fontWeight: "medium",
           fontSize: "13",
-          background: overrideBackground || "inputBackground"
+          background: overrideBackground || "inputBackground",
+          className: baseWrapperStyles
         },
         prefix && /* @__PURE__ */ React70.createElement(Box, { paddingLeft: "12", height: "max" }, prefix),
         prefixIcon === "SearchIcon" && /* @__PURE__ */ React70.createElement(
@@ -9771,6 +9761,11 @@ import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/FunInput/FunTextAreaInput.tsx
 import React102 from "react";
+
+// src/components/FunInput/FunTextAreaInput.css.ts
+var baseStyles = "_1q9ws650";
+
+// src/components/FunInput/FunTextAreaInput.tsx
 function FunTextAreaInput({
   placeholder,
   value,
@@ -9814,7 +9809,8 @@ function FunTextAreaInput({
       borderWidth: overrideBorderWidth ?? "1",
       borderStyle: "solid",
       padding: "4",
-      background: overrideBackground || "inputBackground"
+      background: overrideBackground || "inputBackground",
+      className: baseStyles
     },
     /* @__PURE__ */ React102.createElement(
       "textarea",
@@ -10451,7 +10447,7 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
 // src/modals/ProfileDetails/FunProfileViews/Home/index.tsx
 import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
 import clsx11 from "clsx";
-import React120, { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef11, useState as useState30 } from "react";
+import React120, { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef11, useState as useState29 } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { useAccount as useAccount6 } from "wagmi";
 
@@ -10625,6 +10621,7 @@ var RedRoundErrorCross = ({ size = 15 }) => {
 };
 
 // src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.css.ts
+var baseStyles2 = "ukct4t4";
 var homeCheckoutDisplayRowStyle = { defaultBorder: "ukct4t1 _1rsrm2f10f _1rsrm2fx7", defaultBackground: "_1rsrm2fnf _1rsrm2fjt", hoverBackground: "_1rsrm2fjg" };
 
 // src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.tsx
@@ -10644,7 +10641,7 @@ var HomeCheckoutDisplayRow = ({
   checkoutHistoryItem,
   onSelect
 }) => {
-  const { isProcessing, isCompleted, isError, isExpired, isFailed } = getCheckoutStateBooleans(checkoutHistoryItem.state);
+  const { isProcessing, isCompleted, isError, isExpired, isFailed } = getCheckoutStateBooleans(checkoutHistoryItem.state ?? {});
   const checkoutClientMetadata = checkoutHistoryItem.clientMetadata;
   const getStatusElement = () => {
     if (isCompleted) {
@@ -10699,6 +10696,7 @@ var HomeCheckoutDisplayRow = ({
     Box,
     {
       className: clsx10(
+        baseStyles2,
         homeCheckoutDisplayRowStyle.defaultBorder,
         homeCheckoutDisplayRowStyle.defaultBackground,
         !isMobile5() && homeCheckoutDisplayRowStyle.hoverBackground
@@ -10814,7 +10812,7 @@ import {
   formatCurrencyAndStringify as formatCurrencyAndStringify3,
   isMobile as isMobile6
 } from "@funkit/utils";
-import React116, { useState as useState28 } from "react";
+import React116 from "react";
 var TEXT_SIZE = "13";
 var TEXT_SKELETON_MARGIN_TOP2 = "2";
 var TEXT_SKELETON_MARGIN_BOTTOM2 = "3";
@@ -10829,18 +10827,19 @@ var HomeTokenBalanceDisplayRow = ({
     asset.tokenBalance,
     asset.decimals
   );
-  const [hasHover, setHasHover] = useState28(false);
   return /* @__PURE__ */ React116.createElement(
     Box,
     {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      onMouseEnter: () => setHasHover(true),
-      onMouseLeave: () => setHasHover(false),
       paddingX: PROFILE_SIDE_PADDING,
-      background: hasHover && !isMobile6() ? "offBackground" : void 0,
-      paddingY: ROW_PADDING_Y2
+      background: {
+        base: void 0,
+        hover: !isMobile6() ? "offBackground" : void 0
+      },
+      paddingY: ROW_PADDING_Y2,
+      className: baseStyles2
     },
     /* @__PURE__ */ React116.createElement(
       Box,
@@ -10918,7 +10917,7 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
 
 // src/modals/ProfileDetails/FunProfileViews/Home/ProfileTitleSection.tsx
 import React119 from "react";
-import { useCallback as useCallback21, useState as useState29 } from "react";
+import { useCallback as useCallback21, useState as useState28 } from "react";
 
 // src/components/Icons/LogoutIcon.tsx
 import React117 from "react";
@@ -10985,7 +10984,7 @@ var ProfileTitleSection = ({
   onClose
 }) => {
   const { apiKey } = useFunkitConfig();
-  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState29(false);
+  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState28(false);
   const collapseDisconnect = useCallback21(
     () => setIsDisconnectExpanded(false),
     []
@@ -11079,7 +11078,7 @@ function Home({
   defaultHomeTab = "assets" /* ASSETS */,
   animation
 }) {
-  const [selectedView, setSelectedView] = useState30(defaultHomeTab);
+  const [selectedView, setSelectedView] = useState29(defaultHomeTab);
   const checkoutsListRef = useRef11(null);
   const virtuosoParentRef = useRef11(null);
   const account = useAccount6();
@@ -11324,8 +11323,8 @@ var PADDING_TOP = 12;
 var PROFILE_DETAILS_DIALOG_CONTENT_ID = "profile-details-dialog-content";
 var HISTORY_BOTTOM_BAR_ID = "history-bottom-section";
 function ProfileDetails({ onClose, defaultTab }) {
-  const [view, setView] = useState31(0 /* HOME */);
-  const [selectedHomeTab, setSelectedHomeTab] = useState31(
+  const [view, setView] = useState30(0 /* HOME */);
+  const [selectedHomeTab, setSelectedHomeTab] = useState30(
     defaultTab ?? "assets" /* ASSETS */
   );
   const {
@@ -11339,7 +11338,7 @@ function ProfileDetails({ onClose, defaultTab }) {
     selectedPurchaseId || "0x",
     DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE
   );
-  const [singleActivityPage, setSingleActivityPage] = useState31(
+  const [singleActivityPage, setSingleActivityPage] = useState30(
     selectedPurchaseInitView ?? "detail" /* DETAIL */
   );
   const resetView = useCallback22(() => {
@@ -11782,7 +11781,7 @@ function ChainModal({ onClose, open }) {
 }
 
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
-import React213 from "react";
+import React212 from "react";
 
 // src/components/DydxSwitchModalTab/DydxSwitchModalTab.tsx
 import React130, { useCallback as useCallback23 } from "react";
@@ -11930,7 +11929,7 @@ import React132, {
   useContext as useContext14,
   useEffect as useEffect25,
   useMemo as useMemo17,
-  useState as useState32
+  useState as useState31
 } from "react";
 import { FlagKey as FlagKey8 } from "@funkit/utils";
 
@@ -11941,7 +11940,7 @@ var useIsFunkitSandboxMode = () => useContext13(FunkitSandboxContext);
 
 // src/providers/FunkitMoonpayProvider.tsx
 var LazyMoonPayProvider = (props) => {
-  const [MoonPayProvider, setMoonPayProvider] = useState32(null);
+  const [MoonPayProvider, setMoonPayProvider] = useState31(null);
   useEffect25(() => {
     const loadMoonPayProvider = async () => {
       const module = await import("@moonpay/moonpay-react");
@@ -12026,7 +12025,7 @@ function useFunkitUserIp() {
 
 // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
 import clsx15 from "clsx";
-import React139, { useEffect as useEffect27, useMemo as useMemo18, useState as useState34 } from "react";
+import React139, { useEffect as useEffect27, useMemo as useMemo18, useState as useState33 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
 import React134 from "react";
@@ -12179,7 +12178,7 @@ import React138 from "react";
 
 // src/components/FunNotificationBanner/FunNotificationBanner.tsx
 import { AnimatePresence, motion as motion2 } from "motion/react";
-import React136, { useState as useState33 } from "react";
+import React136, { useState as useState32 } from "react";
 import clsx14 from "clsx";
 
 // src/components/FunNotificationBanner/FunNotificationBanner.css.ts
@@ -12727,8 +12726,8 @@ var FunNotificationBanner = ({
   children,
   onClosed
 }) => {
-  const [showMore, setShowMore] = useState33(false);
-  const [isOpen, setIsOpen] = useState33(true);
+  const [showMore, setShowMore] = useState32(false);
+  const [isOpen, setIsOpen] = useState32(true);
   const closeNotification = () => {
     setIsOpen(false);
     onClosed?.();
@@ -12985,9 +12984,9 @@ var CheckoutNotifications = ({
   onHelp,
   isVisible
 }) => {
-  const [isExpanded, setIsExpanded] = useState34(false);
-  const [initialCheckouts, setInitialCheckouts] = useState34();
-  const [closedNotifications, setClosedNotifications] = useState34([]);
+  const [isExpanded, setIsExpanded] = useState33(false);
+  const [initialCheckouts, setInitialCheckouts] = useState33();
+  const [closedNotifications, setClosedNotifications] = useState33([]);
   const { data: checkouts } = useRecentCheckouts({ isVisible });
   useEffect27(() => {
     if (initialCheckouts || !checkouts) return;
@@ -13043,7 +13042,7 @@ var getUpdatedCheckouts = (checkouts, initialCheckouts) => {
 import {
   useCallback as useCallback40,
   useRef as useRef20,
-  useState as useState62
+  useState as useState61
 } from "react";
 
 // src/hooks/useCheckoutQuoteNotification.ts
@@ -13056,7 +13055,7 @@ import React140, {
   useCallback as useCallback25,
   useContext as useContext15,
   useEffect as useEffect28,
-  useState as useState35
+  useState as useState34
 } from "react";
 import { useConfig as useConfig3 } from "wagmi";
 
@@ -13461,10 +13460,10 @@ function FunkitQuoteProvider({ children }) {
   const wagmiConfig = useConfig3();
   const { walletAddress, logoutSymbol, loginType, userInfo } = useGeneralWallet();
   const enableFrogProxyServer = useFlag(FlagKey10.EnableFrogProxyServer);
-  const [latestQuote, setLatestQuote] = useState35(null);
-  const [isQuoting, setIsQuoting] = useState35(false);
-  const [quoteStepMessage, setQuoteStepMessage] = useState35("");
-  const [quoteErrorMessage, setQuoteErrorMessage] = useState35("");
+  const [latestQuote, setLatestQuote] = useState34(null);
+  const [isQuoting, setIsQuoting] = useState34(false);
+  const [quoteStepMessage, setQuoteStepMessage] = useState34("");
+  const [quoteErrorMessage, setQuoteErrorMessage] = useState34("");
   useEffect28(() => {
     if (isNotNullish8(logoutSymbol)) {
       setLatestQuote(null);
@@ -13761,7 +13760,7 @@ function CheckoutHelp({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/ConfirmationStep.tsx
-import React157, { useEffect as useEffect34, useMemo as useMemo26, useState as useState47 } from "react";
+import React157, { useEffect as useEffect34, useMemo as useMemo26, useState as useState46 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/providers/UserPresenceContext.tsx
@@ -13769,14 +13768,14 @@ import React143, { useEffect as useEffect29 } from "react";
 import {
   createContext as createContext16,
   useContext as useContext16,
-  useState as useState36
+  useState as useState35
 } from "react";
 var DELAY = 5 * 60 * 1e3;
 var UserPresenceContext = createContext16({
   isAway: false
 });
 var UserPresenceProvider = ({ children }) => {
-  const [isAway, setIsAway] = useState36(false);
+  const [isAway, setIsAway] = useState35(false);
   useEffect29(() => {
     let timeoutId;
     const handleVisibilityChange = () => {
@@ -13805,7 +13804,7 @@ import React146 from "react";
 import { FlagKey as FlagKey11, safeParseJson as safeParseJson2 } from "@funkit/utils";
 
 // src/components/FunInfoBanner/EphemeralInfoBanner.tsx
-import React145, { useState as useState37 } from "react";
+import React145, { useState as useState36 } from "react";
 
 // src/components/FunInfoBanner/InfoBanner.tsx
 import React144 from "react";
@@ -13994,7 +13993,7 @@ var EphemeralInfoBanner = ({
   expireAtMs,
   ...props
 }) => {
-  const [isHidden, setIsHidden] = useState37(Date.now() > expireAtMs);
+  const [isHidden, setIsHidden] = useState36(Date.now() > expireAtMs);
   useInterval(() => setIsHidden(Date.now() > expireAtMs), CHECKING_INTERVAL);
   if (isHidden) return null;
   return /* @__PURE__ */ React145.createElement(InfoBanner, { ...props });
@@ -14019,7 +14018,7 @@ import {
   formatDynamicFeeUsd,
   noop as noop5
 } from "@funkit/utils";
-import React149, { useMemo as useMemo20, useState as useState39 } from "react";
+import React149, { useMemo as useMemo20, useState as useState38 } from "react";
 import clsx17 from "clsx";
 import { motion as motion4, useAnimationControls } from "motion/react";
 
@@ -14028,7 +14027,7 @@ import React147, {
   useCallback as useCallback27,
   useEffect as useEffect30,
   useRef as useRef13,
-  useState as useState38
+  useState as useState37
 } from "react";
 import clsx16 from "clsx";
 import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
@@ -14050,9 +14049,9 @@ var FunTooltip = ({
   enableDynamicPositioning = false,
   maxWidth = 180
 }) => {
-  const [isDisplayed, setIsDisplayed] = useState38(false);
-  const [isSafeToRenderInCenter, setIsSafeToRenderInCenter] = useState38(false);
-  const [isSafeToRenderInRight, setIsSafeToRenderInRight] = useState38(false);
+  const [isDisplayed, setIsDisplayed] = useState37(false);
+  const [isSafeToRenderInCenter, setIsSafeToRenderInCenter] = useState37(false);
+  const [isSafeToRenderInRight, setIsSafeToRenderInRight] = useState37(false);
   const delayRef = useRef13();
   const tooltipRef = useRef13(null);
   const show = useCallback27(() => {
@@ -14150,7 +14149,7 @@ var GasIcon = ({ size = 12 }) => /* @__PURE__ */ React148.createElement(
 );
 
 // src/components/FunTransactionSummary/PaymentFeesSummary.css.ts
-var baseStyles = "_1rsrm2f1cf";
+var baseStyles3 = "_1rsrm2f1cf";
 var expandableStyles = "vkwve32";
 var feeLineHideStyles = "vkwve34";
 var feeLineShowStyles = "vkwve33";
@@ -14245,7 +14244,7 @@ function PaymentFeesSummary({
 }) {
   const { apiKey } = useFunkitConfig();
   const controls = useAnimationControls();
-  const [isExpanded, setIsExpanded] = useState39(false);
+  const [isExpanded, setIsExpanded] = useState38(false);
   const toggleIsExpanded = async () => {
     if (isExpanded) {
       controls.set("hiddenOverflow");
@@ -14277,7 +14276,7 @@ function PaymentFeesSummary({
         }
       },
       style: { cursor: isLoading ? "default" : "pointer" },
-      className: clsx17(baseStyles, isExpandable && expandableStyles)
+      className: clsx17(baseStyles3, isExpandable && expandableStyles)
     },
     /* @__PURE__ */ React149.createElement(
       FeeLineItem,
@@ -14379,7 +14378,7 @@ import NumberFlow from "@number-flow/react";
 import { motion as motion5 } from "motion/react";
 import React150, { useMemo as useMemo21 } from "react";
 
-// src/consts/animations.ts
+// src/consts/design.ts
 var mapFontLineHeightToNumberFlowHeight = {
   "14px": "18px",
   "20px": "21px",
@@ -14670,14 +14669,14 @@ var DisclaimerText = ({
     finalConvertedAssetName
   );
   const showCardDisclaimer = isCardPayment && cardDisclaimer;
-  return showDydxDisclaimer ? /* @__PURE__ */ React153.createElement(Text, { size: "10", weight: "regular" }, showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to ", FUN_ORG_NAME, "'s", " ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: "https://fun.xyz/terms", inline: true, text: "terms" }), " and this site's ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: "https://dydx.trade/terms", inline: true, text: "terms" }), " and ", /* @__PURE__ */ React153.createElement(
+  return showDydxDisclaimer ? /* @__PURE__ */ React153.createElement(Text, { size: "10", weight: "regular" }, showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to ", FUN_ORG_NAME, "'s", " ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: FUN_TERMS_URL, inline: true, text: "terms" }), " and this site's ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: "https://dydx.trade/terms", inline: true, text: "terms" }), " and ", /* @__PURE__ */ React153.createElement(
     FunLinkButton,
     {
       href: "https://dydx.trade/privacy",
       inline: true,
       text: "privacy policy"
     }
-  ), ".") : /* @__PURE__ */ React153.createElement(Text, { size: "10", weight: "regular" }, isVertex && vertexText ? `${vertexText} ` : showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to our", " ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: "https://fun.xyz/terms", inline: true, text: "terms" }), ".");
+  ), ".") : /* @__PURE__ */ React153.createElement(Text, { size: "10", weight: "regular" }, isVertex && vertexText ? `${vertexText} ` : showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to our", " ", /* @__PURE__ */ React153.createElement(FunLinkButton, { href: FUN_TERMS_URL, inline: true, text: "terms" }), ".");
 };
 function useCardDisclaimer(checkoutItem, finalConvertedAssetName) {
   const cardDisclaimer = useMemo22(() => {
@@ -14731,12 +14730,12 @@ function useVertextDisclaimer(checkoutItem, isCardPayment) {
 
 // src/modals/CheckoutModal/ConfirmationStep/useCheckoutConfirmation.ts
 import { ClientError as ClientError2 } from "@funkit/utils";
-import { useState as useState41 } from "react";
+import { useState as useState40 } from "react";
 
 // src/hooks/useAutoClearState.ts
-import { useCallback as useCallback28, useEffect as useEffect31, useRef as useRef14, useState as useState40 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect31, useRef as useRef14, useState as useState39 } from "react";
 function useAutoClearState(initialValue = null) {
-  const [state, setState] = useState40(initialValue);
+  const [state, setState] = useState39(initialValue);
   const timeoutRef = useRef14();
   useEffect31(() => {
     return () => {
@@ -14825,8 +14824,8 @@ function useCheckoutConfirmation({
   const { loginType, funWallet, walletAddress } = useGeneralWallet();
   const { isCustomRecipientBlacklisted, isWalletBlacklisted } = useIsBlacklisted(walletAddress, customRecipient);
   const [error, setError] = useAutoClearState();
-  const [isLoading, setIsLoading] = useState41(false);
-  const [step, setStep] = useState41(null);
+  const [isLoading, setIsLoading] = useState40(false);
+  const [step, setStep] = useState40(null);
   const handleCheckoutConfirmation = async () => {
     try {
       if (!checkoutItem?.selectedPaymentMethodInfo || !latestQuote) {
@@ -14884,10 +14883,10 @@ function useCheckoutConfirmation({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useCheckoutQuote.ts
-import { useState as useState43 } from "react";
+import { useState as useState42 } from "react";
 
 // src/modals/CheckoutModal/useSourceAssetConfirm.tsx
-import { useEffect as useEffect32, useState as useState42 } from "react";
+import { useEffect as useEffect32, useState as useState41 } from "react";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
 import { useCallback as useCallback29 } from "react";
@@ -15158,7 +15157,7 @@ function useSourceAssetConfirm(setPreloadedQuoteData) {
     selectedPaymentMethodInfo?.paymentMethod === "brokerage" /* BROKERAGE */ ? selectedPaymentMethodInfo.meta.brokerType : void 0
   );
   const { loginType } = useGeneralWallet();
-  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState42(false);
+  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState41(false);
   const onSourceAssetConfirmed = useEffectEvent(
     async (preloadQuoteData) => {
       try {
@@ -15208,7 +15207,7 @@ function useSourceAssetConfirm(setPreloadedQuoteData) {
   };
 }
 function useHackyTriggerWorkaroundReactDevBrainExplode() {
-  const [trigger, setTriggerImpl] = useState42(0);
+  const [trigger, setTriggerImpl] = useState41(0);
   const setTrigger = useEffectEvent(() => setTriggerImpl((i) => i % 100 + 1));
   return [trigger, setTrigger];
 }
@@ -15239,7 +15238,7 @@ function useCheckoutQuote({
   const { quoteNotification } = useCheckoutQuoteNotification();
   const { messageType, quoteMessage } = quoteNotification;
   const minTargetAssetAmount = checkoutItem?.initSettings.config.targetAssetMinAmount ?? 0;
-  const [retriesLeft, setRetriesLeft] = useState43(null);
+  const [retriesLeft, setRetriesLeft] = useState42(null);
   const {
     // TODO: awkward code/naming about 'confirming assets'
     isSourceAssetConfirming: isQuoting,
@@ -15274,7 +15273,7 @@ function useCheckoutQuote({
 // src/modals/CheckoutModal/ConfirmationStep/usePostCheckout.ts
 import { meshPreviewTransfer as meshPreviewTransfer2, meshPreviewTransferProxy as meshPreviewTransferProxy2 } from "@funkit/api-base";
 import { ClientError as ClientError3, FlagKey as FlagKey14, roundUpToXDecimalPlaces as roundUpToXDecimalPlaces3 } from "@funkit/utils";
-import { useState as useState44 } from "react";
+import { useState as useState43 } from "react";
 
 // src/modals/CheckoutModal/ConfirmationStep/useAccountBalanceTransfer.ts
 import { getPaymasterDataForCheckoutSponsoredTransfer } from "@funkit/api-base";
@@ -15510,8 +15509,8 @@ function usePostCheckout({
   const { checkoutItem, updateSelectedPaymentMethodInfo } = useCheckoutContext();
   const { latestQuote } = useQuoteContext();
   const [error, setError] = useAutoClearState();
-  const [isLoading, setIsLoading] = useState44(false);
-  const [step, setStep] = useState44(null);
+  const [isLoading, setIsLoading] = useState43(false);
+  const [step, setStep] = useState43(null);
   const enableFrogProxyServer = useFlag(FlagKey14.EnableFrogProxyServer);
   const handleMeshPostCheckout = async (depositAddress) => {
     const paymentMethodInfo = checkoutItem?.selectedPaymentMethodInfo;
@@ -15614,17 +15613,17 @@ function usePostCheckout({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useQuoteRefresh.ts
-import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo25, useRef as useRef15, useState as useState46 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo25, useRef as useRef15, useState as useState45 } from "react";
 
 // src/hooks/useCountdown.tsx
 import React156 from "react";
-import { useCallback as useCallback31, useState as useState45 } from "react";
+import { useCallback as useCallback31, useState as useState44 } from "react";
 function useCountdown({
   onCountdownEnded,
   ...props
 }) {
-  const [countdownKey, setCountdownKey] = useState45(0);
-  const [isLastSecond, setIsLastSecond] = useState45(false);
+  const [countdownKey, setCountdownKey] = useState44(0);
+  const [isLastSecond, setIsLastSecond] = useState44(false);
   const restartCountdown = useCallback31(() => {
     setIsLastSecond(false);
     setCountdownKey((key) => key + 1);
@@ -15660,7 +15659,7 @@ function useQuoteRefresh({
   const { setCheckoutQuote, isQuoting, quoteErrorMessage, quoteStepMessage } = useQuoteContext();
   const preloadedQuoteRef = useRef15();
   const quoteCallbackRef = useRef15();
-  const [isPendingRefresh, setIsPendingRefresh] = useState46(false);
+  const [isPendingRefresh, setIsPendingRefresh] = useState45(false);
   const {
     isSourceAssetConfirming,
     onSourceAssetConfirmed,
@@ -15829,8 +15828,8 @@ function ConfirmationStep({
     onSuccess: handlePostCheckout
   });
   const { unlinkBrokerage } = useFunkitMesh();
-  const [suggestedAssetAmount, setSuggestedAssetAmount] = useState47();
-  const [suggestionTried, setSuggestionTried] = useState47(false);
+  const [suggestedAssetAmount, setSuggestedAssetAmount] = useState46();
+  const [suggestionTried, setSuggestionTried] = useState46(false);
   const {
     triggerNewQuote,
     isQuoting: isInitialQuoting,
@@ -16017,7 +16016,7 @@ function ConfirmationStep({
 }
 
 // src/modals/CheckoutModal/ConnectExchange.tsx
-import React163, { useCallback as useCallback33, useState as useState48 } from "react";
+import React163, { useCallback as useCallback33, useState as useState47 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/FunGuarantees/FunGuarantees.tsx
@@ -16161,8 +16160,8 @@ function ConnectExchange({
   const { brokerType } = modalState;
   const { appName } = useFunkitConfig();
   const { updateSelectedPaymentMethodInfo } = useCheckoutContext();
-  const [meshPreError, setMeshPreError] = useState48("");
-  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState48(false);
+  const [meshPreError, setMeshPreError] = useState47("");
+  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState47(false);
   const icon = getExchangeIcon(brokerType, 48);
   const exchangeName = getExchangeName(brokerType);
   const connectToBrokerage = useMeshConnect({
@@ -16393,11 +16392,11 @@ var SwitchIcon = () => {
 };
 
 // src/hooks/useDynamicFont.ts
-import { useCallback as useCallback34, useEffect as useEffect35, useRef as useRef16, useState as useState49 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect35, useRef as useRef16, useState as useState48 } from "react";
 var SIZE_STEP = 1;
 var ALLOWANCE = 20;
 var useDynamicFont = (inputValue, max, min = 16) => {
-  const [fontSize, setFontSize] = useState49(max);
+  const [fontSize, setFontSize] = useState48(max);
   const inputRef = useRef16(null);
   const canvasRef = useRef16(document.createElement("canvas"));
   useEffect35(() => {
@@ -17689,7 +17688,7 @@ import {
   meshExecuteTransferProxy
 } from "@funkit/api-base";
 import { ClientError as ClientError4, FlagKey as FlagKey18, formatAddress as formatAddress6 } from "@funkit/utils";
-import React184, { useMemo as useMemo31, useState as useState50 } from "react";
+import React184, { useMemo as useMemo31, useState as useState49 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/components/CopyAddress/CopyAddressButton.tsx
@@ -17903,12 +17902,12 @@ function MeshVerification({
   const transferToAddress = previewResult?.toAddress;
   const { apiKey } = useFunkitConfig();
   const { unlinkBrokerage } = useFunkitMesh();
-  const [twoFactorCode, setTwoFactorCode] = useState50("");
-  const [isSecond2fa, setIsSecond2fa] = useState50(false);
-  const [screen, setScreen] = useState50(0 /* INITIAL */);
-  const [isExecuting, setIsExecuting] = useState50(false);
-  const [executionError, setExecutionError] = useState50("");
-  const [executionContent, setExecutionContent] = useState50(null);
+  const [twoFactorCode, setTwoFactorCode] = useState49("");
+  const [isSecond2fa, setIsSecond2fa] = useState49(false);
+  const [screen, setScreen] = useState49(0 /* INITIAL */);
+  const [isExecuting, setIsExecuting] = useState49(false);
+  const [executionError, setExecutionError] = useState49("");
+  const [executionContent, setExecutionContent] = useState49(null);
   const executionStatus = executionContent?.status;
   const { checkoutItem } = useCheckoutContext();
   const bottomSectionRef = useBottomSectionRef();
@@ -18055,7 +18054,6 @@ function MeshVerification({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        color: "primaryText",
         gap: "10"
       },
       /* @__PURE__ */ React184.createElement(Text, { size: "14", color: "secondaryText" }, "Executing brokerage transfer"),
@@ -18168,7 +18166,7 @@ var VerificationPopup = ({
 };
 
 // src/modals/CheckoutModal/MoonpaySetup.tsx
-import React186, { useCallback as useCallback36, useMemo as useMemo33, useState as useState52 } from "react";
+import React186, { useCallback as useCallback36, useMemo as useMemo33, useState as useState51 } from "react";
 
 // src/components/FunPayments/FunPaymentMoonpayType.css.ts
 var mpClass = "_1kmpeyf0";
@@ -18177,9 +18175,9 @@ var stretchStyle = "_1kmpeyf1";
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/api-base";
 import { colorToHex } from "@funkit/utils";
-import React185, { Fragment as Fragment3, useEffect as useEffect39, useMemo as useMemo32, useState as useState51 } from "react";
+import React185, { Fragment as Fragment3, useEffect as useEffect39, useMemo as useMemo32, useState as useState50 } from "react";
 var LazyMoonPayBuyWidget = (props) => {
-  const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState51(null);
+  const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState50(null);
   useEffect39(() => {
     const loadMoonPayBuyWidget = async () => {
       const module = await import("@moonpay/moonpay-react");
@@ -18279,8 +18277,8 @@ function MoonpaySetup({
   onNext
 }) {
   const { paymentAddress, token, tokenChainId, depositAmount } = modalState;
-  const [isSupportedRegion, setIsSupportedRegion] = useState52(true);
-  const [isContinueEnabled, setIsContinueEnabled] = useState52(false);
+  const [isSupportedRegion, setIsSupportedRegion] = useState51(true);
+  const [isContinueEnabled, setIsContinueEnabled] = useState51(false);
   const handleOnCompleted = useCallback36(() => {
     onNext({
       depositAddress: paymentAddress
@@ -18317,7 +18315,7 @@ function MoonpaySetup({
 // src/modals/CheckoutModal/SelectAsset.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST } from "@funkit/chains";
 import { formatCurrencyAndStringify as formatCurrencyAndStringify9 } from "@funkit/utils";
-import React197, { useEffect as useEffect40, useMemo as useMemo36, useState as useState55 } from "react";
+import React197, { useEffect as useEffect40, useMemo as useMemo36, useState as useState54 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Dropdown/ChainDropdown.tsx
@@ -18326,7 +18324,7 @@ import React192 from "react";
 // src/components/Dropdown/BaseDropdown.tsx
 import { isMobile as isMobile13, noop as noop6 } from "@funkit/utils";
 import { AnimatePresence as AnimatePresence3, motion as motion6 } from "motion/react";
-import React190, { useCallback as useCallback37, useMemo as useMemo34, useState as useState53 } from "react";
+import React190, { useCallback as useCallback37, useMemo as useMemo34, useState as useState52 } from "react";
 
 // src/components/FunNoResults/FunNoResults.tsx
 import React188 from "react";
@@ -18403,6 +18401,9 @@ var FunNoResults = ({ children }) => {
 // src/components/Dropdown/BaseActiveDropdownItem.tsx
 import React189 from "react";
 
+// src/components/Dropdown/BaseActiveDropdownItem.css.ts
+var baseStyles4 = "_1dewiqw0";
+
 // src/components/Dropdown/BaseDropdown.css.ts
 var BORDER_RADIUS = "connectButton";
 var baseDropdownItemWrapperStyles = "_1nns6ys1 _1rsrm2fj";
@@ -18437,7 +18438,8 @@ function BaseActiveDropdownItem({
       borderRadius: BORDER_RADIUS,
       borderStyle: "solid",
       paddingY: size === "compact" ? "2" : "8",
-      paddingX: size === "compact" ? "4" : HORIZONTAL_OUTER_PADDING_X
+      paddingX: size === "compact" ? "4" : HORIZONTAL_OUTER_PADDING_X,
+      className: baseStyles4
     },
     /* @__PURE__ */ React189.createElement(
       Box,
@@ -18503,8 +18505,8 @@ function BaseDropdown({
   size = "regular"
 }) {
   const isMobileDevice = isMobile13();
-  const [isOpened, setIsOpened] = useState53();
-  const [searchInput, setSearchInput] = useState53("");
+  const [isOpened, setIsOpened] = useState52();
+  const [searchInput, setSearchInput] = useState52("");
   const selectedOption = options.find((option) => option.value === value);
   const handleSearch = (event) => {
     setSearchInput(event.target.value);
@@ -18809,7 +18811,7 @@ var ChainDropdown = ({
 };
 
 // src/components/Dropdown/ReceiveTokenDropdown.tsx
-import React193, { useState as useState54 } from "react";
+import React193, { useState as useState53 } from "react";
 var TOKEN_ICON_SIZE = 16;
 var getTokenIconUrl = (symbol) => {
   return ASSET_LOGO_SRCS[symbol.toUpperCase()];
@@ -18831,7 +18833,7 @@ var ReceiveTokenDropdown = ({
 }) => {
   const allTokens = Array.from(new Set(Object.values(tokens).flat()));
   const initialSelectedToken = () => tokens.find((token) => token.tokenSymbol === defaultSelectedToken)?.tokenSymbol ?? tokens[0].tokenSymbol;
-  const [selectedSymbol, setSelectedSymbol] = useState54(initialSelectedToken);
+  const [selectedSymbol, setSelectedSymbol] = useState53(initialSelectedToken);
   const activeTokenIconUrl = getTokenIconUrl(selectedSymbol);
   const tokenBadgeText = tokens.find(
     (token) => token.tokenSymbol === selectedSymbol
@@ -19547,7 +19549,7 @@ var SourcePaymentMethodItem = ({
     animate(
       ".framer-spmi-animated-logos-wrapper",
       {
-        background: "transparent"
+        background: "rgba(0, 0, 0, 0)"
       },
       {
         duration: 0.2
@@ -19838,12 +19840,12 @@ function MeshOrAccountSelectAsset({
   accountHoldings,
   fetchHoldingsError
 }) {
-  const [selectedChainId, setSelectedChainId] = useState55();
+  const [selectedChainId, setSelectedChainId] = useState54();
   const { apiKey } = useFunkitConfig();
   const { checkoutItem, updateSourceAsset, updateTargetAsset } = useCheckoutContext();
-  const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState55("");
+  const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState54("");
   const candidates = checkoutItem?.initSettings.config.dynamicTargetAssetCandidates;
-  const [userSelectedTargetAssetVertex, setUserSelectedTargetAssetVertex] = useState55(isVertexCustomer(apiKey) && candidates ? candidates[0] : null);
+  const [userSelectedTargetAssetVertex, setUserSelectedTargetAssetVertex] = useState54(isVertexCustomer(apiKey) && candidates ? candidates[0] : null);
   const defaultTokenSymbols = useMemo36(() => {
     if (!checkoutItem) {
       return [];
@@ -20187,7 +20189,7 @@ function SelectAsset({
 }
 
 // src/modals/CheckoutModal/SelectBrokerage.tsx
-import React199, { useState as useState56 } from "react";
+import React199, { useState as useState55 } from "react";
 
 // src/components/FunSelectBrokerage/FunSelectBrokerage.tsx
 import clsx21 from "clsx";
@@ -20256,8 +20258,8 @@ function SelectBrokerage({
   const { updateSelectedPaymentMethodInfo } = useCheckoutContext();
   const { getActiveConnection } = useFunkitMesh();
   const { options } = useMeshExchanges({ iconSize: 20 });
-  const [filteredOptions, setFilteredOptions] = useState56(options);
-  const [selectedExchange, setSelectedExchange] = useState56();
+  const [filteredOptions, setFilteredOptions] = useState55(options);
+  const [selectedExchange, setSelectedExchange] = useState55();
   const handleSearch = (event) => {
     setSelectedExchange(void 0);
     const query = event.target.value;
@@ -20306,7 +20308,7 @@ function SelectBrokerage({
 }
 
 // src/modals/CheckoutModal/SourceChange/SourceChange.tsx
-import React201, { useEffect as useEffect42, useState as useState58 } from "react";
+import React201, { useEffect as useEffect42, useState as useState57 } from "react";
 
 // src/components/FunPayments/FunPaymentMethods.tsx
 import {
@@ -21431,7 +21433,7 @@ var usePaymentSources = (paymentMethodInfo, targetChainId) => {
 // src/modals/CheckoutModal/SourceChange/useUpdateSourceAssetForCard.ts
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO11, dydxChain as dydxChain3 } from "@funkit/chains";
 import { getTokenAddressBySymbolAndChainId as getTokenAddressBySymbolAndChainId2 } from "@funkit/core";
-import { useCallback as useCallback39, useState as useState57 } from "react";
+import { useCallback as useCallback39, useState as useState56 } from "react";
 import { mainnet as mainnet7, mantle as mantle2, zkSync as zkSync3 } from "viem/chains";
 var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
   if (!checkoutItem?.initSettings.config.targetChain) {
@@ -21486,7 +21488,7 @@ var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
 function useUpdateCardSourceAsset() {
   const { checkoutItem, updateSourceAsset } = useCheckoutContext();
   const { userIpInfo } = useFunkitUserIp();
-  const [isUpdating, setIsUpdating] = useState57(false);
+  const [isUpdating, setIsUpdating] = useState56(false);
   const onSelectCard = useCallback39(async () => {
     setIsUpdating(true);
     try {
@@ -21588,8 +21590,8 @@ function SourceChange({
 }) {
   const { paymentMethodInfo, targetChainId } = modalState;
   const { updateSelectedPaymentMethodInfo, checkoutItem } = useCheckoutContext();
-  const [connectedSource, setConnectedSource] = useState58(paymentMethodInfo);
-  const [newSource, setNewSource] = useState58();
+  const [connectedSource, setConnectedSource] = useState57(paymentMethodInfo);
+  const [newSource, setNewSource] = useState57();
   useEffect42(() => {
     if (!paymentMethodInfo) return;
     updateSelectedPaymentMethodInfo(paymentMethodInfo);
@@ -21688,7 +21690,7 @@ function SourceChange({
 // src/modals/CheckoutModal/TransferToken/TransferToken.tsx
 import { FlagKey as FlagKey22 } from "@funkit/utils";
 import { motion as motion8, useAnimationControls as useAnimationControls3 } from "motion/react";
-import React212, { useRef as useRef19, useState as useState61 } from "react";
+import React211, { useRef as useRef19, useState as useState60 } from "react";
 import { polygon as polygon6 } from "viem/chains";
 
 // src/components/CopyAddress/CopyInputDisplayedAddress.tsx
@@ -21747,7 +21749,7 @@ function CopyInputDisplayedAddress({
 }
 
 // src/components/Dropdown/TokenDropdown.tsx
-import React204, { useState as useState59 } from "react";
+import React204, { useState as useState58 } from "react";
 var TOKEN_ICON_SIZE2 = 16;
 var getTokenIconUrl2 = (symbol) => {
   return ASSET_LOGO_SRCS[symbol.toUpperCase()];
@@ -21760,7 +21762,7 @@ var TokenDropdown = ({
 }) => {
   const enabledTokens = assets[selectedChainId];
   const allTokens = Array.from(new Set(Object.values(assets).flat()));
-  const [selectedSymbol, setSelectedSymbol] = useState59(
+  const [selectedSymbol, setSelectedSymbol] = useState58(
     defaultSelectedToken ?? enabledTokens[0]
   );
   const activeTokenIconUrl = getTokenIconUrl2(selectedSymbol);
@@ -21928,8 +21930,8 @@ import {
   formatSecondsToReadableForm as formatSecondsToReadableForm4
 } from "@funkit/utils";
 import { motion as motion7, useAnimationControls as useAnimationControls2 } from "motion/react";
-import React211 from "react";
-import { useState as useState60 } from "react";
+import React210 from "react";
+import { useState as useState59 } from "react";
 
 // src/components/Icons/New/DollarIcon.tsx
 import React207 from "react";
@@ -21979,9 +21981,9 @@ var FileIcon = () => {
   );
 };
 
-// src/components/Icons/New/MessageIcon.tsx
+// src/components/Icons/New/SpeedometerIcon.tsx
 import React209 from "react";
-var MessageIcon = () => {
+var SpeedometerIcon = () => {
   return /* @__PURE__ */ React209.createElement(
     "svg",
     {
@@ -21992,30 +21994,6 @@ var MessageIcon = () => {
       xmlns: "http://www.w3.org/2000/svg"
     },
     /* @__PURE__ */ React209.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6C11 8.76142 8.76142 11 6 11C5.33584 11 4.70075 10.8702 4.11961 10.6342C4.06711 10.6129 4.03681 10.6006 4.01443 10.5922C4.01179 10.5912 4.00949 10.5904 4.00752 10.5897L4.00515 10.59C3.98669 10.5925 3.96154 10.5966 3.91352 10.6046L2.12024 10.9035C2.03993 10.9169 1.95006 10.9319 1.87202 10.9378C1.78693 10.9443 1.65156 10.9465 1.5085 10.8851C1.33165 10.8093 1.19072 10.6684 1.11486 10.4915C1.0535 10.3484 1.05574 10.2131 1.06216 10.128C1.06805 10.0499 1.08306 9.96009 1.09647 9.87978C1.09728 9.87496 1.09808 9.87017 1.09887 9.86542L1.39536 8.08648C1.40336 8.03846 1.4075 8.01331 1.41 7.99485L1.41032 7.99247C1.4096 7.99051 1.40876 7.98821 1.40776 7.98557C1.39936 7.96319 1.3871 7.93289 1.36578 7.88039C1.12976 7.29925 1 6.66416 1 6Z",
-        fill: "currentColor"
-      }
-    )
-  );
-};
-
-// src/components/Icons/New/SpeedometerIcon.tsx
-import React210 from "react";
-var SpeedometerIcon = () => {
-  return /* @__PURE__ */ React210.createElement(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React210.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -22036,8 +22014,8 @@ var TransferTokenDetails = ({
   disabled,
   priceImpact
 }) => {
-  const [isExpanded, setIsExpanded] = useState60(false);
-  const [isDisplayed, setIsDisplayed] = useState60();
+  const [isExpanded, setIsExpanded] = useState59(false);
+  const [isDisplayed, setIsDisplayed] = useState59();
   const timeEstimation = useCheckoutTimeEstimate(
     // not provided on purpose for <1min default visuals
     void 0,
@@ -22055,7 +22033,7 @@ var TransferTokenDetails = ({
     }
   };
   const gasFees = void 0;
-  return /* @__PURE__ */ React211.createElement(
+  return /* @__PURE__ */ React210.createElement(
     Box,
     {
       marginBottom: "1",
@@ -22064,7 +22042,7 @@ var TransferTokenDetails = ({
       display: "flex",
       flexDirection: "column"
     },
-    /* @__PURE__ */ React211.createElement(
+    /* @__PURE__ */ React210.createElement(
       Box,
       {
         as: "button",
@@ -22080,17 +22058,17 @@ var TransferTokenDetails = ({
         disabled,
         onClick: handleExpandToggle
       },
-      /* @__PURE__ */ React211.createElement(
+      /* @__PURE__ */ React210.createElement(
         TransferTokenDetail,
         {
           text: "Minimum deposit:",
           value: minAmount ? `$${minAmount}` : "no minimum",
-          icon: /* @__PURE__ */ React211.createElement(InfoIcon, { filled: true })
+          icon: /* @__PURE__ */ React210.createElement(InfoIcon, { filled: true })
         }
       ),
-      /* @__PURE__ */ React211.createElement(AnimatedCaretDownIcon, { expanded: isDisplayed })
+      /* @__PURE__ */ React210.createElement(AnimatedCaretDownIcon, { expanded: isDisplayed })
     ),
-    /* @__PURE__ */ React211.createElement(
+    /* @__PURE__ */ React210.createElement(
       motion7.div,
       {
         initial: "collapsed",
@@ -22101,7 +22079,7 @@ var TransferTokenDetails = ({
           expanded: { height: "auto", opacity: 1 }
         }
       },
-      /* @__PURE__ */ React211.createElement(
+      /* @__PURE__ */ React210.createElement(
         Box,
         {
           paddingX: "12",
@@ -22110,7 +22088,7 @@ var TransferTokenDetails = ({
           gap: "6",
           paddingBottom: "8"
         },
-        /* @__PURE__ */ React211.createElement(
+        /* @__PURE__ */ React210.createElement(
           TransferTokenDetail,
           {
             paddingY: "0",
@@ -22118,30 +22096,30 @@ var TransferTokenDetails = ({
             text: `${priceImpact.label}:`,
             isApproximate: true,
             value: `${formatNumberAndStringify(priceImpact.value, void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`,
-            icon: /* @__PURE__ */ React211.createElement(DollarIcon, null)
+            icon: /* @__PURE__ */ React210.createElement(DollarIcon, null)
           }
         ),
-        gasFees && /* @__PURE__ */ React211.createElement(
+        gasFees && /* @__PURE__ */ React210.createElement(
           TransferTokenDetail,
           {
             text: "Estimated gas:",
             isApproximate: true,
             value: `$${gasFees}`,
-            icon: /* @__PURE__ */ React211.createElement(DollarIcon, null)
+            icon: /* @__PURE__ */ React210.createElement(DollarIcon, null)
           }
         ),
-        /* @__PURE__ */ React211.createElement(
+        /* @__PURE__ */ React210.createElement(
           TransferTokenDetail,
           {
             text: "Estimated processing time:",
             value: formatSecondsToReadableForm4(timeEstimation, true),
-            icon: /* @__PURE__ */ React211.createElement(SpeedometerIcon, null)
+            icon: /* @__PURE__ */ React210.createElement(SpeedometerIcon, null)
           }
         ),
-        /* @__PURE__ */ React211.createElement(
+        /* @__PURE__ */ React210.createElement(
           TransferTokenDetail,
           {
-            text: /* @__PURE__ */ React211.createElement(React211.Fragment, null, "Have questions?", " ", /* @__PURE__ */ React211.createElement(
+            text: /* @__PURE__ */ React210.createElement(React210.Fragment, null, "Have questions?", " ", /* @__PURE__ */ React210.createElement(
               FunLinkButton,
               {
                 inline: true,
@@ -22150,22 +22128,7 @@ var TransferTokenDetails = ({
                 textProps: { size: "12", weight: "regular" }
               }
             )),
-            icon: /* @__PURE__ */ React211.createElement(FileIcon, null)
-          }
-        ),
-        /* @__PURE__ */ React211.createElement(
-          TransferTokenDetail,
-          {
-            text: /* @__PURE__ */ React211.createElement(React211.Fragment, null, /* @__PURE__ */ React211.createElement(
-              FunLinkButton,
-              {
-                inline: true,
-                text: "Terms & conditions",
-                href: "https://fun.xyz/terms",
-                textProps: { size: "12", weight: "regular" }
-              }
-            ), " ", "apply"),
-            icon: /* @__PURE__ */ React211.createElement(MessageIcon, null)
+            icon: /* @__PURE__ */ React210.createElement(FileIcon, null)
           }
         )
       )
@@ -22180,7 +22143,7 @@ var TransferTokenDetail = ({
   ...boxProps
 }) => {
   const valueLabel = value && (isApproximate ? ` ~${value}` : ` ${value}`);
-  return /* @__PURE__ */ React211.createElement(Box, { display: "flex", gap: "6", alignItems: "center", paddingY: "2", ...boxProps }, /* @__PURE__ */ React211.createElement(
+  return /* @__PURE__ */ React210.createElement(Box, { display: "flex", gap: "6", alignItems: "center", paddingY: "2", ...boxProps }, /* @__PURE__ */ React210.createElement(
     Box,
     {
       color: "secondaryText",
@@ -22189,7 +22152,7 @@ var TransferTokenDetail = ({
       justifyContent: "center"
     },
     icon
-  ), /* @__PURE__ */ React211.createElement(Text, { size: "12" }, text, value && /* @__PURE__ */ React211.createElement(Text, { size: "12", weight: "medium", display: "inline" }, valueLabel)));
+  ), /* @__PURE__ */ React210.createElement(Text, { size: "12" }, text, value && /* @__PURE__ */ React210.createElement(Text, { size: "12", weight: "medium", display: "inline" }, valueLabel)));
 };
 
 // src/hooks/useTokenTransfer.ts
@@ -22283,16 +22246,16 @@ function TransferToken({
   onNext
 }) {
   const controls = useAnimationControls3();
-  const [qrCodeHover, setQrCodeHover] = useState61(false);
+  const [qrCodeHover, setQrCodeHover] = useState60(false);
   const filteredAssets = useEnabledTokenTransferChainTokens();
   const { textCustomizations } = useFunkitConfig();
   const { checkoutItem } = useCheckoutContext();
   const defaultChainId = useFlag(FlagKey22.TokenTransferDefaultChainId);
   const validDefaultChainId = filteredAssets[Number(defaultChainId)] !== void 0 ? Number(defaultChainId) : polygon6.id;
-  const [selectedChainId, setSelectedChainId] = useState61(validDefaultChainId);
+  const [selectedChainId, setSelectedChainId] = useState60(validDefaultChainId);
   const disclaimerTextWrapperRef = useRef19(null);
   const defaultSelectedToken = filteredAssets?.[selectedChainId]?.[0] || "";
-  const [selectedToken, setSelectedToken] = useState61(defaultSelectedToken);
+  const [selectedToken, setSelectedToken] = useState60(defaultSelectedToken);
   const { depositAddress, minTransferUsd, priceImpact } = useTokenTransfer(
     selectedChainId,
     selectedToken
@@ -22312,7 +22275,7 @@ function TransferToken({
   const isLoadingDepositAddress = depositAddress === void 0;
   return (
     // This ID is used in the DialogContent css to set the height of the modal
-    /* @__PURE__ */ React212.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React212.createElement(
+    /* @__PURE__ */ React211.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React211.createElement(
       Box,
       {
         display: "flex",
@@ -22321,17 +22284,17 @@ function TransferToken({
         justifyContent: "center",
         gap: "18"
       },
-      /* @__PURE__ */ React212.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React212.createElement(
+      /* @__PURE__ */ React211.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React211.createElement(
         SourcePaymentMethodItem,
         {
           type: "token_transfer" /* TOKEN_TRANSFER */,
           keyText: textCustomizations.transferTokens,
           disclaimerText: "No limit",
-          keyIcon: /* @__PURE__ */ React212.createElement(LightningBoltIcon, null),
+          keyIcon: /* @__PURE__ */ React211.createElement(LightningBoltIcon, null),
           onClick: () => onNext({})
         }
       )),
-      /* @__PURE__ */ React212.createElement(Box, { width: "full", display: "flex", gap: "12" }, /* @__PURE__ */ React212.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React212.createElement(Text, { size: "12", weight: "medium" }, "Token"), /* @__PURE__ */ React212.createElement(
+      /* @__PURE__ */ React211.createElement(Box, { width: "full", display: "flex", gap: "12" }, /* @__PURE__ */ React211.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React211.createElement(Text, { size: "12", weight: "medium" }, "Token"), /* @__PURE__ */ React211.createElement(
         TokenDropdown_default,
         {
           defaultSelectedToken,
@@ -22355,7 +22318,7 @@ function TransferToken({
             }
           }
         }
-      )), /* @__PURE__ */ React212.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React212.createElement(Text, { size: "12", weight: "medium" }, "Chain"), /* @__PURE__ */ React212.createElement(
+      )), /* @__PURE__ */ React211.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React211.createElement(Text, { size: "12", weight: "medium" }, "Chain"), /* @__PURE__ */ React211.createElement(
         ChainDropdown,
         {
           selectedToken,
@@ -22373,7 +22336,7 @@ function TransferToken({
           }
         }
       ))),
-      /* @__PURE__ */ React212.createElement(
+      /* @__PURE__ */ React211.createElement(
         Box,
         {
           display: "flex",
@@ -22381,7 +22344,7 @@ function TransferToken({
           justifyContent: "center",
           padding: "20"
         },
-        isLoadingDepositAddress ? /* @__PURE__ */ React212.createElement(QRCodeSkeletonLoader_default, { diagonalDimension: 12 }) : /* @__PURE__ */ React212.createElement(
+        isLoadingDepositAddress ? /* @__PURE__ */ React211.createElement(QRCodeSkeletonLoader_default, { diagonalDimension: 12 }) : /* @__PURE__ */ React211.createElement(
           motion8.div,
           {
             onHoverStart: toggleQrHover,
@@ -22401,7 +22364,7 @@ function TransferToken({
             },
             animate: controls
           },
-          /* @__PURE__ */ React212.createElement(
+          /* @__PURE__ */ React211.createElement(
             QRCode,
             {
               withShadow: true,
@@ -22416,26 +22379,33 @@ function TransferToken({
           )
         )
       ),
-      /* @__PURE__ */ React212.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React212.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React212.createElement(
+      /* @__PURE__ */ React211.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React211.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React211.createElement(
         Box,
         {
           display: "flex",
           alignItems: "center",
-          gap: "4",
+          justifyContent: "space-between",
           ref: disclaimerTextWrapperRef
         },
-        /* @__PURE__ */ React212.createElement(Text, { size: "12", weight: "medium" }, "Your deposit address"),
-        /* @__PURE__ */ React212.createElement(
+        /* @__PURE__ */ React211.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React211.createElement(Text, { size: "12", weight: "medium" }, "Your deposit address"), /* @__PURE__ */ React211.createElement(
           FunTooltip,
           {
             content: `Send any accepted token to this address and it will auto
-            swap to ${targetAssetTicker} in your account.`,
+              swap to ${targetAssetTicker} in your account.`,
             wrapperElementRef: disclaimerTextWrapperRef,
             enableDynamicPositioning: true
           },
-          /* @__PURE__ */ React212.createElement(Box, { color: { base: "tertiaryText", hover: "primaryText" } }, /* @__PURE__ */ React212.createElement(InfoIcon, null))
+          /* @__PURE__ */ React211.createElement(Box, { color: { base: "tertiaryText", hover: "primaryText" } }, /* @__PURE__ */ React211.createElement(InfoIcon, null))
+        )),
+        /* @__PURE__ */ React211.createElement(
+          FunLinkButton,
+          {
+            text: "Terms apply",
+            href: FUN_TERMS_URL,
+            textProps: { size: "12", weight: "regular" }
+          }
         )
-      ), isLoadingDepositAddress ? /* @__PURE__ */ React212.createElement(FunSkeletonBlock, { height: "66", width: "full" }) : /* @__PURE__ */ React212.createElement(CopyInputDisplayedAddress, { address: depositAddress })), /* @__PURE__ */ React212.createElement(FunInfoBanner, null), /* @__PURE__ */ React212.createElement(
+      ), isLoadingDepositAddress ? /* @__PURE__ */ React211.createElement(FunSkeletonBlock, { height: "66", width: "full" }) : /* @__PURE__ */ React211.createElement(CopyInputDisplayedAddress, { address: depositAddress })), /* @__PURE__ */ React211.createElement(FunInfoBanner, null), /* @__PURE__ */ React211.createElement(
         TransferTokenDetails,
         {
           disabled: isLoadingDepositAddress,
@@ -22484,7 +22454,7 @@ function initialState(checkoutItem) {
   };
 }
 function useCheckoutModalTransition(checkoutItem, onClose) {
-  const [modalState, setModalState] = useState62(() => initialState(checkoutItem));
+  const [modalState, setModalState] = useState61(() => initialState(checkoutItem));
   const { clearCheckoutQuoteMessages } = useCheckoutQuoteNotification();
   const onCloseWrapper = useCallback40(() => {
     checkoutItem.initSettings.onClose?.();
@@ -22496,7 +22466,7 @@ function useCheckoutModalTransition(checkoutItem, onClose) {
     onClose();
   }, [checkoutItem, modalState.step, onClose]);
   const { animation, animate } = useAnimatedNavigation(void 0);
-  const [stateHistory, setHistory] = useState62([]);
+  const [stateHistory, setHistory] = useState61([]);
   const prevStep = useRef20(null);
   const onNext = useCallback40(
     (payload) => {
@@ -22579,7 +22549,7 @@ function useTitleConfig(checkoutItem, state) {
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 function FunCheckoutModalStepComponent(props) {
   const { Component: Component2 } = CheckoutModalSteps[props.modalState.step];
-  return /* @__PURE__ */ React213.createElement(Component2, { ...props });
+  return /* @__PURE__ */ React212.createElement(Component2, { ...props });
 }
 function FunCheckoutModalInner({
   checkoutItem,
@@ -22624,7 +22594,7 @@ function FunCheckoutModalInner({
     depositAddress: checkoutItem.depositAddress ?? void 0,
     isCheckoutDetailView: modalState.step === "checkout_complete" /* CHECKOUT_COMPLETE */,
     paddingTop: 0,
-    topbar: /* @__PURE__ */ React213.createElement(
+    topbar: /* @__PURE__ */ React212.createElement(
       Dialog.Title,
       {
         hasBackButton: hasBack && !isBlocked,
@@ -22638,7 +22608,7 @@ function FunCheckoutModalInner({
     ),
     withTopDivider: checkoutConfig.modalTitleMeta ? "always" : "scroll"
   });
-  return /* @__PURE__ */ React213.createElement(
+  return /* @__PURE__ */ React212.createElement(
     Dialog,
     {
       open,
@@ -22647,7 +22617,7 @@ function FunCheckoutModalInner({
       isHidden: modalState.isSoftHidden
     },
     topbar,
-    /* @__PURE__ */ React213.createElement(
+    /* @__PURE__ */ React212.createElement(
       Dialog.Content,
       {
         fullHeight: showFullHeight,
@@ -22657,22 +22627,22 @@ function FunCheckoutModalInner({
         withTopDivider,
         withBottomDivider: modalState.step === "transfer_token" /* TRANSFER_TOKEN */ ? "never" : "scroll"
       },
-      isBlocked ? /* @__PURE__ */ React213.createElement(
+      isBlocked ? /* @__PURE__ */ React212.createElement(
         FunCheckoutBlocked,
         {
           reason: isUserGeoblocked ? "geoblock" : "security"
         }
-      ) : /* @__PURE__ */ React213.createElement(React213.Fragment, null, /* @__PURE__ */ React213.createElement(
+      ) : /* @__PURE__ */ React212.createElement(React212.Fragment, null, /* @__PURE__ */ React212.createElement(
         DydxSwitchTab,
         {
           checkoutItem,
           showSwitch: showDydxSwitch,
           onClose: onCloseWrapper
         }
-      ), /* @__PURE__ */ React213.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
+      ), /* @__PURE__ */ React212.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
     ),
-    /* @__PURE__ */ React213.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }),
-    !isBlocked && /* @__PURE__ */ React213.createElement(
+    /* @__PURE__ */ React212.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }),
+    !isBlocked && /* @__PURE__ */ React212.createElement(
       CheckoutNotifications,
       {
         onHelp: handleCheckoutHelp,
@@ -22686,7 +22656,7 @@ function FunCheckoutModal({ onClose, open }) {
   if (!checkoutItem) {
     return null;
   }
-  return /* @__PURE__ */ React213.createElement(
+  return /* @__PURE__ */ React212.createElement(
     FunCheckoutModalInner,
     {
       checkoutItem,
@@ -22697,7 +22667,7 @@ function FunCheckoutModal({ onClose, open }) {
 }
 
 // src/modals/ConnectModal/ConnectModal.tsx
-import React214 from "react";
+import React213 from "react";
 import { useAccount as useAccount9 } from "wagmi";
 var TITLE_ID2 = "rk_connect_title";
 function ConnectModal({
@@ -22708,12 +22678,12 @@ function ConnectModal({
   const connectionStatus = useConnectionStatus();
   const { disconnect } = useFunkitDisconnect();
   const { isConnecting } = useAccount9();
-  const onConnectModalCancel = React214.useCallback(() => {
+  const onConnectModalCancel = React213.useCallback(() => {
     if (isConnecting) disconnect();
     onClose();
   }, [onClose, disconnect, isConnecting]);
   if (connectionStatus === "disconnected" || connectionStatus === "loading") {
-    return /* @__PURE__ */ React214.createElement(
+    return /* @__PURE__ */ React213.createElement(
       Dialog,
       {
         onClose: onConnectModalCancel,
@@ -22721,7 +22691,7 @@ function ConnectModal({
         titleId: TITLE_ID2,
         isSmartCloseable: true
       },
-      /* @__PURE__ */ React214.createElement(
+      /* @__PURE__ */ React213.createElement(
         FunConnectOptions,
         {
           onClose: onConnectModalCancel,
@@ -22735,7 +22705,7 @@ function ConnectModal({
 
 // src/providers/ModalContext.tsx
 function useModalStateValue() {
-  const [isModalOpen, setModalOpen] = useState63(false);
+  const [isModalOpen, setModalOpen] = useState62(false);
   return {
     closeModal: useCallback41(() => setModalOpen(false), []),
     isModalOpen,
@@ -22743,8 +22713,8 @@ function useModalStateValue() {
   };
 }
 function useModalStateValueWithProp() {
-  const [isModalOpen, setModalOpen] = useState63(false);
-  const [prop, setProp] = useState63(null);
+  const [isModalOpen, setModalOpen] = useState62(false);
+  const [prop, setProp] = useState62(null);
   return {
     closeModal: useCallback41(() => {
       setTimeout(() => {
@@ -22786,7 +22756,7 @@ function ModalProvider({ children }) {
     isModalOpen: chainModalOpen,
     openModal: openChainModal
   } = useModalStateValue();
-  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState63(false);
+  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState62(false);
   const {
     closeModal: closeFunCheckoutModal,
     isModalOpen: funCheckoutModalOpen,
@@ -22812,7 +22782,7 @@ function ModalProvider({ children }) {
   useEffect43(() => {
     if (isUnauthenticated) closeModals();
   }, [isUnauthenticated]);
-  return /* @__PURE__ */ React215.createElement(
+  return /* @__PURE__ */ React214.createElement(
     ModalContext.Provider,
     {
       value: useMemo38(
@@ -22850,7 +22820,7 @@ function ModalProvider({ children }) {
       )
     },
     children,
-    /* @__PURE__ */ React215.createElement(
+    /* @__PURE__ */ React214.createElement(
       ConnectModal,
       {
         onClose: closeConnectModal,
@@ -22858,7 +22828,7 @@ function ModalProvider({ children }) {
         walletsOnly: !!walletsOnly
       }
     ),
-    /* @__PURE__ */ React215.createElement(
+    /* @__PURE__ */ React214.createElement(
       AccountModal,
       {
         onClose: closeAccountModal,
@@ -22866,8 +22836,8 @@ function ModalProvider({ children }) {
         defaultTab: accountModalTab
       }
     ),
-    /* @__PURE__ */ React215.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
-    /* @__PURE__ */ React215.createElement(
+    /* @__PURE__ */ React214.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
+    /* @__PURE__ */ React214.createElement(
       FunCheckoutModal,
       {
         onClose: closeFunCheckoutModal,
@@ -23189,15 +23159,15 @@ var FunkitWeb2Provider = ({
   const { connectAsync } = useConnect2();
   const { chains } = useConfig5();
   const { connectors, disconnectAsync } = useDisconnect2();
-  const [privy, setPrivy] = useState64(null);
-  const [privyIframeUrl, setPrivyIframeUrl] = useState64();
-  const [loginMethod, setLoginMethod] = useState64(
+  const [privy, setPrivy] = useState63(null);
+  const [privyIframeUrl, setPrivyIframeUrl] = useState63();
+  const [loginMethod, setLoginMethod] = useState63(
     getLoginMethodFromCache() || null
   );
   const wallets = useWalletConnectors();
-  const [isLoggingIn, setIsLoggingIn] = useState64(false);
-  const [loginErrorMessage, setLoginErrorMessage] = useState64("");
-  const [loggedInUser, setLoggedInUser] = useState64(null);
+  const [isLoggingIn, setIsLoggingIn] = useState63(false);
+  const [loginErrorMessage, setLoginErrorMessage] = useState63("");
+  const [loggedInUser, setLoggedInUser] = useState63(null);
   const setLoginMethodAndCache = useCallback42(
     (method) => {
       try {
@@ -23464,7 +23434,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState64(false);
+  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState63(false);
   const handleSendOtpEmail = useCallback42(
     async (emailAddress) => {
       try {
@@ -23490,7 +23460,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState64(false);
+  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState63(false);
   const handleGenerateFcUri = useCallback42(async () => {
     try {
       if (!privy) throw new Error(ERROR_MESSAGES.PRIVY_NOT_INITIALIZED);
@@ -23602,7 +23572,7 @@ var FunkitWeb2Provider = ({
     handleFunkitWeb2Logout,
     web2UserInfo
   };
-  return /* @__PURE__ */ React216.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React216.createElement(
+  return /* @__PURE__ */ React215.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React215.createElement(
     "iframe",
     {
       id: PRIVY_IFRAME_ID,
@@ -23635,30 +23605,30 @@ function useConnectionStatus() {
 }
 
 // src/providers/ShowBalanceContext.tsx
-import React217, {
+import React216, {
   createContext as createContext19,
   useContext as useContext19,
-  useState as useState65
+  useState as useState64
 } from "react";
 var ShowBalanceContext = createContext19({
   showBalance: void 0,
   setShowBalance: () => void 0
 });
 function ShowBalanceProvider({ children }) {
-  const [showBalance, setShowBalance] = useState65();
-  return /* @__PURE__ */ React217.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
+  const [showBalance, setShowBalance] = useState64();
+  return /* @__PURE__ */ React216.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
 }
 var useShowBalance = () => useContext19(ShowBalanceContext);
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify11, isMobile as isMobile14, noop as noop8 } from "@funkit/utils";
-import React218 from "react";
+import React217 from "react";
 import { useAccount as useAccount12, useBalance, useConfig as useConfig6 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
-import { useCallback as useCallback43, useEffect as useEffect45, useState as useState66 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect45, useState as useState65 } from "react";
 function useIsMounted() {
-  const [isMounted, setIsMounted] = useState66(false);
+  const [isMounted, setIsMounted] = useState65(false);
   useEffect45(() => {
     setIsMounted(true);
     return () => {
@@ -23743,7 +23713,7 @@ function ConnectButtonRenderer({
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
   const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
-  return /* @__PURE__ */ React218.createElement(React218.Fragment, null, children({
+  return /* @__PURE__ */ React217.createElement(React217.Fragment, null, children({
     account: address ? {
       address,
       balanceDecimals: balanceData?.decimals,
@@ -23799,7 +23769,7 @@ function ChainSelectorButton({
   openChainModal,
   chain
 }) {
-  return /* @__PURE__ */ React219.createElement(
+  return /* @__PURE__ */ React218.createElement(
     Box,
     {
       alignItems: "center",
@@ -23827,7 +23797,7 @@ function ChainSelectorButton({
       type: "button",
       ...connectButtonStyles
     },
-    unsupportedChain ? /* @__PURE__ */ React219.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React219.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React219.createElement(
+    unsupportedChain ? /* @__PURE__ */ React218.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React218.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -23837,7 +23807,7 @@ function ChainSelectorButton({
         height: "12",
         width: "12"
       },
-      /* @__PURE__ */ React219.createElement(
+      /* @__PURE__ */ React218.createElement(
         AsyncImage,
         {
           alt: chain.name ?? "Chain icon",
@@ -23848,7 +23818,7 @@ function ChainSelectorButton({
           src: chain.iconUrl
         }
       )
-    ) : null, /* @__PURE__ */ React219.createElement(
+    ) : null, /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: mapResponsiveValue(chainStatus, (value) => {
@@ -23868,7 +23838,7 @@ function AccountButton({
   showBalance,
   accountStatus
 }) {
-  return /* @__PURE__ */ React219.createElement(
+  return /* @__PURE__ */ React218.createElement(
     Box,
     {
       alignItems: "center",
@@ -23888,7 +23858,7 @@ function AccountButton({
       gap: "16",
       ...connectButtonStyles
     },
-    account.displayBalance && /* @__PURE__ */ React219.createElement(
+    account.displayBalance && /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -23898,7 +23868,7 @@ function AccountButton({
       },
       account.displayBalance
     ),
-    /* @__PURE__ */ React219.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React219.createElement(
+    /* @__PURE__ */ React218.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -23906,7 +23876,7 @@ function AccountButton({
           (value) => value === "full" || value === "avatar" ? "block" : "none"
         )
       },
-      /* @__PURE__ */ React219.createElement(
+      /* @__PURE__ */ React218.createElement(
         Avatar,
         {
           address: account.address,
@@ -23915,7 +23885,7 @@ function AccountButton({
           size: 12
         }
       )
-    ), /* @__PURE__ */ React219.createElement(
+    ), /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -23941,12 +23911,12 @@ function ConnectButton({
   const chains = useFunkitConnectChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
-  const [ready, setReady] = useState67(false);
+  const [ready, setReady] = useState66(false);
   useEffect46(() => {
     setShowBalance(showBalance);
     if (!ready) setReady(true);
   }, [showBalance, setShowBalance, ready]);
-  return ready ? /* @__PURE__ */ React219.createElement(ConnectButtonRenderer, null, ({
+  return ready ? /* @__PURE__ */ React218.createElement(ConnectButtonRenderer, null, ({
     account,
     chain,
     mounted,
@@ -23956,7 +23926,7 @@ function ConnectButton({
   }) => {
     const ready2 = mounted && connectionStatus !== "loading";
     const unsupportedChain = chain?.unsupported ?? false;
-    return /* @__PURE__ */ React219.createElement(
+    return /* @__PURE__ */ React218.createElement(
       Box,
       {
         display: "flex",
@@ -23972,7 +23942,7 @@ function ConnectButton({
       },
       ready2 && account && connectionStatus === "connected" ? (
         // Logged in: Chain Button & Account Button
-        /* @__PURE__ */ React219.createElement(React219.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React219.createElement(
+        /* @__PURE__ */ React218.createElement(React218.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React218.createElement(
           ChainSelectorButton,
           {
             unsupportedChain,
@@ -23980,7 +23950,7 @@ function ConnectButton({
             openChainModal,
             chain
           }
-        ), !unsupportedChain && /* @__PURE__ */ React219.createElement(
+        ), !unsupportedChain && /* @__PURE__ */ React218.createElement(
           AccountButton,
           {
             openAccountModal,
@@ -23991,7 +23961,7 @@ function ConnectButton({
         ))
       ) : (
         // Not logged in: Connect Button
-        /* @__PURE__ */ React219.createElement(
+        /* @__PURE__ */ React218.createElement(
           Box,
           {
             as: "button",
@@ -24009,19 +23979,19 @@ function ConnectButton({
             type: "button",
             ...connectButtonStyles
           },
-          /* @__PURE__ */ React219.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
+          /* @__PURE__ */ React218.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
         )
       )
     );
-  }) : /* @__PURE__ */ React219.createElement(React219.Fragment, null);
+  }) : /* @__PURE__ */ React218.createElement(React218.Fragment, null);
 }
 ConnectButton.__defaultProps = defaultProps;
 ConnectButton.Custom = ConnectButtonRenderer;
 
 // src/components/Icons/FunkitPaymentsIconLine.tsx
-import React220 from "react";
+import React219 from "react";
 function MetaMaskPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React220.createElement(
+  return /* @__PURE__ */ React219.createElement(
     "svg",
     {
       width: size,
@@ -24030,7 +24000,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z",
@@ -24041,7 +24011,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z",
@@ -24052,7 +24022,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z",
@@ -24063,7 +24033,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z",
@@ -24074,7 +24044,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z",
@@ -24085,7 +24055,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z",
@@ -24096,7 +24066,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z",
@@ -24107,7 +24077,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z",
@@ -24118,7 +24088,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z",
@@ -24129,7 +24099,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z",
@@ -24140,7 +24110,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z",
@@ -24151,7 +24121,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z",
@@ -24162,7 +24132,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z",
@@ -24173,7 +24143,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z",
@@ -24184,7 +24154,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z",
@@ -24195,7 +24165,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z",
@@ -24206,7 +24176,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z",
@@ -24217,7 +24187,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z",
@@ -24228,7 +24198,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z",
@@ -24239,7 +24209,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z",
@@ -24250,7 +24220,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z",
@@ -24261,7 +24231,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z",
@@ -24272,7 +24242,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z",
@@ -24283,7 +24253,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z",
@@ -24294,7 +24264,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z",
@@ -24305,7 +24275,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z",
@@ -24316,7 +24286,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z",
@@ -24327,7 +24297,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z",
@@ -24338,7 +24308,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z",
@@ -24352,14 +24322,14 @@ function MetaMaskPaymentIcon({ size = 16 }) {
   );
 }
 function MastercardPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React220.createElement(
+  return /* @__PURE__ */ React219.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
       viewBox: "0 0 152.407 108"
     },
-    /* @__PURE__ */ React220.createElement("g", null, /* @__PURE__ */ React220.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React220.createElement("g", null, /* @__PURE__ */ React220.createElement(
+    /* @__PURE__ */ React219.createElement("g", null, /* @__PURE__ */ React219.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React219.createElement("g", null, /* @__PURE__ */ React219.createElement(
       "rect",
       {
         x: "60.4117",
@@ -24368,21 +24338,21 @@ function MastercardPaymentIcon({ size = 16 }) {
         height: "56.6064",
         fill: "#ff5f00"
       }
-    ), /* @__PURE__ */ React220.createElement(
+    ), /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#eb001b"
       }
-    ), /* @__PURE__ */ React220.createElement(
+    ), /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#f79e1b"
       }
-    ), /* @__PURE__ */ React220.createElement(
+    ), /* @__PURE__ */ React219.createElement(
       "path",
       {
         d: "M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z",
@@ -24396,7 +24366,7 @@ function FunkitPaymentsIconLine({
   size = 16,
   gap = "2"
 }) {
-  return /* @__PURE__ */ React220.createElement(
+  return /* @__PURE__ */ React219.createElement(
     Box,
     {
       display: "flex",
@@ -24405,9 +24375,9 @@ function FunkitPaymentsIconLine({
       alignItems: "center",
       justifyContent: "center"
     },
-    /* @__PURE__ */ React220.createElement(MetaMaskPaymentIcon, { size }),
-    /* @__PURE__ */ React220.createElement(MastercardPaymentIcon, { size }),
-    /* @__PURE__ */ React220.createElement(CoinbaseIcon, { size })
+    /* @__PURE__ */ React219.createElement(MetaMaskPaymentIcon, { size }),
+    /* @__PURE__ */ React219.createElement(MastercardPaymentIcon, { size }),
+    /* @__PURE__ */ React219.createElement(CoinbaseIcon, { size })
   );
 }
 
@@ -24466,7 +24436,7 @@ var useUpdateActiveFunkitCheckout = () => {
 
 // src/providers/FunkitProvider.tsx
 import { QueryClientProvider } from "@tanstack/react-query";
-import React221, { createContext as createContext20, useContext as useContext20 } from "react";
+import React220, { createContext as createContext20, useContext as useContext20 } from "react";
 import { WagmiProvider, useAccountEffect as useAccountEffect3 } from "wagmi";
 
 // src/utils/funkitProvider.ts
@@ -24550,7 +24520,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.0.8";
+  return "5.0.10";
 }
 function useFingerprint() {
   const fingerprint = useCallback44(() => {
@@ -24601,7 +24571,7 @@ function FunkitProvider(props) {
     !!props.debug,
     getCurrentSdkVersion()
   );
-  const MainChild = /* @__PURE__ */ React221.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React221.createElement(
+  const MainChild = /* @__PURE__ */ React220.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React220.createElement(
     FunkitProviderInner,
     {
       avatar: props.avatar,
@@ -24614,7 +24584,7 @@ function FunkitProvider(props) {
     },
     props.children
   ));
-  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React221.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React221.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
+  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React220.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React220.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
 }
 function FunkitProviderInner({
   avatar,
@@ -24634,7 +24604,7 @@ function FunkitProviderInner({
   const avatarContext = avatar ?? defaultAvatar;
   const isSandboxMode = !!sandbox;
   const modalSizeFinal = modalSize || ModalSizeOptions.COMPACT;
-  return /* @__PURE__ */ React221.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React221.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React221.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React221.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React221.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React221.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React221.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React221.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React221.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React221.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React221.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React221.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React221.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React221.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React221.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React221.createElement(UserPresenceProvider, null, /* @__PURE__ */ React221.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React221.createElement(
+  return /* @__PURE__ */ React220.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React220.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React220.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React220.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React220.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React220.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React220.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React220.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React220.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React220.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React220.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React220.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React220.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React220.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React220.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React220.createElement(UserPresenceProvider, null, /* @__PURE__ */ React220.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React220.createElement(
     "div",
     {
       ...createThemeRootProps2(id),
@@ -24643,7 +24613,7 @@ function FunkitProviderInner({
         height: "100%"
       }
     },
-    /* @__PURE__ */ React221.createElement(
+    /* @__PURE__ */ React220.createElement(
       "style",
       {
         dangerouslySetInnerHTML: {