@toptal/picasso-modal 2.0.10 → 3.0.0

package/dist-package/src/Modal/Modal.d.ts

@@ -1,10 +1,9 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 import React from 'react';
-import type { PaperProps } from '@material-ui/core/Paper';
-import type { StandardProps, SizeType, TransitionProps } from '@toptal/picasso-shared';
+import type { BaseProps, SizeType, TransitionProps } from '@toptal/picasso-shared';
 declare type ContainerValue = HTMLElement | (() => HTMLElement);
 declare type Alignment = 'top' | 'centered';
-export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
     /** Content of Modal component */
     children: ReactNode;
     /** Whether modal should be displayed */
@@ -28,11 +27,12 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
     /** Animation lifecycle callbacks. Backed by [react-transition-group/Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) */
     transitionProps?: TransitionProps;
     transitionDuration?: number;
-    paperProps?: PaperProps;
+    /** used for specifying aria attributes, changing role, or customizing styles */
+    paperProps?: React.HTMLAttributes<HTMLDivElement>;
     testIds?: {
         closeButton?: string;
     };
 }
-export declare const Modal: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export declare const Modal: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Modal;
 //# sourceMappingURL=Modal.d.ts.map

package/dist-package/src/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAMN,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,eAAe,EAChB,MAAM,wBAAwB,CAAA;AAiB/B,aAAK,cAAc,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;AACvD,aAAK,SAAS,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnC,MAAM,WAAW,KAAM,SAAQ,aAAa,EAAE,cAAc,CAAC,cAAc,CAAC;IAC1E,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,qBAAqB;IACrB,IAAI,CAAC,EACD,QAAQ,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC5D,aAAa,CAAA;IACjB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAwDD,eAAO,MAAM,KAAK,2EAyIhB,CAAA;AAYF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,KAMN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,eAAe,EAChB,MAAM,wBAAwB,CAAA;AAe/B,aAAK,cAAc,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;AACvD,aAAK,SAAS,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnC,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,qBAAqB;IACrB,IAAI,CAAC,EACD,QAAQ,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC5D,aAAa,CAAA;IACjB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;IACjD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAuDD,eAAO,MAAM,KAAK,8EAuJhB,CAAA;AAYF,eAAe,KAAK,CAAA"}

package/dist-package/src/Modal/Modal.js

@@ -9,19 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { Modal as Dialog } from '@mui/base/Modal';
 import React, { forwardRef, useEffect, useRef, useCallback, useContext, } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Dialog } from '@material-ui/core';
 import cx from 'classnames';
-import { usePicassoRoot, useBreakpoint, RootContext, } from '@toptal/picasso-provider';
+import { usePicassoRoot, RootContext } from '@toptal/picasso-provider';
 import { CloseMinor16 } from '@toptal/picasso-icons';
 import { useCombinedRefs, ModalManager, usePageScrollLock, } from '@toptal/picasso-utils';
 import { ButtonCircular } from '@toptal/picasso-button';
+import { Fade } from '@toptal/picasso-fade';
+import { Backdrop } from '@toptal/picasso-backdrop';
 import ModalContext from '@toptal/picasso-modal-context';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoModal',
-});
+import { ModalPaper } from '../ModalPaper';
 const defaultManager = new ModalManager();
 // https://github.com/udacity/ud891/blob/gh-pages/lesson2-focus/07-modals-and-keyboard-traps/solution/modal.js#L25
 // found in https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex
@@ -31,7 +29,9 @@ const focusFirstFocusableElement = (node) => {
     const elements = node.querySelectorAll(focusableElementsString);
     // Convert NodeList to Array
     const focusableElements = Array.prototype.slice.call(elements);
-    focusableElements[0].focus();
+    if (focusableElements.length > 0) {
+        focusableElements[0].focus();
+    }
 };
 const isFocusInsideModal = (modalNode) => {
     const modalContainsFocusedElement = modalNode.contains(document.activeElement);
@@ -58,7 +58,6 @@ const generateKey = (() => {
 // eslint-disable-next-line react/display-name
 export const Modal = forwardRef(function Modal(props, ref) {
     const { children, open, size = 'medium', onBackdropClick, onClose, onOpen, className, style, container, hideBackdrop = false, transitionDuration = 300, paperProps, align = 'centered', testIds, transitionProps, disableBackdropClick = false } = props, rest = __rest(props, ["children", "open", "size", "onBackdropClick", "onClose", "onOpen", "className", "style", "container", "hideBackdrop", "transitionDuration", "paperProps", "align", "testIds", "transitionProps", "disableBackdropClick"]);
-    const classes = useStyles(props);
     const picassoRootContainer = usePicassoRoot();
     const modalRef = useCombinedRefs(ref, useRef(null));
     const modalId = useRef(generateKey());
@@ -100,7 +99,6 @@ export const Modal = forwardRef(function Modal(props, ref) {
         };
     }, [open]);
     usePageScrollLock(open);
-    const isExtraSmall = useBreakpoint('xs');
     const handleClose = useCallback((_event, reason) => {
         if (reason === 'escapeKeyDown' && onClose) {
             onClose();
@@ -114,17 +112,20 @@ export const Modal = forwardRef(function Modal(props, ref) {
             }
         }
     }, [disableBackdropClick, onBackdropClick, onClose]);
-    return (React.createElement(Dialog, Object.assign({}, rest, { ref: modalRef, classes: {
-            root: classes.root,
-            container: classes.container,
-            paper: cx(classes.paper, classes[size], {
-                [classes.topAlignedDialog]: align === 'top',
-            }),
-        }, className: className, style: style, fullScreen: isExtraSmall, container: container || picassoRootContainer, PaperProps: Object.assign(Object.assign({}, paperProps), { elevation: 2 }), hideBackdrop: hideBackdrop, onClose: handleClose, onEnter: onOpen, open: open, transitionDuration: transitionDuration, maxWidth: false, disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
-        : true, TransitionProps: transitionProps, disableScrollLock: true }),
-        React.createElement(ModalContext.Provider, { value: true }, children),
-        onClose && (React.createElement(ButtonCircular, { variant: 'flat', className: 'absolute right-[2em] top-[2em]', onClick: onClose, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton },
-            React.createElement(CloseMinor16, null)))));
+    const duration = (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.timeout) || transitionDuration;
+    const backdropProps = { transitionDuration: duration };
+    return (React.createElement(Dialog, Object.assign({}, rest, { ref: modalRef, className: cx(className, 'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center'), style: style, slots: {
+            backdrop: Backdrop,
+        }, closeAfterTransition: true, slotProps: {
+            backdrop: backdropProps,
+        }, container: container || picassoRootContainer, hideBackdrop: hideBackdrop, onClose: handleClose, open: open, disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
+        : true, disableScrollLock: true }),
+        React.createElement(Fade, { in: open, onEnter: onOpen, onExited: transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited, timeout: transitionDuration },
+            React.createElement(ModalPaper, Object.assign({ size: size, align: align, tabIndex: -1 }, paperProps),
+                React.createElement(ModalContext.Provider, { value: true },
+                    children,
+                    onClose && (React.createElement(ButtonCircular, { "aria-label": 'Close', variant: 'flat', className: 'absolute top-8 right-8', onClick: onClose, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.closeButton },
+                        React.createElement(CloseMinor16, null))))))));
 });
 Modal.defaultProps = {
     hideBackdrop: false,

package/dist-package/src/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/ModalActions/ModalActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalActions.d.ts","sourceRoot":"","sources":["../../../src/ModalActions/ModalActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAMD,eAAO,MAAM,YAAY,8EAgBxB,CAAA;AAID,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ModalActions.d.ts","sourceRoot":"","sources":["../../../src/ModalActions/ModalActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,YAAY,8EAexB,CAAA;AAID,eAAe,YAAY,CAAA"}

package/dist-package/src/ModalActions/ModalActions.js

@@ -10,16 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoModalAction',
-});
 export const ModalActions = forwardRef(function ModalActions(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const classes = useStyles();
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }), children));
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx('mt-0 mx-8 mb-8 text-right', className), style: style }), children));
 });
 ModalActions.displayName = 'ModalActions';
 export default ModalActions;

package/dist-package/src/ModalActions/ModalActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalActions.js","sourceRoot":"","sources":["../../../src/ModalActions/ModalActions.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,KAEX,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ModalActions.js","sourceRoot":"","sources":["../../../src/ModalActions/ModalActions.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAQ3B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE,KAAK,KAEX,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

package/dist-package/src/ModalCompound/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const ModalCompound: import("react").ForwardRefExoticComponent<import("../Modal").Props & import("react").RefAttributes<HTMLElement>> & {
+export declare const ModalCompound: import("react").ForwardRefExoticComponent<import("../Modal").Props & import("react").RefAttributes<HTMLDivElement>> & {
     Content: import("react").ForwardRefExoticComponent<import("../ModalContent/ModalContent").Props & import("react").RefAttributes<HTMLDivElement>>;
     Actions: import("react").ForwardRefExoticComponent<import("../ModalActions/ModalActions").Props & import("react").RefAttributes<HTMLDivElement>>;
     Title: import("react").ForwardRefExoticComponent<import("../ModalTitle/ModalTitle").Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist-package/src/ModalContent/ModalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAMD,eAAO,MAAM,YAAY,8EA6BxB,CAAA;AAID,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AACD,eAAO,MAAM,YAAY,8EAgDxB,CAAA;AAID,eAAe,YAAY,CAAA"}

package/dist-package/src/ModalContent/ModalContent.js

@@ -10,14 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
 import { useCombinedRefs } from '@toptal/picasso-utils';
-import styles from './styles';
 import useScrollableShades from './hooks/use-scrollable-shades';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoModalContent',
-});
 export const ModalContent = forwardRef(function ModalContent(props, ref) {
     const { children, className, style } = props, rest = __rest(props
     /**
@@ -31,11 +26,12 @@ export const ModalContent = forwardRef(function ModalContent(props, ref) {
      */
     const modalContentRef = useCombinedRefs(ref);
     const { top, bottom } = useScrollableShades(modalContentRef);
-    const classes = useStyles();
-    return (React.createElement("div", { className: cx(classes.wrapper) },
-        top && React.createElement("div", { className: cx(classes.topShade) }),
-        bottom && React.createElement("div", { className: cx(classes.bottomShade) }),
-        React.createElement("div", Object.assign({}, rest, { style: style, ref: modalContentRef, className: cx(classes.modalContent, className) }), children)));
+    const shadeClasses = 'z-[1] absolute pointer-events-none right-8 left-8 h-[112px]';
+    const gradientClasses = 'from-white to-transparent to-100% from-0% via-[2rem] via-white';
+    return (React.createElement("div", { className: 'flex relative flex-auto overflow-y-hidden' },
+        top && (React.createElement("div", { className: cx(shadeClasses, gradientClasses, 'top-0 bg-gradient-to-b') })),
+        bottom && (React.createElement("div", { className: cx(shadeClasses, gradientClasses, 'bottom-0 bg-gradient-to-t') })),
+        React.createElement("div", Object.assign({}, rest, { style: style, ref: modalContentRef, className: cx('pt-6 px-8 pb-8 overflow-auto flex-auto', className) }), children)));
 });
 ModalContent.displayName = 'ModalContent';
 export default ModalContent;

package/dist-package/src/ModalContent/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,mBAAmB,MAAM,+BAA+B,CAAA;AAO/D,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,qBAAqB;CAC5B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK;IAErD;;;OAGG;MALG,kCAAuC,CAAQ,CAAA;IAErD;;;OAGG;IACH,MAAM,eAAe,GAAG,eAAe,CAAiB,GAAG,CAAC,CAAA;IAE5D,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;IAE5D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;QAChC,GAAG,IAAI,6BAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAI;QAC/C,MAAM,IAAI,6BAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,GAAI;QACtD,6CACM,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,KAE7C,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,mBAAmB,MAAM,+BAA+B,CAAA;AAM/D,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK;IAErD;;;OAGG;MALG,kCAAuC,CAAQ,CAAA;IAErD;;;OAGG;IACH,MAAM,eAAe,GAAG,eAAe,CAAiB,GAAG,CAAC,CAAA;IAE5D,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;IAE5D,MAAM,YAAY,GAChB,6DAA6D,CAAA;IAC/D,MAAM,eAAe,GACnB,gEAAgE,CAAA;IAElE,OAAO,CACL,6BAAK,SAAS,EAAC,2CAA2C;QACvD,GAAG,IAAI,CACN,6BACE,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,eAAe,EACf,wBAAwB,CACzB,GACD,CACH;QACA,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,eAAe,EACf,2BAA2B,CAC5B,GACD,CACH;QACD,6CACM,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,KAEjE,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

package/dist-package/src/ModalPaper/ModalPaper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SizeType } from '@toptal/picasso-shared';
+declare type PaperSize = SizeType<'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'> | 'full-screen';
+declare type Alignment = 'top' | 'centered';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    align: Alignment;
+    children: React.ReactNode;
+    /** Width of modal */
+    size: PaperSize;
+}
+export declare const ModalPaper: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default ModalPaper;
+//# sourceMappingURL=ModalPaper.d.ts.map

package/dist-package/src/ModalPaper/ModalPaper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPaper.d.ts","sourceRoot":"","sources":["../../../src/ModalPaper/ModalPaper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGtD,aAAK,SAAS,GACV,QAAQ,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAC5D,aAAa,CAAA;AACjB,aAAK,SAAS,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnC,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAA;CAChB;AA+BD,eAAO,MAAM,UAAU,8EAqBtB,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist-package/src/ModalPaper/ModalPaper.js

@@ -0,0 +1,43 @@
+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 React from 'react';
+import cx from 'classnames';
+import { Paper } from '@toptal/picasso-paper';
+const fullscreenClasses = `h-full w-full max-h-full max-w-full`;
+const defaultClasses = `m-4 sm:h-auto sm:m-8 max-w-[calc(100%_-_2rem)] sm:max-w-[calc(100%_-_6rem)] rounded-md`;
+const sizeBasedClasses = {
+    xsmall: `${defaultClasses} w-[20.5rem]`,
+    small: `${defaultClasses} w-[32.5rem]`,
+    medium: `${defaultClasses} w-[40.625rem]`,
+    large: `${defaultClasses} w-[50rem]`,
+    xlarge: `${defaultClasses} w-[75rem]`,
+    'full-screen': fullscreenClasses,
+};
+const alignBasedClasses = {
+    centered: 'relative',
+    top: 'absolute top-0',
+};
+const getMaxHeightClass = (size, align) => {
+    if (size === 'full-screen') {
+        return 'max-h-full';
+    }
+    if (align === 'top') {
+        return `max-h-[calc(100%_-_2rem)] sm:max-h-[calc(100%_-_4rem)]`;
+    }
+    return `max-h-[calc(100%_-_2rem)] sm:max-h-[calc(100%_-_6rem)]`;
+};
+export const ModalPaper = React.forwardRef(function ModalPaper(_a, ref) {
+    var { children, size, align, className } = _a, props = __rest(_a, ["children", "size", "align", "className"]);
+    return (React.createElement(Paper, Object.assign({ ref: ref, role: 'dialog', elevation: 2, className: cx(className, 'outline-none overflow-y-auto', 'flex flex-col', sizeBasedClasses[size], alignBasedClasses[align], getMaxHeightClass(size, align)) }, props), children));
+});
+export default ModalPaper;
+//# sourceMappingURL=ModalPaper.js.map

package/dist-package/src/ModalPaper/ModalPaper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPaper.js","sourceRoot":"","sources":["../../../src/ModalPaper/ModalPaper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAc7C,MAAM,iBAAiB,GAAG,qCAAqC,CAAA;AAC/D,MAAM,cAAc,GAAG,wFAAwF,CAAA;AAE/G,MAAM,gBAAgB,GAAG;IACvB,MAAM,EAAE,GAAG,cAAc,cAAc;IACvC,KAAK,EAAE,GAAG,cAAc,cAAc;IACtC,MAAM,EAAE,GAAG,cAAc,gBAAgB;IACzC,KAAK,EAAE,GAAG,cAAc,YAAY;IACpC,MAAM,EAAE,GAAG,cAAc,YAAY;IACrC,aAAa,EAAE,iBAAiB;CACjC,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,gBAAgB;CACtB,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,IAAe,EAAE,KAAgB,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,aAAa,EAAE;QAC1B,OAAO,YAAY,CAAA;KACpB;IAED,IAAI,KAAK,KAAK,KAAK,EAAE;QACnB,OAAO,wDAAwD,CAAA;KAChE;IAED,OAAO,wDAAwD,CAAA;AACjE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,SAAS,UAAU,CAAC,EAA8C,EAAE,GAAG;QAAnD,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,OAAY,EAAP,KAAK,cAA5C,0CAA8C,CAAF;IAC9D,OAAO,CACL,oBAAC,KAAK,kBACJ,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,EAAE,CACX,SAAS,EACT,8BAA8B,EAC9B,eAAe,EACf,gBAAgB,CAAC,IAAI,CAAC,EACtB,iBAAiB,CAAC,KAAK,CAAC,EACxB,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAC/B,IACG,KAAK,GAER,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist-package/src/ModalPaper/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalPaper } from './ModalPaper';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/ModalPaper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ModalPaper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/ModalPaper/index.js

@@ -0,0 +1,2 @@
+export { ModalPaper } from './ModalPaper';
+//# sourceMappingURL=index.js.map

package/dist-package/src/ModalPaper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ModalPaper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/ModalTitle/ModalTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTitle.d.ts","sourceRoot":"","sources":["../../../src/ModalTitle/ModalTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAID,eAAO,MAAM,UAAU,8EAoBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ModalTitle.d.ts","sourceRoot":"","sources":["../../../src/ModalTitle/ModalTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,UAAU,8EAkBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist-package/src/ModalTitle/ModalTitle.js

@@ -10,15 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoModalTitle' });
 export const ModalTitle = forwardRef(function ModalTitle(props, ref) {
     const { children, className, style } = props, rest = __rest(props, ["children", "className", "style"]);
-    const classes = useStyles();
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx('pr-6 mt-8 mx-8 mb-0', className), style: style }),
         React.createElement(Typography, { variant: 'heading', size: 'large' }, children)));
 });
 ModalTitle.displayName = 'ModalTitle';

package/dist-package/src/ModalTitle/ModalTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTitle.js","sourceRoot":"","sources":["../../../src/ModalTitle/ModalTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAwB,SAAS,UAAU,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACvC,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ModalTitle.js","sourceRoot":"","sources":["../../../src/ModalTitle/ModalTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAOvD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAwB,SAAS,UAAU,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAA;IAErD,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IACvC,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-modal",
-  "version": "2.0.10",
+  "version": "3.0.0",
   "description": "Toptal UI components library - Modal",
   "publishConfig": {
     "access": "public"
@@ -22,9 +22,14 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.1.1",
+    "@mui/base": "5.0.0-beta.40",
+    "@toptal/picasso-backdrop": "1.0.5",
+    "@toptal/picasso-fade": "1.0.5",
+    "@toptal/picasso-paper": "3.0.0",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-button": "3.0.0",
     "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3",
     "@toptal/picasso-modal-context": "1.0.1",
     "classnames": "^2.5.1",
@@ -35,7 +40,6 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "react": ">=16.12.0 < 19.0.0",
     "@toptal/picasso-tailwind": ">=2.5.0"
@@ -44,7 +48,7 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-provider": "5.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Modal/Modal.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode, HTMLAttributes } from 'react'
+import { Modal as Dialog } from '@mui/base/Modal'
 import React, {
   forwardRef,
   useEffect,
@@ -6,21 +7,13 @@ import React, {
   useCallback,
   useContext,
 } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { Dialog } from '@material-ui/core'
-import type { PaperProps } from '@material-ui/core/Paper'
 import cx from 'classnames'
 import type {
-  StandardProps,
+  BaseProps,
   SizeType,
   TransitionProps,
 } from '@toptal/picasso-shared'
-import {
-  usePicassoRoot,
-  useBreakpoint,
-  RootContext,
-} from '@toptal/picasso-provider'
+import { usePicassoRoot, RootContext } from '@toptal/picasso-provider'
 import { CloseMinor16 } from '@toptal/picasso-icons'
 import {
   useCombinedRefs,
@@ -28,14 +21,16 @@ import {
   usePageScrollLock,
 } from '@toptal/picasso-utils'
 import { ButtonCircular } from '@toptal/picasso-button'
+import { Fade } from '@toptal/picasso-fade'
+import { Backdrop } from '@toptal/picasso-backdrop'
 import ModalContext from '@toptal/picasso-modal-context'
 
-import styles from './styles'
+import { ModalPaper } from '../ModalPaper'
 
 type ContainerValue = HTMLElement | (() => HTMLElement)
 type Alignment = 'top' | 'centered'
 
-export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Content of Modal component */
   children: ReactNode
   /** Whether modal should be displayed */
@@ -61,15 +56,13 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
   /** Animation lifecycle callbacks. Backed by [react-transition-group/Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) */
   transitionProps?: TransitionProps
   transitionDuration?: number
-  paperProps?: PaperProps
+  /** used for specifying aria attributes, changing role, or customizing styles */
+  paperProps?: React.HTMLAttributes<HTMLDivElement>
   testIds?: {
     closeButton?: string
   }
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoModal',
-})
 const defaultManager = new ModalManager()
 
 // https://github.com/udacity/ud891/blob/gh-pages/lesson2-focus/07-modals-and-keyboard-traps/solution/modal.js#L25
@@ -83,7 +76,9 @@ const focusFirstFocusableElement = (node: Element) => {
   // Convert NodeList to Array
   const focusableElements = Array.prototype.slice.call(elements)
 
-  focusableElements[0].focus()
+  if (focusableElements.length > 0) {
+    focusableElements[0].focus()
+  }
 }
 
 const isFocusInsideModal = (modalNode: Element) => {
@@ -121,7 +116,10 @@ const generateKey = (() => {
 })()
 
 // eslint-disable-next-line react/display-name
-export const Modal = forwardRef<HTMLElement, Props>(function Modal(props, ref) {
+export const Modal = forwardRef<HTMLDivElement, Props>(function Modal(
+  props,
+  ref
+) {
   const {
     children,
     open,
@@ -141,9 +139,11 @@ export const Modal = forwardRef<HTMLElement, Props>(function Modal(props, ref) {
     disableBackdropClick = false,
     ...rest
   } = props
-  const classes = useStyles(props)
   const picassoRootContainer = usePicassoRoot()
-  const modalRef = useCombinedRefs<HTMLElement>(ref, useRef<HTMLElement>(null))
+  const modalRef = useCombinedRefs<HTMLDivElement>(
+    ref,
+    useRef<HTMLDivElement>(null)
+  )
   const modalId = useRef(generateKey())
   const { rootRef } = useContext(RootContext)
 
@@ -199,8 +199,6 @@ export const Modal = forwardRef<HTMLElement, Props>(function Modal(props, ref) {
 
   usePageScrollLock(open)
 
-  const isExtraSmall = useBreakpoint('xs')
-
   const handleClose = useCallback(
     (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
       if (reason === 'escapeKeyDown' && onClose) {
@@ -218,44 +216,55 @@ export const Modal = forwardRef<HTMLElement, Props>(function Modal(props, ref) {
     [disableBackdropClick, onBackdropClick, onClose]
   )
 
+  const duration = transitionProps?.timeout || transitionDuration
+  const backdropProps = { transitionDuration: duration }
+
   return (
     <Dialog
       {...rest}
       ref={modalRef}
-      classes={{
-        root: classes.root,
-        container: classes.container,
-        paper: cx(classes.paper, classes[size], {
-          [classes.topAlignedDialog]: align === 'top',
-        }),
-      }}
-      className={className}
+      className={cx(
+        className,
+        'fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center'
+      )}
       style={style}
-      fullScreen={isExtraSmall}
+      slots={{
+        backdrop: Backdrop,
+      }}
+      closeAfterTransition
+      slotProps={{
+        backdrop: backdropProps,
+      }}
       container={container || picassoRootContainer}
-      PaperProps={{ ...paperProps, elevation: 2 }}
       hideBackdrop={hideBackdrop}
       onClose={handleClose}
-      onEnter={onOpen}
       open={open}
-      transitionDuration={transitionDuration}
-      maxWidth={false}
       disableEnforceFocus // we need our own mechanism to keep focus inside the Modals
-      TransitionProps={transitionProps}
       disableScrollLock
     >
-      <ModalContext.Provider value>{children}</ModalContext.Provider>
-
-      {onClose && (
-        <ButtonCircular
-          variant='flat'
-          className='absolute right-[2em] top-[2em]'
-          onClick={onClose}
-          data-testid={testIds?.closeButton}
-        >
-          <CloseMinor16 />
-        </ButtonCircular>
-      )}
+      <Fade
+        in={open}
+        onEnter={onOpen}
+        onExited={transitionProps?.onExited}
+        timeout={transitionDuration}
+      >
+        <ModalPaper size={size} align={align} tabIndex={-1} {...paperProps}>
+          <ModalContext.Provider value>
+            {children}
+            {onClose && (
+              <ButtonCircular
+                aria-label='Close'
+                variant='flat'
+                className='absolute top-8 right-8'
+                onClick={onClose}
+                data-testid={testIds?.closeButton}
+              >
+                <CloseMinor16 />
+              </ButtonCircular>
+            )}
+          </ModalContext.Provider>
+        </ModalPaper>
+      </Fade>
     </Dialog>
   )
 })