diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
index ad69c1b4801118..1736d2227ee770 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;