@funkit/connect 3.2.1 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @funkit/connect
 
+## 3.4.0
+
+### Minor Changes
+
+- ba0cd1e: feat: add risk checks and blocks
+- 05e6eb8: feat: add qrcode transfer payment method
+
+### Patch Changes
+
+- 3082828: fix: update copy in payments
+- a634af7: fix: update link for Terms of Use
+- cac9e3b: fix: visual improvements for the UI on Token transfer flow
+- 965e97f: refactor: fee & copy improvements
+- 166b42d: fix: fix amount option alignment
+- cd74802: fix: QA update payment method items spacings, sizes & colors
+- 70edb05: fix: remove gas token from you will pay
+- eda7d89: fix: fix vertical spacing of CheckoutPrimaryInfo
+- 51403d9: feat: add fee summary animation
+- 9afdbe0: feat: new flags - enable_token_transfer, token_transfer_source_chains_and_assets flag
+- 8482aaa: fix: fix signature declined text color
+- cd74802: fix: fix icon size on order review page & make web2 icons dynamic in size
+- a945024: fix: update fees
+- 1865f09: fix(connect): fix mobile spacing in input amount step
+- 917aaa6: fix: blur FunOptionBox button after firing the onClick callback
+- 05fdb65: feat: correct calculate the wallet transfer fee
+- 5fe1d08: fix: do not always refresh quote after transaction denied
+- 009bfd3: fix: add datadog service label
+- e6e1d28: refactor: quote expiry error message & deprecate FunToast component
+- 00727dd: feat: add flag to disable all zksync
+- db5899f: feat: remove continue from source change
+- cac086a: feat: add get help to successful/processing checkouts
+- b2226a0: chore: combine buttonText variable with buttonTextPrimary
+- dd776d2: fix: fix order history padding
+- 7ac3be9: feat: remove visual onClick feedback from currently selected option
+- Updated dependencies [05e6eb8]
+- Updated dependencies [00727dd]
+  - @funkit/api-base@1.3.0
+  - @funkit/core@2.2.0
+  - @funkit/wagmi-tools@3.0.11
+
+## 3.3.0
+
+### Minor Changes
+
+- 54b7db3: add dropdown component for token transfer selection
+- 54b7db3: add fee breakdown and new post checkout pages
+
+### Patch Changes
+
+- 54b7db3: chagne dydx switcher location
+- 54b7db3: fix(connect): cancel pending checkout upon closing connect modal
+- Updated dependencies [54b7db3]
+  - @funkit/api-base@1.2.0
+  - @funkit/core@2.1.8
+  - @funkit/wagmi-tools@3.0.10
+
 ## 3.2.1
 
 ### Patch Changes

package/README.md

@@ -2,9 +2,6 @@
 
 The `@funkit/connect` package elevates decentralize applications via web2 & web3 sign-ins together with one-click onramps & checkouts.
 
-- 🔗 [v0 Integration guide](https://the-fun-group.notion.site/funkit-connect-integration-guide-90efe96a9f4e40d99cc49e7abecdc437)
-- 🔗 v1 Integration guide (TBD)
-
 ### Version Information
 
 - Package versions `< 1.x.x` support wagmi v1 only.

package/dist/{chunk-76VEFMWE.js → chunk-77C753LI.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-HFT6OV3T.js";
+} from "./chunk-BY224HGT.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
@@ -32,6 +32,8 @@ var lightTheme = ({
     connectButtonTextError: "#FFF",
     connectionIndicator: "#30E000",
     error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
     generalBorder: "#F7F7F7",
     // strokeColor in figma
     generalBorderDim: "rgba(0, 0, 0, 0.03)",
@@ -52,6 +54,9 @@ var lightTheme = ({
     offBackground: "#F7F7F7",
     hoverState: "#F0F0F0",
     offBackgroundInverse: "#333",
+    lightStroke: "#F7F7F7",
+    mediumStroke: "#F0F0F0",
+    strokeColor: "#E8E8E8",
     dydxSwitchActiveBackground: "#F7F7F7",
     //Text
     primaryText: "#000",
@@ -83,7 +88,6 @@ var lightTheme = ({
     buttonBackground: "#000",
     buttonBackgroundHover: "#333333",
     buttonBackgroundDisabled: "rgba(0, 0, 0, 0.5)",
-    buttonText: "#FFF",
     buttonStroke: "rgba(0, 0, 0, 0.5)",
     buttonTextSecondaryDisabled: "rgba(0, 0, 0, 0.5)",
     buttonTextSecondary: "#000000",

package/dist/{chunk-HFT6OV3T.js → chunk-BY224HGT.js}

@@ -56,7 +56,7 @@ var DEFAULT_FONT_WEIGHTS = {
 var DEFAULT_FONT_SIZES = {
   "8": { fontSize: "8px", lineHeight: "10px" },
   "10": { fontSize: "10px", lineHeight: "15px" },
-  "12": { fontSize: "12px", lineHeight: "18px" },
+  "12": { fontSize: "12px", lineHeight: "14px" },
   "13": { fontSize: "13px", lineHeight: "18px" },
   "14": { fontSize: "14px", lineHeight: "18px" },
   "16": { fontSize: "16px", lineHeight: "20px" },

package/dist/{chunk-EUSK63OY.js → chunk-XWW5QOD4.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-HFT6OV3T.js";
+} from "./chunk-BY224HGT.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {
@@ -32,6 +32,8 @@ var darkTheme = ({
     connectButtonTextError: "#FFF",
     connectionIndicator: "#30E000",
     error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
     generalBorder: "#292929",
     // strokeColor in figma
     generalBorderDim: "rgba(255, 255, 255, 0.04)",
@@ -52,6 +54,9 @@ var darkTheme = ({
     offBackground: "#1F1F1F",
     hoverState: "#333333",
     offBackgroundInverse: "#F2F2F2",
+    lightStroke: "#333333",
+    mediumStroke: "#333333",
+    strokeColor: "#333333",
     dydxSwitchActiveBackground: "#181825",
     //Text
     primaryText: "#FFF",
@@ -83,7 +88,6 @@ var darkTheme = ({
     buttonBackground: "#FFF",
     buttonBackgroundHover: "#f2f2f2",
     buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
-    buttonText: "#000",
     buttonStroke: "rgba(255, 255, 255, 0.35)",
     buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
     buttonTextSecondary: "#FFFFFF",

package/dist/components/Box/Box.d.ts

@@ -1,22 +1,23 @@
 import { ClassValue } from 'clsx';
 import * as React from 'react';
+export type BoxBorderType = Pick<BoxProps, 'borderColor' | 'borderStyle' | 'borderWidth'>;
 type HTMLProperties<T = HTMLElement> = Omit<React.AllHTMLAttributes<T>, 'as' | 'className' | 'color' | 'height' | 'width'>;
 export declare const Box: React.ForwardRefExoticComponent<{
-    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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
     boxShadow?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | {
         base?: "button" | "connectButton" | "dialog" | "selectedOption" | "selectedWallet" | undefined;
@@ -26,13 +27,13 @@ export declare const Box: React.ForwardRefExoticComponent<{
         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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "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" | "mediumStroke" | "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" | "buttonStroke" | "buttonTextSecondaryDisabled" | "buttonTextSecondary" | "buttonIconBackgroundHover" | "buttonIconBackgroundPressed" | "buttonIconStroke" | undefined;
     } | undefined;
 } & {
     alignItems?: "center" | "flex-end" | "flex-start" | {
@@ -46,7 +47,7 @@ export declare const Box: React.ForwardRefExoticComponent<{
 } & {
     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;
@@ -54,35 +55,35 @@ export declare const Box: React.ForwardRefExoticComponent<{
     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" | "7" | "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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "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" | "7" | "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" | "7" | "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" | "7" | "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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "9" | "64" | "-18" | "-12" | 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" | "7" | "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" | "7" | "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" | "7" | "9" | "64" | undefined;
 } & {
     reset?: keyof JSX.IntrinsicElements;
 } & HTMLProperties<HTMLElement> & {

package/dist/components/CopyAddress/CopyAddress.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 export declare function CopyAddress({ address, type, showAddress, }: {
     address: string;
-    type: 'button' | 'kv';
+    /**
+     * `rounded_button` shows just a copy icon in a rounded button, renders a `button` wrapper DOM element
+     * `large_button` shows a copy icon with the `Copy Address` text in a `FunKeyValue` component, renders a `div` wrapper DOM element
+     * `display_address` shows a copy icon with the address in a `Box`, renders a `div` wrapper DOM element
+     *
+     */
+    type: 'rounded_button' | 'large_button' | 'display_address';
     showAddress?: boolean;
 }): React.JSX.Element | null;

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

@@ -1,14 +1,11 @@
+import { ComplexStyleRule } from '@vanilla-extract/css';
 export declare const DialogAnimationTimeIn = 250;
 export declare const DialogAnimationTimeOut = 120;
 export declare const overlay: string;
 export declare const overlayOut: string;
 export declare const content: string;
 export declare const contentSlideOut: string;
-export declare const titleSection: {
-    animationDuration: string;
-    animationTimingFunction: string;
-    animationFillMode: string;
-};
+export declare const titleSection: ComplexStyleRule;
 export declare const animateTitleInClass: string;
 export declare const animateTitleOutClass: string;
 export declare const dydxTitle: string;

package/dist/components/Dialog/Dialog.d.ts

@@ -19,8 +19,8 @@ export declare function Dialog({ children, onClose, open, titleId, isHidden, isS
 export declare namespace Dialog {
     var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, backAnimation, skipBackDelay, dydxHideBack, isCloseButtonHidden, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, paddingLeft, paddingBottom, className, withTopDivider, withBottomDivider, id, ...boxProps }: DialogContentProps) => React.JSX.Element;
-    var BottomSection: ({ paddingX, ...boxProps }: Omit<BoxProps, "children">) => React.JSX.Element;
-    var BottomBar: ({ topSection, actionButtonProps, bottomSection, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element;
+    var BottomSection: ({ paddingX, children, ...boxProps }: BoxProps) => React.JSX.Element;
+    var BottomBar: ({ topSection, actionButtonProps, bottomSection, onClose, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element;
 }
 interface DialogContentProps extends BoxProps {
     children: ReactNode;

package/dist/components/Dropdown/BaseActiveDropdownItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface BaseActiveDropdownItemProps {
+    iconComponent?: React.ReactNode;
+    label: string;
+    isOpened?: boolean;
+    onClick?: () => void;
+}
+/**
+ * Represents the component used to open the dropdown, usually displayed all the time.
+ */
+declare function BaseActiveDropdownItem({ iconComponent, label, isOpened, onClick, }: BaseActiveDropdownItemProps): React.JSX.Element;
+export default BaseActiveDropdownItem;

package/dist/components/Dropdown/BaseDropdown.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BaseActiveDropdownItemProps } from './BaseActiveDropdownItem';
+interface BaseDropdownOption {
+    label: string;
+    value: string;
+}
+interface BaseDropdownProps {
+    value: string;
+    activeItemProps: {
+        iconComponent: BaseActiveDropdownItemProps['iconComponent'];
+        label?: BaseActiveDropdownItemProps['label'];
+    };
+    options: BaseDropdownOption[];
+    onOptionSelected?: (item: BaseDropdownOption) => void;
+    renderDropdownOption: (item: BaseDropdownOption, isSelected: boolean) => React.ReactNode;
+    searchableOptions?: boolean;
+    placeholder?: string;
+    resetSearchOnClose?: boolean;
+    openToTopOnMobile?: boolean;
+    alwaysOpenToTop?: boolean;
+}
+declare function BaseDropdown({ activeItemProps, value, options, onOptionSelected, renderDropdownOption, searchableOptions, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, }: BaseDropdownProps): React.JSX.Element;
+export default BaseDropdown;

package/dist/components/Dropdown/BaseDropdownItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface BaseDropdownItemProps {
+    iconComponent?: React.ReactNode;
+    label: string;
+    id: string;
+    onClick?: (id: string) => void;
+    isSelected?: boolean;
+}
+/**
+ * Represents a single option in a dropdown.
+ */
+declare function BaseDropdownItem({ iconComponent, label, id, onClick, isSelected, }: BaseDropdownItemProps): React.JSX.Element;
+export default BaseDropdownItem;