@mezzanine-ui/react 0.6.4 → 0.7.3

package/Drawer/Drawer.js

@@ -1,34 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
     const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const [exited, setExited] = useState(true);
-    useDocumentEscapeKeyDown(() => {
-        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
-            return;
-        }
-        return onClose;
-    }, [
-        disableCloseOnEscapeKeyDown,
-        open,
-        onClose,
-    ]);
-    if (!open && exited) {
-        return null;
-    }
-    const slideFadeDirection = {
+    const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
-    };
-    return (jsx(Overlay, Object.assign({ className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, direction: slideFadeDirection[placement], in: open, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0) }), void 0));
-});
+    }), []);
+    return (jsx(SlideFadeOverlay, Object.assign({ className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0));
+});
+var Drawer$1 = Drawer;
 
-export default Drawer;
+export { Drawer$1 as default };

package/Dropdown/Dropdown.js

@@ -55,6 +55,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
                         ...modifiers,
                     ],
                 } }, { children: menu }), void 0)] }, void 0));
-});
+});
+var Dropdown$1 = Dropdown;
 
-export default Dropdown;
+export { Dropdown$1 as default };

package/Empty/Empty.js

@@ -11,6 +11,7 @@ const Empty = forwardRef(function Empty(props, ref) {
             [emptyClasses.fullHeight]: fullHeight,
         }, className) }, { children: [image, title && jsx("div", Object.assign({ className: emptyClasses.title }, { children: title }), void 0),
             children && jsx("div", Object.assign({ className: emptyClasses.description }, { children: children }), void 0)] }), void 0));
-});
+});
+var Empty$1 = Empty;
 
-export default Empty;
+export { Empty$1 as default };

package/Form/FormField.js

@@ -19,6 +19,7 @@ const FormField = forwardRef(function FormField(props, ref) {
             [formFieldClasses.disabled]: disabled,
             [formFieldClasses.fullWidth]: fullWidth,
         }, className) }, { children: jsx(FormControlContext.Provider, Object.assign({ value: formControl }, { children: children }), void 0) }), void 0));
-});
+});
+var FormField$1 = FormField;
 
-export default FormField;
+export { FormField$1 as default };

package/Form/FormLabel.js

@@ -12,6 +12,7 @@ const FormLabel = forwardRef(function FormLabel(props, ref) {
     const { required } = useContext(FormControlContext) || {};
     return (jsxs("label", Object.assign({}, rest, { ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor }, { children: [jsxs("span", { children: [children, required && jsx("span", Object.assign({ className: formFieldClasses.asterisk }, { children: "*" }), void 0)] }, void 0),
             (remark || remarkIcon) && (jsxs("span", Object.assign({ className: formFieldClasses.remark }, { children: [jsx("span", { children: remark }, void 0), remarkIcon] }), void 0))] }), void 0));
-});
+});
+var FormLabel$1 = FormLabel;
 
-export default FormLabel;
+export { FormLabel$1 as default };

package/Form/FormMessage.js

@@ -13,6 +13,7 @@ const FormMessage = forwardRef(function FormMessage(props, ref) {
     const { severity } = useContext(FormControlContext) || {};
     const icon = severity ? formMessageIcons[severity] : null;
     return (jsxs("span", Object.assign({}, rest, { ref: ref, className: cx(formFieldClasses.message, className) }, { children: [icon && (jsx(Icon, { className: formFieldClasses.severityIcon, icon: icon }, void 0)), children] }), void 0));
-});
+});
+var FormMessage$1 = FormMessage;
 
-export default FormMessage;
+export { FormMessage$1 as default };

package/Icon/Icon.d.ts

@@ -11,6 +11,10 @@ export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
      * The icon provided by `@mezzanine-ui/icons` package.
      */
     icon: IconDefinition;
+    /**
+     * Icon size in px
+     */
+    size?: number;
     /**
      * Whether to spin the icon or not.
      * @default false

package/Icon/Icon.js

@@ -7,9 +7,9 @@ import cx from 'clsx';
  * The react component for `mezzanine` icon.
  */
 const Icon = forwardRef(function Icon(props, ref) {
-    const { className, color, icon, spin = false, style: styleProp, ...rest } = props;
+    const { className, color, icon, size, spin = false, style: styleProp, ...rest } = props;
     const { definition } = icon;
-    const cssVars = toIconCssVars({ color });
+    const cssVars = toIconCssVars({ color, size });
     const style = {
         ...cssVars,
         ...styleProp,
@@ -17,7 +17,9 @@ const Icon = forwardRef(function Icon(props, ref) {
     return (jsx("i", Object.assign({}, rest, { ref: ref, "aria-hidden": true, className: cx(iconClasses.host, {
             [iconClasses.color]: color,
             [iconClasses.spin]: spin,
+            [iconClasses.size]: size,
         }, className), "data-icon-name": icon.name, style: style }, { children: jsx("svg", Object.assign({}, definition.svg, { focusable: false }, { children: jsx("path", Object.assign({}, definition.path), void 0) }), void 0) }), void 0));
-});
+});
+var Icon$1 = Icon;
 
-export default Icon;
+export { Icon$1 as default };

package/Input/Input.js

@@ -3,8 +3,8 @@ import { forwardRef, useContext, useRef } from 'react';
 import { inputClasses } from '@mezzanine-ui/core/input';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 import TextField from '../TextField/TextField.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
 /**
@@ -23,6 +23,7 @@ const Input = forwardRef(function Input(props, ref) {
     const composedInputRef = useComposeRefs([inputRefProp, inputRef]);
     const active = !!value;
     return (jsx(TextField, Object.assign({ ref: ref, active: active, className: cx(inputClasses.host, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, prefix: prefix, size: size, suffix: suffix }, { children: jsx("input", Object.assign({}, inputProps, { ref: composedInputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }), void 0) }), void 0));
-});
+});
+var Input$1 = Input;
 
-export default Input;
+export { Input$1 as default };

package/Loading/Loading.js

@@ -23,6 +23,7 @@ const Loading = forwardRef(function Loading(props, ref) {
             }, className) }, { children: [jsx(Overlay, Object.assign({}, overlayProps, { container: hostRef, onSurface: true, open: loading }, { children: spinElement }), void 0), children] }), void 0));
     }
     return spinElement;
-});
+});
+var Loading$1 = Loading;
 
-export default Loading;
+export { Loading$1 as default };

package/Menu/Menu.js

@@ -17,6 +17,7 @@ const Menu = forwardRef(function Menu(props, ref) {
         ...styleProp,
     };
     return (jsx("ul", Object.assign({}, rest, { ref: ref, className: cx(menuClasses.host, menuClasses.size(size), className), role: role, style: style }, { children: children }), void 0));
-});
+});
+var Menu$1 = Menu;
 
-export default Menu;
+export { Menu$1 as default };

package/Menu/MenuDivider.js

@@ -9,6 +9,7 @@ import cx from 'clsx';
 const MenuDivider = forwardRef(function MenuDivider(props, ref) {
     const { className, ...rest } = props;
     return (jsx("hr", Object.assign({}, rest, { ref: ref, className: cx(menuDividerClasses.host, className) }), void 0));
-});
+});
+var MenuDivider$1 = MenuDivider;
 
-export default MenuDivider;
+export { MenuDivider$1 as default };

package/Menu/MenuItem.js

@@ -21,6 +21,7 @@ const MenuItem = forwardRef(function MenuItem(props, ref) {
             }
         }, onKeyDown: onKeyDown, role: role }, { children: [jsx("div", Object.assign({ className: menuItemClasses.label }, { children: children }), void 0),
             active && jsx(Icon, { className: menuItemClasses.activeIcon, icon: CheckIcon }, void 0)] }), void 0));
-});
+});
+var MenuItem$1 = MenuItem;
 
-export default MenuItem;
+export { MenuItem$1 as default };

package/Menu/MenuItemGroup.js

@@ -10,6 +10,7 @@ const MenuItemGroup = forwardRef(function MenuItemGroup(props, ref) {
     const { children, className, label, ...rest } = props;
     return (jsxs("li", Object.assign({ ref: ref }, rest, { className: cx(menuItemGroupClasses.host, className) }, { children: [jsx("span", Object.assign({ className: menuItemGroupClasses.label }, { children: label }), void 0),
             jsx("ul", Object.assign({ className: menuItemGroupClasses.items }, { children: children }), void 0)] }), void 0));
-});
+});
+var MenuItemGroup$1 = MenuItemGroup;
 
-export default MenuItemGroup;
+export { MenuItemGroup$1 as default };

package/Message/Message.d.ts

@@ -1,4 +1,5 @@
 import { MessageSeverity } from '@mezzanine-ui/core/message';
+import { IconDefinition } from '@mezzanine-ui/icons';
 import { FC, Key } from 'react';
 import { Notifier, NotifierData, NotifierConfig } from '../Notifier';
 import { SlideFadeProps } from '../Transition';
@@ -11,23 +12,25 @@ export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfi
      * @default 3000
      */
     duration?: NotifierData['duration'];
+    /**
+     * message icon prefix
+     */
+    icon?: IconDefinition;
     /**
      * The key of message.
      */
     reference?: Key;
     /**
      * The severity of the message.
-     * @default info
      */
     severity?: MessageSeverity;
 }
-export interface Message extends FC<MessageData>, Notifier<MessageData, MessageConfigProps>, Record<MessageSeverity, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity'>) => Key> {
-}
+export declare type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & (Record<string, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity' | 'icon'>) => Key>);
 /**
  * The react component for `mezzanine` message.
  *
- * Use the API from the Message instance such as `Message.success` and `Message.error`
+ * Use the API from the Message instance such as `Message.add` and `Message.success`
  * to display a notification message globally.
  */
-declare const Message: Message;
+declare const Message: MessageType;
 export default Message;

package/Message/Message.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { messageIcons, messageClasses } from '@mezzanine-ui/core/message';
+import { messageClasses, messageIcons } from '@mezzanine-ui/core/message';
 import { useState, useEffect } from 'react';
 import SlideFade from '../Transition/SlideFade.js';
 import Icon from '../Icon/Icon.js';
@@ -9,13 +9,11 @@ import cx from 'clsx';
 /**
  * The react component for `mezzanine` message.
  *
- * Use the API from the Message instance such as `Message.success` and `Message.error`
+ * Use the API from the Message instance such as `Message.add` and `Message.success`
  * to display a notification message globally.
  */
-// eslint-disable-next-line @typescript-eslint/no-redeclare
 const Message = ((props) => {
-    const { children, duration, reference, severity = 'info', onExited: onExitedProp, ...restTransitionProps } = props;
-    const icon = messageIcons[severity];
+    const { children, duration, icon, reference, severity, onExited: onExitedProp, ...restTransitionProps } = props;
     const [open, setOpen] = useState(true);
     useEffect(() => {
         if (open && duration) {
@@ -31,10 +29,10 @@ const Message = ((props) => {
         if (onExitedProp) {
             onExitedProp(node);
         }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        Message.remove(reference);
+        if (reference)
+            Message.remove(reference);
     };
-    return (jsx(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited }, restTransitionProps, { children: jsxs("div", Object.assign({ className: cx(messageClasses.host, messageClasses.severity(severity)) }, { children: [jsx(Icon, { className: messageClasses.icon, icon: icon }, void 0),
+    return (jsx(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited }, restTransitionProps, { children: jsxs("div", Object.assign({ className: cx(messageClasses.host, severity ? messageClasses.severity(severity) : '') }, { children: [icon ? (jsx(Icon, { className: messageClasses.icon, icon: icon }, void 0)) : null,
                 jsx("span", Object.assign({ className: messageClasses.content }, { children: children }), void 0)] }), void 0) }), void 0));
 });
 const { add, config, destroy, remove, } = createNotifier({
@@ -48,12 +46,30 @@ Message.add = add;
 Message.config = config;
 Message.destroy = destroy;
 Message.remove = remove;
-['success', 'warning', 'error', 'info'].forEach((severity) => {
-    Message[severity] = (message, props) => Message.add({
+const severities = [{
+        key: 'success',
+        icon: messageIcons.success,
+    }, {
+        key: 'warning',
+        icon: messageIcons.warning,
+    }, {
+        key: 'error',
+        icon: messageIcons.error,
+    }, {
+        key: 'info',
+        icon: messageIcons.info,
+    }];
+const validSeverities = ['success', 'warning', 'error', 'info'];
+(severities).forEach((severity) => {
+    Message[severity.key] = (message, props) => Message.add({
         ...props,
         children: message,
-        severity,
+        severity: validSeverities.includes(severity.key)
+            ? severity.key
+            : undefined,
+        icon: severity.icon,
     });
-});
+});
+var Message$1 = Message;
 
-export default Message;
+export { Message$1 as default };

package/Message/index.d.ts

@@ -1,2 +1,2 @@
 export { MessageSeverity, } from '@mezzanine-ui/core/message';
-export { MessageData, default, } from './Message';
+export { MessageData, MessageType, default, } from './Message';

package/Modal/Modal.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { OverlayProps } from '../Overlay';
-export interface ModalProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
-    /**
-     * Controls whether to disable closing modal while escape key down.
-     * @default false
-     */
-    disableCloseOnEscapeKeyDown?: boolean;
+export interface ModalProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * Whether to force full screen on any breakpoint.
      * @default false

package/Modal/Modal.js

@@ -1,13 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
 import { TimesIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useState, useLayoutEffect, useEffect } from 'react';
-import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import { lockBodyScroll, allowBodyScroll } from '../utils/scroll-lock.js';
-import { useIsTopModal } from './useIsTopModal.js';
+import { forwardRef } from 'react';
 import { ModalControlContext } from './ModalControl.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import useModalContainer from './useModalContainer.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -15,61 +11,17 @@ import cx from 'clsx';
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, fullScreen = false, hideBackdrop, hideCloseIcon = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
+    const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideBackdrop = false, hideCloseIcon = false, invisibleBackdrop = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
     const modalControl = {
         loading,
         severity,
     };
-    const [exited, setExited] = useState(true);
-    /**
-     * Escape keydown close: escape will only close the top modal
-     */
-    const isTopModal = useIsTopModal(open);
-    useDocumentEscapeKeyDown(() => {
-        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
-            return;
-        }
-        return (event) => {
-            if (isTopModal()) {
-                event.stopPropagation();
-                onClose();
-            }
-        };
-    }, [
-        disableCloseOnEscapeKeyDown,
-        isTopModal,
-        open,
-        onClose,
-    ]);
-    /** lock body scroll */
-    useLayoutEffect(() => {
-        if (open) {
-            lockBodyScroll();
-        }
-    }, [open]);
-    /** unlock body scroll */
-    useEffect(() => {
-        function checkAndAllowScroll() {
-            // wait until dom element unmount, and check if other modal existed
-            const allModals = document.querySelectorAll('.mzn-modal');
-            if (!allModals.length) {
-                allowBodyScroll();
-            }
-        }
-        if (!open && exited) {
-            checkAndAllowScroll();
-        }
-        return (() => {
-            requestAnimationFrame(checkAndAllowScroll);
-        });
-    }, [open, exited]);
-    if (!open && exited) {
-        return null;
-    }
-    return (jsx(Overlay, Object.assign({ className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(SlideFade, Object.assign({ ref: ref, in: open, direction: "down", onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsxs("div", Object.assign({}, rest, { className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
-                        [modalClasses.fullScreen]: fullScreen,
-                        [modalClasses.withCloseIcon]: !hideCloseIcon,
-                    }, className), role: "dialog" }, { children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }, void 0))] }), void 0) }), void 0) }), void 0) }), void 0));
-});
+    const { Container: ModalContainer } = useModalContainer();
+    return (jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(ModalContainer, Object.assign({ className: modalClasses.overlay, container: container, direction: "down", disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: jsxs("div", Object.assign({}, rest, { className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
+                    [modalClasses.fullScreen]: fullScreen,
+                    [modalClasses.withCloseIcon]: !hideCloseIcon,
+                }, className), role: "dialog" }, { children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }, void 0))] }), void 0) }), void 0) }), void 0));
+});
+var Modal$1 = Modal;
 
-export default Modal;
+export { Modal$1 as default };

package/Modal/ModalActions.js

@@ -13,6 +13,7 @@ const ModalActions = forwardRef(function ModalActions(props, ref) {
     const { loading, severity, } = useContext(ModalControlContext);
     const danger = severity === 'error';
     return (jsxs(ModalFooter, Object.assign({}, rest, { ref: ref }, { children: [children, jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, className: modalClasses.actions, confirmButtonProps: confirmButtonProps, confirmText: confirmText, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm }, void 0)] }), void 0));
-});
+});
+var ModalActions$1 = ModalActions;
 
-export default ModalActions;
+export { ModalActions$1 as default };

package/Modal/ModalBody.js

@@ -9,6 +9,7 @@ import cx from 'clsx';
 const ModalBody = forwardRef(function ModalBody(props, ref) {
     const { children, className, ...rest } = props;
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(modalClasses.body, className) }, { children: children }), void 0));
-});
+});
+var ModalBody$1 = ModalBody;
 
-export default ModalBody;
+export { ModalBody$1 as default };

package/Modal/ModalFooter.js

@@ -9,6 +9,7 @@ import cx from 'clsx';
 const ModalFooter = forwardRef(function ModalFooter(props, ref) {
     const { children, className, ...rest } = props;
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(modalClasses.footer, className) }, { children: children }), void 0));
-});
+});
+var ModalFooter$1 = ModalFooter;
 
-export default ModalFooter;
+export { ModalFooter$1 as default };

package/Modal/ModalHeader.js

@@ -15,6 +15,7 @@ const ModalHeader = forwardRef(function ModalHeader(props, ref) {
             jsx("h3", Object.assign({ className: cx(modalClasses.title, {
                     [modalClasses.titleLarge]: titleLarge,
                 }), title: typeof children === 'string' ? children : undefined }, { children: children }), void 0)] }), void 0));
-});
+});
+var ModalHeader$1 = ModalHeader;
 
-export default ModalHeader;
+export { ModalHeader$1 as default };

package/Modal/index.d.ts

@@ -3,4 +3,5 @@ export { ModalActionsProps, default as ModalActions, } from './ModalActions';
 export { ModalBodyProps, default as ModalBody, } from './ModalBody';
 export { ModalFooterProps, default as ModalFooter, } from './ModalFooter';
 export { ModalHeaderProps, default as ModalHeader, } from './ModalHeader';
+export { default as useModalContainer, } from './useModalContainer';
 export { ModalProps, default, } from './Modal';

package/Modal/index.js

@@ -2,4 +2,5 @@ export { default as ModalActions } from './ModalActions.js';
 export { default as ModalBody } from './ModalBody.js';
 export { default as ModalFooter } from './ModalFooter.js';
 export { default as ModalHeader } from './ModalHeader.js';
+export { default as useModalContainer } from './useModalContainer.js';
 export { default } from './Modal.js';

package/Modal/useModalContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+export default function useModalContainer(): {
+    Container: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    defaultOptions: Pick<SlideFadeOverlayProps, "className" | "direction" | "disableCloseOnBackdropClick" | "disableCloseOnEscapeKeyDown" | "disablePortal" | "hideBackdrop" | "invisibleBackdrop" | "open">;
+};

package/Modal/useModalContainer.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import { forwardRef } from 'react';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+
+const defaultOptions = {
+    className: modalClasses.overlay,
+    direction: 'down',
+    disableCloseOnBackdropClick: false,
+    disableCloseOnEscapeKeyDown: false,
+    disablePortal: false,
+    hideBackdrop: false,
+    invisibleBackdrop: false,
+    open: false,
+};
+const ModalContainer = forwardRef((props, ref) => {
+    const { className = defaultOptions.className, children, container, direction = defaultOptions.direction, disableCloseOnBackdropClick = defaultOptions.disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown = defaultOptions.disableCloseOnEscapeKeyDown, disablePortal = defaultOptions.disablePortal, hideBackdrop = defaultOptions.hideBackdrop, invisibleBackdrop = defaultOptions.invisibleBackdrop, onBackdropClick, onClose, open = defaultOptions.open, } = props;
+    return (jsx(SlideFadeOverlay, Object.assign({ className: className, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: children }), void 0));
+});
+function useModalContainer() {
+    return {
+        Container: ModalContainer,
+        defaultOptions,
+    };
+}
+
+export { useModalContainer as default };

package/Navigation/Navigation.js

@@ -43,6 +43,7 @@ const Navigation = forwardRef((props, ref) => {
     return (jsx("ul", Object.assign({}, rest, { ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className) }, { children: jsx(NavigationContext.Provider, Object.assign({ value: {
                 orientation,
             } }, { children: ItemChildren }), void 0) }), void 0));
-});
+});
+var Navigation$1 = Navigation;
 
-export default Navigation;
+export { Navigation$1 as default };

package/Navigation/NavigationItem.js

@@ -17,6 +17,7 @@ const NavigationItem = forwardRef((props, ref) => {
         }
     }, [eventKey, onClick, orientation]);
     return (jsxs("li", Object.assign({}, rest, { ref: ref, className: cx(navigationItemClasses.host, active && navigationItemClasses.active, className), role: "menuitem", onClick: handleClick, onKeyDown: () => { } }, { children: [icon && (jsx(Icon, { className: navigationItemClasses.icon, icon: icon }, void 0)), children] }), void 0));
-});
+});
+var NavigationItem$1 = NavigationItem;
 
-export default NavigationItem;
+export { NavigationItem$1 as default };

package/Navigation/NavigationSubMenu.js

@@ -60,6 +60,7 @@ const NavigationSubMenu = forwardRef((props, ref) => {
             orientation === 'vertical' && (jsx(Collapse, Object.assign({ style: {
                     width: '100%',
                 }, in: !!open }, { children: WrapChildren }), void 0))] }), void 0));
-});
+});
+var NavigationSubMenu$1 = NavigationSubMenu;
 
-export default NavigationSubMenu;
+export { NavigationSubMenu$1 as default };

package/Notification/Notification.js

@@ -6,8 +6,8 @@ import Button from '../Button/Button.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
 import SlideFade from '../Transition/SlideFade.js';
 import Icon from '../Icon/Icon.js';
-import { createNotifier } from '../Notifier/createNotifier.js';
 import cx from 'clsx';
+import { createNotifier } from '../Notifier/createNotifier.js';
 
 /**
  * The react component for `mezzanine` notification.
@@ -73,6 +73,7 @@ Notification.remove = remove;
         ...props,
         severity,
     });
-});
+});
+var Notification$1 = Notification;
 
-export default Notification;
+export { Notification$1 as default };

package/Notifier/NotifierManager.js

@@ -28,4 +28,4 @@ function NotifierManager(props) {
     return (jsx(Fragment, { children: notifiersShouldRendered.map((notifier) => (jsx(Fragment$1, { children: render(notifier) }, notifier.key))) }, void 0));
 }
 
-export default NotifierManager;
+export { NotifierManager as default };

package/Overlay/Overlay.js

@@ -26,6 +26,7 @@ const Overlay = forwardRef(function Overlay(props, ref) {
                                 onBackdropClick(event);
                             }
                         } }, void 0) }), void 0)), children] }), void 0) }), void 0));
-});
+});
+var Overlay$1 = Overlay;
 
-export default Overlay;
+export { Overlay$1 as default };

package/PageFooter/PageFooter.js

@@ -8,6 +8,7 @@ const PageFooter = forwardRef(function PageFooter(props, ref) {
     const { className, actionClassName, cancelButtonProps, cancelText, children, danger, loading, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
     return (jsxs("footer", Object.assign({ ref: ref }, rest, { className: cx(pageFooterClasses.host, className) }, { children: [jsx("div", Object.assign({ className: actionClassName }, { children: children }), void 0),
             jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm }, void 0)] }), void 0));
-});
+});
+var PageFooter$1 = PageFooter;
 
-export default PageFooter;
+export { PageFooter$1 as default };

package/Pagination/Pagination.js

@@ -24,6 +24,7 @@ const Pagination = forwardRef((props, ref) => {
     });
     return (jsx("nav", Object.assign({}, rest, { ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className) }, { children: jsxs("ul", Object.assign({ className: paginationClasses.container }, { children: [items.map((item, index) => (jsx("li", Object.assign({ className: paginationClasses.item }, { children: itemRender(item) }), index))),
                 showJumper && (jsx("li", Object.assign({ className: paginationClasses.jumper }, { children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }, void 0) }), void 0))] }), void 0) }), void 0));
-});
+});
+var Pagination$1 = Pagination;
 
-export default Pagination;
+export { Pagination$1 as default };