diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index 47d836874ba..ec30826419c 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -15,21 +15,20 @@ import {ActionButton} from '@react-spectrum/button';
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Item, Picker, Section} from '../';
+import {Item, Picker, Section, SpectrumPickerProps} from '../';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React, {useState} from 'react';
-import {storiesOf} from '@storybook/react';
+import React,  {useState} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useAsyncList} from '@react-stately/data';
 import {View} from '@react-spectrum/view';
 
-
 let flatOptions = [
   {id: 1, name: 'Aardvark'},
   {id: 2, name: 'Kangaroo'},
@@ -42,6 +41,22 @@ let flatOptions = [
   {id: 9, name: 'Floof'}
 ];
 
+let longItemText = [
+  {id: 'short', name: 'One'},
+  {id: 'long', name: 'your text here long long long long'},
+  {id: 'underscores', name: 'your_text_here_long_long_long_long'},
+  {id: 'hypens', name: 'your-text-here-long-long-long-long'},
+  {id: 'singleWord', name: 'supercalifragilisticexpialidocious'},
+  {id: 'always', name: 'This item is very long and word wraps poorly'}
+];
+
+let falsyKey = [
+  {id: '', name: 'None'},
+  {id: 'One', name: 'One'},
+  {id: 'Two', name: 'Two'},
+  {id: 'Three', name: 'Three'}
+];
+
 let withSection = [
   {name: 'Animals', children: [
     {name: 'Aardvark'},
@@ -55,552 +70,317 @@ let withSection = [
   ]}
 ];
 
-storiesOf('Picker', module)
-  .add(
-    'default',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Item key="Short">Short</Item>
-        <Item key="Normal">Normal</Item>
-        <Item key="This item is very long and word wraps poorly">This item is very long and word wraps poorly</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'disabled keys',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')} disabledKeys={['Short']}>
-        <Item key="Short">Short</Item>
-        <Item key="Normal">Normal</Item>
-        <Item key="This item is very long and word wraps poorly">This item is very long and word wraps poorly</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'sections',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Section title="Animals">
-          <Item key="Aardvark">Aardvark</Item>
-          <Item key="Kangaroo">Kangaroo</Item>
-          <Item key="Snake">Snake</Item>
-        </Section>
-        <Section title="People">
-          <Item key="Danni">Danni</Item>
-          <Item key="Devon">Devon</Item>
-          <Item key="Ross">Ross</Item>
-        </Section>
-      </Picker>
-    )
-  )
-  .add(
-    'dynamic',
-    () => (
-      <Picker label="Test" items={flatOptions} onSelectionChange={action('selectionChange')}>
-        {item => <Item>{item.name}</Item>}
-      </Picker>
-    )
-  )
-  .add(
-    'dynamic with sections',
-    () => (
-      <Picker label="Test" items={withSection} onSelectionChange={action('selectionChange')}>
-        {item => (
-          <Section key={item.name} items={item.children} title={item.name}>
-            {item => <Item key={item.name}>{item.name}</Item>}
-          </Section>
-        )}
-      </Picker>
-    )
-  )
-  .add(
-    'isDisabled',
-    () => (
-      <Picker label="Test" isDisabled onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isDisabled, selectedKey',
-    () => (
-      <Picker label="Test" isDisabled selectedKey="One" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'labelAlign: end',
-    () => (
-      <Picker direction="top" label="Test" labelAlign="end" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'labelPosition: side',
-    () => (
-      <Picker label="Test" labelPosition="side" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isRequired',
-    () => (
-      <Picker label="Test" isRequired onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isRequired, necessityIndicator: label',
-    () => (
-      <Picker label="Test" isRequired necessityIndicator="label" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'optional, necessityIndicator: label',
-    () => (
-      <Picker label="Test" necessityIndicator="label" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'validationState: invalid',
-    () => (
-      <Picker label="Test" validationState="invalid" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet',
-    () => (
-      <Picker isQuiet label="Test" onSelectionChange={action('selectionChange')}>
-        <Item key="100">One hundred</Item>
-        <Item key="2012">Two thousand and twelve</Item>
-        <Item key="3">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, isDisabled',
-    () => (
-      <Picker label="Test" isQuiet isDisabled onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two million">Two million</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, labelAlign: end',
-    () => (
-      <Picker label="Test" isQuiet labelAlign="end" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two dollary-doos">Two dollary-doos</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, labelPosition: side',
-    () => (
-      <Picker label="Test" isQuiet labelPosition="side" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, isRequired',
-    () => (
-      <Picker label="Test" isQuiet isRequired onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, isRequired, necessityIndicator: label',
-    () => (
-      <Picker label="Test" isQuiet isRequired necessityIndicator="label" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, optional, necessityIndicator: label',
-    () => (
-      <Picker label="Test" isQuiet necessityIndicator="label" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, validationState: invalid',
-    () => (
-      <Picker label="Test" isQuiet validationState="invalid" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
+export type PickerStory = ComponentStoryObj<typeof Picker>;
+
+export default {
+  title: 'Picker',
+  component: Picker,
+  excludeStories: [],
+  args: {
+    'label': 'Test',
+    onSelectionChange: action('onSelectionChange'),
+    onOpenChange: action('onOpenChange')
+  },
+  argTypes: {
+    layout: {
+      table: {
+        disable: true
+      }
+    },
+    children: {
+      table: {
+        disable: true
+      }
+    },
+    onSelectionChange: {
+      table: {
+        disable: true
+      }
+    },
+    onOpenChange: {
+      table: {
+        disable: true
+      }
+    },
+    label: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    errorMessage: {
+      control: 'text'
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    labelAlign: {
+      control: 'radio',
+      defaultValue: 'start',
+      options: ['end', 'start']
+    },
+    labelPosition: {
+      control: 'radio',
+      defaultValue: 'top',
+      options: ['side', 'top']
+    },
+    necessityIndicator: {
+      control: 'radio',
+      defaultValue: 'icon',
+      options: ['icon', 'label']
+    },
+    isRequired: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    validationState: {
+      control: {
+        type: 'radio',
+        options: [null, 'valid', 'invalid']
+      }
+    },
+    isQuiet: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    width: {
+      control: {
+        type: 'radio',
+        options: [null, '100px', '480px', 'size-4600']
+      }
+    },
+    menuWidth: {
+      control: {
+        type: 'radio',
+        options: [null, '100px', '480px', 'size-4600']
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    autoFocus: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    isOpen: {
+      control: 'boolean'
+    },
+    defaultOpen: {
+      control: 'boolean'
+    }
+  }
+} as ComponentMeta<typeof Picker>;
+
+export type DefaultStory = ComponentStoryObj<typeof DefaultPicker>;
+export const Default: DefaultStory = {
+  render: (args) => <DefaultPicker {...args} />
+};
+
+export const Disabled: DefaultStory = {
+  render: (args) => <DefaultPicker {...args} disabledKeys={['Short']} />,
+  name: 'disabled keys'
+};
+
+export const Sections: PickerStory = {
+  args: {
+    children: (
+      <Section title="Animals">
+        <Item key="Aardvark">Aardvark</Item>
+        <Item key="Kangaroo">Kangaroo</Item>
+        <Item key="Snake">Snake</Item>
+      </Section>
     )
-  )
-  .add(
-    'complex items',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Section title="Section 1">
-          <Item textValue="Copy">
-            <Copy />
-            <Text>Copy</Text>
-          </Item>
-          <Item textValue="Cut">
-            <Cut />
-            <Text>Cut</Text>
-          </Item>
-          <Item textValue="Paste">
-            <Paste />
-            <Text>Paste</Text>
-          </Item>
-        </Section>
-        <Section title="Section 2">
-          <Item textValue="Puppy">
-            <AlignLeft />
-            <Text>Puppy</Text>
-            <Text slot="description">Puppy description super long as well geez</Text>
-          </Item>
-          <Item textValue="Doggo with really really really long long long text">
-            <AlignCenter />
-            <Text>Doggo with really really really long long long text</Text>
-          </Item>
-          <Item textValue="Floof">
-            <AlignRight />
-            <Text>Floof</Text>
-          </Item>
+  }
+};
+
+export const Dynamic: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: flatOptions
+  },
+  name: 'dynamic'
+};
+
+export const DynamicSections: PickerStory = {
+  args: {
+    children: (
+      (item: any) => (
+        <Section key={item.name} items={item.children} title={item.name}>
+          {(item: any) => <Item key={item.name}>{item.name}</Item>}
         </Section>
-      </Picker>
-    )
-  )
-  .add(
-    'long item text',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Item key="short">One</Item>
-        <Item key="long">your text here long long long long</Item>
-        <Item key="underscores">your_text_here_long_long_long_long</Item>
-        <Item key="hyphens">your-text-here-long-long-long-long</Item>
-        <Item key="singleWord">supercalifragilisticexpialidocious</Item>
-        <Item key="always">This item is very long and word wraps poorly</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'falsy item key',
-    () => (
-      <Picker label="Test" onSelectionChange={action('selectionChange')}>
-        <Item key="">None</Item>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'no visible label',
-    () => (
-      <Picker aria-label="Test" onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'with description',
-    () => (
-      <Picker label="Test" description="Please select an item." onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'with error message',
-    () => (
-      <Picker label="Test" errorMessage="Please select a valid item." validationState="invalid" onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'contextual help',
-    () => (
-      <Picker
-        label="Test"
-        contextualHelp={(
-          <ContextualHelp>
-            <Heading>What is a segment?</Heading>
-            <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
-          </ContextualHelp>
-        )}
-        onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, no visible label',
-    () => (
-      <Picker aria-label="Test" isQuiet onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isQuiet, align: end',
-    () => (
-      <Picker aria-label="Test" isQuiet align="end" onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'custom widths',
-    () => (
-      <Flex direction="column">
-        <Picker label="Test" width="size-1200" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-        <Picker label="Test" width="size-6000" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-      </Flex>
-    )
-  )
-  .add(
-    'custom widths, labelPosition: side',
-    () => (
-      <Flex direction="column">
-        <Picker label="Test" width="size-1200" labelPosition="side" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-        <Picker label="Test" width="size-6000" labelPosition="side" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-      </Flex>
-    )
-  )
-  .add(
-    'custom menu widths',
-    () => (
-      <Flex direction="column">
-        <Picker label="Test" menuWidth="size-1000" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-        <Picker label="Test" menuWidth="size-6000" onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-      </Flex>
-    )
-  )
-  .add(
-    'custom menu widths, isQuiet',
-    () => (
-      <Flex direction="column">
-        <Picker label="Test" menuWidth="size-400" isQuiet onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-        <Picker label="Test" menuWidth="size-6000" isQuiet onSelectionChange={action('selectionChange')}>
-          <Item>One</Item>
-          <Item>Two</Item>
-          <Item>Three</Item>
-        </Picker>
-      </Flex>
-    )
-  )
-  .add(
-    'custom menu width, align: end',
-    () => (
-      <Picker label="Test" menuWidth="size-6000" align="end" onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'isOpen (controlled)',
-    () => (
-      <Picker label="Test" isOpen onOpenChange={action('onOpenChange')} onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'defaultOpen (uncontrolled)',
-    () => (
-      <Picker label="Test" defaultOpen onOpenChange={action('onOpenChange')} onSelectionChange={action('selectionChange')}>
-        <Item>One</Item>
-        <Item>Two</Item>
-        <Item>Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'selectedKey (controlled)',
-    () => (
-      <Picker label="Test" selectedKey="One" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'defaultSelectedKey (uncontrolled)',
-    () => (
-      <Picker label="Test" defaultSelectedKey="One" onSelectionChange={action('selectionChange')}>
-        <Item key="One">One</Item>
-        <Item key="Two">Two</Item>
-        <Item key="Three">Three</Item>
-      </Picker>
-    )
-  )
-  .add(
-    'picker closes on blur',
-    () => (
-      <>
-        <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
-          <label htmlFor="focus-before">Focus before</label>
-          <input id="focus-before" />
-          <Picker label="Test" defaultSelectedKey="One" onSelectionChange={action('selectionChange')}>
-            <Item key="One">One</Item>
-            <Item key="Two">Two</Item>
-            <Item key="Three">Three</Item>
-          </Picker>
-          <label htmlFor="focus-after">Focus after</label>
-          <input id="focus-after" />
-        </div>
-      </>
-    )
-  )
-  .add(
-    'isLoading',
-    () => (
-      <Picker label="Test" isLoading items={[]}>
-        {item => <Item>{item.name}</Item>}
-      </Picker>
-    )
-  )
-  .add(
-    'isLoading, isQuiet',
-    () => (
-      <Picker label="Test" isLoading isQuiet items={[]}>
-        {item => <Item>{item.name}</Item>}
-      </Picker>
-    )
-  )
-  .add(
-    'isLoading more',
-    () => (
-      <Picker label="Test" isLoading items={flatOptions}>
-        {item => <Item>{item.name}</Item>}
-      </Picker>
-    )
-  )
-  .add(
-    'async loading',
-    () => (
-      <AsyncLoadingExample />
-    )
-  ).add(
-    'focus',
-    () => (
-      <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
-        <label htmlFor="focus-before">Focus before</label>
-        <input id="focus-before" />
-        <Picker label="Focus-Test" items={flatOptions} autoFocus onFocus={action('focus')} onBlur={action('blur')} onKeyDown={action('keydown')} onKeyUp={action('keyup')}>
-          {item => <Item>{item.name}</Item>}
-        </Picker>
-        <label htmlFor="focus-after">Focus after</label>
-        <input id="focus-after" />
-      </div>
-    )
-  )
-  .add('resize', () => <ResizePicker />)
-  .add('autofocus', () => (
-    <Picker label="Test" autoFocus>
-      <Item key="One">One</Item>
-      <Item key="Two">Two</Item>
-      <Item key="Three">Three</Item>
-    </Picker>
-  ))
-  .add('scrolling container', () => (
+      )
+    ),
+    items: withSection
+  },
+  name: 'dynamic with sections'
+};
+
+export type ComplexItemsStory = ComponentStoryObj<typeof ComplexItemsPicker>;
+export const ComplexItems: ComplexItemsStory = {
+  render: (args) => <ComplexItemsPicker {...args} />,
+  name: 'complex items'
+};
+
+export const LongItemText: PickerStory = {
+  args: {
+    children: (item: any) => <Item key={item.key}>{item.name}</Item>,
+    items: longItemText
+  },
+  name: 'long item text'
+};
+
+export const FalsyKey: PickerStory = {
+  args: {
+    children: (item: any) => <Item key={item.key}>{item.name}</Item>,
+    items: falsyKey
+  },
+  name: 'falsy item key'
+};
+
+export const NoLabel: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: flatOptions,
+    'aria-label': 'Test',
+    label: null
+  },
+  name: 'no visible label'
+};
+
+export const ContextualHelpPicker: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: flatOptions,
+    contextualHelp: (
+      <ContextualHelp>
+        <Heading>What is a segment?</Heading>
+        <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
+      </ContextualHelp>
+    )
+  },
+  name: 'contextual help'
+};
+
+export const SelectedKey: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: flatOptions,
+    selectedKey: 7
+  },
+  name: 'selectedKey'
+};
+
+export const DefaultSelectedKey: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: flatOptions,
+    defaultSelectedKey: 7
+  },
+  name: 'defaultSelectedKey (uncontrolled)'
+};
+
+export const Loading: PickerStory = {
+  args: {
+    children: (item: any) => <Item>{item.name}</Item>,
+    items: [],
+    isLoading: true
+  },
+  name: 'isLoading, no items'
+};
+
+export type AsyncLoadingStory = ComponentStoryObj<typeof AsyncLoadingExample>;
+export const AsyncLoading: AsyncLoadingStory = {
+  render: (args) => <AsyncLoadingExample {...args} />,
+  name: 'async loading'
+};
+
+export type FocusStory = ComponentStoryObj<any>;
+export const Focus: FocusStory = {
+  render: (args) => (
+    <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
+      <label htmlFor="focus-before">Focus before</label>
+      <input id="focus-before" data-testid="before" />
+      <Picker {...args} label="Focus-Test" items={flatOptions} onFocus={action('focus')} onBlur={action('blur')} onKeyDown={action('keydown')} onKeyUp={action('keyup')}>
+        {(item: any) => <Item>{item.name}</Item>}
+      </Picker>
+      <label htmlFor="focus-after">Focus after</label>
+      <input id="focus-after" data-testid="after" />
+    </div>
+  ),
+  name: 'keyboard tab focus'
+};
+
+export type ResizePickerStory = ComponentStoryObj<typeof ResizePicker>;
+export const Resize: ResizePickerStory = {
+  render: (args) => <ResizePicker {...args} />,
+  name: 'resize'
+};
+
+export type ScrollingStory = ComponentStoryObj<any>;
+export const Scrolling: ScrollingStory = {
+  render: (args) => (
     <View width="300px" height="size-500" overflow="auto">
       <View width="500px">
-        <Picker label="Test" autoFocus>
+        <Picker {...args} label="Test">
           <Item key="One">One</Item>
           <Item key="Two">Two</Item>
           <Item key="Three">Three</Item>
         </Picker>
       </View>
     </View>
-  ));
+  ),
+  name: 'scrolling container'
+};
+
+function DefaultPicker(props: SpectrumPickerProps<object>) {
+  return (
+    <Picker {...props}>
+      <Item key="Short">Short</Item>
+      <Item key="Normal">Normal</Item>
+      <Item key="This item is very long and word wraps poorly">This item is very long and word wraps poorly</Item>
+    </Picker>
+  );
+}
+
+function ComplexItemsPicker(props: SpectrumPickerProps<object>) {
+  return (
+    <Picker {...props}>
+      <Section title="Section 1">
+        <Item textValue="Copy">
+          <Copy />
+          <Text>Copy</Text>
+        </Item>
+        <Item textValue="Cut">
+          <Cut />
+          <Text>Cut</Text>
+        </Item>
+        <Item textValue="Paste">
+          <Paste />
+          <Text>Paste</Text>
+        </Item>
+      </Section>
+      <Section title="Section 2">
+        <Item textValue="Puppy">
+          <AlignLeft />
+          <Text>Puppy</Text>
+          <Text slot="description">Puppy description super long as well geez</Text>
+        </Item>
+        <Item textValue="Doggo with really really really long long long text">
+          <AlignCenter />
+          <Text>Doggo with really really really long long long text</Text>
+        </Item>
+        <Item textValue="Floof">
+          <AlignRight />
+          <Text>Floof</Text>
+        </Item>
+      </Section>
+    </Picker>
+  );
+}
 
-function AsyncLoadingExample() {
+function AsyncLoadingExample(props) {
   interface Pokemon {
     name: string,
     url: string
@@ -620,19 +400,19 @@ function AsyncLoadingExample() {
   });
 
   return (
-    <Picker label="Pick a Pokemon" items={list.items} isLoading={list.isLoading} onLoadMore={list.loadMore}>
-      {item => <Item key={item.name}>{item.name}</Item>}
+    <Picker {...props} label="Pick a Pokemon" items={list.items} isLoading={list.isLoading} onLoadMore={list.loadMore}>
+      {(item: any) => <Item key={item.name}>{item.name}</Item>}
     </Picker>
   );
 }
 
-function ResizePicker() {
+function ResizePicker(props) {
   const [state, setState] = useState(true);
 
   return (
     <Flex direction="column" gap="size-200" alignItems="start">
       <div style={{width: state ? '200px' : '300px'}}>
-        <Picker label="Choose A" width="100%">
+        <Picker {...props} label="Choose A" width="100%">
           <Item key="A1">A1</Item>
           <Item key="A2">A2</Item>
           <Item key="A3">A3</Item>