@wordpress/components 29.1.1 → 29.3.0

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

@@ -20,10 +20,10 @@ import Button from '../../button';
 import Modal from '../../modal';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
-import type { MenuProps } from '../types';
+import type { Props } from '../types';
 
 const meta: Meta< typeof Menu > = {
-	id: 'components-experimental-menu',
+	id: 'components-menu',
 	title: 'Components (Experimental)/Actions/Menu',
 	component: Menu,
 	subcomponents: {
@@ -183,7 +183,7 @@ export const WithSubmenu: StoryObj< typeof Menu > = {
 };
 
 export const WithCheckboxes: StoryObj< typeof Menu > = {
-	render: function WithCheckboxes( props: MenuProps ) {
+	render: function WithCheckboxes( props: Props ) {
 		const [ isAChecked, setAChecked ] = useState( false );
 		const [ isBChecked, setBChecked ] = useState( true );
 		const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] =
@@ -333,7 +333,7 @@ export const WithCheckboxes: StoryObj< typeof Menu > = {
 };
 
 export const WithRadios: StoryObj< typeof Menu > = {
-	render: function WithRadios( props: MenuProps ) {
+	render: function WithRadios( props: Props ) {
 		const [ radioValue, setRadioValue ] = useState( 'two' );
 		const onRadioChange: React.ComponentProps<
 			typeof Menu.RadioItem
@@ -411,7 +411,7 @@ const modalOnTopOfMenuPopover = css`
 `;
 
 export const WithModals: StoryObj< typeof Menu > = {
-	render: function WithModals( props: MenuProps ) {
+	render: function WithModals( props: Props ) {
 		const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
 		const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
 
@@ -527,7 +527,7 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 };
 
 export const WithSlotFill: StoryObj< typeof Menu > = {
-	render: ( props: MenuProps ) => {
+	render: ( props: Props ) => {
 		return (
 			<SlotFillProvider>
 				<Menu { ...props }>
@@ -579,7 +579,7 @@ const toolbarVariantContextValue = {
 };
 
 export const ToolbarVariant: StoryObj< typeof Menu > = {
-	render: ( props: MenuProps ) => (
+	render: ( props: Props ) => (
 		// TODO: add toolbar
 		<ContextSystemProvider value={ toolbarVariantContextValue }>
 			<Menu { ...props }>
@@ -619,7 +619,7 @@ export const ToolbarVariant: StoryObj< typeof Menu > = {
 };
 
 export const InsideModal: StoryObj< typeof Menu > = {
-	render: function InsideModal( props: MenuProps ) {
+	render: function InsideModal( props: Props ) {
 		const [ isModalOpen, setModalOpen ] = useState( false );
 		return (
 			<>

package/src/menu/styles.ts

@@ -12,7 +12,7 @@ import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
 import { Truncate } from '../truncate';
-import type { MenuContext } from './types';
+import type { ContextProps } from './types';
 
 const ANIMATION_PARAMS = {
 	SCALE_AMOUNT_OUTER: 0.82,
@@ -42,8 +42,8 @@ const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VAR
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
 
-export const MenuPopoverOuterWrapper = styled.div<
-	Pick< MenuContext, 'variant' >
+export const PopoverOuterWrapper = styled.div<
+	Pick< ContextProps, 'variant' >
 >`
 	position: relative;
 
@@ -95,7 +95,7 @@ export const MenuPopoverOuterWrapper = styled.div<
 	}
 `;
 
-export const MenuPopoverInnerWrapper = styled.div`
+export const PopoverInnerWrapper = styled.div`
 	position: relative;
 	/* Same as popover component */
 	/* TODO: is there a way to read the sass variable? */
@@ -219,7 +219,7 @@ const baseItem = css`
 	}
 
 	/* When the item is the trigger of an open submenu */
-	${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] {
+	${ PopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] {
 		background-color: ${ LIGHT_BACKGROUND_COLOR };
 		color: ${ COLORS.theme.foreground };
 	}
@@ -229,15 +229,15 @@ const baseItem = css`
 	}
 `;
 
-export const MenuItem = styled( Ariakit.MenuItem )`
+export const Item = styled( Ariakit.MenuItem )`
 	${ baseItem };
 `;
 
-export const MenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
+export const CheckboxItem = styled( Ariakit.MenuItemCheckbox )`
 	${ baseItem };
 `;
 
-export const MenuRadioItem = styled( Ariakit.MenuItemRadio )`
+export const RadioItem = styled( Ariakit.MenuItemRadio )`
 	${ baseItem };
 `;
 
@@ -249,14 +249,14 @@ export const ItemPrefixWrapper = styled.span`
 	 * Even when the item is not checked, occupy the same screen space to avoid
 	 * the space collapside when no items are checked.
 	 */
-	${ MenuCheckboxItem } > &,
-	${ MenuRadioItem } > & {
+	${ CheckboxItem } > &,
+	${ RadioItem } > & {
 		/* Same width as the check icons */
 		min-width: ${ space( 6 ) };
 	}
 
-	${ MenuCheckboxItem } > &,
-	${ MenuRadioItem } > &,
+	${ CheckboxItem } > &,
+	${ RadioItem } > &,
 	&:not( :empty ) {
 		margin-inline-end: ${ space( 2 ) };
 	}
@@ -278,7 +278,7 @@ export const ItemPrefixWrapper = styled.span`
 	}
 `;
 
-export const MenuItemContentWrapper = styled.div`
+export const ItemContentWrapper = styled.div`
 	/*
 	 * Always occupy the second column, since the first column
 	 * is taken by the prefix wrapper (when displayed).
@@ -293,7 +293,7 @@ export const MenuItemContentWrapper = styled.div`
 	pointer-events: none;
 `;
 
-export const MenuItemChildrenWrapper = styled.div`
+export const ItemChildrenWrapper = styled.div`
 	flex: 1;
 
 	display: inline-flex;
@@ -317,19 +317,19 @@ export const ItemSuffixWrapper = styled.span`
 	 * When the parent menu item is active, except when it's a non-focused/hovered
 	 * submenu trigger (in that case, color should not be inherited)
 	 */
-	[data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &,
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ PopoverInnerWrapper }) &,
 	/* When the parent menu item is disabled */
-	[aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & {
+	[aria-disabled='true'] *:not(${ PopoverInnerWrapper }) & {
 		color: inherit;
 	}
 `;
 
-export const MenuGroup = styled( Ariakit.MenuGroup )`
+export const Group = styled( Ariakit.MenuGroup )`
 	/* Ignore this element when calculating the layout. Useful for subgrid */
 	display: contents;
 `;
 
-export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
+export const GroupLabel = styled( Ariakit.MenuGroupLabel )`
 	/* Occupy the width of all grid columns (ie. full width) */
 	grid-column: 1 / -1;
 
@@ -338,8 +338,8 @@ export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
 	padding-inline: ${ ITEM_PADDING_INLINE };
 `;
 
-export const MenuSeparator = styled( Ariakit.MenuSeparator )<
-	Pick< MenuContext, 'variant' >
+export const Separator = styled( Ariakit.MenuSeparator )<
+	Pick< ContextProps, 'variant' >
 >`
 	/* Occupy the width of all grid columns (ie. full width) */
 	grid-column: 1 / -1;
@@ -370,22 +370,22 @@ export const SubmenuChevronIcon = styled( Icon )`
 	) };
 `;
 
-export const MenuItemLabel = styled( Truncate )`
+export const ItemLabel = styled( Truncate )`
 	font-size: ${ font( 'default.fontSize' ) };
 	line-height: 20px;
 	color: inherit;
 `;
 
-export const MenuItemHelpText = styled( Truncate )`
+export const ItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ LIGHTER_TEXT_COLOR };
 	overflow-wrap: anywhere;
 
 	[data-active-item]:not( [data-focus-visible] )
-		*:not( ${ MenuPopoverInnerWrapper } )
+		*:not( ${ PopoverInnerWrapper } )
 		&,
-	[aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & {
+	[aria-disabled='true'] *:not( ${ PopoverInnerWrapper } ) & {
 		color: inherit;
 	}
 `;

package/src/menu/submenu-trigger-item.tsx

@@ -13,16 +13,16 @@ import { chevronRightSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import type { MenuItemProps } from './types';
-import { MenuContext } from './context';
-import { MenuItem } from './item';
+import type { ItemProps } from './types';
+import { Context } from './context';
+import { Item } from './item';
 import * as Styled from './styles';
 
-export const MenuSubmenuTriggerItem = forwardRef<
+export const SubmenuTriggerItem = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< MenuItemProps, 'div', false >
->( function MenuSubmenuTriggerItem( { suffix, ...otherProps }, ref ) {
-	const menuContext = useContext( MenuContext );
+	WordPressComponentProps< ItemProps, 'div', false >
+>( function SubmenuTriggerItem( { suffix, ...otherProps }, ref ) {
+	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store.parent ) {
 		throw new Error(
@@ -36,10 +36,10 @@ export const MenuSubmenuTriggerItem = forwardRef<
 			accessibleWhenDisabled
 			store={ menuContext.store }
 			render={
-				<MenuItem
+				<Item
 					{ ...otherProps }
 					// The menu item needs to register and be part of the parent menu.
-					// Without specifying the store explicitly, the `MenuItem` component
+					// Without specifying the store explicitly, the `Item` component
 					// would otherwise read the store via context and pick up the one from
 					// the sub-menu `Menu` component.
 					store={ menuContext.store.parent }

package/src/menu/trigger-button.tsx

@@ -12,14 +12,14 @@ import { forwardRef, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import type { MenuTriggerButtonProps } from './types';
-import { MenuContext } from './context';
+import type { TriggerButtonProps } from './types';
+import { Context } from './context';
 
-export const MenuTriggerButton = forwardRef<
+export const TriggerButton = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< MenuTriggerButtonProps, 'button', false >
->( function MenuTriggerButton( { children, disabled = false, ...props }, ref ) {
-	const menuContext = useContext( MenuContext );
+	WordPressComponentProps< TriggerButtonProps, 'button', false >
+>( function TriggerButton( { children, disabled = false, ...props }, ref ) {
+	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {
 		throw new Error(

package/src/menu/types.ts

@@ -3,7 +3,7 @@
  */
 import type * as Ariakit from '@ariakit/react';
 
-export interface MenuContext {
+export interface ContextProps {
 	/**
 	 * The ariakit store shared across all Menu subcomponents.
 	 */
@@ -14,7 +14,7 @@ export interface MenuContext {
 	variant?: 'toolbar';
 }
 
-export interface MenuProps {
+export interface Props {
 	/**
 	 * The elements, which should include one instance of the `Menu.TriggerButton`
 	 * component and one instance of the `Menu.Popover` component.
@@ -50,7 +50,7 @@ export interface MenuProps {
 	placement?: Ariakit.MenuProviderProps[ 'placement' ];
 }
 
-export interface MenuPopoverProps {
+export interface PopoverProps {
 	/**
 	 * The contents of the menu popover, which should include instances of the
 	 * `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioItem`, `Menu.Group`, and
@@ -98,7 +98,7 @@ export interface MenuPopoverProps {
 	hideOnEscape?: Ariakit.MenuProps[ 'hideOnEscape' ];
 }
 
-export interface MenuTriggerButtonProps {
+export interface TriggerButtonProps {
 	/**
 	 * The contents of the menu trigger button.
 	 */
@@ -139,7 +139,7 @@ export interface MenuTriggerButtonProps {
 	accessibleWhenDisabled?: Ariakit.MenuButtonProps[ 'accessibleWhenDisabled' ];
 }
 
-export interface MenuGroupProps {
+export interface GroupProps {
 	/**
 	 * The contents of the menu group, which should include one instance of the
 	 * `Menu.GroupLabel` component and one or more instances of `Menu.Item`,
@@ -148,7 +148,7 @@ export interface MenuGroupProps {
 	children: Ariakit.MenuGroupProps[ 'children' ];
 }
 
-export interface MenuGroupLabelProps {
+export interface GroupLabelProps {
 	/**
 	 * The contents of the menu group label, which should provide an accessible
 	 * label for the menu group.
@@ -156,7 +156,7 @@ export interface MenuGroupLabelProps {
 	children: Ariakit.MenuGroupLabelProps[ 'children' ];
 }
 
-export interface MenuItemProps {
+export interface ItemProps {
 	/**
 	 * The contents of the menu item, which could include one instance of the
 	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
@@ -203,7 +203,7 @@ export interface MenuItemProps {
 	store?: Ariakit.MenuItemProps[ 'store' ];
 }
 
-export interface MenuCheckboxItemProps {
+export interface CheckboxItemProps {
 	/**
 	 * The contents of the menu item, which could include one instance of the
 	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
@@ -267,7 +267,7 @@ export interface MenuCheckboxItemProps {
 	onChange?: Ariakit.MenuItemCheckboxProps[ 'onChange' ];
 }
 
-export interface MenuRadioItemProps {
+export interface RadioItemProps {
 	/**
 	 * The contents of the menu item, which could include one instance of the
 	 * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText`
@@ -330,4 +330,4 @@ export interface MenuRadioItemProps {
 	onChange?: Ariakit.MenuItemRadioProps[ 'onChange' ];
 }
 
-export interface MenuSeparatorProps {}
+export interface SeparatorProps {}

package/src/menu-group/stories/index.story.tsx

@@ -76,8 +76,8 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
  * When other menu items exist above or below a MenuGroup, the group
  * should have a divider line between it and the adjacent item.
  */
-export const WithSeperator = MultiGroupsTemplate.bind( {} );
-WithSeperator.args = {
+export const WithSeparator = MultiGroupsTemplate.bind( {} );
+WithSeparator.args = {
 	...Default.args,
 	hideSeparator: false,
 	label: 'Editor',

package/src/mobile/bottom-sheet/nav-bar/action-button.native.js

@@ -8,7 +8,7 @@ import { View, TouchableWithoutFeedback } from 'react-native';
  */
 import styles from './styles.scss';
 
-// Action button component is used by both Back and Apply Button componenets.
+// Action button component is used by both Back and Apply Button components.
 function ActionButton( {
 	onPress,
 	accessibilityLabel,

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -71,7 +71,7 @@ function getFunctionUnitValue( functionUnitValue, options ) {
  * Take a css function such as min, max, calc, clamp and returns parsedUnit
  *
  * How this works for the nested function is that it first replaces the inner function call.
- * Then it tackles the outer onces.
+ * Then it tackles the outer ones.
  * So for example: min( max(25px, 35px), 40px )
  * in the first pass we would replace max(25px, 35px) with 35px.
  * then we would try to evaluate min( 35px, 40px )
@@ -101,7 +101,7 @@ function parseUnitFunction( cssUnit ) {
 /**
  * Return true if we think this is a math expression.
  *
- * @param {string} cssUnit the cssUnit value being evaluted.
+ * @param {string} cssUnit the cssUnit value being evaluated.
  * @return {boolean} Whether the cssUnit is a math expression.
  */
 function isMathExpression( cssUnit ) {
@@ -115,7 +115,7 @@ function isMathExpression( cssUnit ) {
 /**
  * Evaluates the math expression and return a px value.
  *
- * @param {string} cssUnit the cssUnit value being evaluted.
+ * @param {string} cssUnit the cssUnit value being evaluated.
  * @return {string} return a converfted value to px.
  */
 function evalMathExpression( cssUnit ) {

package/src/modal/style.scss

@@ -33,10 +33,12 @@
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
-	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
-	@include reduce-motion("animation");
+
+	@media not (prefers-reduced-motion) {
+		animation-duration: var(--modal-frame-animation-duration);
+	}
 
 	.components-modal__screen-overlay.is-animating-out & {
 		animation-name: components-modal__disappear-animation;

package/src/modal/test/index.tsx

@@ -398,7 +398,8 @@ describe( 'Modal', () => {
 			const [ isAShown, setIsAShown ] = useState( false );
 			const [ isA1Shown, setIsA1Shown ] = useState( false );
 			const [ isBShown, setIsBShown ] = useState( false );
-			const [ isClassOverriden, setIsClassOverriden ] = useState( false );
+			const [ isClassOverridden, setIsClassOverridden ] =
+				useState( false );
 			useEffect( () => {
 				const toggles: ( e: KeyboardEvent ) => void = ( {
 					key,
@@ -414,7 +415,7 @@ describe( 'Modal', () => {
 						return setIsBShown( ( v ) => ! v );
 					}
 					if ( key === 'c' ) {
-						return setIsClassOverriden( ( v ) => ! v );
+						return setIsClassOverridden( ( v ) => ! v );
 					}
 				};
 				document.addEventListener( 'keydown', toggles );
@@ -426,7 +427,7 @@ describe( 'Modal', () => {
 					{ isAShown && (
 						<Modal
 							bodyOpenClassName={
-								isClassOverriden ? overrideClass : 'is-A-open'
+								isClassOverridden ? overrideClass : 'is-A-open'
 							}
 							onRequestClose={ () => setIsAShown( false ) }
 						>
@@ -446,7 +447,7 @@ describe( 'Modal', () => {
 					{ isBShown && (
 						<Modal
 							bodyOpenClassName={
-								isClassOverriden ? overrideClass : 'is-B-open'
+								isClassOverridden ? overrideClass : 'is-B-open'
 							}
 							onRequestClose={ () => setIsBShown( false ) }
 						>

package/src/notice/README.md

@@ -134,9 +134,9 @@ Whether the notice should be dismissible or not
 
 #### `onDismiss` : `() => void`
 
-A deprecated alternative to `onRemove`. This prop is kept for compatibilty reasons but should be avoided.
+A deprecated alternative to `onRemove`. This prop is kept for compatibility reasons but should be avoided.
 
-- Requiered: No
+- Required: No
 - Default: `noop`
 
 #### `actions`: `Array<NoticeAction>`.
@@ -154,4 +154,4 @@ The default appearance of an action button is inferred based on whether `url` or
 ## Related components
 
 - To create a more prominent message that requires action, use a Modal.
-- For low priority, non-interruptive messsages, use Snackbar.
+- For low priority, non-interruptive messages, use Snackbar.

package/src/notice/types.ts

@@ -83,7 +83,7 @@ export type NoticeProps = {
 	isDismissible?: boolean;
 	/**
 	 * A deprecated alternative to `onRemove`. This prop is kept for
-	 * compatibilty reasons but should be avoided.
+	 * compatibility reasons but should be avoided.
 	 *
 	 * @default noop
 	 */

package/src/palette-edit/test/index.tsx

@@ -416,7 +416,7 @@ describe( 'PaletteEdit', () => {
 			/>
 		);
 
-		await click( screen.getByLabelText( 'Color: Primary' ) );
+		await click( screen.getByLabelText( 'Primary' ) );
 		const hexInput = screen.getByRole( 'textbox', {
 			name: 'Hex color',
 		} );

package/src/panel/style.scss

@@ -62,9 +62,12 @@
 	font-size: inherit;
 	margin-top: 0;
 	margin-bottom: 0;
-	transition: 0.1s background ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s background ease-in-out;
+	}
 }
+
 .components-panel__body.is-opened > .components-panel__body-title {
 	margin: -1 * $grid-unit-20;
 	margin-bottom: 5px;
@@ -87,8 +90,11 @@
 	color: $gray-900;
 	border: none;
 	box-shadow: none;
-	transition: 0.1s background ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s background ease-in-out;
+	}
+
 	height: auto;
 
 	&:focus {
@@ -103,8 +109,10 @@
 		transform: translateY(-50%);
 		color: $gray-900;
 		fill: currentColor;
-		transition: 0.1s color ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: 0.1s color ease-in-out;
+		}
 	}
 
 	// mirror the arrow horizontally in RTL languages

package/src/placeholder/style.scss

@@ -48,7 +48,7 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-05;
 		fill: currentColor;
-		// Optimizate for high contrast modes.
+		// Optimize for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
 		@media (forced-colors: active) {
 			fill: CanvasText;
@@ -173,8 +173,10 @@
 	.components-button {
 		opacity: 0;
 		pointer-events: none;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	.is-selected > & {

package/src/progress-bar/stories/index.story.tsx

@@ -43,7 +43,7 @@ const withCustomWidthCustomCSS = `
  * You can override the default `width` by passing a custom CSS class via the
  * `className` prop.
  *
- * This example shows a progress bar with an overriden `width` of `100%` which
+ * This example shows a progress bar with an overridden `width` of `100%` which
  * makes it fit all available horizontal space of the parent element. The CSS
  * class looks like this:
  *

package/src/resizable-box/style.scss

@@ -60,9 +60,12 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	position: absolute;
 	top: calc(50% - 1px);
 	right: calc(50% - 1px);
-	transition: transform 0.1s ease-in;
-	@include reduce-motion("transition");
-	will-change: transform;
+
+	@media not (prefers-reduced-motion) {
+		transition: transform 0.1s ease-in;
+		will-change: transform;
+	}
+
 	opacity: 0;
 }
 
@@ -102,18 +105,20 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
-	animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
+		animation-fill-mode: forwards;
+	}
 }
 
 .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
-	animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
+		animation-fill-mode: forwards;
+	}
 }
 
 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.

package/src/search-control/index.tsx

@@ -86,7 +86,7 @@ function UnforwardedSearchControl(
 		() => ( {
 			BaseControl: {
 				// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
-				// to provide backwards compatibile margin for SearchControl.
+				// to provide backwards compatible margin for SearchControl.
 				// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
 				_overrides: { __nextHasNoMarginBottom },
 				__associatedWPComponentName: 'SearchControl',

package/src/tab-panel/style.scss

@@ -40,8 +40,9 @@
 		border-radius: 0;
 
 		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s linear;
+		}
 	}
 
 	// Active.
@@ -68,8 +69,9 @@
 		border-radius: $radius-small;
 
 		// Animation
-		transition: all 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s linear;
+		}
 	}
 
 	&:focus-visible::before {