From 47644c171f1923e61816643390f28d69bc30f6b8 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 12:03:39 +0800
Subject: [PATCH 01/25] Externalize `Flex` and its associated group components
 imported from `@wordpress/components`.

---
 js/src/attribute-mapping/attribute-mapping-sync.js       | 2 +-
 js/src/attribute-mapping/attribute-mapping-table.js      | 3 ++-
 js/src/components/account-card/index.js                  | 2 +-
 js/src/components/connected-icon-label/index.js          | 2 +-
 .../phone-number-card/edit-phone-number-content.js       | 3 ++-
 .../phone-number-card/verification-code-control.js       | 2 +-
 .../phone-number-card/verify-phone-number-content.js     | 3 ++-
 js/src/components/paid-ads/billing-card/billing-card.js  | 2 +-
 .../paid-ads/campaign-preview/campaign-preview-card.js   | 2 +-
 .../paid-ads/campaign-preview/mockup-search.js           | 2 +-
 js/src/components/tree-select-control/options.js         | 2 +-
 js/src/get-started-page/benefits-card/index.js           | 3 ++-
 js/src/get-started-page/customer-quotes-card/index.js    | 3 ++-
 js/src/get-started-page/features-card/index.js           | 3 ++-
 js/src/get-started-page/get-started-card/index.js        | 3 ++-
 .../get-started-with-video-card/index.js                 | 3 ++-
 js/src/product-feed/product-statistics/index.js          | 9 ++-------
 .../product-feed/product-statistics/status-box/status.js | 2 +-
 .../product-feed/review-request/review-request-notice.js | 2 +-
 js/src/settings/edit-store-address.js                    | 2 +-
 js/src/settings/linked-accounts.js                       | 2 +-
 .../setup-paid-ads/paid-ads-features-section.js          | 2 +-
 .../setup-paid-ads/product-feed-status-section.js        | 2 +-
 .../setup-stepper/setup-paid-ads/setup-paid-ads.js       | 2 +-
 24 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/js/src/attribute-mapping/attribute-mapping-sync.js b/js/src/attribute-mapping/attribute-mapping-sync.js
index 7294988a96..574c66324e 100644
--- a/js/src/attribute-mapping/attribute-mapping-sync.js
+++ b/js/src/attribute-mapping/attribute-mapping-sync.js
@@ -3,7 +3,7 @@
  */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { format as formatDate } from '@wordpress/date';
 
 /**
diff --git a/js/src/attribute-mapping/attribute-mapping-table.js b/js/src/attribute-mapping/attribute-mapping-table.js
index 20244e78ee..0a29ed28d4 100644
--- a/js/src/attribute-mapping/attribute-mapping-table.js
+++ b/js/src/attribute-mapping/attribute-mapping-table.js
@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Pagination, Table, TablePlaceholder } from '@woocommerce/components';
-import { CardBody, CardFooter, Flex, FlexItem } from '@wordpress/components';
+import { CardBody, CardFooter } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/components/account-card/index.js b/js/src/components/account-card/index.js
index 23468d6e57..5df1eb3fa2 100644
--- a/js/src/components/account-card/index.js
+++ b/js/src/components/account-card/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 
diff --git a/js/src/components/connected-icon-label/index.js b/js/src/components/connected-icon-label/index.js
index c25836ede5..5fc7662bd8 100644
--- a/js/src/components/connected-icon-label/index.js
+++ b/js/src/components/connected-icon-label/index.js
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 
 /**
diff --git a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
index 90f5652000..9f8733492b 100644
--- a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
@@ -4,7 +4,8 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock, RadioControl } from '@wordpress/components';
+import { RadioControl } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/contact-information/phone-number-card/verification-code-control.js b/js/src/components/contact-information/phone-number-card/verification-code-control.js
index 75758b6e41..e54d78f409 100644
--- a/js/src/components/contact-information/phone-number-card/verification-code-control.js
+++ b/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 '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
index 4e089ed911..efa74271bf 100644
--- a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
@@ -9,7 +9,8 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice, Flex } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/billing-card/billing-card.js b/js/src/components/paid-ads/billing-card/billing-card.js
index d441a37def..c58c90ac73 100644
--- a/js/src/components/paid-ads/billing-card/billing-card.js
+++ b/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 '@wordpress/components';
+import { Flex, FlexBlock } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js b/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
index ca9bf85c1c..6a35e28b1f 100644
--- a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
+++ b/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 '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import GridiconChevronLeft from 'gridicons/dist/chevron-left';
 import GridiconChevronRight from 'gridicons/dist/chevron-right';
 
diff --git a/js/src/components/paid-ads/campaign-preview/mockup-search.js b/js/src/components/paid-ads/campaign-preview/mockup-search.js
index bdf2b04d2b..f99ebda02c 100644
--- a/js/src/components/paid-ads/campaign-preview/mockup-search.js
+++ b/js/src/components/paid-ads/campaign-preview/mockup-search.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/tree-select-control/options.js b/js/src/components/tree-select-control/options.js
index 0eb70d8b4a..0a40c0079f 100644
--- a/js/src/components/tree-select-control/options.js
+++ b/js/src/components/tree-select-control/options.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import classnames from 'classnames';
 
diff --git a/js/src/get-started-page/benefits-card/index.js b/js/src/get-started-page/benefits-card/index.js
index 5a28b64e62..ec824ab379 100644
--- a/js/src/get-started-page/benefits-card/index.js
+++ b/js/src/get-started-page/benefits-card/index.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody, FlexItem } from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
+import { FlexItem } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/customer-quotes-card/index.js b/js/src/get-started-page/customer-quotes-card/index.js
index b661082581..bef96e6cd1 100644
--- a/js/src/get-started-page/customer-quotes-card/index.js
+++ b/js/src/get-started-page/customer-quotes-card/index.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, Flex, FlexBlock } from '@wordpress/components';
+import { Card, CardHeader } from '@wordpress/components';
+import { Flex, FlexBlock } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/get-started-page/features-card/index.js b/js/src/get-started-page/features-card/index.js
index 2e6460e10c..c61debaa28 100644
--- a/js/src/get-started-page/features-card/index.js
+++ b/js/src/get-started-page/features-card/index.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, Flex, FlexBlock } from '@wordpress/components';
+import { Card, CardHeader } from '@wordpress/components';
+import { Flex, FlexBlock } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/get-started-card/index.js b/js/src/get-started-page/get-started-card/index.js
index ead847c49d..be57bffefa 100644
--- a/js/src/get-started-page/get-started-card/index.js
+++ b/js/src/get-started-page/get-started-card/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Card, CardBody, FlexItem } from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
+import { FlexItem } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
index 0fe6ea1439..fdf522c6e2 100644
--- a/js/src/get-started-page/get-started-with-video-card/index.js
+++ b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Card, CardBody, FlexBlock, Tip } from '@wordpress/components';
+import { Card, CardBody, Tip } from '@wordpress/components';
+import { FlexBlock } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/product-feed/product-statistics/index.js b/js/src/product-feed/product-statistics/index.js
index b4c28ccfd5..d685dd9e48 100644
--- a/js/src/product-feed/product-statistics/index.js
+++ b/js/src/product-feed/product-statistics/index.js
@@ -2,13 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Card,
-	CardHeader,
-	CardBody,
-	CardFooter,
-	FlexItem,
-} from '@wordpress/components';
+import { Card, CardHeader, CardBody, CardFooter } from '@wordpress/components';
+import { FlexItem } from 'extracted/@wordpress/components';
 
 import {
 	SummaryList,
diff --git a/js/src/product-feed/product-statistics/status-box/status.js b/js/src/product-feed/product-statistics/status-box/status.js
index 197276e19d..89c368a873 100644
--- a/js/src/product-feed/product-statistics/status-box/status.js
+++ b/js/src/product-feed/product-statistics/status-box/status.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 
 /**
  * Renders a status line. With a title, an icon and a description for the status
diff --git a/js/src/product-feed/review-request/review-request-notice.js b/js/src/product-feed/review-request/review-request-notice.js
index 69e5f4762a..b5cd4159d0 100644
--- a/js/src/product-feed/review-request/review-request-notice.js
+++ b/js/src/product-feed/review-request/review-request-notice.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { format as formatDate } from '@wordpress/date';
-import { Flex, FlexItem } from '@wordpress/components';
+import { Flex, FlexItem } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/settings/edit-store-address.js b/js/src/settings/edit-store-address.js
index d34068b474..1396bfb44d 100644
--- a/js/src/settings/edit-store-address.js
+++ b/js/src/settings/edit-store-address.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { getHistory } from '@woocommerce/navigation';
 import { useState } from '@wordpress/element';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/settings/linked-accounts.js b/js/src/settings/linked-accounts.js
index c0c027eab5..bea46bf322 100644
--- a/js/src/settings/linked-accounts.js
+++ b/js/src/settings/linked-accounts.js
@@ -3,7 +3,7 @@
  */
 import { queueRecordEvent } from '@woocommerce/tracks';
 import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 14099026e6..1e8eb3704e 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import { Pill } from '@woocommerce/components';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
 import GridiconGift from 'gridicons/dist/gift';
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
index 628d730804..3a4746b13d 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
@@ -3,7 +3,7 @@
  */
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index 8bc19b9dfa..cae107d92a 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { select } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { Flex } from '@wordpress/components';
+import { Flex } from 'extracted/@wordpress/components';
 import { noop, merge } from 'lodash';
 
 /**

From 16142a3fbdc6fca3323e8f734aaa2eb6c355224f Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 15:08:55 +0800
Subject: [PATCH 02/25] Externalize `Card` and its associated group components
 imported from `@wordpress/components`.

---
 js/src/attribute-mapping/attribute-mapping-table.js      | 8 ++++++--
 .../phone-number-card/phone-number-card.js               | 2 +-
 .../components/contact-information/store-address-card.js | 2 +-
 .../google-ads-account-card/connect-ads/index.js         | 2 +-
 .../google-mc-account-card/connect-mc/index.js           | 2 +-
 .../google-mc-account-card/reclaim-url-card/index.js     | 3 ++-
 .../google-mc-account-card/switch-url-card/index.js      | 2 +-
 js/src/dashboard/summary-section/summary-card.js         | 2 +-
 .../woocommerce/compare-filter/index.js                  | 9 +++++++--
 js/src/get-started-page/benefits-card/index.js           | 3 +--
 js/src/get-started-page/customer-quotes-card/index.js    | 8 ++++++--
 js/src/get-started-page/features-card/index.js           | 8 ++++++--
 js/src/get-started-page/get-started-card/index.js        | 3 +--
 .../get-started-with-video-card/index.js                 | 4 ++--
 js/src/product-feed/issues-table-card/index.js           | 2 +-
 js/src/product-feed/issues-table-card/issues-table.js    | 2 +-
 js/src/product-feed/product-feed-table-card/index.js     | 4 ++--
 js/src/product-feed/product-statistics/index.js          | 9 +++++++--
 .../disconnect-google-account-card.js                    | 3 ++-
 js/src/wcdl/section/card/body/index.js                   | 2 +-
 js/src/wcdl/section/card/footer/index.js                 | 2 +-
 js/src/wcdl/section/card/index.js                        | 2 +-
 22 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/js/src/attribute-mapping/attribute-mapping-table.js b/js/src/attribute-mapping/attribute-mapping-table.js
index 0a29ed28d4..63f654858b 100644
--- a/js/src/attribute-mapping/attribute-mapping-table.js
+++ b/js/src/attribute-mapping/attribute-mapping-table.js
@@ -3,8 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Pagination, Table, TablePlaceholder } from '@woocommerce/components';
-import { CardBody, CardFooter } from '@wordpress/components';
-import { Flex, FlexItem } from 'extracted/@wordpress/components';
+import {
+	CardBody,
+	CardFooter,
+	Flex,
+	FlexItem,
+} from 'extracted/@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/components/contact-information/phone-number-card/phone-number-card.js b/js/src/components/contact-information/phone-number-card/phone-number-card.js
index 8c9cd3faf5..1f241549df 100644
--- a/js/src/components/contact-information/phone-number-card/phone-number-card.js
+++ b/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 '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**
diff --git a/js/src/components/contact-information/store-address-card.js b/js/src/components/contact-information/store-address-card.js
index 609d060ab0..7ad2998226 100644
--- a/js/src/components/contact-information/store-address-card.js
+++ b/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 '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
 import { getPath, getQuery } from '@woocommerce/navigation';
diff --git a/js/src/components/google-ads-account-card/connect-ads/index.js b/js/src/components/google-ads-account-card/connect-ads/index.js
index 6926d4d3be..5a48ea05d8 100644
--- a/js/src/components/google-ads-account-card/connect-ads/index.js
+++ b/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 '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/google-mc-account-card/connect-mc/index.js b/js/src/components/google-mc-account-card/connect-mc/index.js
index f5094a4e2b..81d57f1360 100644
--- a/js/src/components/google-mc-account-card/connect-mc/index.js
+++ b/js/src/components/google-mc-account-card/connect-mc/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/components/google-mc-account-card/reclaim-url-card/index.js b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
index 2503bf2122..041611a3ff 100644
--- a/js/src/components/google-mc-account-card/reclaim-url-card/index.js
+++ b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
@@ -3,7 +3,8 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { CardDivider, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { CardDivider } from 'extracted/@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.
diff --git a/js/src/components/google-mc-account-card/switch-url-card/index.js b/js/src/components/google-mc-account-card/switch-url-card/index.js
index aca8577fb0..dc5d8a8735 100644
--- a/js/src/components/google-mc-account-card/switch-url-card/index.js
+++ b/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 '@wordpress/components';
+import { CardDivider } from 'extracted/@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
diff --git a/js/src/dashboard/summary-section/summary-card.js b/js/src/dashboard/summary-section/summary-card.js
index a63cf23840..e838ebbbbb 100644
--- a/js/src/dashboard/summary-section/summary-card.js
+++ b/js/src/dashboard/summary-section/summary-card.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader } from 'extracted/@wordpress/components';
 /**
  * Internal dependencies
  */
diff --git a/js/src/external-components/woocommerce/compare-filter/index.js b/js/src/external-components/woocommerce/compare-filter/index.js
index 1a1fa6fa4e..64c9157bb2 100644
--- a/js/src/external-components/woocommerce/compare-filter/index.js
+++ b/js/src/external-components/woocommerce/compare-filter/index.js
@@ -9,8 +9,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Card, CardBody, CardFooter, CardHeader } from '@wordpress/components';
-import { Button } from 'extracted/@wordpress/components';
+import {
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	Button,
+} from 'extracted/@wordpress/components';
 import { isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
diff --git a/js/src/get-started-page/benefits-card/index.js b/js/src/get-started-page/benefits-card/index.js
index ec824ab379..af7bab6c1c 100644
--- a/js/src/get-started-page/benefits-card/index.js
+++ b/js/src/get-started-page/benefits-card/index.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody } from '@wordpress/components';
-import { FlexItem } from 'extracted/@wordpress/components';
+import { Card, CardBody, FlexItem } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/customer-quotes-card/index.js b/js/src/get-started-page/customer-quotes-card/index.js
index bef96e6cd1..81307b431d 100644
--- a/js/src/get-started-page/customer-quotes-card/index.js
+++ b/js/src/get-started-page/customer-quotes-card/index.js
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader } from '@wordpress/components';
-import { Flex, FlexBlock } from 'extracted/@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	Card,
+	CardHeader,
+} from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/get-started-page/features-card/index.js b/js/src/get-started-page/features-card/index.js
index c61debaa28..2cbb1ba930 100644
--- a/js/src/get-started-page/features-card/index.js
+++ b/js/src/get-started-page/features-card/index.js
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader } from '@wordpress/components';
-import { Flex, FlexBlock } from 'extracted/@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	Card,
+	CardHeader,
+} from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/get-started-card/index.js b/js/src/get-started-page/get-started-card/index.js
index be57bffefa..5cce151ea7 100644
--- a/js/src/get-started-page/get-started-card/index.js
+++ b/js/src/get-started-page/get-started-card/index.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardBody } from '@wordpress/components';
-import { FlexItem } from 'extracted/@wordpress/components';
+import { FlexItem, Card, CardBody } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
index fdf522c6e2..6f8f12f2af 100644
--- a/js/src/get-started-page/get-started-with-video-card/index.js
+++ b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { Card, CardBody, Tip } from '@wordpress/components';
-import { FlexBlock } from 'extracted/@wordpress/components';
+import { Tip } from '@wordpress/components';
+import { FlexBlock, Card, CardBody } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/product-feed/issues-table-card/index.js b/js/src/product-feed/issues-table-card/index.js
index 73c23708cc..b765f8911f 100644
--- a/js/src/product-feed/issues-table-card/index.js
+++ b/js/src/product-feed/issues-table-card/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader } from 'extracted/@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/product-feed/issues-table-card/issues-table.js b/js/src/product-feed/issues-table-card/issues-table.js
index 36b3462798..38e969d241 100644
--- a/js/src/product-feed/issues-table-card/issues-table.js
+++ b/js/src/product-feed/issues-table-card/issues-table.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardBody, CardFooter } from '@wordpress/components';
+import { CardBody, CardFooter } from 'extracted/@wordpress/components';
 import { Pagination, TablePlaceholder } from '@woocommerce/components';
 
 /**
diff --git a/js/src/product-feed/product-feed-table-card/index.js b/js/src/product-feed/product-feed-table-card/index.js
index bfb2ed47e8..cff7bda694 100644
--- a/js/src/product-feed/product-feed-table-card/index.js
+++ b/js/src/product-feed/product-feed-table-card/index.js
@@ -3,13 +3,13 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { CheckboxControl } from '@wordpress/components';
 import {
-	CheckboxControl,
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-} from '@wordpress/components';
+} from 'extracted/@wordpress/components';
 import {
 	EmptyTable,
 	Pagination,
diff --git a/js/src/product-feed/product-statistics/index.js b/js/src/product-feed/product-statistics/index.js
index d685dd9e48..e22a3491eb 100644
--- a/js/src/product-feed/product-statistics/index.js
+++ b/js/src/product-feed/product-statistics/index.js
@@ -2,8 +2,13 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, CardBody, CardFooter } from '@wordpress/components';
-import { FlexItem } from 'extracted/@wordpress/components';
+import {
+	FlexItem,
+	Card,
+	CardHeader,
+	CardBody,
+	CardFooter,
+} from 'extracted/@wordpress/components';
 
 import {
 	SummaryList,
diff --git a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
index 1c79ca0aef..de38d51bdb 100644
--- a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
+++ b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardDivider, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { CardDivider } from 'extracted/@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { getNewPath } from '@woocommerce/navigation';
 
diff --git a/js/src/wcdl/section/card/body/index.js b/js/src/wcdl/section/card/body/index.js
index a9dd0e3e17..8377e3b960 100644
--- a/js/src/wcdl/section/card/body/index.js
+++ b/js/src/wcdl/section/card/body/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardBody } from '@wordpress/components';
+import { CardBody } from 'extracted/@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/wcdl/section/card/footer/index.js b/js/src/wcdl/section/card/footer/index.js
index b1fdc14183..0cac31e1c7 100644
--- a/js/src/wcdl/section/card/footer/index.js
+++ b/js/src/wcdl/section/card/footer/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardFooter } from '@wordpress/components';
+import { CardFooter } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/wcdl/section/card/index.js b/js/src/wcdl/section/card/index.js
index 45ddb3c8a5..f1dcd6c64a 100644
--- a/js/src/wcdl/section/card/index.js
+++ b/js/src/wcdl/section/card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card as WPCard } from '@wordpress/components';
+import { Card as WPCard } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

From 69ed751e39be4e2b12794df90872da8f73d00edc Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 17:16:50 +0800
Subject: [PATCH 03/25] Externalize the `Dashicon` component imported from
 `@wordpress/components`.

---
 js/src/product-feed/issues-table-card/issues-solved.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/product-feed/issues-table-card/issues-solved.js b/js/src/product-feed/issues-table-card/issues-solved.js
index 84ae6e9ae8..d7d8bae71c 100644
--- a/js/src/product-feed/issues-table-card/issues-solved.js
+++ b/js/src/product-feed/issues-table-card/issues-solved.js
@@ -3,7 +3,7 @@
  */
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Dashicon } from '@wordpress/components';
+import { Dashicon } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

From 3001f248d40de11026920ce30faaf28956d0a706 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 17:15:58 +0800
Subject: [PATCH 04/25] Externalize the `@wordpress/primitives` package and the
 `Icon` component imported from `@wordpress/components`.

---
 js/src/get-started-page/unsupported-notices/index.js          | 3 ++-
 .../product-feed-table-card/edit-visibility-action.js         | 4 ++--
 webpack.config.js                                             | 1 -
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/src/get-started-page/unsupported-notices/index.js b/js/src/get-started-page/unsupported-notices/index.js
index c5102eca8b..d7c9ad4c00 100644
--- a/js/src/get-started-page/unsupported-notices/index.js
+++ b/js/src/get-started-page/unsupported-notices/index.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice, Icon } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
+import { Icon } from 'extracted/@wordpress/components';
 import { external as externalIcon } from '@wordpress/icons';
 import { Link } from '@woocommerce/components';
 import { createInterpolateElement } from '@wordpress/element';
diff --git a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
index 9681d44f29..5be0ab8bff 100644
--- a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
+++ b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
+import { Icon } from 'extracted/@wordpress/components';
 import { SelectControl } from '@woocommerce/components';
 import { edit as editIcon } from '@wordpress/icons';
 
@@ -68,7 +68,7 @@ export default function EditVisibilityAction( {
 					'google-listings-and-ads'
 				) }
 			>
-				<Icon icon={ editIcon } size={ 24 } />
+				<Icon icon={ editIcon } />
 			</AppTooltip>
 		);
 	}
diff --git a/webpack.config.js b/webpack.config.js
index 553fa70d1b..53cdf2dd28 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,7 +28,6 @@ const requestToExternal = ( request ) => {
 		// WP 5.4 is the min version for <Card* />, <TabPanel />
 		'@wordpress/compose',
 		'@wordpress/components',
-		'@wordpress/primitives',
 		// Opt-out WooCommerce packages.
 		'@woocommerce/currency',
 		'@woocommerce/date',

From 604b40ca72e4d00938d4dfc2d450d56dca59bd01 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 17:21:09 +0800
Subject: [PATCH 05/25] Fix missing CSS selectors when renaming AppTooltip's
 CSS name.

Ref:
- https://github.com/woocommerce/google-listings-and-ads/pull/1901
- https://github.com/woocommerce/google-listings-and-ads/commit/36f3dd6c3861ad95189966c5defef9c44b45df1c
---
 js/src/product-feed/product-feed-table-card/index.scss        | 2 +-
 js/src/reports/programs/campaign-name-cell.scss               | 2 +-
 .../setup-paid-ads/product-feed-status-section.scss           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/src/product-feed/product-feed-table-card/index.scss b/js/src/product-feed/product-feed-table-card/index.scss
index 4a3e4d26f2..362840348c 100644
--- a/js/src/product-feed/product-feed-table-card/index.scss
+++ b/js/src/product-feed/product-feed-table-card/index.scss
@@ -12,7 +12,7 @@
 		}
 	}
 
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		// Clear the 4px space gap for SVG
 		line-height: 0;
 
diff --git a/js/src/reports/programs/campaign-name-cell.scss b/js/src/reports/programs/campaign-name-cell.scss
index b34d3a3619..99de80373a 100644
--- a/js/src/reports/programs/campaign-name-cell.scss
+++ b/js/src/reports/programs/campaign-name-cell.scss
@@ -1,5 +1,5 @@
 .gla-reports__tooltip-campaign-name {
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		width: 100%;
 	}
 }
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss
index 42c882b5f0..9d623b5acb 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss
@@ -16,7 +16,7 @@
 	}
 
 	&__product-quantity-separator,
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		font-size: $gla-font-smallest;
 		font-weight: normal;
 		color: $gray-700;
@@ -28,7 +28,7 @@
 		margin: 0 $grid-unit-10;
 	}
 
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		padding-bottom: calc($grid-unit-05 / 2);
 		line-height: 1;
 		border-bottom: $border-width dashed $gray-600;

From 015334330883ec3f31ba4f8551488c1ad9f45f28 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 18:13:03 +0800
Subject: [PATCH 06/25] Externalize the `Notice` component imported from
 `@wordpress/components`.

---
 .../phone-number-card/verify-phone-number-content.js           | 2 +-
 js/src/components/different-currency-notice.js                 | 2 +-
 js/src/components/dismissible-notice/index.js                  | 2 +-
 .../google-mc-account-card/reclaim-url-card/index.js           | 3 +--
 js/src/get-started-page/unsupported-notices/index.js           | 3 +--
 js/src/product-feed/review-request/review-request-modal.js     | 3 ++-
 .../reconnect-google-account/disconnect-google-account-card.js | 3 +--
 7 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
index efa74271bf..15d8d1379f 100644
--- a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
@@ -9,7 +9,7 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { Flex } from 'extracted/@wordpress/components';
 
 /**
diff --git a/js/src/components/different-currency-notice.js b/js/src/components/different-currency-notice.js
index 9a6b5ab891..4e93418c5e 100644
--- a/js/src/components/different-currency-notice.js
+++ b/js/src/components/different-currency-notice.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/components/dismissible-notice/index.js b/js/src/components/dismissible-notice/index.js
index cfe36be2e0..41422a2b13 100644
--- a/js/src/components/dismissible-notice/index.js
+++ b/js/src/components/dismissible-notice/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Notice } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 import { noop } from 'lodash';
 
diff --git a/js/src/components/google-mc-account-card/reclaim-url-card/index.js b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
index 041611a3ff..4ec5a65da0 100644
--- a/js/src/components/google-mc-account-card/reclaim-url-card/index.js
+++ b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
@@ -3,8 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Notice } from '@wordpress/components';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from 'extracted/@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.
diff --git a/js/src/get-started-page/unsupported-notices/index.js b/js/src/get-started-page/unsupported-notices/index.js
index d7c9ad4c00..a2847b5db1 100644
--- a/js/src/get-started-page/unsupported-notices/index.js
+++ b/js/src/get-started-page/unsupported-notices/index.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from '@wordpress/components';
-import { Icon } from 'extracted/@wordpress/components';
+import { Notice, Icon } from 'extracted/@wordpress/components';
 import { external as externalIcon } from '@wordpress/icons';
 import { Link } from '@woocommerce/components';
 import { createInterpolateElement } from '@wordpress/element';
diff --git a/js/src/product-feed/review-request/review-request-modal.js b/js/src/product-feed/review-request/review-request-modal.js
index a46171d43f..c8bb7b0890 100644
--- a/js/src/product-feed/review-request/review-request-modal.js
+++ b/js/src/product-feed/review-request/review-request-modal.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, Notice } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
index de38d51bdb..bce9db72dc 100644
--- a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
+++ b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from '@wordpress/components';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from 'extracted/@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { getNewPath } from '@woocommerce/navigation';
 

From 6ebda2b8c76925ac76eb1cbca04ef6de065365b2 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 18:13:25 +0800
Subject: [PATCH 07/25] Externalize the `Tip` component imported from
 `@wordpress/components`.

---
 .../paid-ads/asset-group/asset-group-section.js           | 2 +-
 .../budget-section/budget-recommendation/index.js         | 2 +-
 .../get-started-page/get-started-with-video-card/index.js | 8 ++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.js b/js/src/components/paid-ads/asset-group/asset-group-section.js
index d836655806..be6a1867a5 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-section.js
+++ b/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 '@wordpress/components';
+import { Tip } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js b/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
index 450cf48273..aafbd1fbd8 100644
--- a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
+++ b/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 '@wordpress/components';
+import { Tip } from 'extracted/@wordpress/components';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 
 /**
diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
index 6f8f12f2af..1f9ffe6c13 100644
--- a/js/src/get-started-page/get-started-with-video-card/index.js
+++ b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
-import { Tip } from '@wordpress/components';
-import { FlexBlock, Card, CardBody } from 'extracted/@wordpress/components';
+import {
+	FlexBlock,
+	Card,
+	CardBody,
+	Tip,
+} from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

From 110db8e86aba203f2415b5e05d3af0ad11e79cf8 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 19:10:35 +0800
Subject: [PATCH 08/25] Remove an unused component `DismissibleNotice`.

Ref: https://github.com/woocommerce/google-listings-and-ads/pull/1889
---
 js/src/components/dismissible-notice/index.js |  57 --------
 .../dismissible-notice/index.test.js          | 125 ------------------
 2 files changed, 182 deletions(-)
 delete mode 100644 js/src/components/dismissible-notice/index.js
 delete mode 100644 js/src/components/dismissible-notice/index.test.js

diff --git a/js/src/components/dismissible-notice/index.js b/js/src/components/dismissible-notice/index.js
deleted file mode 100644
index 41422a2b13..0000000000
--- a/js/src/components/dismissible-notice/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * External dependencies
- */
-import { Notice } from 'extracted/@wordpress/components';
-import { useState } from '@wordpress/element';
-import { noop } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import localStorage from '.~/utils/localStorage';
-
-/**
- * Shows dismissible Notice {@link Notice}
- * If localStorageKey is provided it will store the dismiss state in the localStorage
- *
- *
- * @param {Object} props React props.
- * @param {JSX.Element} props.children Children to render.
- * @param {string|null} props.localStorageKey Local Storage Key where is keep the dismiss state.
- * @param {Function} props.onRemove Callback when clicking on remove notice
- * @param {Object} props.restProps Props to be forwarded to Notice Component. Like className.
- * @return {JSX.Element} {@link Notice} Dismissible Notice element
- */
-const DismissibleNotice = ( {
-	children,
-	localStorageKey = null,
-	onRemove = noop,
-	...rest
-} ) => {
-	const defaultDismissedValue =
-		localStorage.get( localStorageKey ) === 'true';
-
-	const [ isDismissed, setIsDismissed ] = useState( defaultDismissedValue );
-
-	const handleRemove = () => {
-		if ( localStorageKey ) {
-			localStorage.set( localStorageKey, true );
-		}
-
-		onRemove();
-
-		setIsDismissed( true );
-	};
-
-	if ( isDismissed ) {
-		return null;
-	}
-
-	return (
-		<Notice onRemove={ handleRemove } { ...rest }>
-			{ children }
-		</Notice>
-	);
-};
-
-export default DismissibleNotice;
diff --git a/js/src/components/dismissible-notice/index.test.js b/js/src/components/dismissible-notice/index.test.js
deleted file mode 100644
index 504210ce08..0000000000
--- a/js/src/components/dismissible-notice/index.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-/**
- * Internal dependencies
- */
-import DismissibleNotice from '.~/components/dismissible-notice';
-import localStorage from '.~/utils/localStorage';
-
-jest.mock( '.~/utils/localStorage', () => {
-	return {
-		get: jest.fn(),
-		set: jest.fn(),
-	};
-} );
-
-describe( 'Dismissible notice', () => {
-	const onRemove = jest.fn().mockName( 'On remove callback' );
-	const localStorageKey = 'myDismissLocalStorageKey';
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'Rendering Dismissible Notice', () => {
-		//using spokenMessage='' to avoid accessibility message.
-		//See https://make.wordpress.org/accessibility/handbook/markup/wp-a11y-speak/#the-generated-output
-		const { getByText, getByRole, container } = render(
-			<DismissibleNotice spokenMessage="" className="myClassName">
-				<p>My dismissible notice</p>
-			</DismissibleNotice>
-		);
-
-		expect( container.firstChild.classList.contains( 'myClassName' ) ).toBe(
-			true
-		);
-		const noticeContent = getByText( 'My dismissible notice' );
-		const removeButton = getByRole( 'button' );
-
-		expect( noticeContent ).toBeTruthy();
-		expect( removeButton ).toBeTruthy();
-	} );
-
-	it( 'Rendering Dismissible Notice with onRemove callback', () => {
-		const getLocalStorage = localStorage.get.mockImplementation( () => {
-			return null;
-		} );
-
-		const { getByText, getByRole, queryByText } = render(
-			<DismissibleNotice onRemove={ onRemove } spokenMessage="">
-				<p>My dismissible notice</p>
-			</DismissibleNotice>
-		);
-
-		expect( getByText( 'My dismissible notice' ) ).toBeTruthy();
-
-		const removeButton = getByRole( 'button' );
-		expect( removeButton ).toBeTruthy();
-
-		expect( getLocalStorage ).toHaveBeenCalledTimes( 1 );
-
-		fireEvent.click( removeButton );
-
-		expect( onRemove ).toHaveBeenCalledTimes( 1 );
-
-		expect( queryByText( 'My dismissible notice' ) ).toBeFalsy();
-	} );
-
-	it( 'Rendering Dismissible Notice with localStorageKey', () => {
-		const getLocalStorage = localStorage.get.mockImplementation( () => {
-			return null;
-		} );
-		const setLocalStorage = localStorage.set.mockImplementation( () => {
-			return null;
-		} );
-
-		const { getByRole, queryByText } = render(
-			<DismissibleNotice
-				onRemove={ onRemove }
-				localStorageKey={ localStorageKey }
-				spokenMessage=""
-			>
-				<p>My dismissible notice</p>
-			</DismissibleNotice>
-		);
-
-		expect( getLocalStorage ).toHaveBeenCalledTimes( 1 );
-		expect( getLocalStorage ).toBeCalledWith( localStorageKey );
-
-		const removeButton = getByRole( 'button' );
-		expect( removeButton ).toBeTruthy();
-
-		fireEvent.click( removeButton );
-
-		expect( onRemove ).toHaveBeenCalledTimes( 1 );
-		expect( setLocalStorage ).toHaveBeenCalledTimes( 1 );
-		expect( setLocalStorage ).toBeCalledWith( localStorageKey, true );
-
-		expect( queryByText( 'My dismissible notice' ) ).toBeFalsy();
-	} );
-
-	it( 'Should not render Dismissible Notice if the dismiss state in the localStorage is set to true', () => {
-		const getLocalStorage = localStorage.get.mockImplementation( () => {
-			return 'true';
-		} );
-
-		const { queryByText } = render(
-			<DismissibleNotice
-				onRemove={ onRemove }
-				localStorageKey={ localStorageKey }
-				spokenMessage=""
-			>
-				<p>My dismissible notice</p>
-			</DismissibleNotice>
-		);
-
-		expect( queryByText( 'My dismissible notice' ) ).toBeFalsy();
-		expect( getLocalStorage ).toHaveBeenCalledTimes( 1 );
-		expect( getLocalStorage ).toBeCalledWith( localStorageKey );
-		expect( onRemove ).toHaveBeenCalledTimes( 0 );
-	} );
-} );

From d507cb9a5b0e56da616529edc3e0b71dfc830c54 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 17:52:50 +0800
Subject: [PATCH 09/25] Update the .externalized.json file

---
 .externalized.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.externalized.json b/.externalized.json
index ac718a14a8..e632780dc7 100644
--- a/.externalized.json
+++ b/.externalized.json
@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
\ No newline at end of file
+["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
\ No newline at end of file

From dc99bc97171cd33e06e26c2fb87d9b245f35d5f7 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 18:14:08 +0800
Subject: [PATCH 10/25] Externalize the `NavigableMenu` component imported from
 `@wordpress/components`.

---
 js/src/components/app-sub-nav/index.js | 2 +-
 js/src/components/app-tab-nav/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/components/app-sub-nav/index.js b/js/src/components/app-sub-nav/index.js
index 114694b60e..e1b4ee2179 100644
--- a/js/src/components/app-sub-nav/index.js
+++ b/js/src/components/app-sub-nav/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { NavigableMenu } from '@wordpress/components';
+import { NavigableMenu } from 'extracted/@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 
diff --git a/js/src/components/app-tab-nav/index.js b/js/src/components/app-tab-nav/index.js
index 3fd7b58f75..a68421bde5 100644
--- a/js/src/components/app-tab-nav/index.js
+++ b/js/src/components/app-tab-nav/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { NavigableMenu } from '@wordpress/components';
+import { NavigableMenu } from 'extracted/@wordpress/components';
 import { Link } from '@woocommerce/components';
 import classnames from 'classnames';
 

From ccda46181eb8ba3a579db69d61e1b9bddc6a73fd Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 18:14:25 +0800
Subject: [PATCH 11/25] Externalize the `Dropdown` component imported from
 `@wordpress/components`.

---
 js/src/external-components/woocommerce/filter-picker/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/src/external-components/woocommerce/filter-picker/index.js b/js/src/external-components/woocommerce/filter-picker/index.js
index a43723b362..c70ceba50b 100644
--- a/js/src/external-components/woocommerce/filter-picker/index.js
+++ b/js/src/external-components/woocommerce/filter-picker/index.js
@@ -8,8 +8,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown } from '@wordpress/components';
-import { Button } from 'extracted/@wordpress/components';
+import { Dropdown, Button } from 'extracted/@wordpress/components';
 import { focus } from '@wordpress/dom';
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';

From 8f5d63aec16cbd38dadfa8383c4d09ec87512f6a Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Wed, 2 Aug 2023 18:14:53 +0800
Subject: [PATCH 12/25] Externalize the `Modal` component imported from
 `@wordpress/components`.

---
 js/src/components/app-modal/index.js                | 2 +-
 js/src/external-components/wordpress/guide/index.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/js/src/components/app-modal/index.js b/js/src/components/app-modal/index.js
index a8da4114b1..0012d47b2f 100644
--- a/js/src/components/app-modal/index.js
+++ b/js/src/components/app-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal } from 'extracted/@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/external-components/wordpress/guide/index.js b/js/src/external-components/wordpress/guide/index.js
index 4e249bfb46..06f06a1f74 100644
--- a/js/src/external-components/wordpress/guide/index.js
+++ b/js/src/external-components/wordpress/guide/index.js
@@ -11,8 +11,11 @@
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Modal } from '@wordpress/components';
-import { Button, KeyboardShortcuts } from 'extracted/@wordpress/components';
+import {
+	Modal,
+	Button,
+	KeyboardShortcuts,
+} from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

From de3a88952bebf5c2c708c7b0e6efa3f83f88fce8 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 15:07:44 +0800
Subject: [PATCH 13/25] Remove an invalid CSS hack that had fixed the Tooltip
 position within a Modal before.

Currently, the minimum supported version of this extension is WP 5.9.
- This hack doesn't work for WP 5.9 and 6.0.
- WP >= 6.1 itself has already fixed this issue, so it's no longer needed.
---
 js/src/css/shared/_gutenberg-components.scss | 21 --------------------
 1 file changed, 21 deletions(-)

diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
index 9c0e39243a..b2109d7908 100644
--- a/js/src/css/shared/_gutenberg-components.scss
+++ b/js/src/css/shared/_gutenberg-components.scss
@@ -62,24 +62,3 @@
 .components-input-control__suffix {
 	margin-right: $grid-unit;
 }
-
-// Hack to fix the Tooltip position of the top-right side close button in a Modal component.
-// The follow up can be found here: https://github.com/woocommerce/google-listings-and-ads/issues/203
-.components-modal {
-	&__screen-overlay {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	&__frame {
-		@include break-small {
-			transform: initial;
-			position: relative;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-}

From c28d4ad83741964d0d4471b20737c0576fc48292 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 16:41:42 +0800
Subject: [PATCH 14/25] Externalize the `CheckboxControl` component imported
 from `@wordpress/components`.

---
 .../google-ads-account-card/terms-modal/index.js          | 2 +-
 .../google-mc-account-card/terms-modal/index.js           | 2 +-
 js/src/components/pre-launch-check-item/index.js          | 8 ++++++--
 js/src/product-feed/product-feed-table-card/index.js      | 2 +-
 .../product-feed/review-request/review-request-modal.js   | 3 +--
 js/src/reports/compare-table-card.js                      | 2 +-
 js/src/settings/disconnect-modal/confirm-modal.js         | 2 +-
 7 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/js/src/components/google-ads-account-card/terms-modal/index.js b/js/src/components/google-ads-account-card/terms-modal/index.js
index f187d4f389..dd4692ffe2 100644
--- a/js/src/components/google-ads-account-card/terms-modal/index.js
+++ b/js/src/components/google-ads-account-card/terms-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 
diff --git a/js/src/components/google-mc-account-card/terms-modal/index.js b/js/src/components/google-mc-account-card/terms-modal/index.js
index c73b781bd9..9023672c27 100644
--- a/js/src/components/google-mc-account-card/terms-modal/index.js
+++ b/js/src/components/google-mc-account-card/terms-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 
diff --git a/js/src/components/pre-launch-check-item/index.js b/js/src/components/pre-launch-check-item/index.js
index e4fde4de0d..30d635737a 100644
--- a/js/src/components/pre-launch-check-item/index.js
+++ b/js/src/components/pre-launch-check-item/index.js
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	CheckboxControl,
+} from 'extracted/@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';
 
diff --git a/js/src/product-feed/product-feed-table-card/index.js b/js/src/product-feed/product-feed-table-card/index.js
index cff7bda694..e69667c3f3 100644
--- a/js/src/product-feed/product-feed-table-card/index.js
+++ b/js/src/product-feed/product-feed-table-card/index.js
@@ -3,8 +3,8 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { CheckboxControl } from '@wordpress/components';
 import {
+	CheckboxControl,
 	Card,
 	CardHeader,
 	CardBody,
diff --git a/js/src/product-feed/review-request/review-request-modal.js b/js/src/product-feed/review-request/review-request-modal.js
index c8bb7b0890..3818ca57cb 100644
--- a/js/src/product-feed/review-request/review-request-modal.js
+++ b/js/src/product-feed/review-request/review-request-modal.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { Notice } from 'extracted/@wordpress/components';
+import { CheckboxControl, Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/reports/compare-table-card.js b/js/src/reports/compare-table-card.js
index d16381e5ea..dfd7b13484 100644
--- a/js/src/reports/compare-table-card.js
+++ b/js/src/reports/compare-table-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { onQueryChange } from '@woocommerce/navigation';
 
 /**
diff --git a/js/src/settings/disconnect-modal/confirm-modal.js b/js/src/settings/disconnect-modal/confirm-modal.js
index a6c4dd4480..599a063c8f 100644
--- a/js/src/settings/disconnect-modal/confirm-modal.js
+++ b/js/src/settings/disconnect-modal/confirm-modal.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**

From b24343bc944eac4daabe15c3acb54d2d0c6f1e33 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 17:50:36 +0800
Subject: [PATCH 15/25] Externalize the `RadioControl` component imported from
 `@wordpress/components`.

---
 js/src/components/app-radio-content-control/index.js      | 2 +-
 js/src/components/app-radio-content-control/index.scss    | 1 +
 .../phone-number-card/edit-phone-number-content.js        | 8 ++++++--
 .../choose-audience-section/choose-audience-section.js    | 2 +-
 js/src/css/shared/_gutenberg-components.scss              | 5 -----
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/js/src/components/app-radio-content-control/index.js b/js/src/components/app-radio-content-control/index.js
index 829d01c92d..b0f5e763da 100644
--- a/js/src/components/app-radio-content-control/index.js
+++ b/js/src/components/app-radio-content-control/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { RadioControl } from '@wordpress/components';
+import { RadioControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/app-radio-content-control/index.scss b/js/src/components/app-radio-content-control/index.scss
index c611fa6025..3f016e69cd 100644
--- a/js/src/components/app-radio-content-control/index.scss
+++ b/js/src/components/app-radio-content-control/index.scss
@@ -10,6 +10,7 @@
 	// by placing them on the same brid.
 	.components-radio-control,
 	.components-base-control__field,
+	.components-base-control__field .components-flex,
 	.components-radio-control__option {
 		display: contents;
 	}
diff --git a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
index 9f8733492b..2a2bc5e71f 100644
--- a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
+++ b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
@@ -4,8 +4,12 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { RadioControl } from '@wordpress/components';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import {
+	Flex,
+	FlexItem,
+	FlexBlock,
+	RadioControl,
+} from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/free-listings/choose-audience-section/choose-audience-section.js b/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
index cd74fb6085..a302d44f1a 100644
--- a/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
+++ b/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { RadioControl } from '@wordpress/components';
+import { RadioControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
index b2109d7908..1770ada4d7 100644
--- a/js/src/css/shared/_gutenberg-components.scss
+++ b/js/src/css/shared/_gutenberg-components.scss
@@ -53,11 +53,6 @@
 	}
 }
 
-// hack to fix radio button selected style bug caused by woocommerce-admin.
-.components-radio-control__input[type="radio"]:checked::before {
-	border: none;
-}
-
 // hack to fix InputControl suffix's empty right margin.
 .components-input-control__suffix {
 	margin-right: $grid-unit;

From 30a8a3cad45a37f66184cf6965fc02127c3a877a Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 18:26:00 +0800
Subject: [PATCH 16/25] Externalize the `SelectControl` component imported from
 `@wordpress/components`.

---
 js/src/components/app-select-control/index.js          |  2 +-
 .../paid-ads/asset-group/asset-group-card.js           |  2 +-
 js/src/components/paid-ads/audience-section.js         |  2 +-
 js/src/components/paid-ads/audience-section.scss       | 10 ----------
 4 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/js/src/components/app-select-control/index.js b/js/src/components/app-select-control/index.js
index a0233d4905..5db4748de9 100644
--- a/js/src/components/app-select-control/index.js
+++ b/js/src/components/app-select-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { SelectControl } from 'extracted/@wordpress/components';
 import classNames from 'classnames';
 
 /**
diff --git a/js/src/components/paid-ads/asset-group/asset-group-card.js b/js/src/components/paid-ads/asset-group/asset-group-card.js
index 486e5667c0..4db479f87b 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-card.js
+++ b/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 '@wordpress/components';
+import { SelectControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/audience-section.js b/js/src/components/paid-ads/audience-section.js
index f5ce860dc4..f24be8d216 100644
--- a/js/src/components/paid-ads/audience-section.js
+++ b/js/src/components/paid-ads/audience-section.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/paid-ads/audience-section.scss b/js/src/components/paid-ads/audience-section.scss
index d32c842c4d..565a4bc70f 100644
--- a/js/src/components/paid-ads/audience-section.scss
+++ b/js/src/components/paid-ads/audience-section.scss
@@ -3,20 +3,10 @@
 	// Repeat selector to make it higher priority.
 	.components-input-control__container.components-input-control__container {
 		.components-select-control__input {
-			min-height: $gla-size-control-height;
 			padding-left: $grid-unit-20;
 		}
 	}
 
-	// Adjust labels of <SelectControl> imported from @wordpress/components.
-	// Repeat selector to make it higher priority.
-	.components-base-control .components-select-control {
-		.components-input-control__label {
-			padding-bottom: 0;
-			margin-bottom: $grid-unit-10;
-		}
-	}
-
 	// Adjust help text of <SelectControl> imported from @wordpress/components.
 	.components-base-control__help {
 		margin: 0;

From 9617127bf6650f2663aa553c509badd53dacaa76 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 18:35:26 +0800
Subject: [PATCH 17/25] Externalize the `ToggleControl` component imported from
 `@wordpress/components`.

---
 js/src/components/app-standalone-toggle-control/index.js   | 2 +-
 js/src/components/app-standalone-toggle-control/index.scss | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/src/components/app-standalone-toggle-control/index.js b/js/src/components/app-standalone-toggle-control/index.js
index 75ecd2a8c7..debeee575d 100644
--- a/js/src/components/app-standalone-toggle-control/index.js
+++ b/js/src/components/app-standalone-toggle-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/components/app-standalone-toggle-control/index.scss b/js/src/components/app-standalone-toggle-control/index.scss
index 79aa17ecc2..4b2fe3e4f5 100644
--- a/js/src/components/app-standalone-toggle-control/index.scss
+++ b/js/src/components/app-standalone-toggle-control/index.scss
@@ -4,10 +4,12 @@
 	display: inline-block;
 
 	// remove the margins specified in ToggleControl component.
+	.components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-toggle-control {
 		.components-base-control__field {
-			margin-bottom: 0;
-
 			.components-form-toggle {
 				margin-right: 0;
 

From fe5493593480ffc3966a405328c73dc9bb904ff6 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 18:44:01 +0800
Subject: [PATCH 18/25] Externalize the `__experimentalInputControl` component
 imported from `@wordpress/components`.

---
 js/src/components/app-input-control/index.js | 2 +-
 js/src/css/shared/_gutenberg-components.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/js/src/components/app-input-control/index.js b/js/src/components/app-input-control/index.js
index 4cf4b0a9a1..6d3b69f17c 100644
--- a/js/src/components/app-input-control/index.js
+++ b/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 '@wordpress/components';
+import { __experimentalInputControl as InputControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
index 1770ada4d7..b0c8285d1c 100644
--- a/js/src/css/shared/_gutenberg-components.scss
+++ b/js/src/css/shared/_gutenberg-components.scss
@@ -51,9 +51,9 @@
 			font-size: inherit;
 		}
 	}
-}
 
-// hack to fix InputControl suffix's empty right margin.
-.components-input-control__suffix {
-	margin-right: $grid-unit;
+	// Adjust InputControl suffix's empty right margin.
+	.components-input-control__suffix {
+		margin-right: $grid-unit;
+	}
 }

From 3343f91b9ba2e80b6d2579128e3ff9654d132a3c Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Fri, 4 Aug 2023 18:47:57 +0800
Subject: [PATCH 19/25] Update the .externalized.json file

---
 .externalized.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.externalized.json b/.externalized.json
index e632780dc7..c1b7cae992 100644
--- a/.externalized.json
+++ b/.externalized.json
@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
\ No newline at end of file
+["@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"]
\ No newline at end of file

From 11de1129428e6a3ce24b36f848bc43399bb69576 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Mon, 14 Aug 2023 17:37:34 +0800
Subject: [PATCH 20/25] Opt-in `@wordpress/components` and `@wordpress/compose`
 to import from the external source of DEWP.

---
 webpack.config.js | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 53cdf2dd28..df0d42e077 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,3 @@
-const webpack = require( 'webpack' );
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 const { hasArgInCLI } = require( '@wordpress/scripts/utils' );
 const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
@@ -22,12 +21,6 @@ const requestToExternal = ( request ) => {
 		return defaultRequestToExternalWP( request );
 	}
 	const bundledPackages = [
-		// Opt-out WordPress packages.
-		// The following default externals are bundled for compatibility with older versions of WP
-		// Note CSS for specific components is bundled via admin/assets/src/index.scss
-		// WP 5.4 is the min version for <Card* />, <TabPanel />
-		'@wordpress/compose',
-		'@wordpress/components',
 		// Opt-out WooCommerce packages.
 		'@woocommerce/currency',
 		'@woocommerce/date',
@@ -118,20 +111,6 @@ const webpackConfig = {
 			requestToExternal,
 			requestToHandle,
 		} ),
-		/**
-		 * Automatic polyfills for native node.js modules were removed from webpack v5.
-		 * And `@wordpress/components` below version 16.x depends on `@wordpress/compose`,
-		 * which directly accesses `process.env`.
-		 * Ref: https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/compose/src/hooks/use-reduced-motion/index.js#L21
-		 *
-		 * So the fallback is required here.
-		 * It may be possible to remove this fallback
-		 * when `@wordpress/components` is upgraded above 17.0.0+,
-		 * or when it is removed from the `requestToExternal` function above.
-		 */
-		new webpack.ProvidePlugin( {
-			process: 'process/browser',
-		} ),
 	],
 	entry: {
 		index: path.resolve( process.cwd(), 'js/src', 'index.js' ),

From a8ca7094fe4b5d18f5188785a58752c4c4fcd86a Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Mon, 14 Aug 2023 17:39:51 +0800
Subject: [PATCH 21/25] Remove a compatible workaround for `DatePicker` as it
 has been fixed since WC 7.2

---
 js/src/css/shared/_gutenberg-components.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
index b0c8285d1c..60732f4e9f 100644
--- a/js/src/css/shared/_gutenberg-components.scss
+++ b/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

From c2d385858258a97a78a3640e439dcee2a5873f0b Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Mon, 14 Aug 2023 17:56:52 +0800
Subject: [PATCH 22/25] Remove the `extracted/` prefix from all imports
 `@wordpress/components`.

---
 js/src/attribute-mapping/attribute-mapping-sync.js         | 2 +-
 js/src/attribute-mapping/attribute-mapping-table.js        | 7 +------
 js/src/components/account-card/index.js                    | 2 +-
 js/src/components/app-button/index.js                      | 2 +-
 js/src/components/app-input-control/index.js               | 2 +-
 js/src/components/app-modal/index.js                       | 2 +-
 js/src/components/app-radio-content-control/index.js       | 2 +-
 js/src/components/app-select-control/index.js              | 2 +-
 js/src/components/app-standalone-toggle-control/index.js   | 2 +-
 js/src/components/app-sub-nav/index.js                     | 2 +-
 js/src/components/app-tab-nav/index.js                     | 2 +-
 js/src/components/app-tooltip/index.js                     | 2 +-
 js/src/components/connected-icon-label/index.js            | 2 +-
 .../phone-number-card/edit-phone-number-content.js         | 7 +------
 .../phone-number-card/phone-number-card.js                 | 2 +-
 .../phone-number-card/verification-code-control.js         | 2 +-
 .../phone-number-card/verify-phone-number-content.js       | 3 +--
 .../components/contact-information/store-address-card.js   | 2 +-
 js/src/components/different-currency-notice.js             | 2 +-
 js/src/components/faqs-panel/index.js                      | 2 +-
 .../choose-audience-section/choose-audience-section.js     | 2 +-
 .../google-ads-account-card/connect-ads/index.js           | 2 +-
 .../connected-google-ads-account-card.js                   | 2 +-
 .../google-ads-account-card/terms-modal/index.js           | 2 +-
 .../components/google-mc-account-card/connect-mc/index.js  | 2 +-
 .../google-mc-account-card/reclaim-url-card/index.js       | 2 +-
 .../google-mc-account-card/switch-url-card/index.js        | 2 +-
 .../components/google-mc-account-card/terms-modal/index.js | 2 +-
 js/src/components/help-popover/index.js                    | 2 +-
 js/src/components/paid-ads/asset-group/asset-group-card.js | 2 +-
 .../components/paid-ads/asset-group/asset-group-section.js | 2 +-
 js/src/components/paid-ads/asset-group/final-url-card.js   | 2 +-
 js/src/components/paid-ads/assetSpecs.js                   | 2 +-
 js/src/components/paid-ads/audience-section.js             | 2 +-
 js/src/components/paid-ads/billing-card/billing-card.js    | 2 +-
 .../components/paid-ads/billing-card/billing-setup-card.js | 2 +-
 .../paid-ads/budget-section/budget-recommendation/index.js | 2 +-
 .../paid-ads/campaign-preview/campaign-preview-card.js     | 2 +-
 .../components/paid-ads/campaign-preview/mockup-search.js  | 2 +-
 js/src/components/pre-launch-check-item/index.js           | 2 +-
 js/src/components/tree-select-control/options.js           | 2 +-
 js/src/dashboard/summary-section/summary-card.js           | 2 +-
 .../woocommerce/compare-filter/index.js                    | 2 +-
 .../external-components/woocommerce/filter-picker/index.js | 2 +-
 .../external-components/wordpress/guide/finish-button.js   | 2 +-
 js/src/external-components/wordpress/guide/index.js        | 6 +-----
 js/src/external-components/wordpress/guide/page-control.js | 2 +-
 js/src/get-started-page/benefits-card/index.js             | 2 +-
 js/src/get-started-page/customer-quotes-card/index.js      | 7 +------
 js/src/get-started-page/features-card/index.js             | 7 +------
 js/src/get-started-page/get-started-card/index.js          | 2 +-
 .../get-started-page/get-started-with-video-card/index.js  | 7 +------
 js/src/get-started-page/unsupported-notices/index.js       | 2 +-
 js/src/product-feed/issues-table-card/index.js             | 2 +-
 js/src/product-feed/issues-table-card/issues-solved.js     | 2 +-
 js/src/product-feed/issues-table-card/issues-table.js      | 2 +-
 .../product-feed-table-card/edit-visibility-action.js      | 2 +-
 js/src/product-feed/product-feed-table-card/index.js       | 2 +-
 js/src/product-feed/product-statistics/index.js            | 2 +-
 .../product-feed/product-statistics/status-box/status.js   | 2 +-
 js/src/product-feed/review-request/review-request-modal.js | 2 +-
 .../product-feed/review-request/review-request-notice.js   | 2 +-
 js/src/reports/compare-table-card.js                       | 2 +-
 js/src/settings/disconnect-modal/confirm-modal.js          | 2 +-
 js/src/settings/edit-store-address.js                      | 2 +-
 js/src/settings/linked-accounts.js                         | 2 +-
 .../disconnect-google-account-card.js                      | 2 +-
 .../setup-paid-ads/paid-ads-features-section.js            | 2 +-
 .../setup-paid-ads/product-feed-status-section.js          | 2 +-
 .../setup-stepper/setup-paid-ads/setup-paid-ads.js         | 2 +-
 js/src/wcdl/section/card/body/index.js                     | 2 +-
 js/src/wcdl/section/card/footer/index.js                   | 2 +-
 js/src/wcdl/section/card/index.js                          | 2 +-
 73 files changed, 73 insertions(+), 103 deletions(-)

diff --git a/js/src/attribute-mapping/attribute-mapping-sync.js b/js/src/attribute-mapping/attribute-mapping-sync.js
index 574c66324e..7294988a96 100644
--- a/js/src/attribute-mapping/attribute-mapping-sync.js
+++ b/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';
 
 /**
diff --git a/js/src/attribute-mapping/attribute-mapping-table.js b/js/src/attribute-mapping/attribute-mapping-table.js
index 63f654858b..20244e78ee 100644
--- a/js/src/attribute-mapping/attribute-mapping-table.js
+++ b/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';
 
diff --git a/js/src/components/account-card/index.js b/js/src/components/account-card/index.js
index 5df1eb3fa2..23468d6e57 100644
--- a/js/src/components/account-card/index.js
+++ b/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';
 
diff --git a/js/src/components/app-button/index.js b/js/src/components/app-button/index.js
index 1bfe20b44a..b87d3a7e12 100644
--- a/js/src/components/app-button/index.js
+++ b/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';
diff --git a/js/src/components/app-input-control/index.js b/js/src/components/app-input-control/index.js
index 6d3b69f17c..4cf4b0a9a1 100644
--- a/js/src/components/app-input-control/index.js
+++ b/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
diff --git a/js/src/components/app-modal/index.js b/js/src/components/app-modal/index.js
index 0012d47b2f..a8da4114b1 100644
--- a/js/src/components/app-modal/index.js
+++ b/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';
 
 /**
diff --git a/js/src/components/app-radio-content-control/index.js b/js/src/components/app-radio-content-control/index.js
index b0f5e763da..829d01c92d 100644
--- a/js/src/components/app-radio-content-control/index.js
+++ b/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
diff --git a/js/src/components/app-select-control/index.js b/js/src/components/app-select-control/index.js
index 5db4748de9..a0233d4905 100644
--- a/js/src/components/app-select-control/index.js
+++ b/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';
 
 /**
diff --git a/js/src/components/app-standalone-toggle-control/index.js b/js/src/components/app-standalone-toggle-control/index.js
index debeee575d..75ecd2a8c7 100644
--- a/js/src/components/app-standalone-toggle-control/index.js
+++ b/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
diff --git a/js/src/components/app-sub-nav/index.js b/js/src/components/app-sub-nav/index.js
index e1b4ee2179..114694b60e 100644
--- a/js/src/components/app-sub-nav/index.js
+++ b/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';
 
diff --git a/js/src/components/app-tab-nav/index.js b/js/src/components/app-tab-nav/index.js
index a68421bde5..3fd7b58f75 100644
--- a/js/src/components/app-tab-nav/index.js
+++ b/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';
 
diff --git a/js/src/components/app-tooltip/index.js b/js/src/components/app-tooltip/index.js
index 76fbb7c454..44f9822fc9 100644
--- a/js/src/components/app-tooltip/index.js
+++ b/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';
 
 /**
diff --git a/js/src/components/connected-icon-label/index.js b/js/src/components/connected-icon-label/index.js
index 5fc7662bd8..c25836ede5 100644
--- a/js/src/components/connected-icon-label/index.js
+++ b/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';
 
 /**
diff --git a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
index 2a2bc5e71f..90f5652000 100644
--- a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
+++ b/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
diff --git a/js/src/components/contact-information/phone-number-card/phone-number-card.js b/js/src/components/contact-information/phone-number-card/phone-number-card.js
index 1f241549df..8c9cd3faf5 100644
--- a/js/src/components/contact-information/phone-number-card/phone-number-card.js
+++ b/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';
 
 /**
diff --git a/js/src/components/contact-information/phone-number-card/verification-code-control.js b/js/src/components/contact-information/phone-number-card/verification-code-control.js
index e54d78f409..75758b6e41 100644
--- a/js/src/components/contact-information/phone-number-card/verification-code-control.js
+++ b/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
diff --git a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
index 15d8d1379f..4e089ed911 100644
--- a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
+++ b/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
diff --git a/js/src/components/contact-information/store-address-card.js b/js/src/components/contact-information/store-address-card.js
index 7ad2998226..609d060ab0 100644
--- a/js/src/components/contact-information/store-address-card.js
+++ b/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';
diff --git a/js/src/components/different-currency-notice.js b/js/src/components/different-currency-notice.js
index 4e93418c5e..9a6b5ab891 100644
--- a/js/src/components/different-currency-notice.js
+++ b/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';
 
 /**
diff --git a/js/src/components/faqs-panel/index.js b/js/src/components/faqs-panel/index.js
index 1a2adb8cb1..49cb1f98de 100644
--- a/js/src/components/faqs-panel/index.js
+++ b/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';
 
diff --git a/js/src/components/free-listings/choose-audience-section/choose-audience-section.js b/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
index a302d44f1a..cd74fb6085 100644
--- a/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
+++ b/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';
 
diff --git a/js/src/components/google-ads-account-card/connect-ads/index.js b/js/src/components/google-ads-account-card/connect-ads/index.js
index 5a48ea05d8..6926d4d3be 100644
--- a/js/src/components/google-ads-account-card/connect-ads/index.js
+++ b/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
diff --git a/js/src/components/google-ads-account-card/connected-google-ads-account-card.js b/js/src/components/google-ads-account-card/connected-google-ads-account-card.js
index 6419e94b18..26f2e6fe7a 100644
--- a/js/src/components/google-ads-account-card/connected-google-ads-account-card.js
+++ b/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
diff --git a/js/src/components/google-ads-account-card/terms-modal/index.js b/js/src/components/google-ads-account-card/terms-modal/index.js
index dd4692ffe2..f187d4f389 100644
--- a/js/src/components/google-ads-account-card/terms-modal/index.js
+++ b/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';
 
diff --git a/js/src/components/google-mc-account-card/connect-mc/index.js b/js/src/components/google-mc-account-card/connect-mc/index.js
index 81d57f1360..f5094a4e2b 100644
--- a/js/src/components/google-mc-account-card/connect-mc/index.js
+++ b/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';
 
diff --git a/js/src/components/google-mc-account-card/reclaim-url-card/index.js b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
index 4ec5a65da0..2503bf2122 100644
--- a/js/src/components/google-mc-account-card/reclaim-url-card/index.js
+++ b/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.
diff --git a/js/src/components/google-mc-account-card/switch-url-card/index.js b/js/src/components/google-mc-account-card/switch-url-card/index.js
index dc5d8a8735..aca8577fb0 100644
--- a/js/src/components/google-mc-account-card/switch-url-card/index.js
+++ b/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
diff --git a/js/src/components/google-mc-account-card/terms-modal/index.js b/js/src/components/google-mc-account-card/terms-modal/index.js
index 9023672c27..c73b781bd9 100644
--- a/js/src/components/google-mc-account-card/terms-modal/index.js
+++ b/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';
 
diff --git a/js/src/components/help-popover/index.js b/js/src/components/help-popover/index.js
index f31d8f3a13..bf9c701545 100644
--- a/js/src/components/help-popover/index.js
+++ b/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';
diff --git a/js/src/components/paid-ads/asset-group/asset-group-card.js b/js/src/components/paid-ads/asset-group/asset-group-card.js
index 4db479f87b..486e5667c0 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-card.js
+++ b/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
diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.js b/js/src/components/paid-ads/asset-group/asset-group-section.js
index be6a1867a5..d836655806 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-section.js
+++ b/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
diff --git a/js/src/components/paid-ads/asset-group/final-url-card.js b/js/src/components/paid-ads/asset-group/final-url-card.js
index fb2ff1645a..fea2c09394 100644
--- a/js/src/components/paid-ads/asset-group/final-url-card.js
+++ b/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
diff --git a/js/src/components/paid-ads/assetSpecs.js b/js/src/components/paid-ads/assetSpecs.js
index 5e51c832c4..df8eda5dde 100644
--- a/js/src/components/paid-ads/assetSpecs.js
+++ b/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';
 
 /**
diff --git a/js/src/components/paid-ads/audience-section.js b/js/src/components/paid-ads/audience-section.js
index f24be8d216..f5ce860dc4 100644
--- a/js/src/components/paid-ads/audience-section.js
+++ b/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
diff --git a/js/src/components/paid-ads/billing-card/billing-card.js b/js/src/components/paid-ads/billing-card/billing-card.js
index c58c90ac73..d441a37def 100644
--- a/js/src/components/paid-ads/billing-card/billing-card.js
+++ b/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
diff --git a/js/src/components/paid-ads/billing-card/billing-setup-card.js b/js/src/components/paid-ads/billing-card/billing-setup-card.js
index 463065cd29..ddcaf96f8b 100644
--- a/js/src/components/paid-ads/billing-card/billing-setup-card.js
+++ b/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
diff --git a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js b/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
index aafbd1fbd8..450cf48273 100644
--- a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
+++ b/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';
 
 /**
diff --git a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js b/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
index 6a35e28b1f..ca9bf85c1c 100644
--- a/js/src/components/paid-ads/campaign-preview/campaign-preview-card.js
+++ b/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';
 
diff --git a/js/src/components/paid-ads/campaign-preview/mockup-search.js b/js/src/components/paid-ads/campaign-preview/mockup-search.js
index f99ebda02c..bdf2b04d2b 100644
--- a/js/src/components/paid-ads/campaign-preview/mockup-search.js
+++ b/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
diff --git a/js/src/components/pre-launch-check-item/index.js b/js/src/components/pre-launch-check-item/index.js
index 30d635737a..f3878c7025 100644
--- a/js/src/components/pre-launch-check-item/index.js
+++ b/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';
 
diff --git a/js/src/components/tree-select-control/options.js b/js/src/components/tree-select-control/options.js
index 0a40c0079f..0eb70d8b4a 100644
--- a/js/src/components/tree-select-control/options.js
+++ b/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';
 
diff --git a/js/src/dashboard/summary-section/summary-card.js b/js/src/dashboard/summary-section/summary-card.js
index e838ebbbbb..a63cf23840 100644
--- a/js/src/dashboard/summary-section/summary-card.js
+++ b/js/src/dashboard/summary-section/summary-card.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card, CardHeader } from 'extracted/@wordpress/components';
+import { Card, CardHeader } from '@wordpress/components';
 /**
  * Internal dependencies
  */
diff --git a/js/src/external-components/woocommerce/compare-filter/index.js b/js/src/external-components/woocommerce/compare-filter/index.js
index 64c9157bb2..f75d12ddaa 100644
--- a/js/src/external-components/woocommerce/compare-filter/index.js
+++ b/js/src/external-components/woocommerce/compare-filter/index.js
@@ -15,7 +15,7 @@ import {
 	CardFooter,
 	CardHeader,
 	Button,
-} from 'extracted/@wordpress/components';
+} from '@wordpress/components';
 import { isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
diff --git a/js/src/external-components/woocommerce/filter-picker/index.js b/js/src/external-components/woocommerce/filter-picker/index.js
index c70ceba50b..2ba5a422d9 100644
--- a/js/src/external-components/woocommerce/filter-picker/index.js
+++ b/js/src/external-components/woocommerce/filter-picker/index.js
@@ -8,7 +8,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, Button } from 'extracted/@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';
diff --git a/js/src/external-components/wordpress/guide/finish-button.js b/js/src/external-components/wordpress/guide/finish-button.js
index 05c0dabf30..d2dc41f448 100644
--- a/js/src/external-components/wordpress/guide/finish-button.js
+++ b/js/src/external-components/wordpress/guide/finish-button.js
@@ -9,7 +9,7 @@
  * External dependencies
  */
 import { useRef, useLayoutEffect } from '@wordpress/element';
-import { Button } from 'extracted/@wordpress/components';
+import { Button } from '@wordpress/components';
 
 export default function FinishButton( props ) {
 	const ref = useRef();
diff --git a/js/src/external-components/wordpress/guide/index.js b/js/src/external-components/wordpress/guide/index.js
index 06f06a1f74..e09adb3207 100644
--- a/js/src/external-components/wordpress/guide/index.js
+++ b/js/src/external-components/wordpress/guide/index.js
@@ -11,11 +11,7 @@
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	Modal,
-	Button,
-	KeyboardShortcuts,
-} from 'extracted/@wordpress/components';
+import { Modal, Button, KeyboardShortcuts } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/external-components/wordpress/guide/page-control.js b/js/src/external-components/wordpress/guide/page-control.js
index 26cc9f0d29..af52611431 100644
--- a/js/src/external-components/wordpress/guide/page-control.js
+++ b/js/src/external-components/wordpress/guide/page-control.js
@@ -10,7 +10,7 @@
  */
 import { times } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from 'extracted/@wordpress/components';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/get-started-page/benefits-card/index.js b/js/src/get-started-page/benefits-card/index.js
index af7bab6c1c..5a28b64e62 100644
--- a/js/src/get-started-page/benefits-card/index.js
+++ b/js/src/get-started-page/benefits-card/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardBody, FlexItem } from 'extracted/@wordpress/components';
+import { Card, CardBody, FlexItem } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/customer-quotes-card/index.js b/js/src/get-started-page/customer-quotes-card/index.js
index 81307b431d..406efa0e17 100644
--- a/js/src/get-started-page/customer-quotes-card/index.js
+++ b/js/src/get-started-page/customer-quotes-card/index.js
@@ -2,12 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Flex,
-	FlexBlock,
-	Card,
-	CardHeader,
-} from 'extracted/@wordpress/components';
+import { Flex, FlexBlock, Card, CardHeader } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/get-started-page/features-card/index.js b/js/src/get-started-page/features-card/index.js
index 2cbb1ba930..0e21a3035c 100644
--- a/js/src/get-started-page/features-card/index.js
+++ b/js/src/get-started-page/features-card/index.js
@@ -2,12 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Flex,
-	FlexBlock,
-	Card,
-	CardHeader,
-} from 'extracted/@wordpress/components';
+import { Flex, FlexBlock, Card, CardHeader } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
diff --git a/js/src/get-started-page/get-started-card/index.js b/js/src/get-started-page/get-started-card/index.js
index 5cce151ea7..54404956dc 100644
--- a/js/src/get-started-page/get-started-card/index.js
+++ b/js/src/get-started-page/get-started-card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { FlexItem, Card, CardBody } from 'extracted/@wordpress/components';
+import { FlexItem, Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
index 1f9ffe6c13..66444a8d2a 100644
--- a/js/src/get-started-page/get-started-with-video-card/index.js
+++ b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	FlexBlock,
-	Card,
-	CardBody,
-	Tip,
-} from 'extracted/@wordpress/components';
+import { FlexBlock, Card, CardBody, Tip } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
diff --git a/js/src/get-started-page/unsupported-notices/index.js b/js/src/get-started-page/unsupported-notices/index.js
index a2847b5db1..c5102eca8b 100644
--- a/js/src/get-started-page/unsupported-notices/index.js
+++ b/js/src/get-started-page/unsupported-notices/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice, Icon } from 'extracted/@wordpress/components';
+import { Notice, Icon } from '@wordpress/components';
 import { external as externalIcon } from '@wordpress/icons';
 import { Link } from '@woocommerce/components';
 import { createInterpolateElement } from '@wordpress/element';
diff --git a/js/src/product-feed/issues-table-card/index.js b/js/src/product-feed/issues-table-card/index.js
index b765f8911f..73c23708cc 100644
--- a/js/src/product-feed/issues-table-card/index.js
+++ b/js/src/product-feed/issues-table-card/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Card, CardHeader } from 'extracted/@wordpress/components';
+import { Card, CardHeader } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/product-feed/issues-table-card/issues-solved.js b/js/src/product-feed/issues-table-card/issues-solved.js
index d7d8bae71c..84ae6e9ae8 100644
--- a/js/src/product-feed/issues-table-card/issues-solved.js
+++ b/js/src/product-feed/issues-table-card/issues-solved.js
@@ -3,7 +3,7 @@
  */
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Dashicon } from 'extracted/@wordpress/components';
+import { Dashicon } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/product-feed/issues-table-card/issues-table.js b/js/src/product-feed/issues-table-card/issues-table.js
index 38e969d241..36b3462798 100644
--- a/js/src/product-feed/issues-table-card/issues-table.js
+++ b/js/src/product-feed/issues-table-card/issues-table.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardBody, CardFooter } from 'extracted/@wordpress/components';
+import { CardBody, CardFooter } from '@wordpress/components';
 import { Pagination, TablePlaceholder } from '@woocommerce/components';
 
 /**
diff --git a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
index 5be0ab8bff..d0d7e60e02 100644
--- a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
+++ b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Icon } from 'extracted/@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { SelectControl } from '@woocommerce/components';
 import { edit as editIcon } from '@wordpress/icons';
 
diff --git a/js/src/product-feed/product-feed-table-card/index.js b/js/src/product-feed/product-feed-table-card/index.js
index e69667c3f3..bfb2ed47e8 100644
--- a/js/src/product-feed/product-feed-table-card/index.js
+++ b/js/src/product-feed/product-feed-table-card/index.js
@@ -9,7 +9,7 @@ import {
 	CardHeader,
 	CardBody,
 	CardFooter,
-} from 'extracted/@wordpress/components';
+} from '@wordpress/components';
 import {
 	EmptyTable,
 	Pagination,
diff --git a/js/src/product-feed/product-statistics/index.js b/js/src/product-feed/product-statistics/index.js
index e22a3491eb..16ce38133f 100644
--- a/js/src/product-feed/product-statistics/index.js
+++ b/js/src/product-feed/product-statistics/index.js
@@ -8,7 +8,7 @@ import {
 	CardHeader,
 	CardBody,
 	CardFooter,
-} from 'extracted/@wordpress/components';
+} from '@wordpress/components';
 
 import {
 	SummaryList,
diff --git a/js/src/product-feed/product-statistics/status-box/status.js b/js/src/product-feed/product-statistics/status-box/status.js
index 89c368a873..197276e19d 100644
--- a/js/src/product-feed/product-statistics/status-box/status.js
+++ b/js/src/product-feed/product-statistics/status-box/status.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Flex, FlexItem } from 'extracted/@wordpress/components';
+import { Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Renders a status line. With a title, an icon and a description for the status
diff --git a/js/src/product-feed/review-request/review-request-modal.js b/js/src/product-feed/review-request/review-request-modal.js
index 3818ca57cb..a46171d43f 100644
--- a/js/src/product-feed/review-request/review-request-modal.js
+++ b/js/src/product-feed/review-request/review-request-modal.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, Notice } from 'extracted/@wordpress/components';
+import { CheckboxControl, Notice } from '@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 
diff --git a/js/src/product-feed/review-request/review-request-notice.js b/js/src/product-feed/review-request/review-request-notice.js
index b5cd4159d0..69e5f4762a 100644
--- a/js/src/product-feed/review-request/review-request-notice.js
+++ b/js/src/product-feed/review-request/review-request-notice.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { format as formatDate } from '@wordpress/date';
-import { Flex, FlexItem } from 'extracted/@wordpress/components';
+import { Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/reports/compare-table-card.js b/js/src/reports/compare-table-card.js
index dfd7b13484..d16381e5ea 100644
--- a/js/src/reports/compare-table-card.js
+++ b/js/src/reports/compare-table-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { onQueryChange } from '@woocommerce/navigation';
 
 /**
diff --git a/js/src/settings/disconnect-modal/confirm-modal.js b/js/src/settings/disconnect-modal/confirm-modal.js
index 599a063c8f..a6c4dd4480 100644
--- a/js/src/settings/disconnect-modal/confirm-modal.js
+++ b/js/src/settings/disconnect-modal/confirm-modal.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from 'extracted/@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
diff --git a/js/src/settings/edit-store-address.js b/js/src/settings/edit-store-address.js
index 1396bfb44d..d34068b474 100644
--- a/js/src/settings/edit-store-address.js
+++ b/js/src/settings/edit-store-address.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { getHistory } from '@woocommerce/navigation';
 import { useState } from '@wordpress/element';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/settings/linked-accounts.js b/js/src/settings/linked-accounts.js
index bea46bf322..c0c027eab5 100644
--- a/js/src/settings/linked-accounts.js
+++ b/js/src/settings/linked-accounts.js
@@ -3,7 +3,7 @@
  */
 import { queueRecordEvent } from '@woocommerce/tracks';
 import { __ } from '@wordpress/i18n';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
diff --git a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
index bce9db72dc..1c79ca0aef 100644
--- a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
+++ b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CardDivider, Notice } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from '@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { getNewPath } from '@woocommerce/navigation';
 
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
index 1e8eb3704e..14099026e6 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Pill } from '@woocommerce/components';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
 import GridiconGift from 'gridicons/dist/gift';
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
index 3a4746b13d..628d730804 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js
@@ -3,7 +3,7 @@
  */
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
 /**
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
index cae107d92a..8bc19b9dfa 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
+++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { select } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { Flex } from 'extracted/@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { noop, merge } from 'lodash';
 
 /**
diff --git a/js/src/wcdl/section/card/body/index.js b/js/src/wcdl/section/card/body/index.js
index 8377e3b960..a9dd0e3e17 100644
--- a/js/src/wcdl/section/card/body/index.js
+++ b/js/src/wcdl/section/card/body/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardBody } from 'extracted/@wordpress/components';
+import { CardBody } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**
diff --git a/js/src/wcdl/section/card/footer/index.js b/js/src/wcdl/section/card/footer/index.js
index 0cac31e1c7..b1fdc14183 100644
--- a/js/src/wcdl/section/card/footer/index.js
+++ b/js/src/wcdl/section/card/footer/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CardFooter } from 'extracted/@wordpress/components';
+import { CardFooter } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/js/src/wcdl/section/card/index.js b/js/src/wcdl/section/card/index.js
index f1dcd6c64a..45ddb3c8a5 100644
--- a/js/src/wcdl/section/card/index.js
+++ b/js/src/wcdl/section/card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Card as WPCard } from 'extracted/@wordpress/components';
+import { Card as WPCard } from '@wordpress/components';
 
 /**
  * Internal dependencies

From 2ba9391cd0002f80835d016101f3a9d74f03b818 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Mon, 14 Aug 2023 18:02:04 +0800
Subject: [PATCH 23/25] Update the .externalized.json file

---
 .externalized.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.externalized.json b/.externalized.json
index c1b7cae992..f4a68c1e60 100644
--- a/.externalized.json
+++ b/.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"]
\ No newline at end of file
+["@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"]
\ No newline at end of file

From 02e403df4dfce9d658dd1518c42094525e804a2e Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Mon, 14 Aug 2023 18:04:51 +0800
Subject: [PATCH 24/25] Rebalance the max size config of bundlewatch for each
 non-wildcard file to 1.2 times.

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 360cd9ff51..29d049b546 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
 			},
 			{
 				"path": "./js/build/index.js",
-				"maxSize": "248 kB"
+				"maxSize": "209.08 kB"
 			},
 			{
 				"path": "./js/build/*.css",
@@ -148,11 +148,11 @@
 			},
 			{
 				"path": "./js/build/index.css",
-				"maxSize": "15.4 kB"
+				"maxSize": "12.55 kB"
 			},
 			{
 				"path": "./google-listings-and-ads.zip",
-				"maxSize": "11.8 mB",
+				"maxSize": "8.48 mB",
 				"compression": "none"
 			}
 		],

From 6ea078679febb1afce2642540fc87299176d35a2 Mon Sep 17 00:00:00 2001
From: Eason Su <eason.su.tw@gmail.com>
Date: Tue, 15 Aug 2023 11:07:26 +0800
Subject: [PATCH 25/25] Revert "Prevent the "import/no-duplicates" warning for
 the externalization process"

This reverts commit 2d0e0d63ab35e7f05b108889464d0d0904080031.
---
 .eslintrc.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d269d26787..4e6ab961b0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,15 +43,6 @@ module.exports = {
 				additionalHooks: 'useSelect',
 			},
 		],
-		// When a file imports from both `@wordpress/components` and `extracted/@wordpress/components`
-		// at the same time, it would get the "no-duplicates" warning. It should be considered a
-		// false positive when working on the externalization process. So here we temporarily change
-		// to use "no-duplicate-imports" instead.
-		//
-		// TODO: After the externalizations of `@wordpress/*` and `@woocommerce/*` are complete,
-		//       remove the following two lines of rule settings.
-		'import/no-duplicates': 'off',
-		'no-duplicate-imports': 'warn',
 	},
 	overrides: [
 		{