Font Library: Use SearchControl component for search input (#59589)

* Replace InputControl with SearchControl

* Match styling to previous search input

* Remove CSS for search input

Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -21,20 +20,15 @@ import {
 	Notice,
 	SelectControl,
 	Spinner,
-	Icon,
 	FlexItem,
 	Flex,
 	Button,
 	DropdownMenu,
+	SearchControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import {
-	search,
-	closeSmall,
-	moreVertical,
-	chevronLeft,
-} from '@wordpress/icons';
+import { moreVertical, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -168,11 +162,6 @@ function FontCollection( { slug } ) {
 		setPage( 1 );
 	};
 
-	const resetSearch = () => {
-		setFilters( { ...filters, search: '' } );
-		setPage( 1 );
-	};
-
 	const handleToggleVariant = ( font, face ) => {
 		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
 		setFontsToInstall( newFontsToInstall );
@@ -288,20 +277,14 @@ function FontCollection( { slug } ) {
 					<Spacer margin={ 4 } />
 					<Flex>
 						<FlexItem>
-							<InputControl
+							<SearchControl
+								className="font-library-modal__search"
 								value={ filters.search }
 								placeholder={ __( 'Font name…' ) }
 								label={ __( 'Search' ) }
 								onChange={ debouncedUpdateSearchInput }
-								prefix={ <Icon icon={ search } /> }
-								suffix={
-									filters?.search ? (
-										<Icon
-											icon={ closeSmall }
-											onClick={ resetSearch }
-										/>
-									) : null
-								}
+								__nextHasNoMarginBottom
+								hideLabelFromVision={ false }
 							/>
 						</FlexItem>
 						<FlexItem>