@lifi/widget 3.19.0-beta.3 → 3.19.0

package/dist/esm/themes/windows95.js.map

@@ -1 +1 @@
-{"version":3,"file":"windows95.js","sourceRoot":"","sources":["../../../src/themes/windows95.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,YAAY,EAAE;QACZ,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,OAAO,EAAE;oBACP,IAAI,EAAE,SAAS;iBAChB;gBACD,SAAS,EAAE;oBACT,IAAI,EAAE,SAAS;iBAChB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;oBAClB,SAAS,EAAE,SAAS;iBACrB;gBACD,UAAU,EAAE;oBACV,OAAO,EAAE,SAAS;oBAClB,KAAK,EAAE,SAAS;iBACjB;gBACD,IAAI,EAAE;oBACJ,GAAG,EAAE,SAAS;iBACf;gBACD,UAAU,EAAE;oBACV,IAAI,EAAE,SAAS;iBAChB;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,YAAY,EAAE,CAAC;QACf,qBAAqB,EAAE,CAAC;QACxB,oBAAoB,EAAE,CAAC;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,mBAAmB;KAC5B;IACD,UAAU,EAAE;QACV,IAAI,EAAE,KAAK;KACZ;IACD,UAAU,EAAE;QACV,SAAS,EAAE;YACT,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,SAAS,EACP,gGAAgG;oBAClG,SAAS,EAAE;wBACT,SAAS,EACP,gGAAgG;qBACnG;iBACF;aACF;SACF;QACD,OAAO,EAAE;YACP,YAAY,EAAE;gBACZ,OAAO,EAAE,UAAU;aACpB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,SAAS,EACP,gGAAgG;oBAClG,WAAW,EAAE,CAAC;oBACd,SAAS,EAAE;wBACT,MAAM,EAAE,SAAS;wBACjB,eAAe,EAAE,SAAS;qBAC3B;iBACF;aACF;YACD,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;oBAC9B,KAAK,EAAE;wBACL,WAAW,EAAE,CAAC;qBACf;iBACF;aACF;SACF;QACD,YAAY,EAAE;YACZ,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,eAAe,EAAE,SAAS;oBAC1B,SAAS,EACP,gGAAgG;iBACnG;aACF;SACF;QACD,aAAa,EAAE;YACb,YAAY,EAAE;YACZ,uBAAuB;aACxB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,YAAY,EAAE,CAAC;oBACf,SAAS,EACP,gGAAgG;oBAClG,eAAe,EAAE,SAAS;oBAC1B,SAAS,EAAE;wBACT,KAAK,EAAE,SAAS;wBAChB,eAAe,EAAE,SAAS;qBAC3B;iBACF;aACF;SACF;KACF;CACF,CAAA"}
+{"version":3,"file":"windows95.js","sourceRoot":"","sources":["../../../src/themes/windows95.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;SAChB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;SACrB;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;SACjB;QACD,IAAI,EAAE;YACJ,GAAG,EAAE,SAAS;SACf;KACF;IACD,KAAK,EAAE;QACL,YAAY,EAAE,CAAC;QACf,qBAAqB,EAAE,CAAC;QACxB,oBAAoB,EAAE,CAAC;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,mBAAmB;KAC5B;IACD,UAAU,EAAE;QACV,IAAI,EAAE,KAAK;KACZ;IACD,UAAU,EAAE;QACV,UAAU,EAAE,SAAS;KACtB;IACD,UAAU,EAAE;QACV,SAAS,EAAE;YACT,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,SAAS,EACP,gGAAgG;oBAClG,SAAS,EAAE;wBACT,SAAS,EACP,gGAAgG;qBACnG;iBACF;aACF;SACF;QACD,OAAO,EAAE;YACP,YAAY,EAAE;gBACZ,OAAO,EAAE,UAAU;aACpB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,SAAS,EACP,gGAAgG;oBAClG,WAAW,EAAE,CAAC;oBACd,SAAS,EAAE;wBACT,MAAM,EAAE,SAAS;wBACjB,eAAe,EAAE,SAAS;qBAC3B;iBACF;aACF;YACD,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;oBAC9B,KAAK,EAAE;wBACL,WAAW,EAAE,CAAC;qBACf;iBACF;aACF;SACF;QACD,YAAY,EAAE;YACZ,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,eAAe,EAAE,SAAS;oBAC1B,SAAS,EACP,gGAAgG;iBACnG;aACF;SACF;QACD,aAAa,EAAE;YACb,YAAY,EAAE;YACZ,uBAAuB;aACxB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE;oBACJ,YAAY,EAAE,CAAC;oBACf,SAAS,EACP,gGAAgG;oBAClG,eAAe,EAAE,SAAS;oBAC1B,SAAS,EAAE;wBACT,KAAK,EAAE,SAAS;wBAChB,eAAe,EAAE,SAAS;qBAC3B;iBACF;aACF;SACF;KACF;CACF,CAAA"}

package/dist/esm/types/widget.d.ts

@@ -1,7 +1,7 @@
-import type { BaseToken, ChainType, ContractCall, Order, RouteExtended, RouteOptions, SDKConfig, StaticToken, Token } from '@lifi/sdk';
+import type { BaseToken, ChainType, ContractCall, ExtendedChain, Order, RouteExtended, RouteOptions, SDKConfig, StaticToken, Token } from '@lifi/sdk';
 import type { Components, PaletteMode, PaletteOptions, Shape, SxProps, Theme } from '@mui/material';
-import type { TypographyVariantsOptions } from '@mui/material/styles';
-import type { CSSProperties, FC, ReactNode, RefObject } from 'react';
+import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
+import type { CSSProperties, FC, MutableRefObject, ReactNode, RefObject } from 'react';
 import type { CoinbaseWalletParameters, MetaMaskParameters, WalletConnectParameters } from 'wagmi/connectors';
 import type { LanguageKey, LanguageResources } from '../providers/I18nProvider/types.js';
 import type { DefaultFieldValues } from '../stores/form/types.js';
@@ -13,7 +13,7 @@ export interface SubvariantOptions {
     split?: SplitSubvariant;
     custom?: CustomSubvariant;
 }
-export type Appearance = PaletteMode | 'system';
+export type Appearance = PaletteMode | 'auto';
 export interface NavigationProps {
     /**
      * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
@@ -21,25 +21,15 @@ export interface NavigationProps {
      */
     edge?: boolean;
 }
-export type WidgetThemeComponents = Partial<Pick<Components<Theme>, 'MuiAppBar' | 'MuiAvatar' | 'MuiButton' | 'MuiCard' | 'MuiIconButton' | 'MuiInputCard' | 'MuiTabs'>>;
+export type WidgetThemeComponents = Pick<Components<Theme>, 'MuiAppBar' | 'MuiAvatar' | 'MuiButton' | 'MuiCard' | 'MuiIconButton' | 'MuiInputCard' | 'MuiTabs'>;
 export type WidgetTheme = {
-    /**
-     * @deprecated Use `colorScheme` instead.
-     */
-    palette?: PaletteOptions;
-    colorSchemes?: {
-        light?: {
-            palette: PaletteOptions;
-        };
-        dark?: {
-            palette: PaletteOptions;
-        };
-    };
+    palette?: Pick<PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text'>;
     shape?: Partial<Shape>;
-    typography?: TypographyVariantsOptions;
+    typography?: TypographyOptions;
     components?: WidgetThemeComponents;
     container?: CSSProperties;
     header?: CSSProperties;
+    playground?: CSSProperties;
     navigation?: NavigationProps;
 };
 export declare enum DisabledUI {
@@ -60,7 +50,8 @@ export declare enum HiddenUI {
     WalletMenu = "walletMenu",
     IntegratorStepDetails = "integratorStepDetails",
     ReverseTokensButton = "reverseTokensButton",
-    RouteTokenDescription = "routeTokenDescription"
+    RouteTokenDescription = "routeTokenDescription",
+    ChainSelect = "chainSelect"
 }
 export type HiddenUIType = `${HiddenUI}`;
 export declare enum RequiredUI {
@@ -90,10 +81,10 @@ export interface WidgetContractTool {
     logoURI: string;
 }
 export interface CalculateFeeParams {
-    fromChainId: number;
-    toChainId: number;
-    fromTokenAddress: string;
-    toTokenAddress: string;
+    fromChain: ExtendedChain;
+    toChain: ExtendedChain;
+    fromToken: Token;
+    toToken: Token;
     fromAddress?: string;
     toAddress?: string;
     fromAmount?: bigint;
@@ -116,7 +107,7 @@ export interface WidgetFeeConfig {
     /**
      * @internal
      */
-    _vcComponent?: FC<{
+    _vcComponent: FC<{
         route: RouteExtended;
     }>;
 }
@@ -219,7 +210,7 @@ export type SetFieldValueFunction = <K extends FieldNames>(key: K, value: FieldV
 export type FormState = {
     setFieldValue: SetFieldValueFunction;
 };
-export type FormRef = RefObject<FormState | null>;
+export type FormRef = MutableRefObject<FormState | null>;
 export interface FormRefProps {
     formRef?: FormRef;
 }

package/dist/esm/types/widget.js

@@ -18,6 +18,7 @@ export var HiddenUI;
     HiddenUI["IntegratorStepDetails"] = "integratorStepDetails";
     HiddenUI["ReverseTokensButton"] = "reverseTokensButton";
     HiddenUI["RouteTokenDescription"] = "routeTokenDescription";
+    HiddenUI["ChainSelect"] = "chainSelect";
 })(HiddenUI || (HiddenUI = {}));
 export var RequiredUI;
 (function (RequiredUI) {

package/dist/esm/types/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AAmFA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAYX;AAZD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;AACjD,CAAC,EAZW,QAAQ,KAAR,QAAQ,QAYnB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../../src/types/widget.ts"],"names":[],"mappings":"AAiFA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,uCAAyB,CAAA;IACzB,qCAAuB,CAAA;IACvB,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAGD,MAAM,CAAN,IAAY,QAaX;AAbD,WAAY,QAAQ;IAClB,qCAAyB,CAAA;IACzB,mDAAuC,CAAA;IACvC,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,qCAAyB,CAAA;IACzB,2DAA+C,CAAA;IAC/C,uDAA2C,CAAA;IAC3C,2DAA+C,CAAA;IAC/C,uCAA2B,CAAA;AAC7B,CAAC,EAbW,QAAQ,KAAR,QAAQ,QAanB;AAGD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,qCAAuB,CAAA;AACzB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

package/dist/esm/utils/colors.d.ts

@@ -0,0 +1,15 @@
+import type { Theme } from '@mui/material';
+export declare const getContrastAlphaColor: (theme: Theme, value: number) => string;
+export declare const getWarningBackgroundColor: (theme: Theme) => string;
+export declare const getInfoBackgroundColor: (theme: Theme) => string;
+/**
+ * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ * Remove in favor of MUI one once the next major version is released.
+ * @param {string} background - CSS color
+ * @param {string} overlay - CSS color
+ * @param {number} opacity - Opacity multiplier in the range 0 - 1
+ * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
+ */
+export declare function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/dist/esm/utils/colors.js

@@ -0,0 +1,35 @@
+import { alpha, decomposeColor, recomposeColor } from '@mui/material';
+export const getContrastAlphaColor = (theme, value) => theme.palette.mode === 'light'
+    ? alpha(theme.palette.common.black, value)
+    : alpha(theme.palette.common.white, value);
+export const getWarningBackgroundColor = (theme) => theme.palette.mode === 'light'
+    ? alpha(theme.palette.warning.main, 0.32)
+    : alpha(theme.palette.warning.main, 0.16);
+export const getInfoBackgroundColor = (theme) => theme.palette.mode === 'light'
+    ? alpha(theme.palette.info.main, 0.12)
+    : alpha(theme.palette.info.main, 0.16);
+/**
+ * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ * Remove in favor of MUI one once the next major version is released.
+ * @param {string} background - CSS color
+ * @param {string} overlay - CSS color
+ * @param {number} opacity - Opacity multiplier in the range 0 - 1
+ * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
+ */
+export function blend(background, overlay, opacity, gamma = 1.0) {
+    const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+    const backgroundColor = decomposeColor(background);
+    const overlayColor = decomposeColor(overlay);
+    const rgb = [
+        blendChannel(backgroundColor.values[0], overlayColor.values[0]),
+        blendChannel(backgroundColor.values[1], overlayColor.values[1]),
+        blendChannel(backgroundColor.values[2], overlayColor.values[2]),
+    ];
+    return recomposeColor({
+        type: 'rgb',
+        values: rgb,
+    });
+}
+//# sourceMappingURL=colors.js.map

package/dist/esm/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE,CACnE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAE,EAAE,CACxD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;IACzC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAE,EAAE,CACrD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;IACtC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CACnB,UAAkB,EAClB,OAAe,EACf,OAAe,EACf,KAAK,GAAG,GAAG;IAEX,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAC5C,IAAI,CAAC,KAAK,CACR,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CACzE,CAAA;IAEH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;IAClD,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAE5C,MAAM,GAAG,GAA6B;QACpC,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChE,CAAA;IAED,OAAO,cAAc,CAAC;QACpB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAA;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.19.0-beta.3",
+  "version": "3.19.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -34,22 +34,22 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.8",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/system": "^7.0.2",
+    "@lifi/sdk": "^3.6.9",
+    "@mui/icons-material": "6.0.2",
+    "@mui/material": "^6.4.11",
+    "@mui/system": "^6.4.11",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.6",
-    "i18next": "^25.0.0",
+    "i18next": "^25.0.1",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.27.0",
+    "viem": "^2.28.0",
     "zustand": "^5.0.3",
-    "@lifi/wallet-management": "^3.8.0-beta.1"
+    "@lifi/wallet-management": "^3.7.5"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.1.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.19.0-beta.3",
+  "version": "3.19.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",
@@ -53,21 +53,21 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.8",
+    "@lifi/sdk": "^3.6.9",
     "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/system": "^7.0.2",
+    "@mui/icons-material": "6.0.2",
+    "@mui/material": "^6.4.11",
+    "@mui/system": "^6.4.11",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.6",
-    "i18next": "^25.0.0",
+    "i18next": "^25.0.1",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
-    "viem": "^2.27.0",
+    "viem": "^2.28.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -76,7 +76,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.2"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.1.0",

package/src/AppDrawer.tsx

@@ -73,16 +73,6 @@ export const AppDrawer = forwardRef<
         open={drawerOpen}
         onClose={closeDrawer}
         slotProps={{
-          paper: {
-            sx: (theme) => ({
-              background: theme.vars.palette.background.default,
-              width: theme?.container?.width ?? '100%',
-              minWidth:
-                theme?.container?.minWidth ?? theme.breakpoints.values.xs,
-              maxWidth:
-                theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
-            }),
-          },
           backdrop: {
             sx: {
               backgroundColor: 'rgb(0 0 0 / 48%)',
@@ -90,6 +80,13 @@ export const AppDrawer = forwardRef<
             },
           },
         }}
+        PaperProps={{
+          sx: (theme) => ({
+            width: theme?.container?.width ?? '100%',
+            minWidth: theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+            maxWidth: theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
+          }),
+        }}
         keepMounted
       >
         {children}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -1,6 +1,4 @@
-import ArrowForward from '@mui/icons-material/ArrowForward'
-import ErrorRounded from '@mui/icons-material/ErrorRounded'
-import InfoRounded from '@mui/icons-material/InfoRounded'
+import { ArrowForward, ErrorRounded, InfoRounded } from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'

package/src/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -5,14 +5,15 @@ import {
   listItemSecondaryActionClasses,
   styled,
 } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   paddingLeft: theme.spacing(1.5),
   paddingRight: theme.spacing(1.5),
   height: 64,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
 }))
 

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -10,5 +10,5 @@ export const MaxButton = styled(MuiButton)(({ theme }) => ({
 export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
   width: 46,
   height: 24,
-  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  borderRadius: theme.shape.borderRadiusSecondary,
 }))

package/src/components/AppContainer.tsx

@@ -48,7 +48,7 @@ export const RelativeContainer = styled(Box, {
     width: '100%',
     minWidth: theme.breakpoints.values.xs,
     maxWidth: theme.breakpoints.values.sm,
-    background: theme.vars.palette.background.default,
+    background: theme.palette.background.default,
     overflow: 'auto',
     flex: 1,
     zIndex: 0,
@@ -67,7 +67,6 @@ export const RelativeContainer = styled(Box, {
         style: {
           maxHeight: 'none',
           height: '100%',
-          boxShadow: 'none',
         },
       },
     ],

package/src/components/Avatar/AccountAvatar.tsx

@@ -1,6 +1,6 @@
 import type { Account } from '@lifi/wallet-management'
 import { getConnectorIcon } from '@lifi/wallet-management'
-import Wallet from '@mui/icons-material/Wallet'
+import { Wallet } from '@mui/icons-material'
 import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'
 import type { ToAddress } from '../../types/widget.js'

package/src/components/Avatar/Avatar.style.tsx

@@ -36,37 +36,37 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: root?.height,
     width: root?.width,
-    color: theme.vars.palette.text.secondary,
+    color: theme.palette.text.secondary,
     mask: avatarMask16,
-    background: theme.vars.palette.grey[300],
-    ...theme.applyStyles('dark', {
-      background: theme.vars.palette.grey[800],
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
     }),
   }
 })
 
 export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
   return {
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: 16,
     width: 16,
-    background: theme.vars.palette.grey[300],
-    ...theme.applyStyles('dark', {
-      background: theme.vars.palette.grey[800],
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
     }),
   }
 })
 
 export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   borderRadius: '50%',
 }))
 
 export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   borderRadius: '50%',
   mask: avatarMask16,
 }))

package/src/components/Avatar/SmallAvatar.tsx

@@ -2,7 +2,7 @@ import { Avatar, Skeleton, styled } from '@mui/material'
 import { AvatarSkeletonContainer } from './Avatar.style.js'
 
 export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   width: 16,
   height: 16,
 }))

package/src/components/BottomSheet/BottomSheet.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
-import { modalProps, slotProps } from '../Dialog.js'
+import { modalProps, paperProps, slotProps } from '../Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
@@ -43,6 +43,7 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
         open={drawerOpen}
         onClose={close}
         ModalProps={modalProps}
+        PaperProps={paperProps}
         slotProps={slotProps}
         disableAutoFocus
       >

package/src/components/ButtonTertiary.tsx

@@ -1,26 +1,18 @@
 import { Button, buttonClasses, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
 
 export const ButtonTertiary = styled(Button)(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   height: 40,
   fontSize: 14,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: getContrastAlphaColor(theme, 0.04),
   '&:hover, &:active': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.08),
   },
   [`&.${buttonClasses.loading}:disabled`]: {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    '&:hover, &:active': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-    },
-    [`&.${buttonClasses.loading}:disabled`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-  }),
   [`.${buttonClasses.loadingIndicator}`]: {
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
   },
 }))

package/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import type { CardProps as MuiCardProps } from '@mui/material'
-import { Card as MuiCard, styled } from '@mui/material'
+import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material'
 
 export interface CardProps extends MuiCardProps {
   type?: 'default' | 'selected' | 'error'
@@ -26,18 +26,18 @@ export const Card = styled(MuiCard, {
           type: 'selected',
         },
         style: {
+          backgroundColor: darken(theme.palette.primary.main, 0.65),
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: theme.vars.palette.primary.main,
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,
+          borderColor: theme.palette.primary.main,
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,
+            backgroundColor: darken(theme.palette.primary.main, 0.6),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.primary.main, 0.9),
+            }),
           },
-          ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,
-            '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,
-            },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.primary.main, 0.95),
           }),
         },
       },
@@ -47,18 +47,18 @@ export const Card = styled(MuiCard, {
           type: 'selected',
         },
         style: {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 15%, white)`,
+          backgroundColor: darken(theme.palette.secondary.main, 0.76),
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: `rgba(${theme.vars.palette.secondary.mainChannel} / 0.2)`,
+          borderColor: alpha(theme.palette.secondary.main, 0.2),
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 20%, white)`,
+            backgroundColor: darken(theme.palette.secondary.main, 0.72),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.secondary.main, 0.8),
+            }),
           },
-          ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
-            '&:hover': {
-              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
-            },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.secondary.main, 0.85),
           }),
         },
       },
@@ -69,7 +69,7 @@ export const Card = styled(MuiCard, {
         style: {
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: theme.vars.palette.error.main,
+          borderColor: theme.palette.error.main,
         },
       },
     ],

package/src/components/Card/CardButton.style.tsx

@@ -12,7 +12,7 @@ export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: theme.spacing(2),
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
 }))
 
 export const CardRowContainer = styled(Box)(({ theme }) => ({

package/src/components/Card/CardHeader.tsx

@@ -13,14 +13,14 @@ export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
     fontWeight: 600,
     fontSize: 18,
     lineHeight: 1.3334,
-    color: theme.vars.palette.text.primary,
+    color: theme.palette.text.primary,
     textAlign: 'left',
   },
   [`.${cardHeaderClasses.subheader}`]: {
     fontWeight: 500,
     fontSize: 12,
     lineHeight: 1.3334,
-    color: theme.vars.palette.text.secondary,
+    color: theme.palette.text.secondary,
     textAlign: 'left',
   },
 }))

package/src/components/Card/CardIconButton.tsx

@@ -1,14 +1,15 @@
 import type { IconButtonProps, LinkProps } from '@mui/material'
 import { IconButton as MuiIconButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const CardIconButton = styled(MuiIconButton)<
   IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
 >(({ theme }) => {
   return {
     padding: theme.spacing(0.5),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      backgroundColor: getContrastAlphaColor(theme, 0.08),
     },
     fontSize: '1rem',
   }