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

package/components/Header/EVMDisconnectIconButton.tsx

@@ -1,4 +1,4 @@
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import type { Connector } from 'wagmi';
 import { useDisconnect } from 'wagmi';
@@ -18,7 +18,7 @@ export const EVMDisconnectIconButton = ({
         disconnect({ connector });
       }}
     >
-      <PowerSettingsNewIcon />
+      <PowerSettingsNewRounded />
     </IconButton>
   );
 };

package/components/Header/Header.style.ts

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

package/components/Header/Header.tsx

@@ -1,10 +1,11 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useDefaultElementId } from '../../hooks';
-import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
-import { Container } from './Header.style';
-import { NavigationHeader } from './NavigationHeader';
-import { WalletHeader } from './WalletHeader';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
+import { Container } from './Header.style.js';
+import { NavigationHeader } from './NavigationHeader.js';
+import { WalletHeader } from './WalletHeader.js';
 
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();

package/components/Header/NavigationHeader.tsx

@@ -1,23 +1,23 @@
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Box, Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { ArrowBack } from '@mui/icons-material';
+import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
-import { useAccount, useNavigateBack } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useHeaderStore } from '../../stores';
-import { HiddenUI } from '../../types';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js';
+import { HiddenUI } from '../../types/widget.js';
 import {
   backButtonRoutes,
   navigationRoutes,
   navigationRoutesValues,
-} from '../../utils';
-import { CloseDrawerButton } from './CloseDrawerButton';
-import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
-import { NavigationTabs } from './NavigationTabs';
-import { SettingsButton } from './SettingsButton';
-import { TransactionHistoryButton } from './TransactionHistoryButton';
-import { SplitWalletMenuButton } from './WalletHeader';
+} from '../../utils/navigationRoutes.js';
+import { CloseDrawerButton } from './CloseDrawerButton.js';
+import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js';
+import { NavigationTabs } from './NavigationTabs.js';
+import { SettingsButton } from './SettingsButton.js';
+import { TransactionHistoryButton } from './TransactionHistoryButton.js';
+import { SplitWalletMenuButton } from './WalletHeader.js';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
@@ -104,7 +104,7 @@ export const NavigationHeader: React.FC = () => {
       <HeaderAppBar elevation={0}>
         {backButtonRoutes.includes(path) ? (
           <IconButton size="medium" edge="start" onClick={navigateBack}>
-            <ArrowBackIcon />
+            <ArrowBack />
           </IconButton>
         ) : null}
         {splitSubvariant ? (

package/components/Header/NavigationTabs.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next';
-import { useSplitSubvariantStore, useFieldActions } from '../../stores';
-import { HeaderAppBar, SplitTabs } from './Header.style';
-import { Tab } from '../Tabs';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
+import { Tab } from '../Tabs/Tabs.style.js';
+import { HeaderAppBar, SplitTabs } from './Header.style.js';
 
 export const NavigationTabs = () => {
   const { t } = useTranslation();

package/components/Header/SVMDisconnectIconButton.tsx

@@ -1,4 +1,4 @@
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import { PowerSettingsNewRounded } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import { useWallet } from '@solana/wallet-adapter-react';
 
@@ -13,7 +13,7 @@ export const SVMDisconnectIconButton = () => {
         disconnect();
       }}
     >
-      <PowerSettingsNewIcon />
+      <PowerSettingsNewRounded />
     </IconButton>
   );
 };

package/components/Header/SettingsButton.style.tsx

@@ -1,8 +1,14 @@
-import { Badge as MuiBadge } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import IconButton from '@mui/material/IconButton';
-import { darken, styled } from '@mui/material/styles';
-import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
+import {
+  IconButton,
+  Badge as MuiBadge,
+  badgeClasses,
+  darken,
+  styled,
+} from '@mui/material';
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js';
 
 export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',

package/components/Header/SettingsButton.tsx

@@ -1,9 +1,13 @@
-import SettingsIcon from '@mui/icons-material/Settings';
+import { Settings } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useNavigateBack, useSettingMonitor } from '../../hooks';
-import { navigationRoutes } from '../../utils';
-import { SettingsIconBadge, SettingsIconButton } from './SettingsButton.style';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import {
+  SettingsIconBadge,
+  SettingsIconButton,
+} from './SettingsButton.style.js';
 
 export const SettingsButton = () => {
   const { t } = useTranslation();
@@ -31,10 +35,10 @@ export const SettingsButton = () => {
       >
         {variant ? (
           <SettingsIconBadge variant="dot" color={variant}>
-            <SettingsIcon />
+            <Settings />
           </SettingsIconBadge>
         ) : (
-          <SettingsIcon />
+          <Settings />
         )}
       </SettingsIconButton>
     </Tooltip>

package/components/Header/TransactionHistoryButton.tsx

@@ -1,9 +1,8 @@
-import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
-import { Tooltip } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { ReceiptLong } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useNavigateBack } from '../../hooks';
-import { navigationRoutes } from '../../utils';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const TransactionHistoryButton = () => {
   const { t } = useTranslation();
@@ -16,7 +15,7 @@ export const TransactionHistoryButton = () => {
         edge="start"
         onClick={() => navigate(navigationRoutes.transactionHistory)}
       >
-        <ReceiptLongIcon />
+        <ReceiptLong />
       </IconButton>
     </Tooltip>
   );

package/components/Header/WalletHeader.tsx

@@ -1,25 +1,26 @@
 import { getConnectorIcon } from '@lifi/wallet-management';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import WalletIcon from '@mui/icons-material/Wallet';
+import { ExpandMore, Wallet } from '@mui/icons-material';
 import { Avatar, Badge } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import type { Account } from '../../hooks';
-import { useAccount, useChain } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider';
-import { HiddenUI } from '../../types';
-import { navigationRoutes, shortenAddress } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { CloseDrawerButton } from './CloseDrawerButton';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { CloseDrawerButton } from './CloseDrawerButton.js';
 import {
   DrawerWalletContainer,
   HeaderAppBar,
   WalletButton,
-} from './Header.style';
-import { WalletMenu } from './WalletMenu';
-import { WalletMenuContainer } from './WalletMenu.style';
+} from './Header.style.js';
+import { WalletMenu } from './WalletMenu.js';
+import { WalletMenuContainer } from './WalletMenu.style.js';
 
 export const WalletHeader: React.FC = () => {
   const { subvariant, hiddenUI } = useWidgetConfig();
@@ -82,13 +83,11 @@ const ConnectButton = () => {
   return (
     <WalletButton
       endIcon={
-        variant !== 'drawer' && subvariant !== 'split' ? (
-          <WalletIcon />
-        ) : undefined
+        variant !== 'drawer' && subvariant !== 'split' ? <Wallet /> : undefined
       }
       startIcon={
         variant === 'drawer' || subvariant === 'split' ? (
-          <WalletIcon sx={{ marginLeft: -0.25 }} />
+          <Wallet sx={{ marginLeft: -0.25 }} />
         ) : undefined
       }
       onClick={
@@ -131,7 +130,7 @@ const ConnectedButton = ({ account }: { account: Account }) => {
   return (
     <>
       <WalletButton
-        endIcon={<ExpandMoreIcon />}
+        endIcon={<ExpandMore />}
         startIcon={
           chain?.logoURI ? (
             <Badge

package/components/Header/WalletMenu.style.tsx

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

package/components/Header/WalletMenu.tsx

@@ -1,8 +1,10 @@
 import { ChainType } from '@lifi/sdk';
 import { getConnectorIcon } from '@lifi/wallet-management';
-import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
-import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
+import {
+  ContentCopyRounded,
+  OpenInNewRounded,
+  PowerSettingsNewRounded,
+} from '@mui/icons-material';
 import {
   Avatar,
   Badge,
@@ -13,11 +15,13 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useAccount, useAvailableChains } from '../../hooks';
-import { navigationRoutes, shortenAddress } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { EVMDisconnectIconButton } from './EVMDisconnectIconButton';
-import { SVMDisconnectIconButton } from './SVMDisconnectIconButton';
+import { useAccount } from '../../hooks/useAccount.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { EVMDisconnectIconButton } from './EVMDisconnectIconButton.js';
+import { SVMDisconnectIconButton } from './SVMDisconnectIconButton.js';
 
 export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
@@ -74,7 +78,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
               </Box>
               <Box ml={1}>
                 <IconButton size="medium" onClick={handleCopyAddress}>
-                  <ContentCopyIcon />
+                  <ContentCopyRounded />
                 </IconButton>
                 <IconButton
                   size="medium"
@@ -83,7 +87,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                   href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
                   target="_blank"
                 >
-                  <OpenInNewIcon />
+                  <OpenInNewRounded />
                 </IconButton>
                 {account.chainType === ChainType.EVM ? (
                   <EVMDisconnectIconButton connector={account.connector} />
@@ -99,7 +103,7 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
         <Button
           onClick={connect}
           fullWidth
-          startIcon={<PowerSettingsNewIcon />}
+          startIcon={<PowerSettingsNewRounded />}
           sx={{
             marginTop: 1,
           }}

package/components/Header/index.ts

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

package/components/Initializer.tsx

@@ -1,4 +1,4 @@
-import { useInitializer } from '../hooks';
+import { useInitializer } from '../hooks/useInitializer.js';
 
 export const Initializer: React.FC = () => {
   useInitializer();

package/components/Input.tsx

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

package/components/Insurance/Insurance.tsx

@@ -1,7 +1,7 @@
-import { RouteExecutionStatus } from '../../stores';
-import { InsuranceCard } from './InsuranceCard';
-import { InsuranceCollapsed } from './InsuranceCollapsed';
-import type { InsuranceProps } from './types';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { InsuranceCard } from './InsuranceCard.js';
+import { InsuranceCollapsed } from './InsuranceCollapsed.js';
+import type { InsuranceProps } from './types.js';
 
 export const Insurance: React.FC<InsuranceProps> = ({
   status,

package/components/Insurance/InsuranceCard.tsx

@@ -1,13 +1,14 @@
-import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import { VerifiedUser } from '@mui/icons-material';
 import { Box, Collapse, Link, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { InsuraceLogo } from '../../icons';
-import { RouteExecutionStatus } from '../../stores';
-import { Card, CardLabel, CardLabelTypography } from '../Card';
-import { Switch } from '../Switch';
-import type { InsuranceCardProps } from './types';
+import { InsuraceLogo } from '../../icons/InsuraceLogo.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { Card } from '../Card/Card.js';
+import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js';
+import { Switch } from '../Switch.js';
+import type { InsuranceCardProps } from './types.js';
 
 export const InsuranceCard: React.FC<InsuranceCardProps> = ({
   status,
@@ -30,7 +31,7 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
     <Card selectionColor="secondary" indented {...props}>
       <Box display="flex" alignItems="center" justifyContent="space-between">
         <CardLabel type={'insurance'}>
-          <VerifiedUserIcon fontSize="inherit" />
+          <VerifiedUser fontSize="inherit" />
           <CardLabelTypography type="icon">
             {status === RouteExecutionStatus.Idle
               ? t('main.tags.insurance')

package/components/Insurance/InsuranceCollapsed.tsx

@@ -1,13 +1,11 @@
 import { Collapse } from '@mui/material';
-import { useRoutes } from '../../hooks';
-import {
-  RouteExecutionStatus,
-  useRouteExecutionStore,
-  useSetExecutableRoute,
-} from '../../stores';
-import { formatTokenAmount } from '../../utils';
-import { InsuranceCard } from './InsuranceCard';
-import type { InsuranceProps } from './types';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { InsuranceCard } from './InsuranceCard.js';
+import type { InsuranceProps } from './types.js';
 
 export const InsuranceCollapsed: React.FC<InsuranceProps> = ({
   status,

package/components/Insurance/index.ts

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

package/components/Insurance/types.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material';
-import type { RouteExecutionStatus } from '../../stores';
+import type { RouteExecutionStatus } from '../../stores/routes/types.js';
 
 export interface InsuredAmount {
   insuredAmount: string;

package/components/ListItem/ListItem.tsx

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

package/components/ListItem/ListItemButton.tsx

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

package/components/ListItem/index.ts

@@ -1,2 +1,2 @@
-export * from './ListItem';
-export * from './ListItemButton';
+export * from './ListItem.js';
+export * from './ListItemButton.js';

package/components/ListItemButton.tsx

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

package/components/ListItemText.tsx

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

package/components/Menu.tsx

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

package/components/NFT/NFT.style.ts

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

package/components/NFT/NFT.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import { NFTBase } from './NFTBase';
-import type { NFTProps } from './types';
-import { useFieldActions } from '../../stores';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { NFTBase } from './NFTBase.js';
+import type { NFTProps } from './types.js';
 
 export const NFT: React.FC<NFTProps> = ({
   imageUrl,

package/components/NFT/NFTBase.tsx

@@ -1,8 +1,8 @@
 import { Box, Link, Skeleton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Token } from '../Token';
-import { PreviewAvatar } from './NFT.style';
-import type { NFTProps } from './types';
+import { Token } from '../Token/Token.js';
+import { PreviewAvatar } from './NFT.style.js';
+import type { NFTProps } from './types.js';
 
 export const NFTBase: React.FC<NFTProps> = ({
   imageUrl,

package/components/NFT/index.ts

@@ -1,3 +1,3 @@
-export * from './NFT';
-export * from './NFTBase';
-export * from './types';
+export * from './NFT.js';
+export * from './NFTBase.js';
+export * from './types.js';

package/components/NFT/types.ts

@@ -1,5 +1,5 @@
 import type { TokenAmount } from '@lifi/sdk';
-import type { WidgetContract } from '../../types';
+import type { WidgetContract } from '../../types/widget.js';
 
 export interface NFTBaseProps {
   imageUrl?: string;

package/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import BlockIcon from '@mui/icons-material/Block';
+import { Block } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +16,7 @@ export const NotFound: React.FC = () => {
       }}
     >
       <Typography fontSize={48}>
-        <BlockIcon fontSize="inherit" />
+        <Block fontSize="inherit" />
       </Typography>
       <Typography fontSize={18} fontWeight={700}>
         {t('tooltip.notFound.title')}

package/components/PageContainer.ts

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

package/components/PoweredBy/PoweredBy.style.ts

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

package/components/PoweredBy/PoweredBy.tsx

@@ -1,10 +1,10 @@
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useLocation } from 'react-router-dom';
-import { version } from '../../config/version';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
-import { navigationRoutes } from '../../utils';
-import { Link } from './PoweredBy.style';
+import { version } from '../../config/version.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { Link } from './PoweredBy.style.js';
 
 export const PoweredBy: React.FC = () => {
   const { hiddenUI } = useWidgetConfig();

package/components/PoweredBy/index.ts

@@ -1 +1 @@
-export { PoweredBy } from './PoweredBy';
+export { PoweredBy } from './PoweredBy.js';

package/components/ProgressToNextUpdate/index.ts

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