@funkit/connect 2.0.7 → 3.0.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @funkit/connect
 
+## 3.0.0-next.0
+
+### Major Changes
+
+- b90e164: feat: v3 upgrade - phase 1 - baseline styles, themes, configuration
+
+### Patch Changes
+
+- Updated dependencies [b90e164]
+  - @funkit/core@2.1.2-next.0
+  - @funkit/wagmi-tools@3.0.4-next.0
+
 ## 2.0.7
 
 ### Patch Changes

package/dist/__private__/index.d.ts

@@ -1,4 +1,6 @@
+import { DevEmbed } from '../components/DevTest/DevEmbed';
 export declare const __private__: {
     dialogContent: string;
     dialogContentMobile: string;
+    DevEmbed: typeof DevEmbed;
 };

package/dist/{chunk-I24HX4XM.js → chunk-O57HO5YO.js}

@@ -8,7 +8,7 @@ var fontStacks = {
 };
 var radiusScales = {
   large: {
-    actionButton: "9999px",
+    actionButton: "12px",
     connectButton: "12px",
     modal: "24px",
     modalMobile: "28px"
@@ -40,7 +40,7 @@ var blurs = {
     modalOverlay: "blur(0px)"
   },
   small: {
-    modalOverlay: "blur(4px)"
+    modalOverlay: "blur(8px)"
   }
 };
 var DEFAULT_FONT_WEIGHTS = {
@@ -51,19 +51,22 @@ var DEFAULT_FONT_WEIGHTS = {
   heavy: "800"
 };
 var DEFAULT_FONT_SIZES = {
-  "10": { fontSize: "10px", lineHeight: "18px" },
+  "8": { fontSize: "8px", lineHeight: "10px" },
+  "10": { fontSize: "10px", lineHeight: "15px" },
   "12": { fontSize: "12px", lineHeight: "18px" },
   "13": { fontSize: "13px", lineHeight: "18px" },
   "14": { fontSize: "14px", lineHeight: "18px" },
   "16": { fontSize: "16px", lineHeight: "20px" },
   "18": { fontSize: "18px", lineHeight: "24px" },
-  "20": { fontSize: "20px", lineHeight: "24px" },
+  "20": { fontSize: "20px", lineHeight: "20px" },
   "23": { fontSize: "23px", lineHeight: "29px" },
+  "40": { fontSize: "40px", lineHeight: "48px" },
   "57": { fontSize: "57px", lineHeight: "68px" }
 };
 var FONT_SIZINGS = {
   regular: DEFAULT_FONT_SIZES,
   small: {
+    "8": { fontSize: "8px", lineHeight: "16px" },
     "10": { fontSize: "8px", lineHeight: "16px" },
     "12": { fontSize: "10px", lineHeight: "16px" },
     "13": { fontSize: "10px", lineHeight: "16px" },
@@ -72,6 +75,7 @@ var FONT_SIZINGS = {
     "18": { fontSize: "14px", lineHeight: "20px" },
     "20": { fontSize: "18px", lineHeight: "20px" },
     "23": { fontSize: "20px", lineHeight: "28px" },
+    "40": { fontSize: "34px", lineHeight: "40px" },
     "57": { fontSize: "50px", lineHeight: "60px" }
   }
 };
@@ -81,7 +85,7 @@ var baseTheme = ({
   fontSizing = "regular",
   customFontFamily = "",
   customFontWeights = DEFAULT_FONT_WEIGHTS,
-  overlayBlur = "none"
+  overlayBlur = "small"
 }) => ({
   blurs: {
     modalOverlay: blurs[overlayBlur].modalOverlay

package/dist/{chunk-BZPWFPPL.js → chunk-T74JTC6K.js}

@@ -1,16 +1,16 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-I24HX4XM.js";
+} from "./chunk-O57HO5YO.js";
 
 // src/themes/darkTheme.ts
 var accentColors = {
   blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
-  green: { accentColor: "#4BD166", accentColorForeground: "#000" },
-  orange: { accentColor: "#FF983D", accentColorForeground: "#000" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#000" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
   pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
   purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
-  red: { accentColor: "#FF6257", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
   white: { accentColor: "#FFF", accentColorForeground: "#000" }
 };
 var defaultAccentColor = accentColors.white;
@@ -33,13 +33,13 @@ var darkTheme = ({
     connectButtonText: "#FFF",
     connectButtonTextError: "#FFF",
     connectionIndicator: "#30E000",
-    error: "#FF494A",
-    generalBorder: "rgba(255, 255, 255, 0.08)",
+    error: accentColors.red.accentColor,
+    generalBorder: "#292929",
     generalBorderDim: "rgba(255, 255, 255, 0.04)",
     menuItemBackground: "rgba(255, 255, 255, 0.03)",
     modalText: "#FFF",
     modalTextDim: "rgba(255, 255, 255, 0.4)",
-    modalTextSecondary: "rgba(255, 255, 255, 0.6)",
+    modalTextSecondary: "rgba(255, 255, 255, 0.35)",
     profileAction: "rgba(255, 255, 255, 0.1)",
     profileActionHover: "rgba(255, 255, 255, 0.2)",
     profileForeground: "rgba(255, 255, 255, 0.06)",
@@ -48,16 +48,22 @@ var darkTheme = ({
     paymentOptionBorderHover: "transparent",
     paymentOptionBorderActive: "transparent",
     paymentOptionBorderActiveHover: "transparent",
+    paymentOptionBorderDisabled: "#333333",
     standby: "#F6851B",
+    success: "#66CC00",
     loadingBase: "rgba(255, 255, 255, 0.05)",
     loadingAccent: "rgba(255, 255, 255, 0.2)",
-    modalBackdrop: "rgba(0, 0, 0, 0.4)",
+    chainIconBorder: "#E5E5E5",
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
     modalBackground: "#1A1B1F",
-    modalBorder: "rgba(255, 255, 255, 0.10)",
+    modalBorder: "#292929",
     notificationPrimary: "rgba(255, 255, 255, 0.03)",
-    textPrimary: "#FFF",
-    textSecondary: "rgba(255, 255, 255, 0.4)",
-    textTertiary: "",
+    offBackground: "#1F1F1F",
+    hoverState: "#333333",
+    offBackgroundInverse: "#F2F2F2",
+    primaryText: "#FFF",
+    secondaryText: "#8C8C8C",
+    tertiaryText: "rgba(255, 255, 255, 0.35)",
     textDisabled: "",
     textSelection: "rgba(255, 255, 255, 0.10)",
     inputFieldPrimary: "#FFF",
@@ -65,13 +71,16 @@ var darkTheme = ({
     inputFieldDisabled: "",
     optionBackground: "rgba(255, 255, 255, 0.10)",
     optionBackgroundSecondary: "transparent",
+    actionColor: "#FFF",
+    actionColorHover: "rgba(255, 255, 255, 0.8)",
+    actionColorDisabled: "rgba(255, 255, 255, 0.65)",
     buttonPrimary: accentColor,
     buttonProcessing: accentColorForeground,
     buttonDisabled: "rgba(255, 255, 255, 0.20)",
     buttonTextPrimary: "#000000",
     buttonTextSecondary: "#FFFFFF",
-    buttonTextDisabled: "#000000",
-    buttonWarning: "#F34126",
+    buttonTextDisabled: "#595959",
+    buttonWarning: accentColors.red.accentColor,
     buttonSuccess: "#2EA200",
     buttonTextWarning: "#FFFFFF",
     buttonTextSuccess: "#FFFFFF",
@@ -85,6 +94,8 @@ var darkTheme = ({
     selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
     selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.24)",
     walletLogo: "0px 2px 16px rgba(0, 0, 0, 0.16)",
+    button: "0px 1px 2px 0px rgba(0, 0, 0, 0.20)",
+    callToAction: "0px 4px 4px rgba(0, 0, 0, 0.25)",
     ...customShadows || {}
   },
   moonpayTheme: "dark"

package/dist/{chunk-3AR2EI7X.js → chunk-X5AJP4CF.js}

@@ -1,17 +1,17 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-I24HX4XM.js";
+} from "./chunk-O57HO5YO.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
   blue: { accentColor: "#31A3F8", accentColorForeground: "#31A3F859" },
-  green: { accentColor: "#1DB847", accentColorForeground: "#FFF" },
-  orange: { accentColor: "#FF801F", accentColorForeground: "#FFF" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#FFF" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#FFF" },
   pink: { accentColor: "#FF5CA0", accentColorForeground: "#FFF" },
   purple: { accentColor: "#5F5AFA", accentColorForeground: "#FFF" },
-  red: { accentColor: "#FA423C", accentColorForeground: "#FFF" },
-  white: { accentColor: "#31A3F8", accentColorForeground: "#fff" }
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#000000", accentColorForeground: "#fff" }
 };
 var defaultAccentColor = accentColors.white;
 var lightTheme = ({
@@ -33,13 +33,13 @@ var lightTheme = ({
     connectButtonText: "#25292E",
     connectButtonTextError: "#FFF",
     connectionIndicator: "#30E000",
-    error: "#FF494A",
-    generalBorder: "rgba(0, 0, 0, 0.06)",
+    error: accentColors.red.accentColor,
+    generalBorder: "#F7F7F7",
     generalBorderDim: "rgba(0, 0, 0, 0.03)",
     menuItemBackground: "#FCFCFC",
     modalText: "rgba(0, 0, 0, 1)",
     modalTextDim: "rgba(60, 66, 66, 0.3)",
-    modalTextSecondary: "rgba(26, 27, 31, 0.35)",
+    modalTextSecondary: "rgba(0, 0, 0, 0.35)",
     profileAction: "#FFF",
     profileActionHover: "rgba(255, 255, 255, 0.40)",
     profileForeground: "rgba(60, 66, 66, 0.06)",
@@ -48,16 +48,22 @@ var lightTheme = ({
     paymentOptionBorderHover: "transparent",
     paymentOptionBorderActive: "transparent",
     paymentOptionBorderActiveHover: "transparent",
+    paymentOptionBorderDisabled: "#F7F7F7",
     standby: "#F6851B",
+    success: "#66CC00",
     loadingBase: "rgba(0, 0, 0, 0.05)",
     loadingAccent: "rgba(0, 0, 0, 0.2)",
-    modalBackdrop: "rgba(0, 0, 0, 0.4)",
+    chainIconBorder: "#E5E5E5",
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
     modalBackground: "#FFF",
-    modalBorder: "rgba(0, 0, 0, 0.05)",
+    modalBorder: "#F7F7F7",
     notificationPrimary: "rgba(49, 163, 248, 0.15)",
-    textPrimary: "#000000",
-    textSecondary: "#1A1B1F99",
-    textTertiary: "#1A1B1F59",
+    offBackground: "#F7F7F7",
+    hoverState: "#F0F0F0",
+    offBackgroundInverse: "#333",
+    primaryText: "#000",
+    secondaryText: "#737373",
+    tertiaryText: "rgba(0, 0, 0, 0.35)",
     textDisabled: "",
     textSelection: "rgba(0, 0, 0, 0.10)",
     inputFieldPrimary: "#000000",
@@ -65,10 +71,13 @@ var lightTheme = ({
     inputFieldDisabled: "#1A1B1F99",
     optionBackground: "rgba(0, 0, 0, 0.05)",
     optionBackgroundSecondary: "transparent",
+    actionColor: "#000",
+    actionColorHover: "rgba(0, 0, 0, 0.7)",
+    actionColorDisabled: "rgba(0, 0, 0, 0.50)",
     buttonPrimary: accentColor,
     buttonProcessing: accentColorForeground,
     buttonDisabled: "#31A3F826",
-    buttonWarning: "#F34126",
+    buttonWarning: accentColors.red.accentColor,
     buttonSuccess: "#2EA200",
     buttonTextWarning: "#FFFFFF",
     buttonTextSuccess: "#FFFFFF",
@@ -85,6 +94,8 @@ var lightTheme = ({
     selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
     selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
     walletLogo: "0px 2px 16px rgba(0, 0, 0, 0.16)",
+    button: "0px 1px 2px 0px rgba(0, 0, 0, 0.20)",
+    callToAction: "0px 4px 4px rgba(0, 0, 0, 0.25)",
     ...customShadows || {}
   },
   moonpayTheme: "light"

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

@@ -2,29 +2,33 @@ import { ClassValue } from 'clsx';
 import * as React from 'react';
 type HTMLProperties<T = HTMLElement> = Omit<React.AllHTMLAttributes<T>, 'as' | 'className' | 'color' | 'height' | 'width'>;
 export declare const Box: React.ForwardRefExoticComponent<{
-    background?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+    background?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
     } | undefined;
-    borderColor?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+    borderColor?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
     } | undefined;
-    boxShadow?: "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | {
-        base?: "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | undefined;
-        hover?: "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | undefined;
-        active?: "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | undefined;
-        selection?: "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | undefined;
+    boxShadow?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | {
+        base?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | undefined;
+        hover?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | undefined;
+        active?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | undefined;
+        selection?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | undefined;
+        focused?: "button" | "connectButton" | "dialog" | "profileDetailsAction" | "selectedOption" | "selectedWallet" | "walletLogo" | "callToAction" | undefined;
     } | undefined;
-    color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
-        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
-        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "standby" | "loadingBase" | "loadingAccent" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "textPrimary" | "textSecondary" | "textTertiary" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+    color?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | {
+        base?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        hover?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        active?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        selection?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
+        focused?: "accentColor" | "transparent" | "accentColorForeground" | "actionButtonBorder" | "actionButtonSecondaryBackground" | "connectButtonBackground" | "connectButtonBackgroundError" | "connectButtonInnerBackground" | "connectButtonText" | "connectButtonTextError" | "connectionIndicator" | "error" | "generalBorder" | "generalBorderDim" | "menuItemBackground" | "modalText" | "modalTextDim" | "modalTextSecondary" | "profileAction" | "profileActionHover" | "profileForeground" | "selectedOptionBorder" | "paymentOptionBorderBase" | "paymentOptionBorderHover" | "paymentOptionBorderActive" | "paymentOptionBorderActiveHover" | "paymentOptionBorderDisabled" | "standby" | "success" | "loadingBase" | "loadingAccent" | "chainIconBorder" | "modalBackdrop" | "modalBackground" | "modalBorder" | "notificationPrimary" | "offBackground" | "hoverState" | "offBackgroundInverse" | "primaryText" | "secondaryText" | "tertiaryText" | "textDisabled" | "textSelection" | "inputFieldPrimary" | "inputFieldPlaceholder" | "inputFieldDisabled" | "optionBackground" | "optionBackgroundSecondary" | "actionColor" | "actionColorHover" | "actionColorDisabled" | "buttonPrimary" | "buttonProcessing" | "buttonDisabled" | "buttonWarning" | "buttonSuccess" | "buttonTextWarning" | "buttonTextSuccess" | "buttonTextPrimary" | "buttonTextSecondary" | "buttonTextDisabled" | undefined;
     } | undefined;
 } & {
     alignItems?: "center" | "flex-end" | "flex-start" | {
@@ -38,43 +42,43 @@ export declare const Box: React.ForwardRefExoticComponent<{
 } & {
     readonly alignSelf?: "center" | "flex-end" | "flex-start" | undefined;
     readonly backgroundSize?: "cover" | undefined;
-    readonly borderRadius?: "1" | "10" | "13" | "16" | "actionButton" | "connectButton" | "menuButton" | "modal" | "modalMobile" | "6" | "24" | "25%" | "full" | undefined;
+    readonly borderRadius?: "1" | "10" | "13" | "16" | "actionButton" | "connectButton" | "menuButton" | "modal" | "modalMobile" | "4" | "6" | "24" | "25%" | "full" | undefined;
     readonly borderStyle?: "dotted" | "hidden" | "solid" | undefined;
-    readonly borderWidth?: "0" | "1" | "2" | "0.5" | "4" | undefined;
-    readonly cursor?: "pointer" | undefined;
+    readonly borderWidth?: "0" | "1" | "2" | "3" | "4" | "0.5" | undefined;
+    readonly cursor?: "default" | "not-allowed" | "pointer" | undefined;
     readonly flexDirection?: "column" | "row" | undefined;
     readonly fontFamily?: "body" | undefined;
-    readonly fontSize?: "10" | "12" | "13" | "14" | "16" | "18" | "20" | "23" | "57" | 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" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly height?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly gap?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    readonly height?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "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?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly marginLeft?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly marginRight?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly marginTop?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly minHeight?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxHeight?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly maxWidth?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
-    readonly minWidth?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly marginBottom?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    readonly marginLeft?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    readonly marginRight?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    readonly marginTop?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    readonly minHeight?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxHeight?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly maxWidth?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly minWidth?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly overflow?: "hidden" | undefined;
-    readonly paddingBottom?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly paddingLeft?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly paddingRight?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    readonly paddingTop?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
+    readonly paddingBottom?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    readonly paddingLeft?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    readonly paddingRight?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    readonly paddingTop?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
     readonly position?: "fixed" | "absolute" | "relative" | undefined;
     readonly right?: "0" | undefined;
     readonly transition?: "transform" | "default" | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly width?: "1" | "10" | "12" | "14" | "16" | "20" | "2" | "24" | "full" | "4" | "8" | "28" | "30" | "32" | "34" | "36" | "40" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
+    readonly width?: "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "40" | "2" | "4" | "24" | "full" | "28" | "30" | "32" | "34" | "36" | "44" | "48" | "50" | "54" | "60" | "93" | "100" | "108" | "162" | "192" | "200" | "210" | "220" | "230" | "240" | "256" | "320" | "400" | "440" | "600" | "half" | "max" | undefined;
     readonly backdropFilter?: "modalOverlay" | undefined;
-    margin?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    marginX?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    marginY?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    padding?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    paddingX?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
-    paddingY?: "0" | "1" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "6" | "24" | "4" | "8" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "64" | undefined;
+    margin?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    marginX?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    marginY?: "auto" | "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | "-18" | undefined;
+    padding?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    paddingX?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
+    paddingY?: "0" | "1" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "2" | "3" | "4" | "6" | "24" | "28" | "30" | "32" | "36" | "44" | "-1" | "5" | "9" | "15" | "64" | undefined;
 } & {
     reset?: keyof JSX.IntrinsicElements;
 } & HTMLProperties<HTMLElement> & {

package/dist/components/ChainModal/Chain.d.ts

@@ -13,10 +13,11 @@ interface ChainProps {
     src: string | AsyncImageSrc | undefined | null;
     idx: number;
 }
-export declare function ChainLineItem({ chainId, chainIconSize, gap, }: {
+export declare function ChainLineItem({ chainId, chainIconSize, gap, hideChainName, }: {
     chainId: number;
     chainIconSize: BoxProps['height'];
     gap?: BoxProps['gap'];
+    hideChainName?: boolean;
 }): React.JSX.Element | null;
 declare const Chain: ({ chainId, currentChainId, switchChain, chainIconSize, isLoading, src, name, iconBackground, idx, }: ChainProps) => React.JSX.Element;
 export default Chain;

package/dist/components/CloseButton/CloseButton.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const CloseButton: ({ "aria-label": ariaLabel, onClose, }: {
-    "aria-label"?: string;
+export declare const CloseButton: ({ onClose }: {
     onClose: () => void;
 }) => React.JSX.Element;

package/dist/components/ConnectButton/ConnectButtonRenderer.d.ts

@@ -7,6 +7,7 @@ export interface ConnectButtonRendererProps {
             balanceDecimals?: number;
             balanceFormatted?: string;
             balanceSymbol?: string;
+            balanceNativeAmount?: string;
             displayBalance?: string;
             displayName: string;
             displayAvatar: string;

package/dist/components/DevTest/DevEmbed.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DevEmbed(): React.JSX.Element;

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

@@ -1,5 +1,6 @@
+export declare const DialogAnimationTimeIn = 250;
+export declare const DialogAnimationTimeOut = 120;
 export declare const overlay: string;
 export declare const overlayOut: string;
-export declare const DialogAnimationTime = 150;
 export declare const content: string;
 export declare const contentSlideOut: string;