fix: Wrong import group for components/

packages/components/src/autocomplete/autocompleter-ui.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { createPortal } from 'react-dom';
 
 /**
  * WordPress dependencies
@@ -14,8 +15,8 @@ import {
 } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
 import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -24,7 +25,6 @@ import getDefaultUseItems from './get-default-use-items';
 import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
-import { createPortal } from 'react-dom';
 import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
 type ListBoxProps = {

packages/components/src/box-control/utils.ts

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import type {
 	CustomValueUnits,
 	Preset,
 } from './types';
-import deprecated from '@wordpress/deprecated';
 
 export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
 	px: { max: 300, step: 1 },

packages/components/src/button/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import { press } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -15,7 +16,6 @@ import { plusCircle } from '@wordpress/icons';
 import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
-import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 

packages/components/src/color-picker/test/index.tsx

@@ -3,6 +3,7 @@
  */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),

packages/components/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,6 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
-import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

packages/components/src/dimension-control/index.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
 import { ContextSystemProvider } from '../context';
-import deprecated from '@wordpress/deprecated';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const CONTEXT_VALUE = {

packages/components/src/disabled/test/index.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Disabled from '../';
-import userEvent from '@testing-library/user-event';
 
 describe( 'Disabled', () => {
 	const Form = () => (

packages/components/src/duotone-picker/color-list-picker/index.tsx

@@ -4,6 +4,7 @@
 import { useState } from '@wordpress/element';
 import { swatch } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,7 +14,6 @@ import ColorPalette from '../../color-palette';
 import ColorIndicator from '../../color-indicator';
 import Icon from '../../icon';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
-import { useInstanceId } from '@wordpress/compose';
 
 function ColorOption( {
 	label,

packages/components/src/focal-point-picker/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -33,7 +34,6 @@ import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
 } from './types';
-import type { KeyboardEventHandler } from 'react';
 
 const GRID_OVERLAY_TIMEOUT = 600;
 

packages/components/src/menu/radio-item.tsx

@@ -8,6 +8,7 @@ import * as Ariakit from '@ariakit/react';
  */
 import { forwardRef, useContext } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
+import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -16,7 +17,6 @@ import type { WordPressComponentProps } from '../context';
 import { Context } from './context';
 import type { RadioItemProps } from './types';
 import * as Styled from './styles';
-import { SVG, Circle } from '@wordpress/primitives';
 
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

packages/components/src/mobile/color-settings/palette.screen.native.js

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useContext } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
  * Internal dependencies
@@ -22,7 +22,6 @@ import { colorsUtils } from './utils';
 import PanelBody from '../../panel/body';
 import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 import ColorControl from '../../color-control';
-
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };

packages/components/src/modal/use-modal-exit-animation.ts

@@ -3,12 +3,12 @@
  */
 import { useReducedMotion } from '@wordpress/compose';
 import { useCallback, useRef, useState } from '@wordpress/element';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import { CONFIG } from '../utils';
-import warning from '@wordpress/warning';
 
 // Animation duration (ms) extracted to JS in order to be used on a setTimeout.
 const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;

packages/components/src/navigator/navigator/component.tsx

@@ -9,6 +9,7 @@ import type { ForwardedRef } from 'react';
 import { useMemo, useReducer } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -28,7 +29,6 @@ import type {
 	Screen,
 	NavigateToParentOptions,
 } from '../types';
-import deprecated from '@wordpress/deprecated';
 
 type MatchedPath = ReturnType< typeof patternMatch >;
 

packages/components/src/notice/list.native.js

@@ -8,13 +8,13 @@ import { View } from 'react-native';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Notice from './';
 import styles from './style.scss';
-import { useCallback } from '@wordpress/element';
 
 function NoticeList() {
 	const { notices } = useSelect( ( select ) => {

packages/components/src/panel/row.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies

packages/components/src/query-controls/category-select.tsx

@@ -1,13 +1,13 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { buildTermsTree } from './terms';
-import TreeSelect from '../tree-select';
+import { useMemo } from '@wordpress/element';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
 import type { CategorySelectProps } from './types';
 
 export default function CategorySelect( {

packages/components/src/search-control/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -18,7 +19,6 @@ import deprecated from '@wordpress/deprecated';
 import Button from '../button';
 import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { SearchControlProps, SuffixItemProps } from './types';
-import type { ForwardedRef } from 'react';
 import { ContextSystemProvider } from '../context';
 import { StyledInputControl, SuffixItemWrapper } from './styles';
 

packages/components/src/slot-fill/provider.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { observableMap } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -15,7 +16,6 @@ import type {
 	SlotFillProviderProps,
 	SlotKey,
 } from './types';
-import { observableMap } from '@wordpress/compose';
 
 function createSlotRegistry(): BaseSlotFillContext {
 	const slots = observableMap< SlotKey, BaseSlotInstance >();

packages/components/src/tabs/tab.tsx

@@ -1,22 +1,21 @@
 /**
  * WordPress dependencies
  */
-
 import { forwardRef } from '@wordpress/element';
+import warning from '@wordpress/warning';
+import { chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import type { TabProps } from './types';
-import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
 import {
 	Tab as StyledTab,
 	TabChildren as StyledTabChildren,
 	TabChevron as StyledTabChevron,
 } from './styles';
 import type { WordPressComponentProps } from '../context';
-import { chevronRight } from '@wordpress/icons';
 
 export const Tab = forwardRef<
 	HTMLButtonElement,

packages/components/src/tabs/tabpanel.tsx

@@ -7,14 +7,13 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import type { TabPanelProps } from './types';
 import { TabPanel as StyledTabPanel } from './styles';
-
-import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
 import type { WordPressComponentProps } from '../context';
 

packages/components/src/text/hook.ts

@@ -3,6 +3,7 @@
  */
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
+import type React from 'react';
 
 /**
  * WordPress dependencies
@@ -23,7 +24,6 @@ import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 import { useCx } from '../utils/hooks/use-cx';
 import type { Props } from './types';
-import type React from 'react';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props

packages/components/src/toggle-group-control/toggle-group-control/component.tsx

@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
-import { useMergeRefs } from '@wordpress/compose';
 import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';