@linagora/twake-mui 15.2.0 → 16.0.1

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## @linagora/twake-mui [16.0.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.0.0...@linagora/twake-mui@16.0.1) (2026-10-19)
+
+
+### Bug Fixes
+
+* **twake-mui:** Disabled ContactPopoved action has now visible state ([bcbf81e](https://github.com/linagora/twake-ui/commit/bcbf81e29cb997599cacc5fb0ea34a5813905820))
+
+# @linagora/twake-mui [16.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.2.0...@linagora/twake-mui@16.0.0) (2026-10-19)
+
+
+### Code Refactoring
+
+* **twake-mui:** Export Dialog as default only ([ed447eb](https://github.com/linagora/twake-ui/commit/ed447eb8041974c1b4d3b55bb7160740003a787e))
+
+
+### Features
+
+* **twake-mui:** Migrate ConfirmDialog from cozy-ui ([62098f2](https://github.com/linagora/twake-ui/commit/62098f26bafbf660126e9a408fbb650d3914187b))
+* **twake-mui:** Migrate FixedActionsDialog from cozy-ui ([61c34b1](https://github.com/linagora/twake-ui/commit/61c34b12069ab66d59498342790a26508f00d8a2))
+* **twake-mui:** Migrate FixedDialog from cozy-ui ([bb6ba7f](https://github.com/linagora/twake-ui/commit/bb6ba7f66938fff8bd8cc51ab9c17c7554119394))
+* **twake-mui:** Migrate IllustrationDialog from cozy-ui ([ba5525e](https://github.com/linagora/twake-ui/commit/ba5525ef40e9ec4d018c62ef96f9d6d8806c17fa))
+* **twake-mui:** Migrate InstallFlagshipAppDialog from cozy-ui ([4869572](https://github.com/linagora/twake-ui/commit/48695729c9c89651d21f10140fa3fd83c6e2b1d4))
+* **twake-mui:** Migrate PermissionDialog from cozy-ui ([b8f9628](https://github.com/linagora/twake-ui/commit/b8f962838b91c23b85d8528b07504be79d46f33f))
+* **twake-mui:** Migrate ShortcutDialog from cozy-ui ([74c0614](https://github.com/linagora/twake-ui/commit/74c061468784736d77ef3a738b20ba4d0bfece15))
+* **twake-mui:** Migrate StandardDialog from cozy-ui ([a43530f](https://github.com/linagora/twake-ui/commit/a43530f7906a39a518ae97a15b0e006d1e46ab71))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** DialogDefault is no longer exported. Import Dialog
+instead.
+
 # @linagora/twake-mui [15.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.1.0...@linagora/twake-mui@15.2.0) (2026-10-19)
 
 

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ContactPopover>;
 export default meta;
 type Story = StoryObj<typeof ContactPopover>;
 export declare const Default: Story;
+export declare const AllActionsVariants: Story;

package/dist/components/ContactPopover/ContactPopover.stories.js

@@ -31,39 +31,34 @@ const meta = {
     }
 };
 export default meta;
+const Variant = ({ title, children }) => (React.createElement(Box, null,
+    React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, title),
+    children));
 export const Default = {
-    render: () => {
-        return (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Default \u2014 all actions"),
-                React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
-                    React.createElement(Chip, { label: "John Doe", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
-                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
-                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
-                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Email only"),
-                React.createElement(ContactPopover, { name: "", email: "jane.smith@example.com" },
-                    React.createElement(Chip, { label: "jane.smith@example.com", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.EmailAction, { url: "mailto:jane.smith@example.com" })))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Without actions"),
-                React.createElement(ContactPopover, { name: "Alice Brown", email: "alice.brown@example.com" },
-                    React.createElement(Chip, { label: "Alice Brown", clickable: true }))),
-            React.createElement(Box, null,
-                React.createElement(Typography, { variant: "subtitle2", gutterBottom: true }, "Long name / email"),
-                React.createElement(ContactPopover, { name: "Christopher Alexander Montgomery", email: "christopher.montgomery@verylongdomain.example.com" },
-                    React.createElement(Chip, { label: "Christopher Alexander Montgomery", clickable: true }),
-                    React.createElement(ContactPopover.Actions, null,
-                        React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/christopher" }),
-                        React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/christopher" }),
-                        React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/christopher" }))))));
-    },
+    render: () => (React.createElement(ContactPopover, { name: "John Doe", email: "john.doe@example.com" },
+        React.createElement(Chip, { label: "John Doe", clickable: true }),
+        React.createElement(ContactPopover.Actions, null,
+            React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+            React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+            React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+            React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" })))),
     play: async ({ canvas, userEvent }) => {
         await userEvent.click(canvas.getByText('John Doe'));
         await screen.findByText('john.doe@example.com');
     }
 };
+export const AllActionsVariants = {
+    render: () => (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 } },
+        React.createElement(Variant, { title: "Default \u2014 all actions" },
+            React.createElement(ContactPopover.Actions, null,
+                React.createElement(ContactPopover.EmailAction, { url: "https://mail.example.com/john.doe" }),
+                React.createElement(ContactPopover.CalendarAction, { url: "https://calendar.example.com/john.doe" }),
+                React.createElement(ContactPopover.ChatAction, { url: "https://chat.example.com/john.doe" }),
+                React.createElement(ContactPopover.VideoAction, { url: "https://meet.example.com/john.doe" }))),
+        React.createElement(Variant, { title: "Default \u2014 all actions \u2014 Disabled" },
+            React.createElement(ContactPopover.Actions, null,
+                React.createElement(ContactPopover.EmailAction, { disabled: true, url: "https://mail.example.com/jane.doe" }),
+                React.createElement(ContactPopover.CalendarAction, { disabled: true, url: "https://calendar.example.com/jane.doe" }),
+                React.createElement(ContactPopover.ChatAction, { disabled: true, url: "https://chat.example.com/jane.doe" }),
+                React.createElement(ContactPopover.VideoAction, { disabled: true, url: "https://meet.example.com/jane.doe" })))))
+};

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20 })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: Discuss, size: 20 })));
 };

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,9 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
-        React.createElement(Icon, { icon: Camera, size: 20, color: theme.vars.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            color: theme.vars.palette.text.icon
+        } },
+        React.createElement(Icon, { icon: Camera, size: 20 })));
 };

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

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

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

@@ -1,7 +1,7 @@
 import { CrossMedium, FileTypeFolder, FileTypeText, Icon } from '@linagora/twake-icons';
 import { Button, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, List, ListItemIcon, Stack } from '@mui/material';
 import React from 'react';
-import { Dialog } from './index';
+import Dialog from './index';
 import ListItemButton from '../ListItemButton';
 import ListItemText from '../ListItemText';
 const sizes = ['small', 'medium', 'large', 'full'];

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

@@ -5,5 +5,5 @@ 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>;
+declare const Dialog: React.FC<DialogProps>;
 export default Dialog;

package/dist/components/Dialog/index.js

@@ -2,7 +2,7 @@ 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 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 }));
 };

package/dist/components/Dialogs/ConfirmDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface ConfirmDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Small dialog asking to confirm an action, its title scrolling with the content */
+declare const ConfirmDialog: ({ size, title, content, actions, actionsLayout, ...props }: ConfirmDialogProps) => React.ReactElement;
+export default ConfirmDialog;

package/dist/components/Dialogs/ConfirmDialog.js

@@ -0,0 +1,16 @@
+import { DialogContent, DialogTitle } from '@mui/material';
+import React from 'react';
+import DialogFluidContent from './DialogFluidContent';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Small dialog asking to confirm an action, its title scrolling with the content */
+const ConfirmDialog = ({ size = 'small', title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dialogActionsProps, dialogContentProps } = useDialogLayout({ ...props, size, isFluidTitle: true });
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement(DialogFluidContent, { header: title && (React.createElement("div", { className: "dialogTitleFluidContainer" },
+                    React.createElement(DialogTitle, { ...dialogTitleProps }, title))), content: content, actions: actions, actionsLayout: actionsLayout, dialogActionsProps: dialogActionsProps }))));
+};
+export default ConfirmDialog;

package/dist/components/Dialogs/DialogBackButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@mui/material';
+import React from 'react';
+export interface DialogBackButtonProps extends IconButtonProps {
+    onClick: NonNullable<IconButtonProps['onClick']>;
+}
+/** Back button pinned to the top left corner of a dialog */
+declare const DialogBackButton: ({ className, ...props }: DialogBackButtonProps) => React.ReactElement;
+export default DialogBackButton;

package/dist/components/Dialogs/DialogBackButton.js

@@ -0,0 +1,14 @@
+import { Icon, Previous } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { locales } from './locales';
+/** Back button pinned to the top left corner of a dialog */
+const DialogBackButton = ({ className, ...props }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(IconButton, { ...props, "aria-label": t('Dialogs.backButton'), className: cx('dialogIconButton', 'dialogBackButton', className), size: "medium" },
+        React.createElement(Icon, { icon: Previous })));
+};
+export default DialogBackButton;

package/dist/components/Dialogs/DialogCloseButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@mui/material';
+import React from 'react';
+export interface DialogCloseButtonProps extends IconButtonProps {
+    onClick: NonNullable<IconButtonProps['onClick']>;
+}
+/** Close button pinned to the top right corner of a dialog */
+declare const DialogCloseButton: ({ className, ...props }: DialogCloseButtonProps) => React.ReactElement;
+export default DialogCloseButton;

package/dist/components/Dialogs/DialogCloseButton.js

@@ -0,0 +1,14 @@
+import { CrossMedium, Icon } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import { locales } from './locales';
+/** Close button pinned to the top right corner of a dialog */
+const DialogCloseButton = ({ className, ...props }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    return (React.createElement(IconButton, { ...props, "aria-label": t('Dialogs.closeButton'), className: cx('dialogIconButton', 'dialogCloseButton', className), size: "medium" },
+        React.createElement(Icon, { icon: CrossMedium })));
+};
+export default DialogCloseButton;

package/dist/components/Dialogs/DialogFluidContent.d.ts

@@ -0,0 +1,12 @@
+import { DialogActionsProps } from '@mui/material';
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+export interface DialogFluidContentProps extends Omit<DialogSectionsProps, 'title'> {
+    /** Rendered above the content, inside the scrolling area */
+    header?: React.ReactNode;
+    dialogActionsProps: DialogActionsProps;
+    className?: string;
+}
+/** Content of a dialog whose actions follow the content, and stick to the bottom of the screen on mobile */
+declare const DialogFluidContent: ({ header, content, actions, actionsLayout, dialogActionsProps, className }: DialogFluidContentProps) => React.ReactElement;
+export default DialogFluidContent;

package/dist/components/Dialogs/DialogFluidContent.js

@@ -0,0 +1,11 @@
+import { DialogActions } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+/** Content of a dialog whose actions follow the content, and stick to the bottom of the screen on mobile */
+const DialogFluidContent = ({ header, content, actions, actionsLayout, dialogActionsProps, className }) => (React.createElement("div", { className: cx('dialogContentInner withFluidActions', className) },
+    header,
+    React.createElement("div", { className: cx('dialogContentWrapper', {
+            withActions: Boolean(actions)
+        }) }, content),
+    actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx('dialogActionsFluid', { columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+export default DialogFluidContent;

package/dist/components/Dialogs/DialogNavButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DialogLayoutProps } from './useDialogLayout';
+export interface DialogNavButtonsProps extends Pick<DialogLayoutProps, 'onClose' | 'onBack'> {
+    id: string;
+    fullScreen: boolean;
+}
+/** Close and back buttons of a dialog. On full screen, a single back button calls `onBack`, or `onClose` without it */
+declare const DialogNavButtons: ({ id, fullScreen, onClose, onBack }: DialogNavButtonsProps) => React.ReactElement | null;
+export default DialogNavButtons;

package/dist/components/Dialogs/DialogNavButtons.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import DialogBackButton from './DialogBackButton';
+import DialogCloseButton from './DialogCloseButton';
+/** Close and back buttons of a dialog. On full screen, a single back button calls `onBack`, or `onClose` without it */
+const DialogNavButtons = ({ id, fullScreen, onClose, onBack }) => {
+    const onBackOrClose = onBack ?? onClose;
+    if (fullScreen) {
+        return onBackOrClose ? (React.createElement(DialogBackButton, { onClick: onBackOrClose, "data-testid": `modal-backclose-button-${id}` })) : null;
+    }
+    return (React.createElement(React.Fragment, null,
+        onClose && (React.createElement(DialogCloseButton, { onClick: onClose, "data-testid": `modal-close-button-${id}` })),
+        onBack && (React.createElement(DialogBackButton, { onClick: onBack, "data-testid": `modal-back-button-${id}` }))));
+};
+export default DialogNavButtons;

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { StandardDialogProps } from './StandardDialog';
+declare const dialogs: {
+    StandardDialog: ({ title, content, actions, actionsLayout, ...props }: StandardDialogProps) => React.ReactElement;
+    ConfirmDialog: ({ size, title, content, actions, actionsLayout, ...props }: import("./ConfirmDialog").ConfirmDialogProps) => React.ReactElement;
+    FixedDialog: ({ title, content, actions, actionsLayout, ...props }: import("./FixedDialog").FixedDialogProps) => React.ReactElement;
+    FixedActionsDialog: ({ title, content, actions, actionsLayout, ...props }: import("./FixedActionsDialog").FixedActionsDialogProps) => React.ReactElement;
+    IllustrationDialog: ({ title, content, actions, actionsLayout, ...props }: import("./IllustrationDialog").IllustrationDialogProps) => React.ReactElement;
+    PermissionDialog: React.FC<StandardDialogProps>;
+};
+type DialogName = keyof typeof dialogs;
+interface StoryArgs extends Pick<StandardDialogProps, 'size' | 'actionsLayout' | 'align' | 'disableTitleAutoPadding' | 'disableGutters' | 'fullScreen'> {
+    dialog: DialogName;
+    contentLength: 'short' | 'long';
+    longTitle: boolean;
+    hideTitle: boolean;
+    showActions: boolean;
+    withCloseButton: boolean;
+    withBackButton: boolean;
+    withBackground: boolean;
+    titleWithButton: boolean;
+}
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StandardDialogScreenshot: Story;
+export declare const ConfirmDialogScreenshot: Story;
+export declare const FixedDialogScreenshot: Story;
+export declare const FixedActionsDialogScreenshot: Story;
+export declare const IllustrationDialogScreenshot: Story;
+export declare const PermissionDialogScreenshot: Story;

package/dist/components/Dialogs/Dialogs.stories.js

@@ -0,0 +1,177 @@
+import { Attachment, Cloud, Dots, Icon, Pen, People } from '@linagora/twake-icons';
+import { Button, IconButton, ListItemIcon, Menu, MenuItem, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import ConfirmDialog from './ConfirmDialog';
+import FixedActionsDialog from './FixedActionsDialog';
+import FixedDialog from './FixedDialog';
+import IllustrationDialog from './IllustrationDialog';
+import PermissionDialog from './PermissionDialog';
+import StandardDialog from './StandardDialog';
+import AlertProvider from '../../providers/AlertProvider';
+import { useAlert } from '../../providers/AlertProvider/useAlert';
+import BottomSheet from '../BottomSheet';
+import BottomSheetItem from '../BottomSheet/BottomSheetItem';
+import ListItemText from '../ListItemText';
+const sizes = ['small', 'medium', 'large', 'full'];
+const SHORT_TEXT = 'Ada Lovelace was an English mathematician and writer, chiefly known for her work on the Analytical Engine.';
+const LONG_TEXT = Array.from({ length: 8 }, () => `${SHORT_TEXT} She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first computer programmer.`).join('\n\n');
+const BACKGROUND = 'linear-gradient(to bottom, rgba(41, 127, 242, 0.24), transparent 160px)';
+const noop = () => undefined;
+const PermissionDialogExample = ({ open, title, content, actions, actionsLayout, onClose }) => (React.createElement(PermissionDialog, { open: open, icon: Cloud, title: typeof title === 'string' ? title : 'PermissionDialog', content: content, actions: actions, actionsLayout: actionsLayout, onClose: onClose }));
+const dialogs = {
+    StandardDialog,
+    ConfirmDialog,
+    FixedDialog,
+    FixedActionsDialog,
+    IllustrationDialog,
+    PermissionDialog: PermissionDialogExample
+};
+const DialogActionsExample = ({ onClose }) => (React.createElement(React.Fragment, null,
+    React.createElement(Button, { variant: "outlined", onClick: onClose }, "Close Modal"),
+    React.createElement(Button, null, "Do something")));
+const TitleWithButton = () => (React.createElement(React.Fragment, null,
+    "This is the title",
+    React.createElement(IconButton, { "aria-label": "More" },
+        React.createElement(Icon, { icon: Dots }))));
+const titleWithButtonProps = {
+    dialogTitle: {
+        className: 'u-flex u-flex-items-center u-flex-justify-between u-pv-0-s u-pv-1 u-pr-0-s'
+    }
+};
+const InnerElements = () => {
+    const { showAlert } = useAlert();
+    const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
+    const [isInnerDialogOpen, setInnerDialogOpen] = useState(false);
+    const [isInnerConfirmOpen, setInnerConfirmOpen] = useState(false);
+    const [isSheetConfirmOpen, setSheetConfirmOpen] = useState(false);
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const closeMenu = () => setMenuAnchor(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { spacing: 1, sx: { mt: 2, alignItems: 'flex-start' } },
+            React.createElement(Button, { onClick: () => showAlert({ message: 'Hello', severity: 'success', duration: 5000 }) }, "Show an alert"),
+            React.createElement(Button, { onClick: () => setBottomSheetOpen(true) }, "Show inner bottom sheet"),
+            React.createElement(Button, { onClick: () => setInnerConfirmOpen(true) }, "Show inner confirm dialog"),
+            React.createElement(Button, { onClick: () => setInnerDialogOpen(true) }, "Show inner dialog"),
+            React.createElement(Button, { onClick: event => setMenuAnchor(event.currentTarget) }, "Show menu")),
+        React.createElement(Menu, { open: Boolean(menuAnchor), anchorEl: menuAnchor, onClose: closeMenu }, [
+            { icon: Pen, label: 'Modify' },
+            { icon: People, label: 'People' },
+            { icon: Attachment, label: 'Attachment' }
+        ].map(({ icon, label }) => (React.createElement(MenuItem, { key: label, onClick: closeMenu },
+            React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: icon })),
+            React.createElement(ListItemText, { primary: label }))))),
+        isInnerDialogOpen && (React.createElement(StandardDialog, { open: true, onClose: () => setInnerDialogOpen(false), title: "This is a simple title", content: "This is a simple content" })),
+        isInnerConfirmOpen && (React.createElement(ConfirmDialog, { open: true, onClose: () => setInnerConfirmOpen(false), title: "This is a simple title", content: "This is a simple content" })),
+        isBottomSheetOpen && (React.createElement(BottomSheet, { backdrop: true, onClose: () => setBottomSheetOpen(false) },
+            React.createElement(BottomSheetItem, null,
+                React.createElement(Button, { onClick: () => setSheetConfirmOpen(true), sx: { mb: 2 } }, "Show inner confirm dialog"),
+                LONG_TEXT,
+                isSheetConfirmOpen && (React.createElement(ConfirmDialog, { open: true, onClose: () => setSheetConfirmOpen(false), title: "This is a simple title", content: "This is a simple content" })))))));
+};
+const Playground = ({ dialog, contentLength, longTitle, hideTitle, showActions, withCloseButton, withBackButton, withBackground, titleWithButton, fullScreen, ...props }) => {
+    const { showAlert } = useAlert();
+    const [open, setOpen] = useState(false);
+    const DialogComponent = dialogs[dialog];
+    const close = () => setOpen(false);
+    const goBack = () => {
+        showAlert({ message: 'Back button has been pressed', severity: 'success' });
+        close();
+    };
+    const title = dialog === 'IllustrationDialog' ? (React.createElement(Icon, { icon: Cloud, size: 140 })) : titleWithButton ? (React.createElement(TitleWithButton, null)) : longTitle ? (`${dialog} - ${SHORT_TEXT}`) : (dialog);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setOpen(true) },
+            "Open ",
+            dialog),
+        open && (React.createElement(DialogComponent, { ...props, size: dialog === 'ConfirmDialog' || dialog === 'PermissionDialog'
+                ? undefined
+                : props.size, open: true, fullScreen: fullScreen || undefined, onClose: withCloseButton ? close : undefined, onBack: withBackButton ? goBack : undefined, title: hideTitle ? undefined : title, componentsProps: titleWithButton ? titleWithButtonProps : undefined, background: withBackground ? BACKGROUND : undefined, content: React.createElement(React.Fragment, null,
+                React.createElement(Typography, { component: "div", variant: "body1" }, contentLength === 'long' ? LONG_TEXT : SHORT_TEXT),
+                React.createElement(InnerElements, null)), actions: showActions && React.createElement(DialogActionsExample, { onClose: close }) }))));
+};
+const meta = {
+    title: 'Dialogs',
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement(AlertProvider, null,
+            React.createElement(Story, null)))
+    ],
+    argTypes: {
+        dialog: { control: 'select', options: Object.keys(dialogs) },
+        size: { control: 'select', options: sizes },
+        actionsLayout: { control: 'inline-radio', options: ['row', 'column'] },
+        align: { control: 'inline-radio', options: ['middle', 'top'] },
+        contentLength: { control: 'inline-radio', options: ['short', 'long'] },
+        disableTitleAutoPadding: { control: 'boolean' },
+        disableGutters: { control: 'boolean' },
+        fullScreen: { control: 'boolean' },
+        longTitle: { control: 'boolean' },
+        hideTitle: { control: 'boolean' },
+        showActions: { control: 'boolean' },
+        withCloseButton: { control: 'boolean' },
+        withBackButton: { control: 'boolean' },
+        withBackground: { control: 'boolean' },
+        titleWithButton: { control: 'boolean' }
+    },
+    args: {
+        dialog: 'StandardDialog',
+        size: 'medium',
+        actionsLayout: 'row',
+        align: 'middle',
+        contentLength: 'short',
+        disableTitleAutoPadding: false,
+        disableGutters: false,
+        fullScreen: false,
+        longTitle: false,
+        hideTitle: false,
+        showActions: true,
+        withCloseButton: true,
+        withBackButton: false,
+        withBackground: false,
+        titleWithButton: false
+    }
+};
+export default meta;
+export const Default = {
+    render: args => React.createElement(Playground, { ...args })
+};
+const screenshotProps = {
+    open: true,
+    onClose: noop,
+    content: SHORT_TEXT,
+    actions: React.createElement(DialogActionsExample, { onClose: noop })
+};
+// Visual Regression - one story per dialog, since each one covers the screen
+export const StandardDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => React.createElement(StandardDialog, { ...screenshotProps, title: "StandardDialog" })
+};
+export const ConfirmDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(ConfirmDialog, { ...screenshotProps, title: "Are you sure?", content: "Content of a confirm dialog, precising what the actions will do, and asking the user if she is sure.", actions: React.createElement(React.Fragment, null,
+            React.createElement(Button, { variant: "outlined" }, "Close Modal"),
+            React.createElement(Button, { color: "error" }, "Do something destructive")) }))
+};
+export const FixedDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(FixedDialog, { ...screenshotProps, title: "FixedDialog", content: LONG_TEXT }))
+};
+export const FixedActionsDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(FixedActionsDialog, { ...screenshotProps, title: "FixedActionsDialog", content: LONG_TEXT }))
+};
+export const IllustrationDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(IllustrationDialog, { ...screenshotProps, size: "small", title: React.createElement(Icon, { icon: Cloud, size: 140 }) }))
+};
+export const PermissionDialogScreenshot = {
+    tags: ['argos'],
+    parameters: { layout: 'fullscreen' },
+    render: () => (React.createElement(PermissionDialogExample, { ...screenshotProps, title: "Are you sure?", content: "Content of a confirm dialog, precising what the actions will do, and asking the user if she is sure." }))
+};

package/dist/components/Dialogs/FixedActionsDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface FixedActionsDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose actions stay visible while the title scrolls with a long content */
+declare const FixedActionsDialog: ({ title, content, actions, actionsLayout, ...props }: FixedActionsDialogProps) => React.ReactElement;
+export default FixedActionsDialog;

package/dist/components/Dialogs/FixedActionsDialog.js

@@ -0,0 +1,20 @@
+import { DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Dialog whose actions stay visible while the title scrolls with a long content */
+const FixedActionsDialog = ({ title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dividerProps, dialogActionsProps, dialogContentProps } = useDialogLayout({ ...props, isFluidTitle: true });
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement("div", { className: "dialogContentInner" },
+                title && (React.createElement("div", { className: "dialogTitleFluidContainer" },
+                    React.createElement(DialogTitle, { ...dialogTitleProps }, title))),
+                content)),
+        React.createElement(Divider, { ...dividerProps }),
+        actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx({ columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+};
+export default FixedActionsDialog;

package/dist/components/Dialogs/FixedDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface FixedDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose title and actions stay visible while a long content scrolls between them */
+declare const FixedDialog: ({ title, content, actions, actionsLayout, ...props }: FixedDialogProps) => React.ReactElement;
+export default FixedDialog;

package/dist/components/Dialogs/FixedDialog.js

@@ -0,0 +1,20 @@
+import { DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import DialogNavButtons from './DialogNavButtons';
+import { useDialogLayout } from './useDialogLayout';
+import Dialog from '../Dialog';
+/** Dialog whose title and actions stay visible while a long content scrolls between them */
+const FixedDialog = ({ title, content, actions, actionsLayout, ...props }) => {
+    const { id, fullScreen, dialogProps, dialogTitleProps, dividerProps, dialogActionsProps, dialogContentProps } = useDialogLayout(props);
+    return (React.createElement(Dialog, { ...dialogProps },
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: props.onClose, onBack: props.onBack }),
+        title && (React.createElement(React.Fragment, null,
+            React.createElement(DialogTitle, { ...dialogTitleProps }, title),
+            React.createElement(Divider, { ...dividerProps }))),
+        React.createElement(DialogContent, { ...dialogContentProps },
+            React.createElement("div", { className: "dialogContentInner" }, content)),
+        React.createElement(Divider, { ...dividerProps }),
+        actions && (React.createElement(DialogActions, { ...dialogActionsProps, disableSpacing: true, className: cx({ columnLayout: actionsLayout === 'column' }, dialogActionsProps.className) }, actions))));
+};
+export default FixedDialog;

package/dist/components/Dialogs/IllustrationDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DialogSectionsProps } from './types';
+import { DialogLayoutProps } from './useDialogLayout';
+export interface IllustrationDialogProps extends DialogLayoutProps, DialogSectionsProps {
+}
+/** Dialog whose title is an illustration, centered above a short content */
+declare const IllustrationDialog: ({ title, content, actions, actionsLayout, ...props }: IllustrationDialogProps) => React.ReactElement;
+export default IllustrationDialog;