@imtbl/checkout-widgets 2.7.6-alpha.3 → 2.7.6-alpha.4

package/dist/browser/{index-DcGT4xg-.js → index-Z1ySY3CD.js}

@@ -1,4 +1,4 @@
-import { e5 as __awaiter, e6 as __generator, eg as isServer, e8 as getNextIntegrationsURL, e7 as loadScript } from './index-BiXL-IXS.js';
+import { e5 as __awaiter, e6 as __generator, eg as isServer, e8 as getNextIntegrationsURL, e7 as loadScript } from './index-Dp2LchQR.js';
 
 function remoteMiddlewares(ctx, settings, obfuscate) {
     var _a;

package/dist/browser/{index-D5LoG06y.js → index-nziVmB-g.js}

@@ -1,4 +1,4 @@
-import { dX as se$1, dY as T$2, dZ as oe$1, d_ as R$1, d$ as a$2, e0 as te$1, e1 as p$1, e2 as ne$1, e3 as y$1 } from './index-BiXL-IXS.js';
+import { dX as se$1, dY as T$2, dZ as oe$1, d_ as R$1, d$ as a$2, e0 as te$1, e1 as p$1, e2 as ne$1, e3 as y$1 } from './index-Dp2LchQR.js';
 
 /**
  * @license

package/dist/browser/index.js

@@ -1 +1 @@
-export { er as WidgetsFactory } from './index-BiXL-IXS.js';
+export { er as WidgetsFactory } from './index-Dp2LchQR.js';

package/dist/browser/{index.umd-D-GcL5BZ.js → index.umd-CAVRgQ_6.js}

@@ -1,4 +1,4 @@
-import { ay as getDefaultExportFromCjs } from './index-BiXL-IXS.js';
+import { ay as getDefaultExportFromCjs } from './index-Dp2LchQR.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/dist/browser/{useInterval-Dpkv8i3Z.js → useInterval-BiJy2Gyo.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, dW as useBrowserLayoutEffect } from './index-BiXL-IXS.js';
+import { r as reactExports, dW as useBrowserLayoutEffect } from './index-Dp2LchQR.js';
 
 // Inspired by https://usehooks-ts.com/react-hook/use-interval
 function useInterval(callback, delay) {

package/dist/types/components/CoinSelector/CoinSelector.d.ts

@@ -7,6 +7,7 @@ type CoinSelectorProps = {
     optionsLoading?: boolean;
     children?: any;
     visible?: boolean;
+    drawerBackground: string | undefined;
 };
-export declare function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, }: CoinSelectorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, drawerBackground, }: CoinSelectorProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/FormComponents/SelectForm/SelectForm.d.ts

@@ -1,6 +1,6 @@
 import { OptionKey } from '@biom3/react';
 import { Environment } from '@imtbl/config';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 interface SelectFormProps {
@@ -19,7 +19,8 @@ interface SelectFormProps {
     screen: string;
     control: string;
     environment?: Environment;
-    theme?: WidgetTheme;
+    theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
 }
-export declare function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment, theme, }: SelectFormProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment, theme, themeOverrides, }: SelectFormProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/FormComponents/SelectInput/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import { OptionKey } from '@biom3/react';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { InputMode, TextInputType } from '../TextInputForm/TextInputForm';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
@@ -32,7 +32,8 @@ interface SelectInputProps {
     screen: string;
     control: string;
     environment?: Environment;
-    theme?: WidgetTheme;
+    theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
 }
-export declare function SelectInput({ testId, options, textInputValue, textInputPlaceholder, textInputValidator, textInputType, onTextInputChange, onTextInputBlur, onTextInputFocus, textInputTextAlign, textInputSubtext, textInputErrorMessage, testInputMode, selectTextAlign, selectSubtext, selectErrorMessage, textInputMaxButtonClick, onSelectChange, textInputDisabled, selectInputDisabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment, theme, }: SelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectInput({ testId, options, textInputValue, textInputPlaceholder, textInputValidator, textInputType, onTextInputChange, onTextInputBlur, onTextInputFocus, textInputTextAlign, textInputSubtext, textInputErrorMessage, testInputMode, selectTextAlign, selectSubtext, selectErrorMessage, textInputMaxButtonClick, onSelectChange, textInputDisabled, selectInputDisabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment, theme, themeOverrides, }: SelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Transactions/Transactions.d.ts

@@ -1,6 +1,8 @@
+import { ThemeOverrides } from '@imtbl/checkout-sdk';
 type TransactionsProps = {
     defaultTokenImage: string;
     onBackButtonClick: () => void;
+    themeOverrides: ThemeOverrides;
 };
-export declare function Transactions({ defaultTokenImage, onBackButtonClick, }: TransactionsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Transactions({ defaultTokenImage, onBackButtonClick, themeOverrides, }: TransactionsProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/WalletDrawer/ConnectWalletDrawer.d.ts

@@ -18,6 +18,7 @@ type ConnectWalletDrawerProps = {
     }[];
     getShouldRequestWalletPermissions?: (providerInfo: EIP6963ProviderInfo) => boolean | undefined;
     shouldIdentifyUser?: boolean;
+    drawerBackground: string | undefined;
 };
-export declare function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize, disabledOptions, getShouldRequestWalletPermissions, shouldIdentifyUser, }: ConnectWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize, disabledOptions, getShouldRequestWalletPermissions, shouldIdentifyUser, drawerBackground, }: ConnectWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/WalletDrawer/DeliverToWalletDrawer.d.ts

@@ -4,6 +4,7 @@ type DeliverToWalletDrawerProps = {
     onClose: (toAddress?: string) => void;
     walletOptions: EIP6963ProviderDetail[];
     onConnect?: (providerType: 'from' | 'to', provider: WrappedBrowserProvider, providerInfo: EIP6963ProviderInfo) => void;
+    drawerBackground: string | undefined;
 };
-export declare function DeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, }: DeliverToWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function DeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, drawerBackground, }: DeliverToWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/WalletDrawer/PayWithWalletDrawer.d.ts

@@ -7,6 +7,7 @@ type PayWithWalletDrawerProps = {
     walletOptions: EIP6963ProviderDetail[];
     insufficientBalance?: boolean;
     showOnRampOption?: boolean;
+    drawerBackground: string | undefined;
 };
-export declare function PayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walletOptions, insufficientBalance, showOnRampOption, }: PayWithWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walletOptions, insufficientBalance, showOnRampOption, drawerBackground, }: PayWithWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/WalletDrawer/WalletDrawer.d.ts

@@ -20,6 +20,7 @@ interface WalletDrawerProps {
         label: string;
         rdns: string;
     }[];
+    drawerBackground: string | undefined;
 }
-export declare function WalletDrawer({ testId, drawerText, walletOptions, showWalletConnect, showWalletSelectorTarget, showDrawer, setShowDrawer, onWalletChange, menuItemSize, bottomSlot, disabledOptions, }: WalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function WalletDrawer({ testId, drawerText, walletOptions, showWalletConnect, showWalletSelectorTarget, showDrawer, setShowDrawer, onWalletChange, menuItemSize, bottomSlot, disabledOptions, drawerBackground, }: WalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/withDefaultWidgetConfig.d.ts

@@ -1,11 +1,20 @@
 import { Environment } from '@imtbl/config';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 export type StrongCheckoutWidgetsConfig = {
     theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
     environment: Environment;
     isOnRampEnabled: boolean;
     isSwapEnabled: boolean;
     isBridgeEnabled: boolean;
     isAddTokensEnabled: boolean;
 };
-export declare const withDefaultWidgetConfigs: (configs?: any) => StrongCheckoutWidgetsConfig;
+export declare const withDefaultWidgetConfigs: (configs: {
+    theme: WidgetTheme | undefined;
+    themeOverrides: ThemeOverrides | undefined;
+    environment: Environment;
+    isOnRampEnabled: boolean;
+    isSwapEnabled: boolean;
+    isBridgeEnabled: boolean;
+    isAddTokensEnabled?: boolean;
+}) => StrongCheckoutWidgetsConfig;

package/dist/types/widgets/bridge/components/BridgeForm.d.ts

@@ -1,4 +1,4 @@
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 interface BridgeFormProps {
     testId?: string;
@@ -7,7 +7,8 @@ interface BridgeFormProps {
     isTokenBalancesLoading?: boolean;
     defaultTokenImage: string;
     environment?: Environment;
-    theme?: WidgetTheme;
+    theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
 }
 export declare function BridgeForm(props: BridgeFormProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/bridge/components/WalletAndNetworkSelector.d.ts

@@ -1 +1,4 @@
-export declare function WalletAndNetworkSelector(): import("@emotion/react/jsx-runtime").JSX.Element;
+import { ThemeOverrides } from '@imtbl/checkout-sdk';
+export declare function WalletAndNetworkSelector({ themeOverrides }: {
+    themeOverrides: ThemeOverrides;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/bridge/views/Bridge.d.ts

@@ -1,8 +1,9 @@
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 export interface BridgeProps {
     amount?: string;
     tokenAddress?: string;
     defaultTokenImage: string;
     theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
 }
-export declare function Bridge({ amount, tokenAddress, defaultTokenImage, theme, }: BridgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Bridge({ amount, tokenAddress, defaultTokenImage, theme, themeOverrides, }: BridgeProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/bridge/views/WalletNetworkSelectionView.d.ts

@@ -1,5 +1,7 @@
+import { ThemeOverrides } from '@imtbl/checkout-sdk';
 type WalletNetworkSelectionViewProps = {
     showBackButton?: boolean;
+    themeOverrides: ThemeOverrides;
 };
-export declare function WalletNetworkSelectionView({ showBackButton, }: WalletNetworkSelectionViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function WalletNetworkSelectionView({ showBackButton, themeOverrides, }: WalletNetworkSelectionViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/connect/components/WalletList.d.ts

@@ -1,4 +1,4 @@
-import { ChainId } from '@imtbl/checkout-sdk';
+import { ChainId, ThemeOverrides } from '@imtbl/checkout-sdk';
 export interface WalletListProps {
     targetWalletRdns?: string;
     targetChainId: ChainId;
@@ -6,5 +6,6 @@ export interface WalletListProps {
     allowlistWalletRdns?: string[];
     blocklistWalletRdns: string[];
     isCheckNetworkEnabled: boolean;
+    themeOverrides: ThemeOverrides;
 }
 export declare function WalletList(props: WalletListProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/connect/views/ConnectWallet.d.ts

@@ -1,4 +1,4 @@
-import { ChainId } from '@imtbl/checkout-sdk';
+import { ChainId, ThemeOverrides } from '@imtbl/checkout-sdk';
 export interface ConnectWalletProps {
     targetWalletRdns?: string;
     targetChainId: ChainId;
@@ -8,5 +8,6 @@ export interface ConnectWalletProps {
     checkNetwork: boolean;
     showBackButton?: boolean;
     onBackButtonClick?: () => void;
+    themeOverrides: ThemeOverrides;
 }
-export declare function ConnectWallet({ targetWalletRdns, targetChainId, allowedChains, allowlistWalletRdns, blocklistWalletRdns, checkNetwork, showBackButton, onBackButtonClick, }: ConnectWalletProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConnectWallet({ targetWalletRdns, targetChainId, allowedChains, allowlistWalletRdns, blocklistWalletRdns, checkNetwork, showBackButton, onBackButtonClick, themeOverrides, }: ConnectWalletProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/purchase/components/PurchaseConnectWalletDrawer.d.ts

@@ -17,6 +17,7 @@ type PurchaseConnectWalletDrawerProps = {
         rdns: string;
     }[];
     shouldIdentifyUser?: boolean;
+    drawerBackground: string | undefined;
 };
-export declare function PurchaseConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize, disabledOptions, shouldIdentifyUser, }: PurchaseConnectWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PurchaseConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, providerType, walletOptions, bottomSlot, menuItemSize, disabledOptions, shouldIdentifyUser, drawerBackground, }: PurchaseConnectWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/purchase/components/PurchaseDeliverToWalletDrawer.d.ts

@@ -5,6 +5,7 @@ type PurchaseDeliverToWalletDrawerProps = {
     onClose: (toAddress?: string) => void;
     walletOptions: EIP6963ProviderDetail[];
     onConnect?: (providerType: 'from' | 'to', provider: BrowserProvider, providerInfo: EIP6963ProviderInfo) => void;
+    drawerBackground: string | undefined;
 };
-export declare function PurchaseDeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, }: PurchaseDeliverToWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PurchaseDeliverToWalletDrawer({ visible, onClose, onConnect, walletOptions, drawerBackground, }: PurchaseDeliverToWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/purchase/components/PurchasePayWithWalletDrawer.d.ts

@@ -7,6 +7,7 @@ type PurchasePayWithWalletDrawerProps = {
     walletOptions: EIP6963ProviderDetail[];
     insufficientBalance?: boolean;
     showOnRampOption?: boolean;
+    drawerBackground: string | undefined;
 };
-export declare function PurchasePayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walletOptions, insufficientBalance, showOnRampOption, }: PurchasePayWithWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PurchasePayWithWalletDrawer({ visible, onClose, onConnect, onPayWithCard, walletOptions, insufficientBalance, showOnRampOption, drawerBackground, }: PurchasePayWithWalletDrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/purchase/views/Purchase.d.ts

@@ -1,10 +1,11 @@
-import { Checkout } from '@imtbl/checkout-sdk';
+import { Checkout, ThemeOverrides } from '@imtbl/checkout-sdk';
 interface PurchaseProps {
     checkout: Checkout;
     environmentId: string;
     showBackButton?: boolean;
     onCloseButtonClick?: () => void;
     onBackButtonClick?: () => void;
+    themeOverrides: ThemeOverrides;
 }
-export declare function Purchase({ checkout, environmentId, onCloseButtonClick, showBackButton, onBackButtonClick, }: PurchaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Purchase({ checkout, environmentId, onCloseButtonClick, showBackButton, onBackButtonClick, themeOverrides, }: PurchaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/widgets/swap/components/SwapForm.d.ts

@@ -1,9 +1,10 @@
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { SwapFormData } from './swapFormTypes';
 export interface SwapFromProps {
     data?: SwapFormData;
     theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
     cancelAutoProceed: () => void;
     subTitle: string;
 }
-export declare function SwapForm({ data, theme, cancelAutoProceed, subTitle, }: SwapFromProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, }: SwapFromProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/swap/views/SwapCoins.d.ts

@@ -1,6 +1,7 @@
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 export interface SwapCoinsProps {
     theme: WidgetTheme;
+    themeOverrides: ThemeOverrides;
     cancelAutoProceed: () => void;
     fromAmount?: string;
     toAmount?: string;
@@ -11,4 +12,4 @@ export interface SwapCoinsProps {
     title: string;
     subTitle: string;
 }
-export declare function SwapCoins({ theme, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, showBackButton, showHeader, title, subTitle, }: SwapCoinsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SwapCoins({ theme, themeOverrides, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, showBackButton, showHeader, title, subTitle, }: SwapCoinsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.7.6-alpha.3",
+  "version": "2.7.6-alpha.4",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,12 +18,12 @@
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
     "@emotion/react": "^11.11.3",
-    "@imtbl/bridge-sdk": "2.7.6-alpha.3",
-    "@imtbl/checkout-sdk": "2.7.6-alpha.3",
-    "@imtbl/config": "2.7.6-alpha.3",
-    "@imtbl/cryptofiat": "2.7.6-alpha.3",
-    "@imtbl/dex-sdk": "2.7.6-alpha.3",
-    "@imtbl/passport": "2.7.6-alpha.3",
+    "@imtbl/bridge-sdk": "2.7.6-alpha.4",
+    "@imtbl/checkout-sdk": "2.7.6-alpha.4",
+    "@imtbl/config": "2.7.6-alpha.4",
+    "@imtbl/cryptofiat": "2.7.6-alpha.4",
+    "@imtbl/dex-sdk": "2.7.6-alpha.4",
+    "@imtbl/passport": "2.7.6-alpha.4",
     "@imtbl/react-analytics": "0.3.4-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",

package/src/components/CoinSelector/CoinSelector.tsx

@@ -18,6 +18,7 @@ type CoinSelectorProps = {
   optionsLoading?: boolean;
   children?: any;
   visible?: boolean;
+  drawerBackground: string | undefined;
 };
 
 const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) => {
@@ -28,7 +29,7 @@ const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) =>
 };
 
 export function CoinSelector({
-  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible,
+  heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, drawerBackground,
 }: CoinSelectorProps) {
   const { t } = useTranslation();
 
@@ -43,7 +44,7 @@ export function CoinSelector({
       return options;
     }
     return filterOptions(searchValue, options);
-  }, [options, searchValue, filterOptions]);
+  }, [options, searchValue]);
 
   const handleCloseDrawer = () => {
     setSearchValue('');
@@ -51,7 +52,13 @@ export function CoinSelector({
   };
 
   return (
-    <Drawer headerBarTitle={heading} size="full" onCloseDrawer={handleCloseDrawer} visible={visible}>
+    <Drawer
+      headerBarTitle={heading}
+      size="full"
+      onCloseDrawer={handleCloseDrawer}
+      visible={visible}
+      bgOverlaySx={drawerBackground ? { background: drawerBackground } : undefined}
+    >
       <Drawer.Target>
         {children}
       </Drawer.Target>

package/src/components/FormComponents/SelectForm/SelectForm.tsx

@@ -3,7 +3,7 @@ import {
 } from '@biom3/react';
 import { useCallback, useMemo, useState } from 'react';
 import { Environment } from '@imtbl/config';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { TokenImage } from '../../TokenImage/TokenImage';
 import { FormControlWrapper } from '../FormControlWrapper/FormControlWrapper';
 import { CoinSelector } from '../../CoinSelector/CoinSelector';
@@ -26,7 +26,8 @@ interface SelectFormProps {
   screen: string;
   control: string;
   environment?: Environment;
-  theme?: WidgetTheme,
+  theme: WidgetTheme,
+  themeOverrides: ThemeOverrides,
 }
 
 export function SelectForm({
@@ -45,7 +46,8 @@ export function SelectForm({
   screen,
   control,
   environment = Environment.PRODUCTION,
-  theme = WidgetTheme.DARK,
+  theme,
+  themeOverrides,
 }: SelectFormProps) {
   const { track } = useAnalytics();
   const [coinSelectorOpen, setCoinSelectorOpen] = useState<boolean>(false);
@@ -87,6 +89,7 @@ export function SelectForm({
         optionsLoading={optionsLoading ?? false}
         visible={coinSelectorOpen}
         onCloseDrawer={() => setCoinSelectorOpen(false)}
+        drawerBackground={themeOverrides.drawerBackground}
       />
       <FormControlWrapper
         testId={`${testId}-select-control`}

package/src/components/FormComponents/SelectInput/SelectInput.tsx

@@ -1,5 +1,5 @@
 import { Box, OptionKey } from '@biom3/react';
-import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import {
   inputStyle,
@@ -12,7 +12,6 @@ import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 interface SelectInputProps {
-
   testId: string;
   options: CoinSelectorOptionProps[];
   selectTextAlign?: 'left' | 'right';
@@ -40,7 +39,8 @@ interface SelectInputProps {
   screen: string;
   control: string;
   environment?: Environment;
-  theme?: WidgetTheme;
+  theme: WidgetTheme;
+  themeOverrides: ThemeOverrides;
 }
 
 export function SelectInput({
@@ -72,6 +72,7 @@ export function SelectInput({
   control,
   environment,
   theme,
+  themeOverrides,
 }: SelectInputProps) {
   return (
     <Box sx={selectInputBoxStyle}>
@@ -92,6 +93,7 @@ export function SelectInput({
           screen={screen}
           environment={environment}
           theme={theme}
+          themeOverrides={themeOverrides}
         />
       </Box>
       <Box sx={inputStyle}>

package/src/components/Transactions/Transactions.tsx

@@ -11,6 +11,7 @@ import {
   WalletProviderRdns,
   ChainSlug,
   Checkout,
+  ThemeOverrides,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { JsonRpcProvider } from 'ethers';
@@ -60,6 +61,7 @@ import { WalletChangeEvent } from '../WalletDrawer/WalletDrawerEvents';
 type TransactionsProps = {
   defaultTokenImage: string;
   onBackButtonClick: () => void;
+  themeOverrides: ThemeOverrides;
 };
 
 const getTransactionsDetails = async (tokenBridge: TokenBridge, checkout: Checkout, recipient: string) => {
@@ -99,6 +101,7 @@ const getTransactionsDetails = async (tokenBridge: TokenBridge, checkout: Checko
 export function Transactions({
   defaultTokenImage,
   onBackButtonClick,
+  themeOverrides,
 }: TransactionsProps) {
   const {
     eventTargetState: { eventTarget },
@@ -448,6 +451,7 @@ export function Transactions({
             setShowWalletDrawer(show);
           }}
           onWalletChange={handleWalletChange}
+          drawerBackground={themeOverrides.drawerBackground}
         />
       </Box>
     </SimpleLayout>

package/src/components/WalletDrawer/ConnectWalletDrawer.tsx

@@ -46,6 +46,7 @@ type ConnectWalletDrawerProps = {
   }[];
   getShouldRequestWalletPermissions?: (providerInfo: EIP6963ProviderInfo) => boolean | undefined;
   shouldIdentifyUser?: boolean;
+  drawerBackground: string | undefined;
 };
 
 export function ConnectWalletDrawer({
@@ -61,6 +62,7 @@ export function ConnectWalletDrawer({
   disabledOptions = [],
   getShouldRequestWalletPermissions,
   shouldIdentifyUser = true,
+  drawerBackground,
 }: ConnectWalletDrawerProps) {
   const {
     providersState: { checkout, fromProvider, lockedToProvider },
@@ -222,6 +224,7 @@ export function ConnectWalletDrawer({
         }}
         onWalletChange={handleOnWalletChangeEvent}
         bottomSlot={bottomSlot}
+        drawerBackground={drawerBackground}
       />
       <UnableToConnectDrawer
         visible={showUnableToConnectDrawer}

package/src/components/WalletDrawer/DeliverToWalletDrawer.tsx

@@ -16,6 +16,7 @@ type DeliverToWalletDrawerProps = {
     provider: WrappedBrowserProvider,
     providerInfo: EIP6963ProviderInfo
   ) => void;
+  drawerBackground: string | undefined;
 };
 
 export function DeliverToWalletDrawer({
@@ -23,6 +24,7 @@ export function DeliverToWalletDrawer({
   onClose,
   onConnect,
   walletOptions,
+  drawerBackground,
 }: DeliverToWalletDrawerProps) {
   const {
     providersState: { fromProviderInfo },
@@ -50,6 +52,7 @@ export function DeliverToWalletDrawer({
       providerType="to"
       walletOptions={walletOptions}
       onConnect={handleOnConnect}
+      drawerBackground={drawerBackground}
       getShouldRequestWalletPermissions={
         selectedSameFromWalletType
       }

package/src/components/WalletDrawer/PayWithWalletDrawer.tsx

@@ -13,6 +13,7 @@ type PayWithWalletDrawerProps = {
   walletOptions: EIP6963ProviderDetail[];
   insufficientBalance?: boolean;
   showOnRampOption?: boolean;
+  drawerBackground: string | undefined;
 };
 
 export function PayWithWalletDrawer({
@@ -23,6 +24,7 @@ export function PayWithWalletDrawer({
   walletOptions,
   insufficientBalance,
   showOnRampOption = true,
+  drawerBackground,
 }: PayWithWalletDrawerProps) {
   const { t } = useTranslation();
   const { providersState: { fromProviderInfo } } = useProvidersContext();
@@ -79,6 +81,7 @@ export function PayWithWalletDrawer({
       bottomSlot={payWithCardItem}
       onConnect={handleOnConnect}
       shouldIdentifyUser={false}
+      drawerBackground={drawerBackground}
     />
   );
 }

package/src/components/WalletDrawer/WalletDrawer.tsx

@@ -35,7 +35,9 @@ interface WalletDrawerProps {
     label: string;
     rdns: string;
   }[];
+  drawerBackground: string | undefined;
 }
+
 export function WalletDrawer({
   testId,
   drawerText,
@@ -48,6 +50,7 @@ export function WalletDrawer({
   menuItemSize,
   bottomSlot,
   disabledOptions,
+  drawerBackground,
 }: WalletDrawerProps) {
   const { t } = useTranslation();
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
@@ -105,6 +108,7 @@ export function WalletDrawer({
         setShowDrawer(false);
       }}
       visible={showDrawer}
+      bgOverlaySx={drawerBackground ? { background: drawerBackground } : undefined}
     >
       {showWalletSelectorTarget && (
         <Drawer.Target>

package/src/context/view-context/test-components/ViewContextTestComponent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Checkout, WidgetTheme } from '@imtbl/checkout-sdk';
 import { I18nextProvider } from 'react-i18next';
+import { Environment } from '@imtbl/config';
 import { ThemeProvider } from '../../../components/ThemeProvider/ThemeProvider';
 import { withDefaultWidgetConfigs } from '../../../lib/withDefaultWidgetConfig';
 import { CustomAnalyticsProvider } from '../../analytics-provider/CustomAnalyticsProvider';
@@ -14,6 +15,12 @@ export interface TestProps {
 export function ViewContextTestComponent({ children, theme }: TestProps) {
   const config = withDefaultWidgetConfigs({
     theme: theme ?? WidgetTheme.DARK,
+    themeOverrides: undefined,
+    environment: Environment.SANDBOX,
+    isOnRampEnabled: true,
+    isSwapEnabled: true,
+    isBridgeEnabled: true,
+    isAddTokensEnabled: true,
   });
   return (
     <I18nextProvider i18n={i18n}>