Webatrice: update deps (#4700)

* save work

* fix reset styling

* fix toast reducer

* update non-react deps

* update react libraries

* remove jquery, use sanitize-html instead

* add missing change

* fix deps and dev deps

* update workflow to target Node 16

* run @mui/codemod to remove @mui/styles

* add default body font size

* update react 17 to 18

* declare enum before use

* add rel attr to links

* fix font sizing issue

* trailing commas

* refactor deep destructuring

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/InputField/InputField.tsx

@@ -1,27 +1,33 @@
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
 import './InputField.css';
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'InputField';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const Root = styled('div')(({ theme }) => ({
+  [`&.${classes.root}`]: {
     '& .InputField-error': {
       color: theme.palette.error.main
     },
 
     '& .InputField-warning': {
       color: theme.palette.warning.main
-    }
+    },
   },
 }));
 
-const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
-  const classes = useStyles();
+const InputField = ({ input, meta, ...args }) => {
+  const { touched, error, warning } = meta;
 
   return (
-    <div className={'InputField ' + classes.root}>
+    <Root className={'InputField ' + classes.root}>
       { touched && (
         <div className="InputField-validation">
           {
@@ -47,7 +53,7 @@ const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
         size="small"
         fullWidth={true}
       />
-    </div>
+    </Root>
   );
 };