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

package/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -1,14 +1,14 @@
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { ArrowForward, ErrorRounded, InfoRounded } from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import { useProcessMessage, useRouteExecution } from '../../hooks';
-import { RouteExecutionStatus } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { StepTimer } from '../Step/StepTimer';
-import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
-import { ListItem, ListItemButton } from './ActiveTransactions.style';
+import { useProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useRouteExecution } from '../../hooks/useRouteExecution.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { StepTimer } from '../Step/StepTimer.js';
+import { TokenAvatar } from '../TokenAvatar/TokenAvatar.js';
+import { TokenAvatarGroup } from '../TokenAvatar/TokenAvatar.style.js';
+import { ListItem, ListItemButton } from './ActiveTransactions.style.js';
 
 export const ActiveTransactionItem: React.FC<{
   routeId: string;
@@ -36,9 +36,9 @@ export const ActiveTransactionItem: React.FC<{
   const getStatusComponent = () => {
     switch (lastActiveProcess?.status) {
       case 'ACTION_REQUIRED':
-        return <InfoRoundedIcon color="info" fontSize="small" />;
+        return <InfoRounded color="info" fontSize="small" />;
       case 'FAILED':
-        return <ErrorRoundedIcon color="error" fontSize="small" />;
+        return <ErrorRounded color="error" fontSize="small" />;
       default:
         return (
           <Typography fontSize={14} fontWeight={500}>
@@ -73,7 +73,7 @@ export const ActiveTransactionItem: React.FC<{
             }}
           >
             {route.fromToken.symbol}
-            <ArrowForwardIcon sx={{ paddingX: 0.5 }} />
+            <ArrowForward sx={{ paddingX: 0.5 }} />
             {route.toToken.symbol}
           </Typography>
         }

package/components/ActiveTransactions/ActiveTransactions.style.ts

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

package/components/ActiveTransactions/ActiveTransactions.tsx

@@ -2,11 +2,12 @@ import type { BoxProps } from '@mui/material';
 import { Stack } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useExecutingRoutesIds } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { Card, CardTitle } from '../Card';
-import { ActiveTransactionItem } from './ActiveTransactionItem';
-import { ShowAllButton } from './ActiveTransactions.style';
+import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { Card } from '../Card/Card.js';
+import { CardTitle } from '../Card/CardTitle.js';
+import { ActiveTransactionItem } from './ActiveTransactionItem.js';
+import { ShowAllButton } from './ActiveTransactions.style.js';
 
 export const ActiveTransactions: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();

package/components/ActiveTransactions/index.ts

@@ -1,2 +1,2 @@
-export * from './ActiveTransactionItem';
-export * from './ActiveTransactions';
+export * from './ActiveTransactionItem.js';
+export * from './ActiveTransactions.js';

package/components/AlertMessage/AlertMessage.style.tsx

@@ -1,7 +1,9 @@
-import { Box } from '@mui/material';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
-import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
-import type { Severity } from './types';
+import { Box, alpha, darken, lighten, styled } from '@mui/material';
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js';
+import type { Severity } from './types.js';
 
 interface AlertSeverityProps {
   severity: Severity;

package/components/AlertMessage/AlertMessage.tsx

@@ -1,7 +1,10 @@
 import type { BoxProps } from '@mui/material';
 import type { PropsWithChildren, ReactNode } from 'react';
-import { AlertMessageCard, AlertMessageCardTitle } from './AlertMessage.style';
-import type { Severity } from './types';
+import {
+  AlertMessageCard,
+  AlertMessageCardTitle,
+} from './AlertMessage.style.js';
+import type { Severity } from './types.js';
 
 interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
   icon: ReactNode;

package/components/AlertMessage/index.ts

@@ -1,3 +1,3 @@
-export * from './AlertMessage';
-export * from './AlertMessage.style';
-export * from './types';
+export * from './AlertMessage.js';
+export * from './AlertMessage.style.js';
+export * from './types.js';

package/components/AmountInput/AmountInput.style.tsx

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

package/components/AmountInput/AmountInput.tsx

@@ -3,27 +3,26 @@ import type { BoxProps } from '@mui/material';
 import type { ChangeEvent, ReactNode } from 'react';
 import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useToken } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import type { FormTypeProps } from '../../stores';
-import {
-  FormKeyHelper,
-  useFieldController,
-  useFieldValues,
-} from '../../stores';
-import { DisabledUI } from '../../types';
-import { fitInputText, formatInputAmount } from '../../utils';
-import { Card, CardTitle } from '../Card';
+import { useToken } from '../../hooks/useToken.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { DisabledUI } from '../../types/widget.js';
+import { formatInputAmount } from '../../utils/format.js';
+import { fitInputText } from '../../utils/input.js';
+import { Card } from '../Card/Card.js';
+import { CardTitle } from '../Card/CardTitle.js';
 import {
   FormContainer,
   FormControl,
   Input,
   maxInputFontSize,
   minInputFontSize,
-} from './AmountInput.style';
-import { AmountInputEndAdornment } from './AmountInputEndAdornment';
-import { AmountInputStartAdornment } from './AmountInputStartAdornment';
-import { PriceFormHelperText } from './PriceFormHelperText';
+} from './AmountInput.style.js';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment.js';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment.js';
+import { PriceFormHelperText } from './PriceFormHelperText.js';
 
 export const AmountInput: React.FC<FormTypeProps & BoxProps> = ({
   formType,

package/components/AmountInput/AmountInputAdornment.style.tsx

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

package/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,14 +1,14 @@
 import { InputAdornment } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import {
-  useAvailableChains,
-  useGasRecommendation,
-  useTokenAddressBalance,
-} from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, useFieldActions, useFieldValues } from '../../stores';
-import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js';
 
 export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   const { t } = useTranslation();

package/components/AmountInput/AmountInputStartAdornment.tsx

@@ -1,7 +1,9 @@
-import { useChain, useToken } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, useFieldValues } from '../../stores';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+import { useChain } from '../../hooks/useChain.js';
+import { useToken } from '../../hooks/useToken.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar/TokenAvatar.js';
 
 export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
   formType,

package/components/AmountInput/PriceFormHelperText.tsx

@@ -1,10 +1,11 @@
 import type { TokenAmount } from '@lifi/sdk';
 import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, useFieldValues } from '../../stores';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
 
 export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(

package/components/AmountInput/index.ts

@@ -1 +1 @@
-export * from './AmountInput';
+export * from './AmountInput.js';

package/components/AppContainer.tsx

@@ -1,9 +1,8 @@
-import { Box, Container, ScopedCssBaseline } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { useWidgetConfig } from '../providers';
-import type { WidgetVariant } from '../types';
-import { ElementId, createElementId } from '../utils';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import type { WidgetVariant } from '../types/widget.js';
+import { ElementId, createElementId } from '../utils/elements.js';
 
 export const maxHeight = 680;
 

package/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,11 +1,12 @@
-import LoadingButton from '@mui/lab/LoadingButton';
+import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useAccount, useChain } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useFieldValues } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import type { BaseTransactionButtonProps } from './types';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import type { BaseTransactionButtonProps } from './types.js';
 
 export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   onClick,

package/components/BaseTransactionButton/index.ts

@@ -1,2 +1,2 @@
-export { BaseTransactionButton } from './BaseTransactionButton';
-export * from './types';
+export { BaseTransactionButton } from './BaseTransactionButton.js';
+export * from './types.js';

package/components/BottomSheet/BottomSheet.tsx

@@ -6,9 +6,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useGetScrollableContainer } from '../../hooks';
-import { modalProps, paperProps, slotProps } from '../Dialog';
-import type { BottomSheetBase, BottomSheetProps } from './types';
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js';
+import { modalProps, paperProps, slotProps } from '../Dialog.js';
+import type { BottomSheetBase, BottomSheetProps } from './types.js';
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
   ({ elementRef, children, open, onClose }, ref) => {

package/components/BottomSheet/index.ts

@@ -1,2 +1,2 @@
-export * from './BottomSheet';
-export * from './types';
+export * from './BottomSheet.js';
+export * from './types.js';

package/components/Card/Card.tsx

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

package/components/Card/CardButton.style.tsx

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

package/components/Card/CardButton.tsx

@@ -1,11 +1,11 @@
 import type { MouseEventHandler, PropsWithChildren } from 'react';
-import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types';
-import { Card } from './index';
+import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js';
+import { Card } from './Card.js';
 import {
   CardRowButton,
-  CardValue,
   CardTitleContainer,
-} from './CardButton.style';
+  CardValue,
+} from './CardButton.style.js';
 
 interface SettingCardButtonProps extends SettingCardTitle {
   onClick: MouseEventHandler;

package/components/Card/CardHeader.tsx

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

package/components/Card/CardIconButton.tsx

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

package/components/Card/CardLabel.tsx

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

package/components/Card/CardTitle.tsx

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

package/components/Card/index.ts

@@ -1,7 +1,7 @@
-export * from './Card';
-export * from './CardHeader';
-export * from './CardIconButton';
-export * from './CardLabel';
-export * from './CardTitle';
-export * from './CardButton';
-export * from './CardButton.style';
+export * from './Card.js';
+export * from './CardHeader.js';
+export * from './CardIconButton.js';
+export * from './CardLabel.js';
+export * from './CardTitle.js';
+export * from './CardButton.js';
+export * from './CardButton.style.js';

package/components/ChainSelect/ChainSelect.style.tsx

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

package/components/ChainSelect/ChainSelect.tsx

@@ -3,11 +3,13 @@ import type { EVMChain } from '@lifi/sdk';
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import type { FormTypeProps } from '../../stores';
-import { FormKeyHelper, maxChainToOrder, useFieldValues } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ChainCard, ChainContainer } from './ChainSelect.style';
-import { useChainSelect } from './useChainSelect';
+import { maxChainToOrder } from '../../stores/chains/createChainOrderStore.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { ChainCard, ChainContainer } from './ChainSelect.style.js';
+import { useChainSelect } from './useChainSelect.js';
 
 export const ChainSelect = ({ formType }: FormTypeProps) => {
   const navigate = useNavigate();

package/components/ChainSelect/index.ts

@@ -1,2 +1,2 @@
-export * from './ChainSelect';
-export * from './useChainSelect';
+export * from './ChainSelect.js';
+export * from './useChainSelect.js';

package/components/ChainSelect/useChainSelect.ts

@@ -1,12 +1,12 @@
 import type { EVMChain } from '@lifi/sdk';
-import { useChains, useSwapOnly, useToAddressReset } from '../../hooks';
-import type { FormType } from '../../stores';
-import {
-  FormKeyHelper,
-  useChainOrder,
-  useFieldActions,
-  useFieldController,
-} from '../../stores';
+import { useChains } from '../../hooks/useChains.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useToAddressReset } from '../../hooks/useToAddressReset.js';
+import { useChainOrder } from '../../stores/chains/useChainOrder.js';
+import type { FormType } from '../../stores/form/types.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
 
 export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType);

package/components/ContractComponent/ContractComponent.tsx

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { Card } from '../Card';
+import { Card } from '../Card/Card.js';
 
 export const ContractComponent: React.FC<PropsWithChildren<BoxProps>> = ({
   children,

package/components/ContractComponent/index.ts

@@ -1 +1 @@
-export * from './ContractComponent';
+export * from './ContractComponent.js';

package/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import type { DialogProps, Theme } from '@mui/material';
 import { Dialog as MuiDialog } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import { useGetScrollableContainer } from '../hooks';
+import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js';
 
 export const modalProps = {
   sx: {

package/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -1,8 +1,7 @@
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Typography } from '@mui/material';
+import { WarningRounded } from '@mui/icons-material';
+import { Typography, styled } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { AlertMessage } from '../AlertMessage';
-import { styled } from '@mui/material/styles';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 
 // TODO: some of the styling currently used here doesn't align with usage in other places
 //  We might want to consider removing the padding and color here?
@@ -19,7 +18,7 @@ export const FundsSufficiencyMessage = () => {
   return (
     <AlertMessage
       severity="warning"
-      icon={<WarningRoundedIcon />}
+      icon={<WarningRounded />}
       title={<AlertTitle>{t(`warning.message.insufficientFunds`)}</AlertTitle>}
       isMultilineTitle
     />

package/components/GasMessage/GasMessage.style.ts

@@ -1,6 +1,5 @@
-import { switchClasses } from '@mui/material/Switch';
-import { alpha, styled } from '@mui/material/styles';
-import { Switch } from '../Switch';
+import { alpha, styled, switchClasses } from '@mui/material';
+import { Switch } from '../Switch.js';
 
 export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
   [`.${switchClasses.switchBase}`]: {

package/components/GasMessage/GasMessage.tsx

@@ -1,9 +1,10 @@
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse } from '@mui/material';
-import { useFromTokenSufficiency, useGasSufficiency } from '../../hooks';
-import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
-import { GasSufficiencyMessage } from './GasSufficiencyMessage';
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js';
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js';
 
 interface GasMessageProps extends BoxProps {
   route?: Route;

package/components/GasMessage/GasRefuelMessage.tsx

@@ -1,12 +1,13 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
+import { EvStation } from '@mui/icons-material';
 import type { BoxProps } from '@mui/material';
 import { Box, Collapse, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGasRefuel } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { AlertMessage } from '../AlertMessage';
-import { InfoMessageSwitch } from './GasMessage.style';
+import { useGasRefuel } from '../../hooks/useGasRefuel.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
+import { InfoMessageSwitch } from './GasMessage.style.js';
 
 export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
@@ -29,7 +30,7 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
       mountOnEnter
     >
       <AlertMessage
-        icon={<EvStationIcon />}
+        icon={<EvStation />}
         title={
           <Box
             display="flex"

package/components/GasMessage/GasSufficiencyMessage.tsx

@@ -1,9 +1,9 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
+import { EvStation } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
-import type { GasSufficiency } from '../../hooks';
-import { AlertMessage } from '../AlertMessage';
+import type { GasSufficiency } from '../../hooks/useGasSufficiency.js';
+import { AlertMessage } from '../AlertMessage/AlertMessage.js';
 
 interface GasSufficiencyMessageProps {
   insufficientGas?: GasSufficiency[];
@@ -16,7 +16,7 @@ export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
   return (
     <AlertMessage
       severity="warning"
-      icon={<EvStationIcon />}
+      icon={<EvStation />}
       title={
         <Typography variant="body2" fontWeight={700}>
           {t(`warning.title.insufficientGas`)}

package/components/GasMessage/index.ts

@@ -1,2 +1,2 @@
-export * from './GasMessage';
-export * from './GasRefuelMessage';
+export * from './GasMessage.js';
+export * from './GasRefuelMessage.js';

package/components/Header/CloseDrawerButton.tsx

@@ -1,8 +1,7 @@
-import CloseIcon from '@mui/icons-material/CloseRounded';
-import { Tooltip } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { CloseRounded } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useDrawer } from '../../AppDrawerContext';
+import { useDrawer } from '../../AppDrawerContext.js';
 
 export const CloseDrawerButton = () => {
   const { t } = useTranslation();
@@ -11,7 +10,7 @@ export const CloseDrawerButton = () => {
   return (
     <Tooltip title={t('button.close')} enterDelay={400} arrow>
       <IconButton size="medium" onClick={closeDrawer}>
-        <CloseIcon />
+        <CloseRounded />
       </IconButton>
     </Tooltip>
   );