@mezzanine-ui/react 1.0.0-beta.2 → 1.0.0-beta.4

package/Modal/Modal.d.ts

@@ -1,34 +1,126 @@
-import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { ModalSize, ModalStatusType } from '@mezzanine-ui/core/modal';
+import { ModalContainerProps } from './useModalContainer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface ModalProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+import { ModalHeaderProps } from './ModalHeader';
+import { ModalFooterProps } from './ModalFooter';
+interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Partial<Omit<ModalHeaderProps, 'children' | 'className' | 'title'>>, Partial<Omit<ModalFooterProps, 'children' | 'className' | 'confirmText'>> {
     /**
      * Whether to force full screen on any breakpoint.
      * @default false
      */
     fullScreen?: boolean;
-    /**
-     * Controls whether or not to hide close button at top-end.
-     * @default false
-     */
-    hideCloseIcon?: boolean;
     /**
      * Whether the modal is loading.
      * Controls the loading prop of confirm button in modal actions.
      */
     loading?: boolean;
     /**
-     * Controlls whether or not to display status icon before title. <br />
+     * Controls whether or not to display status icon before title.
      * Notice that giving a status will only display the regular title.
      * @default 'info'
      */
-    severity?: ModalSeverity;
+    modalStatusType?: ModalStatusType;
+    /**
+     * Controls whether or not to show dismiss button at top-end.
+     * @default false
+     */
+    showDismissButton?: boolean;
+}
+interface ExtendedSplitModalProps extends CommonModalProps {
+    /**
+     * Content for the left side in extendedSplit layout.
+     * Required when modalType is 'extendedSplit'.
+     */
+    extendedSplitLeftSideContent: React.ReactNode;
+    /**
+     * Content for the right side in extendedSplit layout.
+     * Required when modalType is 'extendedSplit'.
+     */
+    extendedSplitRightSideContent: React.ReactNode;
+    /**
+     * Controls the type/layout of the modal.
+     * - 'extendedSplit': Modal with split layout (footer inside left content)
+     */
+    modalType: 'extendedSplit';
     /**
      * Controls the size of the modal.
-     * @default "medium"
+     * For extendedSplit type, only 'wide' is allowed.
+     * @default 'wide'
+     */
+    size?: 'wide';
+}
+interface OtherModalProps extends CommonModalProps {
+    /**
+     * Content for the left side in extendedSplit layout.
+     * Cannot be provided when modalType is not 'extendedSplit'.
+     */
+    extendedSplitLeftSideContent?: never;
+    /**
+     * Content for the right side in extendedSplit layout.
+     * Cannot be provided when modalType is not 'extendedSplit'.
+     */
+    extendedSplitRightSideContent?: never;
+    /**
+     * Controls the type/layout of the modal.
+     * - 'standard': Default modal with body container
+     * - 'extended': Modal with left and right content areas
+     * - 'mediaPreview': Modal for media preview
+     * - 'verification': Modal for verification flows
+     * @default 'standard'
+     */
+    modalType: 'extended' | 'standard' | 'mediaPreview' | 'verification';
+    /**
+     * Controls the size of the modal.
+     * @default 'regular'
      */
     size?: ModalSize;
 }
+type BaseModalProps = ExtendedSplitModalProps | OtherModalProps;
+type ModalHeaderPropsWithHeader = {
+    /**
+     * Whether to show modal header.
+     */
+    showModalHeader: true;
+    /**
+     * The title of the modal header (required when showModalHeader is true).
+     */
+    title: string;
+};
+type ModalHeaderPropsWithoutHeader = {
+    /**
+     * Whether to show modal header.
+     * @default false
+     */
+    showModalHeader?: false;
+    /**
+     * The title of the modal header.
+     * Cannot be provided when showModalHeader is false.
+     */
+    title?: never;
+};
+type ModalFooterPropsWithFooter = {
+    /**
+     * Whether to show modal footer.
+     */
+    showModalFooter: true;
+    /**
+     * The confirm button text of the modal footer (required when showModalFooter is true).
+     */
+    confirmText: string;
+};
+type ModalFooterPropsWithoutFooter = {
+    /**
+     * Whether to show modal footer.
+     * @default false
+     */
+    showModalFooter?: false;
+    /**
+     * The confirm button text of the modal footer.
+     * Cannot be provided when showModalFooter is false.
+     */
+    confirmText?: never;
+};
+export type ModalProps = BaseModalProps & ((ModalHeaderPropsWithHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithHeader & ModalFooterPropsWithoutFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithoutFooter));
 /**
  * The react component for `mezzanine` modal.
  */

package/Modal/Modal.js

@@ -1,26 +1,31 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
-import { TimesIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useMemo } from 'react';
 import { ModalControlContext } from './ModalControl.js';
 import useModalContainer from './useModalContainer.js';
-import Icon from '../Icon/Icon.js';
+import ModalHeader from './ModalHeader.js';
+import ModalFooter from './ModalFooter.js';
+import ClearActions from '../ClearActions/ClearActions.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideCloseIcon = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = false, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
     const modalControl = useMemo(() => ({
         loading,
-        severity,
-    }), [loading, severity]);
+        modalStatusType: modalStatusType,
+    }), [loading, modalStatusType]);
     const { Container: ModalContainer } = useModalContainer();
-    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
+    const renderModalFooter = () => (jsx(ModalFooter, { actionsButtonLayout: actionsButtonLayout, annotation: annotation, auxiliaryContentButtonProps: auxiliaryContentButtonProps, auxiliaryContentButtonText: auxiliaryContentButtonText, auxiliaryContentChecked: auxiliaryContentChecked, auxiliaryContentLabel: auxiliaryContentLabel, auxiliaryContentOnChange: auxiliaryContentOnChange, auxiliaryContentOnClick: auxiliaryContentOnClick, auxiliaryContentType: auxiliaryContentType, cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, loading: loading, onCancel: onCancel, onConfirm: onConfirm, passwordButtonProps: passwordButtonProps, passwordButtonText: passwordButtonText, passwordChecked: passwordChecked, passwordCheckedLabel: passwordCheckedLabel, passwordCheckedOnChange: passwordCheckedOnChange, passwordOnClick: passwordOnClick, showCancelButton: showCancelButton }));
+    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.modalStatusType(modalStatusType), modalClasses.size(size), {
                     [modalClasses.fullScreen]: fullScreen,
-                    [modalClasses.withCloseIcon]: !hideCloseIcon,
-                }, className), role: "dialog", children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }))] }) }) }));
+                    [modalClasses.withCloseIcon]: showDismissButton,
+                }, className), role: "dialog", children: [showModalHeader && (jsx(ModalHeader, { showStatusTypeIcon: showStatusTypeIcon, statusTypeIconLayout: statusTypeIconLayout, supportingText: supportingText, supportingTextAlign: supportingTextAlign, title: title, titleAlign: titleAlign })), modalType === 'extendedSplit' && (jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplit, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
+                        modalType === 'verification' ||
+                        modalType === 'extended' ||
+                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [children && (jsx("div", { className: modalClasses.modalBodyContainer, children: children })), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
 });
 
 export { Modal as default };

package/Modal/ModalBodyForVerification.d.ts

@@ -0,0 +1,59 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ModalBodyForVerificationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * Whether to auto focus the first input when mounted.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the inputs are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the inputs are in error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Number of verification code digits.
+     * @default 4
+     */
+    length?: number;
+    /**
+     * Called when verification code changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when all digits are filled.
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Called when resend link is clicked.
+     */
+    onResend?: () => void;
+    /**
+     * Whether the inputs are readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Prompt text before resend link.
+     * @default "收不到驗證碼？"
+     */
+    resendPrompt?: string;
+    /**
+     * Resend link text.
+     * @default "點此重新寄送"
+     */
+    resendText?: string;
+    /**
+     * Current verification code value.
+     */
+    value?: string;
+}
+/**
+ * The react component for verification code input in modal.
+ */
+declare const ModalBodyForVerification: import("react").ForwardRefExoticComponent<ModalBodyForVerificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalBodyForVerification;

package/Modal/ModalBodyForVerification.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * The react component for verification code input in modal.
+ */
+const ModalBodyForVerification = forwardRef(function ModalBodyForVerification(props, ref) {
+    const { autoFocus = true, className, disabled = false, error = false, length = 4, onChange, onComplete, onResend, readOnly = false, resendPrompt = '收不到驗證碼？', resendText = '點此重新寄送', value = '', ...rest } = props;
+    const [codes, setCodes] = useState(value
+        .split('')
+        .slice(0, length)
+        .concat(Array(length - value.length).fill('')));
+    const inputRefs = useRef([]);
+    // Auto focus first input when mounted
+    useEffect(() => {
+        var _a;
+        if (autoFocus && !disabled && !readOnly) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, disabled, readOnly]);
+    const handleChange = (index, newValue) => {
+        var _a;
+        if (disabled || readOnly)
+            return;
+        // Only allow single digit/letter
+        const sanitized = newValue.slice(-1);
+        const newCodes = [...codes];
+        newCodes[index] = sanitized;
+        setCodes(newCodes);
+        const fullValue = newCodes.join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
+        // Auto focus next input
+        if (sanitized && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // Call onComplete when all filled
+        if (fullValue.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        var _a, _b, _c;
+        // Handle backspace
+        if (e.key === 'Backspace') {
+            if (disabled || readOnly)
+                return;
+            if (!codes[index] && index > 0) {
+                // If current is empty, focus previous
+                (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                // Clear current
+                const newCodes = [...codes];
+                newCodes[index] = '';
+                setCodes(newCodes);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newCodes.join(''));
+            }
+        }
+        // Handle arrow keys
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        var _a;
+        if (disabled || readOnly)
+            return;
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text').slice(0, length);
+        const newCodes = pastedData
+            .split('')
+            .concat(Array(length - pastedData.length).fill(''));
+        setCodes(newCodes);
+        onChange === null || onChange === void 0 ? void 0 : onChange(pastedData);
+        // Focus the next empty input or the last input
+        const nextEmptyIndex = Math.min(pastedData.length, length - 1);
+        (_a = inputRefs.current[nextEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        if (pastedData.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
+        }
+    };
+    const handleInputChange = (index, e) => {
+        handleChange(index, e.target.value);
+    };
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: modalClasses.modalBodyVerificationInputs, children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
+                        inputRefs.current[index] = el;
+                    }, type: "text", inputMode: "numeric", maxLength: 1, value: codes[index] || '', onChange: (e) => handleInputChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: cx(modalClasses.modalBodyVerificationInput, {
+                        [modalClasses.modalBodyVerificationInputError]: error,
+                    }), autoComplete: "off", disabled: disabled, readOnly: readOnly }, index))) }), onResend && (jsxs("div", { className: modalClasses.modalBodyVerificationResend, children: [jsx(Typography, { variant: "caption", color: "text-neutral", children: resendPrompt }), jsx(Typography, { variant: "caption", color: "text-neutral", className: modalClasses.modalBodyVerificationResendLink, onClick: onResend, component: "span", style: { cursor: 'pointer', textDecoration: 'underline' }, children: resendText })] }))] }));
+});
+
+export { ModalBodyForVerification as default };

package/Modal/ModalControl.d.ts

@@ -1,6 +1,6 @@
-import { ModalSeverity } from '@mezzanine-ui/core/modal';
+import { ModalStatusType } from '@mezzanine-ui/core/modal';
 export interface ModalControl {
     loading: boolean;
-    severity: ModalSeverity;
+    modalStatusType: ModalStatusType;
 }
 export declare const ModalControlContext: import("react").Context<ModalControl>;

package/Modal/ModalControl.js

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 
 const ModalControlContext = createContext({
     loading: false,
-    severity: 'info',
+    modalStatusType: 'info',
 });
 
 export { ModalControlContext };

package/Modal/ModalFooter.d.ts

@@ -1,5 +1,123 @@
+import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+import { ButtonProps } from '../Button/Button';
+export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Layout of action buttons.
+     * - 'fixed': Buttons maintain fixed width
+     * - 'fill': Buttons expand to fill available space equally
+     * @default 'fixed'
+     */
+    actionsButtonLayout?: 'fill' | 'fixed';
+    /**
+     * Text to display as annotation on the left side.
+     * Only used when auxiliaryContentType is 'annotation'.
+     */
+    annotation?: ReactNode;
+    /**
+     * Props for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonProps?: ButtonProps;
+    /**
+     * Text for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonText?: ReactNode;
+    /**
+     * Whether the auxiliary content control (checkbox/toggle) is checked.
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentChecked?: boolean;
+    /**
+     * Label text for the auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentLabel?: string;
+    /**
+     * Change handler for auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentOnClick?: ButtonProps['onClick'];
+    /**
+     * Type of auxiliary content to show on the left side of the footer.
+     * - 'annotation': Display text annotation
+     * - 'button': Display a button
+     * - 'checkbox': Display a checkbox control
+     * - 'toggle': Display a toggle control
+     * - 'password': Display password-specific controls (remember me + forgot password)
+     * @default undefined (no auxiliary content)
+     */
+    auxiliaryContentType?: 'annotation' | 'button' | 'checkbox' | 'toggle' | 'password';
+    /**
+     * Additional props for the cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Text content of the cancel button.
+     */
+    cancelText?: ReactNode;
+    /**
+     * Additional props for the confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Text content of the confirm button.
+     */
+    confirmText?: ReactNode;
+    /**
+     * Whether confirm button is loading and cancel button is disabled.
+     */
+    loading?: boolean;
+    /**
+     * Click handler for the cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for the confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+    /**
+     * Props for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonProps?: ButtonProps;
+    /**
+     * Text for the password auxiliary button (e.g., "Forgot password?").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonText?: ReactNode;
+    /**
+     * Whether the password checkbox is checked (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordChecked?: boolean;
+    /**
+     * Label for the password checkbox (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedLabel?: string;
+    /**
+     * Change handler for the password checkbox.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordOnClick?: ButtonProps['onClick'];
+    /**
+     * Whether to show the cancel button.
+     * @default true
+     */
+    showCancelButton?: boolean;
+}
 /**
  * The react component for `mezzanine` modal footer.
  */

package/Modal/ModalFooter.js

@@ -1,14 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { modalClasses } from '@mezzanine-ui/core/modal';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import Toggle from '../Toggle/Toggle.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` modal footer.
  */
 const ModalFooter = forwardRef(function ModalFooter(props, ref) {
-    const { children, className, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(modalClasses.footer, className), children: children }));
+    const { children, className, actionsButtonLayout = 'fixed', annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, confirmButtonProps, confirmText, loading, onCancel, onConfirm, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton = true, ...rest } = props;
+    const { disabled: cancelButtonDisabled = loading } = cancelButtonProps || {};
+    const isActionsButtonFillLayout = actionsButtonLayout === 'fill' && !auxiliaryContentType;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalFooter, {
+            [modalClasses.modalFooter + '--password-mode']: auxiliaryContentType === 'password',
+            [modalClasses.modalFooter + '--with-auxiliary-content']: !!auxiliaryContentType && auxiliaryContentType !== 'password',
+        }, className), children: [auxiliaryContentType === 'password' && (jsxs("div", { className: modalClasses.modalFooterPasswordContainer, children: [jsx(Checkbox, { checked: passwordChecked, label: passwordCheckedLabel, onChange: (e) => passwordCheckedOnChange === null || passwordCheckedOnChange === void 0 ? void 0 : passwordCheckedOnChange(e.target.checked) }), jsx(Button, { variant: "base-text-link", ...passwordButtonProps, onClick: passwordOnClick, children: passwordButtonText })] })), auxiliaryContentType && auxiliaryContentType !== 'password' && (jsxs("div", { className: modalClasses.modalFooterAuxiliaryContentContainer, children: [auxiliaryContentType === 'annotation' && (jsx(Typography, { variant: "caption", color: "text-neutral", children: annotation })), auxiliaryContentType === 'button' && (jsx(Button, { variant: "base-text-link", ...auxiliaryContentButtonProps, onClick: auxiliaryContentOnClick, children: auxiliaryContentButtonText })), auxiliaryContentType === 'checkbox' && (jsx(Checkbox, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) })), auxiliaryContentType === 'toggle' && (jsx(Toggle, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) }))] })), jsxs(ButtonGroup, { className: cx(modalClasses.modalFooterActionsButtonContainer, {
+                    [modalClasses.modalFooterActionsButtonContainer + '--fill-layout']: isActionsButtonFillLayout,
+                }), children: [showCancelButton && (jsx(Button, { variant: "base-secondary", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, className: modalClasses.modalFooterActionsButton, children: cancelText })), jsx(Button, { variant: "base-primary", ...confirmButtonProps, loading: loading, onClick: onConfirm, className: modalClasses.modalFooterActionsButton, children: confirmText })] }), children] }));
 });
 
 export { ModalFooter as default };

package/Modal/ModalHeader.d.ts

@@ -1,19 +1,38 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface ModalHeaderProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
-     * Whether to show severity icon.
+     * Whether to show status type icon.
      * @default false
      */
-    showSeverityIcon?: boolean;
+    showStatusTypeIcon?: boolean;
     /**
-     * Controlls the title styles.
-     * Use large title if the modal body has section/block titles.
-     * @default false
+     * Layout of the status type icon relative to title.
+     * - 'vertical': Icon above title
+     * - 'horizontal': Icon to the left of title
+     * @default 'vertical'
+     */
+    statusTypeIconLayout?: 'vertical' | 'horizontal';
+    /**
+     * Supporting text displayed below the title.
+     */
+    supportingText?: string;
+    /**
+     * Alignment of the supporting text.
+     * @default 'left'
+     */
+    supportingTextAlign?: 'left' | 'center';
+    /**
+     * The title text of the modal header.
+     */
+    title: string;
+    /**
+     * Alignment of the title.
+     * @default 'left'
      */
-    titleLarge?: boolean;
+    titleAlign?: 'left' | 'center';
 }
 /**
- * The react component for `mezzanine` modal header.
+ * The React component for `mezzanine` modal header.
  */
 declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ModalHeader;

package/Modal/ModalHeader.js

@@ -1,20 +1,46 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { modalSeverityIcons, modalClasses } from '@mezzanine-ui/core/modal';
+import { modalStatusTypeIcons, modalClasses } from '@mezzanine-ui/core/modal';
 import { ModalControlContext } from './ModalControl.js';
+import Typography from '../Typography/Typography.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` modal header.
+ * The React component for `mezzanine` modal header.
  */
 const ModalHeader = forwardRef(function ModalHeader(props, ref) {
-    const { children, className, showSeverityIcon = false, titleLarge = false, ...rest } = props;
-    const { severity } = useContext(ModalControlContext);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.header, className), children: [showSeverityIcon && (jsx(Icon, { className: modalClasses.severityIcon, icon: modalSeverityIcons[severity] })), jsx("h3", { className: cx(modalClasses.title, {
-                    [modalClasses.titleLarge]: titleLarge,
-                }), title: typeof children === 'string' ? children : undefined, children: children })] }));
+    const { className, showStatusTypeIcon = false, statusTypeIconLayout = 'vertical', supportingText, supportingTextAlign = 'left', title, titleAlign = 'left', ...rest } = props;
+    const { modalStatusType } = useContext(ModalControlContext);
+    const iconColor = (type) => {
+        switch (type) {
+            case 'success':
+                return 'success-strong';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'error-solid';
+            case 'info':
+                return 'info-strong';
+            case 'email':
+                return 'info-strong';
+            case 'delete':
+                return 'error-solid';
+            default:
+                return 'neutral';
+        }
+    };
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalHeader, {
+            [modalClasses.modalHeader + '--horizontal']: statusTypeIconLayout === 'horizontal',
+            [modalClasses.modalHeader + '--vertical']: statusTypeIconLayout === 'vertical',
+            [modalClasses.modalHeader + '--title-align-left']: titleAlign === 'left',
+            [modalClasses.modalHeader + '--title-align-center']: titleAlign === 'center',
+            [modalClasses.modalHeader + '--show-modal-status-type-icon']: showStatusTypeIcon,
+        }, className), children: [showStatusTypeIcon && (jsx("div", { className: cx(modalClasses.modalHeaderStatusTypeIcon), children: jsx(Icon, { icon: modalStatusTypeIcons[modalStatusType], color: iconColor(modalStatusType), size: 20 }) })), jsxs("div", { className: cx(modalClasses.modalHeaderTitleAndSupportingTextContainer), children: [jsx(Typography, { variant: "h3", color: "text-neutral-solid", className: cx(modalClasses.modalHeaderTitle), title: typeof title === 'string' ? title : undefined, children: title }), jsx(Typography, { variant: "body", color: "text-neutral-strong", className: cx(modalClasses.modalHeaderSupportingText, {
+                            [modalClasses.modalHeaderSupportingText + '--align-left']: supportingTextAlign === 'left',
+                            [modalClasses.modalHeaderSupportingText + '--align-center']: supportingTextAlign === 'center',
+                        }), children: supportingText })] })] }));
 });
 
 export { ModalHeader as default };

package/Modal/index.d.ts

@@ -1,12 +1,13 @@
-export type { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
-export type { ModalActionsProps } from './ModalActions';
-export { default as ModalActions } from './ModalActions';
-export type { ModalBodyProps } from './ModalBody';
-export { default as ModalBody } from './ModalBody';
+export type { ModalStatusType, ModalSize } from '@mezzanine-ui/core/modal';
+export type { ModalBodyForVerificationProps } from './ModalBodyForVerification';
+export { default as ModalBodyForVerification } from './ModalBodyForVerification';
 export type { ModalFooterProps } from './ModalFooter';
 export { default as ModalFooter } from './ModalFooter';
 export type { ModalHeaderProps } from './ModalHeader';
 export { default as ModalHeader } from './ModalHeader';
+export type { MediaPreviewModalProps } from './MediaPreviewModal';
+export { default as MediaPreviewModal } from './MediaPreviewModal';
 export { default as useModalContainer } from './useModalContainer';
+export type { ModalContainerProps } from './useModalContainer';
 export type { ModalProps } from './Modal';
 export { default } from './Modal';

package/Modal/index.js

@@ -1,6 +1,6 @@
-export { default as ModalActions } from './ModalActions.js';
-export { default as ModalBody } from './ModalBody.js';
+export { default as ModalBodyForVerification } from './ModalBodyForVerification.js';
 export { default as ModalFooter } from './ModalFooter.js';
 export { default as ModalHeader } from './ModalHeader.js';
+export { default as MediaPreviewModal } from './MediaPreviewModal.js';
 export { default as useModalContainer } from './useModalContainer.js';
 export { default } from './Modal.js';