Repository: primer/react
Pull request #6019: chore(ActionList): Remove the CSS modules feature flag from the ActionList/List component
Author: login: jonrohan
Labels: name: integration-tests: passing
description: Changes in this PR do NOT cause breaking changes in gh/gh
name: integration-tests: recommended
description: This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm
name: staff
description: Author is a staff member
Created: 2025-05-07T17:52:51Z | Merged: 2025-05-09T16:52:03Z

<!-- Provide the GitHub issue that this issue closes. Start typing the number or name of the issue after the # below. -->

Part of https://github.com/github/primer/issues/3961

I'm going to attempt to break `ActionList` up into smaller chunks because of the complexity of the component.

<!-- Provide an overview of the changes, including before/after screenshots, videos, or graphs when helpful -->

### Changelog

<!-- Under the headings below, list out relevant API changes that this Pull Request introduces -->

#### New

<!-- List of things added in this PR -->

#### Changed

<!-- List of things changed in this PR -->

#### Removed

Remove the CSS modules feature flag from the ActionList/List component

### Rollout strategy

<!-- How do you recommend this change to be rolled out? Refer to [contributor docs on Versioning](https://github.com/primer/react/blob/main/contributor-docs/versioning.md) for details. -->

- [ ] Patch release
- [x] Minor release
- [ ] Major release; if selected, include a written rollout or migration plan
- [ ] None; if selected, include a brief description as to why

### Testing & Reviewing

<!-- Describe any specific details to help reviewers test or review this Pull Request -->

### Merge checklist

- [x] Added/updated tests
- [ ] Added/updated documentation
- [ ] Added/updated previews (Storybook)
- [x] Changes are [SSR compatible](https://github.com/primer/react/blob/main/contributor-docs/CONTRIBUTING.md#ssr-compatibility)
- [x] Tested in Chrome
- [ ] Tested in Firefox
- [ ] Tested in Safari
- [ ] Tested in Edge
- [ ] (GitHub staff only) Integration tests pass at github/github ([Learn more about how to run integration tests](https://github.com/github/primer-engineering/blob/main/how-we-work/testing-primer-react-pr-at-dotcom.md))

<!-- Take a look at the [What we look for in reviews](https://github.com/primer/react/blob/main/contributor-docs/CONTRIBUTING.md#what-we-look-for-in-reviews) section of the contributing guidelines for more information on how we review PRs. -->



Diff:
diff --git a/.changeset/shaggy-states-travel.md b/.changeset/shaggy-states-travel.md
new file mode 100644
index 00000000000..10828f6bee1
--- /dev/null
+++ b/.changeset/shaggy-states-travel.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the ActionList/List component
diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx
index 96aef7ad3de..f31dcb3bbbb 100644
--- a/packages/react/src/ActionList/ActionList.test.tsx
+++ b/packages/react/src/ActionList/ActionList.test.tsx
@@ -6,7 +6,6 @@ import theme from '../theme'
 import {ActionList} from '.'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {BaseStyles, ThemeProvider} from '..'
-import {FeatureFlags} from '../FeatureFlags'
 
 function SimpleActionList(): JSX.Element {
   return (
@@ -115,18 +114,6 @@ describe('ActionList', () => {
         </ActionList>
       )
     }
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
-    expect(HTMLRender(<FeatureFlagElement />).container.querySelector('ul')).toHaveClass('test-class-name')
     expect(HTMLRender(<Element />).container.querySelector('ul')).toHaveClass('test-class-name')
   })
 
@@ -139,20 +126,6 @@ describe('ActionList', () => {
         </ActionList>
       )
     }
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
-    expect(HTMLRender(<FeatureFlagElement />).container.querySelector('li[aria-hidden="true"]')).toHaveClass(
-      'test-class-name',
-    )
     expect(HTMLRender(<Element />).container.querySelector('li[aria-hidden="true"]')).toHaveClass('test-class-name')
   })
 
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index 255cba8a92b..2bfef6e9c41 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,8 +1,5 @@
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import styled from 'styled-components'
-import type {SxProp} from '../sx'
-import sx, {merge} from '../sx'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {useSlots} from '../hooks/useSlots'
@@ -12,24 +9,14 @@ import {ListContext, type ActionListProps} from './shared'
 import {useProvidedRefOrCreate} from '../hooks'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
-import {actionListCssModulesFlag} from './featureflag'
-
-const ListBox = styled.ul<SxProp>(sx)
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
     {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, className, ...props},
     forwardedRef,
   ): JSX.Element => {
-    const styles = {
-      margin: 0,
-      paddingInlineStart: 0, // reset ul styles
-      paddingTop: variant === 'inset' ? 2 : 0,
-      paddingBottom: variant === 'inset' || variant === 'horizontal-inset' ? 2 : 0,
-    }
-
     const [slots, childrenWithoutSlots] = useSlots(props.children, {
       heading: Heading,
     })
@@ -59,8 +46,6 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined,
     })
 
-    const enabled = useFeatureFlag(actionListCssModulesFlag)
-
     return (
       <ListContext.Provider
         value={{
@@ -72,45 +57,19 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
         }}
       >
         {slots.heading}
-        {enabled ? (
-          sxProp !== defaultSxProp ? (
-            <ListBox
-              sx={merge(styles, sxProp as SxProp)}
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ListBox>
-          ) : (
-            <ul
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ul>
-          )
-        ) : (
-          <ListBox
-            sx={merge(styles, sxProp as SxProp)}
-            role={listRole}
-            aria-labelledby={ariaLabelledBy}
-            {...props}
-            ref={listRef}
-            className={className}
-          >
-            {childrenWithoutSlots}
-          </ListBox>
-        )}
+        <BoxWithFallback
+          as="ul"
+          sx={sxProp}
+          className={clsx(classes.ActionList, className)}
+          role={listRole}
+          aria-labelledby={ariaLabelledBy}
+          ref={listRef}
+          data-dividers={showDividers}
+          data-variant={variant}
+          {...props}
+        >
+          {childrenWithoutSlots}
+        </BoxWithFallback>
       </ListContext.Provider>
     )
   },
diff --git a/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
index 5608f74d0f9..233e8e7d2a1 100644
--- a/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
       type="text"
     />
   </span>,
-  .c5 {
+  .c4 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -215,7 +215,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   min-width: 16px;
 }
 
-.c6 {
+.c5 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -231,7 +231,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c6::before {
+.c5::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -253,7 +253,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -268,7 +268,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   min-width: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -278,13 +278,13 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   line-height: 20px;
 }
 
-.c9 {
+.c8 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c10 {
+.c9 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -306,12 +306,12 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
-.c10 svg {
+.c9 svg {
   font-size: 12px;
 }
 
-[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c4,
-[data-variant="danger"]:active .c10 {
+[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c3,
+[data-variant="danger"]:active .c9 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
@@ -328,14 +328,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-width: 0;
 }
 
-.c1 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c3 {
+.c2 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -367,32 +360,32 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   margin-bottom: unset;
 }
 
-.c3[data-loading] {
+.c2[data-loading] {
   cursor: default;
 }
 
-.c3[aria-disabled],
-.c3[data-inactive] {
+.c2[aria-disabled],
+.c2[data-inactive] {
   cursor: not-allowed;
 }
 
-.c3[aria-disabled] [data-component="ActionList.Checkbox"],
-.c3[data-inactive] [data-component="ActionList.Checkbox"] {
+.c2[aria-disabled] [data-component="ActionList.Checkbox"],
+.c2[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c3[aria-disabled] [data-component="ActionList.Selection"],
-.c3[data-inactive] [data-component="ActionList.Selection"] {
+.c2[aria-disabled] [data-component="ActionList.Selection"],
+.c2[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c2 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c2 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -403,30 +396,30 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c2:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3[data-is-active-descendant] {
+.c2[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c3[data-is-active-descendant]::after {
+.c2[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -437,17 +430,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   border-radius: 6px;
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c11[data-focus-visible-added] + li {
+.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 @media (forced-colors:active) {
-  .c6 {
+  .c5 {
     border-width: 1px;
   }
 }
@@ -457,30 +450,30 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 @media (forced-colors:active) {
-  .c3:focus,
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3[data-is-active-descendant] {
+  .c2:focus,
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]):not([data-inactive]) {
+  .c2:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3:focus.focus-visible {
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c3:active:not([aria-disabled]):not([data-inactive]) {
+  .c2:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -500,14 +493,16 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
     <div>
       <ul
         aria-labelledby="labelId"
-        className="c1"
+        className="ActionList"
+        data-dividers={false}
+        data-variant="inset"
         id="autocompleteId-listbox"
         role="listbox"
       >
         <li
           aria-labelledby="0--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -516,33 +511,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -551,33 +546,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -586,33 +581,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -621,33 +616,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -656,33 +651,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -691,33 +686,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -726,33 +721,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -761,33 +756,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -796,33 +791,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -831,33 +826,33 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
         <li
           aria-labelledby="add-new-item--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="add-new-item"
           id="add-new-item"
           onClick={[Function]}
@@ -866,16 +861,16 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           tabIndex={0}
         >
           <span
-            className="c4 c5"
+            className="c3 c4"
             data-component="ActionList.Selection"
           >
             <div
-              className="c4 c6"
+              className="c3 c5"
               data-component="ActionList.Checkbox"
             />
           </span>
           <span
-            className="c4 c10"
+            className="c3 c9"
           >
             <svg
               aria-hidden="true"
@@ -899,17 +894,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             </svg>
           </span>
           <div
-            className="c4 c7"
+            className="c3 c6"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c4 c8"
+              className="c3 c7"
               id="add-new-item--label"
             >
               Add new item
             </span>
             <span
-              className="c4 c9"
+              className="c3 c8"
             />
           </div>
         </li>
@@ -958,7 +953,7 @@ exports[`snapshots renders a multiselect input 1`] = `
       type="text"
     />
   </span>,
-  .c4 {
+  .c3 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -981,7 +976,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   min-width: 16px;
 }
 
-.c5 {
+.c4 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -997,7 +992,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c5::before {
+.c4::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -1019,7 +1014,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1029,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   min-width: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1044,7 +1039,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   line-height: 20px;
 }
 
-.c8 {
+.c7 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
@@ -1063,14 +1058,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   border-width: 0;
 }
 
-.c1 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c3 {
+.c2 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1102,32 +1090,32 @@ exports[`snapshots renders a multiselect input 1`] = `
   margin-bottom: unset;
 }
 
-.c3[data-loading] {
+.c2[data-loading] {
   cursor: default;
 }
 
-.c3[aria-disabled],
-.c3[data-inactive] {
+.c2[aria-disabled],
+.c2[data-inactive] {
   cursor: not-allowed;
 }
 
-.c3[aria-disabled] [data-component="ActionList.Checkbox"],
-.c3[data-inactive] [data-component="ActionList.Checkbox"] {
+.c2[aria-disabled] [data-component="ActionList.Checkbox"],
+.c2[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c3[aria-disabled] [data-component="ActionList.Selection"],
-.c3[data-inactive] [data-component="ActionList.Selection"] {
+.c2[aria-disabled] [data-component="ActionList.Selection"],
+.c2[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c2 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c2 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1138,30 +1126,30 @@ exports[`snapshots renders a multiselect input 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c2:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3[data-is-active-descendant] {
+.c2[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c3[data-is-active-descendant]::after {
+.c2[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1173,36 +1161,36 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c5 {
+  .c4 {
     border-width: 1px;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus,
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3[data-is-active-descendant] {
+  .c2:focus,
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]):not([data-inactive]) {
+  .c2:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3:focus.focus-visible {
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c3:active:not([aria-disabled]):not([data-inactive]) {
+  .c2:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1214,14 +1202,16 @@ exports[`snapshots renders a multiselect input 1`] = `
     <div>
       <ul
         aria-labelledby="labelId"
-        className="c1"
+        className="ActionList"
+        data-dividers={false}
+        data-variant="inset"
         id="autocompleteId-listbox"
         role="listbox"
       >
         <li
           aria-labelledby="0--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -1230,33 +1220,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -1265,33 +1255,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -1300,33 +1290,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -1335,33 +1325,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -1370,33 +1360,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -1405,33 +1395,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -1440,33 +1430,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -1475,33 +1465,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -1510,33 +1500,33 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c2 c3"
+          className="c1 c2"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -1545,26 +1535,26 @@ exports[`snapshots renders a multiselect input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
@@ -1625,7 +1615,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       type="text"
     />
   </span>,
-  .c4 {
+  .c3 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -1648,7 +1638,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   min-width: 16px;
 }
 
-.c5 {
+.c4 {
   border-color: var(--control-checked-borderColor-rest);
   border-style: solid;
   border-width: 1px;
@@ -1664,7 +1654,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
 }
 
-.c5::before {
+.c4::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: visible;
@@ -1686,7 +1676,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1701,7 +1691,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   min-width: 0;
 }
 
-.c7 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1711,13 +1701,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   line-height: 20px;
 }
 
-.c8 {
+.c7 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c10 {
+.c9 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -1733,7 +1723,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c10::before {
+.c9::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -1768,14 +1758,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-width: 0;
 }
 
-.c1 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c3 {
+.c2 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1807,32 +1790,32 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-bottom: unset;
 }
 
-.c3[data-loading] {
+.c2[data-loading] {
   cursor: default;
 }
 
-.c3[aria-disabled],
-.c3[data-inactive] {
+.c2[aria-disabled],
+.c2[data-inactive] {
   cursor: not-allowed;
 }
 
-.c3[aria-disabled] [data-component="ActionList.Checkbox"],
-.c3[data-inactive] [data-component="ActionList.Checkbox"] {
+.c2[aria-disabled] [data-component="ActionList.Checkbox"],
+.c2[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
   border-color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
-.c3[aria-disabled] [data-component="ActionList.Selection"],
-.c3[data-inactive] [data-component="ActionList.Selection"] {
+.c2[aria-disabled] [data-component="ActionList.Selection"],
+.c2[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c2 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c2 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1843,30 +1826,30 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c2:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3[data-is-active-descendant] {
+.c2[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c3[data-is-active-descendant]::after {
+.c2[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1877,7 +1860,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-radius: 6px;
 }
 
-.c9 {
+.c8 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1909,32 +1892,32 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-bottom: unset;
 }
 
-.c9[data-loading] {
+.c8[data-loading] {
   cursor: default;
 }
 
-.c9[aria-disabled],
-.c9[data-inactive] {
+.c8[aria-disabled],
+.c8[data-inactive] {
   cursor: not-allowed;
 }
 
-.c9[aria-disabled] [data-component="ActionList.Checkbox"],
-.c9[data-inactive] [data-component="ActionList.Checkbox"] {
+.c8[aria-disabled] [data-component="ActionList.Checkbox"],
+.c8[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c9[aria-disabled] [data-component="ActionList.Selection"],
-.c9[data-inactive] [data-component="ActionList.Selection"] {
+.c8[aria-disabled] [data-component="ActionList.Selection"],
+.c8[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c9 [data-component="ActionList.Item--DividerContainer"] {
+.c8 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c9 [data-component="ActionList.Item--DividerContainer"]::before {
+.c8 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1945,30 +1928,30 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c9:not(:first-of-type) {
+.c8:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c9[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c8[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c9[data-focus-visible-added] + li {
+.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c8[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c9[data-is-active-descendant] {
+.c8[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c9[data-is-active-descendant]::after {
+.c8[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1980,72 +1963,72 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c5 {
+  .c4 {
     border-width: 8px;
   }
 }
 
 @media (forced-colors:active) {
-  .c10 {
+  .c9 {
     border-width: 1px;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus,
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3[data-is-active-descendant] {
+  .c2:focus,
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]):not([data-inactive]) {
+  .c2:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3:focus.focus-visible {
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c3:active:not([aria-disabled]):not([data-inactive]) {
+  .c2:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 @media (forced-colors:active) {
-  .c9:focus,
-  .c9:focus-visible,
-  .c9 > a.focus-visible,
-  .c9[data-is-active-descendant] {
+  .c8:focus,
+  .c8:focus-visible,
+  .c8 > a.focus-visible,
+  .c8[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9:hover:not([aria-disabled]):not([data-inactive]) {
+  .c8:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c9:focus-visible,
-  .c9 > a.focus-visible,
-  .c9:focus.focus-visible {
+  .c8:focus-visible,
+  .c8 > a.focus-visible,
+  .c8:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c9:active:not([aria-disabled]):not([data-inactive]) {
+  .c8:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -2057,14 +2040,16 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
     <div>
       <ul
         aria-labelledby="labelId"
-        className="c1"
+        className="ActionList"
+        data-dividers={false}
+        data-variant="inset"
         id="autocompleteId-listbox"
         role="listbox"
       >
         <li
           aria-labelledby="0--label  "
           aria-selected={true}
-          className="c2 c3"
+          className="c1 c2"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -2073,33 +2058,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
           aria-selected={true}
-          className="c2 c3"
+          className="c1 c2"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -2108,33 +2093,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
           aria-selected={true}
-          className="c2 c3"
+          className="c1 c2"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -2143,33 +2128,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c5"
+              className="c4"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -2178,33 +2163,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -2213,33 +2198,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -2248,33 +2233,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -2283,33 +2268,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -2318,33 +2303,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -2353,33 +2338,33 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c2 c9"
+          className="c1 c8"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -2388,26 +2373,26 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           >
             <div
-              className="c10"
+              className="c9"
               data-component="ActionList.Checkbox"
             />
           </span>
           <div
-            className="c6"
+            className="c5"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c7"
+              className="c6"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c8"
+              className="c7"
             />
           </div>
         </li>
@@ -2452,7 +2437,7 @@ exports[`snapshots renders a single select input 1`] = `
       type="text"
     />
   </span>,
-  .c4 {
+  .c3 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -2475,7 +2460,7 @@ exports[`snapshots renders a single select input 1`] = `
   min-width: 16px;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2490,7 +2475,7 @@ exports[`snapshots renders a single select input 1`] = `
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2500,7 +2485,7 @@ exports[`snapshots renders a single select input 1`] = `
   line-height: 20px;
 }
 
-.c7 {
+.c6 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
@@ -2519,14 +2504,7 @@ exports[`snapshots renders a single select input 1`] = `
   border-width: 0;
 }
 
-.c1 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c3 {
+.c2 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2558,32 +2536,32 @@ exports[`snapshots renders a single select input 1`] = `
   margin-bottom: unset;
 }
 
-.c3[data-loading] {
+.c2[data-loading] {
   cursor: default;
 }
 
-.c3[aria-disabled],
-.c3[data-inactive] {
+.c2[aria-disabled],
+.c2[data-inactive] {
   cursor: not-allowed;
 }
 
-.c3[aria-disabled] [data-component="ActionList.Checkbox"],
-.c3[data-inactive] [data-component="ActionList.Checkbox"] {
+.c2[aria-disabled] [data-component="ActionList.Checkbox"],
+.c2[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c3[aria-disabled] [data-component="ActionList.Selection"],
-.c3[data-inactive] [data-component="ActionList.Selection"] {
+.c2[aria-disabled] [data-component="ActionList.Selection"],
+.c2[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c2 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c2 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -2594,30 +2572,30 @@ exports[`snapshots renders a single select input 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c2:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3[data-is-active-descendant] {
+.c2[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c3[data-is-active-descendant]::after {
+.c2[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -2629,30 +2607,30 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c3:focus,
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3[data-is-active-descendant] {
+  .c2:focus,
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]):not([data-inactive]) {
+  .c2:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3:focus.focus-visible {
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c3:active:not([aria-disabled]):not([data-inactive]) {
+  .c2:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -2664,13 +2642,15 @@ exports[`snapshots renders a single select input 1`] = `
     <div>
       <ul
         aria-labelledby="labelId"
-        className="c1"
+        className="ActionList"
+        data-dividers={false}
+        data-variant="inset"
         id="autocompleteId-listbox"
         role="listbox"
       >
         <li
           aria-labelledby="0--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -2679,27 +2659,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -2708,27 +2688,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -2737,27 +2717,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -2766,27 +2746,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -2795,27 +2775,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -2824,27 +2804,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -2853,27 +2833,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -2882,27 +2862,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -2911,27 +2891,27 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -2940,21 +2920,21 @@ exports[`snapshots renders a single select input 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
@@ -2978,7 +2958,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
     id="customInput"
     type="text"
   />,
-  .c4 {
+  .c3 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -3001,7 +2981,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   min-width: 16px;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3016,7 +2996,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3026,7 +3006,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   line-height: 20px;
 }
 
-.c7 {
+.c6 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
@@ -3045,14 +3025,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   border-width: 0;
 }
 
-.c1 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c3 {
+.c2 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3084,32 +3057,32 @@ exports[`snapshots renders with a custom text input component 1`] = `
   margin-bottom: unset;
 }
 
-.c3[data-loading] {
+.c2[data-loading] {
   cursor: default;
 }
 
-.c3[aria-disabled],
-.c3[data-inactive] {
+.c2[aria-disabled],
+.c2[data-inactive] {
   cursor: not-allowed;
 }
 
-.c3[aria-disabled] [data-component="ActionList.Checkbox"],
-.c3[data-inactive] [data-component="ActionList.Checkbox"] {
+.c2[aria-disabled] [data-component="ActionList.Checkbox"],
+.c2[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c3[aria-disabled] [data-component="ActionList.Selection"],
-.c3[data-inactive] [data-component="ActionList.Selection"] {
+.c2[aria-disabled] [data-component="ActionList.Selection"],
+.c2[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c2 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c2 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -3120,30 +3093,30 @@ exports[`snapshots renders with a custom text input component 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c2:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c1 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c3[data-focus-visible-added] + li {
+.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3[data-is-active-descendant] {
+.c2[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c3[data-is-active-descendant]::after {
+.c2[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -3155,30 +3128,30 @@ exports[`snapshots renders with a custom text input component 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c3:focus,
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3[data-is-active-descendant] {
+  .c2:focus,
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]):not([data-inactive]) {
+  .c2:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c3:focus-visible,
-  .c3 > a.focus-visible,
-  .c3:focus.focus-visible {
+  .c2:focus-visible,
+  .c2 > a.focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c3:active:not([aria-disabled]):not([data-inactive]) {
+  .c2:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -3190,13 +3163,15 @@ exports[`snapshots renders with a custom text input component 1`] = `
     <div>
       <ul
         aria-labelledby="labelId"
-        className="c1"
+        className="ActionList"
+        data-dividers={false}
+        data-variant="inset"
         id="autocompleteId-listbox"
         role="listbox"
       >
         <li
           aria-labelledby="0--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="0"
           id="0"
           onClick={[Function]}
@@ -3205,27 +3180,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="0--label"
             >
               zero
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="1--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="1"
           id="1"
           onClick={[Function]}
@@ -3234,27 +3209,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="1--label"
             >
               one
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="2--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="2"
           id="2"
           onClick={[Function]}
@@ -3263,27 +3238,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="2--label"
             >
               two
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -3292,27 +3267,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="3--label"
             >
               three
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -3321,27 +3296,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="4--label"
             >
               four
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -3350,27 +3325,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="5--label"
             >
               five
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -3379,27 +3354,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="6--label"
             >
               six
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -3408,27 +3383,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="7--label"
             >
               seven
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -3437,27 +3412,27 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="20--label"
             >
               twenty
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
-          className="c2 c3"
+          className="c1 c2"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -3466,21 +3441,21 @@ exports[`snapshots renders with a custom text input component 1`] = `
           tabIndex={0}
         >
           <span
-            className="c4"
+            className="c3"
             data-component="ActionList.Selection"
           />
           <div
-            className="c5"
+            className="c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              className="c6"
+              className="c5"
               id="21--label"
             >
               twentyone
             </span>
             <span
-              className="c7"
+              className="c6"
             />
           </div>
         </li>
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index 6b84587b426..ce4c40aca2a 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NavList renders a simple list 1`] = `
-.c3 {
+.c2 {
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 6px;
@@ -19,13 +19,13 @@ exports[`NavList renders a simple list 1`] = `
   font-size: 14px;
 }
 
-.c3:hover {
+.c2:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -40,7 +40,7 @@ exports[`NavList renders a simple list 1`] = `
   min-width: 0;
 }
 
-.c5 {
+.c4 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -50,13 +50,13 @@ exports[`NavList renders a simple list 1`] = `
   line-height: 20px;
 }
 
-.c6 {
+.c5 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c8 {
+.c7 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -66,14 +66,7 @@ exports[`NavList renders a simple list 1`] = `
   line-height: 20px;
 }
 
-.c0 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c2 {
+.c1 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -107,32 +100,32 @@ exports[`NavList renders a simple list 1`] = `
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-loading] {
+.c1[data-loading] {
   cursor: default;
 }
 
-.c2[aria-disabled],
-.c2[data-inactive] {
+.c1[aria-disabled],
+.c1[data-inactive] {
   cursor: not-allowed;
 }
 
-.c2[aria-disabled] [data-component="ActionList.Checkbox"],
-.c2[data-inactive] [data-component="ActionList.Checkbox"] {
+.c1[aria-disabled] [data-component="ActionList.Checkbox"],
+.c1[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c2[aria-disabled] [data-component="ActionList.Selection"],
-.c2[data-inactive] [data-component="ActionList.Selection"] {
+.c1[aria-disabled] [data-component="ActionList.Selection"],
+.c1[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c1 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c1 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -143,25 +136,25 @@ exports[`NavList renders a simple list 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c1:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c1[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c2[data-focus-visible-added] + li {
+.c1:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c1[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2::after {
+.c1::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -172,12 +165,12 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
 }
 
-.c2[data-is-active-descendant] {
+.c1[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c2[data-is-active-descendant]::after {
+.c1[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -188,7 +181,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
 }
 
-.c7 {
+.c6 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -220,32 +213,32 @@ exports[`NavList renders a simple list 1`] = `
   margin-bottom: unset;
 }
 
-.c7[data-loading] {
+.c6[data-loading] {
   cursor: default;
 }
 
-.c7[aria-disabled],
-.c7[data-inactive] {
+.c6[aria-disabled],
+.c6[data-inactive] {
   cursor: not-allowed;
 }
 
-.c7[aria-disabled] [data-component="ActionList.Checkbox"],
-.c7[data-inactive] [data-component="ActionList.Checkbox"] {
+.c6[aria-disabled] [data-component="ActionList.Checkbox"],
+.c6[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c7[aria-disabled] [data-component="ActionList.Selection"],
-.c7[data-inactive] [data-component="ActionList.Selection"] {
+.c6[aria-disabled] [data-component="ActionList.Selection"],
+.c6[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c7 [data-component="ActionList.Item--DividerContainer"] {
+.c6 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c7 [data-component="ActionList.Item--DividerContainer"]::before {
+.c6 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -256,30 +249,30 @@ exports[`NavList renders a simple list 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c7:not(:first-of-type) {
+.c6:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c1 {
+[data-component="ActionList.Divider"] + .c0 {
   --divider-color: transparent !important;
 }
 
-.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c6[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c7[data-focus-visible-added] + li {
+.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c0,
+.c6[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c7[data-is-active-descendant] {
+.c6[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c7[data-is-active-descendant]::after {
+.c6[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -291,60 +284,60 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c2:focus,
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2[data-is-active-descendant] {
+  .c1:focus,
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]):not([data-inactive]) {
+  .c1:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c2:focus-visible,
-  .c2 > a.focus-visible,
-  .c2:focus.focus-visible {
+  .c1:focus-visible,
+  .c1 > a.focus-visible,
+  .c1:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c2:active:not([aria-disabled]):not([data-inactive]) {
+  .c1:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 @media (forced-colors:active) {
-  .c7:focus,
-  .c7:focus-visible,
-  .c7 > a.focus-visible,
-  .c7[data-is-active-descendant] {
+  .c6:focus,
+  .c6:focus-visible,
+  .c6 > a.focus-visible,
+  .c6[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7:hover:not([aria-disabled]):not([data-inactive]) {
+  .c6:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c7:focus-visible,
-  .c7 > a.focus-visible,
-  .c7:focus.focus-visible {
+  .c6:focus-visible,
+  .c6 > a.focus-visible,
+  .c6:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c7:active:not([aria-disabled]):not([data-inactive]) {
+  .c6:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -355,86 +348,88 @@ exports[`NavList renders a simple list 1`] = `
     class=""
   >
     <ul
-      class="c0"
+      class="ActionList"
+      data-dividers="false"
+      data-variant="inset"
     >
       <li
-        class="c1 c2"
+        class="c0 c1"
       >
         <a
           aria-current="page"
           aria-labelledby=":r2:--label  "
-          class="c3 Link"
+          class="c2 Link"
           href="/"
           id=":r2:"
           style="--subitem-depth: 0;"
           tabindex="0"
         >
           <div
-            class="c4"
+            class="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c5"
+              class="c4"
               id=":r2:--label"
             >
               Home
             </span>
             <span
-              class="c6"
+              class="c5"
             />
           </div>
         </a>
       </li>
       <li
-        class="c1 c7"
+        class="c0 c6"
       >
         <a
           aria-labelledby=":r3:--label  "
-          class="c3 Link"
+          class="c2 Link"
           href="/about"
           id=":r3:"
           style="--subitem-depth: 0;"
           tabindex="0"
         >
           <div
-            class="c4"
+            class="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c8"
+              class="c7"
               id=":r3:--label"
             >
               About
             </span>
             <span
-              class="c6"
+              class="c5"
             />
           </div>
         </a>
       </li>
       <li
-        class="c1 c7"
+        class="c0 c6"
       >
         <a
           aria-labelledby=":r4:--label  "
-          class="c3 Link"
+          class="c2 Link"
           href="/contact"
           id=":r4:"
           style="--subitem-depth: 0;"
           tabindex="0"
         >
           <div
-            class="c4"
+            class="c3"
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c8"
+              class="c7"
               id=":r4:--label"
             >
               Contact
             </span>
             <span
-              class="c6"
+              class="c5"
             />
           </div>
         </a>
@@ -445,27 +440,27 @@ exports[`NavList renders a simple list 1`] = `
 `;
 
 exports[`NavList renders with groups 1`] = `
-.c1:first-child {
+.c0:first-child {
   display: none;
 }
 
-.c2 {
+.c1 {
   list-style: none;
 }
 
-.c2:not(:first-child) {
+.c1:not(:first-child) {
   margin-top: 8px;
 }
 
-.c2:has([data-component="GroupHeadingWrap"] + ul > [data-component="GroupHeadingWrap"]) > [data-component="GroupHeadingWrap"] {
+.c1:has([data-component="GroupHeadingWrap"] + ul > [data-component="GroupHeadingWrap"]) > [data-component="GroupHeadingWrap"] {
   display: none;
 }
 
-.c3 {
+.c2 {
   padding-inline-start: 0;
 }
 
-.c6 {
+.c5 {
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 6px;
@@ -483,13 +478,13 @@ exports[`NavList renders with groups 1`] = `
   font-size: 14px;
 }
 
-.c6:hover {
+.c5:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -504,7 +499,7 @@ exports[`NavList renders with groups 1`] = `
   min-width: 0;
 }
 
-.c8 {
+.c7 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -514,13 +509,13 @@ exports[`NavList renders with groups 1`] = `
   line-height: 20px;
 }
 
-.c9 {
+.c8 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c11 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -530,14 +525,7 @@ exports[`NavList renders with groups 1`] = `
   line-height: 20px;
 }
 
-.c0 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c5 {
+.c4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -571,32 +559,32 @@ exports[`NavList renders with groups 1`] = `
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c5[data-loading] {
+.c4[data-loading] {
   cursor: default;
 }
 
-.c5[aria-disabled],
-.c5[data-inactive] {
+.c4[aria-disabled],
+.c4[data-inactive] {
   cursor: not-allowed;
 }
 
-.c5[aria-disabled] [data-component="ActionList.Checkbox"],
-.c5[data-inactive] [data-component="ActionList.Checkbox"] {
+.c4[aria-disabled] [data-component="ActionList.Checkbox"],
+.c4[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c5[aria-disabled] [data-component="ActionList.Selection"],
-.c5[data-inactive] [data-component="ActionList.Selection"] {
+.c4[aria-disabled] [data-component="ActionList.Selection"],
+.c4[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c5 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c5 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -607,25 +595,25 @@ exports[`NavList renders with groups 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c5:not(:first-of-type) {
+.c4:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c4 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c5:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c5[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c5:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c4,
-.c5[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c5::after {
+.c4::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -636,12 +624,12 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
 }
 
-.c5[data-is-active-descendant] {
+.c4[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c5[data-is-active-descendant]::after {
+.c4[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -652,7 +640,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
 }
 
-.c10 {
+.c9 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -684,32 +672,32 @@ exports[`NavList renders with groups 1`] = `
   margin-bottom: unset;
 }
 
-.c10[data-loading] {
+.c9[data-loading] {
   cursor: default;
 }
 
-.c10[aria-disabled],
-.c10[data-inactive] {
+.c9[aria-disabled],
+.c9[data-inactive] {
   cursor: not-allowed;
 }
 
-.c10[aria-disabled] [data-component="ActionList.Checkbox"],
-.c10[data-inactive] [data-component="ActionList.Checkbox"] {
+.c9[aria-disabled] [data-component="ActionList.Checkbox"],
+.c9[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c10[aria-disabled] [data-component="ActionList.Selection"],
-.c10[data-inactive] [data-component="ActionList.Selection"] {
+.c9[aria-disabled] [data-component="ActionList.Selection"],
+.c9[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c9 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c9 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -720,30 +708,30 @@ exports[`NavList renders with groups 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c9:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c4 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c10[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c9[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c4,
-.c10[data-focus-visible-added] + li {
+.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c9[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c10[data-is-active-descendant] {
+.c9[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c10[data-is-active-descendant]::after {
+.c9[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -755,60 +743,60 @@ exports[`NavList renders with groups 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c5:focus,
-  .c5:focus-visible,
-  .c5 > a.focus-visible,
-  .c5[data-is-active-descendant] {
+  .c4:focus,
+  .c4:focus-visible,
+  .c4 > a.focus-visible,
+  .c4[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5:hover:not([aria-disabled]):not([data-inactive]) {
+  .c4:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c5:focus-visible,
-  .c5 > a.focus-visible,
-  .c5:focus.focus-visible {
+  .c4:focus-visible,
+  .c4 > a.focus-visible,
+  .c4:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c5:active:not([aria-disabled]):not([data-inactive]) {
+  .c4:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus,
-  .c10:focus-visible,
-  .c10 > a.focus-visible,
-  .c10[data-is-active-descendant] {
+  .c9:focus,
+  .c9:focus-visible,
+  .c9 > a.focus-visible,
+  .c9[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]):not([data-inactive]) {
+  .c9:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c10:focus-visible,
-  .c10 > a.focus-visible,
-  .c10:focus.focus-visible {
+  .c9:focus-visible,
+  .c9 > a.focus-visible,
+  .c9:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c10:active:not([aria-disabled]):not([data-inactive]) {
+  .c9:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -819,15 +807,17 @@ exports[`NavList renders with groups 1`] = `
     class=""
   >
     <ul
-      class="c0"
+      class="ActionList"
+      data-dividers="false"
+      data-variant="inset"
     >
       <li
         aria-hidden="true"
-        class="c1 Divider"
+        class="c0 Divider"
         data-component="ActionList.Divider"
       />
       <li
-        class="c2"
+        class="c1"
       >
         <div
           class="GroupHeadingWrap"
@@ -844,32 +834,32 @@ exports[`NavList renders with groups 1`] = `
         </div>
         <ul
           aria-labelledby=":r7:"
-          class="c3"
+          class="c2"
         >
           <li
-            class="c4 c5"
+            class="c3 c4"
           >
             <a
               aria-current="page"
               aria-labelledby=":r8:--label  "
-              class="c6 Link"
+              class="c5 Link"
               href="/getting-started"
               id=":r8:"
               style="--subitem-depth: 0;"
               tabindex="0"
             >
               <div
-                class="c7"
+                class="c6"
                 data-component="ActionList.Item--DividerContainer"
               >
                 <span
-                  class="c8"
+                  class="c7"
                   id=":r8:--label"
                 >
                   Getting started
                 </span>
                 <span
-                  class="c9"
+                  class="c8"
                 />
               </div>
             </a>
@@ -878,11 +868,11 @@ exports[`NavList renders with groups 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="c1 Divider"
+        class="c0 Divider"
         data-component="ActionList.Divider"
       />
       <li
-        class="c2"
+        class="c1"
       >
         <div
           class="GroupHeadingWrap"
@@ -899,31 +889,31 @@ exports[`NavList renders with groups 1`] = `
         </div>
         <ul
           aria-labelledby=":r9:"
-          class="c3"
+          class="c2"
         >
           <li
-            class="c4 c10"
+            class="c3 c9"
           >
             <a
               aria-labelledby=":ra:--label  "
-              class="c6 Link"
+              class="c5 Link"
               href="/Avatar"
               id=":ra:"
               style="--subitem-depth: 0;"
               tabindex="0"
             >
               <div
-                class="c7"
+                class="c6"
                 data-component="ActionList.Item--DividerContainer"
               >
                 <span
-                  class="c11"
+                  class="c10"
                   id=":ra:--label"
                 >
                   Avatar
                 </span>
                 <span
-                  class="c9"
+                  class="c8"
                 />
               </div>
             </a>
@@ -936,11 +926,11 @@ exports[`NavList renders with groups 1`] = `
 `;
 
 exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = `
-.c2 {
+.c1 {
   list-style: none;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -955,7 +945,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -966,7 +956,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   flex-grow: 1;
 }
 
-.c7 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -976,7 +966,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   line-height: 20px;
 }
 
-.c8 {
+.c7 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -990,18 +980,18 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   align-content: center;
 }
 
-[data-variant="danger"]:hover .c1,
-[data-variant="danger"]:active .c8 {
+[data-variant="danger"]:hover .c0,
+[data-variant="danger"]:active .c7 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c10 {
+.c9 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c13 {
+.c12 {
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -1020,13 +1010,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c13:hover {
+.c12:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c14 {
+.c13 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1036,29 +1026,22 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   line-height: 20px;
 }
 
-.c11 {
+.c10 {
   padding: 0;
   margin: 0;
   display: block;
 }
 
-.c0 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c15[data-focus-visible-added] + li {
+.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c12 {
+.c11 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1092,32 +1075,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c12[data-loading] {
+.c11[data-loading] {
   cursor: default;
 }
 
-.c12[aria-disabled],
-.c12[data-inactive] {
+.c11[aria-disabled],
+.c11[data-inactive] {
   cursor: not-allowed;
 }
 
-.c12[aria-disabled] [data-component="ActionList.Checkbox"],
-.c12[data-inactive] [data-component="ActionList.Checkbox"] {
+.c11[aria-disabled] [data-component="ActionList.Checkbox"],
+.c11[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c12[aria-disabled] [data-component="ActionList.Selection"],
-.c12[data-inactive] [data-component="ActionList.Selection"] {
+.c11[aria-disabled] [data-component="ActionList.Selection"],
+.c11[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c12 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c12 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1128,25 +1111,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c12:not(:first-of-type) {
+.c11:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c12[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c12[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c12::after {
+.c11::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1157,12 +1140,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c12[data-is-active-descendant] {
+.c11[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c12[data-is-active-descendant]::after {
+.c11[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1173,7 +1156,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c4 {
+.c3 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1206,32 +1189,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 600;
 }
 
-.c4[data-loading] {
+.c3[data-loading] {
   cursor: default;
 }
 
-.c4[aria-disabled],
-.c4[data-inactive] {
+.c3[aria-disabled],
+.c3[data-inactive] {
   cursor: not-allowed;
 }
 
-.c4[aria-disabled] [data-component="ActionList.Checkbox"],
-.c4[data-inactive] [data-component="ActionList.Checkbox"] {
+.c3[aria-disabled] [data-component="ActionList.Checkbox"],
+.c3[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c4[aria-disabled] [data-component="ActionList.Selection"],
-.c4[data-inactive] [data-component="ActionList.Selection"] {
+.c3[aria-disabled] [data-component="ActionList.Selection"],
+.c3[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1242,30 +1225,30 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c4:not(:first-of-type) {
+.c3:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c4[data-focus-visible-added] + li {
+.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4[data-is-active-descendant] {
+.c3[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c4[data-is-active-descendant]::after {
+.c3[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1276,7 +1259,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c9 {
+.c8 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -1291,60 +1274,60 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 @media (forced-colors:active) {
-  .c12:focus,
-  .c12:focus-visible,
-  .c12 > a.focus-visible,
-  .c12[data-is-active-descendant] {
+  .c11:focus,
+  .c11:focus-visible,
+  .c11 > a.focus-visible,
+  .c11[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12:hover:not([aria-disabled]):not([data-inactive]) {
+  .c11:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c12:focus-visible,
-  .c12 > a.focus-visible,
-  .c12:focus.focus-visible {
+  .c11:focus-visible,
+  .c11 > a.focus-visible,
+  .c11:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c12:active:not([aria-disabled]):not([data-inactive]) {
+  .c11:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
 }
 
 @media (forced-colors:active) {
-  .c4:focus,
-  .c4:focus-visible,
-  .c4 > a.focus-visible,
-  .c4[data-is-active-descendant] {
+  .c3:focus,
+  .c3:focus-visible,
+  .c3 > a.focus-visible,
+  .c3[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4:hover:not([aria-disabled]):not([data-inactive]) {
+  .c3:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c4:focus-visible,
-  .c4 > a.focus-visible,
-  .c4:focus.focus-visible {
+  .c3:focus-visible,
+  .c3 > a.focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c4:active:not([aria-disabled]):not([data-inactive]) {
+  .c3:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1355,40 +1338,42 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
     class=""
   >
     <ul
-      class="c0"
+      class="ActionList"
+      data-dividers="false"
+      data-variant="inset"
     >
       <li
         aria-labelledby=":r26:"
-        class="c1 c2"
+        class="c0 c1"
       >
         <button
           aria-controls=":r27:"
           aria-expanded="true"
           aria-labelledby=":r26:--label :r26:--trailing-visual "
-          class="c3 c4"
+          class="c2 c3"
           id=":r26:"
           tabindex="0"
         >
           <div
-            class="c1 c5"
+            class="c0 c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c1 c6"
+              class="c0 c5"
             >
               <span
-                class="c1 c7"
+                class="c0 c6"
                 id=":r26:--label"
               >
                 Item
               </span>
               <span
-                class="c1 c8"
+                class="c0 c7"
                 id=":r26:--trailing-visual"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-chevron-down c9"
+                  class="octicon octicon-chevron-down c8"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1405,40 +1390,40 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
               </span>
             </div>
             <span
-              class="c1 c10"
+              class="c0 c9"
             />
           </div>
         </button>
         <div>
           <ul
             aria-labelledby=":r26:"
-            class="c1 c11"
+            class="c0 c10"
             id=":r27:"
           >
             <li
-              class="c3 c12"
+              class="c2 c11"
             >
               <a
                 aria-current="page"
                 aria-labelledby=":r29:--label  "
-                class="c1 c13 Link"
+                class="c0 c12 Link"
                 href="#"
                 id=":r29:"
                 style="--subitem-depth: 1;"
                 tabindex="0"
               >
                 <div
-                  class="c1 c5"
+                  class="c0 c4"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c14"
+                    class="c0 c13"
                     id=":r29:--label"
                   >
                     Sub Item
                   </span>
                   <span
-                    class="c1 c10"
+                    class="c0 c9"
                   />
                 </div>
               </a>
@@ -1452,11 +1437,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 `;
 
 exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains the current item and is closed 1`] = `
-.c2 {
+.c1 {
   list-style: none;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1471,7 +1456,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   min-width: 0;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1482,7 +1467,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   flex-grow: 1;
 }
 
-.c8 {
+.c7 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1496,24 +1481,24 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   align-content: center;
 }
 
-[data-variant="danger"]:hover .c1,
-[data-variant="danger"]:active .c8 {
+[data-variant="danger"]:hover .c0,
+[data-variant="danger"]:active .c7 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c10 {
+.c9 {
   font-size: 12px;
   line-height: 16px;
   color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
 }
 
-.c11 {
+.c10 {
   padding: 0;
   margin: 0;
   display: none;
 }
 
-.c13 {
+.c12 {
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -1532,13 +1517,13 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c13:hover {
+.c12:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c7 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1548,23 +1533,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   line-height: 20px;
 }
 
-.c0 {
-  margin: 0;
-  padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c14[data-focus-visible-added] + li {
+.c13:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c13[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c12 {
+.c11 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1598,32 +1576,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c12[data-loading] {
+.c11[data-loading] {
   cursor: default;
 }
 
-.c12[aria-disabled],
-.c12[data-inactive] {
+.c11[aria-disabled],
+.c11[data-inactive] {
   cursor: not-allowed;
 }
 
-.c12[aria-disabled] [data-component="ActionList.Checkbox"],
-.c12[data-inactive] [data-component="ActionList.Checkbox"] {
+.c11[aria-disabled] [data-component="ActionList.Checkbox"],
+.c11[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c12[aria-disabled] [data-component="ActionList.Selection"],
-.c12[data-inactive] [data-component="ActionList.Selection"] {
+.c11[aria-disabled] [data-component="ActionList.Selection"],
+.c11[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c12 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c12 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1634,25 +1612,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c12:not(:first-of-type) {
+.c11:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c12[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c12[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c12::after {
+.c11::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1663,12 +1641,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c12[data-is-active-descendant] {
+.c11[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c12[data-is-active-descendant]::after {
+.c11[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1679,16 +1657,16 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c15[data-focus-visible-added] + li {
+.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4 {
+.c3 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1722,32 +1700,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c4[data-loading] {
+.c3[data-loading] {
   cursor: default;
 }
 
-.c4[aria-disabled],
-.c4[data-inactive] {
+.c3[aria-disabled],
+.c3[data-inactive] {
   cursor: not-allowed;
 }
 
-.c4[aria-disabled] [data-component="ActionList.Checkbox"],
-.c4[data-inactive] [data-component="ActionList.Checkbox"] {
+.c3[aria-disabled] [data-component="ActionList.Checkbox"],
+.c3[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c4[aria-disabled] [data-component="ActionList.Selection"],
-.c4[data-inactive] [data-component="ActionList.Selection"] {
+.c3[aria-disabled] [data-component="ActionList.Selection"],
+.c3[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c4 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1758,25 +1736,25 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c4:not(:first-of-type) {
+.c3:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
 
-.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c4[data-focus-visible-added] + li {
+.c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c4::after {
+.c3::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1787,12 +1765,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c4[data-is-active-descendant] {
+.c3[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c4[data-is-active-descendant]::after {
+.c3[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1803,7 +1781,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c9 {
+.c8 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
@@ -1818,30 +1796,30 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 @media (forced-colors:active) {
-  .c12:focus,
-  .c12:focus-visible,
-  .c12 > a.focus-visible,
-  .c12[data-is-active-descendant] {
+  .c11:focus,
+  .c11:focus-visible,
+  .c11 > a.focus-visible,
+  .c11[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12:hover:not([aria-disabled]):not([data-inactive]) {
+  .c11:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c12:focus-visible,
-  .c12 > a.focus-visible,
-  .c12:focus.focus-visible {
+  .c11:focus-visible,
+  .c11 > a.focus-visible,
+  .c11:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c12:active:not([aria-disabled]):not([data-inactive]) {
+  .c11:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1856,30 +1834,30 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 @media (forced-colors:active) {
-  .c4:focus,
-  .c4:focus-visible,
-  .c4 > a.focus-visible,
-  .c4[data-is-active-descendant] {
+  .c3:focus,
+  .c3:focus-visible,
+  .c3 > a.focus-visible,
+  .c3[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4:hover:not([aria-disabled]):not([data-inactive]) {
+  .c3:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c4:focus-visible,
-  .c4 > a.focus-visible,
-  .c4:focus.focus-visible {
+  .c3:focus-visible,
+  .c3 > a.focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c4:active:not([aria-disabled]):not([data-inactive]) {
+  .c3:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1890,40 +1868,42 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
     class=""
   >
     <ul
-      class="c0"
+      class="ActionList"
+      data-dividers="false"
+      data-variant="inset"
     >
       <li
         aria-labelledby=":r20:"
-        class="c1 c2"
+        class="c0 c1"
       >
         <button
           aria-controls=":r21:"
           aria-expanded="false"
           aria-labelledby=":r20:--label :r20:--trailing-visual "
-          class="c3 c4"
+          class="c2 c3"
           id=":r20:"
           tabindex="0"
         >
           <div
-            class="c1 c5"
+            class="c0 c4"
             data-component="ActionList.Item--DividerContainer"
           >
             <div
-              class="c1 c6"
+              class="c0 c5"
             >
               <span
-                class="c1 c7"
+                class="c0 c6"
                 id=":r20:--label"
               >
                 Item
               </span>
               <span
-                class="c1 c8"
+                class="c0 c7"
                 id=":r20:--trailing-visual"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-chevron-down c9"
+                  class="octicon octicon-chevron-down c8"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1940,40 +1920,40 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
               </span>
             </div>
             <span
-              class="c1 c10"
+              class="c0 c9"
             />
           </div>
         </button>
         <div>
           <ul
             aria-labelledby=":r20:"
-            class="c1 c11"
+            class="c0 c10"
             id=":r21:"
           >
             <li
-              class="c3 c12"
+              class="c2 c11"
             >
               <a
                 aria-current="page"
                 aria-labelledby=":r23:--label  "
-                class="c1 c13 Link"
+                class="c0 c12 Link"
                 href="#"
                 id=":r23:"
                 style="--subitem-depth: 1;"
                 tabindex="0"
               >
                 <div
-                  class="c1 c5"
+                  class="c0 c4"
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c7"
+                    class="c0 c6"
                     id=":r23:--label"
                   >
                     Sub Item
                   </span>
                   <span
-                    class="c1 c10"
+                    class="c0 c9"
                   />
                 </div>
               </a>


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR removes the CSS modules feature flag from the `ActionList/List` component and simplifies its rendering by consolidating styled variants into a single `BoxWithFallback` wrapper.

- Eliminated `styled-components` and manual `sx` merging in favor of `BoxWithFallback`.
- Removed feature-flag logic around CSS modules and cleaned up related imports.
- Updated tests to drop feature-flag scenarios and added a changeset entry.

### Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

| File                                                        | Description                                                      |
| ----------------------------------------------------------- | ---------------------------------------------------------------- |
| packages/react/src/ActionList/List.tsx                      | Replaced conditional styled/ul branches with `BoxWithFallback` and removed feature-flag code |
| packages/react/src/ActionList/ActionList.test.tsx           | Deleted tests specific to the removed CSS modules feature flag   |
| .changeset/shaggy-states-travel.md                          | Added a changeset to document the removal of the feature flag    |


<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**packages/react/src/ActionList/List.tsx:60**
* Add tests for the new `BoxWithFallback` implementation to verify that default styling resets are applied and that the component correctly handles `ref` forwarding.
```
<BoxWithFallback
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T19:19:29Z
user: login: francinelucca
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-08T00:17:03Z

Review comments:
diff_hunk: @@ -71,45 +57,19 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
         }}
       >
         {slots.heading}
-        {enabled ? (
-          sxProp !== defaultSxProp ? (
-            <ListBox
-              sx={merge(styles, sxProp as SxProp)}
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ListBox>
-          ) : (
-            <ul
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ul>
-          )
-        ) : (
-          <ListBox
-            sx={merge(styles, sxProp as SxProp)}
-            role={listRole}
-            aria-labelledby={ariaLabelledBy}
-            {...props}
-            ref={listRef}
-            className={className}
-          >
-            {childrenWithoutSlots}
-          </ListBox>
-        )}
+        <BoxWithFallback
+          as="ul"
+          sx={sxProp}
path: packages/react/src/ActionList/List.tsx
user: login: Copilot
body: Default list styles (margin reset, paddingInlineStart reset, and paddingY for the inset variant) were removed when replacing `ListBox`. Consider merging the original `styles` object with `sxProp` (e.g., `sx={merge(styles, sxProp)}`) to maintain the intended resets.
```suggestion
          sx={merge(
            {
              margin: 0,
              paddingInlineStart: 0,
              ...(variant === 'inset' && {paddingY: 2}),
            },
            sxProp,
          )}
```
created_at: 2025-05-07T19:19:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -71,45 +57,19 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
         }}
       >
         {slots.heading}
-        {enabled ? (
-          sxProp !== defaultSxProp ? (
-            <ListBox
-              sx={merge(styles, sxProp as SxProp)}
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ListBox>
-          ) : (
-            <ul
-              className={clsx(classes.ActionList, className)}
-              role={listRole}
-              aria-labelledby={ariaLabelledBy}
-              ref={listRef}
-              data-dividers={showDividers}
-              data-variant={variant}
-              {...props}
-            >
-              {childrenWithoutSlots}
-            </ul>
-          )
-        ) : (
-          <ListBox
-            sx={merge(styles, sxProp as SxProp)}
-            role={listRole}
-            aria-labelledby={ariaLabelledBy}
-            {...props}
-            ref={listRef}
-            className={className}
-          >
-            {childrenWithoutSlots}
-          </ListBox>
-        )}
+        <BoxWithFallback
path: packages/react/src/ActionList/List.tsx
user: login: Copilot
body: The forwarded ref (`forwardedRef` or `listRef`) is no longer passed to `BoxWithFallback`, which may break focus management and other ref-dependent logic. Pass `ref={listRef}` (or `forwardedRef`) to ensure ref forwarding works correctly.
created_at: 2025-05-07T19:19:29Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-07T17:52:55Z
body: ###  🦋  Changeset detected

Latest commit: fc1926e4dcdccf3200932d3631b62088bf47af9f

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name          | Type  |
| ------------- | ----- |
| @primer/react | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/primer/react/new/css_modules_remove_flag/actionlist_list?filename=.changeset/tiny-cooks-wait.md&value=---%0A%22%40primer%2Freact%22%3A%20patch%0A---%0A%0Achore(ActionList)%3A%20Remove%20the%20CSS%20modules%20feature%20flag%20from%20the%20ActionList%2FList%20component%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-07T17:53:23Z
body: <!-- recommend-integration-tests.yml -->

 :wave: Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the [integration workflow](https://gh.io/testing_primer_at_dotcom). Thanks!
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-07T17:56:13Z
body: ## size-limit report 📦 
| Path                               | Size                 |
| ---------------------------------- | -------------------- |
| packages/react/dist/browser.esm.js | 97.03 KB (-0.11% 🔽) |
| packages/react/dist/browser.umd.js | 97.49 KB (-0.06% 🔽) |
author_association: CONTRIBUTOR
user: login: primer-integration[bot]
created_at: 2025-05-07T18:18:02Z
body: <!-- test-progress: do not delete/edit this line -->
:wave: Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/376771
author_association: NONE
user: login: primer-integration[bot]
created_at: 2025-05-07T19:12:45Z
body: <!-- test-result: do not delete/edit this line -->
🟢 [golden-jobs](https://github.com/github/github/actions/runs/14891127399) completed with status `success`.
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-09T16:29:43Z
body: <!-- recommend-integration-tests.yml -->

 :wave: Hi, there are new commits since the last successful integration test. We recommend running the [integration workflow](https://gh.io/testing_primer_at_dotcom) once more, unless you are sure the new changes do not affect github/github. Thanks!
author_association: CONTRIBUTOR