From 0401a75cd2e892aed9babbc2e9975d0b06228056 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 7 Feb 2023 11:42:02 -0500
Subject: [PATCH 01/24] Rename to `.tsx` and remove `@ts-nocheck`

---
 .../src/circular-option-picker/{index.js => index.tsx}           | 1 -
 1 file changed, 1 deletion(-)
 rename packages/components/src/circular-option-picker/{index.js => index.tsx} (99%)

diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.tsx
similarity index 99%
rename from packages/components/src/circular-option-picker/index.js
rename to packages/components/src/circular-option-picker/index.tsx
index f41813906fcab..14fddb98cf08c 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */

From d184d7b55f544a20e9248c46144fa518d1e7a326 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:10:56 -0500
Subject: [PATCH 02/24] Add `types.ts` file

---
 packages/components/src/circular-option-picker/types.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/components/src/circular-option-picker/types.ts

diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
new file mode 100644
index 0000000000000..e69de29bb2d1d

From fd9dd87e4d5a2e61248f51bf9e815a0326cc8341 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:11:31 -0500
Subject: [PATCH 03/24] Add `CircularOptionPickerProps`

---
 .../src/circular-option-picker/index.tsx      |  5 +++-
 .../src/circular-option-picker/types.ts       | 27 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index 14fddb98cf08c..caf1a9fc08209 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -14,6 +14,7 @@ import { Icon, check } from '@wordpress/icons';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
+import type { CircularOptionPickerProps } from './types';
 
 function Option( props ) {
 	const {
@@ -92,7 +93,9 @@ function ButtonAction( props ) {
 	);
 }
 
-export default function CircularOptionPicker( props ) {
+export default function CircularOptionPicker(
+	props: CircularOptionPickerProps
+) {
 	const { actions, className, options, children } = props;
 	return (
 		<div
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index e69de29bb2d1d..880a4b8c0b23d 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type CircularOptionPickerProps = {
+	/**
+	 * A CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The action(s) to be rendered after the options,
+	 * such as a 'clear' button as seen in `ColorPalette`.
+	 * Usually a `CircularOptionPicker.ButtonAction` or
+	 * `CircularOptionPicker.DropdownLinkAction` component.
+	 */
+	actions?: ReactNode;
+	/**
+	 * The options to be rendered, such as color swatches.
+	 * Usually a `CircularOptionPicker.Option` component.
+	 */
+	options: ReactNode;
+	/**
+	 * The child elements.
+	 */
+	children?: ReactNode;
+};

From f3e2bf6b1d793525d76e4113613faacda25a6a51 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:54:14 -0500
Subject: [PATCH 04/24] Add `ButtonAction` typing

---
 packages/components/src/circular-option-picker/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index caf1a9fc08209..239c4d1a13c8a 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -15,6 +15,8 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 import type { CircularOptionPickerProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+import type { ButtonAsButtonProps } from '../button/types';
 
 function Option( props ) {
 	const {
@@ -77,8 +79,11 @@ function DropdownLinkAction( props ) {
 	);
 }
 
-function ButtonAction( props ) {
-	const { className, children, ...additionalProps } = props;
+function ButtonAction( {
+	className,
+	children,
+	...additionalProps
+}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
 			className={ classnames(

From a5fe043f81e3cea9fa270c84b4f4e5a703dfb395 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 12:14:02 -0500
Subject: [PATCH 05/24] Add `DropDownLinkAction` typing

---
 .../src/circular-option-picker/index.tsx      | 13 ++++++++++---
 .../src/circular-option-picker/types.ts       | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index 239c4d1a13c8a..5f1c4ebe7fdf3 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -14,7 +14,10 @@ import { Icon, check } from '@wordpress/icons';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
-import type { CircularOptionPickerProps } from './types';
+import type {
+	CircularOptionPickerProps,
+	DropdownLinkActionProps,
+} from './types';
 import type { WordPressComponentProps } from '../ui/context';
 import type { ButtonAsButtonProps } from '../button/types';
 
@@ -55,8 +58,12 @@ function Option( props ) {
 	);
 }
 
-function DropdownLinkAction( props ) {
-	const { buttonProps, className, dropdownProps, linkText } = props;
+function DropdownLinkAction( {
+	buttonProps,
+	className,
+	dropdownProps,
+	linkText,
+}: DropdownLinkActionProps ) {
 	return (
 		<Dropdown
 			className={ classnames(
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index 880a4b8c0b23d..e8551632c2147 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -2,6 +2,12 @@
  * External dependencies
  */
 import type { ReactNode } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type Dropdown from '../dropdown';
+import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
 	/**
@@ -25,3 +31,16 @@ export type CircularOptionPickerProps = {
 	 */
 	children?: ReactNode;
 };
+
+export type DropdownLinkActionProps = {
+	buttonProps: Omit<
+		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+		'children'
+	>;
+	linkText: string;
+	dropdownProps: Omit<
+		React.ComponentProps< typeof Dropdown >,
+		'className' | 'renderToggle'
+	>;
+	className?: string;
+};

From d3eb0f894a454113c40cd3287669bd2a2886cc71 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 12:32:09 -0500
Subject: [PATCH 06/24] Add `Option` typing

---
 .../src/circular-option-picker/index.tsx      | 16 ++++++-------
 .../src/circular-option-picker/types.ts       | 24 +++++++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index 5f1c4ebe7fdf3..5dd8754702127 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -17,18 +17,18 @@ import Tooltip from '../tooltip';
 import type {
 	CircularOptionPickerProps,
 	DropdownLinkActionProps,
+	OptionProps,
 } from './types';
 import type { WordPressComponentProps } from '../ui/context';
 import type { ButtonAsButtonProps } from '../button/types';
 
-function Option( props ) {
-	const {
-		className,
-		isSelected,
-		selectedIconProps,
-		tooltipText,
-		...additionalProps
-	} = props;
+function Option( {
+	className,
+	isSelected,
+	selectedIconProps,
+	tooltipText,
+	...additionalProps
+}: OptionProps ) {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index e8551632c2147..9b6c62cbd369e 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -2,6 +2,12 @@
  * External dependencies
  */
 import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import type { Icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -44,3 +50,21 @@ export type DropdownLinkActionProps = {
 	>;
 	className?: string;
 };
+
+export type OptionProps = Omit<
+	WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+	'isPressed' | 'className'
+> & {
+	className?: string;
+	// TODO: Discuss pros/cons of something like `React.ComponentProps< typeof Tooltip >[ 'text' ];`
+	tooltipText?: string;
+	isSelected: boolean;
+	// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option
+	// and is not intended to be overridden.
+	// `size` relies on the `Icon` component's default size of `24` to fit
+	// `CircularOptionPicker`'s design, and should not be explicitly set.
+	selectedIconProps?: Omit<
+		React.ComponentProps< typeof Icon >,
+		'icon' | 'size'
+	>;
+};

From d2fe437a40687e45d8cc7e9184097147851148fd Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 8 Feb 2023 15:59:26 -0500
Subject: [PATCH 07/24] Add README

---
 docs/manifest.json                            |  6 ++
 .../src/circular-option-picker/README.md      | 81 +++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 packages/components/src/circular-option-picker/README.md

diff --git a/docs/manifest.json b/docs/manifest.json
index 9d0954b6b4b44..4b4f6fbb73b9e 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -713,6 +713,12 @@
 		"markdown_source": "../packages/components/src/checkbox-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CircularOptionPicker",
+		"slug": "circular-option-picker",
+		"markdown_source": "../packages/components/src/circular-option-picker/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ClipboardButton",
 		"slug": "clipboard-button",
diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
new file mode 100644
index 0000000000000..5df507b698510
--- /dev/null
+++ b/packages/components/src/circular-option-picker/README.md
@@ -0,0 +1,81 @@
+# CircularOptionPicker
+
+CircularOptionPicker is a component that displays a set of options as circular buttons.
+
+## Usage
+
+```jsx
+import { CircularOptionPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const Example = () => {
+	const [ currentColor, setCurrentColor ] = useState();
+	const colors = [
+		{ color: '#f00', name: 'Red' },
+		{ color: '#0f0', name: 'Green' },
+		{ color: '#00f', name: 'Blue' },
+	];
+	const colorOptions = (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ index === currentColor }
+						onClick={ () => setCurrentColor( index ) }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+	return (
+		<CircularOptionPicker
+				options={ colorOptions }
+				actions={
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => setCurrentColor( undefined ) }
+					>
+						{ 'Clear' }
+					</CircularOptionPicker.ButtonAction>
+				}
+			/>
+	);
+};
+```
+
+## Props
+
+### className
+
+A CSS class to apply to the wrapper element.
+
+ - Type: `string`
+ - Required: No
+
+ ### actions
+
+ The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette'.
+
+ Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
+
+ - Type: `ReactNode`
+ - Required: No
+
+ ### options
+
+ The options to be rendered, such as color swatches.
+
+ Usually a `CircularOptionPicker.Option` component.
+
+ - Type: `ReactNode`
+ - Required: No
+
+ ### children
+
+The child elements.
+
+ - Type: `ReactNode`
+ - Required: No
\ No newline at end of file

From 76d3edb29eae52dd58de3a07c7719ef5c04eeb29 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 9 Feb 2023 10:05:10 -0500
Subject: [PATCH 08/24] Fix main component export

---
 packages/components/src/circular-option-picker/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index 5dd8754702127..f03f969f69bf9 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -105,9 +105,7 @@ function ButtonAction( {
 	);
 }
 
-export default function CircularOptionPicker(
-	props: CircularOptionPickerProps
-) {
+function CircularOptionPicker( props: CircularOptionPickerProps ) {
 	const { actions, className, options, children } = props;
 	return (
 		<div
@@ -132,3 +130,5 @@ export default function CircularOptionPicker(
 CircularOptionPicker.Option = Option;
 CircularOptionPicker.ButtonAction = ButtonAction;
 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+
+export default CircularOptionPicker;

From bd94edadd67d82df598cedd7385b3cb18b0018b5 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 9 Feb 2023 13:41:10 -0500
Subject: [PATCH 09/24] update CHANGELOG

---
 packages/components/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 450c381a83c52..267c23bc8fcdf 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -  `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123#pullrequestreview-1308386926)).
 
+### Internal
+
+-   `CircularOptionPicker`: Convert to TypeScript ([#47937](https://github.com/WordPress/gutenberg/pull/47937)).
+
 ## 23.4.0 (2023-02-15)
 
 ### Bug Fix

From 9785519f8610dac2a80b2cd5b70a6455569c03ba Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 13 Feb 2023 14:18:37 -0500
Subject: [PATCH 10/24] remove TODO comment

---
 packages/components/src/circular-option-picker/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index 9b6c62cbd369e..154aaa7a772f0 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -56,7 +56,6 @@ export type OptionProps = Omit<
 	'isPressed' | 'className'
 > & {
 	className?: string;
-	// TODO: Discuss pros/cons of something like `React.ComponentProps< typeof Tooltip >[ 'text' ];`
 	tooltipText?: string;
 	isSelected: boolean;
 	// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option

From 8fdbdfa30818af67820dc0a4e841a80b9ce1067e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:45:43 -0500
Subject: [PATCH 11/24] Add subcomponents to README, clean up whitespace

---
 .../src/circular-option-picker/README.md      | 96 ++++++++++++++++---
 1 file changed, 81 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index 5df507b698510..7598089c7655d 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -52,30 +52,96 @@ const Example = () => {
 
 A CSS class to apply to the wrapper element.
 
- - Type: `string`
- - Required: No
+- Type: `string`
+- Required: No
 
- ### actions
+### actions
 
- The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette'.
+The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette'.
 
- Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
+Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
 
- - Type: `ReactNode`
- - Required: No
+- Type: `ReactNode`
+- Required: No
 
- ### options
+### options
 
- The options to be rendered, such as color swatches.
+The options to be rendered, such as color swatches.
 
- Usually a `CircularOptionPicker.Option` component.
+Usually a `CircularOptionPicker.Option` component.
 
- - Type: `ReactNode`
- - Required: No
+- Type: `ReactNode`
+- Required: No
 
- ### children
+### children
 
 The child elements.
 
- - Type: `ReactNode`
- - Required: No
\ No newline at end of file
+- Type: `ReactNode`
+- Required: No
+
+## Subcomponents
+
+### CircularOptionPicker.ButtonAction
+
+A `ButtonAction` is an action that is rendered as a button alongside the options themselves.
+
+A common use case is a 'clear' button to deselect the currently selected option.
+
+#### Props
+
+##### className
+
+A CSS class to apply to the underlying `Button` component.
+
+- Type: `string`
+- Required: No
+
+##### children
+
+The button's children.
+
+- Type: `ReactNode`
+- Required: No
+
+##### Inherited props
+
+`CircularOptionPicker.ButtonAction` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+### CircularOptionPicker.DropdownLinkAction
+
+`CircularOptionPicker.DropdownLinkAction` is an action that's hidden behind a dropdown toggle. The button is formatted as a link and rendered as an `anchor` element.
+
+#### Props
+
+##### className
+
+A CSS class to apply to the underlying `Dropdown` component.
+
+- Type: `string`
+- Required: No
+
+##### linkText
+
+The text to be displayed on the button.
+
+- Type: `string`
+- Required: Yes
+
+##### dropdownProps
+
+The props for the underlying `Dropdown` component.
+
+Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.md#props), except for `className` and `renderToggle`.
+
+- Type: `object`
+- Required: Yes
+
+##### buttonProps
+
+Props for the underlying `Button` component.
+
+Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
+
+- Type: `object`
+- Required: No

From d651dad412bc695ff95c8e5a480cb0239febb3b4 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 14 Feb 2023 09:00:19 -0500
Subject: [PATCH 12/24] Mark `DropdownLinkActionProps.buttonProps` as optional

---
 packages/components/src/circular-option-picker/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index 154aaa7a772f0..c3791a42108cd 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -39,7 +39,7 @@ export type CircularOptionPickerProps = {
 };
 
 export type DropdownLinkActionProps = {
-	buttonProps: Omit<
+	buttonProps?: Omit<
 		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
 		'children'
 	>;

From 9fbfe1a8520277d0f58d88703e2bf3238e57d624 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 14 Feb 2023 09:00:41 -0500
Subject: [PATCH 13/24] Add stories

---
 .../circular-option-picker/stories/index.tsx  | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 packages/components/src/circular-option-picker/stories/index.tsx

diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
new file mode 100644
index 0000000000000..c21014f53e54e
--- /dev/null
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '..';
+
+const meta: ComponentMeta< typeof CircularOptionPicker > = {
+	title: 'Components/CircularOptionPicker',
+	component: CircularOptionPicker,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const colors = [
+	{ color: '#f00', name: 'Red' },
+	{ color: '#0f0', name: 'Green' },
+	{ color: '#0af', name: 'Blue' },
+];
+
+// TODO: ask if there's a more elegant way to access a state handler from a second story
+let resetColor: React.Dispatch< React.SetStateAction< number | undefined > >;
+
+const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => {
+	const [ currentColor, setCurrentColor ] = useState< number >();
+	resetColor = setCurrentColor;
+
+	const colorOptions = (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ index === currentColor }
+						onClick={ () => setCurrentColor( index ) }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+	return <CircularOptionPicker { ...props } options={ colorOptions } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = { actions: <></> };
+
+export const WithButtonAction = Template.bind( {} );
+WithButtonAction.args = {
+	actions: (
+		<CircularOptionPicker.ButtonAction
+			onClick={ () => resetColor( undefined ) }
+		>
+			{ 'Clear' }
+		</CircularOptionPicker.ButtonAction>
+	),
+};
+WithButtonAction.storyName = 'With ButtonAction';
+
+export const WithDropdownLinkAction = Template.bind( {} );
+WithDropdownLinkAction.args = {
+	actions: (
+		<CircularOptionPicker.DropdownLinkAction
+			dropdownProps={ {
+				popoverProps: { position: 'top right' },
+				renderContent: () => (
+					<div>This is an example of a DropdownLinkAction.</div>
+				),
+			} }
+			linkText="Learn More"
+		></CircularOptionPicker.DropdownLinkAction>
+	),
+};
+WithDropdownLinkAction.storyName = 'With DropdownLinkAction';

From 1d4fbf54e73d08fa376a6fac4dfc1a33fc47d3fa Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 13:55:26 -0500
Subject: [PATCH 14/24] Update Storybook `argTypes`

---
 .../components/src/circular-option-picker/stories/index.tsx  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
index c21014f53e54e..4a128f9a94f9c 100644
--- a/packages/components/src/circular-option-picker/stories/index.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -14,6 +14,11 @@ import CircularOptionPicker from '..';
 const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
+	argTypes: {
+		actions: { control: { type: null } },
+		options: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

From 8fe18f78a3098be598f6ff31d7fc58360a7ef428 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 14:50:12 -0500
Subject: [PATCH 15/24] Apply decorators and React context to stories

---
 .../circular-option-picker/stories/index.tsx  | 69 ++++++++++++++-----
 1 file changed, 51 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
index 4a128f9a94f9c..b23f694b7d351 100644
--- a/packages/components/src/circular-option-picker/stories/index.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -5,12 +5,17 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import CircularOptionPicker from '..';
 
+const CircularOptionPickerStoryContext = createContext< {
+	currentColor?: string;
+	setCurrentColor?: ( v: string | undefined ) => void;
+} >( {} );
+
 const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
@@ -24,6 +29,23 @@ const meta: ComponentMeta< typeof CircularOptionPicker > = {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
+	decorators: [
+		// Share current color state between main component, `actions` and `options`
+		( Story ) => {
+			const [ currentColor, setCurrentColor ] = useState< string >();
+
+			return (
+				<CircularOptionPickerStoryContext.Provider
+					value={ {
+						currentColor,
+						setCurrentColor,
+					} }
+				>
+					<Story />
+				</CircularOptionPickerStoryContext.Provider>
+			);
+		},
+	],
 };
 export default meta;
 
@@ -33,14 +55,12 @@ const colors = [
 	{ color: '#0af', name: 'Blue' },
 ];
 
-// TODO: ask if there's a more elegant way to access a state handler from a second story
-let resetColor: React.Dispatch< React.SetStateAction< number | undefined > >;
-
-const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => {
-	const [ currentColor, setCurrentColor ] = useState< number >();
-	resetColor = setCurrentColor;
+const DefaultOptions = () => {
+	const { currentColor, setCurrentColor } = useContext(
+		CircularOptionPickerStoryContext
+	);
 
-	const colorOptions = (
+	return (
 		<>
 			{ colors.map( ( { color, name }, index ) => {
 				return (
@@ -48,34 +68,47 @@ const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => {
 						key={ `${ color }-${ index }` }
 						tooltipText={ name }
 						style={ { backgroundColor: color, color } }
-						isSelected={ index === currentColor }
-						onClick={ () => setCurrentColor( index ) }
+						isSelected={ color === currentColor }
+						onClick={ () => {
+							setCurrentColor?.( color );
+						} }
 						aria-label={ name }
 					/>
 				);
 			} ) }
 		</>
 	);
-	return <CircularOptionPicker { ...props } options={ colorOptions } />;
 };
 
-export const Default = Template.bind( {} );
-Default.args = { actions: <></> };
+const DefaultActions = () => {
+	const { setCurrentColor } = useContext( CircularOptionPickerStoryContext );
 
-export const WithButtonAction = Template.bind( {} );
-WithButtonAction.args = {
-	actions: (
+	return (
 		<CircularOptionPicker.ButtonAction
-			onClick={ () => resetColor( undefined ) }
+			onClick={ () => setCurrentColor?.( undefined ) }
 		>
 			{ 'Clear' }
 		</CircularOptionPicker.ButtonAction>
-	),
+	);
+};
+
+const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
+	<CircularOptionPicker { ...props } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = { actions: <></>, options: <DefaultOptions /> };
+
+export const WithButtonAction = Template.bind( {} );
+WithButtonAction.args = {
+	...Default.args,
+	actions: <DefaultActions />,
 };
 WithButtonAction.storyName = 'With ButtonAction';
 
 export const WithDropdownLinkAction = Template.bind( {} );
 WithDropdownLinkAction.args = {
+	...Default.args,
 	actions: (
 		<CircularOptionPicker.DropdownLinkAction
 			dropdownProps={ {

From 8360fabab4ed601f22b63cd49e4d6eec1083cacc Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 14:58:56 -0500
Subject: [PATCH 16/24] README formatting

---
 .../src/circular-option-picker/README.md      | 40 +++++++------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index 7598089c7655d..ea75e1083c2a2 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -1,6 +1,6 @@
-# CircularOptionPicker
+# `CircularOptionPicker`
 
-CircularOptionPicker is a component that displays a set of options as circular buttons.
+`CircularOptionPicker` is a component that displays a set of options as circular buttons.
 
 ## Usage
 
@@ -48,41 +48,37 @@ const Example = () => {
 
 ## Props
 
-### className
+### `className`: `string`
 
 A CSS class to apply to the wrapper element.
 
-- Type: `string`
 - Required: No
 
-### actions
+### `actions`: `ReactNode`
 
-The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette'.
+The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette`.
 
 Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
 
-- Type: `ReactNode`
 - Required: No
 
-### options
+### `options`: `ReactNode`
 
 The options to be rendered, such as color swatches.
 
 Usually a `CircularOptionPicker.Option` component.
 
-- Type: `ReactNode`
 - Required: No
 
-### children
+### `children`: `ReactNode
 
 The child elements.
 
-- Type: `ReactNode`
 - Required: No
 
 ## Subcomponents
 
-### CircularOptionPicker.ButtonAction
+### `CircularOptionPicker.ButtonAction`
 
 A `ButtonAction` is an action that is rendered as a button alongside the options themselves.
 
@@ -90,58 +86,52 @@ A common use case is a 'clear' button to deselect the currently selected option.
 
 #### Props
 
-##### className
+##### `className`: `string`
 
 A CSS class to apply to the underlying `Button` component.
 
-- Type: `string`
 - Required: No
 
-##### children
+##### `children`: `ReactNode`
 
 The button's children.
 
-- Type: `ReactNode`
 - Required: No
 
 ##### Inherited props
 
 `CircularOptionPicker.ButtonAction` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
 
-### CircularOptionPicker.DropdownLinkAction
+### `CircularOptionPicker.DropdownLinkAction`
 
 `CircularOptionPicker.DropdownLinkAction` is an action that's hidden behind a dropdown toggle. The button is formatted as a link and rendered as an `anchor` element.
 
 #### Props
 
-##### className
+##### `className`: `string`
 
 A CSS class to apply to the underlying `Dropdown` component.
 
-- Type: `string`
 - Required: No
 
-##### linkText
+##### `linkText`: `string`
 
 The text to be displayed on the button.
 
-- Type: `string`
 - Required: Yes
 
-##### dropdownProps
+##### `dropdownProps`: `object`
 
 The props for the underlying `Dropdown` component.
 
 Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.md#props), except for `className` and `renderToggle`.
 
-- Type: `object`
 - Required: Yes
 
-##### buttonProps
+##### `buttonProps`: `object`
 
 Props for the underlying `Button` component.
 
 Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
 
-- Type: `object`
 - Required: No

From 51bfbd319a2d7785ff2b0d811e899ca735942f51 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:47:48 -0500
Subject: [PATCH 17/24] Add subcomponents to story

---
 .../components/src/circular-option-picker/index.tsx  |  6 +++---
 .../src/circular-option-picker/stories/index.tsx     | 12 +++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index f03f969f69bf9..6d98ed2a6ad15 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -22,7 +22,7 @@ import type {
 import type { WordPressComponentProps } from '../ui/context';
 import type { ButtonAsButtonProps } from '../button/types';
 
-function Option( {
+export function Option( {
 	className,
 	isSelected,
 	selectedIconProps,
@@ -58,7 +58,7 @@ function Option( {
 	);
 }
 
-function DropdownLinkAction( {
+export function DropdownLinkAction( {
 	buttonProps,
 	className,
 	dropdownProps,
@@ -86,7 +86,7 @@ function DropdownLinkAction( {
 	);
 }
 
-function ButtonAction( {
+export function ButtonAction( {
 	className,
 	children,
 	...additionalProps
diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
index b23f694b7d351..3ef66ab93be3f 100644
--- a/packages/components/src/circular-option-picker/stories/index.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -9,7 +9,12 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CircularOptionPicker from '..';
+import {
+	default as CircularOptionPicker,
+	ButtonAction,
+	DropdownLinkAction,
+	Option,
+} from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
@@ -19,6 +24,11 @@ const CircularOptionPickerStoryContext = createContext< {
 const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
+	subcomponents: {
+		'CircularOptionPicker.Option': Option,
+		'CircularOptionPicker.ButtonAction': ButtonAction,
+		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+	},
 	argTypes: {
 		actions: { control: { type: null } },
 		options: { control: { type: null } },

From 1ef3adde9eb864b2780eacfa67bbfec25e3489d9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:52:10 -0500
Subject: [PATCH 18/24] Add `not exported` note

---
 packages/components/src/circular-option-picker/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index ea75e1083c2a2..54dc9ad18ed25 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -1,5 +1,9 @@
 # `CircularOptionPicker`
 
+<div class="callout callout-alert">
+This component is not exported, and therefore can only be used internally to the `@wordpress/components` package.
+</div>
+
 `CircularOptionPicker` is a component that displays a set of options as circular buttons.
 
 ## Usage

From eb95e10b32fda7eb4e9c09c0a4b73ebb76bda9d3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:53:49 -0500
Subject: [PATCH 19/24] Fix import example in README

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 packages/components/src/circular-option-picker/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index 54dc9ad18ed25..6f722e78f1bc5 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -9,7 +9,7 @@ This component is not exported, and therefore can only be used internally to the
 ## Usage
 
 ```jsx
-import { CircularOptionPicker } from '@wordpress/components';
+import { CircularOptionPicker } from '../circular-option-picker';
 import { useState } from '@wordpress/element';
 
 const Example = () => {

From 547928ebf2c080e53950a8bc520b8e5a3bd70180 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:54:29 -0500
Subject: [PATCH 20/24] Remove unneeded `actions` prop from story

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 .../components/src/circular-option-picker/stories/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
index 3ef66ab93be3f..641135e3b96e2 100644
--- a/packages/components/src/circular-option-picker/stories/index.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -107,7 +107,7 @@ const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
 );
 
 export const Default = Template.bind( {} );
-Default.args = { actions: <></>, options: <DefaultOptions /> };
+Default.args = { options: <DefaultOptions /> };
 
 export const WithButtonAction = Template.bind( {} );
 WithButtonAction.args = {

From 41a269d6c9adca773e62e440c0b89a542f05776f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 15 Feb 2023 17:02:59 -0500
Subject: [PATCH 21/24] JSDoc FTW

---
 .../src/circular-option-picker/index.tsx      | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index 6d98ed2a6ad15..ad69c1b480111 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -131,4 +131,50 @@ CircularOptionPicker.Option = Option;
 CircularOptionPicker.ButtonAction = ButtonAction;
 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
 
+/**
+ *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+ *
+ * ```jsx
+ * import { CircularOptionPicker } from '../circular-option-picker';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ currentColor, setCurrentColor ] = useState();
+ * 	const colors = [
+ * 		{ color: '#f00', name: 'Red' },
+ * 		{ color: '#0f0', name: 'Green' },
+ * 		{ color: '#00f', name: 'Blue' },
+ * 	];
+ * 	const colorOptions = (
+ * 		<>
+ * 			{ colors.map( ( { color, name }, index ) => {
+ * 				return (
+ * 					<CircularOptionPicker.Option
+ * 						key={ `${ color }-${ index }` }
+ * 						tooltipText={ name }
+ * 						style={ { backgroundColor: color, color } }
+ * 						isSelected={ index === currentColor }
+ * 						onClick={ () => setCurrentColor( index ) }
+ * 						aria-label={ name }
+ * 					/>
+ * 				);
+ * 			} ) }
+ * 		</>
+ * 	);
+ * 	return (
+ * 		<CircularOptionPicker
+ * 				options={ colorOptions }
+ * 				actions={
+ * 					<CircularOptionPicker.ButtonAction
+ * 						onClick={ () => setCurrentColor( undefined ) }
+ * 					>
+ * 						{ 'Clear' }
+ * 					</CircularOptionPicker.ButtonAction>
+ * 				}
+ * 			/>
+ * 	);
+ * };
+ * ```
+ */
+
 export default CircularOptionPicker;

From 7fd2fe7b55f526b2d89282e30d3662f56d1a02a2 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 16 Feb 2023 09:19:55 -0500
Subject: [PATCH 22/24] Exclude decorator from Storybook docs

---
 .../components/src/circular-option-picker/stories/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/stories/index.tsx b/packages/components/src/circular-option-picker/stories/index.tsx
index 641135e3b96e2..a2e1bb5b0e482 100644
--- a/packages/components/src/circular-option-picker/stories/index.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.tsx
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { source: { state: 'open', excludeDecorators: true } },
 	},
 	decorators: [
 		// Share current color state between main component, `actions` and `options`

From 6ca7c5f73eb94b6dfc278fc67c20ebc4440a072f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 22 Feb 2023 08:42:25 -0500
Subject: [PATCH 23/24] move JSdoc example to proper position

---
 .../src/circular-option-picker/index.tsx      | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index ad69c1b480111..1736d2227ee77 100644
--- a/packages/components/src/circular-option-picker/index.tsx
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -105,32 +105,6 @@ export function ButtonAction( {
 	);
 }
 
-function CircularOptionPicker( props: CircularOptionPickerProps ) {
-	const { actions, className, options, children } = props;
-	return (
-		<div
-			className={ classnames(
-				'components-circular-option-picker',
-				className
-			) }
-		>
-			<div className="components-circular-option-picker__swatches">
-				{ options }
-			</div>
-			{ children }
-			{ actions && (
-				<div className="components-circular-option-picker__custom-clear-wrapper">
-					{ actions }
-				</div>
-			) }
-		</div>
-	);
-}
-
-CircularOptionPicker.Option = Option;
-CircularOptionPicker.ButtonAction = ButtonAction;
-CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
-
 /**
  *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
  *
@@ -177,4 +151,30 @@ CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
  * ```
  */
 
+function CircularOptionPicker( props: CircularOptionPickerProps ) {
+	const { actions, className, options, children } = props;
+	return (
+		<div
+			className={ classnames(
+				'components-circular-option-picker',
+				className
+			) }
+		>
+			<div className="components-circular-option-picker__swatches">
+				{ options }
+			</div>
+			{ children }
+			{ actions && (
+				<div className="components-circular-option-picker__custom-clear-wrapper">
+					{ actions }
+				</div>
+			) }
+		</div>
+	);
+}
+
+CircularOptionPicker.Option = Option;
+CircularOptionPicker.ButtonAction = ButtonAction;
+CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+
 export default CircularOptionPicker;

From 7678c72f82803e8430e9e788d1241344f4ce6de9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 22 Feb 2023 20:44:11 -0500
Subject: [PATCH 24/24] typo

---
 packages/components/src/circular-option-picker/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
index 6f722e78f1bc5..122eca4fa5632 100644
--- a/packages/components/src/circular-option-picker/README.md
+++ b/packages/components/src/circular-option-picker/README.md
@@ -74,7 +74,7 @@ Usually a `CircularOptionPicker.Option` component.
 
 - Required: No
 
-### `children`: `ReactNode
+### `children`: `ReactNode`
 
 The child elements.