@sanity/ui 3.1.14 → 3.3.0

package/src/core/primitives/flex/flex.tsx

@@ -8,31 +8,32 @@ import {
   responsiveFlexStyle,
   ResponsiveFlexStyleProps,
 } from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
 
 /**
  * @public
  */
-export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
+export interface FlexOwnProps
+  extends Omit<BoxOwnProps, 'display'>,
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+export type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
+
 const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
   flexItemStyle,
   responsiveFlexStyle,
 )
 
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export const Flex = forwardRef(function Flex(
-  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
+const FlexComponent = forwardRef(function Flex(
+  props: FlexOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
@@ -51,4 +52,13 @@ export const Flex = forwardRef(function Flex(
     />
   )
 })
-Flex.displayName = 'ForwardRef(Flex)'
+FlexComponent.displayName = 'ForwardRef(Flex)'
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export const Flex = FlexComponent as unknown as <E extends ElementType = 'div'>(
+  props: FlexProps<E>,
+) => React.JSX.Element

package/src/core/primitives/grid/grid.test.tsx

@@ -0,0 +1,80 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {responsiveGridStyle} from '../../styles/internal'
+import {Grid} from './grid'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridStyle: jest.fn(actual.responsiveGridStyle),
+  }
+})
+
+describe('primitives/grid', () => {
+  const mockedResponsiveGridStyle = jest.mocked(responsiveGridStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridStyle.mockClear()
+  })
+
+  it('should support `columns` and `gridTemplateColumns` with the same behavior', () => {
+    render(
+      <Grid columns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateColumns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+  })
+
+  it('should prefer `gridTemplateColumns` over `columns` when both are provided', () => {
+    render(
+      <Grid columns={1} gridTemplateColumns={3}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columns: [1]}),
+    )
+  })
+
+  it('should support `rows` and `gridTemplateRows` with the same behavior', () => {
+    render(
+      <Grid rows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateRows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+  })
+
+  it('should prefer `gridTemplateRows` over `rows` when both are provided', () => {
+    render(
+      <Grid gridTemplateRows={3} rows={1}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rows: [1]}),
+    )
+  })
+})

package/src/core/primitives/grid/grid.tsx

@@ -3,27 +3,44 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {ResponsiveGridProps} from '../types'
 
 /**
  * @public
  */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+export interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
 
 /**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
  * @public
  */
-export const Grid = forwardRef(function Grid(
-  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
+export type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
+
+const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+
+const GridComponent = forwardRef(function Grid(
+  props: GridOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'rows'
+    >,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
+  const {
+    as,
+    autoRows,
+    autoCols,
+    autoFlow,
+    columns,
+    gridTemplateColumns,
+    gap,
+    gapX,
+    gapY,
+    rows,
+    gridTemplateRows,
+    children,
+    ...restProps
+  } = props
 
   return (
     <StyledGrid
@@ -33,11 +50,11 @@ export const Grid = forwardRef(function Grid(
       $autoRows={_getArrayProp(autoRows)}
       $autoCols={_getArrayProp(autoCols)}
       $autoFlow={_getArrayProp(autoFlow)}
-      $columns={_getArrayProp(columns)}
+      $columns={_getArrayProp(gridTemplateColumns === undefined ? columns : gridTemplateColumns)}
       $gap={_getArrayProp(gap)}
       $gapX={_getArrayProp(gapX)}
       $gapY={_getArrayProp(gapY)}
-      $rows={_getArrayProp(rows)}
+      $rows={_getArrayProp(gridTemplateRows === undefined ? rows : gridTemplateRows)}
       forwardedAs={as}
       ref={ref}
     >
@@ -45,4 +62,13 @@ export const Grid = forwardRef(function Grid(
     </StyledGrid>
   )
 })
-Grid.displayName = 'ForwardRef(Grid)'
+GridComponent.displayName = 'ForwardRef(Grid)'
+
+/**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
+ * @public
+ */
+export const Grid = GridComponent as unknown as <E extends ElementType = 'div'>(
+  props: GridProps<E>,
+) => React.JSX.Element

package/src/core/primitives/heading/heading.tsx

@@ -9,7 +9,7 @@ import {
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {TextAlign} from '../../types'
+import {ElementType, Props, TextAlign} from '../../types'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
@@ -17,10 +17,9 @@ import {HeadingStyleProps} from './types'
 /**
  * @public
  */
-export interface HeadingProps {
+export interface HeadingOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -32,17 +31,17 @@ export interface HeadingProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+export type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
+
 const StyledHeading = styled.div<
   HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
 >(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
 
-/**
- * Typographic headings.
- *
- * @public
- */
-export const Heading = forwardRef(function Heading(
-  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+const HeadingComponent = forwardRef(function Heading(
+  props: HeadingOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {
@@ -77,4 +76,13 @@ export const Heading = forwardRef(function Heading(
     </StyledHeading>
   )
 })
-Heading.displayName = 'ForwardRef(Heading)'
+HeadingComponent.displayName = 'ForwardRef(Heading)'
+
+/**
+ * Typographic headings.
+ *
+ * @public
+ */
+export const Heading = HeadingComponent as unknown as <E extends ElementType = 'div'>(
+  props: HeadingProps<E>,
+) => React.JSX.Element

package/src/core/primitives/inline/inline.test.tsx

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Inline} from './inline'
+import {inlineSpaceStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+  }
+})
+
+describe('primitives/inline', () => {
+  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+
+  beforeEach(() => {
+    mockedInlineSpaceStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Inline space={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedInlineSpaceStyle.mockClear()
+    render(
+      <Inline gap={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Inline gap={3} space={1}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+  })
+})

package/src/core/primitives/inline/inline.tsx

@@ -2,30 +2,37 @@ import {Children, forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
-import {Box, BoxProps} from '../box'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 /**
  * @public
  */
-export interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
+export interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
+  /**
+   * The spacing between children.
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  /** The spacing between children. */
+  gap?: number | number[]
 }
 
-const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
-
 /**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
  * @public
  */
-export const Inline = forwardRef(function Inline(
-  props: InlineProps & React.HTMLProps<HTMLDivElement>,
+export type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
+
+const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+
+const InlineComponent = forwardRef(function Inline(
+  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
   ref,
 ) {
-  const {as, children: childrenProp, space, ...restProps} = props
+  const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
@@ -36,7 +43,7 @@ export const Inline = forwardRef(function Inline(
     <StyledInline
       data-ui="Inline"
       {...restProps}
-      $space={_getArrayProp(space)}
+      $space={_getArrayProp(spacing)}
       forwardedAs={as}
       ref={ref as any}
     >
@@ -44,4 +51,13 @@ export const Inline = forwardRef(function Inline(
     </StyledInline>
   )
 })
-Inline.displayName = 'ForwardRef(Inline)'
+InlineComponent.displayName = 'ForwardRef(Inline)'
+
+/**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
+ */
+export const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(
+  props: InlineProps<E>,
+) => React.JSX.Element

package/src/core/primitives/kbd/kbd.tsx

@@ -3,20 +3,24 @@ import {css, styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {Radius} from '../../types'
+import {ElementType, Props, Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
 
 /**
  * @public
  */
-export interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface KBDOwnProps {
   fontSize?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
 }
 
+/**
+ * @public
+ */
+export type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
+
 function kbdStyle() {
   return css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -37,13 +41,8 @@ function kbdStyle() {
 
 const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export const KBD = forwardRef(function KBD(
-  props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+const KBDComponent = forwardRef(function KBD(
+  props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
@@ -58,4 +57,13 @@ export const KBD = forwardRef(function KBD(
     </StyledKBD>
   )
 })
-KBD.displayName = 'ForwardRef(KBD)'
+KBDComponent.displayName = 'ForwardRef(KBD)'
+
+/**
+ * Used to define some text as keyboard input.
+ *
+ * @public
+ */
+export const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(
+  props: KBDProps<E>,
+) => React.JSX.Element

package/src/core/primitives/label/label.tsx

@@ -4,17 +4,16 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {TextAlign} from '../../types'
+import {ElementType, Props, TextAlign} from '../../types'
 import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {labelBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface LabelProps {
+export interface LabelOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -26,6 +25,11 @@ export interface LabelProps {
   weight?: ThemeFontWeightKey
 }
 
+/**
+ * @public
+ */
+export type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
+
 const StyledLabel = styled.div<{
   $accent?: boolean
   $align: TextAlign[]
@@ -33,13 +37,8 @@ const StyledLabel = styled.div<{
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
 
-/**
- * Typographic labels.
- *
- * @public
- */
-export const Label = forwardRef(function Label(
-  props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+const LabelComponent = forwardRef(function Label(
+  props: LabelOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -76,4 +75,13 @@ export const Label = forwardRef(function Label(
     </StyledLabel>
   )
 })
-Label.displayName = 'ForwardRef(Label)'
+LabelComponent.displayName = 'ForwardRef(Label)'
+
+/**
+ * Typographic labels.
+ *
+ * @public
+ */
+export const Label = LabelComponent as unknown as <E extends ElementType = 'div'>(
+  props: LabelProps<E>,
+) => React.JSX.Element

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -34,7 +34,7 @@ export default function SidePanelStory() {
         </Box>
       </Card>
       <BoundaryElementProvider element={sidePanel}>
-        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
+        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}}>
           <Stack padding={4} space={5}>
             <Text muted size={1}>
               Click the <code>reference</code> text below to toggle the popover.

package/src/core/primitives/select/select.test.tsx

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Select} from './select'
+import {selectStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    selectStyle: {
+      ...actual.selectStyle,
+      input: jest.fn(actual.selectStyle.input),
+    },
+  }
+})
+
+describe('primitives/select spacing', () => {
+  const mockedSelectInputStyle = jest.mocked(selectStyle.input)
+
+  beforeEach(() => {
+    mockedSelectInputStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Select space={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedSelectInputStyle.mockClear()
+    render(
+      <Select gap={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Select gap={3} space={1}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+    expect(mockedSelectInputStyle).not.toHaveBeenCalledWith(expect.objectContaining({$space: [1]}))
+  })
+})

package/src/core/primitives/select/select.tsx

@@ -14,8 +14,12 @@ import {selectStyle} from './styles'
  */
 export interface SelectProps {
   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[]
   customValidity?: string
 }
@@ -45,12 +49,14 @@ export const Select = forwardRef(function Select(
     customValidity,
     disabled,
     fontSize = 2,
+    gap,
     padding = 3,
     radius = 2,
     readOnly,
-    space = 3,
+    space: deprecated_space = 3,
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   const ref = useRef<HTMLSelectElement | null>(null)
 
@@ -70,7 +76,7 @@ export const Select = forwardRef(function Select(
         $fontSize={_getArrayProp(fontSize)}
         $padding={_getArrayProp(padding)}
         $radius={_getArrayProp(radius)}
-        $space={_getArrayProp(space)}
+        $space={_getArrayProp(spacing)}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/core/primitives/stack/stack.test.tsx

@@ -0,0 +1,57 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from './stack'
+import {responsiveStackSpaceStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    responsiveStackSpaceStyle: jest.fn(actual.responsiveStackSpaceStyle),
+  }
+})
+
+describe('primitives/stack', () => {
+  const mockedResponsiveStackSpaceStyle = jest.mocked(responsiveStackSpaceStyle)
+  beforeEach(() => {
+    mockedResponsiveStackSpaceStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Stack space={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+    mockedResponsiveStackSpaceStyle.mockClear()
+    render(
+      <Stack gap={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Stack gap={3} space={1}>
+        <span>One</span>
+        <span>Two</span>
+      </Stack>,
+    )
+    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$space: [3]}),
+    )
+  })
+})