diff --git a/.changeset/seven-cameras-act.md b/.changeset/seven-cameras-act.md
new file mode 100644
index 00000000000..4210c697aa3
--- /dev/null
+++ b/.changeset/seven-cameras-act.md
@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+'@primer/styled-react': minor
+---
+
+Update Avatar component to no longer support sx, add sx wrapper to @primer/styled-react
diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx
index 4738dacd805..0a97a0924d3 100644
--- a/packages/react/src/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.stories.tsx
@@ -62,10 +62,4 @@ Playground.argTypes = {
disable: true,
},
},
- sx: {
- controls: false,
- table: {
- disable: true,
- },
- },
}
diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx
index 37ce09f89f4..113b656d470 100644
--- a/packages/react/src/Avatar/Avatar.test.tsx
+++ b/packages/react/src/Avatar/Avatar.test.tsx
@@ -1,8 +1,6 @@
import {describe, expect, it} from 'vitest'
import {render, screen} from '@testing-library/react'
-import {Avatar} from '..'
-import {ThemeProvider} from '../ThemeProvider'
-import theme from '../theme'
+import Avatar from '../Avatar'
describe('Avatar', () => {
it('should support `className` on the outermost element', () => {
@@ -31,16 +29,6 @@ describe('Avatar', () => {
expect(avatar).toHaveAttribute('src', 'primer.png')
})
- it('respects margin props', () => {
- render(
-
-
- ,
- )
- const avatar = screen.getByTestId('avatar')
- expect(avatar).toHaveStyle(`margin: 8px`)
- })
-
it('should support the `style` prop without overriding internal styles', () => {
render(
+} & React.ComponentPropsWithoutRef<'img'>
const Avatar = React.forwardRef(function Avatar(
- {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp, className, style, ...rest},
+ {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, className, style, ...rest},
ref,
) {
const isResponsive = isResponsiveValue(size)
@@ -38,8 +35,7 @@ const Avatar = React.forwardRef(function Avatar(
}
return (
- (function Avatar(
}
: (cssSizeVars as React.CSSProperties)
}
- sx={sxProp}
{...rest}
/>
)
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
new file mode 100644
index 00000000000..bad340bf8bf
--- /dev/null
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -0,0 +1,12 @@
+import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
+import {forwardRef} from 'react'
+import type {StyledProps} from '../styled-props'
+import {Box} from './Box'
+
+type AvatarProps = PrimerAvatarProps & StyledProps
+const Avatar = forwardRef(function Avatar(props, ref) {
+ return
+})
+
+export {Avatar}
+export type {AvatarProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index da4ea253af7..5acfa15ef95 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -1,5 +1,4 @@
export {ActionList} from '@primer/react'
-export {Avatar} from '@primer/react'
export {Box, type BoxProps} from './components/Box'
export {Button} from '@primer/react'
export {Details} from '@primer/react'
@@ -21,6 +20,7 @@ export {useTheme} from '@primer/react'
export {ActionMenu} from './components/ActionMenu'
export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
+export {Avatar, type AvatarProps} from './components/Avatar'
export {Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps} from './components/Breadcrumbs'
export {Checkbox, type CheckboxProps} from './components/Checkbox'
export {CheckboxGroup, type CheckboxGroupProps} from './components/CheckboxGroup'