@linagora/twake-mui 7.1.0 → 9.0.0

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+# @linagora/twake-mui [9.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@8.0.0...@linagora/twake-mui@9.0.0) (2026-09-21)
+
+
+### Features
+
+* **twake-mui:** Migrate Nav from cozy-ui ([5dd0516](https://github.com/linagora/twake-ui/commit/5dd05165741159437f796935f81d9d907eb808f2))
+* **twake-mui:** Migrate Sidebar from cozy-ui ([08f4179](https://github.com/linagora/twake-ui/commit/08f4179493090399cca1e59878d405b945777225))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** You need "twake-i18n" >= "0.5.0"
+
+# @linagora/twake-mui [8.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@7.1.0...@linagora/twake-mui@8.0.0) (2026-09-18)
+
+
+### Bug Fixes
+
+* **twake-mui:** Anchor the static Snackbar story top left ([e1cee47](https://github.com/linagora/twake-ui/commit/e1cee476de86ec828cd836b5ce5dd2925360ff29))
+* **twake-mui:** Center the Alert message vertically ([38cb5c2](https://github.com/linagora/twake-ui/commit/38cb5c2200adcaa8b9348fca235a54698b5e26e8))
+* **twake-mui:** Clean old Avatar override ([202ffb6](https://github.com/linagora/twake-ui/commit/202ffb652010dee61e61b0386a4fbe45f6074859))
+* **twake-mui:** Clean old Button override ([f0c45eb](https://github.com/linagora/twake-ui/commit/f0c45eb10e4610176509a1fd89179dcd43d4144a))
+* **twake-mui:** Clean old Dialog override ([50544ef](https://github.com/linagora/twake-ui/commit/50544ef9426294d0d54a843e61d04b829cb914c2))
+* **twake-mui:** Clean old TextField override ([23b4253](https://github.com/linagora/twake-ui/commit/23b42530b26909abd822e6da8b99b250f5fead39))
+* **twake-mui:** Draw the secondary Switch in the success colour like cozy-ui ([cff53f0](https://github.com/linagora/twake-ui/commit/cff53f0cc0c7f0098843d6f5c0acc5dd9ca4553d))
+* **twake-mui:** Emit colorSchemes with our own tokens for both modes ([962054b](https://github.com/linagora/twake-ui/commit/962054b74fa214494b6786bd3bc2ce4c98fd8714))
+* **twake-mui:** Replace the runtime lodash import with @mui/utils deepmerge ([e6940ff](https://github.com/linagora/twake-ui/commit/e6940ff4d99987ea49ef7a370c01aef43e862373))
+* **twake-mui:** Thread mode into ThemeProvider's defaultMode ([1f98a09](https://github.com/linagora/twake-ui/commit/1f98a09b4421497b50717bc36353043838a36c63))
+* **twake-mui:** Use the 16px Alert icons of cozy-ui ([c781a7d](https://github.com/linagora/twake-ui/commit/c781a7dca3ccacf04c94eb9dd7b0f14b4fcecf70))
+
+
+### Features
+
+* Expose cssVariables in TypeScript ([23a151e](https://github.com/linagora/twake-ui/commit/23a151eaf47287d1cc49364073d10fd0acceccc9))
+* **twake-mui:** Accept the primary and secondary Button variants of cozy-ui ([daf67fb](https://github.com/linagora/twake-ui/commit/daf67fb9544a11338556201657a6f0e687aab8cd))
+* **twake-mui:** Let apps customize the whole theme ([9af16db](https://github.com/linagora/twake-ui/commit/9af16db3720708f79d69bf48c14522ef65b6b7cc))
+* **twake-mui:** Migrate Alert from cozy-ui ([916405d](https://github.com/linagora/twake-ui/commit/916405d6c2ce25bd83c445a47ba240303291a7b8))
+* **twake-mui:** Migrate Avatar from cozy-ui ([214787f](https://github.com/linagora/twake-ui/commit/214787fbb514b1fe7b510234405821f0256e34e6))
+* **twake-mui:** Migrate Badge from cozy-ui ([3d9509d](https://github.com/linagora/twake-ui/commit/3d9509d318e048505bee95ce80f5369da9fb25b5))
+* **twake-mui:** Migrate Button from cozy-ui ([704f267](https://github.com/linagora/twake-ui/commit/704f267cd13f9998faf3fbb095b3ab798b518950))
+* **twake-mui:** Migrate Checkbox from cozy-ui ([5281cb1](https://github.com/linagora/twake-ui/commit/5281cb1c5eea50ec24bfb528106f13cfb705572a))
+* **twake-mui:** Migrate Dialog from cozy-ui ([d420cf5](https://github.com/linagora/twake-ui/commit/d420cf5c4f9e7aa37c60f6122fd0e903586e046b))
+* **twake-mui:** Migrate Divider from cozy-ui ([44e1d6c](https://github.com/linagora/twake-ui/commit/44e1d6cc13f612a2295895f4be03856eaf90c7a9))
+* **twake-mui:** Migrate Radio from cozy-ui ([effd21f](https://github.com/linagora/twake-ui/commit/effd21fddab6caf43a7e480b16cbd6e93611c34b))
+* **twake-mui:** Migrate Snackbar from cozy-ui ([56f2cac](https://github.com/linagora/twake-ui/commit/56f2cac2d632d19bab976ccee9e70f1b20e5ffdb))
+* **twake-mui:** Migrate Switch from cozy-ui ([545280b](https://github.com/linagora/twake-ui/commit/545280bd72ef81eb62868e7f8b3dc7e058924466))
+* **twake-mui:** Migrate Tabs from cozy-ui ([076ff98](https://github.com/linagora/twake-ui/commit/076ff986612d447c97385898faf10d4ba50bcca1))
+* **twake-mui:** Migrate TextField from cozy-ui ([6a4fd77](https://github.com/linagora/twake-ui/commit/6a4fd77ec5e49c76603b7bd8cd899157ef72fa6b))
+* **twake-mui:** Migrate Typography from cozy-ui ([7f59c34](https://github.com/linagora/twake-ui/commit/7f59c34e4f0a6502f8a30e676c9d7bb2a48f3025))
+* **twake-mui:** Re-export useColorScheme for runtime theme switching ([f3ed328](https://github.com/linagora/twake-ui/commit/f3ed328d45c6b5006403f975a5f07447f5ef2172))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** You must use `palette` prop instead of
+`themeOptions` of `TwakeMuiThemeProvider` to override
+the palette
+
 # @linagora/twake-mui [7.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@7.0.0...@linagora/twake-mui@7.1.0) (2026-09-10)
 
 

package/dist/components/Apptitle/index.js

@@ -1,15 +1,19 @@
 import { Icon, TwakeText } from '@linagora/twake-icons';
-import { Box, useTheme } from '@mui/material';
+import { Box } from '@mui/material';
 import React from 'react';
 const AppTitle = ({ appIcon, appTextIcon }) => {
-    const theme = useTheme();
-    const isLight = theme.palette.mode === 'light';
     if (!appIcon || !appTextIcon)
         return null;
     const AppTextIcon = appTextIcon;
     return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
         React.createElement(Icon, { icon: appIcon, size: "32" }),
-        React.createElement(TwakeText, { height: "22", style: { fill: isLight ? '#000' : '#fff' } }),
-        React.createElement(AppTextIcon, { height: 22, style: { width: 'auto', fill: isLight ? '#000' : '#fff' } })));
+        React.createElement(Box, { component: TwakeText, height: "22", sx: [
+                { fill: '#000' },
+                (theme) => theme.applyStyles('dark', { fill: '#fff' })
+            ] }),
+        React.createElement(Box, { component: AppTextIcon, height: 22, sx: [
+                { width: 'auto', fill: '#000' },
+                (theme) => theme.applyStyles('dark', { fill: '#fff' })
+            ] })));
 };
 export default AppTitle;

package/dist/components/Avatar/Avatar.stories.js

@@ -1,6 +1,10 @@
+import { Icon, Link } from '@linagora/twake-icons';
+import { AvatarGroup, Stack } from '@mui/material';
 import React from 'react';
 import { supportedColors } from './helpers';
 import { Avatar } from './index';
+const sizes = ['xs', 's', 'm', 'l', 'xl'];
+const image = 'https://i.pravatar.cc/150?img=11';
 const meta = {
     title: 'Avatar',
     component: Avatar,
@@ -13,8 +17,9 @@ const meta = {
         },
         size: {
             control: 'select',
-            options: ['xs', 's', 'm', 'l', 'xl']
+            options: sizes
         },
+        textColor: { control: 'color' },
         border: { control: 'boolean' },
         innerBorder: { control: 'boolean' },
         disabled: { control: 'boolean' },
@@ -30,44 +35,60 @@ export const Default = {
         children: 'JD'
     }
 };
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: 'wrap' } }, children)));
 // Visual Regression - Combined view for Argos testing
 export const Screenshot = {
     tags: ['argos'],
-    render: () => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' } },
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Sizes" }, sizes.map(size => (React.createElement(React.Fragment, { key: size },
+            React.createElement(Avatar, { size: size, color: "sunrise" }),
+            React.createElement(Avatar, { size: size, color: "sunrise" }, "AB"),
+            React.createElement(Avatar, { size: size, color: "sunrise" },
+                React.createElement(Icon, { icon: Link })))))),
+        React.createElement(Row, { title: "Colors" }, supportedColors.map(color => (React.createElement(Avatar, { key: color, color: color, size: "l" }, color.slice(0, 2).toUpperCase())))),
+        React.createElement(Row, { title: "Name-based colors" },
+            React.createElement(Avatar, { size: "l" }, "Alice"),
+            React.createElement(Avatar, { size: "l" }, "Bob"),
+            React.createElement(Avatar, { size: "l" }, "Charlie"),
+            React.createElement(Avatar, { size: "l" }, "Diana")),
+        React.createElement(Row, { title: "Default color" },
+            React.createElement(Avatar, { src: image, alt: "Image" }),
+            React.createElement(Avatar, { color: "none", src: image, alt: "Image, no color" }),
+            React.createElement(Avatar, { color: "sunrise", src: image, alt: "Image, sunrise" }),
+            React.createElement(Avatar, null),
+            React.createElement(Avatar, { color: "none" }),
+            React.createElement(Avatar, { color: "sunrise" }),
+            React.createElement(Avatar, null, "AB"),
+            React.createElement(Avatar, { color: "none" }, "BC"),
+            React.createElement(Avatar, { color: "sunrise" }, "CD")),
+        React.createElement(Row, { title: "Custom size and color" },
+            React.createElement(Avatar, { color: "sunrise", size: 94 }, "DE"),
+            React.createElement(Avatar, { color: "#0000ff" }, "EF"),
+            React.createElement(Avatar, { color: "grey", textColor: "white" }, "FG")),
+        React.createElement(Row, { title: "Borders" },
+            React.createElement(Avatar, { size: "l" }, "Default"),
+            React.createElement(Avatar, { size: "l", border: true }, "Border"),
+            React.createElement(Avatar, { size: "l", innerBorder: true }, "Inner"),
+            React.createElement(Avatar, { size: "l", border: true, innerBorder: true }, "Both"),
+            React.createElement(Avatar, { size: "l", color: "none", border: true, innerBorder: true },
+                React.createElement(Icon, { icon: Link }))),
+        React.createElement(Row, { title: "Disabled" },
+            React.createElement(Avatar, { size: "l", disabled: true }, "AB"),
+            React.createElement(Avatar, { size: "l", disabled: true, color: "sunrise" }, "CD"),
+            React.createElement(Avatar, { size: "l", disabled: true, src: image, alt: "Disabled" }),
+            React.createElement(Avatar, { size: "l", disabled: true, color: "none" },
+                React.createElement(Icon, { icon: Link }))),
         React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Sizes"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' } },
-                React.createElement(Avatar, { size: "xs" }, "XS"),
-                React.createElement(Avatar, { size: "s" }, "S"),
-                React.createElement(Avatar, { size: "m" }, "M"),
-                React.createElement(Avatar, { size: "l" }, "L"),
-                React.createElement(Avatar, { size: "xl" }, "XL"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, supportedColors.map(color => (React.createElement(Avatar, { key: color, color: color, size: "l" }, color.slice(0, 2).toUpperCase()))))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Name-based Colors"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
-                React.createElement(Avatar, { size: "l" }, "Alice"),
-                React.createElement(Avatar, { size: "l" }, "Bob"),
-                React.createElement(Avatar, { size: "l" }, "Charlie"),
-                React.createElement(Avatar, { size: "l" }, "Diana"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "With Image"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
-                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=11", alt: "User 1", size: "l" }),
-                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=12", alt: "User 2", size: "l" }),
-                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=13", alt: "User 3", size: "l" }))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Border Variants"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
-                React.createElement(Avatar, { size: "l" }, "Default"),
-                React.createElement(Avatar, { size: "l", border: true }, "Border"),
-                React.createElement(Avatar, { size: "l", innerBorder: true }, "Inner"),
-                React.createElement(Avatar, { size: "l", border: true, innerBorder: true }, "Both"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Disabled State"),
-            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
-                React.createElement(Avatar, { size: "l", disabled: true }, "D"),
-                React.createElement(Avatar, { size: "l", disabled: true, src: "https://i.pravatar.cc/150?img=14", alt: "Disabled" })))))
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Grouped"),
+            React.createElement(Stack, { spacing: 1 }, sizes.map(size => (React.createElement(Stack, { key: size, direction: "row", sx: { alignItems: 'center' } },
+                React.createElement(AvatarGroup, { max: 4, slotProps: { surplus: { className: `size-${size}` } } },
+                    React.createElement(Avatar, { size: size, color: supportedColors[0] }, "AB"),
+                    React.createElement(Avatar, { size: size, color: supportedColors[1] }, "BC"),
+                    React.createElement(Avatar, { size: size, src: image, alt: "Image" }),
+                    React.createElement(Avatar, { size: size, color: supportedColors[4] }, "EF"),
+                    React.createElement(Avatar, { size: size, color: supportedColors[5] }, "FG")),
+                React.createElement(Avatar, { size: size, color: "none", border: true, innerBorder: true },
+                    React.createElement(Icon, { icon: Link })))))))))
 };

package/dist/components/Avatar/helpers.d.ts

@@ -1,31 +1,3 @@
-export declare const sizeToFontSize: {
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
-export declare const sizeToNb: {
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
-export declare const sizeToFontWeight: {
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
-export declare const sizeToLineHeight: {
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
 export declare const supportedColors: readonly ["sunrise", "downy", "sugarCoral", "pinkBonnet", "blueMana", "nightBlue", "snowPea", "pluviophile", "cornflower", "paleGreen", "moonBlue"];
 export declare const colorMapping: Record<string, string>;
 /**

package/dist/components/Avatar/helpers.js

@@ -1,31 +1,3 @@
-export const sizeToFontSize = {
-    xs: 9.109,
-    s: 12.525,
-    m: 18.219,
-    l: 27.328,
-    xl: 36.438
-};
-export const sizeToNb = {
-    xs: 18,
-    s: 28,
-    m: 36,
-    l: 54,
-    xl: 72
-};
-export const sizeToFontWeight = {
-    xs: 500,
-    s: 500,
-    m: 500,
-    l: 600,
-    xl: 600
-};
-export const sizeToLineHeight = {
-    xs: 18.219,
-    s: 18.219,
-    m: 27.328,
-    l: 36.438,
-    xl: 45.547
-};
 export const supportedColors = [
     'sunrise',
     'downy',

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

@@ -1,16 +1,14 @@
 import { AvatarProps as MuiAvatarProps } from '@mui/material';
 import React from 'react';
-import { supportedColors } from './helpers';
-type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
-type AvatarColor = (typeof supportedColors)[number] | 'none';
-type AvatarDisplay = 'initial' | 'inline';
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 export interface AvatarProps extends Omit<MuiAvatarProps, 'color'> {
-    color?: AvatarColor;
+    color?: string;
     size?: AvatarSize | number;
+    textColor?: string;
     border?: boolean;
     innerBorder?: boolean;
     disabled?: boolean;
-    display?: AvatarDisplay;
+    display?: 'initial' | 'inline';
 }
 export declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/Avatar/index.js

@@ -1,38 +1,31 @@
 import { Avatar as MuiAvatar } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import cx from 'classnames';
 import React from 'react';
-import { colorMapping, nameToColor, supportedColors } from './helpers';
-const capitalize = (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-};
+import { colorMapping, nameToColor } from './helpers';
+const transientProps = ['background', 'textColor', 'customSize'];
 const StyledAvatar = styled(MuiAvatar, {
-    shouldForwardProp: prop => prop !== 'gradientColor'
-})(({ theme, gradientColor }) => ({
-    ...(gradientColor && {
-        color: theme.palette.primary.contrastText,
-        background: colorMapping[gradientColor] || undefined
-    })
+    shouldForwardProp: prop => !transientProps.includes(String(prop))
+})(({ background, textColor, customSize }) => ({
+    ...(customSize && {
+        width: customSize,
+        height: customSize,
+        fontSize: customSize / 2
+    }),
+    // The text stays white on a coloured avatar whatever the mode
+    ...(background && { background, color: '#fff' }),
+    ...(textColor && { color: textColor })
 }));
-export const Avatar = ({ className, color, size, border, innerBorder, disabled, display = 'initial', sx, ...props }) => {
-    const defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
-    const finalColor = color === 'none'
-        ? undefined
-        : color && supportedColors.includes(color)
-            ? color
-            : defaultColor;
-    const classNames = [];
-    if (className)
-        classNames.push(className);
-    if (size && typeof size === 'string')
-        classNames.push(`size-${size}`);
-    if (disabled)
-        classNames.push('disabled');
-    if (border)
-        classNames.push('border');
-    if (innerBorder)
-        classNames.push('innerBorder');
-    if (display !== 'initial')
-        classNames.push(`display${capitalize(display)}`);
-    return (React.createElement(StyledAvatar, { gradientColor: finalColor, className: classNames.join(' ') || undefined, sx: sx, ...props }));
+export const Avatar = ({ className, color, size = 'm', textColor, border, innerBorder, disabled, display = 'initial', children, ...props }) => {
+    const isCustomSize = typeof size === 'number';
+    const nameColor = typeof children === 'string' ? nameToColor(children) : '';
+    const madeColor = color === 'none' ? '' : color || nameColor;
+    return (React.createElement(StyledAvatar, { className: cx(className, {
+            [`size-${size}`]: !isCustomSize,
+            disabled,
+            border,
+            innerBorder,
+            displayInline: display === 'inline'
+        }), customSize: isCustomSize ? size : undefined, background: madeColor ? (colorMapping[madeColor] ?? madeColor) : undefined, textColor: textColor, ...props }, children));
 };
 export default Avatar;

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

@@ -0,0 +1,12 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import React from 'react';
+declare const legacyVariants: {
+    readonly primary: "contained";
+    readonly secondary: "outlined";
+};
+type LegacyVariant = keyof typeof legacyVariants;
+export interface ButtonProps extends Omit<MuiButtonProps, 'variant'> {
+    variant?: MuiButtonProps['variant'] | LegacyVariant;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,8 @@
+import { Button as MuiButton } from '@mui/material';
+import React from 'react';
+// legacy variant names, mapped to their MUI counterpart
+const legacyVariants = { primary: 'contained', secondary: 'outlined' };
+const isLegacy = (variant) => typeof variant === 'string' && variant in legacyVariants;
+export const Button = React.forwardRef(({ variant, ...props }, ref) => (React.createElement(MuiButton, { ref: ref, variant: isLegacy(variant) ? legacyVariants[variant] : variant, ...props })));
+Button.displayName = 'Button';
+export default Button;

package/dist/{stories → components/Dialog}/Dialog.stories.d.ts

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

package/dist/components/Dialog/Dialog.stories.js

@@ -0,0 +1,81 @@
+import { CrossMedium, FileTypeFolder, FileTypeText, Icon } from '@linagora/twake-icons';
+import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, List, ListItemButton, ListItemIcon, ListItemText, Stack } from '@mui/material';
+import React from 'react';
+import { Dialog } from './index';
+const sizes = ['small', 'medium', 'large', 'full'];
+const meta = {
+    title: 'Dialog',
+    component: Dialog,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: sizes },
+        fullScreen: { control: 'boolean' },
+        scroll: { control: 'select', options: ['paper', 'body'] }
+    }
+};
+export default meta;
+// The cozy-ui doc example: a close button, a title, a list and two actions
+const ExampleDialog = props => (React.createElement(Dialog, { "aria-labelledby": "dialog-title", ...props },
+    React.createElement(IconButton, { "aria-label": "Close", size: "medium", sx: { position: 'absolute', top: '1.15rem', right: '1.15rem' }, onClick: event => props.onClose?.(event, 'backdropClick') },
+        React.createElement(Icon, { icon: CrossMedium })),
+    React.createElement(DialogTitle, { id: "dialog-title", className: "dialogTitleWithClose" }, "Ada Lovelace"),
+    React.createElement(Divider, null),
+    React.createElement(List, { sx: { my: 1 } },
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeFolder, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text" })),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text", secondary: "I'm a secondary text" })),
+        React.createElement(Divider, { variant: "inset" }),
+        React.createElement(ListItemButton, null,
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: FileTypeText, size: 32 })),
+            React.createElement(ListItemText, { primary: "I'm a primary text" }))),
+    React.createElement(Divider, null),
+    React.createElement(DialogActions, null,
+        React.createElement(Button, { variant: "outlined", onClick: event => props.onClose?.(event, 'backdropClick') }, "Close Modal"),
+        React.createElement(Button, null, "Click Me"))));
+const OpenableDialog = props => {
+    const [open, setOpen] = React.useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setOpen(true) }, "Toggle modal"),
+        React.createElement(ExampleDialog, { ...props, open: open, onClose: () => setOpen(false) })));
+};
+export const Default = {
+    args: { size: 'medium' },
+    render: args => React.createElement(OpenableDialog, { ...args })
+};
+// Renders the dialog in the flow of the page rather than over it
+const staticProps = {
+    open: true,
+    disablePortal: true,
+    hideBackdrop: true,
+    disableAutoFocus: true,
+    disableScrollLock: true,
+    sx: { position: 'static', '& .MuiDialog-container': { height: 'auto' } }
+};
+// Visual Regression - Dialog styles
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Example"),
+            React.createElement(ExampleDialog, { ...staticProps })),
+        sizes.map(size => (React.createElement("section", { key: size },
+            React.createElement("h3", { style: { marginBottom: '12px' } }, size),
+            React.createElement(Dialog, { ...staticProps, size: size, fullScreen: false },
+                React.createElement(DialogTitle, null, "Dialog Title"),
+                React.createElement(DialogContent, null,
+                    React.createElement(DialogContentText, null,
+                        "This is a ",
+                        size,
+                        " dialog with a title, some content and two action buttons.")),
+                React.createElement(DialogActions, null,
+                    React.createElement(Button, { variant: "outlined" }, "Cancel"),
+                    React.createElement(Button, null, "Confirm"))))))))
+};

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

@@ -0,0 +1,9 @@
+import { DialogProps as MuiDialogProps } from '@mui/material';
+import React from 'react';
+export type DialogSize = 'small' | 'medium' | 'large' | 'full';
+export interface DialogProps extends MuiDialogProps {
+    /** Paper width. Every size but `small` goes full screen on mobile */
+    size?: DialogSize;
+}
+export declare const Dialog: React.FC<DialogProps>;
+export default Dialog;

package/dist/components/Dialog/index.js

@@ -0,0 +1,9 @@
+import { Dialog as MuiDialog } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+export const Dialog = ({ size = 'medium', fullScreen, classes, ...props }) => {
+    const { isMobile } = useBreakpoints();
+    return (React.createElement(MuiDialog, { fullScreen: fullScreen ?? (size !== 'small' && isMobile), classes: { ...classes, paper: cx(size, classes?.paper) }, ...props }));
+};
+export default Dialog;

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

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+}, "style" | "className" | "children" | "classes" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export type NavProps = React.ComponentProps<typeof NavRoot>;
+export declare const Nav: (props: NavProps) => React.ReactElement;
+export {};

package/dist/components/Nav/index.js

@@ -0,0 +1,14 @@
+import { List } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+const NavRoot = styled(List)(({ theme }) => ({
+    margin: '24px 0',
+    padding: 0,
+    [theme.breakpoints.down('lg')]: {
+        display: 'flex',
+        justifyContent: 'space-around',
+        margin: '6px 0 4px'
+    }
+}));
+export const Nav = (props) => (React.createElement("nav", null,
+    React.createElement(NavRoot, { ...props })));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NavDesktopDropdownProps {
+    label: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    limit?: number;
+}
+export declare const NavDesktopDropdown: ({ label, children, defaultOpen, limit }: NavDesktopDropdownProps) => React.ReactElement | null;

package/dist/components/NavDesktopDropdown/index.js

@@ -0,0 +1,24 @@
+import { Bottom, Icon } from '@linagora/twake-icons';
+import { ListItem, Typography } from '@mui/material';
+import React, { Children, isValidElement, useState } from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
+    const { isDesktop } = useBreakpoints();
+    const [open, setOpen] = useState(defaultOpen);
+    const isActivated = Children.toArray(children).filter(isValidElement).length > limit;
+    const onToggle = () => setOpen(current => !current);
+    if (!isDesktop)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItem, { onClick: isActivated ? onToggle : undefined, sx: {
+                minHeight: 48,
+                py: 1,
+                px: 2,
+                justifyContent: 'space-between',
+                cursor: isActivated ? 'pointer' : undefined
+            } },
+            React.createElement(Typography, { variant: "caption", sx: { color: 'text.secondary' } }, label),
+            isActivated && (React.createElement(Typography, { component: "span", sx: { display: 'flex', ml: '5px', color: 'text.secondary' } },
+                React.createElement(Icon, { icon: Bottom, size: 10, rotate: open ? 0 : -90 })))),
+        open && children));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface NavDesktopLimiterProps {
+    children: React.ReactNode;
+    max?: number;
+}
+export declare const NavDesktopLimiter: ({ children, max }: NavDesktopLimiterProps) => React.ReactElement | null;

package/dist/components/NavDesktopLimiter/index.js

@@ -0,0 +1,31 @@
+import { Bottom, Top } from '@linagora/twake-icons';
+import React, { Children, isValidElement, useState } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { NavIcon } from '../NavIcon';
+import { NavItem } from '../NavItem';
+import { NavLink } from '../NavLink';
+import { NavText } from '../NavText';
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+const locales = { en, fr, ru, vi };
+export const NavDesktopLimiter = ({ children, max = 5 }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    const [viewingAll, setViewingAll] = useState(false);
+    const { isMobile } = useBreakpoints();
+    const items = Children.toArray(children).filter(isValidElement);
+    const amountHidden = Math.max(0, items.length - max);
+    if (isMobile)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        viewingAll ? items : items.slice(0, max),
+        amountHidden > 0 && (React.createElement(NavItem, { secondary: true },
+            React.createElement(NavLink, { onClick: () => setViewingAll(current => !current) },
+                React.createElement(NavIcon, { icon: viewingAll ? Top : Bottom }),
+                React.createElement(NavText, null, viewingAll
+                    ? t('NavDesktopLimiter.showLess')
+                    : `${t('NavDesktopLimiter.showMore')} (${amountHidden})`))))));
+};

package/dist/components/NavDesktopLimiter/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Show More",
+        "showLess": "Show Less"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Voir plus",
+        "showLess": "Voir moins"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Показать больше",
+        "showLess": "Показать меньше"
+    }
+}

package/dist/components/NavDesktopLimiter/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "NavDesktopLimiter": {
+        "showMore": "Hiện thêm",
+        "showLess": "Hiện ít hơn"
+    }
+}