From ce4f6386c86c9f4b3a119888aa1ad1326f373ef4 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 13:00:47 -0600
Subject: [PATCH 1/6] Remove "experimental" designation for
 `AlignmentMatrixControl`

---
 .../src/components/block-alignment-matrix-control/index.js   | 2 +-
 packages/components/src/alignment-matrix-control/README.md   | 2 +-
 packages/components/src/alignment-matrix-control/index.tsx   | 2 +-
 .../src/alignment-matrix-control/stories/index.story.tsx     | 2 +-
 packages/components/src/index.ts                             | 5 ++++-
 storybook/manager-head.html                                  | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
index 53baa97421e6c..cdec41dfc7b97 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -6,7 +6,7 @@ import { DOWN } from '@wordpress/keycodes';
 import {
 	ToolbarButton,
 	Dropdown,
-	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
+	AlignmentMatrixControl,
 } from '@wordpress/components';
 
 const noop = () => {};
diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md
index d087a177d8d41..0d42e8718cff8 100644
--- a/packages/components/src/alignment-matrix-control/README.md
+++ b/packages/components/src/alignment-matrix-control/README.md
@@ -10,7 +10,7 @@ AlignmentMatrixControl components enable adjustments to horizontal and vertical
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+import { AlignmentMatrixControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ alignment, setAlignment ] = useState( 'center center' );
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
index 3de0e401187d5..d5417ddfbc421 100644
--- a/packages/components/src/alignment-matrix-control/index.tsx
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -25,7 +25,7 @@ import type { AlignmentMatrixControlProps } from './types';
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
  *
  * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { AlignmentMatrixControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
index 03bec9d92a8b7..9d276def5b001 100644
--- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx
+++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
@@ -17,7 +17,7 @@ import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
 const meta: Meta< typeof AlignmentMatrixControl > = {
-	title: 'Components (Experimental)/AlignmentMatrixControl',
+	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index a824162cb2412..e8982641641f3 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -12,7 +12,10 @@ export {
 } from '@wordpress/primitives';
 
 // Components.
-export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
+export {
+	default as __experimentalAlignmentMatrixControl,
+	AlignmentMatrixControl,
+} from './alignment-matrix-control';
 export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 629f06bf98edf..4e32ff5c30b85 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -1,6 +1,6 @@
 <script>
 	( function redirectIfStoryMoved() {
-		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'navigation' ];
+		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'navigation', 'alignmentmatrixcontrol' ];
 		const REDIRECTS = [
 			{
 				from: /\/components-deprecated-/,

From 51d389b4cb73811b2eed88aab931abf75f5486ed Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 17:05:17 -0600
Subject: [PATCH 2/6] Remove "experimental" designation for `BorderBoxControl`
 and related functions

---
 .../src/components/global-styles/border-panel.js            | 6 +++---
 packages/block-editor/src/hooks/border.js                   | 2 +-
 packages/block-library/src/table/edit.js                    | 2 +-
 .../src/border-box-control/border-box-control/README.md     | 2 +-
 .../src/border-box-control/border-box-control/component.tsx | 2 +-
 .../src/border-box-control/stories/index.story.tsx          | 2 +-
 packages/components/src/index.native.js                     | 5 ++++-
 packages/components/src/index.ts                            | 4 ++++
 .../edit-site/src/components/global-styles/screen-block.js  | 2 +-
 storybook/manager-head.html                                 | 6 +++++-
 10 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index e02616082cf6a..e2a88fbd9f8da 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
+	BorderBoxControl,
+	hasSplitBorders,
+	isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index a8ed9bccaf7df..78964409fa895 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
-import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
+import { hasSplitBorders } from '@wordpress/components';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index b8f239a01095d..408335c5d578e 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -26,7 +26,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
-	__experimentalHasSplitBorders as hasSplitBorders,
+	hasSplitBorders,
 } from '@wordpress/components';
 import {
 	alignLeft,
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 20352e03c8243..5d5be1cae690a 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -28,7 +28,7 @@ show "Mixed" placeholder text.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import { BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 26967ad7f63dd..f1a55f88c03b7 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -162,7 +162,7 @@ const UnconnectedBorderBoxControl = (
  * view's width input would show "Mixed" placeholder text.
  *
  * ```jsx
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { BorderBoxControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [
diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
index 5b5d7f311208c..7ac8cbbea8c15 100644
--- a/packages/components/src/border-box-control/stories/index.story.tsx
+++ b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -16,7 +16,7 @@ import Button from '../../button';
 import { BorderBoxControl } from '../';
 
 const meta: Meta< typeof BorderBoxControl > = {
-	title: 'Components (Experimental)/BorderBoxControl',
+	title: 'Components/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 1421316d27b40..be9366126c153 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -35,7 +35,10 @@ export {
 
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
-export { hasSplitBorders as __experimentalHasSplitBorders } from './border-box-control/utils';
+export {
+	hasSplitBorders as __experimentalHasSplitBorders,
+	hasSplitBorders,
+} from './border-box-control/utils';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';
 export { default as PanelActions } from './panel/actions';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e8982641641f3..67073824b3e23 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -36,6 +36,10 @@ export {
 	hasSplitBorders as __experimentalHasSplitBorders,
 	isDefinedBorder as __experimentalIsDefinedBorder,
 	isEmptyBorder as __experimentalIsEmptyBorder,
+	BorderBoxControl,
+	hasSplitBorders,
+	isDefinedBorder,
+	isEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 9811f10b834da..dfc4faf011d51 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -9,7 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import {
 	PanelBody,
 	__experimentalVStack as VStack,
-	__experimentalHasSplitBorders as hasSplitBorders,
+	hasSplitBorders,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 4e32ff5c30b85..6113a22defb2b 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -1,6 +1,10 @@
 <script>
 	( function redirectIfStoryMoved() {
-		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'navigation', 'alignmentmatrixcontrol' ];
+		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
+			'navigation',
+			'alignmentmatrixcontrol',
+			'borderboxcontrol'
+		];
 		const REDIRECTS = [
 			{
 				from: /\/components-deprecated-/,

From ddaca254571e4b4394c70044c3b725702637f3e4 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 17:41:58 -0600
Subject: [PATCH 3/6] Remove "experimental" designation for `BorderControl`

---
 .../components/src/border-control/border-control/README.md   | 2 +-
 .../src/border-control/border-control/component.tsx          | 2 +-
 .../components/src/border-control/stories/index.story.tsx    | 2 +-
 packages/components/src/index.ts                             | 5 ++++-
 storybook/manager-head.html                                  | 4 +++-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 51fb7172b7c55..292e1d1928829 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -21,7 +21,7 @@ a "shape" abstraction.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+import { BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 5fe2abce1b411..6dc3e8a6891ad 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -134,7 +134,7 @@ const UnconnectedBorderControl = (
  * a "shape" abstraction.
  *
  * ```jsx
- * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { BorderControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [
diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx
index 9a5349d302c27..19938db5d0e51 100644
--- a/packages/components/src/border-control/stories/index.story.tsx
+++ b/packages/components/src/border-control/stories/index.story.tsx
@@ -16,7 +16,7 @@ import { BorderControl } from '..';
 import type { Border } from '../types';
 
 const meta: Meta< typeof BorderControl > = {
-	title: 'Components (Experimental)/BorderControl',
+	title: 'Components/BorderControl',
 	component: BorderControl,
 	argTypes: {
 		onChange: {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 67073824b3e23..09e74414c2856 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -41,7 +41,10 @@ export {
 	isDefinedBorder,
 	isEmptyBorder,
 } from './border-box-control';
-export { BorderControl as __experimentalBorderControl } from './border-control';
+export {
+	BorderControl as __experimentalBorderControl,
+	BorderControl,
+} from './border-control';
 export {
 	default as __experimentalBoxControl,
 	applyValueToSides as __experimentalApplyValueToSides,
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 6113a22defb2b..95c08ff185e51 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -3,7 +3,9 @@
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'navigation',
 			'alignmentmatrixcontrol',
-			'borderboxcontrol'
+			'borderboxcontrol',
+			'bordercontrol',
+			'boxcontrol',
 		];
 		const REDIRECTS = [
 			{

From 65049e0b46cbd01ee5e27deec22b3a66217aa00c Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 17:57:35 -0600
Subject: [PATCH 4/6] Remove "experimental" designation for `BoxControl` and
 related function

---
 .../src/components/global-styles/dimensions-panel.js            | 2 +-
 packages/components/src/box-control/README.md                   | 2 +-
 packages/components/src/box-control/index.tsx                   | 2 +-
 packages/components/src/box-control/stories/index.story.tsx     | 2 +-
 packages/components/src/index.ts                                | 2 ++
 packages/components/src/tools-panel/tools-panel/README.md       | 2 +-
 6 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index 94e53eec16372..f4f82242c4d82 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 2fd214b79157f..1a4bd6ea53dff 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -10,7 +10,7 @@ BoxControl components let users set values for Top, Right, Bottom, and Left. Thi
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ values, setValues ] = useState( {
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 9c3452d4ccb80..3f9791c2ba4d7 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -51,7 +51,7 @@ function useUniqueId( idProp?: string ) {
  * This can be used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+ * import { BoxControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 1b6604048f6d5..783f9d047b1bb 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components (Experimental)/BoxControl',
+	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 09e74414c2856..d706b07453eb9 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -48,6 +48,8 @@ export {
 export {
 	default as __experimentalBoxControl,
 	applyValueToSides as __experimentalApplyValueToSides,
+	default as BoxControl,
+	applyValueToSides,
 } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index df41b623eefb6..feec34319c689 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,

From ddf02189b40ae2e977eec0050ef93657a2aba38f Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 18:05:17 -0600
Subject: [PATCH 5/6] Remove "experimental" designation for `ConfirmDialog`

---
 .../src/navigation/edit/navigation-menu-delete-control.js    | 5 +----
 packages/components/src/confirm-dialog/README.md             | 4 ++--
 packages/components/src/confirm-dialog/component.tsx         | 4 ++--
 .../components/src/confirm-dialog/stories/index.story.tsx    | 2 +-
 packages/components/src/index.ts                             | 5 ++++-
 .../global-styles/font-library-modal/installed-fonts.js      | 2 +-
 .../src/components/global-styles/screen-revisions/index.js   | 2 +-
 .../components/page-patterns/delete-category-menu-item.js    | 5 +----
 .../delete-confirm-dialog.js                                 | 2 +-
 packages/edit-site/src/components/template-actions/index.js  | 2 +-
 .../editor-canvas/edit-template-blocks-notification.js       | 2 +-
 .../src/components/post-switch-to-draft-button/index.js      | 5 +----
 packages/editor/src/components/post-trash/index.js           | 5 +----
 packages/editor/src/components/post-visibility/index.js      | 5 +----
 .../src/components/template-validation-notice/index.js       | 5 +----
 storybook/manager-head.html                                  | 1 +
 16 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
index 567e2a79abf4e..a0ccf29a702cd 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { Button, ConfirmDialog } from '@wordpress/components';
 import { store as coreStore, useEntityId } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md
index 3ad42d9d68160..2fbfaafa61628 100644
--- a/packages/components/src/confirm-dialog/README.md
+++ b/packages/components/src/confirm-dialog/README.md
@@ -23,7 +23,7 @@ Allows the component to be used standalone, just by declaring it as part of anot
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
 
 ```jsx
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -44,7 +44,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 7e787439d91df..d4c72c9b1570d 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -138,7 +138,7 @@ const UnconnectedConfirmDialog = (
  * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
  *
  * ```jsx
- * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ * import { ConfirmDialog } from '@wordpress/components';
  *
  * function Example() {
  * 	return (
@@ -158,7 +158,7 @@ const UnconnectedConfirmDialog = (
  * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
  *
  *```jsx
- * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ * import { ConfirmDialog } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * function Example() {
diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx
index 85636c0ddc81e..d242e765c7cbe 100644
--- a/packages/components/src/confirm-dialog/stories/index.story.tsx
+++ b/packages/components/src/confirm-dialog/stories/index.story.tsx
@@ -16,7 +16,7 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
+	title: 'Components/ConfirmDialog',
 	argTypes: {
 		isOpen: {
 			control: { type: null },
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index d706b07453eb9..9b33aec36262a 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -74,7 +74,10 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
-export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
+export {
+	ConfirmDialog as __experimentalConfirmDialog,
+	ConfirmDialog,
+} from './confirm-dialog';
 export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index b33bb1b639d00..4dad3cb386290 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	__experimentalConfirmDialog as ConfirmDialog,
+	ConfirmDialog,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index 6a20e23c91674..d2dc130699a40 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalUseNavigator as useNavigator,
-	__experimentalConfirmDialog as ConfirmDialog,
+	ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
index adb33e71816e5..76a99608933d4 100644
--- a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
+++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { MenuItem, ConfirmDialog } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js
index fdfb189fd3cd1..7aa815745cbc2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js
index 06a644f79c29e..dfbad113372db 100644
--- a/packages/edit-site/src/components/template-actions/index.js
+++ b/packages/edit-site/src/components/template-actions/index.js
@@ -9,7 +9,7 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
+	ConfirmDialog,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
index 98b67216bf503..b5b4a1ce1973c 100644
--- a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
+++ b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js
index 6aa1741600484..83672e99b4746 100644
--- a/packages/editor/src/components/post-switch-to-draft-button/index.js
+++ b/packages/editor/src/components/post-switch-to-draft-button/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { Button, ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
index ebb078804da6d..e5c5dd389d3de 100644
--- a/packages/editor/src/components/post-trash/index.js
+++ b/packages/editor/src/components/post-trash/index.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { Button, ConfirmDialog } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
index 0dde8905cbb36..671ec6cd28734 100644
--- a/packages/editor/src/components/post-visibility/index.js
+++ b/packages/editor/src/components/post-visibility/index.js
@@ -3,10 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import {
-	VisuallyHidden,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { VisuallyHidden, ConfirmDialog } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js
index 4aa1faac4bd9c..0bf35f6bd78b8 100644
--- a/packages/editor/src/components/template-validation-notice/index.js
+++ b/packages/editor/src/components/template-validation-notice/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	Notice,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { Notice, ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 95c08ff185e51..ee1ad0f1be4f7 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -6,6 +6,7 @@
 			'borderboxcontrol',
 			'bordercontrol',
 			'boxcontrol',
+			'confirmdialog',
 		];
 		const REDIRECTS = [
 			{

From 752a07f550aaf3c9a59c9fdf65679bd7688bbc48 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Wed, 17 Apr 2024 18:42:33 -0600
Subject: [PATCH 6/6] Remove "experimental" designation for
 `CustomSelectControl[V2]` and export the legacy adapter as the classic one
 (WIP)

---
 .../font-appearance-control/index.js           |  9 +++++++--
 .../global-styles/typography-panel.js          |  2 ++
 .../legacy-component/index.tsx                 | 18 +++++++++++++++++-
 .../stories/default.story.tsx                  |  2 +-
 .../stories/legacy.story.tsx                   |  2 +-
 packages/components/src/index.ts               |  3 ++-
 storybook/manager-head.html                    |  1 +
 7 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 18e814ad23ddb..bb2af1b6db4ff 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -203,6 +203,8 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
+	console.debug('selectOptions: ', selectOptions );
+
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
@@ -212,8 +214,11 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
+				onChange={ ( { selectedItem } ) => {
+						console.debug( selectedItem );
+						// @todo style is missing from the object
+						onChange( selectedItem.style );
+					}
 				}
 			/>
 		)
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 7fab783c4d0e7..dd9f7e8a7750e 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -219,6 +219,8 @@ export default function TypographyPanel( {
 		fontStyle: newFontStyle,
 		fontWeight: newFontWeight,
 	} ) => {
+		console.debug(fontStyle);
+		console.debug(fontWeight);
 		onChange( {
 			...value,
 			typography: {
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 8071a7e932a8b..64c684a0a9233 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -30,6 +30,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
+			console.debug('nextValue: ', nextValue);
 			if ( ! onChange ) return;
 
 			// Executes the logic in a microtask after the popup is closed.
@@ -37,6 +38,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			await Promise.resolve();
 			const state = store.getState();
 
+			console.debug(state);
+
 			const changeObject = {
 				highlightedIndex: state.renderedItems.findIndex(
 					( item ) => item.value === nextValue
@@ -45,7 +48,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				isOpen: state.open,
 				selectedItem: {
 					name: nextValue as string,
-					key: nextValue as string,
+					key: nextValue as string, // @todo Why key and name have the same value?
+					// @todo this structure is not compatible with the one from FontAppearanceControl, which
+					// expects an `style` attribute. Probably something to be fixed in FontAppearanceControl? Or am I missing something here?
 				},
 				type: '',
 			};
@@ -129,3 +134,14 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 }
 
 export default CustomSelectControl;
+
+// for backwards compatibility
+export function StableCustomSelectControl( props: LegacyCustomSelectProps ) {
+	console.debug(props);
+	return (
+		<CustomSelectControl
+			{ ...props }
+			__experimentalShowSelectedHint={ false }
+		/>
+	);
+}
diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
index ac2f9a51d5951..07c0c62cb1edb 100644
--- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2/Default',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
index 120686ea84af6..dc1d4ca490d5d 100644
--- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 9b33aec36262a..7e3127012b163 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -78,7 +78,8 @@ export {
 	ConfirmDialog as __experimentalConfirmDialog,
 	ConfirmDialog,
 } from './confirm-dialog';
-export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control-v2/legacy-component';
+export { default as CustomSelectControlV2 } from './custom-select-control-v2';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ee1ad0f1be4f7..db9eb8befb474 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -7,6 +7,7 @@
 			'bordercontrol',
 			'boxcontrol',
 			'confirmdialog',
+			'customselectcontrol-v2',
 		];
 		const REDIRECTS = [
 			{