@wordpress/components 27.6.0 → 28.0.0

package/src/font-size-picker/index.tsx

@@ -36,7 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
-const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = (
 		units
 	);
 	const isValueUnitRelative =
-		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
 	const isDisabled = value === undefined;
 
 	return (

package/src/form-token-field/index.tsx

@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )

package/src/index.native.js

@@ -111,7 +111,6 @@ export { default as Image } from './mobile/image';
 export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
-export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
@@ -131,18 +130,5 @@ export {
 	getValueAndUnit,
 } from './mobile/utils/use-unit-converter-to-mobile';
 
-export {
-	default as GlobalStylesContext,
-	useGlobalStyles,
-	withGlobalStyles,
-	getMergedGlobalStyles,
-} from './mobile/global-styles-context';
-export {
-	getGlobalStyles,
-	getColorsAndGradients,
-	useMobileGlobalStylesColors,
-	useEditorColorScheme,
-} from './mobile/global-styles-context/utils';
-
 // Private APIs.
 export { privateApis } from './private-apis';

package/src/index.ts

@@ -132,6 +132,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as ProgressBar } from './progress-bar';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';

package/src/input-control/input-base.tsx

@@ -64,7 +64,7 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 	return props;
 }
 
-export function InputBase(
+function InputBase(
 	props: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
@@ -144,4 +144,8 @@ export function InputBase(
 	);
 }
 
+/**
+ * `InputBase` is an internal component used to style the standard borders for an input,
+ * as well as handle the layout for prefix/suffix elements.
+ */
 export default contextConnect( InputBase, 'InputBase' );

package/src/input-control/styles/input-control-styles.tsx

@@ -83,8 +83,6 @@ export const Root = styled( Flex )`
 
 	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
 	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
-		z-index: 1;
-
 		${ BackdropUI } {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };

package/src/keyboard-shortcuts/stories/index.story.tsx

@@ -32,7 +32,9 @@ Default.args = {
 	},
 	children: (
 		<div>
-			<p>{ `Hit the "a" or "b" key in this textarea:` }</p>
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			<p>Hit the "a" or "b" key in this textarea:</p>
+			{ /* eslint-enable react/no-unescaped-entities */ }
 			<textarea />
 		</div>
 	),

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

@@ -54,7 +54,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 
 	return (
 		<>
-			<MenuGroup label={ 'View' }>
+			<MenuGroup label="View">
 				<MenuItem>Top Toolbar</MenuItem>
 				<MenuItem>Spotlight Mode</MenuItem>
 				<MenuItem>Distraction Free</MenuItem>

package/src/mobile/autocompletion-items.native.js

@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import { createSlotFill } from '../slot-fill';
 
 const { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' );
 

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -16,13 +16,14 @@ import {
 /**
  * WordPress dependencies
  */
-import { BottomSheetContext } from '@wordpress/components';
+
 import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
+import { BottomSheetContext } from '../bottom-sheet-context';
 import styles from './styles.scss';
 
 const BottomSheetNavigationScreen = ( {

package/src/mobile/bottom-sheet/cell.native.js

@@ -14,7 +14,6 @@ import {
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -27,6 +26,7 @@ import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
 import LockIcon from './lock-icon';
+import Icon from '../../icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -272,7 +272,7 @@ class BottomSheetCell extends Component {
 				<Text
 					style={ textStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ value }
 				</Text>
@@ -419,7 +419,7 @@ class BottomSheetCell extends Component {
 						{ customActionButton && (
 							<TouchableOpacity
 								onPress={ handler }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 							>
 								<Text style={ resetButtonStyle }>
 									{ title }

package/src/mobile/bottom-sheet/color-cell.native.js

@@ -3,12 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
-import { ColorIndicator } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import Cell from './cell';
 import styles from './styles.scss';
+import ColorIndicator from '../../color-indicator';
 
 export default function BottomSheetColorCell( props ) {
 	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
@@ -16,7 +17,7 @@ export default function BottomSheetColorCell( props ) {
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={
 				/* translators: accessibility text (hint for moving to color settings) */
 				__( 'Double tap to go to color settings' )

package/src/mobile/bottom-sheet/footer-message-cell.native.js

@@ -13,8 +13,8 @@ function FooterMessageCell( { textAlign = 'left', ...props } ) {
 		<Cell
 			{ ...props }
 			editable={ false }
-			value={ '' }
-			accessibilityRole={ 'text' }
+			value=""
+			accessibilityRole="text"
 			labelStyle={ [ styles.footerMessageCell, { textAlign } ] }
 		/>
 	);

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -64,7 +64,7 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
-			separatorType={ 'none' }
+			separatorType="none"
 			cellContainerStyle={ suggestionStyles.itemContainerStyle }
 			labelStyle={ suggestionStyles.hidden }
 			valueStyle={ suggestionStyles.hidden }
@@ -73,14 +73,14 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 				<Text
 					style={ titleStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ title }
 				</Text>
 				<Text
 					style={ summaryStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ summary }
 				</Text>

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

@@ -18,7 +18,7 @@ function ActionButton( {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityLabel={ accessibilityLabel }
 			accessibilityHint={ accessibilityHint }
 		>

package/src/mobile/bottom-sheet/radio-cell.native.js

@@ -21,14 +21,14 @@ export default function BottomSheetRadioCell( props ) {
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'radio' }
+			accessibilityRole="radio"
 			accessibilityState={ { selected } }
 			accessibilityHint={
 				/* translators: accessibility text (hint for selecting option) */
 				__( 'Double tap to select the option' )
 			}
 			editable={ false }
-			value={ '' }
+			value=""
 			showLockIcon={ selected }
 		>
 			{ selected && (

package/src/mobile/bottom-sheet/stepper-cell/stepper.android.js

@@ -56,7 +56,7 @@ function Stepper( {
 			) }
 			{ children }
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }

package/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js

@@ -49,7 +49,7 @@ function Stepper( {
 				<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -7,7 +7,12 @@ import { SafeAreaView } from 'react-native';
  * WordPress dependencies
  */
 import { Children, useEffect, useContext } from '@wordpress/element';
-import { createSlotFill, BottomSheetContext } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { BottomSheetContext } from '../bottom-sheet-context';
+import { createSlotFill } from '../../../slot-fill';
 
 const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
 

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -54,14 +54,14 @@ export default function BottomSheetSwitchCell( props ) {
 		<Cell
 			{ ...cellProps }
 			accessibilityLabel={ getAccessibilityLabel() }
-			accessibilityRole={ 'none' }
+			accessibilityRole="none"
 			accessibilityHint={
 				/* translators: accessibility text (hint for switches) */
 				__( 'Double tap to toggle setting' )
 			}
 			onPress={ onPress }
 			editable={ false }
-			value={ '' }
+			value=""
 			disabled={ disabled }
 			disabledStyle={ EMPTY_STYLE }
 		>

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -10,11 +10,12 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import BottomSheet from '../bottom-sheet';
 
 const EMPTY_OPTION = {
 	label: '',
@@ -61,7 +62,7 @@ const BottomSheetSelectControl = ( {
 					icon={ icon }
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
 						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
@@ -97,7 +98,7 @@ const BottomSheetSelectControl = ( {
 							onPress={ onChangeValue( item.value ) }
 							leftAlign
 							key={ index }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -10,16 +10,14 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	BottomSheet,
-	PanelBody,
-	FooterMessageControl,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import PanelBody from '../../panel/body';
+import FooterMessageControl from '../../footer-message-control';
 
 const BottomSheetTextControl = ( {
 	initialValue,
@@ -84,9 +82,9 @@ const BottomSheetTextControl = ( {
 						defaultValue={ initialValue }
 						multiline
 						placeholder={ placeholder }
-						placeholderTextColor={ '#87a6bc' }
+						placeholderTextColor="#87a6bc"
 						style={ textEditorStyle }
-						textAlignVertical={ 'top' }
+						textAlignVertical="top"
 					/>
 				</PanelBody>
 			</>

package/src/mobile/color-settings/index.native.js

@@ -7,7 +7,6 @@ import { useRoute } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { memo, useEffect, useContext } from '@wordpress/element';
-import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,6 +14,8 @@ import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 import PickerScreen from './picker-screen';
 import GradientPickerScreen from './gradient-picker-screen';
 import PaletteScreen from './palette.screen';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 import { colorsUtils } from './utils';
 

package/src/mobile/color-settings/palette.screen.native.js

@@ -9,12 +9,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { useState, useContext } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	ColorControl,
-	PanelBody,
-	BottomSheetContext,
-	useMobileGlobalStylesColors,
-} from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
@@ -25,6 +19,9 @@ import ColorIndicator from '../../color-indicator';
 import NavBar from '../bottom-sheet/nav-bar';
 import SegmentedControls from '../segmented-control';
 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';
 
@@ -55,7 +52,7 @@ const PaletteScreen = () => {
 	const currentSegmentColors = ! isGradientSegment
 		? defaultSettings.colors
 		: defaultSettings.gradients;
-	const allAvailableColors = useMobileGlobalStylesColors();
+	const allAvailableColors = defaultSettings?.allAvailableColors || [];
 	const allAvailableGradients = currentSegmentColors
 		.flatMap( ( { gradients } ) => gradients )
 		.filter( Boolean );

package/src/mobile/color-settings/picker-screen.native.js

@@ -7,12 +7,12 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { useContext, useMemo } from '@wordpress/element';
-import { BottomSheetContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '../../color-picker';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 const PickerScreen = () => {
 	const route = useRoute();

package/src/mobile/focal-point-settings-panel/index.native.js

@@ -9,13 +9,14 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  */
 import { __ } from '@wordpress/i18n';
 import { memo, useContext, useState, useCallback } from '@wordpress/element';
-import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
+import FocalPointPicker from '../../focal-point-picker';
 
 const FocalPointSettingsPanelMemo = memo(
 	( {

package/src/mobile/gradient/index.native.js

@@ -7,7 +7,6 @@ import gradientParser from 'gradient-parser';
 /**
  * WordPress dependencies
  */
-import { colorsUtils } from '@wordpress/components';
 import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
@@ -16,6 +15,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { colorsUtils } from '../color-settings/utils';
 
 export function getGradientAngle( gradientValue ) {
 	const angleBase = 45;

package/src/mobile/image/icon-customize.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

package/src/mobile/image/icon-retry.native.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill={ 'none' } />
+		<Path d="M0 0h24v24H0z" fill="none" />
 	</SVG>
 );

package/src/mobile/image/image-editing-button.native.js

@@ -6,7 +6,6 @@ import { TouchableWithoutFeedback, View, Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { MediaEdit } from '../media-edit';
 import SvgIconCustomize from './icon-customize';
 import styles from './style.scss';
+import Icon from '../../icon';
 
 const accessibilityHint =
 	Platform.OS === 'ios'
@@ -40,7 +40,7 @@ const ImageEditingButton = ( {
 				<TouchableWithoutFeedback
 					accessibilityHint={ accessibilityHint }
 					accessibilityLabel={ __( 'Edit image' ) }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					onPress={ open }
 				>
 					<View style={ styles.editContainer }>

package/src/mobile/image/index.native.js

@@ -8,7 +8,6 @@ import FastImage from 'react-native-fast-image';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/components';
 import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useEffect, useState, Platform } from '@wordpress/element';
@@ -20,6 +19,7 @@ import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
+import Icon from '../../icon';
 
 const ICON_TYPE = {
 	OFFLINE: 'offline',
@@ -285,7 +285,7 @@ const ImageComponent = ( {
 				disabled={ ! isSelected }
 				accessibilityLabel={ alt }
 				accessibilityHint={ __( 'Double tap and hold to edit' ) }
-				accessibilityRole={ 'imagebutton' }
+				accessibilityRole="imagebutton"
 				key={ url }
 				style={ imageContainerStyles }
 			>

package/src/mobile/link-picker/index.native.js

@@ -9,7 +9,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 import { useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet, Icon } from '@wordpress/components';
 import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -20,6 +19,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import LinkPickerResults from './link-picker-results';
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import Icon from '../../icon';
 
 // This creates a search suggestion for adding a url directly.
 export const createDirectEntry = ( value ) => {

package/src/mobile/link-picker/link-picker-results.native.js

@@ -6,7 +6,6 @@ import { ActivityIndicator, FlatList, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -15,6 +14,8 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context';
 
 const PER_PAGE = 20;
 const REQUEST_DEBOUNCE_DELAY = 400;

package/src/mobile/link-settings/link-rel.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 
 export default (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/src/mobile/media-edit/index.native.js

@@ -3,12 +3,16 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
 import {
 	requestMediaEditor,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
 
+/**
+ * Internal dependencies
+ */
+import Picker from '../picker';
+
 export const MEDIA_TYPE_IMAGE = 'image';
 
 export const MEDIA_EDITOR = 'MEDIA_EDITOR';