@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.956a1af6

package/docs/content/BranchName.md

@@ -12,15 +12,16 @@ BranchName is a label-type component rendered as an `<a>` tag by default with mo
 
 ## Props
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `<a>`  | sets the HTML tag for the component |
-| href | String |         | a URL to link the component to      |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `<a>`  | sets the HTML tag for the component  |
+| href | String            |         | a URL to link the component to       |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## Component status
 
 <ComponentChecklist
-  items={{
+items={{
     propsDocumented: true,
     noUnnecessaryDeps: true,
     adaptsToThemes: true,

package/docs/content/Details.md

@@ -79,15 +79,11 @@ In previous versions of Primer React Components, we allowed users to pass in a c
 </State>
 ```
 
-## `Details` System props
+## Details props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## `useDetails` hook configuration options
 

package/docs/content/Heading.md

@@ -10,17 +10,12 @@ The Heading component will render an html `h2` tag without any default styling.
 ## Default example
 
 ```jsx live
-<Heading fontSize={1} mb={2}>
-  H2 heading with fontSize={1}
-</Heading>
+<Heading sx={{fontSize: 1, mb: 2}}>H2 heading with fontSize={1}</Heading>
 ```
 
-## System props
-
-Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Prop name | Type                    | Description                         |
-| :-------- | :---------------------- | :---------------------------------- |
-| as        | String or React element | sets the HTML tag for the component |
+| Name | Type                    | Default | Description                          |
+| :--- | :---------------------- | :-----: | :----------------------------------- |
+| as   | String or React element |         | sets the HTML tag for the component  |
+| sx   | SystemStyleObject       |   {}    | Style to be applied to the component |

package/docs/content/Label.md

@@ -41,10 +41,9 @@ The Label component is used to add contextual metadata to a design. Visually it
 
 ## Component props
 
-| Name       | Type              |        Default         | Description                                                                    |
-| :--------- | :---------------- | :--------------------: | :----------------------------------------------------------------------------- |
-| outline    | Boolean           |                        | Creates an outline style label                                                 |
-| variant    | String            |        'medium'        | Can be one of `small`, `medium` (default), `large` or `xl` .                   |
-| dropshadow | Boolean           |                        | Adds a dropshadow to the label                                                 |
-| bg         | String            | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
-| sx         | SystemStyleObject |           {}           | Style to be applied to the component                                           |
+| Name       | Type              | Default  | Description                                                  |
+| :--------- | :---------------- | :------: | :----------------------------------------------------------- |
+| outline    | Boolean           |          | Creates an outline style label                               |
+| variant    | String            | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . |
+| dropshadow | Boolean           |          | Adds a dropshadow to the label                               |
+| sx         | SystemStyleObject |    {}    | Style to be applied to the component                         |

package/docs/content/ProgressBar.mdx

@@ -22,9 +22,10 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s
 
 ## Component props
 
-| Name     | Type    |       Default       | Description                                                                                                                      |
-| :------- | :------ | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
-| progress | Number  |                     | Used to set the size of the green bar                                                                                            |
-| barSize  | String  |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
-| inline   | Boolean |        false        | Styles the progress bar inline                                                                                                   |
-| bg       | String  | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| Name     | Type              |       Default       | Description                                                                                                                      |
+| :------- | :---------------- | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
+| progress | Number            |                     | Used to set the size of the green bar                                                                                            |
+| barSize  | String            |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
+| inline   | Boolean           |        false        | Styles the progress bar inline                                                                                                   |
+| bg       | String            | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| sx       | SystemStyleObject |         {}          | Style to be applied to the component                                                                                             |

package/docs/content/Text.md

@@ -23,12 +23,6 @@ The Text component is a wrapper component that will apply typography styles to t
 
 ## System props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
 Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props

package/docs/content/{ActionList2.mdx → drafts/ActionList2.mdx}

@@ -6,16 +6,13 @@ storybook: '/react/storybook?path=/story/composite-components-actionlist2'
 description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu.
 ---
 
-import {BorderBox, Avatar} from '@primer/components'
+import {Box, Avatar} from '@primer/components'
 import {ActionList} from '@primer/components/drafts'
-import {ComponentChecklist} from '../src/component-checklist'
-
-import {ImageContainer} from '@primer/gatsby-theme-doctocat'
 import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
 
 <br />
 
-<BorderBox sx={{padding: 6}}>
+<Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6}}>
   <ActionList sx={{width: 320}}>
     <ActionList.Item>
       <ActionList.LeadingVisual>
@@ -43,7 +40,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
       </ActionList.TrailingVisual>
     </ActionList.Item>
   </ActionList>
-</BorderBox>
+</Box>
 
 <br />
 
@@ -351,11 +348,10 @@ render(<SelectFields />)
 
 - [Interface guidelines: Action List](https://primer.style/design/components/action-list)
 
-<br />
-
 ## Related components
 
-- [ActionMenu](/ActionMenu)
+- [ActionMenu](/drafts/ActionMenu2)
+- [DropdownMenu](/DropdownMenu)
 - [SelectPanel](/SelectPanel)
 
 ## Component status

package/docs/content/drafts/ActionMenu2.mdx

@@ -0,0 +1,251 @@
+---
+title: ActionMenu
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/ActionMenu
+storybook: '/react/storybook?path=/story/composite-components-actionmenu2'
+description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
+---
+
+import {Box, Avatar} from '@primer/components'
+import {ActionMenu, ActionList} from '@primer/components/drafts'
+import {Props} from '../../src/props'
+
+<br />
+
+<Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6}}>
+<ActionMenu>
+  <ActionMenu.Button>Menu</ActionMenu.Button>
+  <ActionList>
+    <ActionList.Item onSelect={() => onSelect('Copy link')}>
+      Copy link
+      <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item onSelect={() => onSelect('Quote reply')}>
+      Quote reply
+      <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item onSelect={() => onSelect('Edit comment')}>
+      Edit comment
+      <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Divider />
+    <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+      Delete file
+      <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+
+</ActionMenu>
+</Box>
+
+<br />
+
+```js
+import {ActionMenu} from '@primer/components/drafts'
+```
+
+<br />
+
+## Examples
+
+### Minimal example
+
+`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with this component.
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Menu</ActionMenu.Button>
+
+    <ActionList>
+      <ActionList.Item onSelect={event => console.log('New file')}>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>
+  </ActionMenu>
+)
+```
+
+### With a custom anchor
+
+You can choose to have a different _anchor_ for the Menu dependending on the application's context.
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Anchor>
+      <ButtonInvisible aria-label="Open column options">
+        <KebabHorizontalIcon />
+      </ButtonInvisible>
+    </ActionMenu.Anchor>
+
+    <ActionList>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <PencilIcon />
+        </ActionList.LeadingVisual>
+        Rename
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <ArchiveIcon />
+        </ActionList.LeadingVisual>
+        Archive all cards
+      </ActionList.Item>
+      <ActionList.Item variant="danger">
+        <ActionList.LeadingVisual>
+          <TrashIcon />
+        </ActionList.LeadingVisual>
+        Delete
+      </ActionList.Item>
+    </ActionList>
+  </ActionMenu>
+)
+```
+
+### With Groups
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Open column menu</ActionMenu.Button>
+
+    <ActionList showDividers>
+      <ActionList.Group title="Live query">
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <SearchIcon />
+          </ActionList.LeadingVisual>
+          repo:github/memex,github/github
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group title="Layout" variant="subtle">
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <NoteIcon />
+          </ActionList.LeadingVisual>
+          Table
+          <ActionList.Description variant="block">
+            Information-dense table optimized for operations across teams
+          </ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item role="listitem">
+          <ActionList.LeadingVisual>
+            <ProjectIcon />
+          </ActionList.LeadingVisual>
+          Board
+          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <FilterIcon />
+          </ActionList.LeadingVisual>
+          Save sort and filters to current view
+        </ActionList.Item>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <FilterIcon />
+          </ActionList.LeadingVisual>
+          Save sort and filters to new view
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <GearIcon />
+          </ActionList.LeadingVisual>
+          View settings
+        </ActionList.Item>
+      </ActionList.Group>
+    </ActionList>
+  </ActionMenu>
+)
+```
+
+### With External Anchor
+
+To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`:
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+const Example = () => {
+  const [open, setOpen] = React.useState(false)
+  const anchorRef = React.createRef()
+
+  return (
+    <>
+      <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+        {open ? 'Close Menu' : 'Open Menu'}
+      </Button>
+
+      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={anchorRef}>
+        <ActionList>
+          <ActionList.Item>Copy link</ActionList.Item>
+          <ActionList.Item>Quote reply</ActionList.Item>
+          <ActionList.Item>Edit comment</ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger">Delete file</ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+
+render(<Example />)
+```
+
+## Props / API reference
+
+### ActionMenu
+
+| Name         | Type                                                | Default | Description                                                                                                              |
+| :----------- | :-------------------------------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
+| children\*   | `React.ReactElement[]`                              |    -    | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with [`ActionList`](/drafts/ActionList2)               |
+| open         | `boolean`                                           |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. |
+| onOpenChange | `(open: boolean) => void`                           |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.         |
+| anchorRef    | `React.RefObject<HTMLElement>`                      |    -    | Optional. Useful for defining an external anchor                                                                         |
+| overlayProps | [`Partial<OverlayProps>`](/Overlay#component-props) |    -    | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component.                            |
+
+### ActionMenu.Button
+
+| Type                                    | Default | Description                                                                                                          |
+| :-------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------- |
+| [ButtonProps](/Buttons#component-props) |    -    | Optional. You can pass all of the props that you would pass to a [`Button`](/Buttons) component like `variant`, `sx` |
+
+### ActionMenu.Anchor
+
+| Name       | Type                 | Default | Description                       |
+| :--------- | :------------------- | :-----: | :-------------------------------- |
+| children\* | `React.ReactElement` |    -    | Required. Accepts a single child. |
+
+## Further reading
+
+[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list)
+
+## Related components
+
+- [ActionList](/drafts/ActionList2)
+- [DropdownMenu](/DropdownMenu)
+- [SelectPanel](/SelectPanel)

package/docs/content/status.mdx

@@ -1,5 +1,5 @@
 ---
-title: Component statuses
+title: Component status
 description: Check the current status of Primer React components
 ---
 

package/docs/content/system-props.mdx

@@ -6,7 +6,7 @@ import {PropsList, COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} fro
 
 <Note variant="warning">
 
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
+System props are deprecated in all components except [Box](/Box) and [Text](/Text). Please use the [`sx` prop](/overriding-styles) instead.
 
 </Note>
 

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

@@ -24,7 +24,11 @@ import {
   LawIcon,
   StarIcon,
   AlertIcon,
-  ArrowRightIcon
+  ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
@@ -65,6 +69,10 @@ export default {
   StarIcon,
   AlertIcon,
   ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon,
   Dialog2,
   ConfirmationDialog,
   useConfirm,

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -19,7 +19,7 @@
       url: /overriding-styles
     - title: Server-side rendering
       url: /ssr
-    - title: Component statuses
+    - title: Component status
       url: /status
 - title: Hooks
   children:

package/docs/src/component-checklist.js

@@ -9,7 +9,9 @@ export function ComponentChecklist({items}) {
     <>
       <H3>Alpha</H3>
       <Checklist aria-describedby="alpha">
-        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.propsDocumented}>
+          Component props are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
         <Checklist.Item checked={items.noUnnecessaryDeps}>
           Component does not have any unnecessary third-party dependencies.
         </Checklist.Item>
@@ -22,7 +24,13 @@ export function ComponentChecklist({items}) {
       <H3>Beta</H3>
       <Checklist aria-describedby="beta">
         <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
-        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>
+          Common usage examples are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasStorybookStories}>
+          Common usage examples are documented in <Link href="https://primer.style/react/storybook">storybook</Link>{' '}
+          stories.
+        </Checklist.Item>
         <Checklist.Item checked={items.designReviewed}>
           Component has been reviewed by a systems designer and any resulting issues have been addressed.
         </Checklist.Item>

package/lib/ActionList/Header.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "Header__StyledHeader",
-  componentId: "qmofje-0"
+  componentId: "sc-qmofje-0"
 })(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), ({
   variant
 }) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.muted')), _sx.default);

package/lib/ActionList/Item.js

@@ -71,17 +71,17 @@ const getItemVariant = (variant = 'default', disabled) => {
 
 const DividedContent = _styledComponents.default.div.withConfig({
   displayName: "Item__DividedContent",
-  componentId: "jqpvy8-0"
+  componentId: "sc-jqpvy8-0"
 })(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
 
 const MainContent = _styledComponents.default.div.withConfig({
   displayName: "Item__MainContent",
-  componentId: "jqpvy8-1"
+  componentId: "sc-jqpvy8-1"
 })(["align-items:baseline;display:flex;min-width:0;flex-direction:var(--main-content-flex-direction);flex-grow:1;"]);
 
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
-  componentId: "jqpvy8-2"
+  componentId: "sc-jqpvy8-2"
 })(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
@@ -114,30 +114,30 @@ const StyledItem = _styledComponents.default.div.withConfig({
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
-  componentId: "jqpvy8-3"
+  componentId: "sc-jqpvy8-3"
 })([""]);
 
 exports.TextContainer = TextContainer;
 
 const BaseVisualContainer = _styledComponents.default.div.withConfig({
   displayName: "Item__BaseVisualContainer",
-  componentId: "jqpvy8-4"
+  componentId: "sc-jqpvy8-4"
 })(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
 
 const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
-  componentId: "jqpvy8-5"
+  componentId: "sc-jqpvy8-5"
 })(["svg{fill:", ";font-size:", ";}"], ({
   variant,
   disabled
 }) => getItemVariant(variant, disabled).iconColor, (0, _constants.get)('fontSizes.0'));
 const LeadingVisualContainer = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
-  componentId: "jqpvy8-6"
+  componentId: "sc-jqpvy8-6"
 })(["display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
-  componentId: "jqpvy8-7"
+  componentId: "sc-jqpvy8-7"
 })(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
   variant,
   disabled
@@ -145,12 +145,12 @@ const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).w
 
 const DescriptionContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__DescriptionContainer",
-  componentId: "jqpvy8-8"
+  componentId: "sc-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 MultiSelectIcon = _styledComponents.default.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
-  componentId: "jqpvy8-9"
+  componentId: "sc-jqpvy8-9"
 })(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({

package/lib/ActionList/List.js

@@ -37,7 +37,7 @@ function isGroupedListProps(props) {
 
 const StyledList = _styledComponents.default.div.withConfig({
   displayName: "List__StyledList",
-  componentId: "yr2k7d-0"
+  componentId: "sc-yr2k7d-0"
 })(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.

package/lib/ActionList2/Divider.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
+import { SxProp } from '../sx';
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export declare function Divider(): JSX.Element;
+export declare const Divider: React.FC<SxProp>;

package/lib/ActionList2/Divider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Divider = Divider;
+exports.Divider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,25 +11,30 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _constants = require("../constants");
 
+var _sx = require("../sx");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-function Divider() {
+const Divider = ({
+  sx = {}
+}) => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "li",
     role: "separator",
-    sx: {
+    sx: (0, _sx.merge)({
       height: 1,
       backgroundColor: 'actionListItem.inlineDivider',
       marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
       marginBottom: 2,
       listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
 
-    },
+    }, sx),
     "data-component": "ActionList.Divider"
   });
-}
+};
 
+exports.Divider = Divider;
 Divider.displayName = "Divider";