increase ConfirmDialog overlay's z-index to render above popovers

packages/base-styles/_z-index.scss

@@ -146,6 +146,9 @@ $z-layers: (
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".edit-site-create-template-part-modal": 1000001,
 
+	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
+	// because it uses emotion and not sass. We need it to render on top its parent popover.
+
 	// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,

packages/components/src/confirm-dialog/component.tsx

@@ -23,6 +23,8 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
+import * as styles from './styles';
+import { useCx } from '../utils/hooks/use-cx';
 
 function ConfirmDialog(
 	props: WordPressComponentProps< OwnProps, 'div', false >,
@@ -36,6 +38,9 @@ function ConfirmDialog(
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
+	const cx = useCx();
+	const wrapperClassName = cx( styles.wrapper );
+
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
 
@@ -82,6 +87,7 @@ function ConfirmDialog(
 					closeButtonLabel={ cancelLabel }
 					isDismissible={ true }
 					ref={ forwardedRef }
+					overlayClassName={ wrapperClassName }
 					__experimentalHideHeader
 					{ ...otherProps }
 				>

packages/components/src/confirm-dialog/styles.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * The z-index for ConfirmDialog is being set here instead of in
+ * packages/base-styles/_z-index.scss, because this component uses
+ * emotion instead of sass.
+ *
+ * ConfirmDialog needs this higher z-index to ensure it renders on top of
+ * any parent Popover component.
+ */
+export const wrapper = css`
+	z-index: 1000001;
+`;