@linagora/twake-mui 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.5.0](https://github.com/linagora/twake-ui/compare/v1.4.0...v1.5.0) (2026-04-14)
+
+
+### Features
+
+* Add swipeable override :sparkles: ([15af929](https://github.com/linagora/twake-ui/commit/15af92994a086ea49a7a0957cfeb6c3a09d0e96b))
+
+# [1.4.0](https://github.com/linagora/twake-ui/compare/v1.3.0...v1.4.0) (2026-04-09)
+
+
+### Features
+
+* **twake-mui:** Now expose .d.ts ([945d3b2](https://github.com/linagora/twake-ui/commit/945d3b2e1616f9be237f1416630aef7014331226))
+
 # [1.3.0](https://github.com/linagora/twake-ui/compare/v1.2.0...v1.3.0) (2026-04-09)
 
 

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

@@ -0,0 +1,36 @@
+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>;
+/**
+ * Generate color from name
+ * @param name - Name string to generate color from
+ * @returns Color key from supportedColors
+ */
+export declare const nameToColor: (name?: string) => string | undefined;

package/dist/components/Avatar/helpers.js

@@ -1,32 +1,32 @@
-export var sizeToFontSize = {
+export const sizeToFontSize = {
     xs: 9.109,
     s: 12.525,
     m: 18.219,
     l: 27.328,
     xl: 36.438
 };
-export var sizeToNb = {
+export const sizeToNb = {
     xs: 18,
     s: 28,
     m: 36,
     l: 54,
     xl: 72
 };
-export var sizeToFontWeight = {
+export const sizeToFontWeight = {
     xs: 500,
     s: 500,
     m: 500,
     l: 600,
     xl: 600
 };
-export var sizeToLineHeight = {
+export const sizeToLineHeight = {
     xs: 18.219,
     s: 18.219,
     m: 27.328,
     l: 36.438,
     xl: 45.547
 };
-export var supportedColors = [
+export const supportedColors = [
     'sunrise',
     'downy',
     'sugarCoral',
@@ -39,7 +39,7 @@ export var supportedColors = [
     'paleGreen',
     'moonBlue'
 ];
-export var colorMapping = {
+export const colorMapping = {
     sunrise: 'linear-gradient(136deg, #F8D280 14.84%, #F2AC69 96.03%)',
     downy: 'linear-gradient(136deg, #81EAD4 14.84%, #62C6B7 96.03%)',
     sugarCoral: 'linear-gradient(136deg, #F19E86 14.84%, #F95967 96.03%)',
@@ -52,21 +52,20 @@ export var colorMapping = {
     paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
     moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
 };
-var colors = supportedColors.filter(Boolean);
-var makeKey = function (colors, name) {
+const colors = supportedColors.filter(Boolean);
+const makeKey = (colors, name) => {
     return (Array.from(name.toUpperCase())
-        .map(function (letter) { return letter.charCodeAt(0); })
-        .reduce(function (sum, number) { return sum + number; }, 0) % colors.length);
+        .map(letter => letter.charCodeAt(0))
+        .reduce((sum, number) => sum + number, 0) % colors.length);
 };
 /**
  * Generate color from name
  * @param name - Name string to generate color from
  * @returns Color key from supportedColors
  */
-export var nameToColor = function (name) {
-    if (name === void 0) { name = ''; }
+export const nameToColor = (name = '') => {
     if (!name)
         return undefined;
-    var key = makeKey(colors, name);
+    const key = makeKey(colors, name);
     return colors[key];
 };

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

@@ -0,0 +1,16 @@
+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 interface AvatarProps extends Omit<MuiAvatarProps, 'color'> {
+    color?: AvatarColor;
+    size?: AvatarSize | number;
+    border?: boolean;
+    innerBorder?: boolean;
+    disabled?: boolean;
+    display?: AvatarDisplay;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar/index.js

@@ -1,54 +1,30 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Avatar as MuiAvatar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 import { colorMapping, nameToColor, supportedColors } from './helpers';
-var capitalize = function (str) {
+const capitalize = (str) => {
     return str.charAt(0).toUpperCase() + str.slice(1);
 };
-var StyledAvatar = styled(MuiAvatar, {
-    shouldForwardProp: function (prop) { return prop !== 'gradientColor'; }
-})(function (_a) {
-    var theme = _a.theme, gradientColor = _a.gradientColor;
-    return (__assign({}, (gradientColor && {
+const StyledAvatar = styled(MuiAvatar, {
+    shouldForwardProp: prop => prop !== 'gradientColor'
+})(({ theme, gradientColor }) => ({
+    ...(gradientColor && {
         color: theme.palette.primary.contrastText,
         background: colorMapping[gradientColor] || undefined
-    })));
-});
-export var Avatar = function (_a) {
-    var className = _a.className, color = _a.color, size = _a.size, border = _a.border, innerBorder = _a.innerBorder, disabled = _a.disabled, _b = _a.display, display = _b === void 0 ? 'initial' : _b, sx = _a.sx, props = __rest(_a, ["className", "color", "size", "border", "innerBorder", "disabled", "display", "sx"]);
-    var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
-    var finalColor = color === 'none'
+    })
+}));
+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;
-    var classNames = [];
+    const classNames = [];
     if (className)
         classNames.push(className);
     if (size && typeof size === 'string')
-        classNames.push("size-".concat(size));
+        classNames.push(`size-${size}`);
     if (disabled)
         classNames.push('disabled');
     if (border)
@@ -56,7 +32,7 @@ export var Avatar = function (_a) {
     if (innerBorder)
         classNames.push('innerBorder');
     if (display !== 'initial')
-        classNames.push("display".concat(capitalize(display)));
-    return (React.createElement(StyledAvatar, __assign({ gradientColor: finalColor, className: classNames.join(' ') || undefined, sx: sx }, props)));
+        classNames.push(`display${capitalize(display)}`);
+    return (React.createElement(StyledAvatar, { gradientColor: finalColor, className: classNames.join(' ') || undefined, sx: sx, ...props }));
 };
 export default Avatar;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ThemeProviderProps } from './types';
+export declare const TwakeMuiThemeProvider: FC<ThemeProviderProps>;

package/dist/components/ThemeProvider/index.js

@@ -2,10 +2,9 @@ import { CssBaseline } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 import React, { useMemo } from 'react';
 import { makeTheme } from '../../lib/makeTheme';
-export var TwakeMuiThemeProvider = function (_a) {
-    var children = _a.children, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, themeOptions = _a.themeOptions;
-    var theme = useMemo(function () {
-        var baseTheme = makeTheme(mode);
+export const TwakeMuiThemeProvider = ({ children, mode = 'light', themeOptions }) => {
+    const theme = useMemo(() => {
+        const baseTheme = makeTheme(mode);
         if (!themeOptions) {
             return baseTheme;
         }

package/dist/components/ThemeProvider/types.d.ts

@@ -0,0 +1,7 @@
+import { ThemeOptions } from '@mui/material/styles';
+import { ReactNode } from 'react';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    mode?: 'light' | 'dark';
+    themeOptions?: Partial<ThemeOptions>;
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from '@mui/material';
+export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
+export { default as Autocomplete } from '@mui/material/Autocomplete';
+export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { theme } from './lib/theme';
+export type { TwakeTheme } from './lib/theme';
+export { radius } from './lib/radius';
+export { Avatar, default as AvatarDefault } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { nameToColor, supportedColors } from './components/Avatar/helpers';

package/dist/lib/makeDarkOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const makeDarkOverrides: (theme: Theme) => Components;

package/dist/lib/makeDarkOverrides.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { alpha } from '@mui/material/styles';
 import { accordionOverrides } from './overrides/accordionOverrides';
 import { autocompleteOverrides } from './overrides/autocompleteOverrides';
@@ -21,13 +10,31 @@ import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogAc
 import { iconButtonOverrides } from './overrides/iconButtonOverrides';
 import { menuItemOverrides } from './overrides/menuItemOverrides';
 import { popoverOverrides } from './overrides/popoverOverrides';
+import { swipeableDrawerOverrides } from './overrides/swipeableDrawerOverrides';
 import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
 import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
-export var makeDarkOverrides = function (theme) {
-    var _a, _b;
-    var datePickerOverridesResult = datePickerOverrides(theme);
-    var accordionOverridesResult = accordionOverrides(theme);
-    return __assign(__assign({ MuiButton: buttonOverrides(theme), MuiTextField: textFieldOverrides(), MuiOutlinedInput: outlinedInputOverrides(), MuiInputBase: inputBaseOverrides(), MuiSelect: selectOverrides(), MuiAutocomplete: autocompleteOverrides(), MuiDialog: dialogOverrides(), MuiDialogTitle: dialogTitleOverrides(), MuiDialogContent: dialogContentOverrides(), MuiDialogActions: dialogActionsOverrides(), MuiPopover: popoverOverrides(), MuiAvatar: avatarOverrides(theme), MuiToggleButtonGroup: toggleButtonGroupOverrides(), MuiToggleButton: toggleButtonOverrides(theme), MuiIconButton: iconButtonOverrides(), MuiCheckbox: checkboxOverrides(), MuiBackdrop: backdropOverrides(theme), MuiTypography: {
+export const makeDarkOverrides = (theme) => {
+    const datePickerOverridesResult = datePickerOverrides(theme);
+    const accordionOverridesResult = accordionOverrides(theme);
+    return {
+        MuiButton: buttonOverrides(theme),
+        MuiTextField: textFieldOverrides(),
+        MuiOutlinedInput: outlinedInputOverrides(),
+        MuiInputBase: inputBaseOverrides(),
+        MuiSelect: selectOverrides(),
+        MuiAutocomplete: autocompleteOverrides(),
+        MuiDialog: dialogOverrides(),
+        MuiDialogTitle: dialogTitleOverrides(),
+        MuiDialogContent: dialogContentOverrides(),
+        MuiDialogActions: dialogActionsOverrides(),
+        MuiPopover: popoverOverrides(),
+        MuiAvatar: avatarOverrides(theme),
+        MuiToggleButtonGroup: toggleButtonGroupOverrides(),
+        MuiToggleButton: toggleButtonOverrides(theme),
+        MuiIconButton: iconButtonOverrides(),
+        MuiCheckbox: checkboxOverrides(),
+        MuiBackdrop: backdropOverrides(theme),
+        MuiTypography: {
             styleOverrides: {
                 root: {
                     color: alpha(theme.palette.grey[50], 0.9)
@@ -36,7 +43,17 @@ export var makeDarkOverrides = function (theme) {
                 // Typography caption overrides will be implemented later
                 }
             }
-        } }, datePickerOverridesResult), { MuiAccordion: accordionOverridesResult.MuiAccordion, MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary, MuiCssBaseline: {
-            styleOverrides: __assign(__assign({}, (((_a = datePickerOverridesResult.MuiCssBaseline) === null || _a === void 0 ? void 0 : _a.styleOverrides) || {})), (((_b = accordionOverridesResult.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) || {}))
-        }, MuiMenuItem: menuItemOverrides(theme) });
+        },
+        ...datePickerOverridesResult,
+        MuiAccordion: accordionOverridesResult.MuiAccordion,
+        MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary,
+        MuiCssBaseline: {
+            styleOverrides: {
+                ...(datePickerOverridesResult.MuiCssBaseline?.styleOverrides || {}),
+                ...(accordionOverridesResult.MuiCssBaseline?.styleOverrides || {})
+            }
+        },
+        MuiMenuItem: menuItemOverrides(theme),
+        MuiSwipeableDrawer: swipeableDrawerOverrides(theme)
+    };
 };

package/dist/lib/makeLightOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const makeLightOverrides: (theme: Theme) => Components;

package/dist/lib/makeLightOverrides.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { alpha } from '@mui/material/styles';
 import { accordionOverrides } from './overrides/accordionOverrides';
 import { autocompleteOverrides } from './overrides/autocompleteOverrides';
@@ -21,13 +10,31 @@ import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogAc
 import { iconButtonOverrides } from './overrides/iconButtonOverrides';
 import { menuItemOverrides } from './overrides/menuItemOverrides';
 import { popoverOverrides } from './overrides/popoverOverrides';
+import { swipeableDrawerOverrides } from './overrides/swipeableDrawerOverrides';
 import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
 import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
-export var makeLightOverrides = function (theme) {
-    var _a, _b;
-    var datePickerOverridesResult = datePickerOverrides(theme);
-    var accordionOverridesResult = accordionOverrides(theme);
-    return __assign(__assign({ MuiButton: buttonOverrides(theme), MuiTextField: textFieldOverrides(), MuiOutlinedInput: outlinedInputOverrides(), MuiInputBase: inputBaseOverrides(), MuiSelect: selectOverrides(), MuiAutocomplete: autocompleteOverrides(), MuiDialog: dialogOverrides(), MuiDialogTitle: dialogTitleOverrides(), MuiDialogContent: dialogContentOverrides(), MuiDialogActions: dialogActionsOverrides(), MuiPopover: popoverOverrides(), MuiAvatar: avatarOverrides(theme), MuiToggleButtonGroup: toggleButtonGroupOverrides(), MuiToggleButton: toggleButtonOverrides(theme), MuiIconButton: iconButtonOverrides(), MuiCheckbox: checkboxOverrides(), MuiBackdrop: backdropOverrides(theme), MuiTypography: {
+export const makeLightOverrides = (theme) => {
+    const datePickerOverridesResult = datePickerOverrides(theme);
+    const accordionOverridesResult = accordionOverrides(theme);
+    return {
+        MuiButton: buttonOverrides(theme),
+        MuiTextField: textFieldOverrides(),
+        MuiOutlinedInput: outlinedInputOverrides(),
+        MuiInputBase: inputBaseOverrides(),
+        MuiSelect: selectOverrides(),
+        MuiAutocomplete: autocompleteOverrides(),
+        MuiDialog: dialogOverrides(),
+        MuiDialogTitle: dialogTitleOverrides(),
+        MuiDialogContent: dialogContentOverrides(),
+        MuiDialogActions: dialogActionsOverrides(),
+        MuiPopover: popoverOverrides(),
+        MuiAvatar: avatarOverrides(theme),
+        MuiToggleButtonGroup: toggleButtonGroupOverrides(),
+        MuiToggleButton: toggleButtonOverrides(theme),
+        MuiIconButton: iconButtonOverrides(),
+        MuiCheckbox: checkboxOverrides(),
+        MuiBackdrop: backdropOverrides(theme),
+        MuiTypography: {
             styleOverrides: {
                 root: {
                     color: alpha(theme.palette.grey[900], 0.9)
@@ -36,7 +43,16 @@ export var makeLightOverrides = function (theme) {
                 // Typography caption overrides will be implemented later
                 }
             }
-        } }, datePickerOverridesResult), { MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary, MuiCssBaseline: {
-            styleOverrides: __assign(__assign({}, (((_a = datePickerOverridesResult.MuiCssBaseline) === null || _a === void 0 ? void 0 : _a.styleOverrides) || {})), (((_b = accordionOverridesResult.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) || {}))
-        }, MuiMenuItem: menuItemOverrides(theme) });
+        },
+        ...datePickerOverridesResult,
+        MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary,
+        MuiCssBaseline: {
+            styleOverrides: {
+                ...(datePickerOverridesResult.MuiCssBaseline?.styleOverrides || {}),
+                ...(accordionOverridesResult.MuiCssBaseline?.styleOverrides || {})
+            }
+        },
+        MuiMenuItem: menuItemOverrides(theme),
+        MuiSwipeableDrawer: swipeableDrawerOverrides(theme)
+    };
 };

package/dist/lib/makePalette.d.ts

@@ -0,0 +1,2 @@
+import { PaletteOptions } from '@mui/material/styles';
+export declare const makePalette: (mode?: "light" | "dark") => PaletteOptions;

package/dist/lib/makePalette.js

@@ -1,9 +1,8 @@
 import paletteJson from './palette.json';
-var paletteData = paletteJson;
-export var makePalette = function (mode) {
-    if (mode === void 0) { mode = 'light'; }
+const paletteData = paletteJson;
+export const makePalette = (mode = 'light') => {
     return {
-        mode: mode,
+        mode,
         primary: {
             light: paletteData.Primary[300],
             main: paletteData.Primary[600],

package/dist/lib/makeTheme.d.ts

@@ -0,0 +1,2 @@
+import { createTheme } from '@mui/material/styles';
+export declare const makeTheme: (mode?: "light" | "dark") => ReturnType<typeof createTheme>;

package/dist/lib/makeTheme.js

@@ -1,21 +1,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { createTheme } from '@mui/material/styles';
 import { makeDarkOverrides } from './makeDarkOverrides';
 import { makeLightOverrides } from './makeLightOverrides';
 import { makePalette } from './makePalette';
 import { makeTypography } from './makeTypography';
 // DatePicker styles are applied through component overrides
-var themesCommonConfig = {
+const themesCommonConfig = {
     shape: {
         borderRadius: 6
     },
@@ -32,12 +21,18 @@ var themesCommonConfig = {
         modal: 1300
     }
 };
-export var makeTheme = function (mode) {
-    if (mode === void 0) { mode = 'light'; }
-    var palette = makePalette(mode);
-    var typography = makeTypography();
-    var theme = createTheme(__assign(__assign({}, themesCommonConfig), { palette: palette, typography: typography }));
-    var components = mode === 'dark' ? makeDarkOverrides(theme) : makeLightOverrides(theme);
+export const makeTheme = (mode = 'light') => {
+    const palette = makePalette(mode);
+    const typography = makeTypography();
+    const theme = createTheme({
+        ...themesCommonConfig,
+        palette,
+        typography
+    });
+    const components = mode === 'dark' ? makeDarkOverrides(theme) : makeLightOverrides(theme);
     // Create the final theme with components
-    return createTheme(__assign(__assign({}, theme), { components: components }));
+    return createTheme({
+        ...theme,
+        components
+    });
 };

package/dist/lib/makeTypography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+export declare const makeTypography: () => TypographyVariantsOptions;

package/dist/lib/makeTypography.js

@@ -1,4 +1,4 @@
-export var makeTypography = function () {
+export const makeTypography = () => {
     return {
         fontFamily: [
             '"Inter"',

package/dist/lib/overrides/accordionOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const accordionOverrides: (theme: Theme) => Components;

package/dist/lib/overrides/accordionOverrides.js

@@ -1,8 +1,8 @@
 import { alpha } from '@mui/material/styles';
 import paletteJson from '../palette.json';
-var paletteData = paletteJson;
+const paletteData = paletteJson;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export var accordionOverrides = function (theme) {
+export const accordionOverrides = (theme) => {
     return {
         MuiAccordion: {
             styleOverrides: {

package/dist/lib/overrides/autocompleteOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components } from '@mui/material/styles';
+export declare const autocompleteOverrides: () => Components["MuiAutocomplete"];

package/dist/lib/overrides/autocompleteOverrides.js

@@ -1,5 +1,5 @@
 import { radius } from '../radius';
-export var autocompleteOverrides = function () {
+export const autocompleteOverrides = () => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/avatarOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const avatarOverrides: (theme: Theme) => Components["MuiAvatar"];

package/dist/lib/overrides/avatarOverrides.js

@@ -1,4 +1,4 @@
-export var avatarOverrides = function (theme) {
+export const avatarOverrides = (theme) => {
     return {
         styleOverrides: {
             root: {
@@ -70,10 +70,10 @@ export var avatarOverrides = function (theme) {
                     display: 'inline-flex'
                 },
                 '&.border': {
-                    border: "2px solid ".concat(theme.palette.background.paper)
+                    border: `2px solid ${theme.palette.background.paper}`
                 },
                 '&.innerBorder': {
-                    boxShadow: "inset 0px 0px 0px 1px ".concat(theme.palette.divider)
+                    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
                 }
             },
             colorDefault: {

package/dist/lib/overrides/backdropOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const backdropOverrides: (theme: Theme) => Components["MuiBackdrop"];

package/dist/lib/overrides/backdropOverrides.js

@@ -1,5 +1,5 @@
 import { alpha } from '@mui/material/styles';
-export var backdropOverrides = function (theme) {
+export const backdropOverrides = (theme) => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/buttonOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const buttonOverrides: (theme: Theme) => Components["MuiButton"];

package/dist/lib/overrides/buttonOverrides.js

@@ -1,8 +1,8 @@
 import { alpha } from '@mui/material/styles';
 import paletteJson from '../palette.json';
 import { radius } from '../radius';
-var paletteData = paletteJson;
-export var buttonOverrides = function (theme) {
+const paletteData = paletteJson;
+export const buttonOverrides = (theme) => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/checkboxOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components } from '@mui/material/styles';
+export declare const checkboxOverrides: () => Components["MuiCheckbox"];

package/dist/lib/overrides/checkboxOverrides.js

@@ -1,4 +1,4 @@
-export var checkboxOverrides = function () {
+export const checkboxOverrides = () => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/datePickerOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const datePickerOverrides: (theme: Theme) => Components;

package/dist/lib/overrides/datePickerOverrides.js

@@ -1,6 +1,6 @@
 import { alpha } from '@mui/material/styles';
 // DatePicker component overrides using nested selectors for higher specificity
-export var datePickerOverrides = function (theme) {
+export const datePickerOverrides = (theme) => {
     return {
         MuiCssBaseline: {
             styleOverrides: {
@@ -67,9 +67,9 @@ export var datePickerOverrides = function (theme) {
                     }
                 },
                 '.MuiDateCalendar-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
-                    backgroundColor: "".concat(theme.palette.primary.main),
+                    backgroundColor: `${theme.palette.primary.main}`,
                     '&:hover': {
-                        backgroundColor: "".concat(theme.palette.primary.dark)
+                        backgroundColor: `${theme.palette.primary.dark}`
                     }
                 },
                 '.MuiDateCalendar-root .MuiMonthCalendar-root': {

package/dist/lib/overrides/dialogOverrides.d.ts

@@ -0,0 +1,5 @@
+import { Components } from '@mui/material/styles';
+export declare const dialogOverrides: () => Components["MuiDialog"];
+export declare const dialogTitleOverrides: () => Components["MuiDialogTitle"];
+export declare const dialogContentOverrides: () => Components["MuiDialogContent"];
+export declare const dialogActionsOverrides: () => Components["MuiDialogActions"];

package/dist/lib/overrides/dialogOverrides.js

@@ -1,5 +1,5 @@
 import { radius } from '../radius';
-export var dialogOverrides = function () {
+export const dialogOverrides = () => {
     return {
         styleOverrides: {
             paper: {
@@ -10,7 +10,7 @@ export var dialogOverrides = function () {
         }
     };
 };
-export var dialogTitleOverrides = function () {
+export const dialogTitleOverrides = () => {
     return {
         styleOverrides: {
             root: {
@@ -23,7 +23,7 @@ export var dialogTitleOverrides = function () {
         }
     };
 };
-export var dialogContentOverrides = function () {
+export const dialogContentOverrides = () => {
     return {
         styleOverrides: {
             root: {
@@ -32,7 +32,7 @@ export var dialogContentOverrides = function () {
         }
     };
 };
-export var dialogActionsOverrides = function () {
+export const dialogActionsOverrides = () => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/iconButtonOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components } from '@mui/material/styles';
+export declare const iconButtonOverrides: () => Components["MuiIconButton"];

package/dist/lib/overrides/iconButtonOverrides.js

@@ -1,7 +1,7 @@
 import { alpha } from '@mui/material/styles';
 import paletteJson from '../palette.json';
-var paletteData = paletteJson;
-export var iconButtonOverrides = function () {
+const paletteData = paletteJson;
+export const iconButtonOverrides = () => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/menuItemOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const menuItemOverrides: (theme: Theme) => Components["MuiMenuItem"];

package/dist/lib/overrides/menuItemOverrides.js

@@ -1,24 +1,22 @@
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { alpha } from '@mui/material/styles';
 import { radius } from '../radius';
-export var menuItemOverrides = function (theme) {
-    var _a;
+export const menuItemOverrides = (theme) => {
     return {
         styleOverrides: {
-            root: (_a = {
-                    borderRadius: radius.md,
-                    '&&&:hover': {
-                        backgroundColor: "".concat(alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity))
-                    }
+            root: {
+                borderRadius: radius.md,
+                '&&&:hover': {
+                    backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
                 },
-                _a["&.".concat(menuItemClasses.selected)] = {
+                [`&.${menuItemClasses.selected}`]: {
                     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
                     '&:hover': {
                         backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
                             theme.palette.action.hoverOpacity)
                     }
-                },
-                _a)
+                }
+            }
         }
     };
 };

package/dist/lib/overrides/popoverOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components } from '@mui/material/styles';
+export declare const popoverOverrides: () => Components["MuiPopover"];

package/dist/lib/overrides/popoverOverrides.js

@@ -1,5 +1,5 @@
 import { radius } from '../radius';
-export var popoverOverrides = function () {
+export const popoverOverrides = () => {
     return {
         styleOverrides: {
             paper: {

package/dist/lib/overrides/swipeableDrawerOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const swipeableDrawerOverrides: (theme: Theme) => Components["MuiSwipeableDrawer"];

package/dist/lib/overrides/swipeableDrawerOverrides.js

@@ -0,0 +1,26 @@
+import { radius } from '../radius';
+// MuiSwipeableDrawer inherits from MuiDrawer.
+// To style the paper (the actual container) of a swipeable drawer, we have to target MuiDrawer
+export const swipeableDrawerOverrides = (theme) => {
+    return {
+        defaultProps: {
+            sx: {
+                '& .MuiDrawer-paper': {
+                    borderTopLeftRadius: radius.md,
+                    borderTopRightRadius: radius.md,
+                    '&::before': {
+                        content: '""',
+                        display: 'block',
+                        width: '64px',
+                        height: '4px',
+                        backgroundColor: theme.palette.action.disabledBackground,
+                        borderRadius: radius.md,
+                        margin: '12px auto',
+                        marginTop: '30px',
+                        flexShrink: 0
+                    }
+                }
+            }
+        }
+    };
+};

package/dist/lib/overrides/textFieldOverrides.d.ts

@@ -0,0 +1,5 @@
+import { Components } from '@mui/material/styles';
+export declare const textFieldOverrides: () => Components["MuiTextField"];
+export declare const outlinedInputOverrides: () => Components["MuiOutlinedInput"];
+export declare const inputBaseOverrides: () => Components["MuiInputBase"];
+export declare const selectOverrides: () => Components["MuiSelect"];

package/dist/lib/overrides/textFieldOverrides.js

@@ -1,5 +1,5 @@
 import { radius } from '../radius';
-export var textFieldOverrides = function () {
+export const textFieldOverrides = () => {
     return {
         defaultProps: {
             size: 'medium'
@@ -16,7 +16,7 @@ export var textFieldOverrides = function () {
         }
     };
 };
-export var outlinedInputOverrides = function () {
+export const outlinedInputOverrides = () => {
     return {
         styleOverrides: {
             root: {
@@ -57,7 +57,7 @@ export var outlinedInputOverrides = function () {
         ]
     };
 };
-export var inputBaseOverrides = function () {
+export const inputBaseOverrides = () => {
     return {
         styleOverrides: {
             root: {
@@ -68,7 +68,7 @@ export var inputBaseOverrides = function () {
         }
     };
 };
-export var selectOverrides = function () {
+export const selectOverrides = () => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/overrides/toggleButtonOverrides.d.ts

@@ -0,0 +1,3 @@
+import { Theme, Components } from '@mui/material/styles';
+export declare const toggleButtonGroupOverrides: () => Components["MuiToggleButtonGroup"];
+export declare const toggleButtonOverrides: (theme: Theme) => Components["MuiToggleButton"];

package/dist/lib/overrides/toggleButtonOverrides.js

@@ -1,5 +1,5 @@
 import { alpha } from '@mui/material/styles';
-export var toggleButtonGroupOverrides = function () {
+export const toggleButtonGroupOverrides = () => {
     return {
         styleOverrides: {
             root: {
@@ -18,7 +18,7 @@ export var toggleButtonGroupOverrides = function () {
         }
     };
 };
-export var toggleButtonOverrides = function (theme) {
+export const toggleButtonOverrides = (theme) => {
     return {
         styleOverrides: {
             root: {

package/dist/lib/radius.d.ts

@@ -0,0 +1,7 @@
+export declare const radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    pill: string;
+};

package/dist/lib/radius.js

@@ -1,4 +1,4 @@
-export var radius = {
+export const radius = {
     none: '0',
     sm: '4px',
     md: '8px',

package/dist/lib/theme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@mui/material/styles';
+export declare const theme: Theme;
+export type TwakeTheme = Theme;

package/dist/lib/theme.js

@@ -1,2 +1,2 @@
 import { makeTheme } from './makeTheme';
-export var theme = makeTheme();
+export const theme = makeTheme();

package/dist/lib/types.d.ts

@@ -0,0 +1,104 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+export interface PaletteColor {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    ContrastText?: string;
+    A400?: string;
+}
+export interface GreyPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100: string;
+    A200: string;
+    A400: string;
+    A700: string;
+    A900: string;
+}
+export interface TextPalette {
+    primary: string;
+    secondary: string;
+    secondaryContainer: string;
+    disabled: string;
+    hint: string;
+    icon: string;
+}
+export interface BackgroundPalette {
+    default: string;
+    paper: string;
+    contrast: string;
+}
+export interface ActionPalette {
+    active: string;
+    hover: string;
+    selected: string;
+    disabled: string;
+    disabledBackground: string;
+    focus: string;
+}
+export interface BorderPalette {
+    main: string;
+    disabled: string;
+    ghost: string;
+}
+export interface PaletteJson {
+    Primary: PaletteColor;
+    Secondary: PaletteColor;
+    Error: PaletteColor;
+    Warning: PaletteColor;
+    Success: PaletteColor;
+    Info: Omit<PaletteColor, 'ContrastText'>;
+    Grey: GreyPalette;
+}
+export type TypographyOptions = TypographyVariantsOptions;
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/InputBase' {
+    interface InputBasePropsSizeOverrides {
+        large: true;
+    }
+}
+export interface TypographyConfig {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: number | string;
+    lineHeight?: number | string;
+    letterSpacing?: string;
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+}
+export interface TypographyVariants {
+    h1: TypographyConfig;
+    h2: TypographyConfig;
+    h3: TypographyConfig;
+    h4: TypographyConfig;
+    h5: TypographyConfig;
+    h6: TypographyConfig;
+    subtitle1: TypographyConfig;
+    subtitle2: TypographyConfig;
+    body1: TypographyConfig;
+    body2: TypographyConfig;
+    button: TypographyConfig;
+    buttonLarge: TypographyConfig;
+    buttonSmall: TypographyConfig;
+    caption: TypographyConfig;
+    overline: TypographyConfig;
+}
+export type MakeTypography = () => TypographyOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linagora/twake-mui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "MUI v7 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
-    "cozy-tsconfig": "1.8.1",
+    "cozy-tsconfig": "^1.9.0",
     "eslint": "10.1.0",
     "eslint-config-cozy-app": "7.0.0"
   },