@carbon/react 1.103.0 → 1.104.0

package/es/components/Modal/Modal.js

@@ -1,672 +1,512 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React, { useContext, useRef, useEffect, cloneElement } from 'react';
-import cx from 'classnames';
-import { Close } from '@carbon/icons-react';
-import { toggleClass } from '../../tools/toggleClass.js';
-import Button from '../Button/Button.js';
-import '../Button/Button.Skeleton.js';
-import ButtonSet from '../ButtonSet/ButtonSet.js';
-import InlineLoading from '../InlineLoading/InlineLoading.js';
-import { Layer } from '../Layer/index.js';
-import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import { wrapFocus, wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
-import { useResizeObserver } from '../../internal/useResizeObserver.js';
-import { useId } from '../../internal/useId.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { usePreviousValue } from '../../internal/usePreviousValue.js';
-import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { IconButton } from '../IconButton/index.js';
-import { noopFn } from '../../internal/noopFn.js';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { composeEventHandlers } from '../../tools/events.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { Dialog } from '../Dialog/Dialog.js';
-import { AILabel } from '../AILabel/index.js';
-import { isComponentElement } from '../../internal/utils.js';
-import { warning } from '../../internal/warning.js';
-import { ModalPresenceContext, useExclusiveModalPresenceContext, ModalPresence } from './ModalPresence.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { useFeatureFlag } from "../FeatureFlags/index.js";
+import { IconButton } from "../IconButton/index.js";
+import Button_default from "../Button/index.js";
+import ButtonSet_default from "../ButtonSet/index.js";
+import { AILabel } from "../AILabel/index.js";
+import { isComponentElement } from "../../internal/utils.js";
+import { useResizeObserver } from "../../internal/useResizeObserver.js";
+import { composeEventHandlers } from "../../tools/events.js";
+import { Layer } from "../Layer/index.js";
+import InlineLoading_default from "../InlineLoading/index.js";
+import { toggleClass } from "../../tools/toggleClass.js";
+import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
+import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { usePreviousValue } from "../../internal/usePreviousValue.js";
+import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
+import classNames from "classnames";
+import React, { cloneElement, useContext, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Close } from "@carbon/icons-react";
 
-const ModalSizes = ['xs', 'sm', 'md', 'lg'];
-const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
-const Modal = /*#__PURE__*/React.forwardRef(function Modal({
-  open,
-  ...props
-}, ref) {
-  const id = useId();
-  const enablePresence = useFeatureFlag('enable-presence');
-  const hasPresenceContext = Boolean(useContext(ModalPresenceContext));
-  const hasPresenceOptIn = enablePresence || hasPresenceContext;
-  const exclusivePresenceContext = useExclusiveModalPresenceContext(id);
-
-  // if opt in and not exclusive to a presence context, wrap with presence
-  if (hasPresenceOptIn && !exclusivePresenceContext) {
-    return /*#__PURE__*/React.createElement(ModalPresence, {
-      open: open ?? false,
-      _presenceId: id
-      // do not auto enable styles for opt-in by feature flag
-      ,
-      _autoEnablePresence: hasPresenceContext
-    }, /*#__PURE__*/React.createElement(ModalDialog, _extends({
-      open: true,
-      ref: ref
-    }, props)));
-  }
-  return /*#__PURE__*/React.createElement(ModalDialog, _extends({
-    ref: ref,
-    open: open
-  }, props));
+//#region src/components/Modal/Modal.tsx
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const ModalSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg"
+];
+const invalidOutsideClickMessage = "`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Transactional, non-passive Modals should not be dissmissable by clicking outside. See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal";
+const Modal = React.forwardRef(function Modal({ open, ...props }, ref) {
+	const id = useId();
+	const enablePresence = useFeatureFlag("enable-presence");
+	const hasPresenceContext = Boolean(useContext(ModalPresenceContext));
+	const hasPresenceOptIn = enablePresence || hasPresenceContext;
+	const exclusivePresenceContext = useExclusiveModalPresenceContext(id);
+	if (hasPresenceOptIn && !exclusivePresenceContext) return /* @__PURE__ */ jsx(ModalPresence, {
+		open: open ?? false,
+		_presenceId: id,
+		_autoEnablePresence: hasPresenceContext,
+		children: /* @__PURE__ */ jsx(ModalDialog, {
+			open: true,
+			ref,
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(ModalDialog, {
+		ref,
+		open,
+		...props
+	});
 });
-const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
-  'aria-label': ariaLabelProp,
-  children,
-  className,
-  decorator,
-  modalHeading = '',
-  modalLabel = '',
-  modalAriaLabel,
-  passiveModal = false,
-  secondaryButtonText,
-  primaryButtonText,
-  open: externalOpen,
-  onRequestClose = noopFn,
-  onRequestSubmit = noopFn,
-  onSecondarySubmit,
-  primaryButtonDisabled = false,
-  danger,
-  alert,
-  secondaryButtons,
-  selectorPrimaryFocus = '[data-modal-primary-focus]',
-  selectorsFloatingMenus,
-  shouldSubmitOnEnter,
-  size,
-  hasScrollingContent = false,
-  closeButtonLabel = 'Close',
-  preventCloseOnClickOutside,
-  isFullWidth,
-  launcherButtonRef,
-  loadingStatus = 'inactive',
-  loadingDescription,
-  loadingIconDescription,
-  onLoadingSuccess = noopFn,
-  slug,
-  ...rest
-}, ref) {
-  const prefix = usePrefix();
-  const button = useRef(null);
-  const secondaryButton = useRef(null);
-  const contentRef = useRef(null);
-  const innerModal = useRef(null);
-  const startTrap = useRef(null);
-  const endTrap = useRef(null);
-  const wrapFocusTimeout = useRef(null);
-  const modalInstanceId = `modal-${useId()}`;
-  const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
-  const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
-  const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
-  const modalCloseButtonClass = `${prefix}--modal-close`;
-  const primaryButtonClass = cx({
-    [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
-  });
-  const loadingActive = loadingStatus !== 'inactive';
-  const presenceContext = useContext(ModalPresenceContext);
-  const mergedRefs = useMergedRefs([ref, presenceContext?.presenceRef]);
-  const enablePresence = useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
-
-  // always mark as open when mounted with presence
-  const open = externalOpen || enablePresence;
-  const prevOpen = usePreviousValue(open);
-  const deprecatedFlag = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinelsFlag = useFeatureFlag('enable-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
-  const enableDialogElement = useFeatureFlag('enable-dialog-element');
-  process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
-  process.env.NODE_ENV !== "production" ? warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;
-  function isCloseButton(element) {
-    return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
-  }
-  function handleKeyDown(evt) {
-    const {
-      target
-    } = evt;
-    evt.stopPropagation();
-    if (open && target instanceof HTMLElement) {
-      if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
-        onRequestSubmit(evt);
-      }
-      if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
-        wrapFocusWithoutSentinels({
-          containerNode: innerModal.current,
-          currentActiveNode: target,
-          event: evt
-        });
-      }
-    }
-  }
-  function handleOnClick(evt) {
-    const {
-      target
-    } = evt;
-    const shouldCloseOnOutsideClick =
-    // Passive modals can close on clicks outside the modal when
-    // preventCloseOnClickOutside is undefined or explicitly set to false.
-    passiveModal && !preventCloseOnClickOutside ||
-    // Non-passive modals have to explicitly opt-in for close on outside
-    // behavior by explicitly setting preventCloseOnClickOutside to false,
-    // rather than just leaving it undefined.
-    !passiveModal && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) {
-      onRequestClose(evt);
-    }
-  }
-  function handleBlur({
-    target: oldActiveNode,
-    relatedTarget: currentActiveNode
-  }) {
-    if (!enableDialogElement && open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
-      const {
-        current: bodyNode
-      } = innerModal;
-      const {
-        current: startTrapNode
-      } = startTrap;
-      const {
-        current: endTrapNode
-      } = endTrap;
-      // use setTimeout to ensure focus is set after all browser default focus behavior. Fixes issue of
-      // focus not wrapping in Firefox
-      wrapFocusTimeout.current = setTimeout(() => {
-        wrapFocus({
-          bodyNode,
-          startTrapNode,
-          endTrapNode,
-          currentActiveNode,
-          oldActiveNode,
-          selectorsFloatingMenus,
-          prefix
-        });
-        if (wrapFocusTimeout.current) {
-          clearTimeout(wrapFocusTimeout.current);
-        }
-      });
-    }
-
-    // Adjust scroll if needed so that element with focus is not obscured by gradient
-    const modalContent = document.querySelector(`.${prefix}--modal-content`);
-    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
-      return;
-    }
-    currentActiveNode.scrollIntoView({
-      block: 'center'
-    });
-  }
-  const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
-  const {
-    height
-  } = useResizeObserver({
-    ref: contentRef
-  });
-  const modalClasses = cx(`${prefix}--modal`, {
-    [`${prefix}--modal-tall`]: !passiveModal,
-    'is-visible': enablePresence || open,
-    [`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
-    [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug,
-    [`${prefix}--modal--decorator`]: decorator
-  }, className);
-  const containerClasses = cx(`${prefix}--modal-container`, {
-    [`${prefix}--modal-container--${size}`]: size,
-    [`${prefix}--modal-container--full-width`]: isFullWidth
-  });
-
-  /**
-   * isScrollable is implicitly dependent on height, when height gets updated
-   * via `useResizeObserver`, clientHeight and scrollHeight get updated too
-   */
-  const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
-  const contentClasses = cx(`${prefix}--modal-content`, {
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
-    [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
-  });
-  const footerClasses = cx(`${prefix}--modal-footer`, {
-    [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
-  });
-  const asStringOrUndefined = node => {
-    return typeof node === 'string' ? node : undefined;
-  };
-  const modalLabelStr = asStringOrUndefined(modalLabel);
-  const modalHeadingStr = asStringOrUndefined(modalHeading);
-  const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
-  const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
-  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
-    tabIndex: 0,
-    role: 'region',
-    'aria-label': ariaLabel,
-    'aria-labelledby': getAriaLabelledBy
-  } : {};
-  const alertDialogProps = {};
-  if (alert && passiveModal) {
-    alertDialogProps.role = 'alert';
-  }
-  if (alert && !passiveModal) {
-    alertDialogProps.role = 'alertdialog';
-    alertDialogProps['aria-describedby'] = modalBodyId;
-  }
-  useEffect(() => {
-    if (!open) return;
-    const handleEscapeKey = event => {
-      if (match(event, Escape)) {
-        event.preventDefault();
-        event.stopPropagation();
-        onRequestClose(event);
-      }
-    };
-    document.addEventListener('keydown', handleEscapeKey, true);
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey, true);
-    };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [open]);
-  useEffect(() => {
-    return () => {
-      if (!enableDialogElement) {
-        toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
-      }
-    };
-  }, [prefix, enableDialogElement]);
-  useEffect(() => {
-    if (!enableDialogElement) {
-      toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
-    }
-  }, [open, prefix, enableDialogElement]);
-  useEffect(() => {
-    if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) {
-      setTimeout(() => {
-        if ('current' in launcherButtonRef) {
-          launcherButtonRef.current?.focus();
-        }
-      });
-    }
-  }, [open, prevOpen, launcherButtonRef, enableDialogElement, enablePresence]);
-  // Focus launcherButtonRef on unmount
-  useEffect(() => {
-    const launcherButton = launcherButtonRef?.current;
-    return () => {
-      if (enablePresence && launcherButton) {
-        setTimeout(() => {
-          launcherButton.focus();
-        });
-      }
-    };
-  }, [enablePresence, launcherButtonRef]);
-  useEffect(() => {
-    if (!enableDialogElement) {
-      const initialFocus = focusContainerElement => {
-        const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement && (containerElement.querySelector(selectorPrimaryFocus) || danger && containerElement.querySelector(`.${prefix}--btn--secondary`));
-        if (primaryFocusElement) {
-          return primaryFocusElement;
-        }
-        return button && button.current;
-      };
-      const focusButton = focusContainerElement => {
-        const target = initialFocus(focusContainerElement);
-        if (target !== null) {
-          target.focus();
-        }
-      };
-      if (open) {
-        focusButton(innerModal.current);
-      }
-    }
-  }, [open, selectorPrimaryFocus, danger, prefix, enableDialogElement]);
-
-  // AILabel always size `sm`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = isComponentElement(candidate, AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
-    size: 'sm'
-  }) : candidate;
-  const modalButton = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    className: modalCloseButtonClass,
-    label: closeButtonLabel,
-    onClick: onRequestClose,
-    "aria-label": closeButtonLabel,
-    align: "left",
-    ref: button
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: `${modalCloseButtonClass}__icon`
-  })));
-
-  // alertdialog is the only permitted aria role for a native dialog element
-  // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
-  const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog, {
-    open: open,
-    focusAfterCloseRef: launcherButtonRef,
-    modal: true,
-    ref: innerModal,
-    role: isAlertDialog ? 'alertdialog' : '',
-    "aria-describedby": isAlertDialog ? modalBodyId : '',
-    className: containerClasses,
-    "aria-label": ariaLabel,
-    "data-exiting": presenceContext?.isExiting || undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal-header`
-  }, modalLabel && /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    id: modalLabelId,
-    className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    id: modalHeadingId,
-    className: `${prefix}--modal-header__heading`
-  }, modalHeading), decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    className: modalCloseButtonClass,
-    label: closeButtonLabel,
-    onClick: onRequestClose,
-    "aria-label": closeButtonLabel,
-    align: "left",
-    ref: button
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React.createElement(Layer, _extends({
-    ref: contentRef,
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React.createElement(ButtonSet, {
-    className: footerClasses,
-    "aria-busy": loadingActive
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({
-    buttonText,
-    onClick: onButtonClick
-  }, i) => /*#__PURE__*/React.createElement(Button, {
-    key: `${buttonText}-${i}`,
-    kind: "secondary",
-    onClick: onButtonClick
-  }, buttonText)) : secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
-    disabled: loadingActive,
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
-    className: primaryButtonClass,
-    kind: danger ? 'danger' : 'primary',
-    disabled: loadingActive || primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading, {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
-    ref: startTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", _extends({
-    ref: innerModal,
-    role: "dialog"
-  }, alertDialogProps, {
-    className: containerClasses,
-    "aria-label": ariaLabel,
-    "aria-modal": "true",
-    tabIndex: -1
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal-header`
-  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    id: modalLabelId,
-    className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    id: modalHeadingId,
-    className: `${prefix}--modal-header__heading`
-  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React.createElement(Layer, _extends({
-    ref: contentRef,
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React.createElement(ButtonSet, {
-    className: footerClasses,
-    "aria-busy": loadingActive
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({
-    buttonText,
-    onClick: onButtonClick
-  }, i) => /*#__PURE__*/React.createElement(Button, {
-    key: `${buttonText}-${i}`,
-    kind: "secondary",
-    onClick: onButtonClick
-  }, buttonText)) : secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
-    disabled: loadingActive,
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
-    className: primaryButtonClass,
-    kind: danger ? 'danger' : 'primary',
-    disabled: loadingActive || primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading, {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
-    ref: endTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"));
-  return /*#__PURE__*/React.createElement(Layer, _extends({}, rest, {
-    level: 0,
-    onKeyDown: handleKeyDown,
-    onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: handleBlur,
-    className: modalClasses,
-    role: "presentation",
-    ref: mergedRefs,
-    "data-exiting": presenceContext?.isExiting || undefined
-  }), modalBody);
+const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = noopFn, onRequestSubmit = noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, slug, ...rest }, ref) {
+	const prefix = usePrefix();
+	const button = useRef(null);
+	const secondaryButton = useRef(null);
+	const contentRef = useRef(null);
+	const innerModal = useRef(null);
+	const startTrap = useRef(null);
+	const endTrap = useRef(null);
+	const wrapFocusTimeout = useRef(null);
+	const modalInstanceId = `modal-${useId()}`;
+	const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
+	const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
+	const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
+	const modalCloseButtonClass = `${prefix}--modal-close`;
+	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const loadingActive = loadingStatus !== "inactive";
+	const presenceContext = useContext(ModalPresenceContext);
+	const mergedRefs = useMergedRefs([ref, presenceContext?.presenceRef]);
+	const enablePresence = useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
+	const open = externalOpen || enablePresence;
+	const prevOpen = usePreviousValue(open);
+	const deprecatedFlag = useFeatureFlag("enable-experimental-focus-wrap-without-sentinels");
+	const focusTrapWithoutSentinels = useFeatureFlag("enable-focus-wrap-without-sentinels") || deprecatedFlag;
+	const enableDialogElement = useFeatureFlag("enable-dialog-element");
+	warning(!(focusTrapWithoutSentinels && enableDialogElement), "`<Modal>` detected both `focusTrapWithoutSentinels` and `enableDialogElement` feature flags are enabled. The native dialog element handles focus, so `enableDialogElement` must be off for `focusTrapWithoutSentinels` to have any effect.");
+	warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage);
+	function isCloseButton(element) {
+		return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
+	}
+	function handleKeyDown(evt) {
+		const { target } = evt;
+		evt.stopPropagation();
+		if (open && target instanceof HTMLElement) {
+			if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) onRequestSubmit(evt);
+			if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) wrapFocusWithoutSentinels({
+				containerNode: innerModal.current,
+				currentActiveNode: target,
+				event: evt
+			});
+		}
+	}
+	function handleOnClick(evt) {
+		const { target } = evt;
+		if ((passiveModal && !preventCloseOnClickOutside || !passiveModal && preventCloseOnClickOutside === false) && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) onRequestClose(evt);
+	}
+	function handleBlur({ target: oldActiveNode, relatedTarget: currentActiveNode }) {
+		if (!enableDialogElement && open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
+			const { current: bodyNode } = innerModal;
+			const { current: startTrapNode } = startTrap;
+			const { current: endTrapNode } = endTrap;
+			wrapFocusTimeout.current = setTimeout(() => {
+				wrapFocus({
+					bodyNode,
+					startTrapNode,
+					endTrapNode,
+					currentActiveNode,
+					oldActiveNode,
+					selectorsFloatingMenus,
+					prefix
+				});
+				if (wrapFocusTimeout.current) clearTimeout(wrapFocusTimeout.current);
+			});
+		}
+		const modalContent = document.querySelector(`.${prefix}--modal-content`);
+		if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) return;
+		currentActiveNode.scrollIntoView({ block: "center" });
+	}
+	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+	const { height } = useResizeObserver({ ref: contentRef });
+	const modalClasses = classNames(`${prefix}--modal`, {
+		[`${prefix}--modal-tall`]: !passiveModal,
+		"is-visible": enablePresence || open,
+		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
+		[`${prefix}--modal--danger`]: danger,
+		[`${prefix}--modal--slug`]: slug,
+		[`${prefix}--modal--decorator`]: decorator
+	}, className);
+	const containerClasses = classNames(`${prefix}--modal-container`, {
+		[`${prefix}--modal-container--${size}`]: size,
+		[`${prefix}--modal-container--full-width`]: isFullWidth
+	});
+	/**
+	* isScrollable is implicitly dependent on height, when height gets updated
+	* via `useResizeObserver`, clientHeight and scrollHeight get updated too
+	*/
+	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
+	const contentClasses = classNames(`${prefix}--modal-content`, {
+		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
+	});
+	const footerClasses = classNames(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const asStringOrUndefined = (node) => {
+		return typeof node === "string" ? node : void 0;
+	};
+	const modalLabelStr = asStringOrUndefined(modalLabel);
+	const modalHeadingStr = asStringOrUndefined(modalHeading);
+	const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
+	const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
+	const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
+		tabIndex: 0,
+		role: "region",
+		"aria-label": ariaLabel,
+		"aria-labelledby": getAriaLabelledBy
+	} : {};
+	const alertDialogProps = {};
+	if (alert && passiveModal) alertDialogProps.role = "alert";
+	if (alert && !passiveModal) {
+		alertDialogProps.role = "alertdialog";
+		alertDialogProps["aria-describedby"] = modalBodyId;
+	}
+	useEffect(() => {
+		if (!open) return;
+		const handleEscapeKey = (event) => {
+			if (match(event, Escape)) {
+				event.preventDefault();
+				event.stopPropagation();
+				onRequestClose(event);
+			}
+		};
+		document.addEventListener("keydown", handleEscapeKey, true);
+		return () => {
+			document.removeEventListener("keydown", handleEscapeKey, true);
+		};
+	}, [open]);
+	useEffect(() => {
+		return () => {
+			if (!enableDialogElement) toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+		};
+	}, [prefix, enableDialogElement]);
+	useEffect(() => {
+		if (!enableDialogElement) toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
+	}, [
+		open,
+		prefix,
+		enableDialogElement
+	]);
+	useEffect(() => {
+		if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) setTimeout(() => {
+			if ("current" in launcherButtonRef) launcherButtonRef.current?.focus();
+		});
+	}, [
+		open,
+		prevOpen,
+		launcherButtonRef,
+		enableDialogElement,
+		enablePresence
+	]);
+	useEffect(() => {
+		const launcherButton = launcherButtonRef?.current;
+		return () => {
+			if (enablePresence && launcherButton) setTimeout(() => {
+				launcherButton.focus();
+			});
+		};
+	}, [enablePresence, launcherButtonRef]);
+	useEffect(() => {
+		if (!enableDialogElement) {
+			const initialFocus = (focusContainerElement) => {
+				const containerElement = focusContainerElement || innerModal.current;
+				const primaryFocusElement = containerElement && (containerElement.querySelector(selectorPrimaryFocus) || danger && containerElement.querySelector(`.${prefix}--btn--secondary`));
+				if (primaryFocusElement) return primaryFocusElement;
+				return button && button.current;
+			};
+			const focusButton = (focusContainerElement) => {
+				const target = initialFocus(focusContainerElement);
+				if (target !== null) target.focus();
+			};
+			if (open) focusButton(innerModal.current);
+		}
+	}, [
+		open,
+		selectorPrimaryFocus,
+		danger,
+		prefix,
+		enableDialogElement
+	]);
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "sm" }) : candidate;
+	const modalButton = /* @__PURE__ */ jsx("div", {
+		className: `${prefix}--modal-close-button`,
+		children: /* @__PURE__ */ jsx(IconButton, {
+			className: modalCloseButtonClass,
+			label: closeButtonLabel,
+			onClick: onRequestClose,
+			"aria-label": closeButtonLabel,
+			align: "left",
+			ref: button,
+			children: /* @__PURE__ */ jsx(Close, {
+				size: 20,
+				"aria-hidden": "true",
+				tabIndex: "-1",
+				className: `${modalCloseButtonClass}__icon`
+			})
+		})
+	});
+	const isAlertDialog = alert && !passiveModal;
+	const modalBody = enableDialogElement ? /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		focusAfterCloseRef: launcherButtonRef,
+		modal: true,
+		ref: innerModal,
+		role: isAlertDialog ? "alertdialog" : "",
+		"aria-describedby": isAlertDialog ? modalBodyId : "",
+		className: containerClasses,
+		"aria-label": ariaLabel,
+		"data-exiting": presenceContext?.isExiting || void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--modal-header`,
+				children: [
+					modalLabel && /* @__PURE__ */ jsx(Text, {
+						as: "h2",
+						id: modalLabelId,
+						className: `${prefix}--modal-header__label`,
+						children: modalLabel
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						as: "h2",
+						id: modalHeadingId,
+						className: `${prefix}--modal-header__heading`,
+						children: modalHeading
+					}),
+					decorator ? /* @__PURE__ */ jsx("div", {
+						className: `${prefix}--modal--inner__decorator`,
+						children: normalizedDecorator
+					}) : "",
+					/* @__PURE__ */ jsx("div", {
+						className: `${prefix}--modal-close-button`,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							className: modalCloseButtonClass,
+							label: closeButtonLabel,
+							onClick: onRequestClose,
+							"aria-label": closeButtonLabel,
+							align: "left",
+							ref: button,
+							children: /* @__PURE__ */ jsx(Close, {
+								size: 20,
+								"aria-hidden": "true",
+								tabIndex: "-1",
+								className: `${modalCloseButtonClass}__icon`
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Layer, {
+				ref: contentRef,
+				id: modalBodyId,
+				className: contentClasses,
+				...hasScrollingContentProps,
+				children
+			}),
+			!passiveModal && /* @__PURE__ */ jsxs(ButtonSet_default, {
+				className: footerClasses,
+				"aria-busy": loadingActive,
+				children: [Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => /* @__PURE__ */ jsx(Button_default, {
+					kind: "secondary",
+					onClick: onButtonClick,
+					children: buttonText
+				}, `${buttonText}-${i}`)) : secondaryButtonText && /* @__PURE__ */ jsx(Button_default, {
+					disabled: loadingActive,
+					kind: "secondary",
+					onClick: onSecondaryButtonClick,
+					ref: secondaryButton,
+					children: secondaryButtonText
+				}), /* @__PURE__ */ jsx(Button_default, {
+					className: primaryButtonClass,
+					kind: danger ? "danger" : "primary",
+					disabled: loadingActive || primaryButtonDisabled,
+					onClick: onRequestSubmit,
+					ref: button,
+					children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ jsx(InlineLoading_default, {
+						status: loadingStatus,
+						description: loadingDescription,
+						iconDescription: loadingIconDescription,
+						className: `${prefix}--inline-loading--btn`,
+						onSuccess: onLoadingSuccess
+					})
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+		!enableDialogElement && !focusTrapWithoutSentinels && /* @__PURE__ */ jsx("span", {
+			ref: startTrap,
+			tabIndex: 0,
+			role: "link",
+			className: `${prefix}--visually-hidden`,
+			children: "Focus sentinel"
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			ref: innerModal,
+			role: "dialog",
+			...alertDialogProps,
+			className: containerClasses,
+			"aria-label": ariaLabel,
+			"aria-modal": "true",
+			tabIndex: -1,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: `${prefix}--modal-header`,
+					children: [
+						passiveModal && modalButton,
+						modalLabel && /* @__PURE__ */ jsx(Text, {
+							as: "h2",
+							id: modalLabelId,
+							className: `${prefix}--modal-header__label`,
+							children: modalLabel
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							as: "h2",
+							id: modalHeadingId,
+							className: `${prefix}--modal-header__heading`,
+							children: modalHeading
+						}),
+						slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+							className: `${prefix}--modal--inner__decorator`,
+							children: normalizedDecorator
+						}) : "",
+						!passiveModal && modalButton
+					]
+				}),
+				/* @__PURE__ */ jsx(Layer, {
+					ref: contentRef,
+					id: modalBodyId,
+					className: contentClasses,
+					...hasScrollingContentProps,
+					children
+				}),
+				!passiveModal && /* @__PURE__ */ jsxs(ButtonSet_default, {
+					className: footerClasses,
+					"aria-busy": loadingActive,
+					children: [Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => /* @__PURE__ */ jsx(Button_default, {
+						kind: "secondary",
+						onClick: onButtonClick,
+						children: buttonText
+					}, `${buttonText}-${i}`)) : secondaryButtonText && /* @__PURE__ */ jsx(Button_default, {
+						disabled: loadingActive,
+						kind: "secondary",
+						onClick: onSecondaryButtonClick,
+						ref: secondaryButton,
+						children: secondaryButtonText
+					}), /* @__PURE__ */ jsx(Button_default, {
+						className: primaryButtonClass,
+						kind: danger ? "danger" : "primary",
+						disabled: loadingActive || primaryButtonDisabled,
+						onClick: onRequestSubmit,
+						ref: button,
+						children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ jsx(InlineLoading_default, {
+							status: loadingStatus,
+							description: loadingDescription,
+							iconDescription: loadingIconDescription,
+							className: `${prefix}--inline-loading--btn`,
+							onSuccess: onLoadingSuccess
+						})
+					})]
+				})
+			]
+		}),
+		!enableDialogElement && !focusTrapWithoutSentinels && /* @__PURE__ */ jsx("span", {
+			ref: endTrap,
+			tabIndex: 0,
+			role: "link",
+			className: `${prefix}--visually-hidden`,
+			children: "Focus sentinel"
+		})
+	] });
+	return /* @__PURE__ */ jsx(Layer, {
+		...rest,
+		level: 0,
+		onKeyDown: handleKeyDown,
+		onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
+		onBlur: handleBlur,
+		className: modalClasses,
+		role: "presentation",
+		ref: mergedRefs,
+		"data-exiting": presenceContext?.isExiting || void 0,
+		children: modalBody
+	});
 });
 Modal.propTypes = {
-  /**
-   * Specify whether the Modal is displaying an alert, error or warning
-   * Should go hand in hand with the danger prop.
-   */
-  alert: PropTypes.bool,
-  /**
-   * Required props for the accessibility label of the header
-   */
-  ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
-  /**
-   * Provide the contents of your Modal
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the modal root node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify label for the close button of the modal; defaults to close
-   */
-  closeButtonLabel: PropTypes.string,
-  /**
-   * Specify whether the Modal is for dangerous actions
-   */
-  danger: PropTypes.bool,
-  /**
-   * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Specify whether the modal contains scrolling content
-   */
-  hasScrollingContent: PropTypes.bool,
-  /**
-   * Specify the DOM element ID of the top-level node.
-   */
-  id: PropTypes.string,
-  /**
-   * Specify whether or not the Modal content should have any inner padding.
-   */
-  isFullWidth: PropTypes.bool,
-  /**
-   * Provide a ref to return focus to once the modal is closed.
-   */
-  launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.oneOfType([
-    // `PropTypes.instanceOf(HTMLButtonElement)` alone won't work because
-    // `HTMLButtonElement` is not defined in the test environment even
-    // though `testEnvironment` is set to `jsdom`.
-    typeof HTMLButtonElement !== 'undefined' ? PropTypes.instanceOf(HTMLButtonElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired
-  })]),
-  /**
-   * Specify the description for the loading text
-   */
-  loadingDescription: PropTypes.string,
-  /**
-   * Specify the description for the loading text
-   */
-  loadingIconDescription: PropTypes.string,
-  /**
-   * loading status
-   */
-  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
-  /**
-   * Specify a label to be read by screen readers on the modal root node
-   */
-  modalAriaLabel: PropTypes.string,
-  /**
-   * Specify the content of the modal header title.
-   */
-  modalHeading: PropTypes.node,
-  /**
-   * Specify the content of the modal header label.
-   */
-  modalLabel: PropTypes.node,
-  /**
-   * Specify a handler for keypresses.
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Provide an optional handler to be invoked when loading is
-   * successful
-   */
-  onLoadingSuccess: PropTypes.func,
-  /**
-   * Specify a handler for closing modal.
-   * The handler should care of closing modal, e.g. changing `open` prop.
-   */
-  onRequestClose: PropTypes.func,
-  /**
-   * Specify a handler for "submitting" modal.
-   * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
-   */
-  onRequestSubmit: PropTypes.func,
-  /**
-   * Specify a handler for the secondary button.
-   * Useful if separate handler from `onRequestClose` is desirable
-   */
-  onSecondarySubmit: PropTypes.func,
-  /**
-   * Specify whether the Modal is currently open
-   */
-  open: PropTypes.bool,
-  /**
-   * Specify whether the modal should be button-less
-   */
-  passiveModal: PropTypes.bool,
-  /**
-   * Prevent closing on click outside of modal
-   */
-  preventCloseOnClickOutside: (props, propName) => {
-    if (!props.passiveModal && props[propName] === false) {
-      return new Error(invalidOutsideClickMessage);
-    }
-    return null;
-  },
-  /**
-   * Specify whether the Button should be disabled, or not
-   */
-  primaryButtonDisabled: PropTypes.bool,
-  /**
-   * Specify the text for the primary button
-   */
-  primaryButtonText: PropTypes.node,
-  /**
-   * Specify the text for the secondary button
-   */
-  secondaryButtonText: PropTypes.node,
-  /**
-   * Specify an array of config objects for secondary buttons
-   * (`Array<{
-   *   buttonText: string,
-   *   onClick: function,
-   * }>`).
-   */
-  secondaryButtons: (props, propName, componentName) => {
-    if (props.secondaryButtons) {
-      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error(`${propName} needs to be an array of two button config objects`);
-      }
-      const shape = {
-        buttonText: PropTypes.node,
-        onClick: PropTypes.func
-      };
-      props[propName].forEach(secondaryButton => {
-        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-      });
-    }
-    return null;
-  },
-  /**
-   * Specify a CSS selector that matches the DOM element that should
-   * be focused when the Modal opens
-   */
-  selectorPrimaryFocus: PropTypes.string,
-  /**
-   * Specify CSS selectors that match DOM elements working as floating menus.
-   * Focusing on those elements won't trigger "focus-wrap" behavior
-   */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
-  /**
-   * Specify if Enter key should be used as "submit" action
-   */
-  shouldSubmitOnEnter: PropTypes.bool,
-  /**
-   * Specify the size variant.
-   */
-  size: PropTypes.oneOf(ModalSizes),
-  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.')
+	alert: PropTypes.bool,
+	["aria-label"]: requiredIfGivenPropIsTruthy("hasScrollingContent", PropTypes.string),
+	children: PropTypes.node,
+	className: PropTypes.string,
+	closeButtonLabel: PropTypes.string,
+	danger: PropTypes.bool,
+	decorator: PropTypes.node,
+	hasScrollingContent: PropTypes.bool,
+	id: PropTypes.string,
+	isFullWidth: PropTypes.bool,
+	launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.oneOfType([typeof HTMLButtonElement !== "undefined" ? PropTypes.instanceOf(HTMLButtonElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired })]),
+	loadingDescription: PropTypes.string,
+	loadingIconDescription: PropTypes.string,
+	loadingStatus: PropTypes.oneOf([
+		"inactive",
+		"active",
+		"finished",
+		"error"
+	]),
+	modalAriaLabel: PropTypes.string,
+	modalHeading: PropTypes.node,
+	modalLabel: PropTypes.node,
+	onKeyDown: PropTypes.func,
+	onLoadingSuccess: PropTypes.func,
+	onRequestClose: PropTypes.func,
+	onRequestSubmit: PropTypes.func,
+	onSecondarySubmit: PropTypes.func,
+	open: PropTypes.bool,
+	passiveModal: PropTypes.bool,
+	preventCloseOnClickOutside: (props, propName) => {
+		if (!props.passiveModal && props[propName] === false) return new Error(invalidOutsideClickMessage);
+		return null;
+	},
+	primaryButtonDisabled: PropTypes.bool,
+	primaryButtonText: PropTypes.node,
+	secondaryButtonText: PropTypes.node,
+	secondaryButtons: (props, propName, componentName) => {
+		if (props.secondaryButtons) {
+			if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
+			const shape = {
+				buttonText: PropTypes.node,
+				onClick: PropTypes.func
+			};
+			props[propName].forEach((secondaryButton) => {
+				PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+			});
+		}
+		return null;
+	},
+	selectorPrimaryFocus: PropTypes.string,
+	selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
+	shouldSubmitOnEnter: PropTypes.bool,
+	size: PropTypes.oneOf(ModalSizes),
+	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.")
 };
 
-export { ModalSizes, Modal as default };
+//#endregion
+export { Modal as default };