@lifi/widget 1.32.4 → 1.32.5

package/components/Step/GasStepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EvStationOutlined as EvStationIcon } from '@mui/icons-material';
+import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
@@ -9,7 +9,7 @@ export const GasStepProcess = ({ step }) => {
     return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
                         } }) }), _jsxs(Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {

package/components/Step/StepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LinkRounded as LinkIcon } from '@mui/icons-material';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
 import { Box, Link, Typography } from '@mui/material';
 import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
@@ -13,5 +13,5 @@ export const StepProcess = ({ step, process }) => {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',
-                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };

package/components/StepActions/StepActions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';

package/components/SwapRouteCard/SwapRouteCard.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, ExpandLess as ExpandLessIcon, ExpandMore as ExpandMoreIcon, LayersOutlined as LayersIcon, } from '@mui/icons-material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +38,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
         .reduce((duration, x) => duration + x, 0) / 60);
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
-    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
+    return (_jsxs(Box, { display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${gas.token.symbol}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(EvStationOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
-                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
+                            }) })] }) }), !dense ? (_jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { lineHeight: 0, mr: 0.5, color: "grey.500", children: _jsx(LayersOutlinedIcon, { fontSize: dense ? 'medium' : 'small' }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })) : null] }));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Route as RouteIcon } from '@mui/icons-material';
+import RouteIcon from '@mui/icons-material/Route';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapRouteNotFoundCard = () => {

package/components/SwapRoutes/SwapRoutes.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Box, IconButton } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

package/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -32,7 +32,6 @@ export declare const Header: import("@emotion/styled").StyledComponent<import("@
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -40,4 +39,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/TokenList/TokenNotFound.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SearchOff as SearchOffIcon } from '@mui/icons-material';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Box, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.32.4";
+export declare const version = "1.32.5";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.32.4';
+export const version = '1.32.5';

package/hooks/useRouteExecution.js

@@ -66,7 +66,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         if (!routeExecution?.route) {
             throw Error('Execution route not found.');
         }
-        queryClient.removeQueries(['routes']);
+        queryClient.removeQueries(['routes'], { exact: false });
         return lifi.executeRoute(account.signer, routeExecution.route, {
             updateCallback,
             switchChainHook,

package/hooks/useSwapRoutes.d.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk';
+import type { Route, RoutesResponse } from '@lifi/sdk';
 export declare const useSwapRoutes: () => {
     routes: Route[] | undefined;
     isLoading: boolean;
@@ -6,7 +6,5 @@ export declare const useSwapRoutes: () => {
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse | {
-        routes: Route[];
-    }, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, any>>;
 };

package/hooks/useSwapRoutes.js

@@ -151,6 +151,25 @@ export const useSwapRoutes = () => {
             }
             return true;
         },
+        onSuccess(data) {
+            if (data.routes[0]) {
+                // Update local tokens cache to keep priceUSD in sync
+                const { fromToken, toToken } = data.routes[0];
+                [fromToken, toToken].forEach((token) => {
+                    queryClient.setQueriesData(['token-balances', account.address, token.chainId], (data) => {
+                        if (data) {
+                            const clonedData = [...data];
+                            const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                            clonedData[index] = {
+                                ...clonedData[index],
+                                ...token,
+                            };
+                            return clonedData;
+                        }
+                    });
+                });
+            }
+        },
     });
     return {
         routes: data?.routes,

package/hooks/useTokenAddressBalance.js

@@ -3,6 +3,7 @@ import { useTokenBalances } from './useTokenBalances';
 export const useTokenAddressBalance = (chainId, tokenAddress) => {
     const { tokens, tokensWithBalance, isBalanceLoading, refetch } = useTokenBalances(chainId);
     const token = useMemo(() => {
+        console.log('useTokenAddressBalance');
         const token = (tokensWithBalance ?? tokens)?.find((token) => token.address === tokenAddress && token.chainId === chainId);
         return token;
     }, [chainId, tokenAddress, tokens, tokensWithBalance]);

package/hooks/useTokenBalance.js

@@ -51,15 +51,16 @@ export const useTokenBalance = (token, accountAddress) => {
                 staleTime: defaultRefetchInterval,
             });
         }
-        queryClient.setQueryData(['token-balances', accountAddress, token.chainId], (data) => {
+        queryClient.setQueriesData(['token-balances', accountAddress, token.chainId], (data) => {
             if (data) {
-                const index = data.findIndex((dataToken) => dataToken.address === token.address);
-                data[index] = {
-                    ...data[index],
+                const clonedData = [...data];
+                const index = clonedData.findIndex((dataToken) => dataToken.address === token.address);
+                clonedData[index] = {
+                    ...clonedData[index],
                     amount: formattedAmount,
                 };
+                return clonedData;
             }
-            return data;
         });
         return {
             ...tokenBalances[0],
@@ -71,11 +72,7 @@ export const useTokenBalance = (token, accountAddress) => {
         staleTime: defaultRefetchInterval,
     });
     const refetchAllBalances = () => {
-        queryClient.refetchQueries([
-            'token-balances',
-            token?.chainId,
-            accountAddress,
-        ]);
+        queryClient.refetchQueries(['token-balances', accountAddress, token?.chainId], { exact: false });
     };
     const refetchNewBalance = useCallback(() => {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {

package/hooks/useTokenBalances.js

@@ -1,4 +1,3 @@
-/* eslint-disable consistent-return */
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useLiFi, useWallet } from '../providers';

package/hooks/useTokenSearch.js

@@ -9,11 +9,13 @@ export const useTokenSearch = (chainId, tokenQuery, enabled) => {
         });
         if (token) {
             queryClient.setQueriesData(['tokens'], (data) => {
-                if (!data?.tokens[chainId].some((t) => t.address === token.address)) {
-                    data?.tokens[chainId].push(token);
+                if (data &&
+                    !data.tokens[chainId].some((t) => t.address === token.address)) {
+                    const clonedData = { ...data };
+                    clonedData.tokens[chainId].push(token);
+                    return clonedData;
                 }
-                return data;
-            }, { updatedAt: Date.now() });
+            });
         }
         return token;
     }, {

package/i18n/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import de from './de.json';
 import en from './en.json';
 import es from './es.json';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.32.4",
+  "version": "1.32.5",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -44,12 +44,12 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.7.2",
-    "@lifi/wallet-management": "^1.2.8",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/lab": "^5.0.0-alpha.120",
-    "@mui/material": "^5.11.10",
+    "@lifi/wallet-management": "^1.2.9",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/lab": "^5.0.0-alpha.121",
+    "@mui/material": "^5.11.11",
     "@tanstack/react-query": "^4.24.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.49",
+    "@tanstack/react-virtual": "^3.0.0-beta.52",
     "big.js": "^6.2.1",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -59,10 +59,10 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.2",
     "react-i18next": "^12.2.0",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.8.2",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.3"
+    "zustand": "^4.3.5"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SwapHoriz as SwapHorizIcon } from '@mui/icons-material';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const ActiveSwapsEmpty = () => {

package/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable consistent-return */
-import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -21,7 +20,7 @@ export const ActiveSwapsPage = () => {
     }, []);
     useEffect(() => {
         if (executingRoutes.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteOutlineIcon, {}) }));
         }
     }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckBox, CheckBoxOutlineBlankOutlined, CheckBoxOutlined, IndeterminateCheckBoxOutlined, } from '@mui/icons-material';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
+import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import { Avatar, Container, IconButton, List, ListItemAvatar, } from '@mui/material';
 import { useHeaderActionStore } from '../../components/Header';
 import { useEffect } from 'react';
@@ -38,10 +41,10 @@ export const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlined, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlined, {})) : (_jsx(CheckBoxOutlineBlankOutlined, {})) }));
+        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
     }, [enabledTools.length, setTools, tools, type, typeKey]);
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: tools?.[typeKey].map((tool) => (_jsxs(ListItemButton, { onClick: () => handleClick(tool.key), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? (_jsx(CheckBox, { color: "primary" })) : (_jsx(CheckBoxOutlineBlankOutlined, {}))] }, tool.name))) }) }));
+            }, children: tools?.[typeKey].map((tool) => (_jsxs(ListItemButton, { onClick: () => handleClick(tool.key), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? (_jsx(CheckBoxIcon, { color: "primary" })) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {}))] }, tool.name))) }) }));
 };

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Search as SearchIcon } from '@mui/icons-material';
+import SearchIcon from '@mui/icons-material/Search';
 import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';

package/pages/SettingsPage/EnabledToolsButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight as ChevronRightIcon } from '@mui/icons-material';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -12,7 +12,7 @@ export const EnabledToolsButton = ({ type }) => {
     const navigate = useNavigate();
     const [enabledTools, tools] = useSettingsStore((state) => {
         const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
-        return [enabledTools.filter((tool) => tool).length, enabledTools.length];
+        return [enabledTools.filter(Boolean).length, enabledTools.length];
     }, shallow);
     const handleClick = () => {
         navigate(navigationRoutes[type.toLowerCase()]);

package/pages/SettingsPage/GasPriceSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';

package/pages/SettingsPage/LanguageSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Orders } from '@lifi/sdk';
-import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { FormControl, MenuItem } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@mui/icons-material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +38,7 @@ export const SwapDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     useEffect(() => {
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+        return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteOutlineIcon, {}) }));
     }, [toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
     return (_jsxs(Container, { children: [_jsxs(Box, { sx: {

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReceiptLongRounded as HistoryIcon } from '@mui/icons-material';
+import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
 import { Container, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const SwapHistoryEmpty = () => {
@@ -11,5 +11,5 @@ export const SwapHistoryEmpty = () => {
             alignItems: 'center',
             justifyContent: 'center',
             paddingY: 12,
-        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(HistoryIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(ReceiptLongRoundedIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('swap.info.title.emptySwapHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('swap.info.message.emptySwapHistory') })] }));
 };

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable consistent-return */
-import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +21,7 @@ export const SwapHistoryPage = () => {
     }, []);
     useEffect(() => {
         if (swaps.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteOutlineIcon, {}) }));
         }
     }, [swaps.length, toggleDialog]);
     if (!swaps.length) {

package/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningRounded as WarningIcon } from '@mui/icons-material';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
@@ -44,7 +44,7 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.newToAmount, data?.toToken.decimals, 5),

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable consistent-return */
-import { Done as DoneIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon, WarningRounded as WarningIcon, } from '@mui/icons-material';
+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';
@@ -137,8 +139,8 @@ export const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-                                    hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorIcon, { color: "error" })) : null] }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, { py: 1, children: primaryMessage }), secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
+    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+                                    hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null] }), _jsx(Typography, { py: 1, children: primaryMessage }), secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/pages/SwapPage/SwapPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Delete as DeleteIcon } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Box, Button, Tooltip } from '@mui/material';
 import { useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningRounded as WarningIcon } from '@mui/icons-material';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
 import { forwardRef, useRef } from 'react';
@@ -18,7 +18,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, { fontWeight: 600, children: [Big(route.toAmountUSD || 0)
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, { fontWeight: 600, children: [Big(route.toAmountUSD || 0)
                                 .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
                                 .minus(1)
                                 .mul(100)

package/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
     children?: import("react").ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -8,4 +7,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;