Externalize Flex, Card and their associated group components imported from @wordpress/components

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';
 
 /**

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

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

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

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

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';
 
 /**

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

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';
 
 /**

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

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

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';

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

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';
 

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.

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

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

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';
 

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

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';
 

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
  */

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';

js/src/get-started-page/benefits-card/index.js

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

js/src/get-started-page/customer-quotes-card/index.js

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

js/src/get-started-page/features-card/index.js

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card, CardHeader, Flex, FlexBlock } from '@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	Card,
+	CardHeader,
+} from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**

js/src/get-started-page/get-started-card/index.js

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

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 { Tip } from '@wordpress/components';
+import { FlexBlock, Card, CardBody } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

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';
 
 /**

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';
 
 /**

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,

js/src/product-feed/product-statistics/index.js

@@ -3,12 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	FlexItem,
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-	FlexItem,
-} from '@wordpress/components';
+} from 'extracted/@wordpress/components';
 
 import {
 	SummaryList,

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

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

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

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';
 
 /**

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';
 

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';

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';
 
 /**

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';
 
 /**

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';
 
 /**

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

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