From de9df1e3509ec1f7e0fc42e867cab22d09456124 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 23 Sep 2025 15:22:09 -0700
Subject: [PATCH 01/50] remove sx from docs

---
 .../react/src/ActionList/ActionList.docs.json | 56 -------------------
 packages/react/src/ActionList/Divider.tsx     |  3 +-
 2 files changed, 1 insertion(+), 58 deletions(-)

diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json
index 6afbe71c766..ccaf7865466 100644
--- a/packages/react/src/ActionList/ActionList.docs.json
+++ b/packages/react/src/ActionList/ActionList.docs.json
@@ -36,11 +36,6 @@
       "type": "AriaRole",
       "defaultValue": "",
       "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -113,11 +108,6 @@
           "required": false,
           "description": "id to attach to the root element of the Item",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -144,11 +134,6 @@
           "required": false,
           "description": "",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -183,11 +168,6 @@
           "required": false,
           "description": "Text describing why the item is inactive. This may be used when an item's usual functionality\nis unavailable due to a system error such as a database outage.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "passthrough": {
@@ -204,11 +184,6 @@
           "defaultValue": "",
           "required": true,
           "description": "Icon (or similar) positioned before item text."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -221,11 +196,6 @@
           "defaultValue": "",
           "required": true,
           "description": "Visual positioned after item text."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -282,11 +252,6 @@
           "defaultValue": "'inline'",
           "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "className",
           "type": "string | undefined",
@@ -337,11 +302,6 @@
           "defaultValue": "h3",
           "required": false,
           "description": "The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -385,22 +345,6 @@
           "type": "AriaRole",
           "defaultValue": "",
           "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ]
-    },
-    {
-      "filePath": "/Users/mperrotti/work-dir/react/packages/react/src/ActionList/Divider.tsx",
-      "name": "ActionList.Divider",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     }
diff --git a/packages/react/src/ActionList/Divider.tsx b/packages/react/src/ActionList/Divider.tsx
index 5caa365a49c..e6622594278 100644
--- a/packages/react/src/ActionList/Divider.tsx
+++ b/packages/react/src/ActionList/Divider.tsx
@@ -4,7 +4,7 @@ import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-export type ActionListDividerProps = SxProp & {
+export type ActionListDividerProps = {
   className?: string
 }
 
@@ -17,7 +17,6 @@ export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>>
       className={clsx(className, classes.Divider)}
       as="li"
       aria-hidden="true"
-      sx={sx}
       data-component="ActionList.Divider"
     />
   )

From 91be929ea9cde4718ff2428ae956c63a9ed862e9 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 23 Sep 2025 15:22:31 -0700
Subject: [PATCH 02/50] remove sx from ActionList/Divider

---
 packages/react/src/ActionList/Divider.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/ActionList/Divider.tsx b/packages/react/src/ActionList/Divider.tsx
index e6622594278..4576332fd2d 100644
--- a/packages/react/src/ActionList/Divider.tsx
+++ b/packages/react/src/ActionList/Divider.tsx
@@ -1,5 +1,4 @@
 import type React from 'react'
-import type {SxProp} from '../sx'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
@@ -11,7 +10,7 @@ export type ActionListDividerProps = {
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx, className}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className}) => {
   return (
     <BoxWithFallback
       className={clsx(className, classes.Divider)}

From ad5b233efbbcf92c127858fcc53c5838955d7415 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 23 Sep 2025 15:23:16 -0700
Subject: [PATCH 03/50] remove sx from ActionList/Description

---
 packages/react/src/ActionList/Description.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
index c4624c6f061..cb1e7bd425d 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/packages/react/src/ActionList/Description.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import Truncate from '../Truncate'
-import type {SxProp} from '../sx'
 import {ItemContext} from './shared'
 import classes from './ActionList.module.css'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
@@ -20,11 +19,10 @@ export type ActionListDescriptionProps = {
    * Whether the inline description should truncate the text on overflow.
    */
   truncate?: boolean
-} & SxProp
+}
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
-  sx,
   className,
   truncate,
   ...props
@@ -47,7 +45,6 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
     return (
       <BoxWithFallback
         as="span"
-        sx={sx}
         id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
         className={clsx(className, classes.Description)}
         data-component="ActionList.Description"

From d852c4009c6bd06e5043e1562307b7ff82dc55f3 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 23 Sep 2025 15:30:25 -0700
Subject: [PATCH 04/50] remove sx from ActionList/Group

---
 packages/react/src/ActionList/Group.tsx | 32 ++++++++-----------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 5fbb20ed254..10fec9a3934 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {useId} from '../hooks/useId'
-import type {SxProp} from '../sx'
 import {ListContext, type ActionListProps} from './shared'
 import type {ActionListHeadingProps} from './Heading'
 import {useSlots} from '../hooks/useSlots'
@@ -8,14 +7,13 @@ import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 import groupClasses from './Group.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type HeadingProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   className?: string
   children: React.ReactNode
   id?: string
-} & SxProp
+}
 
 const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>> = ({
   as: Component = 'h3',
@@ -25,10 +23,9 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
   ...rest
 }) => {
   return (
-    // Box is temporary to support lingering sx usage
-    <BoxWithFallback as={Component} className={className} id={id} {...rest}>
+    <Component className={className} id={id} {...rest}>
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 
@@ -58,12 +55,11 @@ export type ActionListGroupProps = React.HTMLAttributes<HTMLLIElement> & {
    * Secondary text which provides additional information about a `Group`.
    */
   auxiliaryText?: string
-} & SxProp & {
-    /**
-     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
-     */
-    selectionVariant?: ActionListProps['selectionVariant'] | false
-  }
+  /**
+   * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+   */
+  selectionVariant?: ActionListProps['selectionVariant'] | false
+}
 
 type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'> & {groupHeadingId: string | undefined}
 export const GroupContext = React.createContext<ContextProps>({
@@ -101,12 +97,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   }
 
   return (
-    <BoxWithFallback
-      as="li"
-      className={clsx(className, groupClasses.Group)}
-      role={listRole ? 'none' : undefined}
-      {...props}
-    >
+    <li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
         {title && !slots.groupHeading ? (
           // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -126,13 +117,12 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
           {slots.groupHeading ? childrenWithoutSlots : props.children}
         </ul>
       </GroupContext.Provider>
-    </BoxWithFallback>
+    </li>
   )
 }
 
 export type ActionListGroupHeadingProps = Pick<ActionListGroupProps, 'variant' | 'auxiliaryText'> &
   Omit<ActionListHeadingProps, 'as'> &
-  SxProp &
   React.HTMLAttributes<HTMLElement> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
     headingWrapElement?: 'div' | 'li'
@@ -156,7 +146,6 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
   auxiliaryText,
   children,
   className,
-  sx,
   headingWrapElement = 'div',
   ...props
 }) => {
@@ -208,7 +197,6 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
             className={clsx(className, groupClasses.GroupHeading)}
             as={as || 'h3'}
             id={groupHeadingId}
-            sx={sx}
             {...props}
           >
             {_internalBackwardCompatibleTitle ?? children}

From bc4c9f5230e8de38487b4ef003322c816a9cecd7 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 23 Sep 2025 15:36:32 -0700
Subject: [PATCH 05/50] remove sx from ActionList/Heading

---
 packages/react/src/ActionList/Heading.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 55f858f6db2..a59e9be08ca 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,5 +1,4 @@
 import React, {forwardRef} from 'react'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
@@ -17,7 +16,7 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
-} & SxProp
+}
 
 export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)

From 4ded00ee10e6792e8f475ca1845087a434545925 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 11:56:12 -0700
Subject: [PATCH 06/50] re-remove sx and BoxWithFallback from
 ActionList/Item.tsx

---
 packages/react/src/ActionList/Item.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 65408b623b4..de12e491d8c 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -15,7 +15,6 @@ import {invariant} from '../utils/invariant'
 import VisuallyHidden from '../_VisuallyHidden'
 import classes from './ActionList.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 
 type ActionListSubItemProps = {
@@ -57,7 +56,6 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
     selected = undefined,
     active = false,
     onSelect: onSelectUser,
-    sx: sxProp,
     id,
     role,
     loading,
@@ -246,10 +244,8 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
         trailingVisualId,
       }}
     >
-      <BoxWithFallback
+      <li
         {...containerProps}
-        as="li"
-        sx={sxProp}
         ref={listSemantics ? forwardedRef : null}
         data-variant={variant === 'danger' ? variant : undefined}
         data-active={active ? true : undefined}
@@ -313,7 +309,7 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
         </ItemWrapper>
         {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
         {slots.subItem}
-      </BoxWithFallback>
+      </li>
     </ItemContext.Provider>
   )
 }

From 06f10ffb26998fd0b31e1738d17274d08a991b5a Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 11:56:36 -0700
Subject: [PATCH 07/50] re-remove sx and BoxWithFallback from
 ActionList/List.tsx

---
 packages/react/src/ActionList/List.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index 97ead828fea..c5c3860f6fb 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -9,7 +9,6 @@ import {useProvidedRefOrCreate} from '../hooks'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const UnwrappedList = <As extends React.ElementType = 'ul'>(
   props: ActionListProps<As>,
@@ -67,8 +66,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
       }}
     >
       {slots.heading}
-      <BoxWithFallback
-        as={Component}
+      <Component
         className={clsx(classes.ActionList, className)}
         role={listRole}
         aria-labelledby={ariaLabelledBy}
@@ -78,7 +76,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
         {...restProps}
       >
         {childrenWithoutSlots}
-      </BoxWithFallback>
+      </Component>
     </ListContext.Provider>
   )
 }

From 9f092484578b276741d2fa6fab5aefd077feb47b Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 11:58:31 -0700
Subject: [PATCH 08/50] re-remove sx and BoxWithFallback from
 ActionList/LinkItem.tsx

---
 packages/react/src/ActionList/LinkItem.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 06b3cbcd035..cb18077eaf0 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -21,12 +21,12 @@ type LinkProps = {
 // LinkItem does not support selected, loading, variants, etc.
 export type ActionListLinkItemProps = Pick<
   ActionListItemProps,
-  'active' | 'children' | 'sx' | 'inactiveText' | 'variant' | 'size'
+  'active' | 'children' | 'inactiveText' | 'variant' | 'size'
 > &
   LinkProps
 
 export const LinkItem = React.forwardRef(
-  ({sx, active, inactiveText, variant, size, as: Component, className, ...props}, forwardedRef) => {
+  ({active, inactiveText, variant, size, as: Component, className, ...props}, forwardedRef) => {
     return (
       <Item
         className={className}
@@ -35,7 +35,6 @@ export const LinkItem = React.forwardRef(
         data-inactive={inactiveText ? true : undefined}
         variant={variant}
         size={size}
-        sx={sx}
         _PrivateItemWrapper={({children, onClick, ...rest}) => {
           const clickHandler = (event: React.MouseEvent<HTMLElement>) => {
             onClick && onClick(event)

From 6d2152646224cccf4068d7ed37383a3fc44cd8b7 Mon Sep 17 00:00:00 2001
From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com>
Date: Mon, 29 Sep 2025 12:00:27 -0700
Subject: [PATCH 09/50] Change ActionList component to major version

Update ActionList component and related components to no longer support sx/styled-components
---
 .changeset/eleven-cameras-hammer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eleven-cameras-hammer.md

diff --git a/.changeset/eleven-cameras-hammer.md b/.changeset/eleven-cameras-hammer.md
new file mode 100644
index 00000000000..f3ca0df772b
--- /dev/null
+++ b/.changeset/eleven-cameras-hammer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update ActionList component and related components to no longer support sx/styled-components

From f46759a2f0979324a3cc9c5b8e97e82c973b70cc Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 12:10:31 -0700
Subject: [PATCH 10/50] remove BWF from ActionList/Description.tsx

---
 packages/react/src/ActionList/Description.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
index cb1e7bd425d..3a326e9c10d 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/packages/react/src/ActionList/Description.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import Truncate from '../Truncate'
 import {ItemContext} from './shared'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import {clsx} from 'clsx'
 
 export type ActionListDescriptionProps = {
@@ -43,14 +42,13 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
 
   if (variant === 'block' || !truncate) {
     return (
-      <BoxWithFallback
-        as="span"
+      <span
         id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
         className={clsx(className, classes.Description)}
         data-component="ActionList.Description"
       >
         {props.children}
-      </BoxWithFallback>
+      </span>
     )
   } else {
     return (

From efeb72497d25e614a6551d5eec876c4ee66d8189 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 12:15:07 -0700
Subject: [PATCH 11/50] remove BWF from ActionList/Divider.tsx

---
 packages/react/src/ActionList/Divider.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/ActionList/Divider.tsx b/packages/react/src/ActionList/Divider.tsx
index 4576332fd2d..3e5168d11bb 100644
--- a/packages/react/src/ActionList/Divider.tsx
+++ b/packages/react/src/ActionList/Divider.tsx
@@ -1,22 +1,14 @@
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type ActionListDividerProps = {
   className?: string
 }
 
 /**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
+ * Visually separates `Items or `Groups in an `ActionList`.
  */
 export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className}) => {
-  return (
-    <BoxWithFallback
-      className={clsx(className, classes.Divider)}
-      as="li"
-      aria-hidden="true"
-      data-component="ActionList.Divider"
-    />
-  )
+  return <li className={clsx(className, classes.Divider)} aria-hidden="true" data-component="ActionList.Divider" />
 }

From 595242ed6843e2b6d8486d2037c7ffe319ff0dc1 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 12:20:26 -0700
Subject: [PATCH 12/50] remove sx from ActionList/shared.tsx

---
 packages/react/src/ActionList/shared.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/shared.ts b/packages/react/src/ActionList/shared.ts
index fe3d937c5f8..f652cf1b19c 100644
--- a/packages/react/src/ActionList/shared.ts
+++ b/packages/react/src/ActionList/shared.ts
@@ -1,5 +1,4 @@
 import React from 'react'
-import type {SxProp} from '../sx'
 import type {AriaRole} from '../utils/types'
 import type {PolymorphicProps} from '../utils/modern-polymorphic'
 
@@ -68,7 +67,7 @@ export type ActionListItemProps<As extends React.ElementType = 'li'> = ExcludeSe
    * @deprecated `as` prop has no effect on `ActionList.Item`, only `ActionList.LinkItem`
    */
   as?: As
-} & SxProp
+}
 
 type MenuItemProps = {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void
@@ -157,8 +156,7 @@ export type ActionListProps<As extends React.ElementType = 'ul'> = PolymorphicPr
     disableFocusZone?: boolean
     className?: string
   }>
-> &
-  SxProp
+>
 
 type ContextProps = Pick<
   ActionListProps<React.ElementType>,

From c47a12d924bf0efde5d90d7dd85438ab738668e1 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 12:22:07 -0700
Subject: [PATCH 13/50] remove sx and BWF from ActionList/Visuals.tsx

---
 packages/react/src/ActionList/Visuals.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index a7eb14db29a..e93f4ebca44 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -1,17 +1,15 @@
 import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Spinner from '../Spinner'
-import type {SxProp} from '../sx'
 import {ItemContext} from './shared'
 import {Tooltip, type TooltipProps} from '../TooltipV2'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-export type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
+export type VisualProps = React.HTMLAttributes<HTMLSpanElement>
 
 export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
-  return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} {...props} />
+  return <span className={clsx(className, classes.VisualWrap)} {...props} />
 }
 
 export type ActionListLeadingVisualProps = VisualProps

From 34486233a2ea57497cd31f9246de5ae2255b9258 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 16:11:59 -0700
Subject: [PATCH 14/50] update ActionList exports

---
 .../src/components/ActionList.tsx             | 49 +++++++++++++++++++
 packages/styled-react/src/index.tsx           | 15 +++++-
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/styled-react/src/components/ActionList.tsx

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
new file mode 100644
index 00000000000..238ef7cc92f
--- /dev/null
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -0,0 +1,49 @@
+import {
+  ActionList as PrimerActionList,
+  type ActionListProps as PrimerActionListProps,
+  type ActionListGroupProps as PrimerActionListGroupProps,
+  type ActionListGroupHeadingProps as PrimerActionListGroupHeadingProps,
+  type ActionListItemProps as PrimerActionListItemProps,
+  type ActionListLinkItemProps as PrimerActionListLinkItemProps,
+  type ActionListDividerProps as PrimerActionListDividerProps,
+  type ActionListDescriptionProps as PrimerActionListDescriptionProps,
+  type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
+  type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
+  type ActionListHeadingProps as PrimerActionListHeadingProps,
+  type ActionListTrailingActionProps as PrimerActionListTrailingActionProps,
+} from '@primer/react'
+import {Box} from './Box'
+import {forwardRef} from 'react'
+import type {SxProp} from '../sx'
+
+// Add SxProp to each exported type
+export type ActionListProps = PrimerActionListProps & SxProp
+export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
+export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
+export type ActionListItemProps = PrimerActionListItemProps & SxProp
+export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
+export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
+export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
+export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
+export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
+export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
+export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
+
+// Only wrap the root ActionList for sx support
+const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function ActionList(props, ref) {
+  return <Box as={PrimerActionList} ref={ref} {...props} />
+})
+
+// Re-attach subcomponents
+export const ActionList = Object.assign(ActionListImpl, {
+  Group: PrimerActionList.Group,
+  GroupHeading: PrimerActionList.GroupHeading,
+  Item: PrimerActionList.Item,
+  LinkItem: PrimerActionList.LinkItem,
+  Divider: PrimerActionList.Divider,
+  Description: PrimerActionList.Description,
+  LeadingVisual: PrimerActionList.LeadingVisual,
+  TrailingVisual: PrimerActionList.TrailingVisual,
+  Heading: PrimerActionList.Heading,
+  TrailingAction: PrimerActionList.TrailingAction,
+})
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index aed597490ab..c96e1672876 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -1,4 +1,3 @@
-export {ActionList} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
 export {Button} from '@primer/react'
 export {Details} from '@primer/react'
@@ -17,6 +16,20 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
+export {
+  ActionList,
+  type ActionListProps,
+  type ActionListGroupProps,
+  type ActionListGroupHeadingProps,
+  type ActionListItemProps,
+  type ActionListLinkItemProps,
+  type ActionListDividerProps,
+  type ActionListDescriptionProps,
+  type ActionListLeadingVisualProps,
+  type ActionListTrailingVisualProps,
+  type ActionListHeadingProps,
+  type ActionListTrailingActionProps,
+} from './components/ActionList'
 export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Avatar, type AvatarProps} from './components/Avatar'

From 5aa7f17e0cd6243df911c587b55d8d39bcc8e51c Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 18:05:37 -0700
Subject: [PATCH 15/50] remove ActionList-related sx usage that remained in
 UnderlineNav

---
 .../react/src/UnderlineNav/UnderlineNav.tsx   | 48 +++++++++++++++----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 0c8a417773d..7ab3a780348 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -6,7 +6,7 @@ import {useResizeObserver} from '../hooks/useResizeObserver'
 import {useTheme} from '../ThemeProvider'
 import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
 import VisuallyHidden from '../_VisuallyHidden'
-import {moreBtnStyles, getDividerStyle, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
+import {moreBtnStyles, getDividerStyle, menuStyles, menuItemStyles, baseMenuMinWidth} from './styles'
 import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
 import styled from 'styled-components'
 import {Button} from '../Button'
@@ -131,6 +131,20 @@ const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: numb
   return breakpoint
 }
 
+// Inline styles converted from baseMenuStyles and menuStyles for use as CSSProperties
+const baseMenuInlineStyles: React.CSSProperties = {
+  position: 'absolute',
+  zIndex: 1,
+  top: '90%',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  borderRadius: 12,
+  background: '#fff',
+  listStyle: 'none',
+  minWidth: `${baseMenuMinWidth}px`,
+  maxWidth: '640px',
+  right: 0,
+}
+
 export const UnderlineNav = forwardRef(
   (
     {
@@ -295,6 +309,24 @@ export const UnderlineNav = forwardRef(
         )
     }, navRef as RefObject<HTMLElement>)
 
+    // Compute menuInlineStyles if needed
+    let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles}
+    if (containerRef.current && listRef.current) {
+      const menuStyleObj = menuStyles(containerRef.current, listRef.current)
+      if (
+        menuStyleObj &&
+        typeof menuStyleObj === 'object' &&
+        'left' in menuStyleObj &&
+        typeof (menuStyleObj as any).left !== 'undefined'
+      ) {
+        menuInlineStyles = {
+          ...baseMenuInlineStyles,
+          right: undefined,
+          left: (menuStyleObj as any).left,
+        }
+      }
+    }
+
     return (
       <UnderlineNavContext.Provider
         value={{
@@ -336,12 +368,12 @@ export const UnderlineNav = forwardRef(
                   selectionVariant="single"
                   ref={containerRef}
                   id={disclosureWidgetId}
-                  sx={
-                    listRef.current?.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth
-                      ? baseMenuStyles
-                      : menuStyles(containerRef.current, listRef.current)
-                  }
-                  style={{display: isWidgetOpen ? 'block' : 'none'}}
+                  style={{
+                    ...(listRef.current?.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth
+                      ? baseMenuInlineStyles
+                      : menuInlineStyles),
+                    display: isWidgetOpen ? 'block' : 'none',
+                  }}
                 >
                   {menuItems.map((menuItem, index) => {
                     const {
@@ -368,7 +400,7 @@ export const UnderlineNav = forwardRef(
                     return (
                       <ActionList.LinkItem
                         key={menuItemChildren}
-                        sx={menuItemStyles}
+                        style={menuItemStyles}
                         onClick={(
                           event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
                         ) => {

From b54e0c5bb960bf350043a994ad747c74c7ec7973 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 18:25:22 -0700
Subject: [PATCH 16/50] fix incomplete imports for NavList

---
 .../styled-react/src/components/NavList.tsx   | 73 ++++++++++++-------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index 2519af4870e..e653e22f441 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -3,54 +3,77 @@ import type {
   NavListProps as PrimerNavListProps,
   NavListItemProps as PrimerNavListItemProps,
   NavListGroupProps as PrimerNavListGroupProps,
+  NavListGroupHeadingProps as PrimerNavListGroupHeadingProps,
+  NavListLeadingVisualProps as PrimerNavListLeadingVisualProps,
+  NavListTrailingVisualProps as PrimerNavListTrailingVisualProps,
+  NavListTrailingActionProps as PrimerNavListTrailingActionProps,
+  NavListGroupExpandProps as PrimerNavListGroupExpandProps,
 } from '@primer/react'
 import {forwardRef, type ComponentProps, type PropsWithChildren} from 'react'
 import {type SxProp} from '../sx'
 
 type NavListProps = PropsWithChildren<PrimerNavListProps> & SxProp
+type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> & SxProp
+type NavListGroupProps = PropsWithChildren<PrimerNavListGroupProps> & SxProp
+type NavListGroupHeadingProps = PropsWithChildren<PrimerNavListGroupHeadingProps> & SxProp
+type NavListLeadingVisualProps = PropsWithChildren<PrimerNavListLeadingVisualProps> & SxProp
+type NavListTrailingVisualProps = PropsWithChildren<PrimerNavListTrailingVisualProps> & SxProp
+type NavListTrailingActionProps = PropsWithChildren<PrimerNavListTrailingActionProps> & SxProp
+type NavListGroupExpandProps = PropsWithChildren<PrimerNavListGroupExpandProps> & SxProp
 
 const NavListImpl = forwardRef<HTMLElement, NavListProps>(function NavList(props, ref) {
   return <Box as={PrimerNavList} ref={ref} {...props} />
 })
 
-type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> & SxProp
-
 const NavListItem = forwardRef<HTMLAnchorElement, NavListItemProps>(function NavListItem(props, ref) {
-  // @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type
   return <Box as={PrimerNavList.Item} ref={ref} {...props} />
 })
 
-type NavListGroupProps = PropsWithChildren<PrimerNavListGroupProps> & SxProp
-
 const NavListGroup = forwardRef<HTMLLIElement, NavListGroupProps>(function NavListGroup(props, ref) {
-  // @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type
   return <Box as={PrimerNavList.Group} ref={ref} {...props} />
 })
 
+// Add missing subcomponents with sx support
+const NavListGroupHeading = forwardRef<HTMLDivElement, NavListGroupHeadingProps>(
+  function NavListGroupHeading(props, ref) {
+    return <Box as={PrimerNavList.GroupHeading} ref={ref} {...props} />
+  },
+)
+
+const NavListLeadingVisual = forwardRef<HTMLSpanElement, NavListLeadingVisualProps>(
+  function NavListLeadingVisual(props, ref) {
+    return <Box as={PrimerNavList.LeadingVisual} ref={ref} {...props} />
+  },
+)
+
+const NavListTrailingVisual = forwardRef<HTMLSpanElement, NavListTrailingVisualProps>(
+  function NavListTrailingVisual(props, ref) {
+    return <Box as={PrimerNavList.TrailingVisual} ref={ref} {...props} />
+  },
+)
+
+const NavListTrailingAction = forwardRef<HTMLButtonElement, NavListTrailingActionProps>(
+  function NavListTrailingAction(props, ref) {
+    return <Box as={PrimerNavList.TrailingAction} ref={ref} {...props} />
+  },
+)
+
+const NavListGroupExpand = forwardRef<HTMLButtonElement, NavListGroupExpandProps>(
+  function NavListGroupExpand(props, ref) {
+    return <Box as={PrimerNavList.GroupExpand} ref={ref} {...props} />
+  },
+)
+
 const NavList = Object.assign(NavListImpl, {
-  // Wrapped components that need sx support added back in
   Item: NavListItem,
   Group: NavListGroup,
-
-  // Re-exporting others directly
-  // TODO: try to remove typecasts to work around "non-portable types" TS error
+  GroupHeading: NavListGroupHeading,
+  LeadingVisual: NavListLeadingVisual,
+  TrailingVisual: NavListTrailingVisual,
+  TrailingAction: NavListTrailingAction,
+  GroupExpand: NavListGroupExpand,
   SubNav: PrimerNavList.SubNav as React.FC<React.PropsWithChildren<ComponentProps<typeof PrimerNavList.SubNav>>>,
   Divider: PrimerNavList.Divider as React.FC<React.PropsWithChildren<ComponentProps<typeof PrimerNavList.Divider>>>,
-  LeadingVisual: PrimerNavList.LeadingVisual as React.FC<
-    React.PropsWithChildren<ComponentProps<typeof PrimerNavList.LeadingVisual>>
-  >,
-  TrailingVisual: PrimerNavList.TrailingVisual as React.FC<
-    React.PropsWithChildren<ComponentProps<typeof PrimerNavList.TrailingVisual>>
-  >,
-  TrailingAction: PrimerNavList.TrailingAction as React.FC<
-    React.PropsWithChildren<ComponentProps<typeof PrimerNavList.TrailingAction>>
-  >,
-  GroupHeading: PrimerNavList.GroupHeading as React.FC<
-    React.PropsWithChildren<ComponentProps<typeof PrimerNavList.GroupHeading>>
-  >,
-  GroupExpand: PrimerNavList.GroupExpand as React.FC<
-    React.PropsWithChildren<ComponentProps<typeof PrimerNavList.GroupExpand>>
-  >,
 })
 
 export {NavList, type NavListProps}

From 4a3a9c813e4933e924894ecac533f59eabfc0a33 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 18:43:38 -0700
Subject: [PATCH 17/50] fix grouped exports

---
 packages/styled-react/src/components/ActionList.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 238ef7cc92f..9e2f2c8c09f 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -2,7 +2,6 @@ import {
   ActionList as PrimerActionList,
   type ActionListProps as PrimerActionListProps,
   type ActionListGroupProps as PrimerActionListGroupProps,
-  type ActionListGroupHeadingProps as PrimerActionListGroupHeadingProps,
   type ActionListItemProps as PrimerActionListItemProps,
   type ActionListLinkItemProps as PrimerActionListLinkItemProps,
   type ActionListDividerProps as PrimerActionListDividerProps,
@@ -15,11 +14,15 @@ import {
 import {Box} from './Box'
 import {forwardRef} from 'react'
 import type {SxProp} from '../sx'
+import type {ComponentPropsWithoutRef} from 'react'
 
 // Add SxProp to each exported type
 export type ActionListProps = PrimerActionListProps & SxProp
 export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
-export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
+
+// GroupHeading props type is not exported from @primer/react, so use ComponentPropsWithoutRef
+export type ActionListGroupHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.GroupHeading> & SxProp
+
 export type ActionListItemProps = PrimerActionListItemProps & SxProp
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
 export type ActionListDividerProps = PrimerActionListDividerProps & SxProp

From 95e4c696808dd40eddfd429b46e87ca0833fef87 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 19:38:43 -0700
Subject: [PATCH 18/50] update ActionList/TrailingAction.tsx to replace
 polymorphicForwardRef

---
 packages/react/src/ActionList/TrailingAction.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index d974bd0ab9a..2803f359719 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,7 +1,6 @@
 import type React from 'react'
-import {forwardRef} from 'react'
+import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {Button, IconButton} from '../Button'
-import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 
@@ -27,7 +26,8 @@ export type ActionListTrailingActionProps = ElementProps & {
   className?: string
 }
 
-export const TrailingAction = forwardRef(
+// Minimal change: just swap to fixedForwardRef
+const TrailingAction = fixedForwardRef(
   ({as = 'button', icon, label, href = null, className, loading, ...props}, forwardedRef) => {
     return (
       <span className={clsx(className, classes.TrailingAction)}>
@@ -64,4 +64,8 @@ export const TrailingAction = forwardRef(
       </span>
     )
   },
-) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>
+) as React.ForwardRefExoticComponent<any>
+
+TrailingAction.displayName = 'ActionList.TrailingAction'
+
+export {TrailingAction}

From afc959b4665decd5e75d5c7b9ca66e338149cfd7 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 29 Sep 2025 19:42:34 -0700
Subject: [PATCH 19/50] remove unused directives

---
 packages/react/src/ActionList/TrailingAction.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 2803f359719..5da189dfb9f 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -41,13 +41,11 @@ const TrailingAction = fixedForwardRef(
             href={href}
             loading={loading}
             data-loading={Boolean(loading)}
-            // @ts-expect-error StyledButton wants both Anchor and Button refs
             ref={forwardedRef}
             className={classes.TrailingActionButton}
             {...props}
           />
         ) : (
-          // @ts-expect-error shhh
           <Button
             variant="invisible"
             as={as}

From caac269954ddd167e5705746977d6f3dc98e76ac Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 11:35:22 -0700
Subject: [PATCH 20/50] lint fix

---
 packages/react/src/ActionList/TrailingAction.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 5da189dfb9f..2c7cdb96be4 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -26,7 +26,6 @@ export type ActionListTrailingActionProps = ElementProps & {
   className?: string
 }
 
-// Minimal change: just swap to fixedForwardRef
 const TrailingAction = fixedForwardRef(
   ({as = 'button', icon, label, href = null, className, loading, ...props}, forwardedRef) => {
     return (
@@ -41,11 +40,13 @@ const TrailingAction = fixedForwardRef(
             href={href}
             loading={loading}
             data-loading={Boolean(loading)}
+            // @ts-expect-error StyledButton wants both Anchor and Button refs
             ref={forwardedRef}
             className={classes.TrailingActionButton}
             {...props}
           />
         ) : (
+          // @ts-expect-error shhh
           <Button
             variant="invisible"
             as={as}
@@ -62,7 +63,7 @@ const TrailingAction = fixedForwardRef(
       </span>
     )
   },
-) as React.ForwardRefExoticComponent<any>
+) as React.ForwardRefExoticComponent<ActionListTrailingActionProps & React.RefAttributes<unknown>>
 
 TrailingAction.displayName = 'ActionList.TrailingAction'
 

From 2e979e1a984272bf5b703884d86d3305776910d9 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 11:54:06 -0700
Subject: [PATCH 21/50] update ActionList/Header.tsx to replace
 PolymorphicForwardRef

---
 packages/react/src/ActionList/Heading.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index a59e9be08ca..a9e0622c641 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,6 +1,6 @@
-import React, {forwardRef} from 'react'
+import React from 'react'
+import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
 import {ListContext} from './shared'
 import VisuallyHidden from '../_VisuallyHidden'
@@ -16,9 +16,11 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
+  children?: React.ReactNode
+  id?: string
 }
 
-export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
+const Heading = fixedForwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -36,6 +38,7 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false,
       <HeadingComponent
         as={as}
         variant={size}
+        // @ts-expect-error
         ref={innerRef}
         // use custom id if it is provided. Otherwise, use the id from the context
         id={props.id ?? headingId}
@@ -47,6 +50,8 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false,
       </HeadingComponent>
     </VisuallyHidden>
   )
-}) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
+}) as React.ForwardRefExoticComponent<ActionListHeadingProps & React.RefAttributes<unknown>>
 
 Heading.displayName = 'ActionList.Heading'
+
+export {Heading}

From 686f83cfca3ff76bdb82a2fbb88614554e4540f5 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 12:17:47 -0700
Subject: [PATCH 22/50] update exports for polymorphic subcomponents

---
 packages/react/src/ActionList/Heading.tsx           | 2 +-
 packages/styled-react/src/components/ActionList.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index a9e0622c641..52d6fe6f0a0 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -38,7 +38,7 @@ const Heading = fixedForwardRef(({as, size, children, visuallyHidden = false, cl
       <HeadingComponent
         as={as}
         variant={size}
-        // @ts-expect-error
+        // @ts-expect-error ts is mad but this is safe at runtime
         ref={innerRef}
         // use custom id if it is provided. Otherwise, use the id from the context
         id={props.id ?? headingId}
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 9e2f2c8c09f..54b7b958b7f 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -8,8 +8,6 @@ import {
   type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
-  type ActionListHeadingProps as PrimerActionListHeadingProps,
-  type ActionListTrailingActionProps as PrimerActionListTrailingActionProps,
 } from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
@@ -29,10 +27,10 @@ export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
 export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
 export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
 export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
-export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
-export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
 
-// Only wrap the root ActionList for sx support
+export type ActionListHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.Heading> & SxProp
+export type ActionListTrailingActionProps = ComponentPropsWithoutRef<typeof PrimerActionList.TrailingAction> & SxProp
+
 const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function ActionList(props, ref) {
   return <Box as={PrimerActionList} ref={ref} {...props} />
 })

From 7e2cf33c1260d1b6196941422f7ef5262c9ef66a Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 12:31:36 -0700
Subject: [PATCH 23/50] some ts check fixes

---
 .../react/src/ActionList/TrailingAction.tsx   |  1 +
 .../src/components/ActionList.tsx             | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 2c7cdb96be4..fc6e0c2d3a4 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -24,6 +24,7 @@ export type ActionListTrailingActionProps = ElementProps & {
   icon?: React.ElementType
   label: string
   className?: string
+  children?: React.ReactNode
 }
 
 const TrailingAction = fixedForwardRef(
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 54b7b958b7f..e30c3219f14 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -11,6 +11,7 @@ import {
 } from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
+import type {ForwardRefExoticComponent, RefAttributes} from 'react'
 import type {SxProp} from '../sx'
 import type {ComponentPropsWithoutRef} from 'react'
 
@@ -20,14 +21,12 @@ export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
 
 // GroupHeading props type is not exported from @primer/react, so use ComponentPropsWithoutRef
 export type ActionListGroupHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.GroupHeading> & SxProp
-
 export type ActionListItemProps = PrimerActionListItemProps & SxProp
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
 export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
 export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
 export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
 export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
-
 export type ActionListHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.Heading> & SxProp
 export type ActionListTrailingActionProps = ComponentPropsWithoutRef<typeof PrimerActionList.TrailingAction> & SxProp
 
@@ -35,8 +34,20 @@ const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function Ac
   return <Box as={PrimerActionList} ref={ref} {...props} />
 })
 
-// Re-attach subcomponents
-export const ActionList = Object.assign(ActionListImpl, {
+export type ActionListComponent = ForwardRefExoticComponent<ActionListProps & RefAttributes<HTMLUListElement>> & {
+  Group: typeof PrimerActionList.Group
+  GroupHeading: typeof PrimerActionList.GroupHeading
+  Item: typeof PrimerActionList.Item
+  LinkItem: typeof PrimerActionList.LinkItem
+  Divider: typeof PrimerActionList.Divider
+  Description: typeof PrimerActionList.Description
+  LeadingVisual: typeof PrimerActionList.LeadingVisual
+  TrailingVisual: typeof PrimerActionList.TrailingVisual
+  Heading: typeof PrimerActionList.Heading
+  TrailingAction: typeof PrimerActionList.TrailingAction
+}
+
+export const ActionList: ActionListComponent = Object.assign(ActionListImpl, {
   Group: PrimerActionList.Group,
   GroupHeading: PrimerActionList.GroupHeading,
   Item: PrimerActionList.Item,

From eded99e90142eee9bbaace6994b5f8d04f62b7c0 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 12:33:54 -0700
Subject: [PATCH 24/50] remove sx remaining in a story that uses ActionList

---
 .../KeybindingHint.examples.stories.module.css               | 5 +++++
 .../src/KeybindingHint/KeybindingHint.examples.stories.tsx   | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/KeybindingHint/KeybindingHint.examples.stories.module.css

diff --git a/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.module.css b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.module.css
new file mode 100644
index 00000000000..eafa2c80342
--- /dev/null
+++ b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.module.css
@@ -0,0 +1,5 @@
+.ActionListExample {
+  max-width: 300px;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
index 6945233a483..f02e03e3c4d 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {KeybindingHint, type KeybindingHintProps} from '.'
 import {Button, ActionList, FormControl, TextInput} from '..'
+import classes from './KeybindingHint.examples.stories.module.css'
 
 export default {
   title: 'Experimental/Components/KeybindingHint/Examples',
@@ -33,7 +34,7 @@ export const DangerButton: StoryObj<KeybindingHintProps> = {
 
 export const ActionListExample: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <ActionList sx={{maxWidth: '300px', border: '1px solid', borderColor: 'border.default', borderRadius: 2}}>
+    <ActionList className={classes.ActionListExample}>
       <ActionList.Item>Add comment</ActionList.Item>
       <ActionList.Item>
         Copy text{' '}

From 3604734818af093d06eead93434a1e9c77dd13d5 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 13:05:06 -0700
Subject: [PATCH 25/50] sx removal from stories that were using ActionList

---
 .../SelectPanel.examples.stories.module.css   | 17 ++++++++++
 .../SelectPanel.examples.stories.tsx          | 32 ++++++++++++-------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
index e7896e2c805..4c0fa3ab456 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
@@ -1,3 +1,11 @@
+.OpenIcon {
+  color: var(--fgColor-open);
+}
+
+.MergedIcon {
+  color: var(--fgColor-done);
+}
+
 .StoryContainer {
   display: flex;
   flex-direction: column;
@@ -64,3 +72,12 @@
 .FormControl {
   margin-bottom: var(--base-size-8);
 }
+
+.ButtonContentStartJustify [data-component='buttonContent'] {
+  width: 200px;
+  justify-content: start;
+}
+
+.HideActionListSelection [data-component='ActionList.Selection'] {
+  display: none;
+}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index 49506802d89..ef678664f71 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -87,9 +87,9 @@ export const WithGroups = () => {
   const initialAssigneeIds = data.issue.assigneeIds // mock initial state
   const [selectedAssigneeIds, setSelectedAssigneeIds] = React.useState<string[]>(initialAssigneeIds)
 
-  const onCollaboratorSelect = (colloratorId: string) => {
-    if (!selectedAssigneeIds.includes(colloratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])
-    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== colloratorId))
+  const onCollaboratorSelect = (collaboratorId: string) => {
+    if (!selectedAssigneeIds.includes(collaboratorId)) setSelectedAssigneeIds([...selectedAssigneeIds, collaboratorId])
+    else setSelectedAssigneeIds(selectedAssigneeIds.filter(id => id !== collaboratorId))
   }
 
   const onClearSelection = () => setSelectedAssigneeIds([])
@@ -148,7 +148,8 @@ export const WithGroups = () => {
         <SelectPanel.Button
           variant="invisible"
           trailingAction={GearIcon}
-          sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+          style={{width: '200px'}}
+          className={classes.ButtonContentStartJustify}
         >
           Reviewers
         </SelectPanel.Button>
@@ -570,7 +571,11 @@ export const WithFilterButtons = () => {
           <div id="filters" className={classes.FilterButtons}>
             <Button
               variant="invisible"
-              sx={{fontWeight: selectedFilter === 'branches' ? 'semibold' : 'normal', color: 'fg.default'}}
+              style={{
+                fontWeight:
+                  selectedFilter === 'branches' ? 'var(--base-text-weight-medium)' : 'var(--base-text-weight-normal)',
+                color: 'var(--fgColor-default)',
+              }}
               onClick={() => setSelectedFilter('branches')}
               count={20}
             >
@@ -578,7 +583,11 @@ export const WithFilterButtons = () => {
             </Button>
             <Button
               variant="invisible"
-              sx={{fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal', color: 'fg.default'}}
+              style={{
+                fontWeight:
+                  selectedFilter === 'tags' ? 'var(--base-text-weight-medium)' : 'var(--base-text-weight-normal)',
+                color: 'var(--fgColor-default)',
+              }}
               onClick={() => setSelectedFilter('tags')}
               count={8}
             >
@@ -728,8 +737,8 @@ export const NestedSelection = () => {
 
   /* Second level: Pull request selection */
   const iconMap = {
-    open: <Octicon icon={GitPullRequestIcon} sx={{color: 'open.emphasis'}} />,
-    merged: <Octicon icon={GitMergeIcon} sx={{color: 'done.emphasis'}} />,
+    open: <Octicon icon={GitPullRequestIcon} className={classes.OpenIcon} />,
+    merged: <Octicon icon={GitMergeIcon} className={classes.MergedIcon} />,
     draft: <Octicon icon={GitPullRequestDraftIcon} />,
   }
 
@@ -754,7 +763,7 @@ export const NestedSelection = () => {
         onClick={() => setPanelToShow('repos')}
         variant="invisible"
         trailingAction={GearIcon}
-        sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+        className={classes.ButtonContentStartJustify}
       >
         Development
       </Button>
@@ -791,7 +800,7 @@ export const NestedSelection = () => {
               key={repo.name}
               selected={selectedRepo === `${repo.org}/${repo.name}`}
               onSelect={() => setSelectedRepo(`${repo.org}/${repo.name}`)}
-              sx={{'[data-component="ActionList.Selection"]': {display: 'none'}}}
+              className={classes.HideActionListSelection}
             >
               <ActionList.LeadingVisual>
                 <Avatar src={`https://github.com/${repo.org}.png`} />
@@ -863,7 +872,6 @@ export const WithinForm = () => {
         <FormControl.Label>SelectPanel within FormControl</FormControl.Label>
         <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit}>
           <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
-
           <ActionList>
             {itemsToShow.map(tag => (
               <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
@@ -1002,7 +1010,7 @@ export const CreateNewRow = () => {
                   leadingVisual={PlusCircleIcon}
                   block
                   alignContent="start"
-                  sx={{'[data-component=text]': {fontWeight: 'normal'}}}
+                  style={{fontWeight: 'var(--base-text-weight-normal)'}}
                   onClick={openCreateLabelDialog}
                 >
                   Create new label &quot;{query}&quot;...

From 514ae963e60e8db9d9276f6dc1d1a29912f5ebba Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 13:50:11 -0700
Subject: [PATCH 26/50] more ts error fixes

---
 packages/react/src/ActionList/TrailingAction.tsx    | 12 ++++--------
 packages/styled-react/src/components/ActionList.tsx |  7 ++++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index fc6e0c2d3a4..f89e97e45a8 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -5,20 +5,16 @@ import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 
 type ElementProps =
-  | {
+  | ({
       as?: 'button'
       href?: never
-      /**
-       * Specify whether the action is in a loading state.
-       * Only available for button elements.
-       */
       loading?: boolean
-    }
-  | {
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>)
+  | ({
       as: 'a'
       href: string
       loading?: never
-    }
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
 
 export type ActionListTrailingActionProps = ElementProps & {
   icon?: React.ElementType
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index e30c3219f14..9220073ec0c 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -11,9 +11,8 @@ import {
 } from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
-import type {ForwardRefExoticComponent, RefAttributes} from 'react'
+import type {ComponentPropsWithoutRef, ForwardRefExoticComponent, RefAttributes} from 'react'
 import type {SxProp} from '../sx'
-import type {ComponentPropsWithoutRef} from 'react'
 
 // Add SxProp to each exported type
 export type ActionListProps = PrimerActionListProps & SxProp
@@ -34,7 +33,9 @@ const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function Ac
   return <Box as={PrimerActionList} ref={ref} {...props} />
 })
 
-export type ActionListComponent = ForwardRefExoticComponent<ActionListProps & RefAttributes<HTMLUListElement>> & {
+export type ActionListComponent = ForwardRefExoticComponent<
+  Omit<ActionListProps, 'ref'> & RefAttributes<HTMLUListElement>
+> & {
   Group: typeof PrimerActionList.Group
   GroupHeading: typeof PrimerActionList.GroupHeading
   Item: typeof PrimerActionList.Item

From 6dd2dbd91309ce8c9113a9e541d9e7f8566dc9b4 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Tue, 30 Sep 2025 13:50:43 -0700
Subject: [PATCH 27/50] re-add accidentally deleted comment

---
 packages/react/src/ActionList/TrailingAction.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index f89e97e45a8..513c8a62bd3 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -8,6 +8,10 @@ type ElementProps =
   | ({
       as?: 'button'
       href?: never
+      /**
+       * Specify whether the action is in a loading state.
+       * Only available for button elements.
+       */
       loading?: boolean
     } & React.ButtonHTMLAttributes<HTMLButtonElement>)
   | ({

From b504c1f0789fb175f26ab1ac8b03f0f7bf0df8f4 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 08:53:24 -0700
Subject: [PATCH 28/50] update exports again

---
 .../src/components/ActionList.tsx             | 39 +++++++++----------
 packages/styled-react/src/index.tsx           | 15 +------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 9220073ec0c..05ef1ed2334 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -2,40 +2,37 @@ import {
   ActionList as PrimerActionList,
   type ActionListProps as PrimerActionListProps,
   type ActionListGroupProps as PrimerActionListGroupProps,
+  type ActionListGroupHeadingProps as PrimerActionListGroupHeadingProps,
   type ActionListItemProps as PrimerActionListItemProps,
   type ActionListLinkItemProps as PrimerActionListLinkItemProps,
   type ActionListDividerProps as PrimerActionListDividerProps,
   type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
+  type ActionListHeadingProps as PrimerActionListHeadingProps,
+  type ActionListTrailingActionProps as PrimerActionListTrailingActionProps,
 } from '@primer/react'
 import {Box} from './Box'
-import {forwardRef} from 'react'
-import type {ComponentPropsWithoutRef, ForwardRefExoticComponent, RefAttributes} from 'react'
+import {forwardRef, type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
 
-// Add SxProp to each exported type
-export type ActionListProps = PrimerActionListProps & SxProp
-export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
-
-// GroupHeading props type is not exported from @primer/react, so use ComponentPropsWithoutRef
-export type ActionListGroupHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.GroupHeading> & SxProp
-export type ActionListItemProps = PrimerActionListItemProps & SxProp
-export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
-export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
-export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
-export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
-export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
-export type ActionListHeadingProps = ComponentPropsWithoutRef<typeof PrimerActionList.Heading> & SxProp
-export type ActionListTrailingActionProps = ComponentPropsWithoutRef<typeof PrimerActionList.TrailingAction> & SxProp
+export type ActionListProps = PropsWithChildren<PrimerActionListProps> & SxProp
+export type ActionListGroupProps = PropsWithChildren<PrimerActionListGroupProps> & SxProp
+export type ActionListGroupHeadingProps = PropsWithChildren<PrimerActionListGroupHeadingProps> & SxProp
+export type ActionListItemProps = PropsWithChildren<PrimerActionListItemProps> & SxProp
+export type ActionListLinkItemProps = PropsWithChildren<PrimerActionListLinkItemProps> & SxProp
+export type ActionListDividerProps = PropsWithChildren<PrimerActionListDividerProps> & SxProp
+export type ActionListDescriptionProps = PropsWithChildren<PrimerActionListDescriptionProps> & SxProp
+export type ActionListLeadingVisualProps = PropsWithChildren<PrimerActionListLeadingVisualProps> & SxProp
+export type ActionListTrailingVisualProps = PropsWithChildren<PrimerActionListTrailingVisualProps> & SxProp
+export type ActionListHeadingProps = PropsWithChildren<PrimerActionListHeadingProps> & SxProp
+export type ActionListTrailingActionProps = PropsWithChildren<PrimerActionListTrailingActionProps> & SxProp
 
 const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function ActionList(props, ref) {
   return <Box as={PrimerActionList} ref={ref} {...props} />
 })
 
-export type ActionListComponent = ForwardRefExoticComponent<
-  Omit<ActionListProps, 'ref'> & RefAttributes<HTMLUListElement>
-> & {
+type ActionListComponent = typeof ActionListImpl & {
   Group: typeof PrimerActionList.Group
   GroupHeading: typeof PrimerActionList.GroupHeading
   Item: typeof PrimerActionList.Item
@@ -48,7 +45,7 @@ export type ActionListComponent = ForwardRefExoticComponent<
   TrailingAction: typeof PrimerActionList.TrailingAction
 }
 
-export const ActionList: ActionListComponent = Object.assign(ActionListImpl, {
+const ActionList: ActionListComponent = Object.assign(ActionListImpl, {
   Group: PrimerActionList.Group,
   GroupHeading: PrimerActionList.GroupHeading,
   Item: PrimerActionList.Item,
@@ -60,3 +57,5 @@ export const ActionList: ActionListComponent = Object.assign(ActionListImpl, {
   Heading: PrimerActionList.Heading,
   TrailingAction: PrimerActionList.TrailingAction,
 })
+
+export {ActionList}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index c96e1672876..6f10f371517 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -16,20 +16,7 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
-export {
-  ActionList,
-  type ActionListProps,
-  type ActionListGroupProps,
-  type ActionListGroupHeadingProps,
-  type ActionListItemProps,
-  type ActionListLinkItemProps,
-  type ActionListDividerProps,
-  type ActionListDescriptionProps,
-  type ActionListLeadingVisualProps,
-  type ActionListTrailingVisualProps,
-  type ActionListHeadingProps,
-  type ActionListTrailingActionProps,
-} from './components/ActionList'
+export {ActionList, type ActionListProps} from './components/ActionList'
 export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Avatar, type AvatarProps} from './components/Avatar'

From 402884589dbe6d2d5b2981ad35e69784cc50e3e4 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 08:55:18 -0700
Subject: [PATCH 29/50] revert some changes to test

---
 packages/react/src/ActionList/Heading.tsx     | 16 ++++++---------
 .../react/src/ActionList/TrailingAction.tsx   | 20 ++++++++-----------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 52d6fe6f0a0..55f858f6db2 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-import {fixedForwardRef} from '../utils/modern-polymorphic'
+import React, {forwardRef} from 'react'
+import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
 import {ListContext} from './shared'
 import VisuallyHidden from '../_VisuallyHidden'
@@ -16,11 +17,9 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
-  children?: React.ReactNode
-  id?: string
-}
+} & SxProp
 
-const Heading = fixedForwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
+export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -38,7 +37,6 @@ const Heading = fixedForwardRef(({as, size, children, visuallyHidden = false, cl
       <HeadingComponent
         as={as}
         variant={size}
-        // @ts-expect-error ts is mad but this is safe at runtime
         ref={innerRef}
         // use custom id if it is provided. Otherwise, use the id from the context
         id={props.id ?? headingId}
@@ -50,8 +48,6 @@ const Heading = fixedForwardRef(({as, size, children, visuallyHidden = false, cl
       </HeadingComponent>
     </VisuallyHidden>
   )
-}) as React.ForwardRefExoticComponent<ActionListHeadingProps & React.RefAttributes<unknown>>
+}) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
 
 Heading.displayName = 'ActionList.Heading'
-
-export {Heading}
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 513c8a62bd3..d974bd0ab9a 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,11 +1,12 @@
 import type React from 'react'
-import {fixedForwardRef} from '../utils/modern-polymorphic'
+import {forwardRef} from 'react'
 import {Button, IconButton} from '../Button'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 
 type ElementProps =
-  | ({
+  | {
       as?: 'button'
       href?: never
       /**
@@ -13,21 +14,20 @@ type ElementProps =
        * Only available for button elements.
        */
       loading?: boolean
-    } & React.ButtonHTMLAttributes<HTMLButtonElement>)
-  | ({
+    }
+  | {
       as: 'a'
       href: string
       loading?: never
-    } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
+    }
 
 export type ActionListTrailingActionProps = ElementProps & {
   icon?: React.ElementType
   label: string
   className?: string
-  children?: React.ReactNode
 }
 
-const TrailingAction = fixedForwardRef(
+export const TrailingAction = forwardRef(
   ({as = 'button', icon, label, href = null, className, loading, ...props}, forwardedRef) => {
     return (
       <span className={clsx(className, classes.TrailingAction)}>
@@ -64,8 +64,4 @@ const TrailingAction = fixedForwardRef(
       </span>
     )
   },
-) as React.ForwardRefExoticComponent<ActionListTrailingActionProps & React.RefAttributes<unknown>>
-
-TrailingAction.displayName = 'ActionList.TrailingAction'
-
-export {TrailingAction}
+) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>

From bb22fd7a25d0676722b5d06f09931ab1489c866c Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 09:53:54 -0700
Subject: [PATCH 30/50] fix type issue

---
 packages/react/src/UnderlineNav/UnderlineNav.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 7ab3a780348..1ccb37dc51a 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -317,12 +317,12 @@ export const UnderlineNav = forwardRef(
         menuStyleObj &&
         typeof menuStyleObj === 'object' &&
         'left' in menuStyleObj &&
-        typeof (menuStyleObj as any).left !== 'undefined'
+        typeof (menuStyleObj as {left: string | number}).left !== 'undefined'
       ) {
         menuInlineStyles = {
           ...baseMenuInlineStyles,
           right: undefined,
-          left: (menuStyleObj as any).left,
+          left: (menuStyleObj as {left: string | number}).left,
         }
       }
     }

From 84ea8f894fbc12f329652396858e0928915b8e52 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 12:41:10 -0700
Subject: [PATCH 31/50] rm sx from Heading.tsx and update styled-react stuff

---
 packages/react/src/ActionList/Heading.tsx     |   3 +-
 .../src/components/ActionList.tsx             | 130 +++++++++++-------
 2 files changed, 85 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 55f858f6db2..a59e9be08ca 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,5 +1,4 @@
 import React, {forwardRef} from 'react'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
@@ -17,7 +16,7 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
-} & SxProp
+}
 
 export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 05ef1ed2334..c7d8f2bb197 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,61 +1,99 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
 import {
   ActionList as PrimerActionList,
   type ActionListProps as PrimerActionListProps,
-  type ActionListGroupProps as PrimerActionListGroupProps,
-  type ActionListGroupHeadingProps as PrimerActionListGroupHeadingProps,
   type ActionListItemProps as PrimerActionListItemProps,
   type ActionListLinkItemProps as PrimerActionListLinkItemProps,
+  type ActionListGroupProps as PrimerActionListGroupProps,
   type ActionListDividerProps as PrimerActionListDividerProps,
   type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
-  type ActionListHeadingProps as PrimerActionListHeadingProps,
-  type ActionListTrailingActionProps as PrimerActionListTrailingActionProps,
 } from '@primer/react'
+import {sx, type SxProp} from '../sx'
 import {Box} from './Box'
-import {forwardRef, type PropsWithChildren} from 'react'
-import type {SxProp} from '../sx'
-
-export type ActionListProps = PropsWithChildren<PrimerActionListProps> & SxProp
-export type ActionListGroupProps = PropsWithChildren<PrimerActionListGroupProps> & SxProp
-export type ActionListGroupHeadingProps = PropsWithChildren<PrimerActionListGroupHeadingProps> & SxProp
-export type ActionListItemProps = PropsWithChildren<PrimerActionListItemProps> & SxProp
-export type ActionListLinkItemProps = PropsWithChildren<PrimerActionListLinkItemProps> & SxProp
-export type ActionListDividerProps = PropsWithChildren<PrimerActionListDividerProps> & SxProp
-export type ActionListDescriptionProps = PropsWithChildren<PrimerActionListDescriptionProps> & SxProp
-export type ActionListLeadingVisualProps = PropsWithChildren<PrimerActionListLeadingVisualProps> & SxProp
-export type ActionListTrailingVisualProps = PropsWithChildren<PrimerActionListTrailingVisualProps> & SxProp
-export type ActionListHeadingProps = PropsWithChildren<PrimerActionListHeadingProps> & SxProp
-export type ActionListTrailingActionProps = PropsWithChildren<PrimerActionListTrailingActionProps> & SxProp
-
-const ActionListImpl = forwardRef<HTMLUListElement, ActionListProps>(function ActionList(props, ref) {
-  return <Box as={PrimerActionList} ref={ref} {...props} />
+
+type PrimerActionListGroupHeadingProps = React.ComponentProps<typeof PrimerActionList.GroupHeading>
+type PrimerActionListHeadingProps = React.ComponentProps<typeof PrimerActionList.Heading>
+type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>
+
+export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
+export type ActionListItemProps = PrimerActionListItemProps & SxProp
+export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
+export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
+export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
+export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
+export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
+export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
+export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
+export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
+export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
+
+const StyledActionListBase = styled(PrimerActionList).withConfig({
+  shouldForwardProp: (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) =>
+    prop !== 'sx' && defaultValidatorFn(prop),
+})`
+  ${sx}
+`
+
+const ActionListRoot = React.forwardRef(function ActionListRoot<As extends React.ElementType = 'ul'>(
+  props: ActionListProps<As>,
+  ref: React.Ref<any>,
+) {
+  const {as, ...rest} = props
+  return <StyledActionListBase ref={ref} as={as as any} {...rest} />
+}) as <As extends React.ElementType = 'ul'>(
+  p: ActionListProps<As> & {ref?: React.Ref<any>},
+) => React.ReactElement | null
+
+const Item = forwardRef<any, ActionListItemProps>(function Item(props, ref) {
+  return <Box as={PrimerActionList.Item as any} ref={ref} {...props} />
+})
+
+const LinkItem = forwardRef<any, ActionListLinkItemProps>(function LinkItem(props, ref) {
+  return <Box as={PrimerActionList.LinkItem as any} ref={ref} {...props} />
+})
+
+const Group = forwardRef<any, ActionListGroupProps>(function Group(props, ref) {
+  return <Box as={PrimerActionList.Group as any} ref={ref} {...props} />
+})
+
+const GroupHeading = (props: ActionListGroupHeadingProps) => (
+  <Box as={PrimerActionList.GroupHeading as any} {...props} />
+)
+
+const Divider = forwardRef<any, ActionListDividerProps>(function Divider(props, ref) {
+  return <Box as={PrimerActionList.Divider as any} ref={ref} {...props} />
+})
+
+const Description = (props: ActionListDescriptionProps) => <Box as={PrimerActionList.Description as any} {...props} />
+
+const LeadingVisual = (props: ActionListLeadingVisualProps) => (
+  <Box as={PrimerActionList.LeadingVisual as any} {...props} />
+)
+
+const TrailingVisual = (props: ActionListTrailingVisualProps) => (
+  <Box as={PrimerActionList.TrailingVisual as any} {...props} />
+)
+
+const Heading = forwardRef<any, ActionListHeadingProps>(function Heading(props, ref) {
+  return <Box ref={ref} {...props} as={PrimerActionList.Heading as any} />
 })
 
-type ActionListComponent = typeof ActionListImpl & {
-  Group: typeof PrimerActionList.Group
-  GroupHeading: typeof PrimerActionList.GroupHeading
-  Item: typeof PrimerActionList.Item
-  LinkItem: typeof PrimerActionList.LinkItem
-  Divider: typeof PrimerActionList.Divider
-  Description: typeof PrimerActionList.Description
-  LeadingVisual: typeof PrimerActionList.LeadingVisual
-  TrailingVisual: typeof PrimerActionList.TrailingVisual
-  Heading: typeof PrimerActionList.Heading
-  TrailingAction: typeof PrimerActionList.TrailingAction
-}
-
-const ActionList: ActionListComponent = Object.assign(ActionListImpl, {
-  Group: PrimerActionList.Group,
-  GroupHeading: PrimerActionList.GroupHeading,
-  Item: PrimerActionList.Item,
-  LinkItem: PrimerActionList.LinkItem,
-  Divider: PrimerActionList.Divider,
-  Description: PrimerActionList.Description,
-  LeadingVisual: PrimerActionList.LeadingVisual,
-  TrailingVisual: PrimerActionList.TrailingVisual,
-  Heading: PrimerActionList.Heading,
-  TrailingAction: PrimerActionList.TrailingAction,
+const TrailingAction = forwardRef<any, ActionListTrailingActionProps>(function TrailingAction(props, ref) {
+  return <Box as={PrimerActionList.TrailingAction as any} ref={ref} {...props} />
 })
 
-export {ActionList}
+export const ActionList = Object.assign(ActionListRoot, {
+  Item,
+  LinkItem,
+  Group,
+  GroupHeading,
+  Divider,
+  Description,
+  LeadingVisual,
+  TrailingVisual,
+  Heading,
+  TrailingAction,
+})

From fdcf623c0ee423cc7179d1e6d5063077005af09d Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 15:23:10 -0700
Subject: [PATCH 32/50] update styled-react stuff again

---
 .../src/components/ActionList.tsx             | 114 ++++++++++--------
 1 file changed, 65 insertions(+), 49 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index c7d8f2bb197..3b445450c45 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -12,6 +12,7 @@ import {
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
 } from '@primer/react'
 import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
 
 type PrimerActionListGroupHeadingProps = React.ComponentProps<typeof PrimerActionList.GroupHeading>
@@ -30,70 +31,85 @@ export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps
 export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
 export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
 
-const StyledActionListBase = styled(PrimerActionList).withConfig({
-  shouldForwardProp: (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) =>
-    prop !== 'sx' && defaultValidatorFn(prop),
+const StyledActionList = styled(PrimerActionList).withConfig({
+  shouldForwardProp: (prop: string | number, defaultValidator: (p: string | number) => boolean) =>
+    prop !== 'sx' && defaultValidator(prop),
 })`
   ${sx}
-`
+` as typeof PrimerActionList & {
+  <As extends React.ElementType = 'ul'>(props: ActionListProps<As>): React.ReactElement | null
+}
 
-const ActionListRoot = React.forwardRef(function ActionListRoot<As extends React.ElementType = 'ul'>(
+const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React.ElementType = 'ul'>(
   props: ActionListProps<As>,
-  ref: React.Ref<any>,
+  ref: React.ComponentPropsWithRef<As>['ref'],
 ) {
-  const {as, ...rest} = props
-  return <StyledActionListBase ref={ref} as={as as any} {...rest} />
-}) as <As extends React.ElementType = 'ul'>(
-  p: ActionListProps<As> & {ref?: React.Ref<any>},
-) => React.ReactElement | null
-
-const Item = forwardRef<any, ActionListItemProps>(function Item(props, ref) {
-  return <Box as={PrimerActionList.Item as any} ref={ref} {...props} />
+  return <StyledActionList ref={ref} {...props} />
 })
 
-const LinkItem = forwardRef<any, ActionListLinkItemProps>(function LinkItem(props, ref) {
-  return <Box as={PrimerActionList.LinkItem as any} ref={ref} {...props} />
-})
+const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> = styled(
+  PrimerActionList.LinkItem,
+).withConfig<ActionListLinkItemProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-const Group = forwardRef<any, ActionListGroupProps>(function Group(props, ref) {
-  return <Box as={PrimerActionList.Group as any} ref={ref} {...props} />
-})
+type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+const ActionListHeading: ForwardRefComponent<HeadingLevels, ActionListHeadingProps> = styled(
+  PrimerActionList.Heading,
+).withConfig<ActionListHeadingProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-const GroupHeading = (props: ActionListGroupHeadingProps) => (
-  <Box as={PrimerActionList.GroupHeading as any} {...props} />
-)
+type TrailingActionElements = 'button' | 'a'
+const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps> = styled(
+  PrimerActionList.TrailingAction,
+).withConfig<ActionListTrailingActionProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-const Divider = forwardRef<any, ActionListDividerProps>(function Divider(props, ref) {
-  return <Box as={PrimerActionList.Divider as any} ref={ref} {...props} />
+const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item(props, ref) {
+  return <Box ref={ref} as={PrimerActionList.Item} {...props} />
 })
 
-const Description = (props: ActionListDescriptionProps) => <Box as={PrimerActionList.Description as any} {...props} />
+function ActionListGroup(props: ActionListGroupProps) {
+  return <Box as={PrimerActionList.Group} {...props} />
+}
 
-const LeadingVisual = (props: ActionListLeadingVisualProps) => (
-  <Box as={PrimerActionList.LeadingVisual as any} {...props} />
-)
+function ActionListGroupHeading(props: ActionListGroupHeadingProps) {
+  return <Box as={PrimerActionList.GroupHeading} {...props} />
+}
 
-const TrailingVisual = (props: ActionListTrailingVisualProps) => (
-  <Box as={PrimerActionList.TrailingVisual as any} {...props} />
-)
+function ActionListDivider(props: ActionListDividerProps) {
+  return <Box as={PrimerActionList.Divider} {...props} />
+}
 
-const Heading = forwardRef<any, ActionListHeadingProps>(function Heading(props, ref) {
-  return <Box ref={ref} {...props} as={PrimerActionList.Heading as any} />
-})
+function ActionListDescription(props: ActionListDescriptionProps) {
+  return <Box as={PrimerActionList.Description} {...props} />
+}
 
-const TrailingAction = forwardRef<any, ActionListTrailingActionProps>(function TrailingAction(props, ref) {
-  return <Box as={PrimerActionList.TrailingAction as any} ref={ref} {...props} />
-})
+function ActionListLeadingVisual(props: ActionListLeadingVisualProps) {
+  return <Box as={PrimerActionList.LeadingVisual} {...props} />
+}
+
+function ActionListTrailingVisual(props: ActionListTrailingVisualProps) {
+  return <Box as={PrimerActionList.TrailingVisual} {...props} />
+}
 
-export const ActionList = Object.assign(ActionListRoot, {
-  Item,
-  LinkItem,
-  Group,
-  GroupHeading,
-  Divider,
-  Description,
-  LeadingVisual,
-  TrailingVisual,
-  Heading,
-  TrailingAction,
+export const ActionList = Object.assign(ActionListImpl, {
+  Item: ActionListItem,
+  LinkItem: ActionListLinkItem,
+  Group: ActionListGroup,
+  GroupHeading: ActionListGroupHeading,
+  Divider: ActionListDivider,
+  Description: ActionListDescription,
+  LeadingVisual: ActionListLeadingVisual,
+  TrailingVisual: ActionListTrailingVisual,
+  Heading: ActionListHeading,
+  TrailingAction: ActionListTrailingAction,
 })

From 72ef673bf9d6b50194d326b0c9258df86b873e3c Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 16:07:59 -0700
Subject: [PATCH 33/50] fix NavList to finish migration that ActionList relies
 on

---
 .../styled-react/src/components/NavList.tsx   | 75 +++++++++----------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index e653e22f441..43bb752dc7d 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -5,75 +5,70 @@ import type {
   NavListGroupProps as PrimerNavListGroupProps,
   NavListGroupHeadingProps as PrimerNavListGroupHeadingProps,
   NavListLeadingVisualProps as PrimerNavListLeadingVisualProps,
-  NavListTrailingVisualProps as PrimerNavListTrailingVisualProps,
-  NavListTrailingActionProps as PrimerNavListTrailingActionProps,
-  NavListGroupExpandProps as PrimerNavListGroupExpandProps,
 } from '@primer/react'
 import {forwardRef, type ComponentProps, type PropsWithChildren} from 'react'
 import {type SxProp} from '../sx'
 
+type RefComponent<E extends HTMLElement, P> = React.ForwardRefExoticComponent<P & React.RefAttributes<E>>
+
 type NavListProps = PropsWithChildren<PrimerNavListProps> & SxProp
-type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> & SxProp
-type NavListGroupProps = PropsWithChildren<PrimerNavListGroupProps> & SxProp
-type NavListGroupHeadingProps = PropsWithChildren<PrimerNavListGroupHeadingProps> & SxProp
-type NavListLeadingVisualProps = PropsWithChildren<PrimerNavListLeadingVisualProps> & SxProp
-type NavListTrailingVisualProps = PropsWithChildren<PrimerNavListTrailingVisualProps> & SxProp
-type NavListTrailingActionProps = PropsWithChildren<PrimerNavListTrailingActionProps> & SxProp
-type NavListGroupExpandProps = PropsWithChildren<PrimerNavListGroupExpandProps> & SxProp
 
 const NavListImpl = forwardRef<HTMLElement, NavListProps>(function NavList(props, ref) {
   return <Box as={PrimerNavList} ref={ref} {...props} />
 })
 
+type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> & SxProp
+
 const NavListItem = forwardRef<HTMLAnchorElement, NavListItemProps>(function NavListItem(props, ref) {
+  // @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type
   return <Box as={PrimerNavList.Item} ref={ref} {...props} />
 })
 
+type NavListGroupProps = PropsWithChildren<PrimerNavListGroupProps> & SxProp
+
 const NavListGroup = forwardRef<HTMLLIElement, NavListGroupProps>(function NavListGroup(props, ref) {
+  // @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type
   return <Box as={PrimerNavList.Group} ref={ref} {...props} />
 })
 
-// Add missing subcomponents with sx support
-const NavListGroupHeading = forwardRef<HTMLDivElement, NavListGroupHeadingProps>(
-  function NavListGroupHeading(props, ref) {
-    return <Box as={PrimerNavList.GroupHeading} ref={ref} {...props} />
-  },
-)
+type NavListGroupHeadingProps = PropsWithChildren<PrimerNavListGroupHeadingProps> & SxProp
+
+const NavListGroupHeading = forwardRef<HTMLElement, NavListGroupHeadingProps>(function NavListGroupHeading(props, ref) {
+  // @ts-expect-error - PrimerNavList.GroupHeading is not recognized as a valid component type
+  return <Box as={PrimerNavList.GroupHeading} ref={ref} {...props} />
+}) as RefComponent<HTMLElement, NavListGroupHeadingProps>
+
+type NavListLeadingVisualProps = PropsWithChildren<PrimerNavListLeadingVisualProps> & SxProp
 
 const NavListLeadingVisual = forwardRef<HTMLSpanElement, NavListLeadingVisualProps>(
   function NavListLeadingVisual(props, ref) {
+    // @ts-expect-error - PrimerNavList.LeadingVisual is not recognized as a valid component type
     return <Box as={PrimerNavList.LeadingVisual} ref={ref} {...props} />
   },
-)
+) as RefComponent<HTMLSpanElement, NavListLeadingVisualProps>
 
-const NavListTrailingVisual = forwardRef<HTMLSpanElement, NavListTrailingVisualProps>(
-  function NavListTrailingVisual(props, ref) {
-    return <Box as={PrimerNavList.TrailingVisual} ref={ref} {...props} />
-  },
-)
-
-const NavListTrailingAction = forwardRef<HTMLButtonElement, NavListTrailingActionProps>(
-  function NavListTrailingAction(props, ref) {
-    return <Box as={PrimerNavList.TrailingAction} ref={ref} {...props} />
-  },
-)
-
-const NavListGroupExpand = forwardRef<HTMLButtonElement, NavListGroupExpandProps>(
-  function NavListGroupExpand(props, ref) {
-    return <Box as={PrimerNavList.GroupExpand} ref={ref} {...props} />
-  },
-)
+type NavListCompound = React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLElement>> & {
+  Item: typeof NavListItem
+  Group: typeof NavListGroup
+  GroupHeading: typeof NavListGroupHeading
+  LeadingVisual: typeof NavListLeadingVisual
+  SubNav: typeof PrimerNavList.SubNav
+  Divider: typeof PrimerNavList.Divider
+  TrailingVisual: typeof PrimerNavList.TrailingVisual
+  TrailingAction: typeof PrimerNavList.TrailingAction
+  GroupExpand: typeof PrimerNavList.GroupExpand
+}
 
-const NavList = Object.assign(NavListImpl, {
+const NavList: NavListCompound = Object.assign(NavListImpl, {
   Item: NavListItem,
   Group: NavListGroup,
   GroupHeading: NavListGroupHeading,
   LeadingVisual: NavListLeadingVisual,
-  TrailingVisual: NavListTrailingVisual,
-  TrailingAction: NavListTrailingAction,
-  GroupExpand: NavListGroupExpand,
-  SubNav: PrimerNavList.SubNav as React.FC<React.PropsWithChildren<ComponentProps<typeof PrimerNavList.SubNav>>>,
-  Divider: PrimerNavList.Divider as React.FC<React.PropsWithChildren<ComponentProps<typeof PrimerNavList.Divider>>>,
+  SubNav: PrimerNavList.SubNav,
+  Divider: PrimerNavList.Divider,
+  TrailingVisual: PrimerNavList.TrailingVisual,
+  TrailingAction: PrimerNavList.TrailingAction,
+  GroupExpand: PrimerNavList.GroupExpand,
 })
 
 export {NavList, type NavListProps}

From 4a164bb4d739f911114284d5f901f01273047513 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 16:20:01 -0700
Subject: [PATCH 34/50] remove unused import

---
 packages/styled-react/src/components/NavList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index 43bb752dc7d..2c30ae5459b 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -6,7 +6,7 @@ import type {
   NavListGroupHeadingProps as PrimerNavListGroupHeadingProps,
   NavListLeadingVisualProps as PrimerNavListLeadingVisualProps,
 } from '@primer/react'
-import {forwardRef, type ComponentProps, type PropsWithChildren} from 'react'
+import {forwardRef, type PropsWithChildren} from 'react'
 import {type SxProp} from '../sx'
 
 type RefComponent<E extends HTMLElement, P> = React.ForwardRefExoticComponent<P & React.RefAttributes<E>>

From c98ad5681b8d8e1de2ea2e46df7a224d7b7f5405 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 1 Oct 2025 16:50:04 -0700
Subject: [PATCH 35/50] update to fix failing test

---
 packages/styled-react/src/components/ActionList.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 3b445450c45..2a6af364ded 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -32,8 +32,7 @@ export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
 export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
 
 const StyledActionList = styled(PrimerActionList).withConfig({
-  shouldForwardProp: (prop: string | number, defaultValidator: (p: string | number) => boolean) =>
-    prop !== 'sx' && defaultValidator(prop),
+  shouldForwardProp: (prop: string | number) => prop !== 'sx',
 })`
   ${sx}
 ` as typeof PrimerActionList & {
@@ -41,10 +40,10 @@ const StyledActionList = styled(PrimerActionList).withConfig({
 }
 
 const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React.ElementType = 'ul'>(
-  props: ActionListProps<As>,
+  {as, ...rest}: ActionListProps<As>,
   ref: React.ComponentPropsWithRef<As>['ref'],
 ) {
-  return <StyledActionList ref={ref} {...props} />
+  return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
 })
 
 const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> = styled(

From 8159c0208ce147e3db5919fbccb8e8c432d2552f Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 21:58:02 -0400
Subject: [PATCH 36/50] export prop types

---
 packages/styled-react/src/index.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 6f10f371517..a0ca7eff860 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -16,7 +16,20 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
-export {ActionList, type ActionListProps} from './components/ActionList'
+export {
+  ActionList,
+  type ActionListProps,
+  type ActionListItemProps,
+  type ActionListLinkItemProps,
+  type ActionListGroupProps,
+  type ActionListGroupHeadingProps,
+  type ActionListDividerProps,
+  type ActionListDescriptionProps,
+  type ActionListLeadingVisualProps,
+  type ActionListTrailingVisualProps,
+  type ActionListHeadingProps,
+  type ActionListTrailingActionProps,
+} from './components/ActionList'
 export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Avatar, type AvatarProps} from './components/Avatar'

From cd6264f37f41f667da03f49b2598a6d589b9fa6e Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 1 Oct 2025 22:24:18 -0400
Subject: [PATCH 37/50] fix types

---
 packages/styled-react/src/components/ActionList.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 2a6af364ded..200f9b1c98e 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -20,14 +20,14 @@ type PrimerActionListHeadingProps = React.ComponentProps<typeof PrimerActionList
 type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>
 
 export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
-export type ActionListItemProps = PrimerActionListItemProps & SxProp
+export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
-export type ActionListGroupProps = PrimerActionListGroupProps & SxProp
+export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
 export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
-export type ActionListDividerProps = PrimerActionListDividerProps & SxProp
-export type ActionListDescriptionProps = PrimerActionListDescriptionProps & SxProp
-export type ActionListLeadingVisualProps = PrimerActionListLeadingVisualProps & SxProp
-export type ActionListTrailingVisualProps = PrimerActionListTrailingVisualProps & SxProp
+export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>
+export type ActionListDescriptionProps = React.PropsWithChildren<PrimerActionListDescriptionProps & SxProp>
+export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>
+export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>
 export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
 export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
 

From dc36d949c6ec4ed4795a1b934053486ef980fa42 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 11:37:01 -0700
Subject: [PATCH 38/50] add test for item and fix sx not being passed issue

---
 .../__tests__/primer-react.browser.test.tsx    |  9 +++++++++
 .../styled-react/src/components/ActionList.tsx | 18 ++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 26a3f1ad75f..0d078fe91d4 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -52,6 +52,15 @@ describe('@primer/react', () => {
     expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })
 
+  test('ActionList Item supports `sx` prop', () => {
+    render(
+      <ActionList selectionVariant="single">
+        <ActionList.Item data-testid="component" sx={{background: 'red'}} />
+      </ActionList>,
+    )
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('ActionMenu.Button supports `sx` prop', () => {
     const {container} = render(<ActionMenu.Button sx={{background: 'red'}}>test</ActionMenu.Button>)
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 200f9b1c98e..91b47c5e02d 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -10,7 +10,10 @@ import {
   type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
+  useTheme,
+  theme as defaultTheme,
 } from '@primer/react'
+import css from '@styled-system/css'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
@@ -72,8 +75,19 @@ const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, Acti
   ${sx}
 `
 
-const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item(props, ref) {
-  return <Box ref={ref} as={PrimerActionList.Item} {...props} />
+const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item({sx, style, ...rest}, ref) {
+  const contextTheme = useTheme()
+  const theme = contextTheme.theme || defaultTheme
+
+  // If no sx prop is provided, just return PrimerToken directly
+  if (!sx) {
+    return <PrimerActionList.Item {...rest} style={style} ref={ref} />
+  }
+
+  // Convert sx to CSS styles using the theme context
+  const sxStyles = css(sx)(theme)
+  const mergedStyle = {...sxStyles, ...style}
+  return <PrimerActionList.Item {...rest} style={mergedStyle} ref={ref} />
 })
 
 function ActionListGroup(props: ActionListGroupProps) {

From 477ed5fe943c2e376365b324bbde2cdc81f19f9e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 14:36:02 -0700
Subject: [PATCH 39/50] fix description

---
 packages/styled-react/src/components/ActionList.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 91b47c5e02d..3a56f2cf78a 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -102,9 +102,13 @@ function ActionListDivider(props: ActionListDividerProps) {
   return <Box as={PrimerActionList.Divider} {...props} />
 }
 
-function ActionListDescription(props: ActionListDescriptionProps) {
-  return <Box as={PrimerActionList.Description} {...props} />
-}
+const ActionListDescription: React.ComponentType<ActionListDescriptionProps> = styled(
+  PrimerActionList.Description,
+).withConfig({
+  shouldForwardProp: prop => (prop as keyof ActionListDescriptionProps) !== 'sx',
+})`
+  ${sx}
+`
 
 function ActionListLeadingVisual(props: ActionListLeadingVisualProps) {
   return <Box as={PrimerActionList.LeadingVisual} {...props} />

From 692c064c24533470d645286e712cc9a49d830ac5 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 15:42:15 -0700
Subject: [PATCH 40/50] StyledActionListItem?

---
 .../__tests__/primer-react.browser.test.tsx   |  7 +++--
 .../src/components/ActionList.tsx             | 31 ++++++++-----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 0d078fe91d4..d7072a8de99 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -54,8 +54,11 @@ describe('@primer/react', () => {
 
   test('ActionList Item supports `sx` prop', () => {
     render(
-      <ActionList selectionVariant="single">
-        <ActionList.Item data-testid="component" sx={{background: 'red'}} />
+      <ActionList selectionVariant="single" showDividers>
+        <ActionList.Item data-testid="component" sx={{background: 'red'}} key={1} selected={true} onSelect={() => {}}>
+          item
+          <ActionList.Description variant="block"> description </ActionList.Description>
+        </ActionList.Item>
       </ActionList>,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 3a56f2cf78a..b473f713602 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -23,7 +23,9 @@ type PrimerActionListHeadingProps = React.ComponentProps<typeof PrimerActionList
 type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>
 
 export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
-export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>
+export type ActionListItemProps<As extends React.ElementType = 'li'> = React.PropsWithChildren<
+  PrimerActionListItemProps & SxProp
+>
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
 export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
 export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
@@ -75,20 +77,15 @@ const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, Acti
   ${sx}
 `
 
-const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item({sx, style, ...rest}, ref) {
-  const contextTheme = useTheme()
-  const theme = contextTheme.theme || defaultTheme
-
-  // If no sx prop is provided, just return PrimerToken directly
-  if (!sx) {
-    return <PrimerActionList.Item {...rest} style={style} ref={ref} />
-  }
+const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = styled(PrimerActionList.Item).withConfig({
+  shouldForwardProp: prop => (prop as keyof ActionListItemProps) !== 'sx',
+})<ActionListItemProps>`
+  ${sx}
+`
 
-  // Convert sx to CSS styles using the theme context
-  const sxStyles = css(sx)(theme)
-  const mergedStyle = {...sxStyles, ...style}
-  return <PrimerActionList.Item {...rest} style={mergedStyle} ref={ref} />
-})
+function ActionListItem<As extends React.ElementType = 'li'>({as, ...props}: ActionListItemProps<As>) {
+  return <StyledActionListItem {...props} {...(as ? {forwardedAs: as} : {})} />
+}
 
 function ActionListGroup(props: ActionListGroupProps) {
   return <Box as={PrimerActionList.Group} {...props} />
@@ -102,11 +99,9 @@ function ActionListDivider(props: ActionListDividerProps) {
   return <Box as={PrimerActionList.Divider} {...props} />
 }
 
-const ActionListDescription: React.ComponentType<ActionListDescriptionProps> = styled(
-  PrimerActionList.Description,
-).withConfig({
+const ActionListDescription = styled(PrimerActionList.Description).withConfig({
   shouldForwardProp: prop => (prop as keyof ActionListDescriptionProps) !== 'sx',
-})`
+})<ActionListDescriptionProps>`
   ${sx}
 `
 

From 6d19879a9c8942f4667bc470fb9bd86427ec4173 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 15:52:52 -0700
Subject: [PATCH 41/50] description, heading and groupheading

---
 .../__tests__/primer-react.browser.test.tsx   | 12 ----
 .../src/components/ActionList.tsx             | 61 ++++++-------------
 2 files changed, 19 insertions(+), 54 deletions(-)

diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index d7072a8de99..26a3f1ad75f 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -52,18 +52,6 @@ describe('@primer/react', () => {
     expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })
 
-  test('ActionList Item supports `sx` prop', () => {
-    render(
-      <ActionList selectionVariant="single" showDividers>
-        <ActionList.Item data-testid="component" sx={{background: 'red'}} key={1} selected={true} onSelect={() => {}}>
-          item
-          <ActionList.Description variant="block"> description </ActionList.Description>
-        </ActionList.Item>
-      </ActionList>,
-    )
-    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('ActionMenu.Button supports `sx` prop', () => {
     const {container} = render(<ActionMenu.Button sx={{background: 'red'}}>test</ActionMenu.Button>)
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index b473f713602..3d0b9a853be 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -10,30 +10,21 @@ import {
   type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
-  useTheme,
-  theme as defaultTheme,
 } from '@primer/react'
-import css from '@styled-system/css'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
 
-type PrimerActionListGroupHeadingProps = React.ComponentProps<typeof PrimerActionList.GroupHeading>
-type PrimerActionListHeadingProps = React.ComponentProps<typeof PrimerActionList.Heading>
 type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>
 
 export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
-export type ActionListItemProps<As extends React.ElementType = 'li'> = React.PropsWithChildren<
-  PrimerActionListItemProps & SxProp
->
+export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
 export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
-export type ActionListGroupHeadingProps = PrimerActionListGroupHeadingProps & SxProp
 export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>
 export type ActionListDescriptionProps = React.PropsWithChildren<PrimerActionListDescriptionProps & SxProp>
 export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>
 export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>
-export type ActionListHeadingProps = PrimerActionListHeadingProps & SxProp
 export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
 
 const StyledActionList = styled(PrimerActionList).withConfig({
@@ -59,15 +50,6 @@ const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> = st
   ${sx}
 `
 
-type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-const ActionListHeading: ForwardRefComponent<HeadingLevels, ActionListHeadingProps> = styled(
-  PrimerActionList.Heading,
-).withConfig<ActionListHeadingProps>({
-  shouldForwardProp: prop => prop !== 'sx',
-})`
-  ${sx}
-`
-
 type TrailingActionElements = 'button' | 'a'
 const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps> = styled(
   PrimerActionList.TrailingAction,
@@ -77,34 +59,18 @@ const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, Acti
   ${sx}
 `
 
-const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = styled(PrimerActionList.Item).withConfig({
-  shouldForwardProp: prop => (prop as keyof ActionListItemProps) !== 'sx',
-})<ActionListItemProps>`
-  ${sx}
-`
-
-function ActionListItem<As extends React.ElementType = 'li'>({as, ...props}: ActionListItemProps<As>) {
-  return <StyledActionListItem {...props} {...(as ? {forwardedAs: as} : {})} />
-}
+const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item(props, ref) {
+  return <Box ref={ref} as={PrimerActionList.Item} {...props} />
+})
 
 function ActionListGroup(props: ActionListGroupProps) {
   return <Box as={PrimerActionList.Group} {...props} />
 }
 
-function ActionListGroupHeading(props: ActionListGroupHeadingProps) {
-  return <Box as={PrimerActionList.GroupHeading} {...props} />
-}
-
 function ActionListDivider(props: ActionListDividerProps) {
   return <Box as={PrimerActionList.Divider} {...props} />
 }
 
-const ActionListDescription = styled(PrimerActionList.Description).withConfig({
-  shouldForwardProp: prop => (prop as keyof ActionListDescriptionProps) !== 'sx',
-})<ActionListDescriptionProps>`
-  ${sx}
-`
-
 function ActionListLeadingVisual(props: ActionListLeadingVisualProps) {
   return <Box as={PrimerActionList.LeadingVisual} {...props} />
 }
@@ -113,15 +79,26 @@ function ActionListTrailingVisual(props: ActionListTrailingVisualProps) {
   return <Box as={PrimerActionList.TrailingVisual} {...props} />
 }
 
-export const ActionList = Object.assign(ActionListImpl, {
+export const ActionList: typeof ActionListImpl & {
+  Item: typeof ActionListItem
+  LinkItem: typeof ActionListLinkItem
+  Group: typeof ActionListGroup
+  GroupHeading: typeof PrimerActionList.GroupHeading
+  Divider: typeof ActionListDivider
+  Description: typeof PrimerActionList.Description
+  LeadingVisual: typeof ActionListLeadingVisual
+  TrailingVisual: typeof ActionListTrailingVisual
+  Heading: typeof PrimerActionList.Heading
+  TrailingAction: typeof ActionListTrailingAction
+} = Object.assign(ActionListImpl, {
   Item: ActionListItem,
   LinkItem: ActionListLinkItem,
   Group: ActionListGroup,
-  GroupHeading: ActionListGroupHeading,
+  GroupHeading: PrimerActionList.GroupHeading,
   Divider: ActionListDivider,
-  Description: ActionListDescription,
+  Description: PrimerActionList.Description,
   LeadingVisual: ActionListLeadingVisual,
   TrailingVisual: ActionListTrailingVisual,
-  Heading: ActionListHeading,
+  Heading: PrimerActionList.Heading,
   TrailingAction: ActionListTrailingAction,
 })

From ca3373de15643447200f12d9b6e2ee8ec756eced Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 16:01:17 -0700
Subject: [PATCH 42/50] fix export

---
 packages/styled-react/src/components/ActionList.tsx | 2 --
 packages/styled-react/src/index.tsx                 | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 3d0b9a853be..c61a8802486 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -7,7 +7,6 @@ import {
   type ActionListLinkItemProps as PrimerActionListLinkItemProps,
   type ActionListGroupProps as PrimerActionListGroupProps,
   type ActionListDividerProps as PrimerActionListDividerProps,
-  type ActionListDescriptionProps as PrimerActionListDescriptionProps,
   type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
   type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
 } from '@primer/react'
@@ -22,7 +21,6 @@ export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemPr
 export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
 export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
 export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>
-export type ActionListDescriptionProps = React.PropsWithChildren<PrimerActionListDescriptionProps & SxProp>
 export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>
 export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>
 export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index a0ca7eff860..f79fd1a6cf2 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -22,12 +22,9 @@ export {
   type ActionListItemProps,
   type ActionListLinkItemProps,
   type ActionListGroupProps,
-  type ActionListGroupHeadingProps,
   type ActionListDividerProps,
-  type ActionListDescriptionProps,
   type ActionListLeadingVisualProps,
   type ActionListTrailingVisualProps,
-  type ActionListHeadingProps,
   type ActionListTrailingActionProps,
 } from './components/ActionList'
 export {ActionMenu} from './components/ActionMenu'

From 46430920d753a6e4a943df1b9c450a54ad23b63a Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Thu, 2 Oct 2025 17:40:32 -0700
Subject: [PATCH 43/50] feedbacks

---
 packages/react/src/ActionList/Description.tsx |  4 +
 packages/react/src/ActionList/Divider.tsx     | 12 ++-
 packages/react/src/ActionList/Heading.tsx     |  1 +
 .../react/src/ActionList/TrailingAction.tsx   |  5 +-
 .../SelectPanel.examples.stories.module.css   |  1 -
 .../SelectPanel.examples.stories.tsx          |  1 +
 .../src/components/ActionList.tsx             | 87 +++++++++++++------
 7 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
index 3a326e9c10d..9a9283ee567 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/packages/react/src/ActionList/Description.tsx
@@ -14,6 +14,7 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 
   className?: string
+  style?: React.CSSProperties
   /**
    * Whether the inline description should truncate the text on overflow.
    */
@@ -24,6 +25,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
   variant = 'inline',
   className,
   truncate,
+  style,
   ...props
 }) => {
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
@@ -45,6 +47,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
       <span
         id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        style={style}
         data-component="ActionList.Description"
       >
         {props.children}
@@ -56,6 +59,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        style={style}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"
diff --git a/packages/react/src/ActionList/Divider.tsx b/packages/react/src/ActionList/Divider.tsx
index 3e5168d11bb..2899e0c2519 100644
--- a/packages/react/src/ActionList/Divider.tsx
+++ b/packages/react/src/ActionList/Divider.tsx
@@ -4,11 +4,19 @@ import classes from './ActionList.module.css'
 
 export type ActionListDividerProps = {
   className?: string
+  style?: React.CSSProperties
 }
 
 /**
  * Visually separates `Items or `Groups in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className}) => {
-  return <li className={clsx(className, classes.Divider)} aria-hidden="true" data-component="ActionList.Divider" />
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className, style}) => {
+  return (
+    <li
+      className={clsx(className, classes.Divider)}
+      style={style}
+      aria-hidden="true"
+      data-component="ActionList.Divider"
+    />
+  )
 }
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index a59e9be08ca..0d1945193ef 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -16,6 +16,7 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
+  style?: React.CSSProperties
 }
 
 export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index d974bd0ab9a..daa68dac8ba 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -25,12 +25,13 @@ export type ActionListTrailingActionProps = ElementProps & {
   icon?: React.ElementType
   label: string
   className?: string
+  style?: React.CSSProperties
 }
 
 export const TrailingAction = forwardRef(
-  ({as = 'button', icon, label, href = null, className, loading, ...props}, forwardedRef) => {
+  ({as = 'button', icon, label, href = null, className, style, loading, ...props}, forwardedRef) => {
     return (
-      <span className={clsx(className, classes.TrailingAction)}>
+      <span className={clsx(className, classes.TrailingAction)} style={style}>
         {icon ? (
           <IconButton
             as={as}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
index 4c0fa3ab456..af5ee03ad03 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
@@ -74,7 +74,6 @@
 }
 
 .ButtonContentStartJustify [data-component='buttonContent'] {
-  width: 200px;
   justify-content: start;
 }
 
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index ef678664f71..15616ace1d7 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -763,6 +763,7 @@ export const NestedSelection = () => {
         onClick={() => setPanelToShow('repos')}
         variant="invisible"
         trailingAction={GearIcon}
+        style={{width: '200px'}}
         className={classes.ButtonContentStartJustify}
       >
         Development
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index c61a8802486..67375b1ba8a 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {
   ActionList as PrimerActionList,
@@ -12,18 +12,23 @@ import {
 } from '@primer/react'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
-import {Box} from './Box'
 
 type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>
 
 export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp
 export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>
-export type ActionListLinkItemProps = PrimerActionListLinkItemProps & SxProp
+export type ActionListLinkItemProps = PrimerActionListLinkItemProps &
+  SxProp & {
+    as?: React.ElementType
+  }
 export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>
 export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>
 export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>
 export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>
-export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps & SxProp
+export type ActionListTrailingActionProps = PrimerActionListTrailingActionProps &
+  SxProp & {
+    as?: React.ElementType
+  }
 
 const StyledActionList = styled(PrimerActionList).withConfig({
   shouldForwardProp: (prop: string | number) => prop !== 'sx',
@@ -40,42 +45,72 @@ const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React
   return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
 })
 
-const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> = styled(
-  PrimerActionList.LinkItem,
-).withConfig<ActionListLinkItemProps>({
-  shouldForwardProp: prop => prop !== 'sx',
+const StyledActionListLinkItem = styled(PrimerActionList.LinkItem).withConfig({
+  shouldForwardProp: (prop: string | number) => prop !== 'sx',
 })`
   ${sx}
 `
 
+const ActionListLinkItem = React.forwardRef<HTMLAnchorElement, ActionListLinkItemProps>(({as, ...props}, ref) => (
+  <StyledActionListLinkItem {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+)) as ForwardRefComponent<'a', ActionListLinkItemProps>
+
 type TrailingActionElements = 'button' | 'a'
-const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps> = styled(
-  PrimerActionList.TrailingAction,
-).withConfig<ActionListTrailingActionProps>({
+const StyledActionListTrailingAction = styled(PrimerActionList.TrailingAction).withConfig({
+  shouldForwardProp: (prop: string | number) => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const ActionListTrailingAction = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ActionListTrailingActionProps>(
+  ({as, ...props}, ref) => <StyledActionListTrailingAction {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />,
+) as ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps>
+
+const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = styled(
+  PrimerActionList.Item,
+).withConfig<ActionListItemProps>({
   shouldForwardProp: prop => prop !== 'sx',
 })`
   ${sx}
 `
 
-const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(function Item(props, ref) {
-  return <Box ref={ref} as={PrimerActionList.Item} {...props} />
-})
+const ActionListItem = React.forwardRef<HTMLLIElement, ActionListItemProps>(({children, as, ...props}, ref) => (
+  <StyledActionListItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
+    {children}
+  </StyledActionListItem>
+)) as ForwardRefComponent<'li', ActionListItemProps>
 
-function ActionListGroup(props: ActionListGroupProps) {
-  return <Box as={PrimerActionList.Group} {...props} />
-}
+const ActionListGroup: React.ComponentType<ActionListGroupProps> = styled(
+  PrimerActionList.Group,
+).withConfig<ActionListGroupProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-function ActionListDivider(props: ActionListDividerProps) {
-  return <Box as={PrimerActionList.Divider} {...props} />
-}
+const ActionListDivider: React.ComponentType<ActionListDividerProps> = styled(
+  PrimerActionList.Divider,
+).withConfig<ActionListDividerProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-function ActionListLeadingVisual(props: ActionListLeadingVisualProps) {
-  return <Box as={PrimerActionList.LeadingVisual} {...props} />
-}
+const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> = styled(
+  PrimerActionList.LeadingVisual,
+).withConfig<ActionListLeadingVisualProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
-function ActionListTrailingVisual(props: ActionListTrailingVisualProps) {
-  return <Box as={PrimerActionList.TrailingVisual} {...props} />
-}
+const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> = styled(
+  PrimerActionList.TrailingVisual,
+).withConfig<ActionListTrailingVisualProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
 
 export const ActionList: typeof ActionListImpl & {
   Item: typeof ActionListItem

From ce962346b18a7b7fc04303279ee7abaad9272ece Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 3 Oct 2025 09:39:06 -0700
Subject: [PATCH 44/50] fix ref type

---
 .../styled-react/src/components/ActionList.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index a00297f2856..1d5f3e5a375 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -54,10 +54,18 @@ const StyledActionListTrailingAction = styled(PrimerActionList.TrailingAction).w
   ${sx}
 `
 
-const ActionListTrailingAction = React.forwardRef<any, ActionListTrailingActionProps>((props, ref) => {
-  const {as, ...rest} = props as any
-  return <StyledActionListTrailingAction {...rest} {...(as ? {forwardedAs: as} : {})} ref={ref} />
-}) as ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps>
+const ActionListTrailingAction = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ActionListTrailingActionProps>(
+  (props, ref) => {
+    const {as, ...rest} = props as ActionListTrailingActionProps & {as?: React.ElementType}
+    return (
+      <StyledActionListTrailingAction
+        {...rest}
+        {...(as ? {forwardedAs: as} : {})}
+        ref={ref as React.Ref<HTMLElement>}
+      />
+    )
+  },
+) as ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps>
 
 const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = styled(
   PrimerActionList.Item,

From e89b83761939ab8d6f9afd0f2b3cf6948460fa2e Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Fri, 3 Oct 2025 11:02:21 -0700
Subject: [PATCH 45/50] fff

---
 packages/react/src/UnderlineNav/UnderlineNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 1ccb37dc51a..244aadee19e 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -138,7 +138,7 @@ const baseMenuInlineStyles: React.CSSProperties = {
   top: '90%',
   boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   borderRadius: 12,
-  background: '#fff',
+  background: 'var(--overlay-bgColor)',
   listStyle: 'none',
   minWidth: `${baseMenuMinWidth}px`,
   maxWidth: '640px',

From 308920df61ad567a37464a9b6736af4d04363603 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 09:19:28 -0400
Subject: [PATCH 46/50] remove sx prop from ActionList and style fixes

---
 .../react/src/FilteredActionList/types.ts     |  3 +--
 .../src/UnderlineNav/UnderlineNav.test.tsx    | 17 ------------
 .../react/src/UnderlineNav/UnderlineNav.tsx   | 26 +++++++++----------
 3 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts
index 9bca16f3d5e..17b600cb778 100644
--- a/packages/react/src/FilteredActionList/types.ts
+++ b/packages/react/src/FilteredActionList/types.ts
@@ -1,5 +1,4 @@
 import type {Key} from 'react'
-import type {SxProp} from '../sx'
 import type {Merge} from '../utils/polymorphic'
 import type {Group} from '../ActionList/Group'
 import type {ActionListGroupProps} from '../deprecated'
@@ -11,7 +10,7 @@ export type ItemInput =
   | Merge<React.ComponentPropsWithoutRef<'div'>, FilteredActionListItemProps>
   | ((Partial<FilteredActionListItemProps> & {renderItem: RenderItemFn}) & {key?: Key})
 
-export interface FilteredActionListItemProps extends SxProp {
+export interface FilteredActionListItemProps {
   /**
    * Primary text which names an `Item`.
    */
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
index e205e043c99..e3b5b99b585 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
@@ -14,7 +14,6 @@ import {
 } from '@primer/octicons-react'
 
 import {UnderlineNav} from '.'
-import {baseMenuMinWidth, menuStyles} from './styles'
 
 const ResponsiveUnderlineNav = ({
   selectedItemText = 'Code',
@@ -166,22 +165,6 @@ describe('UnderlineNav', () => {
     spy.mockRestore()
   })
 
-  it(`menuStyles should set the menu position, if the container size is below ${baseMenuMinWidth} px`, () => {
-    // GIVEN
-    // Mock the refs.
-    const containerRef = document.createElement('div')
-    const listRef = document.createElement('div')
-    // Set the clientWidth on the mock element
-    Object.defineProperty(listRef, 'clientWidth', {value: baseMenuMinWidth - 1})
-
-    // WHEN
-    const results = menuStyles(containerRef, listRef)
-
-    // THEN
-    // We are expecting a left value back, that way we know the `getAnchoredPosition` ran.
-    expect(results).toEqual(expect.objectContaining({left: 0}))
-  })
-
   it('should support icons passed in as an element', () => {
     render(
       <UnderlineNav aria-label="Repository">
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 1ccb37dc51a..8a04a8302c9 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -6,7 +6,7 @@ import {useResizeObserver} from '../hooks/useResizeObserver'
 import {useTheme} from '../ThemeProvider'
 import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
 import VisuallyHidden from '../_VisuallyHidden'
-import {moreBtnStyles, getDividerStyle, menuStyles, menuItemStyles, baseMenuMinWidth} from './styles'
+import {moreBtnStyles, getDividerStyle, menuItemStyles, baseMenuMinWidth} from './styles'
 import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
 import styled from 'styled-components'
 import {Button} from '../Button'
@@ -18,6 +18,7 @@ import {ActionList} from '../ActionList'
 import CounterLabel from '../CounterLabel'
 import {invariant} from '../utils/invariant'
 import classes from './UnderlineNav.module.css'
+import {getAnchoredPosition} from '@primer/behaviors'
 
 export type UnderlineNavProps = {
   children: React.ReactNode
@@ -131,7 +132,7 @@ const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: numb
   return breakpoint
 }
 
-// Inline styles converted from baseMenuStyles and menuStyles for use as CSSProperties
+// Inline styles converted from baseMenuStyles for use as CSSProperties
 const baseMenuInlineStyles: React.CSSProperties = {
   position: 'absolute',
   zIndex: 1,
@@ -312,18 +313,15 @@ export const UnderlineNav = forwardRef(
     // Compute menuInlineStyles if needed
     let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles}
     if (containerRef.current && listRef.current) {
-      const menuStyleObj = menuStyles(containerRef.current, listRef.current)
-      if (
-        menuStyleObj &&
-        typeof menuStyleObj === 'object' &&
-        'left' in menuStyleObj &&
-        typeof (menuStyleObj as {left: string | number}).left !== 'undefined'
-      ) {
-        menuInlineStyles = {
-          ...baseMenuInlineStyles,
-          right: undefined,
-          left: (menuStyleObj as {left: string | number}).left,
-        }
+      const {left} = getAnchoredPosition(containerRef.current, listRef.current, {
+        align: 'start',
+        side: 'outside-bottom',
+      })
+
+      menuInlineStyles = {
+        ...baseMenuInlineStyles,
+        right: undefined,
+        left: left,
       }
     }
 

From 2628f9451c31df8b5139158d63a8eca6cd85842c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 09:21:54 -0400
Subject: [PATCH 47/50] remove unneeded styles

---
 packages/react/src/UnderlineNav/styles.ts | 32 -----------------------
 1 file changed, 32 deletions(-)

diff --git a/packages/react/src/UnderlineNav/styles.ts b/packages/react/src/UnderlineNav/styles.ts
index 2295c558562..872d322546a 100644
--- a/packages/react/src/UnderlineNav/styles.ts
+++ b/packages/react/src/UnderlineNav/styles.ts
@@ -1,6 +1,4 @@
 import type {Theme} from '../ThemeProvider'
-import type {BetterSystemStyleObject} from '../sx'
-import {getAnchoredPosition} from '@primer/behaviors'
 
 export const getDividerStyle = (theme?: Theme) => ({
   display: 'inline-block',
@@ -35,33 +33,3 @@ export const menuItemStyles = {
 }
 
 export const baseMenuMinWidth = 192
-export const baseMenuStyles: BetterSystemStyleObject = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  borderRadius: '12px',
-  backgroundColor: 'canvas.overlay',
-  listStyle: 'none',
-  // Values are from ActionMenu
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: '0',
-}
-
-/**
- *
- * @param containerRef The Menu List Container Reference.
- * @param listRef The Underline Nav Container Reference.
- * @description This calculates the position of the menu
- */
-export const menuStyles = (containerRef: Element | null, listRef: Element | null): BetterSystemStyleObject => {
-  if (containerRef && listRef) {
-    const {left} = getAnchoredPosition(containerRef, listRef, {align: 'start', side: 'outside-bottom'})
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {right, ...rest} = baseMenuStyles
-    return {...rest, left}
-  }
-
-  return baseMenuStyles
-}

From 9bc76ef0efba6ceeb111dedc21113cf2b8ed5b49 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 11:50:51 -0400
Subject: [PATCH 48/50] lint fix

---
 packages/react/src/UnderlineNav/UnderlineNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index e27dc4e1d88..c60f11f88b6 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -321,7 +321,7 @@ export const UnderlineNav = forwardRef(
       menuInlineStyles = {
         ...baseMenuInlineStyles,
         right: undefined,
-        left: left,
+        left,
       }
     }
 

From bdaf93c1df51896858a0db0744fe7507645e37ac Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 12:33:15 -0400
Subject: [PATCH 49/50] support style in ItemInput (replacement for sx)

---
 packages/react/src/FilteredActionList/types.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts
index 17b600cb778..5685d375360 100644
--- a/packages/react/src/FilteredActionList/types.ts
+++ b/packages/react/src/FilteredActionList/types.ts
@@ -101,6 +101,10 @@ export interface FilteredActionListItemProps {
    * An item to pass back in the `onAction` callback, meant as
    */
   item?: ItemInput
+  /**
+   * inline styles to apply to the list item
+   */
+  style?: React.CSSProperties
 }
 
 /**

From c173eda97c9e18f0176645f7a5613d44fe8a227b Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 6 Oct 2025 12:59:58 -0400
Subject: [PATCH 50/50] support className instead of style for ItemInput

---
 packages/react/src/FilteredActionList/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts
index 5685d375360..68e0ca62458 100644
--- a/packages/react/src/FilteredActionList/types.ts
+++ b/packages/react/src/FilteredActionList/types.ts
@@ -102,9 +102,9 @@ export interface FilteredActionListItemProps {
    */
   item?: ItemInput
   /**
-   * inline styles to apply to the list item
+   * className to apply to the list item
    */
-  style?: React.CSSProperties
+  className?: string
 }
 
 /**