@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.32ed6e21

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

@@ -0,0 +1,797 @@
+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, null, /*#__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, null, /*#__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, null, "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"
+  }, options.map((option, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
+    key: index,
+    selected: index === selectedIndex,
+    onSelect: () => setSelectedIndex(index)
+  }, /*#__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)"
+  }, visibleOptions.map(option => /*#__PURE__*/React.createElement(SortableItem, {
+    key: option.text,
+    option: option,
+    onSelect: () => toggle(option.text),
+    reorder: reorder
+  }))), /*#__PURE__*/React.createElement(ActionList.Group, {
+    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,
+    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,
+  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, {
+    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';