diff --git a/demo/src/equipment-search.tsx b/demo/src/equipment-search.tsx
index 76f1d1db..107934e7 100644
--- a/demo/src/equipment-search.tsx
+++ b/demo/src/equipment-search.tsx
@@ -15,7 +15,7 @@ import {
     equipmentStyles,
     EquipmentType,
     useElementSearch,
-} from '../../src/index';
+} from '../../src';
 
 interface AnyElementInterface {
     id: string;
diff --git a/demo/src/right-resizable-box.jsx b/demo/src/right-resizable-box.tsx
similarity index 73%
rename from demo/src/right-resizable-box.jsx
rename to demo/src/right-resizable-box.tsx
index e6830167..6f2c31ad 100644
--- a/demo/src/right-resizable-box.jsx
+++ b/demo/src/right-resizable-box.tsx
@@ -4,15 +4,15 @@
  * 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/.
  */
-/* eslint-disable import/no-extraneous-dependencies */
 
-import { useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import { MoreVert as ResizePanelHandleIcon } from '@mui/icons-material';
-import { ResizableBox } from 'react-resizable';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ResizableBox, type ResizableBoxProps } from 'react-resizable';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useWindowWidth } from '@react-hook/window-size';
-import PropTypes from 'prop-types';
 import { Box, styled } from '@mui/material';
-import { mergeSx } from '../../src/utils/styles';
+import { mergeSx, type MuiStyles } from '../../src/utils/styles';
 
 const styles = {
     panel: {
@@ -47,25 +47,35 @@ const styles = {
         color: theme.palette.text.disabled,
         transform: 'scale(0.5, 1.5)',
     }),
-};
+} as const satisfies MuiStyles;
 
 // TODO can we avoid to define a component just to add sx support ?
 const ResizableBoxSx = styled(ResizableBox)({});
 
-function RightResizableBox(props) {
-    const { children, disableResize = false, fullscreen = false, hide = false } = props;
+export type RightResizableBoxProps = PropsWithChildren<{
+    disableResize?: boolean;
+    fullscreen?: boolean;
+    hide?: boolean;
+}>;
+
+export default function RightResizableBox({
+    children,
+    disableResize = false,
+    fullscreen = false,
+    hide = false,
+}: Readonly<RightResizableBoxProps>) {
     const windowWidth = useWindowWidth();
 
     const [resizedTreePercentage, setResizedTreePercentage] = useState(0.5);
 
-    const updateResizedTreePercentage = (treePanelWidth, totalWidth) => {
+    const updateResizedTreePercentage = (treePanelWidth: number, totalWidth: number) => {
         if (totalWidth > 0) {
             const newPercentage = treePanelWidth / totalWidth;
             setResizedTreePercentage(newPercentage);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onResize = (event, { element, size }) => {
+    const onResize: NonNullable<ResizableBoxProps['onResize']> = (_event, { size }) => {
         updateResizedTreePercentage(size.width, windowWidth);
     };
 
@@ -73,7 +83,7 @@ function RightResizableBox(props) {
         <ResizableBoxSx
             style={{ display: hide ? 'none' : undefined }}
             width={fullscreen ? windowWidth : windowWidth * resizedTreePercentage}
-            sx={mergeSx(styles.panel, !disableResize && styles.resizePanelHandle)}
+            sx={mergeSx(styles.panel, (!disableResize && styles.resizePanelHandle) || undefined)}
             resizeHandles={['e']}
             axis={disableResize ? 'none' : 'x'}
             onResize={onResize}
@@ -85,12 +95,3 @@ function RightResizableBox(props) {
         </ResizableBoxSx>
     );
 }
-
-RightResizableBox.propTypes = {
-    children: PropTypes.node,
-    disableResize: PropTypes.bool,
-    fullscreen: PropTypes.bool,
-    hide: PropTypes.bool,
-};
-
-export default RightResizableBox;
diff --git a/src/components/customAGGrid/customAggrid.style.ts b/src/components/customAGGrid/customAggrid.style.ts
index 74a7fada..b277e12a 100644
--- a/src/components/customAGGrid/customAggrid.style.ts
+++ b/src/components/customAGGrid/customAggrid.style.ts
@@ -15,9 +15,13 @@ export const styles = {
         position: 'relative',
 
         [`&.${CUSTOM_AGGRID_THEME}`]: {
-            '--ag-value-change-value-highlight-background-color': theme.aggrid.valueChangeHighlightBackgroundColor,
-            '--ag-selected-row-background-color': theme.aggrid.highlightColor,
-            '--ag-row-hover-color': theme.aggrid.highlightColor,
+            ...(theme.agGrid?.valueChangeHighlightBackgroundColor && {
+                '--ag-value-change-value-highlight-background-color': theme.agGrid.valueChangeHighlightBackgroundColor,
+            }),
+            ...(theme.agGrid?.highlightColor && {
+                '--ag-selected-row-background-color': theme.agGrid.highlightColor,
+                '--ag-row-hover-color': theme.agGrid.highlightColor,
+            }),
         },
 
         '& .ag-checkbox-input': {
diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx
index 1df51e84..e206fcda 100644
--- a/src/components/customAGGrid/customAggrid.tsx
+++ b/src/components/customAGGrid/customAggrid.tsx
@@ -53,6 +53,7 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent)
     }
 }
 
+// TODO try to expose <TData> of props that forwardRef don't permit
 export const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>(
     ({ overrideLocales, sx, ...agGridReactProps }, ref) => {
         const theme = useTheme();
@@ -61,7 +62,7 @@ export const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>(
             <Box
                 component="div"
                 sx={mergeSx(styles.grid, sx)}
-                className={`${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`}
+                className={`${theme.agGrid?.theme} ${CUSTOM_AGGRID_THEME}`}
             >
                 <AgGridReact
                     ref={ref}
diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
index 8c0da007..1e42d724 100644
--- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
+++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
@@ -5,71 +5,75 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import { Box, useTheme } from '@mui/material';
+import { type CSSObject } from '@mui/material';
 import type { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community';
 import { BottomRightButtons } from './BottomRightButtons';
 import { FieldConstants } from '../../../../utils/constants/fieldConstants';
 import { CustomAGGrid, type CustomAGGridProps } from '../../../customAGGrid';
+import { type MuiStyles } from '../../../../utils/styles';
 
-const style = (customProps: any) => ({
-    grid: (theme: any) => ({
-        width: 'auto',
-        height: '100%',
-        position: 'relative',
-
-        // - AG Grid colors override -
-        // It shouldn't be exactly like this, but I couldn't make it works otherwise
-        // https://www.ag-grid.com/react-data-grid/global-style-customisation/
-        '--ag-alpine-active-color': `${theme.palette.primary.main} !important`,
-        '--ag-checkbox-indeterminate-color': `${theme.palette.primary.main} !important`,
-        '--ag-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-header-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-odd-row-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-modal-overlay-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-selected-row-background-color': 'transparent !important',
-        '--ag-range-selection-border-color': 'transparent !important',
-
-        // overrides the default computed max height for ag grid default selector editor to make it more usable
-        // can be removed if a custom selector editor is implemented
-        '& .ag-select-list': {
-            maxHeight: '300px !important',
-        },
-        '& .ag-root-wrapper-body': {
-            maxHeight: '500px',
-        },
-        '& .ag-cell': {
-            boxShadow: 'none',
-        },
-        '& .ag-cell-edit-wrapper': {
-            height: 'inherit',
-        },
-        '& .ag-row-hover': {
-            cursor: 'text',
-        },
-        '& .ag-overlay-loading-center': {
-            border: 'none',
-            boxShadow: 'none',
-        },
-        '& .numeric-input': {
-            fontSize: 'calc(var(--ag-font-size) + 1px)',
-            paddingLeft: 'calc(var(--ag-cell-horizontal-padding) - 1px)',
-            width: '100%',
+const style = (customProps: CSSObject) =>
+    ({
+        grid: (theme) => ({
+            width: 'auto',
             height: '100%',
-            border: 'inherit',
-            outline: 'inherit',
-            backgroundColor: theme.agGridBackground.color,
-        },
-        '& .Mui-focused .MuiOutlinedInput-root': {
-            // borders moves row height
-            outline: 'var(--ag-borders-input) var(--ag-input-focus-border-color)',
-            outlineOffset: '-1px',
-            backgroundColor: theme.agGridBackground.color,
-        },
-        ...customProps,
-    }),
-});
+            position: 'relative',
+
+            // - AG Grid colors override -
+            // It shouldn't be exactly like this, but I couldn't make it works otherwise
+            // https://www.ag-grid.com/react-data-grid/global-style-customisation/
+            '--ag-alpine-active-color': `${theme.palette.primary.main} !important`,
+            '--ag-checkbox-indeterminate-color': `${theme.palette.primary.main} !important`,
+            ...(theme.agGrid?.backgroundColor && {
+                '--ag-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-header-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-odd-row-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-modal-overlay-background-color': `${theme.agGrid.backgroundColor} !important`,
+            }),
+            '--ag-selected-row-background-color': 'transparent !important',
+            '--ag-range-selection-border-color': 'transparent !important',
+
+            // overrides the default computed max height for ag grid default selector editor to make it more usable
+            // can be removed if a custom selector editor is implemented
+            '& .ag-select-list': {
+                maxHeight: '300px !important',
+            },
+            '& .ag-root-wrapper-body': {
+                maxHeight: '500px',
+            },
+            '& .ag-cell': {
+                boxShadow: 'none',
+            },
+            '& .ag-cell-edit-wrapper': {
+                height: 'inherit',
+            },
+            '& .ag-row-hover': {
+                cursor: 'text',
+            },
+            '& .ag-overlay-loading-center': {
+                border: 'none',
+                boxShadow: 'none',
+            },
+            '& .numeric-input': {
+                fontSize: 'calc(var(--ag-font-size) + 1px)',
+                paddingLeft: 'calc(var(--ag-cell-horizontal-padding) - 1px)',
+                width: '100%',
+                height: '100%',
+                border: 'inherit',
+                outline: 'inherit',
+                ...(theme.agGrid?.backgroundColor && { backgroundColor: theme.agGrid.backgroundColor }),
+            },
+            '& .Mui-focused .MuiOutlinedInput-root': {
+                // borders moves row height
+                outline: 'var(--ag-borders-input) var(--ag-input-focus-border-color)',
+                outlineOffset: '-1px',
+                ...(theme.agGrid?.backgroundColor && { backgroundColor: theme.agGrid.backgroundColor }),
+            },
+            ...customProps,
+        }),
+    }) as const satisfies MuiStyles;
 
 export type CustomAgGridTableProps = Required<
     Pick<
@@ -86,7 +90,7 @@ export type CustomAgGridTableProps = Required<
         name: string;
         makeDefaultRowData: any;
         csvProps: unknown;
-        cssProps: unknown;
+        cssProps: CSSObject;
     };
 
 export function CustomAgGridTable({
@@ -97,8 +101,6 @@ export function CustomAgGridTable({
     rowSelection,
     ...props
 }: Readonly<CustomAgGridTableProps>) {
-    // FIXME: right type => Theme -->  not defined there ( gridStudy and gridExplore definition not the same )
-    const theme: any = useTheme();
     const [gridApi, setGridApi] = useState<any>(null);
     const [selectedRows, setSelectedRows] = useState([]);
     const [newRowAdded, setNewRowAdded] = useState(false);
@@ -208,27 +210,26 @@ export function CustomAgGridTable({
 
     return (
         <>
-            <Box className={theme.aggrid.theme} sx={style(cssProps).grid}>
-                <CustomAGGrid
-                    rowData={rowData}
-                    onGridReady={onGridReady}
-                    cacheOverflowSize={10}
-                    rowSelection={rowSelection ?? 'multiple'}
-                    rowDragEntireRow
-                    rowDragManaged
-                    onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}
-                    detailRowAutoHeight
-                    onSelectionChanged={() => {
-                        setSelectedRows(gridApi.api.getSelectedRows());
-                    }}
-                    onRowDataUpdated={newRowAdded ? onRowDataUpdated : undefined}
-                    onCellEditingStopped={onCellEditingStopped}
-                    onSortChanged={onSortChanged}
-                    getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]}
-                    theme="legacy"
-                    {...props}
-                />
-            </Box>
+            <CustomAGGrid
+                rowData={rowData}
+                onGridReady={onGridReady}
+                cacheOverflowSize={10}
+                rowSelection={rowSelection ?? 'multiple'}
+                rowDragEntireRow
+                rowDragManaged
+                onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}
+                detailRowAutoHeight
+                onSelectionChanged={() => {
+                    setSelectedRows(gridApi.api.getSelectedRows());
+                }}
+                onRowDataUpdated={newRowAdded ? onRowDataUpdated : undefined}
+                onCellEditingStopped={onCellEditingStopped}
+                onSortChanged={onSortChanged}
+                getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]}
+                theme="legacy"
+                sx={useMemo(() => style(cssProps).grid, [cssProps])}
+                {...props}
+            />
             <BottomRightButtons
                 name={name}
                 handleAddRow={handleAddRow}
diff --git a/src/components/inputs/reactHookForm/utils/CancelButton.tsx b/src/components/inputs/reactHookForm/utils/CancelButton.tsx
index b9a7ce5d..886cc243 100644
--- a/src/components/inputs/reactHookForm/utils/CancelButton.tsx
+++ b/src/components/inputs/reactHookForm/utils/CancelButton.tsx
@@ -8,7 +8,9 @@
 import { Button, type ButtonProps, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 
-export function CancelButton(inProps: Readonly<Omit<ButtonProps, 'children'>>) {
+export type CancelButtonProps = Omit<ButtonProps, 'children'>;
+
+export function CancelButton(inProps: Readonly<CancelButtonProps>) {
     const props = useThemeProps({ props: inProps, name: 'CancelButton' });
     return (
         <Button data-testid="CancelButton" {...props}>
diff --git a/src/index.ts b/src/index.ts
index 7704009d..e2fecd03 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,7 +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/.
  */
-export { default as svg } from './_mocks_/svg';
+import type {} from './module-mui'; // here for demo
+
 export * from './components';
 export * from './hooks';
 export * from './redux';
diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts
index 2aca4ca7..f4e421ca 100644
--- a/src/module-mui.d.ts
+++ b/src/module-mui.d.ts
@@ -4,20 +4,79 @@
  * 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/.
  */
+/* eslint-disable no-restricted-imports */
 
-import '@mui/material'; // dunno why we need to import like that for module augmentation to work
+// noinspection ES6UnusedImports
+import type {} from '@mui/material'; // dunno why we need to import like that for module augmentation to work
+import type { Property } from 'csstype';
+import type { ComponentsOverrides, ComponentsVariants, Theme as MuiTheme } from '@mui/material/styles';
 
-// used to customize mui theme
-// https://mui.com/material-ui/customization/theming/#typescript
+// https://mui.com/x/react-charts/quickstart/#typescript
+// import type {} from '@mui/x-charts/themeAugmentation';
+
+// https://mui.com/x/react-date-pickers/quickstart/#typescript
+// import type {} from '@mui/x-date-pickers/themeAugmentation';
+// import type {} from '@mui/x-date-pickers/AdapterDayjs'; // replace `AdapterDayjs` with the adapter you're using
+
+// https://mui.com/x/react-tree-view/quickstart/#typescript
+import type {} from '@mui/x-tree-view/themeAugmentation';
+
+// https://mui.com/material-ui/about-the-lab/#typescript
+import type {} from '@mui/lab/themeAugmentation';
+import { CancelButtonProps } from './components';
+
+type ThemeWithoutComponents = Omit<MuiTheme, 'components'>;
+
+// used to customize mui theme & colors
 declare module '@mui/material/styles' {
+    // https://mui.com/material-ui/customization/theming/#typescript
     interface Theme {
-        aggrid: {
-            theme: string;
-            highlightColor: string;
-            valueChangeHighlightBackgroundColor: string;
-            overlay: {
-                background: string;
-            };
+        agGrid?: {
+            theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
+            highlightColor?: Property.Color;
+            valueChangeHighlightBackgroundColor?: Property.BackgroundColor;
+            backgroundColor?: Property.BackgroundColor;
+        };
+    }
+
+    // options of createTheme({...})
+    interface ThemeOptions {
+        // do you use AgGrid component(s)?
+        agGrid?: {
+            // There is no default/fallback values, so all variables must be specified
+            theme: 'ag-theme-alpine' | 'ag-theme-alpine-dark';
+            highlightColor?: Property.Color;
+            valueChangeHighlightBackgroundColor?: Property.BackgroundColor;
+            backgroundColor?: Property.BackgroundColor;
+        };
+    }
+
+    // https://mui.com/material-ui/customization/palette/#typescript
+    // interface Palette {}
+    // interface PaletteOptions {}
+
+    // https://mui.com/material-ui/customization/palette/#typescript-2
+    // interface PaletteColor {}
+    // interface SimplePaletteColorOptions {}
+
+    // https://mui.com/material-ui/customization/creating-themed-components/#typescript
+    interface ComponentNameToClassKey {
+        CancelButton: never; // what here?
+    }
+    interface ComponentsPropsList {
+        CancelButton: Partial<CancelButtonProps>;
+    }
+    interface Components {
+        CancelButton?: {
+            defaultProps?: ComponentsPropsList['CancelButton'];
+            styleOverrides?: ComponentsOverrides<ThemeWithoutComponents>['CancelButton'];
+            variants?: ComponentsVariants['CancelButton'];
         };
     }
 }
+
+declare module '@mui/utils/capitalize' {
+    export default function capitalize<S extends string>(string: S): Capitalize<S>;
+}
+
+export {}; // keep this file a module
diff --git a/src/utils/styles.ts b/src/utils/styles.ts
index 42f3afef..4a617a87 100644
--- a/src/utils/styles.ts
+++ b/src/utils/styles.ts
@@ -4,7 +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 { SxProps, Theme } from '@mui/material';
+import { type SxProps, type Theme } from '@mui/material';
+import { type SystemStyleObject } from '@mui/system';
 
 export const DARK_THEME = 'Dark';
 export const LIGHT_THEME = 'Light';
@@ -30,4 +31,5 @@ const isSxProps = (sx: SxProps<Theme> | undefined): sx is SxProps => {
 export const mergeSx = (...allSx: (SxProps<Theme> | undefined)[]) => allSx.filter(isSxProps).flat();
 
 export type SxStyle = SxProps<Theme>;
+export type SxStyleObject = SystemStyleObject<Theme>;
 export type MuiStyles = Record<string, SxStyle>;
diff --git a/vite.config.ts b/vite.config.ts
index 83cec47b..6367a1b4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,6 +16,8 @@ import { globSync } from 'glob';
 import * as path from 'node:path';
 import * as url from 'node:url';
 
+const outDir = path.join(__dirname, 'dist');
+
 export default defineConfig((config) => ({
     plugins: [
         react(),
@@ -27,7 +29,23 @@ export default defineConfig((config) => ({
         libInjectCss(),
         dts({
             include: ['src'],
-            exclude: '**/*.test.{ts,tsx}',
+            exclude: ['**/*.test.{ts,tsx}'],
+            copyDtsFiles: true, // copy existing .d.ts files from src to outDir
+            beforeWriteFile: (filePath, content) => {
+                switch (filePath) {
+                    case `${outDir}/index.d.ts`:
+                        // vite doesn't support "import './f.d.ts'" and dts plugin doesn't keep "import type {}", so we inject it manually
+                        return {
+                            filePath,
+                            content: `${content}\n// Ensure the module augmentation is loaded whenever a project imports '@gridsuite/commons-ui'\nimport './module-mui';\n`,
+                        };
+                    case `${outDir}/module-localized-countries.d.ts`:
+                    case `${outDir}/vite-env.d.ts`:
+                        return false;
+                    default:
+                        return undefined;
+                }
+            },
         }),
     ],
     build: {
@@ -41,7 +59,7 @@ export default defineConfig((config) => ({
             // from https://rollupjs.org/configuration-options/#input
             input: Object.fromEntries(
                 globSync('src/**/*.{js,jsx,ts,tsx}', {
-                    ignore: ['src/vite-env.d.ts', 'src/**/*.test.{js,jsx,ts,tsx}'],
+                    ignore: ['src/vite-env.d.ts', 'src/**/*.test.{js,jsx,ts,tsx}', 'src/**/*.d.ts'],
                 }).map((file) => [
                     // This remove `src/` as well as the file extension from each
                     // file, so e.g. src/nested/foo.js becomes nested/foo