chore: update imports

packages/widget/package.json

@@ -9,10 +9,10 @@
   "sideEffects": false,
   "scripts": {
     "watch": "tsc -w -p ./tsconfig.json",
-    "build": "yarn clean && yarn build:version && yarn build:esm && yarn build:cjs && yarn build:format-package-json && yarn build:clean",
+    "build": "yarn clean && yarn build:version && yarn build:esm && yarn build:cjs && yarn build:postcompile && yarn build:clean",
     "build:esm": "tsc --build",
     "build:cjs": "tsc --build ./tsconfig.cjs.json",
-    "build:format-package-json": "node ../../scripts/format-package-json.js",
+    "build:postcompile": "node ../../scripts/format-package-json.js && node ../../scripts/mui-icons.js",
     "build:version": "node ../../scripts/version.js",
     "build:clean": "rm -rf tsconfig.tsbuildinfo dist/tsconfig.tsbuildinfo dist/tsconfig.cjs.tsbuildinfo",
     "clean": "yarn build:clean && rm -rf dist",

packages/widget/src/AppDrawer.tsx

@@ -1,6 +1,6 @@
-import { default as CloseIcon } from '@mui/icons-material/CloseRounded';
-import { default as KeyboardArrowLeftIcon } from '@mui/icons-material/KeyboardArrowLeft';
-import { default as KeyboardArrowRightIcon } from '@mui/icons-material/KeyboardArrowRight';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Drawer } from '@mui/material';
 import {
   forwardRef,

packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -1,6 +1,6 @@
-import { default as ArrowForwardIcon } from '@mui/icons-material/ArrowForward';
-import { default as ErrorRoundedIcon } from '@mui/icons-material/ErrorRounded';
-import { default as InfoRoundedIcon } from '@mui/icons-material/InfoRounded';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useProcessMessage, useRouteExecution } from '../../hooks';

packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import {

packages/widget/src/components/GasMessage/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import { default as EvStationIcon } from '@mui/icons-material/EvStation';
+import EvStationIcon from '@mui/icons-material/EvStation';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';

packages/widget/src/components/GasMessage/GasSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import { default as EvStationIcon } from '@mui/icons-material/EvStation';
+import EvStationIcon from '@mui/icons-material/EvStation';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -1,5 +1,5 @@
-import { default as ArrowBackIcon } from '@mui/icons-material/ArrowBack';
-import { default as ReceiptLongIcon } from '@mui/icons-material/ReceiptLong';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 import { Box, Tooltip, Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useTranslation } from 'react-i18next';

packages/widget/src/components/Header/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { default as SettingsIcon } from '@mui/icons-material/Settings';
+import SettingsIcon from '@mui/icons-material/Settings';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigateBack, useSettingMonitor } from '../../hooks';

packages/widget/src/components/Header/WalletHeader.tsx

@@ -1,5 +1,5 @@
-import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
-import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import WalletIcon from '@mui/icons-material/Wallet';
 import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

packages/widget/src/components/Header/WalletMenu.tsx

@@ -1,7 +1,7 @@
 import { ChainType } from '@lifi/sdk';
-import { default as ContentCopyIcon } from '@mui/icons-material/ContentCopyRounded';
-import { default as OpenInNewIcon } from '@mui/icons-material/OpenInNewRounded';
-import { default as PowerSettingsNewIcon } from '@mui/icons-material/PowerSettingsNewRounded';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
 import {
   Avatar,
   Badge,

packages/widget/src/components/Insurance/InsuranceCard.tsx

@@ -1,6 +1,6 @@
-import { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
-import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
-import { default as VerifiedUserIcon } from '@mui/icons-material/VerifiedUser';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Link, Typography } from '@mui/material';
 import type { ChangeEvent, MouseEventHandler } from 'react';
 import { useState } from 'react';

packages/widget/src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import { default as BlockIcon } from '@mui/icons-material/Block';
+import BlockIcon from '@mui/icons-material/Block';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 

packages/widget/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,5 +1,5 @@
-import { default as SwapHorizIcon } from '@mui/icons-material/SwapHoriz';
-import { default as SwapVertIcon } from '@mui/icons-material/SwapVert';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import SwapVertIcon from '@mui/icons-material/SwapVert';
 import { useFormContext } from 'react-hook-form';
 import { FormKey } from '../../providers';
 import { IconButton } from './ReverseTokensButton.style';

packages/widget/src/components/RouteCard/RouteCard.tsx

@@ -1,7 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk';
-import { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
-import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
-import { default as VerifiedUserIcon } from '@mui/icons-material/VerifiedUser';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import type { TooltipProps } from '@mui/material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import type { MouseEventHandler } from 'react';

packages/widget/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,7 +1,7 @@
-import { default as AccessTimeIcon } from '@mui/icons-material/AccessTimeFilled';
-import { default as EvStationIcon } from '@mui/icons-material/EvStation';
-import { default as LayersIcon } from '@mui/icons-material/Layers';
-import { default as MonetizationOnIcon } from '@mui/icons-material/MonetizationOn';
+import AccessTimeIcon from '@mui/icons-material/AccessTimeFilled';
+import EvStationIcon from '@mui/icons-material/EvStation';
+import LayersIcon from '@mui/icons-material/Layers';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';

packages/widget/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -1,4 +1,4 @@
-import { default as RouteIcon } from '@mui/icons-material/Route';
+import RouteIcon from '@mui/icons-material/Route';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 

packages/widget/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,4 +1,4 @@
-import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import WalletIcon from '@mui/icons-material/Wallet';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { useFormContext } from 'react-hook-form';

packages/widget/src/components/Step/CircularProgress.tsx

@@ -1,8 +1,8 @@
 import type { Process } from '@lifi/sdk';
-import { default as DoneIcon } from '@mui/icons-material/Done';
-import { default as ErrorRoundedIcon } from '@mui/icons-material/ErrorRounded';
-import { default as InfoRoundedIcon } from '@mui/icons-material/InfoRounded';
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { darken } from '@mui/material/styles';
 import {
   CircularIcon,

packages/widget/src/components/Step/DestinationWalletAddress.tsx

@@ -1,6 +1,6 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
-import { default as LinkRoundedIcon } from '@mui/icons-material/LinkRounded';
-import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import WalletIcon from '@mui/icons-material/Wallet';
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';

packages/widget/src/components/Step/GasStepProcess.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStepExtended } from '@lifi/sdk';
-import { default as EvStationIcon } from '@mui/icons-material/EvStation';
+import EvStationIcon from '@mui/icons-material/EvStation';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';

packages/widget/src/components/Step/StepProcess.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, Process } from '@lifi/sdk';
-import { default as LinkRoundedIcon } from '@mui/icons-material/LinkRounded';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';

packages/widget/src/components/StepActions/StepActions.tsx

@@ -1,7 +1,7 @@
 import type { LiFiStep, Step, StepExtended } from '@lifi/sdk';
-import { default as ArrowForwardIcon } from '@mui/icons-material/ArrowForward';
-import { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
-import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { StepIconProps } from '@mui/material';
 import {
   Badge,

packages/widget/src/components/TokenList/TokenListItem.tsx

@@ -1,4 +1,4 @@
-import { default as OpenInNewIcon } from '@mui/icons-material/OpenInNewRounded';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
 import {
   Avatar,
   Box,

packages/widget/src/components/TokenList/TokenNotFound.tsx

@@ -1,4 +1,4 @@
-import { default as SearchOffIcon } from '@mui/icons-material/SearchOff';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

packages/widget/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -1,4 +1,4 @@
-import { default as SwapHorizIcon } from '@mui/icons-material/SwapHoriz';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 

packages/widget/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,4 +1,4 @@
-import { default as DeleteIcon } from '@mui/icons-material/DeleteOutline';
+import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import {
   Button,
   Container,

packages/widget/src/pages/LanguagesPage/LanguagesPage.tsx

@@ -1,4 +1,4 @@
-import { default as CheckIcon } from '@mui/icons-material/Check';
+import CheckIcon from '@mui/icons-material/Check';
 import { Container, List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { ListItemText } from '../../components/ListItemText';

packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -1,7 +1,7 @@
-import { default as CheckIcon } from '@mui/icons-material/Check';
-import { default as CheckBoxOutlineBlankOutlinedIcon } from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
-import { default as CheckBoxOutlinedIcon } from '@mui/icons-material/CheckBoxOutlined';
-import { default as IndeterminateCheckBoxOutlinedIcon } from '@mui/icons-material/IndeterminateCheckBoxOutlined';
+import CheckIcon from '@mui/icons-material/Check';
+import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
+import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import {
   Avatar,
   Container,

packages/widget/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,4 +1,4 @@
-import { default as SearchIcon } from '@mui/icons-material/Search';
+import SearchIcon from '@mui/icons-material/Search';
 import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';

packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,5 +1,5 @@
-import { default as AirlineStopsIcon } from '@mui/icons-material/AirlineStops';
-import { default as SwapHorizIcon } from '@mui/icons-material/SwapHoriz';
+import AirlineStopsIcon from '@mui/icons-material/AirlineStops';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';

packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,4 +1,4 @@
-import { default as EvStationIcon } from '@mui/icons-material/EvStation';
+import EvStationIcon from '@mui/icons-material/EvStation';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettingMonitor } from '../../hooks';

packages/widget/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,4 +1,4 @@
-import { default as LanguageIcon } from '@mui/icons-material/Language';
+import LanguageIcon from '@mui/icons-material/Language';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useLanguages } from '../../hooks';

packages/widget/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { default as InfoRounded } from '@mui/icons-material/InfoRounded';
+import InfoRounded from '@mui/icons-material/InfoRounded';
 import {
   Box,
   Button,

packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,5 +1,5 @@
 import { Orders } from '@lifi/sdk';
-import { default as RouteIcon } from '@mui/icons-material/Route';
+import RouteIcon from '@mui/icons-material/Route';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettingMonitor } from '../../hooks';

packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx

@@ -1,4 +1,4 @@
-import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import WalletIcon from '@mui/icons-material/Wallet';
 import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';

packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,5 +1,5 @@
-import { default as PercentIcon } from '@mui/icons-material/Percent';
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import PercentIcon from '@mui/icons-material/Percent';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Typography } from '@mui/material';
 import type { ChangeEventHandler, FocusEventHandler } from 'react';
 import { useRef, useState } from 'react';

packages/widget/src/pages/SettingsPage/ThemeSettings.tsx

@@ -1,6 +1,6 @@
-import { default as BrightnessAuto } from '@mui/icons-material/BrightnessAuto';
-import { default as LightModeIcon } from '@mui/icons-material/LightMode';
-import { default as Nightlight } from '@mui/icons-material/Nightlight';
+import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import NightlightIcon from '@mui/icons-material/Nightlight';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs } from '../../components/Tabs';
@@ -12,8 +12,8 @@ import { SettingCardExpandable, SummaryValue } from './SettingsCard';
 
 const themeIcons = {
   light: LightModeIcon,
-  dark: Nightlight,
-  auto: BrightnessAuto,
+  dark: NightlightIcon,
+  auto: BrightnessAutoIcon,
 };
 
 interface ThemeTabProps {

packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { default as ContentCopyIcon } from '@mui/icons-material/ContentCopyRounded';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -1,4 +1,4 @@
-import { default as ReceiptLongRoundedIcon } from '@mui/icons-material/ReceiptLongRounded';
+import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 

packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,5 +1,5 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import {

packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,7 +1,7 @@
-import { default as DoneIcon } from '@mui/icons-material/Done';
-import { default as ErrorRoundedIcon } from '@mui/icons-material/ErrorRounded';
-import { default as InfoRoundedIcon } from '@mui/icons-material/InfoRounded';
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';

packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,5 +1,5 @@
 import type { Route } from '@lifi/sdk';
-import { default as WarningRoundedIcon } from '@mui/icons-material/WarningRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { forwardRef, useRef } from 'react';

packages/widget/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,5 +1,5 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import { default as DeleteIcon } from '@mui/icons-material/Delete';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Box, Button, Tooltip } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';

scripts/mui-icons.js

@@ -0,0 +1,32 @@
+// FIXME: https://github.com/mui/material-ui/issues/35233
+const fs = require('fs-extra');
+const path = require('path');
+
+const packagePath = process.cwd();
+const directoryPath = path.join(packagePath, './dist/_esm');
+
+const replaceInFile = async (filePath) => {
+  let content = await fs.readFile(filePath, 'utf8');
+  const regex = /@mui\/icons-material\/(?!esm\/)([^;]+)/g;
+  const replacement = '@mui/icons-material/esm/$1';
+  content = content.replace(regex, replacement);
+  await fs.writeFile(filePath, content, 'utf8');
+};
+
+const walkDirectory = async (dir) => {
+  const files = await fs.readdir(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = await fs.stat(fullPath);
+    if (stat.isDirectory()) {
+      await walkDirectory(fullPath);
+    } else if (fullPath.endsWith('.js')) {
+      await replaceInFile(fullPath);
+    }
+  }
+};
+
+walkDirectory(directoryPath).then(() =>
+  // eslint-disable-next-line no-console
+  console.log('@mui/icons-material processing complete.'),
+);