@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.18690e3f

package/docs/content/ActionList2.mdx

@@ -0,0 +1,358 @@
+---
+title: ActionList
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/ActionList2
+storybook: '/react/storybook?path=/story/composite-components-actionlist2'
+description: An ActionList is a list of items which can be activated or selected. ActionList is the base component for many of our menu-type components, including DropdownMenu and ActionMenu.
+---
+
+import {BorderBox, Avatar} from '@primer/components'
+import {ActionList} from '@primer/components/drafts'
+import {Props} from '../src/props'
+
+import {ImageContainer} from '@primer/gatsby-theme-doctocat'
+import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
+
+<br />
+
+<BorderBox sx={{padding: 6}}>
+  <ActionList sx={{width: 320}}>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <LinkIcon />
+      </ActionList.LeadingVisual>
+      github.com/primer
+      <ActionList.Description variant="block">
+        A React implementation of GitHub's Primer Design System
+      </ActionList.Description>
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <Avatar src="https://github.com/mona.png" />
+      </ActionList.LeadingVisual>
+      mona
+      <ActionList.Description>Monalisa Octocat</ActionList.Description>
+    </ActionList.Item>
+    <ActionList.Item variant="danger">
+      <ActionList.LeadingVisual>
+        <AlertIcon />
+      </ActionList.LeadingVisual>
+      4 vulnerabilities
+      <ActionList.TrailingVisual>
+        <ArrowRightIcon />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+</BorderBox>
+
+<br />
+
+```js
+import {ActionList} from '@primer/components/drafts'
+```
+
+<br />
+
+## Examples
+
+### Minimal example
+
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionList>
+    <ActionList.Item>New file</ActionList.Item>
+    <ActionList.Item>Copy link</ActionList.Item>
+    <ActionList.Item>Edit file</ActionList.Item>
+    <ActionList.Divider />
+    <ActionList.Item variant="danger">Delete file</ActionList.Item>
+  </ActionList>
+)
+```
+
+<br />
+
+### With leading visual
+
+Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area.
+
+<!-- prettier-ignore -->
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionList>
+    <ActionList.Item>
+      <ActionList.LeadingVisual><LinkIcon /></ActionList.LeadingVisual>
+      github.com/primer
+    </ActionList.Item>
+    <ActionList.Item variant="danger">
+      <ActionList.LeadingVisual><AlertIcon /></ActionList.LeadingVisual>
+      4 vulnerabilities
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual><Avatar src="https://github.com/mona.png" /></ActionList.LeadingVisual>
+      mona
+    </ActionList.Item>
+  </ActionList>
+)
+```
+
+<br />
+
+### With trailing visual
+
+Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.
+
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionList>
+    <ActionList.Item>
+      New file
+      <ActionList.TrailingVisual>⌘ + N</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      Copy link
+      <ActionList.TrailingVisual>⌘ + C</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      Edit file
+      <ActionList.TrailingVisual>⌘ + E</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item variant="danger">
+      Delete file
+      <ActionList.TrailingVisual>⌫</ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+)
+```
+
+<br />
+
+### With description and dividers
+
+Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.
+
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionList showDividers>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <Avatar src="https://github.com/mona.png" />
+      </ActionList.LeadingVisual>
+      mona
+      <ActionList.Description>Monalisa Octocat</ActionList.Description>
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <Avatar src="https://github.com/hubot.png" />
+      </ActionList.LeadingVisual>
+      hubot
+      <ActionList.Description>Hubot</ActionList.Description>
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <Avatar src="https://github.com/primer-css.png" />
+      </ActionList.LeadingVisual>
+      primer-css
+      <ActionList.Description>GitHub Design Systems Bot</ActionList.Description>
+    </ActionList.Item>
+  </ActionList>
+)
+```
+
+### With links
+
+When you want to add links to the List instead of actions, use `ActionList.LinkItem`
+
+<!-- prettier-ignore -->
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionList>
+    <ActionList.LinkItem href="https://github.com/primer">
+      <ActionList.LeadingVisual>
+        <LinkIcon />
+      </ActionList.LeadingVisual>
+      github/primer
+    </ActionList.LinkItem>
+    <ActionList.LinkItem as={ReactRouterLink} to="/">
+      <ActionList.LeadingVisual>
+        <LawIcon />
+      </ActionList.LeadingVisual>
+      MIT License
+    </ActionList.LinkItem>
+    <ActionList.LinkItem 
+      href="https://github.com/primer/react/stargazers"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <ActionList.LeadingVisual>
+        <StarIcon />
+      </ActionList.LeadingVisual>
+      1.4k stars
+    </ActionList.LinkItem>
+  </ActionList>
+)
+```
+
+<br />
+
+### With groups
+
+```javascript live noinline
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
+
+const SelectFields = () => {
+  const [options, setOptions] = React.useState([
+    {text: 'Status', selected: true},
+    {text: 'Stage', selected: true},
+    {text: 'Assignee', selected: true},
+    {text: 'Team', selected: true},
+    {text: 'Estimate', selected: false},
+    {text: 'Due Date', selected: false}
+  ])
+
+  const visibleOptions = options.filter(option => option.selected)
+  const hiddenOptions = options.filter(option => !option.selected)
+
+  const toggle = text => {
+    setOptions(
+      options.map(option => {
+        if (option.text === text) option.selected = !option.selected
+        return option
+      })
+    )
+  }
+
+  return (
+    <ActionList selectionVariant="multiple">
+      <ActionList.Group title="Visible fields (can be reordered)">
+        {visibleOptions.map(option => (
+          <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
+            {option.text}
+          </ActionList.Item>
+        ))}
+      </ActionList.Group>
+      <ActionList.Group
+        title="Hidden fields"
+        selectionVariant={
+          /** selectionVariant override on Group: disable selection if there are no options */
+          hiddenOptions.length ? 'multiple' : false
+        }
+      >
+        {hiddenOptions.map((option, index) => (
+          <ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
+            {option.text}
+          </ActionList.Item>
+        ))}
+        {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
+      </ActionList.Group>
+    </ActionList>
+  )
+}
+
+render(<SelectFields />)
+```
+
+<br />
+
+## Props / API reference
+
+### ActionList
+
+| Name             | Type                                                                                              | Default | Description                                                                                                                                                                                |
+| :--------------- | :------------------------------------------------------------------------------------------------ | :-----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children\*       | `ActionList.Item[]` or ActionList.LinkItem[] or `ActionList.Group[]`                              |    -    | Required.                                                                                                                                                                                  |
+| variant          | `'inset'` or `'full'`                                                                             | 'inset' | Optional. Usage is discretionary, `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges |
+| selectionVariant | `'single'` or `'multiple'`                                                                        |    -    | Optional. Whether multiple Items or a single Item can be selected.                                                                                                                         |
+| showDivider      | boolean                                                                                           |  false  | Optional. Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.                                                                              |
+| sx               | sxProp                                                                                            |    -    | Optional. See guide to [Overriding styles](/overriding-styles)                                                                                                                             |
+| role             | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |    -    | Optional. The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.                                                                              |
+
+<br />
+
+### ActionList.Item
+
+| Name       | Type                                                                                                          |   Default   | Description                                                                                      |
+| :--------- | :------------------------------------------------------------------------------------------------------------ | :---------: | :----------------------------------------------------------------------------------------------- |
+| children\* | one of [`React.ReactNode`, `ActionList.LeadingVisual`, `ActionList.Description`, `ActionList.TrailingVisual`] |      -      | Required.                                                                                        |
+| variant    | `'default'` or `'danger'`                                                                                     | `'default'` | Optional. variant="danger" creates a destructive action `Item`.                                  |
+| onSelect   | Function                                                                                                      |      -      | Optional. Callback that will trigger both on click selection and keyboard selection.             |
+| selected   | boolean                                                                                                       |    false    | Optional. For `Item`s which can be selected, whether the `Item` is currently selected.           |
+| disabled   | boolean                                                                                                       |    false    | Optional. Items that are disabled can not be clicked, selected, or navigated through.            |
+| role       | [AriaRole](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles)             |      -      | Optional. The ARIA role describing the function of `Item` component. `option` is a common value. |
+| sx         | sxProp                                                                                                        |      -      | Optional. See guide to [Overriding styles](/overriding-styles)                                   |
+
+<br />
+
+### ActionList.LinkItem
+
+| Name                                                | Type                                                                                                          | Default | Description                                                    |
+| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------- |
+| children\*                                          | one of [`React.ReactNode`, `ActionList.LeadingVisual`, `ActionList.Description`, `ActionList.TrailingVisual`] |    -    | Required.                                                      |
+| sx                                                  | sxProp                                                                                                        |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
+| + AnchorHTMLAttributes like href, target, rel, etc. |                                                                                                               |         |                                                                |
+
+<br />
+
+### ActionList.LeadingVisual
+
+| Name       | Type                | Default | Description                                                    |
+| :--------- | :------------------ | :-----: | :------------------------------------------------------------- |
+| children\* | `React.ReactNode` - |    -    | Required. Icon (or similar) positioned before `Item` text.     |
+| sx         | sxProp              |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
+
+### ActionList.TrailingVisual
+
+| Name       | Type                | Default | Description                                                    |
+| :--------- | :------------------ | :-----: | :------------------------------------------------------------- |
+| children\* | `React.ReactNode` - |    -    | Required. Visual positioned after `Item` text.                 |
+| sx         | sxProp              |    -    | Optional. See guide to [Overriding styles](/overriding-styles) |
+
+<br />
+
+### ActionList.Description
+
+| Name       | Type                    |  Default   | Description                                                                                                                       |
+| :--------- | :---------------------- | :--------: | :-------------------------------------------------------------------------------------------------------------------------------- |
+| children\* | `React.ReactNode` -     |     -      | Required. Visual positioned after `Item` text.                                                                                    |
+| variant    | `'inline'` or `'block'` | `'inline'` | Optional. `"inline"` secondary text is positioned beside primary text. `"block"` secondary text is positioned below primary text. |
+| sx         | sxProp                  |     -      | Optional. See guide to [Overriding styles](/overriding-styles)                                                                    |
+
+<br />
+
+### ActionList.Group
+
+| Name             | Type                                         |  Default   | Description                                                                                                                              |
+| :--------------- | :------------------------------------------- | :--------: | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| children\*       | `ActionList.Item[] or ActionList.LinkItem[]` |     -      | Required.                                                                                                                                |
+| title            | string                                       |     -      | Optional. Primary text which names a `Group`                                                                                             |
+| auxiliaryText    | string                                       |     -      | Optional. Secondary text which provides additional information about a `Group`.                                                          |
+| variant          | `'filled'` or `'subtle'`                     | `'subtle'` | Optional. `"filled"` - Superimposed on a background, offset from nearby content, `"subtle"` - Relatively less offset from nearby content |
+| selectionVariant | `'single'` or `'multiple'` or `false`        |     -      | Optional. Set `selectionVariant` at the group level                                                                                      |
+
+<br />
+
+## Further reading
+
+- [Interface guidelines: Action List](https://primer.style/design/components/action-list)
+
+<br />
+
+## Related components
+
+- [ActionMenu](/ActionMenu)
+- [SelectPanel](/SelectPanel)

package/docs/content/StateLabel.md

@@ -14,6 +14,7 @@ Use StateLabel components to show the status of an issue or pull request.
   <StateLabel status="pullClosed">Closed</StateLabel>
   <StateLabel status="pullMerged">Merged</StateLabel>
   <StateLabel status="draft">Draft</StateLabel>
+  <StateLabel status="issueDraft">Draft</StateLabel>
 </>
 ```
 
@@ -29,7 +30,7 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system
 
 ## Component props
 
-| Name    | Type   | Default  | Description                                                                                       |
-| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------ |
-| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.          |
-| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. |
+| Name    | Type   | Default  | Description                                                                                                    |
+| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------------------- |
+| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
+| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |

package/docs/content/getting-started.md

@@ -105,7 +105,7 @@ If you're rendering React components both server- and client-side, we suggest fo
 
 ## TypeScript
 
-Primer React includes TypeScript support and ships with its own typings. You will need still need to to install type typings for the peer dependencies if you import those in your own application code.
+Primer React includes TypeScript support and ships with its own typings. You will still need to install type definitions for the peer dependencies if you import those in your own application code.
 
 Once installed, you can import components and their prop type interfaces from the `@primer/components` package:
 

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,4 +1,6 @@
+import React from 'react'
 import * as primerComponents from '@primer/components'
+import * as drafts from '@primer/components/drafts'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 import {
   CheckIcon,
@@ -18,6 +20,10 @@ import {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  LinkIcon,
+  LawIcon,
+  StarIcon,
+  AlertIcon,
   ArrowRightIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
@@ -26,9 +32,16 @@ import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
 import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
 import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
 
+const ReactRouterLink = ({to, ...props}) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return <a href={to} {...props} />
+}
+
 export default {
   ...doctocatComponents,
   ...primerComponents,
+  drafts,
+  ReactRouterLink,
   State,
   CheckIcon,
   SearchIcon,
@@ -47,6 +60,10 @@ export default {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  LinkIcon,
+  LawIcon,
+  StarIcon,
+  AlertIcon,
   ArrowRightIcon,
   Dialog2,
   ConfirmationDialog,

package/lib/ActionList/Divider.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.StyledDivider = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+exports.StyledDivider = styled_components_1.default.div `
+  height: 1px;
+  background: ${constants_1.get('colors.border.muted')};
+  margin-top: calc(${constants_1.get('space.2')} - 1px);
+  margin-bottom: ${constants_1.get('space.2')};
+`;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+    return <exports.StyledDivider />;
+}
+exports.Divider = Divider;
+/**
+ * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
+ * so it can be used inline in an `ActionList`’s `items` prop.
+ * In other words, `items={[ActionList.Divider]}` is supported as a concise
+ * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
+ */
+Divider.renderItem = Divider;

package/lib/ActionList/Group.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const sx_1 = __importDefault(require("../sx"));
+const Header_1 = require("./Header");
+const StyledGroup = styled_components_1.default.div `
+  ${sx_1.default}
+`;
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+function Group({ header, items, ...props }) {
+    return (<StyledGroup {...props}>
+      {header && <Header_1.Header {...header}/>}
+      {items}
+    </StyledGroup>);
+}
+exports.Group = Group;

package/lib/ActionList/Header.jsx

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.StyledHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+exports.StyledHeader = styled_components_1.default.div `
+   {
+    /* 6px vertical padding + 20px line height = 32px total height
+     *
+     * TODO: When rem-based spacing on a 4px scale lands, replace
+     * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
+     */
+  }
+  padding: 6px ${constants_1.get('space.3')};
+  font-size: ${constants_1.get('fontSizes.0')};
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  color: ${constants_1.get('colors.fg.muted')};
+
+  ${({ variant }) => variant === 'filled' &&
+    styled_components_1.css `
+      background: ${constants_1.get('colors.canvas.subtle')};
+      margin: ${constants_1.get('space.2')} 0;
+      border-top: 1px solid ${constants_1.get('colors.neutral.muted')};
+      border-bottom: 1px solid ${constants_1.get('colors.neutral.muted')};
+
+      &:first-child {
+        margin-top: 0;
+      }
+    `}
+
+  ${sx_1.default}
+`;
+/**
+ * Displays the name and description of a `Group`.
+ */
+function Header({ variant = 'subtle', title, auxiliaryText, children: _children, ...props }) {
+    return (<exports.StyledHeader role="heading" variant={variant} {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </exports.StyledHeader>);
+}
+exports.Header = Header;

package/lib/ActionList/Item.js

@@ -142,7 +142,7 @@ exports.TextContainer = TextContainer;
 const BaseVisualContainer = _styledComponents.default.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
 
 const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
@@ -168,10 +168,16 @@ const DescriptionContainer = _styledComponents.default.span.withConfig({
   componentId: "jqpvy8-8"
 })(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
 
-const MultiSelectInput = _styledComponents.default.input.withConfig({
-  displayName: "Item__MultiSelectInput",
+const MultiSelectIcon = _styledComponents.default.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["pointer-events:none;"]);
+})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
@@ -207,12 +213,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     }
 
     onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
-    const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
-
-    if (isCheckbox && event.key === ' ') {
-      // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
-      return;
-    }
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
@@ -250,15 +250,24 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     onClick: clickHandler,
     hoverBackground: disabled ? 'inherit' : hoverBackground,
     focusBackground: disabled ? 'inherit' : focusBackground
-  }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectInput, {
-    disabled: disabled,
-    tabIndex: -1,
-    type: "checkbox",
-    checked: selected,
-    "aria-label": text,
-    readOnly: true,
-    "aria-readonly": "false"
-  })) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
+  }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
+    selected: selected,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  }))) : selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, {
     fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
   })), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
     variant: variant,