@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/lib/stories/ActionList2.stories.js

@@ -0,0 +1,923 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleListStory = SimpleListStory;
+exports.WithIcon = WithIcon;
+exports.WithAvatar = WithAvatar;
+exports.WithDescription = WithDescription;
+exports.SingleSelectListStory = SingleSelectListStory;
+exports.MultiSelectListStory = MultiSelectListStory;
+exports.DisabledStory = DisabledStory;
+exports.GroupsStory = GroupsStory;
+exports.ActionsStory = ActionsStory;
+exports.ComplexListInsetVariantStory = ComplexListInsetVariantStory;
+exports.ComplexListFullVariantStory = ComplexListFullVariantStory;
+exports.LinkItemStory = LinkItemStory;
+exports.DOMPropsStory = DOMPropsStory;
+exports.CustomItemChildren = CustomItemChildren;
+exports.SizeStressTestingStory = SizeStressTestingStory;
+exports.AllCombinations = AllCombinations;
+exports.ConditionalChildren = ConditionalChildren;
+exports.NestedChildren = NestedChildren;
+exports.ChildWithInternalState = ChildWithInternalState;
+exports.ChildWithSideEffects = ChildWithSideEffects;
+exports.WithSx = WithSx;
+exports.MemexGroupBy = MemexGroupBy;
+exports.MemexSortable = MemexSortable;
+exports.AsyncListStory = AsyncListStory;
+exports.InsideOverlay = InsideOverlay;
+exports.default = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+
+var _2 = require("..");
+
+var _ActionList2 = require("../ActionList2");
+
+var _Header = require("../ActionList/Header");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _Button = require("../Button");
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const ActionList = Object.assign(_ActionList2.ActionList, {
+  Header: _Header.Header
+});
+const meta = {
+  title: 'Composite components/ActionList2',
+  component: ActionList,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_2.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+const ErsatzOverlay = _styledComponents.default.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');
+
+function SimpleListStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "Quote reply"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "Edit comment"), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")));
+}
+
+SimpleListStory.storyName = 'Simple List';
+
+function WithIcon() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "With Icon"), /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "github.com/primer"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LawIcon, null)), "MIT License"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "256 stars"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.RepoForkedIcon, null)), "3 forks"), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    variant: "danger"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.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'
+}];
+
+function WithAvatar() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "With Avatar"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, null, users.map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: user.login
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    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.default.createElement(_Box.default, {
+  sx: {
+    backgroundColor: color,
+    width: '14px',
+    height: '14px',
+    borderRadius: 3
+  }
+});
+
+LabelColor.displayName = "LabelColor";
+
+function WithDescription() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "With Description & Dividers"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, users.map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: user.login
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://github.com/${user.login}.png`
+  })), user.login, /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name))), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), labels.map((label, index) => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(LabelColor, {
+    color: label.color
+  })), label.name, /*#__PURE__*/_react.default.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'
+}];
+
+function SingleSelectListStory() {
+  const [selectedIndex, setSelectedIndex] = _react.default.useState(1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "single",
+    showDividers: true,
+    role: "listbox",
+    "aria-label": "Select a project"
+  }, projects.map((project, index) => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: index,
+    role: "option",
+    selected: index === selectedIndex,
+    onSelect: () => setSelectedIndex(index)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TableIcon, null)), project.name, /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, project.scope))))));
+}
+
+SingleSelectListStory.storyName = 'Single Select';
+
+function MultiSelectListStory() {
+  const [assignees, setAssignees] = _react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Multi Select List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "multiple",
+    showDividers: true,
+    role: "listbox",
+    "aria-label": "Select assignees"
+  }, users.map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    role: "option",
+    key: user.login,
+    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
+    onSelect: () => toggleAssignee(user)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://github.com/${user.login}.png`
+  })), user.login, /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name))))));
+}
+
+MultiSelectListStory.storyName = 'Multi Select';
+
+function DisabledStory() {
+  const [selectedIndex, setSelectedIndex] = _react.default.useState(0);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Disabled Items"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "single",
+    showDividers: true,
+    role: "listbox",
+    "aria-label": "Select a project"
+  }, projects.map((project, index) => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: index,
+    role: "option",
+    selected: index === selectedIndex,
+    onSelect: () => setSelectedIndex(index),
+    disabled: index === 1
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TableIcon, null)), project.name, /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, project.scope))))));
+}
+
+DisabledStory.storyName = 'Disabled Items';
+
+function GroupsStory() {
+  const [assignees, setAssignees] = _react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Groups"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "multiple",
+    showDividers: true,
+    "aria-label": "Select reviewers"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Suggestions",
+    variant: "filled",
+    role: "listbox"
+  }, users.slice(0, 2).map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: user.login,
+    role: "option",
+    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
+    onSelect: () => toggleAssignee(user)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://github.com/${user.login}.png`
+  })), user.login, /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Recently edited these files")))), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Everyone",
+    variant: "filled",
+    role: "listbox"
+  }, users.slice(2).map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    role: "option",
+    key: user.login,
+    selected: Boolean(assignees.find(assignee => assignee.login === user.login)),
+    onSelect: () => toggleAssignee(user)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://github.com/${user.login}.png`
+  })), user.login, /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name)))))));
+}
+
+GroupsStory.storyName = 'Groups';
+
+function ActionsStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Actions"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ServerIcon, null)), "Open current Codespace", /*#__PURE__*/_react.default.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.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.PlusCircleIcon, null)), "Create new Codespace", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Create a brand new Codespace with a fresh image and checkout this branch.")))));
+}
+
+ActionsStory.storyName = 'Actions';
+
+function ComplexListInsetVariantStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Inset Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TypographyIcon, null)), "Rename"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.VersionsIcon, null)), "Duplicate", /*#__PURE__*/_react.default.createElement(ActionList.Description, null, "Create a copy")), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Live query",
+    variant: "filled"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      color: 'rebeccapurple'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.SearchIcon, null)), "repo:github/memex,github/github")), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Layout",
+    variant: "subtle"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.NoteIcon, null)), "Table", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Information-dense table optimized for operations across teams")), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    role: "listitem"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ProjectIcon, null)), "Board", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Kanban-style board focused on visual states"))), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.FilterIcon, null)), "Save sort and filters to current view"), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.FilterIcon, null)), "Save sort and filters to new view")), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    sx: {
+      backgroundColor: 'accent.emphasis'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    sx: {
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, {
+    sx: {
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_octiconsReact.GearIcon, null)), "View settings")))));
+}
+
+ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
+
+function ComplexListFullVariantStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Complex List"), /*#__PURE__*/_react.default.createElement("h2", null, "Full Variant"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    variant: "full"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TypographyIcon, null)), "Rename"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.VersionsIcon, null)), "Duplicate", /*#__PURE__*/_react.default.createElement(ActionList.Description, null, "Create a copy")), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Live query",
+    variant: "filled"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      color: 'rebeccapurple'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.SearchIcon, null)), "repo:github/memex,github/github")), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Layout",
+    variant: "subtle"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.NoteIcon, null)), "Table", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Information-dense table optimized for operations across teams")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ProjectIcon, null)), "Board", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Kanban-style board focused on visual states"))), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.FilterIcon, null)), "Save sort and filters to current view"), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.FilterIcon, null)), "Save sort and filters to new view")), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    sx: {
+      backgroundColor: 'accent.emphasis'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    sx: {
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, {
+    sx: {
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_octiconsReact.GearIcon, null)), "View settings")))));
+}
+
+ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
+const ReactRouterLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
+  to,
+  ...props
+}, ref) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return /*#__PURE__*/_react.default.createElement("a", _extends({
+    ref: ref,
+    href: to
+  }, props));
+});
+const NextJSLikeLink = /*#__PURE__*/(0, _react.forwardRef)(({
+  href,
+  children
+}, ref) => {
+  const child = _react.default.Children.only(children);
+
+  const childProps = {
+    ref,
+    href
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, childProps) : null);
+});
+
+function LinkItemStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "List with LinkItem"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, null)), "not a link, just an Item for comparison"), /*#__PURE__*/_react.default.createElement(ActionList.LinkItem, {
+    href: "https://github.com/primer"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "ActionList.LinkItem"), /*#__PURE__*/_react.default.createElement(ActionList.LinkItem, {
+    href: "https://github.com/primer",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "ActionList.LinkItem with anchor attributes"), /*#__PURE__*/_react.default.createElement(ActionList.LinkItem, {
+    as: ReactRouterLikeLink,
+    to: "?path=/story/composite-components-actionlist2--simple-list-story"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "as ReactRouterLink"), /*#__PURE__*/_react.default.createElement(NextJSLikeLink, {
+    href: "?path=/story/composite-components-actionlist2--simple-list-story"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LinkItem, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "NextJS style Link")), /*#__PURE__*/_react.default.createElement(ActionList.LinkItem, {
+    href: "?path=/story/composite-components-actionlist2--simple-list-story"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "ActionList.LinkItem with everything", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, "\u2318 + L")))));
+}
+
+LinkItemStory.storyName = 'List with LinkItem';
+
+function DOMPropsStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Simple List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.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';
+
+function CustomItemChildren() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null)), /*#__PURE__*/_react.default.createElement(_2.Label, {
+    outline: true,
+    borderColor: "success.emphasis"
+  }, "Choose this one"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowLeftIcon, null))))));
+}
+
+CustomItemChildren.storyName = 'Custom Item Children';
+
+function SizeStressTestingStory() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null)), "Block Description. Long text should wrap", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "This description is long, but it is block so it wraps"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowLeftIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null)), "Inline Description", /*#__PURE__*/_react.default.createElement(ActionList.Description, null, "This description gets truncated because it is inline"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowLeftIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null)), "Really long text without a description should wrap so it wraps", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowLeftIcon, null))))));
+}
+
+SizeStressTestingStory.storyName = 'Size Stress Testing';
+
+function AllCombinations() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "All Possible Combinations"), /*#__PURE__*/_react.default.createElement("code", null, "dynamic features: L = Leading Visual, I = Inline Description, B = Block Description, T = Trailing Visual"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("code", null, "16 possible combinations"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "The everything bagel", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "none of them, only text"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "only L"), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "only I", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "only B", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "only T", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + I", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + B", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + T", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "I + B", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "I + T", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "B + T", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + I + B", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description")), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    disabled: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + I + T", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    disabled: true
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null)), "L + B + T", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.StarIcon, null))), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    disabled: true
+  }, "I + B + T", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "inline"
+  }, "inline description"), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Block description"), /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.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
+}];
+
+function ConditionalChildren() {
+  const potentialReviewers = [...teams, ...users];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Conditional Children"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, potentialReviewers.map((reviewer, index) => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, reviewer.type === 'team' ? /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://avatars.githubusercontent.com/t/${reviewer.id}`
+  }) : /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://avatars.githubusercontent.com/${reviewer.login}`
+  })), reviewer.login || reviewer.slug, reviewer.type === 'team' ? /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    variant: "block"
+  }, reviewer.name) : /*#__PURE__*/_react.default.createElement(ActionList.Description, null, reviewer.name), reviewer.type === 'team' && /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.PeopleIcon, null), reviewer.members))))));
+}
+
+ConditionalChildren.storyName = 'Conditional Children';
+
+function NestedChildren() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Nested Children"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("ul", {
+    id: "i like extra lists",
+    style: {
+      paddingInlineStart: 0
+    }
+  }, users.map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: user.login
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://avatars.githubusercontent.com/${user.login}`
+  })), user.login, /*#__PURE__*/_react.default.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.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name), /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+      variant: "block"
+    }, "Recently edited this file"));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(ActionList.Description, null, user.name);
+  }
+};
+
+function ChildWithInternalState() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Child with internal state - broken"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    showDividers: true
+  }, users.map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: user.login
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://avatars.githubusercontent.com/${user.login}`
+  })), user.login, /*#__PURE__*/_react.default.createElement(StatefulChild, null, user.name))))));
+}
+
+ChildWithInternalState.storyName = 'Child with internal state';
+
+const StatefulChild = props => {
+  const [nameVisible, setNameVisibility] = _react.default.useState(false);
+
+  const toggle = () => {
+    setNameVisibility(!nameVisible);
+  };
+  /** once description is registered, it cannot be unregistered, only updated. */
+
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, {
+    onClick: toggle,
+    sx: {
+      fontSize: 0,
+      paddingY: 0
+    }
+  }, nameVisible ? 'Hide name' : 'Show name'), nameVisible && /*#__PURE__*/_react.default.createElement(ActionList.Description, null, props.children));
+};
+
+function ChildWithSideEffects() {
+  const user = users[0];
+
+  const [selected, setSelected] = _react.default.useState(true);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Child with side effects"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "multiple",
+    role: "listbox",
+    "aria-label": "Select assignees"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    selected: selected,
+    onSelect: () => setSelected(!selected),
+    role: "option"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    src: `https://avatars.githubusercontent.com/${user.login}`
+  })), user.login, /*#__PURE__*/_react.default.createElement(SideEffectDescription, null)))));
+}
+
+ChildWithSideEffects.storyName = 'Child with side effects';
+
+const SideEffectDescription = () => {
+  const [seconds, setSeconds] = _react.default.useState(0);
+
+  _react.default.useEffect(() => {
+    const fn = () => setSeconds(s => s + 1);
+
+    const interval = window.setInterval(fn, 1000);
+    return () => window.clearInterval(interval);
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement(ActionList.Description, null, seconds, " seconds passed");
+};
+
+SideEffectDescription.displayName = "SideEffectDescription";
+
+function WithSx() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "With sx prop"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
+    sx: {
+      paddingTop: 4
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    sx: {
+      backgroundColor: 'accent.subtle'
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, {
+    sx: {
+      color: 'accent.emphasis'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_octiconsReact.LinkIcon, null)), "github.com/primer", /*#__PURE__*/_react.default.createElement(ActionList.Description, {
+    sx: {
+      paddingLeft: 4,
+      color: 'accent.emphasis'
+    }
+  }, "all items support sx prop")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.LawIcon, null)), "MIT License"), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    variant: "danger",
+    sx: {
+      borderLeft: '2px solid',
+      borderColor: 'danger.emphasis',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.AlertIcon, null)), "4 vulnerabilities"))));
+}
+
+WithSx.storyName = 'With sx';
+
+function MemexGroupBy() {
+  const [selectedIndex, setSelectedIndex] = _react.default.useState(1);
+
+  const options = [{
+    text: 'Status',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.IssueOpenedIcon, null)
+  }, {
+    text: 'Stage',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.TableIcon, null)
+  }, {
+    text: 'Assignee',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.PeopleIcon, null)
+  }, {
+    text: 'Team',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.TypographyIcon, null)
+  }, {
+    text: 'Estimate',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.NumberIcon, null)
+  }, {
+    text: 'Due Date',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.CalendarIcon, null)
+  }];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Memex GroupBy List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Group by",
+    selectionVariant: "single",
+    role: "listbox"
+  }, options.map((option, index) => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: index,
+    selected: index === selectedIndex,
+    onSelect: () => setSelectedIndex(index),
+    role: "option"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, option.icon), option.text))), typeof selectedIndex === 'number' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    onSelect: () => setSelectedIndex(null)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, null)), "Clear Group by")))));
+}
+
+MemexGroupBy.storyName = 'Memex GroupBy List';
+
+function MemexSortable() {
+  const [options, setOptions] = _react.default.useState([{
+    text: 'Status',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.IssueOpenedIcon, null),
+    selected: true
+  }, {
+    text: 'Stage',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.TableIcon, null),
+    selected: true
+  }, {
+    text: 'Assignee',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.PeopleIcon, null),
+    selected: true
+  }, {
+    text: 'Team',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.TypographyIcon, null),
+    selected: true
+  }, {
+    text: 'Estimate',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.NumberIcon, null),
+    selected: false
+  }, {
+    text: 'Due Date',
+    icon: /*#__PURE__*/_react.default.createElement(_octiconsReact.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Memex Sortable List"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/_react.default.createElement(ActionList, {
+    selectionVariant: "multiple"
+  }, /*#__PURE__*/_react.default.createElement(ActionList.Group, {
+    title: "Visible fields (can be reordered)",
+    role: "listbox"
+  }, visibleOptions.map(option => /*#__PURE__*/_react.default.createElement(SortableItem, {
+    key: option.text,
+    role: "option",
+    option: option,
+    onSelect: () => toggle(option.text),
+    reorder: reorder
+  }))), /*#__PURE__*/_react.default.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.default.createElement(ActionList.Item, {
+    key: index,
+    role: "option",
+    selected: option.selected,
+    onSelect: () => toggle(option.text)
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, option.icon), option.text)), hiddenOptions.length === 0 && /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    disabled: true
+  }, "No hidden fields"))))));
+}
+
+MemexSortable.storyName = 'Memex Sortable List';
+
+const SortableItem = ({
+  option,
+  role,
+  onSelect,
+  reorder
+}) => {
+  const [{
+    isDragging
+  }, dragRef] = (0, _reactDnd.useDrag)(() => ({
+    type: 'ITEM',
+    item: option,
+    collect: monitor => {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    }
+  }));
+  const [{
+    isOver
+  }, dropRef] = (0, _reactDnd.useDrop)(() => ({
+    accept: 'ITEM',
+    collect: monitor => {
+      return {
+        isOver: monitor.isOver()
+      };
+    },
+    drop: optionDropped => {
+      reorder({
+        optionToMove: optionDropped,
+        moveAfterOption: option
+      });
+    }
+  }));
+  return /*#__PURE__*/_react.default.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.default.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'];
+
+function AsyncListStory() {
+  const [results, setResults] = _react.default.useState(repos.slice(0, 6));
+
+  const [loading, setLoading] = _react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Async List Items"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    onChange: filter,
+    placeholder: "Search repositories, showing 6 by default",
+    sx: {
+      m: 2,
+      mb: 0,
+      width: 'calc(100% - 16px)'
+    }
+  }), /*#__PURE__*/_react.default.createElement(ActionList, {
+    sx: {
+      height: 208,
+      overflow: 'auto'
+    }
+  }, loading ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      pt: 2
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)) : results.map(name => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    key: name
+  }, /*#__PURE__*/_react.default.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.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));
+};
+
+function InsideOverlay() {
+  const [open, setOpen] = _react.default.useState(false);
+
+  const toggle = () => setOpen(!open);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Inside Overlay"), /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    open: open,
+    onOpen: toggle,
+    onClose: toggle,
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement("button", props, "toggle overlay")
+  }, /*#__PURE__*/_react.default.createElement(ActionList, null, /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "Use your arrow keys", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "keep going", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/_react.default.createElement(ActionList.Item, null, "more more", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, "\u2193")), /*#__PURE__*/_react.default.createElement(ActionList.Divider, null), /*#__PURE__*/_react.default.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "now go up!", /*#__PURE__*/_react.default.createElement(ActionList.TrailingVisual, null, "\u2191")))));
+}
+
+InsideOverlay.storyName = 'Inside Overlay';