remove sx from ActionList/Visuals and update styled-react exports

Author: llastflowers

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

packages/styled-react/src/index.tsx

@@ -1,4 +1,6 @@
 import {
+  ActionList as PrimerActionList,
+  type ActionListProps as PrimerActionListProps,
   type BetterSystemStyleObject,
   Box,
   type BoxProps,
@@ -68,6 +70,14 @@ type StyledProps = SxProp &
   PositionProps &
   ShadowProps
 
+type ActionListProps = PrimerActionListProps & SxProp
+
+const ActionList: ForwardRefComponent<'div', ActionListProps> = styled(PrimerActionList).withConfig<ActionListProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
 type SpinnerProps = PrimerSpinnerProps & SxProp
 
 function Spinner(props: SpinnerProps) {
@@ -257,6 +267,7 @@ export {Header, type HeaderProps} from './components/Header'
 export {Flash} from './components/Flash'
 
 export {
+  ActionList,
   Checkbox,
   CounterLabel,
   LinkButton,
@@ -274,7 +285,6 @@ export {
 }
 
 export {
-  ActionList,
   ActionMenu,
   Autocomplete,
   Avatar,