diff --git a/src/components/custom-tree-item.tsx b/src/components/custom-tree-item.tsx
index 0b7b87508..ba129847c 100644
--- a/src/components/custom-tree-item.tsx
+++ b/src/components/custom-tree-item.tsx
@@ -7,29 +7,20 @@
 
 import { forwardRef, MouseEvent, MouseEventHandler, useCallback, useEffect } from 'react';
 import { UUID } from 'crypto';
-import {
-    Box,
-    BoxProps,
-    IconButton,
-    PopoverReference,
-    SxProps,
-    Theme,
-    Typography,
-    TypographyProps,
-} from '@mui/material';
+import { Box, BoxProps, IconButton, PopoverReference, Typography, TypographyProps } from '@mui/material';
 import { Add as AddIcon, AddBoxOutlined as AddBoxOutlinedIcon } from '@mui/icons-material';
 import { TreeItem, TreeItemContentProps, TreeItemProps, useTreeItemState } from '@mui/x-tree-view';
-import { mergeSx, useStateBoolean } from '@gridsuite/commons-ui';
+import { mergeSx, type SxStyle, useStateBoolean } from '@gridsuite/commons-ui';
 import { useSelector } from 'react-redux';
 import { AppState } from '../redux/types';
 
 export interface TreeItemCustomContentProps {
     styles?: {
-        root?: SxProps<Theme>;
-        selected?: SxProps<Theme>;
-        hovered?: SxProps<Theme>;
-        label?: SxProps<Theme>;
-        iconContainer?: SxProps<Theme>;
+        root?: SxStyle;
+        selected?: SxStyle;
+        hovered?: SxStyle;
+        label?: SxStyle;
+        iconContainer?: SxStyle;
     };
     onExpand: (itemId: UUID) => void;
     onSelect: (itemId: UUID) => void;
diff --git a/src/components/dialogs/delete-dialog.tsx b/src/components/dialogs/delete-dialog.tsx
index 06b2955e2..ace11b623 100644
--- a/src/components/dialogs/delete-dialog.tsx
+++ b/src/components/dialogs/delete-dialog.tsx
@@ -14,9 +14,9 @@ import {
     DialogTitle,
     Grid,
 } from '@mui/material';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { CancelButton, ElementAttributes, OverflowableText } from '@gridsuite/commons-ui';
+import { FormattedMessage } from 'react-intl';
+import { type CSSProperties, type SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { CancelButton, type ElementAttributes, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 
 export interface DeleteDialogProps {
     open: boolean;
@@ -32,7 +32,7 @@ const styles = {
     tooltip: {
         maxWidth: '1000px',
     },
-};
+} as const satisfies MuiStyles;
 
 /**
  * Dialog to delete an element
@@ -53,8 +53,6 @@ export default function DeleteDialog({
     simpleDeleteFormatMessageId,
     error,
 }: Readonly<DeleteDialogProps>) {
-    const intl = useIntl();
-
     const [itemsState, setItemsState] = useState<ElementAttributes[]>([]);
 
     const [loadingState, setLoadingState] = useState(false);
@@ -82,20 +80,20 @@ export default function DeleteDialog({
         onClick();
     };
 
-    const buildTitle = () => intl.formatMessage({ id: 'deleteDialogTitle' });
-
     const renderElement = (renderItems: ElementAttributes[]) => {
         const isBig = renderItems[0].elementName?.length > 72;
 
-        const style = isBig
-            ? { width: '100%', fontWeight: 'bold' }
-            : {
-                  fontWeight: 'bold',
-                  marginLeft: 'initial',
-                  marginRight: 'initial',
-                  verticalAlign: 'middle',
-                  display: 'inline-block',
-              };
+        const style = (
+            isBig
+                ? ({ width: '100%', fontWeight: 'bold' } as const)
+                : ({
+                      fontWeight: 'bold',
+                      marginLeft: 'initial',
+                      marginRight: 'initial',
+                      verticalAlign: 'middle',
+                      display: 'inline-block',
+                  } as const)
+        ) satisfies CSSProperties;
         return <OverflowableText text={renderItems[0].elementName} style={style} tooltipSx={styles.tooltip} />;
     };
 
@@ -108,26 +106,17 @@ export default function DeleteDialog({
         (gridItems.length > 1 ? (
             <Grid>
                 <Grid item>
-                    <span>
-                        {intl.formatMessage({
-                            id: gridMultipleDeleteFormatMessageId,
-                        })}
-                    </span>
+                    <FormattedMessage tagName="span" id={gridMultipleDeleteFormatMessageId} />
                 </Grid>
             </Grid>
         ) : (
             <Grid>
                 <Grid item>
-                    <span>
-                        {intl.formatMessage(
-                            {
-                                id: gridSimpleDeleteFormatMessageId,
-                            },
-                            {
-                                itemName: <span>{gridItems.length === 1 && renderElement(gridItems)}</span>,
-                            }
-                        )}
-                    </span>
+                    <FormattedMessage
+                        tagName="span"
+                        id={gridSimpleDeleteFormatMessageId}
+                        values={{ itemName: <span>{gridItems.length === 1 && renderElement(gridItems)}</span> }}
+                    />
                 </Grid>
             </Grid>
         ));
@@ -135,7 +124,7 @@ export default function DeleteDialog({
     return (
         <Dialog open={open} onClose={handleClose} aria-labelledby="dialog-title-delete">
             <DialogTitle style={{ display: 'flex' }} data-testid="DialogTitle">
-                {buildTitle()}
+                <FormattedMessage id="deleteDialogTitle" />
             </DialogTitle>
             <DialogContent>
                 {buildItemsToDeleteGrid(itemsState, multipleDeleteFormatMessageId, simpleDeleteFormatMessageId)}
diff --git a/src/components/dialogs/field-hook.tsx b/src/components/dialogs/field-hook.tsx
index 3ac029f2c..d5739f784 100644
--- a/src/components/dialogs/field-hook.tsx
+++ b/src/components/dialogs/field-hook.tsx
@@ -9,7 +9,7 @@ import { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } fro
 import { FormattedMessage, useIntl } from 'react-intl';
 import { CircularProgress, InputAdornment, TextField, TextFieldProps } from '@mui/material';
 import { Check as CheckIcon } from '@mui/icons-material';
-import { ElementType, useDebounce } from '@gridsuite/commons-ui';
+import { ElementType, type MuiStyles, useDebounce } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 import { elementExists, rootDirectoryExists } from '../../utils/rest-api';
 
@@ -18,7 +18,7 @@ const styles = {
         margin: 0,
         marginTop: 4,
     },
-};
+} as const satisfies MuiStyles;
 
 export interface UseTextValueProps extends Omit<TextFieldProps, 'label' | 'defaultValue'> {
     label: string;
diff --git a/src/components/directory-breadcrumbs.tsx b/src/components/directory-breadcrumbs.tsx
index db8ebedd0..036ce7758 100644
--- a/src/components/directory-breadcrumbs.tsx
+++ b/src/components/directory-breadcrumbs.tsx
@@ -6,38 +6,38 @@
  */
 
 import { useDispatch, useSelector } from 'react-redux';
-import { Box, Breadcrumbs, emphasize, Link, SxProps, Theme, Tooltip, Typography } from '@mui/material';
+import { Box, Breadcrumbs, emphasize, Link, Tooltip, Typography } from '@mui/material';
 import { FolderOpen as FolderOpenIcon } from '@mui/icons-material';
-import { ElementAttributes, mergeSx } from '@gridsuite/commons-ui';
+import { type ElementAttributes, mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 import { MouseEvent } from 'react';
 import { setSelectedDirectory } from '../redux/actions';
 import { AppState } from '../redux/types';
 
 const styles = {
-    link: (theme: Theme) => ({
+    link: (theme) => ({
         display: 'inline-grid',
         alignItems: 'center',
         textAlign: 'center',
         color: theme.link.color,
 
-        backgroundColor: theme.row.primary,
+        backgroundColor: theme.row.primary as string,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 
         '&:hover, &:focus': {
-            backgroundColor: theme.row.hover,
+            backgroundColor: theme.row.hover as string,
             textDecoration: 'none',
         },
         '&:active': {
             backgroundColor: emphasize(theme.row.hover as string, 0.15),
         },
     }),
-    directory: (theme: Theme) => ({
+    directory: (theme) => ({
         display: 'inline-grid',
         alignItems: 'center',
         textAlign: 'center',
 
-        backgroundColor: theme.row.hover,
+        backgroundColor: theme.row.hover as string,
         padding: theme.spacing(0.5, 2, 0.5),
         borderRadius: theme.spacing(2),
 
@@ -46,14 +46,14 @@ const styles = {
     selectedLabel: {
         fontWeight: 'bold',
     },
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         width: theme.spacing(2.25),
         height: theme.spacing(2.25),
         position: 'relative',
         top: theme.spacing(0.5),
     }),
-    breadcrumbs: (theme: Theme) => ({
+    breadcrumbs: (theme) => ({
         padding: theme.spacing(0.5, 0, 0.5),
         marginLeft: theme.spacing(1),
     }),
@@ -62,7 +62,7 @@ const styles = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
     },
-};
+} as const satisfies MuiStyles;
 
 export default function DirectoryBreadcrumbs() {
     const dispatch = useDispatch();
@@ -81,7 +81,7 @@ export default function DirectoryBreadcrumbs() {
         if (selectedDirectory !== null && currentPath !== null && currentPath.length > 1) {
             return currentPath.slice(0, currentPath.length - 1).map((dir, index) => (
                 <Link
-                    sx={styles.link as SxProps}
+                    sx={styles.link}
                     key={dir.elementUuid}
                     href="/"
                     onClick={(event: MouseEvent<HTMLElement>) => handleSelect(event, dir)}
@@ -106,7 +106,7 @@ export default function DirectoryBreadcrumbs() {
         if (selectedDirectory !== null && currentPath !== null && currentPath.length > 0) {
             return (
                 <Tooltip title={currentPath[currentPath.length - 1].elementName}>
-                    <Box sx={styles.directory as SxProps}>
+                    <Box sx={styles.directory}>
                         <Typography sx={mergeSx(styles.selectedLabel, styles.limitTextSize)} color="textPrimary">
                             {currentPath.length === 1 && <FolderOpenIcon sx={styles.icon} />}
                             {currentPath[currentPath.length - 1].elementName}
diff --git a/src/components/directory-content-table.tsx b/src/components/directory-content-table.tsx
index fc62fca47..edf9c2171 100644
--- a/src/components/directory-content-table.tsx
+++ b/src/components/directory-content-table.tsx
@@ -7,13 +7,14 @@
 
 import { CustomAGGrid, ElementAttributes, ElementType } from '@gridsuite/commons-ui';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import {
+import type {
     AgGridEvent,
     CellClickedEvent,
     CellContextMenuEvent,
     ColDef,
     GetRowIdParams,
     RowClassParams,
+    RowStyle,
 } from 'ag-grid-community';
 import { RefObject, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -40,7 +41,7 @@ const recomputeOverFlowableCells = ({ api }: AgGridEvent) =>
 export const CUSTOM_ROW_CLASS = 'custom-row-class';
 
 const getClickableRowStyle = (cellData: RowClassParams<ElementAttributes>) => {
-    const style: Record<string, string> = { fontSize: '1rem' };
+    const style: RowStyle = { fontSize: '1rem' };
     if (
         cellData.data &&
         ![
diff --git a/src/components/directory-content.tsx b/src/components/directory-content.tsx
index 8654af977..e9f3f88fd 100644
--- a/src/components/directory-content.tsx
+++ b/src/components/directory-content.tsx
@@ -8,16 +8,13 @@
 import { type MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { Box, type BoxProps, Button, type ButtonProps, CircularProgress } from '@mui/material';
 import {
-    Box,
-    type BoxProps,
-    Button,
-    type ButtonProps,
-    CircularProgress,
-    type SxProps,
-    type Theme,
-} from '@mui/material';
-import { type ElementAttributes, type ItemSelectionForCopy, NO_ITEM_SELECTION_FOR_COPY } from '@gridsuite/commons-ui';
+    type ElementAttributes,
+    type ItemSelectionForCopy,
+    type MuiStyles,
+    NO_ITEM_SELECTION_FOR_COPY,
+} from '@gridsuite/commons-ui';
 import { Add as AddIcon } from '@mui/icons-material';
 import { AgGridReact } from 'ag-grid-react';
 import * as constants from '../utils/UIconstants';
@@ -43,7 +40,7 @@ import { AnchorStatesType, defaultAnchorStates } from './menus/anchor-utils';
 const circularProgressSize = '70px';
 
 const styles = {
-    link: (theme: Theme) => ({
+    link: (theme) => ({
         color: theme.link.color,
         textDecoration: 'none',
     }),
@@ -59,17 +56,17 @@ const styles = {
     centeredCircularProgress: {
         alignSelf: 'center',
     },
-    highlightedElementAnimation: (theme: Theme) => ({
+    highlightedElementAnimation: (theme) => ({
         '@keyframes highlighted-element': {
             'from, 24%': {
                 backgroundColor: 'inherit',
             },
             '12%, 36%, to': {
-                backgroundColor: theme.row.hover,
+                backgroundColor: theme.row.hover as string,
             },
         },
     }),
-    button: (theme: Theme) => ({
+    button: (theme) => ({
         marginRight: theme.spacing(9),
         borderRadius: '20px',
     }),
@@ -79,12 +76,12 @@ const styles = {
         justifyContent: 'space-between',
         alignItems: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 export default function DirectoryContent() {
     const treeData = useSelector((state: AppState) => state.treeData);
     const dispatch = useDispatch();
-    const gridRef = useRef<AgGridReact | null>(null);
+    const gridRef = useRef<AgGridReact<ElementAttributes> | null>(null);
     const [onGridReady, getRowStyle] = useHighlightSearchedElement(gridRef?.current?.api ?? null);
 
     const [broadcastChannel] = useState(() => {
@@ -285,7 +282,7 @@ export default function DirectoryContent() {
                 flexGrow={1}
                 minHeight={0}
                 overflow="auto"
-                sx={styles.highlightedElementAnimation as SxProps}
+                sx={styles.highlightedElementAnimation}
                 onContextMenu={onContextMenu}
                 data-testid="DirectoryContent"
             >
diff --git a/src/components/directory-tree-view.tsx b/src/components/directory-tree-view.tsx
index 0b31e10b9..3c175afcd 100644
--- a/src/components/directory-tree-view.tsx
+++ b/src/components/directory-tree-view.tsx
@@ -7,10 +7,10 @@
 
 import { MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronRight as ChevronRightIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { Box, PopoverReference, SxProps, Theme, Tooltip, Typography, Zoom } from '@mui/material';
+import { Box, type PopoverReference, Tooltip, Typography, Zoom } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import { SimpleTreeView } from '@mui/x-tree-view';
-import { ElementAttributes } from '@gridsuite/commons-ui';
+import { type ElementAttributes, type MuiStyles } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
 // eslint-disable-next-line import/no-extraneous-dependencies -- lib from MUI
 import CustomTreeItem from './custom-tree-item';
@@ -71,7 +71,7 @@ const styles = {
         width: '18px',
         height: '18px',
     }),
-} satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 function CustomEndIcon() {
     return <ChevronRightIcon sx={styles.icon} />;
diff --git a/src/components/empty-directory.tsx b/src/components/empty-directory.tsx
index b2fba374c..631d27785 100644
--- a/src/components/empty-directory.tsx
+++ b/src/components/empty-directory.tsx
@@ -9,7 +9,7 @@ import { type MouseEvent } from 'react';
 import { Box, Button, SvgIcon } from '@mui/material';
 import { Add as AddIcon } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
-import { LIGHT_THEME, PARAM_THEME } from '@gridsuite/commons-ui';
+import { LIGHT_THEME, type MuiStyles, PARAM_THEME } from '@gridsuite/commons-ui';
 import { useSelector } from 'react-redux';
 import { AppState } from '../redux/types';
 import CircleIcon from './icons/circleIcon';
@@ -17,28 +17,28 @@ import CircleIcon from './icons/circleIcon';
 const CIRCLE_SIZE = 250;
 
 const styles = {
-    container: (theme: any) => ({
+    container: (theme) => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         marginTop: theme.spacing(20), // TODO: replace by margin auto or flex to center in parent
     }),
-    button: (theme: any) => ({
+    button: (theme) => ({
         marginTop: theme.spacing(2),
         borderRadius: '30px',
     }),
     iconSize: {
         fontSize: CIRCLE_SIZE / 2,
     },
-    circle: (theme: any) => ({
+    circle: (theme) => ({
         backgroundColor: theme.palette.action.disabled,
     }),
-    text: (theme: any) => ({
+    text: (theme) => ({
         color: theme.palette.text.disabled,
         textAlign: 'center',
         marginTop: theme.spacing(1),
     }),
-};
+} as const satisfies MuiStyles;
 
 export type EmptyDirectoryProps = {
     onCreateElementButtonClick: (e: MouseEvent<HTMLElement>) => void;
diff --git a/src/components/menus/common-contextual-menu.tsx b/src/components/menus/common-contextual-menu.tsx
index 1b8fac331..1b52d38d2 100644
--- a/src/components/menus/common-contextual-menu.tsx
+++ b/src/components/menus/common-contextual-menu.tsx
@@ -9,7 +9,7 @@ import { ReactNode, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Edit as EditIcon } from '@mui/icons-material';
 import { Divider, ListItemIcon, ListItemText, Menu, MenuProps, styled } from '@mui/material';
-import { CustomMenuItem, CustomNestedMenuItem } from '@gridsuite/commons-ui';
+import { CustomMenuItem, CustomNestedMenuItem, type MuiStyles } from '@gridsuite/commons-ui';
 
 const StyledMenu = styled((props: MenuProps) => <Menu elevation={0} {...props} />)({
     '.MuiMenu-paper': {
@@ -27,7 +27,7 @@ const styles = {
         },
         paddingLeft: 2, // customize padding for the whole menu item
     },
-};
+} as const satisfies MuiStyles;
 
 export type MenuItemType =
     | {
diff --git a/src/components/no-content-directory.tsx b/src/components/no-content-directory.tsx
index 728fdf7c5..d6c5c295d 100644
--- a/src/components/no-content-directory.tsx
+++ b/src/components/no-content-directory.tsx
@@ -7,45 +7,42 @@
 
 import { Box, Button } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 import { CreateNewFolderOutlined as CreateNewFolderOutlinedIcon } from '@mui/icons-material';
 import CircleIcon from './icons/circleIcon';
 
 const CIRCLE_SIZE = 200;
-
-const stylesIcon = {
-    circle: (theme: any) => ({
+const styles = {
+    noContentContainer: (theme) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginTop: theme.spacing(20),
+    }),
+    noContentText: (theme) => ({
+        color: theme.palette.text.disabled,
+        textAlign: 'center',
+        marginTop: theme.spacing(1),
+    }),
+    noContentButton: {
+        borderRadius: '30px',
+    },
+    iconSize: {
+        fontSize: CIRCLE_SIZE / 2,
+    },
+    circleIcon: (theme) => ({
         backgroundColor: theme.palette.action.disabled,
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface NoContentDirectoryProps {
     handleOpenDialog: () => void;
 }
 
 export default function NoContentDirectory({ handleOpenDialog }: Readonly<NoContentDirectoryProps>) {
-    const styles = {
-        noContentContainer: (theme: any) => ({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            marginTop: theme.spacing(20),
-        }),
-        noContentText: (theme: any) => ({
-            color: theme.palette.text.disabled,
-            textAlign: 'center',
-            marginTop: theme.spacing(1),
-        }),
-        noContentButton: {
-            borderRadius: '30px',
-        },
-        iconSize: {
-            fontSize: CIRCLE_SIZE / 2,
-        },
-    };
-
     return (
         <Box sx={styles.noContentContainer}>
-            <CircleIcon size={CIRCLE_SIZE} iconStyles={stylesIcon.circle}>
+            <CircleIcon size={CIRCLE_SIZE} iconStyles={styles.circleIcon}>
                 <CreateNewFolderOutlinedIcon sx={styles.iconSize} />
             </CircleIcon>
             <Box sx={styles.noContentText}>
diff --git a/src/components/search/search-bar-displayed-element-warning.tsx b/src/components/search/search-bar-displayed-element-warning.tsx
index 03ae7acb6..d65d4891d 100644
--- a/src/components/search/search-bar-displayed-element-warning.tsx
+++ b/src/components/search/search-bar-displayed-element-warning.tsx
@@ -5,9 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Paper, Theme, Typography } from '@mui/material';
+import { Paper, Typography } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { HTMLAttributes } from 'react';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 export type SearchBarPaperDisplayedElementWarningProps = HTMLAttributes<HTMLElement> & {
     elementFoundLength: number;
@@ -16,13 +17,13 @@ export type SearchBarPaperDisplayedElementWarningProps = HTMLAttributes<HTMLElem
 };
 
 const styles = {
-    displayedElementWarning: (theme: Theme) => ({
+    displayedElementWarning: (theme) => ({
         color: theme.palette.info.main,
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(1),
         marginLeft: theme.spacing(2),
     }),
-};
+} as const satisfies MuiStyles;
 
 export function SearchBarPaperDisplayedElementWarning(props: Readonly<SearchBarPaperDisplayedElementWarningProps>) {
     const { elementFoundLength, elementFoundTotal, isLoading, children, ...other } = props;
diff --git a/src/components/search/search-item.tsx b/src/components/search/search-item.tsx
index af9c34484..df07768b9 100644
--- a/src/components/search/search-item.tsx
+++ b/src/components/search/search-item.tsx
@@ -6,14 +6,14 @@
  */
 
 import { useMemo } from 'react';
-import { getFileIcon } from '@gridsuite/commons-ui';
-import { Grid, Theme, Typography } from '@mui/material';
+import { getFileIcon, type MuiStyles } from '@gridsuite/commons-ui';
+import { Grid, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { ElementAttributesES } from '../../redux/types';
 import cyrb53 from '../../utils/cyrb53';
 
 const styles = {
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(2),
         width: '18px',
         height: '18px',
@@ -23,14 +23,14 @@ const styles = {
         textOverflow: 'ellipsis',
         display: 'inline-block',
     },
-    grid2: (theme: Theme) => ({
+    grid2: (theme) => ({
         marginRight: theme.spacing(2),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         display: 'inline-block',
         color: 'grey',
     }),
-};
+} as const satisfies MuiStyles;
 
 export interface HighlightedTextProps {
     text: string;
diff --git a/src/components/search/use-highlight-searched-element.tsx b/src/components/search/use-highlight-searched-element.tsx
index f6b5408d4..95ca9e324 100644
--- a/src/components/search/use-highlight-searched-element.tsx
+++ b/src/components/search/use-highlight-searched-element.tsx
@@ -6,7 +6,7 @@
  */
 
 import { ElementAttributes } from '@gridsuite/commons-ui';
-import { GridApi, GridReadyEvent, RowClassParams, RowStyle } from 'ag-grid-community';
+import { GridApi, GridOptions, RowStyle } from 'ag-grid-community';
 import { useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSearchedElement } from '../../redux/actions';
@@ -15,7 +15,7 @@ import { AppState } from '../../redux/types';
 
 const SEARCH_HIGHLIGHT_DURATION_S = 4;
 
-export const useHighlightSearchedElement = (gridApi: GridApi | null) => {
+export function useHighlightSearchedElement(gridApi: GridApi<ElementAttributes> | null) {
     const searchedElement = useSelector((state: AppState) => state.searchedElement);
     const dispatch = useDispatch<AppDispatch>();
     const timeout = useRef<ReturnType<typeof setTimeout>>();
@@ -38,8 +38,8 @@ export const useHighlightSearchedElement = (gridApi: GridApi | null) => {
         [searchedElement, dispatch]
     );
 
-    const onGridReady = useCallback(
-        ({ api }: GridReadyEvent<ElementAttributes>) => {
+    const onGridReady = useCallback<NonNullable<GridOptions<ElementAttributes>['onGridReady']>>(
+        ({ api }) => {
             highlightElement(api);
         },
         [highlightElement]
@@ -51,8 +51,8 @@ export const useHighlightSearchedElement = (gridApi: GridApi | null) => {
         }
     }, [highlightElement, gridApi]);
 
-    const getRowStyle = useCallback(
-        (cellData: RowClassParams<ElementAttributes, unknown>) => {
+    const getRowStyle = useCallback<NonNullable<GridOptions<ElementAttributes>['getRowStyle']>>(
+        (cellData) => {
             const style: RowStyle = { fontSize: '1rem' };
             if (cellData?.data?.elementUuid === searchedElement?.id) {
                 // keyframe "highlighted-element" has to be defined in css containing highlighted element
@@ -64,4 +64,4 @@ export const useHighlightSearchedElement = (gridApi: GridApi | null) => {
     );
 
     return [onGridReady, getRowStyle] as const;
-};
+}
diff --git a/src/components/toolbars/common-toolbar.tsx b/src/components/toolbars/common-toolbar.tsx
index 8e405146b..72ef8b9e7 100644
--- a/src/components/toolbars/common-toolbar.tsx
+++ b/src/components/toolbars/common-toolbar.tsx
@@ -8,15 +8,16 @@
 import { ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Edit as EditIcon } from '@mui/icons-material';
-import { IconButton, Theme, Toolbar, Tooltip } from '@mui/material';
+import { IconButton, Toolbar, Tooltip } from '@mui/material';
+import { type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         width: '18px',
         height: '18px',
     }),
-};
+} as const satisfies MuiStyles;
 
 export type ToolbarItem = {
     tooltipTextId: string;
diff --git a/src/components/tree-views-container.tsx b/src/components/tree-views-container.tsx
index a203ea3bc..33d69e949 100644
--- a/src/components/tree-views-container.tsx
+++ b/src/components/tree-views-container.tsx
@@ -8,16 +8,17 @@
 import { MouseEvent as ReactMouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-    ElementAttributes,
+    type ElementAttributes,
     ElementType,
     fetchDirectoryContent,
     fetchRootFolders,
+    type MuiStyles,
     NotificationsUrlKeys,
     useNotificationsListener,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import { UUID } from 'crypto';
-import { Box, BoxProps, PopoverOrigin, PopoverPosition, PopoverReference, SxProps, Theme } from '@mui/material';
+import { Box, type BoxProps, type PopoverOrigin, type PopoverPosition, type PopoverReference } from '@mui/material';
 import {
     directoryUpdated,
     setActiveDirectory,
@@ -52,7 +53,7 @@ const styles = {
         width: '100%',
         flexGrow: 1,
     },
-} as const satisfies Record<string, SxProps<Theme>>;
+} as const satisfies MuiStyles;
 
 function flattenDownNodes(n: IDirectory, cef: (arg: IDirectory) => any[]): IDirectory[] {
     const subs = cef(n);
diff --git a/src/components/utils/renderers/description-cell-renderer.tsx b/src/components/utils/renderers/description-cell-renderer.tsx
index 02a1107b9..a6bcdec45 100644
--- a/src/components/utils/renderers/description-cell-renderer.tsx
+++ b/src/components/utils/renderers/description-cell-renderer.tsx
@@ -6,7 +6,7 @@
  */
 import { Box, Tooltip } from '@mui/material';
 import { Create as CreateIcon, StickyNote2Outlined as StickyNote2OutlinedIcon } from '@mui/icons-material';
-import { ElementAttributes } from '@gridsuite/commons-ui';
+import { type ElementAttributes, type MuiStyles } from '@gridsuite/commons-ui';
 
 const styles = {
     descriptionTooltip: {
@@ -18,7 +18,7 @@ const styles = {
         maxHeight: '50px',
         cursor: 'pointer',
     },
-};
+} as const satisfies MuiStyles;
 
 export type DescriptionCellRendererProps = { data: ElementAttributes };
 
diff --git a/src/components/utils/renderers/name-cell-renderer.tsx b/src/components/utils/renderers/name-cell-renderer.tsx
index 95ea97fb9..972095d9e 100644
--- a/src/components/utils/renderers/name-cell-renderer.tsx
+++ b/src/components/utils/renderers/name-cell-renderer.tsx
@@ -6,8 +6,14 @@
  */
 import { UUID } from 'crypto';
 import { IntlShape, useIntl } from 'react-intl';
-import { Box, CircularProgress, Theme } from '@mui/material';
-import { ElementAttributes, ElementType, getFileIcon, OverflowableText } from '@gridsuite/commons-ui';
+import { Box, CircularProgress } from '@mui/material';
+import {
+    type ElementAttributes,
+    ElementType,
+    getFileIcon,
+    type MuiStyles,
+    OverflowableText,
+} from '@gridsuite/commons-ui';
 
 const isElementCaseOrStudy = (objectType: ElementType) =>
     objectType === ElementType.STUDY || objectType === ElementType.CASE;
@@ -34,10 +40,10 @@ const styles = {
         display: 'flex',
         alignItems: 'center',
     },
-    circularRoot: (theme: Theme) => ({
+    circularRoot: (theme) => ({
         marginRight: theme.spacing(1),
     }),
-    icon: (theme: Theme) => ({
+    icon: (theme) => ({
         marginRight: theme.spacing(1),
         width: '18px',
         height: '18px',
@@ -53,7 +59,7 @@ const styles = {
         lineHeight: 'initial',
         verticalAlign: 'middle',
     },
-};
+} as const satisfies MuiStyles;
 
 export type NameCellRendererProps = {
     data: ElementAttributes;
diff --git a/src/components/utils/renderers/type-cell-renderer.tsx b/src/components/utils/renderers/type-cell-renderer.tsx
index 50c0de437..00b02c31b 100644
--- a/src/components/utils/renderers/type-cell-renderer.tsx
+++ b/src/components/utils/renderers/type-cell-renderer.tsx
@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { ElementAttributes, ElementType, OverflowableText } from '@gridsuite/commons-ui';
+import { type ElementAttributes, ElementType, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui';
 import { useIntl } from 'react-intl';
 import { UUID } from 'crypto';
 import { Box } from '@mui/material';
@@ -22,7 +22,7 @@ const styles = {
         display: 'flex',
         alignItems: 'center',
     },
-};
+} as const satisfies MuiStyles;
 
 export type TypeCellRendererProps = {
     data: ElementAttributes;
diff --git a/src/components/utils/renderers/user-cell-renderer.tsx b/src/components/utils/renderers/user-cell-renderer.tsx
index 35294f657..350071c03 100644
--- a/src/components/utils/renderers/user-cell-renderer.tsx
+++ b/src/components/utils/renderers/user-cell-renderer.tsx
@@ -4,8 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { mergeSx } from '@gridsuite/commons-ui';
-import { Avatar, Box, Theme, Tooltip } from '@mui/material';
+import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
+import { Avatar, Box, Tooltip } from '@mui/material';
 
 const FERMAT_PRIME = 65537;
 // This function is a copy/paste of the MUI demo sample here :
@@ -36,14 +36,14 @@ function getAbbreviationFromUserName(name: string) {
 }
 
 const styles = {
-    avatar: (theme: Theme) => ({
+    avatar: (theme) => ({
         cursor: 'pointer',
         height: '32px',
         width: '32px',
         fontSize: theme.typography.fontSize,
         backgroundColor: theme.row.hover as string,
     }),
-};
+} as const satisfies MuiStyles;
 
 export type UserCellRendererProps = { value: string };