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

package/src/focal-point-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
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import FocalPointPicker from '..';
 
-const meta: ComponentMeta< typeof FocalPointPicker > = {
+const meta: Meta< typeof FocalPointPicker > = {
 	title: 'Components/FocalPointPicker',
 	component: FocalPointPicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FocalPointPicker > = ( {
+const Template: StoryFn< typeof FocalPointPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/font-size-picker/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	...props
 } ) => {
@@ -32,7 +32,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [

package/src/font-size-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
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-const meta: ComponentMeta< typeof FontSizePicker > = {
+const meta: Meta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 };
 export default meta;
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	onChange,
 	...props
@@ -45,7 +45,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 	fontSizes,
 	...props
 } ) => {
@@ -63,7 +63,7 @@ const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -90,7 +90,7 @@ Default.args = {
 	withSlider: false,
 };
 
-export const WithSlider: ComponentStory< typeof FontSizePicker > =
+export const WithSlider: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
@@ -103,7 +103,7 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
@@ -113,7 +113,7 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
@@ -155,7 +155,7 @@ WithMoreFontSizes.args = {
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits: ComponentStory< typeof FontSizePicker > =
+export const WithUnits: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
@@ -170,7 +170,7 @@ WithUnits.args = {
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+export const WithComplexCSSValues: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,

package/src/form-file-upload/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 { upload as uploadIcon } from '@wordpress/icons';
  */
 import FormFileUpload from '..';
 
-const meta: ComponentMeta< typeof FormFileUpload > = {
+const meta: Meta< typeof FormFileUpload > = {
 	title: 'Components/FormFileUpload',
 	component: FormFileUpload,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormFileUpload > = ( props ) => {
+const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
 	return <FormFileUpload { ...props } />;
 };
 

package/src/form-toggle/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 { FormToggle } from '..';
 
-const meta: ComponentMeta< typeof FormToggle > = {
+const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,
 	title: 'Components/FormToggle',
 	argTypes: {
@@ -30,10 +30,7 @@ const meta: ComponentMeta< typeof FormToggle > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormToggle > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof FormToggle > = ( { onChange, ...args } ) => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	return (
@@ -48,5 +45,5 @@ const Template: ComponentStory< typeof FormToggle > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+export const Default: StoryFn< typeof FormToggle > = Template.bind( {} );
 Default.args = {};

package/src/form-token-field/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';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
-const meta: ComponentMeta< typeof FormTokenField > = {
+const meta: Meta< typeof FormTokenField > = {
 	component: FormTokenField,
 	title: 'Components/FormTokenField',
 	argTypes: {
@@ -42,9 +42,7 @@ const continents = [
 	'Oceania',
 ];
 
-const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
-	...args
-} ) => {
+const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 	const [ selectedContinents, setSelectedContinents ] = useState<
 		ComponentProps< typeof FormTokenField >[ 'value' ]
 	>( [] );
@@ -58,14 +56,15 @@ const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
 
-export const Async: ComponentStory< typeof FormTokenField > = ( {
+export const Async: StoryFn< typeof FormTokenField > = ( {
 	suggestions,
 	...args
 } ) => {
@@ -102,7 +101,7 @@ Async.args = {
 	suggestions: continents,
 };
 
-export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+export const DropdownSelector: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 DropdownSelector.args = {
 	...Default.args,
@@ -115,7 +114,7 @@ DropdownSelector.args = {
  * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
  * and is subject to change.)
  */
-export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithCustomRenderItem.args = {
 	...Default.args,
@@ -129,7 +128,7 @@ WithCustomRenderItem.args = {
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
  */
-export const WithValidatedInput: ComponentStory< typeof FormTokenField > =
+export const WithValidatedInput: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithValidatedInput.args = {
 	...Default.args,

package/src/gradient-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
  */
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import GradientPicker from '..';
 
-const meta: ComponentMeta< typeof GradientPicker > = {
+const meta: Meta< typeof GradientPicker > = {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
@@ -65,7 +65,7 @@ const GRADIENTS = [
 	},
 ];
 
-const Template: ComponentStory< typeof GradientPicker > = ( {
+const Template: StoryFn< typeof GradientPicker > = ( {
 	onChange,
 	...props
 } ) => {

package/src/grid/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 { View } from '../../view';
 import { Grid } from '..';
 
-const meta: ComponentMeta< typeof Grid > = {
+const meta: Meta< typeof Grid > = {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	argTypes: {
@@ -51,7 +51,7 @@ const Item = ( props: { children: string } ) => (
 	/>
 );
 
-const Template: ComponentStory< typeof Grid > = ( props ) => (
+const Template: StoryFn< typeof Grid > = ( props ) => (
 	<Grid { ...props }>
 		<Item>One</Item>
 		<Item>Two</Item>
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Grid > = ( props ) => (
 	</Grid>
 );
 
-export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+export const Default: StoryFn< typeof Grid > = Template.bind( {} );
 Default.args = {
 	alignment: 'bottom',
 	columns: 4,

package/src/guide/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 Button from '../../button';
 import Guide from '..';
 
-const meta: ComponentMeta< typeof Guide > = {
+const meta: Meta< typeof Guide > = {
 	title: 'Components/Guide',
 	component: Guide,
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Guide > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Guide > = ( { onFinish, ...props } ) => {
+const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );

package/src/h-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { HStack } from '../..';
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( props ) => {
+const Template: StoryFn< typeof HStack > = ( props ) => {
 	return (
 		<HStack
 			style={ { background: '#eee', minHeight: '3rem' } }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof HStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/h-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -40,7 +40,7 @@ const JUSTIFICATIONS = {
 	start: 'start',
 };
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 	argTypes: {
@@ -76,7 +76,7 @@ const meta: ComponentMeta< typeof HStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( args ) => (
+const Template: StoryFn< typeof HStack > = ( args ) => (
 	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
 		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
 			<View key={ text } style={ { background: '#b9f9ff' } }>
@@ -86,7 +86,7 @@ const Template: ComponentStory< typeof HStack > = ( args ) => (
 	</HStack>
 );
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: '3',
 };

package/src/heading/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 { Heading } from '..';
 
-const meta: ComponentMeta< typeof Heading > = {
+const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof Heading > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof Heading > = ( props ) => (
+export const Default: StoryFn< typeof Heading > = ( props ) => (
 	<Heading { ...props } />
 );
 Default.args = {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { wordpress } from '@wordpress/icons';
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof Icon > = {
+const meta: Meta< typeof Icon > = {
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
@@ -25,14 +25,14 @@ const meta: ComponentMeta< typeof Icon > = {
 };
 export default meta;
 
-const Template: Story< typeof Icon > = ( args ) => <Icon { ...args } />;
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: Story< typeof Icon > = ( args ) => {
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -84,7 +84,7 @@ WithAnSVG.args = {
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */
-export const WithADashicon: Story< typeof Icon > = ( args ) => {
+export const WithADashicon: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<VStack>
 			<Icon { ...args } />

package/src/input-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
@@ -10,9 +10,11 @@ import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
-const meta: ComponentMeta< typeof InputControl > = {
+const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -29,7 +31,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
+const Template: StoryFn< typeof InputControl > = ( args ) => (
 	<InputControl { ...args } />
 );
 

package/src/item-group/item/component.tsx

@@ -29,7 +29,6 @@ function UnconnectedItem(
  * `Item` is used in combination with `ItemGroup` to display a list of items
  * grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,

package/src/item-group/item-group/component.tsx

@@ -44,7 +44,6 @@ function UnconnectedItemGroup(
 /**
  * `ItemGroup` displays a list of `Item`s grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,

package/src/item-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
@@ -11,8 +11,10 @@ import { Item } from '../item/component';
 
 type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
 
-const meta: ComponentMeta< typeof ItemGroup > = {
+const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Item },
 	title: 'Components (Experimental)/ItemGroup',
 	argTypes: {
 		as: { control: { type: null } },
@@ -29,11 +31,11 @@ const mapPropsToItem = ( props: ItemProps, index: number ) => (
 	<Item { ...props } key={ index } />
 );
 
-const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+const Template: StoryFn< typeof ItemGroup > = ( props ) => (
 	<ItemGroup { ...props } />
 );
 
-export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
 Default.args = {
 	children: (
 		[
@@ -61,8 +63,9 @@ Default.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const NonClickableItems: ComponentStory< typeof ItemGroup > =
-	Template.bind( {} );
+export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
+	{}
+);
 NonClickableItems.args = {
 	children: (
 		[
@@ -78,9 +81,7 @@ NonClickableItems.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
 CustomItemSize.args = {
 	children: (
 		[
@@ -97,9 +98,7 @@ CustomItemSize.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const WithBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
 WithBorder.args = {
 	...Default.args,
 	isBordered: true,

package/src/keyboard-shortcuts/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 KeyboardShortcuts from '..';
 
-const meta: ComponentMeta< typeof KeyboardShortcuts > = {
+const meta: Meta< typeof KeyboardShortcuts > = {
 	component: KeyboardShortcuts,
 	title: 'Components/KeyboardShortcuts',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof KeyboardShortcuts > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof KeyboardShortcuts > = ( props ) => (
+const Template: StoryFn< typeof KeyboardShortcuts > = ( props ) => (
 	<KeyboardShortcuts { ...props } />
 );