@lifi/widget 3.18.7 → 3.19.0-beta.1

package/src/components/Tabs/Tabs.style.tsx

@@ -2,7 +2,6 @@ import type { TabProps } from '@mui/material'
 import {
   Tab as MuiTab,
   Tabs as MuiTabs,
-  alpha,
   styled,
   tabClasses,
   tabsClasses,
@@ -22,15 +21,15 @@ export const Tabs = styled(MuiTabs)(({ theme }) => ({
 }))
 
 export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor: alpha(theme.palette.common.white, 0.08),
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   [`.${tabsClasses.indicator}`]: {
-    backgroundColor: alpha(theme.palette.common.black, 0.56),
-    ...theme.applyStyles('light', {
-      backgroundColor: theme.palette.background.paper,
-    }),
+    backgroundColor: theme.vars.palette.background.paper,
   },
-  ...theme.applyStyles('light', {
-    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    [`.${tabsClasses.indicator}`]: {
+      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+    },
   }),
 }))
 
@@ -40,14 +39,8 @@ export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
   textTransform: 'none',
   fontSize: '1rem',
   fontWeight: 700,
-  color: theme.palette.common.white,
+  color: theme.vars.palette.common.onBackground,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.common.white,
-    ...theme.applyStyles('light', {
-      color: theme.palette.common.black,
-    }),
+    color: theme.vars.palette.common.onBackground,
   },
-  ...theme.applyStyles('light', {
-    color: theme.palette.common.black,
-  }),
 }))

package/src/components/TextFitter/TextFitter.tsx

@@ -75,7 +75,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
       //     : height
       // }
       preserveAspectRatio={preserveAspectRatio}
-      fill={theme.palette.text.primary}
+      fill={theme.vars.palette.text.primary}
       ref={ref}
     >
       <title>{children}</title>

package/src/components/Timer/TimerContent.tsx

@@ -1,4 +1,4 @@
-import { AccessTimeFilled } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import { Tooltip } from '@mui/material'
 import { Box } from '@mui/system'
 import type { FC, PropsWithChildren } from 'react'

package/src/components/Token/Token.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, alpha, styled } from '@mui/material'
+import { Box, Typography, styled } from '@mui/material'
 
 export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',
@@ -13,13 +13,13 @@ export const TextSecondary = styled(Typography, {
   fontSize: 12,
   lineHeight: 1,
   fontWeight: 500,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   whiteSpace: 'nowrap',
   variants: [
     {
       props: ({ dot }) => dot,
       style: {
-        color: alpha(theme.palette.text.secondary, 0.56),
+        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
       },
     },
   ],
@@ -29,8 +29,8 @@ export const TokenDivider = styled(Box)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
-  borderColor: theme.palette.grey[800],
-  ...theme.applyStyles('light', {
-    borderColor: theme.palette.grey[300],
+  borderColor: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
   }),
 }))

package/src/components/TokenList/TokenList.style.tsx

@@ -1,6 +1,5 @@
 import type { IconButtonProps, LinkProps } from '@mui/material'
 import { IconButton as MuiIconButton, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../../utils/colors.js'
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js'
 
 export const ListItem = styled(ListItemBase)(() => ({
@@ -19,9 +18,9 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
     color: 'inherit',
     backgroundColor: 'unset',
     minWidth: 'unset',
-    borderRadius: theme.shape.borderRadiusTertiary,
+    borderRadius: theme.vars.shape.borderRadiusTertiary,
     '&:hover': {
-      backgroundColor: getContrastAlphaColor(theme, 0.04),
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
     },
     svg: {
       fontSize: 14,

package/src/components/TokenList/TokenList.tsx

@@ -53,7 +53,11 @@ export const TokenList: FC<TokenListProps> = ({
         .filter(
           (token) =>
             token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.symbol
+              .toUpperCase()
+              // Replace ₮ with T for USD₮0
+              .replaceAll('₮', 'T')
+              .includes(searchFilter) ||
             token.address.toUpperCase().includes(searchFilter)
         )
         .sort(filteredTokensComparator(searchFilter))

package/src/components/TokenList/TokenListItem.tsx

@@ -1,5 +1,5 @@
 import { ChainType } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import {
   Avatar,
   Box,

package/src/components/TokenList/types.ts

@@ -1,11 +1,11 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import type { Account } from '@lifi/wallet-management'
-import type { MouseEventHandler, MutableRefObject } from 'react'
+import type { MouseEventHandler, RefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
 export interface TokenListProps {
-  parentRef: MutableRefObject<HTMLElement | null>
+  parentRef: RefObject<HTMLElement | null>
   formType: FormType
   height: number
   onClick?(): void
@@ -14,7 +14,7 @@ export interface TokenListProps {
 export interface VirtualizedTokenListProps {
   account: Account
   tokens: TokenAmount[]
-  scrollElementRef: MutableRefObject<HTMLElement | null>
+  scrollElementRef: RefObject<HTMLElement | null>
   isLoading: boolean
   isBalanceLoading: boolean
   chainId?: number

package/src/components/TokenRate/TokenRate.style.ts

@@ -4,7 +4,7 @@ export const TokenRateTypography = styled(Typography)(({ theme }) => ({
   fontSize: 14,
   lineHeight: 1.429,
   fontWeight: 500,
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   cursor: 'pointer',
   '&:hover': {
     opacity: 1,

package/src/components/TransactionDetails.tsx

@@ -1,10 +1,8 @@
 import type { RouteExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import {
-  ExpandLess,
-  ExpandMore,
-  LocalGasStationRounded,
-} from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import type { CardProps } from '@mui/material'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.18.7'
+export const version = '3.19.0-beta.1'

package/src/hooks/useSetContentHeight.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { useLayoutEffect } from 'react'
 import { getRelativeContainer } from '../utils/elements.js'
 import { useDefaultElementId } from './useDefaultElementId.js'
@@ -8,7 +8,7 @@ import { useDefaultElementId } from './useDefaultElementId.js'
 //   CSS changes in those components can have implications for the functionality in this hook
 
 export const useSetContentHeight = (
-  ref: MutableRefObject<HTMLElement | null>,
+  ref: RefObject<HTMLElement | null>,
   dependency?: unknown
 ) => {
   const elementId = useDefaultElementId()

package/src/i18n/en.json

@@ -47,6 +47,7 @@
     "startSwapping": "Start swapping",
     "swap": "Swap",
     "swapReview": "Review swap",
+    "system": "System",
     "tryAgain": "Try again",
     "viewCoverage": "View coverage",
     "viewOnExplorer": "View on explorer"
@@ -308,7 +309,7 @@
     "searchExchanges": "Search by exchange name"
   },
   "settings": {
-    "theme": "Theme",
+    "appearance": "Appearance",
     "enabledBridges": "Bridges",
     "enabledExchanges": "Exchanges",
     "gasPrice": {

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

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

package/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,4 +1,4 @@
-import { DeleteOutline } from '@mui/icons-material'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
 import type { IconButtonProps } from '@mui/material'
 import {
   Button,

package/src/pages/LanguagesPage.tsx

@@ -1,4 +1,4 @@
-import { Check } from '@mui/icons-material'
+import Check from '@mui/icons-material/Check'
 import { List } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { ListItemText } from '../components/ListItemText.js'

package/src/pages/SelectEnabledToolsPage.tsx

@@ -1,10 +1,8 @@
 import type { ToolsResponse } from '@lifi/sdk'
-import {
-  Check,
-  CheckBoxOutlineBlankOutlined,
-  CheckBoxOutlined,
-  IndeterminateCheckBoxOutlined,
-} from '@mui/icons-material'
+import Check from '@mui/icons-material/Check'
+import CheckBoxOutlineBlankOutlined from '@mui/icons-material/CheckBoxOutlineBlankOutlined'
+import CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined'
+import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'
 import {
   Avatar,
   IconButton,

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,10 +1,8 @@
-import {
-  Error as ErrorIcon,
-  TurnedIn,
-  WarningRounded,
-} from '@mui/icons-material'
+import ErrorIcon from '@mui/icons-material/Error'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { ChangeEvent, MutableRefObject } from 'react'
+import type { ChangeEvent, RefObject } from 'react'
 import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -48,7 +46,7 @@ export const BookmarkAddressSheet = forwardRef<
 
   const handleCancel = () => {
     setError(undefined)
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   const validateWithAddressFromInput = async () => {
@@ -112,7 +110,7 @@ export const BookmarkAddressSheet = forwardRef<
         })
         return
       }
-      ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
 
       onAddBookmark({
         name: validatedBookmark.name,

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,10 +1,8 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedIn,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedIn from '@mui/icons-material/TurnedIn'
 import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,6 +1,7 @@
-import { Wallet, WarningRounded } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -33,7 +34,7 @@ export const ConfirmAddressSheet = forwardRef<
   ConfirmAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,11 +1,9 @@
 import type { Account } from '@lifi/wallet-management'
 import { useAccount } from '@lifi/wallet-management'
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-  Wallet,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import Wallet from '@mui/icons-material/Wallet'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,11 +1,9 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  History,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedInNot,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import History from '@mui/icons-material/History'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedInNot from '@mui/icons-material/TurnedInNot'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,8 +1,6 @@
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -13,7 +13,6 @@ import { InputCard } from '../../components/Card/InputCard.js'
 import { Input } from '../../components/Input.js'
 import type { PageContainerProps } from '../../components/PageContainer.js'
 import { PageContainer } from '../../components/PageContainer.js'
-import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const AddressInput = styled(Input)(({ theme }) => ({
   padding: 0,
@@ -87,12 +86,12 @@ export const IconContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   width: 80,
   height: 80,
-  color: theme.palette.grey[300],
-  background: theme.palette.grey[800],
   borderRadius: '50%',
-  ...theme.applyStyles('light', {
-    color: theme.palette.grey[700],
-    background: theme.palette.grey[200],
+  color: theme.vars.palette.grey[700],
+  background: theme.vars.palette.grey[200],
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.grey[300],
+    background: theme.vars.palette.grey[800],
   }),
 }))
 
@@ -119,7 +118,7 @@ export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
     : { minHeight: 440 }),
 }))
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.default,
+  background: theme.vars.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
   bottom: 0,
@@ -141,10 +140,10 @@ export const EmptyContainer = styled(Box)(({ theme }) => ({
 export const ValidationAlert = styled(Alert)(({ theme }) => ({
   backgroundColor: 'transparent',
   padding: 0,
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   [`.${alertClasses.icon}`]: {
     padding: 0,
-    color: theme.palette.error.main,
+    color: theme.vars.palette.error.main,
   },
   [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
 }))
@@ -154,6 +153,6 @@ export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   },
 }))

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,10 +1,8 @@
 import { useAccount } from '@lifi/wallet-management'
-import {
-  Error as ErrorIcon,
-  History,
-  TurnedIn,
-  Wallet,
-} from '@mui/icons-material'
+import ErrorIcon from '@mui/icons-material/Error'
+import History from '@mui/icons-material/History'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import Wallet from '@mui/icons-material/Wallet'
 import { Box, Tooltip, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'
 import { useRef, useState } from 'react'

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

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

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+import EvStation from '@mui/icons-material/EvStation'
 import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,4 +1,4 @@
-import { Language } from '@mui/icons-material'
+import Language from '@mui/icons-material/Language'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,11 +1,10 @@
 import { Box, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: getContrastAlphaColor(theme, 0.04),
+  background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   borderRadius: '16px',
   padding: '16px',
   svg: {
-    fill: getContrastAlphaColor(theme, 0.4),
+    fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   },
 }))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

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

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk'
-import { Route } from '@mui/icons-material'
+import Route from '@mui/icons-material/Route'
 import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -3,30 +3,30 @@ import {
   Box,
   ButtonBase,
   InputBase,
-  alpha,
   inputBaseClasses,
   styled,
 } from '@mui/material'
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   display: 'flex',
-  backgroundColor: alpha(theme.palette.common.white, 0.08),
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: theme.vars.shape.borderRadius,
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
-  ...theme.applyStyles('light', {
-    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
   }),
 }))
 
 const slippageControlSelected = (theme: Theme) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.background.paper
-      : alpha(theme.palette.common.black, 0.56),
-  borderRadius: theme.shape.borderRadius - 4,
-  boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+  backgroundColor: theme.vars.palette.background.paper,
+  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,
+  }),
+  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })
 
 interface SlippageDefaultProps {
@@ -35,10 +35,11 @@ interface SlippageDefaultProps {
 
 export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
+    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelected(theme),
+            ...slippageControlSelectedStyles,
           },
         }
       : {}
@@ -49,7 +50,7 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
       fontSize: '1rem',
       fontWeight: 700,
       '&:focus': {
-        ...slippageControlSelected(theme),
+        ...slippageControlSelectedStyles,
       },
       ...selectedStyle,
     }
@@ -58,10 +59,11 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
 
 export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
+    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelected(theme),
+            ...slippageControlSelectedStyles,
           },
         }
       : {}
@@ -80,7 +82,7 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
           opacity: 1,
         },
         '&:focus': {
-          ...slippageControlSelected(theme),
+          ...slippageControlSelectedStyles,
         },
         ...selectedStyle,
       },

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,4 +1,5 @@
-import { Percent, WarningRounded } from '@mui/icons-material'
+import Percent from '@mui/icons-material/Percent'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Typography, debounce } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'