/**
 * A @wordpress/components Modal whose contents live inside the design
 * system's scope.
 *
 * Modals render through a portal on <body>, outside #rbfb-admin, so the
 * utility classes and custom properties the UI kit relies on — all scoped
 * to .rbfb-top-level-wrapper — never reach them. Without this, every
 * BlockStack and InlineStack inside a modal silently falls back to
 * display:block and the layout collapses into a single column.
 *
 * The scope goes on a wrapper around the children rather than on the modal
 * frame: putting it on the frame also restyles WordPress's own modal
 * chrome, which costs the sticky header its background.
 */
import { Modal } from '@wordpress/components';

export default function Dialog( { children, ...props } ) {
	return (
		<Modal { ...props }>
			<div className="rbfb-top-level-wrapper">{ children }</div>
		</Modal>
	);
}
