hello-theme/modules/admin-home/assets/js/hello-elementor-conversion-banner.js

import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@elementor/ui/styles';
import { Welcome } from './components/paper/welcome';
import { AdminProvider } from './providers/admin-provider';
import Box from '@elementor/ui/Box';

const App = () => {
	return (
		<ThemeProvider colorScheme="auto">
			<AdminProvider>
				<Box sx={ { pt: 2, pr: 2, pb: 1 } }>
					<Welcome sx={ { width: '100%', px: 4, py: 3, position: 'relative' } } dismissable />
				</Box>
			</AdminProvider>
		</ThemeProvider>
	);
};

document.addEventListener( 'DOMContentLoaded', () => {
	const container = document.getElementById( 'ehe-admin-cb' );

	if ( container ) {
        const { beforeWrap = false } = window.ehe_cb;
        const { selector, before = false } = window.ehe_cb.data;
		const headerEnd = document.querySelector( selector );

		if ( headerEnd ) {
			if ( beforeWrap ) {
				const wrapElement = document.querySelector( '.wrap' );
				if ( wrapElement ) {
					wrapElement.insertAdjacentElement( 'beforebegin', container );
				}
			} else if ( before ) {
                headerEnd.insertAdjacentElement( 'beforebegin', container );
            } else {
                headerEnd.insertAdjacentElement( 'afterend', container );
            }
		}

		const root = createRoot( container );
		root.render( <App /> );
	}
} );