@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

package/lib/stories/ActionList2.stories.js

@@ -1,923 +0,0 @@
-"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';