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

package/src/date-time/stories/date-time.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, useEffect } from '@wordpress/element';
 import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DateTimePicker > = {
+const meta: Meta< typeof DateTimePicker > = {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DateTimePicker > = ( {
+const Template: StoryFn< typeof DateTimePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,12 +49,9 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -65,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DateTimePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/stories/date.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, useEffect } from '@wordpress/element';
 import DatePicker from '../date';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DatePicker > = {
+const meta: Meta< typeof DatePicker > = {
 	title: 'Components/DatePicker',
 	component: DatePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DatePicker > = ( {
+const Template: StoryFn< typeof DatePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,11 +49,9 @@ const Template: ComponentStory< typeof DatePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof DatePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
-	{}
-);
+export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -64,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DatePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DatePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

package/src/date-time/stories/time.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, useEffect } from '@wordpress/element';
  */
 import TimePicker from '../time';
 
-const meta: ComponentMeta< typeof TimePicker > = {
+const meta: Meta< typeof TimePicker > = {
 	title: 'Components/TimePicker',
 	component: TimePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TimePicker > = ( {
+const Template: StoryFn< typeof TimePicker > = ( {
 	currentTime,
 	onChange,
 	...args
@@ -48,4 +48,4 @@ const Template: ComponentStory< typeof TimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );

package/src/dimension-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
  */
@@ -34,9 +34,9 @@ export default {
 			docs: { canvas: { sourceState: 'shown' } },
 		},
 	},
-} as ComponentMeta< typeof DimensionControl >;
+} as Meta< typeof DimensionControl >;
 
-const Template: ComponentStory< typeof DimensionControl > = ( args ) => (
+const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />
 );
 

package/src/disabled/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
@@ -17,7 +17,7 @@ import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
-const meta: ComponentMeta< typeof Disabled > = {
+const meta: Meta< typeof Disabled > = {
 	title: 'Components/Disabled',
 	component: Disabled,
 	argTypes: {
@@ -66,7 +66,7 @@ const Form = () => {
 	);
 };
 
-export const Default: ComponentStory< typeof Disabled > = ( args ) => {
+export const Default: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<Form />
@@ -77,7 +77,7 @@ Default.args = {
 	isDisabled: true,
 };
 
-export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
+export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<div contentEditable tabIndex={ 0 }>

package/src/divider/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
@@ -10,7 +10,7 @@ import { Text } from '../../text';
 import { Divider } from '..';
 import { Flex } from '../../flex';
 
-const meta: ComponentMeta< typeof Divider > = {
+const meta: Meta< typeof Divider > = {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Divider > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Divider > = ( args ) => (
+const Template: StoryFn< typeof Divider > = ( args ) => (
 	<div>
 		<Text>Some text before the divider</Text>
 		<Divider { ...args } />
@@ -39,19 +39,19 @@ const Template: ComponentStory< typeof Divider > = ( args ) => (
 	</div>
 );
 
-export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Horizontal: StoryFn< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
 	margin: '2',
 };
 
-export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Vertical: StoryFn< typeof Divider > = Template.bind( {} );
 Vertical.args = {
 	...Horizontal.args,
 	orientation: 'vertical',
 };
 
 // Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
-export const InFlexContainer: ComponentStory< typeof Divider > = ( args ) => {
+export const InFlexContainer: StoryFn< typeof Divider > = ( args ) => {
 	return (
 		<Flex align="stretch">
 			<Text>

package/src/draggable/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 { DragEvent } from 'react';
 
 /**
@@ -16,7 +16,7 @@ import { Icon, more } from '@wordpress/icons';
  */
 import Draggable from '..';
 
-const meta: ComponentMeta< typeof Draggable > = {
+const meta: Meta< typeof Draggable > = {
 	component: Draggable,
 	title: 'Components/Draggable',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Draggable > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
+const DefaultTemplate: StoryFn< typeof Draggable > = ( args ) => {
 	const [ isDragging, setDragging ] = useState( false );
 	const instanceId = useInstanceId( DefaultTemplate );
 
@@ -100,9 +100,7 @@ const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
 Default.args = {};
 
 /**
@@ -112,7 +110,7 @@ Default.args = {};
  * For example, when the element's parent sets a `z-index` value that would cause the dragged
  * element to be rendered behind other elements.
  */
-export const AppendElementToOwnerDocument: ComponentStory< typeof Draggable > =
+export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
 	DefaultTemplate.bind( {} );
 AppendElementToOwnerDocument.args = {
 	appendToOwnerDocument: true,

package/src/drop-zone/stories/index.story.tsx

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import DropZone from '..';
 
-const meta: ComponentMeta< typeof DropZone > = {
+const meta: Meta< typeof DropZone > = {
 	component: DropZone,
 	title: 'Components/DropZone',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof DropZone > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DropZone > = ( props ) => {
+const Template: StoryFn< typeof DropZone > = ( props ) => {
 	return (
 		<div style={ { background: 'lightgray', padding: 16 } }>
 			Drop something here

package/src/dropdown/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
@@ -10,9 +10,11 @@ import Dropdown from '..';
 import Button from '../../button';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
-const meta: ComponentMeta< typeof Dropdown > = {
+const meta: Meta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { DropdownContentWrapper },
 	argTypes: {
 		focusOnMount: {
 			options: [ 'firstElement', true, false ],
@@ -32,7 +34,7 @@ const meta: ComponentMeta< typeof Dropdown > = {
 };
 export default meta;
 
-const Template: Story< typeof Dropdown > = ( args ) => {
+const Template: StoryFn< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -40,7 +42,7 @@ const Template: Story< typeof Dropdown > = ( args ) => {
 	);
 };
 
-export const Default: Story< typeof Dropdown > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	renderToggle: ( { isOpen, onToggle } ) => (
 		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
@@ -54,7 +56,7 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding: Story< typeof Dropdown > = Template.bind( {} );
+export const WithMorePadding = Template.bind( {} );
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -69,7 +71,7 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding: Story< typeof Dropdown > = Template.bind( {} );
+export const WithNoPadding = Template.bind( {} );
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (

package/src/dropdown-menu/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
  */
@@ -21,7 +21,7 @@ import {
 	trash,
 } from '@wordpress/icons';
 
-const meta: ComponentMeta< typeof DropdownMenu > = {
+const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	parameters: {
@@ -38,7 +38,7 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const Template: Story< typeof DropdownMenu > = ( props ) => (
+const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<div style={ { height: 150 } }>
 		<DropdownMenu { ...props } />
 	</div>

package/src/dropdown-menu-v2/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 styled from '@emotion/styled';
 
 /**
@@ -21,8 +21,6 @@ import {
 	DropdownSubMenuTrigger,
 } from '..';
 import Button from '../../button';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -39,6 +37,26 @@ import { ContextSystemProvider } from '../../ui/context';
 const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
 	component: DropdownMenu,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownSubMenu,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownSubMenuTrigger,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuSeparator,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuCheckboxItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuRadioGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuRadioItem,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
@@ -122,12 +140,8 @@ const RadioItemsGroup = () => {
 	);
 };
 
-const Template: Story< typeof DropdownMenu > = ( props ) => (
-	<SlotFillProvider>
-		<DropdownMenu { ...props } />
-		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-		<Popover.Slot />
-	</SlotFillProvider>
+const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
+	<DropdownMenu { ...props } />
 );
 export const Default = Template.bind( {} );
 Default.args = {
@@ -197,7 +211,7 @@ const toolbarVariantContextValue = {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: Story< typeof DropdownMenu > = ( props ) => (
+export const ToolbarVariant: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenu { ...props } />
 	</ContextSystemProvider>

package/src/duotone-picker/stories/duotone-picker.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 { DuotonePicker } from '..';
 import type { DuotonePickerProps } from '../types';
 
-const meta: ComponentMeta< typeof DuotonePicker > = {
+const meta: Meta< typeof DuotonePicker > = {
 	title: 'Components/DuotonePicker',
 	component: DuotonePicker,
 	argTypes: {
@@ -48,10 +48,7 @@ const COLOR_PALETTE = [
 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
 ];
 
-const Template: ComponentStory< typeof DuotonePicker > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof DuotonePicker > = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
 
 	return (

package/src/duotone-picker/stories/duotone-swatch.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { DuotoneSwatch } from '..';
 
-const meta: ComponentMeta< typeof DuotoneSwatch > = {
+const meta: Meta< typeof DuotoneSwatch > = {
 	title: 'Components/DuotoneSwatch',
 	component: DuotoneSwatch,
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof DuotoneSwatch > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DuotoneSwatch > = ( args ) => {
+const Template: StoryFn< typeof DuotoneSwatch > = ( args ) => {
 	return <DuotoneSwatch { ...args } />;
 };
 

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Elevation } from '..';
 
-const meta: ComponentMeta< typeof Elevation > = {
+const meta: Meta< typeof Elevation > = {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof Elevation > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Elevation > = ( args ) => {
+const Template: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -38,7 +38,7 @@ const Template: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
+const InteractiveTemplate: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<button
 			style={ {
@@ -55,7 +55,7 @@ const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Elevation > = Template.bind( {} );
+export const Default: StoryFn< typeof Elevation > = Template.bind( {} );
 Default.args = {
 	value: 5,
 };
@@ -64,7 +64,7 @@ Default.args = {
  * Enable the `isInteractive` prop to automatically generate values
  * for the hover/active/focus states.
  */
-export const WithInteractive: ComponentStory< typeof Elevation > =
+export const WithInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithInteractive.args = {
 	...Default.args,
@@ -75,7 +75,7 @@ WithInteractive.args = {
  * You can also provide custom values for the hover/active/focus states
  * instead of using the `isInteractive` prop.
  */
-export const WithCustomInteractive: ComponentStory< typeof Elevation > =
+export const WithCustomInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithCustomInteractive.args = {
 	...Default.args,

package/src/external-link/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ExternalLink from '..';
 
-const meta: ComponentMeta< typeof ExternalLink > = {
+const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
 	title: 'Components/ExternalLink',
 	argTypes: {
@@ -23,13 +23,11 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
+const Template: StoryFn< typeof ExternalLink > = ( { ...args } ) => {
 	return <ExternalLink { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ExternalLink > = Template.bind( {} );
 Default.args = {
 	children: 'WordPress',
 	href: 'https://wordpress.org',

package/src/flex/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,9 +9,11 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Flex, FlexItem, FlexBlock } from '../';
 import { View } from '../../view';
 
-const meta: ComponentMeta< typeof Flex > = {
+const meta: Meta< typeof Flex > = {
 	component: Flex,
 	title: 'Components/Flex',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { FlexBlock, FlexItem },
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
@@ -38,7 +40,7 @@ const GrayBox = ( { children }: { children: string } ) => (
 	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
 );
 
-export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>
@@ -55,9 +57,7 @@ export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
 };
 Default.args = {};
 
-export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
-	...args
-} ) => {
+export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>