Feature/use second level mui imports (#743)

* Require "Theme" to be passed to "SxProps"

Decreases typescript performance otherwise

* Disallow "top" and "third-level" MUI imports

* Exclude "node_modules" in tsconfig

src/components/atoms/CheckboxInput.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Checkbox, CheckboxProps, FormControlLabel } from '@mui/material';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 
 interface IProps extends CheckboxProps {

src/components/atoms/CustomIconButton.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, ButtonProps, Stack, TypographyProps } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { TypographyProps } from '@mui/material/Typography';
 
 export const CustomIconButton = <C extends React.ElementType>({
     children,

src/components/atoms/PasswordTextField.tsx

@@ -6,11 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { InputAdornment, TextFieldProps } from '@mui/material';
-import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useTranslation } from 'react-i18next';
 
 export const PasswordTextField = (props: TextFieldProps) => {

src/components/atoms/RadioInput.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { FormControlLabel, Radio, RadioProps } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio, { RadioProps } from '@mui/material/Radio';
 import React from 'react';
 
 export interface RadioInputProps extends RadioProps {

src/components/atoms/SearchTextField.tsx

@@ -6,8 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import TextField from '@mui/material/TextField';
-import { IconButton, InputAdornment, TextFieldProps } from '@mui/material';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
 import CancelIcon from '@mui/icons-material/Cancel';
 
 export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (

src/components/atoms/Select.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Select as MuiSelect } from '@mui/material';
+import MuiSelect from '@mui/material/Select';
 
 export const Select = <Value,>({
     children,

src/components/atoms/ThreeStateCheckbox.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { DisabledByDefaultRounded } from '@mui/icons-material';
-import { Checkbox, CheckboxProps } from '@mui/material';
+import DisabledByDefaultRounded from '@mui/icons-material/DisabledByDefaultRounded';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 import React, { useCallback } from 'react';
 
 type CheckState = boolean | undefined | null;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { FormControlLabel } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 import { ThreeStateCheckbox, ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
 

src/components/atoms/TypographyMaxLines.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { Typography, TypographyProps } from '@mui/material';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 
 export const TypographyMaxLines = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'lines',