From 54dab369cdfe3de9ec4d17d0a48b051782ed01b1 Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Tue, 5 Mar 2024 15:09:37 -0500
Subject: [PATCH 1/7] Docs: Fixed sample code on InputControl docs

---
 packages/components/CHANGELOG.md                                | 2 +-
 packages/components/src/input-control/README.md                 | 2 +-
 packages/components/src/input-control/index.tsx                 | 2 +-
 .../components/src/mobile/bottom-sheet-select-control/README.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a17f1b323e0bf5..1bd865f5fcf6f9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 ### Bug Fix
-
+-    `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
 -   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 1cde49917823ff..7af244f823516d 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 10297cce6fd098..ed7c3088ea4132 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md
index ed940baa53409f..7d45b7abcabba1 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md
@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{

From b5e67cdce3474c1130453318177dba24a1bf20d1 Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Tue, 5 Mar 2024 15:09:37 -0500
Subject: [PATCH 2/7] Docs: Fixed sample code for InputControl

---
 packages/components/CHANGELOG.md                                | 2 +-
 packages/components/src/input-control/README.md                 | 2 +-
 packages/components/src/input-control/index.tsx                 | 2 +-
 .../components/src/mobile/bottom-sheet-select-control/README.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a17f1b323e0bf5..1bd865f5fcf6f9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 ### Bug Fix
-
+-    `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
 -   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 1cde49917823ff..7af244f823516d 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 10297cce6fd098..ed7c3088ea4132 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md
index ed940baa53409f..7d45b7abcabba1 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md
@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{

From d03908be247170fe667ff874ee51cb51009c327d Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Tue, 5 Mar 2024 15:09:37 -0500
Subject: [PATCH 3/7] Docs: Fixed sample code for InputControl

---
 packages/components/CHANGELOG.md                                | 2 +-
 packages/components/src/input-control/README.md                 | 2 +-
 packages/components/src/input-control/index.tsx                 | 2 +-
 .../components/src/mobile/bottom-sheet-select-control/README.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a17f1b323e0bf5..1bd865f5fcf6f9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 ### Bug Fix
-
+-    `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
 -   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 1cde49917823ff..7af244f823516d 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 10297cce6fd098..ed7c3088ea4132 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from '@wordpress/element';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md
index ed940baa53409f..7d45b7abcabba1 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md
@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{

From 61837bb11cb6fc3c6d2eb24cdde2d3cce2e10b36 Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Wed, 6 Mar 2024 07:04:28 -0500
Subject: [PATCH 4/7] Import useState from react package

---
 packages/components/src/input-control/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index ed7c3088ea4132..81e53440bd13bf 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from 'react';
 
 /**
  * Internal dependencies

From b2ffda130934aebc22726b76237d0c623219b271 Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Sun, 10 Mar 2024 16:58:25 -0400
Subject: [PATCH 5/7] Use wordpress/element package on source code, React for
 documentation purposes.

---
 packages/components/src/input-control/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 81e53440bd13bf..ed7c3088ea4132 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from 'react';
+import { useState, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies

From 63093e04d4b58cf74e303744f2a91c5478ea907e Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Sun, 10 Mar 2024 17:09:50 -0400
Subject: [PATCH 6/7] Using react in sample code (documentation)

---
 packages/components/src/input-control/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index ed7c3088ea4132..be05b6d0d49b8b 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
+ * import { useState } from 'react';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );

From 6fa60a6ab03968eb03becb35c12aec5f65361e2d Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 11 Mar 2024 13:18:43 +0900
Subject: [PATCH 7/7] Remove unnecessary space

---
 packages/components/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index eb9dd3d200037c..ae191499aec769 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 ### Bug Fix
--    `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
+-   `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
 -   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).