@automattic/jetpack-components 0.53.7 → 0.53.9

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.53.9] - 2024-06-11
+### Changed
+- Updated package dependencies. [#37779]
+
+## [0.53.8] - 2024-06-10
+### Changed
+- Change codebase to use clsx instead of classnames. [#37708]
+
 ## [0.53.7] - 2024-06-05
 ### Changed
 - Updated package dependencies. [#37669]
@@ -1055,6 +1063,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.53.9]: https://github.com/Automattic/jetpack-components/compare/0.53.8...0.53.9
+[0.53.8]: https://github.com/Automattic/jetpack-components/compare/0.53.7...0.53.8
 [0.53.7]: https://github.com/Automattic/jetpack-components/compare/0.53.6...0.53.7
 [0.53.6]: https://github.com/Automattic/jetpack-components/compare/0.53.5...0.53.6
 [0.53.5]: https://github.com/Automattic/jetpack-components/compare/0.53.4...0.53.5

package/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>
 			) }
 		</>
 	);

package/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,
 	} );
 

package/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 }>

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

package/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 ? (

package/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 }

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

package/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,
 	} );

package/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 );

package/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 ) && (

package/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 }
 		/>

package/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' ) }
 		/>
 	);

package/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 }

package/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 }

package/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 }
 		>

package/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 }

package/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 }

package/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,

package/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,
 	} );
 

package/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>
 	);

package/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 }>

package/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,
 	} );
 

package/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 }

package/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.
 			} ) }

package/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>
 				) }

package/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,
 	} );
 

package/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>
 	);
 };

package/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 }

package/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 );

package/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>
 				) }

package/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,

package/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 } />
 		) : (

package/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">

package/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 }

package/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,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.7",
+	"version": "0.53.9",
 	"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",
@@ -39,9 +39,9 @@
 		"@babel/core": "7.24.0",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "8.0.9",
-		"@storybook/blocks": "8.0.9",
-		"@storybook/react": "8.0.9",
+		"@storybook/addon-actions": "8.1.6",
+		"@storybook/blocks": "8.1.6",
+		"@storybook/react": "8.1.6",
 		"@testing-library/dom": "10.1.0",
 		"@testing-library/react": "15.0.7",
 		"@testing-library/user-event": "14.5.2",