@sanity/ui 3.2.0 → 3.3.1

package/dist/theme.d.mts

@@ -1,7 +1,7 @@
 import {ColorHueKey} from '@sanity/color'
 import {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
-import type {StyledObject} from 'styled-components'
+import type * as CSS_2 from 'csstype'
 
 /**
  * @public
@@ -229,11 +229,17 @@ export declare function createColorTheme(
 ): ThemeColorSchemes
 
 /**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
+ * A CSS-in-JS style object: standard CSS properties plus an index signature that allows nested
+ * selectors, at-rules and custom properties.
+ *
+ * This is a self-owned definition (based on `csstype`) so the published `.d.ts` types stay fully
+ * controlled by us and do not reference any external CSS-in-JS library types.
+ *
  * @internal
  */
-export declare type CSSObject = StyledObject<any>
+export declare interface CSSObject extends CSS_2.Properties<number | (string & {})> {
+  [key: string]: CSSObject | string | number | undefined
+}
 
 /** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 import {ColorHueKey} from '@sanity/color'
 import {ColorTint} from '@sanity/color'
 import {ColorTintKey} from '@sanity/color'
-import type {StyledObject} from 'styled-components'
+import type * as CSS_2 from 'csstype'
 
 /**
  * @public
@@ -229,11 +229,17 @@ export declare function createColorTheme(
 ): ThemeColorSchemes
 
 /**
- * Work around types that are missing in `styled-components@6`
- * https://github.com/styled-components/styled-components/issues/4062
+ * A CSS-in-JS style object: standard CSS properties plus an index signature that allows nested
+ * selectors, at-rules and custom properties.
+ *
+ * This is a self-owned definition (based on `csstype`) so the published `.d.ts` types stay fully
+ * controlled by us and do not reference any external CSS-in-JS library types.
+ *
  * @internal
  */
-export declare type CSSObject = StyledObject<any>
+export declare interface CSSObject extends CSS_2.Properties<number | (string & {})> {
+  [key: string]: CSSObject | string | number | undefined
+}
 
 /** @internal */
 export declare function getContrastRatio(bg: string, fg: string): number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "keywords": [
     "sanity",
     "ui",
@@ -15,7 +15,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/ui.git"
+    "url": "git+https://github.com/sanity-io/ui.git",
+    "directory": "packages/ui"
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
@@ -60,59 +61,6 @@
     "exports",
     "src"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint .",
-    "prepack": "pnpm build",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "release": "semantic-release",
-    "storybook:build": "storybook build -o storybook/storybook-static",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "lint-staged": {
-    "*": [
-      "prettier --write --cache --ignore-unknown"
-    ]
-  },
-  "prettier": "@sanity/prettier-config",
-  "release": {
-    "branches": [
-      {
-        "name": "v2",
-        "range": "2.x",
-        "channel": "v2"
-      },
-      "main",
-      {
-        "name": "static",
-        "channel": "static",
-        "prerelease": true
-      }
-    ],
-    "extends": "@sanity/semantic-release-preset"
-  },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.6",
     "@juggle/resize-observer": "^3.4.0",
@@ -129,12 +77,8 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.39.1",
     "@sanity/pkg-utils": "^8.1.29",
-    "@sanity/prettier-config": "^2.0.1",
-    "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^3.4.0",
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-docs": "^8.6.14",
@@ -163,10 +107,6 @@
     "@vitejs/plugin-react": "^5.0.4",
     "babel-plugin-react-compiler": "1.0.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "commitizen": "^4.3.1",
-    "cypress": "^13.17.0",
-    "cypress-real-events": "^1.14.0",
-    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-gha": "^1.6.0",
@@ -179,22 +119,16 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.3.0",
-    "http-server": "^14.1.1",
-    "husky": "^8.0.3",
     "jest": "^30.1.3",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.1.2",
-    "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^8.0.4",
-    "prettier": "^3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-is": "^19.2.0",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.5",
-    "semantic-release": "^24.2.7",
-    "start-server-and-test": "^2.1.0",
     "storybook": "^8.6.14",
     "styled-components": "npm:@sanity/styled-components@^6.1.23",
     "tsconfig-paths": "^4.2.0",
@@ -209,25 +143,28 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.9",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check",
+    "clean": "rimraf .workshop dist",
+    "dev": "run-p storybook:dev workshop:dev",
+    "lint": "eslint .",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "storybook:build": "storybook build -o storybook/storybook-static",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "pnpm build && workshop build",
+    "workshop:dev": "workshop dev"
   }
-}
+}

package/src/core/components/autocomplete/autocomplete.tsx

@@ -190,7 +190,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const rootElementRef = useRef<HTMLDivElement | null>(null)
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
-  const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  const listBoxElementRef = useRef<HTMLUListElement | null>(null)
   // Element refs that need to be accessed during render
   const [inputElement, _setInputElement] = useState<HTMLInputElement | null>(null)
   /**

package/src/core/components/autocomplete/types.ts

@@ -1,9 +1,9 @@
-import {ButtonProps} from '../../primitives'
+import {ButtonOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+export type AutocompleteOpenButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
 
 /**

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -16,7 +16,7 @@ const CustomLink = forwardRef(function CustomLink(
 })
 
 export default function AsComponentStory() {
-  const props = {href: '#'}
+  const props = {href: '#', req: 'example'}
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/components/menu/menuDivider.ts

@@ -1,12 +1,23 @@
 import {styled} from 'styled-components'
 
-/**
- * @public
- */
-export const MenuDivider = styled.hr`
+import {ElementType, EmptyProps, Props} from '../../types'
+
+const StyledMenuDivider = styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `
-MenuDivider.displayName = 'MenuDivider'
+StyledMenuDivider.displayName = 'MenuDivider'
+
+/**
+ * @public
+ */
+export type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>
+
+/**
+ * @public
+ */
+export const MenuDivider = StyledMenuDivider as unknown as <E extends ElementType = 'hr'>(
+  props: MenuDividerProps<E>,
+) => React.JSX.Element

package/src/core/components/menu/menuGroup.spacing.test.tsx

@@ -12,13 +12,7 @@ jest.mock('../../primitives', () => {
   return {
     ...actual,
     Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-    Popover: jest.fn(
-      ({
-        children,
-      }: {
-        children?: React.ReactNode
-      }) => children,
-    ),
+    Popover: jest.fn(({children}: {children?: React.ReactNode}) => children),
   }
 })
 

package/src/core/components/menu/menuGroup.tsx

@@ -6,15 +6,14 @@ import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
-import {Radius, SelectableTone} from '../../types'
+import {ElementType, Props, Radius, SelectableTone} from '../../types'
 import {Menu, MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
 /**
  * @public
  */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface MenuGroupOwnProps {
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
   menu?: Omit<
@@ -43,9 +42,11 @@ export interface MenuGroupProps {
 /**
  * @public
  */
-export function MenuGroup(
+export type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
+
+function MenuGroupComponent(
   props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
+    MenuGroupOwnProps & {as?: ElementType},
 ): React.JSX.Element {
   const {
     as = 'button',
@@ -222,4 +223,11 @@ export function MenuGroup(
   )
 }
 
-MenuGroup.displayName = 'MenuGroup'
+MenuGroupComponent.displayName = 'MenuGroup'
+
+/**
+ * @public
+ */
+export const MenuGroup = MenuGroupComponent as unknown as <E extends ElementType = 'button'>(
+  props: MenuGroupProps<E>,
+) => React.JSX.Element

package/src/core/components/menu/menuItem.tsx

@@ -15,6 +15,7 @@ import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
 import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
+import {ElementType, Props} from '../../types'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
@@ -22,8 +23,7 @@ import {useMenu} from './useMenu'
 /**
  * @public
  */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   hotkeys?: string[]
   icon?: React.ElementType | React.ReactNode
@@ -42,9 +42,13 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
 /**
  * @public
  */
-export const MenuItem = forwardRef(function MenuItem(
-  props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+export type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
+
+const MenuItemComponent = forwardRef(function MenuItem(
+  props: MenuItemOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'selected' | 'tabIndex'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -183,4 +187,11 @@ export const MenuItem = forwardRef(function MenuItem(
     </Selectable>
   )
 })
-MenuItem.displayName = 'ForwardRef(MenuItem)'
+MenuItemComponent.displayName = 'ForwardRef(MenuItem)'
+
+/**
+ * @public
+ */
+export const MenuItem = MenuItemComponent as unknown as <E extends ElementType = 'button'>(
+  props: MenuItemProps<E>,
+) => React.JSX.Element

package/src/core/components/skeleton/skeleton.tsx

@@ -1,7 +1,7 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {Box, BoxOwnProps, ResponsiveRadiusProps} from '../../primitives'
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
@@ -14,7 +14,7 @@ const StyledSkeleton = styled(Box)<
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
   animated?: boolean
   delay?: number
 }

package/src/core/components/tab/tabList.tsx

@@ -1,12 +1,12 @@
 import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Inline, InlineProps} from '../../primitives'
+import {Inline, InlineOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+export interface TabListProps extends Omit<InlineOwnProps, 'height'> {
   children: Array<React.JSX.Element | null | undefined | false>
 }
 

package/src/core/components/tab/tabPanel.tsx

@@ -1,11 +1,11 @@
 import {forwardRef} from 'react'
 
-import {Box, BoxProps} from '../../primitives'
+import {Box, BoxOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabPanelProps extends BoxProps {
+export interface TabPanelProps extends BoxOwnProps {
   /**
    * The `id` of the correlating `Tab` component.
    */

package/src/core/components/toast/styles.ts

@@ -1,7 +1,7 @@
 import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {styled} from 'styled-components'
 
-import {Card, Flex} from '../../primitives'
+import {Card, type CardProps, Flex} from '../../primitives'
 import type {ButtonTone} from '../../types'
 
 const LOADING_BAR_HEIGHT = 2
@@ -61,7 +61,7 @@ export const LoadingBarMask = styled(Card)`
   z-index: 1;
 `
 
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
+type LoadingBarProgressProps = Omit<CardProps, 'tone'> & {
   tone: ThemeColorStateToneKey
 }
 export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -9,7 +9,7 @@ function test<ElementType = unknown>(
 }
 
 export const perfTests = [
-  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
+  test('Toggle tree groups', async ({target}: {target: HTMLUListElement}) => {
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')
 

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -19,7 +19,7 @@ export default function BasicStory() {
     if (testid) setId(testid)
   }, [])
 
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
     const elementFocus = event.target.getAttribute('data-testid')
     if (elementFocus) setFocus(elementFocus)
   }, [])

package/src/core/components/tree/tree.tsx

@@ -31,12 +31,12 @@ export interface TreeProps {
  */
 export const Tree = forwardRef(function Tree(
   props: TreeProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+  forwardedRef: React.ForwardedRef<HTMLUListElement>,
 ): React.JSX.Element {
   const {children, gap, space: deprecated_space = 1, onFocus, ...restProps} = props
   const spacing = gap === undefined ? deprecated_space : gap
-  const ref = useRef<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLUListElement | null>(null)
   const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
   const focusedElementRef = useRef(focusedElement)
   const path: string[] = useMemo(() => [], [])
@@ -44,7 +44,10 @@ export const Tree = forwardRef(function Tree(
   const [state, setState] = useState<TreeState>({})
   const stateRef = useRef(state)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLUListElement | null, HTMLUListElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => {
     focusedElementRef.current = focusedElement
@@ -102,7 +105,7 @@ export const Tree = forwardRef(function Tree(
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: React.KeyboardEvent<HTMLUListElement>) => {
       if (!focusedElementRef.current) return
 
       if (event.key === 'ArrowDown') {
@@ -199,7 +202,7 @@ export const Tree = forwardRef(function Tree(
   )
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
+    (event: React.FocusEvent<HTMLUListElement>) => {
       setFocusedElement(event.target)
 
       // Call the element's `focus` handler

package/src/core/components/tree/treeGroup.tsx

@@ -7,7 +7,7 @@ export interface TreeGroupProps {
 
 export function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
 ): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()

package/src/core/components/tree/treeItem.tsx

@@ -3,7 +3,8 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {startTransition, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {Box, Flex, Text} from '../../primitives'
+import {ElementType} from '../../types'
 import {
   treeItemBoxStyle,
   TreeItemBoxStyleProps,
@@ -24,7 +25,7 @@ export interface TreeItemProps {
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
+  linkAs?: ElementType
   padding?: number | number[]
   gap?: number | number[]
   /**

package/src/core/primitives/avatar/avatar.tsx

@@ -5,19 +5,18 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {AvatarPosition, AvatarSize, AvatarStatus, ElementType, Props} from '../../types'
 import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
  */
-export interface AvatarProps {
+export interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
@@ -31,6 +30,11 @@ export interface AvatarProps {
   title?: string
 }
 
+/**
+ * @public
+ */
+export type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>
+
 const StyledAvatar = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
@@ -50,13 +54,8 @@ const InitialsLabel = styled(Label)({
 
 const AvatarImage = styled.svg(avatarStyle.image)
 
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+const AvatarComponent = forwardRef(function Avatar(
+  props: AvatarOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -189,4 +188,13 @@ export const Avatar = forwardRef(function Avatar(
     </StyledAvatar>
   )
 })
-Avatar.displayName = 'ForwardRef(Avatar)'
+AvatarComponent.displayName = 'ForwardRef(Avatar)'
+
+/**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
+ * @public
+ */
+export const Avatar = AvatarComponent as unknown as <E extends ElementType = 'div'>(
+  props: AvatarProps<E>,
+) => React.JSX.Element