@lifi/widget 3.0.0-alpha.25 → 3.0.0-alpha.26

package/_esm/pages/TransactionPage/TokenValueBottomSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WarningRounded from '@mui/icons-material/esm/WarningRounded.js';
+import { WarningRounded } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

package/_esm/pages/TransactionPage/TransactionPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Delete from '@mui/icons-material/esm/Delete.js';
+import { Delete } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/_esm/providers/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMediaQuery } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, useMediaQuery, } from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
 import { createTheme } from '../../config/theme.js';
 import { useAppearance } from '../../stores/settings/useAppearance.js';

package/_esm/providers/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../providers/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAEtE,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,EACnE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAC9E,MAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,eAAe,IAAI,UAAU,KAAK,MAAM;QACtC,CAAC,CAAC,eAAe;YACf,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,OAAO;QACX,CAAC,CAAC,UAAU,CACf,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,EAAE,CAAC;YACpB,aAAa,CAAC,eAAe,CAAC,CAAC;QACjC,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,EACpC,CAAC,IAAI,EAAE,WAAW,CAAC,CACpB,CAAC;IACF,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAoB,CAAC;AACvE,CAAC,CAAC"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../providers/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAEtE,MAAM,CAAC,MAAM,aAAa,GAA0C,CAAC,EACnE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAC9E,MAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,eAAe,IAAI,UAAU,KAAK,MAAM;QACtC,CAAC,CAAC,eAAe;YACf,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,OAAO;QACX,CAAC,CAAC,UAAU,CACf,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,EAAE,CAAC;YACpB,aAAa,CAAC,eAAe,CAAC,CAAC;QACjC,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,EACpC,CAAC,IAAI,EAAE,WAAW,CAAC,CACpB,CAAC;IACF,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAoB,CAAC;AACvE,CAAC,CAAC"}

package/_esm/utils/colors.d.ts

@@ -1,6 +1,5 @@
 import type { PaletteMode, Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (mode: PaletteMode, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";
 export declare const getWarningBackgroundColor: (theme: Theme) => string;
 export declare const getInfoBackgroundColor: (theme: Theme) => string;
 export declare const getCardFieldsetBackgroundColor: (theme: Theme) => string;

package/_esm/utils/colors.js

@@ -1,9 +1,5 @@
-import { common } from '@mui/material/colors';
-import { alpha, getContrastRatio } from '@mui/material/styles';
+import { alpha } from '@mui/material';
 export const getContrastAlphaColor = (mode, alpha) => mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
-export const getContrastTextColor = (theme, background) => getContrastRatio(common.white, background ?? theme.palette.primary.main) >= 3
-    ? common.white
-    : common.black;
 export const getWarningBackgroundColor = (theme) => theme.palette.mode === 'light'
     ? alpha(theme.palette.warning.main, 0.32)
     : alpha(theme.palette.warning.main, 0.16);

package/_esm/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../utils/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,IAAiB,EACjB,KAAsB,EACtB,EAAE,CACF,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,qBAAqB,KAAK,GAAG,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAE,UAAmB,EAAE,EAAE,CACxE,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3E,CAAC,CAAC,MAAM,CAAC,KAAK;IACd,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAEnB,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,CAAC;AAE9C,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,CAAC;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,KAAY,EAAE,EAAE,CAC7D,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM;IAC3B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../utils/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,IAAiB,EACjB,KAAsB,EACtB,EAAE,CACF,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,qBAAqB,KAAK,GAAG,CAAC;AAE7E,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,CAAC;AAE9C,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,CAAC;AAE3C,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,KAAY,EAAE,EAAE,CAC7D,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM;IAC3B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC"}

package/components/ActiveTransactions/ActiveTransactions.style.ts

@@ -2,9 +2,9 @@ import {
   Button,
   ListItem as MuiListItem,
   ListItemButton as MuiListItemButton,
+  listItemSecondaryActionClasses,
+  styled,
 } from '@mui/material';
-import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
-import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({

package/components/AlertMessage/AlertMessage.style.tsx

@@ -1,5 +1,4 @@
-import { Box } from '@mui/material';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
+import { Box, alpha, darken, lighten, styled } from '@mui/material';
 import {
   getInfoBackgroundColor,
   getWarningBackgroundColor,

package/components/AmountInput/AmountInput.style.tsx

@@ -1,6 +1,10 @@
-import { Box, InputBase, FormControl as MuiFormControl } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { styled } from '@mui/material/styles';
+import {
+  Box,
+  InputBase,
+  FormControl as MuiFormControl,
+  inputBaseClasses,
+  styled,
+} from '@mui/material';
 
 export const maxInputFontSize = 24;
 export const minInputFontSize = 14;

package/components/AmountInput/AmountInputAdornment.style.tsx

@@ -1,5 +1,4 @@
-import { Button as MuiButton, Skeleton } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Button as MuiButton, Skeleton, styled } from '@mui/material';
 
 export const MaxButton = styled(MuiButton)(({ theme }) => ({
   padding: theme.spacing(0.5, 1, 0.625, 1),

package/components/AppContainer.tsx

@@ -1,5 +1,4 @@
-import { Box, Container, ScopedCssBaseline } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';

package/components/Card/Card.tsx

@@ -1,7 +1,12 @@
 import type { BoxProps, Theme } from '@mui/material';
-import { Box } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
+import {
+  Box,
+  alpha,
+  badgeClasses,
+  darken,
+  lighten,
+  styled,
+} from '@mui/material';
 import type { MouseEventHandler } from 'react';
 
 type CardVariant = 'default' | 'selected' | 'error';

package/components/Card/CardButton.style.tsx

@@ -1,5 +1,4 @@
-import { styled } from '@mui/material/styles';
-import { Box, ButtonBase, Typography } from '@mui/material';
+import { Box, ButtonBase, Typography, styled } from '@mui/material';
 
 export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   background: 'none',

package/components/Card/CardHeader.tsx

@@ -1,6 +1,8 @@
-import { CardHeader as MuiCardHeader } from '@mui/material';
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
+import {
+  CardHeader as MuiCardHeader,
+  cardHeaderClasses,
+  styled,
+} from '@mui/material';
 
 export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
   [`.${cardHeaderClasses.action}`]: {

package/components/Card/CardIconButton.tsx

@@ -1,5 +1,4 @@
-import { IconButton as MuiIconButton } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { IconButton as MuiIconButton, alpha, styled } from '@mui/material';
 
 export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
   const backgroundColor =

package/components/Card/CardLabel.tsx

@@ -1,5 +1,4 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, lighten, styled } from '@mui/material/styles';
+import { Box, Typography, alpha, lighten, styled } from '@mui/material';
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',

package/components/Card/CardTitle.tsx

@@ -1,5 +1,4 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Typography, styled } from '@mui/material';
 
 export const CardTitle = styled(Typography, {
   shouldForwardProp: (prop) => !['required'].includes(prop as string),

package/components/ChainSelect/ChainSelect.style.tsx

@@ -1,5 +1,4 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, styled } from '@mui/material';
 import { Card } from '../../components/Card/Card.js';
 
 export const ChainCard = styled(Card)({

package/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,6 +1,5 @@
 import { WarningRounded } from '@mui/icons-material';
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Typography, styled } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 

package/components/GasMessage/GasMessage.style.ts

@@ -1,5 +1,4 @@
-import { switchClasses } from '@mui/material/Switch';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, switchClasses } from '@mui/material';
 import { Switch } from '../Switch.js';
 
 export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({

package/components/Header/Header.style.ts

@@ -1,6 +1,12 @@
-import { AppBar, Box, Button, badgeClasses } from '@mui/material';
-import { buttonClasses } from '@mui/material/Button';
-import { alpha, styled } from '@mui/material/styles';
+import {
+  AppBar,
+  Box,
+  Button,
+  alpha,
+  badgeClasses,
+  buttonClasses,
+  styled,
+} from '@mui/material';
 import { Tabs } from '../Tabs/Tabs.style.js';
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({

package/components/Header/SettingsButton.style.tsx

@@ -1,6 +1,10 @@
-import { IconButton, Badge as MuiBadge } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { darken, styled } from '@mui/material/styles';
+import {
+  IconButton,
+  Badge as MuiBadge,
+  badgeClasses,
+  darken,
+  styled,
+} from '@mui/material';
 import {
   getInfoBackgroundColor,
   getWarningBackgroundColor,

package/components/Header/WalletMenu.style.tsx

@@ -1,8 +1,10 @@
-import { Menu as MuiMenu } from '@mui/material';
-import { menuClasses } from '@mui/material/Menu';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { styled } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  styled,
+  svgIconClasses,
+} from '@mui/material';
 
 export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {

package/components/Input.tsx

@@ -1,6 +1,4 @@
-import { InputBase } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { styled } from '@mui/material/styles';
+import { InputBase, inputBaseClasses, styled } from '@mui/material';
 
 export const Input = styled(InputBase)(({ theme }) => ({
   backgroundColor:

package/components/ListItem/ListItem.tsx

@@ -1,7 +1,9 @@
-import { styled } from '@mui/material/styles';
-import { ListItem as MuiListItem } from '@mui/material';
-import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
-import { listItemTextClasses } from '@mui/material/ListItemText';
+import {
+  ListItem as MuiListItem,
+  listItemSecondaryActionClasses,
+  listItemTextClasses,
+  styled,
+} from '@mui/material';
 
 export const ListItem = styled(MuiListItem)(({ theme }) => ({
   height: 64,

package/components/ListItem/ListItemButton.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js';
 
 export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({

package/components/ListItemButton.tsx

@@ -1,5 +1,4 @@
-import { ListItemButton as MuiListItemButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { ListItemButton as MuiListItemButton, styled } from '@mui/material';
 import { getContrastAlphaColor } from '../utils/colors.js';
 
 export const ListItemButton = styled(MuiListItemButton)(

package/components/ListItemText.tsx

@@ -1,6 +1,8 @@
-import { ListItemText as MuiListItemText } from '@mui/material';
-import { listItemTextClasses } from '@mui/material/ListItemText';
-import { styled } from '@mui/material/styles';
+import {
+  ListItemText as MuiListItemText,
+  listItemTextClasses,
+  styled,
+} from '@mui/material';
 
 export const ListItemText = styled(MuiListItemText)(({ theme }) => ({
   [`.${listItemTextClasses.primary}`]: {

package/components/Menu.tsx

@@ -1,8 +1,8 @@
-import { styled } from '@mui/material/styles';
 import {
   Menu as MuiMenu,
   menuClasses,
   menuItemClasses,
+  styled,
   svgIconClasses,
 } from '@mui/material';
 

package/components/NFT/NFT.style.ts

@@ -1,5 +1,4 @@
-import { Avatar } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Avatar, styled } from '@mui/material';
 
 export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
   background: theme.palette.background.paper,

package/components/PageContainer.ts

@@ -1,5 +1,4 @@
-import { Container } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Container, styled } from '@mui/material';
 
 export interface PageContainerProps {
   halfGutters?: boolean;

package/components/PoweredBy/PoweredBy.style.ts

@@ -1,5 +1,4 @@
-import { Link as MuiLink } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Link as MuiLink, styled } from '@mui/material';
 
 export const Link = styled(MuiLink)(({ theme }) => ({
   display: 'flex',

package/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -1,5 +1,9 @@
-import { IconButton as MuiIconButton } from '@mui/material';
-import { darken, lighten, styled } from '@mui/material/styles';
+import {
+  IconButton as MuiIconButton,
+  darken,
+  lighten,
+  styled,
+} from '@mui/material';
 
 export const IconButton = styled(MuiIconButton)(({ theme }) => ({
   height: 32,

package/components/RouteCard/RouteCard.style.ts

@@ -1,5 +1,4 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { Box, Typography, alpha, styled } from '@mui/material';
 
 export const IconTypography = styled(Typography)(({ theme }) => ({
   color:

package/components/Routes/RoutesExpanded.style.ts

@@ -1,5 +1,4 @@
-import { Box, ScopedCssBaseline } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, ScopedCssBaseline, styled } from '@mui/material';
 import { maxHeight } from '../AppContainer.js';
 
 export const CollapseContainer = styled(Box)(({ theme }) => ({

package/components/Select.tsx

@@ -1,9 +1,11 @@
-import { Select as MuiSelect } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { listItemIconClasses } from '@mui/material/ListItemIcon';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { selectClasses } from '@mui/material/Select';
-import { styled } from '@mui/material/styles';
+import {
+  Select as MuiSelect,
+  inputBaseClasses,
+  listItemIconClasses,
+  outlinedInputClasses,
+  selectClasses,
+  styled,
+} from '@mui/material';
 
 export const Select = styled(MuiSelect, {
   shouldForwardProp: (prop) => prop !== 'dense',

package/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,5 +1,4 @@
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
+import { cardHeaderClasses, styled } from '@mui/material';
 import { CardHeader } from '../Card/CardHeader.js';
 
 export const SelectTokenCardHeader = styled(CardHeader, {

package/components/SendToWallet/SendToWallet.style.tsx

@@ -1,5 +1,4 @@
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
+import { cardHeaderClasses, styled } from '@mui/material';
 import { CardHeader } from '../Card/CardHeader.js';
 
 export const SendToWalletCardHeader = styled(CardHeader, {

package/components/SettingsListItemButton.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { ListItemButton as ListItemButtonBase } from './ListItemButton.js';
 
 export const SettingsListItemButton = styled(ListItemButtonBase)(

package/components/SmallAvatar.tsx

@@ -1,5 +1,4 @@
-import { Avatar, Box, Skeleton } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Avatar, Box, Skeleton, styled } from '@mui/material';
 
 export const SmallAvatar = styled(Avatar)(({ theme }) => ({
   background: theme.palette.background.paper,

package/components/Step/CircularProgress.style.tsx

@@ -1,8 +1,13 @@
 import type { Status, Substatus } from '@lifi/sdk';
 import type { Theme } from '@mui/material';
-import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
-import { circularProgressClasses } from '@mui/material/CircularProgress';
-import { alpha, keyframes, styled } from '@mui/material/styles';
+import {
+  Box,
+  CircularProgress as MuiCircularProgress,
+  alpha,
+  circularProgressClasses,
+  keyframes,
+  styled,
+} from '@mui/material';
 
 const getStatusColor = (
   theme: Theme,

package/components/Step/CircularProgress.tsx

@@ -5,7 +5,7 @@ import {
   InfoRounded,
   WarningRounded,
 } from '@mui/icons-material';
-import { darken } from '@mui/material/styles';
+import { darken } from '@mui/material';
 import {
   CircularIcon,
   CircularProgressPending,

package/components/Step/StepProcess.style.tsx

@@ -1,6 +1,5 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { IconButton, styled } from '@mui/material';
 
 export const LinkButton = styled(IconButton)<IconButtonProps & LinkProps>(
   ({ theme }) => ({

package/components/Step/StepTimer.tsx

@@ -1,7 +1,8 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTimer } from 'react-timer-hook';
+import pkg from 'react-timer-hook';
+const { useTimer } = pkg;
 
 const getExpiryTimestamp = (step: LiFiStepExtended) =>
   new Date(

package/components/StepActions/StepActions.style.tsx

@@ -4,10 +4,10 @@ import {
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
+  stepConnectorClasses,
+  stepLabelClasses,
+  styled,
 } from '@mui/material';
-import { stepConnectorClasses } from '@mui/material/StepConnector';
-import { stepLabelClasses } from '@mui/material/StepLabel';
-import { styled } from '@mui/material/styles';
 
 export const StepIcon = styled('span', {
   shouldForwardProp: (prop) =>

package/components/StepDivider/StepDivider.style.tsx

@@ -1,5 +1,4 @@
-import { Container as MuiContainer } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Container as MuiContainer, styled } from '@mui/material';
 
 export const Container = styled(MuiContainer)(({ theme }) => ({
   display: 'flex',

package/components/Switch.tsx

@@ -1,6 +1,9 @@
-import { Switch as MuiSwitch } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-import { switchClasses } from '@mui/material/Switch';
+import {
+  Switch as MuiSwitch,
+  alpha,
+  styled,
+  switchClasses,
+} from '@mui/material';
 
 export const Switch = styled(MuiSwitch)(({ theme }) => ({
   width: 42,

package/components/Tabs/Tabs.style.tsx

@@ -2,10 +2,11 @@ import type { TabProps } from '@mui/material';
 import {
   Tab as MuiTab,
   Tabs as MuiTabs,
+  alpha,
+  styled,
   tabClasses,
   tabsClasses,
 } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
 import { getCardFieldsetBackgroundColor } from '../../utils/colors.js';
 
 export const Tabs = styled(MuiTabs)(({ theme }) => ({

package/components/TextFitter/TextFitter.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';

package/components/Token/Token.style.tsx

@@ -1,5 +1,4 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { Box, Typography, alpha, styled } from '@mui/material';
 
 export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',

package/components/TokenAvatar/TokenAvatar.style.tsx

@@ -1,8 +1,11 @@
 import type { CSSObject } from '@mui/material';
-import { AvatarGroup, Box } from '@mui/material';
-import { avatarClasses } from '@mui/material/Avatar';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
+import {
+  AvatarGroup,
+  Box,
+  avatarClasses,
+  badgeClasses,
+  styled,
+} from '@mui/material';
 
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {

package/components/TokenList/TokenList.style.tsx

@@ -1,6 +1,5 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
-import { IconButton as MuiIconButton } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { IconButton as MuiIconButton, alpha, styled } from '@mui/material';
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js';
 
 export const ListItem = styled(ListItemBase)(({ theme }) => ({

package/components/TokenList/useTokenSelect.ts

@@ -1,10 +1,11 @@
-import { WidgetEvent, useWidgetEvents } from '@lifi/widget';
 import { useCallback } from 'react';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { FormType } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
+import { WidgetEvent } from '../../types/events.js';
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const tokenKey = FormKeyHelper.getTokenKey(formType);