@linagora/twake-mui 7.0.0 → 8.0.0

package/dist/lib/types.d.ts

@@ -102,6 +102,9 @@ export type MakeTypography = () => TypographyOptions;
  * `theme.palette.background.contrast` get a type error.
  */
 declare module '@mui/material/styles' {
+    interface CssThemeVariables {
+        enabled: true;
+    }
     interface TypeBackground {
         contrast: string;
     }
@@ -115,3 +118,19 @@ declare module '@mui/material/styles' {
         border?: Partial<BorderPalette>;
     }
 }
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsSizeOverrides {
+        xsmall: true;
+    }
+}
+declare module '@mui/material/Alert' {
+    interface AlertPropsColorOverrides {
+        primary: true;
+        secondary: true;
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        ghost: true;
+    }
+}

package/dist/stories/Alert.stories.js

@@ -1,5 +1,26 @@
-import { Alert, AlertTitle } from '@mui/material';
+/* eslint-disable no-console */
+import { Dots, Download, Icon } from '@linagora/twake-icons';
+import { Alert, AlertTitle, Button, IconButton, ListItemIcon, Stack, Typography } from '@mui/material';
 import React from 'react';
+const severities = [
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+const variants = ['standard', 'filled', 'outlined'];
+// cozy-ui's doc tints the action button like the alert, except on `filled`
+// where the alert already carries the contrast, and on primary/secondary where
+// the button's own default already is that colour.
+const makeActionColor = (variant, severity) => {
+    if (variant === 'filled')
+        return 'inherit';
+    return severity === 'primary' || severity === 'secondary'
+        ? undefined
+        : severity;
+};
 const meta = {
     title: 'Alert',
     component: Alert,
@@ -7,75 +28,58 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {
         severity: {
-            control: 'text',
-            description: 'Severity level (error, warning, info, success) or custom color name (primary, secondary)'
+            control: 'select',
+            options: severities
         },
         variant: {
             control: 'select',
-            options: ['standard', 'filled', 'outlined']
+            options: variants
         },
         color: {
-            control: 'text',
-            description: 'Custom color (CSS color value or MUI palette color like "primary", "secondary")'
+            control: 'select',
+            options: severities,
+            description: 'Overrides the colour taken from `severity`'
         }
     }
 };
 export default meta;
 export const Default = {
     args: {
-        severity: 'info',
+        severity: 'success',
         variant: 'standard'
     },
-    render: args => (React.createElement(Alert, { ...args },
-        React.createElement(AlertTitle, null, "Alert Title"),
-        "This is the alert content text"))
+    render: args => (React.createElement(Alert, { ...args }, "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."))
 };
-// Visual Regression - All severity colors and variants combined
 export const Screenshot = {
     tags: ['argos'],
-    render: () => (React.createElement("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '24px',
-            minWidth: '400px'
-        } },
+    render: () => (React.createElement(Stack, { spacing: 3, sx: { width: 640 } },
+        variants.map(variant => (React.createElement("section", { key: variant },
+            React.createElement(Typography, { variant: "h4", gutterBottom: true },
+                variant,
+                " variant"),
+            React.createElement(Stack, { spacing: 1 }, severities.map(severity => (React.createElement(Alert, { key: severity, variant: variant, severity: severity, action: React.createElement(Button, { variant: "text", size: "small", color: makeActionColor(variant, severity) }, "ACTION") },
+                React.createElement(AlertTitle, null, severity),
+                "This is a ",
+                severity,
+                " alert"))))))),
         React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Standard Variant"),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
-                React.createElement(Alert, { severity: 'primary' },
-                    React.createElement(AlertTitle, null, "Primary Alert"),
-                    "This is a primary alert with title and text"),
-                React.createElement(Alert, { severity: 'secondary' },
-                    React.createElement(AlertTitle, null, "Secondary Alert"),
-                    "This is a secondary alert with title and text"),
-                React.createElement(Alert, { severity: "error" },
-                    React.createElement(AlertTitle, null, "Error Alert"),
-                    "This is an error alert with title and text"),
-                React.createElement(Alert, { severity: "warning" },
-                    React.createElement(AlertTitle, null, "Warning Alert"),
-                    "This is a warning alert with title and text"),
+            React.createElement(Typography, { variant: "h4", gutterBottom: true }, "Content"),
+            React.createElement(Stack, { spacing: 1 },
+                React.createElement(Alert, { severity: "info" }, "Get Cozy Drive for Desktop."),
+                React.createElement(Alert, { severity: "info" }, "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."),
                 React.createElement(Alert, { severity: "info" },
-                    React.createElement(AlertTitle, null, "Info Alert"),
-                    "This is an info alert with title and text"),
-                React.createElement(Alert, { severity: "success" },
-                    React.createElement(AlertTitle, null, "Success Alert"),
-                    "This is a success alert with title and text"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Filled Variant"),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
-                React.createElement(Alert, { severity: "error", variant: "filled" },
-                    React.createElement(AlertTitle, null, "Filled Error"),
-                    "This is a filled error alert"),
-                React.createElement(Alert, { severity: "success", variant: "filled" },
-                    React.createElement(AlertTitle, null, "Filled Success"),
-                    "This is a filled success alert"))),
+                    React.createElement(AlertTitle, null, "This is the title"),
+                    "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."))),
         React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Outlined Variant"),
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
-                React.createElement(Alert, { severity: "warning", variant: "outlined" },
-                    React.createElement(AlertTitle, null, "Outlined Warning"),
-                    "This is an outlined warning alert"),
-                React.createElement(Alert, { severity: "info", variant: "outlined" },
-                    React.createElement(AlertTitle, null, "Outlined Info"),
-                    "This is an outlined info alert")))))
+            React.createElement(Typography, { variant: "h4", gutterBottom: true }, "Actions"),
+            React.createElement(Stack, { spacing: 1 },
+                React.createElement(Alert, { severity: "info", onClose: () => console.log('closed') },
+                    React.createElement(AlertTitle, null, "This is the title"),
+                    "Dismissable with a close button"),
+                React.createElement(Alert, { severity: "info", action: React.createElement(React.Fragment, null,
+                        React.createElement(Button, { variant: "text", size: "small", startIcon: React.createElement(Icon, { icon: Download }) }, "Download"),
+                        React.createElement(Button, { variant: "text", size: "small" }, "No, thanks!"),
+                        React.createElement(ListItemIcon, null,
+                            React.createElement(IconButton, null,
+                                React.createElement(Icon, { icon: Dots })))) }, "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.")))))
 };

package/dist/stories/Badge.stories.d.ts

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

package/dist/stories/Badge.stories.js

@@ -0,0 +1,84 @@
+import { CircleFilled, Icon, Link } from '@linagora/twake-icons';
+import { Avatar, Badge, Box } from '@mui/material';
+import React from 'react';
+const colors = [
+    'default',
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
+const anchorOrigins = [
+    { vertical: 'top', horizontal: 'right' },
+    { vertical: 'top', horizontal: 'left' },
+    { vertical: 'bottom', horizontal: 'right' },
+    { vertical: 'bottom', horizontal: 'left' }
+];
+const meta = {
+    title: 'Badge',
+    component: Badge,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: { control: 'select', options: colors },
+        variant: { control: 'select', options: ['standard', 'dot'] },
+        overlap: { control: 'select', options: ['circular', 'rectangular'] },
+        showZero: { control: 'boolean' },
+        invisible: { control: 'boolean' },
+        badgeContent: { control: 'number' },
+        max: { control: 'number' },
+        anchorOrigin: { control: 'object' }
+    }
+};
+export default meta;
+const Target = () => (React.createElement(Box, { component: "span", sx: { color: 'text.secondary', display: 'flex' } },
+    React.createElement(Icon, { icon: CircleFilled, size: 24 })));
+export const Default = {
+    args: {
+        badgeContent: 4,
+        color: 'primary',
+        children: React.createElement(Target, null)
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement("div", { style: { display: 'flex', gap: '24px', alignItems: 'center' } }, children)));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' } },
+        React.createElement(Row, { title: "Colors" }, colors.map(color => (React.createElement(Badge, { key: color, color: color, badgeContent: 4 },
+            React.createElement(Target, null))))),
+        React.createElement(Row, { title: "Dot" }, colors.map(color => (React.createElement(Badge, { key: color, color: color, variant: "dot" },
+            React.createElement(Target, null))))),
+        React.createElement(Row, { title: "Anchor origin (circular)" }, anchorOrigins.map(anchorOrigin => (React.createElement(Badge, { key: `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`, color: "primary", badgeContent: 4, anchorOrigin: anchorOrigin },
+            React.createElement(Target, null))))),
+        React.createElement(Row, { title: "Anchor origin (rectangular)" }, anchorOrigins.map(anchorOrigin => (React.createElement(Badge, { key: `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`, color: "primary", badgeContent: 4, overlap: "rectangular", anchorOrigin: anchorOrigin },
+            React.createElement(Target, null))))),
+        React.createElement(Row, { title: "Content" },
+            React.createElement(Badge, { color: "error", badgeContent: 0 },
+                React.createElement(Target, null)),
+            React.createElement(Badge, { color: "error", badgeContent: 0, showZero: false },
+                React.createElement(Target, null)),
+            React.createElement(Badge, { color: "error", badgeContent: 120, max: 99 },
+                React.createElement(Target, null)),
+            React.createElement(Badge, { color: "error", badgeContent: 4, invisible: true },
+                React.createElement(Target, null))),
+        React.createElement(Row, { title: "Double badges" },
+            React.createElement(Badge, { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: React.createElement(Box, { sx: {
+                        height: 24,
+                        minWidth: 24,
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        bgcolor: 'background.paper',
+                        color: 'text.icon',
+                        boxShadow: 3
+                    } },
+                    React.createElement(Badge, { color: "error", variant: "dot" },
+                        React.createElement(Icon, { icon: Link, size: 16 }))) },
+                React.createElement(Avatar, null, "CD")))))
+};

package/dist/stories/Button.stories.d.ts

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

package/dist/stories/Button.stories.js

@@ -1,78 +1,87 @@
-import { Button, Stack } from '@mui/material';
+import { Icon, Plus, Stop } from '@linagora/twake-icons';
+import { Box, Stack } from '@mui/material';
 import React from 'react';
+import { Button } from '../components/Button';
+const variants = ['contained', 'outlined', 'ghost', 'text'];
+const sizes = ['small', 'medium', 'large'];
+const colors = [
+    'inherit',
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+];
 const meta = {
     title: 'Button',
     component: Button,
     parameters: { layout: 'centered' },
     tags: ['autodocs'],
     argTypes: {
-        variant: {
-            control: 'select',
-            options: ['contained', 'outlined', 'text']
-        },
-        color: {
-            control: 'select',
-            options: ['primary', 'secondary', 'error', 'warning', 'info', 'success']
-        },
-        size: {
-            control: 'select',
-            options: ['small', 'medium', 'large']
-        }
+        variant: { control: 'select', options: variants },
+        color: { control: 'select', options: colors },
+        size: { control: 'select', options: sizes },
+        disabled: { control: 'boolean' },
+        loading: { control: 'boolean' },
+        fullWidth: { control: 'boolean' }
     }
 };
 export default meta;
-export const Docs = {
+export const Default = {
     args: {
         variant: 'contained',
         children: 'Button'
     }
 };
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement(Stack, { direction: "row", spacing: 4, useFlexGap: true, sx: { flexWrap: 'wrap' } }, children)));
+// One column per props set, one button per variant, as the cozy-ui doc does
+const Column = ({ title, props }) => (React.createElement(Stack, { spacing: 1, sx: { alignItems: 'flex-start' } },
+    React.createElement("div", null, title),
+    variants.map(variant => (React.createElement(Button, { key: variant, variant: variant, ...props }, variant)))));
 // Visual Regression - All variants combined
 export const Screenshot = {
     tags: ['argos'],
     render: () => (React.createElement(Stack, { spacing: 4 },
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Variants"),
-            React.createElement(Stack, { direction: "row", spacing: 2 },
-                React.createElement(Button, { variant: "contained" }, "Contained"),
-                React.createElement(Button, { variant: "outlined" }, "Outlined"),
-                React.createElement(Button, { variant: "text" }, "Text"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors contained"),
-            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
-                React.createElement(Button, { variant: "contained", color: "primary" }, "Primary"),
-                React.createElement(Button, { variant: "contained", color: "secondary" }, "Secondary"),
-                React.createElement(Button, { variant: "contained", color: "success" }, "Success"),
-                React.createElement(Button, { variant: "contained", color: "error" }, "Error"),
-                React.createElement(Button, { variant: "contained", color: "warning" }, "Warning"),
-                React.createElement(Button, { variant: "contained", color: "info" }, "Info"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors outlined"),
-            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
-                React.createElement(Button, { variant: "outlined", color: "primary" }, "Primary"),
-                React.createElement(Button, { variant: "outlined", color: "secondary" }, "Secondary"),
-                React.createElement(Button, { variant: "outlined", color: "success" }, "Success"),
-                React.createElement(Button, { variant: "outlined", color: "error" }, "Error"),
-                React.createElement(Button, { variant: "outlined", color: "warning" }, "Warning"),
-                React.createElement(Button, { variant: "outlined", color: "info" }, "Info"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors text"),
-            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
-                React.createElement(Button, { variant: "text", color: "primary" }, "Primary"),
-                React.createElement(Button, { variant: "text", color: "secondary" }, "Secondary"),
-                React.createElement(Button, { variant: "text", color: "success" }, "Success"),
-                React.createElement(Button, { variant: "text", color: "error" }, "Error"),
-                React.createElement(Button, { variant: "text", color: "warning" }, "Warning"),
-                React.createElement(Button, { variant: "text", color: "info" }, "Info"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Sizes"),
-            React.createElement(Stack, { direction: "row", spacing: 2, sx: { alignItems: 'center' } },
-                React.createElement(Button, { variant: "contained", size: "small" }, "Small"),
-                React.createElement(Button, { variant: "contained", size: "medium" }, "Medium"),
-                React.createElement(Button, { variant: "contained", size: "large" }, "Large"))),
-        React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "States"),
-            React.createElement(Stack, { direction: "row", spacing: 2 },
-                React.createElement(Button, { variant: "contained" }, "Normal"),
-                React.createElement(Button, { variant: "contained", disabled: true }, "Disabled")))))
+        React.createElement(Section, { title: "Default" },
+            React.createElement(Column, { title: "default" }),
+            React.createElement(Column, { title: "disabled", props: { disabled: true } }),
+            React.createElement(Column, { title: "loading", props: { loading: true } })),
+        React.createElement(Section, { title: "legacy variants" },
+            React.createElement(Button, { variant: "primary" }, "primary"),
+            React.createElement(Button, { variant: "secondary" }, "secondary")),
+        React.createElement(Section, { title: "Sizes" }, sizes.map(size => (React.createElement(Column, { key: size, title: size, props: { size } })))),
+        React.createElement(Section, { title: "Icons" },
+            React.createElement(Column, { title: "startIcon", props: { startIcon: React.createElement(Icon, { icon: Plus }) } }),
+            React.createElement(Column, { title: "endIcon", props: { endIcon: React.createElement(Icon, { icon: Plus }) } }),
+            React.createElement(Stack, { spacing: 1, sx: { alignItems: 'flex-start' } },
+                React.createElement("div", null, "label is only icon"),
+                variants.map(variant => (React.createElement(Stack, { key: variant, direction: "row", spacing: 2 },
+                    React.createElement(Button, { variant: variant },
+                        React.createElement(Icon, { icon: Plus })),
+                    React.createElement(Button, { variant: variant, disabled: true },
+                        React.createElement(Icon, { icon: Plus })))))),
+            React.createElement(Stack, { spacing: 1, sx: { alignItems: 'flex-start' } },
+                React.createElement("div", null, "round icon button"),
+                variants.map(variant => (React.createElement(Stack, { key: variant, direction: "row", spacing: 2 }, [false, true].map(disabled => (React.createElement(Button, { key: String(disabled), variant: variant, size: "small", disabled: disabled, sx: {
+                        minWidth: 'auto',
+                        minHeight: 'auto',
+                        width: 32,
+                        height: 32,
+                        padding: 0,
+                        borderRadius: '50%'
+                    } },
+                    React.createElement(Icon, { icon: Stop, size: 12 }))))))))),
+        React.createElement(Section, { title: "Icons with sizes" }, ['startIcon', 'endIcon'].map(position => sizes.map(size => (React.createElement(Column, { key: position + size, title: `${position} - ${size}`, props: { size, [position]: React.createElement(Icon, { icon: Plus }) } }))))),
+        React.createElement(Section, { title: "Colors" }, colors.map(color => (React.createElement(Column, { key: color, title: color, props: { color } })))),
+        React.createElement(Section, { title: "Disabled colors" }, colors.map(color => (React.createElement(Column, { key: color, title: color, props: { color, disabled: true } })))),
+        React.createElement(Section, { title: "Loading colors" }, colors.map(color => (React.createElement(Column, { key: color, title: color, props: { color, loading: true } })))),
+        React.createElement(Section, { title: "Long label" }, sizes.map(size => (React.createElement(Stack, { key: size, spacing: 1, sx: { width: 128 } },
+            React.createElement("div", null, size),
+            variants.map(variant => (React.createElement(Box, { key: variant },
+                React.createElement(Button, { variant: variant, size: size },
+                    variant,
+                    " with long label"))))))))))
 };

package/dist/stories/{Selection.stories.d.ts → Checkbox.stories.d.ts}

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

package/dist/stories/Checkbox.stories.js

@@ -0,0 +1,72 @@
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import { Checkbox, FormControlLabel, ToggleButton, ToggleButtonGroup, Stack, Box } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Checkbox',
+    component: Checkbox,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['primary', 'error', 'default']
+        },
+        size: { control: 'select', options: ['medium', 'small'] },
+        checked: { control: 'boolean' },
+        indeterminate: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        disableRipple: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    render: args => (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...args }), label: "Checkbox" }))
+};
+const noEffect = { disableRipple: true, sx: { p: 0 } };
+const checkboxes = [
+    { label: 'Checkbox', props: {} },
+    { label: 'Small', props: { size: 'small' } },
+    { label: 'Checked', props: { checked: true } },
+    { label: 'Mixed', props: { indeterminate: true } },
+    { label: 'Mixed checked', props: { indeterminate: true, checked: true } },
+    { label: 'No effect', props: noEffect },
+    { label: 'Small no effect', props: { ...noEffect, size: 'small' } }
+];
+const columns = [
+    { title: 'Default', props: {} },
+    { title: 'Disabled', props: { disabled: true } },
+    { title: 'Error', props: { color: 'error' } },
+    { title: 'Error disabled', props: { color: 'error', disabled: true } }
+];
+const Column = ({ title, props, labelPlacement }) => (React.createElement(Stack, null,
+    React.createElement("h4", { style: { margin: '0 0 8px' } }, title),
+    checkboxes.map(checkbox => (React.createElement(FormControlLabel, { key: checkbox.label, label: checkbox.label, labelPlacement: labelPlacement, control: React.createElement(Checkbox, { ...checkbox.props, ...props }) })))));
+// Visual Regression - All selection components
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Checkbox"),
+            React.createElement(Stack, { direction: "row", spacing: 4, useFlexGap: true, sx: { flexWrap: 'wrap' } }, columns.map(column => (React.createElement(Column, { key: column.title, ...column }))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Checkbox, label before"),
+            React.createElement(Stack, { direction: "row", spacing: 4, useFlexGap: true, sx: { flexWrap: 'wrap' } }, columns.map(column => (React.createElement(Column, { key: column.title, ...column, labelPlacement: "start" }))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Checkbox with complex label"),
+            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, null), label: React.createElement(React.Fragment, null,
+                    "This is a ",
+                    React.createElement("strong", null, "complex"),
+                    " text") })),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Toggle Buttons"),
+            React.createElement(Box, null,
+                React.createElement(ToggleButtonGroup, { value: ['bold'] },
+                    React.createElement(ToggleButton, { value: "bold", "aria-label": "bold" },
+                        React.createElement(FormatBoldIcon, null)),
+                    React.createElement(ToggleButton, { value: "italic", "aria-label": "italic" },
+                        React.createElement(FormatItalicIcon, null)),
+                    React.createElement(ToggleButton, { value: "underlined", "aria-label": "underlined" },
+                        React.createElement(FormatUnderlinedIcon, null)))))))
+};

package/dist/stories/Chip.stories.js

@@ -81,8 +81,8 @@ export const Screenshot = {
                                 React.createElement("div", null,
                                     React.createElement(Chip, { color: color, variant: variant, label: "Avatar Chip", avatar: React.createElement(Avatar, null, "M"), square: square, size: size })),
                                 React.createElement("div", null,
-                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, null,
-                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { sx: {
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small', sx: {
                                                 color: color === 'default'
                                                     ? `${color}.main`
                                                     : `inherit`

package/dist/stories/Divider.stories.d.ts

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

package/dist/stories/Divider.stories.js

@@ -0,0 +1,56 @@
+import { Box, Divider, List, ListItemButton, ListItemText, Stack, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Divider',
+    component: Divider,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+        variant: { control: 'select', options: ['fullWidth', 'inset', 'middle'] },
+        textAlign: { control: 'select', options: ['left', 'center', 'right'] },
+        flexItem: { control: 'boolean' },
+        children: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    render: args => (React.createElement(Box, { sx: { width: 320 } },
+        React.createElement(Divider, { ...args })))
+};
+// Visual Regression - Every example of the cozy-ui Divider doc
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: 480 } },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Vertical division"),
+            React.createElement(Box, { sx: {
+                    border: 1,
+                    borderColor: 'divider',
+                    borderRadius: 2,
+                    p: 2
+                } },
+                React.createElement(Typography, { sx: { mb: 2 } }, "Here is some content in a card."),
+                React.createElement(Divider, null),
+                React.createElement(Typography, { sx: { mt: 2 } }, "Other content in a card, that is unrelated to the first paragraph."))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Horizontal division"),
+            React.createElement(Stack, { direction: "row", sx: { alignItems: 'center' } },
+                React.createElement(Typography, { sx: { mr: 2 } }, "Left block"),
+                React.createElement(Divider, { orientation: "vertical", flexItem: true }),
+                React.createElement(Typography, { sx: { ml: 2 } }, "Right block"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Text, default alignment"),
+            React.createElement(Divider, null, "Text Left")),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Text, centered"),
+            React.createElement(Divider, { textAlign: "center" }, "Text Center")),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Inset, in a list"),
+            React.createElement(List, { disablePadding: true },
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemText, { primary: "First item" })),
+                React.createElement(Divider, { variant: "inset" }),
+                React.createElement(ListItemButton, null,
+                    React.createElement(ListItemText, { primary: "Second item" }))))))
+};

package/dist/stories/IconButton.stories.d.ts

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