@linagora/twake-mui 7.0.0 → 8.0.0

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+# @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)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old IconButton override ([b5a7733](https://github.com/linagora/twake-ui/commit/b5a7733ad9451ea9950e93a787133a2f9bf951d5))
+
+
+### Features
+
+* **twake-mui:** Migrate IconButton from cozy-ui ([d6aca04](https://github.com/linagora/twake-ui/commit/d6aca0454195f1d3ffd5170b2463f5bec9254678))
+
 # @linagora/twake-mui [7.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@6.0.0...@linagora/twake-mui@7.0.0) (2026-09-08)
 
 

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/components/Chip/index.js

@@ -2,9 +2,9 @@ import { Icon, CrossSmall } from '@linagora/twake-icons';
 import { Box, Chip as MuiChip, IconButton } from '@mui/material';
 import cx from 'classnames';
 import React from 'react';
-export const Chip = ({ className, deleteIcon = (React.createElement(IconButton, null,
-    React.createElement(Icon, { icon: CrossSmall }))), label, endIcon, square = false, ...props }) => {
-    return (React.createElement(MuiChip, { className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+export const Chip = ({ className, label, endIcon, square = false, size, deleteIcon = (React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+    React.createElement(Icon, { icon: CrossSmall }))), ...props }) => {
+    return (React.createElement(MuiChip, { size: size, className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
             label,
             React.createElement("span", null, endIcon))) : (label), ...props }));
 };

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/Switch/Switch.stories.d.ts

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

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,58 @@
+import { Check } from '@linagora/twake-icons';
+import { Divider, FormControlLabel, FormGroup, Stack, Typography } from '@mui/material';
+import React from 'react';
+import { Switch } from './index';
+const colors = ['primary', 'secondary', 'success', 'default'];
+const meta = {
+    title: 'Switch',
+    component: Switch,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: { control: 'select', options: colors },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        icon: { control: 'boolean', mapping: { true: Check, false: undefined } }
+    }
+};
+export default meta;
+const StateSwitch = ({ defaultChecked, ...props }) => {
+    const [checked, setChecked] = React.useState(!!defaultChecked);
+    return (React.createElement(Switch, { checked: checked, onChange: event => setChecked(event.target.checked), ...props }));
+};
+export const Default = {
+    args: { color: 'primary' },
+    render: args => React.createElement(StateSwitch, { defaultChecked: true, ...args })
+};
+const Labelled = ({ labelPlacement }) => (React.createElement(Stack, { spacing: 1 },
+    React.createElement(Typography, { variant: "h4" }, "With labels"),
+    React.createElement(FormGroup, { row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary" }), label: "With label", labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", checked: true }), label: "With label - checked", labelPlacement: labelPlacement })),
+    React.createElement(Typography, { variant: "h5" }, "With disable"),
+    colors.map(color => (React.createElement(FormGroup, { key: color, row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: color, disabled: true }), label: color, labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: color, checked: true, disabled: true }), label: `${color} - checked`, labelPlacement: labelPlacement })))),
+    React.createElement(FormGroup, { row: true },
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", icon: Check, disabled: true }), label: "primary with icon", labelPlacement: labelPlacement }),
+        React.createElement(FormControlLabel, { control: React.createElement(Switch, { color: "primary", icon: Check, checked: true, disabled: true }), label: "primary with icon - checked", labelPlacement: labelPlacement }))));
+// Visual Regression - Every example of the cozy-ui Switch doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 2 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors, with icon"),
+            colors.map(color => (React.createElement(Stack, { key: color, direction: "row", sx: { alignItems: 'center' } },
+                React.createElement(Typography, { sx: { width: 96 } },
+                    color,
+                    ":"),
+                React.createElement(Switch, { color: color, icon: Check }),
+                React.createElement(Switch, { color: color, icon: Check, checked: true }))))),
+        React.createElement(Divider, null),
+        React.createElement("section", null,
+            React.createElement(Labelled, null)),
+        React.createElement(Divider, null),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Label before"),
+            React.createElement(Labelled, { labelPlacement: "start" }))))
+};

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

@@ -0,0 +1,9 @@
+import { IconProps } from '@linagora/twake-icons';
+import { SwitchProps as MuiSwitchProps } from '@mui/material';
+import React from 'react';
+export interface SwitchProps extends Omit<MuiSwitchProps, 'icon' | 'checkedIcon'> {
+    /** A twake icon drawn inside the thumb */
+    icon?: IconProps['icon'];
+}
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/components/Switch/index.js

@@ -0,0 +1,8 @@
+import { Icon } from '@linagora/twake-icons';
+import { Switch as MuiSwitch } from '@mui/material';
+import React from 'react';
+export const Switch = ({ icon, ...props }) => {
+    const thumb = (React.createElement("span", { className: "switchThumb" }, !!icon && React.createElement(Icon, { icon: icon, size: 14 })));
+    return React.createElement(MuiSwitch, { icon: thumb, checkedIcon: thumb, ...props });
+};
+export default Switch;

package/dist/components/Tabs/Tabs.stories.d.ts

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