Performance improvements for Intellisense

components/[pageId]/DocumentPage/components/PageBanner.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ListItem, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { ListItem, Typography, Box } from '@mui/material';
 import { memo } from 'react';
 
 import ImageSelector from 'components/common/ImageSelector/ImageSelector';

components/[pageId]/DocumentPage/components/ProposalProperties/ProposalProperties.tsx

@@ -1,5 +1,4 @@
-import { Divider, Grid, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Divider, Grid, Typography, Box } from '@mui/material';
 import { usePopupState } from 'material-ui-popup-state/hooks';
 import useSWR from 'swr';
 

components/common/Avatar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import type { SxProps, Theme } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
-import type { SxProps } from '@mui/system';
 import React from 'react';
 
 import { stringToColor } from 'lib/utilities/strings';
@@ -78,7 +78,7 @@ export type InitialAvatarProps = {
   variant?: AvatarVariant;
   size?: AvatarSize;
   isNft?: boolean;
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
   onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 

components/common/BoardEditor/focalboard/src/components/addViewMenu.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable no-unused-expressions */
 
 import { Add } from '@mui/icons-material';
+import type { SxProps, Theme } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import type { SxProps } from '@mui/system';
 import { usePopupState, bindMenu } from 'material-ui-popup-state/hooks';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
@@ -35,7 +35,7 @@ type AddViewProps = {
   intl: IntlShape;
   showLabel?: boolean;
   showView: (viewId: string) => void;
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
   onClickIcon?: () => void; // override the icon click
   onClose?: () => void;
 };

components/common/BoardEditor/focalboard/src/components/kanban/kanban.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */
 // import Button from '../../widgets/buttons/button'
-import { Menu, TextField } from '@mui/material';
+import { Box, Menu, TextField } from '@mui/material';
 import Button from '@mui/material/Button';
-import { Box } from '@mui/system';
 import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import React, { useCallback, useState } from 'react';
 import type { IntlShape } from 'react-intl';

components/common/BoardEditor/focalboard/src/components/table/tableRow.tsx

@@ -1,6 +1,5 @@
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { IconButton } from '@mui/material';
-import { Box } from '@mui/system';
+import { IconButton, Box } from '@mui/material';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import type { MouseEvent } from 'react';
 import { FormattedMessage } from 'react-intl';

components/common/CharmEditor/components/PageThread.tsx

@@ -19,8 +19,7 @@ import {
   Tooltip,
   useMediaQuery
 } from '@mui/material';
-import type { ButtonProps, SxProps } from '@mui/material';
-import type { BoxProps, Theme } from '@mui/system';
+import type { ButtonProps, SxProps, Theme, BoxProps } from '@mui/material';
 import { DateTime } from 'luxon';
 import { usePopupState, bindMenu } from 'material-ui-popup-state/hooks';
 import type { MouseEvent } from 'react';
@@ -117,7 +116,7 @@ function AddCommentCharmEditor({
   readOnly: boolean;
   disabled: boolean;
   threadId: string;
-  sx: SxProps;
+  sx: SxProps<Theme>;
 }) {
   const [commentContent, setCommentContent] = useState<PageContent | null>(null);
   const isEmpty = checkIsContentEmpty(commentContent);

components/common/CharmEditor/components/mention/components/MentionSuggest.tsx

@@ -1,6 +1,5 @@
 import { useEditorViewContext, usePluginState } from '@bangle.dev/react';
-import { Divider, MenuItem, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Divider, MenuItem, Typography, Box } from '@mui/material';
 import type { PluginKey } from 'prosemirror-state';
 import { memo, useCallback, useEffect } from 'react';
 

components/common/PageLayout/components/Account/Account.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import ButtonGroup from '@mui/material/ButtonGroup';
+import { alpha } from '@mui/material/styles';
 import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
-import { alpha } from '@mui/system';
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core';
 import { getChainById } from 'connectors';
 import { usePopupState } from 'material-ui-popup-state/hooks';

components/common/PageLayout/components/Header/components/DatabasePageOptions.tsx

@@ -5,11 +5,10 @@ import FavoritedIcon from '@mui/icons-material/Star';
 import NotFavoritedIcon from '@mui/icons-material/StarBorder';
 import UndoIcon from '@mui/icons-material/Undo';
 import VerticalAlignBottomOutlinedIcon from '@mui/icons-material/VerticalAlignBottomOutlined';
-import { Divider, Tooltip, Typography } from '@mui/material';
+import { Divider, Tooltip, Typography, Box, Stack } from '@mui/material';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
-import { Box, Stack } from '@mui/system';
 import { useRouter } from 'next/router';
 import Papa from 'papaparse';
 import type { ChangeEventHandler } from 'react';

components/common/PageLayout/components/PageContent.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { SxProps } from '@mui/system';
 import type { CSSProperties, ReactNode } from 'react';
 
 import ScrollableWindow from './ScrollableWindow';

components/common/PageLayout/components/PageNavigation/components/NavIconHover.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 
 export const NavIconHover = styled(Box)`
   border-radius: 4px;

components/common/PageLayout/components/Sidebar/Sidebar.tsx

@@ -8,11 +8,11 @@ import BountyIcon from '@mui/icons-material/RequestPageOutlined';
 import SearchIcon from '@mui/icons-material/Search';
 import SettingsIcon from '@mui/icons-material/Settings';
 import TaskOutlinedIcon from '@mui/icons-material/TaskOutlined';
+import type { BoxProps } from '@mui/material';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import type { BoxProps } from '@mui/system';
 import type { Page } from '@prisma/client';
 import { usePopupState } from 'material-ui-popup-state/hooks';
 import { useRouter } from 'next/router';

components/common/PdfSelector/PdfSelector.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@mui/material';
-import { Box } from '@mui/system';
+import { Button, Box } from '@mui/material';
 import type { ReactNode } from 'react';
 
 import MultiTabs from 'components/common/MultiTabs';

components/common/PrimaryButton.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { darken } from '@mui/system';
+import { darken } from '@mui/material/styles';
 import type { ElementType } from 'react';
 
 import { blueColor } from 'theme/colors';

components/common/TokenGateForm/JoinDynamicSpaceForm.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import { Autocomplete, IconButton, Popper, Stack, TextField, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Autocomplete, IconButton, Popper, Stack, TextField, Typography, Box } from '@mui/material';
 import type { Space } from '@prisma/client';
 import { debounce } from 'lodash';
 import { useRouter } from 'next/router';

components/common/TokenGateForm/JoinPredefinedSpaceDomain.tsx

@@ -1,5 +1,4 @@
-import { Alert, Card, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Alert, Card, Typography, Box } from '@mui/material';
 import type { Space } from '@prisma/client';
 import { useRouter } from 'next/router';
 import useSWR from 'swr';

components/common/TokenGateForm/TokenGateOption.tsx

@@ -1,9 +1,9 @@
+import type { SxProps, Theme } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Chip from '@mui/material/Chip';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import type { SxProps, Theme } from '@mui/system';
 import { humanizeAccessControlConditions } from 'lit-js-sdk';
 import { useEffect, useState } from 'react';
 

components/common/TokenLogo.tsx

@@ -1,7 +1,15 @@
-import type { SxProps } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
 import { Box } from '@mui/material';
 
-export default function TokenLogo({ src, height = 25, sx }: { src: string; height?: number | string; sx?: SxProps }) {
+export default function TokenLogo({
+  src,
+  height = 25,
+  sx
+}: {
+  src: string;
+  height?: number | string;
+  sx?: SxProps<Theme>;
+}) {
   return (
     <Box display='flex' justifyContent='center' sx={sx}>
       <img style={{ height, width: 'auto' }} src={src} />

components/common/ViewOptions.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import type { SxProps } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
 import { InputLabel, Stack } from '@mui/material';
 import type { ReactNode } from 'react';
 
@@ -19,7 +19,7 @@ export const StyledViewOptions = styled(Stack)`
   }
 `;
 
-export function ViewOptions({ children, label, sx = {} }: { children: ReactNode; label: string; sx?: SxProps }) {
+export function ViewOptions({ children, label, sx = {} }: { children: ReactNode; label: string; sx?: SxProps<Theme> }) {
   return (
     <StyledViewOptions sx={sx}>
       <InputLabel>{label}</InputLabel>

components/common/form/InputSearchBlockchain.tsx

@@ -1,8 +1,8 @@
+import type { SxProps, Theme } from '@mui/material';
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
-import type { SxProps } from '@mui/system';
 import type { IChainDetails } from 'connectors';
 import { RPCList } from 'connectors';
 import { useEffect, useState } from 'react';
@@ -11,7 +11,7 @@ interface Props extends Omit<Partial<AutocompleteProps<IChainDetails, false, tru
   onChange?: (chainId: number) => void;
   defaultChainId?: number; // allow setting a default
   chainId?: number; // allow overriding from the parent
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
 }
 
 export default function InputSearchBlockchain({

components/common/form/InputSearchCrypto.tsx

@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add';
-import type { AutocompleteProps, SxProps } from '@mui/material';
+import type { AutocompleteProps, SxProps, Theme } from '@mui/material';
 import { Autocomplete, Box, TextField, Typography } from '@mui/material';
 import type { PaymentMethod } from '@prisma/client';
 import type { CryptoCurrency } from 'connectors';
@@ -23,7 +23,7 @@ export interface IInputSearchCryptoProps
   hideBackdrop?: boolean; // hide backdrop when modal is open
   cryptoList?: (string | CryptoCurrency)[];
   chainId?: number; // allow passing this down to the 'new custom token' form
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
 }
 
 const ADD_NEW_CUSTOM = 'ADD_NEW_CUSTOM';

components/common/form/fields/FieldWrapper.tsx

@@ -1,5 +1,4 @@
-import { Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Typography, Box } from '@mui/material';
 import type { ReactNode } from 'react';
 
 type Props = {

components/forum/components/ForumVote.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { IconButton, Tooltip, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { IconButton, Tooltip, Typography, Box } from '@mui/material';
 import type { MouseEvent } from 'react';
 import { ImArrowDown, ImArrowUp } from 'react-icons/im';
 

components/forum/components/PostPage/components/CommentReplyForm.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Stack, Box } from '@mui/material';
 import { useState } from 'react';
 
 import charmClient from 'charmClient';

components/forum/components/PostPage/components/PostCommentForm.tsx

@@ -1,5 +1,4 @@
-import { Stack } from '@mui/material';
-import { Box } from '@mui/system';
+import { Stack, Box } from '@mui/material';
 import { useState } from 'react';
 import type { KeyedMutator } from 'swr';
 

components/login/WalletSign.tsx

@@ -1,4 +1,4 @@
-import type { SxProps, Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/material';
 import { useEffect } from 'react';
 
 import PrimaryButton from 'components/common/PrimaryButton';

components/nexus/ProposalTasksList.tsx

@@ -1,11 +1,11 @@
 import TaskOutlinedIcon from '@mui/icons-material/TaskOutlined';
+import { Box } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
 import { useEffect } from 'react';
 import type { KeyedMutator } from 'swr';
 

components/profile/components/CollectibleRow.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { IconButton, Link, Stack, Tooltip, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { IconButton, Link, Stack, Tooltip, Typography, Box } from '@mui/material';
 
 import Avatar from 'components/common/Avatar';
 import type { Collectable } from 'lib/blockchain/interfaces';

components/profile/components/CommunityRow.tsx

@@ -9,8 +9,7 @@ import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import CheckIcon from '@mui/icons-material/VerifiedUser';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { Collapse, IconButton, Stack, Tab, Tabs, Tooltip, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Collapse, IconButton, Stack, Tab, Tabs, Tooltip, Typography, Box } from '@mui/material';
 import type { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 

components/profile/components/MemberMiniProfile/BlockchainData/NftsList.tsx

@@ -1,6 +1,5 @@
 import CancelIcon from '@mui/icons-material/Cancel';
-import { Alert, Grid, Link, Tooltip, Typography } from '@mui/material';
-import { Stack } from '@mui/system';
+import { Alert, Grid, Link, Tooltip, Typography, Stack } from '@mui/material';
 import { useState } from 'react';
 import useSWRImmutable from 'swr/immutable';
 

components/profile/components/MemberMiniProfile/BlockchainData/OrgsList.tsx

@@ -1,7 +1,6 @@
 import CancelIcon from '@mui/icons-material/Cancel';
-import { Grid, Tooltip, Typography } from '@mui/material';
+import { Grid, Tooltip, Typography, Stack } from '@mui/material';
 import Alert from '@mui/material/Alert';
-import { Stack } from '@mui/system';
 import { useState } from 'react';
 import useSWRImmutable from 'swr/immutable';
 

components/profile/components/MemberMiniProfile/BlockchainData/PoapsList.tsx

@@ -1,5 +1,4 @@
-import { Alert, Grid, Link, Tooltip, Typography } from '@mui/material';
-import { Stack } from '@mui/system';
+import { Alert, Grid, Link, Tooltip, Typography, Stack } from '@mui/material';
 import useSWRImmutable from 'swr/immutable';
 
 import charmClient from 'charmClient';

components/profile/components/MemberMiniProfile/BlockchainData/ProfileItemContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import AddIcon from '@mui/icons-material/Add';
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 
 export const ProfileItemContainer = styled(Box)`
   position: relative;

components/profile/components/MemberMiniProfile/MemberMiniProfile.tsx

@@ -1,5 +1,5 @@
-import { Dialog, DialogContent, Divider, Typography, useMediaQuery } from '@mui/material';
-import { Box, Stack, useTheme } from '@mui/system';
+import { Dialog, DialogContent, Divider, Typography, useMediaQuery, Box, Stack } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import type { MemberProperty, MemberPropertyType } from '@prisma/client';
 import useSWR from 'swr';
 

components/profile/components/SpacesMemberDetails/SpacesMemberDetails.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 

components/profile/components/SpacesMemberDetails/components/MemberPropertiesRenderer.tsx

@@ -1,5 +1,4 @@
-import { Chip, Typography } from '@mui/material';
-import { Stack } from '@mui/system';
+import { Chip, Typography, Stack } from '@mui/material';
 
 import { SelectPreview } from 'components/common/form/fields/Select/SelectPreview';
 import type { PropertyValueWithDetails } from 'lib/members/interfaces';

components/profile/components/UserDetails/UserDetails.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import EditIcon from '@mui/icons-material/Edit';
-import type { SxProps } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
 import { Box, Divider, Grid, Stack, Tooltip, Typography } from '@mui/material';
 import type { IconButtonProps } from '@mui/material/IconButton';
 import IconButton from '@mui/material/IconButton';
@@ -47,7 +47,7 @@ export interface UserDetailsProps {
   readOnly?: boolean;
   user: PublicUser | LoggedInUser;
   updateUser?: Dispatch<SetStateAction<LoggedInUser | null>>;
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
 }
 
 const StyledStack = styled(Stack)`