Adiciona alterações de migração.

cli/web/cliente/.yarnrc

---registry "https://nexus.dev.evologica.com.br/repository/npm/"
+--registry "https://nexus.dev.evologica.com.br/repository/npm"
 "@curio:registry" "https://nexus.dev.evologica.com.br/repository/npm"
 "@dynamo:registry" "https://nexus.dev.evologica.com.br/repository/npm"
\ No newline at end of file

cli/web/cliente/babel.config.json

@@ -21,8 +21,8 @@
     [
       "babel-plugin-import",
       {
-        "libraryName": "@material-ui/core",
-        "libraryDirectory": "esm",
+        "libraryName": "@mui/material",
+        "libraryDirectory": "",
         "camel2DashComponentName": false
       },
       "core"
@@ -30,20 +30,20 @@
     [
       "babel-plugin-import",
       {
-        "libraryName": "@material-ui/lab",
-        "libraryDirectory": "esm",
+        "libraryName": "@mui/icons-material",
+        "libraryDirectory": "",
         "camel2DashComponentName": false
       },
-      "lab"
+      "icons"
     ],
     [
       "babel-plugin-import",
       {
-        "libraryName": "@material-ui/icons",
-        "libraryDirectory": "esm",
+        "libraryName": "@mui/lab",
+        "libraryDirectory": "",
         "camel2DashComponentName": false
       },
-      "icons"
+      "lab"
     ],
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",

cli/web/cliente/package.json

@@ -80,17 +80,19 @@
   },
   "dependencies": {
     "@curio/client": "1.3.3",
-    "@curio/components": "^0.1.6",
+    "@curio/components": "^1.0.3",
     "@curio/ui": "^0.1.0",
     "@date-io/date-fns": "^1.0.0",
     "@dynamo/components": "0.70.1",
     "@dynamo/curio": "0.70.1",
     "@dynamo/material-ui": "0.70.1",
-    "@material-ui/core": "4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.58",
-    "@material-ui/pickers": "^3.3.10",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@microcredito/client": "^0.7.26",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^5.0.0-alpha.46",
+    "@mui/material": "^5.0.0",
+    "@mui/system": "^5.0.0",
     "@reduxjs/toolkit": "^1.2.5",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-swipeable-views-utils": "^0.13.3",
@@ -103,8 +105,8 @@
     "deepmerge": "^4.2.2",
     "normalizr": "^3.6.1",
     "p-min-delay": "^4.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-loading-skeleton": "^2.0.1",
     "react-redux": "^7.2.0",
     "react-router": "5.2.0",

cli/web/cliente/src/api/domain/simulation/context.d.ts

@@ -21,3 +21,12 @@ export interface CreditInstallment extends Entity {
 export interface CreditGracePeriod extends Entity {
   description: string
 }
+
+interface OutputGetVisitContext {
+  gracePeriods: CreditGracePeriod
+}
+
+export interface GetVisitContext {
+  Input: void
+  Output: OutputGetVisitContext
+}

cli/web/cliente/src/components/atoms/ButtonWithProgress/ButtonWithProgress.tsx

 import React from 'react'
 
-import { Button, LinearProgress } from '@material-ui/core'
-import { ButtonProps } from '@material-ui/core/Button'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Button, LinearProgress } from '@mui/material'
+import { ButtonProps } from '@mui/material/Button'
 
 import { styles } from './styles'
 
-type ExtendedTypes = WithStyles<typeof styles> &
-  Pick<ButtonProps, 'disabled' | 'onClick' | 'type' | 'children' | 'className' | 'color' | 'size' | 'variant'>
+type ExtendedTypes = Pick<ButtonProps, 'disabled' | 'onClick' | 'type' | 'children' | 'sx' | 'color' | 'size' | 'variant'>
 
 interface Props extends ExtendedTypes {
   fetching?: boolean
 }
 
 const ButtonWithProgress = (props: Props) => {
-  const { className, classes, fetching, disabled, onClick, type, children, color = 'primary', size, variant = 'contained' } = props
+  const { sx, fetching, disabled, onClick, type, children, color = 'primary', size, variant = 'contained' } = props
   return (
-    <Button className={className} disabled={disabled || fetching} onClick={onClick} variant={variant} color={color} type={type} size={size}>
-      {fetching && <LinearProgress className={classes.progress} />}
+    <Button sx={sx} disabled={disabled || fetching} onClick={onClick} variant={variant} color={color} type={type} size={size}>
+      {fetching && <LinearProgress sx={styles.progress} />}
       {children}
     </Button>
   )
 }
 
-export default withStyles(styles)(ButtonWithProgress)
+export default ButtonWithProgress

cli/web/cliente/src/components/atoms/ButtonWithProgress/styles.ts

-import { Theme, createStyles } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
 
-export const styles = (theme: Theme) => {
-  return createStyles({
-    progress: {
-      bottom: 0,
-      margin: 0,
-      width: '100%',
-      position: 'absolute'
-    }
-  })
-}
+export const styles = createSxStyles({
+  progress: {
+    bottom: 0,
+    margin: 0,
+    width: '100%',
+    position: 'absolute',
+  },
+})

cli/web/cliente/src/components/atoms/ItemWithIcon/ItemWithIcon.tsx

 import React from 'react'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
+
+import ListItem, { ListItemProps } from '@mui/material/ListItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
 
 interface Props {
   label: string
-  className?: string
+  sx?: ListItemProps['sx']
   children: React.ReactElement
   onClick?: () => void
 }
 
 const ItemWithIcon = (props: Props) => {
-  const { className, label, children, onClick } = props
+  const { sx, label, children, onClick } = props
   return (
-    <ListItem button className={className} onClick={onClick}>
+    <ListItem button sx={sx} onClick={onClick}>
       <ListItemIcon>{children}</ListItemIcon>
       <ListItemText primary={label} />
     </ListItem>

cli/web/cliente/src/components/atoms/TextFieldWithIcon/TextFieldWithIcon.tsx

 import React, { useState } from 'react'
 
-import InputAdornment from '@material-ui/core/InputAdornment'
-import TextField, { TextFieldProps } from '@material-ui/core/TextField'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
-import withStyles, { WithStyles } from '@material-ui/styles/withStyles'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
+import InputAdornment from '@mui/material/InputAdornment'
+import TextField, { TextFieldProps } from '@mui/material/TextField'
 
 import styles from './styles'
 
-type BaseProps = WithStyles<typeof styles> &
-  Pick<TextFieldProps, 'value' | 'onChange' | 'required' | 'label' | 'type' | 'className' | 'InputProps' | 'autoFocus' | 'inputProps'>
+type BaseProps = Pick<TextFieldProps, 'value' | 'onChange' | 'required' | 'label' | 'type' | 'sx' | 'InputProps' | 'autoFocus' | 'inputProps'>
 
 interface Props extends BaseProps {}
 
 const TextFieldWithIcon = (props: Props) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
-  const { onChange, required, value, label, type, className, InputProps, classes, autoFocus } = props
+  const { onChange, required, value, label, type, sx, InputProps, autoFocus } = props
   return (
     <TextField
       autoFocus={autoFocus}
@@ -23,14 +21,14 @@ const TextFieldWithIcon = (props: Props) => {
       value={value}
       onChange={onChange}
       label={label}
-      className={className}
+      sx={sx}
       variant="outlined"
       type={type === 'password' ? (isPasswordVisible ? undefined : type) : type}
       InputProps={
         InputProps || {
           startAdornment:
             type === 'password' ? (
-              <InputAdornment position="start" onClick={() => setIsPasswordVisible(!isPasswordVisible)} className={classes.inputAdorment}>
+              <InputAdornment position="start" onClick={() => setIsPasswordVisible(!isPasswordVisible)} sx={styles.inputAdorment}>
                 {isPasswordVisible ? <Visibility /> : <VisibilityOff />}
               </InputAdornment>
             ) : null,
@@ -40,4 +38,4 @@ const TextFieldWithIcon = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(TextFieldWithIcon)
+export default TextFieldWithIcon

cli/web/cliente/src/components/atoms/TextFieldWithIcon/styles.ts

-import { createStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
 
-export default (theme: Theme) =>
-  createStyles({
-    inputAdorment: {
-      cursor: 'pointer'
-    }
-  })
+export default createSxStyles({
+  inputAdorment: {
+    cursor: 'pointer',
+  },
+})

cli/web/cliente/src/components/molecules/AppBar/Toolbar.tsx

 import React from 'react'
 
-import MuiToolbar from '@material-ui/core/Toolbar'
+import { Box } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import MuiToolbar, { ToolbarProps as MuiToolbarProps } from '@mui/material/Toolbar'
 
 import { useStyles } from './styles'
 
@@ -8,14 +10,15 @@ export interface ToolbarProps {
   title?: React.ReactNode
   actions?: React.ReactNode
   nav?: React.ReactNode
+  sx?: MuiToolbarProps['sx']
 }
 
-export function Toolbar({ nav, title, actions }: ToolbarProps) {
-  const classes = useStyles()
+export function Toolbar({ nav, title, actions, sx }: ToolbarProps) {
+  const styles = useStyles(useTheme())
   return (
     <MuiToolbar>
-      <div className={classes.nav}>{nav}</div>
-      {title ? <div className={classes.grow}>{title}</div> : <div className={classes.grow} />}
+      <Box sx={styles.nav}>{nav}</Box>
+      {title ? <Box sx={styles.grow}>{title}</Box> : <Box sx={styles.grow} />}
       {actions}
     </MuiToolbar>
   )

cli/web/cliente/src/components/molecules/AppBar/index.tsx

-import cn from 'classnames'
+import deepmerge from 'deepmerge'
 import React, { useState } from 'react'
 
-import { Collapse, CollapseProps, Fade } from '@material-ui/core'
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@material-ui/core/AppBar'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Box, Collapse, CollapseProps, Fade } from '@mui/material'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import { Theme, useTheme } from '@mui/material/styles'
 
 import { Toolbar, ToolbarProps } from './Toolbar'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = (theme: Theme) =>
+  createSxStyles({
     appBar: {
       // position: 'fixed',
       ...theme.mixins.toolbar,
@@ -21,21 +22,19 @@ const useStyles = makeStyles((theme: Theme) =>
       width: '100%',
     },
   })
-)
 
 type BaseType = Omit<ToolbarProps, 'classes' | 'nav'>
 
 export interface AppBarProps extends BaseType {
-  className?: string
   position?: MuiAppBarProps['position']
   children?: React.ReactNode
   onNavClick?(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void
   style?: MuiAppBarProps['style']
 }
 
-const AppBar = ({ className, position = 'static', actions, title, children, onNavClick, style }: AppBarProps) => {
-  const classes = useStyles()
+const AppBar = ({ sx, position = 'static', actions, title, children, onNavClick, style }: AppBarProps) => {
   const [fadeIn, setFadeIn] = useState(false)
+  const styles = useStyles(useTheme())
 
   const onCollapse: CollapseProps['onEntered'] = (el, isAppearing) => {
     setFadeIn(isAppearing)
@@ -48,13 +47,13 @@ const AppBar = ({ className, position = 'static', actions, title, children, onNa
   // ) : null
   return (
     <>
-      <MuiAppBar className={cn(classes.appBar, className)} position={position} style={style}>
+      <MuiAppBar sx={deepmerge(styles.appBar, sx || {})} position={position} style={style}>
         <Toolbar title={title} actions={actions} /*nav={nav}*/ />
         {children && (
           <Collapse appear enter in onEntered={onCollapse} timeout={400}>
             <div>
               <Fade in={fadeIn} enter timeout={600}>
-                <div className={classes.content}>{children}</div>
+                <Box sx={styles.content}>{children}</Box>
               </Fade>
             </div>
           </Collapse>

cli/web/cliente/src/components/molecules/AppBar/styles.ts

-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
-export const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+export const useStyles = (theme: Theme) =>
+  createSxStyles({
     grow: {
       flexGrow: 1,
     },
@@ -9,4 +10,3 @@ export const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(2),
     },
   })
-)

cli/web/cliente/src/components/molecules/CircularProgress/CircularProgress.tsx

-import cn from 'classnames'
+import deepmerge from 'deepmerge'
 import React from 'react'
 
-import CircularProgressMUI from '@material-ui/core/CircularProgress'
-import Container from '@material-ui/core/Container'
+import Box from '@mui/material/Box'
+import CircularProgressMUI from '@mui/material/CircularProgress'
 
-import { useStyles } from './styles'
+import { styles } from './styles'
 
 interface Props {
   className?: string
@@ -12,13 +12,10 @@ interface Props {
 }
 
 const CircularProgress = (props: Props) => {
-  const classes = useStyles()
   return (
-    <Container
-      className={cn(classes.container, { [classes.allContainer]: props.root })}
-    >
+    <Box sx={deepmerge(styles.container, props.root ? styles.allContainer : {})}>
       <CircularProgressMUI className={props.className} color="secondary" />
-    </Container>
+    </Box>
   )
 }
 

cli/web/cliente/src/components/molecules/CircularProgress/styles.ts

-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
 
-export const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    container: {
-      display: 'flex',
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    allContainer: {
-      height: '100vh'
-    }
-  })
-)
+export const styles = createSxStyles({
+  container: {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  allContainer: {
+    height: '100vh',
+  },
+})

cli/web/cliente/src/components/molecules/ContextButton/ContextButton.tsx

 import React from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import ListItemText from '@material-ui/core/ListItemText'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import { MoreVert as ContextIconVertical } from '@material-ui/icons'
+
+import { MoreVert as ContextIconVertical } from '@mui/icons-material'
+import IconButton from '@mui/material/IconButton'
+import ListItemText from '@mui/material/ListItemText'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 
 export interface ContextItem {
   icon?: React.ReactElement
@@ -38,23 +39,10 @@ export default function ContextButton({ menuId, disabled, menuItems, className,
 
   return (
     <>
-      <IconButton
-        disabled={disabled}
-        className={className}
-        aria-controls={menuId}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
+      <IconButton disabled={disabled} className={className} aria-controls={menuId} aria-haspopup="true" onClick={handleClick}>
         <ContextIconVertical />
       </IconButton>
-      <Menu
-        id={menuId}
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        className={menuClassName}
-      >
+      <Menu id={menuId} anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose} className={menuClassName}>
         {menuItems.map((item, index) => (
           <MenuItem key={index} onClick={(e) => handleItemClick(e, item)}>
             {/* <ListItemIcon>{item.icon}</ListItemIcon> */}

cli/web/cliente/src/components/molecules/DialogLayout/DialogLayout.tsx

 import React from 'react'
 
-// import AppBar from '@material-ui/core/AppBar'
+// import AppBar from '@mui/material/AppBar'
 import AppBar from '@agiliza/components/molecules/AppBar'
-import { IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-// import Toolbar from '@material-ui/core/Toolbar'
-// import IconButton from '@material-ui/core/IconButton'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import Slide from '@material-ui/core/Slide'
-import { TransitionProps } from '@material-ui/core/transitions/transition'
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
+import { IconButton } from '@mui/material'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+// import Toolbar from '@mui/material/Toolbar'
+// import IconButton from '@mui/material/IconButton'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Slide from '@mui/material/Slide'
+import { TransitionProps } from '@mui/material/transitions/transition'
 
-import type { DialogProps } from '@material-ui/core/Dialog'
+import type { DialogProps } from '@mui/material/Dialog'
 const Transition = React.forwardRef(function Transition(
   props: TransitionProps & { children?: React.ReactElement<any, any> },
   ref: React.Ref<unknown>

cli/web/cliente/src/components/molecules/DialogLayout/styles.ts

-import { Theme, createStyles } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 export const styles = (theme: Theme) =>
-  createStyles({
+  createSxStyles({
     appBar: { position: 'relative' },
     title: {
       marginLeft: theme.spacing(2),
-      flex: 1
-    }
+      flex: 1,
+    },
   })

cli/web/cliente/src/components/molecules/Drawer/Drawer.tsx

-import cn from 'classnames'
+import deepmerge from 'deepmerge'
 import React from 'react'
 import { RouteComponentProps } from 'react-router'
 
 import logo from '@agiliza/public/images/logo.svg'
 import { actions as loginActions } from '@agiliza/redux/ui/login'
-import Divider from '@material-ui/core/Divider'
-import MUIDrawer from '@material-ui/core/Drawer'
+import { ListItemProps } from '@mui/material'
+import Divider from '@mui/material/Divider'
+import MUIDrawer from '@mui/material/Drawer'
+import { useTheme } from '@mui/material/styles'
 
 import { useStyles } from './styles'
 
 type ExtendedTypes = RouteComponentProps
 
 interface DrawerItemsProps extends ExtendedTypes {
-  listItemClassName?: string
+  sx: ListItemProps['sx']
   toggleDrawer: () => void
   logout: Props['logout']
 }
@@ -28,30 +30,29 @@ export interface Props extends BaseProps {
 
 const Drawer = (props: Props) => {
   const { drawerOpen, toggleDrawer, Items, logout, ...routeProps } = props
-
-  const classes = useStyles()
+  const styles = useStyles(useTheme())
 
   return (
     <MUIDrawer
       variant="temporary"
       open={drawerOpen}
-      className={cn(classes.drawer, {
-        [classes.drawerOpen]: drawerOpen,
-        [classes.drawerClose]: !drawerOpen,
-      })}
-      classes={{
-        paper: cn(classes.drawer, {
-          [classes.drawerOpen]: drawerOpen,
-          [classes.drawerClose]: !drawerOpen,
-        }),
+      sx={deepmerge(styles.drawer, drawerOpen ? styles.drawerOpen : styles.drawerClose)}
+      // classes={{
+      //   paper: cn(classes.drawer, {
+      //     [classes.drawerOpen]: drawerOpen,
+      //     [classes.drawerClose]: !drawerOpen,
+      //   }),
+      // }}
+      PaperProps={{
+        sx: deepmerge(styles.drawer, drawerOpen ? styles.drawerOpen : styles.drawerClose),
       }}
       onBackdropClick={() => toggleDrawer()}
     >
-      <div className={classes.header}>
-        <img src={logo} className={classes.headerLogo} alt="Camedics Logo" />
+      <div style={styles.header}>
+        <img src={logo} style={styles.headerLogo} alt="Camedics Logo" />
       </div>
       <Divider />
-      {Items ? <Items logout={logout} listItemClassName={classes.listItem} toggleDrawer={toggleDrawer} {...routeProps} /> : null}
+      {Items ? <Items logout={logout} sx={styles.listItem} toggleDrawer={toggleDrawer} {...routeProps} /> : null}
       {/* <DrawerItems listItemClassName={classes.listItem} toggleDrawer={toggleDrawer} {...routerProps} /> */}
       {/* <div className={classes.grow} /> */}
       {/* <Divider />       */}

cli/web/cliente/src/components/molecules/Drawer/styles.ts

 import { drawerWidth, toolbarHeight } from '@agiliza/constants/styles'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
-export const useStyles = makeStyles((theme: Theme) => {
+export const useStyles = (theme: Theme) => {
   const drawerClosedWidth = theme.spacing(0)
   const hover = '&:hover'
-  return createStyles({
+  return createSxStyles({
     grow: {
       flexGrow: 1,
     },
@@ -87,4 +88,4 @@ export const useStyles = makeStyles((theme: Theme) => {
     },
     headerLogo: { width: 100, height: 'auto' },
   })
-})
+}

cli/web/cliente/src/components/molecules/ErrorDialog/ErrorDialog.tsx

@@ -4,15 +4,12 @@ import { bindActionCreators, Dispatch } from 'redux'
 
 import { StoreState } from '@agiliza/redux'
 import { actions as errorActions, selectors, State as ErrorState } from '@agiliza/redux/ui/error'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import { withStyles } from '@material-ui/styles'
-
-import { styles } from './styles'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
 
 interface Props {
   error: ErrorState['error']
@@ -60,4 +57,4 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
     dispatch
   )
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ErrorDialog))
+export default connect(mapStateToProps, mapDispatchToProps)(ErrorDialog)

cli/web/cliente/src/components/molecules/ErrorDialog/styles.ts

-import { Theme, createStyles } from '@material-ui/core/styles'
 
-export const styles = (theme: Theme) => createStyles({})

cli/web/cliente/src/components/molecules/PopoverVersion/PopoverVersion.tsx

 import React, { useState } from 'react'
 
-import Popover from '@material-ui/core/Popover'
-import Typography from '@material-ui/core/Typography'
-import InfoIcon from '@material-ui/icons/InfoRounded'
-import { WithStyles, withStyles } from '@material-ui/styles'
+import InfoIcon from '@mui/icons-material/InfoRounded'
+import Popover from '@mui/material/Popover'
+import { useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
 
-import { styles } from './styles'
+import { useStyles } from './styles'
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props {}
 
 interface PopItem {
   key: string
@@ -16,10 +16,11 @@ interface PopItem {
 }
 
 const PopoverVersion = (props: Props) => {
-  const { classes } = props
   const [popItems] = useState<PopItem[]>([])
   const [anchor, setAnchor] = useState<HTMLDivElement | null>(null)
 
+  const styles = useStyles(useTheme())
+
   // useEffect(() => {
   //   let items: PopItem[] = [{ key: 'Versão', value: VERSION }]
   //   if (service) {
@@ -35,16 +36,16 @@ const PopoverVersion = (props: Props) => {
 
   const createPopItems = (items: PopItem[]) =>
     items.map((item, i) => (
-      <Typography className={classes.msg} color="textPrimary" key={i}>
+      <Typography sx={styles.msg} color="textPrimary" key={i} component="span">
         {`${item.key}: `}
         {<span style={{ textDecoration: item.underline ? 'underline' : undefined }}>{item.value || ''}</span>}
       </Typography>
     ))
 
   return (
-    <div className={classes.root}>
+    <div style={styles.root}>
       <div onClick={(evt) => setAnchor(evt.currentTarget)}>
-        <InfoIcon className={classes.infoBtn} color="primary" />
+        <InfoIcon sx={styles.infoBtn} color="primary" />
       </div>
       <Popover
         id="version-popover"
@@ -60,9 +61,9 @@ const PopoverVersion = (props: Props) => {
           horizontal: 'right',
         }}
       >
-        <div className={classes.popoverContent}>{createPopItems(popItems)}</div>
+        <div style={styles.popoverContent}>{createPopItems(popItems)}</div>
       </Popover>
     </div>
   )
 }
-export default withStyles(styles)(PopoverVersion)
+export default PopoverVersion

cli/web/cliente/src/components/molecules/PopoverVersion/styles.ts

-import { createStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
-export const styles = (theme: Theme) =>
-  createStyles({
+export const useStyles = (theme: Theme) =>
+  createSxStyles({
     root: { position: 'fixed', bottom: theme.spacing(5), right: theme.spacing(5) },
     popoverContent: { padding: theme.spacing(1.5) },
     msg: {

cli/web/cliente/src/components/organisms/DashboardCard/DashboardCard.tsx

-import cn from 'classnames'
+import deepmerge from 'deepmerge'
 import React from 'react'
 
-import { makeStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme, useTheme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  card: {
-    // backgroundColor: '#fafafa',
-    height: 100,
-    width: 175,
-    padding: theme.spacing(1),
-    border: '1px solid #dfdfdf',
-    borderRadius: '10px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // color: theme.palette.grey[500],
-    transform: 'scale(1)',
-    transition: theme.transitions.create(['color', 'border', 'transform'], {
-      duration: theme.transitions.duration.short,
-    }),
-    '&:hover': {
-      transform: 'scale(1.03)',
-      color: theme.palette.primary.main,
-      borderColor: theme.palette.primary.main,
-      cursor: 'pointer',
-      border: `1px solid ${theme.palette.primary.main}`,
+const useStyles = (theme: Theme) =>
+  createSxStyles({
+    card: {
+      // backgroundColor: '#fafafa',
+      height: '100px',
+      width: '175px',
+      padding: theme.spacing(1),
+      border: '1px solid #dfdfdf',
+      borderRadius: '10px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // color: theme.palette.grey[500],
+      transform: 'scale(1)',
+      transition: theme.transitions.create(['color', 'border', 'transform'], {
+        duration: theme.transitions.duration.short,
+      }),
+      '&:hover': {
+        transform: 'scale(1.03)',
+        color: theme.palette.primary.main,
+        borderColor: theme.palette.primary.main,
+        cursor: 'pointer',
+        border: `1px solid ${theme.palette.primary.main}`,
+      },
     },
-  },
-  cardIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cardDescription: {
-    textAlign: 'center',
-  },
-}))
+    cardIcon: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    cardDescription: {
+      textAlign: 'center',
+    },
+  })
 
 export interface DashboardCardProps {
   label: string
   icon: React.ReactNode
-  className?: string
+  style?: React.CSSProperties
   onClick?(): void
 }
 
 function DashboardCard(props: DashboardCardProps) {
-  const classes = useStyles()
+  const styles = useStyles(useTheme())
   return (
-    <div onClick={props.onClick} className={cn(classes.card, props.className)}>
-      <div className={classes.cardIcon}>{props.icon}</div>
-      <div className={classes.cardDescription}>{props.label}</div>
+    <div onClick={props.onClick} style={deepmerge(styles.card, props.style || {})}>
+      <div style={styles.cardIcon}>{props.icon}</div>
+      <div style={styles.cardDescription}>{props.label}</div>
     </div>
   )
 }

cli/web/cliente/src/components/organisms/ImageUpload/ImageUpload.tsx

-import cn from 'classnames'
+import deepmerge from 'deepmerge'
 import React from 'react'
 
-import { Button } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-import { PhotoCamera as PhotoCameraIcon } from '@material-ui/icons'
+import { PhotoCamera as PhotoCameraIcon } from '@mui/icons-material'
+import { Button, ButtonProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   image?: string
   onChangeImage: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['onChange']
   label: string
   imageStyle?: React.HTMLAttributes<HTMLDivElement>['style']
   className?: string
-  buttonClassName?: string
+  style?: React.CSSProperties
+  sx?: ButtonProps['sx']
 }
 
 const ImageUpload = (props: Props) => {
-  const { classes, className, buttonClassName, image, onChangeImage, label, imageStyle } = props
+  const { style, sx = {}, image, onChangeImage, label, imageStyle = {} } = props
+
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={cn(className, classes.container)}>
-      <Button variant="text" component="label" className={cn(classes.photoBtn, buttonClassName)} classes={{ label: classes.photoLabelBtn }}>
+    <div style={deepmerge(style || {}, styles.container)}>
+      {/* <Button variant="text" sx={deepmerge(styles.photoBtn, sx || {})} > */}
+      <Button variant="text" component="label" sx={deepmerge(styles.photoBtn, sx || {})}>
         {image ? (
-          <div className={classes.card} style={imageStyle}>
-            <img src={'data:image/png;base64,' + image} className={classes.media} />
+          <div style={deepmerge(styles.card, imageStyle)}>
+            <img src={'data:image/png;base64,' + image} style={styles.media} />
           </div>
         ) : (
           <PhotoCameraIcon />
@@ -44,4 +46,4 @@ const ImageUpload = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(ImageUpload)
+export default ImageUpload

cli/web/cliente/src/components/organisms/ImageUpload/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 // eslint-disable-next-line
-export default (theme: Theme) => {
-  return createStyles({
+export default (theme: Theme) =>
+  createSxStyles({
     container: { width: '100%', textAlign: 'center', marginTop: theme.spacing(1), marginBottom: theme.spacing(1) },
-    photoBtn: { width: '100%' },
-    photoLabelBtn: { display: 'flex', flexDirection: 'column', height: '280px', alignItems: 'center', flexGrow: 1 },
+    photoBtn: { width: '100%', '&.MuiButton-text': { display: 'flex', flexDirection: 'column', height: '280px', alignItems: 'center', flexGrow: 1 } },
     card: { width: '100%', maxWidth: '100%', height: '100%', textAlign: 'center' },
     media: {
       height: '230px',
@@ -15,4 +14,3 @@ export default (theme: Theme) => {
       // paddingTop: '56.25%', // 16:9
     },
   })
-}

cli/web/cliente/src/components/organisms/PhoneField/PhoneField.tsx

 import React from 'react'
 
 import { maskPhone } from '@agiliza/utils/masks'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
 
-import styles from './styles'
-
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   value?: string
   onChange: TextFieldProps['onChange']
   label?: string
@@ -19,4 +14,4 @@ const PhoneField = (props: Props) => {
   return <TextField variant="outlined" label={label || 'Telefone'} value={maskPhone(value)} onChange={onChange} inputProps={{ maxLength: 15 }} />
 }
 
-export default withStyles(styles)(PhoneField)
+export default PhoneField

cli/web/cliente/src/components/organisms/PhoneField/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
 
 // eslint-disable-next-line
-export default (theme: Theme) => {
-  return createStyles({})
-}
+export default createSxStyles({})

cli/web/cliente/src/components/particles/Icons/BellIcon.tsx

 import React from 'react'
 
-import { SvgIcon } from '@material-ui/core'
+import { SvgIcon } from '@mui/material'
 
 interface Props {}
 

cli/web/cliente/src/components/particles/Icons/SecurityProfileIcon.tsx

 import React from 'react'
 
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 interface Props extends SvgIconProps {}
 

cli/web/cliente/src/components/particles/Icons/ShareSquareIcon.tsx

 import React from 'react'
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 interface Props extends SvgIconProps {}
 

cli/web/cliente/src/components/particles/Icons/TermIcon.tsx

 import React from 'react'
 
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 interface Props extends SvgIconProps {}
 

cli/web/cliente/src/components/particles/Icons/UploadIcon.tsx

 import React from 'react'
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 interface Props extends SvgIconProps {}
 
@@ -9,7 +10,7 @@ export default (props: Props) => {
       {...props}
       style={{
         width: 21,
-        height: 21
+        height: 21,
       }}
       viewBox="0 0 21 21"
     >

cli/web/cliente/src/components/particles/Icons/VialIcon.tsx

 import React from 'react'
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 interface Props extends SvgIconProps {}
 
@@ -9,7 +10,7 @@ export default (props: Props) => {
       {...props}
       style={{
         width: 21,
-        height: 21
+        height: 21,
       }}
       viewBox="0 0 21 21"
     >

cli/web/cliente/src/components/templates/AccountInputsPhoto/AccountInputsPhoto.tsx

@@ -3,14 +3,11 @@ import React from 'react'
 import { BanestesAccount } from '@agiliza/api/domain'
 import ImageUpload from '@agiliza/components/organisms/ImageUpload'
 import { extractNumbers, getBase64FromFile } from '@agiliza/utils/method'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
 
 import styles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   values: BanestesAccount
   onChanges: {
     account: (type: keyof BanestesAccount) => TextFieldProps['onChange']
@@ -20,7 +17,7 @@ interface Props extends ExtendedProps {
 }
 
 const AccountInputsPhoto = (props: Props) => {
-  const { classes, values, onChanges } = props
+  const { values, onChanges } = props
   const { agencyNumber, cardPicture, number } = values
 
   const handleChangeField = (type: keyof BanestesAccount): TextFieldProps['onChange'] => onChanges.account(type)
@@ -34,8 +31,8 @@ const AccountInputsPhoto = (props: Props) => {
   }
 
   return (
-    <div className={classes.accountInputsPhotoContainer}>
-      <div className={classes.accountInputsContainer}>
+    <div style={styles.accountInputsPhotoContainer}>
+      <div style={styles.accountInputsContainer}>
         <TextField
           label="Número da agência"
           value={extractNumbers(agencyNumber) || ''}
@@ -49,4 +46,4 @@ const AccountInputsPhoto = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(AccountInputsPhoto)
+export default AccountInputsPhoto

cli/web/cliente/src/components/templates/AccountInputsPhoto/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
 
 // eslint-disable-next-line
-export default (theme: Theme) => {
-  return createStyles({
-    accountInputsPhotoContainer: { width: '100%', height: '100%' },
-    accountInputsContainer: { height: '100%' },
-    photoBtn: { minWidth: '50%' },
-    photoLabelBtn: { display: 'flex', flexDirection: 'column', height: '280px', alignItems: 'center', flexGrow: 1 },
-    card: { width: 'auto', height: 'auto' },
-    media: {
-      height: '250px',
-      width: 'auto',
-      // paddingTop: '56.25%', // 16:9
-    },
-  })
-}
+export default createSxStyles({
+  accountInputsPhotoContainer: { width: '100%', height: '100%' },
+  accountInputsContainer: { height: '100%' },
+  photoBtn: { minWidth: '50%' },
+  photoLabelBtn: { display: 'flex', flexDirection: 'column', height: '280px', alignItems: 'center', flexGrow: 1 },
+  card: { width: 'auto', height: 'auto' },
+  media: {
+    height: '250px',
+    width: 'auto',
+    // paddingTop: '56.25%', // 16:9
+  },
+})

cli/web/cliente/src/components/templates/Address/Address.tsx

@@ -3,15 +3,13 @@ import React, { useMemo } from 'react'
 import { City, State } from '@agiliza/api/domain'
 import { maskCEP } from '@agiliza/utils/masks'
 import { SelectField, SelectFieldProps } from '@curio/components'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { AddressState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   states: State[]
   cities: City[]
   state: AddressState
@@ -19,7 +17,8 @@ interface Props extends ExtendedProps {
 }
 
 const Address = (props: Props) => {
-  const { classes, state: _state, onChange, states, cities } = props
+  const styles = useStyles(useTheme())
+  const { state: _state, onChange, states, cities } = props
 
   const { cep, street, number, complement, state, city, district } = _state
 
@@ -54,7 +53,8 @@ const Address = (props: Props) => {
         onChange={handleChangeSelect('state')}
         items={states.map((st) => ({ label: st.name, value: st.id }))}
         shrink={false}
-        className={classes.selectField}
+        // sx={classes.selectField}
+        sx={styles.selectField}
       />
       <SelectField
         id="state-select"
@@ -65,11 +65,11 @@ const Address = (props: Props) => {
         onChange={handleChangeSelect('city')}
         items={availableCities.map((st) => ({ label: st.name, value: st.id }))}
         shrink={false}
-        className={classes.selectField}
+        sx={styles.selectField}
       />
       <TextField variant="outlined" label="Bairro" value={district} onChange={handleChange('district')} />
     </>
   )
 }
 
-export default withStyles(styles)(Address)
+export default Address

cli/web/cliente/src/components/templates/Address/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 // eslint-disable-next-line
 export default (theme: Theme) =>
-  createStyles({
+  createSxStyles({
     form: { display: 'flex', flexDirection: 'column' },
     selectField: { marginBottom: theme.spacing(2) },
   })

cli/web/cliente/src/components/templates/FirstAccess/FirstAccess.tsx

@@ -5,16 +5,14 @@ import PhoneField from '@agiliza/components/organisms/PhoneField'
 import { useErrorValidator } from '@agiliza/utils/hooks/errorValidation'
 import { ActionType } from '@agiliza/utils/hooks/state'
 import CPFCNPJField from '@agiliza/views/ProposalData/components/atoms/CPFCNPJField'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import AddressForm, { AddressState } from '../Address'
 import { initState, State as FirstAccessState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   states: State[]
   cities: City[]
   state: FirstAccessState
@@ -22,12 +20,14 @@ interface Props extends ExtendedProps {
 }
 
 const FirstAccess = (props: Props) => {
-  const { classes, states, cities, state, actions } = props
+  const { states, cities, state, actions } = props
 
   const { cpf, name, email, phone, ...addressState } = state
 
   const { actions: errorActions } = useErrorValidator(initState)
 
+  const styles = useStyles(useTheme())
+
   const handleChange =
     (key: keyof FirstAccessState): TextFieldProps['onChange'] =>
     (evt) => {
@@ -39,7 +39,7 @@ const FirstAccess = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <form style={styles.form}>
       <CPFCNPJField value={cpf} onChange={handleChange('cpf')} onlyCPF disabled />
       <TextField variant="outlined" label="Nome" value={name} onChange={handleChange('name')} />
       <TextField variant="outlined" label="Email" value={email} onChange={handleChange('email')} />
@@ -49,4 +49,4 @@ const FirstAccess = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(FirstAccess)
+export default FirstAccess

cli/web/cliente/src/components/templates/FirstAccess/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) =>
-  createStyles({
+  createSxStyles({
     form: {
       display: 'flex',
       flexDirection: 'column',

cli/web/cliente/src/components/templates/Login/Login.tsx

 import React from 'react'
 
 import TextFieldWithIcon from '@agiliza/components/atoms/TextFieldWithIcon'
-import { InputAdornment, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-import { AccountCircle } from '@material-ui/icons'
+import { AccountCircle } from '@mui/icons-material'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   username: string
   password: string
   onChange(type: 'username' | 'password'): TextFieldProps['onChange']
 }
 
 const Login = (props: Props) => {
-  const { classes, username, password, onChange } = props
+  const styles = useStyles(useTheme())
+  const { username, password, onChange } = props
 
   return (
-    <form className={classes.form}>
+    <form style={styles.form}>
       <TextFieldWithIcon
         autoFocus
         required
         value={username}
         onChange={onChange('username')}
         label="CPF"
-        className={classes.usernameTxtField}
+        sx={styles.usernameTxtField}
         inputProps={{ maxLength: 14 }}
         InputProps={{
           startAdornment: (
@@ -41,4 +40,4 @@ const Login = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(Login)
+export default Login

cli/web/cliente/src/components/templates/Login/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 // eslint-disable-next-line
 export default (theme: Theme) =>
-  createStyles({
+  createSxStyles({
     title: {
       fontSize: '150%',
       fontWeight: 'bold',
@@ -30,5 +30,5 @@ export default (theme: Theme) =>
       width: '100%',
       margin: theme.spacing(2),
     },
-    usernameTxtField: { marginBottom: 10 },
+    usernameTxtField: { marginBottom: theme.spacing(2) },
   })

cli/web/cliente/src/components/templates/NotFound/NotFound.tsx

 import React from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 
-import { Typography } from '@material-ui/core'
-import { createStyles, Theme } from '@material-ui/core/styles'
-import { withStyles, WithStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Typography } from '@mui/material'
+import { Theme, useTheme } from '@mui/material/styles'
 
-const styles = (theme: Theme) =>
-  createStyles({
+const useStyles = (theme: Theme) =>
+  createSxStyles({
     container: {
       paddingLeft: theme.spacing(2),
     },
@@ -15,19 +15,20 @@ const styles = (theme: Theme) =>
     },
   })
 
-type Props = WithStyles<typeof styles> & RouteComponentProps
+type Props = RouteComponentProps
 
 interface NotFoundProps extends Props {}
 
-function NotFound({ classes }: NotFoundProps) {
+function NotFound(props: NotFoundProps) {
+  const styles = useStyles(useTheme())
   return (
-    <div className={classes.container}>
+    <div style={styles.container}>
       <Typography variant="h3">404: Página não encontrada</Typography>
-      <div className={classes.messageBox}>
+      <div style={styles.messageBox}>
         <Typography variant="h5">A página pela qual você procurou não existe.</Typography>
       </div>
     </div>
   )
 }
 
-export default /*#__PURE__*/ withStyles(styles)(NotFound)
+export default /*#__PURE__*/ NotFound

cli/web/cliente/src/components/templates/RGTemplate/RGTemplate.tsx

@@ -4,20 +4,19 @@ import { RG } from '@agiliza/api/domain'
 import ImageUpload from '@agiliza/components/organisms/ImageUpload'
 import { maskRG } from '@agiliza/utils/masks'
 import { getBase64FromFile } from '@agiliza/utils/method'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   rg?: RG
   onChange: (rg: Partial<RG>) => void
 }
 
 const RGTemplate = (props: Props) => {
-  const { classes, rg, onChange } = props
+  const { rg, onChange } = props
+  const styles = useStyles(useTheme())
 
   const handleChangePhoto =
     (key: keyof Pick<RG, 'front' | 'back'>): React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['onChange'] =>
@@ -36,10 +35,10 @@ const RGTemplate = (props: Props) => {
     }
 
   return (
-    <div className={classes.container}>
-      <div className={classes.imagesContainer}>
-        <ImageUpload label="Frente" image={rg?.front} onChangeImage={handleChangePhoto('front')} className={classes.imageUpload} />
-        <ImageUpload label="Verso" image={rg?.back} onChangeImage={handleChangePhoto('back')} className={classes.imageUpload} />
+    <div style={styles.container}>
+      <div style={styles.imagesContainer}>
+        <ImageUpload label="Frente" image={rg?.front} onChangeImage={handleChangePhoto('front')} sx={styles.imageUpload} />
+        <ImageUpload label="Verso" image={rg?.back} onChangeImage={handleChangePhoto('back')} sx={styles.imageUpload} />
       </div>
       <TextField
         variant="outlined"
@@ -53,4 +52,4 @@ const RGTemplate = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(RGTemplate)
+export default RGTemplate

cli/web/cliente/src/components/templates/RGTemplate/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     container: { display: 'flex', flexDirection: 'column', alignItems: 'center' },
     imagesContainer: { display: 'flex', width: '100%', padding: theme.spacing(1) },
     imageUpload: { width: '50%', textAlign: 'center' },

cli/web/cliente/src/constants/styles.ts

-import { CSSProperties } from '@material-ui/styles/withStyles'
+import { CSSProperties } from '@mui/system'
 
-export const drawerWidth = 300
-export const toolbarHeight = 124
+export const drawerWidth = '300px'
+export const toolbarHeight = '124px'
 
 export const flexColumn: CSSProperties = {
   display: 'flex',

cli/web/cliente/src/index.tsx

@@ -8,9 +8,9 @@ import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
 import { browser, SUPPORTED_BROWSERS } from '@agiliza/constants/browser'
-import DateFnsUtils from '@date-io/date-fns'
-import { MuiThemeProvider } from '@material-ui/core/styles'
-import { MuiPickersUtilsProvider } from '@material-ui/pickers'
+import { LocalizationProvider } from '@mui/lab'
+import AdapterDateFns from '@mui/lab/AdapterDateFns'
+import { ThemeProvider } from '@mui/material/styles'
 
 import { SESSION_KEY } from './api/useCases/shared'
 import ErrorDialog from './components/molecules/ErrorDialog'
@@ -28,12 +28,12 @@ interface Props {}
 const Adm = (props: Props) => {
   return (
     <Provider store={store}>
-      <MuiThemeProvider theme={theme}>
-        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
+      <ThemeProvider theme={theme}>
+        <LocalizationProvider dateAdapter={AdapterDateFns} locale={ptBR}>
           <Views />
           <ErrorDialog />
-        </MuiPickersUtilsProvider>
-      </MuiThemeProvider>
+        </LocalizationProvider>
+      </ThemeProvider>
     </Provider>
   )
 }

cli/web/cliente/src/theme/index.ts

-import red from '@material-ui/core/colors/red'
-import { createMuiTheme } from '@material-ui/core/styles'
+import red from '@mui/material/colors/red'
+import { createTheme } from '@mui/material/styles'
+import { SxProps } from '@mui/system'
 
 export const defaultToobarHeight = 64
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     primary: {
       light: '#034da6',
-      main: '#0d3366'
+      main: '#0d3366',
     },
     secondary: {
       main: '#23a897',
-      contrastText: '#fafafa'
+      contrastText: '#fafafa',
     },
     text: { primary: '#2e2e2e' },
     error: {
-      main: red[500]
-    }
+      main: red[500],
+    },
   },
   mixins: {
     toolbar: {
-      minHeight: defaultToobarHeight
-    }
+      minHeight: defaultToobarHeight,
+    },
   },
   typography: {
     fontSize: 13,
-    fontFamily: "'Rubik', 'Roboto', 'Open Sans', sans-serif"
+    fontFamily: "'Rubik', 'Roboto', 'Open Sans', sans-serif",
   },
-  overrides: {
+  components: {
     MuiInputBase: {
-      input: {
-        '&:-webkit-autofill': {
-          WebkitBoxShadow: '0 0 0 1000px white inset'
-        }
-      }
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            WebkitBoxShadow: '0 0 0 1000px white inset',
+          },
+        },
+      },
     },
     MuiTableCell: {
-      root: {
-        fontFamily: 'Heebo'
-      }
+      styleOverrides: {
+        root: {
+          fontFamily: 'Heebo',
+        },
+      },
     },
     MuiListItemText: {
-      primary: {
-        fontFamily: 'Heebo'
-      }
+      styleOverrides: {
+        primary: {
+          fontFamily: 'Heebo',
+        },
+      },
     },
     MuiDialogContentText: {
-      root: {
-        fontFamily: 'Heebo'
-      }
+      styleOverrides: {
+        root: {
+          fontFamily: 'Heebo',
+        },
+      },
     },
     MuiListItemIcon: {
-      root: {
-        minWidth: 40
-      }
-    }
-  }
+      styleOverrides: {
+        root: {
+          minWidth: 40,
+        },
+      },
+    },
+  },
 })
+
+export const createSxStyles = <T extends { [k: string]: SxProps<typeof theme> }>(obj: T) => obj

cli/web/cliente/src/views/BrowserIncompatible/BrowserIncompatible.tsx

@@ -2,13 +2,12 @@ import cn from 'classnames'
 import React from 'react'
 
 import { browser, SUPPORTED_BROWSERS } from '@agiliza/constants/browser'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Link } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {}
+interface Props {}
 
 const chrome = SUPPORTED_BROWSERS['chrome'].replace(/(>=)/g, '') + '+'
 const firefox = SUPPORTED_BROWSERS['firefox'].replace(/(>=)/g, '') + '+'
@@ -16,33 +15,33 @@ const edge = SUPPORTED_BROWSERS['windows']['edge'].replace(/(>=)/g, '') + '+'
 const safari = SUPPORTED_BROWSERS['macos']['safari'].replace(/(>=)/g, '') + '+'
 
 const BrowserIncompatible = (props: Props) => {
-  const { classes } = props
+  const styles = useStyles(useTheme())
   return (
-    <div className={classes.page}>
-      <i className={cn('fas fa-exclamation-circle', classes.titleIcon)} />
-      <h1 className={classes.title}>Navegador não suportado</h1>
-      <p className={classes.subTitle}>{`Você está usando o ${browser.getBrowserName()} na versão ${browser.getBrowserVersion()}`}</p>
-      <p className={classes.subTitle}>É recomendado utilizar o {process.env.APP_TITLE} em um dos seguintes navegadores:</p>
-      <div className={classes.browserList}>
-        <a target="#" className={classes.anchorBrowser} href="https://www.google.com/chrome/">
-          <i className={cn('fab fa-chrome', classes.icon)} />
+    <div style={styles.page}>
+      <i className="fas fa-exclamation-circle" style={styles.titleIcon} />
+      <h1 style={styles.title}>Navegador não suportado</h1>
+      <p style={styles.subTitle}>{`Você está usando o ${browser.getBrowserName()} na versão ${browser.getBrowserVersion()}`}</p>
+      <p style={styles.subTitle}>É recomendado utilizar o {process.env.APP_TITLE} em um dos seguintes navegadores:</p>
+      <div style={styles.browserList}>
+        <Link target="#" sx={styles.anchorBrowser} href="https://www.google.com/chrome/">
+          <i className={cn('fab fa-chrome', styles.icon)} />
           Chrome {chrome}
-        </a>
-        <a target="#" className={classes.anchorBrowser} href="https://www.mozilla.org/en-US/firefox/new/">
-          <i className={cn('fab fa-firefox-browser', classes.icon)} />
+        </Link>
+        <Link target="#" sx={styles.anchorBrowser} href="https://www.mozilla.org/en-US/firefox/new/">
+          <i className={cn('fab fa-firefox-browser', styles.icon)} />
           Firefox {firefox}
-        </a>
-        <a target="#" className={classes.anchorBrowser} href="https://www.microsoft.com/en-us/edge">
-          <i className={cn('fab fa-edge', classes.icon)}></i>
+        </Link>
+        <Link target="#" sx={styles.anchorBrowser} href="https://www.microsoft.com/en-us/edge">
+          <i className={cn('fab fa-edge', styles.icon)}></i>
           Edge {edge}
-        </a>
-        <a target="#" className={classes.anchorBrowser} href="https://support.apple.com/downloads/safari">
-          <i className={cn('fab fa-safari', classes.icon)}></i>
+        </Link>
+        <Link target="#" sx={styles.anchorBrowser} href="https://support.apple.com/downloads/safari">
+          <i className={cn('fab fa-safari', styles.icon)}></i>
           Safari {safari}
-        </a>
+        </Link>
       </div>
     </div>
   )
 }
 
-export default withStyles(styles)(BrowserIncompatible)
+export default BrowserIncompatible

cli/web/cliente/src/views/BrowserIncompatible/styles.ts

-import { Theme } from '@material-ui/core'
-import { createStyles } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     page: {
       display: 'flex',
       flexDirection: 'column',
@@ -16,7 +16,7 @@ export default (theme: Theme) => {
     title: {
       textAlign: 'center',
       marginBottom: '1rem',
-      fontSize: 'xx-large',
+      fontSize: 'xxx-large',
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
     },
     subTitle: {

cli/web/cliente/src/views/Login/Login.tsx

@@ -9,9 +9,11 @@ import { StoreState } from '@agiliza/redux'
 import { isAuthenticated } from '@agiliza/redux/session/selectors'
 import { actions } from '@agiliza/redux/ui/login'
 import { isFetching } from '@agiliza/redux/ui/login/selectors'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import Typography from '@material-ui/core/Typography'
-import AccountCircle from '@material-ui/icons/AccountCircle'
+import AccountCircle from '@mui/icons-material/AccountCircle'
+import Box from '@mui/material/Box'
+import InputAdornment from '@mui/material/InputAdornment'
+import { useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
 
 import { useStyles } from './styles'
 
@@ -28,7 +30,7 @@ interface Props extends BaseProps {
 const Login = (props: Props) => {
   const { loginRequest, authenticated, fetching, redirectTo } = props
 
-  const classes = useStyles()
+  const styles = useStyles(useTheme())
 
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -42,20 +44,20 @@ const Login = (props: Props) => {
   }
 
   return (
-    <div className={classes.container}>
+    <div style={styles.container}>
       {/* <div className={classes.logo} /> */}
-      <div className={classes.formContainer}>
-        <Typography align="center" className={classes.title} color="primary">
+      <Box sx={styles.formContainer}>
+        <Typography align="center" sx={styles.title} color="primary">
           {process.env.APP_TITLE}
         </Typography>
-        <form className={classes.form} onKeyDown={(evt) => evt.keyCode === 13 && handleLogin()}>
+        <form style={styles.form} onKeyDown={(evt) => evt.keyCode === 13 && handleLogin()}>
           <TextFieldWithIcon
             autoFocus
             required
             value={username}
             onChange={(evt) => setUsername(evt.target.value)}
             label="Usuário"
-            className={classes.usernameTxtField}
+            sx={styles.usernameTxtField}
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">
@@ -69,7 +71,7 @@ const Login = (props: Props) => {
         <ButtonWithProgress disabled={!username} color="secondary" fetching={fetching} onClick={handleLogin}>
           Entrar
         </ButtonWithProgress>
-      </div>
+      </Box>
       {/* <PopoverVersion service={service} /> */}
     </div>
   )

cli/web/cliente/src/views/Login/styles.ts

 import { flexColumn } from '@agiliza/constants/styles'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 // eslint-disable-next-line
-export const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+export const useStyles = (theme: Theme) =>
+  createSxStyles({
     title: {
       fontSize: '150%',
       fontWeight: 'bold',
@@ -41,6 +41,5 @@ export const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       flexDirection: 'column',
     },
-    usernameTxtField: { marginBottom: 10 },
+    usernameTxtField: { marginBottom: theme.spacing(2) },
   })
-)

cli/web/cliente/src/views/Main/DrawerItems/DrawerItems.tsx

-import cn from 'classnames'
 import React from 'react'
 
 import ItemWithIcon from '@agiliza/components/atoms/ItemWithIcon'
-import List from '@material-ui/core/List'
-import { AttachMoney as AttachMoneyIcon, ExitToApp } from '@material-ui/icons'
-import withStyles from '@material-ui/styles/withStyles'
+import { AttachMoney as AttachMoneyIcon, ExitToApp } from '@mui/icons-material'
+import { ListItemProps } from '@mui/material'
+import List from '@mui/material/List'
+import { useTheme } from '@mui/material/styles'
 
-import { styles } from './styles'
+import { useStyles } from './styles'
 
-import type { WithStyles } from '@material-ui/styles/withStyles'
 import type { RouteComponentProps } from 'react-router-dom'
 import type { Props as DrawerProps } from '@agiliza/components/molecules/Drawer'
 interface ListItem {
@@ -32,10 +31,10 @@ export const mapPathToTitle = (path: string) => {
   return drawerListItems.find((dL) => dL.path === path)?.label || ''
 }
 
-type ExtendedTypes = RouteComponentProps & WithStyles<typeof styles>
+type ExtendedTypes = RouteComponentProps
 
 interface Props extends ExtendedTypes {
-  listItemClassName?: string
+  sx: ListItemProps['sx']
   toggleDrawer: () => void
   logout: DrawerProps['logout']
 }
@@ -46,30 +45,26 @@ const isCurrentPath = (history: RouteComponentProps['history'], path: string) =>
 }
 
 const DrawerItems = (props: Props) => {
-  const { listItemClassName, history, classes, toggleDrawer, logout } = props
+  const styles = useStyles(useTheme())
+  const { sx, history, toggleDrawer, logout } = props
   const handleClick = (path: string) => () => {
     history.push(path)
     toggleDrawer()
   }
   const listItemComponent = (label: string, path: string, Icon: React.ComponentType) => (
-    <ItemWithIcon
-      key={path}
-      label={label}
-      className={cn(listItemClassName, { [classes.selected]: isCurrentPath(history, path) })}
-      onClick={handleClick(path)}
-    >
+    <ItemWithIcon key={path} label={label} sx={{ ...sx, ...(isCurrentPath(history, path) ? styles.selected : {}) }} onClick={handleClick(path)}>
       <Icon />
     </ItemWithIcon>
   )
 
   return (
-    <List className={classes.list}>
+    <List sx={styles.list}>
       {drawerListItems.map((item) => listItemComponent(item.label, item.path, item.Icon))}
-      <ItemWithIcon label="Sair" className={listItemClassName} onClick={() => logout()}>
+      <ItemWithIcon label="Sair" sx={sx} onClick={() => logout()}>
         <ExitToApp />
       </ItemWithIcon>
     </List>
   )
 }
 
-export default withStyles(styles)(DrawerItems)
+export default DrawerItems

cli/web/cliente/src/views/Main/DrawerItems/styles.ts

 import { drawerWidth } from '@agiliza/constants/styles'
-import { createStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
-export const styles = (theme: Theme) => {
-  return createStyles({
+export const useStyles = (theme: Theme) =>
+  createSxStyles({
     selected: {
       backgroundColor: theme.palette.primary.light,
       color: theme.palette.primary.contrastText,
@@ -37,4 +38,3 @@ export const styles = (theme: Theme) => {
     },
     grow: { flex: 1 },
   })
-}

cli/web/cliente/src/views/Main/Main.tsx

@@ -6,20 +6,20 @@ import CircularProgress from '@agiliza/components/molecules/CircularProgress'
 import { actions as drawerActions } from '@agiliza/redux/ui/drawer'
 import { actions as loginActions } from '@agiliza/redux/ui/login'
 import { ProposalDataRouteState } from '@agiliza/views/ProposalData/pages/ProposalData'
-import { Button, ListItem, ListItemIcon, ListItemText, Menu, Typography } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-import { AccountCircleOutlined as PersonIcon, MeetingRoom as LogoutIcon } from '@material-ui/icons'
+import { AccountCircleOutlined as PersonIcon, MeetingRoom as LogoutIcon } from '@mui/icons-material'
+import { Button, Link, ListItem, ListItemIcon, ListItemText, Menu, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import connect, { ConnectedProps } from './connect'
 import { PATHS } from './DrawerItems'
-import styles from './styles'
+import useStyles from './styles'
 
 const SimulationCreditLines = lazy(() => import('@agiliza/views/SimulationCreditLines/pages/router'))
 const ProposalData = lazy(() => import('@agiliza/views/ProposalData/pages/ProposalData'))
 const Projects = lazy(() => import('@agiliza/views/Projects/pages/router'))
 // const SecurityProfile = lazy(() => import('@curio/ui/dist/views/SecurityProfile'))
 
-type BaseProps = RouteComponentProps & ConnectedProps & WithStyles<typeof styles>
+type BaseProps = RouteComponentProps & ConnectedProps
 
 interface Props extends BaseProps {
   toggleDrawer: typeof drawerActions.toggleDrawer
@@ -27,7 +27,8 @@ interface Props extends BaseProps {
 }
 
 const Main = (props: Props) => {
-  const { classes, toggleDrawer, fetchMenu, customer } = props
+  const { toggleDrawer, fetchMenu, customer } = props
+  const styles = useStyles(useTheme())
 
   const history = useHistory()
 
@@ -55,20 +56,24 @@ const Main = (props: Props) => {
   }
 
   return (
-    <div className={classes.pageContainer}>
+    <div style={styles.pageContainer}>
       <AppBar
         onNavClick={toggleDrawer}
         title={
-          <div style={{ display: 'flex' }}>
-            <a onClick={() => history.push('/')} className={classes.titleAnchor}>
-              <Typography className={classes.appTitle}>Agiliza</Typography>
-            </a>
+          <>
+            <Link onClick={() => history.push('/')} sx={styles.titleAnchor}>
+              <Typography sx={styles.appTitle}>Agiliza</Typography>
+            </Link>
             <div style={{ flex: 1 }} />
+          </>
+        }
+        actions={
+          <>
             <Button color="inherit" variant="text" onClick={() => history.push(PATHS.proposals)}>
               Retomar proposta
             </Button>
             {customer && <Button onClick={handleProfileClick} key="1" color="inherit" endIcon={<PersonIcon />} />}
-          </div>
+          </>
         }
       />
       {/* <Drawer drawerOpen={drawerOpen} toggleDrawer={toggleDrawer} logout={logout} Items={DrawerItems} {...routeProps} /> */}
@@ -100,4 +105,4 @@ const Main = (props: Props) => {
   )
 }
 
-export default connect(withStyles(styles)(Main))
+export default connect(Main)

cli/web/cliente/src/views/Main/styles.ts

-import { createStyles, Theme } from '@material-ui/core/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../shared-styles'
 
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     pageContainer: {
       height: '100vh',
@@ -14,7 +15,7 @@ export default (theme: Theme) => {
       paddingBottom: 0,
       justifyContent: 'flex-start',
     },
-    appTitle: { flexGrow: 1, fontSize: '100%', textTransform: 'uppercase' },
-    titleAnchor: { cursor: 'pointer' },
+    appTitle: { flexGrow: 1, fontSize: '100%', textTransform: 'uppercase', color: 'white' },
+    titleAnchor: { cursor: 'pointer', display: { xs: 'none', sm: 'block' } },
   })
 }

cli/web/cliente/src/views/Projects/pages/ListProjects/ListProjects.tsx

@@ -3,27 +3,30 @@ import { RouteComponentProps } from 'react-router'
 
 import { Project } from '@agiliza/api/domain/project'
 import { PATHS } from '@agiliza/views/Main/DrawerItems'
+import { Apps as AppsIcon } from '@mui/icons-material'
 import {
   Avatar,
+  Box,
   CircularProgress,
   List,
   ListItem,
   ListItemAvatar,
   ListItemText,
   ListSubheader
-} from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-import { Apps as AppsIcon } from '@material-ui/icons'
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps & RouteComponentProps
+type ExtendedProps = ConnectedProps & RouteComponentProps
 
 interface Props extends ExtendedProps {}
 
 const ListProjects = (props: Props) => {
-  const { classes, fetching, proposals, history } = props
+  const { fetching, proposals, history } = props
+
+  const styles = useStyles(useTheme())
 
   useEffect(() => {
     props.getProjects()
@@ -37,9 +40,9 @@ const ListProjects = (props: Props) => {
   if (fetching) return <CircularProgress />
 
   return (
-    <div className={classes.pageContent}>
+    <Box sx={styles.pageContent}>
       <List
-        className={classes.list}
+        sx={styles.list}
         subheader={
           <ListSubheader component="div" id="nested-list-subheader">
             Projetos
@@ -57,8 +60,8 @@ const ListProjects = (props: Props) => {
           </ListItem>
         ))}
       </List>
-    </div>
+    </Box>
   )
 }
 
-export default connected(withStyles(styles)(ListProjects))
+export default connected(ListProjects)

cli/web/cliente/src/views/Projects/pages/ListProjects/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material'
 
 import sharedStyles from '../shared-styles'
 
-// eslint-disable-next-line
-export default (theme: Theme) =>
-  createStyles({
+const styles = (theme: Theme) =>
+  createSxStyles({
     ...sharedStyles(theme),
     list: { width: '100%' },
   })
+
+export default styles

cli/web/cliente/src/views/Projects/pages/router.tsx

@@ -3,10 +3,10 @@ import { Route, RouteComponentProps, Switch } from 'react-router'
 
 import AuthRoute from '@agiliza/components/atoms/AuthRoute'
 import { PATHS } from '@agiliza/views/Main/DrawerItems'
-import { CircularProgress } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, CircularProgress } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
-import styles from './shared-styles'
+import useStyles from './shared-styles'
 
 export const PROJECTS_PATHS = {
   login: PATHS.proposals + '/login',
@@ -15,23 +15,22 @@ export const PROJECTS_PATHS = {
 const ListProjects = lazy(() => import('./ListProjects'))
 const Login = lazy(() => import('@agiliza/views/Login'))
 
-type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+type ExtendedProps = RouteComponentProps
 
 interface Props extends ExtendedProps {}
 
 const ProposalDataRouter = (props: Props) => {
-  const { classes } = props
-
+  const styles = useStyles(useTheme())
   return (
-    <div className={classes.pageContent}>
-      <Suspense fallback={<CircularProgress className={classes.circularProgress} />}>
+    <Box sx={styles.pageContent}>
+      <Suspense fallback={<CircularProgress sx={styles.circularProgress} />}>
         <Switch>
           <Route path={PROJECTS_PATHS.login} render={(renderProps) => <Login {...renderProps} redirectTo={PATHS.proposals} />} />
           <AuthRoute path={PATHS.proposals} redirectTo={PROJECTS_PATHS.login} component={ListProjects} />
         </Switch>
       </Suspense>
-    </div>
+    </Box>
   )
 }
 
-export default withStyles(styles)(ProposalDataRouter)
+export default ProposalDataRouter

cli/web/cliente/src/views/Projects/pages/shared-styles.ts

+import { createSxStyles } from '@agiliza/theme'
 import sharedStyles from '@agiliza/views/shared-styles'
-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { Theme } from '@mui/material'
 
-// eslint-disable-next-line
-export default (theme: Theme) =>
-  createStyles({
+const styles = (theme: Theme) =>
+  createSxStyles({
     ...sharedStyles(theme),
     title: { marginBottom: theme.spacing(2) },
   })
+
+export default styles

cli/web/cliente/src/views/ProposalData/components/atoms/CPFCNPJField/CPFCNPJField.tsx

 import React from 'react'
 
 import { maskCNPJ, maskCPFCNPJ } from '@agiliza/utils/masks'
-import { TextField, TextFieldProps } from '@material-ui/core'
+import { TextField, TextFieldProps } from '@mui/material'
 
 type ExtendedProps = Record<string, unknown> & Pick<TextFieldProps, 'value' | 'onChange' | 'disabled'>
 

cli/web/cliente/src/views/ProposalData/components/templates/Address/Address.tsx

@@ -3,15 +3,11 @@ import React from 'react'
 import { IPAddress } from '@agiliza/api/domain'
 import { maskCEP } from '@agiliza/utils/masks'
 import { extractNumbers } from '@agiliza/utils/method'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { TextField, TextFieldProps } from '@mui/material'
 
 import { AddressState } from './state'
-import styles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: AddressState
   onChange: (address: Partial<IPAddress>) => void
 }
@@ -35,4 +31,4 @@ const Address = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(Address)
+export default Address

cli/web/cliente/src/views/ProposalData/components/templates/Address/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     form: {
       '& .MuiTextField-root': {
         marginBottom: theme.spacing(2),

cli/web/cliente/src/views/ProposalData/components/templates/PriceAmountInput/PriceAmountInput.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { extractNumbers } from '@agiliza/utils/extractors'
 import { formatCurrency } from '@agiliza/utils/formatters'
-import { TextField, TextFieldProps } from '@material-ui/core'
+import { TextField, TextFieldProps } from '@mui/material'
 
 const getTotalPrice = <T extends { price: string; amount: string }>(pva: T) => {
   const { amount, price } = pva

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Address/Address.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { BDAddressState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: BDAddressState
@@ -16,15 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const Address = (props: Props) => {
-  const { classes, context, state, actions } = props
+  const { context, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form state={state} actions={actions} context={context} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(Address))
+export default connected(Address)

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Address/Form/Form.tsx

@@ -5,22 +5,21 @@ import ImageUpload from '@agiliza/components/organisms/ImageUpload'
 import AddressTemplate from '@agiliza/components/templates/Address'
 import { ActionType } from '@agiliza/utils/hooks/state'
 import { getBase64FromFile } from '@agiliza/utils/method'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { BDAddressState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: BDAddressState
   actions: ActionType<BDAddressState>
   context: AuthenticationContext
 }
 
 const Form = (props: Props) => {
-  const { classes, state: _state, actions, context } = props
+  const { state: _state, actions, context } = props
+  const styles = useStyles(useTheme())
 
   const { cep, number, street, city, complement, district, state, referencePoint, proof } = _state
 
@@ -39,7 +38,7 @@ const Form = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <Box sx={styles.form} component="form">
       <ImageUpload label="Comprovante de residência" image={proof} onChangeImage={handleChangeProof} />
       <AddressTemplate
         states={context.states}
@@ -48,8 +47,8 @@ const Form = (props: Props) => {
         onChange={(addrs) => actions.update(addrs)}
       />
       <TextField variant="outlined" label="Ponto de referência" value={referencePoint} onChange={handleChangeText('referencePoint')} />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Address/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     form: {
       '& .MuiTextField-root': {

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Address/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/BusinessData/BusinessData.tsx

 import React from 'react'
 import { RouteComponentProps } from 'react-router'
 
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-
-import styles from './styles'
-
-type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+type ExtendedProps = RouteComponentProps
 
 interface Props extends ExtendedProps {}
 
 const BusinessData = (props: Props) => {
-  const { classes } = props
-
-  return <div className={classes.contentContainer}></div>
+  return <div></div>
 }
 
-export default withStyles(styles)(BusinessData)
+export default BusinessData

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Identification/Form/Form.tsx

@@ -6,22 +6,21 @@ import { ActionType } from '@agiliza/utils/hooks/state'
 import { getBase64FromFile } from '@agiliza/utils/method'
 import CPFCNPJField from '@agiliza/views/ProposalData/components/atoms/CPFCNPJField'
 import { DatePicker, SelectField, SelectFieldProps } from '@curio/components'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { BDIdentificationState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: BDIdentificationState
   actions: ActionType<BDIdentificationState>
   context: ProposalDataContext
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions, context } = props
+  const { state, actions, context } = props
+  const styles = useStyles(useTheme())
 
   const {
     cnpj,
@@ -44,8 +43,8 @@ const Form = (props: Props) => {
       actions.update({ [key]: evt.target.value })
     }
 
-  const handleChangeDate = (type: keyof Pick<BDIdentificationState, 'openingDate'>) => (date: Date | null) => {
-    actions.update({ [type]: date })
+  const handleChangeDate = (type: keyof Pick<BDIdentificationState, 'openingDate'>) => (date: unknown) => {
+    actions.update({ [type]: date as Date })
   }
 
   const handleChangeSelect =
@@ -68,7 +67,7 @@ const Form = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <Box sx={styles.form}>
       <DocumentTemplate document={document} context={context} onChangeImage={handleChangeProof} onChangeDocumentType={handleChangeDocumentType} />
       <CPFCNPJField value={cnpj} onChange={handleChangeText('cnpj')} onlyCPNJ />
       <DatePicker
@@ -76,8 +75,8 @@ const Form = (props: Props) => {
         label="Data da abertura"
         value={openingDate}
         onChange={handleChangeDate('openingDate')}
-        format="dd/MM/yyyy"
-        className={classes.datePicker}
+        // format="dd/MM/yyyy"
+        sx={styles.datePicker}
       />
       <TextField variant="outlined" label="Inscrição estadual" value={stateRegistration} onChange={handleChangeText('stateRegistration')} />
       <TextField variant="outlined" label="Inscrição municipal" value={cityRegistration} onChange={handleChangeText('cityRegistration')} />
@@ -117,8 +116,8 @@ const Form = (props: Props) => {
       />
       <TextField variant="outlined" type="tel" label="Código CNAE" value={codeCNAE} onChange={handleChangeText('codeCNAE')} />
       <TextField variant="outlined" label="Atividade principal" value={mainActivity} onChange={handleChangeText('mainActivity')} />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Identification/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     form: {
       '& .MuiTextField-root': {

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Identification/Identification.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { BDIdentificationState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: BDIdentificationState
@@ -16,15 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const Identification = (props: Props) => {
-  const { classes, context, state, actions } = props
+  const { context, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form state={state} actions={actions} context={context} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(Identification))
+export default connected(Identification)

cli/web/cliente/src/views/ProposalData/pages/BusinessData/Identification/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/Dialog/Dialog.tsx

@@ -10,14 +10,14 @@ import {
   DialogContent,
   DialogProps,
   DialogTitle
-} from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import Form from '../Form'
 import { initialState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = Pick<DialogProps, 'open'> & WithStyles<typeof styles>
+type ExtendedProps = Pick<DialogProps, 'open'>
 
 interface Props extends ExtendedProps {
   onClose: () => void
@@ -27,7 +27,8 @@ interface Props extends ExtendedProps {
 }
 
 const Dialog = (props: Props) => {
-  const { classes, fetching, open, onClose, onSave, productService } = props
+  const { fetching, open, onClose, onSave, productService } = props
+  const styles = useStyles(useTheme())
 
   const formState = useFormState('VehicleForm', initialState)
 
@@ -43,7 +44,7 @@ const Dialog = (props: Props) => {
   }
 
   return (
-    <MUIDialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+    <MUIDialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ sx: styles.dialog }}>
       <DialogTitle>{productService ? 'Editar' : 'Adicionar'} pessoa envolvida</DialogTitle>
       <DialogContent>
         <Form {...formState} />
@@ -58,4 +59,4 @@ const Dialog = (props: Props) => {
   )
 }
 
-export default withStyles(styles)(Dialog)
+export default Dialog

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/Dialog/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     dialog: { width: '80%', height: '55%' },
   })

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/Form/Form.tsx

@@ -5,21 +5,20 @@ import { ActionType } from '@agiliza/utils/hooks/state'
 import PriceAmountInput, {
   Values
 } from '@agiliza/views/ProposalData/components/templates/PriceAmountInput'
-import { TextField, TextFieldProps, Typography } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, TextField, TextFieldProps, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { BDProductServiceState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: BDProductServiceState
   actions: ActionType<BDProductServiceState>
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions } = props
+  const { state, actions } = props
+  const styles = useStyles(useTheme())
 
   const { description, unit, stock, monthlySales, variableCosts } = state
 
@@ -34,17 +33,17 @@ const Form = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <Box component="form" sx={styles.form}>
       <TextField variant="outlined" label="Descrição do produto / serviço" value={description} onChange={handleChangeText('description')} />
       <TextField variant="outlined" label="Unidade" value={extractNumbers(unit)} onChange={handleChangeText('unit')} type="tel" />
-      <Typography className={classes.label}>Informações de estoque</Typography>
+      <Typography sx={styles.label}>Informações de estoque</Typography>
       <PriceAmountInput values={stock} onChange={handleChangePriceAmount('stock')} />
-      <Typography className={classes.label}>Vendas mensais</Typography>
+      <Typography sx={styles.label}>Vendas mensais</Typography>
       <PriceAmountInput values={monthlySales} onChange={handleChangePriceAmount('monthlySales')} />
-      <Typography className={classes.label}>Custos variáveis</Typography>
+      <Typography sx={styles.label}>Custos variáveis</Typography>
       <PriceAmountInput values={variableCosts} onChange={handleChangePriceAmount('variableCosts')} />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     form: {
       '& .MuiTextField-root': {

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/ProductsServices.tsx

@@ -2,16 +2,16 @@ import React, { useState } from 'react'
 
 import { BDProductService } from '@agiliza/api/domain'
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-import { Add as AddIcon, Apps as AppsIcon } from '@material-ui/icons'
+import { Add as AddIcon, Apps as AppsIcon } from '@mui/icons-material'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Dialog from './Dialog'
 import { BDProductServiceState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   projectId: string
@@ -20,7 +20,8 @@ interface Props extends ExtendedProps {
 }
 
 const ProductsServices = (props: Props) => {
-  const { classes, fetching, projectId, productsServices } = props
+  const { fetching, projectId, productsServices } = props
+  const styles = useStyles(useTheme())
 
   const [selectedProductService, setSelectedProductService] = useState<BDProductService | undefined>()
 
@@ -51,9 +52,9 @@ const ProductsServices = (props: Props) => {
 
   return (
     <>
-      <div className={classes.contentContainer}>
-        <div className={classes.content}>
-          <List className={classes.list}>
+      <div style={styles.contentContainer}>
+        <div style={styles.content}>
+          <List sx={styles.list}>
             {productsServices.map((vehicle, i) => (
               <ListItem key={i} button onClick={handleClickListItem(vehicle)}>
                 <ListItemAvatar>
@@ -67,7 +68,7 @@ const ProductsServices = (props: Props) => {
           </List>
         </div>
       </div>
-      <Avatar className={classes.avatarBtnContainer} onClick={handleClickAdd}>
+      <Avatar sx={styles.avatarBtnContainer} onClick={handleClickAdd}>
         <AddIcon />
       </Avatar>
       <Dialog fetching={fetching} open={open} onClose={handleClickClose} productService={selectedProductService} onSave={handleSave} />
@@ -75,4 +76,4 @@ const ProductsServices = (props: Props) => {
   )
 }
 
-export default connected(withStyles(styles)(ProductsServices))
+export default connected(ProductsServices)

cli/web/cliente/src/views/ProposalData/pages/BusinessData/ProductsServices/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     list: { width: '100%' },
     avatarBtnContainer: {

cli/web/cliente/src/views/ProposalData/pages/BusinessData/StockSalesCosts/Form/Form.tsx

@@ -7,15 +7,13 @@ import { ActionType } from '@agiliza/utils/hooks/state'
 import { maskMonthYear } from '@agiliza/utils/masks'
 import { getBase64FromFile } from '@agiliza/utils/method'
 import { SelectField, SelectFieldProps } from '@curio/components'
-import { TextField, TextFieldProps, Typography } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, TextField, TextFieldProps, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { BDStockSalesCostsState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: BDStockSalesCostsState
   actions: ActionType<BDStockSalesCostsState>
   context: ProposalDataContext
@@ -23,7 +21,8 @@ interface Props extends ExtendedProps {
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions, context, productsServices } = props
+  const { state, actions, context, productsServices } = props
+  const styles = useStyles(useTheme())
 
   const { monthYearReference, salesCommission, document, monthRating } = state
 
@@ -63,7 +62,7 @@ const Form = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <Box component="form" sx={styles.form}>
       <DocumentTemplate context={context} document={document} onChangeImage={handleChangeImage} onChangeDocumentType={handleChangeDocumentType} />
       {/* <Typography className={classes.label}>
         Preencha as informações abaixo, e na tela seguinte informe os produtos/serviços e os respectivos dados referente a estoque, vendas mensais e
@@ -87,7 +86,7 @@ const Form = (props: Props) => {
         variant="outlined"
         shrink={false}
       />
-      <Typography className={classes.label}>
+      <Typography sx={styles.label}>
         Após o preenchimento das informações citadas acima, os totais abaixo serão preenchidos automaticamente.
       </Typography>
       <TextField variant="outlined" disabled label="Total geral estoque" value={formatCurrency(getTotals('stock').toFixed(2)) || ''} />
@@ -99,8 +98,8 @@ const Form = (props: Props) => {
         value={formatCurrency(getTotalCommission(salesCommission).toFixed(2)) || ''}
       />
       <TextField variant="outlined" disabled label="Total geral custos var." value={formatCurrency(getTotals('variableCosts').toFixed(2)) || ''} />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/BusinessData/StockSalesCosts/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     form: {
       '& .MuiTextField-root': {

cli/web/cliente/src/views/ProposalData/pages/BusinessData/StockSalesCosts/StockSalesCosts.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { BDStockSalesCostsState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: BDStockSalesCostsState
@@ -16,15 +16,15 @@ interface Props extends ExtendedProps {
 }
 
 const StockSalesCosts = (props: Props) => {
-  const { classes, context, productsServices, state, actions } = props
-
+  const { context, productsServices, state, actions } = props
+  const styles = useStyles(useTheme())
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form state={state} actions={actions} context={context} productsServices={productsServices} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(StockSalesCosts))
+export default connected(StockSalesCosts)

cli/web/cliente/src/views/ProposalData/pages/BusinessData/StockSalesCosts/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/BusinessData/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../shared-styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) =>
-  createStyles({
+  createSxStyles({
     ...sharedStyles(theme),
     cardsContainer: { display: 'flex' },
     gridItem: { display: 'flex', justifyContent: 'center' },

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Address/Address.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { CDAddressState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: CDAddressState
@@ -16,15 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const Address = (props: Props) => {
-  const { classes, context, state, actions } = props
+  const { context, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form states={context.states} cities={context.cities} state={state} actions={actions} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(Address))
+export default connected(Address)

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Address/Form/Form.tsx

@@ -5,14 +5,13 @@ import ImageUpload from '@agiliza/components/organisms/ImageUpload'
 import Address, { AddressState } from '@agiliza/components/templates/Address'
 import { ActionType } from '@agiliza/utils/hooks/state'
 import { getBase64FromFile } from '@agiliza/utils/method'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { CDAddressState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   states: State[]
   cities: City[]
   state: CDAddressState
@@ -20,7 +19,8 @@ interface Props extends ExtendedProps {
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions, states, cities } = props
+  const { state, actions, states, cities } = props
+  const styles = useStyles(useTheme())
 
   const { proof } = state
 
@@ -37,11 +37,11 @@ const Form = (props: Props) => {
   }
 
   return (
-    <form className={classes.form}>
+    <Box component="form" sx={styles.form}>
       <ImageUpload label="Comprovante de residência" image={proof} onChangeImage={handleChangeProof} />
       <Address state={state} onChange={handleChangeAddress} states={states} cities={cities} />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Address/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
     datePicker: { marginBottom: '0px !important' },

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Address/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/CustomerData/CustomerData.tsx

 import React from 'react'
 
-import { withStyles, WithStyles } from '@material-ui/core/styles'
-
-import styles from './styles'
-
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   activeStep: number
 }
 
 const CustomerData = (props: Props) => {
-  const { classes } = props
-  return <div className={classes.stepContentContainer}>{}</div>
+  return <div />
 }
 
-export default withStyles(styles)(CustomerData)
+export default CustomerData

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Home/Form/Form.tsx

@@ -7,21 +7,20 @@ import { ActionType } from '@agiliza/utils/hooks/state'
 import { extractNumbers, getBase64FromFile } from '@agiliza/utils/method'
 import { SelectField, SelectFieldProps, Switch } from '@curio/components'
 import {
+  Box,
   Checkbox,
   CheckboxProps,
   FormControlLabel,
   FormGroup,
   TextField,
   TextFieldProps
-} from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { CDHomeState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   addressContext: AuthenticationContext
   state: CDHomeState
   actions: ActionType<CDHomeState>
@@ -29,7 +28,9 @@ interface Props extends ExtendedProps {
 }
 
 const Form = (props: Props) => {
-  const { classes, addressContext, context, state, actions } = props
+  const { addressContext, context, state, actions } = props
+  const styles = useStyles(useTheme())
+
   const { states, cities } = addressContext
   const { resideTime, cityResideTime, address, hasProperty, deed, type, deedRecord, reside, hasOnus } = state
 
@@ -60,7 +61,7 @@ const Form = (props: Props) => {
     }
 
   return (
-    <form className={classes.form}>
+    <Box component="form" sx={styles.form}>
       <Switch label="Possui imóveis?" value={hasProperty} onChange={(vl) => actions.update({ hasProperty: vl })} required />
       {hasProperty ? (
         <>
@@ -83,7 +84,7 @@ const Form = (props: Props) => {
             variant="outlined"
             shrink={false}
           />
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row sx={styles.formGroup}>
             <FormControlLabel
               control={<Checkbox name="reside" checked={reside} onChange={handleChangeCheckbox('reside')} />}
               label="Reside no imóvel?"
@@ -110,8 +111,8 @@ const Form = (props: Props) => {
           <AddressTemplate states={states} cities={cities} state={address} onChange={(addrs) => actions.update({ address: addrs as IPAddress })} />
         </>
       ) : null}
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Home/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
     formGroup: {

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Home/Home.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { CDHomeState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: CDHomeState
@@ -16,15 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const Home = (props: Props) => {
-  const { classes, context, addressContext, state, actions } = props
+  const { context, addressContext, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form state={state} actions={actions} addressContext={addressContext} context={context} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(Home))
+export default connected(Home)

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Home/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Identification/Form/Form.tsx

@@ -5,22 +5,21 @@ import AccountInputsPhoto from '@agiliza/components/templates/AccountInputsPhoto
 import { ActionType } from '@agiliza/utils/hooks/state'
 import CPFCNPJField from '@agiliza/views/ProposalData/components/atoms/CPFCNPJField'
 import { SelectField, SelectFieldProps } from '@curio/components'
-import { FormControlLabel, Switch, TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, FormControlLabel, Switch, TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { CDIdentificationState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: CDIdentificationState
   actions: ActionType<CDIdentificationState>
   context: ProposalDataContext
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions, context } = props
+  const { state, actions, context } = props
+  const styles = useStyles(useTheme())
 
   const { cpfcnpj, dataType, name, gender, hasAccount, account } = state
 
@@ -54,7 +53,7 @@ const Form = (props: Props) => {
   const handleChangeValidState = (vldStt: boolean) => {}
 
   return (
-    <form className={classes.form}>
+    <Box component="form" sx={styles.form}>
       <SelectField
         id="framework-select-field"
         label="Enquadramento"
@@ -75,7 +74,7 @@ const Form = (props: Props) => {
         variant="outlined"
         shrink={false}
       />
-      <div className={classes.switchCardPhotoContainer}>
+      <div style={styles.switchCardPhotoContainer}>
         <FormControlLabel
           label="Possui conta na entidade?"
           control={
@@ -96,8 +95,8 @@ const Form = (props: Props) => {
           />
         ) : null}
       </div>
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Identification/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
     switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
   })

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Identification/Identification.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { CDIdentificationState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: CDIdentificationState
@@ -16,16 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const Identification = (props: Props) => {
-  const { classes, context, state, actions } = props
-
+  const { context, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form context={context} state={state} actions={actions} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(Identification))
+export default connected(Identification)

cli/web/cliente/src/views/ProposalData/pages/CustomerData/Identification/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
   })
 }

cli/web/cliente/src/views/ProposalData/pages/CustomerData/PersonalData/Form/Form.tsx

@@ -6,22 +6,21 @@ import RGTemplate from '@agiliza/components/templates/RGTemplate'
 import { ActionType } from '@agiliza/utils/hooks/state'
 import { maskLandline } from '@agiliza/utils/masks'
 import { DatePicker, SelectField, SelectFieldProps, Switch } from '@curio/components'
-import { TextField, TextFieldProps } from '@material-ui/core'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Box, TextField, TextFieldProps } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 
 import { CDPersonalDataState } from '../state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles>
-
-interface Props extends ExtendedProps {
+interface Props {
   state: CDPersonalDataState
   actions: ActionType<CDPersonalDataState>
   context: ProposalDataContext
 }
 
 const Form = (props: Props) => {
-  const { classes, state, actions, context } = props
+  const { state, actions, context } = props
+  const styles = useStyles(useTheme())
 
   const {
     birthday,
@@ -39,8 +38,8 @@ const Form = (props: Props) => {
     landline,
   } = state
 
-  const handleChangeDate = (type: keyof Pick<CDPersonalDataState, 'birthday'>) => (date: Date | null) => {
-    actions.update({ [type]: date })
+  const handleChangeDate = (type: keyof Pick<CDPersonalDataState, 'birthday'>) => (date: unknown) => {
+    actions.update({ [type]: date as Date })
   }
 
   const handleChangeText =
@@ -60,15 +59,8 @@ const Form = (props: Props) => {
     }
 
   return (
-    <form className={classes.form}>
-      <DatePicker
-        id="birthday"
-        label="Data de nascimento"
-        value={birthday}
-        onChange={handleChangeDate('birthday')}
-        format="dd/MM/yyyy"
-        className={classes.datePicker}
-      />
+    <Box component="form" sx={styles.form}>
+      <DatePicker id="birthday" label="Data de nascimento" value={birthday} onChange={handleChangeDate('birthday')} sx={styles.datePicker} />
       <RGTemplate rg={rg} onChange={handleChangeRG} />
       <Switch label="Usuário CRAS?" required value={userCRAS} onChange={(value) => actions.update({ userCRAS: value })} />
       <TextField variant="outlined" label="Nome da mãe" value={mothersName} onChange={handleChangeText('mothersName')} />
@@ -103,8 +95,8 @@ const Form = (props: Props) => {
         onChange={handleChangeText('landline')}
         inputProps={{ maxLength: 14 }}
       />
-    </form>
+    </Box>
   )
 }
 
-export default withStyles(styles)(Form)
+export default Form

cli/web/cliente/src/views/ProposalData/pages/CustomerData/PersonalData/Form/styles.ts

-import { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/styles'
+import { createSxStyles } from '@agiliza/theme'
+import { Theme } from '@mui/material/styles'
 
 import sharedStyles from '../styles'
 
 // eslint-disable-next-line
 export default (theme: Theme) => {
-  return createStyles({
+  return createSxStyles({
     ...sharedStyles(theme),
 
     switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },

cli/web/cliente/src/views/ProposalData/pages/CustomerData/PersonalData/PersonalData.tsx

 import React from 'react'
 
 import { ActionType } from '@agiliza/utils/hooks/state'
-import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { useTheme } from '@mui/material/styles'
 
 import { connected, ConnectedProps } from './connect'
 import Form from './Form'
 import { CDPersonalDataState } from './state'
-import styles from './styles'
+import useStyles from './styles'
 
-type ExtendedProps = WithStyles<typeof styles> & ConnectedProps
+type ExtendedProps = ConnectedProps
 
 interface Props extends ExtendedProps {
   state: CDPersonalDataState
@@ -16,15 +16,16 @@ interface Props extends ExtendedProps {
 }
 
 const PersonalData = (props: Props) => {
-  const { classes, context, state, actions } = props
+  const { context, state, actions } = props
+  const styles = useStyles(useTheme())
 
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.content}>
+    <div style={styles.contentContainer}>
+      <div style={styles.content}>
         <Form context={context} state={state} actions={actions} />
       </div>
     </div>
   )
 }
 
-export default connected(withStyles(styles)(PersonalData))
+export default connected(PersonalData)