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

package.json

@@ -61,6 +61,7 @@
     "@tanstack/react-query": "^5.17.0",
     "aos": "^2.3.4",
     "browser-image-compression": "^2.0.2",
+    "caniuse-lite": "^1.0.30001769",
     "capacitor-plugin-safe-area": "^4.0.0",
     "chrono-node": "^2.7.7",
     "dotenv": "^16.4.5",
@@ -95,7 +96,7 @@
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
-    "baseline-browser-mapping": "^2.9.16",
+    "baseline-browser-mapping": "^2.9.19",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",

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/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'