diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/no-shipping/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkout/no-shipping/index.js
index ea723f4853d..cd9ec18483c 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/no-shipping/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/no-shipping/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Placeholder, Button } from '@wordpress/components';
+import { Placeholder, Button } from 'wordpress-components';
 import { Icon, truck } from '@woocommerce/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
index ba204e18bf5..edd7f342400 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useState } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import withComponentId from '@woocommerce/base-hocs/with-component-id';
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 
@@ -41,7 +41,7 @@ const Tabs = ( {
 	tabs,
 	activeClass = 'is-active',
 	initialTabName,
-	instanceId,
+	componentId,
 	ariaLabel = __( 'Tabbed Content', 'woo-gutenberg-products-block' ),
 	children,
 } ) => {
@@ -59,7 +59,7 @@ const Tabs = ( {
 	if ( ! selectedTab ) {
 		throw new Error( 'There is no available tab for the selected item' );
 	}
-	const selectedId = `${ instanceId }-${ selectedTab.name }`;
+	const selectedId = `${ componentId }-${ selectedTab.name }`;
 	return (
 		<div className={ classnames( 'wc-component__tabs', className ) }>
 			<div
@@ -76,8 +76,8 @@ const Tabs = ( {
 								[ activeClass ]: tab.name === selected,
 							}
 						) }
-						tabId={ `${ instanceId }-${ tab.name }` }
-						aria-controls={ `${ instanceId }-${ tab.name }-view` }
+						tabId={ `${ componentId }-${ tab.name }` }
+						aria-controls={ `${ componentId }-${ tab.name }-view` }
 						selected={ tab.name === selected }
 						key={ tab.name }
 						ariaLabel={ tab.ariaLabel || null }
@@ -102,4 +102,4 @@ const Tabs = ( {
 	);
 };
 
-export default withInstanceId( Tabs );
+export default withComponentId( Tabs );
diff --git a/plugins/woocommerce-blocks/assets/js/icons/icon/index.js b/plugins/woocommerce-blocks/assets/js/icons/icon/index.js
index 6ca016688a1..b1669fd15b7 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/icon/index.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/icon/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cloneElement, isValidElement } from '@wordpress/element';
+import { cloneElement, isValidElement } from 'wordpress-element';
 import PropTypes from 'prop-types';
 
 function Icon( { srcElement, size = 24, ...props } ) {
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/bill.js b/plugins/woocommerce-blocks/assets/js/icons/library/bill.js
index 458e89f42f5..dfd0f1b1724 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/bill.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/bill.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const grid = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/card.js b/plugins/woocommerce-blocks/assets/js/icons/library/card.js
index b40389ad152..4a6c24f4e2d 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/card.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/card.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const card = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/cart.js b/plugins/woocommerce-blocks/assets/js/icons/library/cart.js
index 3bb24c36d29..e5eba871be3 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/cart.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/cart.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const cart = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/comment.js b/plugins/woocommerce-blocks/assets/js/icons/library/comment.js
index 79c51dd0c91..0304c0007a3 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/comment.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/comment.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const comment = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/discussion.js b/plugins/woocommerce-blocks/assets/js/icons/library/discussion.js
index 42229301996..83c83e457d3 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/discussion.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/discussion.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const discussion = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/exclamation.js b/plugins/woocommerce-blocks/assets/js/icons/library/exclamation.js
index a9b69c5c7ee..34b6b5a66ef 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/exclamation.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/exclamation.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const exclamation = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/external.js b/plugins/woocommerce-blocks/assets/js/icons/library/external.js
index 7d8fc9a2eac..c5c4fab44ff 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/external.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/external.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const external = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/folder-starred.js b/plugins/woocommerce-blocks/assets/js/icons/library/folder-starred.js
index 7ecaa518cec..6226c0dcf78 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/folder-starred.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/folder-starred.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const folderStarred = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/folder.js b/plugins/woocommerce-blocks/assets/js/icons/library/folder.js
index 5e53e4f71d9..fa4f5a14e1e 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/folder.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/folder.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const folder = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/grid.js b/plugins/woocommerce-blocks/assets/js/icons/library/grid.js
index 646d0049377..2da955910cf 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/grid.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/grid.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const grid = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/image.js b/plugins/woocommerce-blocks/assets/js/icons/library/image.js
index 06780f1d444..29823d39789 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/image.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/image.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const image = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/list.js b/plugins/woocommerce-blocks/assets/js/icons/library/list.js
index 74ccc256b68..a0546d77cb5 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/list.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/list.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const list = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/more.js b/plugins/woocommerce-blocks/assets/js/icons/library/more.js
index 024876bd329..c41e7749c9c 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/more.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/more.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const more = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/notes.js b/plugins/woocommerce-blocks/assets/js/icons/library/notes.js
index 1a7c57496a9..2a6dc1f0a9a 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/notes.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/notes.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const notes = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/notice.js b/plugins/woocommerce-blocks/assets/js/icons/library/notice.js
index 5d8f7b14610..0eee320ef59 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/notice.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/notice.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const notice = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/radio-selected.js b/plugins/woocommerce-blocks/assets/js/icons/library/radio-selected.js
index 10ca5e15e4a..f7eba06f9ac 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/radio-selected.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/radio-selected.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const radioSelected = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js b/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js
index a30b015e133..91e7e575e17 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const radioUnselected = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/review.js b/plugins/woocommerce-blocks/assets/js/icons/library/review.js
index 0c98310c524..fc9e6b27788 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/review.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/review.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const review = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/search.js b/plugins/woocommerce-blocks/assets/js/icons/library/search.js
index 927d1ca1b9b..08522c0ba56 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/search.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/search.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const search = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/server.js b/plugins/woocommerce-blocks/assets/js/icons/library/server.js
index 570aa0092fb..8789006afd4 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/server.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/server.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const server = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/star.js b/plugins/woocommerce-blocks/assets/js/icons/library/star.js
index 68cb45416a9..cd55b7cebd6 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/star.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/star.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const star = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/stonks.js b/plugins/woocommerce-blocks/assets/js/icons/library/stonks.js
index e29ef6a646b..0d6534a6c21 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/stonks.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/stonks.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 // 🤫
 const stonks = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/tag.js b/plugins/woocommerce-blocks/assets/js/icons/library/tag.js
index 86b9c7d0a4a..52b5b94a174 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/tag.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/tag.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const tag = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/tags.js b/plugins/woocommerce-blocks/assets/js/icons/library/tags.js
index 159e173084a..745cd690ef0 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/tags.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/tags.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const tags = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/thumb-up.js b/plugins/woocommerce-blocks/assets/js/icons/library/thumb-up.js
index 42efd0b0827..fb0d22196c2 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/thumb-up.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/thumb-up.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const thumbUp = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/toggle.js b/plugins/woocommerce-blocks/assets/js/icons/library/toggle.js
index 5f36b359428..03bdc3580ed 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/toggle.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/toggle.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const toggle = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/trash.js b/plugins/woocommerce-blocks/assets/js/icons/library/trash.js
index bc4290b717b..2f09534935c 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/trash.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/trash.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 // This uses `delete_outline` icon from Material.
 // https://material.io/resources/icons/?icon=delete_outline&style=baseline
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/truck.js b/plugins/woocommerce-blocks/assets/js/icons/library/truck.js
index 8dc97c4c4b7..6d245585da2 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/truck.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/truck.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const truck = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/widgets.js b/plugins/woocommerce-blocks/assets/js/icons/library/widgets.js
index 499a5de8a69..ebbccdef41f 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/widgets.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/widgets.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 
 const widgets = (
 	<SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 24 24">
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/woo.js b/plugins/woocommerce-blocks/assets/js/icons/library/woo.js
index e09ba1ffdf3..565ab09e630 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/woo.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/woo.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SVG } from '@wordpress/components';
+import { SVG } from 'wordpress-components';
 import classnames from 'classnames';
 const woo = ( { className, size } ) => (
 	<SVG