diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 3e183d48342e12..0b6f6748d8120c 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -24,6 +24,7 @@
 
 ### Internal
 
+-   Replace experimental `ZStack`, `HStack`, `Flex`, and `FlexItem` around the Duotone labeled swatch in the Filters panel ([#83061](https://github.com/WordPress/gutenberg/pull/83061)).
 -   Remove the `crossorigin` MutationObserver. Under `Document-Isolation-Policy: isolate-and-credentialless` cross-origin resources load without the attribute, and adding it broke any resource served without CORS headers ([#82614](https://github.com/WordPress/gutenberg/pull/82614)).
 -   Block bindings and variation transforms: Use the public `Menu` from `@wordpress/ui` instead of the private Components API. ([#81925](https://github.com/WordPress/gutenberg/pull/81925))
 -   Layout hooks: Use `normalizeLegacyLayout` in `useLayoutClasses`, `useLayoutStyles`, the block layout styles wrapper and `isAxialBlockGapAllowed`, replacing four inline copies of the legacy `inherit` / size check ([#82710](https://github.com/WordPress/gutenberg/pull/82710)).
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.jsx b/packages/block-editor/src/components/global-styles/filters-panel.jsx
index a7e7e562b0734e..dd574e6f29d25b 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.jsx
+++ b/packages/block-editor/src/components/global-styles/filters-panel.jsx
@@ -1,18 +1,15 @@
 import clsx from 'clsx';
 import {
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalHStack as HStack, // eslint-disable-line @wordpress/use-recommended-components
-	__experimentalZStack as ZStack, // eslint-disable-line @wordpress/use-recommended-components
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
 	DuotoneSwatch,
 	Dropdown,
-	Flex,
-	FlexItem,
 	Button,
 } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { reset as resetIcon } from '@wordpress/icons';
@@ -101,23 +98,25 @@ const popoverProps = {
 };
 
 const LabeledColorIndicator = ( { indicator, label } ) => (
-	<HStack justify="flex-start">
-		<ZStack isLayered={ false } offset={ -8 }>
-			<Flex expanded={ false }>
-				{ indicator === 'unset' || ! indicator ? (
-					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
-				) : (
-					<DuotoneSwatch values={ indicator } />
-				) }
-			</Flex>
-		</ZStack>
-		<FlexItem
+	<Stack
+		className="block-editor-panel-duotone-settings__label-row"
+		direction="row"
+		align="center"
+		justify="flex-start"
+		gap="sm"
+	>
+		{ indicator === 'unset' || ! indicator ? (
+			<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+		) : (
+			<DuotoneSwatch values={ indicator } />
+		) }
+		<span
 			className="block-editor-panel-duotone-settings__label"
 			title={ label }
 		>
 			{ label }
-		</FlexItem>
-	</HStack>
+		</span>
+	</Stack>
 );
 
 const renderToggle = ( duotone, resetConfig ) =>
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 40d0d34ace7a45..fa07f6d7180e76 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -57,6 +57,15 @@
 	}
 }
 
+.block-editor-panel-duotone-settings__label-row {
+	width: 100%;
+	min-width: 0;
+}
+
+.block-editor-panel-duotone-settings__label {
+	min-width: 0;
+}
+
 .block-editor-global-styles__shadow-editor__remove-button {
 	position: absolute;
 	right: 0;
diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json
index 96ee7fb8e92ac5..c8b1c52fc41862 100644
--- a/tools/eslint/suppressions.json
+++ b/tools/eslint/suppressions.json
@@ -1116,9 +1116,6 @@
 		}
 	},
 	"packages/block-editor/src/components/global-styles/filters-panel.jsx": {
-		"@wordpress/use-recommended-components": {
-			"count": 2
-		},
 		"react/jsx-filename-extension": {
 			"count": 1
 		}