chore: update dependencies in package.json and refactor import statements in modal components

src/views/Authorization/MFAVerificationModal.jsx

@@ -70,14 +70,17 @@ const MFAVerificationModal = ({
   }
 
   return (
-    <ResponsiveModal open={open} onClose={handleClose} size='sm'>
+    <ResponsiveModal
+      open={open}
+      onClose={handleClose}
+      size='lg'
+      fullWidth={true}
+      title='Two-Factor Authentication'
+    >
       <ModalClose />
 
       <Box className='mb-4 text-center'>
         <Security sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
-        <Typography level='h4' sx={{ mb: 1 }}>
-          Two-Factor Authentication
-        </Typography>
         <Typography level='body-md' sx={{ color: 'text.secondary' }}>
           Enter the verification code from your authenticator app
         </Typography>

src/views/Modals/Inputs/CreateThingModal.jsx

@@ -1,13 +1,13 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Option,
-  Select,
-  Textarea,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Option,
+    Select,
+    Textarea,
+    Typography,
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'

src/views/Modals/Inputs/EditThingState.jsx

@@ -1,10 +1,10 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Typography,
 } from '@mui/joy'
 import { useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'

src/views/Modals/Inputs/IconPickerModal.jsx

@@ -1,11 +1,11 @@
 import {
-  Avatar,
-  Box,
-  Button,
-  FormControl,
-  FormLabel,
-  Grid,
-  Typography,
+    Avatar,
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Grid,
+    Typography,
 } from '@mui/joy'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 import { getTextColorFromBackgroundColor } from '../../../utils/Colors'

src/views/Modals/Inputs/NudgeModal.jsx

@@ -1,12 +1,12 @@
 import {
-  Alert,
-  Box,
-  Button,
-  FormControl,
-  FormLabel,
-  Switch,
-  Textarea,
-  Typography,
+    Alert,
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Switch,
+    Textarea,
+    Typography,
 } from '@mui/joy'
 import { useCallback, useEffect, useState } from 'react'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'

src/views/Modals/Inputs/PasswordChangeModal.jsx

@@ -1,10 +1,10 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Typography,
 } from '@mui/joy'
 import React, { useEffect } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'

src/views/Modals/Inputs/SelectModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, Option, Select, Typography } from '@mui/joy'
+import { Box, Button, Option, Select } from '@mui/joy'
 import React from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 

src/views/Modals/Inputs/TextModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, Textarea, Typography } from '@mui/joy'
+import { Box, Button, Textarea } from '@mui/joy'
 import { useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'