@sanity/ui 3.1.14 → 3.3.0

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.1.14",
+  "version": "3.3.0",
   "keywords": [
     "sanity",
     "ui",

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/breadcrumbs/breadcrumbs.test.tsx

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Box} from '../../primitives'
+import {Breadcrumbs} from './breadcrumbs'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Box: jest.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
+  }
+})
+
+function renderBreadcrumbs(props: Partial<React.ComponentProps<typeof Breadcrumbs>> = {}) {
+  return render(
+    <Breadcrumbs {...props}>
+      <span>Root</span>
+      <span>Section</span>
+    </Breadcrumbs>,
+  )
+}
+
+describe('components/breadcrumbs spacing', () => {
+  const mockedBox = jest.mocked(Box)
+
+  beforeEach(() => {
+    mockedBox.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderBreadcrumbs({space: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+
+    mockedBox.mockClear()
+    renderBreadcrumbs({gap: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderBreadcrumbs({gap: 3, space: 1})
+    const propsList = mockedBox.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({paddingX: [3]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({paddingX: [1]}))
+  })
+})

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -20,6 +20,10 @@ import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 export interface BreadcrumbsProps {
   maxLength?: number
   separator?: React.ReactNode
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
 }
 
@@ -30,8 +34,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = _getArrayProp(spaceRaw)
+  const {children, gap, maxLength, separator, space: deprecated_space = 2, ...restProps} = props
+  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -101,7 +105,7 @@ function useItems({
       <Popover
         constrainSize
         content={
-          <Stack as="ol" overflow="auto" padding={space} space={space}>
+          <Stack as="ol" overflow="auto" padding={space} gap={space}>
             {rawItems.slice(beforeLength - 1, len - afterLength)}
           </Stack>
         }

package/src/core/components/hotkeys/hotkeys.test.tsx

@@ -0,0 +1,42 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Inline} from '../../primitives'
+import {Hotkeys} from './hotkeys'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Inline: jest.fn((props: Record<string, unknown>) => (actual.Inline as any).render(props, null)),
+  }
+})
+
+describe('components/hotkeys spacing', () => {
+  const mockedInline = jest.mocked(Inline)
+
+  beforeEach(() => {
+    mockedInline.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(<Hotkeys keys={['Ctrl', 'S']} space={2} />)
+    expect(mockedInline.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: [2]}),
+    )
+
+    mockedInline.mockClear()
+    render(<Hotkeys gap={2} keys={['Ctrl', 'S']} />)
+    expect(mockedInline.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<Hotkeys gap={3} keys={['Ctrl', 'S']} space={1} />)
+    const propsList = mockedInline.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [3]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: [1]}))
+  })
+})

package/src/core/components/hotkeys/hotkeys.tsx

@@ -10,8 +10,12 @@ import {Radius} from '../../types'
  */
 export interface HotkeysProps {
   fontSize?: number | number[]
+  gap?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   keys?: string[]
 }
@@ -40,8 +44,8 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>,
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = _getArrayProp(spaceProp)
+  const {fontSize, gap, keys, padding, radius, space: deprecated_space = 0.5, ...restProps} = props
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   if (!keys || keys.length === 0) {
     return <></>
@@ -49,7 +53,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
 
   return (
     <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
-      <Inline as="span" space={space}>
+      <Inline as="span" gap={spacing}>
         {keys.map((key, i) => (
           <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}

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/menu.spacing.test.tsx

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from '../../primitives'
+import {Menu} from './menu'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Stack: jest.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
+  }
+})
+
+jest.mock('../../utils', () => {
+  const actual = jest.requireActual('../../utils')
+
+  return {
+    ...actual,
+    useLayer: () => ({isTopLayer: true}),
+  }
+})
+
+describe('components/menu spacing', () => {
+  const mockedStack = jest.mocked(Stack)
+
+  beforeEach(() => {
+    mockedStack.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Menu space={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedStack.mockClear()
+    render(
+      <Menu gap={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Menu gap={3} space={1}>
+        <div>Item</div>
+      </Menu>,
+    )
+    const propsList = mockedStack.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

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

@@ -27,6 +27,10 @@ export interface MenuProps extends ResponsivePaddingProps {
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
+  'gap'?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   'space'?: number | number[]
   'aria-labelledby'?: string
   'onBlurCapture'?: (event: FocusEvent) => void
@@ -61,9 +65,11 @@ export const Menu = forwardRef(function Menu(
     padding = 1,
     registerElement,
     shouldFocus: _shouldFocus,
-    space = 1,
+    gap,
+    space: deprecated_space = 1,
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const shouldFocus =
     _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
@@ -164,7 +170,7 @@ export const Menu = forwardRef(function Menu(
         role="menu"
         tabIndex={-1}
       >
-        <Stack space={space}>{children}</Stack>
+        <Stack gap={spacing}>{children}</Stack>
       </StyledMenu>
     </MenuContext.Provider>
   )

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

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Flex} from '../../primitives'
+import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuGroup} from './menuGroup'
+import {MenuItem} from './menuItem'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../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),
+  }
+})
+
+const menuContextValue: MenuContextValue = {
+  version: 2,
+  activeElement: null,
+  mount: () => () => undefined,
+  onItemMouseEnter: () => undefined,
+  onItemMouseLeave: () => undefined,
+}
+
+function renderMenuGroup(props: Partial<React.ComponentProps<typeof MenuGroup>> = {}) {
+  return render(
+    <MenuContext.Provider value={menuContextValue}>
+      <MenuGroup id="menu-group" text="Menu group" {...props}>
+        <MenuItem id="submenu-item" text="Submenu item" />
+      </MenuGroup>
+    </MenuContext.Provider>,
+  )
+}
+
+describe('components/menuGroup spacing', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderMenuGroup({space: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedFlex.mockClear()
+    renderMenuGroup({gap: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderMenuGroup({gap: 3, space: 1})
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

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<
@@ -31,6 +30,10 @@ export interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
@@ -39,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',
@@ -53,11 +58,13 @@ export function MenuGroup(
     padding = 3,
     popover,
     radius = 2,
-    space = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     tone = 'default',
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const menu = useMenu()
   const {scheme} = useRootTheme()
   const {
@@ -193,7 +200,7 @@ export function MenuGroup(
         tabIndex={-1}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Flex gap={space} padding={padding}>
+        <Flex gap={spacing} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
@@ -216,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.spacing.test.tsx

@@ -0,0 +1,59 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Flex} from '../../primitives'
+import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuItem} from './menuItem'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+  }
+})
+
+const menuContextValue: MenuContextValue = {
+  version: 2,
+  activeElement: null,
+  mount: () => () => undefined,
+  onItemMouseEnter: () => undefined,
+  onItemMouseLeave: () => undefined,
+}
+
+function renderMenuItem(props: Partial<React.ComponentProps<typeof MenuItem>> = {}) {
+  return render(
+    <MenuContext.Provider value={menuContextValue}>
+      <MenuItem id="menu-item" text="Menu item" {...props} />
+    </MenuContext.Provider>,
+  )
+}
+
+describe('components/menuItem spacing', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderMenuItem({space: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedFlex.mockClear()
+    renderMenuItem({gap: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderMenuItem({gap: 3, space: 1})
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

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,14 +23,17 @@ 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
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text?: React.ReactNode
   tone?: SelectableTone
@@ -38,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 {
@@ -62,11 +70,13 @@ export const MenuItem = forwardRef(function MenuItem(
     pressed,
     radius = 2,
     selected: selectedProp,
-    space = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     tone = 'default',
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
@@ -137,7 +147,7 @@ export const MenuItem = forwardRef(function MenuItem(
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
+        <Flex as="span" gap={spacing} align="center" {...paddingProps}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
@@ -177,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