diff --git a/src/drafts/SelectPanel2/SelectPanel.features.stories.tsx.bak b/src/drafts/SelectPanel2/SelectPanel.features.stories.tsx.bak
deleted file mode 100644
index f8e94ff8f7d..00000000000
--- a/src/drafts/SelectPanel2/SelectPanel.features.stories.tsx.bak
+++ /dev/null
@@ -1,305 +0,0 @@
-import React, {useState, useRef} from 'react'
-import {ComponentMeta} from '@storybook/react'
-
-import Box from '../../Box'
-import {Button} from '../../Button'
-import {ItemInput} from '../../deprecated/ActionList/List'
-import {SelectPanel} from './SelectPanel'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import type {OverlayProps} from '../../Overlay'
-
-export default {
-  title: 'Drafts/Components/SelectPanel/Features',
-  component: SelectPanel,
-} as ComponentMeta<typeof SelectPanel>
-
-function getColorCircle(color: string) {
-  return function () {
-    return (
-      <Box
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-        borderWidth="1px"
-        borderStyle="solid"
-      />
-    )
-  }
-}
-
-const items = [
-  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
-  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
-  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
-  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
-  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
-  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
-  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
-]
-
-export const SingleSelectStory = () => {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-    </>
-  )
-}
-SingleSelectStory.storyName = 'Single Select'
-
-export const ExternalAnchorStory = () => {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <h1>Select Panel With External Anchor</h1>
-      <Button trailingAction={TriangleDownIcon} ref={buttonRef} onClick={() => setOpen(!open)}>
-        Custom: {selected?.text || 'Click Me'}
-      </Button>
-      <SelectPanel
-        renderAnchor={null}
-        anchorRef={buttonRef}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-    </>
-  )
-}
-ExternalAnchorStory.storyName = 'With External Anchor'
-
-export const SelectPanelHeightInitialWithOverflowingItemsStory = () => {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items'
-
-export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => {
-  const underflowingItems = [items[0], items[1]]
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(underflowingItems[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items'
-
-export const SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = () => {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const [fetchedItems, setFetchedItems] = useState<typeof items>([])
-  const filteredItems = React.useMemo(
-    () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())),
-    [fetchedItems, filter],
-  )
-  const [open, setOpen] = useState(false)
-  const [height, setHeight] = useState<OverlayProps['height']>('auto')
-
-  const onOpenChange = () => {
-    setOpen(!open)
-    setTimeout(() => {
-      setFetchedItems([items[0], items[1]])
-      setHeight('initial')
-    }, 1500)
-  }
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={onOpenChange}
-        loading={filteredItems.length === 0}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName =
-  'SelectPanel, Height: Initial, Underflowing Items (After Fetch)'
-
-export const SelectPanelAboveTallBody = () => {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-      <div
-        style={{
-          backgroundColor: 'cornflowerblue',
-          height: '100vh',
-        }}
-      >
-        This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal
-        is far down the page
-      </div>
-    </>
-  )
-}
-SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body'
-
-export const SelectPanelHeightAndScroll = () => {
-  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
-  const [selectedA, setSelectedA] = React.useState<ItemInput | undefined>(longItems[0])
-  const [selectedB, setSelectedB] = React.useState<ItemInput | undefined>(longItems[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [openA, setOpenA] = useState(false)
-  const [openB, setOpenB] = useState(false)
-
-  return (
-    <>
-      <h2>With height:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={openA}
-        onOpenChange={setOpenA}
-        items={filteredItems}
-        selected={selectedA}
-        onSelectedChange={setSelectedA}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{height: 'medium'}}
-      />
-      <h2>With height:auto, maxheight:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </Button>
-        )}
-        placeholderText="Filter Labels"
-        open={openB}
-        onOpenChange={setOpenB}
-        items={filteredItems}
-        selected={selectedB}
-        onSelectedChange={setSelectedB}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{
-          height: 'auto',
-          maxHeight: 'medium',
-        }}
-      />
-    </>
-  )
-}
-SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll'
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx
new file mode 100644
index 00000000000..923ffb5ad53
--- /dev/null
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import {SelectPanel} from '../SelectPanel'
+import {ActionList, Box} from '../../../index'
+import data from './mock-data'
+
+export default {
+  title: 'Drafts/Components/SelectPanel',
+  component: SelectPanel,
+}
+
+export const Default = () => {
+  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
+  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
+
+  /* Selection */
+  const onLabelSelect = (labelId: string) => {
+    if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
+    else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
+  }
+  const onClearSelection = () => {
+    setSelectedLabelIds([])
+  }
+
+  const onSubmit = () => {
+    data.issue.labelIds = selectedLabelIds // pretending to persist changes
+  }
+
+  /* Filtering */
+  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)
+  const [query, setQuery] = React.useState('')
+
+  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const query = event.currentTarget.value
+    setQuery(query)
+
+    if (query === '') setFilteredLabels(data.labels)
+    else {
+      setFilteredLabels(
+        data.labels
+          .map(label => {
+            if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label}
+            else if (label.name.toLowerCase().includes(query)) return {priority: 2, label}
+            else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label}
+            else return {priority: -1, label}
+          })
+          .filter(result => result.priority > 0)
+          .map(result => result.label),
+      )
+    }
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.labelIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
+
+  return (
+    <>
+      <SelectPanel
+        title="Select labels"
+        onSubmit={onSubmit}
+        onCancel={() => {
+          /* optional callback, for example: for multi-step overlay or to fire sync actions */
+          // eslint-disable-next-line no-console
+          console.log('panel was closed')
+        }}
+        onClearSelection={onClearSelection}
+      >
+        <SelectPanel.Button>Assign label</SelectPanel.Button>
+
+        <SelectPanel.Header>
+          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+        </SelectPanel.Header>
+
+        {itemsToShow.length === 0 ? (
+          <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
+            Try a different search term
+          </SelectPanel.Message>
+        ) : (
+          <ActionList>
+            {itemsToShow.map(label => (
+              <ActionList.Item
+                key={label.id}
+                onSelect={() => onLabelSelect(label.id)}
+                selected={selectedLabelIds.includes(label.id)}
+              >
+                <ActionList.LeadingVisual>
+                  <Box
+                    sx={{width: 14, height: 14, borderRadius: '100%'}}
+                    style={{backgroundColor: `#${label.color}`}}
+                  />
+                </ActionList.LeadingVisual>
+                {label.name}
+                <ActionList.Description variant="block">{label.description}</ActionList.Description>
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        )}
+
+        <SelectPanel.Footer>
+          <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
+        </SelectPanel.Footer>
+      </SelectPanel>
+    </>
+  )
+}
diff --git a/src/drafts/SelectPanel2/SelectPanel.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
similarity index 53%
rename from src/drafts/SelectPanel2/SelectPanel.stories.tsx
rename to src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
index b4dd23b130f..81698bdb900 100644
--- a/src/drafts/SelectPanel2/SelectPanel.stories.tsx
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx
@@ -1,22 +1,19 @@
 import React from 'react'
-import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Flash, Link, Text, ToggleSwitch} from '../../../src/index'
-import {
-  ArrowRightIcon,
-  AlertIcon,
-  EyeIcon,
-  GitBranchIcon,
-  TriangleDownIcon,
-  TagIcon,
-  GearIcon,
-} from '@primer/octicons-react'
+import {SelectPanel} from '../SelectPanel'
+import {ActionList, ActionMenu, Avatar, Box, Button, Flash} from '../../../index'
+import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react'
 import data from './mock-data'
 
+export default {
+  title: 'Drafts/Components/SelectPanel/Examples',
+  component: SelectPanel,
+}
+
 const getCircle = (color: string) => (
   <Box sx={{width: 14, height: 14, borderRadius: '100%'}} style={{backgroundColor: `#${color}`}} />
 )
 
-export const AControlled = () => {
+export const Minimal = () => {
   const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
   const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
 
@@ -26,11 +23,6 @@ export const AControlled = () => {
     else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
   }
 
-  const onClearSelection = () => {
-    // soft set, does not save until submit
-    setSelectedLabelIds([])
-  }
-
   const onSubmit = () => {
     data.issue.labelIds = selectedLabelIds // pretending to persist changes
 
@@ -38,62 +30,104 @@ export const AControlled = () => {
     console.log('form submitted')
   }
 
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.labelIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = data.labels.sort(sortingFn)
+
+  return (
+    <>
+      <h1>Minimal SelectPanel</h1>
+
+      <SelectPanel title="Select labels" onSubmit={onSubmit}>
+        <SelectPanel.Button>Assign label</SelectPanel.Button>
+
+        <ActionList>
+          {itemsToShow.map(label => (
+            <ActionList.Item
+              key={label.id}
+              onSelect={() => onLabelSelect(label.id)}
+              selected={selectedLabelIds.includes(label.id)}
+            >
+              <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
+              {label.name}
+              <ActionList.Description variant="block">{label.description}</ActionList.Description>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}
+
+export const WithGroups = () => {
+  /* Selection */
+  const initialAssigneeIds = data.issue.assigneeIds // mock initial state
+  const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
+
+  const onCollaboratorSelect = (colloratorId: string) => {
+    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
+    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
+  }
+
+  const onClearSelection = () => setSelectedAssigneeIds([])
+  const onSubmit = () => {
+    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes
+  }
+
   /* Filtering */
-  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)
+  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)
   const [query, setQuery] = React.useState('')
 
   const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
     const query = event.currentTarget.value
     setQuery(query)
 
-    if (query === '') setFilteredLabels(data.labels)
+    if (query === '') setFilteredUsers(data.collaborators)
     else {
-      // Note: in the future, we should probably add a highlight for matching text
-      setFilteredLabels(
-        data.labels
-          .map(label => {
-            if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label}
-            else if (label.name.toLowerCase().includes(query)) return {priority: 2, label}
-            else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label}
-            else return {priority: -1, label}
+      setFilteredUsers(
+        data.collaborators
+          .map(collaborator => {
+            if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator}
+            else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator}
+            else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator}
+            else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator}
+            else return {priority: -1, collaborator}
           })
           .filter(result => result.priority > 0)
-          .map(result => result.label),
+          .map(result => result.collaborator),
       )
     }
   }
 
   const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
-    const initialSelectedIds = data.issue.labelIds
+    const initialSelectedIds = data.issue.assigneeIds
     if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
     else if (initialSelectedIds.includes(itemA.id)) return -1
     else if (initialSelectedIds.includes(itemB.id)) return 1
     else return 1
   }
 
-  const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
+  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)
 
   return (
     <>
-      <h1>Controlled SelectPanel</h1>
+      <h1>SelectPanel with groups</h1>
 
-      <SelectPanel
-        title="Select labels"
-        defaultOpen
-        // onSubmit and onCancel feel out of place here instead of the footer,
-        // but cancel can be called from 4 different actions - Cancel button, X iconbutton up top, press escape key, click outside
-        // also, what if there is no footer? onSubmit is maybe not needed, but we need to put the onCancel callback somewhere.
-        onSubmit={onSubmit}
-        onCancel={() => {
-          /* optional callback, for example: for multi-step overlay or to fire sync actions */
-          // eslint-disable-next-line no-console
-          console.log('panel was closed')
-        }}
-        // API TODO: onClearSelection feels even more odd on the parent, instead of on the header.
-        onClearSelection={onClearSelection}
-      >
-        <SelectPanel.Button>Assign label</SelectPanel.Button>
-        {/* API TODO: header and heading is confusing. maybe skip header completely. */}
+      <SelectPanel title="Request up to 100 reviewers" onSubmit={onSubmit} onClearSelection={onClearSelection}>
+        <SelectPanel.Button
+          variant="invisible"
+          trailingAction={GearIcon}
+          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+        >
+          Reviewers
+        </SelectPanel.Button>
         <SelectPanel.Header>
           <SelectPanel.SearchInput onChange={onSearchInputChange} />
         </SelectPanel.Header>
@@ -104,29 +138,52 @@ export const AControlled = () => {
           </SelectPanel.Message>
         ) : (
           <ActionList>
-            {itemsToShow.map(label => (
-              <ActionList.Item
-                key={label.id}
-                onSelect={() => onLabelSelect(label.id)}
-                selected={selectedLabelIds.includes(label.id)}
-              >
-                <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
-                {label.name}
-                <ActionList.Description variant="block">{label.description}</ActionList.Description>
-              </ActionList.Item>
-            ))}
+            <ActionList.Group>
+              <ActionList.GroupHeading variant="filled">Suggestions</ActionList.GroupHeading>
+              {itemsToShow
+                .filter(collaborator => collaborator.recommended)
+                .map(collaborator => (
+                  <ActionList.Item
+                    key={collaborator.id}
+                    onSelect={() => onCollaboratorSelect(collaborator.id)}
+                    selected={selectedAssigneeIds.includes(collaborator.id)}
+                  >
+                    <ActionList.LeadingVisual>
+                      <Avatar src={`https://github.com/${collaborator.login}.png`} />
+                    </ActionList.LeadingVisual>
+                    {collaborator.login}
+                    <ActionList.Description>{collaborator.login}</ActionList.Description>
+                  </ActionList.Item>
+                ))}
+            </ActionList.Group>
+            <ActionList.Group>
+              <ActionList.GroupHeading variant="filled">Everyone else</ActionList.GroupHeading>
+              {itemsToShow
+                .filter(collaborator => !collaborator.recommended)
+                .map(collaborator => (
+                  <ActionList.Item
+                    key={collaborator.id}
+                    onSelect={() => onCollaboratorSelect(collaborator.id)}
+                    selected={selectedAssigneeIds.includes(collaborator.id)}
+                  >
+                    <ActionList.LeadingVisual>
+                      <Avatar src={`https://github.com/${collaborator.login}.png`} />
+                    </ActionList.LeadingVisual>
+                    {collaborator.login}
+                    <ActionList.Description>{collaborator.login}</ActionList.Description>
+                  </ActionList.Item>
+                ))}
+            </ActionList.Group>
           </ActionList>
         )}
 
-        <SelectPanel.Footer>
-          <SelectPanel.SecondaryButton>Edit labels</SelectPanel.SecondaryButton>
-        </SelectPanel.Footer>
+        <SelectPanel.Footer />
       </SelectPanel>
     </>
   )
 }
 
-export const BWithSuspendedList = () => {
+export const AsyncWithSuspendedList = () => {
   const [query, setQuery] = React.useState('')
 
   const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
@@ -136,7 +193,7 @@ export const BWithSuspendedList = () => {
 
   return (
     <>
-      <h1>Suspended list</h1>
+      <h1>Async: Suspended list</h1>
       <p>Fetching items once when the panel is opened (like repo labels)</p>
       <SelectPanel title="Select labels">
         <SelectPanel.Button>Assign label</SelectPanel.Button>
@@ -210,59 +267,6 @@ const SuspendedActionList: React.FC<{query: string}> = ({query}) => {
   )
 }
 
-export const CAsyncSearchWithSuspenseKey = () => {
-  // issue `data` is already pre-fetched
-  // `users` are fetched async on search
-
-  const [query, setQuery] = React.useState('')
-  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-    const query = event.currentTarget.value
-    setQuery(query)
-  }
-
-  /* Selection */
-  const initialAssigneeIds: string[] = data.issue.assigneeIds
-  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>(initialAssigneeIds)
-  const onUserSelect = (userId: string) => {
-    if (!selectedUserIds.includes(userId)) setSelectedUserIds([...selectedUserIds, userId])
-    else setSelectedUserIds(selectedUserIds.filter(id => id !== userId))
-  }
-
-  const onSubmit = () => {
-    data.issue.assigneeIds = selectedUserIds // pretending to persist changes
-
-    // eslint-disable-next-line no-console
-    console.log('form submitted')
-  }
-
-  return (
-    <>
-      <h1>Async search with useTransition</h1>
-      <p>Fetching items on every keystroke search (like github users)</p>
-
-      <SelectPanel title="Select collaborators" defaultOpen={true} onSubmit={onSubmit}>
-        <SelectPanel.Button>Select assignees</SelectPanel.Button>
-        <SelectPanel.Header>
-          <SelectPanel.SearchInput onChange={onSearchInputChange} />
-        </SelectPanel.Header>
-
-        {/* Reset suspense boundary to trigger refetch on query
-            Docs reference: https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation
-        */}
-        <React.Suspense key={query} fallback={<SelectPanel.Loading>Fetching users...</SelectPanel.Loading>}>
-          <SearchableUserList
-            query={query}
-            initialAssigneeIds={initialAssigneeIds}
-            selectedUserIds={selectedUserIds}
-            onUserSelect={onUserSelect}
-          />
-          <SelectPanel.Footer />
-        </React.Suspense>
-      </SelectPanel>
-    </>
-  )
-}
-
 /* 
   `data` is already pre-fetched with the issue 
   `users` are fetched async on search
@@ -316,7 +320,7 @@ const SearchableUserList: React.FC<{
   `data` is already pre-fetched with the issue 
   `users` are fetched async on search
 */
-export const DAsyncSearchWithUseTransition = () => {
+export const AsyncSearchWithUseTransition = () => {
   const [isPending, startTransition] = React.useTransition()
 
   const [query, setQuery] = React.useState('')
@@ -341,315 +345,65 @@ export const DAsyncSearchWithUseTransition = () => {
 
   return (
     <>
-      <h1>Async search with useTransition</h1>
+      <h1>Async: search with useTransition</h1>
       <p>Fetching items on every keystroke search (like github users)</p>
 
-      <SelectPanel title="Select collaborators" defaultOpen={true} onSubmit={onSubmit}>
+      <SelectPanel title="Select collaborators" onSubmit={onSubmit}>
         <SelectPanel.Button>Select assignees</SelectPanel.Button>
         <SelectPanel.Header>
-          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+          <SelectPanel.SearchInput loading={isPending} onChange={onSearchInputChange} />
         </SelectPanel.Header>
 
-        <React.Suspense fallback={<SelectPanel.Loading>Fetching users...</SelectPanel.Loading>}>
-          <SearchableUserList
-            query={query}
-            showLoading={isPending}
-            initialAssigneeIds={initialAssigneeIds}
-            selectedUserIds={selectedUserIds}
-            onUserSelect={onUserSelect}
-          />
-          <SelectPanel.Footer />
-        </React.Suspense>
+        <SearchableUserList
+          query={query}
+          initialAssigneeIds={initialAssigneeIds}
+          selectedUserIds={selectedUserIds}
+          onUserSelect={onUserSelect}
+        />
+        <SelectPanel.Footer />
       </SelectPanel>
     </>
   )
 }
 
-export const TODO2SingleSelection = () => <h1>TODO</h1>
-
-export const HWithFilterButtons = () => {
-  const [selectedFilter, setSelectedFilter] = React.useState<'branches' | 'tags'>('branches')
+export const OpenFromMenu = () => {
+  /* Open state */
+  const [menuOpen, setMenuOpen] = React.useState(false)
+  const [selectPanelOpen, setSelectPanelOpen] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
 
   /* Selection */
-  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)
-  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)
-
-  const onSubmit = () => {
-    setSavedInitialRef(selectedRef)
-    data.ref = selectedRef // pretending to persist changes
-
-    // eslint-disable-next-line no-console
-    console.log('form submitted')
-  }
-
-  /* Filter */
-  const [query, setQuery] = React.useState('')
-  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-    const query = event.currentTarget.value
-    setQuery(query)
-  }
+  const [selectedSetting, setSelectedSetting] = React.useState<string>('All activity')
+  const [selectedEvents, setSelectedEvents] = React.useState<string[]>([])
 
-  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)
-  const setSearchResults = (query: string, selectedFilter: 'branches' | 'tags') => {
-    if (query === '') setFilteredRefs(data[selectedFilter])
-    else {
-      setFilteredRefs(
-        data[selectedFilter]
-          .map(item => {
-            if (item.name.toLowerCase().startsWith(query)) return {priority: 1, item}
-            else if (item.name.toLowerCase().includes(query)) return {priority: 2, item}
-            else return {priority: -1, item}
-          })
-          .filter(result => result.priority > 0)
-          .map(result => result.item),
-      )
-    }
+  const onEventSelect = (event: string) => {
+    if (!selectedEvents.includes(event)) setSelectedEvents([...selectedEvents, event])
+    else setSelectedEvents(selectedEvents.filter(name => name !== event))
   }
 
-  React.useEffect(
-    function updateSearchResults() {
-      setSearchResults(query, selectedFilter)
-    },
-    [query, selectedFilter],
-  )
-
-  const sortingFn = (ref: {id: string}) => {
-    if (ref.id === savedInitialRef) return -1
-    else return 1
+  const onSelectPanelSubmit = () => {
+    setSelectedSetting('Custom')
   }
 
-  const itemsToShow = query ? filteredRefs : data[selectedFilter].sort(sortingFn)
+  const itemsToShow = ['Issues', 'Pull requests', 'Releases', 'Discussions', 'Security alerts']
 
   return (
     <>
-      <h1>With Filter Buttons</h1>
-
-      <SelectPanel title="Switch branches/tags" defaultOpen onSubmit={onSubmit}>
-        <SelectPanel.Button leadingVisual={GitBranchIcon} trailingVisual={TriangleDownIcon}>
-          {savedInitialRef}
-        </SelectPanel.Button>
-
-        <SelectPanel.Header>
-          <SelectPanel.SearchInput onChange={onSearchInputChange} />
-
-          <Box id="filters" sx={{display: 'flex', marginTop: 1}}>
-            <Button
-              variant="invisible"
-              sx={{fontWeight: selectedFilter === 'branches' ? 'semibold' : 'normal', color: 'fg.default'}}
-              onClick={() => setSelectedFilter('branches')}
-              count={20}
-            >
-              Branches
-            </Button>
-            <Button
-              variant="invisible"
-              sx={{fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal', color: 'fg.default'}}
-              onClick={() => setSelectedFilter('tags')}
-              count={8}
-            >
-              Tags
-            </Button>
-          </Box>
-        </SelectPanel.Header>
-
-        {itemsToShow.length === 0 ? (
-          <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
-            Try a different search term
-          </SelectPanel.Message>
-        ) : (
-          <ActionList selectionVariant="single">
-            {itemsToShow.map(item => (
-              <ActionList.Item
-                key={item.id}
-                selected={selectedRef === item.id}
-                onSelect={() => setSelectedRef(item.id)}
-              >
-                {item.name}
-                <ActionList.TrailingVisual>{item.trailingInfo}</ActionList.TrailingVisual>
-              </ActionList.Item>
-            ))}
-          </ActionList>
-        )}
-
-        <SelectPanel.Footer>
-          {/* @ts-ignore TODO as prop is not identified by button? */}
-          <SelectPanel.SecondaryButton as="a" href={`/${selectedFilter}`}>
-            View all {selectedFilter}
-          </SelectPanel.SecondaryButton>
-        </SelectPanel.Footer>
-      </SelectPanel>
-    </>
-  )
-}
-
-export const EMinimal = () => {
-  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
-  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
-
-  /* Selection */
-  const onLabelSelect = (labelId: string) => {
-    if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
-    else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
-  }
-
-  const onSubmit = () => {
-    data.issue.labelIds = selectedLabelIds // pretending to persist changes
-
-    // eslint-disable-next-line no-console
-    console.log('form submitted')
-  }
-
-  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
-    const initialSelectedIds = data.issue.labelIds
-    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
-    else if (initialSelectedIds.includes(itemA.id)) return -1
-    else if (initialSelectedIds.includes(itemB.id)) return 1
-    else return 1
-  }
-
-  const itemsToShow = data.labels.sort(sortingFn)
-
-  return (
-    <>
-      <h1>Minimal SelectPanel</h1>
-
-      <SelectPanel title="Select labels" defaultOpen onSubmit={onSubmit}>
-        <SelectPanel.Button>Assign label</SelectPanel.Button>
-
-        <ActionList>
-          {itemsToShow.map(label => (
-            <ActionList.Item
-              key={label.id}
-              onSelect={() => onLabelSelect(label.id)}
-              selected={selectedLabelIds.includes(label.id)}
-            >
-              <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
-              {label.name}
-              <ActionList.Description variant="block">{label.description}</ActionList.Description>
-            </ActionList.Item>
-          ))}
-        </ActionList>
-        <SelectPanel.Footer />
-      </SelectPanel>
-    </>
-  )
-}
-
-export const FExternalAnchor = () => {
-  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
-  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
-
-  /* Selection */
-  const onLabelSelect = (labelId: string) => {
-    if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
-    else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
-  }
-
-  const onSubmit = () => {
-    data.issue.labelIds = selectedLabelIds // pretending to persist changes
-
-    // eslint-disable-next-line no-console
-    console.log('form submitted')
-  }
-
-  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
-    const initialSelectedIds = data.issue.labelIds
-    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
-    else if (initialSelectedIds.includes(itemA.id)) return -1
-    else if (initialSelectedIds.includes(itemB.id)) return 1
-    else return 1
-  }
-
-  const itemsToShow = data.labels.sort(sortingFn)
-
-  const anchorRef = React.useRef<HTMLButtonElement>(null)
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <h1>With External Anchor</h1>
-      <p>
-        To use an external anchor, pass an `anchorRef` to `SelectPanel`. You would also need to control the `open` state
-        with `onSubmit` and `onCancel`
-      </p>
-
-      <Button
-        ref={anchorRef}
-        variant="primary"
-        onClick={() => setOpen(!open)}
-        aria-haspopup
-        aria-expanded={open ? true : undefined}
-      >
-        Assign label
-      </Button>
-
-      <SelectPanel
-        title="Select labels"
-        anchorRef={anchorRef}
-        open={open} // this needs to be set with the button
-        onSubmit={() => {
-          setOpen(false) // close on submit
-          onSubmit()
-        }}
-        onCancel={() => setOpen(false)} // close on cancel
-      >
-        <ActionList>
-          {itemsToShow.map(label => (
-            <ActionList.Item
-              key={label.id}
-              onSelect={() => onLabelSelect(label.id)}
-              selected={selectedLabelIds.includes(label.id)}
-            >
-              <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
-              {label.name}
-              <ActionList.Description variant="block">{label.description}</ActionList.Description>
-            </ActionList.Item>
-          ))}
-        </ActionList>
-        <SelectPanel.Footer />
-      </SelectPanel>
-    </>
-  )
-}
-
-export const GOpenFromMenu = () => {
-  /* Open state */
-  const [menuOpen, setMenuOpen] = React.useState(false)
-  const [selectPanelOpen, setSelectPanelOpen] = React.useState(false)
-  const buttonRef = React.useRef<HTMLButtonElement>(null)
-
-  /* Selection */
-  const [selectedSetting, setSelectedSetting] = React.useState<string>('All activity')
-  const [selectedEvents, setSelectedEvents] = React.useState<string[]>([])
-
-  const onEventSelect = (event: string) => {
-    if (!selectedEvents.includes(event)) setSelectedEvents([...selectedEvents, event])
-    else setSelectedEvents(selectedEvents.filter(name => name !== event))
-  }
-
-  const onSelectPanelSubmit = () => {
-    setSelectedSetting('Custom')
-  }
-
-  const itemsToShow = ['Issues', 'Pull requests', 'Releases', 'Discussions', 'Security alerts']
-
-  return (
-    <>
-      <h1>Open from ActionMenu</h1>
-      <Flash variant="danger">
-        <AlertIcon />
-        This implementation will most likely change.{' '}
-        <a href="https://github.com/github/primer/discussions/2614#discussioncomment-6879407">
-          See decision log for more details.
-        </a>
-      </Flash>
-      <p>
-        To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`.
-        You would also need to control the `open` state for both ActionMenu and SelectPanel.
-        <br />
-        <br />
-        Important: Pass the same `anchorRef` to both ActionMenu and SelectPanel
-      </p>
+      <h1>Open from ActionMenu</h1>
+      <Flash variant="danger">
+        <AlertIcon />
+        This implementation will most likely change.{' '}
+        <a href="https://github.com/github/primer/discussions/2614#discussioncomment-6879407">
+          See decision log for more details.
+        </a>
+      </Flash>
+      <p>
+        To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`.
+        You would also need to control the `open` state for both ActionMenu and SelectPanel.
+        <br />
+        <br />
+        Important: Pass the same `anchorRef` to both ActionMenu and SelectPanel
+      </p>
 
       <Button
         ref={buttonRef}
@@ -730,295 +484,116 @@ export const GOpenFromMenu = () => {
   )
 }
 
-export const FInstantSelectionVariant = () => {
-  const [selectedTag, setSelectedTag] = React.useState<string>()
-
-  const onSubmit = () => {
-    if (!selectedTag) return
-    data.ref = selectedTag // pretending to persist changes
-  }
-
-  const itemsToShow = data.tags
-
-  return (
-    <>
-      <h1>Instant selection variant</h1>
-
-      <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit} height="medium" defaultOpen>
-        <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
-
-        <ActionList>
-          {itemsToShow.map(tag => (
-            <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
-              {tag.name}
-            </ActionList.Item>
-          ))}
-        </ActionList>
-        <SelectPanel.Footer>
-          <SelectPanel.SecondaryButton>Edit tags</SelectPanel.SecondaryButton>
-        </SelectPanel.Footer>
-      </SelectPanel>
-    </>
-  )
-}
+export const WithFilterButtons = () => {
+  const [selectedFilter, setSelectedFilter] = React.useState<'branches' | 'tags'>('branches')
 
-export const IWithWarning = () => {
   /* Selection */
+  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)
+  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)
 
-  const initialAssigneeIds = data.issue.assigneeIds // mock initial state
-  const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
-  const MAX_LIMIT = 3
-
-  const onCollaboratorSelect = (colloratorId: string) => {
-    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
-    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
-  }
-
-  const onClearSelection = () => setSelectedAssigneeIds([])
   const onSubmit = () => {
-    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes
+    setSavedInitialRef(selectedRef)
+    data.ref = selectedRef // pretending to persist changes
+
+    // eslint-disable-next-line no-console
+    console.log('form submitted')
   }
 
-  /* Filtering */
-  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)
+  /* Filter */
   const [query, setQuery] = React.useState('')
-
   const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
     const query = event.currentTarget.value
     setQuery(query)
+  }
 
-    if (query === '') setFilteredUsers(data.collaborators)
+  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)
+  const setSearchResults = (query: string, selectedFilter: 'branches' | 'tags') => {
+    if (query === '') setFilteredRefs(data[selectedFilter])
     else {
-      setFilteredUsers(
-        data.collaborators
-          .map(collaborator => {
-            if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator}
-            else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator}
-            else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator}
-            else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator}
-            else return {priority: -1, collaborator}
+      setFilteredRefs(
+        data[selectedFilter]
+          .map(item => {
+            if (item.name.toLowerCase().startsWith(query)) return {priority: 1, item}
+            else if (item.name.toLowerCase().includes(query)) return {priority: 2, item}
+            else return {priority: -1, item}
           })
           .filter(result => result.priority > 0)
-          .map(result => result.collaborator),
+          .map(result => result.item),
       )
     }
   }
 
-  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
-    const initialSelectedIds = data.issue.assigneeIds
-    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
-    else if (initialSelectedIds.includes(itemA.id)) return -1
-    else if (initialSelectedIds.includes(itemB.id)) return 1
+  React.useEffect(
+    function updateSearchResults() {
+      setSearchResults(query, selectedFilter)
+    },
+    [query, selectedFilter],
+  )
+
+  const sortingFn = (ref: {id: string}) => {
+    if (ref.id === savedInitialRef) return -1
     else return 1
   }
 
-  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)
+  const itemsToShow = query ? filteredRefs : data[selectedFilter].sort(sortingFn)
 
   return (
     <>
-      <h1>SelectPanel with warning</h1>
+      <h1>With Filter Buttons</h1>
 
-      <SelectPanel
-        title="Set assignees"
-        description={`Select up to ${MAX_LIMIT} people`}
-        defaultOpen
-        onSubmit={onSubmit}
-        onClearSelection={onClearSelection}
-      >
-        <SelectPanel.Button
-          variant="invisible"
-          trailingAction={GearIcon}
-          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
-        >
-          Assignees
+      <SelectPanel title="Switch branches/tags" onSubmit={onSubmit}>
+        <SelectPanel.Button leadingVisual={GitBranchIcon} trailingVisual={TriangleDownIcon}>
+          {savedInitialRef}
         </SelectPanel.Button>
+
         <SelectPanel.Header>
           <SelectPanel.SearchInput onChange={onSearchInputChange} />
-        </SelectPanel.Header>
 
-        {selectedAssigneeIds.length >= MAX_LIMIT ? (
-          <SelectPanel.Message variant="warning" size="inline">
-            You have reached the limit of {MAX_LIMIT} assignees on your free account.{' '}
-            <Link href="/upgrade">Upgrade your account.</Link>
-          </SelectPanel.Message>
-        ) : null}
+          <Box id="filters" sx={{display: 'flex', marginTop: 1}}>
+            <Button
+              variant="invisible"
+              sx={{fontWeight: selectedFilter === 'branches' ? 'semibold' : 'normal', color: 'fg.default'}}
+              onClick={() => setSelectedFilter('branches')}
+              count={20}
+            >
+              Branches
+            </Button>
+            <Button
+              variant="invisible"
+              sx={{fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal', color: 'fg.default'}}
+              onClick={() => setSelectedFilter('tags')}
+              count={8}
+            >
+              Tags
+            </Button>
+          </Box>
+        </SelectPanel.Header>
 
         {itemsToShow.length === 0 ? (
           <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
             Try a different search term
           </SelectPanel.Message>
         ) : (
-          <ActionList>
-            {itemsToShow.map(collaborator => (
+          <ActionList selectionVariant="single">
+            {itemsToShow.map(item => (
               <ActionList.Item
-                key={collaborator.id}
-                onSelect={() => onCollaboratorSelect(collaborator.id)}
-                selected={selectedAssigneeIds.includes(collaborator.id)}
-                disabled={selectedAssigneeIds.length >= MAX_LIMIT && !selectedAssigneeIds.includes(collaborator.id)}
+                key={item.id}
+                selected={selectedRef === item.id}
+                onSelect={() => setSelectedRef(item.id)}
               >
-                <ActionList.LeadingVisual>
-                  <Avatar src={`https://github.com/${collaborator.login}.png`} />
-                </ActionList.LeadingVisual>
-                {collaborator.login}
-                <ActionList.Description>{collaborator.login}</ActionList.Description>
+                {item.name}
+                <ActionList.TrailingVisual>{item.trailingInfo}</ActionList.TrailingVisual>
               </ActionList.Item>
             ))}
           </ActionList>
         )}
 
-        <SelectPanel.Footer />
-      </SelectPanel>
-    </>
-  )
-}
-
-export const JWithErrors = () => {
-  const [searchBroken, setSearchBroken] = React.useState(true)
-  const [issuesBroken, setIssuesBroken] = React.useState(false)
-
-  /* Selection */
-  const initialAssigneeIds = data.collaborators.slice(0, 3).map(c => c.id) // mock initial state
-  const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
-
-  const onCollaboratorSelect = (colloratorId: string) => {
-    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
-    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
-  }
-
-  const onClearSelection = () => setSelectedAssigneeIds([])
-  const onSubmit = () => {
-    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes
-  }
-
-  /* Filtering */
-  const [filteredUsers, setFilteredUsers] = React.useState(
-    searchBroken ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) : data.collaborators,
-  )
-
-  const [query, setQuery] = React.useState('')
-
-  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-    const query = event.currentTarget.value
-    setQuery(query)
-
-    if (query === '') setFilteredUsers(data.collaborators)
-    else {
-      // if search is broken, only show assignees, not all collaborators
-      const allCollaborators = searchBroken
-        ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id))
-        : data.collaborators
-
-      setFilteredUsers(
-        allCollaborators
-          .map(collaborator => {
-            if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator}
-            else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator}
-            else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator}
-            else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator}
-            else return {priority: -1, collaborator}
-          })
-          .filter(result => result.priority > 0)
-          .map(result => result.collaborator),
-      )
-    }
-  }
-
-  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
-    const initialSelectedIds = data.issue.assigneeIds
-    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
-    else if (initialSelectedIds.includes(itemA.id)) return -1
-    else if (initialSelectedIds.includes(itemB.id)) return 1
-    else return 1
-  }
-
-  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)
-
-  return (
-    <>
-      <h1>SelectPanel with Errors</h1>
-
-      <Box sx={{display: 'flex', maxWidth: 600, marginBottom: 2}}>
-        <Box sx={{flexGrow: 1}}>
-          <Text sx={{fontSize: 2, fontWeight: 'bold', display: 'block'}} id="switch-label">
-            Break search API
-          </Text>
-          <Text sx={{fontSize: 1, color: 'fg.subtle'}} id="switch-caption">
-            Turn on to show error message while searching
-          </Text>
-        </Box>
-        <ToggleSwitch
-          defaultChecked={true}
-          onChange={enabled => setSearchBroken(enabled)}
-          aria-labelledby="switch-label"
-          aria-describedby="switch-caption"
-        />
-      </Box>
-      <Box sx={{display: 'flex', marginBottom: 5, maxWidth: 600}}>
-        <Box sx={{flexGrow: 1}}>
-          <Text id="break-issues-label" sx={{fontSize: 2, fontWeight: 'bold', display: 'block'}}>
-            Break issues API
-          </Text>
-          <Text id="break-issues-caption" sx={{fontSize: 1, color: 'fg.subtle'}}>
-            Turn on to break everything and show big error in panel
-          </Text>
-        </Box>
-        <ToggleSwitch
-          defaultChecked={false}
-          onChange={enabled => setIssuesBroken(enabled)}
-          aria-labelledby="break-issues-label"
-          aria-describedby="break-issues-caption"
-        />
-      </Box>
-
-      <SelectPanel title="Set assignees" defaultOpen onSubmit={onSubmit} onClearSelection={onClearSelection}>
-        <SelectPanel.Button
-          variant="invisible"
-          trailingAction={GearIcon}
-          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
-        >
-          Assignees
-        </SelectPanel.Button>
-        <SelectPanel.Header>
-          <SelectPanel.SearchInput onChange={onSearchInputChange} />
-        </SelectPanel.Header>
-
-        {issuesBroken ? (
-          <SelectPanel.Message variant="error" size="full" title="We couldn't load collaborators">
-            Try again or if the problem persists, <Link href="/support">contact support</Link>
-          </SelectPanel.Message>
-        ) : (
-          <>
-            {query && searchBroken ? (
-              <SelectPanel.Message variant="error" size="inline">
-                We couldn&apos;t load all collaborators. Try again or if the problem persists,{' '}
-                <Link href="/support">contact support</Link>
-              </SelectPanel.Message>
-            ) : null}
-            {itemsToShow.length === 0 ? (
-              <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
-                Try a different search term
-              </SelectPanel.Message>
-            ) : (
-              <ActionList>
-                {itemsToShow.map(collaborator => (
-                  <ActionList.Item
-                    key={collaborator.id}
-                    onSelect={() => onCollaboratorSelect(collaborator.id)}
-                    selected={selectedAssigneeIds.includes(collaborator.id)}
-                  >
-                    <ActionList.LeadingVisual>
-                      <Avatar src={`https://github.com/${collaborator.login}.png`} />
-                    </ActionList.LeadingVisual>
-                    {collaborator.login}
-                    <ActionList.Description>{collaborator.login}</ActionList.Description>
-                  </ActionList.Item>
-                ))}
-              </ActionList>
-            )}
-          </>
-        )}
-
-        <SelectPanel.Footer />
+        <SelectPanel.Footer>
+          {/* @ts-ignore TODO as prop is not identified by button? */}
+          <SelectPanel.SecondaryButton as="a" href={`/${selectedFilter}`}>
+            View all {selectedFilter}
+          </SelectPanel.SecondaryButton>
+        </SelectPanel.Footer>
       </SelectPanel>
     </>
   )
@@ -1051,24 +626,6 @@ const fetchUsers = async (query: string, delay: number) => {
       user.login.toLowerCase().includes(query.toLowerCase()) || user.name.toLowerCase().includes(query.toLowerCase())
     )
   })
-  // i went harder on this than is necessary 😅
-  // .map(user => {
-  //   if (user.login.toLowerCase().startsWith(query)) return {priority: 1, user}
-  //   else if (user.login.toLowerCase().includes(query)) return {priority: 2, user}
-  //   else if (user.name.toLowerCase().includes(query)) return {priority: 3, user}
-  //   else return {priority: 4, user}
-  // })
-  // .sort((userA, userB) => (userA.priority > userB.priority ? 1 : -1))
-  // .sort((userA, userB) => {
-  //   // second level sort: collaborators show up first
-  //   if (
-  //     data.collaborators.find(c => c.id === userA.user.id) &&
-  //     !data.collaborators.find(c => c.id === userB.user.id)
-  //   ) {
-  //     return -1
-  //   } else return 1
-  // })
-  // .map(result => result.user)
 }
 
 /* lifted from the examples at https://react.dev/reference/react/Suspense */
@@ -1097,8 +654,3 @@ function use(promise) {
     throw promise
   }
 }
-
-export default {
-  title: 'Drafts/Components/SelectPanel',
-  component: SelectPanel,
-}
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
new file mode 100644
index 00000000000..255edd3a9d2
--- /dev/null
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx
@@ -0,0 +1,386 @@
+import React from 'react'
+import {SelectPanel} from '../SelectPanel'
+import {ActionList, Avatar, Box, Button, Link, Text, ToggleSwitch} from '../../../index'
+import {TagIcon, GearIcon} from '@primer/octicons-react'
+import data from './mock-data'
+
+export default {
+  title: 'Drafts/Components/SelectPanel/Features',
+  component: SelectPanel,
+}
+
+const getCircle = (color: string) => (
+  <Box sx={{width: 14, height: 14, borderRadius: '100%'}} style={{backgroundColor: `#${color}`}} />
+)
+
+export const InstantSelectionVariant = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+
+  const onSubmit = () => {
+    if (!selectedTag) return
+    data.ref = selectedTag // pretending to persist changes
+  }
+
+  const itemsToShow = data.tags
+
+  return (
+    <>
+      <h1>Instant selection variant</h1>
+
+      <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit} height="medium">
+        <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+        <ActionList>
+          {itemsToShow.map(tag => (
+            <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
+              {tag.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <SelectPanel.Footer>
+          <SelectPanel.SecondaryButton>Edit tags</SelectPanel.SecondaryButton>
+        </SelectPanel.Footer>
+      </SelectPanel>
+    </>
+  )
+}
+
+export const SingleSelection = () => <h1>TODO</h1>
+
+export const WithWarning = () => {
+  /* Selection */
+
+  const initialAssigneeIds = data.issue.assigneeIds // mock initial state
+  const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
+  const MAX_LIMIT = 3
+
+  const onCollaboratorSelect = (colloratorId: string) => {
+    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
+    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
+  }
+
+  const onClearSelection = () => setSelectedAssigneeIds([])
+  const onSubmit = () => {
+    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes
+  }
+
+  /* Filtering */
+  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)
+  const [query, setQuery] = React.useState('')
+
+  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const query = event.currentTarget.value
+    setQuery(query)
+
+    if (query === '') setFilteredUsers(data.collaborators)
+    else {
+      setFilteredUsers(
+        data.collaborators
+          .map(collaborator => {
+            if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator}
+            else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator}
+            else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator}
+            else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator}
+            else return {priority: -1, collaborator}
+          })
+          .filter(result => result.priority > 0)
+          .map(result => result.collaborator),
+      )
+    }
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.assigneeIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)
+
+  return (
+    <>
+      <h1>SelectPanel with warning</h1>
+
+      <SelectPanel
+        title="Set assignees"
+        description={`Select up to ${MAX_LIMIT} people`}
+        onSubmit={onSubmit}
+        onClearSelection={onClearSelection}
+      >
+        <SelectPanel.Button
+          variant="invisible"
+          trailingAction={GearIcon}
+          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+        >
+          Assignees
+        </SelectPanel.Button>
+        <SelectPanel.Header>
+          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+        </SelectPanel.Header>
+
+        {selectedAssigneeIds.length >= MAX_LIMIT ? (
+          <SelectPanel.Message variant="warning" size="inline">
+            You have reached the limit of {MAX_LIMIT} assignees on your free account.{' '}
+            <Link href="/upgrade">Upgrade your account.</Link>
+          </SelectPanel.Message>
+        ) : null}
+
+        {itemsToShow.length === 0 ? (
+          <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
+            Try a different search term
+          </SelectPanel.Message>
+        ) : (
+          <ActionList>
+            {itemsToShow.map(collaborator => (
+              <ActionList.Item
+                key={collaborator.id}
+                onSelect={() => onCollaboratorSelect(collaborator.id)}
+                selected={selectedAssigneeIds.includes(collaborator.id)}
+                disabled={selectedAssigneeIds.length >= MAX_LIMIT && !selectedAssigneeIds.includes(collaborator.id)}
+              >
+                <ActionList.LeadingVisual>
+                  <Avatar src={`https://github.com/${collaborator.login}.png`} />
+                </ActionList.LeadingVisual>
+                {collaborator.login}
+                <ActionList.Description>{collaborator.login}</ActionList.Description>
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        )}
+
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}
+
+export const WithErrors = () => {
+  const [searchBroken, setSearchBroken] = React.useState(true)
+  const [issuesBroken, setIssuesBroken] = React.useState(false)
+
+  /* Selection */
+  const initialAssigneeIds = data.collaborators.slice(0, 3).map(c => c.id) // mock initial state
+  const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
+
+  const onCollaboratorSelect = (colloratorId: string) => {
+    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
+    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
+  }
+
+  const onClearSelection = () => setSelectedAssigneeIds([])
+  const onSubmit = () => {
+    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes
+  }
+
+  /* Filtering */
+  const [filteredUsers, setFilteredUsers] = React.useState(
+    searchBroken ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id)) : data.collaborators,
+  )
+
+  const [query, setQuery] = React.useState('')
+
+  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const query = event.currentTarget.value
+    setQuery(query)
+
+    if (query === '') setFilteredUsers(data.collaborators)
+    else {
+      // if search is broken, only show assignees, not all collaborators
+      const allCollaborators = searchBroken
+        ? data.collaborators.filter(c => initialAssigneeIds.includes(c.id))
+        : data.collaborators
+
+      setFilteredUsers(
+        allCollaborators
+          .map(collaborator => {
+            if (collaborator.login.toLowerCase().startsWith(query)) return {priority: 1, collaborator}
+            else if (collaborator.name.startsWith(query)) return {priority: 2, collaborator}
+            else if (collaborator.login.toLowerCase().includes(query)) return {priority: 3, collaborator}
+            else if (collaborator.name.toLowerCase().includes(query)) return {priority: 4, collaborator}
+            else return {priority: -1, collaborator}
+          })
+          .filter(result => result.priority > 0)
+          .map(result => result.collaborator),
+      )
+    }
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.assigneeIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)
+
+  return (
+    <>
+      <h1>SelectPanel with Errors</h1>
+
+      <Box sx={{display: 'flex', maxWidth: 600, marginBottom: 2}}>
+        <Box sx={{flexGrow: 1}}>
+          <Text sx={{fontSize: 2, fontWeight: 'bold', display: 'block'}} id="switch-label">
+            Break search API
+          </Text>
+          <Text sx={{fontSize: 1, color: 'fg.subtle'}} id="switch-caption">
+            Turn on to show error message while searching
+          </Text>
+        </Box>
+        <ToggleSwitch
+          defaultChecked={true}
+          onChange={enabled => setSearchBroken(enabled)}
+          aria-labelledby="switch-label"
+          aria-describedby="switch-caption"
+        />
+      </Box>
+      <Box sx={{display: 'flex', marginBottom: 5, maxWidth: 600}}>
+        <Box sx={{flexGrow: 1}}>
+          <Text id="break-issues-label" sx={{fontSize: 2, fontWeight: 'bold', display: 'block'}}>
+            Break issues API
+          </Text>
+          <Text id="break-issues-caption" sx={{fontSize: 1, color: 'fg.subtle'}}>
+            Turn on to break everything and show big error in panel
+          </Text>
+        </Box>
+        <ToggleSwitch
+          defaultChecked={false}
+          onChange={enabled => setIssuesBroken(enabled)}
+          aria-labelledby="break-issues-label"
+          aria-describedby="break-issues-caption"
+        />
+      </Box>
+
+      <SelectPanel title="Set assignees" onSubmit={onSubmit} onClearSelection={onClearSelection}>
+        <SelectPanel.Button
+          variant="invisible"
+          trailingAction={GearIcon}
+          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+        >
+          Assignees
+        </SelectPanel.Button>
+        <SelectPanel.Header>
+          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+        </SelectPanel.Header>
+
+        {issuesBroken ? (
+          <SelectPanel.Message variant="error" size="full" title="We couldn't load collaborators">
+            Try again or if the problem persists, <Link href="/support">contact support</Link>
+          </SelectPanel.Message>
+        ) : (
+          <>
+            {query && searchBroken ? (
+              <SelectPanel.Message variant="error" size="inline">
+                We couldn&apos;t load all collaborators. Try again or if the problem persists,{' '}
+                <Link href="/support">contact support</Link>
+              </SelectPanel.Message>
+            ) : null}
+            {itemsToShow.length === 0 ? (
+              <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
+                Try a different search term
+              </SelectPanel.Message>
+            ) : (
+              <ActionList>
+                {itemsToShow.map(collaborator => (
+                  <ActionList.Item
+                    key={collaborator.id}
+                    onSelect={() => onCollaboratorSelect(collaborator.id)}
+                    selected={selectedAssigneeIds.includes(collaborator.id)}
+                  >
+                    <ActionList.LeadingVisual>
+                      <Avatar src={`https://github.com/${collaborator.login}.png`} />
+                    </ActionList.LeadingVisual>
+                    {collaborator.login}
+                    <ActionList.Description>{collaborator.login}</ActionList.Description>
+                  </ActionList.Item>
+                ))}
+              </ActionList>
+            )}
+          </>
+        )}
+
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}
+
+export const ExternalAnchor = () => {
+  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
+  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
+
+  /* Selection */
+  const onLabelSelect = (labelId: string) => {
+    if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
+    else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
+  }
+
+  const onSubmit = () => {
+    data.issue.labelIds = selectedLabelIds // pretending to persist changes
+
+    // eslint-disable-next-line no-console
+    console.log('form submitted')
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.labelIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = data.labels.sort(sortingFn)
+
+  const anchorRef = React.useRef<HTMLButtonElement>(null)
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <h1>With External Anchor</h1>
+      <p>
+        To use an external anchor, pass an `anchorRef` to `SelectPanel`. You would also need to control the `open` state
+        with `onSubmit` and `onCancel`
+      </p>
+
+      <Button
+        ref={anchorRef}
+        variant="primary"
+        onClick={() => setOpen(!open)}
+        aria-haspopup
+        aria-expanded={open ? true : undefined}
+      >
+        Assign label
+      </Button>
+
+      <SelectPanel
+        title="Select labels"
+        anchorRef={anchorRef}
+        open={open} // this needs to be set with the button
+        onSubmit={() => {
+          setOpen(false) // close on submit
+          onSubmit()
+        }}
+        onCancel={() => setOpen(false)} // close on cancel
+      >
+        <ActionList>
+          {itemsToShow.map(label => (
+            <ActionList.Item
+              key={label.id}
+              onSelect={() => onLabelSelect(label.id)}
+              selected={selectedLabelIds.includes(label.id)}
+            >
+              <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
+              {label.name}
+              <ActionList.Description variant="block">{label.description}</ActionList.Description>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}
diff --git a/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx
new file mode 100644
index 00000000000..a9d318eccc7
--- /dev/null
+++ b/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx
@@ -0,0 +1,135 @@
+import React from 'react'
+import {Meta, StoryFn} from '@storybook/react'
+import {SelectPanel, SelectPanelProps} from '../SelectPanel'
+import {ActionList, Box} from '../../../index'
+import data from './mock-data'
+
+export default {
+  title: 'Drafts/Components/SelectPanel/Playground',
+  component: SelectPanel,
+
+  args: {
+    title: 'Select labels',
+    selectionVariant: 'multiple',
+  },
+  argTypes: {
+    secondaryButtonText: {
+      name: 'Secondary button text',
+      type: 'string',
+    },
+  },
+} as Meta<typeof SelectPanel>
+
+export const Playground: StoryFn = args => {
+  const initialSelectedLabels = [data.issue.labelIds[0]] // mock initial state: has selected labels
+  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
+
+  /* Selection */
+  const onLabelSelect = (labelId: string) => {
+    if (args.selectionVariant === 'single' || args.selectionVariant === 'instant') {
+      setSelectedLabelIds([labelId])
+    } else {
+      if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
+      else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
+    }
+  }
+
+  const onClearSelection = () => {
+    setSelectedLabelIds([])
+    args.onClearSelection() // call storybook action
+  }
+
+  const onSubmit: SelectPanelProps['onSubmit'] = event => {
+    data.issue.labelIds = selectedLabelIds // pretending to persist changes
+    args.onSubmit(event) // call storybook action
+  }
+
+  const onCancel = () => args.onCancel() // call storybook action
+
+  /* Filtering */
+  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)
+  const [query, setQuery] = React.useState('')
+
+  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const query = event.currentTarget.value
+    setQuery(query)
+
+    if (query === '') setFilteredLabels(data.labels)
+    else {
+      // Note: in the future, we should probably add a highlight for matching text
+      setFilteredLabels(
+        data.labels
+          .map(label => {
+            if (label.name.toLowerCase().startsWith(query)) return {priority: 1, label}
+            else if (label.name.toLowerCase().includes(query)) return {priority: 2, label}
+            else if (label.description?.toLowerCase().includes(query)) return {priority: 3, label}
+            else return {priority: -1, label}
+          })
+          .filter(result => result.priority > 0)
+          .map(result => result.label),
+      )
+    }
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.labelIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
+
+  return (
+    <>
+      <SelectPanel
+        title={args.title}
+        description={args.description}
+        selectionVariant={args.selectionVariant}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        onClearSelection={onClearSelection}
+        width={args.width}
+        height={args.height}
+      >
+        <SelectPanel.Button>Assign label</SelectPanel.Button>
+
+        <SelectPanel.Header>
+          <SelectPanel.SearchInput onChange={onSearchInputChange} />
+        </SelectPanel.Header>
+
+        {itemsToShow.length === 0 ? (
+          <SelectPanel.Message variant="empty" title={`No labels found for "${query}"`}>
+            Try a different search term
+          </SelectPanel.Message>
+        ) : (
+          <ActionList>
+            {itemsToShow.map(label => (
+              <ActionList.Item
+                key={label.id}
+                onSelect={() => onLabelSelect(label.id)}
+                selected={selectedLabelIds.includes(label.id)}
+              >
+                <ActionList.LeadingVisual>
+                  <Box
+                    sx={{width: 14, height: 14, borderRadius: '100%'}}
+                    style={{backgroundColor: `#${label.color}`}}
+                  />
+                </ActionList.LeadingVisual>
+                {label.name}
+                <ActionList.Description variant="block">{label.description}</ActionList.Description>
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        )}
+
+        <SelectPanel.Footer>
+          {args.secondaryButtonText ? (
+            <SelectPanel.SecondaryButton>{args.secondaryButtonText}</SelectPanel.SecondaryButton>
+          ) : null}
+        </SelectPanel.Footer>
+      </SelectPanel>
+    </>
+  )
+}
diff --git a/src/drafts/SelectPanel2/mock-data.ts b/src/drafts/SelectPanel2/stories/mock-data.ts
similarity index 99%
rename from src/drafts/SelectPanel2/mock-data.ts
rename to src/drafts/SelectPanel2/stories/mock-data.ts
index 309be3bd23c..75f86fd3c77 100644
--- a/src/drafts/SelectPanel2/mock-data.ts
+++ b/src/drafts/SelectPanel2/stories/mock-data.ts
@@ -9,11 +9,13 @@ const data = {
       id: 'MDQ6VXNlcjQxNzI2OA==',
       name: 'Pavithra Kodmad',
       login: 'pksjce',
+      recommended: true,
     },
     {
       id: 'MDQ6VXNlcjE0NDY1MDM=',
       name: 'Armağan',
       login: 'broccolinisoup',
+      recommended: true,
     },
     {
       id: 'MDQ6VXNlcjE4NjM3NzE=',
@@ -29,6 +31,7 @@ const data = {
       id: 'MDQ6VXNlcjM5MDE3NjQ=',
       name: 'Josh Black',
       login: 'joshblack',
+      recommended: true,
     },
     {
       id: 'MDQ6VXNlcjE4NjYxMDMw',