@funkit/connect 3.2.1 → 3.3.0

package/dist/components/FunConnectOptions/FunWeb3ConnectingStep.d.ts

@@ -4,5 +4,5 @@ interface Props {
     selectedWallet: WalletConnector | undefined;
     qrCodeUri: string;
 }
-export declare const FunWeb3ConnectingStep: ({ selectedWallet, qrCodeUri }: Props) => React.JSX.Element;
+export declare const FunWeb3ConnectingStep: ({ selectedWallet, qrCodeUri }: Props) => React.JSX.Element | null;
 export {};

package/dist/components/FunCountdown/FunCountdown.css.d.ts

@@ -1,2 +1,4 @@
 export declare const backgroundRing: string;
 export declare const counterRing: string;
+export declare const pendingBackgroundRing: string;
+export declare const pendingRing: string;

package/dist/components/FunDivider/FunDivider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
 interface FunDividerProps {
-    marginTop?: BoxProps['margin'];
-    marginBottom?: BoxProps['margin'];
+    marginTop?: BoxProps['marginTop'];
+    marginBottom?: BoxProps['marginBottom'];
     borderColor?: BoxProps['borderColor'];
     transparent?: boolean;
     label?: string;

package/dist/components/FunNotification/FunNotification.d.ts

@@ -11,7 +11,7 @@ interface FunNotificationProps {
     containerProps?: React.ComponentProps<typeof Box>;
     isVisible?: boolean;
 }
-type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
+export type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
 /**
  * A notification/message component with height resizing animation.
  * Control visibility by enabling/disabling `isVisible` prop instead of doing an outer conditional rendering.

package/dist/components/FunOptionBox/FunOptionBox.css.d.ts

@@ -1 +1 @@
-export declare const funOptionBoxStyle: Record<"defaultBorder" | "defaultBackground" | "baseStyle" | "transparentBorder" | "activeBorder" | "paymentOptionBorderDisabledBorder" | "activeBackground", string>;
+export declare const funOptionBoxStyle: Record<"baseStyle" | "defaultBorder" | "transparentBorder" | "activeBorder" | "paymentOptionBorderDisabledBorder" | "defaultBackground" | "activeBackground", string>;

package/dist/components/FunPayments/FunPaymentMethods.d.ts

@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
-import { PaymentMethod, PaymentMethodInfo } from '../../consts/payment';
+import { PaymentMethod, PaymentMethodInfo } from '../../domains/paymentMethods';
 import { SelectMethodPayloadData } from '../../modals/CheckoutModal/SelectPaymentMethod';
+import { FunkitActiveCheckoutItem, ServerPaymentMethodInfo } from '../../providers/FunkitCheckoutContext';
+import { FunkitTextCustomizationsConfig, FunkitUiCustomRecipientConfig } from '../../providers/FunkitConfigContext';
 export declare function ConnectWalletItem({ checkoutId, isClickable, }: {
     checkoutId: string;
     isClickable?: boolean;
@@ -15,17 +17,35 @@ export declare function AddPaymentMethodItem({ paymentMethod, checkoutId, isClic
     dynamicLimit?: string;
     customValueIcon?: ReactNode;
 }): React.JSX.Element;
-export declare function ExistingPaymentMethodItem({ paymentMethodInfo, }: {
+interface PaymentMethodSummaryProps {
     paymentMethodInfo: PaymentMethodInfo;
-}): React.JSX.Element;
+    walletAddress: string | undefined;
+    customRecipient: string | undefined;
+    walletIcon: ReactNode;
+    isLoading: boolean;
+    estimatedTime: number;
+    customizationConfig?: FunkitUiCustomRecipientConfig;
+}
+export declare function PaymentMethodSummary({ paymentMethodInfo, walletAddress, customRecipient, walletIcon, estimatedTime, isLoading, customizationConfig, }: PaymentMethodSummaryProps): React.JSX.Element;
+export declare const getPaymentMethodItemTextAndIcon: (methodInfo: PaymentMethodInfo | ServerPaymentMethodInfo) => {
+    text: string;
+    icon: React.JSX.Element;
+};
+interface PaymentAmountSummaryProps {
+    isLoading: boolean;
+    targetChainId: string;
+    checkoutItem: FunkitActiveCheckoutItem | null;
+    textCustomizations: FunkitTextCustomizationsConfig['confirmationScreen'];
+}
+export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
 /**
  * Handle selection and adding of payment methods
  */
-export declare function FunPaymentMethods({ checkoutId, onSelect, isDisabled, depositAmount, isLoadingGeoCheck, onCloseWrapper, }: {
+export declare function FunPaymentMethods({ checkoutId, onSelect, isDisabled, isLoadingGeoCheck, onCloseWrapper, }: {
     checkoutId: string;
     onSelect: (selectMethodData: SelectMethodPayloadData) => void;
     isDisabled?: boolean;
-    depositAmount: number;
     isLoadingGeoCheck: boolean;
     onCloseWrapper: () => void;
 }): React.JSX.Element;
+export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,9 +1,8 @@
 import './FunTxSummaryComponents.css';
-import React, { ReactNode } from 'react';
-export declare function FunTxSummaryBox({ children }: {
-    children: any;
-}): React.JSX.Element;
-export declare function FunTxSummaryLineItem({ children, ...otherProps }: any): React.JSX.Element;
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { BoxProps } from '../Box/Box';
+export declare function FunTxSummaryBox({ children }: PropsWithChildren): React.JSX.Element;
+export declare function FunTxSummaryLineItem({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItemCollapsibleTrigger({ children, isDisabled, onClick, }: {
     children: ReactNode;
     isDisabled: boolean;

package/dist/components/FunTransactionSummary/PaymentFeesSummary.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
+export declare function PaymentFeesSummary({ isLoading, checkoutItem, }: {
+    isLoading: boolean;
+    checkoutItem: FunkitActiveCheckoutItem | null;
+}): React.JSX.Element;

package/dist/components/Icons/CopyDoublePaperSheetIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Copy icon that looks like 2 sheets of paper on top of each other
+ */
+export declare const CopyDoublePaperSheetIcon: () => React.JSX.Element;

package/dist/components/Icons/CopyDoubleRoundedSquareIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Copy icon that looks like 2 rounded squares on top of each other
+ */
+export declare const CopyDoubleRoundedSquareIcon: () => React.JSX.Element;

package/dist/components/Icons/Gas.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const GasIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/LightningBoltIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LightningBoltIcon: () => React.JSX.Element;

package/dist/components/Icons/PaymentMethodIcons.d.ts

@@ -1,16 +1,13 @@
 import React from 'react';
 import { FunkitUserInfoBase } from '../../consts/funkit';
-import { PaymentMethod } from '../../consts/payment';
+import { PaymentMethod } from '../../domains/paymentMethods';
 export declare const CreditCardIcon: () => React.JSX.Element;
 export declare const AchBankIcon: () => React.JSX.Element;
-export declare const TransferCryptoIcon: ({ color, }: {
-    color?: string;
-}) => React.JSX.Element;
 export declare const BrokerageIcon: () => React.JSX.Element;
 export declare const PAYMENT_METHOD_ICONS: {
     brokerage: React.JSX.Element;
     card: React.JSX.Element;
-    transfer: React.JSX.Element;
+    token_transfer: React.JSX.Element;
 };
 type AccountInfo = {
     loginType: 'web2' | 'web3';

package/dist/components/QRCode/QRCode.d.ts

@@ -1,5 +1,6 @@
 import QRCodeUtil from 'qrcode';
 import React from 'react';
+import { BoxProps } from '../Box/Box';
 type Props = {
     ecl?: QRCodeUtil.QRCodeErrorCorrectionLevel;
     logoBackground?: string;
@@ -8,6 +9,12 @@ type Props = {
     logoSize?: number;
     size?: number;
     uri: string;
+    outsidePadding?: BoxProps['padding'];
+    enableCornerMarkersRadius?: boolean;
+    enableOuterBorder?: boolean;
 };
-export declare function QRCode({ ecl, logoBackground, logoMargin, logoSize, logoUrl, size: sizeProp, uri, }: Props): React.JSX.Element;
+/**
+ * CAUTION: The size of the rendered QR code needs to be tested for the longest encoded {@link uri} string to make sure it's still readable/scannable.
+ */
+export declare function QRCode({ ecl, logoBackground, logoMargin, logoSize, logoUrl, size: sizeProp, uri, outsidePadding, enableCornerMarkersRadius, enableOuterBorder, }: Props): React.JSX.Element;
 export {};

package/dist/css/sprinkles.css.d.ts

@@ -11,6 +11,8 @@ declare const themeContractValues: {
         connectButtonTextError: string;
         connectionIndicator: string;
         error: string;
+        errorBackground: string;
+        errorBorder: string;
         generalBorder: string;
         generalBorderDim: string;
         menuItemBackground: string;
@@ -28,6 +30,8 @@ declare const themeContractValues: {
         offBackground: string;
         hoverState: string;
         offBackgroundInverse: string;
+        lightStroke: string;
+        strokeColor: string;
         dydxSwitchActiveBackground: string;
         primaryText: string;
         secondaryText: string;
@@ -151,6 +155,8 @@ export declare const themeVars: {
         connectButtonTextError: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         connectionIndicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        errorBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         generalBorder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         generalBorderDim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         menuItemBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -168,6 +174,8 @@ export declare const themeVars: {
         offBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         hoverState: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         offBackgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lightStroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strokeColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dydxSwitchActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         secondaryText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -477,21 +485,21 @@ export declare const normalizeResponsiveValue: <Value extends string | number |
     };
 }, Value>) => Partial<Record<"smallScreen" | "largeScreen", Value>>;
 export declare const sprinkles: ((props: {
-    background?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+    background?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
-    borderColor?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+    borderColor?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
     boxShadow?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | {
         base?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
@@ -501,13 +509,13 @@ export declare const sprinkles: ((props: {
         focused?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
         focusedVisible?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
     } | undefined;
-    color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
-        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+    color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
+        focusedVisible?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "errorBackground" | "errorBorder" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "selectedOptionBorder" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "lightStroke" | "strokeColor" | "dydxSwitchActiveBackground" | "primaryText" | "secondaryText" | "tertiaryText" | "textSelection" | "inputBackground" | "inputBorderBase" | "inputBorderHover" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextDisabled" | "buttonBackgroundTertiary" | "buttonBackgroundHoverTertiary" | "buttonTextTertiary" | "buttonTextDisabledTertiary" | "buttonStrokeTertiary" | "buttonBackground" | "buttonBackgroundHover" | "buttonBackgroundDisabled" | "buttonText" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
 } & {
     alignItems?: "center" | "flex-end" | "flex-start" | {
@@ -521,7 +529,7 @@ export declare const sprinkles: ((props: {
 } & {
     readonly alignSelf?: "center" | "flex-end" | "flex-start" | undefined;
     readonly backgroundSize?: "cover" | undefined;
-    readonly borderRadius?: "1" | "8" | "10" | "13" | "16" | "actionButton" | "connectButton" | "menuButton" | "modal" | "modalMobile" | "4" | "6" | "24" | "25%" | "full" | undefined;
+    readonly borderRadius?: "1" | "8" | "10" | "13" | "16" | "actionButton" | "connectButton" | "menuButton" | "modal" | "modalMobile" | "4" | "6" | "11" | "24" | "25%" | "full" | undefined;
     readonly borderStyle?: "dotted" | "hidden" | "solid" | undefined;
     readonly borderWidth?: "0" | "1" | "2" | "3" | "4" | "0.5" | undefined;
     readonly cursor?: "default" | "not-allowed" | "pointer" | undefined;
@@ -529,35 +537,35 @@ export declare const sprinkles: ((props: {
     readonly fontFamily?: "body" | undefined;
     readonly fontSize?: "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "23" | "40" | "57" | undefined;
     readonly fontWeight?: "medium" | "bold" | "regular" | "semibold" | "heavy" | undefined;
-    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly gap?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly height?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly justifyContent?: "center" | "space-around" | "space-between" | "flex-end" | "flex-start" | undefined;
     readonly textAlign?: "inherit" | "left" | "right" | "center" | undefined;
-    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    readonly minHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxHeight?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly minWidth?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "24" | "full" | "11" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "40" | "57" | "2" | "4" | "11" | "24" | "full" | "15" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "72" | "93" | "96" | "100" | "108" | "120" | "162" | "180" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
-    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
-    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "11" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | "-18" | undefined;
+    padding?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingX?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
+    paddingY?: "0" | "1" | "8" | "10" | "12" | "13" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "11" | "24" | "15" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "64" | undefined;
 }) => string) & {
     properties: Set<"alignItems" | "alignSelf" | "backdropFilter" | "backgroundSize" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "fontFamily" | "fontSize" | "fontWeight" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "userSelect" | "width" | "background" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "transition" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };