@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/lib-esm/stories/ActionList2.stories.js

@@ -1,811 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon, ArrowLeftIcon, LinkIcon, LawIcon, StarIcon, RepoForkedIcon, AlertIcon, TableIcon, PeopleIcon, CalendarIcon, IssueOpenedIcon, NumberIcon, XIcon, RepoIcon } from '@primer/octicons-react';
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Label, ThemeProvider } from '..';
-import { ActionList as _ActionList } from '../ActionList2';
-import { Header } from '../ActionList/Header';
-import BaseStyles from '../BaseStyles';
-import Avatar from '../Avatar';
-import { ButtonInvisible } from '../Button';
-import TextInput from '../TextInput';
-import Spinner from '../Spinner';
-import Box from '../Box';
-import { AnchoredOverlay } from '../AnchoredOverlay';
-const ActionList = Object.assign(_ActionList, {
-  Header
-});
-const meta = {
-  title: 'Composite components/ActionList2',
-  component: ActionList,
-  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-};
-export default meta;
-const ErsatzOverlay = styled.div.withConfig({
-  displayName: "ActionList2stories__ErsatzOverlay",
-  componentId: "f9cezu-0"
-})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
-  maxWidth
-}) => maxWidth || 'none');
-export function SimpleListStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Quote reply"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit comment"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, "Delete file")));
-}
-SimpleListStory.storyName = 'Simple List';
-export function WithIcon() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With Icon"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "github.com/primer"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LawIcon, null)), "MIT License"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "256 stars"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(RepoForkedIcon, null)), "3 forks"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(AlertIcon, null)), "4 vulnerabilities")));
-}
-WithIcon.storyName = 'With Icon';
-const users = [{
-  login: 'pksjce',
-  name: 'Pavithra Kodmad'
-}, {
-  login: 'jfuchs',
-  name: 'Jonathan Fuchs'
-}, {
-  login: 'colebemis',
-  name: 'Cole Bemis'
-}, {
-  login: 'mperrotti',
-  name: 'Mike Perrotti'
-}, {
-  login: 'dgreif',
-  name: 'Dusty Greif'
-}, {
-  login: 'smockle',
-  name: 'Clay Miller'
-}, {
-  login: 'siddharthkp',
-  name: 'Siddharth Kshetrapal'
-}];
-export function WithAvatar() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With Avatar"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, null, users.map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: user.login
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://github.com/${user.login}.png`
-  })), user.login)))));
-}
-WithAvatar.storyName = 'With Avatar';
-const labels = [{
-  name: 'blocked',
-  color: '#86181d',
-  description: 'Someone or something is preventing this from moving forward'
-}, {
-  name: 'dependencies',
-  color: '#0366d6',
-  description: 'Pull requests that update a dependency file'
-}, {
-  name: 'duplicate',
-  color: '#cfd3d7',
-  description: 'This issue or pull request already exists'
-}, {
-  name: 'good first issue',
-  color: '#7057ff',
-  description: 'Good for newcomers'
-}];
-
-const LabelColor = ({
-  color
-}) => /*#__PURE__*/React.createElement(Box, {
-  sx: {
-    backgroundColor: color,
-    width: '14px',
-    height: '14px',
-    borderRadius: 3
-  }
-});
-
-LabelColor.displayName = "LabelColor";
-export function WithDescription() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With Description & Dividers"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, users.map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: user.login
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://github.com/${user.login}.png`
-  })), user.login, /*#__PURE__*/React.createElement(ActionList.Description, null, user.name))), /*#__PURE__*/React.createElement(ActionList.Divider, null), labels.map((label, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LabelColor, {
-    color: label.color
-  })), label.name, /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, label.description))))));
-}
-WithDescription.storyName = 'With Description & Dividers';
-const projects = [{
-  name: 'Primer Backlog',
-  scope: 'GitHub'
-}, {
-  name: 'Accessibility',
-  scope: 'GitHub'
-}, {
-  name: 'Octicons',
-  scope: 'github/primer'
-}, {
-  name: 'Primer React',
-  scope: 'github/primer'
-}];
-export function SingleSelectListStory() {
-  const [selectedIndex, setSelectedIndex] = React.useState(1);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "single",
-    showDividers: true,
-    role: "listbox",
-    "aria-label": "Select a project"
-  }, projects.map((project, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index,
-    role: "option",
-    selected: index === selectedIndex,
-    onSelect: () => setSelectedIndex(index)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TableIcon, null)), project.name, /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, project.scope))))));
-}
-SingleSelectListStory.storyName = 'Single Select';
-export function MultiSelectListStory() {
-  const [assignees, setAssignees] = React.useState(users.slice(0, 2));
-
-  const toggleAssignee = assignee => {
-    const assigneeIndex = assignees.findIndex(a => a.login === assignee.login);
-    if (assigneeIndex === -1) setAssignees([...assignees, assignee]);else setAssignees(assignees.filter((_, index) => index !== assigneeIndex));
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple",
-    showDividers: true,
-    role: "listbox",
-    "aria-label": "Select assignees"
-  }, users.map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    role: "option",
-    key: user.login,
-    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
-    onSelect: () => toggleAssignee(user)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://github.com/${user.login}.png`
-  })), user.login, /*#__PURE__*/React.createElement(ActionList.Description, null, user.name))))));
-}
-MultiSelectListStory.storyName = 'Multi Select';
-export function DisabledStory() {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Disabled Items"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "single",
-    showDividers: true,
-    role: "listbox",
-    "aria-label": "Select a project"
-  }, projects.map((project, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index,
-    role: "option",
-    selected: index === selectedIndex,
-    onSelect: () => setSelectedIndex(index),
-    disabled: index === 1
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TableIcon, null)), project.name, /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, project.scope))))));
-}
-DisabledStory.storyName = 'Disabled Items';
-export function GroupsStory() {
-  const [assignees, setAssignees] = React.useState(users.slice(0, 1));
-
-  const toggleAssignee = assignee => {
-    const assigneeIndex = assignees.findIndex(a => a.login === assignee.login);
-    if (assigneeIndex === -1) setAssignees([...assignees, assignee]);else setAssignees(assignees.filter((_, index) => index !== assigneeIndex));
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Groups"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple",
-    showDividers: true,
-    "aria-label": "Select reviewers"
-  }, /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Suggestions",
-    variant: "filled",
-    role: "listbox"
-  }, users.slice(0, 2).map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: user.login,
-    role: "option",
-    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
-    onSelect: () => toggleAssignee(user)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://github.com/${user.login}.png`
-  })), user.login, /*#__PURE__*/React.createElement(ActionList.Description, null, user.name), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Recently edited these files")))), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Everyone",
-    variant: "filled",
-    role: "listbox"
-  }, users.slice(2).map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    role: "option",
-    key: user.login,
-    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
-    onSelect: () => toggleAssignee(user)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://github.com/${user.login}.png`
-  })), user.login, /*#__PURE__*/React.createElement(ActionList.Description, null, user.name)))))));
-}
-GroupsStory.storyName = 'Groups';
-export function ActionsStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ServerIcon, null)), "Open current Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PlusCircleIcon, null)), "Create new Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Create a brand new Codespace with a fresh image and checkout this branch.")))));
-}
-ActionsStory.storyName = 'Actions';
-export function ComplexListInsetVariantStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Inset Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TypographyIcon, null)), "Rename"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(VersionsIcon, null)), "Duplicate", /*#__PURE__*/React.createElement(ActionList.Description, null, "Create a copy")), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Live query",
-    variant: "filled"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      color: 'rebeccapurple'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(SearchIcon, null)), "repo:github/memex,github/github")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Layout",
-    variant: "subtle"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(NoteIcon, null)), "Table", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Information-dense table optimized for operations across teams")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    role: "listitem"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ProjectIcon, null)), "Board", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Kanban-style board focused on visual states"))), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(FilterIcon, null)), "Save sort and filters to current view"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(FilterIcon, null)), "Save sort and filters to new view")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
-    sx: {
-      backgroundColor: 'accent.emphasis'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    sx: {
-      color: 'white'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, {
-    sx: {
-      color: 'white'
-    }
-  }, /*#__PURE__*/React.createElement(GearIcon, null)), "View settings")))));
-}
-ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
-export function ComplexListFullVariantStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Full Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    variant: "full"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TypographyIcon, null)), "Rename"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(VersionsIcon, null)), "Duplicate", /*#__PURE__*/React.createElement(ActionList.Description, null, "Create a copy")), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Live query",
-    variant: "filled"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      color: 'rebeccapurple'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(SearchIcon, null)), "repo:github/memex,github/github")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Layout",
-    variant: "subtle"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(NoteIcon, null)), "Table", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Information-dense table optimized for operations across teams")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ProjectIcon, null)), "Board", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Kanban-style board focused on visual states"))), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(FilterIcon, null)), "Save sort and filters to current view"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    style: {
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(FilterIcon, null)), "Save sort and filters to new view")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
-    sx: {
-      backgroundColor: 'accent.emphasis'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    sx: {
-      color: 'white'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, {
-    sx: {
-      color: 'white'
-    }
-  }, /*#__PURE__*/React.createElement(GearIcon, null)), "View settings")))));
-}
-ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
-const ReactRouterLikeLink = /*#__PURE__*/forwardRef(({
-  to,
-  ...props
-}, ref) => {
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  return /*#__PURE__*/React.createElement("a", _extends({
-    ref: ref,
-    href: to
-  }, props));
-});
-const NextJSLikeLink = /*#__PURE__*/forwardRef(({
-  href,
-  children
-}, ref) => {
-  const child = React.Children.only(children);
-  const childProps = {
-    ref,
-    href
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, childProps) : null);
-});
-export function LinkItemStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List with LinkItem"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(XIcon, null)), "not a link, just an Item for comparison"), /*#__PURE__*/React.createElement(ActionList.LinkItem, {
-    href: "https://github.com/primer"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "ActionList.LinkItem"), /*#__PURE__*/React.createElement(ActionList.LinkItem, {
-    href: "https://github.com/primer",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "ActionList.LinkItem with anchor attributes"), /*#__PURE__*/React.createElement(ActionList.LinkItem, {
-    as: ReactRouterLikeLink,
-    to: "?path=/story/composite-components-actionlist2--simple-list-story"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "as ReactRouterLink"), /*#__PURE__*/React.createElement(NextJSLikeLink, {
-    href: "?path=/story/composite-components-actionlist2--simple-list-story"
-  }, /*#__PURE__*/React.createElement(ActionList.LinkItem, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "NextJS style Link")), /*#__PURE__*/React.createElement(ActionList.LinkItem, {
-    href: "?path=/story/composite-components-actionlist2--simple-list-story"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LinkIcon, null)), "ActionList.LinkItem with everything", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318 + L")))));
-}
-LinkItemStory.storyName = 'List with LinkItem';
-export function DOMPropsStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    id: "something",
-    onClick: event => alert(`Id is '${event.target.id}'`)
-  }, "Has an id"))));
-}
-DOMPropsStory.storyName = 'List an item input including DOM props';
-export function CustomItemChildren() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowRightIcon, null)), /*#__PURE__*/React.createElement(Label, {
-    outline: true,
-    borderColor: "success.emphasis"
-  }, "Choose this one"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))))));
-}
-CustomItemChildren.storyName = 'Custom Item Children';
-export function SizeStressTestingStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/React.createElement(ErsatzOverlay, {
-    maxWidth: "300px"
-  }, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowRightIcon, null)), "Block Description. Long text should wrap", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "This description is long, but it is block so it wraps"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowRightIcon, null)), "Inline Description", /*#__PURE__*/React.createElement(ActionList.Description, null, "This description gets truncated because it is inline"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowRightIcon, null)), "Really long text without a description should wrap so it wraps", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))))));
-}
-SizeStressTestingStory.storyName = 'Size Stress Testing';
-export function AllCombinations() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "All Possible Combinations"), /*#__PURE__*/React.createElement("code", null, "dynamic features: L = Leading Visual, I = Inline Description, B = Block Description, T = Trailing Visual"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, "16 possible combinations"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ErsatzOverlay, {
-    maxWidth: "300px"
-  }, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "The everything bagel", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, "none of them, only text"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "only L"), /*#__PURE__*/React.createElement(ActionList.Item, null, "only I", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description")), /*#__PURE__*/React.createElement(ActionList.Item, null, "only B", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description")), /*#__PURE__*/React.createElement(ActionList.Item, null, "only T", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + I", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + B", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + T", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, "I + B", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description")), /*#__PURE__*/React.createElement(ActionList.Item, null, "I + T", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, "B + T", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + I + B", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + I + T", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null)), "L + B + T", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))), /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, "I + B + T", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "inline"
-  }, "inline description"), /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Block description"), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(StarIcon, null))))));
-}
-AllCombinations.storyName = 'All Combinations';
-const teams = [{
-  id: '5025661',
-  type: 'team',
-  slug: 'github/primer-reviewers',
-  name: 'Primer Reviewers',
-  members: 20
-}, {
-  id: '1929972',
-  type: 'team',
-  slug: 'github/design-infrastructure',
-  name: 'Design Infrastructure',
-  members: 20
-}];
-export function ConditionalChildren() {
-  const potentialReviewers = [...teams, ...users];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Conditional Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, potentialReviewers.map((reviewer, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, reviewer.type === 'team' ? /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://avatars.githubusercontent.com/t/${reviewer.id}`
-  }) : /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://avatars.githubusercontent.com/${reviewer.login}`
-  })), reviewer.login || reviewer.slug, reviewer.type === 'team' ? /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, reviewer.name) : /*#__PURE__*/React.createElement(ActionList.Description, null, reviewer.name), reviewer.type === 'team' && /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/React.createElement(PeopleIcon, null), reviewer.members))))));
-}
-ConditionalChildren.storyName = 'Conditional Children';
-export function NestedChildren() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Nested Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("ul", {
-    id: "i like extra lists",
-    style: {
-      paddingInlineStart: 0
-    }
-  }, users.map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: user.login
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://avatars.githubusercontent.com/${user.login}`
-  })), user.login, /*#__PURE__*/React.createElement(ReviewerDescription, {
-    user: user
-  }))))))));
-}
-NestedChildren.storyName = 'Nested Children';
-
-const ReviewerDescription = ({
-  user
-}) => {
-  const usersRecentlyEditedFile = users.slice(0, 2);
-
-  if (usersRecentlyEditedFile.find(u => u.login === user.login)) {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ActionList.Description, null, user.name), /*#__PURE__*/React.createElement(ActionList.Description, {
-      variant: "block"
-    }, "Recently edited this file"));
-  } else {
-    return /*#__PURE__*/React.createElement(ActionList.Description, null, user.name);
-  }
-};
-
-export function ChildWithInternalState() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Child with internal state - broken"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    showDividers: true
-  }, users.map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: user.login
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://avatars.githubusercontent.com/${user.login}`
-  })), user.login, /*#__PURE__*/React.createElement(StatefulChild, null, user.name))))));
-}
-ChildWithInternalState.storyName = 'Child with internal state';
-
-const StatefulChild = props => {
-  const [nameVisible, setNameVisibility] = React.useState(false);
-
-  const toggle = () => {
-    setNameVisibility(!nameVisible);
-  };
-  /** once description is registered, it cannot be unregistered, only updated. */
-
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonInvisible, {
-    onClick: toggle,
-    sx: {
-      fontSize: 0,
-      paddingY: 0
-    }
-  }, nameVisible ? 'Hide name' : 'Show name'), nameVisible && /*#__PURE__*/React.createElement(ActionList.Description, null, props.children));
-};
-
-export function ChildWithSideEffects() {
-  const user = users[0];
-  const [selected, setSelected] = React.useState(true);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Child with side effects"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple",
-    role: "listbox",
-    "aria-label": "Select assignees"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    selected: selected,
-    onSelect: () => setSelected(!selected),
-    role: "option"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(Avatar, {
-    src: `https://avatars.githubusercontent.com/${user.login}`
-  })), user.login, /*#__PURE__*/React.createElement(SideEffectDescription, null)))));
-}
-ChildWithSideEffects.storyName = 'Child with side effects';
-
-const SideEffectDescription = () => {
-  const [seconds, setSeconds] = React.useState(0);
-  React.useEffect(() => {
-    const fn = () => setSeconds(s => s + 1);
-
-    const interval = window.setInterval(fn, 1000);
-    return () => window.clearInterval(interval);
-  }, []);
-  return /*#__PURE__*/React.createElement(ActionList.Description, null, seconds, " seconds passed");
-};
-
-SideEffectDescription.displayName = "SideEffectDescription";
-export function WithSx() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "With sx prop"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
-    sx: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.Item, {
-    sx: {
-      backgroundColor: 'accent.subtle'
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, {
-    sx: {
-      color: 'accent.emphasis'
-    }
-  }, /*#__PURE__*/React.createElement(LinkIcon, null)), "github.com/primer", /*#__PURE__*/React.createElement(ActionList.Description, {
-    sx: {
-      paddingLeft: 4,
-      color: 'accent.emphasis'
-    }
-  }, "all items support sx prop")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(LawIcon, null)), "MIT License"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger",
-    sx: {
-      borderLeft: '2px solid',
-      borderColor: 'danger.emphasis',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(AlertIcon, null)), "4 vulnerabilities"))));
-}
-WithSx.storyName = 'With sx';
-export function MemexGroupBy() {
-  const [selectedIndex, setSelectedIndex] = React.useState(1);
-  const options = [{
-    text: 'Status',
-    icon: /*#__PURE__*/React.createElement(IssueOpenedIcon, null)
-  }, {
-    text: 'Stage',
-    icon: /*#__PURE__*/React.createElement(TableIcon, null)
-  }, {
-    text: 'Assignee',
-    icon: /*#__PURE__*/React.createElement(PeopleIcon, null)
-  }, {
-    text: 'Team',
-    icon: /*#__PURE__*/React.createElement(TypographyIcon, null)
-  }, {
-    text: 'Estimate',
-    icon: /*#__PURE__*/React.createElement(NumberIcon, null)
-  }, {
-    text: 'Due Date',
-    icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
-  }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex GroupBy List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Group by",
-    selectionVariant: "single",
-    role: "listbox"
-  }, options.map((option, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index,
-    selected: index === selectedIndex,
-    onSelect: () => setSelectedIndex(index),
-    role: "option"
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, option.icon), option.text))), typeof selectedIndex === 'number' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => setSelectedIndex(null)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(XIcon, null)), "Clear Group by")))));
-}
-MemexGroupBy.storyName = 'Memex GroupBy List';
-export function MemexSortable() {
-  const [options, setOptions] = React.useState([{
-    text: 'Status',
-    icon: /*#__PURE__*/React.createElement(IssueOpenedIcon, null),
-    selected: true
-  }, {
-    text: 'Stage',
-    icon: /*#__PURE__*/React.createElement(TableIcon, null),
-    selected: true
-  }, {
-    text: 'Assignee',
-    icon: /*#__PURE__*/React.createElement(PeopleIcon, null),
-    selected: true
-  }, {
-    text: 'Team',
-    icon: /*#__PURE__*/React.createElement(TypographyIcon, null),
-    selected: true
-  }, {
-    text: 'Estimate',
-    icon: /*#__PURE__*/React.createElement(NumberIcon, null),
-    selected: false
-  }, {
-    text: 'Due Date',
-    icon: /*#__PURE__*/React.createElement(CalendarIcon, null),
-    selected: false
-  }]);
-
-  const toggle = text => {
-    setOptions(options.map(option => {
-      if (option.text === text) option.selected = !option.selected;
-      return option;
-    }));
-  };
-
-  const reorder = ({
-    optionToMove,
-    moveAfterOption
-  }) => {
-    setOptions(currentOptions => {
-      const newOptions = [...currentOptions]; // remove option to move
-
-      const currentPosition = newOptions.findIndex(o => o.text === optionToMove.text);
-      newOptions.splice(currentPosition, 1); // add it after the provided element
-
-      const newPosition = newOptions.findIndex(o => o.text === moveAfterOption.text) + 1;
-      newOptions.splice(newPosition, 0, optionToMove);
-      return newOptions;
-    });
-  };
-
-  const visibleOptions = options.filter(option => option.selected);
-  const hiddenOptions = options.filter(option => !option.selected);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex Sortable List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple"
-  }, /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Visible fields (can be reordered)",
-    role: "listbox"
-  }, visibleOptions.map(option => /*#__PURE__*/React.createElement(SortableItem, {
-    key: option.text,
-    role: "option",
-    option: option,
-    onSelect: () => toggle(option.text),
-    reorder: reorder
-  }))), /*#__PURE__*/React.createElement(ActionList.Group, {
-    role: "listbox",
-    title: "Hidden fields",
-    selectionVariant:
-    /** selectionVariant override on Group: disable selection if there are no options */
-    hiddenOptions.length ? 'multiple' : false
-  }, hiddenOptions.map((option, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index,
-    role: "option",
-    selected: option.selected,
-    onSelect: () => toggle(option.text)
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, option.icon), option.text)), hiddenOptions.length === 0 && /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, "No hidden fields"))))));
-}
-MemexSortable.storyName = 'Memex Sortable List';
-
-const SortableItem = ({
-  option,
-  role,
-  onSelect,
-  reorder
-}) => {
-  const [{
-    isDragging
-  }, dragRef] = useDrag(() => ({
-    type: 'ITEM',
-    item: option,
-    collect: monitor => {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    }
-  }));
-  const [{
-    isOver
-  }, dropRef] = useDrop(() => ({
-    accept: 'ITEM',
-    collect: monitor => {
-      return {
-        isOver: monitor.isOver()
-      };
-    },
-    drop: optionDropped => {
-      reorder({
-        optionToMove: optionDropped,
-        moveAfterOption: option
-      });
-    }
-  }));
-  return /*#__PURE__*/React.createElement(ActionList.Item, {
-    role: role,
-    ref: element => dragRef(element) && dropRef(element) // merge refs
-    ,
-    selected: option.selected,
-    onSelect: onSelect,
-    sx: {
-      opacity: isDragging ? 0.5 : 1,
-      boxShadow: isOver ? theme => `0px 2px 0 0px ${theme.colors.accent.emphasis}` : undefined,
-      borderRadius: isOver ? 0 : 2
-    }
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, option.icon), option.text);
-};
-
-SortableItem.displayName = "SortableItem";
-const repos = ['primer/primer-markdown', 'primer/octicons', 'primer/css', 'primer/primer-layout', 'primer/primer-alerts', 'primer/primer-avatars', 'primer/react', 'primer/primitives'];
-export function AsyncListStory() {
-  const [results, setResults] = React.useState(repos.slice(0, 6));
-  const [loading, setLoading] = React.useState(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  const filter = async event => {
-    setLoading(true);
-    const filteredResults = await filterSlowly(event.target.value);
-    setResults(filteredResults);
-    setLoading(false);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Async List Items"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(TextInput, {
-    onChange: filter,
-    placeholder: "Search repositories, showing 6 by default",
-    sx: {
-      m: 2,
-      mb: 0,
-      width: 'calc(100% - 16px)'
-    }
-  }), /*#__PURE__*/React.createElement(ActionList, {
-    sx: {
-      height: 208,
-      overflow: 'auto'
-    }
-  }, loading ? /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'center',
-      pt: 2
-    }
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : results.map(name => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: name
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(RepoIcon, null)), name)))));
-}
-AsyncListStory.storyName = 'Async List Options';
-
-const filterSlowly = async query => {
-  // sleep for 1s before returning results
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  return await repos.filter(name => name.includes(query));
-};
-
-export function InsideOverlay() {
-  const [open, setOpen] = React.useState(false);
-
-  const toggle = () => setOpen(!open);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Inside Overlay"), /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    open: open,
-    onOpen: toggle,
-    onClose: toggle,
-    renderAnchor: props => /*#__PURE__*/React.createElement("button", props, "toggle overlay")
-  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Use your arrow keys", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/React.createElement(ActionList.Item, null, "keep going", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/React.createElement(ActionList.Item, null, "more more", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, "now go up!", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2191")))));
-}
-InsideOverlay.storyName = 'Inside Overlay';