Commit 93bdd0ea67 for woocommerce

commit 93bdd0ea6700e11d8ec3ea775990747e9674af2c
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date:   Mon Jan 12 18:02:26 2026 +0530

    Fix deprecation notices in Product Collection block (#62705)

    * Add __nextHasNoMarginBottom prop to FormTokenField

    * Add __nextHasNoMarginBottom prop to ToggleGroupControl

    * Add __nextHasNoMarginBottom prop to SelectControl

    * Add __nextHasNoMarginBottom prop to ToggleControl components

    * Add __nextHasNoMarginBottom prop to RangeControl

    * Add __nextHasNoMarginBottom prop to TextControl

    * Add changelog file

    * Remove __nextHasNoMarginBottom prop from ToggleGroupControl in product image edit component

    * Add __nextHasNoMarginBottom prop to BaseControl

    * Add __nextHasNoMarginBottom prop to CheckboxControl

    * Add __next40pxDefaultSize prop to various inspector controls

    * Add __next40pxDefaultSize and __nextHasNoMarginBottom props to TextControl and FormTokenField in SearchListControl

    * Update SearchListControl styles to remove deprecated class names

    ---------

    Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>

diff --git a/plugins/woocommerce/changelog/61831-fix-deprecation-warnings-product-collection-block b/plugins/woocommerce/changelog/61831-fix-deprecation-warnings-product-collection-block
new file mode 100644
index 0000000000..5a1d5b1110
--- /dev/null
+++ b/plugins/woocommerce/changelog/61831-fix-deprecation-warnings-product-collection-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix bottom margin deprecation notices for controls in the Product Collection block.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-advanced-controls/force-page-reload-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-advanced-controls/force-page-reload-control.tsx
index a415f19a6c..5d9333e2cd 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-advanced-controls/force-page-reload-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-advanced-controls/force-page-reload-control.tsx
@@ -56,6 +56,7 @@ const ForcePageReloadControl = ( props: ForcePageReloadControlProps ) => {

 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label={ __( 'Reload full page', 'woocommerce' ) }
 			help={ helpText }
 			checked={ forcePageReload }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx
index ba2f8ceb89..896e53efdc 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/columns-control.tsx
@@ -62,6 +62,7 @@ const ColumnsControl = ( props: DisplayLayoutControlProps ) => {
 			>
 				<RangeControl
 					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ columnsLabel }
 					onChange={ onColumnsChange }
 					value={ columns }
@@ -78,6 +79,7 @@ const ColumnsControl = ( props: DisplayLayoutControlProps ) => {
 				onDeselect={ onPanelDeselect }
 			>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					checked={ !! shrinkColumns }
 					label={ toggleLabel }
 					help={ toggleHelp }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx
index 0ab4ebb1c5..06ea395c9a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx
@@ -50,6 +50,8 @@ const CreatedControl = ( props: QueryControlProps ) => {
 			<Flex direction="column" gap={ 3 }>
 				<FlexItem>
 					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Created', 'woocommerce' ) }
 						isBlock
 						onChange={ ( value: ETimeFrameOperator ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx
index 8b6d99193f..0e28116002 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx
@@ -34,10 +34,12 @@ const FeaturedProductsControl = ( props: QueryControlProps ) => {
 			resetAllFilter={ deselectCallback }
 		>
 			<BaseControl
+				__nextHasNoMarginBottom
 				id="product-collection-featured-products-control"
 				label={ __( 'Featured', 'woocommerce' ) }
 			>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show only featured products', 'woocommerce' ) }
 					checked={ query.featured || false }
 					onChange={ ( featured ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx
index f7aaf82690..c7443a60eb 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx
@@ -175,6 +175,8 @@ export const HandPickedProductsControlField = ( {

 	return (
 		<FormTokenField
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			displayTransform={ transformTokenIntoProductName }
 			label={ __( 'Hand-Picked', 'woocommerce' ) }
 			onChange={ onTokenChange }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx
index 32bc7d73e9..78ed987b78 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx
@@ -47,6 +47,8 @@ const KeywordControl = ( props: QueryControlProps ) => {
 			resetAllFilter={ deselectCallback }
 		>
 			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Keyword', 'woocommerce' ) }
 				value={ querySearch }
 				onChange={ setQuerySearch }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx
index fc1a710257..4b63f3f3a8 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/layout-options-control.tsx
@@ -63,6 +63,8 @@ const LayoutOptionsControl = ( props: DisplayLayoutControlProps ) => {
 			} }
 		>
 			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Layout', 'woocommerce' ) }
 				isBlock
 				onChange={ ( value: LayoutOptions ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx
index 9df100aa9b..8dcd8ee7ff 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx
@@ -34,6 +34,7 @@ const OnSaleControl = ( props: QueryControlProps ) => {
 			resetAllFilter={ deselectCallback }
 		>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Show only products on sale', 'woocommerce' ) }
 				checked={ query.woocommerceOnSale || false }
 				onChange={ ( woocommerceOnSale ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control/order-by-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control/order-by-control.tsx
index c5d78ed17f..3ff094aeb3 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control/order-by-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control/order-by-control.tsx
@@ -35,6 +35,8 @@ const OrderByControl = ( {
 			resetAllFilter={ onDeselect }
 		>
 			<SelectControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				value={ selectedValue }
 				options={ orderOptions }
 				label={ label || __( 'Order by', 'woocommerce' ) }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/related-by-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/related-by-control.tsx
index c3114201b4..3d95427553 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/related-by-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/related-by-control.tsx
@@ -36,6 +36,7 @@ const RelatedByControl = ( {
 		<PanelBody title={ __( 'Related by', 'woocommerce' ) }>
 			<div className="wc-block-editor-product-collection-inspector-controls__relate-by">
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Categories', 'woocommerce' ) }
 					checked={ relatedBy?.categories }
 					onChange={ ( value ) => {
@@ -44,6 +45,7 @@ const RelatedByControl = ( {
 				/>

 				<CheckboxControl
+					__nextHasNoMarginBottom
 					label={ __( 'Tags', 'woocommerce' ) }
 					checked={ relatedBy?.tags }
 					onChange={ ( value ) => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx
index dfda601e68..dee74e6eec 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx
@@ -61,6 +61,8 @@ const StockStatusControl = ( props: QueryControlProps ) => {
 			isShownByDefault
 		>
 			<FormTokenField
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Stock Status', 'woocommerce' ) }
 				onChange={ ( statusLabels ) => {
 					const woocommerceStockStatus = statusLabels
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx
index 99504a0d5f..c229e4ad3f 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/taxonomy-item.tsx
@@ -208,6 +208,8 @@ const TaxonomyItem = ( { taxonomy, termIds, onChange }: TaxonomyItemProps ) => {
 	return (
 		<div className="wc-block-editor-product-collection-inspector__taxonomy-control">
 			<FormTokenField
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ taxonomy.name }
 				value={ existingTokens }
 				onInputChange={ handleSearch }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-page-context-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-page-context-control.tsx
index 61f0cba086..7053fe6e7e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-page-context-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-page-context-control.tsx
@@ -76,6 +76,8 @@ const InheritQueryControl = ( {
 			} }
 		>
 			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				className="wc-block-product-collection__inherit-query-control"
 				isBlock
 				label={ label }
@@ -134,6 +136,8 @@ const FilterableControl = ( {
 			} }
 		>
 			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				className="wc-block-product-collection__inherit-query-control"
 				isBlock
 				label={ label }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
index 79331777ae..edb6041c87 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
@@ -54,6 +54,8 @@ const WidthOptionsControl = ( {
 			isShownByDefault
 		>
 			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Width', 'woocommerce' ) }
 				value={ widthType }
 				help={ getHelpText( widthType ) }
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
index 9f8ad36109..19dfbbaae5 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
@@ -342,6 +342,8 @@ export const SearchListControl = < T extends object = object >(
 			<div className="woocommerce-search-list__search">
 				{ type === 'text' ? (
 					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ messages.search }
 						type="search"
 						value={ search }
@@ -349,6 +351,8 @@ export const SearchListControl = < T extends object = object >(
 					/>
 				) : (
 					<FormTokenField
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						disabled={ isLoading }
 						label={ messages.search }
 						onChange={ onRemoveToken }
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
index 17c067f295..107743a913 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
@@ -50,7 +50,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -59,7 +59,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-11"
                 type="search"
                 value=""
@@ -210,7 +210,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -219,7 +219,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-11"
               type="search"
               value=""
@@ -451,7 +451,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -460,7 +460,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-0"
                 type="search"
                 value=""
@@ -725,7 +725,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -734,7 +734,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-0"
               type="search"
               value=""
@@ -1080,7 +1080,7 @@ exports[`SearchListControl should render a search box and list of options with a
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -1089,7 +1089,7 @@ exports[`SearchListControl should render a search box and list of options with a
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-1"
                 type="search"
                 value=""
@@ -1354,7 +1354,7 @@ exports[`SearchListControl should render a search box and list of options with a
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -1363,7 +1363,7 @@ exports[`SearchListControl should render a search box and list of options with a
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-1"
               type="search"
               value=""
@@ -1709,7 +1709,7 @@ exports[`SearchListControl should render a search box and list of options, with
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -1718,7 +1718,7 @@ exports[`SearchListControl should render a search box and list of options, with
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-10"
                 type="search"
                 value=""
@@ -1791,7 +1791,7 @@ exports[`SearchListControl should render a search box and list of options, with
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -1800,7 +1800,7 @@ exports[`SearchListControl should render a search box and list of options, with
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-10"
               type="search"
               value=""
@@ -1954,7 +1954,7 @@ exports[`SearchListControl should render a search box and list of options, with
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -1963,7 +1963,7 @@ exports[`SearchListControl should render a search box and list of options, with
                 Testing search label
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-9"
                 type="search"
                 value=""
@@ -2228,7 +2228,7 @@ exports[`SearchListControl should render a search box and list of options, with
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -2237,7 +2237,7 @@ exports[`SearchListControl should render a search box and list of options, with
               Testing search label
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-9"
               type="search"
               value=""
@@ -2583,7 +2583,7 @@ exports[`SearchListControl should render a search box and no options 1`] = `
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -2592,7 +2592,7 @@ exports[`SearchListControl should render a search box and no options 1`] = `
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-4"
                 type="search"
                 value=""
@@ -2651,7 +2651,7 @@ exports[`SearchListControl should render a search box and no options 1`] = `
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -2660,7 +2660,7 @@ exports[`SearchListControl should render a search box and no options 1`] = `
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-4"
               type="search"
               value=""
@@ -2800,7 +2800,7 @@ exports[`SearchListControl should render a search box with a search term, and no
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -2809,7 +2809,7 @@ exports[`SearchListControl should render a search box with a search term, and no
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-8"
                 type="search"
                 value=""
@@ -3074,7 +3074,7 @@ exports[`SearchListControl should render a search box with a search term, and no
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -3083,7 +3083,7 @@ exports[`SearchListControl should render a search box with a search term, and no
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-8"
               type="search"
               value=""
@@ -3429,7 +3429,7 @@ exports[`SearchListControl should render a search box with a search term, and on
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -3438,7 +3438,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-5"
                 type="search"
                 value=""
@@ -3703,7 +3703,7 @@ exports[`SearchListControl should render a search box with a search term, and on
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -3712,7 +3712,7 @@ exports[`SearchListControl should render a search box with a search term, and on
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-5"
               type="search"
               value=""
@@ -4058,7 +4058,7 @@ exports[`SearchListControl should render a search box with a search term, and on
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -4067,7 +4067,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-6"
                 type="search"
                 value="BeRrY"
@@ -4186,7 +4186,7 @@ exports[`SearchListControl should render a search box with a search term, and on
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -4195,7 +4195,7 @@ exports[`SearchListControl should render a search box with a search term, and on
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-6"
               type="search"
               value="BeRrY"
@@ -4446,7 +4446,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -4455,7 +4455,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-2"
                 type="search"
                 value=""
@@ -4786,7 +4786,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -4795,7 +4795,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-2"
               type="search"
               value=""
@@ -5249,7 +5249,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
             class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
           >
             <div
-              class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+              class="components-base-control__field css-yj91it-StyledField ej5x27r3"
             >
               <label
                 class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -5258,7 +5258,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 Search for items
               </label>
               <input
-                class="components-text-control__input"
+                class="components-text-control__input is-next-40px-default-size"
                 id="inspector-text-control-3"
                 type="search"
                 value=""
@@ -5646,7 +5646,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
           class="components-base-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
         >
           <div
-            class="components-base-control__field css-10urnh1-StyledField-deprecatedMarginField ej5x27r3"
+            class="components-base-control__field css-yj91it-StyledField ej5x27r3"
           >
             <label
               class="components-base-control__label css-227y7a-StyledLabel-baseLabelTypography-labelStyles ej5x27r2"
@@ -5655,7 +5655,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
               Search for items
             </label>
             <input
-              class="components-text-control__input"
+              class="components-text-control__input is-next-40px-default-size"
               id="inspector-text-control-3"
               type="search"
               value=""