POC: bundled components detector

babel.config.js

@@ -7,6 +7,10 @@ module.exports = {
 	env: {
 		production: {
 			plugins: [
+				[
+					'react-remove-properties',
+					{ properties: [ 'data-wcpay-bundled-wp-component' ] },
+				],
 				[
 					'@wordpress/babel-plugin-makepot',
 					{

client/components/wp-components-wrapped/make-wrapped-component.tsx

@@ -23,8 +23,14 @@ export const makeWrappedComponent = <
 		const context = useContext( WordPressComponentsContext );
 
 		if ( ! context || useBundledComponent ) {
-			// @ts-expect-error: the type of props is not always well-defined, ignoring the error.
-			return <BundledComponent { ...rest } ref={ ref } />;
+			return (
+				// @ts-expect-error: the type of props is not always well-defined, ignoring the error.
+				<BundledComponent
+					{ ...rest }
+					ref={ ref }
+					data-wcpay-bundled-wp-component="true"
+				/>
+			);
 		}
 
 		const ContextComponent = context[

client/settings/card-body/index.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import React, { useContext } from 'react';
-import { CardBody as BundledWordPressComponentsCardBody } from 'wcpay/components/wp-components-wrapped';
+// eslint-disable-next-line no-restricted-syntax
+import { CardBody as BundledWordPressComponentsCardBody } from '@wordpress/components';
 import clsx from 'clsx';
 
 /**
@@ -27,6 +28,7 @@ const WcpayCardBody: React.FC< React.PropsWithChildren<
 			<BundledWordPressComponentsCardBody
 				className={ clsx( 'wcpay-card-body', className ) }
 				{ ...props }
+				data-wcpay-bundled-wp-component="true"
 			/>
 		);
 	}

package.json

@@ -149,6 +149,7 @@
     "archiver": "5.2.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
+    "babel-plugin-react-remove-properties": "0.3.0",
     "chalk": "4.1.2",
     "clsx": "2.1.1",
     "config": "3.3.6",