@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '..';
-declare const meta: ComponentMeta<typeof VisuallyHidden>;
+declare const meta: Meta<typeof VisuallyHidden>;
 export default meta;
-export declare const Default: ComponentStory<typeof VisuallyHidden>;
-export declare const WithForwardedProps: ComponentStory<typeof VisuallyHidden>;
-export declare const WithAdditionalClassNames: ComponentStory<typeof VisuallyHidden>;
+export declare const Default: StoryFn<typeof VisuallyHidden>;
+export declare const WithForwardedProps: StoryFn<typeof VisuallyHidden>;
+export declare const WithAdditionalClassNames: StoryFn<typeof VisuallyHidden>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAa/C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,cAAc,CAWrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CACpD,OAAO,cAAc,CAUrB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAatC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}

package/build-types/z-stack/stories/index.story.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { ZStack } from '..';
-declare const meta: ComponentMeta<typeof ZStack>;
+declare const meta: Meta<typeof ZStack>;
 export default meta;
-export declare const Default: ComponentStory<typeof ZStack>;
+export declare const Default: StoryFn<typeof ZStack>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/z-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,MAAM,CAavC,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,MAAM,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAa9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.6.1",
+	"version": "26.0.1-next.5a1d1283.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,26 +38,26 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
-		"@floating-ui/react-dom": "1.0.0",
+		"@floating-ui/react-dom": "^2.0.1",
 		"@radix-ui/react-dropdown-menu": "2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.40.1",
-		"@wordpress/compose": "^6.17.1",
-		"@wordpress/date": "^4.40.1",
-		"@wordpress/deprecated": "^3.40.1",
-		"@wordpress/dom": "^3.40.1",
-		"@wordpress/element": "^5.17.1",
-		"@wordpress/escape-html": "^2.40.1",
-		"@wordpress/hooks": "^3.40.1",
-		"@wordpress/html-entities": "^3.40.1",
-		"@wordpress/i18n": "^4.40.1",
-		"@wordpress/icons": "^9.31.1",
-		"@wordpress/is-shallow-equal": "^4.40.1",
-		"@wordpress/keycodes": "^3.40.1",
-		"@wordpress/primitives": "^3.38.1",
-		"@wordpress/private-apis": "^0.22.1",
-		"@wordpress/rich-text": "^6.17.1",
-		"@wordpress/warning": "^2.40.1",
+		"@wordpress/a11y": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/compose": "^6.18.1-next.5a1d1283.0",
+		"@wordpress/date": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/deprecated": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/dom": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/element": "^5.18.1-next.5a1d1283.0",
+		"@wordpress/escape-html": "^2.41.1-next.5a1d1283.0",
+		"@wordpress/hooks": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/html-entities": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/i18n": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/icons": "^9.32.1-next.5a1d1283.0",
+		"@wordpress/is-shallow-equal": "^4.41.1-next.5a1d1283.0",
+		"@wordpress/keycodes": "^3.41.1-next.5a1d1283.0",
+		"@wordpress/primitives": "^3.39.1-next.5a1d1283.0",
+		"@wordpress/private-apis": "^0.23.1-next.5a1d1283.0",
+		"@wordpress/rich-text": "^6.18.1-next.5a1d1283.0",
+		"@wordpress/warning": "^2.41.1-next.5a1d1283.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
+	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
 }

package/src/alignment-matrix-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,13 @@ import AlignmentMatrixControl from '..';
 import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
-const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
+const meta: Meta< typeof AlignmentMatrixControl > = {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
 	argTypes: {
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -30,7 +34,7 @@ const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof AlignmentMatrixControl > = ( {
+const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	defaultValue,
 	onChange,
 	...props

package/src/angle-picker-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { AnglePickerControl } from '..';
 
-const meta: ComponentMeta< typeof AnglePickerControl > = {
+const meta: Meta< typeof AnglePickerControl > = {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof AnglePickerControl > = {
 
 export default meta;
 
-const AnglePickerWithState: ComponentStory< typeof AnglePickerControl > = ( {
+const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/animate/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, Story } from '@storybook/react';
 import { Animate } from '..';
 import Notice from '../../notice';
 
-const meta: ComponentMeta< typeof Animate > = {
+const meta: Meta< typeof Animate > = {
 	title: 'Components/Animate',
 	component: Animate,
 	parameters: {
@@ -19,9 +19,11 @@ const meta: ComponentMeta< typeof Animate > = {
 };
 export default meta;
 
-const Template: Story< typeof Animate > = ( props ) => <Animate { ...props } />;
+const Template: StoryFn< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
 
-export const Default: Story< typeof Animate > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
@@ -30,7 +32,7 @@ Default.args = {
 	),
 };
 
-export const AppearTopLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopLeft = Template.bind( {} );
 AppearTopLeft.args = {
 	type: 'appear',
 	options: { origin: 'top left' },
@@ -40,7 +42,7 @@ AppearTopLeft.args = {
 		</Notice>
 	),
 };
-export const AppearTopRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopRight = Template.bind( {} );
 AppearTopRight.args = {
 	type: 'appear',
 	options: { origin: 'top right' },
@@ -50,7 +52,7 @@ AppearTopRight.args = {
 		</Notice>
 	),
 };
-export const AppearBottomLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomLeft = Template.bind( {} );
 AppearBottomLeft.args = {
 	type: 'appear',
 	options: { origin: 'bottom left' },
@@ -60,7 +62,7 @@ AppearBottomLeft.args = {
 		</Notice>
 	),
 };
-export const AppearBottomRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomRight = Template.bind( {} );
 AppearBottomRight.args = {
 	type: 'appear',
 	options: { origin: 'bottom right' },
@@ -71,7 +73,7 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading: Story< typeof Animate > = Template.bind( {} );
+export const Loading = Template.bind( {} );
 Loading.args = {
 	type: 'loading',
 	children: ( { className } ) => (
@@ -81,7 +83,7 @@ Loading.args = {
 	),
 };
 
-export const SlideIn: Story< typeof Animate > = Template.bind( {} );
+export const SlideIn = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',
 	options: { origin: 'left' },

package/src/base-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof BaseControl > = {
+const meta: Meta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	argTypes: {
@@ -24,9 +24,7 @@ const meta: ComponentMeta< typeof BaseControl > = {
 };
 export default meta;
 
-const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
@@ -36,7 +34,7 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
 	);
 };
 
-export const Default: ComponentStory< typeof BaseControl > =
+export const Default: StoryFn< typeof BaseControl > =
 	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -56,9 +54,7 @@ WithHelpText.args = {
  * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
  * otherwise use if the `label` prop was passed.
  */
-export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
 	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 

package/src/border-box-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import Popover from '../../popover';
 import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof BorderBoxControl > = {
+const meta: Meta< typeof BorderBoxControl > = {
 	title: 'Components (Experimental)/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
@@ -41,7 +39,7 @@ const colors = [
 	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
-const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
 	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
@@ -53,7 +51,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	};
 
 	return (
-		<SlotFillProvider>
+		<>
 			<BorderBoxControl
 				{ ...otherProps }
 				onChange={ onChangeMerged }
@@ -78,9 +76,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 			>
 				Reset
 			</Button>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		</>
 	);
 };
 export const Default = Template.bind( {} );

package/src/border-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { BorderControl } from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
 import type { Border } from '../types';
 
-const meta: ComponentMeta< typeof BorderControl > = {
+const meta: Meta< typeof BorderControl > = {
 	title: 'Components (Experimental)/BorderControl',
 	component: BorderControl,
 	argTypes: {
@@ -70,7 +68,7 @@ const multipleOriginColors = [
 	},
 ];
 
-const Template: ComponentStory< typeof BorderControl > = ( {
+const Template: StoryFn< typeof BorderControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -83,15 +81,11 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 	};
 
 	return (
-		<SlotFillProvider>
-			<BorderControl
-				onChange={ onChangeMerged }
-				value={ border }
-				{ ...props }
-			/>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<BorderControl
+			onChange={ onChangeMerged }
+			value={ border }
+			{ ...props }
+		/>
 	);
 };
 

package/src/button/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-export const VariantStates: Story< typeof Button > = (
+export const VariantStates: StoryFn< typeof Button > = (
 	props: ButtonAsButtonProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
@@ -57,7 +57,7 @@ Icon.args = {
 	icon: wordpress,
 };
 
-export const Dashicons: Story< typeof Button > = ( props ) => {
+export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
 			<Button { ...props } />

package/src/button/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -44,52 +44,52 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-const Template: Story< typeof Button > = ( props ) => {
+const Template: StoryFn< typeof Button > = ( props ) => {
 	return <Button { ...props }></Button>;
 };
 
-export const Default: Story< typeof Button > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary: Story< typeof Button > = Template.bind( {} );
+export const Primary = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary: Story< typeof Button > = Template.bind( {} );
+export const Secondary = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary: Story< typeof Button > = Template.bind( {} );
+export const Tertiary = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link: Story< typeof Button > = Template.bind( {} );
+export const Link = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive: Story< typeof Button > = Template.bind( {} );
+export const IsDestructive = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon: Story< typeof Button > = Template.bind( {} );
+export const Icon = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const GroupedIcons: Story< typeof Button > = () => {
+export const GroupedIcons = () => {
 	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);

package/src/button-group/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import ButtonGroup from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof ButtonGroup > = {
+const meta: Meta< typeof ButtonGroup > = {
 	title: 'Components/ButtonGroup',
 	component: ButtonGroup,
 	argTypes: {
@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof ButtonGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
+const Template: StoryFn< typeof ButtonGroup > = ( args ) => {
 	const style = { margin: '0 4px' };
 	return (
 		<ButtonGroup { ...args }>
@@ -36,6 +36,4 @@ const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );

package/src/card/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -18,8 +18,10 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof Card > = {
+const meta: Meta< typeof Card > = {
 	component: Card,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	title: 'Components/Card',
 	argTypes: {
 		as: {
@@ -39,9 +41,7 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args } />
-);
+const Template: StoryFn< typeof Card > = ( args ) => <Card { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/checkbox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof CheckboxControl > = {
+const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
 	title: 'Components/CheckboxControl',
 	argTypes: {
@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof CheckboxControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
+const DefaultTemplate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -54,14 +54,15 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof CheckboxControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
 
-export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
+export const Indeterminate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/circular-option-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -9,16 +9,28 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { default as CircularOptionPicker } from '..';
+import {
+	ButtonAction,
+	default as CircularOptionPicker,
+	DropdownLinkAction,
+} from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
 	setCurrentColor?: ( v: string | undefined ) => void;
 } >( {} );
 
-const meta: ComponentMeta< typeof CircularOptionPicker > = {
+const meta: Meta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.Option': Option,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.ButtonAction': ButtonAction,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+	},
 	argTypes: {
 		actions: { control: { type: null } },
 		options: { control: { type: null } },
@@ -95,7 +107,7 @@ const DefaultActions = () => {
 	);
 };
 
-const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
+const Template: StoryFn< typeof CircularOptionPicker > = ( props ) => (
 	<CircularOptionPicker { ...props } />
 );