@wordpress/components 27.5.0 → 28.0.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":";;AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":";;AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/build-types/z-stack/styles.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const ZStackChildView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     offsetAmount: number;
     zIndex: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ZStackView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isLayered: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "27.5.0",
+	"version": "28.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -41,32 +42,32 @@
 		"@floating-ui/react-dom": "^2.0.8",
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
-		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/is-shallow-equal": "^4.57.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/primitives": "^3.55.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/rich-text": "^6.34.0",
-		"@wordpress/warning": "^2.57.0",
+		"@use-gesture/react": "^10.3.1",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/escape-html": "^3.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/is-shallow-equal": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/primitives": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/rich-text": "^7.0.0",
+		"@wordpress/warning": "^3.0.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
-		"framer-motion": "^10.13.0",
+		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
@@ -85,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/alignment-matrix-control/icon.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -28,7 +28,7 @@ function AlignmentMatrixControlIcon( {
 	const alignIndex = getAlignmentIndex( value );
 	const scale = ( size / BASE_SIZE ).toFixed( 2 );
 
-	const classes = classnames(
+	const classes = clsx(
 		'component-alignment-matrix-control-icon',
 		className
 	);

package/src/alignment-matrix-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -70,10 +70,7 @@ export function AlignmentMatrixControl( {
 
 	const activeId = compositeStore.useState( 'activeId' );
 
-	const classes = classnames(
-		'component-alignment-matrix-control',
-		className
-	);
+	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite

package/src/angle-picker-control/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ function UnforwardedAnglePickerControl(
 		onChange( inputValue );
 	};
 
-	const classes = classnames( 'components-angle-picker-control', className );
+	const classes = clsx( 'components-angle-picker-control', className );
 
 	const unitText = <UnitText>°</UnitText>;
 	const [ prefixedUnitText, suffixedUnitText ] = isRTL()

package/src/animate/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -23,24 +23,21 @@ function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
  */
 export function getAnimateClassName( options: GetAnimateOptions ) {
 	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
+		return 'components-animate__loading';
 	}
 
 	const { type, origin = getDefaultOrigin( type ) } = options;
 
 	if ( type === 'appear' ) {
 		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
+		return clsx( 'components-animate__appear', {
 			[ 'is-from-' + xAxis ]: xAxis !== 'center',
 			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
 		} );
 	}
 
 	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
+		return clsx( 'components-animate__slide-in', 'is-from-' + origin );
 	}
 
 	return undefined;

package/src/animate/stories/index.story.tsx

@@ -27,7 +27,12 @@ export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
-			<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
+			<p>
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				No default animation. Use one of type = "appear", "slide-in", or
+				"loading".
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</p>
 		</Notice>
 	),
 };

package/src/autocomplete/autocompleter-ui.native.js

@@ -21,10 +21,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	Icon,
-	__unstableAutocompletionItemsFill as AutocompletionItemsFill,
-} from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -33,6 +29,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import BackgroundView from './background-view';
 import getDefaultUseItems from './get-default-use-items';
 import styles from './style.scss';
+import Icon from '../icon';
+import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
 
 const { compose: stylesCompose } = StyleSheet;
 

package/src/autocomplete/autocompleter-ui.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,10 +27,57 @@ import { VisuallyHidden } from '../visually-hidden';
 import { createPortal } from 'react-dom';
 import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
+type ListBoxProps = {
+	items: KeyedOption[];
+	onSelect: ( option: KeyedOption ) => void;
+	selectedIndex: number;
+	instanceId: number;
+	listBoxId: string | undefined;
+	className?: string;
+	Component?: React.ElementType;
+};
+
+function ListBox( {
+	items,
+	onSelect,
+	selectedIndex,
+	instanceId,
+	listBoxId,
+	className,
+	Component = 'div',
+}: ListBoxProps ) {
+	return (
+		<Component
+			id={ listBoxId }
+			role="listbox"
+			className="components-autocomplete__results"
+		>
+			{ items.map( ( option, index ) => (
+				<Button
+					key={ option.key }
+					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
+					role="option"
+					aria-selected={ index === selectedIndex }
+					disabled={ option.isDisabled }
+					className={ clsx(
+						'components-autocomplete__result',
+						className,
+						{
+							'is-selected': index === selectedIndex,
+						}
+					) }
+					onClick={ () => onSelect( option ) }
+				>
+					{ option.label }
+				</Button>
+			) ) }
+		</Component>
+	);
+}
+
 export function getAutoCompleterUI( autocompleter: WPCompleter ) {
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
+	const useItems =
+		autocompleter.useItems ?? getDefaultUseItems( autocompleter );
 
 	function AutocompleterUI( {
 		filterValue,
@@ -62,7 +109,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 					// If the popover is rendered in a different document than
 					// the content, we need to duplicate the options list in the
 					// content document so that it's available to the screen
-					// readers, which check the DOM ID based aira-* attributes.
+					// readers, which check the DOM ID based aria-* attributes.
 					setNeedsA11yCompat(
 						node.ownerDocument !== contentRef.current.ownerDocument
 					);
@@ -124,38 +171,6 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 			return null;
 		}
 
-		const ListBox = ( {
-			Component = 'div',
-		}: {
-			Component?: React.ElementType;
-		} ) => (
-			<Component
-				id={ listBoxId }
-				role="listbox"
-				className="components-autocomplete__results"
-			>
-				{ items.map( ( option, index ) => (
-					<Button
-						key={ option.key }
-						id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
-						role="option"
-						aria-selected={ index === selectedIndex }
-						disabled={ option.isDisabled }
-						className={ classnames(
-							'components-autocomplete__result',
-							className,
-							{
-								'is-selected': index === selectedIndex,
-							}
-						) }
-						onClick={ () => onSelect( option ) }
-					>
-						{ option.label }
-					</Button>
-				) ) }
-			</Component>
-		);
-
 		return (
 			<>
 				<Popover
@@ -166,12 +181,27 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 					anchor={ popoverAnchor }
 					ref={ popoverRefs }
 				>
-					<ListBox />
+					<ListBox
+						items={ items }
+						onSelect={ onSelect }
+						selectedIndex={ selectedIndex }
+						instanceId={ instanceId }
+						listBoxId={ listBoxId }
+						className={ className }
+					/>
 				</Popover>
 				{ contentRef.current &&
 					needsA11yCompat &&
 					createPortal(
-						<ListBox Component={ VisuallyHidden } />,
+						<ListBox
+							items={ items }
+							onSelect={ onSelect }
+							selectedIndex={ selectedIndex }
+							instanceId={ instanceId }
+							listBoxId={ listBoxId }
+							className={ className }
+							Component={ VisuallyHidden }
+						/>,
 						contentRef.current.ownerDocument.body
 					) }
 			</>

package/src/autocomplete/test/index.tsx

@@ -67,10 +67,10 @@ describe( 'AutocompleterUI', () => {
 				return (
 					<div>
 						<AutocompleterUI
-							className={ 'test' }
-							filterValue={ 'Apple' }
+							className="test"
+							filterValue="Apple"
 							instanceId={ 1 }
-							listBoxId={ '1' }
+							listBoxId="1"
 							selectedIndex={ 0 }
 							onChangeOptions={ () => {} }
 							onSelect={ () => {} }

package/src/base-control/README.md

@@ -53,7 +53,7 @@ If true, the label will only be visible to screen readers.
 
 ### help
 
-Additional description for the control. It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`. When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+Additional description for the control. The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
 -   Type: `ReactNode`
 -   Required: No

package/src/base-control/hooks.ts

@@ -27,10 +27,6 @@ export function useBaseControlProps(
 		preferredId
 	);
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-
 	return {
 		baseControlProps: {
 			id: uniqueId,
@@ -39,7 +35,7 @@ export function useBaseControlProps(
 		},
 		controlProps: {
 			id: uniqueId,
-			...( !! help ? { [ helpPropName ]: `${ uniqueId }__help` } : {} ),
+			...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),
 		},
 	};
 }

package/src/base-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -124,10 +124,7 @@ export const VisualLabel = ( {
 	return (
 		<StyledVisualLabel
 			{ ...props }
-			className={ classnames(
-				'components-base-control__label',
-				className
-			) }
+			className={ clsx( 'components-base-control__label', className ) }
 		>
 			{ children }
 		</StyledVisualLabel>

package/src/base-control/test/index.tsx

@@ -31,7 +31,7 @@ describe( 'BaseControl', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render help as aria-details when not plain text', () => {
+	it( 'should still render help as aria-describedby when not plain text', () => {
 		render(
 			<MyBaseControl
 				label="Text"
@@ -44,10 +44,10 @@ describe( 'BaseControl', () => {
 			name: 'My help text',
 		} );
 
-		expect( textarea ).toHaveAttribute( 'aria-details' );
+		expect( textarea ).toHaveAttribute( 'aria-describedby' );
 		expect(
 			// eslint-disable-next-line testing-library/no-node-access
-			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
+			help.closest( `#${ textarea.getAttribute( 'aria-describedby' ) }` )
 		).toBeVisible();
 	} );
 } );

package/src/base-control/types.ts

@@ -21,8 +21,7 @@ export type BaseControlProps = {
 	/**
 	 * Additional description for the control.
 	 *
-	 * It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`.
-	 * When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+	 * The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**

package/src/border-control/types.ts

@@ -61,6 +61,10 @@ export type BorderControlProps = ColorProps &
 		 * interaction that selects or clears, border color, style, or width.
 		 */
 		onChange: ( value?: Border ) => void;
+		/**
+		 * Placeholder text for the number input.
+		 */
+		placeholder?: HTMLInputElement[ 'placeholder' ];
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */

package/src/button/index.native.js

@@ -183,7 +183,7 @@ export function Button( props ) {
 			accessible
 			accessibilityLabel={ label }
 			accessibilityStates={ states }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			style={ containerStyle }

package/src/button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ComponentPropsWithoutRef,
 	ForwardedRef,
@@ -141,7 +141,7 @@ export function UnforwardedButton(
 		'mixed',
 	];
 
-	const classes = classnames( 'components-button', className, {
+	const classes = clsx( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
@@ -174,14 +174,16 @@ export function UnforwardedButton(
 	const anchorProps: ComponentPropsWithoutRef< 'a' > =
 		Tag === 'a' ? { href, target } : {};
 
+	const disableEventProps: {
+		[ key: string ]: ( event: MouseEvent ) => void;
+	} = {};
 	if ( disabled && isFocusable ) {
 		// In this case, the button will be disabled, but still focusable and
 		// perceivable by screen reader users.
 		buttonProps[ 'aria-disabled' ] = true;
 		anchorProps[ 'aria-disabled' ] = true;
-
 		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
-			additionalProps[ disabledEvent ] = ( event: MouseEvent ) => {
+			disableEventProps[ disabledEvent ] = ( event: MouseEvent ) => {
 				if ( event ) {
 					event.stopPropagation();
 					event.preventDefault();
@@ -234,6 +236,7 @@ export function UnforwardedButton(
 			<a
 				{ ...anchorProps }
 				{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }
+				{ ...disableEventProps }
 				{ ...commonProps }
 			>
 				{ elementChildren }
@@ -242,6 +245,7 @@ export function UnforwardedButton(
 			<button
 				{ ...buttonProps }
 				{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }
+				{ ...disableEventProps }
 				{ ...commonProps }
 			>
 				{ elementChildren }

package/src/button/style.scss

@@ -93,8 +93,7 @@
 		&.is-busy[aria-disabled="true"] {
 			color: $components-color-accent-inverted;
 			background-size: 100px 100%;
-			// Disable reason: This function call looks nicer when each argument is on its own line.
-			/* stylelint-disable */
+			/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 			background-image: linear-gradient(
 				-45deg,
 				$components-color-accent 33%,
@@ -163,13 +162,13 @@
 
 		&:hover:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
@@ -262,8 +261,7 @@
 		}
 		opacity: 1;
 		background-size: 100px 100%;
-		// Disable reason: This function call looks nicer when each argument is on its own line.
-		/* stylelint-disable */
+		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
 			-45deg,
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)

package/src/button-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -20,7 +20,7 @@ function UnforwardedButtonGroup(
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const { className, ...restProps } = props;
-	const classes = classnames( 'components-button-group', className );
+	const classes = clsx( 'components-button-group', className );
 
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />

package/src/checkbox-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -103,7 +103,7 @@ export function CheckboxControl(
 					</span>
 				)
 			}
-			className={ classnames( 'components-checkbox-control', className ) }
+			className={ clsx( 'components-checkbox-control', className ) }
 		>
 			<HStack spacing={ 0 } justify="start" alignment="top">
 				<span className="components-checkbox-control__input-container">

package/src/circular-option-picker/circular-option-picker-actions.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -20,7 +20,7 @@ export function DropdownLinkAction( {
 }: DropdownLinkActionProps ) {
 	return (
 		<Dropdown
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__dropdown-link-action',
 				className
 			) }
@@ -47,7 +47,7 @@ export function ButtonAction( {
 }: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__clear',
 				className
 			) }