@linagora/twake-mui 7.0.0 → 8.0.0

package/dist/stories/IconButton.stories.js

@@ -0,0 +1,59 @@
+import { Cross, Icon, People, Restore, Stop, Trash } from '@linagora/twake-icons';
+import { Button, IconButton, Stack, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'IconButton',
+    component: IconButton,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'inherit', 'primary', 'secondary', 'error']
+        },
+        size: {
+            control: 'select',
+            options: ['xsmall', 'small', 'medium', 'large']
+        },
+        disabled: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: React.createElement(Icon, { icon: People })
+    }
+};
+const sizes = ['xsmall', 'small', 'medium', 'large'];
+const Row = ({ size, disabled }) => (React.createElement(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center' } },
+    React.createElement(IconButton, { size: size, disabled: disabled },
+        React.createElement(Icon, { icon: People })),
+    React.createElement(IconButton, { color: "primary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Restore })),
+    React.createElement(IconButton, { color: "secondary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Cross })),
+    React.createElement(IconButton, { color: "error", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Trash }))));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { p: 4 } },
+        sizes.map(size => (React.createElement("section", { key: size },
+            React.createElement("h3", null, size),
+            React.createElement(Stack, { direction: "row", spacing: 4 },
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "default"),
+                    React.createElement(Row, { size: size })),
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "disabled"),
+                    React.createElement(Row, { size: size, disabled: true })))))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Embedded button"),
+            React.createElement(IconButton, { size: "small" },
+                React.createElement(Button, { component: "div", sx: {
+                        minWidth: 'auto',
+                        width: 16,
+                        height: 16,
+                        borderRadius: '50%'
+                    }, size: "small" },
+                    React.createElement(Icon, { icon: Stop, size: 12 }))))))
+};

package/dist/stories/Radio.stories.d.ts

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

package/dist/stories/Radio.stories.js

@@ -0,0 +1,60 @@
+import { Box, FormControlLabel, Radio, RadioGroup, Stack } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Radio',
+    component: Radio,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['primary', 'error', 'default']
+        },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        edge: { control: 'select', options: [false, 'start', 'end'] }
+    }
+};
+export default meta;
+export const Default = {
+    render: args => (React.createElement(FormControlLabel, { control: React.createElement(Radio, { ...args }), label: "Radio" }))
+};
+// The cozy-ui doc group, `secondary` being its error-coloured "intent"
+const Group = ({ labelPlacement }) => (React.createElement(RadioGroup, { "aria-label": "radio", name: "radioName", defaultValue: "item1" },
+    React.createElement(FormControlLabel, { value: "item1", label: "This is a radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, null) }),
+    React.createElement(FormControlLabel, { value: "item2", label: "This is an intent radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, { color: "error" }) }),
+    React.createElement(FormControlLabel, { value: "item3", label: "This is a disabled radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, { disabled: true }) }),
+    React.createElement(FormControlLabel, { value: "item4", label: "This is a checked disabled radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, { checked: true, disabled: true }) }),
+    React.createElement(FormControlLabel, { value: "item5", label: "This is a edge start radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, { edge: "start" }) }),
+    React.createElement(FormControlLabel, { value: "item6", label: "This is a edge end radio button", labelPlacement: labelPlacement, control: React.createElement(Radio, { edge: "end" }) })));
+const DashedBox = ({ children }) => (React.createElement(Box, { sx: {
+        width: '3rem',
+        height: '3rem',
+        border: '2px dashed #ccc',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    } }, children));
+// Visual Regression - Every example of the cozy-ui Radios doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Radios"),
+            React.createElement(Group, null)),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Radios, label before"),
+            React.createElement(Group, { labelPlacement: "start" })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "States"),
+            React.createElement(Stack, { direction: "row" }, ['primary', 'error'].map(color => [false, true].map(disabled => [false, true].map(checked => (React.createElement(Radio, { key: `${color}-${disabled}-${checked}`, color: color, disabled: disabled, checked: checked }))))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Position"),
+            React.createElement(Stack, { direction: "row", spacing: 2 },
+                React.createElement(DashedBox, null,
+                    React.createElement(Radio, { edge: false, sx: { border: '1px solid red' } })),
+                React.createElement(DashedBox, null,
+                    React.createElement(Radio, { edge: "start", sx: { border: '1px solid red' } })),
+                React.createElement(DashedBox, null,
+                    React.createElement(Radio, { edge: "end", sx: { border: '1px solid red' } }))))))
+};

package/dist/stories/Snackbar.stories.d.ts

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

package/dist/stories/Snackbar.stories.js

@@ -0,0 +1,60 @@
+import { Cross, Icon } from '@linagora/twake-icons';
+import { Alert, Button, IconButton, Snackbar, Stack } from '@mui/material';
+import React from 'react';
+const severities = [
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+const meta = {
+    title: 'Snackbar',
+    component: Snackbar,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        message: { control: 'text' },
+        autoHideDuration: { control: 'number' },
+        anchorOrigin: { control: 'object' }
+    }
+};
+export default meta;
+const actions = (onClose) => (React.createElement(React.Fragment, null,
+    React.createElement(Button, { variant: "text", color: "error", size: "small", onClick: onClose }, "UNDO"),
+    React.createElement(IconButton, { "aria-label": "close", color: "inherit", onClick: onClose },
+        React.createElement(Icon, { icon: Cross, size: 14 }))));
+const OpenableSnackbar = props => {
+    const [open, setOpen] = React.useState(false);
+    const toggle = () => setOpen(value => !value);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: "ghost", size: "small", onClick: toggle }, "Open snackbar"),
+        React.createElement(Snackbar, { open: open, message: "This is a simple snackbar.", action: actions(toggle), onClose: toggle, ...props })));
+};
+export const Default = {
+    render: args => React.createElement(OpenableSnackbar, { ...args })
+};
+// Renders in the flow of the page rather than fixed at the bottom. The top-left
+// anchor is the only one MUI positions without a transform, so nothing has to
+// win over the anchor rules.
+const staticProps = {
+    open: true,
+    anchorOrigin: { vertical: 'top', horizontal: 'left' },
+    sx: { position: 'static' }
+};
+// Visual Regression - Every example of the cozy-ui Snackbar doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Message and actions"),
+            React.createElement(Snackbar, { ...staticProps, message: "This is a simple snackbar.", action: actions(() => undefined) })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "With an Alert inside"),
+            React.createElement(Stack, { spacing: 2 }, severities.map(severity => (React.createElement(Snackbar, { key: severity, ...staticProps },
+                React.createElement(Alert, { variant: "filled", elevation: 6, severity: severity, onClose: () => undefined },
+                    "This is a ",
+                    severity,
+                    " message!"))))))))
+};

package/dist/stories/{Input.stories.d.ts → TextField.stories.d.ts}

@@ -2,6 +2,6 @@ import { TextField } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof TextField>;
 export default meta;
-type Story = StoryObj<typeof TextField>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/TextField.stories.js

@@ -0,0 +1,86 @@
+import { File, Icon } from '@linagora/twake-icons';
+import { InputAdornment, MenuItem, Stack, TextField } from '@mui/material';
+import React from 'react';
+const options = [
+    { value: 'value1', label: 'Item 1' },
+    { value: 'value2', label: 'Item 2' },
+    { value: 'value3', label: 'Item 3' }
+];
+const meta = {
+    title: 'TextField',
+    component: TextField,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: ['outlined', 'filled', 'standard'] },
+        size: { control: 'select', options: ['medium', 'small'] },
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        helperText: { control: 'text' },
+        error: { control: 'boolean' },
+        required: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        multiline: { control: 'boolean' },
+        select: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Label',
+        defaultValue: 'Sample text'
+    }
+};
+const adornments = {
+    startAdornment: (React.createElement(InputAdornment, { position: "start" },
+        React.createElement(Icon, { icon: File, style: { marginRight: 8 } }),
+        "Ko")),
+    endAdornment: React.createElement(InputAdornment, { position: "end" }, "Ko")
+};
+const items = options.map(option => (React.createElement(MenuItem, { key: option.value, value: option.value }, option.label)));
+// One enabled and one disabled field
+const Pair = props => (React.createElement(Stack, { direction: "row", spacing: 2 },
+    React.createElement(TextField, { ...props }),
+    React.createElement(TextField, { disabled: true, ...props })));
+// Every example of the cozy-ui TextField doc, for one set of variant props
+const Examples = ({ withIcons, ...props }) => {
+    const input = withIcons ? adornments : undefined;
+    return (React.createElement(Stack, { spacing: 2 },
+        React.createElement("div", null, "No label"),
+        React.createElement(Pair, { slotProps: { input }, ...props }),
+        React.createElement("div", null, "Empty"),
+        React.createElement(Pair, { label: "Label", slotProps: { input }, ...props }),
+        React.createElement("div", null, "Placeholder"),
+        React.createElement(Pair, { label: "Label", placeholder: "placeholder", slotProps: { input, inputLabel: { shrink: true } }, ...props }),
+        React.createElement("div", null, "Default value"),
+        React.createElement(Pair, { label: "Label", defaultValue: "Default value", slotProps: { input }, ...props }),
+        React.createElement("div", null, "Multiline"),
+        React.createElement(Pair, { label: "Label", multiline: true, rows: 4, slotProps: { input }, ...props }),
+        React.createElement("div", null, "Select"),
+        React.createElement(Pair, { label: "Label", select: true, defaultValue: "value2", ...props }, items),
+        React.createElement("div", null, "Multiple select"),
+        React.createElement(Pair, { label: "Label", select: true, defaultValue: ['value2', 'value3'], slotProps: { select: { multiple: true } }, ...props }, items)));
+};
+// Visual Regression - All inputs combined
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { direction: "row", spacing: 4, useFlexGap: true, sx: { flexWrap: 'wrap' } },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Medium"),
+            React.createElement(Examples, null)),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Small"),
+            React.createElement(Examples, { size: "small" })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Helper text"),
+            React.createElement(Examples, { helperText: "This is an helper text" })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Error"),
+            React.createElement(Examples, { error: true })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Error, helper text"),
+            React.createElement(Examples, { error: true, helperText: "This is an helper text" })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Required, with icons"),
+            React.createElement(Examples, { required: true, withIcons: true }))))
+};

package/dist/stories/ThemePlayground.stories.js

@@ -2,107 +2,22 @@ import { Button, Stack, Chip } from '@mui/material';
 import React from 'react';
 import { TwakeMuiThemeProvider } from '../components/ThemeProvider';
 import { makePalette } from '../lib/makePalette';
-const customPalette = {
+const CUSTOM_PALETTE = {
     Primary: {
-        '50': '#FFF9F6',
-        '100': '#FFF5F0',
-        '200': '#FFF1E3',
-        '300': '#FFD8BF',
-        '400': '#FFAE7B',
-        '500': '#FF8D46',
-        '600': '#F67E35',
-        '700': '#F66F35',
-        '800': '#E55B31',
-        '900': '#7A411E',
+        50: '#FFF9F6',
+        100: '#FFF5F0',
+        200: '#FFF1E3',
+        300: '#FFD8BF',
+        400: '#FFAE7B',
+        500: '#FF8D46',
+        600: '#F67E35',
+        700: '#F66F35',
+        800: '#E55B31',
+        900: '#7A411E',
         ContrastText: '#fff'
-    },
-    Secondary: {
-        '50': '#E5FFFF',
-        '100': '#B3FFFF',
-        '200': '#80FFFF',
-        '300': '#4DFFFF',
-        '400': '#1AFFFF',
-        '500': '#00FFFF',
-        '600': '#00CCCC',
-        '700': '#009999',
-        '800': '#006666',
-        '900': '#003333',
-        ContrastText: '#000'
-    },
-    Error: {
-        '50': '#FFE5E5',
-        '100': '#FFB3B3',
-        '200': '#FF8080',
-        '300': '#FF4D4D',
-        '400': '#FF1A1A',
-        '500': '#FF0000',
-        '600': '#CC0000',
-        '700': '#990000',
-        '800': '#660000',
-        '900': '#330000',
-        ContrastText: '#fff'
-    },
-    Warning: {
-        '50': '#FFFFE5',
-        '100': '#FFFFB3',
-        '200': '#FFFF80',
-        '300': '#FFFF4D',
-        '400': '#FFFF1A',
-        '500': '#FFFF00',
-        '600': '#CCCC00',
-        '700': '#999900',
-        '800': '#666600',
-        '900': '#333300',
-        ContrastText: '#000'
-    },
-    Success: {
-        '50': '#E5FFE5',
-        '100': '#B3FFB3',
-        '200': '#80FF80',
-        '300': '#4DFF4D',
-        '400': '#1AFF1A',
-        '500': '#00FF00',
-        '600': '#00CC00',
-        '700': '#009900',
-        '800': '#006600',
-        '900': '#003300',
-        ContrastText: '#000'
-    },
-    Info: {
-        '50': '#F0E5FF',
-        '100': '#D1B3FF',
-        '200': '#B380FF',
-        '300': '#944DFF',
-        '400': '#751AFF',
-        '500': '#6600FF',
-        '600': '#5200CC',
-        '700': '#3D0099',
-        '800': '#290066',
-        '900': '#140033'
-    },
-    Grey: {
-        '50': '#F2F2F2',
-        '100': '#00FF00',
-        '200': '#CCCCCC',
-        '300': '#B3B3B3',
-        '400': '#808080',
-        '500': '#808080',
-        '600': '#666666',
-        '700': '#4D4D4D',
-        '800': '#00FF00',
-        '900': '#FF00FF',
-        A100: '#FFFFFF',
-        A200: '#F0F0F0',
-        A400: '#00FF00',
-        A700: '#262626',
-        A900: '#0D0D0D'
-    },
-    Common: {
-        black: '#FF0000',
-        white: '#0000ff'
     }
 };
-const BASE_PALETTE = makePalette('light', customPalette);
+const BASE_PALETTE = makePalette('light', CUSTOM_PALETTE);
 function ColorSwatch({ label, color }) {
     return (React.createElement(Stack, { direction: "row", spacing: 1 },
         React.createElement("div", { style: {
@@ -123,7 +38,7 @@ function ThemePlaygroundContent() {
     const textSecondary = BASE_PALETTE.text.secondary;
     const backgroundDefault = BASE_PALETTE.background.default;
     const backgroundPaper = BASE_PALETTE.background.paper;
-    return (React.createElement(TwakeMuiThemeProvider, { themeOptions: { palette: BASE_PALETTE } },
+    return (React.createElement(TwakeMuiThemeProvider, { palette: CUSTOM_PALETTE },
         React.createElement(Stack, { spacing: 4, sx: { p: 3, minWidth: 640 } },
             React.createElement("section", null,
                 React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Palette Colors"),
@@ -202,27 +117,19 @@ export const Docs = {
     parameters: {
         docs: {
             source: {
-                code: `import { makePalette } from '@linagora/twake-mui'
+                code: `import { TwakeMuiThemeProvider } from '@linagora/twake-mui'
 import type { PaletteJson } from '@linagora/twake-mui'
 
-const customPalette: PaletteJson = {
+const CUSTOM_PALETTE: Partial<PaletteJson> = {
   Primary: {
-    '500': '#FF00AA',
+    50: '#FFF9F6', 100: '#FFF5F0', 200: '#FFF1E3', 300: '#FFD8BF',
+    400: '#FFAE7B', 500: '#FF8D46', 600: '#F67E35', 700: '#F66F35',
+    800: '#E55B31', 900: '#7A411E',
     ContrastText: '#fff'
-  },
-  Secondary: {
-    '500': '#00FFFF',
-    ContrastText: '#000'
-  },
-  // ...Error, Warning, Success, Info, Grey, Common
+  }
 }
 
-// Generate a full MUI palette from your design tokens
-const basePalette = makePalette('light', customPalette)
-
-<TwakeMuiThemeProvider
-  themeOptions={{palette: basePalette}}
->
+<TwakeMuiThemeProvider palette={CUSTOM_PALETTE}>
   <YourApp />
 </TwakeMuiThemeProvider>`
             }

package/dist/stories/Typography.stories.d.ts

@@ -2,6 +2,6 @@ import { Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Typography>;
 export default meta;
-type Story = StoryObj<typeof Typography>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/Typography.stories.js

@@ -1,10 +1,47 @@
-import { Typography, Stack } from '@mui/material';
+import { Grid, Stack, Typography } from '@mui/material';
 import React from 'react';
+const variants = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'button',
+    'overline',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'caption'
+];
+const colors = [
+    'inherit',
+    'primary',
+    'secondary',
+    'textPrimary',
+    'textSecondary',
+    'textDisabled',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
 const meta = {
     title: 'Typography',
     component: Typography,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: 'select', options: variants },
+        color: { control: 'select', options: colors },
+        align: {
+            control: 'select',
+            options: ['inherit', 'left', 'center', 'right', 'justify']
+        },
+        noWrap: { control: 'boolean' },
+        gutterBottom: { control: 'boolean' }
+    }
 };
 export default meta;
 export const Default = {
@@ -13,40 +50,17 @@ export const Default = {
         children: 'This is sample typography text.'
     }
 };
-// Visual Regression - All typography combined
+// Visual Regression - The cozy-ui grid, every variant for every colour
 export const Screenshot = {
     tags: ['argos'],
-    render: () => (React.createElement(Stack, { spacing: 2 },
+    render: () => (React.createElement(Stack, { spacing: 4 },
         React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "All Variants"),
-            React.createElement(Stack, { spacing: 1 },
-                React.createElement(Typography, { variant: "h1" }, "Heading 1"),
-                React.createElement(Typography, { variant: "h2" }, "Heading 2"),
-                React.createElement(Typography, { variant: "h3" }, "Heading 3"),
-                React.createElement(Typography, { variant: "h4" }, "Heading 4"),
-                React.createElement(Typography, { variant: "h5" }, "Heading 5"),
-                React.createElement(Typography, { variant: "h6" }, "Heading 6"),
-                React.createElement(Typography, { variant: "subtitle1" }, "Subtitle 1"),
-                React.createElement(Typography, { variant: "subtitle2" }, "Subtitle 2"),
-                React.createElement(Typography, { variant: "body1" }, "Body 1 - This is the default body text style used for most content."),
-                React.createElement(Typography, { variant: "body2" }, "Body 2 - This is a smaller body text style for secondary content."),
-                React.createElement(Typography, { variant: "button" }, "Button Text"),
-                React.createElement(Typography, { variant: "caption" }, "Caption text"),
-                React.createElement(Typography, { variant: "overline" }, "OVERLINE TEXT"))),
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Default colors"),
+            React.createElement(Stack, { spacing: 1 }, variants.map(variant => (React.createElement(Typography, { key: variant, variant: variant }, variant))))),
         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"),
-                React.createElement(Typography, { color: "error" }, "Error color text"),
-                React.createElement(Typography, { color: "warning" }, "Warning color text"),
-                React.createElement(Typography, { color: "info" }, "Info color text"),
-                React.createElement(Typography, { color: "textPrimary" }, "Text primary color"),
-                React.createElement(Typography, { color: "textSecondary" }, "Text secondary color"),
-                React.createElement(Typography, { color: "textDisabled" }, "Text disabled color"),
-                React.createElement(Typography, { sx: { color: 'text.primary' } }, "Text primary color"),
-                React.createElement(Typography, { sx: { color: 'text.secondary' } }, "Text secondary color")))))
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors"),
+            React.createElement(Grid, { container: true, spacing: 2 }, colors.map(color => (React.createElement(Grid, { key: color, size: { xs: 6, sm: 3, md: 2 } },
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement("div", null, color),
+                    variants.map(variant => (React.createElement(Typography, { key: variant, variant: variant, color: color }, variant)))))))))))
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -57,6 +57,7 @@
     "react-dom": "^18"
   },
   "dependencies": {
+    "@mui/utils": "^9.2.0",
     "classnames": "^2.5.1"
   },
   "devDependencies": {

package/dist/lib/darkOverrides.d.ts

@@ -1,2 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-export declare const darkOverrides: NonNullable<ThemeOptions['components']>;

package/dist/lib/darkOverrides.js

@@ -1,3 +0,0 @@
-import { merge } from 'lodash';
-import { lightOverrides } from './lightOverrides';
-export const darkOverrides = merge({}, lightOverrides);

package/dist/lib/lightOverrides.d.ts

@@ -1,2 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-export declare const lightOverrides: NonNullable<ThemeOptions['components']>;