@linagora/twake-mui 3.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# @linagora/twake-mui [4.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.0.0...@linagora/twake-mui@4.1.0) (2026-08-26)
+
+
+### Features
+
+* **twake-mui:** Add AppTitle ([6c7113c](https://github.com/linagora/twake-ui/commit/6c7113ce243fb381212e1b33a12b8ef6342abd38))
+
+
+### Reverts
+
+* **twake-mui:** Revert Apptitle addition ([3700530](https://github.com/linagora/twake-ui/commit/37005305b880d7a7fb11b6f4c800efdb5e9a03d0))
+
+
+### Dependencies
+
+* **@linagora/twake-icons:** upgraded to 2.8.0
+
+# @linagora/twake-mui [4.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@3.0.0...@linagora/twake-mui@4.0.0) (2026-07-28)
+
+
+### Bug Fixes
+
+* **twake-mui:** Remove forced grey color for Typography ([6bbd9e6](https://github.com/linagora/twake-ui/commit/6bbd9e6609356719bd2d0ce08660e079fc9d6e8c))
+
+
+### chore
+
+* **twake-mui:** Add @linagora/twake-icons as dependency ([d38157a](https://github.com/linagora/twake-ui/commit/d38157a0a1edc02be8450e2df0631bb492f18118))
+
+
+### Features
+
+* **twake-mui:** Add AccordionSummary cozy-ui style overrides with default expand icon ([30d8402](https://github.com/linagora/twake-ui/commit/30d840288a098d9e6af83422182a3e2e84dfb494))
+* **twake-mui:** Add Fab cozy-ui style overrides with medium size default ([2d6b0ed](https://github.com/linagora/twake-ui/commit/2d6b0ede0d65e73c5c80e58d678cd894ec6ba4de))
+* **twake-mui:** Add Tooltip cozy-ui style overrides with arrow by default ([ab349eb](https://github.com/linagora/twake-ui/commit/ab349ebc1efe3af8517a74dbab1efafe608e811e))
+* **twake-mui:** Copy Typography style from cozy-ui ([a43378a](https://github.com/linagora/twake-ui/commit/a43378a019bb369dcb2e5debd0baa5f2355941a7))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** You must have `"@linagora/twake-icons": "^2.7.0"`
+
 # @linagora/twake-mui [3.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@2.0.0...@linagora/twake-mui@3.0.0) (2026-07-27)
 
 

package/dist/components/AccordionExpandIcon/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AccordionExpandIcon: React.FC;
+export default AccordionExpandIcon;

package/dist/components/AccordionExpandIcon/index.js

@@ -0,0 +1,4 @@
+import { Icon, Bottom } from '@linagora/twake-icons';
+import React from 'react';
+const AccordionExpandIcon = () => React.createElement(Icon, { icon: Bottom, width: 12 });
+export default AccordionExpandIcon;

package/dist/index.d.ts

@@ -2,11 +2,12 @@ export * from '@mui/material';
 export * from '@mui/lab';
 export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
-export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
-export type { TwakeTheme } from './lib/theme';
 export { radius } from './lib/radius';
+export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
+export type { TwakeTheme } from './lib/theme';
+export type { AvatarProps } from './components/Avatar';

package/dist/index.js

@@ -1,10 +1,14 @@
+// MUI
 export * from '@mui/material';
 export * from '@mui/lab';
 export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
-export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+// LIB
 export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
+// COMPONENTS & HELPERS
+export { TwakeMuiThemeProvider } from './components/ThemeProvider';
 export { Avatar, default as AvatarDefault } from './components/Avatar';
 export { nameToColor, supportedColors } from './components/Avatar/helpers';
+export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';

package/dist/lib/makeDarkOverrides.js

@@ -1,19 +1,9 @@
-import { alpha } from '@mui/material/styles';
 import { merge } from 'lodash';
 import { makeLightOverrides } from './makeLightOverrides';
 export const makeDarkOverrides = (theme) => {
-    const makeOverridesForDarkTheme = (theme) => ({
-        MuiTypography: {
-            styleOverrides: {
-                root: {
-                    color: alpha(theme.palette.grey[50], 0.9)
-                },
-                caption: {
-                // Typography caption overrides will be implemented later
-                }
-            }
-        }
-    });
+    const makeOverridesForDarkTheme = (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    theme) => ({});
     const DarkOverrides = merge(makeLightOverrides(theme), makeOverridesForDarkTheme(theme));
     return DarkOverrides;
 };

package/dist/lib/makeLightOverrides.js

@@ -1,7 +1,9 @@
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { alpha } from '@mui/material/styles';
+import { alpha, darken } from '@mui/material/styles';
+import React from 'react';
 import paletteJson from './palette.json';
 import { radius } from './radius';
+import AccordionExpandIcon from '../components/AccordionExpandIcon';
 const paletteData = paletteJson;
 export const makeLightOverrides = (theme) => {
     return {
@@ -431,16 +433,6 @@ export const makeLightOverrides = (theme) => {
                 }
             }
         },
-        MuiTypography: {
-            styleOverrides: {
-                root: {
-                    color: alpha(theme.palette.grey[900], 0.9)
-                },
-                caption: {
-                // Typography caption overrides will be implemented later
-                }
-            }
-        },
         MuiAccordion: {
             styleOverrides: {
                 root: {
@@ -451,31 +443,113 @@ export const makeLightOverrides = (theme) => {
             }
         },
         MuiAccordionSummary: {
+            defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
             styleOverrides: {
                 root: {
-                    padding: '0',
-                    minHeight: '32px',
+                    backgroundColor: theme.palette.grey[100],
+                    textTransform: 'uppercase',
+                    fontWeight: 'bold',
+                    fontSize: '0.875rem',
+                    minHeight: '3.5rem',
+                    padding: 0,
+                    color: theme.palette.text.primary,
                     '&.Mui-expanded': {
-                        minHeight: '32px'
+                        minHeight: '3.5rem'
+                    }
+                },
+                expandIconWrapper: {
+                    order: 0,
+                    '&&': {
+                        marginLeft: '0.3125rem'
+                    },
+                    transform: 'rotate(-90deg)',
+                    '&.Mui-expanded': {
+                        marginLeft: '0.3125rem',
+                        transform: 'rotate(0deg)'
                     }
                 },
                 content: {
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    lineHeight: '20px',
-                    color: alpha(paletteData.Grey[900], 0.9),
-                    margin: 0,
+                    margin: '0.75rem 0',
+                    paddingLeft: '0.5rem',
+                    paddingRight: '0.25rem',
+                    order: 1,
+                    '& > :last-child': {
+                        paddingRight: 0
+                    },
                     '&.Mui-expanded': {
-                        margin: 0
+                        margin: '0.75rem 0'
+                    }
+                }
+            }
+        },
+        MuiFab: {
+            defaultProps: { size: 'medium' },
+            styleOverrides: {
+                root: {
+                    borderRadius: 28,
+                    width: 96,
+                    height: 96,
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.paper,
+                    '&:hover': {
+                        backgroundColor: darken(theme.palette.background.paper, 0.05)
+                    },
+                    '@media (hover: none)': {
+                        backgroundColor: theme.palette.background.paper
                     }
                 },
-                expandIconWrapper: {
-                    padding: '4px',
-                    color: alpha(paletteData.Grey[900], 0.48),
-                    borderRadius: '50%',
+                primary: {
+                    color: theme.palette.primary.dark,
+                    backgroundColor: theme.palette.primary.light,
                     '&:hover': {
-                        backgroundColor: alpha(paletteData.Primary.A400, 0.04)
+                        backgroundColor: darken(theme.palette.primary.light, 0.05)
+                    },
+                    '@media (hover: none)': {
+                        backgroundColor: theme.palette.primary.light
+                    }
+                },
+                extended: {
+                    borderRadius: 16,
+                    width: 'auto',
+                    height: 56,
+                    minWidth: 56,
+                    padding: '0 20px',
+                    '&.MuiFab-sizeSmall': {
+                        borderRadius: 16,
+                        width: 'auto',
+                        height: 42,
+                        minWidth: 42,
+                        padding: '0 12px'
+                    },
+                    '&.MuiFab-sizeMedium': {
+                        borderRadius: 16,
+                        width: 'auto',
+                        height: 48,
+                        minWidth: 48,
+                        padding: '0 16px'
                     }
+                },
+                sizeSmall: {
+                    borderRadius: 12,
+                    width: 40,
+                    height: 40
+                },
+                sizeMedium: {
+                    borderRadius: 16,
+                    width: 56,
+                    height: 56
+                }
+            }
+        },
+        MuiTooltip: {
+            defaultProps: { arrow: true },
+            styleOverrides: {
+                tooltip: {
+                    backgroundColor: alpha(theme.palette.grey[800], 0.9),
+                    fontSize: '1rem',
+                    lineHeight: 1.3,
+                    borderRadius: '4px',
+                    padding: '8px 12px'
                 }
             }
         },

package/dist/lib/makePalette.js

@@ -1,3 +1,4 @@
+import { alpha } from '@mui/material/styles';
 import paletteJson from './palette.json';
 const paletteData = paletteJson;
 export const makePalette = (mode = 'light', palette = paletteData) => {
@@ -57,9 +58,15 @@ export const makePalette = (mode = 'light', palette = paletteData) => {
             A900: palette.Grey.A900
         },
         text: {
-            primary: '#000000',
-            secondary: '#717D96',
-            disabled: '#C5C7CA'
+            primary: mode === 'dark'
+                ? palette.Common['white']
+                : alpha(palette.Grey[900], 0.9),
+            secondary: mode === 'dark'
+                ? alpha(palette.Common['white'], 0.64)
+                : alpha(palette.Grey['900'], 0.64),
+            disabled: mode === 'dark'
+                ? alpha(palette.Common['white'], 0.4)
+                : alpha(palette.Grey['900'], 0.32)
         },
         background: {
             default: '#FFFFFF',

package/dist/lib/makeTypography.js

@@ -16,96 +16,77 @@ export const makeTypography = () => {
         h1: {
             fontSize: 45,
             fontWeight: 600,
-            lineHeight: 1.156,
-            letterSpacing: '0'
+            lineHeight: 1.087
         },
         h2: {
             fontSize: 32,
             fontWeight: 600,
-            lineHeight: 1.25,
-            letterSpacing: '0'
+            lineHeight: 1.313
         },
         h3: {
             fontSize: 24,
             fontWeight: 600,
-            lineHeight: 1.333,
-            letterSpacing: '0'
+            lineHeight: 1.167
         },
         h4: {
             fontSize: 22,
             fontWeight: 600,
-            lineHeight: 1.273,
-            letterSpacing: '0'
+            lineHeight: 1.167
         },
         h5: {
             fontSize: 16,
             fontWeight: 600,
-            lineHeight: 1.5,
-            letterSpacing: '0'
+            lineHeight: 1.313,
+            letterSpacing: '0.15px'
         },
         h6: {
             fontSize: 14,
             fontWeight: 500,
-            lineHeight: 1.429,
-            letterSpacing: '0'
+            lineHeight: 1.313,
+            letterSpacing: '0.1px'
         },
         subtitle1: {
             fontSize: 14,
             fontWeight: 500,
-            lineHeight: 1.143,
-            letterSpacing: '0.5px'
+            lineHeight: 1.358,
+            letterSpacing: '0.1px'
         },
         subtitle2: {
             fontSize: 14,
             fontWeight: 600,
-            lineHeight: 1.429,
+            lineHeight: 1.334,
             letterSpacing: '0.25px'
         },
         body1: {
             fontSize: 16,
             fontWeight: 400,
-            lineHeight: 1.5,
+            lineHeight: 1.313,
             letterSpacing: '-0.15px'
         },
         body2: {
             fontSize: 14,
-            fontWeight: 400,
-            lineHeight: 1.429,
+            fontWeight: 500,
+            lineHeight: 1.313,
             letterSpacing: '0.25px'
         },
         button: {
-            fontSize: 14,
-            fontWeight: 500,
-            lineHeight: 1.429,
-            textTransform: 'none',
-            letterSpacing: '0.1px'
-        },
-        buttonLarge: {
             fontSize: 16,
             fontWeight: 500,
-            lineHeight: 1.5,
-            textTransform: 'none',
-            letterSpacing: '0.15px'
-        },
-        buttonSmall: {
-            fontSize: 11,
-            fontWeight: 500,
-            lineHeight: 1.455,
-            textTransform: 'none',
-            letterSpacing: '0.5px'
+            lineHeight: 1.313,
+            textTransform: 'inherit'
         },
         caption: {
             fontSize: 12,
             fontWeight: 500,
-            lineHeight: 1.333,
+            lineHeight: 1.313,
             letterSpacing: '0.5px'
         },
         overline: {
             fontSize: 11,
             fontWeight: 500,
-            lineHeight: 1.455,
-            letterSpacing: '0.4px',
-            textTransform: 'none'
+            lineHeight: '16px',
+            letterSpacing: '0.5px',
+            textTransform: 'inherit'
         }
     };
 };

package/dist/lib/palette.json

@@ -98,5 +98,9 @@
         "A400": "#37383A",
         "A700": "#5D6169",
         "A900": "#1C1B1F"
+    },
+    "Common": {
+        "white": "#fff",
+        "black": "#000"
     }
 }

package/dist/lib/types.d.ts

@@ -1,4 +1,8 @@
 import { TypographyVariantsOptions } from '@mui/material/styles';
+export interface CommonColor {
+    white: string;
+    black: string;
+}
 export interface PaletteColor {
     50: string;
     100: string;
@@ -33,7 +37,6 @@ export interface GreyPalette {
 export interface TextPalette {
     primary: string;
     secondary: string;
-    secondaryContainer: string;
     disabled: string;
     hint: string;
     icon: string;
@@ -64,6 +67,7 @@ export interface PaletteJson {
     Success: PaletteColor;
     Info: Omit<PaletteColor, 'ContrastText'>;
     Grey: GreyPalette;
+    Common: CommonColor;
 }
 export type TypographyOptions = TypographyVariantsOptions;
 declare module '@mui/material/TextField' {
@@ -96,8 +100,6 @@ export interface TypographyVariants {
     body1: TypographyConfig;
     body2: TypographyConfig;
     button: TypographyConfig;
-    buttonLarge: TypographyConfig;
-    buttonSmall: TypographyConfig;
     caption: TypographyConfig;
     overline: TypographyConfig;
 }

package/dist/stories/Accordion.stories.d.ts

@@ -0,0 +1,7 @@
+import { Accordion } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Docs: Story;
+export declare const Screenshot: Story;

package/dist/stories/Accordion.stories.js

@@ -0,0 +1,29 @@
+import { Accordion, AccordionDetails, AccordionSummary, Stack, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Accordion',
+    component: Accordion,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+const AccordionGroup = () => (React.createElement(Stack, { spacing: 2, sx: { width: 400 } },
+    React.createElement(Accordion, null,
+        React.createElement(AccordionSummary, null, "Click to expand/collapse the first item"),
+        React.createElement(AccordionDetails, null,
+            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
+    React.createElement(Accordion, null,
+        React.createElement(AccordionSummary, null, "Click to expand/collapse the second item"),
+        React.createElement(AccordionDetails, null,
+            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
+    React.createElement(Accordion, null,
+        React.createElement(AccordionSummary, null, "Click to expand/collapse the third item"),
+        React.createElement(AccordionDetails, null,
+            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur")))));
+export const Docs = {
+    render: () => React.createElement(AccordionGroup, null)
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => React.createElement(AccordionGroup, null)
+};

package/dist/stories/Fab.stories.d.ts

@@ -0,0 +1,7 @@
+import { Fab } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof Fab>;
+export default meta;
+type Story = StoryObj<typeof Fab>;
+export declare const Docs: Story;
+export declare const Screenshot: Story;

package/dist/stories/Fab.stories.js

@@ -0,0 +1,73 @@
+import { Icon, Plus } from '@linagora/twake-icons';
+import { Fab, Stack } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Fab',
+    component: Fab,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Docs = {
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'primary', 'secondary', 'inherit']
+        },
+        size: { control: 'select', options: ['small', 'medium', 'large'] },
+        variant: { control: 'select', options: ['circular', 'extended'] }
+    },
+    render: ({ color = 'primary', size = 'medium', variant = 'circular' }) => (React.createElement(Fab, { sx: { gap: 1 }, color: color, size: size, variant: variant },
+        React.createElement(Icon, { icon: Plus }),
+        variant === 'extended' && React.createElement(React.Fragment, null, "Extended")))
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { p: 4 } },
+        React.createElement("section", null,
+            React.createElement("h3", null, "Default"),
+            React.createElement(Stack, { spacing: 2, direction: "row" },
+                React.createElement(Fab, { color: "primary", size: "small" },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "primary", size: "medium" },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "primary", size: "large" },
+                    React.createElement(Icon, { icon: Plus }))),
+            React.createElement(Stack, { spacing: 2, direction: "row", sx: { mt: 2 } },
+                React.createElement(Fab, { color: "inherit", size: "small" },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "inherit", size: "medium" },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "inherit", size: "large" },
+                    React.createElement(Icon, { icon: Plus })))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Extended"),
+            React.createElement(Stack, { spacing: 2, direction: "row" },
+                React.createElement(Fab, { sx: { gap: 1 }, color: "primary", size: "small", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Small"),
+                React.createElement(Fab, { sx: { gap: 1 }, color: "primary", size: "medium", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Medium"),
+                React.createElement(Fab, { sx: { gap: 1 }, color: "primary", size: "large", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Large")),
+            React.createElement(Stack, { spacing: 2, direction: "row", sx: { mt: 2 } },
+                React.createElement(Fab, { sx: { gap: 1 }, color: "inherit", size: "small", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Small"),
+                React.createElement(Fab, { sx: { gap: 1 }, color: "inherit", size: "medium", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Medium"),
+                React.createElement(Fab, { sx: { gap: 1 }, color: "inherit", size: "large", variant: "extended" },
+                    React.createElement(Icon, { icon: Plus }),
+                    " Large"))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Disabled"),
+            React.createElement(Stack, { spacing: 2, direction: "row" },
+                React.createElement(Fab, { color: "primary", disabled: true },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "inherit", disabled: true },
+                    React.createElement(Icon, { icon: Plus })),
+                React.createElement(Fab, { color: "primary", disabled: true, variant: "extended" }, "Extended")))))
+};

package/dist/stories/Tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Docs: Story;
+export declare const Screenshot: Story;

package/dist/stories/Tooltip.stories.js

@@ -0,0 +1,41 @@
+import { Tooltip, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Tooltip',
+    component: Tooltip,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Docs = {
+    argTypes: {
+        placement: {
+            control: 'select',
+            options: [
+                'top',
+                'bottom',
+                'left',
+                'right',
+                'top-start',
+                'top-end',
+                'bottom-start',
+                'bottom-end'
+            ]
+        },
+        arrow: { control: 'boolean' }
+    },
+    args: {
+        title: (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: "body1", color: "inherit" }, "Carbon copy"),
+            React.createElement(Typography, { variant: "caption", color: "inherit" }, "Indicates whether the document is defined as \u201Cauthentic and original\u201D"))),
+        children: React.createElement("u", null, "hover over me")
+    }
+};
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement("div", { style: { padding: 48 } },
+        React.createElement(Tooltip, { open: true, title: React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "body1", color: "inherit" }, "Carbon copy"),
+                React.createElement(Typography, { variant: "caption", color: "inherit" }, "Indicates whether the document is defined as \u201Cauthentic and original\u201D")) },
+            React.createElement("u", null, "hover over me"))))
+};

package/dist/stories/Typography.stories.js

@@ -36,6 +36,8 @@ export const Screenshot = {
         React.createElement("section", null,
             React.createElement("h3", { style: { marginBottom: '12px', marginTop: '24px' } }, "Colors"),
             React.createElement(Stack, { spacing: 1 },
+                React.createElement("div", { style: { color: 'blue' } },
+                    React.createElement(Typography, { color: "inherit" }, "Inherit color text")),
                 React.createElement(Typography, { color: "primary" }, "Primary color text"),
                 React.createElement(Typography, { color: "secondary" }, "Secondary color text"),
                 React.createElement(Typography, { color: "success" }, "Success color text"),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "3.0.0",
+  "version": "4.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -50,6 +50,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-icons": "2.8.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
     "react": "^18",
@@ -60,6 +61,7 @@
     "@argos-ci/storybook": "5.3.2",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@linagora/twake-icons": "2.8.0",
     "@mui/icons-material": "^9.2.0",
     "@mui/lab": "^9.0.0-beta.6",
     "@mui/material": "^9.2.0",
@@ -69,6 +71,8 @@
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
     "@types/lodash": "4.17.24",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@vitest/browser-playwright": "4.1.5",
     "cozy-tsconfig": "^2.0.0",
     "eslint": "10.2.1",