Components Manifest

import { AlertDialog, Text } from "@wordpress/ui";
import { Menu } from "@base-ui/react/menu";

const Default = () => <AlertDialog.Root>(<>
        <AlertDialog.Trigger>Move to trash</AlertDialog.Trigger>
        <AlertDialog.Popup
            title="Move to trash?"
            description="This post will be moved to trash. You can restore it later."
        />
    </>)</AlertDialog.Root>;

const Irreversible = () => <AlertDialog.Root>(<>
        <AlertDialog.Trigger>Delete permanently</AlertDialog.Trigger>
        <AlertDialog.Popup
            intent="irreversible"
            title="Delete permanently?"
            description="This action cannot be undone. All data will be lost."
            confirmButtonText="Delete permanently"
        />
    </>)</AlertDialog.Root>;

const CustomLabels = () => <AlertDialog.Root>(<>
        <AlertDialog.Trigger>Send feedback</AlertDialog.Trigger>
        <AlertDialog.Popup
            title="Send feedback?"
            description="Your feedback helps us improve. Would you like to send it now?"
            confirmButtonText="Send feedback"
            cancelButtonText="Not now"
        />
    </>)</AlertDialog.Root>;

const WithCustomContent = () => <AlertDialog.Root>(<>
        <AlertDialog.Trigger>Remove pages</AlertDialog.Trigger>
        <AlertDialog.Popup
            title="Remove 3 pages?"
            description="These pages will be moved to trash."
            confirmButtonText="Delete pages"
        >
            <ul
                style={ {
                    margin: 0,
                    paddingInlineStart: 'var(--wpds-dimension-gap-lg)',
                } }
            >
                <Text render={ <li /> }>About us</Text>
                <Text render={ <li /> }>Contact</Text>
                <Text render={ <li /> }>Privacy policy</Text>
            </ul>
        </AlertDialog.Popup>
    </>)</AlertDialog.Root>;

const MenuTrigger = () => {
    const [ menuOpen, setMenuOpen ] = useState( false );
    return (
        <>
            <Menu.Root onOpenChange={ setMenuOpen } open={ menuOpen }>
                <Menu.Trigger>Actions ▾</Menu.Trigger>
                <Menu.Portal>
                    <Menu.Positioner>
                        <Menu.Popup style={ menuPopupStyles }>
                            <Menu.Item style={ menuItemStyles }>
                                Edit
                            </Menu.Item>
                            <AlertDialog.Root
                                onConfirm={ () => {
                                    setMenuOpen( false );
                                    action( 'onConfirm' )();
                                } }
                            >
                                <Menu.Item
                                    render={
                                        <AlertDialog.Trigger
                                            // Quick fix to remove `button`-specific styles.
                                            // This shouldn't be an issue once we use the DS `Menu`
                                            // component, which will come with item styles.
                                            render={ <div /> }
                                        />
                                    }
                                    style={ menuItemStyles }
                                    closeOnClick={ false }
                                >
                                    Delete...
                                    <AlertDialog.Popup
                                        intent="irreversible"
                                        title="Delete permanently?"
                                        description="This action cannot be undone. All data will be lost."
                                        confirmButtonText="Delete permanently"
                                    />
                                </Menu.Item>
                            </AlertDialog.Root>
                        </Menu.Popup>
                    </Menu.Positioner>
                </Menu.Portal>
            </Menu.Root>
        </>
    );
};

const AsyncConfirm = () => {
    const [ shouldFail, setShouldFail ] = useState( false );
    const successId = useId();
    const failureId = useId();

    return (
        <>
            <fieldset>
                <legend>Async task outcome</legend>
                <label htmlFor={ successId }>
                    <input
                        id={ successId }
                        type="radio"
                        name="async-outcome"
                        checked={ ! shouldFail }
                        onChange={ () => setShouldFail( false ) } />Success (closes dialog)
                                        </label>
                <label htmlFor={ failureId } style={ { marginInlineStart: 12 } }>
                    <input
                        id={ failureId }
                        type="radio"
                        name="async-outcome"
                        checked={ shouldFail }
                        onChange={ () => setShouldFail( true ) } />Failure (dialog stays open, shows error)
                                        </label>
            </fieldset>
            <br />
            <AlertDialog.Root
                onConfirm={ async () => {
                    action( 'onConfirm' )();
                    try {
                        await sleep( 2000 );
                        if ( shouldFail ) {
                            throw new Error( 'Task failed' );
                        }
                    } catch {
                        return {
                            close: false,
                            error: 'Something went wrong. Please try again.',
                        };
                    }
                    return undefined;
                } }>
                <AlertDialog.Trigger>Delete permanently
                                        </AlertDialog.Trigger>
                <AlertDialog.Popup
                    intent="irreversible"
                    title="Delete permanently?"
                    description="This action cannot be undone. All data will be lost."
                    confirmButtonText="Delete permanently" />
            </AlertDialog.Root>
        </>
    );
};

const Controlled = () => {
    const [ isOpen, setIsOpen ] = useState( false );

    return (
        <>
            <button onClick={ () => setIsOpen( true ) }>Open Dialog</button>
            <AlertDialog.Root
                open={ isOpen }
                onOpenChange={ ( open, eventDetails ) => {
                    setIsOpen( open );
                    args.onOpenChange?.( open, eventDetails );
                } }>
                <AlertDialog.Popup
                    title="Move to trash?"
                    description="This post will be moved to trash. You can restore it later." />
            </AlertDialog.Root>
        </>
    );
};

import { AlignmentControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <AlignmentControl
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { AlignmentToolbar } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <AlignmentToolbar
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { AnglePickerControl } from "@wordpress/components";

const Default = () => {
    const [ angle, setAngle ] = useState< number >( 0 );

    const handleChange = ( newValue: number ) => {
		setAngle( newValue );
		onChange( newValue );
	};

    return <AnglePickerControl value={ angle } onChange={ handleChange } />;
};

import { Badge, Stack } from "@wordpress/ui";

const AllIntents = () => (
    <>
        <Badge intent="high">high</Badge>
        <Badge intent="medium">medium</Badge>
        <Badge intent="low">low</Badge>
        <Badge intent="stable">stable</Badge>
        <Badge intent="informational">informational</Badge>
        <Badge intent="draft">draft</Badge>
        <Badge intent="none">none</Badge>
    </>
);

const High = () => (
    <>
        <Badge intent="high">Payment declined</Badge>
        <Badge intent="high">Security issue</Badge>
    </>
);

const Medium = () => (
    <>
        <Badge intent="medium">Approval required</Badge>
        <Badge intent="medium">Review needed</Badge>
    </>
);

const Low = () => (
    <>
        <Badge intent="low">Pending</Badge>
        <Badge intent="low">Queued</Badge>
    </>
);

const Informational = () => (
    <>
        <Badge intent="informational">Scheduled</Badge>
        <Badge intent="informational">Beta</Badge>
    </>
);

const Draft = () => (
    <>
        <Badge intent="draft">Draft</Badge>
        <Badge intent="draft">Unpublished</Badge>
    </>
);

const Stable = () => (
    <>
        <Badge intent="stable">Healthy</Badge>
        <Badge intent="stable">Active</Badge>
    </>
);

const None = () => (
    <>
        <Badge intent="none">Inactive</Badge>
        <Badge intent="none">Expired</Badge>
    </>
);

const CommentStatus = () => (
    <>
        <Badge intent="none">Approved</Badge>
        <Badge intent="medium">Approval required</Badge>
    </>
);

const PageStatus = () => (
    <>
        <Badge intent="none">Published</Badge>
        <Badge intent="low">Pending</Badge>
        <Badge intent="draft">Draft</Badge>
        <Badge intent="informational">Scheduled</Badge>
        <Badge intent="informational">Private</Badge>
    </>
);

const PluginStatus = () => (
    <>
        <Badge intent="stable">Active</Badge>
        <Badge intent="none">Inactive</Badge>
    </>
);

import { Badge } from "@wordpress/ui";
import { Fragment } from "@wordpress/element";

const Default = () => <Badge>Badge</Badge>;

const High = () => <Badge intent="high" />;

const Medium = () => <Badge intent="medium" />;

const Low = () => <Badge intent="low" />;

const Stable = () => <Badge intent="stable" />;

const Informational = () => <Badge intent="informational" />;

const Draft = () => <Badge intent="draft" />;

const None = () => <Badge intent="none" />;

const AllIntents = ( args ) => (
    <div
        style={ {
            display: 'grid',
            gridTemplateColumns: 'max-content min-content',
            gap: '1rem',
            color: 'var(--wpds-color-fg-content-neutral)',
        } }
    >
        { (
            [
                'high',
                'medium',
                'low',
                'stable',
                'informational',
                'draft',
                'none',
            ] as const
         ).map( ( intent ) => (
            <Fragment key={ intent }>
                <div
                    style={ {
                        paddingInlineEnd: '1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    { intent }
                </div>
                <div
                    style={ {
                        padding: '0.5rem 1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    <Badge { ...args } intent={ intent } />
                </div>
            </Fragment>
        ) ) }
    </div>
);

import { BlockAlignmentMatrixControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <BlockAlignmentMatrixControl
            value={ value }
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } } />
    );
};

import { BlockMover, ExperimentalBlockEditorProvider } from "@wordpress/block-editor";
import { Toolbar } from "@wordpress/components";

const Default = () => <BlockMover clientIds={[ blocks[ 0 ].innerBlocks[ 1 ].clientId ]} />;

const Horizontal = () => <BlockMover clientIds={[ blocks[ 1 ].innerBlocks[ 1 ].clientId ]} />;

const HideDragHandle = () => <BlockMover hideDragHandle />;

import { BorderRadiusControl } from "@wordpress/block-editor";

const Default = () => {
    const [ values, setValues ] = useState( args.values );

    return (
        <BorderRadiusControl
            values={ values }
            onChange={ ( ...changeArgs ) => {
                setValues( ...changeArgs );
                onChange( ...changeArgs );
            } } />
    );
};

import { BoxControl } from "@wordpress/components";

const Default = ( props ) => {
	return <BoxControl __next40pxDefaultSize { ...props } />;
};

const Controlled = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

const ArbitrarySides = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

const SingleSide = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

const AxialControls = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

const AxialControlsWithSingleSide = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

const ControlWithPresets = ( props ) => {
	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();

	return (
		<BoxControl
			__next40pxDefaultSize
			values={ values }
			{ ...props }
			onChange={ ( nextValue ) => {
				setValues( nextValue );
				props.onChange?.( nextValue );
			} }
		/>
	);
};

import { Breadcrumbs } from "@wordpress/admin-ui";

const SingleItem = () => <Breadcrumbs items={[ { label: 'Root breadcrumb' } ]} />;

const TwoLevels = () => <Breadcrumbs
    items={[
        { label: 'Root breadcrumb', to: '/settings' },
        { label: 'Level 1 breadcrumb' },
    ]} />;

const ThreeLevels = () => <Breadcrumbs
    items={[
        { label: 'Root breadcrumb', to: '/settings' },
        { label: 'Level 1 breadcrumb', to: '/settings/connectors' },
        { label: 'Level 2 breadcrumb' },
    ]} />;

import { Button } from "@wordpress/components";

const Default = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const Primary = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const Secondary = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const Tertiary = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const Link = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const IsDestructive = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

const Icon = ( props ) => {
	return <Button __next40pxDefaultSize { ...props }></Button>;
};

function GroupedIcons() {
	return (
		<GroupContainer>
			<Button __next40pxDefaultSize icon={ formatBold } label="Bold" />
			<Button
				__next40pxDefaultSize
				icon={ formatItalic }
				label="Italic"
			/>
			<Button __next40pxDefaultSize icon={ link } label="Link" />
		</GroupContainer>
	);
}

import { Button, ButtonGroup } from "@wordpress/components";

const Default = () => <ButtonGroup>(<>
        <Button __next40pxDefaultSize variant="primary">
            Button 1
        </Button>
        <Button __next40pxDefaultSize>Button 2</Button>
    </>)</ButtonGroup>;

import { Content, FullBleed, Header, Root, Title } from "@wordpress/ui";

const Default = () => <Card.Root>(<>
        <Card.Header>
            <Card.Title>Card title</Card.Title>
        </Card.Header>
        <Card.Content>
            <Text>
                This is the main content area. It can contain any
                elements. This is the main content area. It can contain
                any elements. This is the main content area. It can
                contain any elements. This is the main content area. It
                can contain any elements. This is the main content area.
                It can contain any elements. This is the main content
                area. It can contain any elements.
            </Text>
            <Text>
                This is the main content area. It can contain any
                elements.
            </Text>
        </Card.Content>
    </>)</Card.Root>;

const WithFullBleed = () => <Card.Root>(<>
        <Card.Header>
            <Card.Title>Featured image</Card.Title>
        </Card.Header>
        <Card.Content>
            <Card.FullBleed>
                <div
                    style={ {
                        height: 160,
                        background:
                            'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    } }
                />
            </Card.FullBleed>
            <Text>Content below the full-bleed area.</Text>
        </Card.Content>
    </>)</Card.Root>;

const HeaderOnly = () => <Card.Root>(<Card.Header>
        <Card.Title>Simple card</Card.Title>
    </Card.Header>)</Card.Root>;

const CustomSemantics = () => <Card.Root render={<section />}>(<>
        <Card.Header>
            <Card.Title render={ <h2 /> }>Section heading</Card.Title>
        </Card.Header>
        <Card.Content>
            <Text>Semantically meaningful card content.</Text>
        </Card.Content>
    </>)</Card.Root>;

import { CheckboxControl, HStack, VStack } from "@wordpress/components";

const Default = () => {
    const [ isChecked, setChecked ] = useState( true );

    return (
        <CheckboxControl
            label="Is author"
            help="Is the user an author or not?"
            checked={ isChecked }
            onChange={ ( v ) => {
				setChecked( v );
				onChange( v );
			} } />
    );
};

const Indeterminate = () => {
    const [ fruits, setFruits ] = useState( { apple: false, orange: false } );

    const isAllChecked = Object.values( fruits ).every( Boolean );
    const isIndeterminate =
		Object.values( fruits ).some( Boolean ) && ! isAllChecked;

    return (
        <VStack>
            <CheckboxControl
                label="Select all"
                checked={ isAllChecked }
                indeterminate={ isIndeterminate }
                onChange={ ( v ) => {
					setFruits( {
						apple: v,
						orange: v,
					} );
					onChange( v );
				} } />
            <CheckboxControl
                label="Apple"
                checked={ fruits.apple }
                onChange={ ( apple ) =>
					setFruits( ( prevState ) => ( {
						...prevState,
						apple,
					} ) )
				} />
            <CheckboxControl
                label="Orange"
                checked={ fruits.orange }
                onChange={ ( orange ) =>
					setFruits( ( prevState ) => ( {
						...prevState,
						orange,
					} ) )
				} />
        </VStack>
    );
};

const WithCustomLabel = () => {
    const [ isChecked, setChecked ] = useState( true );

    return (
        <HStack justify="flex-start" alignment="top" spacing={ 0 }>
            <CheckboxControl
                checked={ isChecked }
                onChange={ ( v ) => {
					setChecked( v );
					onChange( v );
				} }
                // Disable reason: For simplicity of the code snippet.
                // eslint-disable-next-line no-restricted-syntax
                id="my-checkbox-with-custom-label"
                aria-describedby="my-custom-description" />
            <VStack>
                <label htmlFor="my-checkbox-with-custom-label">My custom label
                                    </label>
                { /* eslint-disable-next-line no-restricted-syntax */ }
                <div id="my-custom-description" style={ { fontSize: 13 } }>A custom description.
                                    </div>
            </VStack>
        </HStack>
    );
};

import { Panel, Root, Trigger } from "@wordpress/ui";

const Default = () => <Collapsible.Root>(<>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>Collapsible content here.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

const DefaultOpen = () => <Collapsible.Root defaultOpen>(<>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>This panel is open by default.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

const Disabled = () => <Collapsible.Root disabled>(<>
        <Collapsible.Trigger>Toggle (disabled)</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>This content cannot be toggled.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

const HiddenUntilFound = function HiddenUntilFound() {
    return (
        <div>
            <p>
                Use the browser&apos;s find-in-page (Ctrl/Cmd+F) to search
                for &quot;hidden treasure&quot;. The collapsed panel will
                automatically expand to reveal the match.
            </p>
            <Collapsible.Root>
                <Collapsible.Trigger>Expand to reveal</Collapsible.Trigger>
                <Collapsible.Panel hiddenUntilFound>
                    <p>
                        This is the hidden treasure that can be found via
                        the browser&apos;s built-in page search even while
                        the panel is collapsed.
                    </p>
                </Collapsible.Panel>
            </Collapsible.Root>
        </div>
    );
};

const Controlled = function Controlled() {
    const [ open, setOpen ] = useState( false );
    return (
        <Collapsible.Root open={ open } onOpenChange={ setOpen }>
            <Collapsible.Trigger>
                { open ? 'Close' : 'Open' }
            </Collapsible.Trigger>
            <Collapsible.Panel>
                <p>Controlled collapsible panel.</p>
            </Collapsible.Panel>
        </Collapsible.Root>
    );
};

import { Content, Header, Root, Title, HeaderDescription, Stack } from "@wordpress/ui";

const Default = () => <CollapsibleCard.Root>(<>
        <CollapsibleCard.Header>
            <Card.Title>
                Collapsible card (closed by default)
            </Card.Title>
        </CollapsibleCard.Header>
        <CollapsibleCard.Content>
            <Text>
                This is the collapsible content area. It can contain any
                elements, just like a regular Card.Content.
            </Text>
            <Text>
                When collapsed, only the header and chevron are visible.
            </Text>
        </CollapsibleCard.Content>
    </>)</CollapsibleCard.Root>;

const InitiallyOpened = () => <CollapsibleCard.Root defaultOpen>(<>
        <CollapsibleCard.Header>
            <Card.Title>Collapsed by default</Card.Title>
        </CollapsibleCard.Header>
        <CollapsibleCard.Content>
            <Text>This content was hidden until you expanded it.</Text>
        </CollapsibleCard.Content>
    </>)</CollapsibleCard.Root>;

const Disabled = () => <CollapsibleCard.Root disabled>(<>
        <CollapsibleCard.Header>
            <Card.Title>Disabled card</Card.Title>
        </CollapsibleCard.Header>
        <CollapsibleCard.Content>
            <Text>The header is not interactive when disabled.</Text>
        </CollapsibleCard.Content>
    </>)</CollapsibleCard.Root>;

const Stacked = () => (
    <div
        style={ {
            display: 'flex',
            flexDirection: 'column',
            gap: 'var(--wpds-dimension-gap-lg)',
        } }
    >
        { [
            'General',
            'Advanced',
            'Accessibility',
            'Performance',
            'Privacy',
            'Notifications',
        ].map( ( title ) => (
            <CollapsibleCard.Root key={ title }>
                <CollapsibleCard.Header>
                    <Card.Title>{ title }</Card.Title>
                </CollapsibleCard.Header>
                <CollapsibleCard.Content>
                    <Text>
                        Configure all { title.toLowerCase() } settings for
                        your site. Changes here affect how your site behaves
                        across all pages and posts.
                    </Text>
                    <Text>
                        Review each option carefully before saving. Some
                        changes may require a page reload to take effect.
                        Hover over individual options for more details about
                        what they control.
                    </Text>
                    <Text>
                        If you&apos;re unsure about a setting, you can
                        always reset to defaults using the button at the
                        bottom of this section. Your previous configuration
                        will be saved as a backup.
                    </Text>
                </CollapsibleCard.Content>
            </CollapsibleCard.Root>
        ) ) }
    </div>
);

const WithHeaderDescription = ( { open, defaultOpen, onOpenChange, disabled, ...restArgs } ) => (
    <CollapsibleCard.Root
        open={ open }
        defaultOpen={ defaultOpen }
        onOpenChange={ onOpenChange }
        disabled={ disabled }
        { ...restArgs }
    >
        <CollapsibleCard.Header>
            <Stack justify="space-between">
                <Card.Title>Settings</Card.Title>
                <CollapsibleCard.HeaderDescription>
                    <span
                        style={ {
                            fontSize: 'var(--wpds-font-size-sm)',
                            color: 'var(--wpds-color-fg-content-neutral-weak)',
                        } }
                    >
                        3 items configured
                    </span>
                </CollapsibleCard.HeaderDescription>
            </Stack>
        </CollapsibleCard.Header>
        <CollapsibleCard.Content>
            <Text>
                The header description provides supplementary context to the
                trigger button. Assistive technologies will announce the
                description alongside the button label.
            </Text>
        </CollapsibleCard.Content>
    </CollapsibleCard.Root>
);

const ComparedToCard = ( { open, defaultOpen, onOpenChange, disabled, ...restArgs } ) => (
    <div
        style={ {
            display: 'flex',
            flexDirection: 'column',
            gap: 'var( --wpds-dimension-gap-lg )',
        } }
    >
        <CollapsibleCard.Root
            open={ open }
            defaultOpen={ defaultOpen }
            onOpenChange={ onOpenChange }
            disabled={ disabled }
            { ...restArgs }
        >
            <CollapsibleCard.Header>
                <Card.Title>CollapsibleCard (open)</Card.Title>
            </CollapsibleCard.Header>
            <CollapsibleCard.Content>
                <Text>
                    Content should align with the regular card below.
                </Text>
            </CollapsibleCard.Content>
        </CollapsibleCard.Root>
        <Card.Root { ...restArgs }>
            <Card.Header>
                <Card.Title>Regular Card</Card.Title>
            </Card.Header>
            <Card.Content>
                <Text>
                    Content should align with the collapsible card above.
                </Text>
            </Card.Content>
        </Card.Root>
    </div>
);

import { ColorIndicator } from "@wordpress/components";

const Default = () => <ColorIndicator colorValue="#0073aa" />;

import { ColorPalette } from "@wordpress/components";

const Default = () => {
    const [ color, setColor ] = useState< string | undefined >( value );

    return (
        <ColorPalette
            colors={[
                { name: 'Red', color: '#f00' },
                { name: 'White', color: '#fff' },
                { name: 'Blue', color: '#00f' },
            ]}
            value={ color }
            onChange={ ( newColor ) => {
				setColor( newColor );
				onChange?.( newColor );
			} } />
    );
};

const InitialValue = () => {
    const [ color, setColor ] = useState< string | undefined >( value );

    return (
        <ColorPalette
            colors={[
                { name: 'Red', color: '#f00' },
                { name: 'White', color: '#fff' },
                { name: 'Blue', color: '#00f' },
            ]}
            value={ color }
            onChange={ ( newColor ) => {
				setColor( newColor );
				onChange?.( newColor );
			} } />
    );
};

const MultipleOrigins = () => {
    const [ color, setColor ] = useState< string | undefined >( value );

    return (
        <ColorPalette
            colors={[
                {
                    name: 'Primary colors',
                    colors: [
                        { name: 'Red', color: '#f00' },
                        { name: 'Yellow', color: '#ff0' },
                        { name: 'Blue', color: '#00f' },
                    ],
                },
                {
                    name: 'Secondary colors',
                    colors: [
                        { name: 'Orange', color: '#f60' },
                        { name: 'Green', color: '#0f0' },
                        { name: 'Purple', color: '#60f' },
                    ],
                },
            ]}
            value={ color }
            onChange={ ( newColor ) => {
				setColor( newColor );
				onChange?.( newColor );
			} } />
    );
};

const CSSVariables = () => <div
    style={ {
        '--red': '#f00',
        '--yellow': '#ff0',
        '--blue': '#00f',
    } }>
    <Template
        colors={[
			{ name: 'Red', color: 'var(--red)' },
			{ name: 'Yellow', color: 'var(--yellow)' },
			{ name: 'Blue', color: 'var(--blue)' },
		]} />
</div>;

import { ComboboxControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] =
		useState< ComboboxControlProps[ 'value' ] >( null );

    return (
        <>
            <ComboboxControl
                __next40pxDefaultSize
                onFilterValueChange={fn()}
                label="Country"
                options={countryOptions}
                help="Help text to describe the control."
                value={ value }
                onChange={ ( ...changeArgs ) => {
					setValue( ...changeArgs );
					onChange?.( ...changeArgs );
				} } />
        </>
    );
};

const WithCustomRenderItem = () => {
    const [ value, setValue ] =
		useState< ComboboxControlProps[ 'value' ] >( null );

    return (
        <>
            <ComboboxControl
                __next40pxDefaultSize
                onFilterValueChange={fn()}
                label="Author"
                options={[
                    {
                        value: 'parsley',
                        label: 'Parsley Montana',
                        age: 48,
                        country: 'Germany',
                    },
                    {
                        value: 'cabbage',
                        label: 'Cabbage New York',
                        age: 44,
                        country: 'France',
                    },
                    {
                        value: 'jake',
                        label: 'Jake Weary',
                        age: 41,
                        country: 'United Kingdom',
                    },
                ]}
                __experimentalRenderItem={( { item } ) => {
                    const { label, age, country } = item;
                    return (
                        <div>
                            <div style={ { marginBottom: '0.2rem' } }>{ label }</div>
                            <small>
                                Age: { age }, Country: { country }
                            </small>
                        </div>
                    );
                }}
                value={ value }
                onChange={ ( ...changeArgs ) => {
					setValue( ...changeArgs );
					onChange?.( ...changeArgs );
				} } />
        </>
    );
};

const WithDisabledOptions = () => {
    const [ value, setValue ] =
		useState< ComboboxControlProps[ 'value' ] >( null );

    return (
        <>
            <ComboboxControl
                __next40pxDefaultSize
                onFilterValueChange={fn()}
                options={optionsWithDisabledOptions}
                value={ value }
                onChange={ ( ...changeArgs ) => {
					setValue( ...changeArgs );
					onChange?.( ...changeArgs );
				} } />
        </>
    );
};

const NotExpandOnFocus = () => {
    const [ value, setValue ] =
		useState< ComboboxControlProps[ 'value' ] >( null );

    return (
        <>
            <ComboboxControl
                __next40pxDefaultSize
                onFilterValueChange={fn()}
                options={countryOptions}
                expandOnFocus={false}
                value={ value }
                onChange={ ( ...changeArgs ) => {
					setValue( ...changeArgs );
					onChange?.( ...changeArgs );
				} } />
        </>
    );
};

import { Composite, Provider as SlotFillProvider, Tooltip } from "@wordpress/components";

const Default = () => <Composite>(<>
        <Composite.Item>Item one</Composite.Item>
        <Composite.Item>Item two</Composite.Item>
        <Composite.Item>Item three</Composite.Item>
    </>)</Composite>;

const Groups = () => <Composite>(<>
        <Composite.Group>
            <Composite.GroupLabel>Group one</Composite.GroupLabel>
            <Composite.Item>Item 1.1</Composite.Item>
            <Composite.Item>Item 1.2</Composite.Item>
        </Composite.Group>
        <Composite.Group>
            <Composite.GroupLabel>Group two</Composite.GroupLabel>
            <Composite.Item>Item 2.1</Composite.Item>
            <Composite.Item>Item 2.1</Composite.Item>
        </Composite.Group>
    </>)</Composite>;

const Grid = () => <Composite role="grid" aria-label="Composite">(<>
        <Composite.Row role="row">
            <Composite.Item role="gridcell">Item A1</Composite.Item>
            <Composite.Item role="gridcell">Item A2</Composite.Item>
            <Composite.Item role="gridcell">Item A3</Composite.Item>
        </Composite.Row>
        <Composite.Row role="row">
            <Composite.Item role="gridcell">Item B1</Composite.Item>
            <Composite.Item role="gridcell">Item B2</Composite.Item>
            <Composite.Item role="gridcell">Item B3</Composite.Item>
        </Composite.Row>
        <Composite.Row role="row">
            <Composite.Item role="gridcell">Item C1</Composite.Item>
            <Composite.Item role="gridcell">Item C2</Composite.Item>
            <Composite.Item role="gridcell">Item C3</Composite.Item>
        </Composite.Row>
    </>)</Composite>;

const Hover = () => <Composite>(<>
        <Composite.Hover render={ <Composite.Item /> }>
            Hover item one
        </Composite.Hover>
        <Composite.Hover render={ <Composite.Item /> }>
            Hover item two
        </Composite.Hover>
        <Composite.Hover render={ <Composite.Item /> }>
            Hover item three
        </Composite.Hover>
    </>)</Composite>;

const Typeahead = () => <Composite render={<Composite.Typeahead />}>(<>
        <Composite.Item>Apple</Composite.Item>
        <Composite.Item>Banana</Composite.Item>
        <Composite.Item>Peach</Composite.Item>
    </>)</Composite>;

const WithSlotFill = () => <Composite>(<>
        <Composite.Item>Item one (direct child)</Composite.Item>
        <Slot />
        <Composite.Item>Item four (direct child)</Composite.Item>
    </>)</Composite>;

const WithTooltips = () => <Composite>(<>
        <Tooltip text="Tooltip one">
            <Composite.Item>Item one</Composite.Item>
        </Tooltip>
        <Tooltip text="Tooltip two">
            <Composite.Item>Item two</Composite.Item>
        </Tooltip>
        <Tooltip text="Tooltip three">
            <Composite.Item>Item three</Composite.Item>
        </Tooltip>
    </>)</Composite>;

import { CustomGradientPicker } from "@wordpress/components";

const Default = ( { onChange, ...props } ) => {
	const [ gradient, setGradient ] = useState< string >();
	return (
		<CustomGradientPicker
			{ ...props }
			value={ gradient }
			onChange={ ( newGradient ) => {
				setGradient( newGradient );
				onChange( newGradient );
			} }
		/>
	);
};

import { DateCalendar } from "@wordpress/components";

const Default = () => <DateCalendar onMonthChange={fn()} onSelect={fn()} />;

const DisabledDates = () => <DateCalendar
    onMonthChange={fn()}
    onSelect={fn()}
    disabled={[
        // Disable tomorrow (single date)
        new Date( new Date().setDate( new Date().getDate() + 1 ) ),
        // Disable all dates after Feb 1st of next year
        { after: new Date( new Date().getFullYear() + 1, 1, 1 ) },
        // Disable all dates before Dec 1st of last year
        { before: new Date( new Date().getFullYear() - 1, 11, 1 ) },
        // Disable all dates between 12th and 14th of August of this year
        {
            after: new Date( new Date().getFullYear(), 7, 11 ),
            before: new Date( new Date().getFullYear(), 7, 15 ),
        },
        // Disable all dates between 21st and 26th of October of this year
        {
            from: new Date( new Date().getFullYear(), 9, 21 ),
            to: new Date( new Date().getFullYear(), 9, 26 ),
        },
        // Disable all Wednesdays
        { dayOfWeek: 3 },
        // Disable all prime day numbers
        function isPrimeDate( date: Date ) {
            return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(
                date.getDate()
            );
        },
    ]} />;

const WithSelectedDateAndMonth = () => <DateCalendar
    onMonthChange={fn()}
    onSelect={fn()}
    defaultSelected={firstDayOfNextMonth}
    defaultMonth={firstDayOfNextMonth} />;

const WithOutsideDays = () => <DateCalendar onMonthChange={fn()} onSelect={fn()} showOutsideDays fixedWeeks />;

const WithTimeZone = () => {
    const [ selected, setSelected ] = useState< TZDate | null >( null );

    useEffect( () => {
        setSelected(
            // Select one week from today every time the time zone changes.
            new TZDate(
                new Date().setDate( new Date().getDate() + 7 ),
                args.timeZone
            )
        );
    }, [ args.timeZone ] );

    return (
        <>
            <DateCalendar
                onMonthChange={fn()}
                timeZone="Pacific/Auckland"
                selected={ selected }
                onSelect={ ( selectedDate, ...rest ) => {
                    setSelected(
                        selectedDate
                            ? new TZDate( selectedDate, args.timeZone )
                            : null
                    );
                    args.onSelect?.( selectedDate, ...rest );
                } }
                disabled={ [
                    {
                        // Disable any date before today
                        before: new TZDate( new Date(), args.timeZone ),
                    },
                ] } />
            <p>Calendar set to { args.timeZone ?? 'current' }timezone,
                                    disabling selection for all dates before today, and starting
                                    with a default date of 1 week from today.
                                </p>
        </>
    );
};

import { DateFormatPicker } from "@wordpress/block-editor";

const Default = () => {
    const [ format, setFormat ] = useState();

    return (
        <DateFormatPicker
            defaultFormat="M j, Y"
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setFormat( ...changeArgs );
            } }
            format={ format } />
    );
};

import { DatePicker } from "@wordpress/components";

const Default = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DatePicker
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

const WithEvents = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DatePicker
            events={[
                { date: daysFromNow( 2 ) },
                { date: daysFromNow( 4 ) },
                { date: daysFromNow( 6 ) },
                { date: daysFromNow( 8 ) },
            ]}
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

const WithInvalidDates = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DatePicker
            isInvalidDate={isWeekend}
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

import { DateRangeCalendar } from "@wordpress/components";

const Default = () => <DateRangeCalendar onMonthChange={fn()} onSelect={fn()} />;

const DisabledDates = () => <DateRangeCalendar
    onMonthChange={fn()}
    onSelect={fn()}
    disabled={[
        // Disable tomorrow (single date)
        new Date( new Date().setDate( new Date().getDate() + 1 ) ),
        // Disable all dates after Feb 1st of next year
        { after: new Date( new Date().getFullYear() + 1, 1, 1 ) },
        // Disable all dates before Dec 1st of last year
        { before: new Date( new Date().getFullYear() - 1, 11, 1 ) },
        // Disable all dates between 12th and 14th of August of this year
        {
            after: new Date( new Date().getFullYear(), 7, 11 ),
            before: new Date( new Date().getFullYear(), 7, 15 ),
        },
        // Disable all dates between 21st and 26th of October of this year
        {
            from: new Date( new Date().getFullYear(), 9, 21 ),
            to: new Date( new Date().getFullYear(), 9, 26 ),
        },
        // Disable all Wednesdays
        { dayOfWeek: 3 },
        // Disable all prime day numbers
        function isPrimeDate( date: Date ) {
            return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(
                date.getDate()
            );
        },
    ]} />;

const WithSelectedRangeAndMonth = () => <DateRangeCalendar
    onMonthChange={fn()}
    onSelect={fn()}
    defaultSelected={{
        from: firstDayOfNextMonth,
        to: fourthDayOfNextMonth,
    }}
    defaultMonth={firstDayOfNextMonth} />;

const WithOutsideDays = () => <DateRangeCalendar onMonthChange={fn()} onSelect={fn()} showOutsideDays fixedWeeks />;

const WithTimeZone = () => {
    const [ range, setRange ] = useState< typeof args.selected | null >(
        null
    );

    useEffect( () => {
        setRange(
            // Select from one week from today to two weeks from today
            // every time the timezone changes.
            {
                from: new TZDate(
                    new Date().setDate( new Date().getDate() + 7 ),
                    args.timeZone
                ),
                to: new TZDate(
                    new Date().setDate( new Date().getDate() + 14 ),
                    args.timeZone
                ),
            }
        );
    }, [ args.timeZone ] );

    return (
        <>
            <DateRangeCalendar
                onMonthChange={fn()}
                timeZone="Pacific/Auckland"
                selected={ range }
                onSelect={ ( selectedDate, ...rest ) => {
                    setRange(
                        // Set controlled state to null if there's no selection
                        ! selectedDate ||
                            ( selectedDate.from === undefined &&
                                selectedDate.to === undefined )
                            ? null
                            : selectedDate
                    );
                    args.onSelect?.( selectedDate, ...rest );
                } }
                disabled={ [
                    {
                        // Disable any date before today
                        before: new TZDate( new Date(), args.timeZone ),
                    },
                ] } />
            <p>Calendar set to { args.timeZone ?? 'current' }timezone,
                                    disabling selection for all dates before today, and starting
                                    with a default date range of 1 week from today to 2 weeks
                                    from today.
                                </p>
        </>
    );
};

import { DateTimePicker } from "@wordpress/components";

const Default = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DateTimePicker
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

const WithEvents = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DateTimePicker
            events={[
                { date: daysFromNow( 2 ) },
                { date: daysFromNow( 4 ) },
                { date: daysFromNow( 6 ) },
                { date: daysFromNow( 8 ) },
            ]}
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

const WithInvalidDates = () => {
    const [ date, setDate ] = useState( currentDate );
    useEffect( () => {
		setDate( currentDate );
	}, [ currentDate ] );

    return (
        <DateTimePicker
            isInvalidDate={isWeekend}
            currentDate={ date }
            onChange={ ( newDate ) => {
				setDate( newDate );
				onChange?.( newDate );
			} } />
    );
};

import { Action, CloseIcon, Footer, Header, Popup, Root, Title, Trigger } from "@wordpress/ui";

const _Default = () => <Dialog.Root>(<>
        <Dialog.Trigger>Open Dialog</Dialog.Trigger>
        <Dialog.Popup>
            <Dialog.Header>
                <Dialog.Title>Welcome</Dialog.Title>
                <Dialog.CloseIcon />
            </Dialog.Header>
            <p>
                This dialog demonstrates best practices for
                informational dialogs. It includes a close icon because
                dismissing it is safe and expected.
            </p>
            <Dialog.Footer>
                <Dialog.Action>Got it</Dialog.Action>
            </Dialog.Footer>
        </Dialog.Popup>
    </>)</Dialog.Root>;

const AllSizes = () => <Dialog.Root><SizePlaygroundContent /></Dialog.Root>;

const WithCustomZIndex = () => <Dialog.Root />;

import { DimensionControl } from "@wordpress/block-editor";

const Default = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithCustomLabel = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithWidthLabel = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithMinHeightLabel = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithPresets = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithInitialValue = ( props ) => {
	const [ value, setValue ] = useState();
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

const WithPresetValue = ( props ) => {
	const [ value, setValue ] = useState( 'var:preset|dimension|medium' );
	return (
		<DimensionControl onChange={ setValue } value={ value } { ...props } />
	);
};

import { DimensionsTool } from "@wordpress/block-editor";
import { Panel, __experimentalToolsPanel as ToolsPanel } from "@wordpress/components";

const Default = ( { panelId, onChange, ...props } ) => {
	const [ value, setValue ] = useState( EMPTY_OBJECT );
	const resetAll = () => {
		setValue( EMPTY_OBJECT );
		onChange( EMPTY_OBJECT );
	};
	return (
		<Panel>
			<ToolsPanel
				label="Dimensions"
				panelId={ panelId }
				resetAll={ resetAll }
			>
				<DimensionsTool
					panelId={ panelId }
					onChange={ ( nextValue ) => {
						setValue( nextValue );
						onChange( nextValue );
					} }
					value={ value }
					{ ...props }
				/>
			</ToolsPanel>
		</Panel>
	);
};

import { Disabled, SelectControl, TextareaControl, TextControl, VStack } from "@wordpress/components";

const Default = () => {
    return (
        <Disabled isDisabled>
            <Form />
        </Disabled>
    );
};

const ContentEditable = () => {
    return (
        <Disabled isDisabled>
            <div contentEditable tabIndex={ 0 } suppressContentEditableWarning>contentEditable
                            </div>
        </Disabled>
    );
};

import { Draggable } from "@wordpress/components";
import { Icon } from "@wordpress/icons";

const Default = () => {
    const [ isDragging, setDragging ] = useState( false );
    const instanceId = useInstanceId( DefaultTemplate );

    return (
        <div>
            <p
                style={ {
					padding: '1em',
					position: 'relative',
					zIndex: 1000,
					backgroundColor: 'whitesmoke',
				} }>Is Dragging? { isDragging ? 'Yes' : 'No!' }
            </p>
            <div
                style={ {
					zIndex: 100,
					position: 'relative',
				} }>
                <div
                    id={ `draggable-example-box-${ instanceId }` }
                    style={ {
						display: 'inline-flex',
						position: 'relative',
					} }>
                    <Draggable
                        onDragStart={fn()}
                        onDragEnd={fn()}
                        onDragOver={fn()}
                        elementId={ `draggable-example-box-${ instanceId }` }>
                        { ( { onDraggableStart, onDraggableEnd } ) => {
							const handleOnDragStart = ( event: DragEvent ) => {
								setDragging( true );
								onDraggableStart( event );
							};
							const handleOnDragEnd = ( event: DragEvent ) => {
								setDragging( false );
								onDraggableEnd( event );
							};

							return (
								<div
									onDragStart={ handleOnDragStart }
									onDragEnd={ handleOnDragEnd }
									draggable
									style={ {
										alignItems: 'center',
										display: 'flex',
										justifyContent: 'center',
										width: 100,
										height: 100,
										background: '#ddd',
									} }
								>
									<Icon icon={ more } />
								</div>
							);
						} }
                    </Draggable>
                </div>
            </div>
        </div>
    );
};

const AppendElementToOwnerDocument = () => {
    const [ isDragging, setDragging ] = useState( false );
    const instanceId = useInstanceId( DefaultTemplate );

    return (
        <div>
            <p
                style={ {
					padding: '1em',
					position: 'relative',
					zIndex: 1000,
					backgroundColor: 'whitesmoke',
				} }>Is Dragging? { isDragging ? 'Yes' : 'No!' }
            </p>
            <div
                style={ {
					zIndex: 100,
					position: 'relative',
				} }>
                <div
                    id={ `draggable-example-box-${ instanceId }` }
                    style={ {
						display: 'inline-flex',
						position: 'relative',
					} }>
                    <Draggable
                        onDragStart={fn()}
                        onDragEnd={fn()}
                        onDragOver={fn()}
                        appendToOwnerDocument
                        elementId={ `draggable-example-box-${ instanceId }` }>
                        { ( { onDraggableStart, onDraggableEnd } ) => {
							const handleOnDragStart = ( event: DragEvent ) => {
								setDragging( true );
								onDraggableStart( event );
							};
							const handleOnDragEnd = ( event: DragEvent ) => {
								setDragging( false );
								onDraggableEnd( event );
							};

							return (
								<div
									onDragStart={ handleOnDragStart }
									onDragEnd={ handleOnDragEnd }
									draggable
									style={ {
										alignItems: 'center',
										display: 'flex',
										justifyContent: 'center',
										width: 100,
										height: 100,
										background: '#ddd',
									} }
								>
									<Icon icon={ more } />
								</div>
							);
						} }
                    </Draggable>
                </div>
            </div>
        </div>
    );
};

import { DropZone } from "@wordpress/components";

const Default = ( props ) => {
	return (
		<div
			style={ {
				background: 'lightgray',
				padding: 32,
				position: 'relative',
			} }
		>
			Drop something here
			<DropZone { ...props } />
		</div>
	);
};

import { DuotonePicker } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();

    return (
        <DuotonePicker
            colorPalette={COLOR_PALETTE}
            duotonePalette={DUOTONE_PALETTE}
            onChange={ ( ...changeArgs ) => {
				setValue( ...changeArgs );
				onChange( ...changeArgs );
			} }
            value={ value } />
    );
};

import { Button, EmptyState } from "@wordpress/ui";

const Default = () => <EmptyState.Root>(<>
        <EmptyState.Icon icon={ search } />
        <EmptyState.Title>No results found</EmptyState.Title>
        <EmptyState.Description>
            Try adjusting your search or filter to find what you&apos;re
            looking for.
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button variant="outline">Clear filters</Button>
            <Button>Add item</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;

const WithCustomVisual = () => <EmptyState.Root>(<>
        <EmptyState.Visual>
            <svg
                width="50"
                height="50"
                viewBox="0 0 50 50"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle cx="25" cy="25" r="25" fill="currentColor" />
            </svg>
        </EmptyState.Visual>
        <EmptyState.Title>All caught up!</EmptyState.Title>
        <EmptyState.Description>
            You&apos;ve completed all your tasks. Great work!
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button>Create new task</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;

import { ExternalLink } from "@wordpress/components";

const Default = () => {
    return <ExternalLink href="https://wordpress.org">WordPress</ExternalLink>;
};

import { Field } from "@wordpress/ui";

const Default = () => <Field.Root>(<>
        <Field.Label>Label</Field.Label>
        <Field.Control
            render={ <input type="text" placeholder="Placeholder" /> }
        />
        <Field.Description>
            The accessible description.
        </Field.Description>
    </>)</Field.Root>;

const UsingHtmlFor = () => {
    const controlId = useId();
    const descriptionId = useId();

    return (
        <Field.Root>
            <Field.Label htmlFor={ controlId }>Label</Field.Label>
            <MyNonRefForwardingControl
                placeholder="Placeholder"
                id={ controlId }
                aria-describedby={ descriptionId } />
            <Field.Description id={ descriptionId }>The accessible description.
                                </Field.Description>
        </Field.Root>
    );
};

const UsingAriaLabelledby = () => {
    const labelId = useId();
    const descriptionId = useId();

    return (
        <Field.Root>
            <Field.Label id={ labelId }>Label</Field.Label>
            <MyNonRefForwardingControl
                placeholder="Placeholder"
                aria-labelledby={ labelId }
                aria-describedby={ descriptionId } />
            <Field.Description id={ descriptionId }>The accessible description.
                                </Field.Description>{ ' ' }
        </Field.Root>
    );
};

const HiddenLabel = () => <Field.Root>(<>
        <Field.Label hideFromVision>Label</Field.Label>
        <Field.Control
            render={ <input type="text" placeholder="Placeholder" /> }
        />
    </>)</Field.Root>;

const WithDetails = () => <Field.Root>(<>
        <Field.Label>Label</Field.Label>
        <Field.Control
            render={ <input type="text" placeholder="Placeholder" /> }
        />
        <Field.Details>{ DETAILS_EXAMPLE }</Field.Details>
    </>)</Field.Root>;

import { Fieldset } from "@wordpress/ui";

const Default = () => <Fieldset.Root>(<>
        <Fieldset.Legend>Legend</Fieldset.Legend>
        { [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ) }
        <Fieldset.Description>
            This is a description for the entire fieldset.
        </Fieldset.Description>
    </>)</Fieldset.Root>;

const HiddenLegend = () => <Fieldset.Root>(<>
        <Fieldset.Legend hideFromVision>Legend</Fieldset.Legend>
        { [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ) }
    </>)</Fieldset.Root>;

const WithDetails = () => <Fieldset.Root>(<>
        <Fieldset.Legend>Legend</Fieldset.Legend>
        { [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ) }
        <Fieldset.Details>{ DETAILS_EXAMPLE }</Fieldset.Details>
    </>)</Fieldset.Root>;

import { FocalPointPicker } from "@wordpress/components";

const Default = ( {
	onChange,
	...props
} ) => {
	const [ focalPoint, setFocalPoint ] = useState( {
		x: 0.5,
		y: 0.5,
	} );

	return (
		<FocalPointPicker
			{ ...props }
			value={ focalPoint }
			onChange={ ( ...changeArgs ) => {
				onChange( ...changeArgs );
				setFocalPoint( ...changeArgs );
			} }
		/>
	);
};

const Image = ( {
	onChange,
	...props
} ) => {
	const [ focalPoint, setFocalPoint ] = useState( {
		x: 0.5,
		y: 0.5,
	} );

	return (
		<FocalPointPicker
			{ ...props }
			value={ focalPoint }
			onChange={ ( ...changeArgs ) => {
				onChange( ...changeArgs );
				setFocalPoint( ...changeArgs );
			} }
		/>
	);
};

const Video = ( {
	onChange,
	...props
} ) => {
	const [ focalPoint, setFocalPoint ] = useState( {
		x: 0.5,
		y: 0.5,
	} );

	return (
		<FocalPointPicker
			{ ...props }
			value={ focalPoint }
			onChange={ ( ...changeArgs ) => {
				onChange( ...changeArgs );
				setFocalPoint( ...changeArgs );
			} }
		/>
	);
};

const Snapping = ( {
	onChange,
	...props
} ) => {
	const [ focalPoint, setFocalPoint ] = useState( {
		x: 0.5,
		y: 0.5,
	} );

	return (
		<FocalPointPicker
			{ ...props }
			value={ focalPoint }
			onChange={ ( ...changeArgs ) => {
				onChange( ...changeArgs );
				setFocalPoint( ...changeArgs );
			} }
		/>
	);
};

import { FormFileUpload } from "@wordpress/components";

const Default = ( props ) => {
	return <FormFileUpload __next40pxDefaultSize { ...props } />;
};

const RestrictFileTypes = ( props ) => {
	return <FormFileUpload __next40pxDefaultSize { ...props } />;
};

const AllowMultipleFiles = ( props ) => {
	return <FormFileUpload __next40pxDefaultSize { ...props } />;
};

const WithIcon = ( props ) => {
	return <FormFileUpload __next40pxDefaultSize { ...props } />;
};

const WithCustomRender = ( props ) => {
	return <FormFileUpload __next40pxDefaultSize { ...props } />;
};

import { FormToggle } from "@wordpress/components";

const Default = () => {
    const [ isChecked, setChecked ] = useState( true );

    return (
        <FormToggle
            checked={ isChecked }
            onChange={ ( e ) => {
				setChecked( ( state ) => ! state );
				onChange( e );
			} } />
    );
};

import { FormTokenField } from "@wordpress/components";

const Default = () => {
    const [ selectedContinents, setSelectedContinents ] = useState<
		ComponentProps< typeof FormTokenField >[ 'value' ]
	>( [] );

    return (
        <FormTokenField
            __next40pxDefaultSize
            label="Type a continent"
            suggestions={continents}
            value={ selectedContinents }
            onChange={ ( tokens ) => setSelectedContinents( tokens ) } />
    );
};

const Async = () => {
    const [ selectedContinents, setSelectedContinents ] = useState<
		ComponentProps< typeof FormTokenField >[ 'value' ]
	>( [] );
    const [ availableContinents, setAvailableContinents ] = useState<
		string[]
	>( [] );

    const searchContinents = ( input: string ) => {
		const timeout = setTimeout( () => {
			const available = ( suggestions || [] ).filter( ( continent ) =>
				continent.toLowerCase().includes( input.toLowerCase() )
			);
			setAvailableContinents( available );
		}, 1000 );

		return () => clearTimeout( timeout );
	};

    return (
        <FormTokenField
            __next40pxDefaultSize
            label="Type a continent"
            value={ selectedContinents }
            suggestions={ availableContinents }
            onChange={ ( tokens ) => setSelectedContinents( tokens ) }
            onInputChange={ searchContinents } />
    );
};

const DropdownSelector = () => {
    const [ selectedContinents, setSelectedContinents ] = useState<
		ComponentProps< typeof FormTokenField >[ 'value' ]
	>( [] );

    return (
        <FormTokenField
            __next40pxDefaultSize
            __experimentalExpandOnFocus
            __experimentalAutoSelectFirstMatch
            value={ selectedContinents }
            onChange={ ( tokens ) => setSelectedContinents( tokens ) } />
    );
};

const WithCustomRenderedItems = () => {
    const [ selectedContinents, setSelectedContinents ] = useState<
		ComponentProps< typeof FormTokenField >[ 'value' ]
	>( [] );

    return (
        <FormTokenField
            __next40pxDefaultSize
            displayTransform={( token ) => `📍 ${ token }`}
            __experimentalRenderItem={( { item } ) => (
                <div>{ `${ item } — a nice place to visit` }</div>
            )}
            __experimentalExpandOnFocus
            value={ selectedContinents }
            onChange={ ( tokens ) => setSelectedContinents( tokens ) } />
    );
};

const ValidateNewTokens = () => {
    const [ selectedContinents, setSelectedContinents ] = useState<
		ComponentProps< typeof FormTokenField >[ 'value' ]
	>( [] );

    return (
        <FormTokenField
            __next40pxDefaultSize
            __experimentalValidateInput={( input: string ) =>
                continents.includes( input )}
            __experimentalExpandOnFocus
            value={ selectedContinents }
            onChange={ ( tokens ) => setSelectedContinents( tokens ) } />
    );
};

import { GradientPicker } from "@wordpress/components";

const Default = ( {
	onChange,
	...props
}: React.ComponentProps< typeof GradientPicker > ) => {
	const [ gradient, setGradient ] =
		useState< ( typeof props )[ 'value' ] >( null );
	return (
		<GradientPicker
			{ ...props }
			value={ gradient }
			onChange={ ( ...changeArgs ) => {
				setGradient( ...changeArgs );
				onChange?.( ...changeArgs );
			} }
		/>
	);
};

const WithNoExistingGradients = ( {
	onChange,
	...props
}: React.ComponentProps< typeof GradientPicker > ) => {
	const [ gradient, setGradient ] =
		useState< ( typeof props )[ 'value' ] >( null );
	return (
		<GradientPicker
			{ ...props }
			value={ gradient }
			onChange={ ( ...changeArgs ) => {
				setGradient( ...changeArgs );
				onChange?.( ...changeArgs );
			} }
		/>
	);
};

const MultipleOrigins = ( {
	onChange,
	...props
}: React.ComponentProps< typeof GradientPicker > ) => {
	const [ gradient, setGradient ] =
		useState< ( typeof props )[ 'value' ] >( null );
	return (
		<GradientPicker
			{ ...props }
			value={ gradient }
			onChange={ ( ...changeArgs ) => {
				setGradient( ...changeArgs );
				onChange?.( ...changeArgs );
			} }
		/>
	);
};

const CSSVariables = () => <div
    style={ {
        '--red': '#f00',
        '--yellow': '#ff0',
        '--blue': '#00f',
    } }>
    <Template
        onChange={fn()}
        gradients={[
			{
				name: 'Red to Yellow',
				gradient:
					'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
				slug: 'red-to-yellow',
			},
			{
				name: 'Yellow to Blue',
				gradient:
					'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
				slug: 'yellow-to-blue',
			},
			{
				name: 'Blue to Red',
				gradient:
					'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
				slug: 'blue-to-red',
			},
		]} />
</div>;

import { Button, Guide } from "@wordpress/components";

const Default = ( { onFinish, ...props } ) => {
	const [ isOpen, setOpen ] = useState( false );

	const openGuide = () => setOpen( true );
	const closeGuide = () => setOpen( false );

	return (
		<>
			<Button
				__next40pxDefaultSize
				variant="secondary"
				onClick={ openGuide }
			>
				Open Guide
			</Button>
			{ isOpen && (
				<Guide
					{ ...props }
					onFinish={ ( ...finishArgs ) => {
						closeGuide();
						onFinish?.( ...finishArgs );
					} }
				/>
			) }
		</>
	);
};

import { HeadingLevelDropdown } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState( args.value );

    return (
        <HeadingLevelDropdown
            value={ value }
            onChange={ ( ...changeArgs ) => {
                setValue( ...changeArgs );
                onChange( ...changeArgs );
            } } />
    );
};

import { HeightControl } from "@wordpress/block-editor";

const Default = ( props ) => {
	const [ value, setValue ] = useState();
	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
};

import { Icon, VStack } from "@wordpress/components";
import { Path, SVG } from "@wordpress/primitives";

const Default = () => <Icon icon={wordpress} />;

const FillColor = () => {
    return (
        <div
            style={ {
				fill: 'blue',
			} }>
            <Icon />
        </div>
    );
};

const WithAFunction = () => <Icon
    icon={( { size }: { size?: number } ) => (
		<img
			width={ size }
			height={ size }
			src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
			alt="WordPress"
		/>
	)} />;

const WithAComponent = () => <Icon icon={<MyIconComponent />} />;

const WithAnSVG = () => <Icon
    icon={(<SVG>
        <Path d="M5 4v3h5.5v12h3V7H19V4z" />
    </SVG>)} />;

const WithADashicon = () => {
    return (
        <VStack>
            <Icon icon="wordpress" />
            <small>This won’t show an icon if the Dashicons stylesheet isn’t
                                loaded.
                            </small>
        </VStack>
    );
};

import { Icon } from "@wordpress/icons";

const Default = (): ReactElement => {
	return (
		<>
			<div>
				<h2>Dashicons (corrected viewport)</h2>

				<Icon icon={ check } />
				<Icon icon={ check } size={ 36 } />
				<Icon icon={ check } size={ 48 } />
			</div>
			<div>
				<h2>Material and Other</h2>

				<Icon icon={ icons.paragraph } />
				<Icon icon={ icons.paragraph } size={ 36 } />
				<Icon icon={ icons.paragraph } size={ 48 } />
			</div>
		</>
	);
};

import { Icon } from "@wordpress/ui";

const Default = () => <Icon icon={wordpress} />;

const WithIntrinsicFillColor = () => <Icon
    icon={(<svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="blue"
    >
        <rect x="0" y="0" width="24" height="24" />
    </svg>)} />;

import { IconButton } from "@wordpress/ui";

const Default = () => <IconButton icon={cog} label="Settings" />;

const Outline = () => <IconButton variant="outline" />;

const Minimal = () => <IconButton variant="minimal" />;

const Neutral = () => <IconButton tone="neutral" label="Settings" />;

const NeutralOutline = () => <IconButton tone="neutral" variant="outline" label="Settings" />;

const Disabled = () => <IconButton disabled label="Settings" />;

const WithDifferentIcons = () => <div
    style={ {
        display: 'flex',
        gap: '1rem',
        alignItems: 'center',
        flexWrap: 'wrap',
    } }>
    <IconButton icon={ wordpress } label="WordPress" />
    <IconButton icon={ plus } label="Add" />
    <IconButton icon={ pencil } label="Edit" />
    <IconButton icon={ trash } label="Delete" />
    <IconButton icon={ download } label="Download" />
    <IconButton icon={ upload } label="Upload" />
</div>;

const Pressed = () => <IconButton tone="neutral" variant="minimal" label="Toggle Settings" aria-pressed />;

const WithShortcut = () => <IconButton icon={copy} label="Copy" shortcut={EXAMPLE_SHORTCUT_OBJECT} />;

import { Button, InputControl, InputControlPrefixWrapper, InputControlSuffixWrapper } from "@wordpress/components";
import { Icon } from "@wordpress/icons";

const Default = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    label="Value"
    placeholder="Placeholder" />;

const WithHelpText = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    help="Help text to describe the control." />;

const WithPrefix = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>} />;

const WithSuffix = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>} />;

const WithIconOrControl = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    prefix={(<InputControlPrefixWrapper variant="icon">
        <Icon icon={ link } />
    </InputControlPrefixWrapper>)}
    suffix={(<InputControlSuffixWrapper variant="control">
        <Button icon={ closeSmall } size="small" label="Clear" />
    </InputControlSuffixWrapper>)} />;

const WithSideLabel = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    labelPosition="side" />;

const WithEdgeLabel = () => <InputControl
    __next40pxDefaultSize
    onChange={fn()}
    onValidate={fn()}
    onKeyDown={fn()}
    __unstableInputWidth="20em"
    labelPosition="edge" />;

const ShowPassword = () => {
    const [ visible, setVisible ] = useState( false );

    return (
        <InputControl
            __next40pxDefaultSize
            type={ visible ? 'text' : 'password' }
            suffix={
				<InputControlSuffixWrapper variant="control">
					<Button
						size="small"
						icon={ visible ? unseen : seen }
						onClick={ () => setVisible( ( value ) => ! value ) }
						label={ visible ? 'Hide password' : 'Show password' }
					/>
				</InputControlSuffixWrapper>
			}
            onChange={fn()}
            onValidate={fn()}
            onKeyDown={fn()}
            label="Password"
            placeholder={undefined} />
    );
};

import { IconButton, InputLayout } from "@wordpress/ui";

const Default = () => <InputLayout />;

const WithPrefix = () => <InputLayout
    prefix={(<div
        style={ {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%',
            aspectRatio: '1 / 1',
            background: '#eee',
        } }
    >$
                    </div>)} />;

const WithPaddedPrefix = () => <InputLayout prefix={<InputLayout.Slot>https://</InputLayout.Slot>} />;

const WithSuffixControl = () => <InputLayout
    suffix={(<InputLayout.Slot padding="minimal">
        <IconButton
            size="small"
            variant="minimal"
            icon={ copy }
            label="Copy"
        />
    </InputLayout.Slot>)}><div style={ { flex: 1 } } /></InputLayout>;

const Compact = () => <InputLayout size="compact" />;

const Small = () => <InputLayout size="small" />;

import { KeyboardShortcuts } from "@wordpress/components";

const Default = ( props ) => (
	<KeyboardShortcuts { ...props } />
);

import { LetterSpacingControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <LetterSpacingControl
            __next40pxDefaultSize
            value={ value }
            onChange={ ( newValue ) => {
                onChange( newValue );
                setValue( newValue );
            } } />
    );
};

import { Link, Stack, Text } from "@wordpress/ui";

const Default = () => <Link href="#">Learn more</Link>;

const AllTonesAndVariants = ( args ) => (
    <Stack direction="column" gap="lg">
        { ( [ 'brand', 'neutral' ] as const ).map( ( tone ) =>
            ( [ 'default', 'unstyled' ] as const ).map( ( variant ) => (
                <Stack
                    direction="column"
                    gap="xs"
                    key={ `${ tone }-${ variant }` }
                >
                    <Text variant="heading-sm">
                        { tone } tone, { variant } variant
                    </Text>
                    <Link { ...args } tone={ tone } variant={ variant } />
                </Stack>
            ) )
        ) }
    </Stack>
);

const Inline = () => <Text variant="body-md" render={ <p /> }>This is a paragraph with an <Link>inline link</Link>that inherits its
                typography from the parent Text component.
            </Text>;

const Standalone = ( args ) => (
    <Stack direction="column" gap="md">
        <Text variant="body-md" render={ <Link { ...args } /> }>
            A standalone link with body-md typography
        </Text>
        <Text variant="body-sm" render={ <Link { ...args } /> }>
            A standalone link with body-sm typography
        </Text>
    </Stack>
);

import { MenuGroup, MenuItem, MenuItemsChoice } from "@wordpress/components";

const Default = () => {
    return (
        <MenuGroup>
            <MenuItem>Menu Item 1</MenuItem>
            <MenuItem>Menu Item 2</MenuItem>
        </MenuGroup>
    );
};

const WithSeparator = () => {
    const [ mode, setMode ] = useState( 'visual' );
    const choices = [
		{
			value: 'visual',
			label: 'Visual editor',
		},
		{
			value: 'text',
			label: 'Code editor',
		},
	];

    return (
        <>
            <MenuGroup label="View">
                <MenuItem>Top Toolbar</MenuItem>
                <MenuItem>Spotlight Mode</MenuItem>
                <MenuItem>Distraction Free</MenuItem>
            </MenuGroup>
            <MenuGroup hideSeparator={false} label="Editor">
                <MenuItemsChoice
                    choices={ choices }
                    value={ mode }
                    onSelect={ ( newMode: string ) => setMode( newMode ) }
                    onHover={ () => {} } />
            </MenuGroup>
        </>
    );
};

import { MenuGroup, MenuItem, Shortcut } from "@wordpress/components";

const Default = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

const IsSelected = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

const WithIcon = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

const WithInfo = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

const WithSuffix = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

import { MenuGroup, MenuItemsChoice } from "@wordpress/components";

const Default = ( {
	onHover,
	onSelect,
	choices,
} ) => {
	const [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );

	return (
		<MenuGroup label="Editor">
			<MenuItemsChoice
				choices={ choices }
				value={ choice }
				onSelect={ ( ...selectArgs ) => {
					onSelect( ...selectArgs );
					setChoice( ...selectArgs );
				} }
				onHover={ onHover }
			/>
		</MenuGroup>
	);
};

import { Button, InputControl, Modal } from "@wordpress/components";

const Default = ( { onRequestClose, ...args } ) => {
	const [ isOpen, setOpen ] = useState( false );
	const openModal = () => setOpen( true );
	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
		setOpen( false );
		onRequestClose( event );
	};

	return (
		<>
			<Button
				__next40pxDefaultSize
				variant="secondary"
				onClick={ openModal }
			>
				Open Modal
			</Button>
			{ isOpen && (
				<Modal onRequestClose={ closeModal } { ...args }>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
						sed do eiusmod tempor incididunt ut labore et magna
						aliqua. Ut enim ad minim veniam, quis nostrud
						exercitation ullamco laboris nisi ut aliquip ex ea ea
						commodo consequat. Duis aute irure dolor in
						reprehenderit in voluptate velit esse cillum dolore eu
						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
						non proident, sunt in culpa qui officia deserunt mollit
						anim id est laborum.
					</p>

					<InputControl
						__next40pxDefaultSize
						style={ { marginBottom: '20px' } }
					/>

					<Button
						__next40pxDefaultSize
						variant="secondary"
						onClick={ closeModal }
					>
						Close Modal
					</Button>
				</Modal>
			) }
		</>
	);
};

const WithsizeSmall = ( { onRequestClose, ...args } ) => {
	const [ isOpen, setOpen ] = useState( false );
	const openModal = () => setOpen( true );
	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
		setOpen( false );
		onRequestClose( event );
	};

	return (
		<>
			<Button
				__next40pxDefaultSize
				variant="secondary"
				onClick={ openModal }
			>
				Open Modal
			</Button>
			{ isOpen && (
				<Modal onRequestClose={ closeModal } { ...args }>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
						sed do eiusmod tempor incididunt ut labore et magna
						aliqua. Ut enim ad minim veniam, quis nostrud
						exercitation ullamco laboris nisi ut aliquip ex ea ea
						commodo consequat. Duis aute irure dolor in
						reprehenderit in voluptate velit esse cillum dolore eu
						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
						non proident, sunt in culpa qui officia deserunt mollit
						anim id est laborum.
					</p>

					<InputControl
						__next40pxDefaultSize
						style={ { marginBottom: '20px' } }
					/>

					<Button
						__next40pxDefaultSize
						variant="secondary"
						onClick={ closeModal }
					>
						Close Modal
					</Button>
				</Modal>
			) }
		</>
	);
};

const WithHeaderActions = ( { onRequestClose, ...args } ) => {
	const [ isOpen, setOpen ] = useState( false );
	const openModal = () => setOpen( true );
	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
		setOpen( false );
		onRequestClose( event );
	};

	return (
		<>
			<Button
				__next40pxDefaultSize
				variant="secondary"
				onClick={ openModal }
			>
				Open Modal
			</Button>
			{ isOpen && (
				<Modal onRequestClose={ closeModal } { ...args }>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
						sed do eiusmod tempor incididunt ut labore et magna
						aliqua. Ut enim ad minim veniam, quis nostrud
						exercitation ullamco laboris nisi ut aliquip ex ea ea
						commodo consequat. Duis aute irure dolor in
						reprehenderit in voluptate velit esse cillum dolore eu
						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
						non proident, sunt in culpa qui officia deserunt mollit
						anim id est laborum.
					</p>

					<InputControl
						__next40pxDefaultSize
						style={ { marginBottom: '20px' } }
					/>

					<Button
						__next40pxDefaultSize
						variant="secondary"
						onClick={ closeModal }
					>
						Close Modal
					</Button>
				</Modal>
			) }
		</>
	);
};

import { NavigableMenu } from "@wordpress/components";

const Default = () => {
    return (
        <>
            <button>Before navigable menu</button>
            <NavigableMenu
                onKeyDown={fn()}
                onNavigate={fn()}
                style={ {
					margin: '32px 0',
					padding: '16px',
					border: '1px solid black',
				} }>
                <div role="menuitem">Item 1 (non-tabbable, non-focusable)</div>
                <button role="menuitem">Item 2 (tabbable, focusable)</button>
                <button role="menuitem" disabled>Item 3 (disabled, therefore non-tabbable and not-focusable)
                                    </button>
                <span role="menuitem" tabIndex={ -1 }>Item 4 (non-tabbable, non-focusable)
                                    </span>
                <div role="menuitem" tabIndex={ 0 }>Item 5 (tabbable, focusable)
                                    </div>
            </NavigableMenu>
            <button>After navigable menu</button>
        </>
    );
};

import { Navigation } from "@wordpress/components";

const _default = () => <Navigation onActivateMenu={fn()} />;

const ControlledState = () => <Navigation onActivateMenu={fn()} />;

const Groups = () => <Navigation onActivateMenu={fn()} />;

const Search = () => <Navigation onActivateMenu={fn()} />;

const MoreExamples = () => <Navigation onActivateMenu={fn()} />;

const HideIfEmpty = () => <Navigation onActivateMenu={fn()} />;

import { Button, Notice, NoticeList } from "@wordpress/components";

const Default = ( props ) => {
	return <Notice { ...props } />;
};

const WithCustomSpokenMessage = ( props ) => {
	return <Notice { ...props } />;
};

const WithJSXChildren = ( props ) => {
	return <Notice { ...props } />;
};

const WithActions = ( props ) => {
	return <Notice { ...props } />;
};

const NoticeListSubcomponent = () => {
	const exampleNotices: NoticeListProps[ 'notices' ] = [
		{
			id: 'second-notice',
			content: 'second notice content',
		},
		{
			id: 'first-notice',
			content: 'first notice content',
			actions: [
				{
					label: 'Click me!',
					onClick: () => {},
					variant: 'primary',
				},
				{
					label: 'Or click me instead!',
					onClick: () => {},
				},
				{
					label: 'Or visit a link for more info',
					url: 'https://wordpress.org',
					variant: 'link',
				},
			],
		},
	];
	const [ notices, setNotices ] = useState( exampleNotices );

	const removeNotice = (
		id: NoticeListProps[ 'notices' ][ number ][ 'id' ]
	) => {
		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
	};

	const resetNotices = () => {
		setNotices( exampleNotices );
	};

	return (
		<>
			<NoticeList notices={ notices } onRemove={ removeNotice } />
			<Button
				__next40pxDefaultSize
				variant="primary"
				onClick={ resetNotices }
			>
				Reset Notices
			</Button>
		</>
	);
};

const WithDisabledAction = ( props ) => {
	return <Notice { ...props } />;
};

import { ActionButton, ActionLink, Actions, CloseIcon, Description, Root, Title } from "@wordpress/ui";

const Default = () => <Notice.Root>(<>
        <Notice.Title>Notice Title</Notice.Title>
        <Notice.Description>
            Description text with details about this notification.
        </Notice.Description>
        <Notice.Actions>
            <Notice.ActionButton>Primary button</Notice.ActionButton>
            <Notice.ActionButton variant="outline">
                Secondary button
            </Notice.ActionButton>
            <Notice.ActionLink href="#">Link</Notice.ActionLink>
        </Notice.Actions>
        <Notice.CloseIcon />
    </>)</Notice.Root>;

const Info = () => <Notice.Root intent="info" />;

const Warning = () => <Notice.Root intent="warning" />;

const Success = () => <Notice.Root intent="success" />;

const Error = () => <Notice.Root intent="error" />;

const NonDismissible = () => <Notice.Root intent="warning">(<>
        <Notice.Title>Action Required</Notice.Title>
        <Notice.Description>
            This notice cannot be dismissed by the user.
        </Notice.Description>
        <Notice.Actions>
            <Notice.ActionButton>Take Action</Notice.ActionButton>
            <Notice.ActionLink href="#">Visit link</Notice.ActionLink>
        </Notice.Actions>
    </>)</Notice.Root>;

const WithoutIcon = () => <Notice.Root intent="info" icon={null}>(<>
        <Notice.Title>No Icon</Notice.Title>
        <Notice.Description>
            This notice has no decorative icon displayed.
        </Notice.Description>
        <Notice.CloseIcon />
    </>)</Notice.Root>;

const WithoutActions = () => <Notice.Root intent="info">(<>
        <Notice.Title>Simple Notice</Notice.Title>
        <Notice.Description>
            A dismissable notice without any action buttons or links.
        </Notice.Description>
        <Notice.CloseIcon />
    </>)</Notice.Root>;

const TitleOnly = () => <Notice.Root>(<>
        <Notice.Title>Just a title</Notice.Title>
        <Notice.CloseIcon />
    </>)</Notice.Root>;

const DescriptionOnly = () => <Notice.Root intent="info">(<>
        <Notice.Description>
            Just a description without title or actions.
        </Notice.Description>
        <Notice.CloseIcon />
    </>)</Notice.Root>;

import { PaletteEdit } from "@wordpress/components";

const Default = ( args ) => {
	const { colors, gradients, onChange, ...props } = args;
	const [ value, setValue ] = useState( gradients || colors );

	return (
		<PaletteEdit
			{ ...( gradients
				? {
						gradients: value as Gradient[],
						onChange: ( newValue?: Gradient[] ) => {
							setValue( newValue );
							onChange( newValue );
						},
				  }
				: {
						colors: value as Color[],
						onChange: ( newValue?: Color[] ) => {
							setValue( newValue );
							onChange( newValue );
						},
				  } ) }
			{ ...props }
		/>
	);
};

const Gradients = ( args ) => {
	const { colors, gradients, onChange, ...props } = args;
	const [ value, setValue ] = useState( gradients || colors );

	return (
		<PaletteEdit
			{ ...( gradients
				? {
						gradients: value as Gradient[],
						onChange: ( newValue?: Gradient[] ) => {
							setValue( newValue );
							onChange( newValue );
						},
				  }
				: {
						colors: value as Color[],
						onChange: ( newValue?: Color[] ) => {
							setValue( newValue );
							onChange( newValue );
						},
				  } ) }
			{ ...props }
		/>
	);
};

import { InputControl, Panel, PanelBody, PanelRow } from "@wordpress/components";

const Default = ( props ) => <Panel { ...props } />;

const _PanelRow = ( props ) => <Panel { ...props } />;

const DisabledSection = ( props ) => <Panel { ...props } />;

const WithIcon = ( props ) => <Panel { ...props } />;

import { Placeholder, TextControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <Placeholder
            icon="wordpress"
            label="My Placeholder Label"
            instructions="Here are instructions you should follow">
            <div>
                <TextControl
                    __next40pxDefaultSize
                    label="Sample Field"
                    placeholder="Enter something here"
                    value={ value }
                    onChange={ setValue } />
            </div>
        </Placeholder>
    );
};

import { PlainText } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <PlainText
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { ProgressBar } from "@wordpress/components";

const Default = () => {
    return <ProgressBar />;
};

const WithCustomWidth = () => {
    return <ProgressBar className="custom-progress-bar" />;
};

import { QueryControls } from "@wordpress/components";

const Default = ( args ) => {
	const {
		onAuthorChange,
		onCategoryChange,
		onNumberOfItemsChange,
		onOrderByChange,
		onOrderChange,
		...props
	} = args as QueryControlsWithMultipleCategorySelectionProps;
	const [ ownNumberOfItems, setOwnNumberOfItems ] = useState(
		props.numberOfItems
	);
	const [ ownOrder, setOwnOrder ] = useState( props.order );
	const [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );
	const [ ownSelectedAuthorId, setOwnSelectedAuthorId ] = useState(
		props.selectedAuthorId
	);
	const [ ownSelectedCategories, setOwnSelectedCategories ] = useState(
		props.selectedCategories
	);

	const handleCategoryChange: QueryControlsWithMultipleCategorySelectionProps[ 'onCategoryChange' ] =
		( tokens ) => {
			onCategoryChange?.( tokens );

			const hasNoSuggestion = tokens.some(
				( token ) =>
					typeof token === 'string' &&
					! props.categorySuggestions?.[ token ]
			);
			if ( hasNoSuggestion ) {
				return;
			}
			const allCategories = tokens
				.map( ( token ) => {
					return typeof token === 'string'
						? props.categorySuggestions?.[ token ]
						: token;
				} )
				.filter( Boolean ) as Array< Required< Category > >;

			setOwnSelectedCategories( allCategories );
		};

	return (
		<QueryControls
			{ ...props }
			numberOfItems={ ownNumberOfItems }
			onCategoryChange={ handleCategoryChange }
			onOrderByChange={ ( newOrderBy ) => {
				onOrderByChange?.( newOrderBy );
				setOwnOrderBy( newOrderBy );
			} }
			onOrderChange={ ( newOrder ) => {
				onOrderChange?.( newOrder );
				setOwnOrder( newOrder );
			} }
			order={ ownOrder }
			orderBy={ ownOrderBy }
			onNumberOfItemsChange={ ( newNumber ) => {
				onNumberOfItemsChange?.( newNumber );
				setOwnNumberOfItems( newNumber );
			} }
			onAuthorChange={ ( newAuthor ) => {
				onAuthorChange?.( newAuthor );
				setOwnSelectedAuthorId( Number( newAuthor ) );
			} }
			selectedAuthorId={ ownSelectedAuthorId }
			selectedCategories={ ownSelectedCategories }
		/>
	);
};

const SelectSingleCategory = ( args ) => {
	const {
		onAuthorChange,
		onCategoryChange,
		onNumberOfItemsChange,
		onOrderByChange,
		onOrderChange,
		...props
	} = args as QueryControlsWithSingleCategorySelectionProps;
	const [ ownOrder, setOwnOrder ] = useState( props.order );
	const [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );
	const [ ownSelectedCategoryId, setSelectedCategoryId ] = useState(
		props.selectedCategoryId
	);

	const handleCategoryChange: QueryControlsWithSingleCategorySelectionProps[ 'onCategoryChange' ] =
		( newCategory ) => {
			onCategoryChange?.( newCategory );
			setSelectedCategoryId( Number( newCategory ) );
		};

	return (
		<QueryControls
			{ ...props }
			onCategoryChange={ handleCategoryChange }
			onOrderByChange={ ( newOrderBy ) => {
				setOwnOrderBy( newOrderBy );
			} }
			onOrderChange={ ( newOrder ) => {
				onOrderChange?.( newOrder );
				setOwnOrder( newOrder );
			} }
			order={ ownOrder }
			orderBy={ ownOrderBy }
			selectedCategoryId={ ownSelectedCategoryId }
		/>
	);
};

import { RadioControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState( options?.[ 0 ]?.value );

    return (
        <RadioControl
            label="Post visibility"
            selected={ value }
            options={ options }
            onChange={ ( v ) => {
				setValue( v );
				onChange( v );
			} } />
    );
};

const WithOptionDescriptions = () => {
    const [ value, setValue ] = useState( options?.[ 0 ]?.value );

    return (
        <RadioControl
            selected={ value }
            options={ options }
            onChange={ ( v ) => {
				setValue( v );
				onChange( v );
			} } />
    );
};

import { RangeControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState< number >();

    return (
        <RangeControl
            __next40pxDefaultSize
            onBlur={fn()}
            onFocus={fn()}
            onMouseLeave={fn()}
            onMouseMove={fn()}
            help="Please select how transparent you would like this."
            initialPosition={50}
            label="Opacity"
            max={100}
            min={0}
            value={ value }
            onChange={ ( v ) => {
				setValue( v );
				onChange?.( v );
			} } />
    );
};

const WithAnyStep = () => {
    const [ value, setValue ] = useState< number >();

    return (
        <>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                label="Brightness"
                step="any"
                value={ value }
                onChange={ ( v ) => {
					setValue( v );
					onChange?.( v );
				} } />
            <hr style={ { marginTop: '5em' } } />
            <p>Current value: { value }</p>
        </>
    );
};

const WithIntegerStepAndMarks = () => {
    const [ automaticValue, setAutomaticValue ] = useState< number >();
    const [ customValue, setCustomValue ] = useState< number >();

    return (
        <>
            <h2>{ label }</h2>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                max={10}
                min={0}
                step={1}
                label="Automatic marks"
                marks
                onChange={ ( v ) => {
					setAutomaticValue( v );
					onChange?.( v );
				} }
                value={ automaticValue } />
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                marks={marksBase}
                max={10}
                min={0}
                step={1}
                label="Custom marks"
                onChange={ ( v ) => {
					setCustomValue( v );
					onChange?.( v );
				} }
                value={ customValue } />
        </>
    );
};

const WithDecimalStepAndMarks = () => {
    const [ automaticValue, setAutomaticValue ] = useState< number >();
    const [ customValue, setCustomValue ] = useState< number >();

    return (
        <>
            <h2>{ label }</h2>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                max={10}
                min={0}
                step={0.1}
                label="Automatic marks"
                marks
                onChange={ ( v ) => {
					setAutomaticValue( v );
					onChange?.( v );
				} }
                value={ automaticValue } />
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                marks={[
                    ...marksBase,
                    { value: 3.5, label: '3.5' },
                    { value: 5.8, label: '5.8' },
                ]}
                max={10}
                min={0}
                step={0.1}
                label="Custom marks"
                onChange={ ( v ) => {
					setCustomValue( v );
					onChange?.( v );
				} }
                value={ customValue } />
        </>
    );
};

const WithNegativeMinimumAndMarks = () => {
    const [ automaticValue, setAutomaticValue ] = useState< number >();
    const [ customValue, setCustomValue ] = useState< number >();

    return (
        <>
            <h2>{ label }</h2>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                max={10}
                min={-10}
                step={1}
                label="Automatic marks"
                marks
                onChange={ ( v ) => {
					setAutomaticValue( v );
					onChange?.( v );
				} }
                value={ automaticValue } />
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                marks={marksWithNegatives}
                max={10}
                min={-10}
                step={1}
                label="Custom marks"
                onChange={ ( v ) => {
					setCustomValue( v );
					onChange?.( v );
				} }
                value={ customValue } />
        </>
    );
};

const WithNegativeRangeAndMarks = () => {
    const [ automaticValue, setAutomaticValue ] = useState< number >();
    const [ customValue, setCustomValue ] = useState< number >();

    return (
        <>
            <h2>{ label }</h2>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                max={-1}
                min={-10}
                step={1}
                label="Automatic marks"
                marks
                onChange={ ( v ) => {
					setAutomaticValue( v );
					onChange?.( v );
				} }
                value={ automaticValue } />
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                marks={marksWithNegatives}
                max={-1}
                min={-10}
                step={1}
                label="Custom marks"
                onChange={ ( v ) => {
					setCustomValue( v );
					onChange?.( v );
				} }
                value={ customValue } />
        </>
    );
};

const WithAnyStepAndMarks = () => {
    const [ automaticValue, setAutomaticValue ] = useState< number >();
    const [ customValue, setCustomValue ] = useState< number >();

    return (
        <>
            <h2>{ label }</h2>
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                max={10}
                min={0}
                step="any"
                label="Automatic marks"
                marks
                onChange={ ( v ) => {
					setAutomaticValue( v );
					onChange?.( v );
				} }
                value={ automaticValue } />
            <RangeControl
                __next40pxDefaultSize
                onBlur={fn()}
                onFocus={fn()}
                onMouseLeave={fn()}
                onMouseMove={fn()}
                marks={marksBase}
                max={10}
                min={0}
                step="any"
                label="Custom marks"
                onChange={ ( v ) => {
					setCustomValue( v );
					onChange?.( v );
				} }
                value={ customValue } />
        </>
    );
};

import { ResponsiveWrapper } from "@wordpress/components";

const Default = () => <ResponsiveWrapper naturalWidth={2000} naturalHeight={680}><img
        src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
        alt="WordPress" /></ResponsiveWrapper>;

const WithSVG = () => <ResponsiveWrapper><svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 280 640"
        preserveAspectRatio="xMinYMin meet"
        width="280px"
        height="640px">
        <rect x="0" y="0" width="280" height="640" style={ { fill: 'blue' } } />
        <g>
            <circle style={ { fill: 'red' } } cx="140" cy="160" r="60" />
            <circle style={ { fill: 'yellow' } } cx="140" cy="320" r="60" />
            <circle style={ { fill: '#40CC40' } } cx="140" cy="480" r="60" />
        </g>
    </svg></ResponsiveWrapper>;

import { SandBox } from "@wordpress/components";

const Default = () => <SandBox onFocus={fn()} html="<p>Arbitrary HTML content</p>" />;

import { Panel, __experimentalToolsPanel as ToolsPanel } from "@wordpress/components";
import { ScaleTool } from "@wordpress/block-editor";

const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
	const [ value, setValue ] = useState( undefined );
	const resetAll = () => {
		setValue( undefined );
		onChangeProp( undefined );
	};
	return (
		<Panel>
			<ToolsPanel label="Scale" panelId={ panelId } resetAll={ resetAll }>
				<ScaleTool
					panelId={ panelId }
					onChange={ ( nextValue ) => {
						setValue( nextValue );
						onChangeProp( nextValue );
					} }
					value={ value }
					{ ...props }
				/>
			</ToolsPanel>
		</Panel>
	);
};

import { SearchControl } from "@wordpress/components";

const Default = ( {
	onChange,
	...props
} ) => {
	const [ value, setValue ] = useState< string >();

	return (
		<SearchControl
			{ ...props }
			value={ value }
			onChange={ ( ...changeArgs ) => {
				setValue( ...changeArgs );
				onChange( ...changeArgs );
			} }
		/>
	);
};

import { Select } from "@wordpress/ui";

const Default = () => <Select.Root>(<>
        <Select.Trigger />
        <Select.Popup>
            { Array.from( { length: 6 }, ( _, index ) => (
                <Select.Item
                    key={ index }
                    value={ `Item ${ index + 1 }` }
                />
            ) ) }
        </Select.Popup>
    </>)</Select.Root>;

const Compact = () => <Select.Root defaultValue="Item 1">(<>
        <Select.Trigger size="compact" />
        <Select.Popup>
            { Array.from( { length: 6 }, ( _, index ) => (
                <Select.Item
                    key={ index }
                    value={ `Item ${ index + 1 }` }
                    size="compact"
                />
            ) ) }
        </Select.Popup>
    </>)</Select.Root>;

const Minimal = () => <Select.Root defaultValue="1">(<>
        <Select.Trigger size="small" variant="minimal" />
        <Select.Popup>
            { Array.from( { length: 6 }, ( _, index ) => (
                <Select.Item
                    key={ index }
                    value={ `${ index + 1 }` }
                    size="small"
                />
            ) ) }
        </Select.Popup>
    </>)</Select.Root>;

const WithEmptyValueOption = () => <Select.Root items={withEmptyOptionItems} defaultValue="">(<>
        <Select.Trigger />
        <Select.Popup>
            { withEmptyOptionItems.map( ( item ) => (
                <Select.Item
                    key={ item.value }
                    value={ item.value }
                    label={ item.label }
                    disabled={ item.disabled }
                >
                    { item.label }
                </Select.Item>
            ) ) }
        </Select.Popup>
    </>)</Select.Root>;

const Labeling = () => <Select.Root defaultValue="Administrator">(<>
        <Select.Trigger aria-label="User role" />
        <Select.Popup>
            <Select.Item value="Administrator" />
            <Select.Item value="Editor" />
        </Select.Popup>
    </>)</Select.Root>;

const WithOverflow = () => <Select.Root defaultValue={longItemValue}>(<>
        <Select.Trigger />
        <Select.Popup>
            <Select.Item value={ longItemValue } />
            <Select.Item value="Item 2" />
        </Select.Popup>
    </>)</Select.Root>;

const Disabled = () => <Select.Root defaultValue="Item 1" disabled>(<>
        <Select.Trigger />
        <Select.Popup>
            <Select.Item value="Item 1" />
            <Select.Item value="Item 2" />
        </Select.Popup>
    </>)</Select.Root>;

const WithDisabledItem = () => <Select.Root defaultValue="Item 1">(<>
        <Select.Trigger />
        <Select.Popup>
            <Select.Item value="Item 1" />
            <Select.Item value="Item 2" disabled />
        </Select.Popup>
    </>)</Select.Root>;

const WithCustomTriggerAndItem = () => <Select.Root defaultValue="User 1">(<>
        <Select.Trigger>
            { ( value ) => (
                <span
                    style={ {
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                    } }
                >
                    <img
                        src={ `https://gravatar.com/avatar/?d=initials&name=${ value }` }
                        alt=""
                        width="20"
                        style={ {
                            borderRadius: '50%',
                        } }
                    />
                    { value }
                </span>
            ) }
        </Select.Trigger>
        <Select.Popup>
            { customOptions.map( ( item ) => (
                <Select.Item
                    key={ item.value }
                    value={ item.value }
                    label={ item.label }
                >
                    { item.label }
                </Select.Item>
            ) ) }
        </Select.Popup>
    </>)</Select.Root>;

const WithCustomZIndex = () => <Select.Root defaultValue="Item 1">(<>
        <Select.Trigger />
        <Select.Popup style={ { '--wp-ui-select-z-index': '1000001' } }>
            <Select.Item value="Item 1" />
            <Select.Item value="Item 2" />
        </Select.Popup>
    </>)</Select.Root>;

import { InputControlPrefixWrapper, SelectControl } from "@wordpress/components";

const Default = ( props ) => {
	const [ selection, setSelection ] = useState< string[] >();

	if ( props.multiple ) {
		return (
			<SelectControl
				__next40pxDefaultSize
				{ ...props }
				multiple
				value={ selection }
				onChange={ ( value ) => {
					setSelection( value );
					props.onChange?.( value );
				} }
			/>
		);
	}

	return (
		<SelectControl
			__next40pxDefaultSize
			{ ...props }
			multiple={ false }
			value={ selection?.[ 0 ] }
			onChange={ ( value ) => {
				setSelection( [ value ] );
				props.onChange?.( value );
			} }
		/>
	);
};

const WithLabelAndHelpText = ( props ) => {
	const [ selection, setSelection ] = useState< string[] >();

	if ( props.multiple ) {
		return (
			<SelectControl
				__next40pxDefaultSize
				{ ...props }
				multiple
				value={ selection }
				onChange={ ( value ) => {
					setSelection( value );
					props.onChange?.( value );
				} }
			/>
		);
	}

	return (
		<SelectControl
			__next40pxDefaultSize
			{ ...props }
			multiple={ false }
			value={ selection?.[ 0 ] }
			onChange={ ( value ) => {
				setSelection( [ value ] );
				props.onChange?.( value );
			} }
		/>
	);
};

const WithCustomChildren = ( props ) => {
	const [ selection, setSelection ] = useState< string[] >();

	if ( props.multiple ) {
		return (
			<SelectControl
				__next40pxDefaultSize
				{ ...props }
				multiple
				value={ selection }
				onChange={ ( value ) => {
					setSelection( value );
					props.onChange?.( value );
				} }
			/>
		);
	}

	return (
		<SelectControl
			__next40pxDefaultSize
			{ ...props }
			multiple={ false }
			value={ selection?.[ 0 ] }
			onChange={ ( value ) => {
				setSelection( [ value ] );
				props.onChange?.( value );
			} }
		/>
	);
};

const WithPrefix = ( props ) => {
	const [ selection, setSelection ] = useState< string[] >();

	if ( props.multiple ) {
		return (
			<SelectControl
				__next40pxDefaultSize
				{ ...props }
				multiple
				value={ selection }
				onChange={ ( value ) => {
					setSelection( value );
					props.onChange?.( value );
				} }
			/>
		);
	}

	return (
		<SelectControl
			__next40pxDefaultSize
			{ ...props }
			multiple={ false }
			value={ selection?.[ 0 ] }
			onChange={ ( value ) => {
				setSelection( [ value ] );
				props.onChange?.( value );
			} }
		/>
	);
};

const Minimal = ( props ) => {
	const [ selection, setSelection ] = useState< string[] >();

	if ( props.multiple ) {
		return (
			<SelectControl
				__next40pxDefaultSize
				{ ...props }
				multiple
				value={ selection }
				onChange={ ( value ) => {
					setSelection( value );
					props.onChange?.( value );
				} }
			/>
		);
	}

	return (
		<SelectControl
			__next40pxDefaultSize
			{ ...props }
			multiple={ false }
			value={ selection?.[ 0 ] }
			onChange={ ( value ) => {
				setSelection( [ value ] );
				props.onChange?.( value );
			} }
		/>
	);
};

import { Shortcut } from "@wordpress/components";

const Default = ( props ) => {
	return <Shortcut shortcut="Ctrl + S" { ...props } />;
};

const WithAriaLabel = ( props ) => {
	return <Shortcut shortcut="Ctrl + S" { ...props } />;
};

import { Icon, Snackbar } from "@wordpress/components";

const Default = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithActions = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithIcon = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithActionAndExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

import { SnackbarList } from "@wordpress/components";

const Default = ( {
	children,
	notices: noticesProp,
	...props
} ) => {
	const [ notices, setNotices ] = useState( noticesProp );

	const onRemove = ( id: string ) => {
		const matchIndex = notices.findIndex( ( n ) => n.id === id );
		if ( matchIndex > -1 ) {
			setNotices( [
				...notices.slice( 0, matchIndex ),
				...notices.slice( matchIndex + 1 ),
			] );
		}
	};

	return (
		<SnackbarList { ...props } notices={ notices } onRemove={ onRemove }>
			{ children }
		</SnackbarList>
	);
};

import { Spinner } from "@wordpress/components";

const Default = () => {
    return <Spinner />;
};

const CustomSize = () => {
    return <Spinner style={{ width: space( 20 ), height: space( 20 ) }} />;
};

import { Stack } from "@wordpress/ui";

const Default = () => <Stack gap="md">(<>
        <DemoBox />
        <DemoBox variant="lg" />
        <DemoBox />
        <DemoBox />
        <DemoBox variant="lg" />
        <DemoBox />
    </>)</Stack>;

const Nested = () => <Stack align="center" justify="center">(<>
        <DemoBox variant="lg" />
        <Stack gap="lg">
            <DemoBox />
            <DemoBox />
        </Stack>
        <DemoBox variant="lg" />
        <Stack direction="column">
            <DemoBox />
            <DemoBox />
        </Stack>
        <DemoBox variant="lg" />
    </>)</Stack>;

import { TabbableContainer } from "@wordpress/components";

const Default = () => {
    return (
        <>
            <button>Before tabbable container</button>
            <TabbableContainer
                onKeyDown={fn()}
                onNavigate={fn()}
                style={ {
					margin: '32px 0',
					padding: '16px',
					border: '1px solid black',
				} }>
                <button>Item 1</button>
                <button>Item 2</button>
                <button disabled>Item 3 (disabled)</button>
                <button tabIndex={ -1 }>Item 4 (non-tabbable)</button>
                <button tabIndex={ 0 }>Item 5</button>
                <button>Item 6</button>
            </TabbableContainer>
            <button>After tabbable container</button>
        </>
    );
};

import { TabbedSidebar } from "@wordpress/block-editor";

const Default = () => {
    const [ selectedTab, setSelectedTab ] = useState();

    return (
        <TabbedSidebar
            tabs={DEMO_TABS}
            defaultTabId="tab1"
            closeButtonLabel="Close Sidebar"
            selectedTab={ selectedTab }
            onSelect={ ( ...changeArgs ) => {
                onSelect( ...changeArgs );
                setSelectedTab( ...changeArgs );
            } }
            onClose={ onClose } />
    );
};

import { TabPanel } from "@wordpress/components";

const Default = ( props ) => {
	return <TabPanel { ...props } />;
};

const DisabledTab = ( props ) => {
	return <TabPanel { ...props } />;
};

const WithTabIconsAndTooltips = ( props ) => {
	return <TabPanel { ...props } />;
};

const ManualActivation = ( props ) => {
	return <TabPanel { ...props } />;
};

import { Button, Fill, Icon, Slot, Provider as SlotFillProvider, Tabs, Tooltip } from "@wordpress/components";

const Default = ( props ) => {
	return (
		<Tabs { ...props }>
			<Tabs.TabList>
				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
			</Tabs.TabList>
			<Tabs.TabPanel tabId="tab1">
				<p>Selected tab: Tab 1</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab2">
				<p>Selected tab: Tab 2</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab3" focusable={ false }>
				<p>Selected tab: Tab 3</p>
				<p>
					This tabpanel has its <code>focusable</code> prop set to
					<code> false</code>, so it won&apos;t get a tab stop.
					<br />
					Instead, the [Tab] key will move focus to the first
					focusable element within the panel.
				</p>
				<Button __next40pxDefaultSize variant="primary">
					I&apos;m a button!
				</Button>
			</Tabs.TabPanel>
		</Tabs>
	);
};

const SizeAndOverflowPlayground = ( props ) => {
	const [ fullWidth, setFullWidth ] = useState( false );
	return (
		<div>
			<div style={ { maxWidth: '40rem', marginBottom: '1rem' } }>
				<p>
					This story helps understand how the TabList component
					behaves under different conditions. The container below
					(with the dotted red border) can be horizontally resized,
					and it has a bit of padding to be out of the way of the
					TabList.
				</p>
				<p>
					The button will toggle between full width (adding{ ' ' }
					<code>width: 100%</code>) and the default width.
				</p>
				<p>Try the following:</p>
				<ul>
					<li>
						<strong>Small container</strong> that causes tabs to
						overflow with scroll.
					</li>
					<li>
						<strong>Large container</strong> that exceeds the normal
						width of the tabs.
						<ul>
							<li>
								<strong>
									With <code>width: 100%</code>
								</strong>{ ' ' }
								set on the TabList (tabs fill up the space).
							</li>
							<li>
								<strong>
									Without <code>width: 100%</code>
								</strong>{ ' ' }
								(defaults to <code>auto</code>) set on the
								TabList (tabs take up space proportional to
								their content).
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<Button
				__next40pxDefaultSize
				style={ { marginBottom: '1rem' } }
				variant="primary"
				onClick={ () => setFullWidth( ! fullWidth ) }
			>
				{ fullWidth
					? 'Remove width: 100% from TabList'
					: 'Set width: 100% in TabList' }
			</Button>
			<Tabs { ...props }>
				<div
					style={ {
						width: '20rem',
						border: '2px dotted red',
						padding: '1rem',
						resize: 'horizontal',
						overflow: 'auto',
					} }
				>
					<Tabs.TabList
						style={ {
							maxWidth: '100%',
							width: fullWidth ? '100%' : undefined,
						} }
					>
						<Tabs.Tab tabId="tab1">
							Label with multiple words
						</Tabs.Tab>
						<Tabs.Tab tabId="tab2">Short</Tabs.Tab>
						<Tabs.Tab tabId="tab3">
							Hippopotomonstrosesquippedaliophobia
						</Tabs.Tab>
						<Tabs.Tab tabId="tab4">Tab 4</Tabs.Tab>
						<Tabs.Tab tabId="tab5">Tab 5</Tabs.Tab>
					</Tabs.TabList>
				</div>
				<Tabs.TabPanel tabId="tab1">
					<p>Selected tab: Tab 1</p>
					<p>(Label with multiple words)</p>
				</Tabs.TabPanel>
				<Tabs.TabPanel tabId="tab2">
					<p>Selected tab: Tab 2</p>
					<p>(Short)</p>
				</Tabs.TabPanel>
				<Tabs.TabPanel tabId="tab3">
					<p>Selected tab: Tab 3</p>
					<p>(Hippopotomonstrosesquippedaliophobia)</p>
				</Tabs.TabPanel>
				<Tabs.TabPanel tabId="tab4">
					<p>Selected tab: Tab 4</p>
				</Tabs.TabPanel>
				<Tabs.TabPanel tabId="tab5">
					<p>Selected tab: Tab 5</p>
				</Tabs.TabPanel>
			</Tabs>
		</div>
	);
};

const Vertical = ( props ) => {
	return (
		<Tabs orientation="vertical" { ...props }>
			<Tabs.TabList style={ { maxWidth: '10rem' } }>
				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
			</Tabs.TabList>
		</Tabs>
	);
};

const DisabledTab = ( props ) => {
	return (
		<Tabs { ...props }>
			<Tabs.TabList>
				<Tabs.Tab tabId="tab1" disabled>
					Tab 1
				</Tabs.Tab>
				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
			</Tabs.TabList>
			<Tabs.TabPanel tabId="tab1">
				<p>Selected tab: Tab 1</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab2">
				<p>Selected tab: Tab 2</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab3">
				<p>Selected tab: Tab 3</p>
			</Tabs.TabPanel>
		</Tabs>
	);
};

const WithTabIconsAndTooltips = ( props ) => {
	return (
		<Tabs { ...props }>
			<Tabs.TabList>
				{ [
					{
						id: 'tab1',
						label: 'Tab one',
						icon: wordpress,
					},
					{
						id: 'tab2',
						label: 'Tab two',
						icon: link,
					},
					{
						id: 'tab3',
						label: 'Tab three',
						icon: more,
					},
				].map( ( { id, label, icon } ) => (
					<Tooltip text={ label } key={ id }>
						<Tabs.Tab tabId={ id } aria-label={ label }>
							<Icon icon={ icon } />
						</Tabs.Tab>
					</Tooltip>
				) ) }
			</Tabs.TabList>
			<Tabs.TabPanel tabId="tab1">
				<p>Selected tab: Tab 1</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab2">
				<p>Selected tab: Tab 2</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab3">
				<p>Selected tab: Tab 3</p>
			</Tabs.TabPanel>
		</Tabs>
	);
};

const ManualActivation = ( props ) => {
	return (
		<Tabs { ...props }>
			<Tabs.TabList>
				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
			</Tabs.TabList>
			<Tabs.TabPanel tabId="tab1">
				<p>Selected tab: Tab 1</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab2">
				<p>Selected tab: Tab 2</p>
			</Tabs.TabPanel>
			<Tabs.TabPanel tabId="tab3" focusable={ false }>
				<p>Selected tab: Tab 3</p>
				<p>
					This tabpanel has its <code>focusable</code> prop set to
					<code> false</code>, so it won&apos;t get a tab stop.
					<br />
					Instead, the [Tab] key will move focus to the first
					focusable element within the panel.
				</p>
				<Button __next40pxDefaultSize variant="primary">
					I&apos;m a button!
				</Button>
			</Tabs.TabPanel>
		</Tabs>
	);
};

const UsingSlotFill = ( props ) => {
	return (
		<SlotFillProvider>
			<Tabs { ...props }>
				<Tabs.TabList>
					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
				</Tabs.TabList>
				<Fill name="tabs-are-fun">
					<Tabs.TabPanel tabId="tab1">
						<p>Selected tab: Tab 1</p>
					</Tabs.TabPanel>
					<Tabs.TabPanel tabId="tab2">
						<p>Selected tab: Tab 2</p>
					</Tabs.TabPanel>
					<Tabs.TabPanel tabId="tab3">
						<p>Selected tab: Tab 3</p>
					</Tabs.TabPanel>
				</Fill>
			</Tabs>
			<div
				style={ {
					border: '2px solid #999',
					width: '300px',
					margin: '20px auto',
				} }
			>
				<p>other stuff</p>
				<p>other stuff</p>
				<p>this is fun!</p>
				<p>other stuff</p>
				<Slot bubblesVirtually as="div" name="tabs-are-fun" />
			</div>
		</SlotFillProvider>
	);
};

const InsertCustomElements = ( props ) => {
	const [ isOpen, setIsOpen ] = useState( true );

	return (
		<>
			{ isOpen ? (
				<div
					style={ {
						width: '400px',
						height: '100vh',
						borderRight: '1px solid #333',
					} }
				>
					<Tabs { ...props }>
						<div
							style={ {
								display: 'flex',
								borderBottom: '1px solid #333',
							} }
						>
							<Tabs.TabList>
								<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
								<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
							</Tabs.TabList>
							<Button
								__next40pxDefaultSize
								variant="tertiary"
								style={ {
									marginLeft: 'auto',
									alignSelf: 'center',
								} }
								onClick={ () => setIsOpen( false ) }
							>
								Close Tabs
							</Button>
						</div>
						<Tabs.TabPanel tabId="tab1">
							<p>Selected tab: Tab 1</p>
						</Tabs.TabPanel>
						<Tabs.TabPanel tabId="tab2">
							<p>Selected tab: Tab 2</p>
						</Tabs.TabPanel>
						<Tabs.TabPanel tabId="tab3">
							<p>Selected tab: Tab 3</p>
						</Tabs.TabPanel>
					</Tabs>
				</div>
			) : (
				<Button
					__next40pxDefaultSize
					variant="tertiary"
					onClick={ () => setIsOpen( true ) }
				>
					Open Tabs
				</Button>
			) }
		</>
	);
};

import { Tabs, Tooltip } from "@wordpress/ui";

const Default = () => <Tabs.Root defaultValue="tab1">(<>
        <Tabs.List>
            <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
            <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
            <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab1">
            <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab2">
            <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab3">
            <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
        </Tabs.Panel>
    </>)</Tabs.Root>;

const Minimal = () => <Tabs.Root>(<>
        <Tabs.List variant="minimal">
            <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
            <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
            <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab1">
            <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab2">
            <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab3">
            <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
        </Tabs.Panel>
    </>)</Tabs.Root>;

const SizeAndOverflowPlayground = function SizeAndOverflowPlayground( props ) {
    const [ fullWidth, setFullWidth ] = useState( false );
    return (
        <div>
            <div
                style={ {
                    maxWidth: '40rem',
                    marginBottom: '1rem',
                    color: 'var( --wpds-color-fg-content-neutral )',
                } }
            >
                <p>
                    This story helps understand how the TabList component
                    behaves under different conditions. The container below
                    (with the dotted red border) can be horizontally
                    resized, and it has a bit of padding to be out of the
                    way of the TabList.
                </p>
                <p>
                    The button will toggle between full width (adding{ ' ' }
                    <code>width: 100%</code>) and the default width.
                </p>
                <p>Try the following:</p>
                <ul>
                    <li>
                        <strong>Small container</strong> that causes tabs to
                        overflow with scroll.
                    </li>
                    <li>
                        <strong>Large container</strong> that exceeds the
                        normal width of the tabs.
                        <ul>
                            <li>
                                <strong>
                                    With <code>width: 100%</code>
                                </strong>{ ' ' }
                                set on the TabList (tabs fill up the space).
                            </li>
                            <li>
                                <strong>
                                    Without <code>width: 100%</code>
                                </strong>{ ' ' }
                                (defaults to <code>auto</code>) set on the
                                TabList (tabs take up space proportional to
                                their content).
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <button
                style={ { marginBottom: '1rem' } }
                onClick={ () => setFullWidth( ! fullWidth ) }
            >
                { fullWidth
                    ? 'Remove width: 100% from TabList'
                    : 'Set width: 100% in TabList' }
            </button>
            <Tabs.Root
                { ...props }
                style={ {
                    ...props.style,
                    width: '20rem',
                    border: '2px dotted red',
                    padding: '1rem',
                    resize: 'horizontal',
                    overflow: 'auto',
                } }
            >
                <Tabs.List
                    style={ {
                        maxWidth: '100%',
                        width: fullWidth ? '100%' : undefined,
                    } }
                >
                    <Tabs.Tab value="tab1">
                        Label with multiple words
                    </Tabs.Tab>
                    <Tabs.Tab value="tab2">Short</Tabs.Tab>
                    <Tabs.Tab value="tab3">
                        Hippopotomonstrosesquippedaliophobia
                    </Tabs.Tab>
                    <Tabs.Tab value="tab4">Tab 4</Tabs.Tab>
                    <Tabs.Tab value="tab5">Tab 5</Tabs.Tab>
                </Tabs.List>

                <Tabs.Panel value="tab1">
                    <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
                    <ThemedParagraph>
                        (Label with multiple words)
                    </ThemedParagraph>
                </Tabs.Panel>
                <Tabs.Panel value="tab2">
                    <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
                    <ThemedParagraph>(Short)</ThemedParagraph>
                </Tabs.Panel>
                <Tabs.Panel value="tab3">
                    <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
                    <ThemedParagraph>
                        (Hippopotomonstrosesquippedaliophobia)
                    </ThemedParagraph>
                </Tabs.Panel>
                <Tabs.Panel value="tab4">
                    <ThemedParagraph>Selected tab: Tab 4</ThemedParagraph>
                </Tabs.Panel>
                <Tabs.Panel value="tab5">
                    <ThemedParagraph>Selected tab: Tab 5</ThemedParagraph>
                </Tabs.Panel>
            </Tabs.Root>
        </div>
    );
};

const Vertical = () => <Tabs.Root
    orientation="vertical"
    style={{
        minWidth: '320px',
        display: 'grid',
        gridTemplateColumns: '120px 1fr',
        gap: '24px',
    }} />;

const WithDisabledTab = () => <Tabs.Root defaultValue="tab3">(<>
        <Tabs.List>
            <Tabs.Tab value="tab1" disabled>
                Tab 1
            </Tabs.Tab>
            <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
            <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab1">
            <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab2">
            <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab3">
            <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
        </Tabs.Panel>
    </>)</Tabs.Root>;

const WithTabIconsAndTooltips = () => <Tabs.Root>(<>
        <Tabs.List>
            { tabWithIconsData.map(
                ( { value, label, icon: Icon } ) => (
                    <Tooltip.Root key={ value }>
                        <Tooltip.Trigger
                            aria-label={ label }
                            render={ <Tabs.Tab value={ value } /> }
                        >
                            { /* TODO: potentially refactor with new Icon component */ }
                            <Icon
                                style={ {
                                    width: '20px',
                                    height: '20px',
                                } }
                            />
                        </Tooltip.Trigger>
                        <Tooltip.Popup align="center" side="top">
                            { label }
                        </Tooltip.Popup>
                    </Tooltip.Root>
                )
            ) }
        </Tabs.List>
        { tabWithIconsData.map( ( { value, label } ) => (
            <Tabs.Panel value={ value } key={ value }>
                <ThemedParagraph>
                    Selected tab: { label }
                </ThemedParagraph>
            </Tabs.Panel>
        ) ) }
    </>)</Tabs.Root>;

const WithPanelsAlwaysMounted = () => <Tabs.Root>(<>
        <Tabs.List>
            <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
            <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
            <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab1" keepMounted>
            <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab2" keepMounted>
            <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
        </Tabs.Panel>
        <Tabs.Panel value="tab3" keepMounted>
            <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
        </Tabs.Panel>
    </>)</Tabs.Root>;

const WithNonFocusablePanels = () => <Tabs.Root>(<>
        <Tabs.List>
            <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
            <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
            <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="tab1" tabIndex={ -1 }>
            <ThemedParagraph>Selected tab: Tab 1</ThemedParagraph>
            <ThemedParagraph>
                This tabpanel is not focusable, therefore tabbing into
                it will focus its first tabbable child.
            </ThemedParagraph>
            <button>Focus me</button>
        </Tabs.Panel>
        <Tabs.Panel value="tab2" tabIndex={ -1 }>
            <ThemedParagraph>Selected tab: Tab 2</ThemedParagraph>
            <ThemedParagraph>
                This tabpanel is not focusable, therefore tabbing into
                it will focus its first tabbable child.
            </ThemedParagraph>
            <button>Focus me</button>
        </Tabs.Panel>
        <Tabs.Panel value="tab3" tabIndex={ -1 }>
            <ThemedParagraph>Selected tab: Tab 3</ThemedParagraph>
            <ThemedParagraph>
                This tabpanel is not focusable, therefore tabbing into
                it will focus its first tabbable child.
            </ThemedParagraph>
            <button>Focus me</button>
        </Tabs.Panel>
    </>)</Tabs.Root>;

import { Stack, Text } from "@wordpress/ui";

const Default = () => <Text variant="body-md">The quick brown fox jumps over the lazy dog.</Text>;

const AllVariants = () => (
    <Stack
        direction="column"
        gap="lg"
        style={ { color: 'var(--wpds-color-fg-content-neutral)' } }
    >
        { (
            [
                'heading-2xl',
                'heading-xl',
                'heading-lg',
                'heading-md',
                'heading-sm',
                'body-xl',
                'body-lg',
                'body-md',
                'body-sm',
            ] as const
         ).map( ( variant ) => (
            <Stack key={ variant } direction="column" gap="xs">
                <Text variant="heading-sm">{ variant }</Text>
                <Text variant={ variant }>
                    The quick brown fox jumps over the lazy dog.
                </Text>
            </Stack>
        ) ) }
    </Stack>
);

const WithRenderProp = () => (
    <Stack direction="column" gap="md">
        <Text variant="heading-2xl" render={ <h1 /> }>
            Page Title
        </Text>
        <Text variant="heading-xl" render={ <h2 /> }>
            Section Heading
        </Text>
        <Text variant="body-md" render={ <p /> }>
            A paragraph of body text rendered as a semantic paragraph
            element.
        </Text>
    </Stack>
);

import { TextAlignmentControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <TextAlignmentControl
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { TextareaControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <TextareaControl
            label="Text"
            help="Enter some text"
            placeholder="Placeholder"
            value={ value }
            onChange={ ( v ) => {
				setValue( v );
				onChange( v );
			} } />
    );
};

import { TextControl } from "@wordpress/components";

const Default = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <TextControl
            __next40pxDefaultSize
            placeholder="Placeholder"
            value={ value }
            onChange={ ( v ) => {
				setValue( v );
				onChange( v );
			} } />
    );
};

const WithLabelAndHelpText = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <TextControl
            __next40pxDefaultSize
            label="Label Text"
            help="Help text to explain the input."
            value={ value }
            onChange={ ( v ) => {
				setValue( v );
				onChange( v );
			} } />
    );
};

import { TextDecorationControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <TextDecorationControl
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { TextHighlight } from "@wordpress/components";

const Default = () => {
    return (
        <TextHighlight
            text="We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts."
            highlight="Gutenberg" />
    );
};

import { TextTransformControl } from "@wordpress/block-editor";

const Default = () => {
    const [ value, setValue ] = useState();

    return (
        <TextTransformControl
            onChange={ ( ...changeArgs ) => {
                onChange( ...changeArgs );
                setValue( ...changeArgs );
            } }
            value={ value } />
    );
};

import { Button, HStack, Theme } from "@wordpress/components";

const Default = () => <Theme>
    <Button __next40pxDefaultSize variant="primary">Hello
                </Button>
</Theme>;

const Nested = () => <Theme accent="crimson">
    <Button __next40pxDefaultSize variant="primary">Outer theme (hardcoded)
                </Button>
    <Theme accent="blue">
        <Button __next40pxDefaultSize variant="primary">Inner theme (set via Storybook controls)
                        </Button>
    </Theme>
</Theme>;

const ColorScheme = ( {
	accent,
	background,
} ) => {
	const { colors } = generateThemeVariables( { accent, background } );
	const { gray, ...otherColors } = colors;
	/* eslint-disable @typescript-eslint/no-unused-vars */
	const contrastIssues = Object.entries(
		checkContrasts( { accent, background }, colors )
	).filter( ( [ _, error ] ) => !! error );
	/* eslint-enable @typescript-eslint/no-unused-vars */

	const Chip = ( { color, name }: { color: string; name: string } ) => (
		<HStack justify="flex-start">
			<div
				style={ {
					backgroundColor: color,
					height: '1.25em',
					width: 40,
				} }
			/>
			<div style={ { fontSize: 14 } }>{ name }</div>
		</HStack>
	);

	return (
		<>
			{ Object.entries( otherColors ).map( ( [ key, value ] ) => (
				<Chip color={ value } name={ key } key={ key } />
			) ) }
			{ Object.entries( gray as NonNullable< typeof gray > ).map(
				( [ key, value ] ) => (
					<Chip
						color={ value }
						name={ `gray ${ key }` }
						key={ key }
					/>
				)
			) }
			{ !! contrastIssues.length && (
				<>
					<h2>Contrast issues</h2>
					<ul>
						{ contrastIssues.map( ( [ key, error ] ) => (
							<li key={ key }>{ error }</li>
						) ) }
					</ul>
				</>
			) }
		</>
	);
};

import { TimePicker } from "@wordpress/components";

const Default = () => {
    const [ time, setTime ] = useState( currentTime );
    useEffect( () => {
		setTime( currentTime );
	}, [ currentTime ] );

    return (
        <TimePicker
            currentTime={ time }
            onChange={ ( newTime ) => {
				setTime( newTime );
				onChange?.( newTime );
			} } />
    );
};

const TimeInput = () => {
    return <TimePicker.TimeInput label="Time" />;
};

import { ToggleControl } from "@wordpress/components";

const Default = ( {
	onChange,
	...props
} ) => {
	const [ checked, setChecked ] = useState( true );
	return (
		<ToggleControl
			{ ...props }
			checked={ checked }
			onChange={ ( ...changeArgs ) => {
				setChecked( ...changeArgs );
				onChange( ...changeArgs );
			} }
		/>
	);
};

const WithHelpText = ( {
	onChange,
	...props
} ) => {
	const [ checked, setChecked ] = useState( true );
	return (
		<ToggleControl
			{ ...props }
			checked={ checked }
			onChange={ ( ...changeArgs ) => {
				setChecked( ...changeArgs );
				onChange( ...changeArgs );
			} }
		/>
	);
};

import {
    DropdownMenu,
    Toolbar,
    ToolbarButton,
    ToolbarDropdownMenu,
    ToolbarGroup,
    ToolbarItem,
} from "@wordpress/components";
import { Path, SVG } from "@wordpress/primitives";

const Default = ( props ) => (
	<div style={ { height: 280 } }>
		<Toolbar { ...props } />
	</div>
);

const WithoutGroup = ( props ) => (
	<div style={ { height: 280 } }>
		<Toolbar { ...props } />
	</div>
);

const Unstyled = ( props ) => (
	<div style={ { height: 280 } }>
		<Toolbar { ...props } />
	</div>
);