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
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/Description.tsx b/packages/react/src/ActionList/Description.tsx
index c4624c6f061..9a9283ee567 100644
--- a/packages/react/src/ActionList/Description.tsx
+++ b/packages/react/src/ActionList/Description.tsx
@@ -1,9 +1,7 @@
 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'
 import {clsx} from 'clsx'
 
 export type ActionListDescriptionProps = {
@@ -16,17 +14,18 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 
   className?: string
+  style?: React.CSSProperties
   /**
    * 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,
+  style,
   ...props
 }) => {
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
@@ -45,15 +44,14 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
 
   if (variant === 'block' || !truncate) {
     return (
-      <BoxWithFallback
-        as="span"
-        sx={sx}
+      <span
         id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        style={style}
         data-component="ActionList.Description"
       >
         {props.children}
-      </BoxWithFallback>
+      </span>
     )
   } else {
     return (
@@ -61,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 5caa365a49c..09aee9fb7e3 100644
--- a/packages/react/src/ActionList/Divider.tsx
+++ b/packages/react/src/ActionList/Divider.tsx
@@ -1,23 +1,21 @@
 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'
 
-export type ActionListDividerProps = SxProp & {
+export type ActionListDividerProps = {
   className?: string
+  style?: React.CSSProperties
 }
 
 /**
- * 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>> = ({sx, className}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className, style}) => {
   return (
-    <BoxWithFallback
+    <li
       className={clsx(className, classes.Divider)}
-      as="li"
+      style={style}
       aria-hidden="true"
-      sx={sx}
       data-component="ActionList.Divider"
     />
   )
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}
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 55f858f6db2..0d1945193ef 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,8 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
-} & SxProp
+  style?: React.CSSProperties
+}
 
 export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)
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>
   )
 }
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)
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>
   )
 }
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/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
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>,
diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts
index 9bca16f3d5e..68e0ca62458 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`.
    */
@@ -102,6 +101,10 @@ export interface FilteredActionListItemProps extends SxProp {
    * An item to pass back in the `onAction` callback, meant as
    */
   item?: ItemInput
+  /**
+   * className to apply to the list item
+   */
+  className?: string
 }
 
 /**
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{' '}
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 24df16d225b..d36b799130b 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -5,7 +5,7 @@ import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
 import VisuallyHidden from '../_VisuallyHidden'
-import {moreBtnStyles, dividerStyles, menuStyles, menuItemStyles, baseMenuStyles, baseMenuMinWidth} from './styles'
+import {moreBtnStyles, dividerStyles, menuItemStyles, baseMenuMinWidth} from './styles'
 import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
 import styled from 'styled-components'
 import {Button} from '../Button'
@@ -17,6 +17,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
@@ -130,6 +131,20 @@ const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: numb
   return breakpoint
 }
 
+// Inline styles converted from baseMenuStyles 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: 'var(--overlay-bgColor)',
+  listStyle: 'none',
+  minWidth: `${baseMenuMinWidth}px`,
+  maxWidth: '640px',
+  right: 0,
+}
+
 export const UnderlineNav = forwardRef(
   (
     {
@@ -293,6 +308,21 @@ export const UnderlineNav = forwardRef(
         )
     }, navRef as RefObject<HTMLElement>)
 
+    // Compute menuInlineStyles if needed
+    let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles}
+    if (containerRef.current && listRef.current) {
+      const {left} = getAnchoredPosition(containerRef.current, listRef.current, {
+        align: 'start',
+        side: 'outside-bottom',
+      })
+
+      menuInlineStyles = {
+        ...baseMenuInlineStyles,
+        right: undefined,
+        left,
+      }
+    }
+
     return (
       <UnderlineNavContext.Provider
         value={{
@@ -333,12 +363,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 {
@@ -365,7 +395,7 @@ export const UnderlineNav = forwardRef(
                     return (
                       <ActionList.LinkItem
                         key={menuItemChildren}
-                        sx={menuItemStyles}
+                        style={menuItemStyles}
                         onClick={(
                           event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
                         ) => {
diff --git a/packages/react/src/UnderlineNav/styles.ts b/packages/react/src/UnderlineNav/styles.ts
index 763716b4e31..570a9b400e9 100644
--- a/packages/react/src/UnderlineNav/styles.ts
+++ b/packages/react/src/UnderlineNav/styles.ts
@@ -1,6 +1,3 @@
-import type {BetterSystemStyleObject} from '../sx'
-import {getAnchoredPosition} from '@primer/behaviors'
-
 export const dividerStyles = {
   display: 'inline-block',
   borderLeft: '1px solid',
@@ -34,33 +31,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
-}
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 bb3de22a978..af5ee03ad03 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;
@@ -60,3 +68,15 @@
   max-height: 0;
   overflow: hidden;
 }
+
+.FormControl {
+  margin-bottom: var(--base-size-8);
+}
+
+.ButtonContentStartJustify [data-component='buttonContent'] {
+  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 5bfde76d900..dd3cba2b143 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,8 @@ export const NestedSelection = () => {
         onClick={() => setPanelToShow('repos')}
         variant="invisible"
         trailingAction={GearIcon}
-        sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+        style={{width: '200px'}}
+        className={classes.ButtonContentStartJustify}
       >
         Development
       </Button>
@@ -791,7 +801,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 +873,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 +1011,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;...
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
new file mode 100644
index 00000000000..1d5f3e5a375
--- /dev/null
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+  ActionList as PrimerActionList,
+  type ActionListProps as PrimerActionListProps,
+  type ActionListItemProps as PrimerActionListItemProps,
+  type ActionListLinkItemProps as PrimerActionListLinkItemProps,
+  type ActionListGroupProps as PrimerActionListGroupProps,
+  type ActionListDividerProps as PrimerActionListDividerProps,
+  type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps,
+  type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps,
+} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+
+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 = React.PropsWithChildren<PrimerActionListLinkItemProps & SxProp>
+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 = React.PropsWithChildren<PrimerActionListTrailingActionProps & SxProp>
+
+const StyledActionList = styled(PrimerActionList).withConfig({
+  shouldForwardProp: (prop: keyof ActionListProps) => prop !== 'sx',
+})`
+  ${sx}
+` as typeof PrimerActionList & {
+  <As extends React.ElementType = 'ul'>(props: ActionListProps<As>): React.ReactElement | null
+}
+
+const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React.ElementType = 'ul'>(
+  {as, ...rest}: ActionListProps<As>,
+  ref: React.ComponentPropsWithRef<As>['ref'],
+) {
+  return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
+})
+
+const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> = styled(
+  PrimerActionList.LinkItem,
+).withConfig<ActionListLinkItemProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+type TrailingActionElements = 'button' | 'a'
+const StyledActionListTrailingAction = styled(PrimerActionList.TrailingAction).withConfig({
+  shouldForwardProp: (prop: keyof ActionListTrailingActionProps) => prop !== 'sx',
+})`
+  ${sx}
+`
+
+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,
+).withConfig<ActionListItemProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const ActionListItem = React.forwardRef<HTMLLIElement, ActionListItemProps>(({children, as, ...props}, ref) => (
+  <StyledActionListItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
+    {children}
+  </StyledActionListItem>
+)) as ForwardRefComponent<'li', ActionListItemProps>
+
+const ActionListGroup: React.ComponentType<ActionListGroupProps> = styled(
+  PrimerActionList.Group,
+).withConfig<ActionListGroupProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const ActionListDivider: React.ComponentType<ActionListDividerProps> = styled(
+  PrimerActionList.Divider,
+).withConfig<ActionListDividerProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> = styled(
+  PrimerActionList.LeadingVisual,
+).withConfig<ActionListLeadingVisualProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> = styled(
+  PrimerActionList.TrailingVisual,
+).withConfig<ActionListTrailingVisualProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+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: PrimerActionList.GroupHeading,
+  Divider: ActionListDivider,
+  Description: PrimerActionList.Description,
+  LeadingVisual: ActionListLeadingVisual,
+  TrailingVisual: ActionListTrailingVisual,
+  Heading: PrimerActionList.Heading,
+  TrailingAction: ActionListTrailingAction,
+})
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index 2519af4870e..2c30ae5459b 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -3,10 +3,14 @@ import type {
   NavListProps as PrimerNavListProps,
   NavListItemProps as PrimerNavListItemProps,
   NavListGroupProps as PrimerNavListGroupProps,
+  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>>
+
 type NavListProps = PropsWithChildren<PrimerNavListProps> & SxProp
 
 const NavListImpl = forwardRef<HTMLElement, NavListProps>(function NavList(props, ref) {
@@ -27,30 +31,44 @@ const NavListGroup = forwardRef<HTMLLIElement, NavListGroupProps>(function NavLi
   return <Box as={PrimerNavList.Group} ref={ref} {...props} />
 })
 
-const NavList = Object.assign(NavListImpl, {
-  // Wrapped components that need sx support added back in
+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>
+
+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: NavListCompound = Object.assign(NavListImpl, {
   Item: NavListItem,
   Group: NavListGroup,
-
-  // Re-exporting others directly
-  // TODO: try to remove typecasts to work around "non-portable types" TS error
-  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>>
-  >,
+  GroupHeading: NavListGroupHeading,
+  LeadingVisual: NavListLeadingVisual,
+  SubNav: PrimerNavList.SubNav,
+  Divider: PrimerNavList.Divider,
+  TrailingVisual: PrimerNavList.TrailingVisual,
+  TrailingAction: PrimerNavList.TrailingAction,
+  GroupExpand: PrimerNavList.GroupExpand,
 })
 
 export {NavList, type NavListProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 93bf010a5f1..88e659b1ab6 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'
@@ -19,6 +18,17 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
+export {
+  ActionList,
+  type ActionListProps,
+  type ActionListItemProps,
+  type ActionListLinkItemProps,
+  type ActionListGroupProps,
+  type ActionListDividerProps,
+  type ActionListLeadingVisualProps,
+  type ActionListTrailingVisualProps,
+  type ActionListTrailingActionProps,
+} from './components/ActionList'
 export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Avatar, type AvatarProps} from './components/Avatar'