Opt-in all @wordpress packages imports via DEWP

.externalized.json

@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/url","extracted/@wordpress/components","lodash","moment","react","react-dom"]
+["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","moment","react","react-dom"]

js/src/attribute-mapping/attribute-mapping-sync.js

@@ -3,7 +3,7 @@
  */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { format as formatDate } from '@wordpress/date';
 
 /**

js/src/attribute-mapping/attribute-mapping-table.js

@@ -3,12 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Pagination, Table, TablePlaceholder } from '@woocommerce/components';
-import {
-	CardBody,
-	CardFooter,
-	Flex,
-	FlexItem,
-} from 'extracted/@wordpress/components';
+import { CardBody, CardFooter, Flex, FlexItem } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 

js/src/components/account-card/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 

js/src/components/app-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button } from 'extracted/@wordpress/components';
+import { Button } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';

js/src/components/app-input-control/index.js

@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { __experimentalInputControl as InputControl } from 'extracted/@wordpress/components';
+import { __experimentalInputControl as InputControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Modal } from 'extracted/@wordpress/components';
+import { Modal } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**

js/src/components/app-radio-content-control/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { RadioControl } from 'extracted/@wordpress/components';
+import { RadioControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-select-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import classNames from 'classnames';
 
 /**

js/src/components/app-standalone-toggle-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ToggleControl } from 'extracted/@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/app-sub-nav/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { NavigableMenu } from 'extracted/@wordpress/components';
+import { NavigableMenu } from '@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 

js/src/components/app-tab-nav/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { NavigableMenu } from 'extracted/@wordpress/components';
+import { NavigableMenu } from '@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 

js/src/components/app-tooltip/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Tooltip } from 'extracted/@wordpress/components';
+import { Tooltip } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 
 /**

js/src/components/connected-icon-label/index.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem } from 'extracted/@wordpress/components';
+import { Flex, FlexItem } from '@wordpress/components';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 
 /**

js/src/components/contact-information/phone-number-card/edit-phone-number-content.js

@@ -4,12 +4,7 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import {
-	Flex,
-	FlexItem,
-	FlexBlock,
-	RadioControl,
-} from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock, RadioControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/contact-information/phone-number-card/phone-number-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**

js/src/components/contact-information/phone-number-card/verification-code-control.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/contact-information/phone-number-card/verify-phone-number-content.js

@@ -9,8 +9,7 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice } from 'extracted/@wordpress/components';
-import { Flex } from 'extracted/@wordpress/components';
+import { Notice, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/contact-information/store-address-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, createInterpolateElement } from '@wordpress/element';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
 import { getPath, getQuery } from '@woocommerce/navigation';

js/src/components/different-currency-notice.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from 'extracted/@wordpress/components';
+import { Notice } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**

js/src/components/faqs-panel/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import { Panel, PanelBody, PanelRow } from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';
 

js/src/components/free-listings/choose-audience-section/choose-audience-section.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { RadioControl } from 'extracted/@wordpress/components';
+import { RadioControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 

js/src/components/google-ads-account-card/connect-ads/index.js

@@ -3,7 +3,7 @@
  */
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/google-ads-account-card/connected-google-ads-account-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/google-ads-account-card/terms-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

js/src/components/google-mc-account-card/connect-mc/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

js/src/components/google-mc-account-card/reclaim-url-card/index.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { CardDivider, Notice } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from '@wordpress/components';
 import { noop } from 'lodash';
 import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 // The above is an unpublished package, delivered with WC, we use Dependency Extraction Webpack Plugin to import it.

js/src/components/google-mc-account-card/switch-url-card/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 // The above is an unpublished package, delivered with WC, we use Dependency Extraction Webpack Plugin to import it.
 // See https://github.com/woocommerce/woocommerce-admin/issues/7781

js/src/components/google-mc-account-card/terms-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

js/src/components/help-popover/index.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Popover } from 'extracted/@wordpress/components';
+import { Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import GridiconHelpOutline from 'gridicons/dist/help-outline';
 import { recordEvent } from '@woocommerce/tracks';

js/src/components/paid-ads/asset-group/asset-group-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useEffect, Fragment } from '@wordpress/element';
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/asset-group/asset-group-section.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from 'extracted/@wordpress/components';
+import { Tip } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/asset-group/final-url-card.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/assetSpecs.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 import { Fragment, createInterpolateElement } from '@wordpress/element';
 
 /**

js/src/components/paid-ads/audience-section.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from 'extracted/@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/billing-card/billing-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import Gridiconcheckmark from 'gridicons/dist/checkmark';
-import { Flex, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexBlock } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/billing-card/billing-setup-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/paid-ads/budget-section/budget-recommendation/index.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from 'extracted/@wordpress/components';
+import { Tip } from '@wordpress/components';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 
 /**

js/src/components/paid-ads/campaign-preview/campaign-preview-card.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconChevronLeft from 'gridicons/dist/chevron-left';
 import GridiconChevronRight from 'gridicons/dist/chevron-right';
 

js/src/components/paid-ads/campaign-preview/mockup-search.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies

js/src/components/pre-launch-check-item/index.js

@@ -7,7 +7,7 @@ import {
 	PanelBody,
 	PanelRow,
 	CheckboxControl,
-} from 'extracted/@wordpress/components';
+} from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';
 

js/src/components/tree-select-control/options.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import classnames from 'classnames';
 

js/src/css/shared/_gutenberg-components.scss

@@ -1,12 +1,5 @@
 // Scope the old styles of core components to GLA pages to avoid styling conflicts with other non-GLA pages.
 .gla-admin-page {
-	// WP 6.1 Compatibility (@wordpress/components 21.0.6 imported by @woocommerce/components)
-	// The style of `DatePicker` component was significantly changed as per the new implementations.
-	// This import could be removed after:
-	// - It's fixed from @woocommerce/components
-	// - or @wordpress/components is changed to be imported via (WC)DEWP
-	@import "node_modules/@wordpress/components/src/date-time/date/datepicker"; /* stylelint-disable-line no-invalid-position-at-import-rule */
-
 	.components-button {
 		// Hack to show correct font color for disabled primary destructive button.
 		// The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72