diff --git a/.eslintrc.js b/.eslintrc.js
index de7fc1a07ebc..7b15a5f9a750 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,6 +3,7 @@ const loadIgnorePatterns = require( './tools/js-tools/load-eslint-ignore.js' );
 /**
  * @type {import("eslint").Linter.Config}
  */
+
 module.exports = {
 	root: true,
 	extends: [ './tools/js-tools/eslintrc/base.js' ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec95446d6914..9e0e0dc41fa5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,9 +139,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       debug:
         specifier: 4.3.4
         version: 4.3.4
@@ -308,9 +308,9 @@ importers:
       '@wordpress/notices':
         specifier: 5.0.0
         version: 5.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prop-types:
         specifier: ^15.7.2
         version: 15.8.1
@@ -459,9 +459,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       debug:
         specifier: 4.3.4
         version: 4.3.4
@@ -768,9 +768,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prop-types:
         specifier: 15.7.2
         version: 15.7.2
@@ -832,9 +832,9 @@ importers:
       '@wordpress/i18n':
         specifier: 5.0.0
         version: 5.0.0
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prop-types:
         specifier: 15.7.2
         version: 15.7.2
@@ -950,9 +950,9 @@ importers:
       '@wordpress/notices':
         specifier: 5.0.0
         version: 5.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prop-types:
         specifier: 15.8.1
         version: 15.8.1
@@ -1924,9 +1924,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       copy-webpack-plugin:
         specifier: 11.0.0
         version: 11.0.0(webpack@5.76.0(webpack-cli@4.9.1))
@@ -2295,9 +2295,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       debug:
         specifier: 4.3.4
         version: 4.3.4
@@ -2461,9 +2461,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       fast-json-stable-stringify:
         specifier: 2.1.0
         version: 2.1.0
@@ -2673,9 +2673,9 @@ importers:
       '@wordpress/url':
         specifier: 4.0.0
         version: 4.0.0
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       debug:
         specifier: 4.3.4
         version: 4.3.4
@@ -2824,9 +2824,9 @@ importers:
       chart.js:
         specifier: 3.7.1
         version: 3.7.1
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       fast-json-stable-stringify:
         specifier: 2.1.0
         version: 2.1.0
@@ -3035,9 +3035,9 @@ importers:
       '@wordpress/i18n':
         specifier: 5.0.0
         version: 5.0.0
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -3135,9 +3135,9 @@ importers:
       '@wordpress/element':
         specifier: 6.0.0
         version: 6.0.0
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       copy-webpack-plugin:
         specifier: 11.0.0
         version: 11.0.0(webpack@5.76.0(webpack-cli@4.9.1))
@@ -3380,9 +3380,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prop-types:
         specifier: 15.8.1
         version: 15.8.1
@@ -3628,12 +3628,12 @@ importers:
       bounding-client-rect:
         specifier: 1.0.5
         version: 1.0.5
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
       clipboard:
         specifier: 2.0.6
         version: 2.0.6
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       component-uid:
         specifier: 0.0.2
         version: 0.0.2
@@ -4017,9 +4017,9 @@ importers:
       camelize:
         specifier: 1.0.1
         version: 1.0.1
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       diff:
         specifier: ^4.0.2
         version: 4.0.2
@@ -4125,9 +4125,9 @@ importers:
       '@wordpress/icons':
         specifier: 10.0.0
         version: 10.0.0(react@18.3.1)
-      classnames:
-        specifier: 2.3.2
-        version: 2.3.2
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       react:
         specifier: 18.3.1
         version: 18.3.1
diff --git a/projects/js-packages/ai-client/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/ai-client/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/ai-client/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/ai-client/package.json b/projects/js-packages/ai-client/package.json
index 04238f8cea60..defbbded2e08 100644
--- a/projects/js-packages/ai-client/package.json
+++ b/projects/js-packages/ai-client/package.json
@@ -56,7 +56,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",
 		"react": "18.3.1",
diff --git a/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx b/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx
index c1fe931fc7cc..60f4155245ef 100644
--- a/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx
+++ b/projects/js-packages/ai-client/src/components/ai-control/ai-control.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -54,14 +54,14 @@ export default function AIControl( {
 }: AIControlProps ): ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			className={ clsx( 'jetpack-components-ai-control__container-wrapper', className ) }
 			ref={ wrapperRef }
 		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }
 				<div
-					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+					className={ clsx( 'jetpack-components-ai-control__wrapper', {
 						'is-transparent': isTransparent,
 					} ) }
 				>
diff --git a/projects/js-packages/ai-client/src/components/ai-status-indicator/index.tsx b/projects/js-packages/ai-client/src/components/ai-status-indicator/index.tsx
index 2cac9d3898a8..613f3e7a3f53 100644
--- a/projects/js-packages/ai-client/src/components/ai-status-indicator/index.tsx
+++ b/projects/js-packages/ai-client/src/components/ai-status-indicator/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*
  * Types
  */
@@ -26,7 +26,7 @@ export type AiStatusIndicatorProps = {
 export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
+			className={ clsx( 'jetpack-ai-status-indicator__icon-wrapper', {
 				[ `is-${ state }` ]: true,
 			} ) }
 		>
diff --git a/projects/js-packages/ai-client/src/components/message/index.tsx b/projects/js-packages/ai-client/src/components/message/index.tsx
index 6f25078cb8d4..aa57982800c3 100644
--- a/projects/js-packages/ai-client/src/components/message/index.tsx
+++ b/projects/js-packages/ai-client/src/components/message/index.tsx
@@ -4,7 +4,7 @@
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -78,7 +78,7 @@ export default function Message( {
 }: MessageProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'jetpack-ai-assistant__message',
 				`jetpack-ai-assistant__message-severity-${ severity }`
 			) }
diff --git a/projects/js-packages/components/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/components/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/components/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/components/components/action-button/index.jsx b/projects/js-packages/components/components/action-button/index.jsx
index 3b03ea851ad2..f7f37245760e 100644
--- a/projects/js-packages/components/components/action-button/index.jsx
+++ b/projects/js-packages/components/components/action-button/index.jsx
@@ -3,7 +3,7 @@
  */
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 /**
  * Internal dependencies
@@ -40,7 +40,7 @@ const ActionButton = props => {
 		<>
 			{
 				<Button
-					className={ classNames( styles.button, 'jp-action-button--button', customClass ) }
+					className={ clsx( styles.button, 'jp-action-button--button', customClass ) }
 					label={ label }
 					onClick={ onClick }
 					variant="primary"
@@ -51,7 +51,7 @@ const ActionButton = props => {
 			}
 
 			{ displayError && (
-				<p className={ classNames( styles.error, 'jp-action-button__error' ) }>{ errorMessage }</p>
+				<p className={ clsx( styles.error, 'jp-action-button__error' ) }>{ errorMessage }</p>
 			) }
 		</>
 	);
diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index 5238058e1c73..480070cd31ac 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import JetpackFooter from '../jetpack-footer';
 import JetpackLogo from '../jetpack-logo';
 import Col from '../layout/col';
@@ -25,7 +25,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 	showBackground = true,
 	header,
 } ) => {
-	const rootClassName = classNames( styles[ 'admin-page' ], {
+	const rootClassName = clsx( styles[ 'admin-page' ], {
 		[ styles.background ]: showBackground,
 	} );
 
diff --git a/projects/js-packages/components/components/alert/index.tsx b/projects/js-packages/components/components/alert/index.tsx
index 6babf1b90ac6..7209a0db1787 100644
--- a/projects/js-packages/components/components/alert/index.tsx
+++ b/projects/js-packages/components/components/alert/index.tsx
@@ -1,5 +1,5 @@
 import { Icon, warning, info, check } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './style.module.scss';
 
@@ -39,7 +39,7 @@ const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
  * @returns {React.ReactElement}             The `Alert` component.
  */
 const Alert: React.FC< AlertProps > = ( { level = 'warning', children, showIcon = true } ) => {
-	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
+	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
 
 	return (
 		<div className={ classes }>
diff --git a/projects/js-packages/components/components/automattic-byline-logo/index.tsx b/projects/js-packages/components/components/automattic-byline-logo/index.tsx
index 723ecd5d69bd..797f732ae826 100644
--- a/projects/js-packages/components/components/automattic-byline-logo/index.tsx
+++ b/projects/js-packages/components/components/automattic-byline-logo/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { AutomatticBylineLogoProps } from './types';
 
@@ -24,7 +24,7 @@ const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
 			enableBackground="new 0 0 935 38.2"
 			aria-labelledby="jp-automattic-byline-logo-title"
 			height={ height }
-			className={ classnames( 'jp-automattic-byline-logo', className ) }
+			className={ clsx( 'jp-automattic-byline-logo', className ) }
 			{ ...otherProps }
 		>
 			<desc id="jp-automattic-byline-logo-title">{ title }</desc>
diff --git a/projects/js-packages/components/components/boost-score-bar/index.tsx b/projects/js-packages/components/components/boost-score-bar/index.tsx
index 105805c479ad..8bfffec036a7 100644
--- a/projects/js-packages/components/components/boost-score-bar/index.tsx
+++ b/projects/js-packages/components/components/boost-score-bar/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from '../gridicon';
 import type { BoostScoreBarProps } from './types';
 import type { FunctionComponent } from 'react';
@@ -50,7 +50,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 	};
 
 	return (
-		<div className={ classNames( 'jb-score-bar', `jb-score-bar--${ scoreBarType }` ) }>
+		<div className={ clsx( 'jb-score-bar', `jb-score-bar--${ scoreBarType }` ) }>
 			<div className="jb-score-bar__label">
 				{ getIcon() }
 				<div>{ scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel }</div>
@@ -58,7 +58,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 
 			<div className="jb-score-bar__bounds">
 				<div
-					className={ classNames( 'jb-score-bar__filler', getFillColor() ) }
+					className={ clsx( 'jb-score-bar__filler', getFillColor() ) }
 					style={ { width: `${ score }%` } }
 				>
 					{ isLoading ? (
diff --git a/projects/js-packages/components/components/button/index.tsx b/projects/js-packages/components/components/button/index.tsx
index 9ff7078c6ea9..101c60090051 100644
--- a/projects/js-packages/components/components/button/index.tsx
+++ b/projects/js-packages/components/components/button/index.tsx
@@ -4,7 +4,7 @@
 import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 /**
  * Internal dependencies
@@ -36,7 +36,7 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 		...componentProps
 	} = props;
 
-	const className = classNames( styles.button, propsClassName, {
+	const className = clsx( styles.button, propsClassName, {
 		[ styles.normal ]: size === 'normal',
 		[ styles.small ]: size === 'small',
 		[ styles.icon ]: Boolean( icon ),
@@ -73,7 +73,7 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 		<WPButton
 			target={ externalTarget }
 			variant={ variant }
-			className={ classNames( className, { 'has-text': !! icon && hasChildren } ) }
+			className={ clsx( className, { 'has-text': !! icon && hasChildren } ) }
 			icon={ ! isExternalLink ? icon : undefined }
 			iconSize={ iconSize }
 			disabled={ disabled }
diff --git a/projects/js-packages/components/components/contextual-upgrade-trigger/index.tsx b/projects/js-packages/components/components/contextual-upgrade-trigger/index.tsx
index 391855367739..facfb3de4afa 100644
--- a/projects/js-packages/components/components/contextual-upgrade-trigger/index.tsx
+++ b/projects/js-packages/components/components/contextual-upgrade-trigger/index.tsx
@@ -1,5 +1,5 @@
 import { Icon, arrowRight } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import IconTooltip from '../icon-tooltip';
 import Text from '../text';
 import styles from './style.module.scss';
@@ -20,7 +20,7 @@ const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {
 		Tag === 'a' ? { href, ...( openInNewTab && { target: '_blank' } ) } : { onClick };
 
 	return (
-		<div className={ classnames( styles.cut, className ) }>
+		<div className={ clsx( styles.cut, className ) }>
 			<div>
 				<div>
 					<Text className={ styles.description }>{ description }</Text>
diff --git a/projects/js-packages/components/components/dialog/index.tsx b/projects/js-packages/components/components/dialog/index.tsx
index 5af9b2c1dfb3..847f3677c9bb 100644
--- a/projects/js-packages/components/components/dialog/index.tsx
+++ b/projects/js-packages/components/components/dialog/index.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import Col from '../layout/col';
 import Container from '../layout/container';
@@ -38,7 +38,7 @@ const Dialog: React.FC< DialogProps > = ( {
 	 */
 	const hideSecondarySection = ! isTwoSections && isSmall;
 
-	const classNames = classnames( {
+	const classNames = clsx( {
 		[ styles[ 'one-section-style' ] ]: ! isTwoSections,
 		[ styles[ 'is-viewport-small' ] ]: isSmall,
 	} );
diff --git a/projects/js-packages/components/components/gridicon/index.tsx b/projects/js-packages/components/components/gridicon/index.tsx
index f077f91bb273..c99c2a7b76c4 100644
--- a/projects/js-packages/components/components/gridicon/index.tsx
+++ b/projects/js-packages/components/components/gridicon/index.tsx
@@ -6,7 +6,7 @@ It has been modified to work with Preact, and only includes the icons that we ne
 !!! */
 
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Component } from 'react';
 import './style.scss';
 import { GridiconProps } from './types';
@@ -290,7 +290,7 @@ class Gridicon extends Component< GridiconProps > {
 
 		const icon = 'gridicons-' + this.props.icon;
 
-		const iconClass = classNames( 'gridicon', icon, className, {
+		const iconClass = clsx( 'gridicon', icon, className, {
 			'needs-offset': this.needsOffset( icon, size ),
 		} );
 		const description = this.getSVGDescription( icon );
diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
index 3b67017cbe32..584da8b42949 100644
--- a/projects/js-packages/components/components/icon-tooltip/index.tsx
+++ b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -1,5 +1,5 @@
 import { Popover } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import Button from '../button';
 import Gridicon from '../gridicon/index';
@@ -71,7 +71,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 
 	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
 
-	const wrapperClassNames = classNames( 'icon-tooltip-wrapper', className );
+	const wrapperClassNames = clsx( 'icon-tooltip-wrapper', className );
 	const iconShiftBySize = {
 		left: isAnchorWrapper ? 0 : -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px',
 	};
@@ -86,7 +86,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 				</Button>
 			) }
 			<div
-				className={ classNames( 'icon-tooltip-helper', { 'is-wide': wide } ) }
+				className={ clsx( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }
 			>
 				{ ( isForcedToShow || isVisible ) && (
diff --git a/projects/js-packages/components/components/icons/index.tsx b/projects/js-packages/components/components/icons/index.tsx
index bed624ca12b1..1e77dd87e880 100644
--- a/projects/js-packages/components/components/icons/index.tsx
+++ b/projects/js-packages/components/components/icons/index.tsx
@@ -1,5 +1,5 @@
 import { Path, SVG, G, Polygon } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SocialLogo from 'social-logos';
 import styles from './style.module.scss';
 import { BaseIconProps } from './types';
@@ -20,7 +20,7 @@ const IconWrapper: React.FC< BaseIconProps > = ( {
 	children,
 } ) => {
 	const iconProps = {
-		className: classNames( styles.iconWrapper, className ),
+		className: clsx( styles.iconWrapper, className ),
 		width: size,
 		height: size,
 		viewBox,
@@ -282,7 +282,7 @@ export const SocialServiceIcon: React.FC< {
 } > = ( { serviceName, className, iconSize } ) => {
 	return (
 		<SocialLogo
-			className={ classNames( styles.socialIcon, styles[ serviceName ], className ) }
+			className={ clsx( styles.socialIcon, styles[ serviceName ], className ) }
 			icon={ serviceName }
 			size={ iconSize || 24 }
 		/>
diff --git a/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx b/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
index d94d85f7125e..ea3a182cee50 100644
--- a/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
+++ b/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -19,7 +19,7 @@ import type React from 'react';
 const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( { className } ) => {
 	return (
 		<div
-			className={ classnames( className, styles[ 'indeterminate-progress-bar' ] ) }
+			className={ clsx( className, styles[ 'indeterminate-progress-bar' ] ) }
 			aria-label={ __( 'Indeterminate Progress Bar', 'jetpack' ) }
 		/>
 	);
diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx
index dcb32b896caf..3a4c2572fefc 100644
--- a/projects/js-packages/components/components/jetpack-footer/index.tsx
+++ b/projects/js-packages/components/components/jetpack-footer/index.tsx
@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { getRedirectUrl } from '../..';
 import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';
@@ -111,7 +111,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 
 	return (
 		<footer
-			className={ classnames(
+			className={ clsx(
 				'jp-dashboard-footer',
 				{
 					'is-sm': isSm,
@@ -143,7 +143,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 								target={ item.target }
 								onClick={ item.onClick }
 								onKeyDown={ item.onKeyDown }
-								className={ classnames( 'jp-dashboard-footer__menu-item', {
+								className={ clsx( 'jp-dashboard-footer__menu-item', {
 									'is-external': isExternalLink,
 								} ) }
 								role={ item.role }
diff --git a/projects/js-packages/components/components/jetpack-logo/index.tsx b/projects/js-packages/components/components/jetpack-logo/index.tsx
index 7c0f3ff22339..d802ce6bf268 100644
--- a/projects/js-packages/components/components/jetpack-logo/index.tsx
+++ b/projects/js-packages/components/components/jetpack-logo/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { JetpackLogoProps } from './types';
 
@@ -18,7 +18,7 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 			x="0px"
 			y="0px"
 			viewBox={ viewBox }
-			className={ classnames( 'jetpack-logo', className ) }
+			className={ clsx( 'jetpack-logo', className ) }
 			aria-labelledby="jetpack-logo-title"
 			height={ height }
 			{ ...otherProps }
diff --git a/projects/js-packages/components/components/jetpack-search-logo/index.tsx b/projects/js-packages/components/components/jetpack-search-logo/index.tsx
index 3b0bec33ef76..f0a475ba092b 100644
--- a/projects/js-packages/components/components/jetpack-search-logo/index.tsx
+++ b/projects/js-packages/components/components/jetpack-search-logo/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { JetpackSearchLogoProps } from './types';
 
@@ -19,7 +19,7 @@ const JetpackSearchLogo: React.FC< JetpackSearchLogoProps > = ( {
 			x="0px"
 			y="0px"
 			viewBox="0 0 330 42"
-			className={ classNames( 'jetpack-logo', className ) }
+			className={ clsx( 'jetpack-logo', className ) }
 			aria-labelledby="jetpack-logo-title"
 			{ ...otherProps }
 		>
diff --git a/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/index.tsx b/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/index.tsx
index f71103d44bfd..9c3e63b32335 100644
--- a/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/index.tsx
+++ b/projects/js-packages/components/components/jetpack-vaultpress-backup-logo/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { JetpackLogoProps } from './types';
 
@@ -17,7 +17,7 @@ const JetpackVaultPressBackupLogo: React.FC< JetpackLogoProps > = ( {
 			x="0px"
 			y="0px"
 			viewBox={ viewBox }
-			className={ classnames( 'jetpack-vaultpress-backup-logo', className ) }
+			className={ clsx( 'jetpack-vaultpress-backup-logo', className ) }
 			aria-labelledby="jetpack-vaultpress-backup-logo-title"
 			height={ height }
 			{ ...otherProps }
diff --git a/projects/js-packages/components/components/jetpack-videopress-logo/index.tsx b/projects/js-packages/components/components/jetpack-videopress-logo/index.tsx
index 33274a39459d..ab7347d87d46 100644
--- a/projects/js-packages/components/components/jetpack-videopress-logo/index.tsx
+++ b/projects/js-packages/components/components/jetpack-videopress-logo/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { JetpackLogoProps } from './types';
 
@@ -17,7 +17,7 @@ const JetpackVideoPressLogo: React.FC< JetpackLogoProps > = ( {
 			x="0px"
 			y="0px"
 			viewBox={ viewBox }
-			className={ classnames( 'jetpack-videopress-logo', className ) }
+			className={ clsx( 'jetpack-videopress-logo', className ) }
 			aria-labelledby="jetpack-videopress-logo-title"
 			height={ height }
 			{ ...otherProps }
diff --git a/projects/js-packages/components/components/layout/col/index.tsx b/projects/js-packages/components/components/layout/col/index.tsx
index 937a6424d9f4..ecaf0e725e3e 100644
--- a/projects/js-packages/components/components/layout/col/index.tsx
+++ b/projects/js-packages/components/components/layout/col/index.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { createElement } from 'react';
 import { ColProps } from '../types';
 import styles from './style.module.scss';
@@ -29,7 +29,7 @@ const Col: React.FC< ColProps > = props => {
 	const lgStart = Math.min( lgCols, typeof props.lg === 'object' ? props.lg.start : 0 ); // max of 12, if undefined = 0
 	const lgEnd = Math.min( lgCols, typeof props.lg === 'object' ? props.lg.end : 0 ); // max of 12, if undefined = 0
 
-	const colClassName = classnames( className, {
+	const colClassName = clsx( className, {
 		// SM
 		[ styles[ `col-sm-${ sm }` ] ]: ! ( smStart && smEnd ),
 		[ styles[ `col-sm-${ smStart }-start` ] ]: smStart > 0,
diff --git a/projects/js-packages/components/components/layout/container/index.tsx b/projects/js-packages/components/components/layout/container/index.tsx
index e8a11f81ca81..00c22cef7900 100644
--- a/projects/js-packages/components/components/layout/container/index.tsx
+++ b/projects/js-packages/components/components/layout/container/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createElement, useMemo } from 'react';
 import { ContainerProps } from '../types';
 import styles from './style.module.scss';
@@ -29,7 +29,7 @@ const Container: React.FC< ContainerProps > = ( {
 		};
 	}, [ horizontalGap, horizontalSpacing ] );
 
-	const containerClassName = classNames( className, styles.container, {
+	const containerClassName = clsx( className, styles.container, {
 		[ styles.fluid ]: fluid,
 	} );
 
diff --git a/projects/js-packages/components/components/loading-placeholder/index.tsx b/projects/js-packages/components/components/loading-placeholder/index.tsx
index 8f8d0cf476cf..ed46aa567411 100644
--- a/projects/js-packages/components/components/loading-placeholder/index.tsx
+++ b/projects/js-packages/components/components/loading-placeholder/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './style.module.scss';
 
@@ -14,7 +14,7 @@ const LoadingPlaceholder = ( {
 	className?: string;
 } ) => {
 	return (
-		<div className={ classNames( styles.placeholder, className ) } style={ { width, height } }>
+		<div className={ clsx( styles.placeholder, className ) } style={ { width, height } }>
 			{ children }
 		</div>
 	);
diff --git a/projects/js-packages/components/components/notice/index.tsx b/projects/js-packages/components/components/notice/index.tsx
index bad42746bf78..bb1fdb6b467c 100644
--- a/projects/js-packages/components/components/notice/index.tsx
+++ b/projects/js-packages/components/components/notice/index.tsx
@@ -1,5 +1,5 @@
 import { Icon, warning, info, check, close } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './style.module.scss';
 
@@ -58,7 +58,7 @@ const Notice: React.FC< NoticeProps > = ( {
 	hideCloseButton = false,
 	onClose,
 } ) => {
-	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
+	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
 
 	return (
 		<div className={ classes }>
diff --git a/projects/js-packages/components/components/number-slider/index.tsx b/projects/js-packages/components/components/number-slider/index.tsx
index 513bd2f9d6ce..d391851b454f 100644
--- a/projects/js-packages/components/components/number-slider/index.tsx
+++ b/projects/js-packages/components/components/number-slider/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import ReactSlider from 'react-slider';
 import { NumberSliderProps } from './types';
@@ -24,7 +24,7 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 } ) => {
 	const [ isThumbHolding, setIsThumbHolding ] = React.useState( false );
 
-	const componentClassName = classNames( 'jp-components-number-slider', className, {
+	const componentClassName = clsx( 'jp-components-number-slider', className, {
 		'jp-components-number-slider--is-holding': isThumbHolding,
 	} );
 
diff --git a/projects/js-packages/components/components/pricing-table/index.tsx b/projects/js-packages/components/components/pricing-table/index.tsx
index 6250bc7860f0..6a4459362194 100644
--- a/projects/js-packages/components/components/pricing-table/index.tsx
+++ b/projects/js-packages/components/components/pricing-table/index.tsx
@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	createContext,
 	useContext,
@@ -73,9 +73,9 @@ export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
 	const defaultLabel = isLg ? labels.lg : labels.default;
 
 	return (
-		<div className={ classnames( styles.item, styles.value ) }>
+		<div className={ clsx( styles.item, styles.value ) }>
 			<Icon
-				className={ classnames(
+				className={ clsx(
 					styles.icon,
 					showTick ? styles[ 'icon-check' ] : styles[ 'icon-cross' ]
 				) }
@@ -87,7 +87,7 @@ export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
 				<IconTooltip
 					title={ tooltipTitle ? tooltipTitle : defaultTooltipTitle }
 					iconClassName={ styles[ 'popover-icon' ] }
-					className={ classnames( styles.popover, tooltipClassName ) }
+					className={ clsx( styles.popover, tooltipClassName ) }
 					placement={ 'bottom-end' }
 					iconSize={ 14 }
 					offset={ 4 }
@@ -113,7 +113,7 @@ export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
 	let index = 0;
 
 	return (
-		<div className={ classnames( styles.card, { [ styles[ 'is-primary' ] ]: primary } ) }>
+		<div className={ clsx( styles.card, { [ styles[ 'is-primary' ] ]: primary } ) }>
 			{ Children.map( children, child => {
 				const item = child as ReactElement<
 					PropsWithChildren< PricingTableHeaderProps | PricingTableItemProps >
@@ -141,7 +141,7 @@ const PricingTable: React.FC< PricingTableProps > = ( {
 	return (
 		<PricingTableContext.Provider value={ items }>
 			<div
-				className={ classnames( styles.container, { [ styles[ 'is-viewport-large' ] ]: isLg } ) }
+				className={ clsx( styles.container, { [ styles[ 'is-viewport-large' ] ]: isLg } ) }
 				style={
 					{
 						'--rows': items.length + 1,
@@ -154,7 +154,7 @@ const PricingTable: React.FC< PricingTableProps > = ( {
 					{ isLg &&
 						items.map( ( item, i ) => (
 							<div
-								className={ classnames( styles.item, {
+								className={ clsx( styles.item, {
 									[ styles[ 'last-feature' ] ]: i === items.length - 1,
 								} ) }
 								key={ i }
diff --git a/projects/js-packages/components/components/product-offer/index.tsx b/projects/js-packages/components/components/product-offer/index.tsx
index 3d734521ae6c..8875381796d2 100644
--- a/projects/js-packages/components/components/product-offer/index.tsx
+++ b/projects/js-packages/components/components/product-offer/index.tsx
@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Alert from '../alert';
 import Button from '../button/index';
 import { CheckmarkIcon } from '../icons/index';
@@ -49,7 +49,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 
 	return (
 		<div
-			className={ classnames( styles.wrapper, className, {
+			className={ clsx( styles.wrapper, className, {
 				[ styles[ 'is-bundle-card' ] ]: isBundle,
 				[ styles[ 'is-card' ] ]: isCard || isBundle, // is card when is bundle.
 			} ) }
diff --git a/projects/js-packages/components/components/product-price/index.tsx b/projects/js-packages/components/components/product-price/index.tsx
index 30c337094114..211cc06709a1 100644
--- a/projects/js-packages/components/components/product-price/index.tsx
+++ b/projects/js-packages/components/components/product-price/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /*
  * Internal dependencies
  */
@@ -48,7 +48,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 	return (
 		<>
 			<div className={ styles.container }>
-				<div className={ classnames( styles[ 'price-container' ], 'product-price_container' ) }>
+				<div className={ clsx( styles[ 'price-container' ], 'product-price_container' ) }>
 					<Price
 						value={ offPrice ?? price }
 						currency={ currency }
@@ -64,7 +64,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 						/>
 					) }
 					{ discountElt && (
-						<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+						<Text className={ clsx( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
 							{ discountElt }
 						</Text>
 					) }
@@ -74,10 +74,10 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 				{ children ? (
 					children
 				) : (
-					<Text className={ classnames( styles.legend, 'product-price_legend' ) }>{ legend }</Text>
+					<Text className={ clsx( styles.legend, 'product-price_legend' ) }>{ legend }</Text>
 				) }
 				{ promoLabel && (
-					<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+					<Text className={ clsx( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
 						{ promoLabel }
 					</Text>
 				) }
diff --git a/projects/js-packages/components/components/product-price/price.tsx b/projects/js-packages/components/components/product-price/price.tsx
index 45da259c7de3..fcfae7805070 100644
--- a/projects/js-packages/components/components/product-price/price.tsx
+++ b/projects/js-packages/components/components/product-price/price.tsx
@@ -1,5 +1,5 @@
 import { getCurrencyObject } from '@automattic/format-currency';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Text from '../text';
 import styles from './style.module.scss';
 import type { PriceProps } from './types';
@@ -12,7 +12,7 @@ import type React from 'react';
  * @returns {React.ReactNode} -Price react component.
  */
 export const Price: React.FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
-	const classNames = classnames( styles.price, 'product-price_price', {
+	const classNames = clsx( styles.price, 'product-price_price', {
 		[ styles[ 'is-not-off-price' ] ]: ! isOff,
 	} );
 
diff --git a/projects/js-packages/components/components/progress-bar/index.tsx b/projects/js-packages/components/components/progress-bar/index.tsx
index 85347184388e..fa530c410312 100644
--- a/projects/js-packages/components/components/progress-bar/index.tsx
+++ b/projects/js-packages/components/components/progress-bar/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -32,10 +32,8 @@ const ProgressBar: React.FC< ProgressBarProps > = ( {
 	};
 
 	return (
-		<div
-			className={ classnames( className, styles.wrapper, { [ styles.small ]: size === 'small' } ) }
-		>
-			<div className={ classnames( progressClassName, styles.progress ) } style={ style }></div>
+		<div className={ clsx( className, styles.wrapper, { [ styles.small ]: size === 'small' } ) }>
+			<div className={ clsx( progressClassName, styles.progress ) } style={ style }></div>
 		</div>
 	);
 };
diff --git a/projects/js-packages/components/components/radio-control/index.tsx b/projects/js-packages/components/components/radio-control/index.tsx
index 122f2c838b72..1da7def1492d 100644
--- a/projects/js-packages/components/components/radio-control/index.tsx
+++ b/projects/js-packages/components/components/radio-control/index.tsx
@@ -1,5 +1,5 @@
 import { RadioControl as WPRadioControl } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 interface RadioControlProps {
@@ -41,7 +41,7 @@ const RadioControl: React.FC< RadioControlProps > = ( {
 	return (
 		<WPRadioControl
 			selected={ selected }
-			className={ classNames( styles.radio, className ) }
+			className={ clsx( styles.radio, className ) }
 			disabled={ disabled }
 			help={ help }
 			label={ label }
diff --git a/projects/js-packages/components/components/record-meter-bar/index.tsx b/projects/js-packages/components/components/record-meter-bar/index.tsx
index 2c9a1ccc6524..1eb1d8b5771f 100644
--- a/projects/js-packages/components/components/record-meter-bar/index.tsx
+++ b/projects/js-packages/components/components/record-meter-bar/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import numberFormat from '../number-format';
 
@@ -97,7 +97,7 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 	}, [ items, sortByCount ] );
 
 	return (
-		<div className={ classNames( 'record-meter-bar', className ) }>
+		<div className={ clsx( 'record-meter-bar', className ) }>
 			<div className="record-meter-bar__items" aria-hidden="true">
 				{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
 					const widthPercent = ( ( count / total ) * 100 ).toPrecision( 2 );
diff --git a/projects/js-packages/components/components/stat-card/index.tsx b/projects/js-packages/components/components/stat-card/index.tsx
index 0a1017f141ce..6b47b244d605 100644
--- a/projects/js-packages/components/components/stat-card/index.tsx
+++ b/projects/js-packages/components/components/stat-card/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Tooltip } from '@wordpress/components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -26,19 +26,19 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa
 	} );
 
 	return (
-		<div className={ classnames( className, styles.wrapper, styles[ variant ] ) }>
-			<div className={ classnames( styles.icon ) }>{ icon }</div>
-			<div className={ classnames( styles.info ) }>
+		<div className={ clsx( className, styles.wrapper, styles[ variant ] ) }>
+			<div className={ clsx( styles.icon ) }>{ icon }</div>
+			<div className={ clsx( styles.info ) }>
 				<Text className={ styles.label }>{ label }</Text>
 				{ variant === 'square' ? (
 					// @todo Switch to `placement` once WordPress 6.4 is the minimum.
 					<Tooltip text={ formattedValue } position="top center">
-						<Text variant="headline-small" className={ classnames( styles.value ) }>
+						<Text variant="headline-small" className={ clsx( styles.value ) }>
 							{ compactValue }
 						</Text>
 					</Tooltip>
 				) : (
-					<Text variant="title-medium-semi-bold" className={ classnames( styles.value ) }>
+					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
 						{ formattedValue }
 					</Text>
 				) }
diff --git a/projects/js-packages/components/components/status/index.tsx b/projects/js-packages/components/components/status/index.tsx
index 9196b48155c7..6b26faaf7070 100644
--- a/projects/js-packages/components/components/status/index.tsx
+++ b/projects/js-packages/components/components/status/index.tsx
@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Text from '../text';
 import styles from './style.module.scss';
 
@@ -21,7 +21,7 @@ const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.E
 	return (
 		<Text
 			variant="body-extra-small"
-			className={ classNames(
+			className={ clsx(
 				styles.status,
 				{
 					[ styles[ `is-${ status }` ] ]: status,
diff --git a/projects/js-packages/components/components/terms-of-service/index.tsx b/projects/js-packages/components/components/terms-of-service/index.tsx
index 4506b9837a74..cf5c1380d6be 100644
--- a/projects/js-packages/components/components/terms-of-service/index.tsx
+++ b/projects/js-packages/components/components/terms-of-service/index.tsx
@@ -1,6 +1,6 @@
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getRedirectUrl } from '../../../components';
 import Text from '../text';
 import type { TermsOfServiceProps } from './types';
@@ -11,7 +11,7 @@ const TermsOfService: React.FC< TermsOfServiceProps > = ( {
 	multipleButtons,
 	agreeButtonLabel,
 } ) => (
-	<Text className={ classNames( className, 'terms-of-service' ) }>
+	<Text className={ clsx( className, 'terms-of-service' ) }>
 		{ multipleButtons ? (
 			<MultipleButtonsText multipleButtonsLabels={ multipleButtons } />
 		) : (
diff --git a/projects/js-packages/components/components/testimonials/testimonial.tsx b/projects/js-packages/components/components/testimonials/testimonial.tsx
index 66bc761bea58..5096e4c4006b 100644
--- a/projects/js-packages/components/components/testimonials/testimonial.tsx
+++ b/projects/js-packages/components/components/testimonials/testimonial.tsx
@@ -1,11 +1,11 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { TestimonialType } from './types';
 
 import './style.scss';
 
 const Testimonial: TestimonialType = ( { quote, author, profession, img, hidden } ) => {
 	return (
-		<div className={ classNames( 'testimonial', hidden ? 'hidden' : 'show' ) } key={ author }>
+		<div className={ clsx( 'testimonial', hidden ? 'hidden' : 'show' ) } key={ author }>
 			<img className="testimonial__author-img" src={ img } alt={ author } />
 
 			<div className="testimonial__content">
diff --git a/projects/js-packages/components/components/text/index.tsx b/projects/js-packages/components/components/text/index.tsx
index a39485bba7db..0ff935397873 100644
--- a/projects/js-packages/components/components/text/index.tsx
+++ b/projects/js-packages/components/components/text/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useMemo, forwardRef } from 'react';
 import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants';
 import styles from './style.module.scss';
@@ -30,7 +30,7 @@ const Text = forwardRef< HTMLElement, TextProps >(
 
 		return (
 			<Component
-				className={ classNames( styles.reset, styles[ variant ], className, boxModelClasses ) }
+				className={ clsx( styles.reset, styles[ variant ], className, boxModelClasses ) }
 				{ ...componentProps }
 			>
 				{ children }
diff --git a/projects/js-packages/components/components/toggle-control/index.tsx b/projects/js-packages/components/components/toggle-control/index.tsx
index 7f598cd79a16..4b3586a40fc4 100644
--- a/projects/js-packages/components/components/toggle-control/index.tsx
+++ b/projects/js-packages/components/components/toggle-control/index.tsx
@@ -1,5 +1,5 @@
 import { ToggleControl as WPToggleControl } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useCallback } from 'react';
 import styles from './styles.module.scss';
 
@@ -57,7 +57,7 @@ const ToggleControl: React.FC< ToggleControlProps > = ( {
 	return (
 		<WPToggleControl
 			checked={ showChecked }
-			className={ classNames( styles.toggle, className, {
+			className={ clsx( styles.toggle, className, {
 				[ styles[ 'is-toggling' ] ]: toggling,
 				[ styles[ 'is-small' ] ]: size === 'small',
 				[ styles[ 'no-label' ] ]: ! label,
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index 4c48c5dbe94b..a3178e55b357 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.7",
+	"version": "0.53.8-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,7 @@
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
 		"@wordpress/notices": "5.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
diff --git a/projects/js-packages/connection/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/connection/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/connection/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/connection/components/connect-screen/layout/index.tsx b/projects/js-packages/connection/components/connect-screen/layout/index.tsx
index 00edab186b45..854875cda5a8 100644
--- a/projects/js-packages/connection/components/connect-screen/layout/index.tsx
+++ b/projects/js-packages/connection/components/connect-screen/layout/index.tsx
@@ -1,5 +1,5 @@
 import { JetpackLogo } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import ImageSlider from './image-slider';
 import type { Props as ConnectScreenProps } from '../basic';
@@ -35,7 +35,7 @@ const ConnectScreenLayout: React.FC< Props > = ( {
 
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'jp-connection__connect-screen-layout',
 				showImageSlider ? 'jp-connection__connect-screen-layout__two-columns' : '',
 				className ? ' ' + className : ''
diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
index 6c7b73fd5804..571014204f6c 100644
--- a/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
+++ b/projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx
@@ -6,7 +6,7 @@ import {
 } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -70,7 +70,7 @@ const ConnectScreenRequiredPlanVisual = props => {
 	return (
 		<ConnectScreenLayout
 			title={ title }
-			className={ classNames(
+			className={ clsx(
 				'jp-connection__connect-screen-required-plan',
 				isLoading ? 'jp-connection__connect-screen-required-plan__loading' : '',
 				rna ? 'rna' : ''
diff --git a/projects/js-packages/connection/components/manage-connection-dialog/index.jsx b/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
index 27eba44b9fed..d20c58e9d41a 100644
--- a/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
+++ b/projects/js-packages/connection/components/manage-connection-dialog/index.jsx
@@ -6,7 +6,7 @@ import { ExternalLink, Modal } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 /**
@@ -123,10 +123,7 @@ const ManageConnectionActionCard = ( { title, onClick = () => null, link = '#',
 			<div className="jp-connection__manage-dialog__action-card__card-content">
 				<a
 					href={ link }
-					className={ classNames(
-						'jp-connection__manage-dialog__action-card__card-headline',
-						action
-					) }
+					className={ clsx( 'jp-connection__manage-dialog__action-card__card-headline', action ) }
 					onClick={ onClick }
 				>
 					{ title }
diff --git a/projects/js-packages/connection/package.json b/projects/js-packages/connection/package.json
index 1265230a6f87..2c184cbef6d5 100644
--- a/projects/js-packages/connection/package.json
+++ b/projects/js-packages/connection/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.33.13",
+	"version": "0.33.14-alpha",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -25,7 +25,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"prop-types": "^15.7.2"
 	},
diff --git a/projects/js-packages/licensing/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/licensing/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/licensing/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/licensing/components/golden-token-modal/index.jsx b/projects/js-packages/licensing/components/golden-token-modal/index.jsx
index 9efb2423d64b..6b5bae9fd283 100644
--- a/projects/js-packages/licensing/components/golden-token-modal/index.jsx
+++ b/projects/js-packages/licensing/components/golden-token-modal/index.jsx
@@ -1,7 +1,7 @@
 import { getIconBySlug, JetpackLogo, Button, Col, Container } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import styles from './styles.module.scss';
@@ -59,7 +59,7 @@ function GoldenTokenModal( {
 		hasAnimated && videoRef.current.play();
 	}, [ hasAnimated ] );
 
-	const modalClassName = classNames( styles.modal, {
+	const modalClassName = clsx( styles.modal, {
 		[ styles.animating ]: hasAnimated,
 	} );
 
diff --git a/projects/js-packages/licensing/package.json b/projects/js-packages/licensing/package.json
index d7a43987180b..659aafbf166f 100644
--- a/projects/js-packages/licensing/package.json
+++ b/projects/js-packages/licensing/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-licensing",
-	"version": "0.12.14",
+	"version": "0.12.15-alpha",
 	"description": "Jetpack licensing flow",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/licensing/#readme",
 	"bugs": {
@@ -27,7 +27,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"prop-types": "15.7.2"
 	},
 	"devDependencies": {
diff --git a/projects/js-packages/partner-coupon/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/partner-coupon/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/partner-coupon/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/partner-coupon/components/redeem-partner-coupon-pre-connection/index.jsx b/projects/js-packages/partner-coupon/components/redeem-partner-coupon-pre-connection/index.jsx
index 290ea9150062..6df01d51fdd7 100644
--- a/projects/js-packages/partner-coupon/components/redeem-partner-coupon-pre-connection/index.jsx
+++ b/projects/js-packages/partner-coupon/components/redeem-partner-coupon-pre-connection/index.jsx
@@ -1,7 +1,7 @@
 import { ActionButton } from '@automattic/jetpack-components';
 import { ConnectScreen } from '@automattic/jetpack-connection';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { usePartnerCouponRedemption } from '../../hooks.js';
@@ -32,7 +32,7 @@ const RedeemPartnerCouponPreConnection = props => {
 		analytics
 	);
 
-	const classes = classNames( 'jetpack-redeem-partner-coupon-pre-connection', {
+	const classes = clsx( 'jetpack-redeem-partner-coupon-pre-connection', {
 		'jetpack-redeem-partner-coupon-pre-connection--connected':
 			!! connectionStatus.hasConnectedOwner,
 	} );
diff --git a/projects/js-packages/partner-coupon/package.json b/projects/js-packages/partner-coupon/package.json
index 63b90b6c2304..ff977596b224 100644
--- a/projects/js-packages/partner-coupon/package.json
+++ b/projects/js-packages/partner-coupon/package.json
@@ -43,7 +43,7 @@
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@wordpress/i18n": "5.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"prop-types": "15.7.2"
 	},
 	"exports": {
diff --git a/projects/js-packages/publicize-components/changelog/fix-37695-classnames_to_clsx b/projects/js-packages/publicize-components/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
index 7c005c7fd973..bd7628b62224 100644
--- a/projects/js-packages/publicize-components/package.json
+++ b/projects/js-packages/publicize-components/package.json
@@ -39,7 +39,7 @@
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
 		"@wordpress/notices": "5.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"prop-types": "15.8.1",
 		"react-page-visibility": "7.0.0",
 		"rememo": "4.0.1"
diff --git a/projects/js-packages/publicize-components/src/components/connection-icon/index.jsx b/projects/js-packages/publicize-components/src/components/connection-icon/index.jsx
index 89b11bb51c77..b93373a61f91 100644
--- a/projects/js-packages/publicize-components/src/components/connection-icon/index.jsx
+++ b/projects/js-packages/publicize-components/src/components/connection-icon/index.jsx
@@ -1,6 +1,6 @@
 import { SocialServiceIcon } from '@automattic/jetpack-components';
 import { useCallback, useState } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 import './style.scss';
@@ -39,7 +39,7 @@ const ConnectionIcon = props => {
 			role="switch"
 			aria-checked={ checked }
 			tabIndex="0"
-			className={ classNames( 'components-connection-icon', {
+			className={ clsx( 'components-connection-icon', {
 				'components-connection-icon__picture': hasDisplayPicture,
 			} ) }
 		>
diff --git a/projects/js-packages/publicize-components/src/components/connection-management/index.tsx b/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
index 1bbd34b326e0..d96422d35780 100644
--- a/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/connection-management/index.tsx
@@ -3,7 +3,7 @@ import { Disabled } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { ManageConnectionsModalWithTrigger as ManageConnectionsModal } from '../manage-connections-modal';
@@ -45,7 +45,7 @@ const ConnectionManagement = ( { className = null } ) => {
 	);
 
 	return (
-		<div className={ classNames( styles.wrapper, className ) }>
+		<div className={ clsx( styles.wrapper, className ) }>
 			{ connections.length ? (
 				<>
 					<h3>{ __( 'Connected accounts', 'jetpack' ) }</h3>
diff --git a/projects/js-packages/publicize-components/src/components/connection-toggle/index.jsx b/projects/js-packages/publicize-components/src/components/connection-toggle/index.jsx
index cd8ed559333f..f69801464ec5 100644
--- a/projects/js-packages/publicize-components/src/components/connection-toggle/index.jsx
+++ b/projects/js-packages/publicize-components/src/components/connection-toggle/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import ConnectionIcon from '../connection-icon';
 
@@ -6,7 +6,7 @@ import './style.scss';
 
 const ConnectionToggle = props => {
 	const { checked, disabled, onChange, serviceName, label, profilePicture } = props;
-	const wrapperClasses = classnames( 'components-connection-toggle', {
+	const wrapperClasses = clsx( 'components-connection-toggle', {
 		'is-not-checked': ! checked,
 		'is-disabled': disabled,
 	} );
diff --git a/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js b/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
index 637c21ab9166..19e69e5b04e2 100644
--- a/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
+++ b/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
@@ -4,7 +4,7 @@ import { Spinner, BaseControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useImageGeneratorConfig from '../../hooks/use-image-generator-config';
 import styles from './styles.module.scss';
@@ -114,7 +114,7 @@ export default function GeneratedImagePreview( {
 			<BaseControl label={ _x( 'Preview', 'Heading for the generated preview image', 'jetpack' ) }>
 				<div className={ styles.container }>
 					<img
-						className={ classNames( {
+						className={ clsx( {
 							[ styles.hidden ]: isLoading,
 						} ) }
 						src={ generatedImageUrl }
diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/index.tsx
index ac96614261f7..aa6993fb837b 100644
--- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/index.tsx
@@ -4,7 +4,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { cloneElement, useCallback, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { store } from '../../social-store';
 import { ServicesList } from '../services/services-list';
 import { ConfirmationForm } from './confirmation-form';
@@ -42,7 +42,7 @@ export const ManageConnectionsModal = ( { onCloseModal }: ManageConnectionsModal
 
 	return (
 		<Modal
-			className={ classNames( styles.modal, {
+			className={ clsx( styles.modal, {
 				[ styles.small ]: isSmall,
 			} ) }
 			onRequestClose={ closeModal }
diff --git a/projects/js-packages/publicize-components/src/components/media-picker/index.js b/projects/js-packages/publicize-components/src/components/media-picker/index.js
index 066d3fceef6e..f71ccf3e88bb 100644
--- a/projects/js-packages/publicize-components/src/components/media-picker/index.js
+++ b/projects/js-packages/publicize-components/src/components/media-picker/index.js
@@ -4,7 +4,7 @@ import { ResponsiveWrapper, Spinner, VisuallyHidden } from '@wordpress/component
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { isVideo } from '../../hooks/use-media-restrictions';
 import { SELECTABLE_MEDIA_TYPES } from '../../hooks/use-media-restrictions/restrictions';
 import VideoPreview from '../video-preview';
@@ -63,7 +63,7 @@ export default function MediaPicker( {
 			}
 
 			return (
-				<div className={ classNames( styles[ 'preview-wrapper' ], wrapperClassName ) }>
+				<div className={ clsx( styles[ 'preview-wrapper' ], wrapperClassName ) }>
 					<button className={ styles.remove } onClick={ onRemoveMedia }>
 						<VisuallyHidden>{ __( 'Remove media', 'jetpack' ) }</VisuallyHidden>
 						<Icon icon={ closeSmall } />
diff --git a/projects/js-packages/publicize-components/src/components/notice/index.js b/projects/js-packages/publicize-components/src/components/notice/index.js
index 961a490ae4ff..f7f620acf684 100644
--- a/projects/js-packages/publicize-components/src/components/notice/index.js
+++ b/projects/js-packages/publicize-components/src/components/notice/index.js
@@ -1,12 +1,12 @@
 import { VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 
 const Notice = ( { children, type = 'default', actions = [], onDismiss } ) => {
-	const className = classnames( styles.notice, styles[ `notice--${ type }` ] );
+	const className = clsx( styles.notice, styles[ `notice--${ type }` ] );
 
 	return (
 		<div className={ className }>
diff --git a/projects/js-packages/publicize-components/src/components/services/connect-form.tsx b/projects/js-packages/publicize-components/src/components/services/connect-form.tsx
index 39d3c4a7817a..7285962880c6 100644
--- a/projects/js-packages/publicize-components/src/components/services/connect-form.tsx
+++ b/projects/js-packages/publicize-components/src/components/services/connect-form.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@automattic/jetpack-components';
 import { useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useCallback } from 'react';
 import { store } from '../../social-store';
 import { KeyringResult } from '../../social-store/types';
@@ -63,7 +63,7 @@ export function ConnectForm( {
 
 	return (
 		<form
-			className={ classNames( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }
+			className={ clsx( styles[ 'connect-form' ], { [ styles.small ]: isSmall } ) }
 			onSubmit={ onSubmitForm }
 		>
 			{ displayInputs ? (
diff --git a/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx b/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx
index 905261311941..a54137eb0cc4 100644
--- a/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx
+++ b/projects/js-packages/publicize-components/src/components/services/service-item-details.tsx
@@ -2,7 +2,7 @@ import { useBreakpointMatch } from '@automattic/jetpack-components';
 import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import { ServiceConnectionInfo } from './service-connection-info';
@@ -61,7 +61,7 @@ export function ServiceItemDetails( { service, serviceConnections }: ServicesIte
 
 	return (
 		<div
-			className={ classNames( styles[ 'example-wrapper' ], {
+			className={ clsx( styles[ 'example-wrapper' ], {
 				[ styles.small ]: isSmall,
 			} ) }
 		>
diff --git a/projects/js-packages/publicize-components/src/components/share-buttons/share-buttons.tsx b/projects/js-packages/publicize-components/src/components/share-buttons/share-buttons.tsx
index 29fdce748a84..a72e215ad262 100644
--- a/projects/js-packages/publicize-components/src/components/share-buttons/share-buttons.tsx
+++ b/projects/js-packages/publicize-components/src/components/share-buttons/share-buttons.tsx
@@ -3,7 +3,7 @@ import { CopyToClipboard } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { availableNetworks } from './available-networks';
 import styles from './styles.module.scss';
 import { useShareButtonText } from './useShareButtonText';
@@ -54,7 +54,7 @@ export function ShareButtons( { buttonStyle = 'icon', buttonVariant }: ShareButt
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				styles[ 'share-buttons' ],
 				// If we are showing the text, we will show the buttons vertically.
 				{ [ styles.vertical ]: buttonStyle.includes( 'text' ) }
diff --git a/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx b/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx
index d81379da570a..b9167cfa71e3 100644
--- a/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/share-limits-bar/index.tsx
@@ -1,7 +1,7 @@
 import { RecordMeterBar } from '@automattic/jetpack-components';
 import { useMemo } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { ShareLimits } from '../../hooks/use-share-limits';
 import styles from './styles.module.scss';
 
@@ -67,7 +67,7 @@ export const ShareLimitsBar = ( {
 	}, [ noticeType, scheduledCount, usedCount, remainingCount, remainingLabel ] );
 
 	return (
-		<div className={ classNames( styles.wrapper, className ) }>
+		<div className={ clsx( styles.wrapper, className ) }>
 			<RecordMeterBar
 				totalCount={ usedCount + scheduledCount + remainingCount }
 				items={ items }
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/picker/index.js b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/picker/index.js
index 616af328511f..d8383dedc901 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/picker/index.js
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/picker/index.js
@@ -1,6 +1,6 @@
 import { useCallback } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 import TEMPLATES_DATA from './templates.js';
 
@@ -32,7 +32,7 @@ const TemplatePicker = ( { value = null, onTemplateSelected = null } ) => {
 					onClick={ onTemplateClicked }
 					id={ template.name }
 					key={ template.name }
-					className={ classnames( styles.template, {
+					className={ clsx( styles.template, {
 						[ styles[ 'template--active' ] ]: template.name === value,
 					} ) }
 				>
diff --git a/projects/packages/forms/changelog/fix-37695-classnames_to_clsx b/projects/packages/forms/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/packages/forms/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
index b165ba1c583a..0acd2241673d 100644
--- a/projects/packages/forms/package.json
+++ b/projects/packages/forms/package.json
@@ -42,7 +42,7 @@
 		"@wordpress/hooks": "4.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"copy-webpack-plugin": "11.0.0",
 		"email-validator": "2.0.4",
 		"gridicons": "3.4.1",
diff --git a/projects/packages/forms/src/blocks/contact-form/components/help-message/index.js b/projects/packages/forms/src/blocks/contact-form/components/help-message/index.js
index 77d8767600c7..94647370e3cd 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/help-message/index.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/help-message/index.js
@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 import './style.scss';
 
 export default ( { children = null, isError = false, ...props } ) => {
-	const classes = classNames( 'help-message', {
+	const classes = clsx( 'help-message', {
 		'help-message-is-error': isError,
 	} );
 
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js
index 114059fa48a2..6ba9ba74ceda 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js
@@ -1,7 +1,7 @@
 import { SelectControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useFormStyle, useFormWrapper } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
@@ -41,7 +41,7 @@ const JetpackDatePicker = props => {
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 	const formStyle = useFormStyle( clientId );
 
-	const classes = classnames( 'jetpack-field', {
+	const classes = clsx( 'jetpack-field', {
 		'is-selected': isSelected,
 		'has-placeholder': !! placeholder,
 	} );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
index 2f3bd72a4832..bbeb044f9d26 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -2,7 +2,7 @@ import { RichText } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty, isNil, noop, split, trim } from 'lodash';
 import { getCaretPosition } from '../util/caret';
 import { setFocus } from '../util/focus';
@@ -17,7 +17,7 @@ const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttribute
 	const optionsWrapper = useRef();
 	const formStyle = useFormStyle( clientId );
 
-	const classes = classnames( 'jetpack-field jetpack-field-dropdown', {
+	const classes = clsx( 'jetpack-field jetpack-field-dropdown', {
 		'is-selected': isSelected,
 		'has-placeholder': ! isEmpty( toggleLabel ),
 	} );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-label.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-label.js
index 018743fea2ef..99c959d024fb 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-label.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-label.js
@@ -1,6 +1,6 @@
 import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { FORM_STYLE } from '../util/form';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
@@ -19,7 +19,7 @@ const FieldLabel = ( {
 	const { labelStyle } = useJetpackFieldStyles( attributes );
 
 	return (
-		<div className={ classnames( className, 'jetpack-field-label' ) } style={ labelStyle }>
+		<div className={ clsx( className, 'jetpack-field-label' ) } style={ labelStyle }>
 			<RichText
 				tagName="label"
 				value={ label }
@@ -56,7 +56,7 @@ const FieldLabel = ( {
 const JetpackFieldLabel = props => {
 	const { style } = props;
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'notched-label__label': style === FORM_STYLE.OUTLINED,
 		'animated-label__label': style === FORM_STYLE.ANIMATED,
 		'below-label__label': style === FORM_STYLE.BELOW,
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
index 558b7bb3be07..8087358fda37 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
@@ -1,7 +1,7 @@
 import { InnerBlocks } from '@wordpress/block-editor';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useFormStyle } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
 import JetpackFieldControls from './jetpack-field-controls';
@@ -35,7 +35,7 @@ function JetpackFieldMultiple( props ) {
 		[ clientId ]
 	);
 
-	const classes = classnames( className, 'jetpack-field jetpack-field-multiple', {
+	const classes = clsx( className, 'jetpack-field jetpack-field-multiple', {
 		'is-selected': isSelected,
 		'has-placeholder': ( options && options.length ) || innerBlocks.length,
 	} );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
index 1e62c793af45..0ab579d9de53 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
@@ -2,7 +2,7 @@ import { RichText } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { first } from 'lodash';
 import { useParentAttributes } from '../util/use-parent-attributes';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
@@ -24,7 +24,7 @@ export const JetpackFieldOptionEdit = props => {
 
 	const type = name.replace( 'jetpack/field-option-', '' );
 
-	const classes = classnames( 'jetpack-field-option', `field-option-${ type }` );
+	const classes = clsx( 'jetpack-field-option', `field-option-${ type }` );
 
 	const handleSplit = label =>
 		createBlock( name, {
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
index 6a0c9cfc34bd..b616f37be6d9 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
@@ -1,6 +1,6 @@
 import { compose } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty, isNil } from 'lodash';
 import { useFormStyle } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
@@ -24,7 +24,7 @@ const JetpackFieldTextarea = props => {
 	const formStyle = useFormStyle( clientId );
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 
-	const classes = classnames( 'jetpack-field jetpack-field-textarea', {
+	const classes = clsx( 'jetpack-field jetpack-field-textarea', {
 		'is-selected': isSelected,
 		'has-placeholder': ! isEmpty( placeholder ),
 	} );
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
index 73d44c555bfe..c694fc0613b6 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
@@ -1,6 +1,6 @@
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty } from 'lodash';
 import { useFormStyle } from '../util/form';
 import { withSharedFieldAttributes } from '../util/with-shared-field-attributes';
@@ -25,7 +25,7 @@ const JetpackField = props => {
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 	const formStyle = useFormStyle( clientId );
 
-	const classes = classnames( 'jetpack-field', {
+	const classes = clsx( 'jetpack-field', {
 		'is-selected': isSelected,
 		'has-placeholder': ! isEmpty( placeholder ),
 	} );
diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js
index 9775c957e412..afb53ddcb907 100644
--- a/projects/packages/forms/src/blocks/contact-form/edit.js
+++ b/projects/packages/forms/src/blocks/contact-form/edit.js
@@ -27,7 +27,7 @@ import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { filter, get, isArray, map } from 'lodash';
 import { childBlocks } from './child-blocks';
 import InspectorHint from './components/inspector-hint';
@@ -107,7 +107,7 @@ export const JetpackContactFormEdit = forwardRef(
 		const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
 			useModuleStatus( 'contact-form' );
 
-		const formClassnames = classnames( className, 'jetpack-contact-form', {
+		const formClassnames = clsx( className, 'jetpack-contact-form', {
 			'is-placeholder': ! hasInnerBlocks && registerBlockVariation,
 		} );
 		const isSalesForceExtensionEnabled =
diff --git a/projects/packages/forms/src/dashboard/components/layout/index.js b/projects/packages/forms/src/dashboard/components/layout/index.js
index 637d4063829e..fd391c7388a0 100644
--- a/projects/packages/forms/src/dashboard/components/layout/index.js
+++ b/projects/packages/forms/src/dashboard/components/layout/index.js
@@ -1,12 +1,12 @@
 import { JetpackFooter } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import JetpackFormsLogo from '../logo';
 
 import './style.scss';
 
 const Layout = ( { children, className, title, subtitle, showFooter } ) => {
-	const classes = classnames( 'jp-forms__layout', className );
+	const classes = clsx( 'jp-forms__layout', className );
 
 	return (
 		<div className={ classes }>
diff --git a/projects/packages/forms/src/dashboard/components/page-navigation/page-number.js b/projects/packages/forms/src/dashboard/components/page-navigation/page-number.js
index bfecae4eb592..4a2f5b009dd0 100644
--- a/projects/packages/forms/src/dashboard/components/page-navigation/page-number.js
+++ b/projects/packages/forms/src/dashboard/components/page-navigation/page-number.js
@@ -1,8 +1,8 @@
 import { useCallback } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const PageNumber = ( { active, className, page, onSelect } ) => {
-	const buttonClass = classNames( 'jp-forms__page-navigation-page-number', className, {
+	const buttonClass = clsx( 'jp-forms__page-navigation-page-number', className, {
 		'is-active': active,
 	} );
 
diff --git a/projects/packages/forms/src/dashboard/components/search-form/search-input.js b/projects/packages/forms/src/dashboard/components/search-form/search-input.js
index 55db0270635c..8c08e1efc347 100644
--- a/projects/packages/forms/src/dashboard/components/search-form/search-input.js
+++ b/projects/packages/forms/src/dashboard/components/search-form/search-input.js
@@ -7,7 +7,7 @@ import { useDebounce } from '@wordpress/compose';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { noop } from 'lodash';
 
 /**
@@ -25,14 +25,14 @@ const Input = ( {
 } ) => {
 	return (
 		<div
-			className={ classnames( className, 'input-wrapper', {
+			className={ clsx( className, 'input-wrapper', {
 				disabled: disabled,
 			} ) }
 		>
 			<>
 				{ ( loading || icon ) && (
 					<div
-						className={ classnames( 'icon-wrapper', {
+						className={ clsx( 'icon-wrapper', {
 							loader: loading,
 						} ) }
 					>
@@ -41,7 +41,7 @@ const Input = ( {
 				) }
 				<input
 					aria-disabled={ disabled }
-					className={ classnames( 'input', {
+					className={ clsx( 'input', {
 						'with-icon': icon !== null,
 					} ) }
 					disabled={ disabled }
@@ -97,12 +97,8 @@ const SearchInput = ( {
 			onKeyUp={ onKeyUpHandler }
 			value={ searchText }
 			endAdornment={
-				<div className={ classnames( 'icon-wrapper', { hidden: ! searchText } ) }>
-					<Icon
-						icon={ closeSmall }
-						onClick={ clearInput }
-						className={ classnames( 'clear-icon' ) }
-					/>
+				<div className={ clsx( 'icon-wrapper', { hidden: ! searchText } ) }>
+					<Icon icon={ closeSmall } onClick={ clearInput } className={ clsx( 'clear-icon' ) } />
 				</div>
 			}
 		/>
diff --git a/projects/packages/forms/src/dashboard/components/table/index.js b/projects/packages/forms/src/dashboard/components/table/index.js
index 88a1c643fbff..9091eeb5aabc 100644
--- a/projects/packages/forms/src/dashboard/components/table/index.js
+++ b/projects/packages/forms/src/dashboard/components/table/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createRef, useCallback, useEffect, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { difference, forEach, includes, kebabCase, map, without } from 'lodash';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 /**
@@ -55,8 +55,8 @@ const Table = ( {
 		setSelectedResponses( newState );
 	}, [ items, selectedResponses, setSelectedResponses ] );
 
-	const classes = classnames( 'jp-forms__table', className );
-	const checkboxClasses = classnames( 'jp-forms__table-checkbox', {
+	const classes = clsx( 'jp-forms__table', className );
+	const checkboxClasses = clsx( 'jp-forms__table-checkbox', {
 		'is-intermediate': selectedResponses.length !== 0 && selectedResponses.length !== items.length,
 	} );
 
@@ -75,7 +75,7 @@ const Table = ( {
 				) }
 
 				{ map( columns, ( { label, key } ) => {
-					const headerClasses = classnames( 'jp-forms__table-cell', `is-${ kebabCase( key ) }` );
+					const headerClasses = clsx( 'jp-forms__table-cell', `is-${ kebabCase( key ) }` );
 
 					return (
 						<div key={ `table-header-${ key }` } className={ headerClasses }>
diff --git a/projects/packages/forms/src/dashboard/components/table/item.js b/projects/packages/forms/src/dashboard/components/table/item.js
index a09c4f8aeac1..d149841a4adf 100644
--- a/projects/packages/forms/src/dashboard/components/table/item.js
+++ b/projects/packages/forms/src/dashboard/components/table/item.js
@@ -1,5 +1,5 @@
 import { forwardRef, useCallback } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { kebabCase, map } from 'lodash';
 
 const stopPropagation = event => event.stopPropagation();
@@ -7,7 +7,7 @@ const stopPropagation = event => event.stopPropagation();
 const TableItem = ( { columns, item, isSelected, onSelectChange }, ref ) => {
 	const handleChange = useCallback( () => onSelectChange( item.id ), [ item.id, onSelectChange ] );
 
-	const classes = classnames( 'jp-forms__table-item', item.className, {
+	const classes = clsx( 'jp-forms__table-item', item.className, {
 		'is-active': ! item.isLoading && item.isActive,
 		'is-clickable': ! item.isLoading && item.onClick,
 		'is-loading': item.isLoading,
@@ -34,7 +34,7 @@ const TableItem = ( { columns, item, isSelected, onSelectChange }, ref ) => {
 			{ map( columns, ( { additionalClassNames, getValue, key }, index ) => {
 				const value = getValue ? getValue( item ) : item[ key ];
 
-				const cellClasses = classnames(
+				const cellClasses = clsx(
 					'jp-forms__table-cell',
 					`is-${ kebabCase( key ) }`,
 					additionalClassNames
diff --git a/projects/packages/forms/src/dashboard/inbox/export-modal/csv.js b/projects/packages/forms/src/dashboard/inbox/export-modal/csv.js
index 556075ba2407..8a88aa54d45b 100644
--- a/projects/packages/forms/src/dashboard/inbox/export-modal/csv.js
+++ b/projects/packages/forms/src/dashboard/inbox/export-modal/csv.js
@@ -3,7 +3,7 @@
  */
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -28,7 +28,7 @@ const CSVExport = ( { onExport } ) => {
 		} );
 	}, [ onExport ] );
 
-	const buttonClasses = classnames( 'button', 'export-button', 'export-csv', {
+	const buttonClasses = clsx( 'button', 'export-button', 'export-csv', {
 		'button-primary': ! isWpcom(),
 	} );
 
diff --git a/projects/packages/forms/src/dashboard/inbox/export-modal/google-drive.js b/projects/packages/forms/src/dashboard/inbox/export-modal/google-drive.js
index 5b0068970c06..fcc39859974a 100644
--- a/projects/packages/forms/src/dashboard/inbox/export-modal/google-drive.js
+++ b/projects/packages/forms/src/dashboard/inbox/export-modal/google-drive.js
@@ -3,7 +3,7 @@
  */
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { tap } from 'lodash';
 /**
  * Internal dependencies
@@ -51,7 +51,7 @@ const GoogleDriveExport = ( { onExport } ) => {
 			} );
 	}, [ onExport ] );
 
-	const buttonClasses = classnames( 'button', 'export-button', 'export-gdrive', {
+	const buttonClasses = clsx( 'button', 'export-button', 'export-gdrive', {
 		'button-primary': ! isWpcom(),
 	} );
 
diff --git a/projects/packages/forms/src/dashboard/inbox/index.js b/projects/packages/forms/src/dashboard/inbox/index.js
index 9baf823d7d25..67816a7757b9 100644
--- a/projects/packages/forms/src/dashboard/inbox/index.js
+++ b/projects/packages/forms/src/dashboard/inbox/index.js
@@ -15,7 +15,7 @@ import {
 } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { arrowLeft } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { find, findIndex, includes, isEqual, join, keys, map, pick } from 'lodash';
 import { useNavigate } from 'react-router-dom';
 /**
@@ -252,7 +252,7 @@ const Inbox = () => {
 
 	const showBulkActionsMenu = !! selectedResponses.length && ! loading;
 
-	const classes = classnames( 'jp-forms__inbox', {
+	const classes = clsx( 'jp-forms__inbox', {
 		'is-response-view': !! currentResponseId,
 		'is-response-animation-reverted': responseAnimationDirection < 0,
 	} );
diff --git a/projects/packages/forms/src/dashboard/inbox/response.js b/projects/packages/forms/src/dashboard/inbox/response.js
index a34d982dc14c..37f403139d9c 100644
--- a/projects/packages/forms/src/dashboard/inbox/response.js
+++ b/projects/packages/forms/src/dashboard/inbox/response.js
@@ -5,7 +5,7 @@ import { Button } from '@wordpress/components';
 import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { map } from 'lodash';
 /**
  * Internal dependencies
@@ -32,7 +32,7 @@ const InboxResponse = ( { loading, response } ) => {
 		setTimeout( () => setEmailCopied( false ), 3000 );
 	}, [ response, setEmailCopied ] );
 
-	const titleClasses = classnames( 'jp-forms__inbox-response-title', {
+	const titleClasses = clsx( 'jp-forms__inbox-response-title', {
 		'is-email': response && ! response.author_name && response.author_email,
 		'is-ip': response && ! response.author_name && ! response.author_email,
 		'is-name': response && response.author_name,
diff --git a/projects/packages/my-jetpack/_inc/components/card/index.jsx b/projects/packages/my-jetpack/_inc/components/card/index.jsx
index 43d7b26d64a6..6043f1242b8e 100644
--- a/projects/packages/my-jetpack/_inc/components/card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/card/index.jsx
@@ -1,5 +1,5 @@
 import { Text } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './style.module.scss';
@@ -7,7 +7,7 @@ import styles from './style.module.scss';
 export const CardWrapper = props => {
 	const { children, className } = props;
 
-	const containerClassName = classNames( styles.container, className );
+	const containerClassName = clsx( styles.container, className );
 
 	return <div className={ containerClassName }>{ children }</div>;
 };
diff --git a/projects/packages/my-jetpack/_inc/components/close-link/index.js b/projects/packages/my-jetpack/_inc/components/close-link/index.js
index df9fe73f9570..fd463db9ec9f 100644
--- a/projects/packages/my-jetpack/_inc/components/close-link/index.js
+++ b/projects/packages/my-jetpack/_inc/components/close-link/index.js
@@ -1,16 +1,12 @@
 import { Icon, close } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styles from './styles.module.scss';
 
 const CloseLink = ( { className, accessibleName } ) => {
 	return (
-		<Link
-			to="/"
-			className={ classNames( styles.link, className ) }
-			aria-label={ accessibleName || null }
-		>
+		<Link to="/" className={ clsx( styles.link, className ) } aria-label={ accessibleName || null }>
 			<Icon icon={ close } className={ styles.icon } />
 		</Link>
 	);
diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.jsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.jsx
index 69f56628997d..088c4e8af374 100644
--- a/projects/packages/my-jetpack/_inc/components/connection-status-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/connection-status-card/index.jsx
@@ -7,7 +7,7 @@ import {
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info, check } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { useState, useCallback, useMemo } from 'react';
 import useAnalytics from '../../hooks/use-analytics';
@@ -19,13 +19,13 @@ import styles from './styles.module.scss';
 const ConnectionListItem = ( { text, actionText, onClick, status } ) => (
 	<div className={ styles[ 'list-item' ] }>
 		<Text
-			className={ classNames( styles[ 'list-item-text' ], {
+			className={ clsx( styles[ 'list-item-text' ], {
 				[ styles.error ]: status === 'error',
 			} ) }
 		>
 			<Icon
 				icon={ status === 'error' ? info : check }
-				className={ classNames( { [ styles.info ]: status === 'error' } ) }
+				className={ clsx( { [ styles.info ]: status === 'error' } ) }
 			/>
 			{ text }
 		</Text>
@@ -157,7 +157,7 @@ const ConnectionStatusCard = props => {
 			<div className={ styles.status }>
 				<img src={ cloud } alt="" className={ styles.cloud } />
 				<div
-					className={ classNames( styles.line, {
+					className={ clsx( styles.line, {
 						[ styles.disconnected ]: ! isRegistered || ! isUserConnected,
 					} ) }
 				/>
diff --git a/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/index.jsx b/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/index.jsx
index ccbe555a4b2a..88c844ff0a17 100644
--- a/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/index.jsx
@@ -2,7 +2,7 @@ import { Button, JetpackIcon } from '@automattic/jetpack-components';
 import { Popover } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 import styles from './style.module.scss';
 import './style.global.scss';
@@ -37,7 +37,7 @@ export function GoldenTokenTooltip( { productName, giftedDate } ) {
 		className: styles.container,
 	};
 
-	const wrapperClassNames = classNames( styles.wrapper, 'golden-token-icon-tooltip' );
+	const wrapperClassNames = clsx( styles.wrapper, 'golden-token-icon-tooltip' );
 
 	return (
 		<div className={ wrapperClassNames }>
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
index c741e1f4199d..02e44da80d94 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -14,7 +14,7 @@ import {
 	ActionButton,
 } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useContext, useEffect, useLayoutEffect, useState } from 'react';
 /*
  * Internal dependencies
@@ -59,7 +59,7 @@ const GlobalNotice = ( { message, title, options } ) => {
 
 	return (
 		<div
-			className={ classnames( styles.notice, {
+			className={ clsx( styles.notice, {
 				[ styles[ 'bigger-than-medium' ] ]: isBiggerThanMedium,
 			} ) }
 		>
@@ -159,7 +159,7 @@ export default function MyJetpackScreen() {
 					) }
 					{ showFullJetpackStatsCard && (
 						<Col
-							className={ classnames( {
+							className={ clsx( {
 								[ styles.stats ]: statsDetails?.status !== PRODUCT_STATUSES.ERROR,
 							} ) }
 						>
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/action-button.jsx b/projects/packages/my-jetpack/_inc/components/product-card/action-button.jsx
index d04ddb4f9c8d..5559cea3351c 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/action-button.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/action-button.jsx
@@ -1,7 +1,7 @@
 import { Button } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown, external, check } from '@wordpress/icons';
-import cs from 'classnames';
+import clsx from 'clsx';
 import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
 import { PRODUCT_STATUSES } from '../../constants';
 import useProduct from '../../data/products/use-product';
@@ -297,7 +297,7 @@ const ActionButton = ( {
 	return (
 		<>
 			<div
-				className={ cs(
+				className={ clsx(
 					styles[ 'action-button' ],
 					hasAdditionalActions ? styles[ 'has-additional-actions' ] : null
 				) }
@@ -307,7 +307,7 @@ const ActionButton = ( {
 				</Button>
 				{ hasAdditionalActions && (
 					<button
-						className={ cs(
+						className={ clsx(
 							styles[ 'dropdown-chevron' ],
 							currentAction.variant === 'primary' ? styles.primary : styles.secondary
 						) }
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-card/index.jsx
index 8f74f6442740..691dc52990e7 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/index.jsx
@@ -1,6 +1,6 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect } from 'react';
 import { PRODUCT_STATUSES } from '../../constants';
@@ -94,7 +94,7 @@ const ProductCard = inprops => {
 		status === PRODUCT_STATUSES.NEEDS_PURCHASE ||
 		status === PRODUCT_STATUSES.NEEDS_PURCHASE_OR_FREE;
 
-	const containerClassName = classNames( {
+	const containerClassName = clsx( {
 		[ styles.plugin_absent ]: isAbsent,
 		[ styles[ 'is-purchase-required' ] ]: isPurchaseRequired,
 		[ styles[ 'is-link' ] ]: isAbsent,
@@ -195,7 +195,7 @@ const ProductCard = inprops => {
 	return (
 		<Card
 			title={ name }
-			className={ classNames( styles.container, containerClassName ) }
+			className={ clsx( styles.container, containerClassName ) }
 			headerRightContent={ null }
 		>
 			<Description />
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/status.jsx b/projects/packages/my-jetpack/_inc/components/product-card/status.jsx
index f79c45c5d08e..63c48273a21d 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/status.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/status.jsx
@@ -1,5 +1,5 @@
 import { Text } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { PRODUCT_STATUSES } from '../../constants';
 import styles from './style.module.scss';
 import { PRODUCT_STATUSES_LABELS } from '.';
@@ -25,7 +25,7 @@ const getStatusClassName = status => {
 
 const Status = ( { status, isFetching, isInstallingStandalone } ) => {
 	const flagLabel = PRODUCT_STATUSES_LABELS[ status ];
-	const statusClassName = classNames( styles.status, getStatusClassName( status ), {
+	const statusClassName = clsx( styles.status, getStatusClassName( status ), {
 		[ styles[ 'is-fetching' ] ]: isFetching || isInstallingStandalone,
 	} );
 
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
index 2ce10acfd7da..bbea1a3dbe44 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
@@ -1,7 +1,7 @@
 import { numberFormat, Text, getRedirectUrl } from '@automattic/jetpack-components';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'gridicons';
 import PropTypes from 'prop-types';
 import { useEffect, useState, useMemo } from 'react';
@@ -257,12 +257,12 @@ const NoBackupsValueSection = ( { admin, slug } ) => {
 
 						return (
 							<li
-								className={ classNames( styles[ 'main-stat' ], `main-stat-${ i }` ) }
+								className={ clsx( styles[ 'main-stat' ], `main-stat-${ i }` ) }
 								key={ i + itemSlug }
 							>
 								<>
 									{ i < itemsToShow && (
-										<span className={ classNames( styles[ 'visual-stat' ] ) } aria-hidden="true">
+										<span className={ clsx( styles[ 'visual-stat' ] ) } aria-hidden="true">
 											{ getIcon( itemSlug ) }
 											<span>{ numberFormat( value, shortenedNumberConfig ) }</span>
 										</span>
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx
index c5a09a03dcf3..b4dc524cda69 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/contextual-card-info.jsx
@@ -4,7 +4,7 @@
 import { Text, numberFormat, LoadingPlaceholder } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { arrowUp, arrowDown, Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 /**
@@ -25,7 +25,7 @@ export const ChangePercentageContext = ( { change, changePercentage } ) => {
 
 	return (
 		<div
-			className={ classNames( styles[ 'contextual-percentage-change' ], {
+			className={ clsx( styles[ 'contextual-percentage-change' ], {
 				[ styles.neutral ]: change === 0,
 				[ styles.positive ]: change > 0,
 				[ styles.negative ]: change < 0,
diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
index cfc73caed9c1..15c8ee84eb46 100644
--- a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -12,7 +12,7 @@ import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
 import { ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, plus } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import useProduct from '../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
@@ -37,7 +37,7 @@ function Price( { value, currency, isOld } ) {
 
 	const priceObject = getCurrencyObject( value, currency );
 
-	const classNames = classnames( styles.price, {
+	const classNames = clsx( styles.price, {
 		[ styles[ 'is-old' ] ]: isOld,
 	} );
 
@@ -282,7 +282,7 @@ const ProductDetailCard = ( {
 
 	return (
 		<div
-			className={ classnames( styles.card, className, {
+			className={ clsx( styles.card, className, {
 				[ styles[ 'is-bundle-card' ] ]: isBundle,
 			} ) }
 		>
@@ -301,7 +301,7 @@ const ProductDetailCard = ( {
 				<Text mb={ 3 }>{ longDescription }</Text>
 
 				<ul
-					className={ classnames( styles.features, {
+					className={ clsx( styles.features, {
 						[ styles[ 'highlight-last-feature' ] ]: highlightLastFeature,
 					} ) }
 				>
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
index 3941ab9d564e..974496618be1 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
@@ -12,7 +12,7 @@ import {
 import { useConnection } from '@automattic/jetpack-connection';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback, useEffect } from 'react';
 /**
  * Internal dependencies
@@ -265,7 +265,7 @@ export default function ProductInterstitial( {
 								sm={ 4 }
 								md={ 4 }
 								lg={ 5 }
-								className={ classNames( styles.imageContainer, imageContainerClassName ) }
+								className={ clsx( styles.imageContainer, imageContainerClassName ) }
 							>
 								{ bundle ? (
 									<ProductDetailCard
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
index 35c22ee9b92e..93a7cc268efe 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/more-requests.jsx
@@ -11,7 +11,7 @@ import {
 	getRedirectUrl,
 } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 /**
@@ -55,7 +55,7 @@ export function JetpackAIInterstitialMoreRequests( { onClickGoBack = () => {} }
 						fluid
 					>
 						<Col sm={ 4 } md={ 4 } lg={ 7 }>
-							<div className={ classNames( styles.card ) }>
+							<div className={ clsx( styles.card ) }>
 								<div>
 									<H3>{ title }</H3>
 									<Text mb={ 3 }>{ longDescription }</Text>
@@ -74,7 +74,7 @@ export function JetpackAIInterstitialMoreRequests( { onClickGoBack = () => {} }
 							sm={ 4 }
 							md={ 4 }
 							lg={ 5 }
-							className={ classNames( styles.imageContainer, styles.aiImageContainer ) }
+							className={ clsx( styles.imageContainer, styles.aiImageContainer ) }
 						>
 							<img src={ jetpackAiImage } alt="Jetpack AI" />
 						</Col>
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
index 92f1b085eedd..306dfe8217bb 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
@@ -14,7 +14,7 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { Button, Card, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, plus, help, check } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import debugFactory from 'debug';
 import { useCallback, useState, useEffect } from 'react';
 /**
@@ -157,12 +157,12 @@ export default function () {
 	return (
 		<AdminPage showHeader={ false } showBackground={ true }>
 			<Container fluid horizontalSpacing={ 3 } horizontalGap={ 2 }>
-				<Col className={ classnames( styles[ 'product-interstitial__section' ] ) }>
+				<Col className={ clsx( styles[ 'product-interstitial__section' ] ) }>
 					<div className={ styles[ 'product-interstitial__section-wrapper-wide' ] }>
 						<GoBackLink onClick={ onClickGoBack } />
 					</div>
 					<div
-						className={ classnames(
+						className={ clsx(
 							styles[ 'product-interstitial__section-wrapper-wide' ],
 							styles[ 'product-interstitial__product-header' ]
 						) }
@@ -173,7 +173,7 @@ export default function () {
 						</div>
 					</div>
 				</Col>
-				<Col className={ classnames( styles[ 'product-interstitial__section' ] ) }>
+				<Col className={ clsx( styles[ 'product-interstitial__section' ] ) }>
 					<div className={ styles[ 'product-interstitial__hero-section' ] }>
 						<div className={ styles[ 'product-interstitial__hero-content' ] }>
 							<h1 className={ styles[ 'product-interstitial__hero-heading' ] }>{ description }</h1>
diff --git a/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx b/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx
index d454161c1b77..d2991540cf5e 100644
--- a/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx
+++ b/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx
@@ -1,7 +1,7 @@
 import { numberFormat } from '@automattic/jetpack-components';
 import { Card } from '@wordpress/components';
 import { arrowDown, arrowUp, Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './style.module.scss';
@@ -66,7 +66,7 @@ const CountComparisonCard = ( { count = 0, previousCount = 0, icon, heading } )
 				</span>
 				{ difference !== null ? (
 					<span
-						className={ classNames( styles[ 'stats-card-difference' ], {
+						className={ clsx( styles[ 'stats-card-difference' ], {
 							[ styles[ 'stats-card-difference--positive' ] ]: difference < 0,
 							[ styles[ 'stats-card-difference--negative' ] ]: difference > 0,
 						} ) }
diff --git a/projects/packages/my-jetpack/changelog/fix-37695-classnames_to_clsx b/projects/packages/my-jetpack/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
index cdb6838bb866..5ce2bd5fb3cf 100644
--- a/projects/packages/my-jetpack/package.json
+++ b/projects/packages/my-jetpack/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "4.24.4",
+	"version": "4.24.5-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {
@@ -39,7 +39,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"gridicons": "3.4.1",
 		"prop-types": "15.8.1",
diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php
index 1fb625df14c3..ef1ad84bca23 100644
--- a/projects/packages/my-jetpack/src/class-initializer.php
+++ b/projects/packages/my-jetpack/src/class-initializer.php
@@ -37,7 +37,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '4.24.4';
+	const PACKAGE_VERSION = '4.24.5-alpha';
 
 	/**
 	 * HTML container ID for the IDC screen on My Jetpack page.
diff --git a/projects/packages/search/changelog/fix-37695-classnames_to_clsx b/projects/packages/search/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/packages/search/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
index 8483b4cc6c23..3b429f6184ef 100644
--- a/projects/packages/search/package.json
+++ b/projects/packages/search/package.json
@@ -46,7 +46,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"fast-json-stable-stringify": "2.1.0",
 		"lodash": "4.17.21",
 		"photon": "4.0.0",
diff --git a/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx b/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx
index 7015246bcac6..e30abe71c5d1 100644
--- a/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx
+++ b/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx
@@ -6,7 +6,7 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useEntityRecordState from 'hooks/use-entity-record-state';
 import useSiteLoadingState from 'hooks/use-loading-state';
 import useSearchOptions from 'hooks/use-search-options';
@@ -73,7 +73,7 @@ export default function SidebarOptions() {
 
 	return (
 		<Panel
-			className={ classNames( 'jp-search-configure-sidebar-options', {
+			className={ clsx( 'jp-search-configure-sidebar-options', {
 				'jp-search-configure-sidebar-options--is-disabled': isDisabled,
 			} ) }
 		>
diff --git a/projects/packages/search/src/customberg/components/sidebar/tabs.jsx b/projects/packages/search/src/customberg/components/sidebar/tabs.jsx
index bb327bac0e3d..0b49150e706d 100644
--- a/projects/packages/search/src/customberg/components/sidebar/tabs.jsx
+++ b/projects/packages/search/src/customberg/components/sidebar/tabs.jsx
@@ -1,6 +1,6 @@
 import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { JP_SEARCH_TAB_IDENTIFIER, OPTIONS_TAB_IDENTIFIER } from 'lib/constants';
 
 /**
@@ -56,7 +56,7 @@ function Tab( { enableSidebar, identifier, label, isActive } ) {
 		<Button
 			// eslint-disable-next-line react/jsx-no-bind
 			onClick={ () => enableSidebar( identifier ) }
-			className={ classNames( 'jp-search-configure-sidebar__panel-tab', {
+			className={ clsx( 'jp-search-configure-sidebar__panel-tab', {
 				'is-active': isActive,
 			} ) }
 			aria-label={ ariaLabel }
diff --git a/projects/packages/search/src/customberg/components/sidebar/theme-control.jsx b/projects/packages/search/src/customberg/components/sidebar/theme-control.jsx
index ce97ebba4b51..3064275d863c 100644
--- a/projects/packages/search/src/customberg/components/sidebar/theme-control.jsx
+++ b/projects/packages/search/src/customberg/components/sidebar/theme-control.jsx
@@ -1,6 +1,6 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ThemeIcon from './theme-icon';
 
 /* eslint-disable react/jsx-no-bind */
@@ -18,7 +18,7 @@ export default function ThemeControl( { disabled, value, onChange } ) {
 	return (
 		<div className="jp-search-configure-theme-buttons components-base-control">
 			<Button
-				className={ classNames( {
+				className={ clsx( {
 					'jp-search-configure-theme-button--selected': value === 'light',
 				} ) }
 				disabled={ disabled }
@@ -31,7 +31,7 @@ export default function ThemeControl( { disabled, value, onChange } ) {
 				</span>
 			</Button>
 			<Button
-				className={ classNames( {
+				className={ clsx( {
 					'jp-search-configure-theme-button--selected': value === 'dark',
 				} ) }
 				disabled={ disabled }
diff --git a/projects/packages/search/src/dashboard/components/button/index.jsx b/projects/packages/search/src/dashboard/components/button/index.jsx
index e48a2bf351df..e7ea4f5a5dcf 100644
--- a/projects/packages/search/src/dashboard/components/button/index.jsx
+++ b/projects/packages/search/src/dashboard/components/button/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -32,7 +32,7 @@ export default class Button extends React.Component {
 		const element = this.props.href ? 'a' : 'button';
 		const { primary, compact, scary, borderless, className, ...props } = this.props;
 
-		const buttonClasses = classNames( {
+		const buttonClasses = clsx( {
 			'dops-button': true,
 			'is-compact': compact,
 			'is-primary': primary,
@@ -40,7 +40,7 @@ export default class Button extends React.Component {
 			'is-borderless': borderless,
 		} );
 
-		props.className = classNames( className, buttonClasses );
+		props.className = clsx( className, buttonClasses );
 
 		return React.createElement( element, props, this.props.children );
 	}
diff --git a/projects/packages/search/src/dashboard/components/card/compact.jsx b/projects/packages/search/src/dashboard/components/card/compact.jsx
index 2505f66664b1..d84e4147c6d7 100644
--- a/projects/packages/search/src/dashboard/components/card/compact.jsx
+++ b/projects/packages/search/src/dashboard/components/card/compact.jsx
@@ -1,5 +1,5 @@
 /*eslint lodash/import-scope: [2, "method"]*/
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import assign from 'lodash/assign';
 import React from 'react';
@@ -9,7 +9,7 @@ export default class CompactCard extends React.Component {
 
 	render() {
 		const props = assign( {}, this.props, {
-			className: classnames( this.props.className, 'is-compact' ),
+			className: clsx( this.props.className, 'is-compact' ),
 		} );
 
 		return <Card { ...props }>{ this.props.children }</Card>;
diff --git a/projects/packages/search/src/dashboard/components/card/index.jsx b/projects/packages/search/src/dashboard/components/card/index.jsx
index 29a203e7e7ab..a58af1700e1a 100644
--- a/projects/packages/search/src/dashboard/components/card/index.jsx
+++ b/projects/packages/search/src/dashboard/components/card/index.jsx
@@ -1,5 +1,5 @@
 import { Gridicon } from '@automattic/jetpack-components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import assign from 'lodash/assign';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
@@ -23,7 +23,7 @@ class CardSection extends React.Component {
 	render() {
 		return (
 			<div
-				className={ classnames( 'dops-card-section', this.props.className ) }
+				className={ clsx( 'dops-card-section', this.props.className ) }
 				style={ this.props.style }
 			>
 				{ this.props.title ? this._renderWithTitle() : this.props.children }
@@ -75,7 +75,7 @@ class Card extends React.Component {
 	};
 
 	render() {
-		const className = classnames( 'dops-card', this.props.className, {
+		const className = clsx( 'dops-card', this.props.className, {
 			'is-card-link': !! this.props.href,
 			'is-compact': this.props.compact,
 		} );
diff --git a/projects/packages/search/src/dashboard/components/form-toggle/compact.jsx b/projects/packages/search/src/dashboard/components/form-toggle/compact.jsx
index 682d81d5d559..60e0440bee57 100644
--- a/projects/packages/search/src/dashboard/components/form-toggle/compact.jsx
+++ b/projects/packages/search/src/dashboard/components/form-toggle/compact.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*eslint lodash/import-scope: [2, "method"]*/
 import Toggle from 'components/form-toggle';
 import omit from 'lodash/omit';
@@ -11,7 +11,7 @@ export default class CompactFormToggle extends React.Component {
 		return (
 			<Toggle
 				{ ...omit( this.props, 'className' ) }
-				className={ classNames( this.props.className, 'is-compact' ) }
+				className={ clsx( this.props.className, 'is-compact' ) }
 			>
 				{ this.props.children }
 			</Toggle>
diff --git a/projects/packages/search/src/dashboard/components/form-toggle/index.jsx b/projects/packages/search/src/dashboard/components/form-toggle/index.jsx
index 260ab65b1b22..f9618da58438 100644
--- a/projects/packages/search/src/dashboard/components/form-toggle/index.jsx
+++ b/projects/packages/search/src/dashboard/components/form-toggle/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 
@@ -80,15 +80,13 @@ export default class FormToggle extends Component {
 
 	render() {
 		const id = this.props.id || 'toggle-' + this.id;
-		const toggleClasses = classNames( 'form-toggle', this.props.className, {
+		const toggleClasses = clsx( 'form-toggle', this.props.className, {
 			'is-toggling': this.props.toggling,
 		} );
 
 		return (
 			<Fragment>
-				<div
-					className={ classNames( 'form-toggle__switch-container', this.props.switchClassNames ) }
-				>
+				<div className={ clsx( 'form-toggle__switch-container', this.props.switchClassNames ) }>
 					<input
 						className={ toggleClasses }
 						type="checkbox"
@@ -97,7 +95,7 @@ export default class FormToggle extends Component {
 						disabled={ this.props.disabled }
 					/>
 					<span
-						className={ classNames( 'form-toggle__switch', this.props.switchClassNames ) }
+						className={ clsx( 'form-toggle__switch', this.props.switchClassNames ) }
 						disabled={ this.props.disabled }
 						id={ id }
 						onClick={ this.onClick }
@@ -109,11 +107,11 @@ export default class FormToggle extends Component {
 					/>
 				</div>
 				<label
-					className={ classNames( 'form-toggle__label', this.props.labelClassNames ) }
+					className={ clsx( 'form-toggle__label', this.props.labelClassNames ) }
 					htmlFor={ id }
 				>
 					<span
-						className={ classNames( 'form-toggle__label-content', this.props.labelClassNames ) }
+						className={ clsx( 'form-toggle__label-content', this.props.labelClassNames ) }
 						onClick={ this.onLabelClick }
 					>
 						{ this.props.children }
diff --git a/projects/packages/search/src/dashboard/components/module-control/index.jsx b/projects/packages/search/src/dashboard/components/module-control/index.jsx
index 779ebf8a7686..995e0906176a 100644
--- a/projects/packages/search/src/dashboard/components/module-control/index.jsx
+++ b/projects/packages/search/src/dashboard/components/module-control/index.jsx
@@ -4,7 +4,7 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import CompactFormToggle from 'components/form-toggle/compact';
@@ -111,13 +111,13 @@ export default function SearchModuleControl( {
 
 	return (
 		<div
-			className={ classNames( {
+			className={ clsx( {
 				'jp-form-settings-group jp-form-search-settings-group': true,
 				'jp-form-search-settings-group--disabled': isDisabledFromOverLimit,
 			} ) }
 		>
 			<Card
-				className={ classNames( {
+				className={ clsx( {
 					'jp-form-has-child': true,
 				} ) }
 			>
diff --git a/projects/packages/search/src/dashboard/components/notice/index.jsx b/projects/packages/search/src/dashboard/components/notice/index.jsx
index 3aa8c34b1ee9..47671141f89e 100644
--- a/projects/packages/search/src/dashboard/components/notice/index.jsx
+++ b/projects/packages/search/src/dashboard/components/notice/index.jsx
@@ -1,5 +1,5 @@
 import { Gridicon } from '@automattic/jetpack-components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -96,7 +96,7 @@ export default class SimpleNotice extends React.Component {
 			text,
 			dismissText,
 		} = this.props;
-		const classes = classnames( 'dops-notice', status, className, {
+		const classes = clsx( 'dops-notice', status, className, {
 			'is-compact': isCompact,
 			'is-dismissable': showDismiss,
 		} );
diff --git a/projects/packages/search/src/instant-search/components/search-filter.jsx b/projects/packages/search/src/instant-search/components/search-filter.jsx
index fd9fd4b595dc..516441a2e5ba 100644
--- a/projects/packages/search/src/instant-search/components/search-filter.jsx
+++ b/projects/packages/search/src/instant-search/components/search-filter.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 // eslint-disable-next-line lodash/import-scope
 import uniqueId from 'lodash/uniqueId';
 import React, { createRef, Component } from 'react';
@@ -254,7 +254,7 @@ class SearchFilter extends Component {
 
 				<div ref={ this.filtersList }>
 					<div
-						className={ classNames(
+						className={ clsx(
 							'jetpack-instant-search__search-filter-list',
 							'jetpack-instant-search__search-static-filter-list',
 							`jetpack-instant-search__search-static-filter-variation-${ this.props.configuration.variation }`
diff --git a/projects/packages/search/src/instant-search/components/search-results.jsx b/projects/packages/search/src/instant-search/components/search-results.jsx
index ee0127526dd0..47466673028f 100644
--- a/projects/packages/search/src/instant-search/components/search-results.jsx
+++ b/projects/packages/search/src/instant-search/components/search-results.jsx
@@ -1,5 +1,5 @@
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { Component, Fragment } from 'react';
 import { getConstrastingColor } from '../lib/colors';
 import { MULTISITE_NO_GROUP_VALUE, OVERLAY_FOCUS_ANCHOR_ID } from '../lib/constants';
@@ -226,7 +226,7 @@ class SearchResults extends Component {
 	render() {
 		return (
 			<div
-				className={ classNames( 'jetpack-instant-search__search-results-wrapper', {
+				className={ clsx( 'jetpack-instant-search__search-results-wrapper', {
 					'has-colophon': this.props.showPoweredBy,
 				} ) }
 			>
diff --git a/projects/packages/videopress/changelog/fix-37695-classnames_to_clsx b/projects/packages/videopress/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/packages/videopress/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
index b1a7dfea2250..d2d355d8b7ea 100644
--- a/projects/packages/videopress/package.json
+++ b/projects/packages/videopress/package.json
@@ -79,7 +79,7 @@
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
 		"@wordpress/url": "4.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"filesize": "8.0.6",
 		"react": "18.3.1",
diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
index ec04cdda510f..914c33ed28a9 100644
--- a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
@@ -21,7 +21,7 @@ import {
 import { FormFileUpload } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 /**
  * Internal dependencies
@@ -188,7 +188,7 @@ const Admin = () => {
 			header={ <JetpackVideoPressLogo /> }
 		>
 			<div
-				className={ classnames( styles[ 'files-overlay' ], {
+				className={ clsx( styles[ 'files-overlay' ], {
 					[ styles.hover ]: isDraggingOver && canUpload && ! loading,
 				} ) }
 			>
diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx
index 7ac792dbabf5..1acfb8fd020a 100644
--- a/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx
+++ b/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx
@@ -5,7 +5,7 @@ import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { grid, formatListBullets } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 /**
@@ -92,7 +92,7 @@ const VideoLibraryWrapper = ( {
 				{ hideFilter ? null : (
 					<div className={ styles[ 'filter-wrapper' ] }>
 						<SearchInput
-							className={ classnames( styles[ 'search-input' ], { [ styles.small ]: ! isLg } ) }
+							className={ clsx( styles[ 'search-input' ], { [ styles.small ]: ! isLg } ) }
 							onSearch={ onSearchHandler }
 							value={ searchQuery }
 							loading={ isFetching }
diff --git a/projects/packages/videopress/src/client/admin/components/checkbox/index.tsx b/projects/packages/videopress/src/client/admin/components/checkbox/index.tsx
index d8b54144c156..af03da6ba972 100644
--- a/projects/packages/videopress/src/client/admin/components/checkbox/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/checkbox/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 /**
  * Internal dependencies
@@ -24,7 +24,7 @@ const Checkbox = forwardRef< HTMLInputElement, CheckboxProps >(
 				ref={ ref }
 				type="checkbox"
 				checked={ checked }
-				className={ classnames( className, styles.checkbox ) }
+				className={ clsx( className, styles.checkbox ) }
 				onChange={ handleCheckboxChange }
 			/>
 		);
diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx
index d7a3f3511c6c..c2746a4f7416 100644
--- a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx
@@ -20,7 +20,7 @@ import {
 	arrowLeft,
 	globe as siteDefaultPrivacyIcon,
 } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useEffect } from 'react';
 import { useHistory, Prompt } from 'react-router-dom';
 import { Link } from 'react-router-dom';
@@ -73,7 +73,7 @@ const Header = ( {
 	const history = useHistory();
 
 	return (
-		<div className={ classnames( styles[ 'header-wrapper' ], { [ styles.small ]: isSm } ) }>
+		<div className={ clsx( styles[ 'header-wrapper' ], { [ styles.small ]: isSm } ) }>
 			<button onClick={ () => history.push( '/' ) } className={ styles[ 'logo-button' ] }>
 				<JetpackVideoPressLogo />
 			</button>
@@ -330,7 +330,7 @@ const EditVideoDetails = () => {
 							/>
 							<div className={ styles[ 'side-fields' ] }>
 								{ isFetchingData ? (
-									<LoadingPlaceholder height={ 40 } className={ classnames( styles.field ) } />
+									<LoadingPlaceholder height={ 40 } className={ clsx( styles.field ) } />
 								) : (
 									<SelectControl
 										className={ styles.field }
@@ -373,10 +373,10 @@ const EditVideoDetails = () => {
 									/>
 								) }
 								{ isFetchingData ? (
-									<LoadingPlaceholder height={ 40 } className={ classnames( styles.field ) } />
+									<LoadingPlaceholder height={ 40 } className={ clsx( styles.field ) } />
 								) : (
 									<>
-										<Text className={ classnames( styles.field, styles.checkboxTitle ) }>
+										<Text className={ clsx( styles.field, styles.checkboxTitle ) }>
 											{ __( 'Share', 'jetpack-videopress-pkg' ) }
 										</Text>
 										<CheckboxControl
@@ -391,10 +391,10 @@ const EditVideoDetails = () => {
 									</>
 								) }
 								{ isFetchingData ? (
-									<LoadingPlaceholder height={ 40 } className={ classnames( styles.field ) } />
+									<LoadingPlaceholder height={ 40 } className={ clsx( styles.field ) } />
 								) : (
 									<>
-										<Text className={ classnames( styles.field, styles.checkboxTitle ) }>
+										<Text className={ clsx( styles.field, styles.checkboxTitle ) }>
 											{ __( 'Download', 'jetpack-videopress-pkg' ) }
 										</Text>
 										<CheckboxControl
@@ -410,10 +410,10 @@ const EditVideoDetails = () => {
 								) }
 								{ isBusy || isFetchingData ? (
 									// RadioControl does not support disabled state
-									<LoadingPlaceholder height={ 40 } className={ classnames( styles.field ) } />
+									<LoadingPlaceholder height={ 40 } className={ clsx( styles.field ) } />
 								) : (
 									<RadioControl
-										className={ classnames( styles.field, styles.rating ) }
+										className={ clsx( styles.field, styles.rating ) }
 										label={ __( 'Rating', 'jetpack-videopress-pkg' ) }
 										selected={ rating }
 										options={ [
diff --git a/projects/packages/videopress/src/client/admin/components/global-notice/index.tsx b/projects/packages/videopress/src/client/admin/components/global-notice/index.tsx
index c547860be7d3..48962e1fbcd2 100644
--- a/projects/packages/videopress/src/client/admin/components/global-notice/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/global-notice/index.tsx
@@ -5,7 +5,7 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, warning, info, check } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -64,7 +64,7 @@ export default function GlobalNotice( {
 	actions,
 	onRemove,
 }: GlobalNoticeProps ): React.ReactElement {
-	const classes = classnames( className, styles.notice, styles[ `is-${ status }` ] );
+	const classes = clsx( className, styles.notice, styles[ `is-${ status }` ] );
 
 	return (
 		<Notice
diff --git a/projects/packages/videopress/src/client/admin/components/input/index.tsx b/projects/packages/videopress/src/client/admin/components/input/index.tsx
index ffdb18e38f80..b52134162226 100644
--- a/projects/packages/videopress/src/client/admin/components/input/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/input/index.tsx
@@ -6,7 +6,7 @@ import { Spinner } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useCallback, ChangeEvent, KeyboardEvent } from 'react';
 /**
  * Internal dependencies
@@ -45,7 +45,7 @@ const InputWrapper = ( {
 	);
 
 	const baseProps = {
-		className: classnames( styles.input, {
+		className: clsx( styles.input, {
 			[ styles[ 'with-icon' ] ]: icon != null,
 		} ),
 		onChange: handleChangeEvent,
@@ -58,7 +58,7 @@ const InputWrapper = ( {
 
 	return (
 		<div
-			className={ classnames( className, styles[ 'input-wrapper' ], {
+			className={ clsx( className, styles[ 'input-wrapper' ], {
 				[ styles.disabled ]: disabled,
 				[ styles.large ]: size === 'large',
 				[ styles[ 'is-textarea' ] ]: isTextarea,
@@ -70,7 +70,7 @@ const InputWrapper = ( {
 				<>
 					{ loading || icon ? (
 						<div
-							className={ classnames( styles[ 'icon-wrapper' ], {
+							className={ clsx( styles[ 'icon-wrapper' ], {
 								[ styles.loader ]: loading,
 							} ) }
 						>
@@ -162,11 +162,11 @@ export const SearchInput = ( {
 			endAdornment={
 				<>
 					{ Boolean( componentProps.value ) && (
-						<div className={ classnames( styles[ 'icon-wrapper' ] ) }>
+						<div className={ clsx( styles[ 'icon-wrapper' ] ) }>
 							<Icon
 								icon={ closeSmall }
 								onClick={ clearInput }
-								className={ classnames( styles[ 'clear-icon' ] ) }
+								className={ clsx( styles[ 'clear-icon' ] ) }
 							/>
 						</div>
 					) }
diff --git a/projects/packages/videopress/src/client/admin/components/pagination/index.tsx b/projects/packages/videopress/src/client/admin/components/pagination/index.tsx
index 0f59dd7fc836..b35cc5ee1fa4 100644
--- a/projects/packages/videopress/src/client/admin/components/pagination/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/pagination/index.tsx
@@ -3,7 +3,7 @@
  */
 import { Button, Text } from '@automattic/jetpack-components';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -20,7 +20,7 @@ const range = ( start, count ) => {
 const Ellipsis = () => (
 	<Button
 		size="small"
-		className={ classnames( styles.button ) }
+		className={ clsx( styles.button ) }
 		variant="tertiary"
 		disabled
 		aria-disabled
@@ -64,7 +64,7 @@ const Pagination: React.FC< PaginationProps > = ( {
 		return (
 			<Button
 				size="small"
-				className={ classnames( styles.button, isCurrent ? styles.selected : null ) }
+				className={ clsx( styles.button, isCurrent ? styles.selected : null ) }
 				variant={ isCurrent ? 'primary' : 'tertiary' }
 				disabled={ disabled }
 				aria-disabled={ disabled }
@@ -124,10 +124,10 @@ const Pagination: React.FC< PaginationProps > = ( {
 	}
 
 	return (
-		<div className={ classnames( className, styles.wrapper ) }>
+		<div className={ clsx( className, styles.wrapper ) }>
 			<Button
 				size="small"
-				className={ classnames( styles.navigation, styles.button ) }
+				className={ clsx( styles.navigation, styles.button ) }
 				variant="tertiary"
 				disabled={ disabled || currentPage === 1 }
 				aria-disabled={ disabled || currentPage === 1 }
@@ -138,7 +138,7 @@ const Pagination: React.FC< PaginationProps > = ( {
 			{ content }
 			<Button
 				size="small"
-				className={ classnames( styles.navigation, styles.button ) }
+				className={ clsx( styles.navigation, styles.button ) }
 				variant="tertiary"
 				disabled={ disabled || currentPage === numPages }
 				aria-disabled={ disabled || currentPage === numPages }
@@ -163,7 +163,7 @@ export const ConnectPagination = ( props: { className: string; disabled?: boolea
 
 	const { page, itemsPerPage, total, isFetching } = useVideos();
 	return total <= itemsPerPage ? (
-		<div className={ classnames( props.className, styles[ 'pagination-placeholder' ] ) } />
+		<div className={ clsx( props.className, styles[ 'pagination-placeholder' ] ) } />
 	) : (
 		<Pagination
 			{ ...props }
@@ -180,7 +180,7 @@ export const ConnectLocalPagination = ( props: { className?: string; disabled?:
 	const { setPage, page, itemsPerPage, total, isFetching } = useLocalVideos();
 
 	return total < itemsPerPage ? (
-		<div className={ classnames( props.className, styles[ 'pagination-placeholder' ] ) } />
+		<div className={ clsx( props.className, styles[ 'pagination-placeholder' ] ) } />
 	) : (
 		<Pagination
 			{ ...props }
diff --git a/projects/packages/videopress/src/client/admin/components/video-card/index.tsx b/projects/packages/videopress/src/client/admin/components/video-card/index.tsx
index 4474f0da30e1..62f31bca6482 100644
--- a/projects/packages/videopress/src/client/admin/components/video-card/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-card/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chartBar, chevronDown, chevronUp } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import { usePermission } from '../../hooks/use-permission';
 import useVideo from '../../hooks/use-video';
@@ -40,7 +40,7 @@ const QuickActions = ( {
 	const { canPerformAction } = usePermission();
 
 	return (
-		<div className={ classnames( styles[ 'video-card__quick-actions-section' ], className ) }>
+		<div className={ clsx( styles[ 'video-card__quick-actions-section' ], className ) }>
 			<Button
 				variant="primary"
 				size="small"
@@ -95,7 +95,7 @@ export const VideoCard = ( {
 	return (
 		<>
 			<div
-				className={ classnames( styles[ 'video-card__wrapper' ], {
+				className={ clsx( styles[ 'video-card__wrapper' ], {
 					[ styles[ 'is-blank' ] ]: isBlank,
 					[ styles.disabled ]: isSm || disabled,
 				} ) }
@@ -156,7 +156,7 @@ export const VideoCard = ( {
 					<QuickActions
 						id={ id }
 						onVideoDetailsClick={ onVideoDetailsClick }
-						className={ classnames( {
+						className={ clsx( {
 							[ styles[ 'is-blank' ] ]: loading,
 						} ) }
 					/>
diff --git a/projects/packages/videopress/src/client/admin/components/video-filter/index.tsx b/projects/packages/videopress/src/client/admin/components/video-filter/index.tsx
index 5c5d269a2ff7..e3d10da8d7b0 100644
--- a/projects/packages/videopress/src/client/admin/components/video-filter/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-filter/index.tsx
@@ -5,7 +5,7 @@ import { Button, Col, Container, Text, useBreakpointMatch } from '@automattic/je
 import { Tooltip } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Types
  */
@@ -41,7 +41,7 @@ export const FilterButton = ( props: {
 	return (
 		<Button
 			variant={ isActive ? 'primary' : 'secondary' }
-			className={ classnames( styles[ 'filter-button' ], {
+			className={ clsx( styles[ 'filter-button' ], {
 				[ styles[ 'is-active' ] ]: isActive,
 			} ) }
 			icon={ filterIcon }
@@ -107,7 +107,7 @@ export const FilterSection = ( props: {
 	};
 
 	return (
-		<div className={ classnames( styles[ 'filters-section' ], props.className ) }>
+		<div className={ clsx( styles[ 'filters-section' ], props.className ) }>
 			<Container horizontalSpacing={ isSm ? 2 : 4 } horizontalGap={ 2 }>
 				<Col sm={ 4 } md={ 4 } lg={ 4 }>
 					<Text variant="body-extra-small-bold" weight="bold">
diff --git a/projects/packages/videopress/src/client/admin/components/video-list/index.tsx b/projects/packages/videopress/src/client/admin/components/video-list/index.tsx
index 4e4b15b78687..a4caea8ecdba 100644
--- a/projects/packages/videopress/src/client/admin/components/video-list/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-list/index.tsx
@@ -5,7 +5,7 @@ import { Text, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, info, warning } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 /**
  * Internal dependencies
@@ -167,7 +167,7 @@ export const LocalVideoList = ( {
 							: errorMessageReadError
 					}
 				>
-					<div className={ classnames( styles[ 'title-adornment' ], styles.error ) }>
+					<div className={ clsx( styles[ 'title-adornment' ], styles.error ) }>
 						<Icon icon={ warning } />
 					</div>
 				</Tooltip>
diff --git a/projects/packages/videopress/src/client/admin/components/video-quick-actions/index.tsx b/projects/packages/videopress/src/client/admin/components/video-quick-actions/index.tsx
index f9e97f9d6744..f11d9fc45c3b 100644
--- a/projects/packages/videopress/src/client/admin/components/video-quick-actions/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-quick-actions/index.tsx
@@ -5,7 +5,7 @@ import { Text, Button, ThemeProvider } from '@automattic/jetpack-components';
 import { Popover, Dropdown } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { image, trash, globe as siteDefaultPrivacyIcon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState, useEffect } from 'react';
 /**
  * Internal dependencies
@@ -263,7 +263,7 @@ const VideoQuickActions = ( {
 	const { canPerformAction } = usePermission();
 
 	return (
-		<div className={ classNames( styles.actions, className ) }>
+		<div className={ clsx( styles.actions, className ) }>
 			<ThumbnailActionsDropdown
 				onUpdate={ onUpdateVideoThumbnail }
 				description={ __( 'Update thumbnail', 'jetpack-videopress-pkg' ) }
diff --git a/projects/packages/videopress/src/client/admin/components/video-row/index.tsx b/projects/packages/videopress/src/client/admin/components/video-row/index.tsx
index f583be25d40e..3860ca9a39c5 100644
--- a/projects/packages/videopress/src/client/admin/components/video-row/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-row/index.tsx
@@ -10,7 +10,7 @@ import {
 import { dateI18n } from '@wordpress/date';
 import { sprintf, __ } from '@wordpress/i18n';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 /**
  * Internal dependencies
@@ -95,7 +95,7 @@ const Stats = ( {
 			plays={ playsElement }
 			upload={ uploadElement }
 			loading={ loading }
-			className={ classNames( { [ styles[ 'mobile-stats' ] ]: isSmall } ) }
+			className={ clsx( { [ styles[ 'mobile-stats' ] ]: isSmall } ) }
 		/>
 	);
 };
@@ -224,7 +224,7 @@ export const VideoRow = ( {
 			onKeyUp={ isSmall ? null : handleKeyUp }
 			onClick={ isSmall ? null : handleClick }
 			aria-label={ wrapperAriaLabel }
-			className={ classNames(
+			className={ clsx(
 				styles[ 'video-row' ],
 				{
 					[ styles.pressed ]: keyPressed,
@@ -236,7 +236,7 @@ export const VideoRow = ( {
 			ref={ setAnchor }
 		>
 			{ showCheckbox && (
-				<div className={ classNames( { [ styles[ 'checkbox-wrapper-small' ] ]: isSmall } ) }>
+				<div className={ clsx( { [ styles[ 'checkbox-wrapper-small' ] ]: isSmall } ) }>
 					<Checkbox
 						ref={ checkboxRef }
 						checked={ checked && ! loading }
@@ -248,12 +248,12 @@ export const VideoRow = ( {
 			) }
 
 			<div
-				className={ classNames( styles[ 'video-data-wrapper' ], {
+				className={ clsx( styles[ 'video-data-wrapper' ], {
 					[ styles.small ]: isSmall,
 				} ) }
 			>
 				<div
-					className={ classNames( styles[ 'info-wrapper' ], { [ styles.small ]: isSmall } ) }
+					className={ clsx( styles[ 'info-wrapper' ], { [ styles.small ]: isSmall } ) }
 					onClick={ isSmall && ! loading ? handleInfoWrapperClick : null }
 					role="presentation"
 				>
@@ -283,7 +283,7 @@ export const VideoRow = ( {
 						) : (
 							<Text
 								variant="title-small"
-								className={ classNames( styles.title, { [ styles.disabled ]: disabled } ) }
+								className={ clsx( styles.title, { [ styles.disabled ]: disabled } ) }
 								ref={ textRef }
 							>
 								{ title }
@@ -306,7 +306,7 @@ export const VideoRow = ( {
 				</div>
 
 				{ showBottom && (
-					<div className={ classNames( styles[ 'meta-wrapper' ], { [ styles.small ]: isSmall } ) }>
+					<div className={ clsx( styles[ 'meta-wrapper' ], { [ styles.small ]: isSmall } ) }>
 						{ ! isSmall && showActions && (
 							<div className={ styles.actions }>
 								{ showActionButton && actionButton }
diff --git a/projects/packages/videopress/src/client/admin/components/video-row/stats.tsx b/projects/packages/videopress/src/client/admin/components/video-row/stats.tsx
index 62459b3b7d62..53214ba94232 100644
--- a/projects/packages/videopress/src/client/admin/components/video-row/stats.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-row/stats.tsx
@@ -1,5 +1,5 @@
 import { Text, useBreakpointMatch, LoadingPlaceholder } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './style.module.scss';
 
 const Stats = ( {
@@ -20,7 +20,7 @@ const Stats = ( {
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 
 	return (
-		<div className={ classNames( className, styles.stats, { [ styles.small ]: isSmall } ) }>
+		<div className={ clsx( className, styles.stats, { [ styles.small ]: isSmall } ) }>
 			{ loading ? (
 				<>
 					<LoadingPlaceholder height={ 24 } />
diff --git a/projects/packages/videopress/src/client/admin/components/video-stats-group/index.tsx b/projects/packages/videopress/src/client/admin/components/video-stats-group/index.tsx
index 0ab7ab0c5a6a..a6e915165001 100644
--- a/projects/packages/videopress/src/client/admin/components/video-stats-group/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-stats-group/index.tsx
@@ -3,7 +3,7 @@
  */
 import { Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -13,9 +13,9 @@ import type React from 'react';
 
 const Stats = ( { label, value = 0 }: { label: string; value: number } ) => {
 	return (
-		<div className={ classnames( styles.column ) }>
+		<div className={ clsx( styles.column ) }>
 			<Text>{ label }</Text>
-			<Text variant="title-medium" className={ classnames( styles.count ) }>
+			<Text variant="title-medium" className={ clsx( styles.count ) }>
 				{ value }
 			</Text>
 		</div>
@@ -35,7 +35,7 @@ const VideoStatsGroup = ( {
 	playsToday = 0,
 }: VideoStatsGroupProps ) => {
 	return (
-		<div className={ classnames( className, styles.wrapper ) }>
+		<div className={ clsx( className, styles.wrapper ) }>
 			<Stats label={ __( 'Videos', 'jetpack-videopress-pkg' ) } value={ videos } />
 			<Stats label={ __( 'Plays', 'jetpack-videopress-pkg' ) } value={ plays } />
 			<Stats label={ __( 'Plays today', 'jetpack-videopress-pkg' ) } value={ playsToday } />
diff --git a/projects/packages/videopress/src/client/admin/components/video-storage-meter/index.tsx b/projects/packages/videopress/src/client/admin/components/video-storage-meter/index.tsx
index df2659229a71..7e383239ddc4 100644
--- a/projects/packages/videopress/src/client/admin/components/video-storage-meter/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-storage-meter/index.tsx
@@ -3,7 +3,7 @@
  */
 import { ProgressBar, Text } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import filesize from 'filesize';
 /**
  * Internal dependencies
@@ -40,8 +40,8 @@ const VideoStorageMeter: React.FC< VideoStorageMeterProps > = ( {
 	const totalLabel = filesize( total, { base: 10 } );
 
 	return (
-		<div className={ classnames( className ) }>
-			<Text className={ classnames( styles[ 'percentage-description' ] ) }>
+		<div className={ clsx( className ) }>
+			<Text className={ clsx( styles[ 'percentage-description' ] ) }>
 				{ sprintf(
 					/* translators: %1$s is the storage percentage, from 0% to 100%, %2$s is the total storage. */
 					__( '%1$s of %2$s of cloud video storage', 'jetpack-videopress-pkg' ),
@@ -50,7 +50,7 @@ const VideoStorageMeter: React.FC< VideoStorageMeterProps > = ( {
 				) }
 			</Text>
 			<ProgressBar
-				className={ classnames( styles[ 'progress-bar' ], progressBarClassName ) }
+				className={ clsx( styles[ 'progress-bar' ], progressBarClassName ) }
 				progress={ progress }
 			></ProgressBar>
 		</div>
diff --git a/projects/packages/videopress/src/client/admin/components/video-thumbnail-selector-modal/index.tsx b/projects/packages/videopress/src/client/admin/components/video-thumbnail-selector-modal/index.tsx
index 8222ea06ae18..33f5b1379990 100644
--- a/projects/packages/videopress/src/client/admin/components/video-thumbnail-selector-modal/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-thumbnail-selector-modal/index.tsx
@@ -4,7 +4,7 @@
 import { Button, ThemeProvider, useBreakpointMatch } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import { ReactNode } from 'react';
 /**
@@ -39,7 +39,7 @@ const VideoThumbnailSelectorModal = ( {
 			<ThemeProvider targetDom={ modalRef }>
 				<div
 					ref={ setModalRef }
-					className={ classnames( styles.selector, {
+					className={ clsx( styles.selector, {
 						[ styles[ 'is-small' ] ]: isSm,
 					} ) }
 				>
diff --git a/projects/packages/videopress/src/client/admin/components/video-thumbnail/index.tsx b/projects/packages/videopress/src/client/admin/components/video-thumbnail/index.tsx
index 7146ae1d3e02..a5f6b171aaf3 100644
--- a/projects/packages/videopress/src/client/admin/components/video-thumbnail/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-thumbnail/index.tsx
@@ -13,7 +13,7 @@ import { Dropdown } from '@wordpress/components';
 import { gmdateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, edit, cloud, image, media, video } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 /**
  * Internal dependencies
@@ -132,9 +132,7 @@ const UploadingThumbnail = ( {
 	const infoText = uploadProgress === 1 ? completingText : uploadingText;
 
 	return (
-		<div
-			className={ classnames( styles[ 'custom-thumbnail' ], { [ styles[ 'is-row' ] ]: isRow } ) }
-		>
+		<div className={ clsx( styles[ 'custom-thumbnail' ], { [ styles[ 'is-row' ] ]: isRow } ) }>
 			<ProgressBar
 				className={ styles[ 'progress-bar' ] }
 				size="small"
@@ -213,7 +211,7 @@ const VideoThumbnail = forwardRef< HTMLDivElement, VideoThumbnailProps >(
 
 		return (
 			<div
-				className={ classnames( className, styles.thumbnail, {
+				className={ clsx( className, styles.thumbnail, {
 					[ styles[ 'is-small' ] ]: isSmall,
 				} ) }
 				ref={ ref }
diff --git a/projects/packages/videopress/src/client/admin/components/video-upload-area/index.tsx b/projects/packages/videopress/src/client/admin/components/video-upload-area/index.tsx
index 38ca51305eb5..006d1f85db45 100644
--- a/projects/packages/videopress/src/client/admin/components/video-upload-area/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/video-upload-area/index.tsx
@@ -4,7 +4,7 @@
 import { Button, useBreakpointMatch, Text } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { Icon, captureVideo } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -35,7 +35,7 @@ const VideoUploadArea = ( { className, onSelectFiles }: VideoUploadAreaProps ) =
 
 	return (
 		<div
-			className={ classnames( styles.wrapper, className, {
+			className={ clsx( styles.wrapper, className, {
 				[ styles.small ]: isSm,
 			} ) }
 		>
@@ -43,18 +43,18 @@ const VideoUploadArea = ( { className, onSelectFiles }: VideoUploadAreaProps ) =
 				ref={ inputRef }
 				type="file"
 				accept={ fileInputExtensions }
-				className={ classnames( styles[ 'file-input' ] ) }
+				className={ clsx( styles[ 'file-input' ] ) }
 				onChange={ handleFileInputChangeEvent }
 				multiple={ hasVideoPressPurchase }
 			/>
-			<Icon icon={ captureVideo } size={ 32 } className={ classnames( styles.icon ) } />
+			<Icon icon={ captureVideo } size={ 32 } className={ clsx( styles.icon ) } />
 			<Text variant="title-small">
 				{ __( 'Drag and drop your video here', 'jetpack-videopress-pkg' ) }
 			</Text>
 			<Button
 				size="small"
 				variant="secondary"
-				className={ classnames( styles.button ) }
+				className={ clsx( styles.button ) }
 				onClick={ handleClickEvent }
 			>
 				{ __( 'Select file to upload', 'jetpack-videopress-pkg' ) }
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx
index c783c706e976..2a8cfc151993 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx
@@ -22,7 +22,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { linkOff, image as imageIcon } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -279,7 +279,7 @@ function VideoFramePicker( {
 		<div className="poster-panel__frame-picker">
 			<div
 				ref={ playerWrapperRef }
-				className={ classnames( 'poster-panel__frame-picker__sandbox-wrapper', {
+				className={ clsx( 'poster-panel__frame-picker__sandbox-wrapper', {
 					'is-player-ready': playerIsReady,
 					'is-generating-poster': isGeneratingPoster,
 				} ) }
@@ -554,7 +554,7 @@ export default function PosterPanel( {
 			/>
 
 			<div
-				className={ classnames( 'poster-panel__frame-wrapper', {
+				className={ clsx( 'poster-panel__frame-wrapper', {
 					'is-selected': pickPosterFromFrame,
 				} ) }
 			>
@@ -568,7 +568,7 @@ export default function PosterPanel( {
 			</div>
 
 			<div
-				className={ classnames( 'poster-panel__image-wrapper', {
+				className={ clsx( 'poster-panel__image-wrapper', {
 					'is-selected': ! pickPosterFromFrame,
 				} ) }
 			>
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
index 08bc15880ca0..6806537b8c3b 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
@@ -6,7 +6,7 @@ import { Button, BaseControl } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -35,11 +35,11 @@ const Poster = ( { file, videoPosterImageData, onVideoFrameSelected } ) => {
 	const src = useRef( file?.url ?? URL.createObjectURL( file ) );
 
 	return (
-		<div className={ classNames( 'uploading-editor__poster-container' ) }>
+		<div className={ clsx( 'uploading-editor__poster-container' ) }>
 			<VideoFrameSelector
 				src={ src?.current }
 				onVideoFrameSelected={ onVideoFrameSelected }
-				className={ classNames( { 'uploading-editor__hide': hasPosterImage } ) }
+				className={ clsx( { 'uploading-editor__hide': hasPosterImage } ) }
 			/>
 			{ hasPosterImage && (
 				<>
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/deprecated/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/deprecated/index.tsx
index 2afbd0692d00..dfd01fd77f1d 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/deprecated/index.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/deprecated/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -46,7 +46,7 @@ function save( { attributes }: videoBlockSaveProps ): React.ReactNode {
 	} = attributes;
 
 	const blockProps = useBlockProps.save( {
-		className: classnames( 'wp-block-jetpack-videopress', 'jetpack-videopress-player', {
+		className: clsx( 'wp-block-jetpack-videopress', 'jetpack-videopress-player', {
 			[ `align${ align }` ]: align,
 		} ),
 	} );
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
index be89c82d340b..c80c2cde45a0 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
@@ -16,7 +16,7 @@ import { useDispatch } from '@wordpress/data';
 import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { caption as captionIcon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -475,7 +475,7 @@ export default function VideoPressEdit( {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( blockMainClassName, {
+			className={ clsx( blockMainClassName, {
 				[ `align${ align }` ]: align,
 				'is-updating-preview': ! previewHtml,
 			} ) }
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/transforms/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/transforms/index.tsx
index 8247b563364a..503cd0a7430a 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/transforms/index.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/transforms/index.tsx
@@ -5,7 +5,7 @@ import { createBlobURL } from '@wordpress/blob';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { dispatch, select } from '@wordpress/data';
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -104,7 +104,7 @@ const transformToCoreEmbed = {
 		const { clientId } = block;
 		setTimeout( () => {
 			const { className: embedClassName } = getBlockAttributes( clientId ) || {};
-			const updatedClassName = classnames( className, embedClassName );
+			const updatedClassName = clsx( className, embedClassName );
 			updateBlockAttributes( clientId, { className: updatedClassName } );
 		}, 100 );
 
diff --git a/projects/packages/videopress/src/client/components/timestamp-control/index.tsx b/projects/packages/videopress/src/client/components/timestamp-control/index.tsx
index 59dfa6355308..784816769f9a 100644
--- a/projects/packages/videopress/src/client/components/timestamp-control/index.tsx
+++ b/projects/packages/videopress/src/client/components/timestamp-control/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -193,7 +193,7 @@ export const TimestampInput = ( {
 
 	return (
 		<div
-			className={ classNames( styles[ 'timestamp-input-wrapper' ], {
+			className={ clsx( styles[ 'timestamp-input-wrapper' ], {
 				[ styles[ 'is-disabled' ] ]: disabled,
 			} ) }
 		>
diff --git a/projects/packages/videopress/src/client/components/video-frame-selector/index.jsx b/projects/packages/videopress/src/client/components/video-frame-selector/index.jsx
index 868c114daa29..e8a11a3ece9b 100644
--- a/projects/packages/videopress/src/client/components/video-frame-selector/index.jsx
+++ b/projects/packages/videopress/src/client/components/video-frame-selector/index.jsx
@@ -4,7 +4,7 @@
 import { RangeControl, Spinner } from '@wordpress/components';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -70,7 +70,7 @@ const VideoFrameSelector = ( {
 	};
 
 	return (
-		<div className={ classNames( styles.container, className ) }>
+		<div className={ clsx( styles.container, className ) }>
 			<Icon className={ styles[ 'play-icon' ] } icon={ playIcon } />
 			<VideoPlayer src={ src } setMaxDuration={ setMaxDuration } currentTime={ currentTime } />
 			<RangeControl
diff --git a/projects/packages/wordads/changelog/fix-37695-classnames_to_clsx b/projects/packages/wordads/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/packages/wordads/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/packages/wordads/package.json b/projects/packages/wordads/package.json
index 3e3a975f59db..523e5e55aecd 100644
--- a/projects/packages/wordads/package.json
+++ b/projects/packages/wordads/package.json
@@ -42,7 +42,7 @@
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
 		"chart.js": "3.7.1",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"fast-json-stable-stringify": "2.1.0",
 		"lodash": "4.17.21",
 		"photon": "4.0.0",
diff --git a/projects/packages/wordads/src/dashboard/components/button/index.jsx b/projects/packages/wordads/src/dashboard/components/button/index.jsx
index e48a2bf351df..e7ea4f5a5dcf 100644
--- a/projects/packages/wordads/src/dashboard/components/button/index.jsx
+++ b/projects/packages/wordads/src/dashboard/components/button/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -32,7 +32,7 @@ export default class Button extends React.Component {
 		const element = this.props.href ? 'a' : 'button';
 		const { primary, compact, scary, borderless, className, ...props } = this.props;
 
-		const buttonClasses = classNames( {
+		const buttonClasses = clsx( {
 			'dops-button': true,
 			'is-compact': compact,
 			'is-primary': primary,
@@ -40,7 +40,7 @@ export default class Button extends React.Component {
 			'is-borderless': borderless,
 		} );
 
-		props.className = classNames( className, buttonClasses );
+		props.className = clsx( className, buttonClasses );
 
 		return React.createElement( element, props, this.props.children );
 	}
diff --git a/projects/packages/wordads/src/dashboard/components/card/compact.jsx b/projects/packages/wordads/src/dashboard/components/card/compact.jsx
index 2505f66664b1..d84e4147c6d7 100644
--- a/projects/packages/wordads/src/dashboard/components/card/compact.jsx
+++ b/projects/packages/wordads/src/dashboard/components/card/compact.jsx
@@ -1,5 +1,5 @@
 /*eslint lodash/import-scope: [2, "method"]*/
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import assign from 'lodash/assign';
 import React from 'react';
@@ -9,7 +9,7 @@ export default class CompactCard extends React.Component {
 
 	render() {
 		const props = assign( {}, this.props, {
-			className: classnames( this.props.className, 'is-compact' ),
+			className: clsx( this.props.className, 'is-compact' ),
 		} );
 
 		return <Card { ...props }>{ this.props.children }</Card>;
diff --git a/projects/packages/wordads/src/dashboard/components/card/index.jsx b/projects/packages/wordads/src/dashboard/components/card/index.jsx
index 29a203e7e7ab..a58af1700e1a 100644
--- a/projects/packages/wordads/src/dashboard/components/card/index.jsx
+++ b/projects/packages/wordads/src/dashboard/components/card/index.jsx
@@ -1,5 +1,5 @@
 import { Gridicon } from '@automattic/jetpack-components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import assign from 'lodash/assign';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
@@ -23,7 +23,7 @@ class CardSection extends React.Component {
 	render() {
 		return (
 			<div
-				className={ classnames( 'dops-card-section', this.props.className ) }
+				className={ clsx( 'dops-card-section', this.props.className ) }
 				style={ this.props.style }
 			>
 				{ this.props.title ? this._renderWithTitle() : this.props.children }
@@ -75,7 +75,7 @@ class Card extends React.Component {
 	};
 
 	render() {
-		const className = classnames( 'dops-card', this.props.className, {
+		const className = clsx( 'dops-card', this.props.className, {
 			'is-card-link': !! this.props.href,
 			'is-compact': this.props.compact,
 		} );
diff --git a/projects/packages/wordads/src/dashboard/components/form-toggle/compact.jsx b/projects/packages/wordads/src/dashboard/components/form-toggle/compact.jsx
index 682d81d5d559..60e0440bee57 100644
--- a/projects/packages/wordads/src/dashboard/components/form-toggle/compact.jsx
+++ b/projects/packages/wordads/src/dashboard/components/form-toggle/compact.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*eslint lodash/import-scope: [2, "method"]*/
 import Toggle from 'components/form-toggle';
 import omit from 'lodash/omit';
@@ -11,7 +11,7 @@ export default class CompactFormToggle extends React.Component {
 		return (
 			<Toggle
 				{ ...omit( this.props, 'className' ) }
-				className={ classNames( this.props.className, 'is-compact' ) }
+				className={ clsx( this.props.className, 'is-compact' ) }
 			>
 				{ this.props.children }
 			</Toggle>
diff --git a/projects/packages/wordads/src/dashboard/components/form-toggle/index.jsx b/projects/packages/wordads/src/dashboard/components/form-toggle/index.jsx
index 260ab65b1b22..f9618da58438 100644
--- a/projects/packages/wordads/src/dashboard/components/form-toggle/index.jsx
+++ b/projects/packages/wordads/src/dashboard/components/form-toggle/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 
@@ -80,15 +80,13 @@ export default class FormToggle extends Component {
 
 	render() {
 		const id = this.props.id || 'toggle-' + this.id;
-		const toggleClasses = classNames( 'form-toggle', this.props.className, {
+		const toggleClasses = clsx( 'form-toggle', this.props.className, {
 			'is-toggling': this.props.toggling,
 		} );
 
 		return (
 			<Fragment>
-				<div
-					className={ classNames( 'form-toggle__switch-container', this.props.switchClassNames ) }
-				>
+				<div className={ clsx( 'form-toggle__switch-container', this.props.switchClassNames ) }>
 					<input
 						className={ toggleClasses }
 						type="checkbox"
@@ -97,7 +95,7 @@ export default class FormToggle extends Component {
 						disabled={ this.props.disabled }
 					/>
 					<span
-						className={ classNames( 'form-toggle__switch', this.props.switchClassNames ) }
+						className={ clsx( 'form-toggle__switch', this.props.switchClassNames ) }
 						disabled={ this.props.disabled }
 						id={ id }
 						onClick={ this.onClick }
@@ -109,11 +107,11 @@ export default class FormToggle extends Component {
 					/>
 				</div>
 				<label
-					className={ classNames( 'form-toggle__label', this.props.labelClassNames ) }
+					className={ clsx( 'form-toggle__label', this.props.labelClassNames ) }
 					htmlFor={ id }
 				>
 					<span
-						className={ classNames( 'form-toggle__label-content', this.props.labelClassNames ) }
+						className={ clsx( 'form-toggle__label-content', this.props.labelClassNames ) }
 						onClick={ this.onLabelClick }
 					>
 						{ this.props.children }
diff --git a/projects/packages/wordads/src/dashboard/components/module-control/index.jsx b/projects/packages/wordads/src/dashboard/components/module-control/index.jsx
index f69896552e1a..54fd604ed9ea 100644
--- a/projects/packages/wordads/src/dashboard/components/module-control/index.jsx
+++ b/projects/packages/wordads/src/dashboard/components/module-control/index.jsx
@@ -1,6 +1,6 @@
 import analytics from '@automattic/jetpack-analytics';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import CompactFormToggle from 'components/form-toggle/compact';
 import React, { useCallback } from 'react';
@@ -72,7 +72,7 @@ export default function WordAdsModuleControl( {
 	return (
 		<div className="jp-form-settings-group jp-form-wordads-settings-group">
 			<Card
-				className={ classNames( {
+				className={ clsx( {
 					'jp-form-has-child': true,
 					'jp-form-settings-disable': false,
 				} ) }
diff --git a/projects/packages/wordads/src/dashboard/components/notice/index.jsx b/projects/packages/wordads/src/dashboard/components/notice/index.jsx
index 3aa8c34b1ee9..47671141f89e 100644
--- a/projects/packages/wordads/src/dashboard/components/notice/index.jsx
+++ b/projects/packages/wordads/src/dashboard/components/notice/index.jsx
@@ -1,5 +1,5 @@
 import { Gridicon } from '@automattic/jetpack-components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -96,7 +96,7 @@ export default class SimpleNotice extends React.Component {
 			text,
 			dismissText,
 		} = this.props;
-		const classes = classnames( 'dops-notice', status, className, {
+		const classes = clsx( 'dops-notice', status, className, {
 			'is-compact': isCompact,
 			'is-dismissable': showDismiss,
 		} );
diff --git a/projects/plugins/automattic-for-agencies-client/changelog/fix-37695-classnames_to_clsx b/projects/plugins/automattic-for-agencies-client/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/plugins/automattic-for-agencies-client/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/automattic-for-agencies-client/package.json b/projects/plugins/automattic-for-agencies-client/package.json
index b604f3c5d782..8677487d53a5 100644
--- a/projects/plugins/automattic-for-agencies-client/package.json
+++ b/projects/plugins/automattic-for-agencies-client/package.json
@@ -35,7 +35,7 @@
 		"@wordpress/date": "5.0.0",
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/connected-card/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/connected-card/index.jsx
index b8428bd81d31..8d29f4e09c4e 100644
--- a/projects/plugins/automattic-for-agencies-client/src/js/components/connected-card/index.jsx
+++ b/projects/plugins/automattic-for-agencies-client/src/js/components/connected-card/index.jsx
@@ -1,6 +1,6 @@
 import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import BrandedCard from '../branded-card';
 import CheckCircleIcon from '../check-circle-icon';
@@ -26,12 +26,7 @@ export default function ConnectedCard() {
 						'automattic-for-agencies-client'
 					) }
 				</h1>
-				<p
-					className={ classNames(
-						styles.connection_status,
-						styles[ 'connection_status--connected' ]
-					) }
-				>
+				<p className={ clsx( styles.connection_status, styles[ 'connection_status--connected' ] ) }>
 					<CheckCircleIcon />
 					{ __( 'Site is connected and syncing', 'automattic-for-agencies-client' ) }
 				</p>
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx
index eec451954acd..041577d754e6 100644
--- a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx
+++ b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx
@@ -2,7 +2,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { ConnectButton } from '@automattic/jetpack-connection';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import BrandedCard from '../branded-card';
 import CheckIcon from '../check-icon';
@@ -212,7 +212,7 @@ export default function ConnectionCard() {
 	return (
 		<BrandedCard>
 			<div
-				className={ classNames( styles.card, {
+				className={ clsx( styles.card, {
 					[ styles[ 'card--sharing' ] ]: showSharingDetails,
 					[ styles[ 'card--connection' ] ]: ! showSharingDetails,
 				} ) }
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/index.jsx
index ceb1ac883bb3..23f7c39b97ac 100644
--- a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/index.jsx
+++ b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/index.jsx
@@ -1,7 +1,7 @@
 import { CONNECTION_STORE_ID, ConnectButton } from '@automattic/jetpack-connection';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import BrandedCard from '../branded-card';
 import CloseCircleIcon from '../close-circle-icon';
@@ -35,7 +35,7 @@ export default function DisconnectedCard() {
 					) }
 				</h1>
 				<p
-					className={ classNames(
+					className={ clsx(
 						styles.connection_status,
 						styles[ 'connection_status--disconnected' ]
 					) }
diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/error-description/error-description.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/error-description/error-description.tsx
index 865dc896ad55..f6c7aff5a9d2 100644
--- a/projects/plugins/boost/app/assets/src/js/features/critical-css/error-description/error-description.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/error-description/error-description.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { describeErrorSet, rawError } from '../lib/describe-critical-css-recommendations';
@@ -63,14 +63,10 @@ const CriticalCssErrorDescription: React.FC< CriticalCssErrorDescriptionTypes >
 						labelExpandedText={ __( 'See error message', 'jetpack-boost' ) }
 						labelCollapsedText={ __( 'Hide error message', 'jetpack-boost' ) }
 					>
-						<p className={ classNames( styles[ 'raw-error' ], styles[ 'no-spacing' ] ) }>
-							{ rawErrors }
-						</p>
+						<p className={ clsx( styles[ 'raw-error' ], styles[ 'no-spacing' ] ) }>{ rawErrors }</p>
 					</FoldingElement>
 				) : (
-					<p className={ classNames( styles[ 'raw-error' ], styles[ 'fade-in' ] ) }>
-						{ rawErrors }
-					</p>
+					<p className={ clsx( styles[ 'raw-error' ], styles[ 'fade-in' ] ) }>{ rawErrors }</p>
 				) ) }
 		</div>
 	);
diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
index b48e641edf50..a820a9fe5147 100644
--- a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
@@ -1,6 +1,6 @@
 import useMeasure from 'react-use-measure';
 import { animated, useSpring } from '@react-spring/web';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import ChevronDown from '$svg/chevron-down';
 import ChevronUp from '$svg/chevron-up';
@@ -30,7 +30,7 @@ const FoldingElement: React.FC< PropTypes > = ( {
 	return (
 		<>
 			<button
-				className={ classNames( 'components-button is-link', styles[ 'foldable-element-control' ], {
+				className={ clsx( 'components-button is-link', styles[ 'foldable-element-control' ], {
 					visible: expanded,
 				} ) }
 				onClick={ () => setExpanded( ! expanded ) }
diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx
index d73036ddc16d..a210634b2126 100644
--- a/projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx
@@ -1,5 +1,5 @@
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { CriticalCssState } from '../lib/stores/critical-css-state-types';
 import TimeAgo from '../time-ago/time-ago';
 import InfoIcon from '$svg/info';
@@ -73,7 +73,7 @@ const Status: React.FC< StatusTypes > = ( {
 				) }
 
 				{ cssState.status !== 'pending' && providersWithErrors.length > 0 && (
-					<div className={ classNames( 'failures', styles.failures ) }>
+					<div className={ clsx( 'failures', styles.failures ) }>
 						<InfoIcon />
 
 						<>
diff --git a/projects/plugins/boost/app/assets/src/js/features/error-notice/error-notice.tsx b/projects/plugins/boost/app/assets/src/js/features/error-notice/error-notice.tsx
index 13d06d621268..cd851c43188e 100644
--- a/projects/plugins/boost/app/assets/src/js/features/error-notice/error-notice.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/error-notice/error-notice.tsx
@@ -2,7 +2,7 @@ import { createInterpolateElement } from '@wordpress/element';
 import { standardizeError } from '$lib/utils/standardize-error';
 import NoticeOutline from '$svg/notice-outline';
 import styles from './error-notice.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type ErrorNoticeProps = {
 	title: string;
@@ -29,7 +29,7 @@ const ErrorNotice = ( {
 
 	return (
 		<div
-			className={ classNames( styles[ 'error-notice' ], {
+			className={ clsx( styles[ 'error-notice' ], {
 				[ styles[ 'variant-module' ] ]: variant === 'module',
 			} ) }
 		>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.tsx b/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.tsx
index 59c2a41a0b4d..11bf0de7ac51 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.tsx
@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import { z } from 'zod';
 import indexStyles from '../../../pages/index/index.module.scss';
 import styles from './image-cdn-liar.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ModuleSubsection from '$features/ui/module-subsection/module-subsection';
 import { recordBoostEvent } from '$lib/utils/analytics';
 
@@ -35,7 +35,7 @@ export default function ImageCdnLiar( { isPremium }: ImageCdnLiarProps ) {
 				<div className={ styles.title }>
 					<h4>
 						{ __( 'Auto-Resize Lazy Images', 'jetpack-boost' ) }
-						<span className={ classNames( indexStyles.beta, styles.beta ) }>Beta</span>
+						<span className={ clsx( indexStyles.beta, styles.beta ) }>Beta</span>
 					</h4>
 					<ToggleControl
 						className={ styles[ 'toggle-control' ] }
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-control/quality-control.tsx b/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-control/quality-control.tsx
index a898b59f9abf..806776edb72d 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-control/quality-control.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-control/quality-control.tsx
@@ -1,5 +1,5 @@
 import { NumberSlider } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import styles from './quality-control.module.scss';
 import { useEffect, useId, useState } from 'react';
@@ -31,7 +31,7 @@ const QualityControl = ( {
 	return (
 		<div className={ styles[ 'quality-control' ] }>
 			<div className={ styles.label }>{ label }</div>
-			<div className={ classNames( styles.slider, { [ styles.disabled ]: lossless } ) }>
+			<div className={ clsx( styles.slider, { [ styles.disabled ]: lossless } ) }>
 				<NumberSlider
 					value={ value }
 					onAfterChange={ updatedValue => {
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/button/button.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/button/button.tsx
index 5a0dd8d0aea9..46594d734c60 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/button/button.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/button/button.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './button.module.scss';
 
 interface ButtonProps {
@@ -25,7 +25,7 @@ const Button: React.FC< ButtonProps > = ( {
 		width: width || 'auto',
 	};
 
-	const buttonClassNames = classNames( 'button', styles.button, {
+	const buttonClassNames = clsx( 'button', styles.button, {
 		[ styles.small ]: small,
 		[ styles.fill ]: fill,
 	} );
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/hero/hero.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/hero/hero.tsx
index 33d1cba49f26..93631e0e9e65 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/hero/hero.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/hero/hero.tsx
@@ -1,5 +1,5 @@
 import { IconTooltip, Spinner } from '@automattic/jetpack-components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import styles from './hero.module.scss';
 import ImageCdnRecommendation from '$features/image-size-analysis/image-cdn-recommendation/image-cdn-recommendation';
@@ -60,7 +60,7 @@ const Hero = ( {
 	return (
 		<>
 			{ group && group.total_pages > 0 ? (
-				<div className={ classNames( styles.hero, styles[ 'fade-in' ] ) }>
+				<div className={ clsx( styles.hero, styles[ 'fade-in' ] ) }>
 					{ isUpdateInProgress ? (
 						<UpdateInProgress lastUpdated={ isaLastUpdated } />
 					) : (
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/multi-progress/multi-progress.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/multi-progress/multi-progress.tsx
index 19cdc514c07b..1ccac7f9fa63 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/multi-progress/multi-progress.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/multi-progress/multi-progress.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { MouseEventHandler } from 'react';
 import { sprintf, __ } from '@wordpress/i18n';
 import OtherGroupContext from '$features/image-size-analysis/other-group-context/other-group-context';
@@ -72,7 +72,7 @@ const MultiProgress: React.FC< MultiProgressProps > = ( { reportProgress } ) =>
 							trackEventProps={ report.group }
 						>
 							<span
-								className={ classNames( styles.bubble, {
+								className={ clsx( styles.bubble, {
 									[ styles.done ]: report.done,
 									[ styles[ 'has-issues' ] ]: report.has_issues,
 								} ) }
@@ -97,7 +97,7 @@ const MultiProgress: React.FC< MultiProgressProps > = ( { reportProgress } ) =>
 
 					{ ( report.done || report.has_issues ) && (
 						<div
-							className={ classNames( styles.status, {
+							className={ clsx( styles.status, {
 								[ styles[ 'has-issues' ] ]: report.has_issues,
 							} ) }
 						>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations-meta/recommendations-meta.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations-meta/recommendations-meta.tsx
index d4ffca29cb62..b7a8ae5470da 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations-meta/recommendations-meta.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations-meta/recommendations-meta.tsx
@@ -14,7 +14,7 @@ import {
 	useImageAnalysisRequest,
 	IsaCounts,
 } from '$features/image-size-analysis';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './recommendations-meta.module.scss';
 
 const getWaitNotice = ( isRequesting: boolean, currentStatus: string | undefined ) => {
@@ -81,7 +81,7 @@ const RecommendationsMeta: React.FC< Props > = ( { isCdnActive } ) => {
 							</ErrorNotice>
 						</div>
 					) : waitNotice ? (
-						<div className={ classNames( styles[ 'summary-line' ], styles[ 'wait-notice' ] ) }>
+						<div className={ clsx( styles[ 'summary-line' ], styles[ 'wait-notice' ] ) }>
 							{ waitNotice }
 						</div>
 					) : null }
@@ -89,7 +89,7 @@ const RecommendationsMeta: React.FC< Props > = ( { isCdnActive } ) => {
 					{ ! isaRequest.isPending && status === ISAStatus.Completed && (
 						<div className={ styles[ 'summary-line' ] }>
 							{ totalIssues > 0 ? (
-								<div className={ classNames( styles[ 'has-issues' ], styles.summary ) }>
+								<div className={ clsx( styles[ 'has-issues' ], styles.summary ) }>
 									<WarningIcon />
 									{ sprintf(
 										// translators: 1: Number of scanned issues found 2: Number of scanned pages
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/pagination/pagination.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/pagination/pagination.tsx
index 78904dfcd5f5..0db31c2cb92f 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/pagination/pagination.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/pagination/pagination.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState, useEffect, useMemo } from 'react';
 import ChevronLeft from '$svg/chevron-left';
 import ChevronRight from '$svg/chevron-right';
@@ -37,7 +37,7 @@ const PaginationArrow: React.FC< PaginationLinkProps > = ( {
 	);
 
 	if ( inactive ) {
-		return <span className={ classNames( styles.page, styles.inactive ) }>{ children }</span>;
+		return <span className={ clsx( styles.page, styles.inactive ) }>{ children }</span>;
 	}
 
 	return (
@@ -94,7 +94,7 @@ const Pagination: React.FC< PaginationProps > = ( { group, current, total } ) =>
 								) : (
 									<Link
 										to={ `/image-size-analysis/${ group }/${ paginationPage }` }
-										className={ classNames( styles.page, {
+										className={ clsx( styles.page, {
 											[ styles.current ]: paginationPage === current,
 										} ) }
 									>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
index 22a715a99854..8979fe60c5ba 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
@@ -11,7 +11,7 @@ import TableRowHover from '../table-row-hover/table-row-hover';
 import { removeGetParams } from '$lib/utils/remove-get-params';
 import { recordBoostEventAndRedirect } from '$lib/utils/analytics';
 import styles from './image-size-row.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 interface ImageSizeRowProps {
 	enableTransition: boolean;
@@ -78,7 +78,7 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				<Pill color="#d0e6b8">{ potentialSize } KB</Pill>
 			</div>
 
-			<div className={ classNames( styles[ 'hover-content' ], 'jb-table-row__hover-content' ) }>
+			<div className={ clsx( styles[ 'hover-content' ], 'jb-table-row__hover-content' ) }>
 				<TableRowHover
 					device_type={ details.device_type }
 					edit_url={ details.page.edit_url }
@@ -89,11 +89,11 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				/>
 			</div>
 
-			<div className={ classNames( styles.device, 'jb-table-row__device' ) }>
+			<div className={ clsx( styles.device, 'jb-table-row__device' ) }>
 				<Device device={ details.device_type } />
 			</div>
 
-			<div className={ classNames( styles.page, 'jb-table-row__page' ) }>
+			<div className={ clsx( styles.page, 'jb-table-row__page' ) }>
 				<a href={ details.page.url } className={ styles.link }>
 					{ details.page.title }
 				</a>
@@ -107,7 +107,7 @@ const Expanded: React.FC< { details: IsaImage } > = ( { details } ) => {
 	const potentialSize = getPotentialSize( details );
 	return (
 		<>
-			<div className={ classNames( styles[ 'expanded-info' ], styles[ 'mobile-only' ] ) }>
+			<div className={ clsx( styles[ 'expanded-info' ], styles[ 'mobile-only' ] ) }>
 				<h4 className={ styles.header }>{ __( 'Potential Size', 'jetpack-boost' ) }</h4>
 				<div className={ styles.pills }>
 					<Pill color={ pillColor }>{ Math.round( details.image.weight.current ) } KB</Pill>
@@ -116,7 +116,7 @@ const Expanded: React.FC< { details: IsaImage } > = ( { details } ) => {
 				</div>
 			</div>
 
-			<div className={ classNames( styles[ 'expanded-info' ], styles[ 'mobile-only' ] ) }>
+			<div className={ clsx( styles[ 'expanded-info' ], styles[ 'mobile-only' ] ) }>
 				<h4 className={ styles.header }>{ __( 'Device', 'jetpack-boost' ) }</h4>
 				<div className={ styles[ 'expanded-icon' ] }>
 					<Device device={ details.device_type } />
@@ -128,7 +128,7 @@ const Expanded: React.FC< { details: IsaImage } > = ( { details } ) => {
 				</span>
 			</div>
 
-			<div className={ classNames( styles[ 'expanded-info' ], styles[ 'image-details' ] ) }>
+			<div className={ clsx( styles[ 'expanded-info' ], styles[ 'image-details' ] ) }>
 				<h4 className={ styles.header }>{ __( 'Image Details', 'jetpack-boost' ) }</h4>
 				<div className={ styles.row }>
 					<div>{ __( 'File Dimensions', 'jetpack-boost' ) }</div>
@@ -156,7 +156,7 @@ const Expanded: React.FC< { details: IsaImage } > = ( { details } ) => {
 				</div>
 			</div>
 
-			<div className={ classNames( styles[ 'expanded-info' ], styles[ 'fix-options' ] ) }>
+			<div className={ clsx( styles[ 'expanded-info' ], styles[ 'fix-options' ] ) }>
 				<h4 className={ styles.header }>{ __( 'How to fix', 'jetpack-boost' ) }</h4>
 				<p>{ details.instructions }</p>
 				{ details.page.edit_url && (
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
index 2c3c9d585eeb..d56f849c2901 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 interface TableRowProps {
 	children: React.ReactNode;
 	expandedContent?: React.ReactNode;
@@ -26,7 +26,7 @@ const TableRow: React.FC< TableRowProps > = ( { children, expandedContent } ) =>
 	);
 
 	return (
-		<div className={ classnames( 'jb-table-row-container', { expanded } ) }>
+		<div className={ clsx( 'jb-table-row-container', { expanded } ) }>
 			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
 			<div className="jb-table-row jb-recommendation-page-grid" onClick={ toggleExpand }>
 				{ children }
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
index 44e48817351a..bbcda9bf4434 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
@@ -10,7 +10,7 @@ import {
 	type IsaReport,
 	ISAStatus,
 } from '$features/image-size-analysis';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const toggleImageFix = ( imageDetails: IsaImage ) => {
 	const imageFixer = useImageFixer();
@@ -45,7 +45,7 @@ interface TableProps {
 const Table = ( { isaDataLoading, images, isaReport }: TableProps ) => {
 	return (
 		<>
-			<div className={ classnames( 'jb-loading-spinner', { 'jb-active': isaDataLoading } ) }>
+			<div className={ clsx( 'jb-loading-spinner', { 'jb-active': isaDataLoading } ) }>
 				<Spinner size="3rem" lineWidth="4px" />
 			</div>
 
@@ -56,7 +56,7 @@ const Table = ( { isaDataLoading, images, isaReport }: TableProps ) => {
 						: __( 'No image size issues found yet…', 'jetpack-boost' ) }
 				</h1>
 			) : (
-				<div className={ classnames( 'jb-table', { 'jb-loading': isaDataLoading } ) }>
+				<div className={ clsx( 'jb-table', { 'jb-loading': isaDataLoading } ) }>
 					<div className="jb-table-header jb-recommendation-page-grid">
 						<div className="jb-table-header__image">Image</div>
 						<div className="jb-table-header__potential-size">Potential Size</div>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/tabs/tabs.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/tabs/tabs.tsx
index 673ce2f70bfb..777749f9f6e3 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/tabs/tabs.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/tabs/tabs.tsx
@@ -4,7 +4,7 @@ import type { IsaCounts } from '$features/image-size-analysis';
 import { useNavigate, Link } from 'react-router-dom';
 import { getGroupLabel, isaGroupKeys } from '$features/image-size-analysis/lib/isa-groups';
 import styles from './tabs.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 interface TabsProps {
 	currentTab?: IsaCounts;
@@ -50,7 +50,7 @@ const Tabs: React.FC< TabsProps > = ( {
 								// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
 								<li
 									key={ group }
-									className={ classNames( styles.item, {
+									className={ clsx( styles.item, {
 										[ styles.active ]: details.issue_count,
 										[ styles.selected ]: activeGroupKey === group,
 									} ) }
@@ -72,7 +72,7 @@ const Tabs: React.FC< TabsProps > = ( {
 						return (
 							<div
 								key={ group }
-								className={ classNames( styles.tab, {
+								className={ clsx( styles.tab, {
 									[ styles.active ]: activeGroupKey === group,
 								} ) }
 							>
@@ -90,7 +90,7 @@ const Tabs: React.FC< TabsProps > = ( {
 											<span>{ issues }</span>
 										</Link>
 									) : (
-										<div className={ classNames( styles.link, styles.inactive ) }>
+										<div className={ clsx( styles.link, styles.inactive ) }>
 											{ label }
 											<span>{ issues }</span>
 										</div>
diff --git a/projects/plugins/boost/app/assets/src/js/features/notice/manager.tsx b/projects/plugins/boost/app/assets/src/js/features/notice/manager.tsx
index 41fdc0605086..1dcbb3b16d95 100644
--- a/projects/plugins/boost/app/assets/src/js/features/notice/manager.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/notice/manager.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Snackbar } from '@wordpress/components';
 import { MutationNotice, useNotices } from './context';
 import styles from './manager.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type NoticeProps = {
 	notice: MutationNotice;
@@ -31,7 +31,7 @@ const NoticeManager = () => {
 
 	return (
 		Object.keys( notices ).length > 0 && (
-			<div className={ classNames( 'stackable-snackbars', styles.wrapper ) }>
+			<div className={ clsx( 'stackable-snackbars', styles.wrapper ) }>
 				{ Object.values( notices ).map( notice => (
 					<Notice
 						key={ notice.id }
diff --git a/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx b/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx
index 79ec52dc4f76..d70639126873 100644
--- a/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx
@@ -8,7 +8,7 @@ import styles from './meta.module.scss';
 import { useEffect, useState } from 'react';
 import { usePageCache, useClearPageCacheAction } from '$lib/stores/page-cache';
 import { Link } from 'react-router-dom';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useMutationNotice } from '$features/ui';
 import { useDataSyncSubset } from '@automattic/jetpack-react-data-sync-client';
 import ErrorBoundary from '$features/error-boundary/error-boundary';
@@ -203,7 +203,7 @@ const BypassPatterns = ( {
 
 	return (
 		<div
-			className={ classNames( styles.section, {
+			className={ clsx( styles.section, {
 				[ styles[ 'has-error' ] ]: inputInvalid,
 			} ) }
 		>
@@ -217,7 +217,7 @@ const BypassPatterns = ( {
 				onChange={ e => validateInputValue( e.target.value ) }
 				id="jb-cache-exceptions"
 			/>
-			<p className={ classNames( styles.description, styles[ 'error-message' ] ) }>
+			<p className={ clsx( styles.description, styles[ 'error-message' ] ) }>
 				{ __( 'Error: Invalid format', 'jetpack-boost' ) }
 			</p>
 			<div className={ styles.description }>
diff --git a/projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx b/projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx
index 0e4a00078485..2c25e95b77ca 100644
--- a/projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx
@@ -9,7 +9,7 @@ import ContextTooltip from './context-tooltip/context-tooltip';
 import RefreshIcon from '$svg/refresh';
 import PerformanceHistory from '$features/performance-history/performance-history';
 import ErrorNotice from '$features/error-notice/error-notice';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useEffect, useMemo, useCallback } from 'react';
 import { useDebouncedRefreshScore, useSpeedScores } from './lib/hooks';
 
@@ -86,7 +86,7 @@ const SpeedScore = () => {
 				<div id="jp-admin-notices" className="jetpack-boost-jitm-card" />
 				<div
 					data-testid="speed-scores"
-					className={ classNames( styles[ 'speed-scores' ], { loading: status === 'loading' } ) }
+					className={ clsx( styles[ 'speed-scores' ], { loading: status === 'loading' } ) }
 				>
 					{ site.online ? (
 						<div className={ styles.top } data-testid="speed-scores-top">
diff --git a/projects/plugins/boost/app/assets/src/js/layout/card-page/card-page.tsx b/projects/plugins/boost/app/assets/src/js/layout/card-page/card-page.tsx
index 6204317fd7ea..e8ec0e96fb2a 100644
--- a/projects/plugins/boost/app/assets/src/js/layout/card-page/card-page.tsx
+++ b/projects/plugins/boost/app/assets/src/js/layout/card-page/card-page.tsx
@@ -3,7 +3,7 @@ import Header from '$layout/header/header';
 import ActivateLicense from '$features/activate-license/activate-license';
 import BackButton from '$features/ui/back-button/back-button';
 import JetpackLogo from '$svg/jetpack-green';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './card-page.module.scss';
 
 type CardPageProps = {
@@ -34,7 +34,7 @@ const CardPage = ( {
 							{ children }
 						</div>
 
-						<div className={ classNames( styles.cta, 'px-2 my-4' ) }>{ sidebarItem }</div>
+						<div className={ clsx( styles.cta, 'px-2 my-4' ) }>{ sidebarItem }</div>
 					</div>
 					{ footerNote && <footer className={ styles[ 'footer-note' ] }>{ footerNote }</footer> }
 				</div>
diff --git a/projects/plugins/boost/app/assets/src/js/layout/header/header.tsx b/projects/plugins/boost/app/assets/src/js/layout/header/header.tsx
index f4cd6e7ec28d..6d36318c69b4 100644
--- a/projects/plugins/boost/app/assets/src/js/layout/header/header.tsx
+++ b/projects/plugins/boost/app/assets/src/js/layout/header/header.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './header.module.scss';
 import { BackButton } from '$features/ui';
@@ -14,11 +14,11 @@ type HeaderProps = {
 const Header = ( { subPageTitle = '', children }: HeaderProps ) => {
 	const navigate = useNavigate();
 	return (
-		<div className={ classNames( styles.header ) }>
-			<div className={ classNames( 'jb-container', styles.masthead ) }>
-				<div className={ classNames( styles[ 'nav-area' ] ) }>
+		<div className={ clsx( styles.header ) }>
+			<div className={ clsx( 'jb-container', styles.masthead ) }>
+				<div className={ clsx( styles[ 'nav-area' ] ) }>
 					<div
-						className={ classNames( styles.logo ) }
+						className={ clsx( styles.logo ) }
 						onClick={ () => navigate( '/' ) }
 						onKeyDown={ event => {
 							if ( event.key === 'Enter' || event.key === ' ' ) {
@@ -33,10 +33,10 @@ const Header = ( { subPageTitle = '', children }: HeaderProps ) => {
 
 					{ subPageTitle !== '' && (
 						<>
-							<div className={ classNames( styles.chevron ) }>
+							<div className={ clsx( styles.chevron ) }>
 								<ChevronRight />
 							</div>
-							<div className={ classNames( styles.subpage ) }>{ subPageTitle }</div>
+							<div className={ clsx( styles.subpage ) }>{ subPageTitle }</div>
 						</>
 					) }
 				</div>
diff --git a/projects/plugins/boost/app/assets/src/js/layout/settings-page/settings-page.tsx b/projects/plugins/boost/app/assets/src/js/layout/settings-page/settings-page.tsx
index 82080ecc4993..7162492dd54e 100644
--- a/projects/plugins/boost/app/assets/src/js/layout/settings-page/settings-page.tsx
+++ b/projects/plugins/boost/app/assets/src/js/layout/settings-page/settings-page.tsx
@@ -3,7 +3,7 @@ import Footer from '$layout/footer/footer';
 import Header from '$layout/header/header';
 import Support from './support/support';
 import Tips from './tips/tips';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './settings-page.module.scss';
 import { usePremiumFeatures } from '$lib/stores/premium-features';
 import LocalCriticalCssGeneratorProvider from '$features/critical-css/local-generator/local-generator-provider';
@@ -29,7 +29,7 @@ const SettingsPage = ( { children }: SettingsPageProps ) => {
 					</div>
 
 					{ children && (
-						<div className={ classNames( 'jb-section jb-section--main', styles.section ) }>
+						<div className={ clsx( 'jb-section jb-section--main', styles.section ) }>
 							{ children }
 						</div>
 					) }
diff --git a/projects/plugins/boost/app/assets/src/js/pages/cache-debug-log/cache-debug-log.tsx b/projects/plugins/boost/app/assets/src/js/pages/cache-debug-log/cache-debug-log.tsx
index c61ebaca5e12..79dd2f690e95 100644
--- a/projects/plugins/boost/app/assets/src/js/pages/cache-debug-log/cache-debug-log.tsx
+++ b/projects/plugins/boost/app/assets/src/js/pages/cache-debug-log/cache-debug-log.tsx
@@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n';
 import Header from '$layout/header/header';
 import Footer from '$layout/footer/footer';
 import styles from './cache-debug-log.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { CopyToClipboard } from '@automattic/jetpack-components';
 import { useDebugLog } from '$features/page-cache/lib/stores';
 
@@ -12,7 +12,7 @@ const CacheDebugLog = () => {
 	return (
 		<div id="jb-dashboard" className="jb-dashboard jb-dashboard--main">
 			<Header subPageTitle={ __( 'Cache Log Viewer', 'jetpack-boost' ) } />
-			<div className={ classNames( 'jb-section jb-section--main', styles.section ) }>
+			<div className={ clsx( 'jb-section jb-section--main', styles.section ) }>
 				<div className="jb-container">
 					<header className={ styles.header }>
 						<h3>{ __( 'Jetpack Boost Cache Log Viewer', 'jetpack-boost' ) }</h3>
diff --git a/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx b/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
index 1389a9816a24..e8f3969362ed 100644
--- a/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
+++ b/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
@@ -13,7 +13,7 @@ import styles from './critical-css-advanced.module.scss';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Provider } from '$features/critical-css';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type HeadingMetaProps = {
 	dismissedIssues: Provider[];
@@ -163,7 +163,7 @@ const Recommendation = ( { provider, setDismissed }: RecommendationProps ) => {
 			className={ styles[ 'recommendation-animation-wrapper' ] }
 			style={ animationStyles }
 		>
-			<div ref={ ref } className={ classNames( 'panel', styles.panel ) }>
+			<div ref={ ref } className={ clsx( 'panel', styles.panel ) }>
 				<CloseButton onClick={ () => setIsDismissed( true ) } />
 
 				<h4>
diff --git a/projects/plugins/boost/app/assets/src/js/pages/image-size-analysis/image-size-analysis.tsx b/projects/plugins/boost/app/assets/src/js/pages/image-size-analysis/image-size-analysis.tsx
index cf6229fda2c8..dd33a0dc2ba3 100644
--- a/projects/plugins/boost/app/assets/src/js/pages/image-size-analysis/image-size-analysis.tsx
+++ b/projects/plugins/boost/app/assets/src/js/pages/image-size-analysis/image-size-analysis.tsx
@@ -15,7 +15,7 @@ import { isaGroupKeys } from '$features/image-size-analysis/lib/isa-groups';
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
 import styles from './image-size-analysis.module.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type Props = {
 	isImageCdnModuleActive: boolean;
@@ -44,7 +44,7 @@ const ImageSizeAnalysis = ( { page, group, isImageCdnModuleActive }: Props ) =>
 	return (
 		<div id="jb-dashboard" className="jb-dashboard">
 			<Header subPageTitle={ __( 'Image analysis report', 'jetpack-boost' ) } />
-			<div className={ classNames( styles.page, 'jb-section--alt' ) }>
+			<div className={ clsx( styles.page, 'jb-section--alt' ) }>
 				<div className="jb-container">
 					<Hero
 						group={ activeReport }
diff --git a/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx b/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx#2 b/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx#2
new file mode 100644
index 000000000000..9aa70e3ec1f7
--- /dev/null
+++ b/projects/plugins/boost/changelog/fix-37695-classnames_to_clsx#2
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/boost/composer.json b/projects/plugins/boost/composer.json
index 6452a71930ca..8776ee9a4714 100644
--- a/projects/plugins/boost/composer.json
+++ b/projects/plugins/boost/composer.json
@@ -3,7 +3,7 @@
 	"description": "Boost your WordPress site's performance, from the creators of Jetpack",
 	"type": "library",
 	"license": "GPL-2.0-or-later",
-	"version": "3.4.0",
+	"version": "3.4.1-alpha",
 	"authors": [
 		{
 			"name": "Automattic, Inc.",
@@ -73,7 +73,7 @@
 		"platform": {
 			"ext-intl": "0.0.0"
 		},
-		"autoloader-suffix": "b1e77e6231d50e7663f84529b6a3dfda_jetpack_boostⓥ3_4_0",
+		"autoloader-suffix": "b1e77e6231d50e7663f84529b6a3dfda_jetpack_boostⓥ3_4_1_alpha",
 		"allow-plugins": {
 			"roots/wordpress-core-installer": true,
 			"automattic/jetpack-autoloader": true,
diff --git a/projects/plugins/boost/composer.lock b/projects/plugins/boost/composer.lock
index 4859abf4b405..b91cbe357fa1 100644
--- a/projects/plugins/boost/composer.lock
+++ b/projects/plugins/boost/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "c51b51b715e7e5977ed88616cb88404b",
+    "content-hash": "9b4e6edf8fd96a690ca3994338b7210b",
     "packages": [
         {
             "name": "automattic/jetpack-a8c-mc-stats",
diff --git a/projects/plugins/boost/jetpack-boost.php b/projects/plugins/boost/jetpack-boost.php
index 0e6c31fba12a..ad17bf9b20a8 100644
--- a/projects/plugins/boost/jetpack-boost.php
+++ b/projects/plugins/boost/jetpack-boost.php
@@ -9,7 +9,7 @@
  * Plugin Name:       Jetpack Boost
  * Plugin URI:        https://jetpack.com/boost
  * Description:       Boost your WordPress site's performance, from the creators of Jetpack
- * Version: 3.4.0
+ * Version: 3.4.1-alpha
  * Author:            Automattic - Jetpack Site Speed team
  * Author URI:        https://jetpack.com/boost/
  * License:           GPL-2.0+
@@ -29,7 +29,7 @@
 	die;
 }
 
-define( 'JETPACK_BOOST_VERSION', '3.4.0' );
+define( 'JETPACK_BOOST_VERSION', '3.4.1-alpha' );
 define( 'JETPACK_BOOST_SLUG', 'jetpack-boost' );
 
 if ( ! defined( 'JETPACK_BOOST_CLIENT_NAME' ) ) {
diff --git a/projects/plugins/boost/package.json b/projects/plugins/boost/package.json
index ab21501d08df..01b84ae0abc7 100644
--- a/projects/plugins/boost/package.json
+++ b/projects/plugins/boost/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-boost",
-	"version": "3.4.0",
+	"version": "3.4.1-alpha",
 	"description": "Boost your WordPress site's performance, from the creators of Jetpack",
 	"directories": {
 		"test": "tests"
@@ -15,7 +15,7 @@
 		"@types/react-router-dom": "5.3.3",
 		"@wordpress/components": "28.0.0",
 		"@wordpress/element": "6.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"copy-webpack-plugin": "11.0.0",
 		"history": "5.3.0",
 		"jetpack-boost-critical-css-gen": "github:automattic/jetpack-boost-critical-css-gen#release-0.0.11",
diff --git a/projects/plugins/crm/changelog/fix-37695-classnames_to_clsx b/projects/plugins/crm/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/plugins/crm/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/crm/package.json b/projects/plugins/crm/package.json
index cae63fdfb584..01f97f7dfc41 100644
--- a/projects/plugins/crm/package.json
+++ b/projects/plugins/crm/package.json
@@ -29,7 +29,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"prop-types": "15.8.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
diff --git a/projects/plugins/crm/src/js/components/automations-admin/components/step-label/index.tsx b/projects/plugins/crm/src/js/components/automations-admin/components/step-label/index.tsx
index 061e2cb26047..93515f5ddf0c 100644
--- a/projects/plugins/crm/src/js/components/automations-admin/components/step-label/index.tsx
+++ b/projects/plugins/crm/src/js/components/automations-admin/components/step-label/index.tsx
@@ -1,5 +1,5 @@
 import { _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 type StepLabelProps = {
@@ -10,7 +10,7 @@ type StepLabelProps = {
 type LabelType = 'trigger' | 'condition' | 'action';
 
 export const StepLabel: React.FC< StepLabelProps > = ( { type, className } ) => {
-	const wrapperClassNames = classNames( styles.label, styles[ `label--${ type }` ], className );
+	const wrapperClassNames = clsx( styles.label, styles[ `label--${ type }` ], className );
 	let label;
 
 	switch ( type ) {
diff --git a/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table-header/index.tsx b/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table-header/index.tsx
index e4e10dfc29dc..f735d2f254e9 100644
--- a/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table-header/index.tsx
+++ b/projects/plugins/crm/src/js/components/automations-admin/components/workflow-table-header/index.tsx
@@ -1,7 +1,7 @@
 import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { store } from 'crm/state/store';
 import { useCallback } from 'react';
 import { Checkbox } from '../checkbox';
@@ -34,7 +34,7 @@ export const WorkflowTableHeader: React.FC< WorkflowTableHeaderProps > = props =
 
 	return (
 		<th
-			className={ classNames( styles.header, { [ styles.clickable ]: !! onClick } ) }
+			className={ clsx( styles.header, { [ styles.clickable ]: !! onClick } ) }
 			onClick={ onClick }
 		>
 			<div className={ styles.container }>
diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/activity.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/activity.jsx
index 134ffc3169ea..58725b58dbb7 100644
--- a/projects/plugins/jetpack/_inc/client/at-a-glance/activity.jsx
+++ b/projects/plugins/jetpack/_inc/client/at-a-glance/activity.jsx
@@ -1,6 +1,6 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import DashItem from 'components/dash-item';
 import analytics from 'lib/analytics';
@@ -40,7 +40,7 @@ class DashActivity extends Component {
 				<DashItem
 					label={ __( 'Activity', 'jetpack' ) }
 					isModule={ false }
-					className={ classNames( {
+					className={ clsx( {
 						'jp-dash-item__is-inactive': inOfflineMode,
 					} ) }
 					pro={ false }
diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx
index 53c867f3676d..fd78dba8fb04 100644
--- a/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx
@@ -8,7 +8,7 @@ import { BoostScoreBar, getRedirectUrl } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import InfoPopover from 'components/info-popover';
 import PluginInstallSection from 'components/plugin-install-section';
 import SectionHeader from 'components/section-header';
@@ -283,7 +283,7 @@ const DashBoost = ( {
 								</span>
 
 								<p
-									className={ classnames(
+									className={ clsx(
 										'dash-boost-speed-score__score-text',
 										[ 'C', 'D', 'E', 'F' ].includes( speedLetterGrade ) ? 'warning' : ''
 									) }
diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx
index aecd28613de8..5fd5cd947e39 100644
--- a/projects/plugins/jetpack/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx
+++ b/projects/plugins/jetpack/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx
@@ -3,7 +3,7 @@ import { ExternalLink } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import ConnectButton from 'components/connect-button';
 import analytics from 'lib/analytics';
@@ -129,7 +129,7 @@ class DashStatsBottom extends Component {
 											} ) }
 											rel="noopener noreferrer"
 											target="_blank"
-											className={ classNames(
+											className={ clsx(
 												'jp-at-a-glance__stats-ctas-wpcom-stats',
 												this.props.className
 											) }
diff --git a/projects/plugins/jetpack/_inc/client/components/apps-badge/index.jsx b/projects/plugins/jetpack/_inc/client/components/apps-badge/index.jsx
index 57bad7f40067..b0b53b86d8ea 100644
--- a/projects/plugins/jetpack/_inc/client/components/apps-badge/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/apps-badge/index.jsx
@@ -1,7 +1,7 @@
 import { imagePath } from 'constants/urls';
 import { getUserLocale as getLocaleSlug } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { startsWith } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
@@ -112,7 +112,7 @@ class AppsBadge extends PureComponent {
 			this.props;
 		const { imageSrc, hasExternalImageLoaded } = this.state;
 
-		const figureClassNames = classNames( 'apps-badge', {
+		const figureClassNames = clsx( 'apps-badge', {
 			[ `${ storeName }-app-badge` ]: true,
 			'is-external-image': hasExternalImageLoaded,
 		} );
diff --git a/projects/plugins/jetpack/_inc/client/components/apps-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/apps-card/index.jsx
index 8e68fd879498..37544f8daa2c 100644
--- a/projects/plugins/jetpack/_inc/client/components/apps-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/apps-card/index.jsx
@@ -2,7 +2,7 @@ import { imagePath } from 'constants/urls';
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AppsBadge from 'components/apps-badge';
 import Card from 'components/card';
 import analytics from 'lib/analytics';
@@ -74,7 +74,7 @@ class AppsCard extends React.Component {
 	);
 
 	render() {
-		const classes = classNames( this.props.className, 'jp-apps-card' );
+		const classes = clsx( this.props.className, 'jp-apps-card' );
 
 		return (
 			<div className={ classes }>
diff --git a/projects/plugins/jetpack/_inc/client/components/banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
index ed29c15db9b1..4ab21c2da1cc 100644
--- a/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
@@ -1,5 +1,5 @@
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import Gridicon from 'components/gridicon';
@@ -177,7 +177,7 @@ export class Banner extends Component {
 		const isLegacy = isJetpackLegacyPlan( plan );
 		const isProduct = isJetpackProduct( plan );
 
-		const classes = classNames(
+		const classes = clsx(
 			'dops-banner',
 			className,
 			{ 'has-call-to-action': callToAction },
diff --git a/projects/plugins/jetpack/_inc/client/components/button-group/index.jsx b/projects/plugins/jetpack/_inc/client/components/button-group/index.jsx
index aebe785f76b7..5a70c4703fe7 100644
--- a/projects/plugins/jetpack/_inc/client/components/button-group/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/button-group/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 import './style.scss';
@@ -19,7 +19,7 @@ export default class ButtonGroup extends React.Component {
 	};
 
 	render() {
-		const buttonGroupClasses = classNames( 'dops-button-group', this.props.className );
+		const buttonGroupClasses = clsx( 'dops-button-group', this.props.className );
 
 		return <span className={ buttonGroupClasses }>{ this.props.children }</span>;
 	}
diff --git a/projects/plugins/jetpack/_inc/client/components/button/index.jsx b/projects/plugins/jetpack/_inc/client/components/button/index.jsx
index cfc6665a89fa..89721fa94dc5 100644
--- a/projects/plugins/jetpack/_inc/client/components/button/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/button/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -34,7 +34,7 @@ export default class Button extends React.Component {
 		const element = this.props.href ? 'a' : 'button';
 		const { primary, compact, scary, borderless, rna, className, ...props } = this.props;
 
-		const buttonClasses = classNames( {
+		const buttonClasses = clsx( {
 			'dops-button': true,
 			'is-compact': compact,
 			'is-primary': primary,
@@ -43,7 +43,7 @@ export default class Button extends React.Component {
 			'is-rna': rna,
 		} );
 
-		props.className = classNames( className, buttonClasses );
+		props.className = clsx( className, buttonClasses );
 		props.ref = node => ( this.domNode = node );
 
 		return React.createElement( element, props, this.props.children );
diff --git a/projects/plugins/jetpack/_inc/client/components/card/compact.jsx b/projects/plugins/jetpack/_inc/client/components/card/compact.jsx
index c9c039c9cf1b..3401ea1ea5fb 100644
--- a/projects/plugins/jetpack/_inc/client/components/card/compact.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/card/compact.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import { assign } from 'lodash';
 import React from 'react';
@@ -8,7 +8,7 @@ export default class CompactCard extends React.Component {
 
 	render() {
 		const props = assign( {}, this.props, {
-			className: classnames( this.props.className, 'is-compact' ),
+			className: clsx( this.props.className, 'is-compact' ),
 		} );
 
 		return <Card { ...props }>{ this.props.children }</Card>;
diff --git a/projects/plugins/jetpack/_inc/client/components/card/index.jsx b/projects/plugins/jetpack/_inc/client/components/card/index.jsx
index adac248a0578..d97798ac4782 100644
--- a/projects/plugins/jetpack/_inc/client/components/card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/card/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { assign, omit } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -20,7 +20,7 @@ class CardSection extends React.Component {
 	render() {
 		return (
 			<div
-				className={ classnames( 'dops-card-section', this.props.className ) }
+				className={ clsx( 'dops-card-section', this.props.className ) }
 				style={ this.props.style }
 			>
 				{ this.props.title ? this._renderWithTitle() : this.props.children }
@@ -72,7 +72,7 @@ class Card extends React.Component {
 	};
 
 	render() {
-		const className = classnames( 'dops-card', this.props.className, {
+		const className = clsx( 'dops-card', this.props.className, {
 			'is-card-link': !! this.props.href,
 			'is-compact': this.props.compact,
 		} );
diff --git a/projects/plugins/jetpack/_inc/client/components/chart/bar.jsx b/projects/plugins/jetpack/_inc/client/components/chart/bar.jsx
index 1deaa681329d..13d06ec062ab 100644
--- a/projects/plugins/jetpack/_inc/client/components/chart/bar.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/chart/bar.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import Tooltip from 'components/tooltip';
 import PropTypes from 'prop-types';
@@ -42,7 +42,7 @@ export default class ModuleChartBar extends React.Component {
 		};
 
 		sections.push(
-			<div key="spacer" className={ classNames( spacerClassOptions ) } style={ remainStyle } />
+			<div key="spacer" className={ clsx( spacerClassOptions ) } style={ remainStyle } />
 		);
 
 		const valueStyle = {
@@ -168,7 +168,7 @@ export default class ModuleChartBar extends React.Component {
 				onMouseEnter={ this.mouseEnter }
 				onMouseLeave={ this.mouseLeave }
 				aria-label={ this.props.data.tooltipData[ 0 ].label + ' — ' + this.props.data.value + '.' }
-				className={ classNames( barClass ) }
+				className={ clsx( barClass ) }
 				style={ barStyle }
 			>
 				{ this.buildSections() }
diff --git a/projects/plugins/jetpack/_inc/client/components/clipboard-button-input/index.jsx b/projects/plugins/jetpack/_inc/client/components/clipboard-button-input/index.jsx
index 111a9cbcf8c9..cd15eeeac24b 100644
--- a/projects/plugins/jetpack/_inc/client/components/clipboard-button-input/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/clipboard-button-input/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import ClipboardButton from 'components/form/clipboard-button';
 import TextInput from 'components/text-input';
 import { omit } from 'lodash';
@@ -61,7 +61,7 @@ export default class ClipboardButtonInput extends React.Component {
 		);
 
 		return (
-			<span className={ classnames( 'dops-clipboard-button-input', this.props.className ) }>
+			<span className={ clsx( 'dops-clipboard-button-input', this.props.className ) }>
 				<TextInput { ...forwardedProps } type="text" selectOnFocus readOnly />
 				<ClipboardButton
 					text={ this.props.value }
diff --git a/projects/plugins/jetpack/_inc/client/components/dash-item/index.jsx b/projects/plugins/jetpack/_inc/client/components/dash-item/index.jsx
index c5a50fa2c997..e225b767ffbc 100644
--- a/projects/plugins/jetpack/_inc/client/components/dash-item/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/dash-item/index.jsx
@@ -1,6 +1,6 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
@@ -60,7 +60,7 @@ export class DashItem extends Component {
 			toggle,
 			proButton = '';
 
-		const classes = classNames(
+		const classes = clsx(
 			this.props.className,
 			'jp-dash-item',
 			this.props.disabled ? 'jp-dash-item__disabled' : ''
diff --git a/projects/plugins/jetpack/_inc/client/components/dash-section-header/index.jsx b/projects/plugins/jetpack/_inc/client/components/dash-section-header/index.jsx
index 81bcac2123ee..cfaf57f4037a 100644
--- a/projects/plugins/jetpack/_inc/client/components/dash-section-header/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/dash-section-header/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import analytics from 'lib/analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -33,7 +33,7 @@ export class DashSectionHeader extends React.Component {
 		let externalLink;
 		let children;
 
-		const classes = classNames( this.props.className, 'jp-dash-section-header' );
+		const classes = clsx( this.props.className, 'jp-dash-section-header' );
 
 		if ( this.props.externalLink ) {
 			externalLink = (
diff --git a/projects/plugins/jetpack/_inc/client/components/dev-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/dev-card/index.jsx
index e12af49d06bc..4d5eea366bb6 100644
--- a/projects/plugins/jetpack/_inc/client/components/dev-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/dev-card/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import { getPlanClass } from 'lib/plans/constants';
 import { get } from 'lodash';
@@ -128,7 +128,7 @@ export class DevCard extends React.Component {
 			return null;
 		}
 
-		const classes = classNames( this.props.className, 'jp-dev-card' );
+		const classes = clsx( this.props.className, 'jp-dev-card' );
 
 		const planClass = getPlanClass( this.props.sitePlan.product_slug );
 		const rewindState = get( this.props.rewindStatus, [ 'state' ], false );
diff --git a/projects/plugins/jetpack/_inc/client/components/foldable-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/foldable-card/index.jsx
index 9c0d57459c9c..a8e0cb7af40e 100644
--- a/projects/plugins/jetpack/_inc/client/components/foldable-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/foldable-card/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import CompactCard from 'components/card/compact';
 import Gridicon from 'components/gridicon';
@@ -120,11 +120,11 @@ class FoldableCard extends React.Component {
 				onClick: this.getClickAction(),
 				onKeyDown: onKeyDownCallback( this.getClickAction() ),
 			},
-			headerClasses = classNames( 'dops-foldable-card__header', {
+			headerClasses = clsx( 'dops-foldable-card__header', {
 				'is-clickable': !! this.props.clickableHeader,
 				'has-border': !! this.props.summary,
 			} ),
-			headerTextClasses = classNames( 'dops-foldable-card__header-text', {
+			headerTextClasses = clsx( 'dops-foldable-card__header-text', {
 				'is-clickable': !! this.props.clickableHeaderText,
 			} );
 		return (
@@ -149,7 +149,7 @@ class FoldableCard extends React.Component {
 
 	render() {
 		const Container = this.props.compact ? CompactCard : Card,
-			itemSiteClasses = classNames( 'dops-foldable-card', this.props.className, {
+			itemSiteClasses = clsx( 'dops-foldable-card', this.props.className, {
 				'is-disabled': !! this.props.disabled,
 				'is-expanded': !! this.state.expanded,
 				'has-expanded-summary': !! this.props.expandedSummary,
diff --git a/projects/plugins/jetpack/_inc/client/components/footer/index.jsx b/projects/plugins/jetpack/_inc/client/components/footer/index.jsx
index 208c569f8765..cfa76b23261e 100644
--- a/projects/plugins/jetpack/_inc/client/components/footer/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/footer/index.jsx
@@ -1,6 +1,6 @@
 import { getRedirectUrl, JetpackFooter, ThemeProvider } from '@automattic/jetpack-components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import DevCard from 'components/dev-card';
 import analytics from 'lib/analytics';
 import React from 'react';
@@ -76,7 +76,7 @@ export class Footer extends React.Component {
 	};
 
 	render() {
-		const classes = classNames( this.props.className, 'jp-footer' );
+		const classes = clsx( this.props.className, 'jp-footer' );
 		const version = this.props.currentVersion;
 		const menu = [];
 
@@ -140,7 +140,7 @@ export class Footer extends React.Component {
 
 		return (
 			<ThemeProvider>
-				<div className={ classNames( 'jp-footer', classes ) }>
+				<div className={ clsx( 'jp-footer', classes ) }>
 					<div className="jp-footer__container">
 						<JetpackFooter
 							menu={ menu }
diff --git a/projects/plugins/jetpack/_inc/client/components/form-input-validation/index.jsx b/projects/plugins/jetpack/_inc/client/components/form-input-validation/index.jsx
index b6f7b4499295..fc85b749f3ec 100644
--- a/projects/plugins/jetpack/_inc/client/components/form-input-validation/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/form-input-validation/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -17,7 +17,7 @@ export default class FormInputValidation extends React.Component {
 	static defaultProps = { isError: false };
 
 	render() {
-		const classes = classNames( {
+		const classes = clsx( {
 			'form-input-validation': true,
 			'is-warning': this.props.isWarning,
 			'is-error': this.props.isError,
diff --git a/projects/plugins/jetpack/_inc/client/components/form/clipboard-button/index.jsx b/projects/plugins/jetpack/_inc/client/components/form/clipboard-button/index.jsx
index 95b84195ae18..5d19191d1638 100644
--- a/projects/plugins/jetpack/_inc/client/components/form/clipboard-button/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/form/clipboard-button/index.jsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import Clipboard from 'clipboard';
+import clsx from 'clsx';
 import Button from 'components/button';
 import { omit, noop } from 'lodash';
 import PropTypes from 'prop-types';
@@ -42,7 +42,7 @@ export default class ClipboardButton extends React.Component {
 	};
 
 	render() {
-		const classes = classNames( 'dops-clipboard-button', this.props.className );
+		const classes = clsx( 'dops-clipboard-button', this.props.className );
 		return (
 			<Button
 				rna={ this.props.rna }
diff --git a/projects/plugins/jetpack/_inc/client/components/form/form-toggle/compact.jsx b/projects/plugins/jetpack/_inc/client/components/form/form-toggle/compact.jsx
index 3f986b61e597..20cd23736846 100644
--- a/projects/plugins/jetpack/_inc/client/components/form/form-toggle/compact.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/form/form-toggle/compact.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Toggle from 'components/form/form-toggle';
 import { omit } from 'lodash';
 import React from 'react';
@@ -10,7 +10,7 @@ export default class CompactFormToggle extends React.Component {
 		return (
 			<Toggle
 				{ ...omit( this.props, 'className' ) }
-				className={ classNames( this.props.className, 'is-compact' ) }
+				className={ clsx( this.props.className, 'is-compact' ) }
 			>
 				{ this.props.children }
 			</Toggle>
diff --git a/projects/plugins/jetpack/_inc/client/components/form/form-toggle/index.jsx b/projects/plugins/jetpack/_inc/client/components/form/form-toggle/index.jsx
index 51e5e0b9da7a..0f9c970f7b86 100644
--- a/projects/plugins/jetpack/_inc/client/components/form/form-toggle/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/form/form-toggle/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Popover from 'components/popover';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -108,7 +108,7 @@ export default class FormToggle extends Component {
 
 	render() {
 		const id = this.props.id || 'toggle-' + this.id;
-		const toggleClasses = classNames( 'form-toggle', this.props.className, {
+		const toggleClasses = clsx( 'form-toggle', this.props.className, {
 			'is-toggling': this.props.toggling,
 		} );
 
diff --git a/projects/plugins/jetpack/_inc/client/components/forms/index.jsx b/projects/plugins/jetpack/_inc/client/components/forms/index.jsx
index e2bfeb4efd8f..ea5f76afe3f5 100644
--- a/projects/plugins/jetpack/_inc/client/components/forms/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/forms/index.jsx
@@ -1,5 +1,5 @@
 import { _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import SelectDropdown from 'components/select-dropdown';
 import { isEmpty, forOwn, omit } from 'lodash';
@@ -9,7 +9,7 @@ export const FormFieldset = props => {
 	return (
 		<fieldset
 			{ ...omit( props, 'className' ) }
-			className={ classNames( props.className, 'jp-form-fieldset' ) }
+			className={ clsx( props.className, 'jp-form-fieldset' ) }
 		>
 			{ props.children }
 		</fieldset>
@@ -22,11 +22,7 @@ export class FormLabel extends React.Component {
 	render() {
 		const { className, htmlFor, ...otherProps } = this.props;
 		return (
-			<label
-				{ ...otherProps }
-				htmlFor={ htmlFor }
-				className={ classNames( className, 'jp-form-label' ) }
-			>
+			<label { ...otherProps } htmlFor={ htmlFor } className={ clsx( className, 'jp-form-label' ) }>
 				{ this.props.children }
 			</label>
 		);
@@ -40,7 +36,7 @@ export class FormLegend extends React.Component {
 		return (
 			<legend
 				{ ...omit( this.props, 'className' ) }
-				className={ classNames( this.props.className, 'jp-form-legend' ) }
+				className={ clsx( this.props.className, 'jp-form-legend' ) }
 			>
 				{ this.props.children }
 			</legend>
@@ -58,7 +54,7 @@ export class FormCheckbox extends React.Component {
 			<input
 				{ ...otherProps }
 				type="checkbox"
-				className={ classNames( this.props.className, 'jp-form-checkbox' ) }
+				className={ clsx( this.props.className, 'jp-form-checkbox' ) }
 			/>
 		);
 	}
@@ -82,7 +78,7 @@ export class FormTextInput extends React.Component {
 
 	render() {
 		const { className, selectOnFocus } = this.props;
-		const classes = classNames( className, {
+		const classes = clsx( className, {
 			'jp-form-text-input': true,
 			'is-error': this.props.isError,
 			'is-valid': this.props.isValid,
@@ -118,7 +114,7 @@ export class FormTextarea extends React.Component {
 		return (
 			<textarea
 				{ ...omit( this.props, 'className' ) }
-				className={ classNames( this.props.className, 'jp-form-textarea' ) }
+				className={ clsx( this.props.className, 'jp-form-textarea' ) }
 			>
 				{ this.props.children }
 			</textarea>
@@ -136,7 +132,7 @@ export class FormRadio extends React.Component {
 			<input
 				{ ...otherProps }
 				type="radio"
-				className={ classNames( this.props.className, 'jp-form-radio' ) }
+				className={ clsx( this.props.className, 'jp-form-radio' ) }
 			/>
 		);
 	}
@@ -163,7 +159,7 @@ export class FormButton extends React.Component {
 	};
 
 	render() {
-		const buttonClasses = classNames( {
+		const buttonClasses = clsx( {
 			'jp-form-button': true,
 		} );
 
@@ -171,7 +167,7 @@ export class FormButton extends React.Component {
 			<Button
 				{ ...omit( this.props, 'className' ) }
 				variant={ this.props.isPrimary ? 'primary' : undefined }
-				className={ classNames( this.props.className, buttonClasses ) }
+				className={ clsx( this.props.className, buttonClasses ) }
 			>
 				{ isEmpty( this.props.children ) ? this.getDefaultButtonAction() : this.props.children }
 			</Button>
diff --git a/projects/plugins/jetpack/_inc/client/components/gridicon/index.jsx b/projects/plugins/jetpack/_inc/client/components/gridicon/index.jsx
index 8e5fa0c53a40..5d7161415f7d 100644
--- a/projects/plugins/jetpack/_inc/client/components/gridicon/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/gridicon/index.jsx
@@ -7,7 +7,7 @@ DO NOT EDIT THAT FILE! EDIT index-header.jsx and index-footer.jsx instead
 OR if you're looking to change now SVGs get output, you'll need to edit strings in the Gruntfile :)
 !!! */
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import './style.scss';
@@ -137,7 +137,7 @@ class Gridicon extends React.PureComponent {
 			needsOffset = this.needsOffset( icon, this.props.size ),
 			needsOffsetX = this.needsOffsetX( icon, this.props.size ),
 			needsOffsetY = this.needsOffsetY( icon, this.props.size );
-		const iconClass = classNames( 'gridicon', icon, this.props.className, {
+		const iconClass = clsx( 'gridicon', icon, this.props.className, {
 			'needs-offset': needsOffset,
 			'needs-offset-x': needsOffsetX,
 			'needs-offset-y': needsOffsetY,
diff --git a/projects/plugins/jetpack/_inc/client/components/info-popover/index.jsx b/projects/plugins/jetpack/_inc/client/components/info-popover/index.jsx
index abc15c04d7bc..f00ff55c5118 100644
--- a/projects/plugins/jetpack/_inc/client/components/info-popover/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/info-popover/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import Popover from 'components/popover';
 import analytics from 'lib/analytics';
@@ -36,7 +36,7 @@ export default class extends React.Component {
 	};
 
 	render() {
-		const classes = classNames(
+		const classes = clsx(
 			'dops-info-popover',
 			'dops-info-popover-button',
 			{ is_active: this.state.showPopover },
@@ -57,7 +57,7 @@ export default class extends React.Component {
 					ignoreContext={ this.props.ignoreContext }
 					position={ this.props.position }
 					onClose={ this._onClose }
-					className={ classNames( 'dops-info-popover__tooltip', this.props.className ) }
+					className={ clsx( 'dops-info-popover__tooltip', this.props.className ) }
 					rootClassName={ this.props.rootClassName }
 				>
 					{ this.props.children }
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/index.jsx
index 2e6e19549079..3baca9ce948f 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import { noop } from 'lodash';
 import PropTypes from 'prop-types';
@@ -27,7 +27,7 @@ class ModernOverlay extends Component {
 	}
 
 	render() {
-		const classes = classNames( this.props.className, 'jp-dialogue-modern', {
+		const classes = clsx( this.props.className, 'jp-dialogue-modern', {
 			'has-featured-image': !! this.props.svg,
 		} );
 		return (
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/index.jsx
index bb978ca13db8..2bcc4c6e5f09 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/index.jsx
@@ -1,7 +1,7 @@
 import { ProductPrice, TermsOfService } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Gridicon from 'components/gridicon';
 import analytics from 'lib/analytics';
@@ -50,13 +50,13 @@ const JetpackProductCard = props => {
 		} );
 	}, [ productSlug ] );
 
-	const classes = classNames( {
+	const classes = clsx( {
 		'jp-product-card': true,
 		'jp-product-card--has-media': hasMedia,
 		'jp-product-card--has-cta': hasCta,
 	} );
 
-	const buttonClasses = classNames( [
+	const buttonClasses = clsx( [
 		'jp-product-card__checkout',
 		`jp-product-card__checkout--${ priority }`,
 	] );
diff --git a/projects/plugins/jetpack/_inc/client/components/loading-placeholder/index.jsx b/projects/plugins/jetpack/_inc/client/components/loading-placeholder/index.jsx
index 805c50ed6f0a..8a0d5bfa2408 100644
--- a/projects/plugins/jetpack/_inc/client/components/loading-placeholder/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/loading-placeholder/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -6,7 +6,7 @@ export class LoadingPlaceholder extends React.Component {
 	static displayName = 'LoadingPlaceholder';
 
 	render() {
-		const classes = classNames( this.props.className, 'jp-loading-placeholder' );
+		const classes = clsx( this.props.className, 'jp-loading-placeholder' );
 
 		return (
 			<div className={ classes }>
diff --git a/projects/plugins/jetpack/_inc/client/components/modal/index.jsx b/projects/plugins/jetpack/_inc/client/components/modal/index.jsx
index 972cc5baec46..0b839ca1cdf3 100644
--- a/projects/plugins/jetpack/_inc/client/components/modal/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/modal/index.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createFocusTrap } from 'focus-trap';
 import jQuery from 'jquery';
 import { assign, omit } from 'lodash';
@@ -129,7 +129,7 @@ class Modal extends React.Component {
 				onMouseDown={ this.handleMouseDownOverlay }
 			>
 				<div
-					className={ classNames( 'dops-modal', className ) }
+					className={ clsx( 'dops-modal', className ) }
 					style={ combinedStyle }
 					onClick={ this.handleMouseEventModal }
 					onMouseDown={ this.handleMouseEventModal }
diff --git a/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx
index ce9965038abb..5fbbbc2f49fd 100644
--- a/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx
@@ -1,7 +1,7 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { JetpackBanner, connect as bannerConnect } from 'components/jetpack-banner';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -20,7 +20,7 @@ class ModuleOverridenBanner extends JetpackBanner {
 			return null;
 		}
 
-		const classes = classNames( 'module-overridden-banner', {
+		const classes = clsx( 'module-overridden-banner', {
 			'is-compact': this.props.compact,
 		} );
 
diff --git a/projects/plugins/jetpack/_inc/client/components/navigation/index.jsx b/projects/plugins/jetpack/_inc/client/components/navigation/index.jsx
index 3456326986d5..60281ea65201 100644
--- a/projects/plugins/jetpack/_inc/client/components/navigation/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/navigation/index.jsx
@@ -1,7 +1,7 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SectionNav from 'components/section-nav';
 import NavItem from 'components/section-nav/item';
 import NavTabs from 'components/section-nav/tabs';
@@ -127,7 +127,7 @@ export class Navigation extends React.Component {
 								{
 									count: (
 										<span
-											className={ classNames( 'dops-section-nav-tab__update-badge', {
+											className={ clsx( 'dops-section-nav-tab__update-badge', {
 												[ 'is-hidden' ]:
 													this.props.location.pathname.startsWith( '/recommendations' ) ||
 													! this.props.newRecommendationsCount,
diff --git a/projects/plugins/jetpack/_inc/client/components/notice/index.jsx b/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
index df7c68ed9f06..0304af209277 100644
--- a/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import { noop } from 'lodash';
 import PropTypes from 'prop-types';
@@ -93,7 +93,7 @@ export default class SimpleNotice extends React.Component {
 			dismissText,
 			display,
 		} = this.props;
-		const classes = classnames( 'dops-notice', status, className, {
+		const classes = clsx( 'dops-notice', status, className, {
 			'is-compact': isCompact,
 			'is-dismissable': showDismiss,
 			'is-hidden': ! display,
diff --git a/projects/plugins/jetpack/_inc/client/components/popover/index.jsx b/projects/plugins/jetpack/_inc/client/components/popover/index.jsx
index fe8a3e399af1..cb0a8e754123 100644
--- a/projects/plugins/jetpack/_inc/client/components/popover/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/popover/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import uid from 'component-uid';
 import RootChild from 'components/root-child';
 import debugFactory from 'debug';
@@ -375,7 +375,7 @@ class Popover extends Component {
 			return null;
 		}
 
-		const classes = classNames( 'dops-popover', this.props.className, this.state.positionClass );
+		const classes = clsx( 'dops-popover', this.props.className, this.state.positionClass );
 
 		this.debug( 'rendering ...' );
 
diff --git a/projects/plugins/jetpack/_inc/client/components/popover/menu-item.jsx b/projects/plugins/jetpack/_inc/client/components/popover/menu-item.jsx
index a944dbe6895d..7660e8f5d6f0 100644
--- a/projects/plugins/jetpack/_inc/client/components/popover/menu-item.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/popover/menu-item.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { noop } from 'lodash';
 import React from 'react';
 
@@ -13,7 +13,7 @@ class MenuItem extends React.Component {
 		const onMouseOver = this.props.focusOnHover ? this._onMouseOver : null;
 		return (
 			<button
-				className={ classnames( 'dops-popover__menu-item', this.props.className ) }
+				className={ clsx( 'dops-popover__menu-item', this.props.className ) }
 				role="menuitem"
 				disabled={ this.props.disabled }
 				onClick={ this.props.onClick }
diff --git a/projects/plugins/jetpack/_inc/client/components/search/index.jsx b/projects/plugins/jetpack/_inc/client/components/search/index.jsx
index 176b04864af2..7bb3dbe7107a 100644
--- a/projects/plugins/jetpack/_inc/client/components/search/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/search/index.jsx
@@ -1,5 +1,5 @@
 import { isMobile } from '@automattic/viewport';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import analytics from 'lib/analytics';
 import { debounce, noop } from 'lodash';
@@ -310,7 +310,7 @@ class Search extends React.Component {
 			spellCheck: 'false',
 		};
 
-		const searchClass = classNames( this.props.additionalClasses, this.props.dir, {
+		const searchClass = clsx( this.props.additionalClasses, this.props.dir, {
 			'is-expanded-to-container': this.props.fitsContainer,
 			'is-open': isOpenUnpinnedOrQueried,
 			'is-searching': this.props.searching,
@@ -318,8 +318,8 @@ class Search extends React.Component {
 			'dops-search': true,
 		} );
 
-		const fadeDivClass = classNames( 'dops-search__input-fade', this.props.dir );
-		const inputClass = classNames( 'dops-search__input', this.props.dir );
+		const fadeDivClass = clsx( 'dops-search__input-fade', this.props.dir );
+		const inputClass = clsx( 'dops-search__input', this.props.dir );
 
 		return (
 			<div dir={ this.props.dir || null } className={ searchClass } role="search">
diff --git a/projects/plugins/jetpack/_inc/client/components/section-header/index.tsx b/projects/plugins/jetpack/_inc/client/components/section-header/index.tsx
index 3ab481a48410..7ed98cd06461 100644
--- a/projects/plugins/jetpack/_inc/client/components/section-header/index.tsx
+++ b/projects/plugins/jetpack/_inc/client/components/section-header/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import React from 'react';
 
@@ -12,7 +12,7 @@ interface SectionHeaderProps {
 }
 
 const SectionHeader = ( { label, children, className }: SectionHeaderProps ) => {
-	const classes = classNames( className, 'dops-section-header' );
+	const classes = clsx( className, 'dops-section-header' );
 
 	return (
 		<Card compact className={ classes }>
diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx b/projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx
index 8781fc718403..40a5cb45ceeb 100644
--- a/projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx
@@ -1,6 +1,6 @@
 /** @ssr-ready **/
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Search from 'components/search';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
@@ -52,7 +52,7 @@ class SectionNav extends React.Component {
 		let className;
 
 		if ( ! children ) {
-			className = classNames( {
+			className = clsx( {
 				'dops-section-nav': true,
 				'is-empty': true,
 			} );
@@ -66,7 +66,7 @@ class SectionNav extends React.Component {
 			);
 		}
 
-		className = classNames( {
+		className = clsx( {
 			'dops-section-nav': true,
 			'is-open': this.state.mobileOpen,
 			'has-pinned-items': this.hasPinnedSearch || this.props.hasPinnedItems,
diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx b/projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx
index 9121b49d86ba..57879518af8f 100644
--- a/projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx
@@ -1,7 +1,7 @@
 /** @ssr-ready **/
 
 import { ExternalLink } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Count from 'components/count';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -32,7 +32,7 @@ class NavItem extends React.PureComponent {
 			'is-external': this.props.isExternalLink,
 		};
 		itemClasses[ 'dops-section-nav-' + itemClassPrefix ] = true;
-		const itemClassName = classNames( itemClasses );
+		const itemClassName = clsx( itemClasses );
 		let onClick;
 
 		if ( ! this.props.disabled ) {
diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/segmented.jsx b/projects/plugins/jetpack/_inc/client/components/section-nav/segmented.jsx
index d12d751bf611..114f2e199700 100644
--- a/projects/plugins/jetpack/_inc/client/components/section-nav/segmented.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/section-nav/segmented.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SegmentedControl from 'components/segmented-control';
 import ControlItem from 'components/segmented-control/item';
 import PropTypes from 'prop-types';
@@ -25,7 +25,7 @@ class NavSegmented extends React.Component {
 	}
 
 	render() {
-		const segmentedClassName = classNames( {
+		const segmentedClassName = clsx( {
 			'dops-section-nav-group': true,
 			'dops-section-nav__segmented': true,
 			'has-siblings': this.props.hasSiblingControls,
diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx b/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx
index 7f073a9069c3..7561cc6c1500 100644
--- a/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx
@@ -1,7 +1,7 @@
 /** @ssr-ready **/
 
 import { getWindowInnerWidth } from '@automattic/viewport';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SelectDropdown from 'components/select-dropdown';
 import DropdownItem from 'components/select-dropdown/item';
 import { debounce } from 'lodash';
@@ -54,7 +54,7 @@ class NavTabs extends React.Component {
 			return child && React.cloneElement( child, { ref: self.tabRefs[ 'tab-' + index ] } );
 		} );
 
-		const tabsClassName = classNames( {
+		const tabsClassName = clsx( {
 			'dops-section-nav-tabs': true,
 			'is-dropdown': this.state.isDropdown,
 			'is-open': this.state.isDropdownOpen,
diff --git a/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx b/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx
index 2f63ae93b91e..0823472917e9 100644
--- a/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx
@@ -1,6 +1,6 @@
 /** @ssr-ready **/
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Count from 'components/count';
 import DropdownItem from 'components/select-dropdown/item';
 import DropdownLabel from 'components/select-dropdown/label';
@@ -182,7 +182,7 @@ class SelectDropdown extends Component {
 			} );
 		}
 
-		const dropdownClassName = classNames( dropdownClasses );
+		const dropdownClassName = clsx( dropdownClasses );
 		const selectedText = this.props.selectedText
 			? this.props.selectedText
 			: result( find( this.props.options, { value: this.state.selected } ), 'label' );
diff --git a/projects/plugins/jetpack/_inc/client/components/select-dropdown/item.jsx b/projects/plugins/jetpack/_inc/client/components/select-dropdown/item.jsx
index 6415f56724b9..a185eee8d5ad 100644
--- a/projects/plugins/jetpack/_inc/client/components/select-dropdown/item.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/select-dropdown/item.jsx
@@ -1,6 +1,6 @@
 /** @ssr-ready **/
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Count from 'components/count';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -21,7 +21,7 @@ class SelectDropdownItem extends React.Component {
 	itemLinkRef = React.createRef();
 
 	render() {
-		const optionClassName = classNames( this.props.className, {
+		const optionClassName = clsx( this.props.className, {
 			'dops-select-dropdown__item': true,
 			'is-selected': this.props.selected,
 			'is-disabled': this.props.disabled,
diff --git a/projects/plugins/jetpack/_inc/client/components/settings-group/index.jsx b/projects/plugins/jetpack/_inc/client/components/settings-group/index.jsx
index 50efad857c36..0e20fac8bf90 100644
--- a/projects/plugins/jetpack/_inc/client/components/settings-group/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/settings-group/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Card from 'components/card';
 import SupportInfo from 'components/support-info';
 import { includes, noop } from 'lodash';
@@ -54,9 +54,9 @@ export const SettingsGroup = inprops => {
 	}
 
 	return (
-		<div className={ classNames( 'jp-form-settings-group', props.className ) }>
+		<div className={ clsx( 'jp-form-settings-group', props.className ) }>
 			<Card
-				className={ classNames( {
+				className={ clsx( {
 					'jp-form-has-child': props.hasChild,
 					'jp-form-settings-disable': disableInOfflineMode || disableInSiteConnectionMode,
 				} ) }
diff --git a/projects/plugins/jetpack/_inc/client/components/support-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/support-card/index.jsx
index 5aa75ddab1e6..7ebfaeb03310 100644
--- a/projects/plugins/jetpack/_inc/client/components/support-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/support-card/index.jsx
@@ -1,6 +1,6 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import Gridicon from 'components/gridicon';
@@ -71,7 +71,7 @@ class SupportCard extends React.Component {
 			return <div />;
 		}
 
-		const classes = classNames( this.props.className, 'jp-support-card' );
+		const classes = clsx( this.props.className, 'jp-support-card' );
 
 		return (
 			<div className={ classes }>
diff --git a/projects/plugins/jetpack/_inc/client/components/text-input/index.jsx b/projects/plugins/jetpack/_inc/client/components/text-input/index.jsx
index 3ff3c975354c..722bce3a9d45 100644
--- a/projects/plugins/jetpack/_inc/client/components/text-input/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/text-input/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'lodash';
 import React from 'react';
 
@@ -22,7 +22,7 @@ export default class TextInput extends React.Component {
 
 	render() {
 		const { className, selectOnFocus } = this.props;
-		const classes = classNames( className, {
+		const classes = clsx( className, {
 			'dops-text-input': true,
 			'is-error': this.props.isError,
 			'is-valid': this.props.isValid,
diff --git a/projects/plugins/jetpack/_inc/client/components/textarea/index.jsx b/projects/plugins/jetpack/_inc/client/components/textarea/index.jsx
index eef058e60dc0..9fdbf6a54582 100644
--- a/projects/plugins/jetpack/_inc/client/components/textarea/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/textarea/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'lodash';
 import React from 'react';
 
@@ -11,7 +11,7 @@ export default class Textarea extends React.Component {
 		return (
 			<textarea
 				{ ...omit( this.props, 'className' ) }
-				className={ classnames( this.props.className, 'dops-textarea' ) }
+				className={ clsx( this.props.className, 'dops-textarea' ) }
 			>
 				{ this.props.children }
 			</textarea>
diff --git a/projects/plugins/jetpack/_inc/client/components/tooltip/index.jsx b/projects/plugins/jetpack/_inc/client/components/tooltip/index.jsx
index e23cba7a4b55..c2615e0dd481 100644
--- a/projects/plugins/jetpack/_inc/client/components/tooltip/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/tooltip/index.jsx
@@ -1,5 +1,5 @@
 import { isMobile } from '@automattic/viewport';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Popover from 'components/popover';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -35,7 +35,7 @@ class Tooltip extends Component {
 			return null;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			'dops-popover',
 			'dops-tooltip',
 			`is-${ this.props.position }`,
diff --git a/projects/plugins/jetpack/_inc/client/components/tree-dropdown/index.jsx b/projects/plugins/jetpack/_inc/client/components/tree-dropdown/index.jsx
index 29fce35d2178..f77c0e3a002c 100644
--- a/projects/plugins/jetpack/_inc/client/components/tree-dropdown/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/tree-dropdown/index.jsx
@@ -1,6 +1,6 @@
 import './style.scss';
 import { Icon, closeSmall, search } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import TreeSelector from '../tree-selector';
 
@@ -10,7 +10,7 @@ const TreeDropdown = props => {
 	const [ isDropdownVisible, setIsDropdownVisible ] = useState( false );
 	const dropdownRef = useRef( null );
 	const inputRef = useRef( null );
-	const className = classNames(
+	const className = clsx(
 		'tree-dropdown__input-container',
 		isDropdownVisible && 'active',
 		disabled && 'disabled'
@@ -99,12 +99,12 @@ const TreeDropdown = props => {
 			</div>
 			<div className="tree-dropdown__dropdown-container">
 				<div
-					className={ classNames( 'tree-dropdown__dropdown', {
+					className={ clsx( 'tree-dropdown__dropdown', {
 						visible: isDropdownVisible,
 					} ) }
 				>
 					<div
-						className={ classNames( 'tree-dropdown-colapsable', {
+						className={ clsx( 'tree-dropdown-colapsable', {
 							hide: ! isDropdownVisible,
 						} ) }
 					>
diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-card/index.jsx b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-card/index.jsx
index 93f150f1f8cd..6df2bfed4882 100644
--- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-card/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-card/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PlanIcon from 'components/plans/plan-icon/index';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -16,12 +16,12 @@ const MyPlanCard = ( {
 	isPlan,
 	cardClassNames = [],
 } ) => {
-	cardClassNames = classNames( 'my-plan-card', ...cardClassNames, {
+	cardClassNames = clsx( 'my-plan-card', ...cardClassNames, {
 		'is-placeholder': isPlaceholder,
 		'is-plan': isPlan,
 		'has-action-only': action && ! details && ! isPlaceholder,
 	} );
-	const detailsClassNames = classNames( 'my-plan-card__details', { 'is-error': isError } );
+	const detailsClassNames = clsx( 'my-plan-card__details', { 'is-error': isError } );
 
 	return (
 		<div className={ cardClassNames }>
diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js
index 7e2c4ac662e1..c56e33c070b7 100644
--- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js
+++ b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js
@@ -3,7 +3,7 @@ import { ExternalLink } from '@wordpress/components';
 import { isInTheFuture } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import { ProductActivated } from 'components/product-activated';
@@ -573,7 +573,7 @@ class MyPlanHeader extends React.Component {
 						</span>
 					) }
 					<div
-						className={ classnames( 'jp-landing__licensing-actions-item', {
+						className={ clsx( 'jp-landing__licensing-actions-item', {
 							'no-licenses': ! hasDetachedUserLicenses,
 							'no-purchases': ! showPurchasesLink,
 						} ) }
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
index f613901d7146..9f700a9bfe85 100644
--- a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
+++ b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
@@ -1,6 +1,6 @@
 import { ToggleControl, getRedirectUrl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import React, { useCallback, useMemo } from 'react';
@@ -124,7 +124,7 @@ function NewsletterCategories( props ) {
 					/>
 				</div>
 				<div
-					className={ classNames( 'newsletter-colapsable', {
+					className={ clsx( 'newsletter-colapsable', {
 						hide: ! isNewsletterCategoriesEnabled,
 					} ) }
 				>
@@ -137,7 +137,7 @@ function NewsletterCategories( props ) {
 				</div>
 			</SettingsGroup>
 			<div
-				className={ classNames( 'newsletter-card-colapsable', {
+				className={ clsx( 'newsletter-card-colapsable', {
 					hide: ! isNewsletterCategoriesEnabled,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/_inc/client/product-descriptions/product-description/index.jsx b/projects/plugins/jetpack/_inc/client/product-descriptions/product-description/index.jsx
index 7b1a0009206d..a86bd4817594 100644
--- a/projects/plugins/jetpack/_inc/client/product-descriptions/product-description/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/product-descriptions/product-description/index.jsx
@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import JetpackProductCard from 'components/jetpack-product-card';
 import { MoneyBackGuarantee } from 'components/money-back-guarantee';
 import analytics from 'lib/analytics';
@@ -106,7 +106,7 @@ const ProductDescription = props => {
 		} );
 	}, [ product ] );
 
-	const classes = classNames( {
+	const classes = clsx( {
 		'jp-product-description': true,
 		'jp-product-description--split': !! relatedPlan,
 	} );
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/discount-badge/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/discount-badge/index.jsx
index 699b972584ec..8365604de9da 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/discount-badge/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/discount-badge/index.jsx
@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 import './style.scss';
@@ -10,7 +10,7 @@ const DiscountBadge = ( { className, discount, suffix } ) => {
 	}
 
 	return (
-		<div className={ classNames( 'jp-recommendations-discount-badge', className ) }>
+		<div className={ clsx( 'jp-recommendations-discount-badge', className ) }>
 			{ /* eslint-disable */ }
 			{ sprintf(
 				// translators: %d is the percentage value, %% the percentage symbol
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/index.jsx
index 6dd34ed0e89c..5a2c81d68fef 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/index.jsx
@@ -1,6 +1,6 @@
 import { ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Gridicon from 'components/gridicon';
 import InstallButton from 'components/install-button';
@@ -87,7 +87,7 @@ const FeatureSummaryComponent = props => {
 
 	return (
 		<div
-			className={ classNames( 'jp-recommendations-feature-summary', {
+			className={ clsx( 'jp-recommendations-feature-summary', {
 				'is-feature-enabled': props.isFeatureActive,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/primary.tsx b/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/primary.tsx
index e3f7f83b4dc7..1f2c2db9f93f 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/primary.tsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/feature-summary/primary.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import analytics from 'lib/analytics';
 import { useCallback } from 'react';
@@ -21,7 +21,7 @@ const SummaryTextLink = ( { href, label, isHidden, onClick }: SummaryTextLinkPro
 			target="_blank"
 			href={ href }
 			onClick={ onClick }
-			className={ classNames( 'jp-summary-text-link', { [ 'is-hidden' ]: isHidden } ) }
+			className={ clsx( 'jp-summary-text-link', { [ 'is-hidden' ]: isHidden } ) }
 		>
 			{ label }
 			<span className="jp-summary-text-link__icon dashicons dashicons-arrow-right-alt2"></span>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/product-card-upsell/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/product-card-upsell/index.jsx
index 87bff7055200..e0c1c4d95cbf 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/product-card-upsell/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/product-card-upsell/index.jsx
@@ -1,7 +1,7 @@
 import { getCurrencyObject } from '@automattic/format-currency';
 import { isFirstMonthTrial } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import PropTypes from 'prop-types';
 import React, { useEffect, useMemo } from 'react';
@@ -93,7 +93,7 @@ const ProductCardUpsellComponent = ( {
 
 	return (
 		<div
-			className={ classNames( 'jp-recommendations-product-card-upsell', {
+			className={ clsx( 'jp-recommendations-product-card-upsell', {
 				'with-header': !! header,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/prompts/checkbox-answer/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/prompts/checkbox-answer/index.jsx
index d5a2a950454b..f37cbe9d89d5 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/prompts/checkbox-answer/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/prompts/checkbox-answer/index.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import InfoPopover from 'components/info-popover';
 import analytics from 'lib/analytics';
 import PropTypes from 'prop-types';
@@ -22,10 +22,7 @@ const CheckboxAnswerComponent = ( { answerKey, checked, info, title, updateCheck
 
 	return (
 		<div className="jp-checkbox-answer__container">
-			<label
-				htmlFor={ answerKey }
-				className={ classNames( 'jp-checkbox-answer__title', { checked } ) }
-			>
+			<label htmlFor={ answerKey } className={ clsx( 'jp-checkbox-answer__title', { checked } ) }>
 				<input
 					id={ answerKey }
 					className="jp-checkbox-answer__checkbox-input"
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
index 16aae84d2e99..1e05aae18542 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/prompts/prompt-layout/index.jsx
@@ -1,7 +1,7 @@
 import { imagePath } from 'constants/urls';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -28,10 +28,7 @@ const SideContent = ( { isLoading, illustration, illustrationClassName, sidebarC
 				<picture className="jp-recommendations-question__illustration-picture">
 					<source type="image/webp" srcSet={ `${ imgBase }.webp 1x, ${ imgBase }-2x.webp 2x` } />
 					<img
-						className={ classNames(
-							'jp-recommendations-question__illustration',
-							illustrationClassName
-						) }
+						className={ clsx( 'jp-recommendations-question__illustration', illustrationClassName ) }
 						srcSet={ `${ imgBase }-2x.png 2x` }
 						src={ `${ imgBase }.png` }
 						alt=""
@@ -50,7 +47,7 @@ const PromptLayoutComponent = props => {
 
 	return (
 		<div
-			className={ classNames( 'jp-recommendations-question__main', {
+			className={ clsx( 'jp-recommendations-question__main', {
 				'jp-recommendations-question__main--with-sidebar': !! illustration || !! sidebarCard,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/mobile-app/index.tsx b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/mobile-app/index.tsx
index e8be87151a2b..19e65ab596e0 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/mobile-app/index.tsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/mobile-app/index.tsx
@@ -3,7 +3,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AppsBadge from 'components/apps-badge';
 import analytics from 'lib/analytics';
 import detectMobileDevice from 'lib/device-detector';
@@ -168,7 +168,7 @@ const MobileApp: FC< Props > = ( { slug, underside = false } ) => {
 				alt=""
 			/>
 			<img
-				className={ classNames( 'jp-recommendation-sidebar-mobile__jetpack-icon', {
+				className={ clsx( 'jp-recommendation-sidebar-mobile__jetpack-icon', {
 					underside: underside,
 				} ) }
 				src={ imagePath + '/recommendations/jetpack-icon.svg' }
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/recommended-header/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/recommended-header/index.jsx
index 26bf0f450896..f7639d6ffad1 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/recommended-header/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/recommended-header/index.jsx
@@ -1,12 +1,12 @@
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Gridicon from 'components/gridicon';
 import React from 'react';
 
 import './style.scss';
 
 const RecommendedHeader = ( { className } ) => (
-	<div className={ classNames( 'jp-recommendations-recommended-header', className ) }>
+	<div className={ clsx( 'jp-recommendations-recommended-header', className ) }>
 		<Gridicon size={ 18 } icon="star" />
 		{ __( 'Recommended premium product', 'jetpack' ) }
 	</div>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/sidebar-card/index.tsx b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/sidebar-card/index.tsx
index ce9f70d985e4..786601c697a8 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/sidebar-card/index.tsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/sidebar-card/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 import './style.scss';
@@ -15,7 +15,7 @@ const SidebarCard: React.FC< Props > = props => {
 
 	return (
 		<div
-			className={ classNames( 'jp-recommendations-sidebar-card', className, {
+			className={ clsx( 'jp-recommendations-sidebar-card', className, {
 				'with-illustration': !! illustrationPath,
 			} ) }
 		>
@@ -29,7 +29,7 @@ const SidebarCard: React.FC< Props > = props => {
 				header
 			) }
 			<div
-				className={ classNames( 'jp-recommendations-sidebar-card__content', {
+				className={ clsx( 'jp-recommendations-sidebar-card__content', {
 					'is-compact': compact,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/_inc/client/recommendations/summary/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/summary/index.jsx
index afa7404ee096..42ed080c11e6 100644
--- a/projects/plugins/jetpack/_inc/client/recommendations/summary/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/recommendations/summary/index.jsx
@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { JetpackLoadingIcon } from 'components/jetpack-loading-icon';
 import { isEmpty } from 'lodash';
 import React, { useEffect } from 'react';
@@ -188,14 +188,14 @@ const SummaryComponent = props => {
 		<div className="jp-recommendations-summary">
 			<div className="jp-recommendations-summary__main">
 				<div
-					className={ classNames( 'jp-recommendations-summary__content', {
+					className={ clsx( 'jp-recommendations-summary__content', {
 						isLoading: isFetchingMainData,
 					} ) }
 				>
 					{ mainContent }
 				</div>
 				<div
-					className={ classNames( 'jp-recommendations-summary__sidebar', {
+					className={ clsx( 'jp-recommendations-summary__sidebar', {
 						isLoading: isFetchingSidebarData,
 					} ) }
 				>
@@ -204,7 +204,7 @@ const SummaryComponent = props => {
 			</div>
 			{ undersideCards && (
 				<div
-					className={ classNames( 'jp-recommendations-summary__underside', {
+					className={ clsx( 'jp-recommendations-summary__underside', {
 						isLoading: isFetchingBottomSectionData,
 					} ) }
 				>
diff --git a/projects/plugins/jetpack/_inc/client/traffic/seo.jsx b/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
index 6be285e13e01..67f01370ec48 100644
--- a/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
+++ b/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
@@ -5,7 +5,7 @@ import {
 	GoogleSearchPreview,
 } from '@automattic/social-previews';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import FoldableCard from 'components/foldable-card';
 import { FormLabel, FormTextarea } from 'components/forms';
@@ -145,7 +145,7 @@ export const SEO = withModuleSettingsFormHelpers(
 			}, [] );
 			const hasConflictingSeoPlugin = conflictingSeoPlugins.length > 0;
 
-			const frontPageMetaCharCountClasses = classNames( {
+			const frontPageMetaCharCountClasses = clsx( {
 				'jp-seo-front-page-description-count': true,
 				'jp-seo-front-page-description-count-max':
 					frontPageMetaDescription.length >= this.constants.frontPageMetaMaxLength,
diff --git a/projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx b/projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx
index 549d665c74b6..0cc0bfb041ae 100644
--- a/projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx
+++ b/projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx
@@ -2,7 +2,7 @@ import { imagePath, JETPACK_STATS_OPT_OUT_SURVEY } from 'constants/urls';
 import { getRedirectUrl, ToggleControl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from 'components/button';
 import Card from 'components/card';
 import FoldableCard from 'components/foldable-card';
@@ -246,7 +246,7 @@ class SiteStatsComponent extends React.Component {
 						'jetpack'
 					) }
 					clickableHeader={ true }
-					className={ classNames( 'jp-foldable-settings-standalone', {
+					className={ clsx( 'jp-foldable-settings-standalone', {
 						'jp-foldable-settings-disable': unavailableInOfflineMode,
 					} ) }
 				>
diff --git a/projects/plugins/jetpack/_inc/client/traffic/sitemaps.jsx b/projects/plugins/jetpack/_inc/client/traffic/sitemaps.jsx
index 72468ae88bdc..a7477fb64528 100644
--- a/projects/plugins/jetpack/_inc/client/traffic/sitemaps.jsx
+++ b/projects/plugins/jetpack/_inc/client/traffic/sitemaps.jsx
@@ -2,7 +2,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ClipboardButtonInput from 'components/clipboard-button-input';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
@@ -40,7 +40,7 @@ export class Sitemaps extends React.Component {
 			sitemap_url = get( sitemaps, [ 'extra', 'sitemap_url' ], '' ),
 			news_sitemap_url = get( sitemaps, [ 'extra', 'news_sitemap_url' ], '' );
 
-		const searchEngineVisibilityClasses = classNames( {
+		const searchEngineVisibilityClasses = clsx( {
 			'jp-form-setting-explanation': true,
 			'is-warning':
 				! this.props.isSiteVisibleToSearchEngines && this.props.getOptionValue( 'sitemaps' ),
diff --git a/projects/plugins/jetpack/changelog/fix-37695-classnames_to_clsx b/projects/plugins/jetpack/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..336b22811bd3
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
index fb547ef273fa..74de34c46cb6 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/edit.js
@@ -14,7 +14,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { RawHTML, useState, useCallback, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -287,7 +287,7 @@ export default function AIAssistantEdit( { attributes, setAttributes, clientId,
 
 	const blockProps = useBlockProps( {
 		ref: blockRef,
-		className: classNames( { 'is-waiting-response': isWaitingResponse } ),
+		className: clsx( { 'is-waiting-response': isWaitingResponse } ),
 	} );
 
 	const promptPlaceholder = __( 'Ask Jetpack AI…', 'jetpack' );
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx
index 39f3c084b2ac..6ad31b73ee74 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx
@@ -18,7 +18,7 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -260,7 +260,7 @@ export default function AiAssistantBar( {
 			>
 				<div
 					ref={ wrapperRef }
-					className={ classNames( 'jetpack-ai-assistant__bar', {
+					className={ clsx( 'jetpack-ai-assistant__bar', {
 						[ className ]: className,
 						'is-fixed': isAssistantBarFixed,
 						'is-mobile-mode': isMobileMode,
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
index a071b398117c..335cdc929629 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
@@ -5,7 +5,7 @@ import { ExtensionAIControl } from '@automattic/jetpack-ai-client';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /*
  * Internal dependencies
@@ -35,7 +35,7 @@ export type AiAssistantInputProps = {
 	tryAgain?: () => void;
 };
 
-const defaultClassNames = classNames(
+const defaultClassNames = clsx(
 	'jetpack-ai-assistant-extension-ai-input',
 	'wp-block' // Some themes, like Twenty Twenty, use this class to set the element's side margins.
 );
@@ -153,7 +153,7 @@ export default function AiAssistantInput( {
 
 	return (
 		<ExtensionAIControl
-			className={ classNames( defaultClassNames, className ) }
+			className={ clsx( defaultClassNames, className ) }
 			placeholder={ placeholder }
 			disabled={ disabled }
 			value={ value }
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx
index 40b862b7a119..3ebc77d02c83 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx
@@ -11,7 +11,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import debugFactory from 'debug';
 import React from 'react';
 /*
@@ -92,7 +92,7 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 		// The block's id to find it in the DOM for the positioning adjustments
 		// The classname is used by nested blocks to determine which block's toolbar to display when the input is focused.
 		const { id, className } = useBlockProps( {
-			className: classNames( { [ blockName?.replace?.( '/', '-' ) ]: true } ),
+			className: clsx( { [ blockName?.replace?.( '/', '-' ) ]: true } ),
 		} );
 
 		// Jetpack AI Assistant feature functions.
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js
index 9bfee378fc99..d67778f00ce9 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js
@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import './editor.scss';
 import { usePromptTags } from './use-prompt-tags';
 
@@ -157,7 +157,7 @@ function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttrib
 			</InspectorControls>
 		</>
 	);
-	const labelClassnames = classnames( [ 'jetpack-blogging-prompt__label' ], {
+	const labelClassnames = clsx( [ 'jetpack-blogging-prompt__label' ], {
 		'is-bloganuary-icon': isBloganuary,
 	} );
 
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js
index 537edda74ce5..b2cc3e63c260 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js
@@ -1,5 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 function BloggingPromptSave( { attributes } ) {
 	const {
@@ -16,7 +16,7 @@ function BloggingPromptSave( { attributes } ) {
 
 	const blockProps = useBlockProps.save( { className: 'jetpack-blogging-prompt' } );
 
-	const labelClassnames = classnames( [ 'jetpack-blogging-prompt__label' ], {
+	const labelClassnames = clsx( [ 'jetpack-blogging-prompt__label' ], {
 		'is-bloganuary-icon': isBloganuary,
 	} );
 
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js b/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js
index e3ac998e76b3..71ba97eb4a41 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js
@@ -4,7 +4,7 @@ import { PanelBody, ToggleControl, FlexBlock, Spinner, Notice } from '@wordpress
 import { dispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import BlogrollAppender from './components/blogroll-appender';
 import useRecommendations from './use-recommendations';
 import { useSiteRecommendationSync } from './use-site-recommendations';
@@ -49,7 +49,7 @@ export function BlogRollEdit( { className, attributes, setAttributes, clientId }
 	}, [ recommendations, load_placeholders, setAttributes, clientId, replaceInnerBlocks ] );
 
 	const blockProps = useBlockProps( {
-		className: classNames( className, {
+		className: clsx( className, {
 			'hide-avatar': ! show_avatar,
 			'hide-description': ! show_description,
 		} ),
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/save.js b/projects/plugins/jetpack/extensions/blocks/blogroll/save.js
index b93b3d9b71e6..3ee4fb15dd17 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogroll/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/save.js
@@ -1,9 +1,9 @@
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export function BlogRollSave( { attributes: { show_avatar, show_description }, className } ) {
 	const blockProps = useBlockProps.save( {
-		className: classNames( className, {
+		className: clsx( className, {
 			'hide-avatar': ! show_avatar,
 			'hide-description': ! show_description,
 		} ),
diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js b/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js
index 3bbe9eae1f13..f10e95a45afe 100644
--- a/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js
@@ -1,7 +1,7 @@
 import { Button, TextControl, ToggleControl } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty } from 'lodash';
 
 const defaultOpen = '09:00';
@@ -14,10 +14,10 @@ class DayEdit extends Component {
 		return (
 			<Fragment key={ intervalIndex }>
 				<div className="business-hours__row">
-					<div className={ classNames( day.name, 'business-hours__day' ) }>
+					<div className={ clsx( day.name, 'business-hours__day' ) }>
 						{ intervalIndex === 0 && this.renderDayToggle() }
 					</div>
-					<div className={ classNames( day.name, 'business-hours__hours' ) }>
+					<div className={ clsx( day.name, 'business-hours__hours' ) }>
 						<TextControl
 							type="time"
 							label={ __( 'Opening', 'jetpack' ) }
@@ -55,8 +55,8 @@ class DayEdit extends Component {
 				</div>
 				{ intervalIndex === day.hours.length - 1 && (
 					<div className="business-hours__row business-hours-row__add">
-						<div className={ classNames( day.name, 'business-hours__day' ) }>&nbsp;</div>
-						<div className={ classNames( day.name, 'business-hours__hours' ) }>
+						<div className={ clsx( day.name, 'business-hours__day' ) }>&nbsp;</div>
+						<div className={ clsx( day.name, 'business-hours__hours' ) }>
 							<Button
 								variant="link"
 								label={ __( 'Add Hours', 'jetpack' ) }
@@ -180,10 +180,8 @@ class DayEdit extends Component {
 		const { day } = this.props;
 		return (
 			<div className="business-hours__row business-hours-row__closed">
-				<div className={ classNames( day.name, 'business-hours__day' ) }>
-					{ this.renderDayToggle() }
-				</div>
-				<div className={ classNames( day.name, 'closed', 'business-hours__hours' ) }>&nbsp;</div>
+				<div className={ clsx( day.name, 'business-hours__day' ) }>{ this.renderDayToggle() }</div>
+				<div className={ clsx( day.name, 'closed', 'business-hours__hours' ) }>&nbsp;</div>
 				<div className="business-hours__remove">&nbsp;</div>
 			</div>
 		);
diff --git a/projects/plugins/jetpack/extensions/blocks/button/edit.js b/projects/plugins/jetpack/extensions/blocks/button/edit.js
index b2b146646402..1f9650822252 100644
--- a/projects/plugins/jetpack/extensions/blocks/button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/button/edit.js
@@ -6,7 +6,7 @@ import {
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import useWidth from '../../shared/use-width';
 import applyFallbackStyles from './apply-fallback-styles';
 import { IS_GRADIENT_AVAILABLE } from './constants';
@@ -36,9 +36,9 @@ export function ButtonEdit( props ) {
 		: {};
 	/* eslint-enable react-hooks/rules-of-hooks */
 
-	const blockClasses = classnames( 'wp-block-button', className );
+	const blockClasses = clsx( 'wp-block-button', className );
 
-	const buttonClasses = classnames( 'wp-block-button__link', {
+	const buttonClasses = clsx( 'wp-block-button__link', {
 		'has-background': backgroundColor.color || gradientValue,
 		[ backgroundColor.class ]: ! gradientValue && backgroundColor.class,
 		'has-text-color': textColor.color,
diff --git a/projects/plugins/jetpack/extensions/blocks/button/save.js b/projects/plugins/jetpack/extensions/blocks/button/save.js
index 1cd4f3e0ee4e..8e93191fced6 100644
--- a/projects/plugins/jetpack/extensions/blocks/button/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/button/save.js
@@ -3,7 +3,7 @@ import {
 	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
 	RichText,
 } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { IS_GRADIENT_AVAILABLE } from './constants';
 
 export default function ButtonSave( { attributes, blockName, uniqueId } ) {
@@ -31,11 +31,11 @@ export default function ButtonSave( { attributes, blockName, uniqueId } ) {
 	const gradientClass = IS_GRADIENT_AVAILABLE ? getGradientClass( gradient ) : undefined;
 	const textClass = getColorClassName( 'color', textColor );
 
-	const blockClasses = classnames( 'wp-block-button', 'jetpack-submit-button', className, {
+	const blockClasses = clsx( 'wp-block-button', 'jetpack-submit-button', className, {
 		[ `wp-block-jetpack-${ blockName }` ]: blockName,
 	} );
 
-	const buttonClasses = classnames( 'wp-block-button__link', {
+	const buttonClasses = clsx( 'wp-block-button__link', {
 		'has-text-color': textColor || customTextColor,
 		[ textClass ]: textClass,
 		'has-background': backgroundColor || gradient || customBackgroundColor || customGradient,
diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/edit.js b/projects/plugins/jetpack/extensions/blocks/calendly/edit.js
index 319a31837388..a3bdd861fbee 100644
--- a/projects/plugins/jetpack/extensions/blocks/calendly/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/calendly/edit.js
@@ -5,7 +5,7 @@ import { Button, ExternalLink, Placeholder, Spinner, withNotices } from '@wordpr
 import { select, dispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import testEmbedUrl from '../../shared/test-embed-url';
@@ -199,7 +199,7 @@ export function CalendlyEdit( props ) {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				[ `calendly-style-${ style }` ]: url && ! isEditingUrl,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.js b/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.js
index b2439e8941ef..e44e65a46581 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/address/edit.js
@@ -2,7 +2,7 @@ import { PlainText } from '@wordpress/block-editor';
 import { ToggleControl } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import save from './save';
 
 class AddressEdit extends Component {
@@ -38,7 +38,7 @@ class AddressEdit extends Component {
 		const hasContent = [ address, addressLine2, addressLine3, city, region, postal, country ].some(
 			value => value !== ''
 		);
-		const classNames = classnames( {
+		const classNames = clsx( {
 			'jetpack-address-block': true,
 			'is-selected': isSelected,
 		} );
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/edit.js b/projects/plugins/jetpack/extensions/blocks/contact-info/edit.js
index 13f8789c506f..a2a76d0324f0 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/edit.js
@@ -1,5 +1,5 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const ALLOWED_BLOCKS = [
 	'jetpack/markdown',
@@ -34,7 +34,7 @@ const ContactInfoEdit = props => {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classnames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				'jetpack-contact-info-block': true,
 				'is-selected': isSelected,
 			} ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/amount.js b/projects/plugins/jetpack/extensions/blocks/donations/amount.js
index d06b6cb8cf78..800580d34732 100644
--- a/projects/plugins/jetpack/extensions/blocks/donations/amount.js
+++ b/projects/plugins/jetpack/extensions/blocks/donations/amount.js
@@ -1,7 +1,7 @@
 import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
 import { RichText } from '@wordpress/block-editor';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { minimumTransactionAmountForCurrency, parseAmount } from '../../shared/currencies';
 
 const Amount = ( {
@@ -85,7 +85,7 @@ const Amount = ( {
 
 	return (
 		<div
-			className={ classnames( 'donations__amount', className, {
+			className={ clsx( 'donations__amount', className, {
 				'has-focus': isFocused,
 				'has-error': isInvalid,
 			} ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/tabs.js b/projects/plugins/jetpack/extensions/blocks/donations/tabs.js
index 4ea5f80e7248..6afdeab1247e 100644
--- a/projects/plugins/jetpack/extensions/blocks/donations/tabs.js
+++ b/projects/plugins/jetpack/extensions/blocks/donations/tabs.js
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Controls from './controls';
 import Tab from './tab';
 
@@ -60,7 +60,7 @@ const Tabs = props => {
 							<div
 								role="button"
 								tabIndex={ 0 }
-								className={ classNames( 'donations__nav-item', {
+								className={ clsx( 'donations__nav-item', {
 									'is-active': isTabActive( interval ),
 								} ) }
 								onClick={ () => setActiveTab( interval ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/eventbrite/deprecated/v1/index.js
index 1cea1f857924..52bcebe6f543 100644
--- a/projects/plugins/jetpack/extensions/blocks/eventbrite/deprecated/v1/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/eventbrite/deprecated/v1/index.js
@@ -1,7 +1,7 @@
 import { RichText, getColorClassName } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty, omit, pick, some } from 'lodash';
 
 /**
@@ -48,7 +48,7 @@ function saveButton( attributes ) {
 	const textClass = getColorClassName( 'color', textColor );
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
 
-	const buttonClasses = classnames( 'wp-block-button__link', {
+	const buttonClasses = clsx( 'wp-block-button__link', {
 		'has-text-color': textColor || customTextColor,
 		[ textClass ]: textClass,
 		'has-background': backgroundColor || customBackgroundColor,
diff --git a/projects/plugins/jetpack/extensions/blocks/gif/edit.js b/projects/plugins/jetpack/extensions/blocks/gif/edit.js
index ac7f8b8003d3..06e522325e4d 100644
--- a/projects/plugins/jetpack/extensions/blocks/gif/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/gif/edit.js
@@ -3,7 +3,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { Placeholder } from '@wordpress/components';
 import { createRef, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import metadata from './block.json';
 import SearchForm from './components/search-form';
 import Controls from './controls';
@@ -48,7 +48,7 @@ function GifEdit( { attributes, setAttributes, isSelected } ) {
 	const onSelectThumbnail = thumbnail => setAttributes( getSelectedGiphyAttributes( thumbnail ) );
 
 	return (
-		<div { ...blockProps } className={ classNames( blockProps.className, `align${ align }` ) }>
+		<div { ...blockProps } className={ clsx( blockProps.className, `align${ align }` ) }>
 			<Controls />
 			{ ! giphyUrl ? (
 				<Placeholder
diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/embed-placeholder.js b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/embed-placeholder.js
index f92a58fe87eb..2b1e37d4e65c 100644
--- a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/embed-placeholder.js
+++ b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/embed-placeholder.js
@@ -1,6 +1,6 @@
 import { Button, Placeholder } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const EmbedPlaceHolder = ( {
 	className,
@@ -14,7 +14,7 @@ const EmbedPlaceHolder = ( {
 	updateUrl,
 } ) => {
 	return (
-		<div className={ classnames( 'wp-block-jetpack-google-docs-embed-editmode', className ) }>
+		<div className={ clsx( 'wp-block-jetpack-google-docs-embed-editmode', className ) }>
 			<Placeholder icon={ icon } label={ label } instructions={ instructions } notices={ notices }>
 				<form onSubmit={ onSubmit }>
 					<input
diff --git a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/edit.js b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/edit.js
index 74a8e635471a..4818e10e3edd 100644
--- a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/edit.js
@@ -3,7 +3,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Button, Placeholder, RadioControl, Spinner, withNotices } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { find, isEmpty, isEqual, map, times } from 'lodash';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import metadata from './block.json';
@@ -57,8 +57,8 @@ const InstagramGalleryEdit = props => {
 	const showLoadingSpinner = accessToken && isLoadingGallery && isEmpty( images );
 	const showGallery = ! showPlaceholder && ! showLoadingSpinner;
 
-	const blockClasses = classnames( blockProps.className, { [ `align${ align }` ]: align } );
-	const gridClasses = classnames(
+	const blockClasses = clsx( blockProps.className, { [ `align${ align }` ]: align } );
+	const gridClasses = clsx(
 		'wp-block-jetpack-instagram-gallery__grid',
 		`wp-block-jetpack-instagram-gallery__grid-columns-${ columns }`,
 		{ 'is-stacked-on-mobile': isStackedOnMobile }
@@ -192,7 +192,7 @@ const InstagramGalleryEdit = props => {
 				<div className={ gridClasses } style={ gridStyle }>
 					{ times( isSelected ? count : unselectedCount, index => (
 						<span
-							className={ classnames( 'wp-block-jetpack-instagram-gallery__grid-post' ) }
+							className={ clsx( 'wp-block-jetpack-instagram-gallery__grid-post' ) }
 							key={ index }
 							style={ photoStyle }
 						>
diff --git a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js
index a00d9319584d..c32887084259 100644
--- a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js
+++ b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function ImageTransition( { src, alt, spacing } ) {
 	const [ loaded, setLoaded ] = useState( false );
@@ -32,7 +32,7 @@ export default function ImageTransition( { src, alt, spacing } ) {
 	// Negative margin used as `padding: 0 !important` prevents redraw in Safari.
 	const containerOffset = spacing * -1;
 
-	const containerClasses = classnames( 'wp-block-jetpack-instagram-gallery__placeholder', {
+	const containerClasses = clsx( 'wp-block-jetpack-instagram-gallery__placeholder', {
 		'is-loaded': loaded,
 	} );
 	const containerStyles = loaded
@@ -41,7 +41,7 @@ export default function ImageTransition( { src, alt, spacing } ) {
 				margin: containerOffset,
 				height: containerHeight,
 		  };
-	const imageClasses = classnames( { 'is-loaded': loaded } );
+	const imageClasses = clsx( { 'is-loaded': loaded } );
 
 	return (
 		<span style={ containerStyles } className={ containerClasses }>
diff --git a/projects/plugins/jetpack/extensions/blocks/mailchimp/body.js b/projects/plugins/jetpack/extensions/blocks/mailchimp/body.js
index 0d42b626655e..01d865a49a53 100644
--- a/projects/plugins/jetpack/extensions/blocks/mailchimp/body.js
+++ b/projects/plugins/jetpack/extensions/blocks/mailchimp/body.js
@@ -1,7 +1,7 @@
 import { InnerBlocks, RichText } from '@wordpress/block-editor';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	BLOCK_CLASS,
 	NOTIFICATION_ERROR,
@@ -40,7 +40,7 @@ const Body = ( { attributes, setAttributes, audition } ) => {
 
 	return (
 		<div
-			className={ classnames( {
+			className={ clsx( {
 				[ `${ BLOCK_CLASS }_notication-audition` ]: audition,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/map/lookup/index.js b/projects/plugins/jetpack/extensions/blocks/map/lookup/index.js
index 9ff1295c55f6..4fb5cf3320b2 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/lookup/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/map/lookup/index.js
@@ -3,7 +3,7 @@ import { withInstanceId, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { debounce, map } from 'lodash';
 
 function filterOptions( options = [], maxResults = 10 ) {
@@ -206,7 +206,7 @@ export class Lookup extends Component {
 									role="option"
 									aria-selected={ index === selectedIndex }
 									disabled={ option.isDisabled }
-									className={ classnames( 'components-autocomplete__result', className, {
+									className={ clsx( 'components-autocomplete__result', className, {
 										'is-selected': index === selectedIndex,
 									} ) }
 									onClick={ () => this.select( option ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/map/save.js b/projects/plugins/jetpack/extensions/blocks/map/save.js
index 44f98bedbed5..3496f9f50575 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/map/save.js
@@ -1,5 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getActiveStyleName } from '../../shared/block-styles';
 import styles from './styles';
 
@@ -33,7 +33,7 @@ const MapSave = ( { attributes } ) => {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( className, align ? `align${ align }` : null ) }
+			className={ clsx( className, align ? `align${ align }` : null ) }
 			data-map-style={ mapStyle }
 			data-map-details={ mapDetails }
 			data-points={ JSON.stringify( points ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/controls.js b/projects/plugins/jetpack/extensions/blocks/markdown/controls.js
index d52790833653..4be87b3d3479 100644
--- a/projects/plugins/jetpack/extensions/blocks/markdown/controls.js
+++ b/projects/plugins/jetpack/extensions/blocks/markdown/controls.js
@@ -1,7 +1,7 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const ToolbarButton = ( { className, label, isPressed, onClick } ) => {
-	const buttonClassnames = classnames( className, 'components-button components-tab-button', {
+	const buttonClassnames = clsx( className, 'components-button components-tab-button', {
 		'is-pressed': isPressed,
 	} );
 
diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/edit.js b/projects/plugins/jetpack/extensions/blocks/opentable/edit.js
index 35f7c1588266..1ca50c37925c 100644
--- a/projects/plugins/jetpack/extensions/blocks/opentable/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/opentable/edit.js
@@ -23,7 +23,7 @@ import {
 } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEmpty, isEqual, join } from 'lodash';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
@@ -246,7 +246,7 @@ function OpenTableEdit( {
 		</Placeholder>
 	);
 
-	const editClasses = classnames( {
+	const editClasses = clsx( {
 		[ `is-style-${ style }` ]: ! isPlaceholder && styleValues.includes( style ),
 		'is-placeholder': isPlaceholder,
 		'is-multi': 'multi' === getTypeAndTheme( style )[ 0 ],
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js
index 7be873c78639..e2c1a9cdf66e 100644
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js
@@ -2,7 +2,7 @@ import { BlockControls, useBlockProps, useInnerBlocksProps } from '@wordpress/bl
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import StripeConnectToolbarButton from '../../shared/components/stripe-connect-toolbar-button';
 import { StripeNudge } from '../../shared/components/stripe-nudge';
 import { store as membershipProductsStore } from '../../store/membership-products';
@@ -55,7 +55,7 @@ function PaymentButtonsEdit( { clientId, attributes } ) {
 	const showStripeConnectAction = ! isApiConnected && !! connectUrl;
 
 	const blockProps = useBlockProps( {
-		className: classNames( {
+		className: clsx( {
 			'has-custom-font-size': !! fontSize || attributes?.style?.typography?.fontSize,
 		} ),
 	} );
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/save.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/save.js
index ad9579e24bf7..2e085d892912 100644
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/payment-buttons/save.js
@@ -1,8 +1,8 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default function save( { attributes } ) {
-	const className = classNames( {
+	const className = clsx( {
 		'has-custom-font-size': !! attributes?.fontSize || attributes?.style?.typography?.fontSize,
 	} );
 	const blockProps = useBlockProps.save( { className: className } );
diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/header.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/header.js
index 8865cd98e649..b01e2dbf45b6 100644
--- a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/header.js
+++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/header.js
@@ -1,5 +1,5 @@
 import { memo } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { default as linkIcon } from '../icons/link';
 
 const Header = memo(
@@ -71,7 +71,7 @@ const Title = memo(
 		<h2 id={ `${ playerId }__title` } className="jetpack-podcast-player__title">
 			{ !! ( track && track.title ) && (
 				<span
-					className={ classnames(
+					className={ clsx(
 						'jetpack-podcast-player__current-track-title',
 						colors.primary.classes
 					) }
diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/podcast-player.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/podcast-player.js
index 5a8b4f5d86f9..23378de1a222 100644
--- a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/podcast-player.js
+++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/podcast-player.js
@@ -3,7 +3,7 @@ import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import AudioPlayer from '../../../shared/components/audio-player';
 import { STATE_ERROR, STATE_PAUSED, STORE_ID } from '../../../store/media-source/constants';
 import { getColorsObject } from '../utils';
@@ -287,7 +287,7 @@ export class PodcastPlayer extends Component {
 			'--jetpack-podcast-player-background': hexBackgroundColor,
 		};
 
-		const cssClassesName = classnames(
+		const cssClassesName = clsx(
 			'jetpack-podcast-player',
 			playerState,
 			colors.secondary.classes,
diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/track.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/track.js
index fdc2d68ab9d6..1d7e1afcf024 100644
--- a/projects/plugins/jetpack/extensions/blocks/podcast-player/components/track.js
+++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/components/track.js
@@ -1,6 +1,6 @@
 import { memo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getColorClassName } from '../utils';
 import TrackError from './track-error';
 import TrackIcon from './track-icon';
@@ -21,7 +21,7 @@ const Track = memo(
 		// Set CSS classes string.
 		const primaryColorClass = getColorClassName( 'color', colors.primary.name );
 		const secondaryColorClass = getColorClassName( 'color', colors.secondary.name );
-		const trackClassName = classnames( 'jetpack-podcast-player__track', {
+		const trackClassName = clsx( 'jetpack-podcast-player__track', {
 			'is-active': isActive,
 			'has-primary': isActive && ( colors.primary.name || colors.primary.custom ),
 			[ primaryColorClass ]: isActive && !! primaryColorClass,
diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/save.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/save.js
index f0f1053b06c2..972ac0873de2 100644
--- a/projects/plugins/jetpack/extensions/blocks/podcast-player/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/save.js
@@ -1,5 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
@@ -11,7 +11,7 @@ export default function save( { attributes } ) {
 	return (
 		<a
 			{ ...blockProps }
-			className={ classNames( blockProps.className, 'jetpack-podcast-player__direct-link' ) }
+			className={ clsx( blockProps.className, 'jetpack-podcast-player__direct-link' ) }
 			href={ url }
 		>
 			{ url }
diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/utils.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/utils.js
index e4b408a61405..c53075886f5f 100644
--- a/projects/plugins/jetpack/extensions/blocks/podcast-player/utils.js
+++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/utils.js
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { memoize } from 'lodash';
 
 /**
@@ -88,7 +88,7 @@ const generateColorsObject = ( {
 		primary: {
 			name: primaryColor,
 			custom: customPrimaryColor,
-			classes: classnames( {
+			classes: clsx( {
 				'has-primary': primaryColorClass || customPrimaryColor,
 				[ primaryColorClass ]: primaryColorClass,
 			} ),
@@ -96,7 +96,7 @@ const generateColorsObject = ( {
 		secondary: {
 			name: secondaryColor,
 			custom: customSecondaryColor,
-			classes: classnames( {
+			classes: clsx( {
 				'has-secondary': secondaryColorClass || customSecondaryColor,
 				[ secondaryColorClass ]: secondaryColorClass,
 			} ),
@@ -104,7 +104,7 @@ const generateColorsObject = ( {
 		background: {
 			name: backgroundColor,
 			custom: customBackgroundColor,
-			classes: classnames( {
+			classes: clsx( {
 				'has-background': backgroundColorClass || customBackgroundColor,
 				[ backgroundColorClass ]: backgroundColorClass,
 			} ),
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/color-props.js b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/color-props.js
index 4accee4462a3..fd438bc7b9fb 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/color-props.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/color-props.js
@@ -1,7 +1,7 @@
 // The code in this file is copied entirely from https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/button/color-props.js
 /* eslint-disable */
 
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 import { getColorClassName, __experimentalGetGradientClass } from '@wordpress/block-editor';
 
@@ -12,7 +12,7 @@ export default function getColorAndStyleProps( attributes ) {
 	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
 	const gradientClass = __experimentalGetGradientClass( gradient );
 	const textClass = getColorClassName( 'color', textColor );
-	const className = classnames( textClass, gradientClass, {
+	const className = clsx( textClass, gradientClass, {
 		// Don't apply the background class if there's a custom gradient
 		[ backgroundClass ]: ! style?.color?.gradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/deprecated/v1/index.js
index 36ac7bad960c..57bdf0290170 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/deprecated/v1/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/deprecated/v1/index.js
@@ -1,6 +1,6 @@
 import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import getColorAndStyleProps from '../../color-props';
 
 export default {
@@ -37,7 +37,7 @@ export default {
 	save: ( { attributes } ) => {
 		const { borderRadius, text } = attributes;
 		const colorProps = getColorAndStyleProps( attributes );
-		const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, {
+		const buttonClasses = clsx( 'wp-block-button__link', colorProps.className, {
 			'no-border-radius': borderRadius === 0,
 		} );
 		const buttonStyle = {
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/edit.js b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/edit.js
index ccc6d7251b58..e24a38ab36c5 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/edit.js
@@ -2,7 +2,7 @@ import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-edi
 import { PanelBody, RangeControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import ColorEdit from './color-edit';
 import getColorAndStyleProps from './color-props';
 
@@ -51,7 +51,7 @@ function LoginButtonEdit( props ) {
 					value={ text }
 					onChange={ value => setAttributes( { text: value } ) }
 					withoutInteractiveFormatting
-					className={ classnames( className, 'wp-block-button__link', colorProps.className, {
+					className={ clsx( className, 'wp-block-button__link', colorProps.className, {
 						'no-border-radius': borderRadius === 0,
 					} ) }
 					style={ {
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/save.js b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/save.js
index 30d35236a074..4219f1314f06 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/save.js
@@ -1,18 +1,18 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import getColorAndStyleProps from './color-props';
 
 export default function save( { attributes } ) {
 	const { borderRadius, text, align } = attributes;
 	const colorProps = getColorAndStyleProps( attributes );
-	const containerClasses = classnames(
+	const containerClasses = clsx(
 		'wp-block-button',
 		'wp-block-premium-content-login-button',
 		{ alignleft: align === 'left' },
 		{ aligncenter: align === 'center' },
 		{ alignright: align === 'right' }
 	);
-	const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, {
+	const buttonClasses = clsx( 'wp-block-button__link', colorProps.className, {
 		'no-border-radius': borderRadius === 0,
 	} );
 	const buttonStyle = {
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/save.js b/projects/plugins/jetpack/extensions/blocks/premium-content/save.js
index 19beb86f631a..a14a98a798f0 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/save.js
@@ -1,5 +1,5 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default function Save() {
 	const blockProps = useBlockProps.save();
@@ -7,7 +7,7 @@ export default function Save() {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( blockProps.className, 'wp-block-premium-content-container' ) }
+			className={ clsx( blockProps.className, 'wp-block-premium-content-container' ) }
 		>
 			<InnerBlocks.Content />
 		</div>
diff --git a/projects/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js b/projects/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js
index 03060c8b7b1a..4c70159bc37c 100644
--- a/projects/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js
@@ -4,7 +4,7 @@ import { Notice, TextControl, RadioControl, Placeholder } from '@wordpress/compo
 import { withSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import metadata from '../block.json';
 import { CRITERIA_AFTER, CRITERIA_BEFORE } from '../constants';
 
@@ -79,7 +79,7 @@ export const RepeatVisitorEdit = ( { isSelected, attributes, setAttributes } ) =
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				'wp-block-jetpack-repeat-visitor--is-unselected': ! isSelected,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/deprecated/v1/index.js
index edfc3c1231e7..7d1683897442 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/deprecated/v1/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/deprecated/v1/index.js
@@ -1,5 +1,5 @@
 import { RichText } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import attr from '../../attributes';
 import { whatsAppURL } from '../../index';
 
@@ -37,7 +37,7 @@ export default {
 			return url;
 		};
 
-		const cssClassNames = classnames(
+		const cssClassNames = clsx(
 			className,
 			colorClass ? 'is-color-' + colorClass : undefined,
 			! buttonText.length ? 'has-no-text' : undefined
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 4ea5f0ebeafb..94441c8ad16e 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -1,7 +1,7 @@
 import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useCallback } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { countryCodes } from '../shared/countrycodes.js';
 import WhatsAppButtonConfiguration from './configuration';
 import '../view.scss';
@@ -45,7 +45,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	}, [ clientId, countryCode, getCountryCode, selectBlock ] );
 
 	const getBlockClassNames = () => {
-		return classnames( className, colorClass ? 'is-color-' + colorClass : undefined );
+		return clsx( className, colorClass ? 'is-color-' + colorClass : undefined );
 	};
 
 	return (
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
index 79222677ab1e..a9ad324a5943 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
@@ -1,5 +1,5 @@
 import { RichText } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { whatsAppURL } from './index';
 
 export default function SendAMessageSave( { attributes, className } ) {
@@ -28,7 +28,7 @@ export default function SendAMessageSave( { attributes, className } ) {
 		return url;
 	};
 
-	const cssClassNames = classnames(
+	const cssClassNames = clsx(
 		className,
 		colorClass ? 'is-color-' + colorClass : undefined,
 		! buttonText.length ? 'has-no-text' : undefined
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js b/projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js
index c6745cd8a4c3..5afcd6c2d539 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js
@@ -1,6 +1,6 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SocialIcon from 'social-logos';
 import { getNameBySite } from './utils';
 import './style.scss';
@@ -12,7 +12,7 @@ const SharingButtonEdit = ( { attributes, context } ) => {
 	const socialLinkName = getNameBySite( service );
 	const socialLinkLabel = label ?? socialLinkName;
 
-	const sharingButtonClass = classNames(
+	const sharingButtonClass = clsx(
 		'jetpack-sharing-button__button',
 		'style-' + styleType,
 		'share-' + service
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js
index 54d18e7acb73..7509c8c74af8 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js
@@ -1,7 +1,7 @@
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SharingButtonsBlockControls from './components/block-controls';
 import SharingButtonsInspectorControls from './components/inspector-controls';
 
@@ -15,7 +15,7 @@ function SharingButtonsEdit( props ) {
 		<li>{ __( 'Click plus to add a Sharing Button', 'jetpack' ) }</li>
 	);
 
-	const className = classNames( size, 'jetpack-sharing-buttons__services-list' );
+	const className = clsx( size, 'jetpack-sharing-buttons__services-list' );
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
index 638aa8cbd7ff..70a94c91cfb0 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
@@ -1,9 +1,9 @@
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const { size } = attributes;
-	const className = classNames( size, 'jetpack-sharing-buttons__services-list' );
+	const className = clsx( size, 'jetpack-sharing-buttons__services-list' );
 	const id = 'jetpack-sharing-serivces-list';
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js b/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
index ad9f36a73c22..0e265ed1c671 100644
--- a/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
@@ -14,7 +14,7 @@ import { compose, withInstanceId } from '@wordpress/compose';
 import { dispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import emailValidator from 'email-validator';
 import { get, isEmpty, isEqual, pick, trimEnd } from 'lodash';
 import HelpMessage from '../../../../shared/help-message';
@@ -500,7 +500,7 @@ class SimplePaymentsEdit extends Component {
 				<div>
 					<TextControl
 						aria-describedby={ `${ instanceId }-title-error` }
-						className={ classNames( 'simple-payments__field', 'simple-payments__field-title', {
+						className={ clsx( 'simple-payments__field', 'simple-payments__field-title', {
 							'simple-payments__field-has-error': fieldTitleError,
 						} ) }
 						label={ __( 'Item name', 'jetpack' ) }
@@ -532,7 +532,7 @@ class SimplePaymentsEdit extends Component {
 						/>
 						<TextControl
 							aria-describedby={ `${ instanceId }-price-error` }
-							className={ classNames( 'simple-payments__field', 'simple-payments__field-price', {
+							className={ clsx( 'simple-payments__field', 'simple-payments__field-price', {
 								'simple-payments__field-has-error': fieldPriceError,
 							} ) }
 							label={ __( 'Price', 'jetpack' ) }
@@ -558,7 +558,7 @@ class SimplePaymentsEdit extends Component {
 
 					<TextControl
 						aria-describedby={ `${ instanceId }-email-${ fieldEmailError ? 'error' : 'help' }` }
-						className={ classNames( 'simple-payments__field', 'simple-payments__field-email', {
+						className={ clsx( 'simple-payments__field', 'simple-payments__field-email', {
 							'simple-payments__field-has-error': fieldEmailError,
 						} ) }
 						label={ __( 'Email', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/edit.js b/projects/plugins/jetpack/extensions/blocks/simple-payments/edit.js
index 8433e09b3261..7d305fc5cc72 100644
--- a/projects/plugins/jetpack/extensions/blocks/simple-payments/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/edit.js
@@ -13,7 +13,7 @@ import { dispatch, withSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { getWidgetIdFromBlock } from '@wordpress/widgets';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import emailValidator from 'email-validator';
 import { get, isEmpty, pick, trimEnd } from 'lodash';
 import HelpMessage from '../../shared/help-message';
@@ -438,7 +438,7 @@ export const SimplePaymentsEdit = ( {
 				<div>
 					<TextControl
 						aria-describedby={ `${ instanceId }-title-error` }
-						className={ classNames( 'simple-payments__field', 'simple-payments__field-title', {
+						className={ clsx( 'simple-payments__field', 'simple-payments__field-title', {
 							'simple-payments__field-has-error': fieldTitleError,
 						} ) }
 						label={ __( 'Item name', 'jetpack' ) }
@@ -471,7 +471,7 @@ export const SimplePaymentsEdit = ( {
 						/>
 						<TextControl
 							aria-describedby={ `${ instanceId }-price-error` }
-							className={ classNames( 'simple-payments__field', 'simple-payments__field-price', {
+							className={ clsx( 'simple-payments__field', 'simple-payments__field-price', {
 								'simple-payments__field-has-error': fieldPriceError,
 							} ) }
 							label={ __( 'Price', 'jetpack' ) }
@@ -497,7 +497,7 @@ export const SimplePaymentsEdit = ( {
 
 					<TextControl
 						aria-describedby={ `${ instanceId }-email-${ fieldEmailError ? 'error' : 'help' }` }
-						className={ classNames( 'simple-payments__field', 'simple-payments__field-email', {
+						className={ clsx( 'simple-payments__field', 'simple-payments__field-email', {
 							'simple-payments__field-has-error': fieldEmailError,
 						} ) }
 						label={ __( 'Email', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/save.js b/projects/plugins/jetpack/extensions/blocks/simple-payments/save.js
index 5c4fba078b0a..c9dc1a8b92e7 100644
--- a/projects/plugins/jetpack/extensions/blocks/simple-payments/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/save.js
@@ -1,5 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { formatPrice } from './utils';
 
 export default function Save( { attributes } ) {
@@ -23,7 +23,7 @@ export default function Save( { attributes } ) {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames(
+			className={ clsx(
 				blockProps.className,
 				`jetpack-simple-payments-wrapper jetpack-simple-payments-${ productId }`
 			) }
diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/slideshow.js b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/slideshow.js
index 1853c40092f5..0b231d325fc8 100644
--- a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/slideshow.js
+++ b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/slideshow.js
@@ -6,7 +6,7 @@ import { RichText } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import ResizeObserver from 'resize-observer-polyfill';
 /**
@@ -138,7 +138,7 @@ class Slideshow extends Component {
 					<ul className="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper">
 						{ images.map( ( { alt, caption, id, url } ) => (
 							<li
-								className={ classnames(
+								className={ clsx(
 									'wp-block-jetpack-slideshow_slide',
 									'swiper-slide',
 									isBlobURL( url ) && 'is-transient'
diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/slideshow.js b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/slideshow.js
index cf0549bea4bd..ab1f9b1ef349 100644
--- a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/slideshow.js
+++ b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/slideshow.js
@@ -6,7 +6,7 @@ import { RichText } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import ResizeObserver from 'resize-observer-polyfill';
 /**
@@ -137,7 +137,7 @@ class Slideshow extends Component {
 					<ul className="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper">
 						{ images.map( ( { alt, caption, id, url } ) => (
 							<li
-								className={ classnames(
+								className={ clsx(
 									'wp-block-jetpack-slideshow_slide',
 									'swiper-slide',
 									isBlobURL( url ) && 'is-transient'
diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js b/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js
index 1853c40092f5..0b231d325fc8 100644
--- a/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js
+++ b/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js
@@ -6,7 +6,7 @@ import { RichText } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import ResizeObserver from 'resize-observer-polyfill';
 /**
@@ -138,7 +138,7 @@ class Slideshow extends Component {
 					<ul className="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper">
 						{ images.map( ( { alt, caption, id, url } ) => (
 							<li
-								className={ classnames(
+								className={ clsx(
 									'wp-block-jetpack-slideshow_slide',
 									'swiper-slide',
 									isBlobURL( url ) && 'is-transient'
diff --git a/projects/plugins/jetpack/extensions/blocks/story/edit.js b/projects/plugins/jetpack/extensions/blocks/story/edit.js
index 8f60a1c117c3..25ff565a6022 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/edit.js
@@ -4,7 +4,7 @@ import { MediaPlaceholder, useBlockProps } from '@wordpress/block-editor';
 import { withNotices } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { get, pick } from 'lodash';
 import metadata from './block.json';
 import Controls from './controls';
@@ -145,7 +145,7 @@ export default withNotices( function StoryEdit( {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classNames( 'wp-block-jetpack-story', 'wp-story', blockProps.className ) }
+			className={ clsx( 'wp-block-jetpack-story', 'wp-story', blockProps.className ) }
 		>
 			{ content }
 		</div>
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/components/bullet.js b/projects/plugins/jetpack/extensions/blocks/story/player/components/bullet.js
index 81bf6de2e501..dc25a181e20c 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/components/bullet.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/components/bullet.js
@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default function Bullet( { isEllipsis, disabled, index, isSelected, progress, onClick } ) {
 	const bulletDisabled = disabled || isEllipsis;
@@ -21,7 +21,7 @@ export default function Bullet( { isEllipsis, disabled, index, isSelected, progr
 		<button
 			role={ bulletDisabled ? 'presentation' : 'tab' }
 			key={ index }
-			className={ classNames( 'wp-story-pagination-bullet', {
+			className={ clsx( 'wp-story-pagination-bullet', {
 				'wp-story-pagination-ellipsis': isEllipsis,
 			} ) }
 			aria-label={ label }
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/components/button.js b/projects/plugins/jetpack/extensions/blocks/story/player/components/button.js
index 09c4b4a9d9dc..4f4499e6515c 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/components/button.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/components/button.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './button.scss';
 
@@ -7,7 +7,7 @@ export const DecoratedButton = ( { className, size, label, isPressed, ...extraPr
 		type="button"
 		aria-label={ label }
 		aria-pressed={ isPressed }
-		className={ classNames(
+		className={ clsx(
 			'jetpack-mdc-icon-button',
 			'circle-icon',
 			'outlined',
@@ -27,7 +27,7 @@ export const SimpleButton = ( { className, size = 24, label, isPressed, ...extra
 		type="button"
 		aria-label={ label }
 		aria-pressed={ isPressed }
-		className={ classNames( 'jetpack-mdc-icon-button', className ) }
+		className={ clsx( 'jetpack-mdc-icon-button', className ) }
 		style={ {
 			width: `${ size }px`,
 			height: `${ size }px`,
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/components/media.js b/projects/plugins/jetpack/extensions/blocks/story/player/components/media.js
index 991c15fd1cf7..06e9842e3ff7 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/components/media.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/components/media.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export const Image = ( { title, alt, className, id, mediaRef, mime, sizes, srcset, url } ) => (
 	// eslint-disable-next-line jsx-a11y/media-has-caption
@@ -9,7 +9,7 @@ export const Image = ( { title, alt, className, id, mediaRef, mime, sizes, srcse
 		title={ title }
 		alt={ alt }
 		src={ url }
-		className={ classNames( 'wp-story-image', `wp-image-${ id }`, className ) }
+		className={ clsx( 'wp-story-image', `wp-image-${ id }`, className ) }
 		srcSet={ srcset }
 		sizes={ sizes }
 	/>
@@ -18,7 +18,7 @@ export const Image = ( { title, alt, className, id, mediaRef, mime, sizes, srcse
 export const Video = ( { title, className, id, mediaRef, mime, url, poster } ) => (
 	// eslint-disable-next-line jsx-a11y/media-has-caption
 	<video
-		className={ classNames( 'wp-story-video', 'intrinsic-ignore', `wp-video-${ id }`, className ) }
+		className={ clsx( 'wp-story-video', 'intrinsic-ignore', `wp-video-${ id }`, className ) }
 		ref={ mediaRef }
 		data-id={ id }
 		title={ title }
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js b/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js
index 38693c945799..ce3c85ad911f 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useState } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import * as fullscreenAPI from './lib/fullscreen-api';
 import ShadowRoot from './lib/shadow-root';
 import Modal from './modal';
@@ -69,7 +69,7 @@ export default function ExpandableSandbox( {
 			<ShadowRoot { ...shadowDOM }>
 				<div
 					ref={ rootElementRef }
-					className={ classNames( className, {
+					className={ clsx( className, {
 						[ fullscreenClassName ]: isFullscreen,
 					} ) }
 					onKeyDown={ onKeyDown }
@@ -78,7 +78,7 @@ export default function ExpandableSandbox( {
 				</div>
 			</ShadowRoot>
 			<Modal
-				className={ classNames( className, {
+				className={ clsx( className, {
 					[ fullscreenClassName ]: isFullPageModalOpened,
 				} ) }
 				isOpened={ isFullPageModalOpened }
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js b/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js
index ca5f8c1b0510..73046c0c3a1b 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js
@@ -4,7 +4,7 @@ import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useRef, useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { some } from 'lodash';
 import blockMetadata from '../block.json';
 import { Background, Controls, Header, Overlay } from './components';
@@ -164,7 +164,7 @@ export default function PlayerUI( { id, slides, metadata, disabled } ) {
 				role={ role }
 				aria-label={ label }
 				tabIndex={ fullscreen ? -1 : 0 }
-				className={ classNames( 'wp-story-container', {
+				className={ clsx( 'wp-story-container', {
 					'wp-story-with-controls': ! disabled && ! fullscreen && ! settings.playInFullscreen,
 					'wp-story-fullscreen': fullscreen,
 					'wp-story-ended': ended,
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/slide.js b/projects/plugins/jetpack/extensions/blocks/story/player/slide.js
index 3d7ab477b3e1..115cf032f503 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/player/slide.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/player/slide.js
@@ -1,6 +1,6 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useLayoutEffect, useEffect, useState, useRef } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Media, CalypsoSpinner } from './components';
 import waitMediaReady from './lib/wait-media-ready';
 
@@ -60,7 +60,7 @@ export const Slide = ( {
 		<>
 			{ visible && ( loading || uploading || buffering ) && (
 				<div
-					className={ classNames( 'wp-story-slide', 'is-loading', {
+					className={ clsx( 'wp-story-slide', 'is-loading', {
 						transparent: playing && buffering,
 						'semi-transparent': uploading || ( ! playing && buffering ),
 					} ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/story/save.js b/projects/plugins/jetpack/extensions/blocks/story/save.js
index 916ef4ca82e5..e27fa5645799 100644
--- a/projects/plugins/jetpack/extensions/blocks/story/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/story/save.js
@@ -1,8 +1,8 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export default () => {
 	const blockProps = useBlockProps.save();
 
-	return <div { ...blockProps } className={ classNames( 'wp-story', blockProps.className ) }></div>;
+	return <div { ...blockProps } className={ clsx( 'wp-story', blockProps.className ) }></div>;
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js
index 4f9d24692521..83f31561c1d7 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js
@@ -4,7 +4,7 @@ import {
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import definedAttributes from './attributes';
 
 export const DEFAULT_BORDER_RADIUS_VALUE = 0;
@@ -59,13 +59,13 @@ export default function getSubscriptionsShortcode(
 		? getGradientClass( emailFieldGradient )
 		: undefined;
 
-	const sharedClasses = classnames(
+	const sharedClasses = clsx(
 		borderRadius === 0 ? 'no-border-radius' : undefined,
 		fontSizeClass,
 		borderClass
 	);
 
-	const submitButtonClasses = classnames(
+	const submitButtonClasses = clsx(
 		sharedClasses,
 		textColor ? 'has-text-color' : undefined,
 		textColorClass,
@@ -74,7 +74,7 @@ export default function getSubscriptionsShortcode(
 		buttonGradientClass
 	);
 
-	const emailFieldClasses = classnames(
+	const emailFieldClasses = clsx(
 		sharedClasses,
 		emailFieldBackgroundClass,
 		emailFieldGradientClass
@@ -91,7 +91,7 @@ export default function getSubscriptionsShortcode(
 			: customButtonBackgroundColor;
 
 	const getBlockClassName = () => {
-		return classnames(
+		return clsx(
 			className,
 			'wp-block-jetpack-subscriptions__supports-newline',
 			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js
index 19baf0224bba..7ea112764a9b 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js
@@ -4,7 +4,7 @@ import {
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { reduce } from 'lodash';
 import definedAttributes from '../v3/attributes';
 
@@ -56,13 +56,13 @@ export default function Save( { className, attributes } ) {
 		? getGradientClass( emailFieldGradient )
 		: undefined;
 
-	const sharedClasses = classnames(
+	const sharedClasses = clsx(
 		borderRadius === 0 ? 'no-border-radius' : undefined,
 		fontSizeClass,
 		borderClass
 	);
 
-	const submitButtonClasses = classnames(
+	const submitButtonClasses = clsx(
 		sharedClasses,
 		textColor ? 'has-text-color' : undefined,
 		textColorClass,
@@ -71,7 +71,7 @@ export default function Save( { className, attributes } ) {
 		buttonGradientClass
 	);
 
-	const emailFieldClasses = classnames(
+	const emailFieldClasses = clsx(
 		sharedClasses,
 		emailFieldBackgroundClass,
 		emailFieldGradientClass
@@ -88,7 +88,7 @@ export default function Save( { className, attributes } ) {
 			: customButtonBackgroundColor;
 
 	const getBlockClassName = () => {
-		return classnames(
+		return clsx(
 			className,
 			'wp-block-jetpack-subscriptions__supports-newline',
 			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v6/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v6/save.js
index 029392450652..244dc1d2ff15 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v6/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v6/save.js
@@ -4,7 +4,7 @@ import {
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { reduce } from 'lodash';
 import defaultAttributes from './attributes';
 
@@ -57,13 +57,13 @@ export default function Save( { className, attributes } ) {
 		? getGradientClass( emailFieldGradient )
 		: undefined;
 
-	const sharedClasses = classnames(
+	const sharedClasses = clsx(
 		borderRadius === 0 ? 'no-border-radius' : undefined,
 		fontSizeClass,
 		borderClass
 	);
 
-	const submitButtonClasses = classnames(
+	const submitButtonClasses = clsx(
 		sharedClasses,
 		textColor ? 'has-text-color' : undefined,
 		textColorClass,
@@ -72,7 +72,7 @@ export default function Save( { className, attributes } ) {
 		buttonGradientClass
 	);
 
-	const emailFieldClasses = classnames(
+	const emailFieldClasses = clsx(
 		sharedClasses,
 		emailFieldBackgroundClass,
 		emailFieldGradientClass
@@ -91,7 +91,7 @@ export default function Save( { className, attributes } ) {
 	const buttonWidthStyle = buttonWidth ? buttonWidth : undefined;
 
 	const getBlockClassName = () => {
-		return classnames(
+		return clsx(
 			className,
 			'wp-block-jetpack-subscriptions__supports-newline',
 			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js
index 6003f68bb7c1..ae0be454e7b2 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js
@@ -4,7 +4,7 @@ import {
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import { RawHTML } from '@wordpress/element';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { reduce } from 'lodash';
 import defaultAttributes from './attributes';
 
@@ -77,13 +77,13 @@ export default function Save( { className, attributes } ) {
 		? getGradientClass( emailFieldGradient )
 		: undefined;
 
-	const sharedClasses = classnames(
+	const sharedClasses = clsx(
 		borderRadius === 0 ? 'no-border-radius' : undefined,
 		fontSizeClass,
 		borderClass
 	);
 
-	const submitButtonClasses = classnames(
+	const submitButtonClasses = clsx(
 		sharedClasses,
 		textColor ? 'has-text-color' : undefined,
 		textColorClass,
@@ -92,7 +92,7 @@ export default function Save( { className, attributes } ) {
 		buttonGradientClass
 	);
 
-	const emailFieldClasses = classnames(
+	const emailFieldClasses = clsx(
 		sharedClasses,
 		emailFieldBackgroundClass,
 		emailFieldGradientClass
@@ -111,7 +111,7 @@ export default function Save( { className, attributes } ) {
 	const buttonWidthStyle = buttonWidth ? buttonWidth : undefined;
 
 	const getBlockClassName = () => {
-		return classnames(
+		return clsx(
 			className,
 			'wp-block-jetpack-subscriptions__supports-newline',
 			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v8/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v8/save.js
index ea3bb64414c6..b176e3630df3 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v8/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v8/save.js
@@ -1,10 +1,10 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Save( { className, attributes } ) {
 	const { showSubscribersTotal, buttonOnNewLine } = attributes;
 
 	const getBlockClassName = () => {
-		return classnames(
+		return clsx(
 			className,
 			'wp-block-jetpack-subscriptions__supports-newline',
 			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
index ad2d62595c71..3eecf168aa0e 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -14,7 +14,7 @@ import { compose, usePrevious } from '@wordpress/compose';
 import { useSelect, withSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
@@ -298,7 +298,7 @@ export function SubscriptionEdit( props ) {
 									<TextControl
 										placeholder={ subscribePlaceholder }
 										disabled={ true }
-										className={ classnames(
+										className={ clsx(
 											emailFieldClasses,
 											'wp-block-jetpack-subscriptions__textfield'
 										) }
@@ -306,7 +306,7 @@ export function SubscriptionEdit( props ) {
 									/>
 								) }
 								<RichText
-									className={ classnames(
+									className={ clsx(
 										buttonClasses,
 										'wp-block-jetpack-subscriptions__button',
 										'wp-block-button__link'
@@ -333,7 +333,7 @@ export function SubscriptionEdit( props ) {
 	return (
 		<div
 			{ ...blockProps }
-			className={ classnames(
+			className={ clsx(
 				blockProps.className,
 				'wp-block-jetpack-subscriptions__container',
 				'wp-block-jetpack-subscriptions__supports-newline',
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js
index 4440a1afb987..8babf7196713 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js
@@ -1,5 +1,5 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Row( { children, className } ) {
-	return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>;
+	return <div className={ clsx( 'tiled-gallery__row', className ) }>{ children }</div>;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/gallery-image/save.js
index b1b7a709e633..11665cb1e6b1 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/gallery-image/save.js
@@ -1,5 +1,5 @@
 import { isBlobURL } from '@wordpress/blob';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function GalleryImageSave( props ) {
 	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
@@ -33,7 +33,7 @@ export default function GalleryImageSave( props ) {
 
 	return (
 		<figure
-			className={ classnames( 'tiled-gallery__item', {
+			className={ clsx( 'tiled-gallery__item', {
 				[ `filter__${ imageFilter }` ]: !! imageFilter,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/index.js
index 316de2464b62..d747f7ffe988 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/index.js
@@ -1,6 +1,6 @@
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { LAYOUT_CIRCLE, MAX_ROUNDED_CORNERS } from '../constants';
 import GalleryImageSave from '../gallery-image/save';
 import { isSquareishLayout, photonizedImgProps } from '../utils';
@@ -57,7 +57,7 @@ export default class Layout extends Component {
 
 		return (
 			<div
-				className={ classnames( className, {
+				className={ clsx( className, {
 					[ `has-rounded-corners-${ roundedCornersValue }` ]: roundedCornersValue > 0,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/row.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/row.js
index 4440a1afb987..8babf7196713 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/row.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v2/layout/row.js
@@ -1,5 +1,5 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Row( { children, className } ) {
-	return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>;
+	return <div className={ clsx( 'tiled-gallery__row', className ) }>{ children }</div>;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/gallery-image/save.js
index b1b7a709e633..11665cb1e6b1 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/gallery-image/save.js
@@ -1,5 +1,5 @@
 import { isBlobURL } from '@wordpress/blob';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function GalleryImageSave( props ) {
 	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
@@ -33,7 +33,7 @@ export default function GalleryImageSave( props ) {
 
 	return (
 		<figure
-			className={ classnames( 'tiled-gallery__item', {
+			className={ clsx( 'tiled-gallery__item', {
 				[ `filter__${ imageFilter }` ]: !! imageFilter,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/index.js
index 9e03d47ec744..b8dfa84ffa7a 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/index.js
@@ -1,6 +1,6 @@
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { LAYOUT_CIRCLE, MAX_ROUNDED_CORNERS } from '../constants';
 import GalleryImageSave from '../gallery-image/save';
 import { isSquareishLayout, photonizedImgProps } from '../utils';
@@ -86,7 +86,7 @@ export default class Layout extends Component {
 
 		return (
 			<div
-				className={ classnames( className, {
+				className={ clsx( className, {
 					[ `has-rounded-corners-${ roundedCornersValue }` ]: roundedCornersValue > 0,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/row.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/row.js
index 4440a1afb987..8babf7196713 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/row.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v3/layout/row.js
@@ -1,5 +1,5 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Row( { children, className } ) {
-	return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>;
+	return <div className={ clsx( 'tiled-gallery__row', className ) }>{ children }</div>;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/gallery-image/save.js
index 94485c7211c4..056b649ccee5 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/gallery-image/save.js
@@ -1,5 +1,5 @@
 import { isBlobURL } from '@wordpress/blob';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function GalleryImageSave( props ) {
 	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
@@ -34,7 +34,7 @@ export default function GalleryImageSave( props ) {
 
 	return (
 		<figure
-			className={ classnames( 'tiled-gallery__item', {
+			className={ clsx( 'tiled-gallery__item', {
 				[ `filter__${ imageFilter }` ]: !! imageFilter,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/index.js
index 8ae1ef83c2ca..31635403c44e 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/index.js
@@ -1,6 +1,6 @@
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { LAYOUT_CIRCLE, MAX_ROUNDED_CORNERS } from '../constants';
 import GalleryImageSave from '../gallery-image/save';
 import { isSquareishLayout, photonizedImgProps } from '../utils';
@@ -88,7 +88,7 @@ export default class Layout extends Component {
 		return (
 			<div
 				style={ style }
-				className={ classnames( className, {
+				className={ clsx( className, {
 					[ `has-rounded-corners-${ roundedCornersValue }` ]: roundedCornersValue > 0,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/row.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/row.js
index 4440a1afb987..8babf7196713 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/row.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v4/layout/row.js
@@ -1,5 +1,5 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Row( { children, className } ) {
-	return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>;
+	return <div className={ clsx( 'tiled-gallery__row', className ) }>{ children }</div>;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
index d10a22b406c7..2235d53a5bb0 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js
@@ -4,7 +4,7 @@ import { withSelect } from '@wordpress/data';
 import { Component, createRef, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { close, downChevron, leftChevron, rightChevron, upChevron } from '../icons';
 
 class GalleryImageEdit extends Component {
@@ -119,7 +119,7 @@ class GalleryImageEdit extends Component {
 		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
 		return (
 			<figure
-				className={ classnames( 'tiled-gallery__item', {
+				className={ clsx( 'tiled-gallery__item', {
 					'is-selected': isSelected,
 					'is-transient': isTransient,
 					[ `filter__${ imageFilter }` ]: !! imageFilter,
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
index 2e93027611c3..2c4ce70159f6 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
@@ -1,5 +1,5 @@
 import { isBlobURL } from '@wordpress/blob';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function GalleryImageSave( props ) {
 	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
@@ -34,7 +34,7 @@ export default function GalleryImageSave( props ) {
 
 	return (
 		<figure
-			className={ classnames( 'tiled-gallery__item', {
+			className={ clsx( 'tiled-gallery__item', {
 				[ `filter__${ imageFilter }` ]: !! imageFilter,
 			} ) }
 		>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
index b813d64077c6..b1ac4fd644ab 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
@@ -1,6 +1,6 @@
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { LAYOUT_CIRCLE, MAX_ROUNDED_CORNERS } from '../constants';
 import GalleryImageEdit from '../gallery-image/edit';
 import GalleryImageSave from '../gallery-image/save';
@@ -90,7 +90,7 @@ export default class Layout extends Component {
 		return (
 			<div
 				style={ style }
-				className={ classnames( className, {
+				className={ clsx( className, {
 					[ `has-rounded-corners-${ roundedCornersValue }` ]: roundedCornersValue > 0,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js
index 4440a1afb987..8babf7196713 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js
@@ -1,5 +1,5 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Row( { children, className } ) {
-	return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>;
+	return <div className={ clsx( 'tiled-gallery__row', className ) }>{ children }</div>;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
index 1de3b7a6afe6..b6de36d32d35 100644
--- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.js
@@ -1,5 +1,5 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { LAYOUT_STYLES } from './constants';
 import { defaultColumnsNumber } from './edit';
@@ -23,7 +23,7 @@ export default function TiledGallerySave( { attributes } ) {
 	} = attributes;
 
 	return (
-		<div { ...blockProps } className={ classNames( blockProps.className, className ) }>
+		<div { ...blockProps } className={ clsx( blockProps.className, className ) }>
 			<Layout
 				align={ align }
 				columns={ columns }
diff --git a/projects/plugins/jetpack/extensions/blocks/top-posts/edit.js b/projects/plugins/jetpack/extensions/blocks/top-posts/edit.js
index 325a2b3e4f7e..df50745967cd 100644
--- a/projects/plugins/jetpack/extensions/blocks/top-posts/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/top-posts/edit.js
@@ -2,7 +2,7 @@ import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import apiFetch from '@wordpress/api-fetch';
 import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { LoadingPostsGrid } from '../../shared/components/loading-posts-grid';
 import { TopPostsBlockControls, TopPostsInspectorControls } from './controls';
 import { InactiveStatsPlaceholder } from './inactive-placeholder';
@@ -173,7 +173,7 @@ function TopPostsEdit( { attributes, setAttributes } ) {
 	}
 
 	return (
-		<div { ...blockProps } className={ classNames( className, `is-${ layout }-layout` ) }>
+		<div { ...blockProps } className={ clsx( className, `is-${ layout }-layout` ) }>
 			{ content }
 		</div>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v2/utils.js b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v2/utils.js
index e650f354ed4b..633d98a61175 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v2/utils.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v2/utils.js
@@ -1,5 +1,4 @@
 import TokenList from '@wordpress/token-list';
-import classnames from 'classnames/dedupe';
 
 // Aspect ratios at the time of deprecation.
 export const ASPECT_RATIOS = [
@@ -25,31 +24,24 @@ export const ASPECT_RATIOS = [
  */
 export const filterVideoPressClasses = ( className, videoPressClassNames ) => {
 	// Filter out VideoPress specific styles from className attribute.
-	const aspectRatioClassNames = ASPECT_RATIOS.reduce(
-		( accumulator, { className: ratioClass } ) => {
-			accumulator[ ratioClass ] = false;
-			return accumulator;
-		},
-		{ 'wp-has-aspect-ratio': false }
-	);
 
-	const customClasses = classnames( className, {
+	const aspectRatioClassNames = ASPECT_RATIOS.map( ratio => ratio.className );
+
+	const customClassTokenList = new TokenList( className );
+	customClassTokenList.remove(
 		...aspectRatioClassNames,
-		'wp-block-embed': false,
-		'is-type-video': false,
-		'is-provider-videopress': false,
-	} );
+		'wp-block-embed',
+		'is-type-video',
+		'is-provider-videopress'
+	);
 
-	// Filter the custom CSS classes from the VideoPress specific class list.
-	const customClassList = new TokenList( customClasses );
-	let videoPressClasses = classnames( className, videoPressClassNames );
+	const videoPressClassTokenList = new TokenList( className );
+	videoPressClassTokenList.add( videoPressClassNames );
 
-	customClassList.forEach( customClass => {
-		videoPressClasses = videoPressClasses.replace( customClass, '' );
-	} );
+	videoPressClassTokenList.remove( ...customClassTokenList );
 
 	return {
-		className: customClasses,
-		videoPressClassNames: videoPressClasses.trim(),
+		className: customClassTokenList.value,
+		videoPressClassNames: videoPressClassTokenList.value,
 	};
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v3/save.js b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v3/save.js
index 8fb19844c5b6..4a196fc78dc3 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v3/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v3/save.js
@@ -1,5 +1,5 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getVideoPressUrl } from './url';
 
 export default function VideoPressSave( props ) {
@@ -24,7 +24,7 @@ export default function VideoPressSave( props ) {
 	} = props;
 
 	const blockProps = useBlockProps.save( {
-		className: classnames( 'wp-block-video', className, videoPressClassNames, {
+		className: clsx( 'wp-block-video', className, videoPressClassNames, {
 			[ `align${ align }` ]: align,
 		} ),
 	} );
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v4/save.js b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v4/save.js
index 1acdfe24e091..cf892edbb7c0 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v4/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/deprecated/v4/save.js
@@ -1,5 +1,5 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getVideoPressUrl } from './url';
 
 export default function VideoPressSave( props ) {
@@ -25,7 +25,7 @@ export default function VideoPressSave( props ) {
 	} = props;
 
 	const blockProps = useBlockProps.save( {
-		className: classnames( 'wp-block-video', className, videoPressClassNames, {
+		className: clsx( 'wp-block-video', className, videoPressClassNames, {
 			[ `align${ align }` ]: align,
 		} ),
 	} );
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
index e7c4a3c8a500..364706f0cf81 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
@@ -38,7 +38,7 @@ import {
 import { escapeHTML } from '@wordpress/escape-html';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { get, indexOf } from 'lodash';
 import { VideoPressIcon } from '../../shared/icons';
 import { VideoPressBlockProvider } from './components';
@@ -175,7 +175,7 @@ const VideoPressEdit = CoreVideoEdit =>
 			if ( preview ) {
 				const sandboxClassnames = getClassNames(
 					preview.html,
-					classnames( 'wp-block-embed', 'is-type-video', 'is-provider-videopress' ),
+					clsx( 'wp-block-embed', 'is-type-video', 'is-provider-videopress' ),
 					false
 				);
 
@@ -1031,7 +1031,7 @@ export const VpBlock = props => {
 	const { align, className, videoPressClassNames, maxWidth } = attributes;
 
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-video', className, videoPressClassNames, {
+		className: clsx( 'wp-block-video', className, videoPressClassNames, {
 			[ `align${ align }` ]: align,
 		} ),
 	} );
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/save.js b/projects/plugins/jetpack/extensions/blocks/videopress/save.js
index 2c6b81eae8cd..6b7c550fbc18 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/save.js
@@ -1,6 +1,6 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { getVideoPressUrl } from './url';
 
 const VideoPressSave = CoreVideoSave => props => {
@@ -27,7 +27,7 @@ const VideoPressSave = CoreVideoSave => props => {
 	} = props;
 
 	const blockProps = useBlockProps.save( {
-		className: classnames( 'wp-block-video', className, videoPressClassNames, {
+		className: clsx( 'wp-block-video', className, videoPressClassNames, {
 			[ `align${ align }` ]: align,
 		} ),
 	} );
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
index 1a09425f0dd1..8735d7d8ecd0 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
@@ -10,7 +10,7 @@ import { BaseControl, Button, TextControl, RangeControl } from '@wordpress/compo
 import { createInterpolateElement, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -40,7 +40,7 @@ export const PosterSelector = props => {
 	const { onSelectPoster, onRemovePoster } = props;
 
 	return (
-		<BaseControl className={ classNames( props.className, 'editor-video-poster-control' ) }>
+		<BaseControl className={ clsx( props.className, 'editor-video-poster-control' ) }>
 			<PosterImageWrapper { ...props } />
 			<MediaUpload
 				title={ __( 'Select Poster Image', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/utils.js b/projects/plugins/jetpack/extensions/blocks/videopress/utils.js
index c4c275556555..12884ce0bd44 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/utils.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/utils.js
@@ -3,14 +3,14 @@
  * https://github.com/WordPress/gutenberg/blob/e4b6d70f129a745a0cc7dc556d41a44bdab7b0ca/packages/block-library/src/embed/util.js#L177
  */
 import { createBlock, getBlockType } from '@wordpress/blocks';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { ASPECT_RATIOS, DEFAULT_EMBED_BLOCK } from './constants';
 
 /**
  * Removes all previously set aspect ratio related classes and return the rest
  * existing class names.
  *
- * @param {string} existingClassNames Any existing class names.
+ * @param {string} existingClassNames - Any existing class names.
  * @returns {string} The class names without any aspect ratio related class.
  */
 export const removeAspectRatioClasses = existingClassNames => {
@@ -21,15 +21,15 @@ export const removeAspectRatioClasses = existingClassNames => {
 		},
 		{ 'wp-has-aspect-ratio': false }
 	);
-	return classnames( existingClassNames, aspectRatioClassNames );
+	return clsx( existingClassNames, aspectRatioClassNames );
 };
 
 /**
  * Returns class names with any relevant responsive aspect ratio names.
  *
- * @param {string}  html               The preview HTML that possibly contains an iframe with width and height set.
- * @param {string}  existingClassNames Any existing class names.
- * @param {boolean} allowResponsive    If the responsive class names should be added, or removed.
+ * @param {string}  html               - The preview HTML that possibly contains an iframe with width and height set.
+ * @param {string}  existingClassNames - Any existing class names.
+ * @param {boolean} allowResponsive    - If the responsive class names should be added, or removed.
  * @returns {string} Deduped class names.
  */
 export function getClassNames( html, existingClassNames = '', allowResponsive = true ) {
@@ -49,7 +49,7 @@ export function getClassNames( html, existingClassNames = '', allowResponsive =
 			const potentialRatio = ASPECT_RATIOS[ ratioIndex ];
 
 			if ( aspectRatio >= potentialRatio.ratio ) {
-				return classnames(
+				return clsx(
 					removeAspectRatioClasses( existingClassNames ),
 					potentialRatio.className,
 					'wp-has-aspect-ratio'
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx
index cf6b21a44999..f80191704d0f 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/carrousel.tsx
@@ -4,7 +4,7 @@
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -35,7 +35,7 @@ function BlankImage( { children, isDotted = false } ) {
 		<div className="ai-assistant-featured-image__blank">
 			{ blankImage }
 			<div
-				className={ classNames( 'ai-assistant-featured-image__blank-content', {
+				className={ clsx( 'ai-assistant-featured-image__blank-content', {
 					'is-dotted': isDotted,
 				} ) }
 			>
@@ -62,7 +62,7 @@ export default function Carrousel( {
 		<button className="ai-carrousel__prev" onClick={ handlePreviousImage }>
 			<Icon
 				icon={ chevronLeft }
-				className={ classNames( 'ai-carrousel__prev-icon', {
+				className={ clsx( 'ai-carrousel__prev-icon', {
 					'is-disabled': current === 0,
 				} ) }
 			/>
@@ -73,7 +73,7 @@ export default function Carrousel( {
 		<button className="ai-carrousel__next" onClick={ handleNextImage }>
 			<Icon
 				icon={ chevronRight }
-				className={ classNames( 'ai-carrousel__next-icon', {
+				className={ clsx( 'ai-carrousel__next-icon', {
 					'is-disabled': current + 1 === images.length,
 				} ) }
 			/>
@@ -87,7 +87,7 @@ export default function Carrousel( {
 				{ images.map( ( { image, generating, error }, index ) => (
 					<div
 						key={ `image:` + index }
-						className={ classNames( 'ai-assistant-featured-image__carrousel-image-container', {
+						className={ clsx( 'ai-assistant-featured-image__carrousel-image-container', {
 							'is-current': current === index,
 							'is-prev': current > index,
 						} ) }
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
index 64b4720d5a4a..4f36094b3c53 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
@@ -5,7 +5,7 @@ import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import { BaseControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -43,7 +43,7 @@ export const UsageBar = ( { usage }: UsageBarProps ): React.JSX.Element => {
 	return (
 		<div className="ai-assistant-usage-bar-wrapper">
 			<div
-				className={ classNames( 'ai-assistant-usage-bar-usage', {
+				className={ clsx( 'ai-assistant-usage-bar-usage', {
 					warning: missing < 60 && missing > 20,
 					danger: missing <= 20,
 				} ) }
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/components/upsell/index.js b/projects/plugins/jetpack/extensions/plugins/publicize/components/upsell/index.js
index 41a0c73f1f26..0bce5165eefe 100644
--- a/projects/plugins/jetpack/extensions/plugins/publicize/components/upsell/index.js
+++ b/projects/plugins/jetpack/extensions/plugins/publicize/components/upsell/index.js
@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useUpgradeFlow from '../../../../shared/use-upgrade-flow';
 
 const getDescriptions = () => ( {
@@ -129,7 +129,7 @@ export default function UpsellNotice() {
 				onClick={ goToCheckoutPage }
 				target="_top"
 				icon={ external }
-				className={ classNames( 'jetpack-publicize__upsell-button is-primary', {
+				className={ clsx( 'jetpack-publicize__upsell-button is-primary', {
 					'jetpack-upgrade-plan__hidden': ! checkoutUrl,
 				} ) }
 				isBusy={ isRedirecting }
diff --git a/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.js b/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.js
index d445815733bd..5abbf09ede8c 100644
--- a/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.js
+++ b/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.js
@@ -2,7 +2,7 @@ import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useUpgradeFlow from '../../../shared/use-upgrade-flow';
 import './upsell.scss';
 
@@ -43,7 +43,7 @@ const UpsellNotice = ( { requiredPlan } ) => {
 				onClick={ onClickHandler }
 				target="_top"
 				icon={ external }
-				className={ classNames( 'components-seo-upsell__button is-primary', {
+				className={ clsx( 'components-seo-upsell__button is-primary', {
 					'jetpack-upgrade-plan__hidden': ! checkoutUrl,
 				} ) }
 				isBusy={ isRedirecting }
diff --git a/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx b/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx
index a42742c36cde..a2229f145031 100644
--- a/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx
+++ b/projects/plugins/jetpack/extensions/shared/components/block-nudge/index.jsx
@@ -1,7 +1,7 @@
 import { Warning } from '@wordpress/block-editor';
 import { Button, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useAutosaveAndRedirect from '../../../shared/use-autosave-and-redirect/index';
 
 import './style.scss';
@@ -41,7 +41,7 @@ export default function BlockNudge( {
 					</Button>,
 				]
 			}
-			className={ classNames( className, 'jetpack-block-nudge wp-block' ) }
+			className={ clsx( className, 'jetpack-block-nudge wp-block' ) }
 		>
 			<span className="jetpack-block-nudge__info">
 				{ icon }
diff --git a/projects/plugins/jetpack/extensions/shared/components/block-styles-selector/index.js b/projects/plugins/jetpack/extensions/shared/components/block-styles-selector/index.js
index b838609aeb93..65d34b7dedd9 100644
--- a/projects/plugins/jetpack/extensions/shared/components/block-styles-selector/index.js
+++ b/projects/plugins/jetpack/extensions/shared/components/block-styles-selector/index.js
@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { memo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { isEqual } from 'lodash';
 
 import './style.scss';
@@ -86,7 +86,7 @@ export default function BlockStylesSelector( {
 							return (
 								<div
 									key={ styleOption.value }
-									className={ classnames( 'block-editor-block-styles__item', {
+									className={ clsx( 'block-editor-block-styles__item', {
 										'is-active': styleOption.value === activeStyle,
 									} ) }
 									onClick={ () => {
diff --git a/projects/plugins/jetpack/extensions/shared/components/media-player-control/index.js b/projects/plugins/jetpack/extensions/shared/components/media-player-control/index.js
index 0e16467d957d..8f8a2ae4b10c 100644
--- a/projects/plugins/jetpack/extensions/shared/components/media-player-control/index.js
+++ b/projects/plugins/jetpack/extensions/shared/components/media-player-control/index.js
@@ -1,7 +1,7 @@
 import { ToolbarGroup, ToolbarButton, ToolbarItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import './style.scss';
 import { STATE_PAUSED, STORE_ID } from '../../../store/media-source/constants';
 import { ControlBackFiveIcon, ControlForwardFiveIcon } from '../../icons';
@@ -90,7 +90,7 @@ export function MediaPlayerControl( {
 
 			{ currenTimeDisplay && (
 				<ToolbarButton
-					className={ classnames( 'media-player-control__current-time', {
+					className={ clsx( 'media-player-control__current-time', {
 						'is-disabled': isDisabled,
 					} ) }
 					label={ __( 'Set timestamp', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx b/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx
index 68320180fbfc..e2d919cefe00 100644
--- a/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx
+++ b/projects/plugins/jetpack/extensions/shared/components/upgrade-nudge/index.jsx
@@ -1,6 +1,6 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './style.scss';
 
@@ -18,7 +18,7 @@ export const Nudge = ( {
 	showButton = true,
 	target = '_top',
 } ) => {
-	const cssClasses = classNames( className, 'jetpack-upgrade-plan-banner', {
+	const cssClasses = clsx( className, 'jetpack-upgrade-plan-banner', {
 		'wp-block': context === 'editor-canvas',
 		'block-editor-block-list__block': context === 'editor-canvas',
 		'jetpack-upgrade-plan__hidden': ! visible,
@@ -30,9 +30,7 @@ export const Nudge = ( {
 		<div className={ cssClasses } data-align={ align }>
 			<div className="jetpack-upgrade-plan-banner__wrapper">
 				{ title && (
-					<strong
-						className={ classNames( 'banner-title', { [ `${ className }__title` ]: className } ) }
-					>
+					<strong className={ clsx( 'banner-title', { [ `${ className }__title` ]: className } ) }>
 						{ title }
 					</strong>
 				) }
@@ -46,7 +44,7 @@ export const Nudge = ( {
 						href={ isRedirecting ? null : checkoutUrl } // Only for server-side rendering, since onClick doesn't work there.
 						onClick={ goToCheckoutPage }
 						target={ target }
-						className={ classNames( 'is-primary', {
+						className={ clsx( 'is-primary', {
 							'jetpack-upgrade-plan__hidden': ! checkoutUrl,
 						} ) }
 						isBusy={ isRedirecting }
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-browser/index.js b/projects/plugins/jetpack/extensions/shared/external-media/media-browser/index.js
index 828af833680a..97dc163ae8ed 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-browser/index.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-browser/index.js
@@ -2,7 +2,7 @@ import { Button } from '@wordpress/components';
 import { memo, useCallback, useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { UP, DOWN, LEFT, RIGHT, SPACE, ENTER } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { debounce } from 'lodash';
 import MediaItem from './media-item';
 import MediaPlaceholder from './placeholder';
@@ -60,11 +60,11 @@ function MediaBrowser( props ) {
 	}, [ selected, onCopy ] );
 
 	const hasMediaItems = media.filter( item => item.type !== 'folder' ).length > 0;
-	const classes = classnames( {
+	const classes = clsx( {
 		'jetpack-external-media-browser__media': true,
 		'jetpack-external-media-browser__media__loading': isLoading,
 	} );
-	const wrapper = classnames( {
+	const wrapper = clsx( {
 		'jetpack-external-media-browser': true,
 		[ className ]: true,
 	} );
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-browser/media-item.js b/projects/plugins/jetpack/extensions/shared/external-media/media-browser/media-item.js
index 070e65028012..ea9b505686b4 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/media-browser/media-item.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/media-browser/media-item.js
@@ -1,7 +1,7 @@
 import { Spinner } from '@wordpress/components';
 import { useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 function MediaItem( props ) {
 	const onClick = event => {
@@ -25,7 +25,7 @@ function MediaItem( props ) {
 	const { thumbnails, caption, name, title, type, children = 0 } = item;
 	const { medium = null, fmt_hd = null, thumbnail = null } = thumbnails;
 	const alt = title || caption || name;
-	const classes = classnames( {
+	const classes = clsx( {
 		'jetpack-external-media-browser__media__item': true,
 		'jetpack-external-media-browser__media__item__selected': isSelected,
 		'jetpack-external-media-browser__media__folder': type === 'folder',
diff --git a/projects/plugins/jetpack/extensions/shared/external-media/sources/with-media.js b/projects/plugins/jetpack/extensions/shared/external-media/sources/with-media.js
index 9bead0916213..556cfda67217 100644
--- a/projects/plugins/jetpack/extensions/shared/external-media/sources/with-media.js
+++ b/projects/plugins/jetpack/extensions/shared/external-media/sources/with-media.js
@@ -5,7 +5,7 @@ import { withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { uniqBy } from 'lodash';
 import { PATH_RECENT } from '../constants';
 import { authenticateMediaSource } from '../media-service';
@@ -299,7 +299,7 @@ export default function withMedia( mediaSource = MediaSource.Unknown ) {
 					  );
 
 				const describedby = 'jetpack-external-media-browser__description';
-				const classes = classnames( {
+				const classes = clsx( {
 					'jetpack-external-media-browser': true,
 					'jetpack-external-media-browser--is-copying': isCopying,
 					'is-jetpack-app-media': mediaSource === 'jetpack_app_media',
diff --git a/projects/plugins/jetpack/extensions/shared/help-message.js b/projects/plugins/jetpack/extensions/shared/help-message.js
index db8170c21a44..adcdd54f8d80 100644
--- a/projects/plugins/jetpack/extensions/shared/help-message.js
+++ b/projects/plugins/jetpack/extensions/shared/help-message.js
@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 import './help-message.scss';
 
 export default ( { children = null, isError = false, ...props } ) => {
-	const classes = classNames( 'help-message', {
+	const classes = clsx( 'help-message', {
 		'help-message-is-error': isError,
 	} );
 
diff --git a/projects/plugins/jetpack/extensions/shared/icons.js b/projects/plugins/jetpack/extensions/shared/icons.js
index 98889cd352bb..d5e4fe35ae27 100644
--- a/projects/plugins/jetpack/extensions/shared/icons.js
+++ b/projects/plugins/jetpack/extensions/shared/icons.js
@@ -1,6 +1,6 @@
 import colorStudio from '@automattic/color-studio';
 import { G, Path, Polygon, Rect, SVG } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { getIconColor } from './block-icons';
 
 import './icons.scss';
@@ -209,7 +209,7 @@ export const JetpackLogo = ( { size = 24, border = 0, className, color = COLOR_J
 
 	return (
 		<SVG
-			className={ classNames( 'jetpack-logo', className ) }
+			className={ clsx( 'jetpack-logo', className ) }
 			width={ size }
 			height={ size }
 			viewBox={ `${ borderOffset } ${ borderOffset } ${ 32 - borderOffset * 2 } ${
diff --git a/projects/plugins/jetpack/extensions/shared/width-panel.js b/projects/plugins/jetpack/extensions/shared/width-panel.js
index 9922a14a70a9..17f63b004b68 100644
--- a/projects/plugins/jetpack/extensions/shared/width-panel.js
+++ b/projects/plugins/jetpack/extensions/shared/width-panel.js
@@ -7,7 +7,7 @@ import {
 } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import './width-panel.scss';
 
 const widthUnits = [
@@ -58,7 +58,7 @@ export function WidthControl( { align, width, onChange, showLabel = true } ) {
 	return (
 		<BaseControl label={ showLabel && __( 'Width', 'jetpack' ) }>
 			<div
-				className={ classnames( 'jetpack-block-width-controls', {
+				className={ clsx( 'jetpack-block-width-controls', {
 					'is-aligned': isAlignedLeftOrRight,
 				} ) }
 			>
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
index c409683969fb..f2f0f9af668b 100644
--- a/projects/plugins/jetpack/package.json
+++ b/projects/plugins/jetpack/package.json
@@ -80,8 +80,8 @@
 		"@wordpress/widgets": "4.0.0",
 		"@wordpress/wordcount": "4.0.0",
 		"bounding-client-rect": "1.0.5",
-		"classnames": "2.3.2",
 		"clipboard": "2.0.6",
+		"clsx": "2.1.1",
 		"component-uid": "0.0.2",
 		"cookie": "0.4.1",
 		"copy-webpack-plugin": "11.0.0",
diff --git a/projects/plugins/protect/changelog/fix-37695-classnames_to_clsx b/projects/plugins/protect/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/plugins/protect/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/protect/package.json b/projects/plugins/protect/package.json
index e490cf4ca0be..3067eb5b465f 100644
--- a/projects/plugins/protect/package.json
+++ b/projects/plugins/protect/package.json
@@ -38,7 +38,7 @@
 		"@wordpress/icons": "10.0.0",
 		"@wordpress/url": "4.0.0",
 		"camelize": "1.0.1",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"diff": "^4.0.2",
 		"moment": "2.29.4",
 		"prop-types": "15.8.1",
diff --git a/projects/plugins/protect/src/js/components/free-accordion/index.jsx b/projects/plugins/protect/src/js/components/free-accordion/index.jsx
index 6c33fb1a5a4a..e801d9374fd3 100644
--- a/projects/plugins/protect/src/js/components/free-accordion/index.jsx
+++ b/projects/plugins/protect/src/js/components/free-accordion/index.jsx
@@ -1,6 +1,6 @@
 import { Text } from '@automattic/jetpack-components';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useState, useCallback, useContext } from 'react';
 import styles from './styles.module.scss';
 
@@ -11,7 +11,7 @@ export const FreeAccordionItem = ( { id, title, label, icon, children, onOpen }
 	const open = accordionData?.open === id;
 	const setOpen = accordionData?.setOpen;
 
-	const bodyClassNames = classNames( styles[ 'accordion-body' ], {
+	const bodyClassNames = clsx( styles[ 'accordion-body' ], {
 		[ styles[ 'accordion-body-open' ] ]: open,
 		[ styles[ 'accordion-body-close' ] ]: ! open,
 	} );
diff --git a/projects/plugins/protect/src/js/components/navigation/item.jsx b/projects/plugins/protect/src/js/components/navigation/item.jsx
index c13b0c842a5c..d902625c3997 100644
--- a/projects/plugins/protect/src/js/components/navigation/item.jsx
+++ b/projects/plugins/protect/src/js/components/navigation/item.jsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useContext, useEffect, useCallback } from 'react';
 import ItemBadge from './badge';
 import ItemLabel from './label';
@@ -25,7 +25,7 @@ const NavigationItem = ( {
 	const handleKeyDownItem = context?.handleKeyDownItem;
 	const handleFocusItem = context?.handleFocusItem;
 
-	const wrapperClassName = classNames( styles[ 'navigation-item' ], {
+	const wrapperClassName = clsx( styles[ 'navigation-item' ], {
 		[ styles.clickable ]: ! disabled,
 		[ styles.selected ]: selected,
 	} );
diff --git a/projects/plugins/protect/src/js/components/navigation/label.jsx b/projects/plugins/protect/src/js/components/navigation/label.jsx
index d0c83f0b3a45..8f075caae020 100644
--- a/projects/plugins/protect/src/js/components/navigation/label.jsx
+++ b/projects/plugins/protect/src/js/components/navigation/label.jsx
@@ -1,13 +1,13 @@
 import { Text } from '@automattic/jetpack-components';
 import { Icon } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './styles.module.scss';
 
 const ItemLabel = ( { icon, children, className } ) => {
 	return (
-		<Text className={ classNames( styles[ 'navigation-item-label' ], className ) }>
+		<Text className={ clsx( styles[ 'navigation-item-label' ], className ) }>
 			{ icon && <Icon icon={ icon } className={ styles[ 'navigation-item-icon' ] } size={ 28 } /> }
 			<span className={ styles[ 'navigation-item-label-content' ] }>{ children }</span>
 		</Text>
diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
index 8ef36bab4378..ef0a38d91932 100644
--- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
+++ b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx
@@ -2,7 +2,7 @@ import { Spinner, Text, useBreakpointMatch } from '@automattic/jetpack-component
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useState, useCallback, useContext } from 'react';
 import { STORE_ID } from '../../state/store';
 import ThreatSeverityBadge from '../severity';
@@ -25,7 +25,7 @@ export const PaidAccordionItem = ( {
 	const setOpen = accordionData?.setOpen;
 	const threatsAreFixing = useSelect( select => select( STORE_ID ).getThreatsAreFixing() );
 
-	const bodyClassNames = classNames( styles[ 'accordion-body' ], {
+	const bodyClassNames = clsx( styles[ 'accordion-body' ], {
 		[ styles[ 'accordion-body-open' ] ]: open,
 		[ styles[ 'accordion-body-close' ] ]: ! open,
 	} );
diff --git a/projects/plugins/protect/src/js/components/progress-bar/index.jsx b/projects/plugins/protect/src/js/components/progress-bar/index.jsx
index c01ab4e33aca..84adb4be189c 100644
--- a/projects/plugins/protect/src/js/components/progress-bar/index.jsx
+++ b/projects/plugins/protect/src/js/components/progress-bar/index.jsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './style.module.scss';
 
 /**
@@ -23,7 +23,7 @@ const ProgressBar = ( { className, total = 100, value } ) => {
 	};
 
 	return (
-		<div className={ classnames( className, styles[ 'progress-bar' ] ) }>
+		<div className={ clsx( className, styles[ 'progress-bar' ] ) }>
 			<div className={ styles[ 'progress-bar__wrapper' ] }>
 				<div
 					aria-valuemax={ total }
diff --git a/projects/plugins/social/changelog/fix-37695-classnames_to_clsx b/projects/plugins/social/changelog/fix-37695-classnames_to_clsx
new file mode 100644
index 000000000000..b5611999cbae
--- /dev/null
+++ b/projects/plugins/social/changelog/fix-37695-classnames_to_clsx
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Change codebase to use clsx instead of classnames.
diff --git a/projects/plugins/social/package.json b/projects/plugins/social/package.json
index 0e9ad86f1303..37505cc0c032 100644
--- a/projects/plugins/social/package.json
+++ b/projects/plugins/social/package.json
@@ -38,7 +38,7 @@
 		"@wordpress/element": "6.0.0",
 		"@wordpress/i18n": "5.0.0",
 		"@wordpress/icons": "10.0.0",
-		"classnames": "2.3.2",
+		"clsx": "2.1.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
diff --git a/projects/plugins/social/src/js/components/icon-text/index.js b/projects/plugins/social/src/js/components/icon-text/index.js
index eb9433cf8f35..4b8c416e8145 100644
--- a/projects/plugins/social/src/js/components/icon-text/index.js
+++ b/projects/plugins/social/src/js/components/icon-text/index.js
@@ -1,5 +1,5 @@
 import { Text, useBreakpointMatch } from '@automattic/jetpack-components';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 const IconText = ( { icon, title, children } ) => {
@@ -8,7 +8,7 @@ const IconText = ( { icon, title, children } ) => {
 		[ '>', '>' ]
 	);
 
-	const wrapperClassNames = classnames( styles.column, {
+	const wrapperClassNames = clsx( styles.column, {
 		[ styles[ 'viewport-gt-small' ] ]: isBiggerThanSmall,
 		[ styles[ 'viewport-gt-medium' ] ]: isBiggerThanMedium,
 	} );
diff --git a/projects/plugins/social/src/js/components/info-section/index.js b/projects/plugins/social/src/js/components/info-section/index.js
index a7dc2b2269d8..624c5fa132d7 100644
--- a/projects/plugins/social/src/js/components/info-section/index.js
+++ b/projects/plugins/social/src/js/components/info-section/index.js
@@ -1,6 +1,6 @@
 import { Container, Text, useBreakpointMatch } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 const InfoSection = () => {
@@ -13,11 +13,7 @@ const InfoSection = () => {
 	};
 
 	return (
-		<Container
-			className={ classNames( viewportClasses ) }
-			horizontalSpacing={ 7 }
-			horizontalGap={ 3 }
-		>
+		<Container className={ clsx( viewportClasses ) } horizontalSpacing={ 7 } horizontalGap={ 3 }>
 			<div className={ styles.column }>
 				<Text variant="title-medium" className={ styles.title }>
 					{ __( 'Did you know?', 'jetpack-social' ) }
diff --git a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
index 3bfb2f23d3c8..61327359f710 100644
--- a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
+++ b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx
@@ -9,7 +9,7 @@ import { ConnectionManagement, SOCIAL_STORE_ID } from '@automattic/jetpack-publi
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import ToggleSection from '../toggle-section';
 import { SocialStoreSelectors } from '../types/types';
@@ -94,7 +94,7 @@ const SocialModuleToggle: React.FC = () => {
 			</Text>
 			{ ! hasPaidFeatures ? (
 				<ContextualUpgradeTrigger
-					className={ classNames( styles.cut, { [ styles.small ]: isSmall } ) }
+					className={ clsx( styles.cut, { [ styles.small ]: isSmall } ) }
 					description={ __( 'Unlock advanced sharing options', 'jetpack-social' ) }
 					cta={ __( 'Power up Jetpack Social', 'jetpack-social' ) }
 					href={ getRedirectUrl( 'jetpack-social-admin-page-upsell', {
diff --git a/projects/plugins/social/src/js/components/support-section/index.js b/projects/plugins/social/src/js/components/support-section/index.js
index 1b4933db44b8..f835d0ec753a 100644
--- a/projects/plugins/social/src/js/components/support-section/index.js
+++ b/projects/plugins/social/src/js/components/support-section/index.js
@@ -9,7 +9,7 @@ import { ExternalLink } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, lifesaver } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import IconText from '../icon-text';
 import styles from './styles.module.scss';
 
@@ -25,7 +25,7 @@ const SupportSection = () => {
 		<Container
 			horizontalSpacing={ 7 }
 			horizontalGap={ 3 }
-			className={ classNames( {
+			className={ clsx( {
 				[ styles[ 'is-viewport-medium' ] ]: isAtLeastMedium,
 			} ) }
 		>
diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json
index b0e4985cbad1..88596c607a4e 100644
--- a/tools/eslint-excludelist.json
+++ b/tools/eslint-excludelist.json
@@ -59,7 +59,6 @@
 	"projects/plugins/jetpack/extensions/blocks/podcast-player/utils.js",
 	"projects/plugins/jetpack/extensions/blocks/slideshow/transforms.js",
 	"projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js",
-	"projects/plugins/jetpack/extensions/blocks/videopress/utils.js",
 	"projects/plugins/jetpack/extensions/shared/block-icons.js",
 	"projects/plugins/jetpack/extensions/shared/block-styles.js",
 	"projects/plugins/jetpack/extensions/shared/components/block-styles-selector/index.js",
diff --git a/tools/js-tools/eslintrc/base.js b/tools/js-tools/eslintrc/base.js
index 7ccdb8b78df1..94551ea4d86d 100644
--- a/tools/js-tools/eslintrc/base.js
+++ b/tools/js-tools/eslintrc/base.js
@@ -17,6 +17,16 @@
 /**
  * @type {import("eslint").Linter.Config}
  */
+const restrictedPaths = [
+	'lib/sites-list',
+	'lib/mixins/data-observe',
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
+];
+
 module.exports = {
 	parser: '@typescript-eslint/parser',
 	extends: [
@@ -106,8 +116,18 @@ module.exports = {
 		'no-extra-semi': 2,
 		'no-multiple-empty-lines': [ 2, { max: 1 } ],
 		'no-multi-spaces': 2,
-		'no-restricted-imports': [ 2, 'lib/sites-list', 'lib/mixins/data-observe' ],
-		'no-restricted-modules': [ 2, 'lib/sites-list', 'lib/mixins/data-observe' ],
+		'no-restricted-imports': [
+			2,
+			{
+				paths: restrictedPaths,
+			},
+		],
+		'no-restricted-modules': [
+			2,
+			{
+				paths: restrictedPaths,
+			},
+		],
 		'no-shadow': 2,
 		'no-spaced-func': 2,
 		'no-trailing-spaces': 2,