diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js b/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js
index 915dbaa0443..bdf7c7bfb95 100644
--- a/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js
+++ b/plugins/woocommerce-admin/client/activity-panel/activity-card/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { cloneElement, Component } from '@wordpress/element';
 import NoticeOutline from 'gridicons/dist/notice-outline';
 import moment from 'moment';
@@ -36,10 +36,7 @@ class ActivityCard extends Component {
 			title,
 			unread,
 		} = this.props;
-		const cardClassName = classnames(
-			'woocommerce-activity-card',
-			className
-		);
+		const cardClassName = clsx( 'woocommerce-activity-card', className );
 		const actionsList = Array.isArray( actions ) ? actions : [ actions ];
 		const dateString = isDateString( date )
 			? moment.utc( date ).fromNow()
diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js b/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js
index 5ddcbeb160b..d973a2550ea 100644
--- a/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js
+++ b/plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { range } from 'lodash';
@@ -10,7 +10,7 @@ class ActivityCardPlaceholder extends Component {
 	render() {
 		const { className, hasAction, hasDate, hasSubtitle, lines } =
 			this.props;
-		const cardClassName = classnames(
+		const cardClassName = clsx(
 			'woocommerce-activity-card is-loading',
 			className
 		);
diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js b/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js
index 5b1295cbe62..b5d42ff4e66 100644
--- a/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js
+++ b/plugins/woocommerce-admin/client/activity-panel/activity-header/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { Text } from '@woocommerce/experimental';
@@ -15,7 +15,7 @@ import './style.scss';
 class ActivityHeader extends Component {
 	render() {
 		const { className, menu, subtitle, title, unreadMessages } = this.props;
-		const cardClassName = classnames(
+		const cardClassName = clsx(
 			{
 				'woocommerce-layout__inbox-panel-header': subtitle,
 				'woocommerce-layout__activity-panel-header': ! subtitle,
diff --git a/plugins/woocommerce-admin/client/activity-panel/panel.js b/plugins/woocommerce-admin/client/activity-panel/panel.js
index f1000786ccc..0cebb8366d9 100644
--- a/plugins/woocommerce-admin/client/activity-panel/panel.js
+++ b/plugins/woocommerce-admin/client/activity-panel/panel.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Suspense, useRef, useCallback } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Spinner } from '@woocommerce/components';
 
 /**
@@ -68,7 +68,7 @@ export const Panel = ( {
 		return null;
 	}
 
-	const classNames = classnames( panelClass, {
+	const classNames = clsx( panelClass, {
 		'is-open': isPanelOpen,
 		'is-switching': isPanelSwitching,
 	} );
diff --git a/plugins/woocommerce-admin/client/activity-panel/tab/index.js b/plugins/woocommerce-admin/client/activity-panel/tab/index.js
index c3abe11be63..70426ab1792 100644
--- a/plugins/woocommerce-admin/client/activity-panel/tab/index.js
+++ b/plugins/woocommerce-admin/client/activity-panel/tab/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export const Tab = ( {
 	icon,
@@ -14,7 +14,7 @@ export const Tab = ( {
 	isPanelOpen,
 	onTabClick,
 } ) => {
-	const className = classnames( 'woocommerce-layout__activity-panel-tab', {
+	const className = clsx( 'woocommerce-layout__activity-panel-tab', {
 		'is-active': isPanelOpen && selected,
 		'has-unread': unread,
 	} );
diff --git a/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js b/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js
index 15ee319f850..348f88f0a0c 100644
--- a/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js
+++ b/plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 const ActivityPanelToggleBubble = ( {
@@ -9,12 +9,9 @@ const ActivityPanelToggleBubble = ( {
 	width = 24,
 	hasUnread = false,
 } ) => {
-	const classes = classnames(
-		'woocommerce-layout__activity-panel-toggle-bubble',
-		{
-			'has-unread': hasUnread,
-		}
-	);
+	const classes = clsx( 'woocommerce-layout__activity-panel-toggle-bubble', {
+		'has-unread': hasUnread,
+	} );
 
 	/* eslint-disable max-len */
 	return (
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx b/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx
index 06711fc5397..702da2ab23e 100644
--- a/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -35,7 +35,7 @@ export const Choice = ( {
 	return (
 		<div
 			role="radio"
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-profiler-choice-container',
 				className
 			) }
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/heading/heading.tsx b/plugins/woocommerce-admin/client/core-profiler/components/heading/heading.tsx
index b606578639b..922720aaa35 100644
--- a/plugins/woocommerce-admin/client/core-profiler/components/heading/heading.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/components/heading/heading.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -16,12 +16,7 @@ type Props = {
 
 export const Heading = ( { className, title, subTitle }: Props ) => {
 	return (
-		<div
-			className={ classNames(
-				'woocommerce-profiler-heading',
-				className
-			) }
-		>
+		<div className={ clsx( 'woocommerce-profiler-heading', className ) }>
 			<h1 className="woocommerce-profiler-heading__title">{ title }</h1>
 			{ subTitle && (
 				<h2 className="woocommerce-profiler-heading__subtitle">
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx b/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx
index 1f5edf25831..25f06a40b2c 100644
--- a/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx
@@ -8,7 +8,7 @@ import {
 	__experimentalSelectControlMenuItem as MenuItem,
 } from '@woocommerce/components';
 import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type Props = {
 	selectedOptions: Array< { label: string; value: string } >;
@@ -51,12 +51,9 @@ export const renderMenu =
 							} }
 						>
 							<CheckboxControl
-								className={ classNames(
-									'core-profiler__checkbox',
-									{
-										'is-selected': isSelected,
-									}
-								) }
+								className={ clsx( 'core-profiler__checkbox', {
+									'is-selected': isSelected,
+								} ) }
 								onChange={ () => {} }
 								checked={ isSelected }
 								label={ item.label }
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx b/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx
index 3f036b916b4..ac96b6f29d6 100644
--- a/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -33,7 +33,7 @@ export const Navigation = ( {
 }: NavigationProps ) => {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'woocommerce-profiler-navigation-container',
 				classNames
 			) }
@@ -58,7 +58,7 @@ export const Navigation = ( {
 					{ typeof onSkip === 'function' && (
 						<Button
 							onClick={ onSkip }
-							className={ classnames(
+							className={ clsx(
 								'woocommerce-profiler-navigation-skip-link',
 								classNames.mobile ? 'mobile' : ''
 							) }
diff --git a/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx b/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx
index 6ee2bf8eed6..de2634f550e 100644
--- a/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx
@@ -4,7 +4,7 @@
 import { ReactNode } from 'react';
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -43,7 +43,7 @@ export const PluginCard = ( {
 				) }
 				{ icon }
 				<div
-					className={ classnames(
+					className={ clsx(
 						'woocommerce-profiler-plugins-plugin-card-text-header',
 						{
 							installed,
@@ -58,7 +58,7 @@ export const PluginCard = ( {
 			</div>
 
 			<div
-				className={ classnames(
+				className={ clsx(
 					'woocommerce-profiler-plugins-plugin-card-text',
 					{ 'smaller-margin-left': installed }
 				) }
diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
index 58c756ae0c5..a2455a41da0 100644
--- a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
@@ -20,7 +20,7 @@ import {
 import { findCountryOption, getCountry } from '@woocommerce/onboarding';
 import { decodeEntities } from '@wordpress/html-entities';
 import { z } from 'zod';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -395,7 +395,7 @@ export const BusinessInfo = ( {
 					{
 						<>
 							<TextControl
-								className={ classNames(
+								className={ clsx(
 									'woocommerce-profiler-business-info-email-adddress',
 									{ 'is-error': isEmailInvalid }
 								) }
diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx
index b1a161e049d..fa0b040bf13 100644
--- a/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx
@@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { SelectControl } from '@woocommerce/components';
 import { Icon, chevronDown } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -236,7 +236,7 @@ export const UserProfile = ( {
 				}
 			/>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'woocommerce-profiler-page__content woocommerce-profiler-user-profile__content',
 					{
 						'is-platform-selector-open': isPlatformDropdownOpen,
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx
index 9cfafb77089..c2f8c454009 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useMemo } from '@wordpress/element';
 // @ts-ignore No types for this exist yet.
 import { InterfaceSkeleton } from '@wordpress/interface';
@@ -73,7 +73,7 @@ export const Editor = ( { isLoading }: { isLoading: boolean } ) => {
 			<BlockContextProvider value={ blockContext }>
 				<InterfaceSkeleton
 					enableRegionNavigation={ false }
-					className={ classnames(
+					className={ clsx(
 						'woocommerce-customize-store__edit-site-editor',
 						'edit-site-editor__interface-skeleton',
 						{
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx
index c0e937a10c5..6f4e02d3f7a 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useState,
 	createPortal,
@@ -123,7 +123,7 @@ function Iframe( {
 					createPortal(
 						<body
 							ref={ bodyRef }
-							className={ classnames(
+							className={ clsx(
 								'block-editor-iframe__body',
 								'editor-styles-wrapper'
 							) }
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
index 47827251a6b..1b19b73c21e 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useReducedMotion,
 	useResizeObserver,
@@ -156,7 +156,7 @@ export const Layout = () => {
 						type={ templateType }
 						id={ templateId }
 					>
-						<div className={ classnames( 'edit-site-layout' ) }>
+						<div className={ clsx( 'edit-site-layout' ) }>
 							<motion.div
 								className="edit-site-layout__header-container"
 								animate={ 'view' }
@@ -204,7 +204,7 @@ export const Layout = () => {
 											<motion.div
 												initial={ false }
 												layout="position"
-												className={ classnames(
+												className={ clsx(
 													'edit-site-layout__canvas'
 												) }
 											>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx
index 8b682b07725..e64cf4a4eaf 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState, useRef } from '@wordpress/element';
 import {
 	ResizableBox,
@@ -202,7 +202,7 @@ function ResizableFrame( {
 			key="handle"
 			role="separator"
 			aria-orientation="vertical"
-			className={ classnames( 'edit-site-resizable-frame__handle', {
+			className={ clsx( 'edit-site-resizable-frame__handle', {
 				'is-resizing': isResizing,
 			} ) }
 			variants={ resizeHandleVariants }
@@ -302,7 +302,7 @@ function ResizableFrame( {
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
-			className={ classnames( 'edit-site-resizable-frame__inner', {
+			className={ clsx( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
 		>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
index 18d02715913..ab05865014a 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useMemo, useContext } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -144,7 +144,7 @@ export const VariationContainer = ( { variation, children } ) => {
 		>
 			<GlobalStylesContext.Provider value={ context }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'woocommerce-customize-store_global-styles-variations_item',
 						{
 							'is-active': isActive,
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
index e2db95b41bd..15385ed22e3 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useContext, useState } from '@wordpress/element';
 import {
 	// @ts-ignore No types for this exist yet.
@@ -66,12 +66,9 @@ export const SidebarNavigationScreen = ( {
 	return (
 		<>
 			<VStack
-				className={ classnames(
-					'edit-site-sidebar-navigation-screen__main',
-					{
-						'has-footer': !! footer,
-					}
-				) }
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
index 75df1e206e8..1bb7d25fcb4 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useSelect } from '@wordpress/data';
 import {
 	// @ts-ignore No types for this exist yet.
@@ -60,10 +60,7 @@ export const SiteHub = forwardRef(
 			<motion.div
 				ref={ ref }
 				{ ...restProps }
-				className={ classnames(
-					'edit-site-site-hub',
-					restProps.className
-				) }
+				className={ clsx( 'edit-site-site-hub', restProps.className ) }
 				initial={ false }
 				transition={ {
 					type: 'tween',
@@ -82,7 +79,7 @@ export const SiteHub = forwardRef(
 						spacing="0"
 					>
 						<div
-							className={ classnames(
+							className={ clsx(
 								'edit-site-site-hub__view-mode-toggle-container',
 								{
 									'has-transparent-background': isTransparent,
@@ -118,7 +115,7 @@ export const SiteHub = forwardRef(
 									exit={ {
 										opacity: 0,
 									} }
-									className={ classnames(
+									className={ clsx(
 										'edit-site-site-hub__site-title',
 										{ 'is-transparent': isTransparent }
 									) }
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.tsx
index 22fceb85575..5b26e7a7a92 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -35,10 +35,7 @@ export const Choice = ( {
 	return (
 		<div
 			role="radio"
-			className={ classNames(
-				'woocommerce-cys-choice-container',
-				className
-			) }
+			className={ clsx( 'woocommerce-cys-choice-container', className ) }
 			onClick={ changeHandler }
 			onKeyDown={ ( e ) => {
 				if ( e.key === 'Enter' ) {
diff --git a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx
index a4ddad0fa3c..6157aa3a3b3 100644
--- a/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Button } from '@wordpress/components';
 import { getNewPath } from '@woocommerce/navigation';
 import interpolateComponents from '@automattic/interpolate-components';
@@ -45,7 +45,7 @@ export const BaseIntroBanner = ( {
 } ) => {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-customize-store-banner',
 				bannerClass
 			) }
diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
index a905e4369b0..8a75c0ff32b 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Fragment, useState } from '@wordpress/element';
 import LineGraphIcon from 'gridicons/dist/line-graph';
 import StatsAltIcon from 'gridicons/dist/stats-alt';
@@ -210,14 +210,10 @@ const DashboardCharts = ( props ) => {
 					role="menubar"
 				>
 					<Button
-						className={ classNames(
-							'woocommerce-chart__type-button',
-							{
-								'woocommerce-chart__type-button-selected':
-									! query.chartType ||
-									query.chartType === 'line',
-							}
-						) }
+						className={ clsx( 'woocommerce-chart__type-button', {
+							'woocommerce-chart__type-button-selected':
+								! query.chartType || query.chartType === 'line',
+						} ) }
 						title={ __( 'Line chart', 'woocommerce' ) }
 						aria-checked={ query.chartType === 'line' }
 						role="menuitemradio"
@@ -227,13 +223,10 @@ const DashboardCharts = ( props ) => {
 						<LineGraphIcon />
 					</Button>
 					<Button
-						className={ classNames(
-							'woocommerce-chart__type-button',
-							{
-								'woocommerce-chart__type-button-selected':
-									query.chartType === 'bar',
-							}
-						) }
+						className={ clsx( 'woocommerce-chart__type-button', {
+							'woocommerce-chart__type-button-selected':
+								query.chartType === 'bar',
+						} ) }
 						title={ __( 'Bar chart', 'woocommerce' ) }
 						aria-checked={ query.chartType === 'bar' }
 						role="menuitemradio"
diff --git a/plugins/woocommerce-admin/client/header/index.js b/plugins/woocommerce-admin/client/header/index.js
index f2bc7108b46..a423e30cfe8 100644
--- a/plugins/woocommerce-admin/client/header/index.js
+++ b/plugins/woocommerce-admin/client/header/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	WC_HEADER_SLOT_NAME,
@@ -52,7 +52,7 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 	const pageTitle = getPageTitle( sections );
 	const { isScrolled } = useIsScrolled();
 	let debounceTimer = null;
-	const className = classnames( 'woocommerce-layout__header', {
+	const className = clsx( 'woocommerce-layout__header', {
 		'is-scrolled': isScrolled,
 	} );
 
diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/reviews/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/reviews/index.js
index ff35a4559fa..0b39cdd6729 100644
--- a/plugins/woocommerce-admin/client/homescreen/activity-panel/reviews/index.js
+++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/reviews/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Component, Fragment } from '@wordpress/element';
 import { Button, Tooltip } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -201,7 +201,7 @@ class ReviewsPanel extends Component {
 
 		const productImage =
 			get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
-		const productImageClasses = classnames(
+		const productImageClasses = clsx(
 			'woocommerce-review-activity-card__image-overlay__product',
 			{
 				'is-placeholder': ! productImage || ! productImage.src,
diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js
index e30df5d2ece..fc76262d5e7 100644
--- a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js
+++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { BaseControl, Button } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Component, Fragment } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
 import { get } from 'lodash';
@@ -175,7 +175,7 @@ export class ProductStockCard extends Component {
 
 		return (
 			<span
-				className={ classnames(
+				className={ clsx(
 					'woocommerce-stock-activity-card__stock-quantity',
 					{
 						'out-of-stock': product.stock_quantity < 1,
@@ -239,7 +239,7 @@ export class ProductStockCard extends Component {
 
 		const productImage =
 			get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
-		const productImageClasses = classnames(
+		const productImageClasses = clsx(
 			'woocommerce-stock-activity-card__image-overlay__product',
 			{
 				'is-placeholder': ! productImage || ! productImage.src,
@@ -252,12 +252,9 @@ export class ProductStockCard extends Component {
 				</div>
 			</div>
 		);
-		const activityCardClasses = classnames(
-			'woocommerce-stock-activity-card',
-			{
-				'is-dimmed': ! editing && ! isLowStock,
-			}
-		);
+		const activityCardClasses = clsx( 'woocommerce-stock-activity-card', {
+			'is-dimmed': ! editing && ! isLowStock,
+		} );
 
 		const activityCard = (
 			<ActivityCard
diff --git a/plugins/woocommerce-admin/client/homescreen/header-banner-slot/header-banner-slot.tsx b/plugins/woocommerce-admin/client/homescreen/header-banner-slot/header-banner-slot.tsx
index 1504f14878d..81d3246512d 100644
--- a/plugins/woocommerce-admin/client/homescreen/header-banner-slot/header-banner-slot.tsx
+++ b/plugins/woocommerce-admin/client/homescreen/header-banner-slot/header-banner-slot.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useSlot } from '@woocommerce/experimental';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,12 +24,7 @@ export const WooHomescreenHeaderBanner = ( {
 		return null;
 	}
 	return (
-		<div
-			className={ classnames(
-				'woocommerce-homescreen__header',
-				className
-			) }
-		>
+		<div className={ clsx( 'woocommerce-homescreen__header', className ) }>
 			<WooHomescreenHeaderBannerItem.Slot />
 		</div>
 	);
diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js
index d7215e39cc2..a8670f1ef34 100644
--- a/plugins/woocommerce-admin/client/homescreen/layout.js
+++ b/plugins/woocommerce-admin/client/homescreen/layout.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import {
 	useUserPreferences,
@@ -141,13 +141,13 @@ export const Layout = ( {
 		<>
 			{ isDashboardShown && (
 				<WooHomescreenHeaderBanner
-					className={ classnames( 'woocommerce-homescreen', {
+					className={ clsx( 'woocommerce-homescreen', {
 						'woocommerce-homescreen-column': ! twoColumns,
 					} ) }
 				/>
 			) }
 			<div
-				className={ classnames( 'woocommerce-homescreen', {
+				className={ clsx( 'woocommerce-homescreen', {
 					'two-columns': twoColumns,
 				} ) }
 			>
diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js b/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js
index a986c6250ef..72849df9949 100644
--- a/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js
+++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js
@@ -4,7 +4,7 @@
 import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	SummaryNumber,
 	SummaryNumberPlaceholder,
@@ -40,7 +40,7 @@ export const StatsList = ( {
 
 	return (
 		<ul
-			className={ classnames( 'woocommerce-stats-overview__stats', {
+			className={ clsx( 'woocommerce-stats-overview__stats', {
 				'is-even': stats.length % 2 === 0,
 			} ) }
 		>
diff --git a/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
index 776af04590d..f1d0917be7a 100644
--- a/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
+++ b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useSlot } from '@woocommerce/experimental';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,12 +24,7 @@ export const WooHomescreenWCPayFeature = ( {
 		return null;
 	}
 	return (
-		<div
-			className={ classnames(
-				'woocommerce-homescreen__header',
-				className
-			) }
-		>
+		<div className={ clsx( 'woocommerce-homescreen__header', className ) }>
 			<WooHomescreenWCPayFeatureItem.Slot />
 		</div>
 	);
diff --git a/plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js b/plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js
index 3735f5f72e2..e44991dd238 100644
--- a/plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js
+++ b/plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js
@@ -6,7 +6,7 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
 import interpolateComponents from '@automattic/interpolate-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Link } from '@woocommerce/components';
 
 /**
@@ -54,7 +54,7 @@ export default function WelcomeFromCalypsoModal( { onClose } ) {
 		return null;
 	}
 
-	const guideClassNames = classNames(
+	const guideClassNames = clsx(
 		'woocommerce__welcome-modal',
 		'woocommerce__welcome-from-calypso-modal'
 	);
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx
index 8a60aa3112d..c0f9cd4cf5a 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx
@@ -3,7 +3,7 @@
  */
 import { useMachine } from '@xstate5/react';
 import React, { useEffect } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -69,7 +69,7 @@ const LaunchStoreController = () => {
 	return (
 		<div className={ 'launch-your-store-layout__container' }>
 			<SidebarContainer
-				className={ classnames( {
+				className={ clsx( {
 					'is-sidebar-hidden': ! isSidebarVisible,
 				} ) }
 			>
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/launch-store-success/index.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/launch-store-success/index.tsx
index dffa5b6dbaf..36718ae14be 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/launch-store-success/index.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/launch-store-success/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Spinner } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
 
@@ -32,7 +32,7 @@ export const LaunchYourStoreSuccess = ( props: MainContentComponentProps ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'launch-store-success-page__container',
 				props.className
 			) }
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/loading.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/loading.tsx
index cad048a92f0..bf813ad182a 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/loading.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/loading.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -9,7 +9,7 @@ import type { MainContentComponentProps } from '../xstate';
 export const LoadingPage = ( props: MainContentComponentProps ) => {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'launch-store-loading-page__container',
 				props.className
 			) }
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
index d273111c09b..56d8c103649 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { Spinner } from '@woocommerce/components';
 import { useResizeObserver } from '@wordpress/compose';
@@ -53,7 +53,7 @@ export const SitePreviewPage = ( props: MainContentComponentProps ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'launch-store-site-preview-page__container',
 				{ 'is-loading': isLoading },
 				props.className
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
index c80d6e79d92..2e427344246 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	createInterpolateElement,
 	useEffect,
@@ -88,7 +88,7 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'launch-store-sidebar__container',
 				props.className
 			) }
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx
index 7fd32f99641..0d6a82be14a 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx
@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 // @ts-ignore No types for this exist yet.
@@ -44,12 +44,9 @@ export const SidebarContainer = ( {
 	return (
 		<>
 			<VStack
-				className={ classnames(
-					'edit-site-sidebar-navigation-screen__main',
-					{
-						'has-footer': !! footer,
-					}
-				) }
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx
index 5a5bb0433bf..7c9d871db89 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx
@@ -7,7 +7,7 @@ import { ONBOARDING_STORE_NAME, TaskType } from '@woocommerce/data';
 import { navigateTo, getNewPath } from '@woocommerce/navigation';
 import { resolveSelect } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 // @ts-ignore No types for this exist yet.
 import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
 
@@ -118,7 +118,7 @@ export const CompletedTaskItem: React.FC< {
 	classNames?: string;
 } > = ( { task, classNames } ) => (
 	<SidebarNavigationItem
-		className={ classnames( task.id, 'is-complete', classNames ) }
+		className={ clsx( task.id, 'is-complete', classNames ) }
 		icon={ taskCompleteIcon }
 		disabled={ true }
 	>
@@ -132,7 +132,7 @@ export const IncompleteTaskItem: React.FC< {
 	onClick: () => void;
 } > = ( { task, classNames, onClick } ) => (
 	<SidebarNavigationItem
-		className={ classnames( task.id, classNames ) }
+		className={ clsx( task.id, classNames ) }
 		icon={ taskIcons[ task.id ] }
 		withChevron
 		onClick={ onClick }
diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx
index c51f7188949..61ba67f3d4d 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx
@@ -11,7 +11,7 @@ import {
 	spawnChild,
 } from 'xstate5';
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getQuery, navigateTo } from '@woocommerce/navigation';
 import { OPTIONS_STORE_NAME, TaskListType, TaskType } from '@woocommerce/data';
 import { dispatch } from '@wordpress/data';
@@ -410,10 +410,7 @@ export const SidebarContainer = ( {
 } ) => {
 	return (
 		<div
-			className={ classnames(
-				'launch-your-store-layout__sidebar',
-				className
-			) }
+			className={ clsx( 'launch-your-store-layout__sidebar', className ) }
 		>
 			{ children }
 		</div>
diff --git a/plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js b/plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
index a1a3ebfa624..846e49d51b8 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
+++ b/plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
@@ -15,7 +15,7 @@ import {
 } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { recordEvent } from '@woocommerce/tracks';
 import { getSetting } from '@woocommerce/settings';
@@ -148,7 +148,7 @@ const SiteVisibility = () => {
 						  ) }
 				</p>
 				<div
-					className={ classNames(
+					className={ clsx(
 						'site-visibility-settings-slotfill-section-content',
 						{
 							'is-hidden': comingSoon !== 'yes',
diff --git a/plugins/woocommerce-admin/client/launch-your-store/status/index.tsx b/plugins/woocommerce-admin/client/launch-your-store/status/index.tsx
index 2e333b28506..96f5bb28a2a 100644
--- a/plugins/woocommerce-admin/client/launch-your-store/status/index.tsx
+++ b/plugins/woocommerce-admin/client/launch-your-store/status/index.tsx
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
 import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
 import { getAdminLink, getSetting } from '@woocommerce/settings';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
@@ -53,7 +53,7 @@ export const LaunchYourStoreStatus = ( {
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button onClick={ onToggle } aria-expanded={ isOpen }>
 							<div
-								className={ classnames(
+								className={ clsx(
 									'woocommerce-lys-status-pill',
 									{ 'is-live': ! isComingSoon }
 								) }
diff --git a/plugins/woocommerce-admin/client/layout/footer/footer.tsx b/plugins/woocommerce-admin/client/layout/footer/footer.tsx
index 73f660a654c..dd6130c2f1d 100644
--- a/plugins/woocommerce-admin/client/layout/footer/footer.tsx
+++ b/plugins/woocommerce-admin/client/layout/footer/footer.tsx
@@ -3,7 +3,7 @@
  */
 import { WC_FOOTER_SLOT_NAME, WooFooterItem } from '@woocommerce/admin-layout';
 import { useSlot } from '@woocommerce/experimental';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ export const Footer: React.FC = () => {
 	}
 	return (
 		<div
-			className={ classNames( 'woocommerce-layout__footer', {
+			className={ clsx( 'woocommerce-layout__footer', {
 				'at-bottom': atBottom,
 			} ) }
 		>
diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/index.js b/plugins/woocommerce-admin/client/layout/store-alerts/index.js
index 633ef579c59..e95c769a0e2 100644
--- a/plugins/woocommerce-admin/client/layout/store-alerts/index.js
+++ b/plugins/woocommerce-admin/client/layout/store-alerts/index.js
@@ -11,7 +11,7 @@ import {
 	CardHeader,
 	SelectControl,
 } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import interpolateComponents from '@automattic/interpolate-components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -227,7 +227,7 @@ export class StoreAlerts extends Component {
 		const numberOfAlerts = alerts.length;
 		const alert = alerts[ currentIndex ];
 		const type = alert.type;
-		const className = classnames( 'woocommerce-store-alerts', {
+		const className = clsx( 'woocommerce-store-alerts', {
 			'is-alert-error': type === 'error',
 			'is-alert-update': type === 'update',
 		} );
diff --git a/plugins/woocommerce-admin/client/layout/transient-notices/index.js b/plugins/woocommerce-admin/client/layout/transient-notices/index.js
index 33be50769fd..5d6a9dd687e 100644
--- a/plugins/woocommerce-admin/client/layout/transient-notices/index.js
+++ b/plugins/woocommerce-admin/client/layout/transient-notices/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { applyFilters } from '@wordpress/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { WooFooterItem } from '@woocommerce/admin-layout';
 import { OPTIONS_STORE_NAME, USER_STORE_NAME } from '@woocommerce/data';
 import PropTypes from 'prop-types';
@@ -82,7 +82,7 @@ export function TransientNotices( props ) {
 	};
 
 	const { className } = props;
-	const classes = classnames(
+	const classes = clsx(
 		'woocommerce-transient-notices',
 		'components-notices__snackbar',
 		className
diff --git a/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js b/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js
index b1c71f21144..8c1be47112b 100644
--- a/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js
+++ b/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { speak } from '@wordpress/a11y';
 import {
 	RawHTML,
@@ -89,7 +89,7 @@ function Snackbar(
 		return () => clearTimeout( timeoutHandle );
 	}, [ explicitDismiss, onDismiss, onRemove ] );
 
-	const classes = classnames( className, 'components-snackbar', {
+	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
@@ -101,12 +101,9 @@ function Snackbar(
 		actions = [ actions[ 0 ] ];
 	}
 
-	const snackbarContentClassnames = classnames(
-		'components-snackbar__content',
-		{
-			'components-snackbar__content-with-icon': !! icon,
-		}
-	);
+	const snackbarContentClassnames = clsx( 'components-snackbar__content', {
+		'components-snackbar__content-with-icon': !! icon,
+	} );
 
 	if ( __unstableHTML === true ) {
 		children = <RawHTML>{ children }</RawHTML>;
diff --git a/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/list.js b/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/list.js
index 8f0ce7920ad..05854344364 100644
--- a/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/list.js
+++ b/plugins/woocommerce-admin/client/layout/transient-notices/snackbar/list.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { omit, noop } from 'lodash';
 import { useTransition, animated } from '@react-spring/web';
 import { useReducedMotion } from '@wordpress/compose';
@@ -47,7 +47,7 @@ function SnackbarList( {
 		immediate: isReducedMotion,
 	} );
 
-	className = classnames( 'components-snackbar-list', className );
+	className = clsx( 'components-snackbar-list', className );
 	const removeNotice = ( notice ) => () => {
 		onRemove( notice.id );
 		// To be removed when we're no longer using core/notices2.
diff --git a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
index d6f811b5796..d144608a4a0 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
@@ -12,7 +12,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { chevronUp, chevronDown } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -42,12 +42,7 @@ const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
 	};
 
 	return (
-		<Card
-			className={ classnames(
-				'woocommerce-collapsible-card',
-				className
-			) }
-		>
+		<Card className={ clsx( 'woocommerce-collapsible-card', className ) }>
 			<CardHeader onClick={ handleClick }>
 				<CardHeaderTitle>{ header }</CardHeaderTitle>
 				<Button
diff --git a/plugins/woocommerce-admin/client/marketing/components/CreateNewCampaignModal/CreateNewCampaignModal.tsx b/plugins/woocommerce-admin/client/marketing/components/CreateNewCampaignModal/CreateNewCampaignModal.tsx
index 2df5a402104..a8cc0ded653 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CreateNewCampaignModal/CreateNewCampaignModal.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/CreateNewCampaignModal/CreateNewCampaignModal.tsx
@@ -12,7 +12,7 @@ import {
 	FlexItem,
 } from '@wordpress/components';
 import { chevronUp, chevronDown, external } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -59,7 +59,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
 	return (
 		<Modal
 			{ ...restProps }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'woocommerce-marketing-create-campaign-modal'
 			) }
diff --git a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
index 6b0b4acd0c8..4e195dcdf78 100644
--- a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -36,7 +36,7 @@ export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
 } ) => {
 	return (
 		<CardBody
-			className={ classnames(
+			className={ clsx(
 				'woocommerce_marketing_plugin_card_body',
 				className
 			) }
diff --git a/plugins/woocommerce-admin/client/marketing/components/product-icon/index.js b/plugins/woocommerce-admin/client/marketing/components/product-icon/index.js
index 48f343c1e24..9cf8cc5bf31 100644
--- a/plugins/woocommerce-admin/client/marketing/components/product-icon/index.js
+++ b/plugins/woocommerce-admin/client/marketing/components/product-icon/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
@@ -24,7 +24,7 @@ class ProductIcon extends Component {
 
 		return (
 			<div
-				className={ classnames(
+				className={ clsx(
 					this.props.className,
 					'woocommerce-admin-marketing-product-icon'
 				) }
diff --git a/plugins/woocommerce-admin/client/marketing/coupons/card/index.js b/plugins/woocommerce-admin/client/marketing/coupons/card/index.js
index 2418eb0b2ff..1099e68a7f1 100644
--- a/plugins/woocommerce-admin/client/marketing/coupons/card/index.js
+++ b/plugins/woocommerce-admin/client/marketing/coupons/card/index.js
@@ -3,7 +3,7 @@
  */
 import { Card as WPCard, CardBody, CardHeader } from '@wordpress/components';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Text } from '@woocommerce/experimental';
 
 /**
@@ -16,10 +16,7 @@ const Card = ( props ) => {
 
 	return (
 		<WPCard
-			className={ classnames(
-				className,
-				'woocommerce-admin-marketing-card'
-			) }
+			className={ clsx( className, 'woocommerce-admin-marketing-card' ) }
 		>
 			<CardHeader>
 				<div>
diff --git a/plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js b/plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js
index d48205df56f..37459ad1130 100644
--- a/plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js
+++ b/plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js
@@ -3,7 +3,7 @@
  */
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import PropTypes from 'prop-types';
@@ -62,7 +62,7 @@ const KnowledgeBase = ( {
 			( page - 1 ) * 2,
 			( page - 1 ) * 2 + 2
 		);
-		const pageClass = classNames(
+		const pageClass = clsx(
 			'woocommerce-marketing-knowledgebase-card__page',
 			{
 				'page-with-single-post': currentPosts.length === 1,
@@ -194,7 +194,7 @@ const KnowledgeBase = ( {
 		<Card
 			title={ title }
 			description={ description }
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-marketing-knowledgebase-card',
 				categoryClass
 			) }
diff --git a/plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js b/plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js
index 8f606448c95..c663bee025e 100644
--- a/plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js
+++ b/plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withDispatch, withSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
 
@@ -36,14 +36,14 @@ const RecommendedExtensions = ( {
 		<Card
 			title={ title }
 			description={ description }
-			className={ classnames(
+			className={ clsx(
 				'woocommerce-marketing-recommended-extensions-card',
 				categoryClass
 			) }
 		>
 			{ isLoading ? (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'woocommerce-marketing-recommended-extensions-card__items',
 						`woocommerce-marketing-recommended-extensions-card__items--count-${ placholdersCount }`
 					) }
@@ -54,7 +54,7 @@ const RecommendedExtensions = ( {
 				</div>
 			) : (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'woocommerce-marketing-recommended-extensions-card__items',
 						`woocommerce-marketing-recommended-extensions-card__items--count-${ extensions.length }`
 					) }
diff --git a/plugins/woocommerce-admin/client/marketing/coupons/slider/index.js b/plugins/woocommerce-admin/client/marketing/coupons/slider/index.js
index 95e7fd6aa11..2bea520d158 100644
--- a/plugins/woocommerce-admin/client/marketing/coupons/slider/index.js
+++ b/plugins/woocommerce-admin/client/marketing/coupons/slider/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useRef, useState, useEffect } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
@@ -17,7 +17,7 @@ const Slider = ( { children, animationKey, animate } ) => {
 
 	const container = useRef();
 
-	const containerClasses = classnames(
+	const containerClasses = clsx(
 		'woocommerce-marketing-slider',
 		animate && `animate-${ animate }`
 	);
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/IssueStatus.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/IssueStatus.tsx
index d0aee1202e3..61f836c9257 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/IssueStatus.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/IssueStatus.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import GridiconNotice from 'gridicons/dist/notice';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
 	if ( registeredChannel.issueType === 'error' ) {
 		return (
 			<div
-				className={ classnames(
+				className={ clsx(
 					issueStatusClassName,
 					`${ issueStatusClassName }__error`
 				) }
@@ -37,7 +37,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
 	if ( registeredChannel.issueType === 'warning' ) {
 		return (
 			<div
-				className={ classnames(
+				className={ clsx(
 					issueStatusClassName,
 					`${ issueStatusClassName }__warning`
 				) }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/SyncStatus.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/SyncStatus.tsx
index 772dc8fcf75..9f5af64cb2d 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/SyncStatus.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/SyncStatus.tsx
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
 import GridiconSync from 'gridicons/dist/sync';
 import GridiconNotice from 'gridicons/dist/notice';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -23,9 +23,7 @@ const className = 'woocommerce-marketing-sync-status';
 export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
 	if ( status === 'failed' ) {
 		return (
-			<div
-				className={ classnames( className, `${ className }__failed` ) }
-			>
+			<div className={ clsx( className, `${ className }__failed` ) }>
 				<GridiconNotice size={ iconSize } />
 				{ __( 'Sync failed', 'woocommerce' ) }
 			</div>
@@ -34,9 +32,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
 
 	if ( status === 'syncing' ) {
 		return (
-			<div
-				className={ classnames( className, `${ className }__syncing` ) }
-			>
+			<div className={ clsx( className, `${ className }__syncing` ) }>
 				<GridiconSync size={ iconSize } />
 				{ __( 'Syncing', 'woocommerce' ) }
 			</div>
@@ -44,7 +40,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
 	}
 
 	return (
-		<div className={ classnames( className, `${ className }__synced` ) }>
+		<div className={ clsx( className, `${ className }__synced` ) }>
 			<GridiconCheckmarkCircle size={ iconSize } />
 			{ __( 'Synced', 'woocommerce' ) }
 		</div>
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
index 05d314e2611..e05d56c2acc 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
@@ -5,7 +5,7 @@ import { Dropdown } from '@wordpress/components';
 import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { navigateTo, getNewPath } from '@woocommerce/navigation';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
@@ -47,7 +47,7 @@ function DropdownContent( props: {
 					key={ category.slug }
 				>
 					<button
-						className={ classNames(
+						className={ clsx(
 							'woocommerce-marketplace__category-dropdown-item-button',
 							{
 								'woocommerce-marketplace__category-dropdown-item-button--selected':
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
index c859f51fb92..d674758117f 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { navigateTo, getNewPath } from '@woocommerce/navigation';
 
 /**
@@ -26,14 +26,11 @@ export default function CategoryLink( props: Category ): JSX.Element {
 
 	const isLoading = props.label === '';
 
-	const classes = classNames(
-		'woocommerce-marketplace__category-item-button',
-		{
-			'woocommerce-marketplace__category-item-button--selected':
-				props.selected,
-			'is-loading': isLoading,
-		}
-	);
+	const classes = clsx( 'woocommerce-marketplace__category-item-button', {
+		'woocommerce-marketplace__category-item-button--selected':
+			props.selected,
+		'is-loading': isLoading,
+	} );
 
 	return (
 		<button
diff --git a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
index 1a08404fb10..07b298cde66 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
@@ -4,7 +4,7 @@
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useQuery } from '@woocommerce/navigation';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -149,7 +149,7 @@ export default function CategorySelector(
 							type={ props.type }
 							label={ __( 'More', 'woocommerce' ) }
 							categories={ dropdownItems }
-							buttonClassName={ classNames(
+							buttonClassName={ clsx(
 								'woocommerce-marketplace__category-item-button',
 								{
 									'woocommerce-marketplace__category-item-button--selected':
diff --git a/plugins/woocommerce-admin/client/marketplace/components/likert-scale/likert-scale.tsx b/plugins/woocommerce-admin/client/marketplace/components/likert-scale/likert-scale.tsx
index dd7bf5f828a..b45beab54a5 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/likert-scale/likert-scale.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/likert-scale/likert-scale.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -52,7 +52,7 @@ export default function LikertScale( props: LikertScaleProps ): JSX.Element {
 		},
 	];
 
-	const classes = classNames( 'woocommerce-marketplace__likert-scale', {
+	const classes = clsx( 'woocommerce-marketplace__likert-scale', {
 		'validation-failed': validationFailed,
 	} );
 
diff --git a/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx b/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx
index da78c7e0116..9be5b97a818 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useState } from '@wordpress/element';
 import { Icon, check, closeSmall, info, percent } from '@wordpress/icons'; // See: https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--docs
 
@@ -64,7 +64,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
 
 	if ( ! isVisible ) return null;
 
-	const classes = classNames(
+	const classes = clsx(
 		'woocommerce-marketplace__notice',
 		`woocommerce-marketplace__notice--${ variant }`,
 		{
@@ -74,7 +74,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
 
 	const iconElement = iconMap[ ( icon || 'info' ) as IconKey ];
 
-	const iconClass = classNames(
+	const iconClass = clsx(
 		'woocommerce-marketplace__notice-icon',
 		`woocommerce-marketplace__notice-icon--${ variant }`
 	);
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
index bc8e9d4bd3e..0b0c606b59a 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Card } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks';
 import { useQuery } from '@woocommerce/navigation';
 
@@ -125,7 +125,7 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
 		return product.url;
 	};
 
-	const classNames = classnames(
+	const classNames = clsx(
 		'woocommerce-marketplace__product-card',
 		`woocommerce-marketplace__product-card--${ type }`,
 		{
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
index cde26867f35..4115af1865d 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Fragment, useEffect, useState } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -28,7 +28,7 @@ export default function ProductListContent( props: {
 } ): JSX.Element {
 	const wccomHelperSettings = getAdminSetting( 'wccomHelper', {} );
 
-	const classes = classnames(
+	const classes = clsx(
 		'woocommerce-marketplace__product-list-content',
 		props.className
 	);
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.tsx b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.tsx
index 73864ca72d2..62043b77683 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.tsx
@@ -3,7 +3,7 @@
  */
 import { Link } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
@@ -22,12 +22,9 @@ export default function ProductListHeader(
 	const { title, groupURL } = props;
 	const isLoading = title === '';
 
-	const classNames = classnames(
-		'woocommerce-marketplace__product-list-header',
-		{
-			'is-loading': isLoading,
-		}
-	);
+	const classNames = clsx( 'woocommerce-marketplace__product-list-header', {
+		'is-loading': isLoading,
+	} );
 
 	return (
 		<div className={ classNames } aria-hidden={ isLoading }>
diff --git a/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx b/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx
index b9816759394..c548b24061c 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/products/products.tsx
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/element';
 import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
 import { Button } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { addQueryArgs } from '@wordpress/url';
 import { useSelect } from '@wordpress/data';
 import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
@@ -119,15 +119,13 @@ export default function Products( props: ProductsProps ) {
 	const baseContainerClass = 'woocommerce-marketplace__search-';
 	const baseProductListTitleClass = 'product-list-title--';
 
-	const containerClassName = classnames(
-		baseContainerClass + labelForClassName
-	);
-	const productListTitleClassName = classnames(
+	const containerClassName = clsx( baseContainerClass + labelForClassName );
+	const productListTitleClassName = clsx(
 		'woocommerce-marketplace__product-list-title',
 		baseContainerClass + baseProductListTitleClass + labelForClassName,
 		{ 'is-loading': isLoading }
 	);
-	const viewAllButonClassName = classnames(
+	const viewAllButonClassName = clsx(
 		'woocommerce-marketplace__view-all-button',
 		baseContainerClass + 'button-' + labelForClassName
 	);
@@ -150,7 +148,7 @@ export default function Products( props: ProductsProps ) {
 		return <NoResults type={ type } showHeading={ false } />;
 	}
 
-	const productListClass = classnames(
+	const productListClass = clsx(
 		showAllButton
 			? 'woocommerce-marketplace__product-list-content--collapsed'
 			: ''
diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
index d3f38057406..5fba21cc55b 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
 
 /**
@@ -118,7 +118,7 @@ const renderTabs = (
 		tabContent.push(
 			tabs[ tabKey ]?.href ? (
 				<a
-					className={ classNames(
+					className={ clsx(
 						'woocommerce-marketplace__tab-button',
 						'components-button',
 						`woocommerce-marketplace__tab-${ tabKey }`
@@ -130,7 +130,7 @@ const renderTabs = (
 				</a>
 			) : (
 				<Button
-					className={ classNames(
+					className={ clsx(
 						'woocommerce-marketplace__tab-button',
 						`woocommerce-marketplace__tab-${ tabKey }`,
 						{
@@ -176,7 +176,7 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
 	}, [ selectedTab, hasBusinessServices ] );
 	return (
 		<nav
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-marketplace__tabs',
 				additionalClassNames || []
 			) }
diff --git a/plugins/woocommerce-admin/client/navigation/components/container/index.js b/plugins/woocommerce-admin/client/navigation/components/container/index.js
index 53c686a0a48..2be5d22d659 100644
--- a/plugins/woocommerce-admin/client/navigation/components/container/index.js
+++ b/plugins/woocommerce-admin/client/navigation/components/container/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Navigation } from '@woocommerce/experimental';
 import { NAVIGATION_STORE_NAME, useUser } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
@@ -77,7 +77,7 @@ const Container = () => {
 
 	const isRoot = activeLevel === 'woocommerce';
 
-	const classes = classnames( 'woocommerce-navigation', {
+	const classes = clsx( 'woocommerce-navigation', {
 		'is-root': isRoot,
 	} );
 
diff --git a/plugins/woocommerce-admin/client/navigation/components/header/index.js b/plugins/woocommerce-admin/client/navigation/components/header/index.js
index cad0dcada62..43335d22b58 100644
--- a/plugins/woocommerce-admin/client/navigation/components/header/index.js
+++ b/plugins/woocommerce-admin/client/navigation/components/header/index.js
@@ -8,7 +8,7 @@ import { Icon, wordpress } from '@wordpress/icons';
 import { getSetting } from '@woocommerce/settings';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { debounce } from 'lodash';
 import { addHistoryListener } from '@woocommerce/navigation';
 
@@ -103,7 +103,7 @@ const Header = () => {
 		buttonIcon = null;
 	}
 
-	const className = classnames( 'woocommerce-navigation-header', {
+	const className = clsx( 'woocommerce-navigation-header', {
 		'is-scrolled': isScrolled,
 	} );
 
diff --git a/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx b/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx
index c4734c2dd88..4ab5c047e5c 100644
--- a/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx
+++ b/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState, useRef, createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Modal, Button } from '@wordpress/components';
@@ -53,7 +53,7 @@ function Guide( {
 
 	return (
 		<Modal
-			className={ classnames( 'components-guide', className ) }
+			className={ clsx( 'components-guide', className ) }
 			title={ contentLabel }
 			onRequestClose={ () => {
 				onFinish( currentPage, 'close' );
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js
index 0b801ddc240..ee426ed5bc2 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js
@@ -25,7 +25,7 @@ import {
 } from '@woocommerce/data';
 import { getSetting } from '@woocommerce/settings';
 import { recordEvent } from '@woocommerce/tracks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { CurrencyContext } from '@woocommerce/currency';
 
 /**
@@ -423,7 +423,7 @@ class BusinessDetails extends Component {
 		const { className, ...props } = getInputProps( name );
 		return {
 			...props,
-			className: classnames(
+			className: clsx(
 				`woocommerce-profile-wizard__${ name.replace( /\_/g, '-' ) }`,
 				className
 			),
diff --git a/plugins/woocommerce-admin/client/settings-recommendations/dismissable-list.tsx b/plugins/woocommerce-admin/client/settings-recommendations/dismissable-list.tsx
index cfeecd18c55..7642c957f46 100644
--- a/plugins/woocommerce-admin/client/settings-recommendations/dismissable-list.tsx
+++ b/plugins/woocommerce-admin/client/settings-recommendations/dismissable-list.tsx
@@ -7,7 +7,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { EllipsisMenu } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
 import { createContext, useContext } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -75,10 +75,7 @@ export const DismissableList: React.FC< {
 	return (
 		<Card
 			size="medium"
-			className={ classNames(
-				'woocommerce-dismissable-list',
-				className
-			) }
+			className={ clsx( 'woocommerce-dismissable-list', className ) }
 		>
 			<OptionNameContext.Provider value={ dismissOptionName }>
 				{ children }
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Item.js b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Item.js
index 25ceb1c4557..0ac61500946 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Item.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Item.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Fragment } from '@wordpress/element';
 import { CardBody, CardMedia, CardDivider } from '@wordpress/components';
 import { SetupRequired } from '@woocommerce/onboarding';
@@ -48,7 +48,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 	);
 	const showRecommended = isRecommended && needsSetup;
 
-	const classes = classnames(
+	const classes = clsx(
 		'woocommerce-task-payment',
 		'woocommerce-task-card',
 		needsSetup && 'woocommerce-task-payment-not-configured',
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Placeholder.js b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Placeholder.js
index c95c1016e84..d94a846cb86 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Placeholder.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Placeholder.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Fragment } from '@wordpress/element';
 import {
 	Card,
@@ -18,10 +18,7 @@ import { Text } from '@woocommerce/experimental';
 import './List.scss';
 
 const PlaceholderItem = () => {
-	const classes = classnames(
-		'woocommerce-task-payment',
-		'woocommerce-task-card'
-	);
+	const classes = clsx( 'woocommerce-task-payment', 'woocommerce-task-card' );
 
 	return (
 		<Fragment>
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/Placeholder.js b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/Placeholder.js
index 7bd911041f1..afd7cc533a0 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/Placeholder.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/Placeholder.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Card, CardBody } from '@wordpress/components';
 import { Stepper } from '@woocommerce/components';
 
 export const Placeholder = () => {
-	const classes = classnames(
+	const classes = clsx(
 		'is-loading',
 		'woocommerce-task-payment-method',
 		'woocommerce-task-card'
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/plugin-banner.tsx b/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/plugin-banner.tsx
index ba6eb342f5c..a7564aa160e 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/plugin-banner.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/plugin-banner.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -33,7 +33,7 @@ export const PluginBanner = ( {
 }: PluginBannerProps ) => {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-task-shipping-recommendation__plugins-install',
 				layout
 			) }
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js b/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js
index 2bed34ebc93..da45e5fb7f3 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js
@@ -22,7 +22,7 @@ import {
 import { recordEvent } from '@woocommerce/tracks';
 import { registerPlugin } from '@wordpress/plugins';
 import { WooOnboardingTask } from '@woocommerce/onboarding';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -587,7 +587,7 @@ export class Shipping extends Component {
 								<Button
 									isTertiary
 									onClick={ onShippingPluginInstalltionSkip }
-									className={ classNames(
+									className={ clsx(
 										'woocommerce-task-shipping-recommendations_skip-button',
 										pluginsToPromote.length === 2
 											? 'dual'
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/shipping/rates.js b/plugins/woocommerce-admin/client/task-lists/fills/shipping/rates.js
index 64bf99cda85..344f0953ec6 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/shipping/rates.js
+++ b/plugins/woocommerce-admin/client/task-lists/fills/shipping/rates.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { Flag, Form, TextControlWithAffixes } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { Icon, globe } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { CurrencyContext } from '@woocommerce/currency';
 
 const ShippingRateIcon = ( { zone } ) => (
@@ -52,7 +52,7 @@ const ShippingRateInput = ( {
 	renderInputSuffix,
 	inputProps: { className, ...restInputProps },
 } ) => {
-	const textControlClassName = classnames(
+	const textControlClassName = clsx(
 		'muriel-input-text',
 		'woocommerce-shipping-rate__control-wrapper',
 		className
diff --git a/plugins/woocommerce-admin/client/task-lists/fills/tax/components/partners.tsx b/plugins/woocommerce-admin/client/task-lists/fills/tax/components/partners.tsx
index 8a2403401eb..91c55548b3d 100644
--- a/plugins/woocommerce-admin/client/task-lists/fills/tax/components/partners.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/fills/tax/components/partners.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
 import { Children } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ export const Partners: React.FC< TaxChildProps > = ( {
 	onManual,
 	onDisable,
 } ) => {
-	const classes = classnames(
+	const classes = clsx(
 		'woocommerce-task-card',
 		'woocommerce-tax-partners',
 		`woocommerce-tax-partners__partners-count-${ Children.count(
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
index 93db998f16e..a36da14b8a8 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useState } from '@wordpress/element';
 import { EllipsisMenu } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
@@ -148,7 +148,7 @@ export const TaskListCompletedHeader: React.FC<
 	return (
 		<>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'woocommerce-task-dashboard__container setup-task-list'
 				) }
 			>
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx
index a87a6a23deb..d19bd0806c3 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Button, Card, CardHeader } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -20,7 +20,7 @@ export const TaskListCompleted = ( {
 	return (
 		<>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'woocommerce-task-dashboard__container setup-task-list'
 				) }
 			>
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx
index 3874d660b23..8f9efcfe406 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx
@@ -8,7 +8,7 @@ import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
 import { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export type TaskListItemProps = {
 	task: TaskType;
@@ -63,7 +63,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( {
 
 	const DefaultTaskItem = useCallback(
 		( props: { onClick?: () => void; isClickable?: boolean } ) => {
-			const className = classnames(
+			const className = clsx(
 				'woocommerce-task-list__item index-' + taskIndex,
 				{
 					complete: isComplete,
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx
index 3cc44fc55c9..4bea55ea3ef 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ export const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'woocommerce-task-dashboard__container setup-task-list'
 			) }
 		>
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/setup-task-list.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/setup-task-list.tsx
index d6da84ecd61..de6a6081524 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/setup-task-list.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/setup-task-list.tsx
@@ -18,7 +18,7 @@ import {
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { List, useSlot } from '@woocommerce/experimental';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useLayoutContext } from '@woocommerce/admin-layout';
 
 /**
@@ -287,7 +287,7 @@ export const SetupTaskList: React.FC< TaskListProps > = ( {
 				<ProgressHeader taskListId={ id } />
 			) : null }
 			<div
-				className={ classnames(
+				className={ clsx(
 					`woocommerce-task-dashboard__container woocommerce-task-list__${ id } setup-task-list`
 				) }
 			>
diff --git a/plugins/woocommerce-admin/client/task-lists/setup-task-list/task-list-completion-slot/task-list-completion-slot.tsx b/plugins/woocommerce-admin/client/task-lists/setup-task-list/task-list-completion-slot/task-list-completion-slot.tsx
index d8036058224..e6aa98394f8 100644
--- a/plugins/woocommerce-admin/client/task-lists/setup-task-list/task-list-completion-slot/task-list-completion-slot.tsx
+++ b/plugins/woocommerce-admin/client/task-lists/setup-task-list/task-list-completion-slot/task-list-completion-slot.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useSlot } from '@woocommerce/experimental';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ export const TaskListCompletionSlot = ( {
 	}
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'woocommerce-tasklist-completion-slot',
 				className
 			) }
diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json
index 45ce64ab3cc..f78e8d68a48 100644
--- a/plugins/woocommerce-admin/package.json
+++ b/plugins/woocommerce-admin/package.json
@@ -79,7 +79,7 @@
 		"@wordpress/warning": "wp-6.0",
 		"@xstate/react": "3.2.1",
 		"@xstate5/react": "npm:@xstate/react@4",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"core-js": "^3.34.0",
 		"debug": "^4.3.4",
 		"dompurify": "^2.4.7",
diff --git a/plugins/woocommerce-blocks/.eslintrc.js b/plugins/woocommerce-blocks/.eslintrc.js
index 3e8eba8099c..b7d5078bf9d 100644
--- a/plugins/woocommerce-blocks/.eslintrc.js
+++ b/plugins/woocommerce-blocks/.eslintrc.js
@@ -114,6 +114,11 @@ const restrictedImports = [
 		message:
 			'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
 	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
 ];
 
 module.exports = {
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx
index 1064c724d42..fc2237f70b5 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useProductDataContext } from '@woocommerce/shared-context';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { __ } from '@wordpress/i18n';
@@ -17,7 +17,7 @@ export const Block = ( props: ProductAverageRatingProps ): JSX.Element => {
 	const styleProps = useStyleProps( props );
 	const { product } = useProductDataContext();
 
-	const className = classnames(
+	const className = clsx(
 		styleProps.className,
 		'wc-block-components-product-average-rating',
 		{
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx
index c036b32ebbb..626e67a9193 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	useStoreEvents,
@@ -90,7 +90,7 @@ const AddToCartButton = ( {
 			{ ...buttonProps }
 			aria-label={ buttonAriaLabel }
 			disabled={ addingToCart }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wp-block-button__link',
 				'wp-element-button',
@@ -114,7 +114,7 @@ const AddToCartButtonPlaceholder = ( {
 }: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
 	return (
 		<button
-			className={ classnames(
+			className={ clsx(
 				'wp-block-button__link',
 				'wp-element-button',
 				'add_to_cart_button',
@@ -136,7 +136,7 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wp-block-button',
 				'wc-block-components-product-button',
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
index 7218cb22fd8..e5438903041 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	Disabled,
 	Button,
@@ -101,7 +101,7 @@ const Edit = ( {
 				<Disabled>
 					<Block
 						{ ...{ ...attributes, ...context } }
-						className={ classnames( attributes.className, {
+						className={ clsx( attributes.className, {
 							[ `has-custom-width wp-block-button__width-${ width }` ]:
 								width,
 						} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx
index 267b49937e5..6a31cbead8d 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,7 +24,7 @@ const Save = ( { attributes }: Props ): JSX.Element | null => {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				className: classnames( 'is-loading', attributes.className, {
+				className: clsx( 'is-loading', attributes.className, {
 					[ `has-custom-width wp-block-button__width-${ attributes.width }` ]:
 						attributes.width,
 				} ),
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx
index 86fff443ebf..8238447a1fb 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx
@@ -3,7 +3,7 @@
  */
 import { Fragment } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
 import {
 	useInnerBlockLayoutContext,
@@ -115,7 +115,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 	if ( ! product.id ) {
 		return (
 			<div
-				className={ classnames(
+				className={ clsx(
 					className,
 					'wc-block-components-product-image',
 					{
@@ -153,7 +153,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wc-block-components-product-image',
 				{
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
index 3f66056631b..63bdef4842a 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
@@ -43,7 +43,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 	const isDescendentOfAllProductsBlock =
 		parentName === 'woocommerce/all-products';
 
-	const wrapperClassName = classnames(
+	const wrapperClassName = clsx(
 		'wc-block-components-product-price',
 		className,
 		styleProps.className,
@@ -73,7 +73,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 
 	const pricePreview = '5000';
 	const isOnSale = prices.price !== prices.regular_price;
-	const priceClassName = classnames( {
+	const priceClassName = clsx( {
 		[ `${ parentClassName }__product-price__value` ]: parentClassName,
 		[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
 	} );
@@ -101,7 +101,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 					? pricePreview
 					: prices.regular_price
 			}
-			regularPriceClassName={ classnames( {
+			regularPriceClassName={ clsx( {
 				[ `${ parentClassName }__product-price__regular` ]:
 					parentClassName,
 			} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx
index 27d71e1bf9f..a011fb84da8 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 
 interface SingleProductTab {
@@ -18,7 +18,7 @@ const ProductTabTitle = ( {
 }: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => {
 	return (
 		<li
-			className={ classnames( `${ id }_tab`, {
+			className={ clsx( `${ id }_tab`, {
 				active,
 			} ) }
 			id={ `tab-title-${ id }` }
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx
index 62b888b591f..7e63e358f83 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -65,7 +65,7 @@ export const Block = (
 	const { product } = useProductDataContext();
 	const reviews = getRatingCount( product );
 
-	const className = classnames(
+	const className = clsx(
 		styleProps.className,
 		'wc-block-components-product-rating-counter',
 		{
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx
index 6948f603270..d7ccf760a4b 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-product-rating-stars__norating-container',
 				`${ parentClassName }-product-rating-stars__norating-container`
 			) }
@@ -93,7 +93,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
 	};
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-product-rating-stars__stars',
 				`${ parentClassName }__product-rating-stars__stars`
 			) }
@@ -124,7 +124,7 @@ export const Block = ( props: ProductRatingStarsProps ): JSX.Element | null => {
 	const rating = getAverageRating( product );
 	const reviews = getRatingCount( product );
 
-	const className = classnames(
+	const className = clsx(
 		styleProps.className,
 		'wc-block-components-product-rating-stars',
 		{
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
index 5356e2ba40a..ed3368a0d01 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-product-rating__norating-container',
 				`${ parentClassName }-product-rating__norating-container`
 			) }
@@ -91,7 +91,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
 	};
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-product-rating__stars',
 				`${ parentClassName }__product-rating__stars`
 			) }
@@ -146,7 +146,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | undefined => {
 	const rating = getAverageRating( product );
 	const reviews = getRatingCount( product );
 
-	const className = classnames(
+	const className = clsx(
 		styleProps.className,
 		'wc-block-components-product-rating',
 		{
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
index 91238003ceb..1ed112ffc9e 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Label } from '@woocommerce/blocks-components';
 import {
 	useInnerBlockLayoutContext,
@@ -40,7 +40,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-product-sale-badge',
 				className,
 				alignClass,
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js
index c678c0d3557..9d334c29884 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const save = ( { attributes } ) => {
 	if (
@@ -12,9 +12,7 @@ const save = ( { attributes } ) => {
 		return null;
 	}
 
-	return (
-		<div className={ classnames( 'is-loading', attributes.className ) } />
-	);
+	return <div className={ clsx( 'is-loading', attributes.className ) } />;
 };
 
 export default save;
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx
index cd5c47d65a1..329475b0e32 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -31,7 +31,7 @@ const Preview = ( {
 	style?: React.CSSProperties | undefined;
 } ) => (
 	<div
-		className={ classnames( className, {
+		className={ clsx( className, {
 			[ `${ parentClassName }__product-sku` ]: parentClassName,
 		} ) }
 		style={ style }
@@ -67,7 +67,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 			parentClassName={ parentClassName }
 			sku={ sku }
 			{ ...( props.isDescendantOfAllProducts && {
-				className: classnames(
+				className: clsx(
 					className,
 					'wc-block-components-product-sku wp-block-woocommerce-product-sku',
 					styleProps.className
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
index 8692b0d64d7..70b8b2f5966 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -74,7 +74,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 
 	return (
 		<div
-			className={ classnames( className, {
+			className={ clsx( className, {
 				[ `${ parentClassName }__stock-indicator` ]: parentClassName,
 				'wc-block-components-product-stock-indicator--in-stock':
 					inStock,
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.tsx
index 1c467b962b4..6e093df881b 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
 
@@ -30,7 +30,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 	if ( ! product ) {
 		return (
 			<div
-				className={ classnames(
+				className={ clsx(
 					className,
 					`wc-block-components-product-summary`,
 					{
@@ -52,7 +52,7 @@ const Block = ( props: Props ): JSX.Element | null => {
 
 	return (
 		<Summary
-			className={ classnames(
+			className={ clsx(
 				className,
 				styleProps.className,
 				`wc-block-components-product-summary`,
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/save.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/save.tsx
index 03a720e27df..b445c4ceddf 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/save.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 type Props = {
 	attributes: Record< string, unknown > & {
@@ -14,7 +14,7 @@ export const Save = ( { attributes }: Props ): JSX.Element => {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				className: classnames( 'is-loading', attributes.className ),
+				className: clsx( 'is-loading', attributes.className ),
 			} ) }
 		/>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.tsx
index 2179336038e..24981ba69ce 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -64,7 +64,7 @@ export const Block = ( props: Props ): JSX.Element => {
 		return (
 			<TagName
 				headingLevel={ headingLevel }
-				className={ classnames(
+				className={ clsx(
 					className,
 					styleProps.className,
 					'wc-block-components-product-title',
@@ -83,7 +83,7 @@ export const Block = ( props: Props ): JSX.Element => {
 	return (
 		<TagName
 			headingLevel={ headingLevel }
-			className={ classnames(
+			className={ clsx(
 				className,
 				styleProps.className,
 				'wc-block-components-product-title',
diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/save.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/save.tsx
index 03a720e27df..b445c4ceddf 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/save.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 type Props = {
 	attributes: Record< string, unknown > & {
@@ -14,7 +14,7 @@ export const Save = ( { attributes }: Props ): JSX.Element => {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				className: classnames( 'is-loading', attributes.className ),
+				className: clsx( 'is-loading', attributes.className ),
 			} ) }
 		/>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx
index b0e1412fd9e..aa3a790656a 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/button/index.tsx
@@ -3,7 +3,7 @@
  */
 import { Button as AriakitButton } from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import type { ButtonProps as AriakitButtonProps } from '@ariakit/react';
 import deprecated from '@wordpress/deprecated';
@@ -73,7 +73,7 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps | LinkProps >(
 			...rest
 		} = props;
 
-		const buttonClassName = classNames(
+		const buttonClassName = clsx(
 			'wc-block-components-button',
 			'wp-element-button',
 			className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
index f294d931318..587ea5b1dbc 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import QuantitySelector from '@woocommerce/base-components/quantity-selector';
@@ -203,7 +203,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
 
 		return (
 			<tr
-				className={ classnames(
+				className={ clsx(
 					'wc-block-cart-items__row',
 					cartItemClassNameFilter,
 					{
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
index 88a6801f058..59256f20000 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { CartResponseItem } from '@woocommerce/types';
 import { createRef, useEffect, useRef } from '@wordpress/element';
@@ -72,7 +72,7 @@ const CartLineItemsTable = ( {
 
 	return (
 		<table
-			className={ classnames( 'wc-block-cart-items', className ) }
+			className={ clsx( 'wc-block-cart-items', className ) }
 			ref={ tableRef }
 			tabIndex={ -1 }
 		>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx
index 7846f0fbee5..36092522df1 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx
@@ -18,7 +18,7 @@ import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { useShallowEqual } from '@woocommerce/base-hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	AddressFormValues,
 	ContactFormValues,
@@ -231,7 +231,7 @@ const Form = < T extends AddressFormValues | ContactFormValues >( {
 						<Combobox
 							key={ field.key }
 							{ ...fieldProps }
-							className={ classnames(
+							className={ clsx(
 								'wc-block-components-select-input',
 								`wc-block-components-select-input-${ field.key }`.replaceAll(
 									'/',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
index 950276247ab..3d2be02e888 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { sprintf, _n } from '@wordpress/i18n';
 import { Label } from '@woocommerce/blocks-components';
 import ProductPrice from '@woocommerce/base-components/product-price';
@@ -124,7 +124,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-order-summary-item',
 				cartItemClassNameFilter
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx
index c4f8d4acf2c..bef31515559 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-icons/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { PaymentMethodIcons as PaymentMethodIconsType } from '@woocommerce/types';
 
 /**
@@ -32,7 +32,7 @@ export const PaymentMethodIcons = ( {
 		return null;
 	}
 
-	const containerClass = classnames(
+	const containerClass = clsx(
 		'wc-block-components-payment-method-icons',
 		{
 			'wc-block-components-payment-method-icons--align-left':
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-label/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-label/index.tsx
index b12ee2426b4..64f45948046 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-label/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/payment-method-label/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { checkPayment } from '@woocommerce/icons';
 import {
 	Icon,
@@ -59,7 +59,7 @@ export const PaymentMethodLabel = ( {
 			objectHasProp( namedIcons, iconToCheck ),
 		[ hasIcon ]
 	);
-	const className = classnames( 'wc-block-components-payment-method-label', {
+	const className = clsx( 'wc-block-components-payment-method-label', {
 		'wc-block-components-payment-method-label--with-icon': hasIcon,
 	} );
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
index 3c5b3b3dca0..48e10ef51c3 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { Icon, check } from '@wordpress/icons';
 import Button from '@woocommerce/base-components/button';
@@ -25,7 +25,7 @@ const PlaceOrderButton = ( {
 
 	return (
 		<Button
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-checkout-place-order-button',
 				{
 					'wc-block-components-checkout-place-order-button--full-width':
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.tsx
index 63b91f37edf..5857c1e5266 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ReactNode } from 'react';
 
 /**
@@ -19,10 +19,7 @@ const ProductBadge = ( {
 }: ProductBadgeProps ): JSX.Element => {
 	return (
 		<div
-			className={ classNames(
-				'wc-block-components-product-badge',
-				className
-			) }
+			className={ clsx( 'wc-block-components-product-badge', className ) }
 		>
 			{ children }
 		</div>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
index 2b60f2ed2c1..29efc55fd29 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Label, Panel } from '@woocommerce/blocks-components';
@@ -125,7 +125,7 @@ export const ShippingRatesControlPackage = ( {
 	if ( shouldBeCollapsible ) {
 		return (
 			<Panel
-				className={ classNames(
+				className={ clsx(
 					'wc-block-components-shipping-rates-control__package',
 					className,
 					{
@@ -147,7 +147,7 @@ export const ShippingRatesControlPackage = ( {
 
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-shipping-rates-control__package',
 				className,
 				{
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index df6bdfdda74..b8a69e4eac4 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createInterpolateElement } from '@wordpress/element';
 import {
 	FormattedMonetaryAmount,
@@ -115,7 +115,7 @@ const TotalsFooterItem = ( {
 
 	return (
 		<TotalsItem
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-totals-footer-item',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
index 40c49ebae53..8abdfeb8180 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
@@ -94,7 +94,7 @@ export const TotalsShipping = ( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-totals-shipping',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx
index e75aafaf371..eab707f80ff 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useId, useRef } from '@wordpress/element';
 import { ComboboxControl } from 'wordpress-components';
@@ -93,7 +93,7 @@ const Combobox = ( {
 	return (
 		<div
 			id={ controlId }
-			className={ classnames( 'wc-block-components-combobox', className, {
+			className={ clsx( 'wc-block-components-combobox', className, {
 				'is-active': value,
 				'has-error': error?.message && ! error?.hidden,
 			} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.tsx b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.tsx
index 37ebb32120c..30091aa33ec 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.tsx
@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -38,10 +38,7 @@ export const CountryInput = ( {
 
 	return (
 		<div
-			className={ classnames(
-				className,
-				'wc-block-components-country-input'
-			) }
+			className={ clsx( className, 'wc-block-components-country-input' ) }
 		>
 			<Combobox
 				id={ id }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx
index 0f6767d99c2..1cec1e0cc5a 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx
@@ -5,7 +5,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useDebounce } from 'use-debounce';
 import type { ForwardedRef, KeyboardEvent, RefObject } from 'react';
 import { __ } from '@wordpress/i18n';
@@ -133,17 +133,14 @@ const UnforwardedDrawer = (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ overlayRef }
-			className={ classNames(
-				'wc-block-components-drawer__screen-overlay',
-				{
-					'wc-block-components-drawer__screen-overlay--is-hidden':
-						! isOpen,
-					'wc-block-components-drawer__screen-overlay--with-slide-in':
-						slideIn,
-					'wc-block-components-drawer__screen-overlay--with-slide-out':
-						slideOut,
-				}
-			) }
+			className={ clsx( 'wc-block-components-drawer__screen-overlay', {
+				'wc-block-components-drawer__screen-overlay--is-hidden':
+					! isOpen,
+				'wc-block-components-drawer__screen-overlay--with-slide-in':
+					slideIn,
+				'wc-block-components-drawer__screen-overlay--with-slide-out':
+					slideOut,
+			} ) }
 			onKeyDown={ handleEscapeKeyDown }
 			onClick={ ( e ) => {
 				// If click was done directly in the overlay element and not one
@@ -154,10 +151,7 @@ const UnforwardedDrawer = (
 			} }
 		>
 			<div
-				className={ classNames(
-					className,
-					'wc-block-components-drawer'
-				) }
+				className={ clsx( className, 'wc-block-components-drawer' ) }
 				ref={ drawerRef }
 				role="dialog"
 				tabIndex={ -1 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/index.tsx
index 0924509323c..750b3698c82 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Label } from '@woocommerce/blocks-components';
 
 /**
@@ -26,7 +26,7 @@ const FilterResetButton = ( {
 }: FilterResetButtonProps ): JSX.Element => {
 	return (
 		<button
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-filter-reset-button',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/index.tsx
index 364c74185e0..d0f4f34b00b 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/filter-submit-button/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Label } from '@woocommerce/blocks-components';
 
 /**
@@ -31,7 +31,7 @@ const FilterSubmitButton = ( {
 	return (
 		<button
 			type="submit"
-			className={ classNames(
+			className={ clsx(
 				'wp-block-button__link',
 				'wc-block-filter-submit-button',
 				'wc-block-components-filter-submit-button',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/index.tsx
index 72e5b38a871..ef897b14eca 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { FormTokenField as WPFormTokenField } from 'wordpress-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -39,7 +39,7 @@ const FormTokenField = ( {
 }: Props ) => {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'wc-blocks-components-form-token-field-wrapper',
 				className,
 				{
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/form/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/form/index.tsx
index 99d2a12e971..d83d5c53797 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/form/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/form/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { FormEvent } from 'react';
 
 interface FormProps {
@@ -22,7 +22,7 @@ const Form = ( {
 
 	return (
 		<form
-			className={ classnames( 'wc-block-components-form', className ) }
+			className={ clsx( 'wc-block-components-form', className ) }
 			onSubmit={ formOnSubmit }
 		>
 			{ children }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/loading-mask/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/loading-mask/index.tsx
index b1131aa3c48..a5fafa2bd61 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/loading-mask/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/loading-mask/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Spinner } from '@woocommerce/blocks-components';
 
 /**
@@ -27,13 +27,13 @@ const LoadingMask = ( {
 }: LoadingMaskProps ): JSX.Element => {
 	return (
 		<div
-			className={ classNames( className, {
+			className={ clsx( className, {
 				'wc-block-components-loading-mask': isLoading,
 			} ) }
 		>
 			{ isLoading && showSpinner && <Spinner /> }
 			<div
-				className={ classNames( {
+				className={ clsx( {
 					'wc-block-components-loading-mask__children': isLoading,
 				} ) }
 				aria-hidden={ isLoading }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
index 2a7d631a0ee..78f5d871405 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { Icon, close } from '@wordpress/icons';
 
@@ -53,7 +53,7 @@ const NoticeBanner = ( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wc-block-components-notice-banner',
 				'is-' + status,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/pagination/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/pagination/index.tsx
index 4a1ac4f81d0..8ddb0c63be1 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/pagination/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/pagination/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Label } from '@woocommerce/blocks-components';
 
 /**
@@ -104,7 +104,7 @@ const Pagination = ( {
 			) }
 			{ showFirstPage && (
 				<button
-					className={ classNames(
+					className={ clsx(
 						'wc-block-pagination-page',
 						'wc-block-components-pagination__page',
 						{
@@ -139,7 +139,7 @@ const Pagination = ( {
 				return (
 					<button
 						key={ page }
-						className={ classNames(
+						className={ clsx(
 							'wc-block-pagination-page',
 							'wc-block-components-pagination__page',
 							{
@@ -177,7 +177,7 @@ const Pagination = ( {
 			) }
 			{ showLastPage && (
 				<button
-					className={ classNames(
+					className={ clsx(
 						'wc-block-pagination-page',
 						'wc-block-components-pagination__page',
 						{
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.tsx
index d8740601f00..433b00c1b23 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.tsx
@@ -10,7 +10,7 @@ import {
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
 import { Currency, isObject } from '@woocommerce/types';
 import { useDebouncedCallback } from 'use-debounce';
@@ -300,7 +300,7 @@ const PriceSlider = ( {
 
 	const debouncedUpdateQuery = useDebouncedCallback( onSubmit, 600 );
 
-	const classes = classnames(
+	const classes = clsx(
 		'wc-block-price-filter',
 		'wc-block-components-price-slider',
 		showInputFields && 'wc-block-price-filter--has-input-fields',
@@ -332,7 +332,7 @@ const PriceSlider = ( {
 
 	const slider = (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-price-filter__range-input-wrapper',
 				'wc-block-components-price-slider__range-input-wrapper',
 				{ 'is-loading': isLoading && isUpdating }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list-item/index.tsx
index 9fc17f9732a..d6640390311 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list-item/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list-item/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
 import { withInstanceId } from '@wordpress/compose';
 
@@ -19,13 +19,9 @@ const ProductListItem = ( {
 	const { layoutConfig } = attributes;
 	const { parentClassName, parentName } = useInnerBlockLayoutContext();
 	const isLoading = Object.keys( product ).length === 0;
-	const classes = classnames(
-		`${ parentClassName }__product`,
-		'wc-block-layout',
-		{
-			'is-loading': isLoading,
-		}
-	);
+	const classes = clsx( `${ parentClassName }__product`, 'wc-block-layout', {
+		'is-loading': isLoading,
+	} );
 
 	return (
 		<li className={ classes } aria-hidden={ isLoading }>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list.tsx
index df7aafdce3e..2c851a7376e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list.tsx
@@ -3,7 +3,7 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import fastDeepEqual from 'fast-deep-equal/es6';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Pagination from '@woocommerce/base-components/pagination';
 import { useEffect } from '@wordpress/element';
 import { usePrevious } from '@woocommerce/base-hooks';
@@ -196,7 +196,7 @@ const ProductList = ( {
 		const { columns, rows, alignButtons, align } = attributes;
 		const alignClass = typeof align !== 'undefined' ? 'align' + align : '';
 
-		return classnames(
+		return clsx(
 			parentClassName,
 			alignClass,
 			'has-' + columns + '-columns',
@@ -248,7 +248,7 @@ const ProductList = ( {
 			{ ! hasProducts && ! hasFilters && <NoProducts /> }
 			{ hasProducts && (
 				<ul
-					className={ classnames( `${ parentClassName }__products`, {
+					className={ clsx( `${ parentClassName }__products`, {
 						'is-loading-products': productsLoading,
 					} ) }
 				>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx
index 02e3794fe78..8b8125a61d7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { decodeEntities } from '@wordpress/html-entities';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { AnchorHTMLAttributes, HTMLAttributes } from 'react';
 
 /**
@@ -48,7 +48,7 @@ export const ProductName = ( {
 	onClick,
 	...props
 }: ProductNameProps ): JSX.Element => {
-	const classes = classnames( 'wc-block-components-product-name', className );
+	const classes = clsx( 'wc-block-components-product-name', className );
 	if ( disabled ) {
 		// Cast the props as type HTMLSpanElement.
 		const disabledProps = props as HTMLAttributes< HTMLSpanElement >;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx
index e1000fc17fc..03a0856fbf8 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { formatPrice } from '@woocommerce/price-format';
 import { createInterpolateElement } from '@wordpress/element';
 import type { Currency } from '@woocommerce/types';
@@ -59,7 +59,7 @@ const PriceRange = ( {
 			</span>
 			<span aria-hidden={ true }>
 				<FormattedMonetaryAmount
-					className={ classNames(
+					className={ clsx(
 						'wc-block-components-product-price__value',
 						priceClassName
 					) }
@@ -69,7 +69,7 @@ const PriceRange = ( {
 				/>
 				&nbsp;&mdash;&nbsp;
 				<FormattedMonetaryAmount
-					className={ classNames(
+					className={ clsx(
 						'wc-block-components-product-price__value',
 						priceClassName
 					) }
@@ -139,7 +139,7 @@ const SalePrice = ( {
 				currency={ currency }
 				renderText={ ( value ) => (
 					<del
-						className={ classNames(
+						className={ clsx(
 							'wc-block-components-product-price__regular',
 							regularPriceClassName
 						) }
@@ -157,7 +157,7 @@ const SalePrice = ( {
 				currency={ currency }
 				renderText={ ( value ) => (
 					<ins
-						className={ classNames(
+						className={ clsx(
 							'wc-block-components-product-price__value',
 							'is-discounted',
 							priceClassName
@@ -262,7 +262,7 @@ const ProductPrice = ( {
 	regularPriceStyle,
 	style,
 }: ProductPriceProps ): JSX.Element => {
-	const wrapperClassName = classNames(
+	const wrapperClassName = clsx(
 		className,
 		'price',
 		'wc-block-components-product-price',
@@ -280,7 +280,7 @@ const ProductPrice = ( {
 	const isDiscounted = regularPrice && price && price < regularPrice;
 	let priceComponent = (
 		<span
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-product-price__value',
 				priceClassName
 			) }
@@ -312,7 +312,7 @@ const ProductPrice = ( {
 	} else if ( price ) {
 		priceComponent = (
 			<FormattedMonetaryAmount
-				className={ classNames(
+				className={ clsx(
 					'wc-block-components-product-price__value',
 					priceClassName
 				) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-rating/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-rating/index.tsx
index 54e9ef83429..ceb11948fd9 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-rating/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-rating/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -14,7 +14,7 @@ const Rating = ( {
 	rating,
 	ratedProductsCount,
 }: RatingProps ): JSX.Element => {
-	const ratingClassName = classNames(
+	const ratingClassName = clsx(
 		'wc-block-components-product-rating',
 		className
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx
index f1c7c70a8fe..5c06589dc54 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useRef } from '@wordpress/element';
 import { DOWN, UP } from '@wordpress/keycodes';
 import { useDebouncedCallback } from 'use-debounce';
@@ -62,10 +62,7 @@ const QuantitySelector = ( {
 	itemName = '',
 	disabled,
 }: QuantitySelectorProps ): JSX.Element => {
-	const classes = classNames(
-		'wc-block-components-quantity-selector',
-		className
-	);
+	const classes = clsx( 'wc-block-components-quantity-selector', className );
 
 	const inputRef = useRef< HTMLInputElement | null >( null );
 	const decreaseButtonRef = useRef< HTMLButtonElement | null >( null );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx
index e1797e8300b..a1a976ae5c2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ReadMore from '@woocommerce/base-components/read-more';
 import { ReviewBlockAttributes } from '@woocommerce/blocks/reviews/attributes';
 
@@ -167,7 +167,7 @@ const ReviewListItem = ( { attributes, review = {} }: ReviewListItemProps ) => {
 
 	return (
 		<li
-			className={ classNames(
+			className={ clsx(
 				'wc-block-review-list-item__item',
 				'wc-block-components-review-list-item__item',
 				{
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.tsx b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.tsx
index d2e8d67b585..7d78d0646e6 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/main.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -14,10 +14,7 @@ const Main = forwardRef< HTMLInputElement, ForwardRefProps >(
 		return (
 			<div
 				ref={ ref }
-				className={ classNames(
-					'wc-block-components-main',
-					className
-				) }
+				className={ clsx( 'wc-block-components-main', className ) }
 			>
 				{ children }
 			</div>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx
index 47ed2d6026f..f298249f6e3 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { ContainerWidthContextProvider } from '@woocommerce/base-context';
 
 /**
@@ -19,7 +19,7 @@ const SidebarLayout = ( {
 }: SidebarLayoutProps ): JSX.Element => {
 	return (
 		<ContainerWidthContextProvider
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-sidebar-layout',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx
index 1d4bcb5c9bb..c4584bdc54a 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -14,10 +14,7 @@ const Sidebar = forwardRef< HTMLDivElement, ForwardRefProps >(
 		return (
 			<div
 				ref={ ref }
-				className={ classNames(
-					'wc-block-components-sidebar',
-					className
-				) }
+				className={ clsx( 'wc-block-components-sidebar', className ) }
 			>
 				{ children }
 			</div>
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx
index af7e92e4f5f..5cf17552b75 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { NoticeType } from '@woocommerce/types';
 import { useReducedMotion } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
@@ -38,7 +38,7 @@ const SnackbarList = ( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wc-block-components-notice-snackbar-list'
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
index a4758e1ea2e..7e2efcf57ac 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useEffect } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -33,7 +33,7 @@ export const Snackbar = ( {
 
 	return (
 		<NoticeBanner
-			className={ classNames(
+			className={ clsx(
 				className,
 				'wc-block-components-notice-snackbar'
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx b/plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx
index 12a0cc7bd86..a569716cd80 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo, useEffect, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { ValidatedTextInput } from '@woocommerce/blocks-components';
 
 /**
@@ -92,7 +92,7 @@ const StateInput = ( {
 	if ( options.length > 0 ) {
 		return (
 			<Combobox
-				className={ classnames(
+				className={ clsx(
 					className,
 					'wc-block-components-state-input'
 				) }
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx
index 3c03a107049..79dd2e917c7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx
@@ -3,7 +3,7 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 import { useContainerQueries } from '@woocommerce/base-hooks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export type ContainerWidthContextProps = {
 	hasContainerWidth: boolean;
@@ -54,7 +54,7 @@ export const ContainerWidthContextProvider = ( {
 
 	return (
 		<ContainerWidthContext.Provider value={ contextValue }>
-			<div className={ classNames( className, containerClassName ) }>
+			<div className={ clsx( className, containerClassName ) }>
 				{ resizeListener }
 				{ children }
 			</div>
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts
index 363887b01fd..7e064ff4ba2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isString, isObject } from '@woocommerce/types';
 import type { Style as StyleEngineProperties } from '@wordpress/style-engine/src/types';
 import type { CSSProperties } from 'react';
@@ -72,7 +72,7 @@ export const useStyleProps = ( props: BlockAttributes ): StyleProps => {
 	const typographyProps = useTypographyProps( styleAttributes );
 
 	return {
-		className: classnames(
+		className: clsx(
 			typographyProps.className,
 			colorProps.className,
 			borderProps.className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts b/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts
index 62101ad2cd8..6feba58120a 100644
--- a/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { paramCase as kebabCase } from 'change-case';
 import { getCSSRules } from '@wordpress/style-engine';
 import { isObject } from '@woocommerce/types';
@@ -49,7 +49,7 @@ function getBorderClassName( attributes: {
 		? getColorClassName( 'border-color', borderColor )
 		: '';
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': !! borderColor || !! style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );
@@ -85,7 +85,7 @@ export function getColorClassesAndStyles( props: {
 	const hasGradient = gradientClass || style?.color?.gradient;
 
 	// Determine color CSS class name list.
-	const className = classnames( textClass, gradientClass, {
+	const className = clsx( textClass, gradientClass, {
 		// Don't apply the background class if there's a gradient.
 		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block-wrapper.tsx b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block-wrapper.tsx
index 75a47987890..1878dc39829 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block-wrapper.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block-wrapper.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
@@ -17,7 +17,7 @@ const BlockWrapper = ( props: Record< string, unknown > ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				isString( props.className ) ? props.className : '',
 				styleProps.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.tsx
index 0dfdb9d2a30..8ec946a1970 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.tsx
@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { useMemo, useEffect, useState } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Label } from '@woocommerce/blocks-components';
 import {
 	isAttributeQueryCollection,
@@ -329,7 +329,7 @@ const ActiveFiltersBlock = ( {
 
 	setWrapperVisibility( true );
 
-	const listClasses = classnames( 'wc-block-active-filters__list', {
+	const listClasses = clsx( 'wc-block-active-filters__list', {
 		'wc-block-active-filters__list--chips':
 			blockAttributes.displayStyle === 'chips',
 		'wc-block-active-filters--loading': shouldShowLoadingPlaceholders,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/deprecated.tsx
index ec83b4d631d..b89e0111be1 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/deprecated.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/deprecated.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ const v1 = {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 				{ ...data }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.tsx
index 01e1e25a20e..abedf4dc3cb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.tsx
@@ -4,7 +4,7 @@
 import { registerBlockType } from '@wordpress/blocks';
 import { toggle } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -37,7 +37,7 @@ registerBlockType( metadata, {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 			>
 				<span
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block-wrapper.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block-wrapper.tsx
index 75a47987890..1878dc39829 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block-wrapper.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block-wrapper.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
@@ -17,7 +17,7 @@ const BlockWrapper = ( props: Record< string, unknown > ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				isString( props.className ) ? props.className : '',
 				styleProps.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx
index 62b7e7930ac..2dbd8b8a8e7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx
@@ -33,7 +33,7 @@ import {
 } from '@woocommerce/utils';
 import FormTokenField from '@woocommerce/base-components/form-token-field';
 import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -531,7 +531,7 @@ const AttributeFilterBlock = ( {
 		<>
 			{ ! isEditor && blockAttributes.heading && filterHeading }
 			<div
-				className={ classnames(
+				className={ clsx(
 					'wc-block-attribute-filter',
 					`style-${ blockAttributes.displayStyle }`
 				) }
@@ -540,7 +540,7 @@ const AttributeFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( {
+							className={ clsx( {
 								'single-selection': ! multiple,
 								'is-loading': isLoading,
 							} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/deprecated.tsx
index f64f85e5ee4..5587bc367aa 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/deprecated.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/deprecated.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -59,7 +59,7 @@ const v1 = {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 				{ ...data }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.tsx
index fbc3c7e019a..b176ffdd012 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.tsx
@@ -13,7 +13,7 @@ import { Icon, category, external } from '@wordpress/icons';
 import { SearchListControl } from '@woocommerce/editor-components/search-list-control';
 import { getAdminLink, getSetting } from '@woocommerce/settings';
 import BlockTitle from '@woocommerce/editor-components/block-title';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { SearchListItem } from '@woocommerce/editor-components/search-list-control/types';
 import { AttributeSetting } from '@woocommerce/types';
 import {
@@ -380,7 +380,7 @@ const Edit = ( {
 			{ isEditing ? (
 				renderEditMode()
 			) : (
-				<div className={ classnames( 'wc-block-attribute-filter' ) }>
+				<div className={ clsx( 'wc-block-attribute-filter' ) }>
 					{ heading && (
 						<BlockTitle
 							className="wc-block-attribute-filter__title"
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx
index a0c09734a34..f568d37b042 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx
@@ -4,7 +4,7 @@
 import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Icon, category } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -39,7 +39,7 @@ registerBlockType( metadata, {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 			/>
 		);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js
index 05930b6a24b..ffbc23b8f89 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js
@@ -7,7 +7,7 @@ import {
 } from '@woocommerce/base-context/hooks';
 import { cloneElement, useCallback } from '@wordpress/element';
 import { useEditorContext } from '@woocommerce/base-context';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { RadioControlAccordion } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getPaymentMethods } from '@woocommerce/blocks-registry';
@@ -91,7 +91,7 @@ const PaymentMethodOptions = () => {
 		Object.keys( savedPaymentMethods ).length === 0 &&
 		Object.keys( paymentMethods ).length === 1;
 
-	const singleOptionClass = classNames( {
+	const singleOptionClass = clsx( {
 		'disable-radio-control': isSinglePaymentMethod,
 	} );
 	return isExpressPaymentMethodActive ? null : (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
index 18913df3586..6376afc623f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
@@ -47,7 +47,7 @@ export const Edit = ( { clientId, className, attributes, setAttributes } ) => {
 		[ 'woocommerce/empty-cart-block', {}, [] ],
 	];
 	const blockProps = useBlockPropsWithLocking( {
-		className: classnames( className, 'wp-block-woocommerce-cart', {
+		className: clsx( className, 'wp-block-woocommerce-cart', {
 			'is-editor-preview': isPreview,
 		} ),
 	} );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart/index.js
index e4bb26a971a..cc50fe2c0e9 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/index.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { cart } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
@@ -70,10 +70,7 @@ const settings = {
 			save: ( { attributes } ) => {
 				return (
 					<div
-						className={ classnames(
-							'is-loading',
-							attributes.className
-						) }
+						className={ clsx( 'is-loading', attributes.className ) }
 					>
 						<InnerBlocks.Content />
 					</div>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
index f2fa359c445..90e0443931f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -17,12 +17,7 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	}
 
 	return (
-		<div
-			className={ classnames(
-				'wc-block-cart__payment-options',
-				className
-			) }
-		>
+		<div className={ clsx( 'wc-block-cart__payment-options', className ) }>
 			<CartExpressPayment />
 		</div>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
index 8acfc538b78..8bf88316bb3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -19,7 +19,7 @@ export const Edit = ( {
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods':
 				hasExpressPaymentMethods,
 		} ),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx
index 481bd9e5b54..cb33c092796 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Main } from '@woocommerce/base-components/sidebar-layout';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const FrontendBlock = ( {
 	children,
@@ -12,7 +12,7 @@ const FrontendBlock = ( {
 	className: string;
 } ): JSX.Element => {
 	return (
-		<Main className={ classnames( 'wc-block-cart__main', className ) }>
+		<Main className={ clsx( 'wc-block-cart__main', className ) }>
 			{ children }
 		</Main>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
index 9e8d95928c5..1a4d71733bd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const Block = ( {
 	className,
@@ -11,9 +11,7 @@ const Block = ( {
 	content: string;
 } ): JSX.Element => {
 	return (
-		<span
-			className={ classnames( className, 'wc-block-cart__totals-title' ) }
-		>
+		<span className={ clsx( className, 'wc-block-cart__totals-title' ) }>
 			{ content }
 		</span>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
index 97600b63206..bfa354cefbd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,10 +24,7 @@ export const Edit = ( {
 	return (
 		<div { ...blockProps }>
 			<span
-				className={ classnames(
-					className,
-					'wc-block-cart__totals-title'
-				) }
+				className={ clsx( className, 'wc-block-cart__totals-title' ) }
 			>
 				<PlainText
 					className={ '' }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
index 583fc60244d..7b7c8d098ba 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
 
 /**
@@ -17,9 +17,7 @@ const FrontendBlock = ( {
 	className?: string;
 } ): JSX.Element => {
 	return (
-		<Sidebar
-			className={ classnames( 'wc-block-cart__sidebar', className ) }
-		>
+		<Sidebar className={ clsx( 'wc-block-cart__sidebar', className ) }>
 			{ children }
 		</Sidebar>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
index 94eff4fb1e1..b46b9f53728 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
@@ -39,7 +39,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 			hidden={ currentView !== 'woocommerce/filled-cart-block' }
 		>
 			<SidebarLayout
-				className={ classnames( 'wc-block-cart', {
+				className={ clsx( 'wc-block-cart', {
 					'has-dark-controls': hasDarkControls,
 				} ) }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
index 0deb19f660c..7d2f134deee 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -23,7 +23,7 @@ const FrontendBlock = ( {
 	if ( cartIsLoading || cartItems.length >= 1 ) {
 		return (
 			<SidebarLayout
-				className={ classnames( 'wc-block-cart', className, {
+				className={ clsx( 'wc-block-cart', className, {
 					'has-dark-controls': hasDarkControls,
 				} ) }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
index 760138f9c10..60f46813942 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import Button from '@woocommerce/base-components/button';
 import { CHECKOUT_URL } from '@woocommerce/block-settings';
@@ -104,7 +104,7 @@ const Block = ( {
 	);
 
 	return (
-		<div className={ classnames( 'wc-block-cart__submit', className ) }>
+		<div className={ clsx( 'wc-block-cart__submit', className ) }>
 			{ positionReferenceElement }
 			{ /* The non-sticky container must always be visible because it gives height to its parent, which is required to calculate when it becomes visible in the viewport. */ }
 			<div className="wc-block-cart__submit-container">
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-wrapper/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-wrapper/index.tsx
index bd9f5349c79..88c2087a827 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-wrapper/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-wrapper/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ export const AddressWrapper = ( {
 	addressCard: () => JSX.Element;
 	addressForm: () => JSX.Element;
 } ): JSX.Element | null => {
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'wc-block-components-address-address-wrapper',
 		{
 			'is-editing': isEditing,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/block.tsx
index 66548b7132c..905bf6af4ad 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { createInterpolateElement, useEffect } from '@wordpress/element';
 import {
 	useStoreCart,
@@ -190,7 +190,7 @@ const Block = ( {
 			<SlotFillProvider>
 				<CheckoutProvider>
 					<SidebarLayout
-						className={ classnames( 'wc-block-checkout', {
+						className={ clsx( 'wc-block-checkout', {
 							'has-dark-controls': attributes.hasDarkControls,
 						} ) }
 					>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
index 0bcc1791092..54ca73d261f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -207,7 +207,7 @@ export const Edit = ( {
 				<SlotFillProvider>
 					<CheckoutProvider>
 						<SidebarLayout
-							className={ classnames( 'wc-block-checkout', {
+							className={ clsx( 'wc-block-checkout', {
 								'has-dark-controls': attributes.hasDarkControls,
 							} ) }
 						>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-block.tsx
index 3bad33a7938..fd58d8d5296 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
 import { useCheckoutBlockContext } from '@woocommerce/blocks/checkout/context';
 
@@ -32,7 +32,7 @@ export const FormStepBlock = ( {
 
 	const { title = '', description = '' } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wc-block-components-checkout-step', className, {
+		className: clsx( 'wc-block-components-checkout-step', className, {
 			'wc-block-components-checkout-step--with-step-number':
 				showFormStepNumbers,
 		} ),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/index.tsx
index 4b289d7ec4a..33805d52136 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { fields } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { registerBlockType, createBlock } from '@wordpress/blocks';
@@ -60,10 +60,7 @@ const settings = {
 			save( { attributes }: { attributes: { className: string } } ) {
 				return (
 					<div
-						className={ classnames(
-							'is-loading',
-							attributes.className
-						) }
+						className={ clsx( 'is-loading', attributes.className ) }
 					/>
 				);
 			},
@@ -164,10 +161,7 @@ const settings = {
 			save( { attributes }: { attributes: { className: string } } ) {
 				return (
 					<div
-						className={ classnames(
-							'is-loading',
-							attributes.className
-						) }
+						className={ clsx( 'is-loading', attributes.className ) }
 					/>
 				);
 			},
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
index c21fb6dabec..fc7229fa327 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getSetting } from '@woocommerce/settings';
 import {
 	PlaceOrderButton,
@@ -59,9 +59,7 @@ const Block = ( {
 	}
 
 	return (
-		<div
-			className={ classnames( 'wc-block-checkout__actions', className ) }
-		>
+		<div className={ clsx( 'wc-block-checkout__actions', className ) }>
 			<StoreNoticesContainer
 				context={ noticeContexts.CHECKOUT_ACTIONS }
 			/>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
index d5280064bd7..44b17fc42b1 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -101,7 +101,7 @@ export const Edit = ( {
 						) }
 					</Noninteractive>
 					<EditableButton
-						className={ classnames(
+						className={ clsx(
 							'wc-block-cart__submit-button',
 							'wc-block-components-checkout-place-order-button',
 							{
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/edit.tsx
index 3eba1a05644..d8487590b0f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { FormStepBlock } from '@woocommerce/blocks/checkout/form-step';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { ORDER_FORM_KEYS } from '@woocommerce/block-settings';
 
 /**
@@ -32,7 +32,7 @@ export const Edit = ( {
 		<FormStepBlock
 			setAttributes={ setAttributes }
 			attributes={ attributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__additional-information-fields',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/frontend.tsx
index 2f37b2a17ad..fb007be0b2d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { FormStep } from '@woocommerce/blocks-components';
 import { ORDER_FORM_KEYS } from '@woocommerce/block-settings';
 import { useSelect } from '@wordpress/data';
@@ -39,7 +39,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="additional-information-fields"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__additional-information-fields',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
index a1e84beb607..672a0c8612b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -70,7 +70,7 @@ export const Edit = ( {
 		<FormStepBlock
 			setAttributes={ setAttributes }
 			attributes={ attributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__billing-fields',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
index 4e0d0c5248f..a3be30f0734 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
@@ -58,10 +58,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="billing-fields"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
-				'wc-block-checkout__billing-fields',
-				className
-			) }
+			className={ clsx( 'wc-block-checkout__billing-fields', className ) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showFormStepNumbers }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx
index 2e36c55289a..276ff06fb52 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, ExternalLink } from '@wordpress/components';
@@ -35,7 +35,7 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__contact-fields',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx
index 50fc8f54ed5..760461e66aa 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
@@ -37,10 +37,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="contact-fields"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
-				'wc-block-checkout__contact-fields',
-				className
-			) }
+			className={ clsx( 'wc-block-checkout__contact-fields', className ) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showFormStepNumbers }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
index 91ca1b647e4..f076388889d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ export const Edit = ( {
 	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
 	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			{
 				'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods':
 					hasExpressPaymentMethods,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
index 5edd98650c2..a94903862ed 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -31,10 +31,7 @@ export const Edit = ( {
 	};
 } ): JSX.Element => {
 	const blockProps = useBlockProps( {
-		className: classnames(
-			'wc-block-checkout__main',
-			attributes?.className
-		),
+		className: clsx( 'wc-block-checkout__main', attributes?.className ),
 	} );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_FIELDS );
 
@@ -67,7 +64,7 @@ export const Edit = ( {
 		<Main { ...blockProps }>
 			<Controls />
 			<form
-				className={ classnames(
+				className={ clsx(
 					'wc-block-components-form wc-block-checkout__form',
 					{
 						'wc-block-checkout__form--with-step-numbers':
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
index 49ce6967fde..1773f81d618 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ReactElement } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
 import { useStoreEvents } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
@@ -25,9 +25,9 @@ const FrontendBlock = ( {
 	}, [] );
 
 	return (
-		<Main className={ classnames( 'wc-block-checkout__main', className ) }>
+		<Main className={ clsx( 'wc-block-checkout__main', className ) }>
 			<form
-				className={ classnames(
+				className={ clsx(
 					'wc-block-components-form wc-block-checkout__form',
 					{
 						'wc-block-checkout__form--with-step-numbers':
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
index 80b84e272e8..d0ea5e0bc8b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useShippingData } from '@woocommerce/base-context/hooks';
@@ -30,10 +30,7 @@ const Block = ( { className }: { className?: string } ): JSX.Element => {
 		<FormStep
 			id="order-notes"
 			showStepNumber={ false }
-			className={ classnames(
-				'wc-block-checkout__order-notes',
-				className
-			) }
+			className={ clsx( 'wc-block-checkout__order-notes', className ) }
 			disabled={ checkoutIsProcessing }
 		>
 			<CheckoutOrderNotes
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/edit.tsx
index 841e9d3c645..820c7b5ed5e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, ExternalLink } from '@wordpress/components';
@@ -57,7 +57,7 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__payment-method',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
index eaa24d5236e..51521e983e0 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import {
@@ -43,10 +43,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="payment-method"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
-				'wc-block-checkout__payment-method',
-				className
-			) }
+			className={ clsx( 'wc-block-checkout__payment-method', className ) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showFormStepNumbers }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/edit.tsx
index 2b17b701ead..a05af1c71bd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/edit.tsx
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useSelect } from '@wordpress/data';
@@ -47,7 +47,7 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-method',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/frontend.tsx
index 4104e152468..4a13e675027 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
@@ -47,10 +47,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="pickup-options"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
-				'wc-block-checkout__pickup-options',
-				className
-			) }
+			className={ clsx( 'wc-block-checkout__pickup-options', className ) }
 			title={ title }
 			description={ description }
 			showStepNumber={ showFormStepNumbers }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx
index 1d429f4cc41..b362e95c9f6 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -57,7 +57,7 @@ export const Edit = ( {
 		<FormStepBlock
 			setAttributes={ setAttributes }
 			attributes={ attributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-fields',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
index 2fc2efd8897..0eb0b4b8bbe 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
@@ -47,7 +47,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="shipping-fields"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-fields',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
index 34ee83c72a3..f6b033aa709 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useShippingData } from '@woocommerce/base-context/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Icon, store, shipping } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
 import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data';
@@ -47,13 +47,10 @@ const LocalPickupSelector = ( {
 			role="radio"
 			removeTextWrap
 			onClick={ onClick }
-			className={ classnames(
-				'wc-block-checkout__shipping-method-option',
-				{
-					'wc-block-checkout__shipping-method-option--selected':
-						checked === 'pickup',
-				}
-			) }
+			className={ clsx( 'wc-block-checkout__shipping-method-option', {
+				'wc-block-checkout__shipping-method-option--selected':
+					checked === 'pickup',
+			} ) }
 		>
 			{ showIcon === true && (
 				<Icon
@@ -135,13 +132,10 @@ const ShippingSelector = ( {
 			role="radio"
 			onClick={ onClick }
 			removeTextWrap
-			className={ classnames(
-				'wc-block-checkout__shipping-method-option',
-				{
-					'wc-block-checkout__shipping-method-option--selected':
-						checked === 'shipping',
-				}
-			) }
+			className={ clsx( 'wc-block-checkout__shipping-method-option', {
+				'wc-block-checkout__shipping-method-option--selected':
+					checked === 'shipping',
+			} ) }
 		>
 			{ showIcon === true && (
 				<Icon
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
index 533562fb6a8..45488ca79a5 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { Icon, store, shipping } from '@wordpress/icons';
@@ -53,13 +53,10 @@ const LocalPickupSelector = ( {
 } ) => {
 	return (
 		<Button
-			className={ classnames(
-				'wc-block-checkout__shipping-method-option',
-				{
-					'wc-block-checkout__shipping-method-option--selected':
-						checked === 'pickup',
-				}
-			) }
+			className={ clsx( 'wc-block-checkout__shipping-method-option', {
+				'wc-block-checkout__shipping-method-option--selected':
+					checked === 'pickup',
+			} ) }
 			onClick={ onClick }
 			removeTextWrap
 		>
@@ -116,13 +113,10 @@ const ShippingSelector = ( {
 
 	return (
 		<Button
-			className={ classnames(
-				'wc-block-checkout__shipping-method-option',
-				{
-					'wc-block-checkout__shipping-method-option--selected':
-						checked === 'shipping',
-				}
-			) }
+			className={ clsx( 'wc-block-checkout__shipping-method-option', {
+				'wc-block-checkout__shipping-method-option--selected':
+					checked === 'shipping',
+			} ) }
 			onClick={ onClick }
 			removeTextWrap
 		>
@@ -214,7 +208,7 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-method',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx
index 2d2b28807c5..09a2e219ba0 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -75,7 +75,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="shipping-method"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-method',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx
index 1e400d405da..6845bfe7e78 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, ExternalLink } from '@wordpress/components';
@@ -58,7 +58,7 @@ export const Edit = ( {
 		<FormStepBlock
 			attributes={ attributes }
 			setAttributes={ setAttributes }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-option',
 				attributes?.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
index 7ff6fd573c0..d9e8d3f3384 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
@@ -46,7 +46,7 @@ const FrontendBlock = ( {
 		<FormStep
 			id="shipping-option"
 			disabled={ checkoutIsProcessing }
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__shipping-option',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
index dc0ccaa57d4..c446b4a8bcf 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState, useEffect } from '@wordpress/element';
 import { CheckboxControl } from '@woocommerce/blocks-components';
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
@@ -72,7 +72,7 @@ const FrontendBlock = ( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-checkout__terms',
 				{
 					'wc-block-checkout__terms--disabled': isDisabled,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
index 757ec1a0129..1d091f01912 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
@@ -26,10 +26,7 @@ export const Edit = ( {
 	};
 } ): JSX.Element => {
 	const blockProps = useBlockProps( {
-		className: classnames(
-			'wc-block-checkout__sidebar',
-			attributes?.className
-		),
+		className: clsx( 'wc-block-checkout__sidebar', attributes?.className ),
 	} );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_TOTALS );
 
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx
index 045b87d429c..9735c03b1cd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
 import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { useObservedViewport } from '@woocommerce/base-hooks';
@@ -18,7 +18,7 @@ const FrontendBlock = ( {
 	return (
 		<Sidebar
 			ref={ observedRef }
-			className={ classnames( 'wc-block-checkout__sidebar', className, {
+			className={ clsx( 'wc-block-checkout__sidebar', className, {
 				'is-sticky': isSticky,
 			} ) }
 		>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/edit.tsx
index 5113ec13145..92afecb4876 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 import type { BlockEditProps } from '@wordpress/blocks';
@@ -20,7 +20,7 @@ const Edit = ( {
 }: BlockEditProps< Attributes > ) => {
 	const { className } = attributes;
 	const blockProps = useBlockProps( {
-		className: classNames( 'wc-block-editor-customer-account', className ),
+		className: clsx( 'wc-block-editor-customer-account', className ),
 	} );
 
 	return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/sidebar-settings.tsx b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
index 423cab38956..62a8c5fd33d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Icon } from '@wordpress/icons';
 import {
 	customerAccountStyle,
@@ -110,7 +110,7 @@ export const BlockSettings = ( {
 								<Icon
 									icon={ customerAccountStyle }
 									size={ 16 }
-									className={ classNames(
+									className={ clsx(
 										'wc-block-editor-customer-account__icon-option',
 										{
 											active:
@@ -126,7 +126,7 @@ export const BlockSettings = ( {
 								<Icon
 									icon={ customerAccountStyleAlt }
 									size={ 20 }
-									className={ classNames(
+									className={ clsx(
 										'wc-block-editor-customer-account__icon-option',
 										{
 											active: iconStyle === IconStyle.ALT,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/call-to-action.tsx b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/call-to-action.tsx
index f55b003d2f1..8f56d163925 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/call-to-action.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/call-to-action.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { RichText, InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -16,10 +16,7 @@ export const CallToAction = ( {
 	linkText,
 	permalink,
 }: CallToActionProps ) => {
-	const buttonClasses = classnames(
-		'wp-block-button__link',
-		'is-style-fill'
-	);
+	const buttonClasses = clsx( 'wp-block-button__link', 'is-style-fill' );
 	const buttonStyle = {
 		backgroundColor: 'vivid-green-cyan',
 		borderRadius: '5px',
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/constrained-resizable.tsx b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/constrained-resizable.tsx
index 7cc8bb8800a..576e47f5be6 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/constrained-resizable.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/constrained-resizable.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState } from '@wordpress/element';
 import { ResizableBox } from '@wordpress/components';
 import { useThrottledCallback } from 'use-debounce';
@@ -15,7 +15,7 @@ export const ConstrainedResizable = ( {
 }: ResizableBox.Props ): JSX.Element => {
 	const [ isResizing, setIsResizing ] = useState( false );
 
-	const classNames = classnames( className, {
+	const classNames = clsx( className, {
 		'is-resizing': isResizing,
 	} );
 	const throttledResize = useThrottledCallback< ResizeCallback >(
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx
index a5f2ca5ffa9..3b6a7be189b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx
@@ -6,7 +6,7 @@
 import type { BlockAlignment } from '@wordpress/blocks';
 import { ProductResponseItem, isEmpty } from '@woocommerce/types';
 import { Icon, Placeholder, Spinner } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useCallback, useState } from '@wordpress/element';
 import { WP_REST_API_Category } from 'wp-types';
 import { useStyleProps } from '@woocommerce/base-hooks';
@@ -192,7 +192,7 @@ export const withFeaturedItem =
 				textColor,
 			} = attributes;
 
-			const containerClass = classnames(
+			const containerClass = clsx(
 				className,
 				{
 					'is-selected':
@@ -266,7 +266,7 @@ export const withFeaturedItem =
 									/>
 								) : (
 									<div
-										className={ classnames(
+										className={ clsx(
 											`${ className }__background-image`,
 											{
 												'has-parallax': hasParallax,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
index 5782558cd35..a3b705e054a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
@@ -28,7 +28,7 @@ import {
 	useState,
 } from '@wordpress/element';
 import { sprintf, _n } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -284,13 +284,9 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 				/>
 			</button>
 			<Drawer
-				className={ classnames(
-					'wc-block-mini-cart__drawer',
-					'is-mobile',
-					{
-						'is-loading': cartIsLoading,
-					}
-				) }
+				className={ clsx( 'wc-block-mini-cart__drawer', 'is-mobile', {
+					'is-loading': cartIsLoading,
+				} ) }
 				isOpen={ isOpen }
 				onClose={ () => {
 					setIsOpen( false );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
index 550144360fc..563d5cdca7d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
@@ -3,7 +3,7 @@
  */
 import { CART_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 
 /**
@@ -31,7 +31,7 @@ const Block = ( {
 
 	return (
 		<Button
-			className={ classNames(
+			className={ clsx(
 				className,
 				styleProps.className,
 				'wc-block-mini-cart__footer-cart'
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
index 3ccc8140b34..85b36979a6d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
@@ -3,7 +3,7 @@
  */
 import { CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import {
 	isErrorResponse,
@@ -36,7 +36,7 @@ const Block = ( {
 
 	return (
 		<Button
-			className={ classNames(
+			className={ clsx(
 				className,
 				styleProps.className,
 				'wc-block-mini-cart__footer-checkout'
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
index 86817f352b8..81df5b214d7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import EditableButton from '@woocommerce/editor-components/editable-button';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ export const Edit = ( {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const blockProps = useBlockProps( {
-		className: classNames( 'wc-block-mini-cart__footer-checkout' ),
+		className: clsx( 'wc-block-mini-cart__footer-checkout' ),
 	} );
 	const { checkoutButtonLabel } = attributes;
 
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 8b31cc35d40..486cf092639 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -12,7 +12,7 @@ import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payme
 import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { PaymentEventsProvider } from '@woocommerce/base-context';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -55,9 +55,7 @@ const Block = ( {
 	const hasButtons = hasChildren( children );
 
 	return (
-		<div
-			className={ classNames( className, 'wc-block-mini-cart__footer' ) }
-		>
+		<div className={ clsx( className, 'wc-block-mini-cart__footer' ) }>
 			<TotalsItem
 				className="wc-block-mini-cart__footer-subtotal"
 				currency={ getCurrencyFromPriceResponse( cartTotals ) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
index 3563c58d2a0..0fe3344c948 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type MiniCartItemsBlockProps = {
 	children: JSX.Element;
@@ -14,7 +14,7 @@ const Block = ( {
 }: MiniCartItemsBlockProps ): JSX.Element => {
 	return (
 		<div
-			className={ classNames( className, 'wc-block-mini-cart__items' ) }
+			className={ clsx( className, 'wc-block-mini-cart__items' ) }
 			tabIndex={ -1 }
 		>
 			{ children }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
index 3925a465b49..7774d147c3b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -3,7 +3,7 @@
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { CartLineItemsTable } from '@woocommerce/base-components/cart-checkout';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type MiniCartProductsTableBlockProps = {
 	className: string;
@@ -15,7 +15,7 @@ const Block = ( {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				className,
 				'wc-block-mini-cart__products-table'
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
index a5bbd1efc56..52225bcef49 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/block.tsx
@@ -3,7 +3,7 @@
  */
 import { SHOP_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ const Block = ( {
 	return (
 		<div className="wp-block-button has-text-align-center">
 			<Button
-				className={ classNames(
+				className={ clsx(
 					className,
 					'wp-block-button__link',
 					'wc-block-mini-cart__shopping-button'
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
index 48a92268488..9544d3a8b3f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ const Block = ( {
 	const hasTitleInnerBlocks = hasChildren( children );
 
 	return (
-		<h2 className={ classNames( className, 'wc-block-mini-cart__title' ) }>
+		<h2 className={ clsx( className, 'wc-block-mini-cart__title' ) }>
 			{ hasTitleInnerBlocks ? (
 				children
 			) : (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
index 27094d6bfd1..ea24c07304a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useStoreCart } from '@woocommerce/base-context';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useStyleProps } from '@woocommerce/base-hooks';
 
@@ -16,7 +16,7 @@ const Block = ( props: Props ): JSX.Element => {
 
 	return (
 		<span
-			className={ classNames( props.className, styleProps.className ) }
+			className={ clsx( props.className, styleProps.className ) }
 			style={ styleProps.style }
 		>
 			{ sprintf(
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
index e66116fec72..49b164ac340 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useStyleProps } from '@woocommerce/base-hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -19,7 +19,7 @@ const Block = ( props: Props ): JSX.Element => {
 
 	return (
 		<span
-			className={ classnames( props.className, styleProps.className ) }
+			className={ clsx( props.className, styleProps.className ) }
 			style={ styleProps.style }
 		>
 			{ props.label || defaultYourCartLabel }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads-wrapper/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads-wrapper/edit.tsx
index 630886fa283..85c66d60cfd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads-wrapper/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads-wrapper/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { getSetting } from '@woocommerce/settings';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ const Edit = ( {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classnames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				'store-has-downloads': hasDownloadableProducts,
 			} ) }
 		>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block-wrapper.tsx b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block-wrapper.tsx
index 75a47987890..1878dc39829 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block-wrapper.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block-wrapper.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
@@ -17,7 +17,7 @@ const BlockWrapper = ( props: Record< string, unknown > ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				isString( props.className ) ? props.className : '',
 				styleProps.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/deprecated.tsx
index 018b035e8bf..5e1f87306fc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/deprecated.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/deprecated.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -33,7 +33,7 @@ const v1 = {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 				{ ...data }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx
index 32984555cd8..caa88d12711 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Icon, currencyDollar } from '@wordpress/icons';
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -33,7 +33,7 @@ registerBlockType( metadata, {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 			>
 				<span
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/active-filters/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/active-filters/edit.tsx
index 59e7b862eb4..609661709ff 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/active-filters/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/active-filters/edit.tsx
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Disabled } from '@wordpress/components';
 
 /**
@@ -25,7 +25,7 @@ const Edit = ( props: EditProps ) => {
 			<Inspector { ...props } />
 			<Disabled>
 				<ul
-					className={ classNames( 'filter-list', {
+					className={ clsx( 'filter-list', {
 						'list-chips': displayStyle === 'chips',
 					} ) }
 				>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/components/price-slider.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/components/price-slider.tsx
index 3bed293cf6b..dc7f62e1c1e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/components/price-slider.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/price-filter/components/price-slider.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useCollectionData } from '@woocommerce/base-context/hooks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -54,7 +54,7 @@ export const PriceSlider = ( { attributes }: EditProps ) => {
 
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'wp-block-woocommerce-product-filter-price-content',
 				{
 					'wp-block-woocommerce-product-filter-price-content--inline':
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/edit.tsx
index 70f101fc302..9c3044ea1c1 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import Rating from '@woocommerce/base-components/product-rating';
@@ -162,7 +162,7 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
 				<Disabled>
 					{ displayNoProductRatingsNotice && <NoRatings /> }
 					<div
-						className={ classnames(
+						className={ clsx(
 							`style-${ blockAttributes.displayStyle }`,
 							{
 								'is-loading': isLoading,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx
index 4a0e31ed19b..f93c865d5eb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useMemo } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -30,10 +30,7 @@ type StockStatusCount = {
 
 const Edit = ( props: BlockEditProps< BlockProps > ) => {
 	const blockProps = useBlockProps( {
-		className: classnames(
-			'wc-block-stock-filter',
-			props.attributes.className
-		),
+		className: clsx( 'wc-block-stock-filter', props.attributes.className ),
 	} );
 
 	const { showCounts, displayStyle } = props.attributes;
@@ -80,7 +77,7 @@ const Edit = ( props: BlockEditProps< BlockProps > ) => {
 					<Inspector { ...props } />
 					<Disabled>
 						<div
-							className={ classnames( `style-${ displayStyle }`, {
+							className={ clsx( `style-${ displayStyle }`, {
 								'is-loading': false,
 							} ) }
 						>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/save.tsx
index 90b28869662..5dd50a222cb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/save.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import classnames from 'classnames';
 
 export const Save = (): JSX.Element => {
 	const blockProps = useBlockProps.save( {
-		className: classnames( 'wc-block-product-filters' ),
+		className: clsx( 'wc-block-product-filters' ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx
index 17b4f9a2e36..e9e730d4394 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx
@@ -5,7 +5,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { BlockAttributes } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -43,7 +43,7 @@ export const Edit = ( {
 				attributes.layout?.verticalAlignment
 			),
 		},
-		className: classNames(
+		className: clsx(
 			'wc-block-editor-product-gallery-large-image-next-previous',
 			'wc-block-product-gallery-large-image-next-previous'
 		),
@@ -65,7 +65,7 @@ export const Edit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<div
-				className={ classNames(
+				className={ clsx(
 					'wc-block-product-gallery-large-image-next-previous-container',
 					`wc-block-product-gallery-large-image-next-previous--${ previousNextImage?.classname }`
 				) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
index 473963a1aed..22eeb9dfc6d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx
@@ -4,7 +4,7 @@
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { memo, useMemo } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -67,7 +67,7 @@ export const Edit = ( {
 	}, [ context.nextPreviousButtonsPosition ] );
 
 	const blockProps = useBlockProps( {
-		className: classNames(
+		className: clsx(
 			'wc-block-product-gallery-large-image',
 			'wc-block-editor-product-gallery-large-image',
 			`wc-block-editor-product-gallery-large-image-next-previous--${ previousNextImage?.className }`
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx
index 4ff8ad0609e..9fb9de9130f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx
@@ -4,7 +4,7 @@
 import { Icon } from '@wordpress/icons';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -89,7 +89,7 @@ interface EditProps {
 export const Edit = ( props: EditProps ): JSX.Element => {
 	const { context } = props;
 	const blockProps = useBlockProps( {
-		className: classNames(
+		className: clsx(
 			'wc-block-editor-product-gallery-pager',
 			'wc-block-product-gallery-pager'
 		),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
index b925d005f05..dfc5af77ebe 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
@@ -5,7 +5,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Disabled, PanelBody } from '@wordpress/components';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ interface EditProps
 
 export const Edit = ( { attributes, setAttributes, context }: EditProps ) => {
 	const blockProps = useBlockProps( {
-		className: classNames(
+		className: clsx(
 			'wc-block-product-gallery-thumbnails',
 			`wc-block-product-gallery-thumbnails--number-of-thumbnails-${ context.thumbnailsNumberOfThumbnails }`,
 			`wc-block-product-gallery-thumbnails--position-${ context.thumbnailsPosition }`
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/save.tsx
index 31d5960ec92..12bf2b7ab60 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/save.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ export const Save = ( {
 	attributes: ProductGalleryAttributes;
 } ): JSX.Element => {
 	const blockProps = useBlockProps.save( {
-		className: classnames(
+		className: clsx(
 			'wc-block-product-gallery',
 			getClassNameByNextPreviousButtonsPosition(
 				attributes.nextPreviousButtonsPosition
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.tsx
index 18dc3c01c36..bdc40c3fa6a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { HOME_URL } from '@woocommerce/settings';
 
 /**
@@ -37,7 +37,7 @@ interface ProductSearchBlockProps {
 const ProductSearchBlock = ( {
 	attributes: { label, placeholder, formId, className, hasLabel, align },
 }: ProductSearchBlockProps ) => {
-	const classes = classnames(
+	const classes = clsx(
 		'wc-block-product-search',
 		align ? 'align' + align : '',
 		className
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.tsx
index 87e6c2fd8f5..62da19adb1e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { InspectorControls, PlainText } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
@@ -52,7 +52,7 @@ const Edit = ( {
 	instanceId,
 	setAttributes,
 }: EditProps ) => {
-	const classes = classnames(
+	const classes = clsx(
 		'wc-block-product-search',
 		align ? 'align' + align : '',
 		className
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx
index b92ee0cb185..807779be351 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -303,7 +303,7 @@ const ProductTemplateEdit = (
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			__unstableLayoutClassNames,
 			'wc-block-product-template',
 			customClassName
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/base-utils.js b/plugins/woocommerce-blocks/assets/js/blocks/products/base-utils.js
index 236ae3e838f..137e70e4f26 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/products/base-utils.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/products/base-utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -46,7 +46,7 @@ export const getProductLayoutConfig = ( innerBlocks ) => {
 				 * "woocommerce/product-button" block.
 				 */
 				...( block.name === addToCartButtonMetadata.name && {
-					className: classnames( block.attributes.className, {
+					className: clsx( block.attributes.className, {
 						[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
 							block.attributes?.width,
 					} ),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/utils.js b/plugins/woocommerce-blocks/assets/js/blocks/products/utils.js
index f4b6e99c993..30f0ad8524e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/products/utils.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/products/utils.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export const getBlockClassName = ( blockClassName, attributes ) => {
 	const { className, contentVisibility } = attributes;
 
-	return classNames( blockClassName, className, {
+	return clsx( blockClassName, className, {
 		'has-image': contentVisibility && contentVisibility.image,
 		'has-title': contentVisibility && contentVisibility.title,
 		'has-rating': contentVisibility && contentVisibility.rating,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block-wrapper.tsx b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block-wrapper.tsx
index 75a47987890..1878dc39829 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block-wrapper.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block-wrapper.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
@@ -17,7 +17,7 @@ const BlockWrapper = ( props: Record< string, unknown > ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				isString( props.className ) ? props.className : '',
 				styleProps.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx
index bbf9a2bce9c..118fc46f483 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx
@@ -23,7 +23,7 @@ import FilterResetButton from '@woocommerce/base-components/filter-reset-button'
 import FormTokenField from '@woocommerce/base-components/form-token-field';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl, normalizeQueryParams } from '@woocommerce/utils';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ReactElement } from 'react';
 
 /**
@@ -322,7 +322,7 @@ const RatingFilterBlock = ( {
 		<>
 			{ displayNoProductRatingsNotice && noRatingsNotice }
 			<div
-				className={ classnames(
+				className={ clsx(
 					'wc-block-rating-filter',
 					`style-${ blockAttributes.displayStyle }`,
 					{
@@ -334,7 +334,7 @@ const RatingFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( {
+							className={ clsx( {
 								'single-selection': ! multiple,
 								'is-loading': isLoading,
 							} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/deprecated.tsx
index 0483c16bdd2..a0372949647 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/deprecated.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/deprecated.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -26,7 +26,7 @@ const v1 = {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 				{ ...data }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/edit.tsx
index 0c1acda4b2f..ab8867371e7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import {
@@ -48,7 +48,7 @@ const Edit = ( {
 	} = attributes;
 
 	const blockProps = useBlockProps( {
-		className: classnames( 'wc-block-rating-filter', className ),
+		className: clsx( 'wc-block-rating-filter', className ),
 	} );
 
 	const getInspectorControls = () => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx
index 35319dea5ef..236d4fbe245 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx
@@ -3,7 +3,7 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, starEmpty } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -34,7 +34,7 @@ registerBlockType( metadata, {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 			/>
 		);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/utils.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/utils.js
index 83c900d4463..f20df688d12 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/utils.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/utils.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getSetting } from '@woocommerce/settings';
 
 export const getSortArgs = ( sortValue ) => {
@@ -71,7 +71,7 @@ export const getBlockClassName = ( attributes ) => {
 		blockClassName = 'wc-block-reviews-by-category';
 	}
 
-	return classNames( blockClassName, className, {
+	return clsx( blockClassName, className, {
 		'has-image': showReviewImage,
 		'has-name': showReviewerName,
 		'has-date': showReviewDate,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block-wrapper.tsx b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block-wrapper.tsx
index 75a47987890..1878dc39829 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block-wrapper.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block-wrapper.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useStyleProps } from '@woocommerce/base-hooks';
 import { isString } from '@woocommerce/types';
 
@@ -17,7 +17,7 @@ const BlockWrapper = ( props: Record< string, unknown > ) => {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				isString( props.className ) ? props.className : '',
 				styleProps.className
 			) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx
index 75b7064c52b..6578864ab28 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx
@@ -33,7 +33,7 @@ import {
 	PREFIX_QUERY_ARG_FILTER_TYPE,
 	normalizeQueryParams,
 } from '@woocommerce/utils';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -438,7 +438,7 @@ const StockStatusFilterBlock = ( {
 		<>
 			{ ! isEditor && blockAttributes.heading && filterHeading }
 			<div
-				className={ classnames(
+				className={ clsx(
 					'wc-block-stock-filter',
 					`style-${ blockAttributes.displayStyle }`,
 					{
@@ -450,7 +450,7 @@ const StockStatusFilterBlock = ( {
 					<>
 						<FormTokenField
 							key={ remountKey }
-							className={ classnames( {
+							className={ clsx( {
 								'single-selection': ! allowsMultipleOptions,
 								'is-loading': isLoading,
 							} ) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/deprecated.tsx
index b9f1cfb1c61..67ef043e652 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/deprecated.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/deprecated.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -39,7 +39,7 @@ const v1 = {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 				{ ...data }
 			>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.tsx
index bee06839472..50c4f8e3662 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import BlockTitle from '@woocommerce/editor-components/block-title';
 import type { BlockEditProps } from '@wordpress/blocks';
@@ -41,7 +41,7 @@ const Edit = ( {
 	} = attributes;
 
 	const blockProps = useBlockProps( {
-		className: classnames( 'wc-block-stock-filter', className ),
+		className: clsx( 'wc-block-stock-filter', className ),
 	} );
 
 	const getInspectorControls = () => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.tsx
index 3c610e511e5..96dc7268713 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.tsx
@@ -3,7 +3,7 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, box } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -36,7 +36,7 @@ registerBlockType( metadata, {
 		return (
 			<div
 				{ ...useBlockProps.save( {
-					className: classNames( 'is-loading', className ),
+					className: clsx( 'is-loading', className ),
 				} ) }
 			/>
 		);
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
index e266a71d9ab..dfde9dd296a 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, warning } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Button, Placeholder, Spinner } from '@wordpress/components';
 
 /**
@@ -52,7 +52,7 @@ const ErrorPlaceholder = ( {
 	<Placeholder
 		icon={ <Icon icon={ warning } /> }
 		label={ __( 'Sorry, an error occurred', 'woocommerce' ) }
-		className={ classNames( 'wc-block-api-error', className ) }
+		className={ clsx( 'wc-block-api-error', className ) }
 	>
 		<ErrorMessage error={ error } />
 		{ onRetry && (
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
index 8a44c671f45..2ab5498159a 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
@@ -4,7 +4,7 @@
 import { Spinner } from '@wordpress/components';
 import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
 import { RenderItemArgs } from '@woocommerce/editor-components/search-list-control/types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 interface ExpandableSearchListItemProps extends RenderItemArgs {
 	isLoading: boolean;
@@ -33,7 +33,7 @@ const ExpandableSearchListItem = ( {
 			{ isSelected && isLoading && (
 				<div
 					key="loading"
-					className={ classNames(
+					className={ clsx(
 						'woocommerce-search-list__item',
 						'woocommerce-product-attributes__item',
 						'depth-1',
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
index b5bc74eba63..d5ebcfc6f64 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	SearchListControl,
@@ -70,7 +70,7 @@ const ProductAttributeTermControl = ( {
 			return (
 				<ExpandableSearchListItem
 					{ ...args }
-					className={ classNames( classes ) }
+					className={ clsx( classes ) }
 					item={ item }
 					isLoading={ isLoadingAttributes }
 					disabled={ item.count === 0 }
@@ -101,7 +101,7 @@ const ProductAttributeTermControl = ( {
 			<SearchListItem
 				{ ...args }
 				name={ `terms-${ instanceId }` }
-				className={ classNames( ...classes, 'has-count' ) }
+				className={ clsx( ...classes, 'has-count' ) }
 				countLabel={ sprintf(
 					/* translators: %d is the count of products. */
 					_n( '%d product', '%d products', count, 'woocommerce' ),
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-category-control/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/product-category-control/index.tsx
index ecba5e3f7ae..5512b908aa9 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/product-category-control/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-category-control/index.tsx
@@ -9,7 +9,7 @@ import {
 import { SelectControl } from '@wordpress/components';
 import { withSearchedCategories } from '@woocommerce/block-hocs';
 import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { RenderItemArgs } from '@woocommerce/editor-components/search-list-control/types';
 import type {
 	ProductCategoryResponseItem,
@@ -118,7 +118,7 @@ const ProductCategoryControl = ( {
 
 		return (
 			<SearchListItem
-				className={ classNames(
+				className={ clsx(
 					'woocommerce-product-categories__item',
 					'has-count',
 					{
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-control/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/product-control/index.tsx
index 2bb3b9f82a7..bfa1e5f2a85 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/product-control/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-control/index.tsx
@@ -25,7 +25,7 @@ import type {
 } from '@woocommerce/types';
 import { convertProductResponseItemToSearchItem } from '@woocommerce/utils';
 import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ExpandableSearchListItem from '@woocommerce/editor-components/expandable-search-list-item/expandable-search-list-item';
 
 /**
@@ -101,7 +101,7 @@ const ProductControl = (
 			item.details?.variations && Array.isArray( item.details.variations )
 				? item.details.variations.length
 				: 0;
-		const classes = classNames(
+		const classes = clsx(
 			'woocommerce-search-product__item',
 			'woocommerce-search-list__item',
 			`depth-${ depth }`,
@@ -121,7 +121,7 @@ const ProductControl = (
 			return (
 				<ExpandableSearchListItem
 					{ ...args }
-					className={ classNames( classes, {
+					className={ clsx( classes, {
 						'is-selected': isSelected,
 					} ) }
 					isSelected={ isSelected }
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-tag-control/product-tag-item.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/product-tag-control/product-tag-item.tsx
index 5a71597fb1e..2a6a9cbeff2 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/product-tag-control/product-tag-item.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-tag-control/product-tag-item.tsx
@@ -3,7 +3,7 @@
  */
 import { _n, sprintf } from '@wordpress/i18n';
 import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,14 +22,10 @@ export const ProductTagItem = ( {
 
 	return (
 		<SearchListItem
-			className={ classNames(
-				'woocommerce-product-tags__item',
-				'has-count',
-				{
-					'is-searching': search.length > 0,
-					'is-skip-level': depth === 0 && item.parent !== 0,
-				}
-			) }
+			className={ clsx( 'woocommerce-product-tags__item', 'has-count', {
+				'is-searching': search.length > 0,
+				'is-skip-level': depth === 0 && item.parent !== 0,
+			} ) }
 			item={ item }
 			search={ search }
 			depth={ depth }
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/item.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/item.tsx
index bcd0654eb8c..73913fa80a9 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/item.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/item.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { CheckboxControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { arrayDifferenceBy, arrayUnionBy } from '@woocommerce/utils';
@@ -63,7 +63,7 @@ export const SearchListItem = < T extends object = object >( {
 	const hasBreadcrumbs = !! item.breadcrumbs?.length;
 	const hasChildren = !! item.children?.length;
 	const isExpanded = expandedPanelId === item.id;
-	const classes = classNames(
+	const classes = clsx(
 		[ 'woocommerce-search-list__item', `depth-${ depth }`, className ],
 		{
 			'has-breadcrumbs': hasBreadcrumbs,
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/search-list-control.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
index 9f21d7b7425..ee26e735da9 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
@@ -17,7 +17,7 @@ import {
 	Fragment,
 } from '@wordpress/element';
 import { Icon, info } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -287,7 +287,7 @@ export const SearchListControl = < T extends object = object >(
 
 	return (
 		<div
-			className={ classnames( 'woocommerce-search-list', className, {
+			className={ clsx( 'woocommerce-search-list', className, {
 				'is-compact': isCompact,
 				'is-loading': isLoading,
 				'is-token': type === 'token',
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/tag/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/tag/index.tsx
index d94ffdf93c1..be960aeb637 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/tag/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/tag/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Button, Popover } from '@wordpress/components';
 import { Icon, cancelCircleFilled } from '@wordpress/icons';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -47,7 +47,7 @@ const Tag = ( {
 		return null;
 	}
 	label = decodeEntities( label );
-	const classes = classnames( 'woocommerce-tag', className, {
+	const classes = clsx( 'woocommerce-tag', className, {
 		'has-remove': !! remove,
 	} );
 	const labelId = `woocommerce-tag__label-${ instanceId }`;
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/index.js
index c42ea4789fb..48decca63f8 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Button } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import classnames from 'classnames';
 import './style.scss';
 
 function TextToolbarButton( { className = '', ...props } ) {
-	const classes = classnames( 'wc-block-text-toolbar-button', className );
+	const classes = clsx( 'wc-block-text-toolbar-button', className );
 	return <Button className={ classes } { ...props } />;
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/woo.tsx b/plugins/woocommerce-blocks/assets/js/icons/library/woo.tsx
index c4dca2a6c4f..a1402ab6e4e 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/woo.tsx
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/woo.tsx
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { SVG } from '@wordpress/primitives';
-import classnames from 'classnames';
+import clsx from 'clsx';
 const Component = ( { className, height, width, ...props } ) => {
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 245 145"
-			className={ classnames( 'woo-icon', className ) }
+			className={ clsx( 'woo-icon', className ) }
 			width={ width }
 			height={ height }
 			{ ...props }
diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json
index e74a08ca9e6..a8f8564c28d 100644
--- a/plugins/woocommerce-blocks/package.json
+++ b/plugins/woocommerce-blocks/package.json
@@ -140,7 +140,6 @@
 		"@testing-library/jest-dom": "6.4.5",
 		"@testing-library/react": "15.0.7",
 		"@testing-library/user-event": "14.5.2",
-		"@types/classnames": "2.3.0",
 		"@types/dinero.js": "1.9.0",
 		"@types/dompurify": "2.3.4",
 		"@types/gtag.js": "0.0.10",
@@ -295,7 +294,7 @@
 		"@wordpress/url": "3.13.0",
 		"@wordpress/wordcount": "3.47.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
 		"compare-versions": "4.1.3",
 		"config": "3.3.7",
 		"dataloader": "2.2.2",
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js b/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js
index 24b69c6dcc5..125f50ded0f 100644
--- a/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js
+++ b/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -20,7 +20,7 @@ const Slot = ( { className, extensions, cart, context } ) => {
 		hasValidFills( fills ) && (
 			<TotalsWrapper slotWrapper={ true }>
 				<DiscountsMetaSlot
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wc-block-components-discounts-meta'
 					) }
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx b/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx
index 9f7b3eba123..b5568a810f2 100644
--- a/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	Cart,
 	CartShippingPackageShippingRate,
@@ -38,7 +38,7 @@ const Slot = ( {
 }: ExperimentalOrderLocalPickupPackagesProps ) => {
 	return (
 		<OrderLocalPickupPackagesSlot
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-local-pickup-rates-control'
 			) }
 			fillProps={ {
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-meta/index.js b/plugins/woocommerce-blocks/packages/checkout/components/order-meta/index.js
index 765b7957c75..6da983955b2 100644
--- a/plugins/woocommerce-blocks/packages/checkout/components/order-meta/index.js
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-meta/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ const Slot = ( { className, extensions, cart, context } ) => {
 		hasValidFills( fills ) && (
 			<TotalsWrapper slotWrapper={ true }>
 				<OrderMetaSlot
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wc-block-components-order-meta'
 					) }
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
index 39137a2ccec..5e3f1a33cfe 100644
--- a/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ const Slot = ( {
 } ) => {
 	return (
 		<OrderShippingPackagesSlot
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-shipping-rates-control',
 				className
 			) }
diff --git a/plugins/woocommerce-blocks/packages/components/checkbox-control/index.tsx b/plugins/woocommerce-blocks/packages/components/checkbox-control/index.tsx
index 2e2fa7753ec..65a84ad5e8a 100644
--- a/plugins/woocommerce-blocks/packages/components/checkbox-control/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/checkbox-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -39,7 +39,7 @@ export const CheckboxControl = ( {
 
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'wc-block-components-checkbox',
 				{
 					'has-error': hasError,
diff --git a/plugins/woocommerce-blocks/packages/components/checkbox-list/index.tsx b/plugins/woocommerce-blocks/packages/components/checkbox-list/index.tsx
index 7c71570e74f..2bd157126e9 100644
--- a/plugins/woocommerce-blocks/packages/components/checkbox-list/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/checkbox-list/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Fragment, useMemo, useState } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -162,7 +162,7 @@ const CheckboxList = ( {
 		isDisabled,
 	] );
 
-	const classes = classNames(
+	const classes = clsx(
 		'wc-block-checkbox-list',
 		'wc-block-components-checkbox-list',
 		{
diff --git a/plugins/woocommerce-blocks/packages/components/chip/chip.tsx b/plugins/woocommerce-blocks/packages/components/chip/chip.tsx
index 5f29167f7fa..88e3db6bd85 100644
--- a/plugins/woocommerce-blocks/packages/components/chip/chip.tsx
+++ b/plugins/woocommerce-blocks/packages/components/chip/chip.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -51,7 +51,7 @@ const Chip: React.FC< ChipProps > = ( {
 	...props
 } ) => {
 	const Wrapper = element;
-	const wrapperClassName = classNames(
+	const wrapperClassName = clsx(
 		className,
 		'wc-block-components-chip',
 		'wc-block-components-chip--radius-' + radius
diff --git a/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx b/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx
index 7a638b52eae..e874f9d5326 100644
--- a/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx
+++ b/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, closeSmall } from '@wordpress/icons';
 
@@ -85,7 +85,7 @@ export const RemovableChip = ( {
 		<Chip
 			{ ...props }
 			{ ...chipProps }
-			className={ classNames( className, 'is-removable' ) }
+			className={ clsx( className, 'is-removable' ) }
 			element={ removeOnAnyClick ? 'button' : props.element }
 			screenReaderText={ screenReaderText }
 			text={ text }
diff --git a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx b/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
index 18754218c1b..a3292a0d3b3 100644
--- a/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/form-step/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -60,15 +60,11 @@ const FormStep = ( {
 
 	return (
 		<Element
-			className={ classnames(
-				className,
-				'wc-block-components-checkout-step',
-				{
-					'wc-block-components-checkout-step--with-step-number':
-						showStepNumber,
-					'wc-block-components-checkout-step--disabled': disabled,
-				}
-			) }
+			className={ clsx( className, 'wc-block-components-checkout-step', {
+				'wc-block-components-checkout-step--with-step-number':
+					showStepNumber,
+				'wc-block-components-checkout-step--disabled': disabled,
+			} ) }
 			id={ id }
 			disabled={ disabled }
 		>
diff --git a/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx
index 6f7a5c9bcb6..74d76cdeb88 100644
--- a/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx
@@ -6,7 +6,7 @@ import type {
 	NumberFormatValues,
 	NumberFormatProps,
 } from 'react-number-format';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ReactElement } from 'react';
 import type { Currency } from '@woocommerce/types';
 
@@ -89,7 +89,7 @@ const FormattedMonetaryAmount = ( {
 		return null;
 	}
 
-	const classes = classNames(
+	const classes = clsx(
 		'wc-block-formatted-money-amount',
 		'wc-block-components-formatted-money-amount',
 		className
diff --git a/plugins/woocommerce-blocks/packages/components/label/index.tsx b/plugins/woocommerce-blocks/packages/components/label/index.tsx
index b67fc8daa4a..9f7398b2686 100644
--- a/plugins/woocommerce-blocks/packages/components/label/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/label/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Fragment } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ReactElement, HTMLProps } from 'react';
 
 export interface LabelProps extends HTMLProps< HTMLElement > {
@@ -34,10 +34,7 @@ const Label = ( {
 		Wrapper = wrapperElement || 'span';
 		wrapperProps = {
 			...wrapperProps,
-			className: classNames(
-				wrapperProps.className,
-				'screen-reader-text'
-			),
+			className: clsx( wrapperProps.className, 'screen-reader-text' ),
 		};
 
 		return <Wrapper { ...wrapperProps }>{ screenReaderLabel }</Wrapper>;
diff --git a/plugins/woocommerce-blocks/packages/components/panel/index.tsx b/plugins/woocommerce-blocks/packages/components/panel/index.tsx
index 52e32e1a65b..35b62a99ea9 100644
--- a/plugins/woocommerce-blocks/packages/components/panel/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/panel/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useState } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import type { ReactNode, ReactElement } from 'react';
 
@@ -38,7 +38,7 @@ const Panel = ( {
 
 	return (
 		<div
-			className={ classNames( className, 'wc-block-components-panel', {
+			className={ clsx( className, 'wc-block-components-panel', {
 				'has-border': hasBorder,
 			} ) }
 		>
diff --git a/plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx b/plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx
index a8b2ac050e6..47417d57cb1 100644
--- a/plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/radio-control-accordion/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -47,7 +47,7 @@ const RadioControlAccordion = ( {
 	}
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-radio-control',
 				{
 					'wc-block-components-radio-control--highlight-checked':
@@ -67,7 +67,7 @@ const RadioControlAccordion = ( {
 				const checked = option.value === selected;
 				return (
 					<div
-						className={ classnames(
+						className={ clsx(
 							'wc-block-components-radio-control-accordion-option',
 							{
 								'wc-block-components-radio-control-accordion-option--checked-option-highlighted':
@@ -89,7 +89,7 @@ const RadioControlAccordion = ( {
 						/>
 						{ hasOptionContent && checked && (
 							<div
-								className={ classnames(
+								className={ clsx(
 									'wc-block-components-radio-control-accordion-content',
 									{
 										'wc-block-components-radio-control-accordion-content-hide':
diff --git a/plugins/woocommerce-blocks/packages/components/radio-control/index.tsx b/plugins/woocommerce-blocks/packages/components/radio-control/index.tsx
index f5c7a27f7d0..be54096af24 100644
--- a/plugins/woocommerce-blocks/packages/components/radio-control/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/radio-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -34,7 +34,7 @@ const RadioControl = ( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wc-block-components-radio-control',
 				{
 					'wc-block-components-radio-control--highlight-checked--first-selected':
diff --git a/plugins/woocommerce-blocks/packages/components/radio-control/option.tsx b/plugins/woocommerce-blocks/packages/components/radio-control/option.tsx
index 93ec32ffc6f..5825297c9b2 100644
--- a/plugins/woocommerce-blocks/packages/components/radio-control/option.tsx
+++ b/plugins/woocommerce-blocks/packages/components/radio-control/option.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -25,15 +25,11 @@ const Option = ( {
 	return (
 		// eslint-disable-next-line jsx-a11y/label-has-associated-control
 		<label
-			className={ classnames(
-				'wc-block-components-radio-control__option',
-				{
-					'wc-block-components-radio-control__option-checked':
-						checked,
-					'wc-block-components-radio-control__option--checked-option-highlighted':
-						checked && highlightChecked,
-				}
-			) }
+			className={ clsx( 'wc-block-components-radio-control__option', {
+				'wc-block-components-radio-control__option-checked': checked,
+				'wc-block-components-radio-control__option--checked-option-highlighted':
+					checked && highlightChecked,
+			} ) }
 			htmlFor={ `${ name }-${ value }` }
 		>
 			<input
@@ -44,7 +40,7 @@ const Option = ( {
 				value={ value }
 				onChange={ onChangeValue }
 				checked={ checked }
-				aria-describedby={ classnames( {
+				aria-describedby={ clsx( {
 					[ `${ name }-${ value }__label` ]: label,
 					[ `${ name }-${ value }__secondary-label` ]: secondaryLabel,
 					[ `${ name }-${ value }__description` ]: description,
diff --git a/plugins/woocommerce-blocks/packages/components/sort-select/index.tsx b/plugins/woocommerce-blocks/packages/components/sort-select/index.tsx
index c275752a1f1..732044bd1e1 100644
--- a/plugins/woocommerce-blocks/packages/components/sort-select/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/sort-select/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withInstanceId } from '@wordpress/compose';
 import type { ChangeEventHandler } from 'react';
 
@@ -68,7 +68,7 @@ export const SortSelect = ( {
 
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'wc-block-sort-select',
 				'wc-block-components-sort-select',
 				className
diff --git a/plugins/woocommerce-blocks/packages/components/store-notice/index.tsx b/plugins/woocommerce-blocks/packages/components/store-notice/index.tsx
index 7236125a447..e9f1e200375 100644
--- a/plugins/woocommerce-blocks/packages/components/store-notice/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/store-notice/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import NoticeBanner, {
 	NoticeBannerProps,
 } from '@woocommerce/base-components/notice-banner';
@@ -17,7 +17,7 @@ const StoreNotice = ( {
 }: NoticeBannerProps ) => {
 	return (
 		<NoticeBanner
-			className={ classnames( 'wc-block-store-notice', className ) }
+			className={ clsx( 'wc-block-store-notice', className ) }
 			status={ status }
 			{ ...props }
 		>
diff --git a/plugins/woocommerce-blocks/packages/components/store-notices-container/snackbar-notices.tsx b/plugins/woocommerce-blocks/packages/components/store-notices-container/snackbar-notices.tsx
index 448ca6441fa..cfd22120548 100644
--- a/plugins/woocommerce-blocks/packages/components/store-notices-container/snackbar-notices.tsx
+++ b/plugins/woocommerce-blocks/packages/components/store-notices-container/snackbar-notices.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import SnackbarList from '@woocommerce/base-components/snackbar-list';
 import { useDispatch } from '@wordpress/data';
 import type { NoticeType } from '@woocommerce/types';
@@ -17,7 +17,7 @@ const SnackbarNotices = ( {
 
 	return (
 		<SnackbarList
-			className={ classnames(
+			className={ clsx(
 				className,
 				'wc-block-components-notices__snackbar'
 			) }
diff --git a/plugins/woocommerce-blocks/packages/components/store-notices-container/store-notices.tsx b/plugins/woocommerce-blocks/packages/components/store-notices-container/store-notices.tsx
index 2e9e231f421..c2bb9c44794 100644
--- a/plugins/woocommerce-blocks/packages/components/store-notices-container/store-notices.tsx
+++ b/plugins/woocommerce-blocks/packages/components/store-notices-container/store-notices.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useRef, useEffect, RawHTML } from '@wordpress/element';
 import { sanitizeHTML } from '@woocommerce/utils';
 import { useDispatch } from '@wordpress/data';
@@ -88,7 +88,7 @@ const StoreNotices = ( {
 	return (
 		<div
 			ref={ ref }
-			className={ classnames( className, 'wc-block-components-notices' ) }
+			className={ clsx( className, 'wc-block-components-notices' ) }
 		>
 			{ nonDismissibleNotices.map( ( notice ) => (
 				<StoreNotice
diff --git a/plugins/woocommerce-blocks/packages/components/text-input/text-input.tsx b/plugins/woocommerce-blocks/packages/components/text-input/text-input.tsx
index 7c4b1cc3df8..9c2604516b7 100644
--- a/plugins/woocommerce-blocks/packages/components/text-input/text-input.tsx
+++ b/plugins/woocommerce-blocks/packages/components/text-input/text-input.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { forwardRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { InputHTMLAttributes } from 'react';
@@ -58,13 +58,9 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 
 		return (
 			<div
-				className={ classnames(
-					'wc-block-components-text-input',
-					className,
-					{
-						'is-active': isActive || value,
-					}
-				) }
+				className={ clsx( 'wc-block-components-text-input', className, {
+					'is-active': isActive || value,
+				} ) }
 			>
 				<input
 					type={ type }
diff --git a/plugins/woocommerce-blocks/packages/components/text-input/validated-text-input.tsx b/plugins/woocommerce-blocks/packages/components/text-input/validated-text-input.tsx
index 02d273689b2..54eeb7e65db 100644
--- a/plugins/woocommerce-blocks/packages/components/text-input/validated-text-input.tsx
+++ b/plugins/woocommerce-blocks/packages/components/text-input/validated-text-input.tsx
@@ -9,7 +9,7 @@ import {
 	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isObject } from '@woocommerce/types';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
@@ -225,7 +225,7 @@ const ValidatedTextInput = forwardRef<
 
 		return (
 			<TextInput
-				className={ classnames( className, {
+				className={ clsx( className, {
 					'has-error': hasError,
 				} ) }
 				aria-invalid={ hasError === true }
diff --git a/plugins/woocommerce-blocks/packages/components/textarea/index.tsx b/plugins/woocommerce-blocks/packages/components/textarea/index.tsx
index ebaa81c69f7..39f0b26f275 100644
--- a/plugins/woocommerce-blocks/packages/components/textarea/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/textarea/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,7 +24,7 @@ export const Textarea = ( {
 	value = '',
 }: TextareaProps ): JSX.Element => (
 	<textarea
-		className={ classnames( 'wc-block-components-textarea', className ) }
+		className={ clsx( 'wc-block-components-textarea', className ) }
 		disabled={ disabled }
 		onChange={ ( event ) => {
 			onTextChange( event.target.value );
diff --git a/plugins/woocommerce-blocks/packages/components/title/index.tsx b/plugins/woocommerce-blocks/packages/components/title/index.tsx
index e204c1539ff..a21724b1676 100644
--- a/plugins/woocommerce-blocks/packages/components/title/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/title/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ReactNode } from 'react';
 
 /**
@@ -18,10 +18,7 @@ const Title = ( {
 	headingLevel,
 	...props
 }: TitleProps ): JSX.Element => {
-	const buttonClassName = classNames(
-		'wc-block-components-title',
-		className
-	);
+	const buttonClassName = clsx( 'wc-block-components-title', className );
 	const TagName = `h${ headingLevel }` as keyof JSX.IntrinsicElements;
 
 	return (
diff --git a/plugins/woocommerce-blocks/packages/components/totals-wrapper/index.tsx b/plugins/woocommerce-blocks/packages/components/totals-wrapper/index.tsx
index 457516333d4..eff8dd7b21d 100644
--- a/plugins/woocommerce-blocks/packages/components/totals-wrapper/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/totals-wrapper/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Children } from '@wordpress/element';
 import type { ReactNode } from 'react';
 
@@ -24,13 +24,9 @@ const TotalsWrapper = ( {
 }: TotalsWrapperProps ): JSX.Element | null => {
 	return Children.count( children ) ? (
 		<div
-			className={ classnames(
-				className,
-				'wc-block-components-totals-wrapper',
-				{
-					'slot-wrapper': slotWrapper,
-				}
-			) }
+			className={ clsx( className, 'wc-block-components-totals-wrapper', {
+				'slot-wrapper': slotWrapper,
+			} ) }
 		>
 			{ children }
 		</div>
diff --git a/plugins/woocommerce-blocks/packages/components/totals/fees/index.tsx b/plugins/woocommerce-blocks/packages/components/totals/fees/index.tsx
index 46dfdcf3092..65423bf82ae 100644
--- a/plugins/woocommerce-blocks/packages/components/totals/fees/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/totals/fees/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { getSetting } from '@woocommerce/settings';
 import type { CartFeeItem, Currency } from '@woocommerce/types';
@@ -48,7 +48,7 @@ const TotalsFees = ( {
 				return (
 					<TotalsItem
 						key={ id || `${ index }-${ name }` }
-						className={ classnames(
+						className={ clsx(
 							'wc-block-components-totals-fees',
 							'wc-block-components-totals-fees__' + key,
 							className
diff --git a/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx b/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
index 529835dcd59..3e2b546c115 100644
--- a/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/totals/item/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isValidElement } from '@wordpress/element';
 import type { ReactElement, ReactNode } from 'react';
 import type { Currency } from '@woocommerce/types';
@@ -50,12 +50,7 @@ const TotalsItem = ( {
 	description,
 }: TotalsItemProps ): ReactElement => {
 	return (
-		<div
-			className={ classnames(
-				'wc-block-components-totals-item',
-				className
-			) }
-		>
+		<div className={ clsx( 'wc-block-components-totals-item', className ) }>
 			<span className="wc-block-components-totals-item__label">
 				{ label }
 			</span>
diff --git a/plugins/woocommerce-blocks/packages/components/totals/taxes/index.tsx b/plugins/woocommerce-blocks/packages/components/totals/taxes/index.tsx
index 629bb8911f4..630bb6d92af 100644
--- a/plugins/woocommerce-blocks/packages/components/totals/taxes/index.tsx
+++ b/plugins/woocommerce-blocks/packages/components/totals/taxes/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { getSetting } from '@woocommerce/settings';
 import type { CartTotalsTaxLineItem, Currency } from '@woocommerce/types';
@@ -54,7 +54,7 @@ const TotalsTaxes = ( {
 					return (
 						<TotalsItem
 							key={ `tax-line-${ i }` }
-							className={ classnames(
+							className={ clsx(
 								'wc-block-components-totals-taxes',
 								className
 							) }
@@ -72,7 +72,7 @@ const TotalsTaxes = ( {
 	) : (
 		<>
 			<TotalsItem
-				className={ classnames(
+				className={ clsx(
 					'wc-block-components-totals-taxes',
 					className
 				) }
diff --git a/plugins/woocommerce/changelog/47602-performance-replace-classnames-usage-with-clsx b/plugins/woocommerce/changelog/47602-performance-replace-classnames-usage-with-clsx
new file mode 100644
index 00000000000..f511d7bbdfb
--- /dev/null
+++ b/plugins/woocommerce/changelog/47602-performance-replace-classnames-usage-with-clsx
@@ -0,0 +1,4 @@
+Significance: minor
+Type: performance
+
+Replaced `classnames` package with the faster and smaller `clsx` package.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5db800ca95..f50ef8d1f76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3287,9 +3287,9 @@ importers:
       '@xstate5/react':
         specifier: npm:@xstate/react@4
         version: '@xstate/react@4.1.0(@types/react@17.0.71)(react@17.0.2)(xstate@4.37.1)'
-      classnames:
-        specifier: ^2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       core-js:
         specifier: ^3.34.0
         version: 3.34.0
@@ -3928,9 +3928,9 @@ importers:
       change-case:
         specifier: ^4.1.2
         version: 4.1.2
-      classnames:
-        specifier: ^2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       compare-versions:
         specifier: 4.1.3
         version: 4.1.3
@@ -4098,9 +4098,6 @@ importers:
       '@testing-library/user-event':
         specifier: 14.5.2
         version: 14.5.2(@testing-library/dom@9.3.3)
-      '@types/classnames':
-        specifier: 2.3.0
-        version: 2.3.0
       '@types/dinero.js':
         specifier: 1.9.0
         version: 1.9.0
@@ -9332,9 +9329,6 @@ packages:
   '@types/cheerio@0.22.35':
     resolution: {integrity: sha512-yD57BchKRvTV+JD53UZ6PD8KWY5g5rvvMLRnZR3EQBCZXiDT/HR+pKpMzFGlWNhFrXlo7VPZXtKvIEwZkAWOIA==}
 
-  '@types/classnames@2.3.0':
-    resolution: {integrity: sha512-3GsbOoDYteFShlrBTKzI2Eii4vPg/jAf7LXRIn0WQePKlmhpkV0KoTMuawA7gZJkrbPrZGwv9IEAfIWaOaQK8w==}
-
   '@types/cli-progress@3.11.5':
     resolution: {integrity: sha512-D4PbNRbviKyppS5ivBGyFO29POlySLmA2HyUFE4p5QGazAMM3CwkKWcvTl8gvElSuxRh6FPKL8XmidX873ou4g==}
 
@@ -13135,6 +13129,10 @@ packages:
   cloneable-readable@1.1.3:
     resolution: {integrity: sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   cmd-shim@5.0.0:
     resolution: {integrity: sha512-qkCtZ59BidfEwHltnJwkyVZn+XQojdAySM1D1gSeh11Z4pW1Kpolkyo53L5noc0nrxmIvyFwTmJRo4xs7FFLPw==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -35513,10 +35511,6 @@ snapshots:
     dependencies:
       '@types/node': 16.18.68
 
-  '@types/classnames@2.3.0':
-    dependencies:
-      classnames: 2.3.2
-
   '@types/cli-progress@3.11.5':
     dependencies:
       '@types/node': 16.18.68
@@ -44039,6 +44033,8 @@ snapshots:
       process-nextick-args: 2.0.1
       readable-stream: 2.3.8
 
+  clsx@2.1.1: {}
+
   cmd-shim@5.0.0:
     dependencies:
       mkdirp-infer-owner: 2.0.0